57
Este texto está diseñado para enseñar a confeccionar páginas web a través del uso directo del lenguaje HTML. El objetivo es adiestrar al lector en las técnicas para confeccionar páginas web para Internet/Intranet, así como enseñar los fundamentos sintácticos del lenguaje HTML. Los requisitos previos son: estar familiarizado con los aspectos básicos de Internet/Intranet, estar familiarizado con la navegación por la web, conocer el sistema operativo Windows a nivel de usuario. L L E E N N G G U U A A J J E E H H T T M M L L Iniciación

Programacion web lenguaje html

  • Upload
    jjsucre

  • View
    262

  • Download
    1

Embed Size (px)

Citation preview

Page 1: Programacion web   lenguaje html

Este texto estaacute disentildeado para ensentildear a confeccionar paacuteginas web a traveacutes del uso directo del lenguaje HTML El objetivo es adiestrar al lector en las teacutecnicas para confeccionar paacuteginas web para InternetIntranet asiacute como ensentildear los fundamentos sintaacutecticos del lenguaje HTML Los requisitos previos son estar familiarizado con los aspectos baacutesicos de InternetIntranet estar familiarizado con la navegacioacuten por la web conocer el sistema operativo Windows a nivel de usuario

LLEENNGGUUAAJJEE HHTTMMLL

Iniciacioacuten

Lenguaje HTML Versioacuten 100

2000 copy Grupo EIDOS wwwLaLibreriaDigitalcom

Iacutendice

IacuteNDICE 5 INTRODUCCIOacuteN AL HTML 7

iquestQUEacute ES HTML 7 REGLAS DE FORMATO 8 ESTRUCTURA DE UN DOCUMENTO HTML 9 NUESTRA PRIMERA PAacuteGINA HTML 9 FORMA DEL URL 10

Localizando un documento hypertexto (http) 10 Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol) 11 Accediendo a un grupo de noticias (news) 11 Accediendo a una direccioacuten e-mail (mailto) 11 Localizacioacuten de un archivo cualquiera (file) 11

CABECERA Y CUERPO DEL DOCUMENTO HTML 13 CABECERA 13 TIacuteTULO DEL DOCUMENTO 13 INDICADOR DE REFRESCO DEL DOCUMENTO 14 INDICADOR DE LA URL BASE DEL DOCUMENTO 14 CUERPO 15 CARACTERES ESPECIALES 17 ESPACIADO Y SALTOS DE LIacuteNEA 19

Inclusioacuten de espacios en blanco ampnbsp 19 Salto de liacutenea ltBRgt BR Break 19 Cambio de paacuterrafo ltPgt P Paragraph 19 Liacutenea Horizontal ltHRgt HR Horizontal Rule 20

Lenguaje HTML copy Grupo EIDOS

6

Texto preformateado ltPREgt PRE Preformatted 21 ELEMENTOS DEL LENGUAJE I 23

CABECERAS Y ATRIBUTOS DE TEXTO 23 Cabeceras ltH1gtltH6gt H Heading 23 Atributos del texto 24

LISTAS 26 Listas no numeradas ltULgt UL Unordered List 26 Listas numeradas ltOLgt OL Ordered List 27 Listas de definiciones ltDLgt DL Definition List 29

HIPERENLACES 29 Enlaces a otras paacuteginas ltA href=gt29 Enlaces dentro de la misma paacutegina ltA name=gt 30

IMAacuteGENES 31 ELEMENTOS DEL LENGUAJE II 37

TABLAS 37 FORMULARIOS 43

Entrada baacutesica de datos 44 Texto corto type=text 44 Claves type=password 45 Botones de seleccioacuten type=checkbox 45 Seleccioacuten entre varias opciones type=radio 46 Campos ocultos type=hidden 46 Botoacuten de enviacuteo de datos type=submit 47 Botoacuten graacutefico de enviacuteo de datos type=image 47 Botoacuten de borrado de datos type=reset 47

Entrada datos en muacuteltiples liacuteneas 48 Entrada de datos a traveacutes de campos de seleccioacuten 48

ELEMENTOS DEL LENGUAJE III 51 FRAMES 51

Estructura de un documento con frames 51 Definicioacuten de cada una de las frames 53

ELEMENTOS MULTIMEDIA 54 Sonido de fondo 54 Reproduccioacuten de viacutedeo 54 Insercioacuten de cualquier tipo de fichero 55

Introduccioacuten al HTML

iquestQueacute es HTML HTML es la abreviatura de HyperText Markup Language y es el lenguaje que todos los programas navegadores usan para presentar informacioacuten en la World Wide Web (WWW)

Este es un lenguaje muy sencillo que se basa en el uso de etiquetas consistentes en un texto ASCII encerrado dentro de un par de pareacutentesis angulares(ltgt) El texto incluido dentro de los pareacutentesis nos daraacute una explicacioacuten de la utilidad de la etiqueta Asiacute por ejemplo la etiqueta ltTABLEgt nos permitiraacute definir una tabla

Las etiquetas podraacuten incluir una serie de atributos o paraacutemetros en su mayoriacutea opcionales que nos permitiraacuten definir diferentes posibilidades o caracteriacutesticas de la misma Estos atributos quedaraacuten definidos por su nombre (que seraacute explicativo de su utilidad) y el valor que toman separados por un signo de igual En el caso de que el valor que tome el atributo tenga maacutes de una palabra deberaacute expresarse entre comillas en caso contrario no seraacute necesario Asiacute por ejemplo la etiqueta ltTABLEborder=2gt nos permitiraacute definir una tabla con borde de tamantildeo 2

Entre otras cosas el manejo de estas etiquetas nos permitiraacute

bull Definir la estructura loacutegica del documento HTML

bull Aplicar distintos estilos al texto (negrita cursiva )

Lenguaje HTML copy Grupo EIDOS

8

bull La inclusioacuten de hiperenlaces que nos permitiraacuten acceder a otros documentos relacionados con el actual

bull La inclusioacuten de imaacutegenes y ficheros multimedia (graacuteficos viacutedeo audio)

iquestQueacute vamos a necesitar para crear un documento HTML

bull Un procesador de textos para escribir y editar el coacutedigo HTML Este podraacute ser cualquiera que no formatee el texto ya que el leguaje HTML estaacute basado en el coacutedigo ASCCI Si usamos un procesador como el Word tendremos que guardar el documento como soacutelo texto

bull Un navegador Web como el Explorer Netscape Mosaic etc el cual se encargaraacute del interpretar el coacutedigo HTML de nuestro documento y mostraacuternoslo en todo su esplendor

La secuencia de trabajo para crear nuestro documento es

1 Con el procesador de texto crearemos el documento HTML y lo guardaremos con el nombre que deseemos a excepcioacuten de la extensioacuten que deberaacute ser necesariamente htm oacute html

2 Para visualizar nuestro documento HTML abriremos el documento con el programa navegador

Reglas de formato Todos los navegadores usan unas reglas baacutesicas para poder mostrar una paacutegina web con un buen formato

bull El espacio en blanco es ignorado Ya que un documento HTML puede estar en cualquier tipo de fuente y ademaacutes la ventana del navegador puede ser de cualquier tamantildeo

bull Las etiquetas pueden ser escritas en mayuacutesculas o en minuacutesculas En todo caso se aconseja su escritura en mayuacutesculas para poder distinguirlas del texto normal

bull Existe normalmente una etiqueta de inicio y otra de fin La etiqueta de fin contendraacute el mismo texto que la de inicio antildeadieacutendole al principio una barra inclinada La etiqueta afectaraacute por tanto a todo lo que esteacute incluido entre las etiquetas de inicio y fin No obstante existen algunas que no necesitan cierre ya que en estas etiquetas se presupone su final como por ejemplo ltPgt paacuterrafo ltBRgt salto de liacutenea oacute ltIMGgt inclusioacuten de una imagen

Vemos un ejemplo en la Tabla 1

Instruccioacuten HTML Resultado

ltBgtTexto en negritaltBgt Texto en negrita

ltHIgtTexto en cursivaltIgt Texto en cursiva

ltBgtltIgtTexto en negrita y cursivaltBgtltIgt Texto en negrita y cursiva

Tabla 1

copy Grupo EIDOS 1 Introduccioacuten al HTML

9

Estructura de un documento HTML La estructura baacutesica de un documento HTML es la siguiente

ltHTMLgt Indica el inicio del documento ltHEADgt Indica el inicio de la cabecera

ltTITLEgt Inicio del tiacutetulo del documento

ltTITLEgt Final del tiacutetulo del documento

ltHEADgt Final de la cabecera ltBODYgt Inicio del cuerpo del documento Instrucciones HTML ltBODYgt Final del cuerpo del documento ltHTMLgt Final del documento

Ninguno de estos elementos es obligatorio pudiendo crear documentos HTML sin incluir estas etiquetas de identificacioacuten No obstante es altamente recomendable la construccioacuten de paacuteginas HTML siguiendo esta estructura para una buena estructuracioacuten y legibilidad del coacutedigo

Nuestra primera paacutegina HTML Una vez que conocemos la estructura baacutesica de un documento HTML vamos a crear una paacutegina HTML muy sencillita

1 Lo primero seraacute abrir el procesador de textos que hayamos elegido y copiar el Coacutedigo fuente 1

ltHTMLgtltHEADgtltTITLEgt Mi primera paacutegina HTML ltTITLEgtltHEADgtltBODYgtEsta es mi primera paacutegina ltBgtHTMLltBgtltBODYgtltHTMLgt

Coacutedigo fuente 1

2 Una vez tecleado el coacutedigo guardamos el documento como Pagina1htm y procedemos a

abrirlo con el navegador correspondiente El resultado seraacute

Esta es mi primera paacutegina HTML

Lenguaje HTML copy Grupo EIDOS

10

Forma del URL El URL(Uniform Resource Locator) nos van a permitir localizar y acceder a cualquier recurso de la red desde nuestro programa navegador A traveacutes de los URL podremos referenciar cualquier fichero que deseemos incluir en nuestro documento HTML Cada elemento de Internet vendraacute definido por su URL correspondiente independientemente del tipo de servidor en el que se encuentre

La forma general del URL es

Tipo de servicio maquinadominiopuertocaminoarchivo

El Tipo de servicio como su propio nombre indica hace referencia a alguno de los servicios de Internet El servicio correspondiente al WWW es http (HiperText Transport Protocol) protocolo para la transmisioacuten de hipertexto Por lo que cualquier referencia a un documento HTML deberiacutea comenzar por http Otros servicios son ftp news telnet o mailto

La maacutequinadominio indica el nombre del servidor en que se encuentra el documento al que estamos haciendo referencia junto con el dominio al que pertenece dicho servidor

El puerto es opcional y lo normal es no ponerlo indicaacutendose soacutelo en el caso de que el servidor utilice un puerto distinto al puerto por defecto

El camino indica la ruta de directorios que hay que seguir para encontrar el documento que estamos referenciando

Finalmente especificaremos el nombre del archivo en que estaacute guardado el documento en cuestioacuten Si no indicamos un archivo accederemos al archivo por defecto del directorio al que estemos referenciando(En el caso del servicio http este archivo por defecto suele ser defaulthtm oacute defaulthtml)

Vamos a ver a continuacioacuten algunos ejemplos de URL s accediendo a distintos servicios de la WWW

Localizando un documento hypertexto (http) Sintaxis

httpmaquinadominiopuertocaminoarchivo

Ejemplo1 httpwwweidoses

En este ejemplo estamos indicando el servicio al que estamos accediendo (http) la maacutequina y el dominio tomaacutendose el resto de paraacutemetros por defecto de forma que accederemos al directorio raiacutez del servidor y al documento por defecto de ese directorio en este caso estamos accediendo a la paacutegina de portada de Villa Eidos

Ejemplo2 httpwwweidosesvulcaninformahtm

Con esta URL estamos accediendo al fichero informahtm que se encuentra en el directorio vulcan del servidor wwweidoses

copy Grupo EIDOS 1 Introduccioacuten al HTML

11

Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol) Sintaxis

ftpmaquinadominiopuertocaminoarchivo

Ejemplo ftp ftpjetespubauto_ftp

En este caso estamos accediendo al servicio ftp (protocolo de transferencia de archivos) ftpjetes En este caso no estamos indicando ninguacuten archivo con lo que se referenciaraacute un iacutendice con los contenidos del directorio pubauto_ftp

Accediendo a un grupo de noticias (news) Sintaxis

newsGRUPO

Ejemplo newsjetes

En este ejemplo estamos accediendo al grupo de noticias del servidor de news jetes

Accediendo a una direccioacuten e-mail (mailto) Sintaxis

mailto Destinatario_1 Destinatario_2Destinatario_n

Ejemplo mailtocursoseidoses

Enviaraacute un mail a la direccioacuten de correo electroacutenico indicada

Localizacioacuten de un archivo cualquiera (file) Sintaxis

filemaquinadominiopuertocaminoarchivo

Ejemplo filecwindows

En este caso estamos accediendo a la carpeta Windows de la unidad C de nuestro ordenador local

Cabecera y cuerpo del documento HTML

Cabecera Cabecera del documento HTML ltHEADgt

ltHEADgt

En la cabecera de un documento HTML incluiremos las definiciones generales que afecten a todo el documento como por ejemplo el tiacutetulo de la paacutegina que apareceraacute en la parte superior de la ventana del navegador

Las etiquetas ltHEADgt y ltHEADgt son las que van a delimitar la cabecera de nuestro documento Todas la etiquetas de la cabecera son opcionales aunque se recomienda incluir en todos nuestros documentos la etiqueta ltTITLEgt correspondiente al tiacutetulo del documento

A continuacioacuten vamos a tratar cada uno de los posibles componentes de la cabecera por separado

Tiacutetulo del documento ltTITLEgtltTITLEgt

El tiacutetulo de nuestro documento viene especificado por las etiquetas ltTITLEgt y ltTITLEgt y como ya hemos mencionado este tiacutetulo es el que apareceraacute en la ventana de nuestro programa

Lenguaje HTML copy Grupo EIDOS

14

navegador Lo normal y recomendable es que el tiacutetulo guarde relacioacuten con el contenido de nuestro documento ya que por ejemplo es utilizado por algunos servidores de buacutesqueda para poder intuir el contenido de nuestro documento Veamos un ejemplo en el Coacutedigo fuente 2

ltTITLEgtMi primera paacutegina WebltTITLEgt

Coacutedigo fuente 2

Indicador de refresco del documento ltMETA http-equiv=refresh content=nuacutemero_segundosurl=URL derefrescogt

Esta etiqueta sirve para indicar un documento que deberaacute sustituir al actual transcurrido un nuacutemero determinado de segundos Una posible utilidad de esta etiqueta podriacutea ser para visualizar documentos de forma secuencial de forma que se empieza por un documento y se pasa al siguiente transcurrido un periacuteodo de tiempo sin necesidad de que la persona que lee el documento realice ninguna accioacuten

Veamos un ejemplo en el Coacutedigo fuente 3

ltMETA http-equiv=refresh content=5url=httpwwweidosesgt

Coacutedigo fuente 3

Si insertamos esta instruccioacuten en la cabecera de nuestro paacutegina HTML transcurridos 5 segundos eacutesta se refrescaraacute con la paacutegina Web de portada de Villa Eidos

Indicador de la URL base del documento ltBASE href=URLgt

Con esta etiqueta indicamos la localizacioacuten de los ficheros a los que se hace referencia en nuestra paacutegina Web Si no incluimos esta etiqueta el navegador entenderaacute que dichos ficheros se encuentran en el mismo lugar donde reside nuestra paacutegina Web

Vemos un ejemplo en el Coacutedigo fuente 4

ltBASE href=httpwwweidosesvulcangt

Coacutedigo fuente 4

Si especificamos como URL base de nuestro documento HTML la indicada en este ejemplo y posteriormente hacemos referencia en nuestra paacutegina a un fichero llamado aulahtm se entenderaacute que la localizacioacuten del fichero es httpwwweidosesvulcanaulahtm

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

15

Cuerpo Cuerpo del documento HTML ltBODYgt

ltBODYgt

En el cuerpo de un documento HTML es donde incluiremos las distintas instrucciones del lenguaje junto con el contenido en siacute de nuestra paacutegina Web textos imaacutegenes enlaces a otras paacuteginas etc

Las etiquetas ltBODYgt y ltBODYgt son las que van a delimitar el cuerpo de nuestro documento Esta posee una serie de argumentos que nos van a permitir variar las caracteriacutesticas del documento en su conjunto como por ejemplo el color del texto o del color de fondo de nuestra paacutegina web

Antes de analizar los componentes y atributos de BODY vamos a ver como se especifican los colores en un documento HTML

Estos se pueden especificar por su nombre (name) o por su coacutedigo de color que es un nuacutemero compuesto de tres pares de cifras hexadecimales que nos indican la proporcioacuten de los colores primarios (rojo verde y azul) que forman el color deseado (rrggbb)

Nombre Coacutedigo de color Color mostrado

Black 000000 Negro

Teal 008080 Teal

Blue 0000FF Azul

Navy 000080 Azul marino

Lime 00FF00 Lima

White FFFFFF Blanco

Purple 800080 Puacuterpura

Yellow FFFF00 Amarillo

Olive 808000 Oliva

Red FF0000 Rojo

maroon 800000 Marroacuten

gray 808080 Gris

fuchsia FF00FF Fucsia

green 008000 Verde

Lenguaje HTML copy Grupo EIDOS

16

silver C0C0C0 Plata

aqua 00FFFF Agua

Tabla 2

La etiqueta ltBODYgt presenta una serie de atributos que van a afectar a todo el documento en su conjunto Estos atributos nos van a permitir definir los colores del texto del fondo y de los hiperenlaces del documento Incluso nos permitiraacuten insertar una imagen de fondo en nuestra paacutegina

ltBODY background=URL bgcolor=rrggbb oacute name text=namelink=name vlink=name gt

bull background=URL Nos va a permitir mostrar una imagen como fondo de nuestro

documento HTML El camino a esta imagen vendraacute especificado por la URL que definamos Si la imagen no rellena todo el fondo del documento eacutesta seraacute reproducida tantas veces como sea necesario hasta completar todo el fondo

Si insertas el Coacutedigo fuente 5 en el documento HTML que creamos como ejemplo en el capiacutetulo anterior Pagina1htm este presentaraacute como fondo la imagen fondogif

ltBODY background=fondogifgt

Coacutedigo fuente 5

bull bgcolor=rrggbb oacute name bgcolor Background Color Nos va a permitir definir un

color para el fondo de nuestro documento Este atributo seraacute ignorado si previamente hemos utilizado el atributo background

Inserte el Coacutedigo fuente 6 en Pagina1htm y compruebe el resultado

ltBODY bgcolor=bluegt

Coacutedigo fuente 6

bull text=rrggbb oacute name Nos permitiraacute definir un color para el texto de nuestro

documento Por defecto es negro Inserte el Coacutedigo fuente 7 en Pagina1html y compruebe el resultado

ltBODY text=redgt

Coacutedigo fuente 7

Y ahora inserte el Coacutedigo fuente 8 en el documento y comprueba el resultado

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

17

ltBODY bgcolor=yellow text=navygt

Coacutedigo fuente 8

bull link=rrggbb oacute name Indica el color que tendraacuten los hiperenlaces que no han sido

accedidos Por defecto es azul Como todaviacutea no sabemos insertar hiperenlaces en nuestro documento vamos a dejar el ejemplo correspondiente para maacutes adelante

bull vlink=rrggbb oacute name vlink Visited Links Indica el color de los hiperenlaces que ya han sido accedidos Por defecto es puacuterpura

Caracteres especiales Hasta ahora hemos escrito algunos ejemplos de coacutedigo HTML pero hemos pasado por alto algunas limitaciones de HTML respecto al uso de caracteres especiales Una de estas limitaciones es por ejemplo el uso de los caracteres lt y gt que como ya sabemos indican el inicio y fin de una etiqueta HTML Pues bien si quisieacuteramos escribir estos caracteres como parte normal de un texto el navegador no sabriacutea si se trata de texto normal o del comienzo y final de una etiqueta o sea que se hariacutea un liacuteo

Como todo tiene solucioacuten existen unos coacutedigos para poder escribir estos caracteres y otros relacionados con las etiquetas los vemos en la Tabla 3

Siacutembolo Coacutedigo

lt (menor que) amplt

gt (mayor que) ampgt

amp (ampersand) ampamp

(comillas) ampquot

Tabla 3

Para las letras especiacuteficas del idioma castellano las vocales acentuadas la ntilde la uuml y los signos iquest y iexcl existen los coacutedigos que muestra la Tabla 4

Letra Coacutedigo Letra Coacutedigo Letra Coacutedigo

aacute ampaacute Aacute ampAacute ntilde ampntilde

eacute ampeacute Eacute ampEacute Ntilde ampNtilde

iacute ampiacute

Iacute ampIacute

uuml ampuuml

Lenguaje HTML copy Grupo EIDOS

18

oacute ampoacute Oacute ampOacute Uuml ampUuml

uacute ampuacute Uacute ampUacute iquest amp191

iexcl amp161

Tabla 4

Para los navegadores actuales podemos escribir nuestro coacutedigo HTML de manera directa sin tener en cuenta estos coacutedigos pero nunca podemos asegurar que las personas que accedan a nuestras paacuteginas con otros navegadores puedan leerlas correctamente Asiacute que los maacutes adecuado es el empleo de los mismos Otros siacutembolos especiales aparecen en la Tabla 5

Siacutembolo Coacutedigo

Ccedil ampccedil

Ccedil ampCcedil

copy ampcopy

reg ampreg

Tabla 5

Veamos un ejemplo en el Coacutedigo fuente 9

ampquotLa inspiraciampoacuten existe pero tiene que encontrarse trabajandoampquotampcopy Pablo Ruampiacutez Picasso

Coacutedigo fuente 9

Esta instruccioacuten HTML deberiacutea producir el siguiente resultado

La inspiracioacuten existe pero tiene que encontrarse trabajando copyPablo Ruiacutez Picasso

Para la inclusioacuten de comentarios en nuestra paacutegina HTML podemos usar la etiqueta lt-- --gt Estos comentarios nos podraacuten servir para efectuar anotaciones en nuestro documento HTML que ayuden a una mayor comprensioacuten del coacutedigo En el Coacutedigo fuente 10 se muestra un ejemplo de comentario

lt-- Esto es un comentario y no seraacute mostrado por el navegador --gt

Coacutedigo fuente 10

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

19

Espaciado y saltos de liacutenea En HTML soacutelo se admite un uacutenico espacio en blanco separando cualquier elemento o texto el resto de espacios seraacuten ignorados por el navegador al igual que las tabulaciones retornos de carro etc Veamos un ejemplo en la Tabla 6

Ejemplo Resultado

Esta frase no se veraacute asiacute en el visor Esta frase no se veraacute asiacute en el visor

Tabla 6

No obstante siacute podremos dar el formato que deseemos a nuestras paacuteginas con el empleo de los siguientes elementos del lenguaje HTML

Inclusioacuten de espacios en blanco ampnbsp Nos permitiraacute la inclusioacuten de maacutes de un espacio en blanco entre dos textos consecutivos de forma que estos espacios se muestren de forma efectiva en el navegador Tendremos que incluir tantas expresiones ampnbsp como espacios en blanco se deseen incluir

Ejemplo Resultado

Texto1ampnbspampnbspampnbspampnbspTexto2 Texto1 Texto2

Tabla 7

Salto de liacutenea ltBRgt BR Break Nos permite dar un salto a la liacutenea siguiente en el punto donde la etiqueta sea insertada

Ejemplo Resultado

Esta frase tiene aquiacuteltBRgt un salto de liacutenea Esta frase tiene aquiacute un salto de liacutenea

Tabla 8

Cambio de paacuterrafo ltPgt P Paragraph Permite definir un paacuterrafo introduciendo normalmente un espacio de separacioacuten de dos liacuteneas con el texto siguiente al punto donde hayamos insertado la etiqueta ltPgt

Lenguaje HTML copy Grupo EIDOS

20

Ejemplo Resultado

Esta frase tiene aquiacuteltPgt un cambio de paacuterrafo Esta frase tiene aquiacute

un cambio de paacuterrafo

Tabla 9

La etiqueta de fin paacuterrafo ltPgt es opcional no siendo necesario incluirla Aunque siempre es recomendable delimitar claramente el inicio y final de un paacuterrafo Ademaacutes cuando usemos esta etiqueta como cerrada ltPgt ltPgt tenemos la posibilidad de incluirle el atributo align el cual indica al navegador la forma de justificar el texto incluido en el paacuterrafo El formato seriacutea el siguiente

ltP align= left right center justify gtTexto contenido en elpaacuterrafo ltPgt

Veamos algunos ejemplos en la Tabla 10

Ejemplo Resultado

ltP align=rightgtEste es un ejemplode paacuterrafo alineado a laderechaltPgt

Este es un ejemplo de paacuterrafo alineado a la derecha

ltP align=centergtEste es unejemplo de paacuterrafo centradoltPgt

Este es un ejemplo de paacuterrafo centrado

Tabla 10

Liacutenea Horizontal ltHRgt HR Horizontal Rule Nos permite insertar una liacutenea horizontal cuyo tamantildeo podremos determinar a traveacutes de sus atributos Si no especificamos ninguacuten atributo dibujaraacute una liacutenea que ocupe el ancho de la pantalla del navegador Su utilidad es la de permitirnos dividir nuestra paacutegina en distintas secciones No seraacute necesaria la etiqueta de fin ltHRgt

El formato de la etiqueta con sus posibles atributos es

ltHR align= left right center noshade size=n width=n gt

bull align= left right center Permite establecer la alineacioacuten de la liacutenea a la izquierda a la derecha o centrarla

bull noshade No muestra la sombra de la liacutenea evitando el efecto de tres dimensiones

bull size=n Indica el grosor de la liacutenea en pixels

bull width=n oacute n Especificaraacute el ancho de la liacutenea este se podraacute especificar en pixels (n) o en tanto por ciento del ancho de la ventana (n) Vamos a ver algunos ejemplos en la Tabla 11

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

21

Ejemplo Resultado

ltHRgt

ltHR size=3 noshadegt

ltHR size=5width=50align=rightgt

ltHR size=10width=50align=centergt

Tabla 11

Texto preformateado ltPREgt PRE Preformatted Nos permitiraacute visualizar el texto tal y como se ha escrito respetando los saltos de liacutenea las tabulaciones y espacios en blanco de todo el texto incluido entre las etiquetas ltPREgt y ltPREgt

El texto se mostraraacute con una fuente de espaciado fijo maacutes pequentildea que el texto normal No es recomendable su uso ya que presenta muchas limitaciones y no se obtiene una buena presentacioacuten

Ejemplo Resultado

ltPREgtEste texto estaacutepreformateadoltPREgt

Este texto estaacute preformateado

Tabla 12

Elementos del lenguaje I

Cabeceras y atributos de texto

Cabeceras ltH1gtltH6gt H Heading En un documento HTML podemos incluir seis tipos distintos de cabeceras que van a constituir normalmente el tiacutetulo y los distintos subapartados que forman el documento aunque podremos utilizarlas en el punto que queramos del documento para resaltar cualquier texto Estas cabeceras son definidas por las etiquetas ltH1gtltH2gtltH3gtltH4gtltH5gt y ltH6gt El texto que componga cada cabecera deberaacute estar incluido entre las etiquetas de inicio (ltHngt) y fin (Hn) correspondiente La cabecera ltH1gtseraacute la que muestre el texto de mayor tamantildeo este tamantildeo iraacute disminuyendo hasta llegar a la cabecera ltH6gt Como podemos ver en la Tabla 13 Para alinear las cabeceras utilizamos el atributo align El formato seriacutea ltHn align=centergt como muestra la Tabla 14

Ejemplo Resultado

ltH1gtCabecera 1ltH1gt Cabecera 1 ltH2gtCabecera 2ltH2gt Cabecera 2

Lenguaje HTML copy Grupo EIDOS

24

ltH3gtCabecera 3ltH3gt Cabecera 3

ltH4gtCabecera 4ltH4gt Cabecera 4

ltH5gtCabecera 5ltH5gtCabecera 5

ltH6gtCabecera 6ltH6gtCabecera 6

Tabla 13

Ejemplo Resultado

ltH5 align=centergtCabecera 5ltH5gtCabecera 5

Tabla 14

Atributos del texto Al texto de nuestro documento HTML le podemos aplicar distintos atributos (negrita cursiva subrayado etc) al igual que hacemos cuando trabajamos con el procesador de textos en la edicioacuten de nuestros documentos Para aplicar estos atributos disponemos de distintas etiquetas que aplicaraacuten su efecto al texto incluido entre sus indicadores de inicio y fin Las vemos en la Tabla 15

Atributo Etiqueta Ejemplo Resultado

Negrita ltBgtltBgtltBgtTexto ennegritaltBgt

Texto en negrita

Cursiva ltIgtltIgtltIgtTexto encursivaltIgt

Texto en cursiva

Teletype ltTTgtltTTgtltTTgtTexto en modoteletypeltTTgt

Texto en modoteletype

Subrayado ltUgtltUgt ltUgtTexto subrayadoltUgt Texto subrayado Tachado ltSgtltSgt ltSgtTexto tachadoltSgt Texto tachado

Parpadeo ltBLINKgtltBLINKgtltBLINKgtTextoparpadeandoltBLINKgt

Texto parpadeando

Superiacutendice ltSUPgtltSUPgt ltSUPgtTexto en modosuperiacutendiceltSUPgt

Texto en modo superiacutendice

Subiacutendice ltSUBgtltSUBgtltSUBgtTexto en modosubiacutendiceltSUBgt

Texto en modo subiacutendice

Centrado ltCENTERgtltCENTERgt

ltCENTERgtTextocentradoltCENTERgt

Texto centrado

B Bold I Italic TT Teletype U Underlined S Strike SUP Superscript SUB Subscript

Tabla 15

copy Grupo EIDOS 3 Elementos del lenguaje I

25

Alguna de estas etiquetas no es reconocida por determinados navegadores Asiacute por ejemplo la etiqueta ltBLINKgt (Parpadeo) no es implementada por el Explorer Por lo que seguacuten el explorador que estemos utilizando podremos ver el resultado correctamente o no

Existen otras etiquetas que nos van a servir para especificar de manera diferenciada unidades loacutegicas de nuestro documento HTML tales como citas direcciones de correo etc En algunos casos el formato obtenido con estas etiquetas de estilo loacutegico va a ser el mismo que con las anteriores a las que se les denomina tambieacuten etiquetas de estilo fiacutesico Algunas etiquetas de estilo loacutegico las vemos en la Tabla 16

Etiqueta Ejemplo Resultado

ltSTRONGgtltSTRONGgtltSTRONGgtEspecifica textoresaltado (igualltBgt)ltSTRONGgt

Especifica texto resaltado(igual ltBgt)

ltCITEgtltCITEgtltCITEgtIndica una cita otiacutetulo (igual ltIgt)ltCITEgt

Indica una cita o tiacutetulo (igualltIgt)

ltSTRIKEgtltSTRIKEgtltltSTRIKEgtTexto tachado(igual ltSgt)ltSTRIKEgt

Texto tachado (igual ltSgt)

Tabla 16

Si queremos aplicar efectos maacutes espectaculares a nuestro documento HTML debemos variar el tamantildeo el color y el tipo de letra del texto La etiqueta que nos permite todo esto es ltFONTgtltFONTgt por medio de sus atributos size color y face

ltFONT size=n oacute +- n color=rrggbb oacute name face=nombre defont gt

bull size=n oacute +- n El atributo size nos permite especificar un tamantildeo determinado

para la fuente del texto incluido entre las etiquetas de inicio y fin el cual puede estar entre 1 y 7 El texto de tamantildeo normal equivale a la fuente de tamantildeo 3 (fuente base) Por tanto si especificamos size=+2 el tamantildeo de la fuente seraacute 5 Y si especificamos size= -1 el tamantildeo seraacute 2

Ejemplo Resultado

ltFONT size=2gtTamantildeo 2ltFONTgtTamantildeo 2

ltFONT size=+2gtTamantildeo 5 (3+2)ltFONTgt Tamantildeo 5 (3+2)

ltFONT size=-1gtTamantildeo 2 (3-1)ltFONTgtTamantildeo 2 (3-1)

Tabla 17

bull color=rrggbb oacute name Nos va a permitir definir el color que tendraacute el texto

incluido entre las etiquetas Tabla 18

Lenguaje HTML copy Grupo EIDOS

26

Ejemplo Resultado

ltFONT color=redgtTexto de colorrojoltFONTgt

Texto de color rojo

ltFONT color=bluegtTexto de colorazulltFONTgt

Texto de color azul

ltFONT size=5 color=008000gtTextoverde y de tamantildeo 5ltFONTgt

Texto verde y detamantildeo 5

Tabla 18

bull face=nombre de font Nos va a permitir escribir texto con el tipo de letra que le

especifiquemos En el caso de que el tipo de letra que le hayamos especificado no esteacute cargada en el ordenador que lee la paacutegina se usaraacute el font por defecto del navegador

Ejemplo Resultado

ltFONT face=TahomagtTipo de letraTahomaltFONTgt

Tipo de letra Tahoma

ltFONT size=4 color=blueface=TahomagtTexto azul de tamantildeo4 y TahomaltFONTgt

Texto azul de tamantildeo 4 y Tahoma

Tabla 19

Listas Podemos representar elementos en forma de lista dentro de nuestros documentos de una forma muy sencilla y con una gran versatilidad Estas listas podraacuten incluir cualquiera de los elementos HTML e incluso podemos definir listas anidadas es decir listas dentro de listas HTML nos permite crear tres tipos distintos de listas

bull Listas no numeradas

bull Listas numeradas

bull Listas de definiciones

Listas no numeradas ltULgt UL Unordered List

Con este tipo de listas podemos especificar una serie de elementos sin un orden predeterminado precedidos de una marca o vintildeeta que nosotros mismos podemos definir Para la definicioacuten de los liacutemites de la lista utilizaremos la etiqueta ltULgt ltULgt y para determinar cada uno de los elementos que la componen usaremos la etiqueta ltLIgt El formato es el siguiente

ltUL type=disk oacute circle oacute squaregtltLHgtTiacutetulo de la listaltLHgt

copy Grupo EIDOS 3 Elementos del lenguaje I

27

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltULgtLH List Head LI List Item

Con el atributo type vamos a especificar el tipo de marca o vintildeeta que antecederaacute a cada uno de los elementos de la lista Estas marcas podraacuten ser un disco (disk) un ciacuterculo (circle) o un cuadrado (square) La etiqueta ltLHgt nos va a servir para especificar un posible tiacutetulo de la lista siendo esta opcional Vamos a ver algunos ejemplos en la Tabla 20

Ejemplo Resultado

ltUL type=circlegtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAfricaltLIgtAmeacutericaltLIgtOceaniacutea

ltULgt

Los cinco continentes

Europa

Asia

Aacutefrica

Ameacuterica

Oceaniacutea

ltUL type=squaregtltLIgtEuropaltLIgtAsialtLIgtAfricaltLIgtAmeacutericaltUL type=circle gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltULgtltLIgtOceaniacutea

ltULgt

Europa

Asia

Aacutefrica

Ameacuterica

Ameacuterica del Norte

Ameacuterica del Sur

Oceaniacutea

Tabla 20

Listas numeradas ltOLgt OL Ordered List

Con este tipo de listas podemos especificar una serie de elementos numerados seguacuten el lugar que ocupan en la lista Para la definicioacuten de los liacutemites de la lista utilizaremos la etiqueta ltOLgt ltOLgt y para determinar cada uno de los elementos que la componen usaremos la etiqueta ltLIgt El formato es el siguiente

ltOL start=n type=Tipo de listagtltLHgtTiacutetulo de la listaltLHgt

Lenguaje HTML copy Grupo EIDOS

28

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltOLgt

Con el atributo start vamos a especificar el nuacutemero por el que va a empezar la lista Si no indicamos este argumento la lista empezaraacute a numerarse a partir del 1 Con el atributo type vamos a especificar el tipo de lista numerada Sus posibles valores aparecen a continuacioacuten y veremos algunos ejemplos en la Tabla 21

A Letras mayuacutesculas (A B C )

a Letras minuacutesculas (a b c )

I Nuacutemeros romanos en mayuacutesculas (I II III IV )

i Nuacutemeros romanos en minuacutesculas (i ii iii iv )

1 Numeacutericamente (1 2 3 4 ) (es la numeracioacuten por defecto y por tanto no habriacutea que indicarla)

Ejemplo Resultado

ltOL type=AgtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltLIgtOceaniacutea

ltOLgt

Los cinco continentes

A Europa

B Asia

C Aacutefrica

D Ameacuterica

E Oceaniacutea

ltOL type=I start=2gtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltOL type=i gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltOLgtltLIgtOceaniacutea

ltOLgt

II Europa

III Asia

IV Aacutefrica

V Ameacuterica

i Ameacuterica del Norte

ii Ameacuterica del Sur

VI Oceaniacutea

Tabla 21

copy Grupo EIDOS 3 Elementos del lenguaje I

29

Listas de definiciones ltDLgt DL Definition List

Estas listas nos van a servir para especificar una serie de teacuterminos y sus definiciones correspondientes Para la definicioacuten de la lista usaremos la etiqueta ltDLgt ltDLgt para especificar los teacuterminos usaremos la etiqueta ltDTgt y para especificar la definicioacuten correspondiente a cada teacutermino usaremos la etiqueta ltDDgt El formato es el siguiente

ltDLgtltLHgtTiacutetulo de la listaltLHgtltDTgtTeacutermino 1ltDDgtDefinicioacuten 1ltDTgtTeacutermino 2ltDDgtDefinicioacuten 2

ltDTgtTeacutermino nltDDgtDefinicioacuten n

ltDLgtDT Definition Term DD Definition Description

Vamos a ver un ejemplo en la Tabla 22

Ejemplo Resultado

ltDLgtltDTgtPariacutesltDDgtCapital de FrancialtDTgtRomaltDDgtCapital de ItalialtDTgtMadridltDDgtCapital de Espantildea

ltDLgt

Pariacutes

Capital de Francia

Roma

Capital de Italia

Madrid

Capital de Espantildea

Tabla 22

Hiperenlaces Los hiperenlaces son enlaces de hipertexto que nos van a permitir acceder de manera directa a otros documentos HTML independientemente de su ubicacioacuten o a otras zonas dentro de nuestro propio documento

Enlaces a otras paacuteginas ltA href=gt Con este tipo de hiperenlaces vamos a poder acceder tanto a otras paacuteginas que esteacuten ubicadas dentro de nuestro propio sistema como a paacuteginas ubicadas en puntos muy distantes del globo El formato de este tipo de hiperenlaces es

ltA href=URL a la que se accedegtTexto del hiperenlaceltAgt

Lenguaje HTML copy Grupo EIDOS

30

Con el atributo href vamos a especificar la URL del documento al que se pretende acceder El texto contenido entre las etiquetas de comienzo y fin nos va a servir para definir el hiperenlace por lo que deberiacutea ser clarificador del contenido del documento con el que vamos a enlazar Esta definicioacuten apareceraacute resaltada normalmente en azul y subrayada En la mayoriacutea de los navegadores esta definicioacuten del hiperenlace es sensible por lo que cuando el cursor pasa por encima del mismo este cambia de aspecto indicaacutendolo

Veamos un ejemplo en la Tabla 23

Ejemplo Resultado

ltA href=httpwwweidosesgtPaacutegina inicialde Villa EidosltAgt

Paacutegina inicial de Villa Eidos

Tabla 23

Si situamos el ratoacuten encima del hiperenlace y pulsamos el navegador accederaacute a la paacutegina Web indicada por href es decir accederaacute a la paacutegina situada en httpwwweidoses

Igualmente podriacuteamos indicar el hiperenlace por medio de una imagen Si esta imagen tiene definido un borde este apareceraacute resaltado en color azul El formato correspondiente seriacutea

ltA href=URL a la que se accedegtltIMG src=Imagengt y tambieacutentextoltAgtIMG Image src Source

Veamos un ejemplo en la Tabla 24

Ejemplo Resultado

ltA href=httpwwweidosesgtltIMGsrc=IconogifgtltAgt Villa Eidos Villa Eidos

Tabla 24

Si pulsamos sobre la imagen el navegador accederaacute a la paacutegina Web inicial de Villa Eidos

Enlaces dentro de la misma paacutegina ltA name=gt Este tipo de hiperenlaces nos va a permitir marcar distintas zonas del documento activo con el objeto de tener un acceso directo a las mismas Una buena utilidad de este tipo de enlaces radica en la creacioacuten de iacutendices para documentos largos de forma que si pinchamos en el hiperenlace correspondiente al tiacutetulo de un capiacutetulo determinado el navegador saltaraacute automaacuteticamente hasta el comienzo de dicho capiacutetulo

Para la creacioacuten de estos hiperenlaces debemos seguir dos pasos

copy Grupo EIDOS 3 Elementos del lenguaje I

31

1 Marcar las distintas zonas o secciones del documento Esto lo haremos con el paraacutemetro name

ltA name=Identificador de seccioacutengtTexto de laseccioacutenltAgt

A cada seccioacuten le asignaremos un identificador distinto para poder referenciarlas posteriormente de manera inequiacutevoca

2 Especificar un enlace a cada una de las secciones que hayamos definido ltA href=Identificador de seccioacutengtTexto del enlace a laseccioacutenltAgt

Si pinchamos en este enlace el navegador saltaraacute automaacuteticamente a la seccioacuten correspondiente Veamos un ejemplo sencillito en la Tabla 25 pero demostrativo de todo lo que acabamos de explicar

Ejemplo Resultado

ltA href=Cap1gtCapiacutetulo1ltAgtltA name=Cap1gtCapiacutetulo 1ltAgt

Capiacutetulo 1

Capiacutetulo 1

Tabla 25

Si nos creamos una paacutegina HTML con distintos capiacutetulos podriacuteamos crear una seccioacuten para cada uno de ellos de forma que si pinchamos en el hiperenlace correspondiente al Capiacutetulo 1 el navegador saltariacutea directamente a la seccioacuten correspondiente al Capiacutetulo 1

Ademaacutes de los dos tipos de hiperenlaces vistos podemos crear hiperenlaces que nos permitan acceder a cualquiera de los servicios de Internet Es decir podriacuteamos indicar enlaces a servidores FTP GOPHER NEWS MAILTO etc Para ello tendriacuteamos que indicar la URL correspondiente al servicio al cual queremos acceder como ya vimos en el primer capiacutetulo de este manual

Imaacutegenes

Podremos dar un aspecto mucho maacutes vistoso a nuestros documentos HTML con la inclusioacuten de imaacutegenes Los formatos de imagen que todos los navegadores reconocen son gif y jpg Si queremos insertar una imagen en otro formato el visor deberiacutea disponer del programa externo que permita su visualizacioacuten De todas formas una buena solucioacuten es utilizar alguacuten programa de tratamiento de imaacutegenes que nos convierta la imagen a uno de los formatos mencionados anteriormente

El formato gif es maacutes recomendado para la inclusioacuten de iconos graacuteficas y el formato jpg para el caso de insertar fotografiacuteas en nuestras paacuteginas

Lenguaje HTML copy Grupo EIDOS

32

La etiqueta que nos va a permitir la insercioacuten de imaacutegenes es ltIMGgt La imagen se insertaraacute justo en el punto del documento donde coloquemos dicha etiqueta pudiendo insertar imaacutegenes dentro de listas tablas o formularios

El formato de la etiqueta con sus posibles argumentos es el siguiente

ltIMG src=URL de la imagen alt=Texto alternativoalign=topmiddlebottonleftrigth border=Tamantildeoheight=Tamantildeo width=Tamantildeo hspace=margen vspace=margengt

bull src=URL de la imagen El atributo src nos va servir para indicar la URL de la imagen que

queremos insertar es decir el servidor y camino hasta llegar al fichero de la imagen

No seraacute necesario que la imagen que queremos insertar en nuestro documento esteacute en el ordenador local aunque siacute es recomendable ya que el acceso a las mismas puede ser maacutes lento

Por tanto es una buena praacutectica copiar todas las imaacutegenes que vayamos a incluir en nuestro documento HTML al ordenador local

Tabla 26

bull alt=Texto alternativo Nos va a permitir mostrar un texto alternativo para el caso en que el

navegador no sea capaz de mostrar la imagen Su uso es muy recomendable ya que cuando publiquemos nuestras paacuteginas en la WWW no sabremos desde queacute tipo de navegadores accederaacuten los internautas a nuestras paacuteginas

En la Tabla 27 vamos a ver un ejemplo

Si usas un navegador que no tiene ninguacuten problema para la visualizacioacuten de imaacutegenes desactiva temporalmente la opcioacuten de mostrar imaacutegenes prueba el ejemplo que muestra la Tabla 27 y compaacuteralo con el anterior

Tabla 27

copy Grupo EIDOS 3 Elementos del lenguaje I

33

bull align=topmiddlebotton leftrigth Nos permite indicar coacutemo se alinearaacute el texto que siga a la imagen

top alinea el texto con la parte superior de la imagen

middle con la parte central

bottom con la parte inferior

left imagen alineada a la izquierda de la paacutegina

rigth imagen alineada a la derecha de la paacutegina

Tabla 28

En el caso de que el texto que acompantildea a la imagen tenga maacutes de una liacutenea tan soacutelo la primera seraacute la que se alinearaacute seguacuten alguna de las anteriores alineaciones el resto de liacuteneas se incluiraacuten debajo de la imagen quedando un efecto bastante feo

Para solventar esto estaacuten las alineaciones LEFT (imagen alineada a la izquierda de la paacutegina) y RIGHT (imagen alineada a la derecha de la paacutegina) Las cuales permiten que la imagen se inserte dentro del paacuterrafo que la rodea produciendo un resultado mucho maacutes profesional en la integracioacuten de texto e imaacutegenes

Estas dos alineaciones no se podraacuten usar en combinacioacuten con las anteriores Veamos algunos ejemplos en la Tabla 29

Vemos como en el primer ejemplo la segunda liacutenea de texto aparece debajo de la imagen produciendo un efecto menos vistoso que en los dos ejemplos siguientes

Lenguaje HTML copy Grupo EIDOS

34

Tabla 29

bull border=Tamantildeo Permite antildeadirle un borde a la imagen del tamantildeo que le

especifiquemos

Si la imagen forma parte de un hiperenlace esta apareceraacute con un borde del color del hiperenlace Si no deseaacuteramos que aparezca este borde tendriacuteamos que especificar border=0

Tabla 30

bull height=Tamantildeo Permite especificar el alto de la imagen en puntos de pantalla

(pixels) o en del tamantildeo del documento

bull width=Tamantildeo Con este argumento especificaremos el ancho al que mostraremos la imagen en puntos de pantalla (pixels) o en del tamantildeo del documento

En el segundo de los ejemplos de la Tabla 31 el ancho de la imagen se ha extendido al 50 del total del ancho de la celda donde estaacute contenida la imagen Si pruebas este ejemplo en tu documento HTML la imagen se extenderaacute horizontalmente hasta ocupar el 50 del ancho de la paacutegina

copy Grupo EIDOS 3 Elementos del lenguaje I

35

Tabla 31

bull hspace=Margen hspace Horizontal Space Permite especificar el nuacutemero de espacios

horizontales (en puntos) que separaraacuten a la imagen de cualquier elemento que le siga o le anteceda

bull vspace=Margen vspace Vertical Space Con este argumento especificaremos el margen vertical (en puntos) que habraacute entre la imagen y cualquier otro elemento de nuestro documento

Tabla 32

Elementos del lenguaje II

Tablas HTML nos va a permitir la inclusioacuten de cualquiera de los elementos de nuestra paacutegina (texto imaacutegenes hiperenlaces listas etc) dentro de una tabla Gracias a lo cual conseguiremos dar una mayor y mejor estructuracioacuten a los contenidos de nuestros documentos Ademaacutes la definicioacuten de las tablas en HTML es muy abierta pudiendo en cualquier momento redimensionar la tabla es decir cambiar su nuacutemero de filas o de columnas cambiar el tamantildeo de alguna de sus celdas etc

La etiqueta que nos va a permitir la definicioacuten de tablas es ltTABLEgt ltTABLEgt

El formato general de la etiqueta sin ninguacuten argumento es el siguiente

ltTABLEgtltTR gt

ltTHgtContenido de la celda ltTHgtltTDgtContenido de la celda ltTDgt

ltTRgtltTABLEgt

TR Table Row TH Table Header TD Table Data

Vamos a analizar cada una de estas etiquetas de forma separada

1 ltTABLEgt ltTABLEgt Definicioacuten general de la tabla Dentro de ella definiremos las filas y columnas que la constituyen pudiendo incluso definir tablas dentro de tablas es decir tablas anidadas

Lenguaje HTML copy Grupo EIDOS

38

2 ltTRgt ltTRgt Definicioacuten de las filas de la tabla Por cada etiqueta ltTRgt que incluyamos se crearaacute una fila en la tabla No seraacute necesario indicar la etiqueta de cierre

3 ltTHgtltTHgt oacute ltTDgtltTDgt Definicioacuten de cada una de las celdas de la tabla Vemos que estas etiquetas estaacuten contenidas dentro de otra etiqueta de definicioacuten de fila de forma que por cada etiqueta ltTHgt o ltTDgt que incluyamos se crearaacute una celda dentro de la fila correspondiente La etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera es decir celdas cuyo contenido estaacute resaltado en negrita dejando la etiqueta ltTDgt para definir celdas de datos En este caso tampoco es necesario indicar las etiquetas de cierre

Todas estas etiquetas tienen sus respectivos argumentos Pero antes de analizar cada uno de ellos vamos a ver un ejemplo muy sencillito en la Tabla 33 que nos crearaacute una tabla de una sola celda (1 fila X 1 columna = 1 celda) Para ello usaremos la etiqueta de creacioacuten de tabla ltTABLEgt con el argumento border=1 (nos dibuja un borde de tamantildeo 1 alrededor de la tabla)

Ejemplo Resultado

ltTABLE border=1gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 33

Vamos ahora a analizar lo distintos argumentos que componen las etiquetas de la tabla analizaacutendolos desde lo general (la definicioacuten de la tabla) hasta lo especiacutefico (la definicioacuten de las celdas)

1 Definicioacuten de la tabla ltTABLEgt

ltTABLE border=n cellpadding=n cellspacing=n width=n oacute height=n oacute bgcolor=rrggbb oacute nombre gt

Contenido ltTABLEgt

bull border=n Si especificamos este argumento se dibujaraacute un borde alrededor de la

tabla del ancho que le indiquemos como muestra la Tabla 34

Ejemplo Resultado

Mi primera tabla ltTABLE border=4gtltTRgtltTDgtMi primera tablaltTABLEgt

Tabla 34

bull cellpadding=n Indica el espacio en puntos que separa el contenido de la celda con

el borde de la misma siendo 1 por defecto

copy Grupo EIDOS 4 Elementos del lenguaje II

39

Ejemplo Resultado

ltTABLE border=4 cellpadding=8gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 35

bull cellspacing=n Indica el espacio en puntos que separa a las celdas contenidas dentro de la tabla siendo 2 por defecto

bull width=n oacute Indica la anchura de la tabla en puntos o en en funcioacuten del ancho de la ventana del visualizador Si no indicamos este argumento el ancho de la tabla se ajustaraacute al tamantildeo del contenido de las celdas Esto es lo que ha ocurrido en el uacuteltimo ejemplo que hemos realizado Veamos un ejemplo en el Coacutedigo fuente 11 El resultado se muestra en la Tabla 36

ltTABLE border=4 width=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 11

Mi primera tabla

Tabla 36

bull height=n oacute Nos permite definir la altura de la tabla en puntos o en de la

altura de la ventana del visualizador Si indicamos este argumento lo recomendable es darlo en puntos ya que es maacutes complicado adecuarnos a la altura de la ventana del visualizador Al igual que en el caso anterior si no especificamos este argumento la altura se adecuaraacute al contenido de las celdas El Coacutedigo fuente 12 muestra un ejemplo y la Tabla 37 nos muestra el resultado

ltTABLE border=4 width=50 height=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 12

Mi primera tabla

Tabla 37

bull bgcolor= rrggbb o nombre del color Nos permite definir un color

de fondo para todas las celdas de la tabla Maacutes adelante veremos como podemos definir colores especiacuteficos para cada una de las celdas por separado

Lenguaje HTML copy Grupo EIDOS

40

Ejemplo Resultado

ltTABLE border=4 bgcolor=yellowgtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 38

2 Definicioacuten de las filas de la tabla ltTRgt

ltTR align=leftrightcenter valign=topmiddlebottombgcolor=rrggbb oacute nombregt

Antes de empezar a descifrar el significado de cada uno de los argumentos de esta etiqueta vamos a ver un ejemplo en la Tabla 39 de coacutemo se construiriacutea una tabla con dos filas (2 filas X 1 columna = 2 celdas)

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR gtltTDgtPrimera filaltTRgtltTDgtSegunda filaltTABLEgt

Segunda fila

Tabla 39

bull align=leftrightcenter Con este argumento vamos a indicar la alineacioacuten

horizontal (leftizquierda rightderecha centercentrado) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado Veamos un ejemplo en el Coacutedigo fuente 13 y su correspondiente resultado en la Tabla 40

ltTABLE border=4 width=50 gt ltTRgtltTDgtPrimera filaltTRalign=rightgtltTDgtSegunda filaltTABLEgt

Coacutedigo fuente 13

Primera fila

Segunda fila

Tabla 40

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten

vertical (toparriba middlecentrado bottomabajo) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado

copy Grupo EIDOS 4 Elementos del lenguaje II

41

bull bgcolor= rrggbb o nombre del color En este caso este argumento nos permitiraacute definir un color de fondo para todas las celdas de una fila veamos un ejemplo en la

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR bgcolor=yellowgtltTDgtPrimera

filaltTR bgcolor=greengtltTDgtSegunda

filaltTABLEgt

Segunda fila

Tabla 41

3 Definicioacuten de las celdas de la tabla ltTHgt oacute ltTDgt

ltTH oacute TD align=leftrightcenterjustifyvalign=topmiddlebottom bgcolor=rrggbb oacute nombre width=nrowspan=n colspan=ngt

Como ya explicamos anteriormente la etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera y la etiqueta ltTDgt para la creacioacuten de celdas de datos Vamos a completar nuestro ejemplo inicial antildeadieacutendole tres filas de dos celdas cada una (3 filas X 2 columnas = 6 celdas) Tabla 42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTDgtCelda 21ltTDgtCelda 22

ltTABLEgt Celda 21 Celda 22

Tabla 42

bull align=leftrightcenterjustify Con este argumento vamos a indicar la

alineacioacuten horizontal (left izquierda right derecha center centrado justifyjustificado) del contenido de cada celda por separado Su significado es el mismo que en la etiqueta ltTRgt

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten vertical (toparriba middlecentrado bottomabajo) del contenido de cada celda

bull bgcolor= rrggbb o nombre del color En este caso podremos definir un color de fondo para cada una de las celdas de manera independiente

bull width=n oacute Indica el ancho de la celda en puntos o en en funcioacuten del tamantildeo de la tabla

Lenguaje HTML copy Grupo EIDOS

42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera

1ltTHgtCabecera 2ltTR gtltTD align=rightgtCelda

11ltTD bgcolor=redgtCelda 12ltTRgtltTD

bgcolor=yellowgtCelda 21ltTDalign=centergtCelda 22ltTABLEgt

Celda 21 Celda 22

Tabla 43

bull rowspan=n Con este argumento podemos lograr que una celda concreta abarque maacutes de una fila ya sabemos que por defecto una celda ocupa una sola fila

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTD rowspan=2gtCelda

11ltTDgtCelda 12ltTRgtltTDgtCelda 22

ltTABLEgt

Celda 11 Celda 22

Tabla 44

bull colspan=n Con este argumento podemos lograr que una celda se expanda a maacutes

de una columna

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTD colspan=2

align=centergtCelda 22ltTABLEgt

Celda 22

Tabla 45

Para finalizar este tema sobre la creacioacuten de tablas vamos a ver el ejemplo que aparece en el Coacutedigo fuente 14 y su resultado en la Tabla 46

ltTABLE border=4gtltTR gtltTH colspan=3 bgcolor=redgtTiacutetuloltTR bgcolor=yellowgtltTHgtCabecera 1ltTHgtCabecera 2ltTHgtCabecera 3

copy Grupo EIDOS 4 Elementos del lenguaje II

43

ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTDgtCelda 13ltTRgtltTD rowspan=2gtCelda 21ltTD bgcolor=greengtCelda 22ltTDgtCelda 23ltTRgtltTDgtCelda 32ltTDgtCelda 33

ltTABLEgt

Coacutedigo fuente 14

Tiacutetulo

Cabecera 1 Cabecera 2 Cabecera 3

Celda 11 Celda 12 Celda 13

Celda 22 Celda 23 Celda 21

Celda 32 Celda 33

Tabla 46

Formularios El formulario es el elemento de HTML que nos va a permitir interactuar con los visitantes de nuestras paacuteginas web de forma que podemos solicitarle informacioacuten al usuario y procesarla De esta forma podremos crear en nuestras paacuteginas encuestas para solicitar la opinioacuten del visitante sobre alguacuten tema e incluso sobre el contenido de nuestra propia paacutegina web cuestionarios para evaluar la asimilacioacuten de contenidos sobre un tema concreto que se trate en la paacutegina etc

El contenido de la informacioacuten introducida por medio del formulario seraacute enviado a la direccioacuten URL donde resida el programa que se encargaraacute de procesar los datos A este tipo de programas externos se les denomina programas CGI (Common Gateway Interface)

La etiqueta HTML que nos va a permitir la creacioacuten de formularios es ltFORMgt Su formato es el siguiente

ltFORM action=URL del programa que trata el formulariomethod=postgetgt Elementos del formulario ltFORMgt

bull action=URL del programa que trata el formulario A traveacutes de este

argumento indicaremos como ya hemos mencionado la direccioacuten del fichero de programa que va a tratar la informacioacuten suministrada por el formulario

Tambieacuten podriacuteamos incluir como URL que trata el formulario una direccioacuten de correo electroacutenico Por tanto el valor de este argumento podriacutea ser action =mailto direccioacuten de correo

Nota Esta opcioacuten soacutelo funciona adecuadamente con el navegador Netscape Con el Explorer este enviacuteo dariacutea como resultado un correo en blanco Para que esta opcioacuten funcione de manera independiente del navegador que se esteacute utilizando se ha de emplear un programa externo que realice este proceso

Lenguaje HTML copy Grupo EIDOS

44

bull method=postget A traveacutes de este argumento indicaremos el meacutetodo empleado para transferir la informacioacuten generada por el formulario

Si indicamos post se produciraacute la modificacioacuten del documento destino como es el caso de enviar la informacioacuten a una direccioacuten de correo electroacutenico Mediante el meacutetodo get no se produciraacuten cambios en el documento destino

Dentro de un formulario podremos incluir cualquier texto o instruccioacuten HTML de las vistas a lo largo de los capiacutetulos anteriores ademaacutes claro estaacute de los elementos tiacutepicos de un formulario cajas de texto botones de seleccioacuten menuacutes de opciones etc Vamos a ver coacutemo se incluiraacuten estos elementos en un formulario

Entrada baacutesica de datos Para definir los distintos tipos de campos baacutesicos de entrada de datos usaremos la etiqueta ltINPUTgt

El formato es el siguiente

ltINPUT type= text password checkbox radio hidden submit image reset name=Variable value=Valor inicialgt

bull El argumento type determinaraacute el tipo de campo de entrada que estamos insertando A

continuacioacuten describiremos cada uno de ellos

bull El argumento name especifica el nombre de la variable que tomaraacute el valor introducido en el campo

bull El argumento value especifica el valor por defecto que tendraacute el campo

Vamos a continuacioacuten a describir los distintos tipos campos de entrada que vendraacuten dados por los valores del argumento type

Texto corto type=text

Con este argumento vamos a indicar que el campo a introducir seraacute un texto El formato seriacutea

ltINPUT type= text name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los nuevos atributos es

bull size=Tamantildeo Indicaremos el tamantildeo en caracteres de la ventana de introduccioacuten de texto

bull maxlength=Longitud maacutexima Indicaremos el nuacutemero maacuteximo de caracteres a introducir en el campo

Vamos a ver un ejemplo en la Tabla 47

copy Grupo EIDOS 4 Elementos del lenguaje II

45

Ejemplo Resultado

NombreltINPUT type=text name=Var1Value=Texto por defecto size=20 maxlength=25gt

Tabla 47

Claves type=password

Con este argumento indicamos que el campo a introducir seraacute una palabra clave por lo que los caracteres que se introduzcan seraacuten sustituidos por asteriscos en la visualizacioacuten por pantalla El formato es

ltINPUT type= password name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los distintos argumentos es el mismo que en el caso anterior Veamos un ejemplo en la Tabla 48

Ejemplo Resultado

ClaveltINPUT type=password name=Var2Value=tutankamon size=11 maxlength=10gt

Tabla 48

Botones de seleccioacuten type=checkbox

El checkbox es un botoacuten que presenta dos estados marcado (1) y desmarcado (0) Podremos variar su estado simplemente pinchando con el ratoacuten El formato es

ltINPUT type= checkbox name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto

Si incluimos el argumento value cuando el botoacuten esteacute marcado su variable asociada adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 49

Ejemplo Resultado

ltINPUT type=checkbox name=Var3 value=Op1 checkedgtOpcioacuten1 ltbrgtltINPUT type=checkbox name=Var4 value=Op2gt Opcioacuten 2

Tabla 49

Lenguaje HTML copy Grupo EIDOS

46

Seleccioacuten entre varias opciones type=radio

Este argumento se usa cuando hay que hacer una seleccioacuten entre varias alternativas excluyentes pudieacutendose seleccionar uacutenicamente una de las alternativas Debemos incluir una etiqueta radio por cada una de las posibles alternativas El formato es

ltINPUT type= radio name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto En este caso uacutenicamente uno de los botones de radio podraacute aparecer marcado ya que se usa para el caso de opciones excluyentes

Cuando un botoacuten esteacute seleccionado la variable asociada a la lista de botones adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 50

Ejemplo Resultado

ltINPUT type=radio name=Var5 value=Op1gtOpcioacuten1 ltbrgtltINPUT type=radio name=Var5 value=Op2checkedgt Opcioacuten 2 ltbrgtltINPUT type=radio name=Var5 value=Op3 gtOpcioacuten 3

Tabla 50

En este ejemplo la variable Var5 tendraacute el valor Op2

Campos ocultos type=hidden

Este tipo de campos no son visibles para el usuario Su uso tiene sentido en el caso de enviar alguacuten tipo de informacioacuten que no deba ser visualizada o variada por el lector de nuestra paacutegina Web El formato es

ltINPUT type= hidden name=Variable value=Valor gt

Con esta etiqueta asignariacuteamos a la Variable referenciada por name el Valor de value y se mandariacutea junto con el formulario sin que el usuario de la paacutegina se entere de nada Veamos un ejemplo en el Coacutedigo fuente 15

ltINPUT type=hidden name=Var6 value=tutankamongt

Coacutedigo fuente 15

copy Grupo EIDOS 4 Elementos del lenguaje II

47

Botoacuten de enviacuteo de datos type=submit

Con este argumento especificamos un botoacuten en el que al pulsar los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario El formato es

ltINPUT type= submit value=Mensaje a mostrargt

En este caso el paraacutemetro value indica el mensaje que se mostraraacute en el botoacuten Veamos un ejemplo en la Tabla 51

Ejemplo Resultado

ltINPUT type=submit value=Enviar los Datosgt

Tabla 51

Botoacuten graacutefico de enviacuteo de datos type=image

Con este argumento especificamos un botoacuten de tipo imagen en el que al igual que con el botoacuten anterior si pulsamos en la imagen los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario Su formato es el siguiente

ltINPUT type= image src=URL de la imagen name=Variablegt

Con el paraacutemetro src especificamos la URL de la imagen que seraacute insertada en el botoacuten En este caso en la variable referenciada por name se almacenaraacuten las coordenadas del punto de la imagen donde se halla pinchado (de forma que estas coordenadas podriacutean ser procesadas por el programa que recibe los datos del formulario)

Botoacuten de borrado de datos type=reset

Con este argumento especificamos un botoacuten que al ser pulsado borraraacute el contenido actual de todos los campos dejaacutendolos con sus valores por defecto Su formato es

ltINPUT type= reset value=Texto del botoacutengt

Con el paraacutemetro value especificamos el texto que etiquetaraacute al botoacuten

Ejemplo Resultado

ltINPUT type=reset value=Borrar datosgt

Tabla 52

Lenguaje HTML copy Grupo EIDOS

48

Entrada datos en muacuteltiples liacuteneas En un formulario tambieacuten podremos introducir un campo de texto que abarque varias liacuteneas Para ello usaremos la etiqueta ltTEXTAREAgt ltTEXTAREAgt Su formato es el siguiente

ltTEXTAREA name=Variable rows=Filas cols=ColumnasgtContenido por defectoltTEXTAREAgt

Los argumentos rows y cols nos van a permitir especificar respectivamente el nuacutemero de filas de texto visibles y el nuacutemero de columnas de texto visibles en el campo

Ejemplo Resultado

ltTEXTAREA name=Var7 rows=5 cols=40gtContenido por defectoltTEXTAREAgt

Tabla 53

Entrada de datos a traveacutes de campos de seleccioacuten Con los campos de seleccioacuten podremos desplegar una lista de opciones entre las que podremos seleccionar una Para ello usaremos la etiqueta ltSELECTgt ltSELECTgt Su formato es el siguiente

ltSELECT name=Variable multiple size=ngtltOPTION selected value=Valor_1gtPrimera OpcioacutenltOPTION value=Valor_2gtSegunda Opcioacuten

ltOPTION value=Valor_ngtEneacutesima Opcioacuten

ltSELECTgt

Figura 1

bull La variable referenciada por name tomaraacute el valor(value) de la opcioacuten seleccionada

bull Si especificamos el argumento muacuteltiple se mostraraacuten todas la opciones en forma de tabla El nuacutemero de opciones visibles en la tabla vendraacute dado por el argumento size

copy Grupo EIDOS 4 Elementos del lenguaje II

49

bull Con la etiqueta ltOPTIONgt iremos definiendo cada una de las opciones de la lista

bull El argumento selected va a determinar cuaacutel es la opcioacuten por defecto

Para finalizar vamos a ver el Coacutedigo fuente 16 correspondiente a una encuesta realizada por la editorial ficticia EditoPc y en la Figura 2 observamos el resultado del formulario

ltP align=centergtltBgtEDITORIAL ltIgtEditoPcltIgtltBgtltPgtltFORM action=mailtodireccionejemplo method = postgtNombreltINPUT type=text size=30 name=nombregtltBRgtE_mail ltINPUT type=text size=30 name=e_mailgtltPgtDeseas recibir informacioacuten sobreltINPUT type=checkbox name=infor1 value=InternetgtInternetltINPUT type=checkbox name=infor2 value=ProgramacioacutengtProgramacioacutenltINPUT type=checkbox name=infor3 value=SistOperativogtSistOperativoltINPUT type=checkbox name=infor4 value=OfimaacuteticagtOfimaacuteticaltPgtiquestTe conectas a Internet desde casa ltbrgtltINPUT type=radio name=intercasa value=sigtSiacuteltINPUT type=radio name=intercasa value=nogtNoltPgtiquestQueacute uso le das a tu ordenador ltBRgtltSELECT name=uso multiple size=3gtltOPTION selectedgtProfesionalltOPTIONgtDomeacutesticoltOPTIONgtOcioJuegosltSELECTgtltPgtCaracteriacutesticas de tu PCltBRgtltTEXTAREA name=caract rows=5 cols=40gtltTEXTAREAgtltPgtltINPUT type=submit value=Enviar datosgt ltINPUT type=reset value=Borrardatosgt

Coacutedigo fuente 16

Figura 2

Elementos del lenguaje III

Frames Las frames son una utilidad del HTML que nos permite dividir la ventana del navegador en diferentes subventanas que podraacuten ser manipuladas de manera independiente Esto nos permitiraacute mostrar una paacutegina web diferente en cada una de la subventanas o frames

Estructura de un documento con frames Un documento con frames se estructura de manera diferente a un documento HTML normal Asiacute en este tipo de documentos no apareceraacute la etiqueta ltBODYgt En su lugar se incluiraacute la etiqueta ltFRAMESETgt ltFRAMESETgt dentro de la cual se definiraacuten las distintas frames que se incluyan en el documento

La estructura general de un documento de este tipo seriacutea por tanto

ltHTMLgtltHEADgtCabeceraltHEADgtltFRAMESETgt

Definicioacuten de la distintas framesltFRAMESETgtltNOFRAMESgt

Instrucciones HTMLltNOFRAMESgt

ltHTMLgt

Lenguaje HTML copy Grupo EIDOS

52

Puede darse el caso de que programemos nuestro documento con frames siguiendo la estructura anterior y que el navegador que se use para leer el documento no soporte la caracteriacutestica de frames con lo cual no se mostraraacute nada de lo indicado entre las etiquetas ltFRAMESETgt y ltFRAMESETgtPara solucionar este problema todas las instrucciones HTML incluidas entre las etiquetas ltNOFRAMESgt y ltNOFRAMESgt seraacuten ejecutadas por los navegadores que no soportan las frames

La sintaxis de la etiqueta ltFRAMESETgt es

ltFRAMESET rows=Lista de filas cols=Lista de columnasgtltFRAME src=URL de la frame 1 name=Nombre de la frame 1gtltFRAME src=URL de la frame 2 name=Nombre de la frame 2gt

ltFRAME src=URL de la frame n name=Nombre de la frame ngt

ltFRAMESETgt

Como vemos por cada una de la frames que incluyamos en nuestro documento debemos incluir una etiqueta ltFRAMEgt indicando mediante sus argumentos la direccioacuten URL del documento que se insertaraacute en la subventana (src) y el nombre de la frame (name) Posteriormente describiremos la etiqueta ltFRAMEgt con maacutes detalle

Los argumentos de ltFRAMESETgt son rows y cols definieacutendose uacutenicamente uno de los dos atributos en funcioacuten de si la divisioacuten de la pantalla se realizaraacute por filas (rows) o por columnas (cols)

Por cada una de las subventanas que creemos debemos especificar su tamantildeo en puntos o en porcentaje del tamantildeo de cada subventana Asiacute por ejemplo si especificamos rows= 50 2525 crearemos tres subventanas horizontales ocupando la primera el 50 de la ventana principal y las otras dos el resto Si especificamos cols=100150 crearemos tres subventanas verticales ocupando la primera 100 puntos de la ventana principal la segunda 150 puntos y tercera el espacio restante

Vamos a verlo maacutes claramente con un par de ejemplos praacutecticos que vemos en la Tabla 54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 502525gt ltFRAMEsrc=Pagweb1htm name=Pagweb1gtltFRAMEsrc=Pagweb2htm name=Pagweb2gtltFRAMEsrc=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 2: Programacion web   lenguaje html

Lenguaje HTML Versioacuten 100

2000 copy Grupo EIDOS wwwLaLibreriaDigitalcom

Iacutendice

IacuteNDICE 5 INTRODUCCIOacuteN AL HTML 7

iquestQUEacute ES HTML 7 REGLAS DE FORMATO 8 ESTRUCTURA DE UN DOCUMENTO HTML 9 NUESTRA PRIMERA PAacuteGINA HTML 9 FORMA DEL URL 10

Localizando un documento hypertexto (http) 10 Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol) 11 Accediendo a un grupo de noticias (news) 11 Accediendo a una direccioacuten e-mail (mailto) 11 Localizacioacuten de un archivo cualquiera (file) 11

CABECERA Y CUERPO DEL DOCUMENTO HTML 13 CABECERA 13 TIacuteTULO DEL DOCUMENTO 13 INDICADOR DE REFRESCO DEL DOCUMENTO 14 INDICADOR DE LA URL BASE DEL DOCUMENTO 14 CUERPO 15 CARACTERES ESPECIALES 17 ESPACIADO Y SALTOS DE LIacuteNEA 19

Inclusioacuten de espacios en blanco ampnbsp 19 Salto de liacutenea ltBRgt BR Break 19 Cambio de paacuterrafo ltPgt P Paragraph 19 Liacutenea Horizontal ltHRgt HR Horizontal Rule 20

Lenguaje HTML copy Grupo EIDOS

6

Texto preformateado ltPREgt PRE Preformatted 21 ELEMENTOS DEL LENGUAJE I 23

CABECERAS Y ATRIBUTOS DE TEXTO 23 Cabeceras ltH1gtltH6gt H Heading 23 Atributos del texto 24

LISTAS 26 Listas no numeradas ltULgt UL Unordered List 26 Listas numeradas ltOLgt OL Ordered List 27 Listas de definiciones ltDLgt DL Definition List 29

HIPERENLACES 29 Enlaces a otras paacuteginas ltA href=gt29 Enlaces dentro de la misma paacutegina ltA name=gt 30

IMAacuteGENES 31 ELEMENTOS DEL LENGUAJE II 37

TABLAS 37 FORMULARIOS 43

Entrada baacutesica de datos 44 Texto corto type=text 44 Claves type=password 45 Botones de seleccioacuten type=checkbox 45 Seleccioacuten entre varias opciones type=radio 46 Campos ocultos type=hidden 46 Botoacuten de enviacuteo de datos type=submit 47 Botoacuten graacutefico de enviacuteo de datos type=image 47 Botoacuten de borrado de datos type=reset 47

Entrada datos en muacuteltiples liacuteneas 48 Entrada de datos a traveacutes de campos de seleccioacuten 48

ELEMENTOS DEL LENGUAJE III 51 FRAMES 51

Estructura de un documento con frames 51 Definicioacuten de cada una de las frames 53

ELEMENTOS MULTIMEDIA 54 Sonido de fondo 54 Reproduccioacuten de viacutedeo 54 Insercioacuten de cualquier tipo de fichero 55

Introduccioacuten al HTML

iquestQueacute es HTML HTML es la abreviatura de HyperText Markup Language y es el lenguaje que todos los programas navegadores usan para presentar informacioacuten en la World Wide Web (WWW)

Este es un lenguaje muy sencillo que se basa en el uso de etiquetas consistentes en un texto ASCII encerrado dentro de un par de pareacutentesis angulares(ltgt) El texto incluido dentro de los pareacutentesis nos daraacute una explicacioacuten de la utilidad de la etiqueta Asiacute por ejemplo la etiqueta ltTABLEgt nos permitiraacute definir una tabla

Las etiquetas podraacuten incluir una serie de atributos o paraacutemetros en su mayoriacutea opcionales que nos permitiraacuten definir diferentes posibilidades o caracteriacutesticas de la misma Estos atributos quedaraacuten definidos por su nombre (que seraacute explicativo de su utilidad) y el valor que toman separados por un signo de igual En el caso de que el valor que tome el atributo tenga maacutes de una palabra deberaacute expresarse entre comillas en caso contrario no seraacute necesario Asiacute por ejemplo la etiqueta ltTABLEborder=2gt nos permitiraacute definir una tabla con borde de tamantildeo 2

Entre otras cosas el manejo de estas etiquetas nos permitiraacute

bull Definir la estructura loacutegica del documento HTML

bull Aplicar distintos estilos al texto (negrita cursiva )

Lenguaje HTML copy Grupo EIDOS

8

bull La inclusioacuten de hiperenlaces que nos permitiraacuten acceder a otros documentos relacionados con el actual

bull La inclusioacuten de imaacutegenes y ficheros multimedia (graacuteficos viacutedeo audio)

iquestQueacute vamos a necesitar para crear un documento HTML

bull Un procesador de textos para escribir y editar el coacutedigo HTML Este podraacute ser cualquiera que no formatee el texto ya que el leguaje HTML estaacute basado en el coacutedigo ASCCI Si usamos un procesador como el Word tendremos que guardar el documento como soacutelo texto

bull Un navegador Web como el Explorer Netscape Mosaic etc el cual se encargaraacute del interpretar el coacutedigo HTML de nuestro documento y mostraacuternoslo en todo su esplendor

La secuencia de trabajo para crear nuestro documento es

1 Con el procesador de texto crearemos el documento HTML y lo guardaremos con el nombre que deseemos a excepcioacuten de la extensioacuten que deberaacute ser necesariamente htm oacute html

2 Para visualizar nuestro documento HTML abriremos el documento con el programa navegador

Reglas de formato Todos los navegadores usan unas reglas baacutesicas para poder mostrar una paacutegina web con un buen formato

bull El espacio en blanco es ignorado Ya que un documento HTML puede estar en cualquier tipo de fuente y ademaacutes la ventana del navegador puede ser de cualquier tamantildeo

bull Las etiquetas pueden ser escritas en mayuacutesculas o en minuacutesculas En todo caso se aconseja su escritura en mayuacutesculas para poder distinguirlas del texto normal

bull Existe normalmente una etiqueta de inicio y otra de fin La etiqueta de fin contendraacute el mismo texto que la de inicio antildeadieacutendole al principio una barra inclinada La etiqueta afectaraacute por tanto a todo lo que esteacute incluido entre las etiquetas de inicio y fin No obstante existen algunas que no necesitan cierre ya que en estas etiquetas se presupone su final como por ejemplo ltPgt paacuterrafo ltBRgt salto de liacutenea oacute ltIMGgt inclusioacuten de una imagen

Vemos un ejemplo en la Tabla 1

Instruccioacuten HTML Resultado

ltBgtTexto en negritaltBgt Texto en negrita

ltHIgtTexto en cursivaltIgt Texto en cursiva

ltBgtltIgtTexto en negrita y cursivaltBgtltIgt Texto en negrita y cursiva

Tabla 1

copy Grupo EIDOS 1 Introduccioacuten al HTML

9

Estructura de un documento HTML La estructura baacutesica de un documento HTML es la siguiente

ltHTMLgt Indica el inicio del documento ltHEADgt Indica el inicio de la cabecera

ltTITLEgt Inicio del tiacutetulo del documento

ltTITLEgt Final del tiacutetulo del documento

ltHEADgt Final de la cabecera ltBODYgt Inicio del cuerpo del documento Instrucciones HTML ltBODYgt Final del cuerpo del documento ltHTMLgt Final del documento

Ninguno de estos elementos es obligatorio pudiendo crear documentos HTML sin incluir estas etiquetas de identificacioacuten No obstante es altamente recomendable la construccioacuten de paacuteginas HTML siguiendo esta estructura para una buena estructuracioacuten y legibilidad del coacutedigo

Nuestra primera paacutegina HTML Una vez que conocemos la estructura baacutesica de un documento HTML vamos a crear una paacutegina HTML muy sencillita

1 Lo primero seraacute abrir el procesador de textos que hayamos elegido y copiar el Coacutedigo fuente 1

ltHTMLgtltHEADgtltTITLEgt Mi primera paacutegina HTML ltTITLEgtltHEADgtltBODYgtEsta es mi primera paacutegina ltBgtHTMLltBgtltBODYgtltHTMLgt

Coacutedigo fuente 1

2 Una vez tecleado el coacutedigo guardamos el documento como Pagina1htm y procedemos a

abrirlo con el navegador correspondiente El resultado seraacute

Esta es mi primera paacutegina HTML

Lenguaje HTML copy Grupo EIDOS

10

Forma del URL El URL(Uniform Resource Locator) nos van a permitir localizar y acceder a cualquier recurso de la red desde nuestro programa navegador A traveacutes de los URL podremos referenciar cualquier fichero que deseemos incluir en nuestro documento HTML Cada elemento de Internet vendraacute definido por su URL correspondiente independientemente del tipo de servidor en el que se encuentre

La forma general del URL es

Tipo de servicio maquinadominiopuertocaminoarchivo

El Tipo de servicio como su propio nombre indica hace referencia a alguno de los servicios de Internet El servicio correspondiente al WWW es http (HiperText Transport Protocol) protocolo para la transmisioacuten de hipertexto Por lo que cualquier referencia a un documento HTML deberiacutea comenzar por http Otros servicios son ftp news telnet o mailto

La maacutequinadominio indica el nombre del servidor en que se encuentra el documento al que estamos haciendo referencia junto con el dominio al que pertenece dicho servidor

El puerto es opcional y lo normal es no ponerlo indicaacutendose soacutelo en el caso de que el servidor utilice un puerto distinto al puerto por defecto

El camino indica la ruta de directorios que hay que seguir para encontrar el documento que estamos referenciando

Finalmente especificaremos el nombre del archivo en que estaacute guardado el documento en cuestioacuten Si no indicamos un archivo accederemos al archivo por defecto del directorio al que estemos referenciando(En el caso del servicio http este archivo por defecto suele ser defaulthtm oacute defaulthtml)

Vamos a ver a continuacioacuten algunos ejemplos de URL s accediendo a distintos servicios de la WWW

Localizando un documento hypertexto (http) Sintaxis

httpmaquinadominiopuertocaminoarchivo

Ejemplo1 httpwwweidoses

En este ejemplo estamos indicando el servicio al que estamos accediendo (http) la maacutequina y el dominio tomaacutendose el resto de paraacutemetros por defecto de forma que accederemos al directorio raiacutez del servidor y al documento por defecto de ese directorio en este caso estamos accediendo a la paacutegina de portada de Villa Eidos

Ejemplo2 httpwwweidosesvulcaninformahtm

Con esta URL estamos accediendo al fichero informahtm que se encuentra en el directorio vulcan del servidor wwweidoses

copy Grupo EIDOS 1 Introduccioacuten al HTML

11

Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol) Sintaxis

ftpmaquinadominiopuertocaminoarchivo

Ejemplo ftp ftpjetespubauto_ftp

En este caso estamos accediendo al servicio ftp (protocolo de transferencia de archivos) ftpjetes En este caso no estamos indicando ninguacuten archivo con lo que se referenciaraacute un iacutendice con los contenidos del directorio pubauto_ftp

Accediendo a un grupo de noticias (news) Sintaxis

newsGRUPO

Ejemplo newsjetes

En este ejemplo estamos accediendo al grupo de noticias del servidor de news jetes

Accediendo a una direccioacuten e-mail (mailto) Sintaxis

mailto Destinatario_1 Destinatario_2Destinatario_n

Ejemplo mailtocursoseidoses

Enviaraacute un mail a la direccioacuten de correo electroacutenico indicada

Localizacioacuten de un archivo cualquiera (file) Sintaxis

filemaquinadominiopuertocaminoarchivo

Ejemplo filecwindows

En este caso estamos accediendo a la carpeta Windows de la unidad C de nuestro ordenador local

Cabecera y cuerpo del documento HTML

Cabecera Cabecera del documento HTML ltHEADgt

ltHEADgt

En la cabecera de un documento HTML incluiremos las definiciones generales que afecten a todo el documento como por ejemplo el tiacutetulo de la paacutegina que apareceraacute en la parte superior de la ventana del navegador

Las etiquetas ltHEADgt y ltHEADgt son las que van a delimitar la cabecera de nuestro documento Todas la etiquetas de la cabecera son opcionales aunque se recomienda incluir en todos nuestros documentos la etiqueta ltTITLEgt correspondiente al tiacutetulo del documento

A continuacioacuten vamos a tratar cada uno de los posibles componentes de la cabecera por separado

Tiacutetulo del documento ltTITLEgtltTITLEgt

El tiacutetulo de nuestro documento viene especificado por las etiquetas ltTITLEgt y ltTITLEgt y como ya hemos mencionado este tiacutetulo es el que apareceraacute en la ventana de nuestro programa

Lenguaje HTML copy Grupo EIDOS

14

navegador Lo normal y recomendable es que el tiacutetulo guarde relacioacuten con el contenido de nuestro documento ya que por ejemplo es utilizado por algunos servidores de buacutesqueda para poder intuir el contenido de nuestro documento Veamos un ejemplo en el Coacutedigo fuente 2

ltTITLEgtMi primera paacutegina WebltTITLEgt

Coacutedigo fuente 2

Indicador de refresco del documento ltMETA http-equiv=refresh content=nuacutemero_segundosurl=URL derefrescogt

Esta etiqueta sirve para indicar un documento que deberaacute sustituir al actual transcurrido un nuacutemero determinado de segundos Una posible utilidad de esta etiqueta podriacutea ser para visualizar documentos de forma secuencial de forma que se empieza por un documento y se pasa al siguiente transcurrido un periacuteodo de tiempo sin necesidad de que la persona que lee el documento realice ninguna accioacuten

Veamos un ejemplo en el Coacutedigo fuente 3

ltMETA http-equiv=refresh content=5url=httpwwweidosesgt

Coacutedigo fuente 3

Si insertamos esta instruccioacuten en la cabecera de nuestro paacutegina HTML transcurridos 5 segundos eacutesta se refrescaraacute con la paacutegina Web de portada de Villa Eidos

Indicador de la URL base del documento ltBASE href=URLgt

Con esta etiqueta indicamos la localizacioacuten de los ficheros a los que se hace referencia en nuestra paacutegina Web Si no incluimos esta etiqueta el navegador entenderaacute que dichos ficheros se encuentran en el mismo lugar donde reside nuestra paacutegina Web

Vemos un ejemplo en el Coacutedigo fuente 4

ltBASE href=httpwwweidosesvulcangt

Coacutedigo fuente 4

Si especificamos como URL base de nuestro documento HTML la indicada en este ejemplo y posteriormente hacemos referencia en nuestra paacutegina a un fichero llamado aulahtm se entenderaacute que la localizacioacuten del fichero es httpwwweidosesvulcanaulahtm

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

15

Cuerpo Cuerpo del documento HTML ltBODYgt

ltBODYgt

En el cuerpo de un documento HTML es donde incluiremos las distintas instrucciones del lenguaje junto con el contenido en siacute de nuestra paacutegina Web textos imaacutegenes enlaces a otras paacuteginas etc

Las etiquetas ltBODYgt y ltBODYgt son las que van a delimitar el cuerpo de nuestro documento Esta posee una serie de argumentos que nos van a permitir variar las caracteriacutesticas del documento en su conjunto como por ejemplo el color del texto o del color de fondo de nuestra paacutegina web

Antes de analizar los componentes y atributos de BODY vamos a ver como se especifican los colores en un documento HTML

Estos se pueden especificar por su nombre (name) o por su coacutedigo de color que es un nuacutemero compuesto de tres pares de cifras hexadecimales que nos indican la proporcioacuten de los colores primarios (rojo verde y azul) que forman el color deseado (rrggbb)

Nombre Coacutedigo de color Color mostrado

Black 000000 Negro

Teal 008080 Teal

Blue 0000FF Azul

Navy 000080 Azul marino

Lime 00FF00 Lima

White FFFFFF Blanco

Purple 800080 Puacuterpura

Yellow FFFF00 Amarillo

Olive 808000 Oliva

Red FF0000 Rojo

maroon 800000 Marroacuten

gray 808080 Gris

fuchsia FF00FF Fucsia

green 008000 Verde

Lenguaje HTML copy Grupo EIDOS

16

silver C0C0C0 Plata

aqua 00FFFF Agua

Tabla 2

La etiqueta ltBODYgt presenta una serie de atributos que van a afectar a todo el documento en su conjunto Estos atributos nos van a permitir definir los colores del texto del fondo y de los hiperenlaces del documento Incluso nos permitiraacuten insertar una imagen de fondo en nuestra paacutegina

ltBODY background=URL bgcolor=rrggbb oacute name text=namelink=name vlink=name gt

bull background=URL Nos va a permitir mostrar una imagen como fondo de nuestro

documento HTML El camino a esta imagen vendraacute especificado por la URL que definamos Si la imagen no rellena todo el fondo del documento eacutesta seraacute reproducida tantas veces como sea necesario hasta completar todo el fondo

Si insertas el Coacutedigo fuente 5 en el documento HTML que creamos como ejemplo en el capiacutetulo anterior Pagina1htm este presentaraacute como fondo la imagen fondogif

ltBODY background=fondogifgt

Coacutedigo fuente 5

bull bgcolor=rrggbb oacute name bgcolor Background Color Nos va a permitir definir un

color para el fondo de nuestro documento Este atributo seraacute ignorado si previamente hemos utilizado el atributo background

Inserte el Coacutedigo fuente 6 en Pagina1htm y compruebe el resultado

ltBODY bgcolor=bluegt

Coacutedigo fuente 6

bull text=rrggbb oacute name Nos permitiraacute definir un color para el texto de nuestro

documento Por defecto es negro Inserte el Coacutedigo fuente 7 en Pagina1html y compruebe el resultado

ltBODY text=redgt

Coacutedigo fuente 7

Y ahora inserte el Coacutedigo fuente 8 en el documento y comprueba el resultado

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

17

ltBODY bgcolor=yellow text=navygt

Coacutedigo fuente 8

bull link=rrggbb oacute name Indica el color que tendraacuten los hiperenlaces que no han sido

accedidos Por defecto es azul Como todaviacutea no sabemos insertar hiperenlaces en nuestro documento vamos a dejar el ejemplo correspondiente para maacutes adelante

bull vlink=rrggbb oacute name vlink Visited Links Indica el color de los hiperenlaces que ya han sido accedidos Por defecto es puacuterpura

Caracteres especiales Hasta ahora hemos escrito algunos ejemplos de coacutedigo HTML pero hemos pasado por alto algunas limitaciones de HTML respecto al uso de caracteres especiales Una de estas limitaciones es por ejemplo el uso de los caracteres lt y gt que como ya sabemos indican el inicio y fin de una etiqueta HTML Pues bien si quisieacuteramos escribir estos caracteres como parte normal de un texto el navegador no sabriacutea si se trata de texto normal o del comienzo y final de una etiqueta o sea que se hariacutea un liacuteo

Como todo tiene solucioacuten existen unos coacutedigos para poder escribir estos caracteres y otros relacionados con las etiquetas los vemos en la Tabla 3

Siacutembolo Coacutedigo

lt (menor que) amplt

gt (mayor que) ampgt

amp (ampersand) ampamp

(comillas) ampquot

Tabla 3

Para las letras especiacuteficas del idioma castellano las vocales acentuadas la ntilde la uuml y los signos iquest y iexcl existen los coacutedigos que muestra la Tabla 4

Letra Coacutedigo Letra Coacutedigo Letra Coacutedigo

aacute ampaacute Aacute ampAacute ntilde ampntilde

eacute ampeacute Eacute ampEacute Ntilde ampNtilde

iacute ampiacute

Iacute ampIacute

uuml ampuuml

Lenguaje HTML copy Grupo EIDOS

18

oacute ampoacute Oacute ampOacute Uuml ampUuml

uacute ampuacute Uacute ampUacute iquest amp191

iexcl amp161

Tabla 4

Para los navegadores actuales podemos escribir nuestro coacutedigo HTML de manera directa sin tener en cuenta estos coacutedigos pero nunca podemos asegurar que las personas que accedan a nuestras paacuteginas con otros navegadores puedan leerlas correctamente Asiacute que los maacutes adecuado es el empleo de los mismos Otros siacutembolos especiales aparecen en la Tabla 5

Siacutembolo Coacutedigo

Ccedil ampccedil

Ccedil ampCcedil

copy ampcopy

reg ampreg

Tabla 5

Veamos un ejemplo en el Coacutedigo fuente 9

ampquotLa inspiraciampoacuten existe pero tiene que encontrarse trabajandoampquotampcopy Pablo Ruampiacutez Picasso

Coacutedigo fuente 9

Esta instruccioacuten HTML deberiacutea producir el siguiente resultado

La inspiracioacuten existe pero tiene que encontrarse trabajando copyPablo Ruiacutez Picasso

Para la inclusioacuten de comentarios en nuestra paacutegina HTML podemos usar la etiqueta lt-- --gt Estos comentarios nos podraacuten servir para efectuar anotaciones en nuestro documento HTML que ayuden a una mayor comprensioacuten del coacutedigo En el Coacutedigo fuente 10 se muestra un ejemplo de comentario

lt-- Esto es un comentario y no seraacute mostrado por el navegador --gt

Coacutedigo fuente 10

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

19

Espaciado y saltos de liacutenea En HTML soacutelo se admite un uacutenico espacio en blanco separando cualquier elemento o texto el resto de espacios seraacuten ignorados por el navegador al igual que las tabulaciones retornos de carro etc Veamos un ejemplo en la Tabla 6

Ejemplo Resultado

Esta frase no se veraacute asiacute en el visor Esta frase no se veraacute asiacute en el visor

Tabla 6

No obstante siacute podremos dar el formato que deseemos a nuestras paacuteginas con el empleo de los siguientes elementos del lenguaje HTML

Inclusioacuten de espacios en blanco ampnbsp Nos permitiraacute la inclusioacuten de maacutes de un espacio en blanco entre dos textos consecutivos de forma que estos espacios se muestren de forma efectiva en el navegador Tendremos que incluir tantas expresiones ampnbsp como espacios en blanco se deseen incluir

Ejemplo Resultado

Texto1ampnbspampnbspampnbspampnbspTexto2 Texto1 Texto2

Tabla 7

Salto de liacutenea ltBRgt BR Break Nos permite dar un salto a la liacutenea siguiente en el punto donde la etiqueta sea insertada

Ejemplo Resultado

Esta frase tiene aquiacuteltBRgt un salto de liacutenea Esta frase tiene aquiacute un salto de liacutenea

Tabla 8

Cambio de paacuterrafo ltPgt P Paragraph Permite definir un paacuterrafo introduciendo normalmente un espacio de separacioacuten de dos liacuteneas con el texto siguiente al punto donde hayamos insertado la etiqueta ltPgt

Lenguaje HTML copy Grupo EIDOS

20

Ejemplo Resultado

Esta frase tiene aquiacuteltPgt un cambio de paacuterrafo Esta frase tiene aquiacute

un cambio de paacuterrafo

Tabla 9

La etiqueta de fin paacuterrafo ltPgt es opcional no siendo necesario incluirla Aunque siempre es recomendable delimitar claramente el inicio y final de un paacuterrafo Ademaacutes cuando usemos esta etiqueta como cerrada ltPgt ltPgt tenemos la posibilidad de incluirle el atributo align el cual indica al navegador la forma de justificar el texto incluido en el paacuterrafo El formato seriacutea el siguiente

ltP align= left right center justify gtTexto contenido en elpaacuterrafo ltPgt

Veamos algunos ejemplos en la Tabla 10

Ejemplo Resultado

ltP align=rightgtEste es un ejemplode paacuterrafo alineado a laderechaltPgt

Este es un ejemplo de paacuterrafo alineado a la derecha

ltP align=centergtEste es unejemplo de paacuterrafo centradoltPgt

Este es un ejemplo de paacuterrafo centrado

Tabla 10

Liacutenea Horizontal ltHRgt HR Horizontal Rule Nos permite insertar una liacutenea horizontal cuyo tamantildeo podremos determinar a traveacutes de sus atributos Si no especificamos ninguacuten atributo dibujaraacute una liacutenea que ocupe el ancho de la pantalla del navegador Su utilidad es la de permitirnos dividir nuestra paacutegina en distintas secciones No seraacute necesaria la etiqueta de fin ltHRgt

El formato de la etiqueta con sus posibles atributos es

ltHR align= left right center noshade size=n width=n gt

bull align= left right center Permite establecer la alineacioacuten de la liacutenea a la izquierda a la derecha o centrarla

bull noshade No muestra la sombra de la liacutenea evitando el efecto de tres dimensiones

bull size=n Indica el grosor de la liacutenea en pixels

bull width=n oacute n Especificaraacute el ancho de la liacutenea este se podraacute especificar en pixels (n) o en tanto por ciento del ancho de la ventana (n) Vamos a ver algunos ejemplos en la Tabla 11

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

21

Ejemplo Resultado

ltHRgt

ltHR size=3 noshadegt

ltHR size=5width=50align=rightgt

ltHR size=10width=50align=centergt

Tabla 11

Texto preformateado ltPREgt PRE Preformatted Nos permitiraacute visualizar el texto tal y como se ha escrito respetando los saltos de liacutenea las tabulaciones y espacios en blanco de todo el texto incluido entre las etiquetas ltPREgt y ltPREgt

El texto se mostraraacute con una fuente de espaciado fijo maacutes pequentildea que el texto normal No es recomendable su uso ya que presenta muchas limitaciones y no se obtiene una buena presentacioacuten

Ejemplo Resultado

ltPREgtEste texto estaacutepreformateadoltPREgt

Este texto estaacute preformateado

Tabla 12

Elementos del lenguaje I

Cabeceras y atributos de texto

Cabeceras ltH1gtltH6gt H Heading En un documento HTML podemos incluir seis tipos distintos de cabeceras que van a constituir normalmente el tiacutetulo y los distintos subapartados que forman el documento aunque podremos utilizarlas en el punto que queramos del documento para resaltar cualquier texto Estas cabeceras son definidas por las etiquetas ltH1gtltH2gtltH3gtltH4gtltH5gt y ltH6gt El texto que componga cada cabecera deberaacute estar incluido entre las etiquetas de inicio (ltHngt) y fin (Hn) correspondiente La cabecera ltH1gtseraacute la que muestre el texto de mayor tamantildeo este tamantildeo iraacute disminuyendo hasta llegar a la cabecera ltH6gt Como podemos ver en la Tabla 13 Para alinear las cabeceras utilizamos el atributo align El formato seriacutea ltHn align=centergt como muestra la Tabla 14

Ejemplo Resultado

ltH1gtCabecera 1ltH1gt Cabecera 1 ltH2gtCabecera 2ltH2gt Cabecera 2

Lenguaje HTML copy Grupo EIDOS

24

ltH3gtCabecera 3ltH3gt Cabecera 3

ltH4gtCabecera 4ltH4gt Cabecera 4

ltH5gtCabecera 5ltH5gtCabecera 5

ltH6gtCabecera 6ltH6gtCabecera 6

Tabla 13

Ejemplo Resultado

ltH5 align=centergtCabecera 5ltH5gtCabecera 5

Tabla 14

Atributos del texto Al texto de nuestro documento HTML le podemos aplicar distintos atributos (negrita cursiva subrayado etc) al igual que hacemos cuando trabajamos con el procesador de textos en la edicioacuten de nuestros documentos Para aplicar estos atributos disponemos de distintas etiquetas que aplicaraacuten su efecto al texto incluido entre sus indicadores de inicio y fin Las vemos en la Tabla 15

Atributo Etiqueta Ejemplo Resultado

Negrita ltBgtltBgtltBgtTexto ennegritaltBgt

Texto en negrita

Cursiva ltIgtltIgtltIgtTexto encursivaltIgt

Texto en cursiva

Teletype ltTTgtltTTgtltTTgtTexto en modoteletypeltTTgt

Texto en modoteletype

Subrayado ltUgtltUgt ltUgtTexto subrayadoltUgt Texto subrayado Tachado ltSgtltSgt ltSgtTexto tachadoltSgt Texto tachado

Parpadeo ltBLINKgtltBLINKgtltBLINKgtTextoparpadeandoltBLINKgt

Texto parpadeando

Superiacutendice ltSUPgtltSUPgt ltSUPgtTexto en modosuperiacutendiceltSUPgt

Texto en modo superiacutendice

Subiacutendice ltSUBgtltSUBgtltSUBgtTexto en modosubiacutendiceltSUBgt

Texto en modo subiacutendice

Centrado ltCENTERgtltCENTERgt

ltCENTERgtTextocentradoltCENTERgt

Texto centrado

B Bold I Italic TT Teletype U Underlined S Strike SUP Superscript SUB Subscript

Tabla 15

copy Grupo EIDOS 3 Elementos del lenguaje I

25

Alguna de estas etiquetas no es reconocida por determinados navegadores Asiacute por ejemplo la etiqueta ltBLINKgt (Parpadeo) no es implementada por el Explorer Por lo que seguacuten el explorador que estemos utilizando podremos ver el resultado correctamente o no

Existen otras etiquetas que nos van a servir para especificar de manera diferenciada unidades loacutegicas de nuestro documento HTML tales como citas direcciones de correo etc En algunos casos el formato obtenido con estas etiquetas de estilo loacutegico va a ser el mismo que con las anteriores a las que se les denomina tambieacuten etiquetas de estilo fiacutesico Algunas etiquetas de estilo loacutegico las vemos en la Tabla 16

Etiqueta Ejemplo Resultado

ltSTRONGgtltSTRONGgtltSTRONGgtEspecifica textoresaltado (igualltBgt)ltSTRONGgt

Especifica texto resaltado(igual ltBgt)

ltCITEgtltCITEgtltCITEgtIndica una cita otiacutetulo (igual ltIgt)ltCITEgt

Indica una cita o tiacutetulo (igualltIgt)

ltSTRIKEgtltSTRIKEgtltltSTRIKEgtTexto tachado(igual ltSgt)ltSTRIKEgt

Texto tachado (igual ltSgt)

Tabla 16

Si queremos aplicar efectos maacutes espectaculares a nuestro documento HTML debemos variar el tamantildeo el color y el tipo de letra del texto La etiqueta que nos permite todo esto es ltFONTgtltFONTgt por medio de sus atributos size color y face

ltFONT size=n oacute +- n color=rrggbb oacute name face=nombre defont gt

bull size=n oacute +- n El atributo size nos permite especificar un tamantildeo determinado

para la fuente del texto incluido entre las etiquetas de inicio y fin el cual puede estar entre 1 y 7 El texto de tamantildeo normal equivale a la fuente de tamantildeo 3 (fuente base) Por tanto si especificamos size=+2 el tamantildeo de la fuente seraacute 5 Y si especificamos size= -1 el tamantildeo seraacute 2

Ejemplo Resultado

ltFONT size=2gtTamantildeo 2ltFONTgtTamantildeo 2

ltFONT size=+2gtTamantildeo 5 (3+2)ltFONTgt Tamantildeo 5 (3+2)

ltFONT size=-1gtTamantildeo 2 (3-1)ltFONTgtTamantildeo 2 (3-1)

Tabla 17

bull color=rrggbb oacute name Nos va a permitir definir el color que tendraacute el texto

incluido entre las etiquetas Tabla 18

Lenguaje HTML copy Grupo EIDOS

26

Ejemplo Resultado

ltFONT color=redgtTexto de colorrojoltFONTgt

Texto de color rojo

ltFONT color=bluegtTexto de colorazulltFONTgt

Texto de color azul

ltFONT size=5 color=008000gtTextoverde y de tamantildeo 5ltFONTgt

Texto verde y detamantildeo 5

Tabla 18

bull face=nombre de font Nos va a permitir escribir texto con el tipo de letra que le

especifiquemos En el caso de que el tipo de letra que le hayamos especificado no esteacute cargada en el ordenador que lee la paacutegina se usaraacute el font por defecto del navegador

Ejemplo Resultado

ltFONT face=TahomagtTipo de letraTahomaltFONTgt

Tipo de letra Tahoma

ltFONT size=4 color=blueface=TahomagtTexto azul de tamantildeo4 y TahomaltFONTgt

Texto azul de tamantildeo 4 y Tahoma

Tabla 19

Listas Podemos representar elementos en forma de lista dentro de nuestros documentos de una forma muy sencilla y con una gran versatilidad Estas listas podraacuten incluir cualquiera de los elementos HTML e incluso podemos definir listas anidadas es decir listas dentro de listas HTML nos permite crear tres tipos distintos de listas

bull Listas no numeradas

bull Listas numeradas

bull Listas de definiciones

Listas no numeradas ltULgt UL Unordered List

Con este tipo de listas podemos especificar una serie de elementos sin un orden predeterminado precedidos de una marca o vintildeeta que nosotros mismos podemos definir Para la definicioacuten de los liacutemites de la lista utilizaremos la etiqueta ltULgt ltULgt y para determinar cada uno de los elementos que la componen usaremos la etiqueta ltLIgt El formato es el siguiente

ltUL type=disk oacute circle oacute squaregtltLHgtTiacutetulo de la listaltLHgt

copy Grupo EIDOS 3 Elementos del lenguaje I

27

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltULgtLH List Head LI List Item

Con el atributo type vamos a especificar el tipo de marca o vintildeeta que antecederaacute a cada uno de los elementos de la lista Estas marcas podraacuten ser un disco (disk) un ciacuterculo (circle) o un cuadrado (square) La etiqueta ltLHgt nos va a servir para especificar un posible tiacutetulo de la lista siendo esta opcional Vamos a ver algunos ejemplos en la Tabla 20

Ejemplo Resultado

ltUL type=circlegtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAfricaltLIgtAmeacutericaltLIgtOceaniacutea

ltULgt

Los cinco continentes

Europa

Asia

Aacutefrica

Ameacuterica

Oceaniacutea

ltUL type=squaregtltLIgtEuropaltLIgtAsialtLIgtAfricaltLIgtAmeacutericaltUL type=circle gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltULgtltLIgtOceaniacutea

ltULgt

Europa

Asia

Aacutefrica

Ameacuterica

Ameacuterica del Norte

Ameacuterica del Sur

Oceaniacutea

Tabla 20

Listas numeradas ltOLgt OL Ordered List

Con este tipo de listas podemos especificar una serie de elementos numerados seguacuten el lugar que ocupan en la lista Para la definicioacuten de los liacutemites de la lista utilizaremos la etiqueta ltOLgt ltOLgt y para determinar cada uno de los elementos que la componen usaremos la etiqueta ltLIgt El formato es el siguiente

ltOL start=n type=Tipo de listagtltLHgtTiacutetulo de la listaltLHgt

Lenguaje HTML copy Grupo EIDOS

28

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltOLgt

Con el atributo start vamos a especificar el nuacutemero por el que va a empezar la lista Si no indicamos este argumento la lista empezaraacute a numerarse a partir del 1 Con el atributo type vamos a especificar el tipo de lista numerada Sus posibles valores aparecen a continuacioacuten y veremos algunos ejemplos en la Tabla 21

A Letras mayuacutesculas (A B C )

a Letras minuacutesculas (a b c )

I Nuacutemeros romanos en mayuacutesculas (I II III IV )

i Nuacutemeros romanos en minuacutesculas (i ii iii iv )

1 Numeacutericamente (1 2 3 4 ) (es la numeracioacuten por defecto y por tanto no habriacutea que indicarla)

Ejemplo Resultado

ltOL type=AgtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltLIgtOceaniacutea

ltOLgt

Los cinco continentes

A Europa

B Asia

C Aacutefrica

D Ameacuterica

E Oceaniacutea

ltOL type=I start=2gtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltOL type=i gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltOLgtltLIgtOceaniacutea

ltOLgt

II Europa

III Asia

IV Aacutefrica

V Ameacuterica

i Ameacuterica del Norte

ii Ameacuterica del Sur

VI Oceaniacutea

Tabla 21

copy Grupo EIDOS 3 Elementos del lenguaje I

29

Listas de definiciones ltDLgt DL Definition List

Estas listas nos van a servir para especificar una serie de teacuterminos y sus definiciones correspondientes Para la definicioacuten de la lista usaremos la etiqueta ltDLgt ltDLgt para especificar los teacuterminos usaremos la etiqueta ltDTgt y para especificar la definicioacuten correspondiente a cada teacutermino usaremos la etiqueta ltDDgt El formato es el siguiente

ltDLgtltLHgtTiacutetulo de la listaltLHgtltDTgtTeacutermino 1ltDDgtDefinicioacuten 1ltDTgtTeacutermino 2ltDDgtDefinicioacuten 2

ltDTgtTeacutermino nltDDgtDefinicioacuten n

ltDLgtDT Definition Term DD Definition Description

Vamos a ver un ejemplo en la Tabla 22

Ejemplo Resultado

ltDLgtltDTgtPariacutesltDDgtCapital de FrancialtDTgtRomaltDDgtCapital de ItalialtDTgtMadridltDDgtCapital de Espantildea

ltDLgt

Pariacutes

Capital de Francia

Roma

Capital de Italia

Madrid

Capital de Espantildea

Tabla 22

Hiperenlaces Los hiperenlaces son enlaces de hipertexto que nos van a permitir acceder de manera directa a otros documentos HTML independientemente de su ubicacioacuten o a otras zonas dentro de nuestro propio documento

Enlaces a otras paacuteginas ltA href=gt Con este tipo de hiperenlaces vamos a poder acceder tanto a otras paacuteginas que esteacuten ubicadas dentro de nuestro propio sistema como a paacuteginas ubicadas en puntos muy distantes del globo El formato de este tipo de hiperenlaces es

ltA href=URL a la que se accedegtTexto del hiperenlaceltAgt

Lenguaje HTML copy Grupo EIDOS

30

Con el atributo href vamos a especificar la URL del documento al que se pretende acceder El texto contenido entre las etiquetas de comienzo y fin nos va a servir para definir el hiperenlace por lo que deberiacutea ser clarificador del contenido del documento con el que vamos a enlazar Esta definicioacuten apareceraacute resaltada normalmente en azul y subrayada En la mayoriacutea de los navegadores esta definicioacuten del hiperenlace es sensible por lo que cuando el cursor pasa por encima del mismo este cambia de aspecto indicaacutendolo

Veamos un ejemplo en la Tabla 23

Ejemplo Resultado

ltA href=httpwwweidosesgtPaacutegina inicialde Villa EidosltAgt

Paacutegina inicial de Villa Eidos

Tabla 23

Si situamos el ratoacuten encima del hiperenlace y pulsamos el navegador accederaacute a la paacutegina Web indicada por href es decir accederaacute a la paacutegina situada en httpwwweidoses

Igualmente podriacuteamos indicar el hiperenlace por medio de una imagen Si esta imagen tiene definido un borde este apareceraacute resaltado en color azul El formato correspondiente seriacutea

ltA href=URL a la que se accedegtltIMG src=Imagengt y tambieacutentextoltAgtIMG Image src Source

Veamos un ejemplo en la Tabla 24

Ejemplo Resultado

ltA href=httpwwweidosesgtltIMGsrc=IconogifgtltAgt Villa Eidos Villa Eidos

Tabla 24

Si pulsamos sobre la imagen el navegador accederaacute a la paacutegina Web inicial de Villa Eidos

Enlaces dentro de la misma paacutegina ltA name=gt Este tipo de hiperenlaces nos va a permitir marcar distintas zonas del documento activo con el objeto de tener un acceso directo a las mismas Una buena utilidad de este tipo de enlaces radica en la creacioacuten de iacutendices para documentos largos de forma que si pinchamos en el hiperenlace correspondiente al tiacutetulo de un capiacutetulo determinado el navegador saltaraacute automaacuteticamente hasta el comienzo de dicho capiacutetulo

Para la creacioacuten de estos hiperenlaces debemos seguir dos pasos

copy Grupo EIDOS 3 Elementos del lenguaje I

31

1 Marcar las distintas zonas o secciones del documento Esto lo haremos con el paraacutemetro name

ltA name=Identificador de seccioacutengtTexto de laseccioacutenltAgt

A cada seccioacuten le asignaremos un identificador distinto para poder referenciarlas posteriormente de manera inequiacutevoca

2 Especificar un enlace a cada una de las secciones que hayamos definido ltA href=Identificador de seccioacutengtTexto del enlace a laseccioacutenltAgt

Si pinchamos en este enlace el navegador saltaraacute automaacuteticamente a la seccioacuten correspondiente Veamos un ejemplo sencillito en la Tabla 25 pero demostrativo de todo lo que acabamos de explicar

Ejemplo Resultado

ltA href=Cap1gtCapiacutetulo1ltAgtltA name=Cap1gtCapiacutetulo 1ltAgt

Capiacutetulo 1

Capiacutetulo 1

Tabla 25

Si nos creamos una paacutegina HTML con distintos capiacutetulos podriacuteamos crear una seccioacuten para cada uno de ellos de forma que si pinchamos en el hiperenlace correspondiente al Capiacutetulo 1 el navegador saltariacutea directamente a la seccioacuten correspondiente al Capiacutetulo 1

Ademaacutes de los dos tipos de hiperenlaces vistos podemos crear hiperenlaces que nos permitan acceder a cualquiera de los servicios de Internet Es decir podriacuteamos indicar enlaces a servidores FTP GOPHER NEWS MAILTO etc Para ello tendriacuteamos que indicar la URL correspondiente al servicio al cual queremos acceder como ya vimos en el primer capiacutetulo de este manual

Imaacutegenes

Podremos dar un aspecto mucho maacutes vistoso a nuestros documentos HTML con la inclusioacuten de imaacutegenes Los formatos de imagen que todos los navegadores reconocen son gif y jpg Si queremos insertar una imagen en otro formato el visor deberiacutea disponer del programa externo que permita su visualizacioacuten De todas formas una buena solucioacuten es utilizar alguacuten programa de tratamiento de imaacutegenes que nos convierta la imagen a uno de los formatos mencionados anteriormente

El formato gif es maacutes recomendado para la inclusioacuten de iconos graacuteficas y el formato jpg para el caso de insertar fotografiacuteas en nuestras paacuteginas

Lenguaje HTML copy Grupo EIDOS

32

La etiqueta que nos va a permitir la insercioacuten de imaacutegenes es ltIMGgt La imagen se insertaraacute justo en el punto del documento donde coloquemos dicha etiqueta pudiendo insertar imaacutegenes dentro de listas tablas o formularios

El formato de la etiqueta con sus posibles argumentos es el siguiente

ltIMG src=URL de la imagen alt=Texto alternativoalign=topmiddlebottonleftrigth border=Tamantildeoheight=Tamantildeo width=Tamantildeo hspace=margen vspace=margengt

bull src=URL de la imagen El atributo src nos va servir para indicar la URL de la imagen que

queremos insertar es decir el servidor y camino hasta llegar al fichero de la imagen

No seraacute necesario que la imagen que queremos insertar en nuestro documento esteacute en el ordenador local aunque siacute es recomendable ya que el acceso a las mismas puede ser maacutes lento

Por tanto es una buena praacutectica copiar todas las imaacutegenes que vayamos a incluir en nuestro documento HTML al ordenador local

Tabla 26

bull alt=Texto alternativo Nos va a permitir mostrar un texto alternativo para el caso en que el

navegador no sea capaz de mostrar la imagen Su uso es muy recomendable ya que cuando publiquemos nuestras paacuteginas en la WWW no sabremos desde queacute tipo de navegadores accederaacuten los internautas a nuestras paacuteginas

En la Tabla 27 vamos a ver un ejemplo

Si usas un navegador que no tiene ninguacuten problema para la visualizacioacuten de imaacutegenes desactiva temporalmente la opcioacuten de mostrar imaacutegenes prueba el ejemplo que muestra la Tabla 27 y compaacuteralo con el anterior

Tabla 27

copy Grupo EIDOS 3 Elementos del lenguaje I

33

bull align=topmiddlebotton leftrigth Nos permite indicar coacutemo se alinearaacute el texto que siga a la imagen

top alinea el texto con la parte superior de la imagen

middle con la parte central

bottom con la parte inferior

left imagen alineada a la izquierda de la paacutegina

rigth imagen alineada a la derecha de la paacutegina

Tabla 28

En el caso de que el texto que acompantildea a la imagen tenga maacutes de una liacutenea tan soacutelo la primera seraacute la que se alinearaacute seguacuten alguna de las anteriores alineaciones el resto de liacuteneas se incluiraacuten debajo de la imagen quedando un efecto bastante feo

Para solventar esto estaacuten las alineaciones LEFT (imagen alineada a la izquierda de la paacutegina) y RIGHT (imagen alineada a la derecha de la paacutegina) Las cuales permiten que la imagen se inserte dentro del paacuterrafo que la rodea produciendo un resultado mucho maacutes profesional en la integracioacuten de texto e imaacutegenes

Estas dos alineaciones no se podraacuten usar en combinacioacuten con las anteriores Veamos algunos ejemplos en la Tabla 29

Vemos como en el primer ejemplo la segunda liacutenea de texto aparece debajo de la imagen produciendo un efecto menos vistoso que en los dos ejemplos siguientes

Lenguaje HTML copy Grupo EIDOS

34

Tabla 29

bull border=Tamantildeo Permite antildeadirle un borde a la imagen del tamantildeo que le

especifiquemos

Si la imagen forma parte de un hiperenlace esta apareceraacute con un borde del color del hiperenlace Si no deseaacuteramos que aparezca este borde tendriacuteamos que especificar border=0

Tabla 30

bull height=Tamantildeo Permite especificar el alto de la imagen en puntos de pantalla

(pixels) o en del tamantildeo del documento

bull width=Tamantildeo Con este argumento especificaremos el ancho al que mostraremos la imagen en puntos de pantalla (pixels) o en del tamantildeo del documento

En el segundo de los ejemplos de la Tabla 31 el ancho de la imagen se ha extendido al 50 del total del ancho de la celda donde estaacute contenida la imagen Si pruebas este ejemplo en tu documento HTML la imagen se extenderaacute horizontalmente hasta ocupar el 50 del ancho de la paacutegina

copy Grupo EIDOS 3 Elementos del lenguaje I

35

Tabla 31

bull hspace=Margen hspace Horizontal Space Permite especificar el nuacutemero de espacios

horizontales (en puntos) que separaraacuten a la imagen de cualquier elemento que le siga o le anteceda

bull vspace=Margen vspace Vertical Space Con este argumento especificaremos el margen vertical (en puntos) que habraacute entre la imagen y cualquier otro elemento de nuestro documento

Tabla 32

Elementos del lenguaje II

Tablas HTML nos va a permitir la inclusioacuten de cualquiera de los elementos de nuestra paacutegina (texto imaacutegenes hiperenlaces listas etc) dentro de una tabla Gracias a lo cual conseguiremos dar una mayor y mejor estructuracioacuten a los contenidos de nuestros documentos Ademaacutes la definicioacuten de las tablas en HTML es muy abierta pudiendo en cualquier momento redimensionar la tabla es decir cambiar su nuacutemero de filas o de columnas cambiar el tamantildeo de alguna de sus celdas etc

La etiqueta que nos va a permitir la definicioacuten de tablas es ltTABLEgt ltTABLEgt

El formato general de la etiqueta sin ninguacuten argumento es el siguiente

ltTABLEgtltTR gt

ltTHgtContenido de la celda ltTHgtltTDgtContenido de la celda ltTDgt

ltTRgtltTABLEgt

TR Table Row TH Table Header TD Table Data

Vamos a analizar cada una de estas etiquetas de forma separada

1 ltTABLEgt ltTABLEgt Definicioacuten general de la tabla Dentro de ella definiremos las filas y columnas que la constituyen pudiendo incluso definir tablas dentro de tablas es decir tablas anidadas

Lenguaje HTML copy Grupo EIDOS

38

2 ltTRgt ltTRgt Definicioacuten de las filas de la tabla Por cada etiqueta ltTRgt que incluyamos se crearaacute una fila en la tabla No seraacute necesario indicar la etiqueta de cierre

3 ltTHgtltTHgt oacute ltTDgtltTDgt Definicioacuten de cada una de las celdas de la tabla Vemos que estas etiquetas estaacuten contenidas dentro de otra etiqueta de definicioacuten de fila de forma que por cada etiqueta ltTHgt o ltTDgt que incluyamos se crearaacute una celda dentro de la fila correspondiente La etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera es decir celdas cuyo contenido estaacute resaltado en negrita dejando la etiqueta ltTDgt para definir celdas de datos En este caso tampoco es necesario indicar las etiquetas de cierre

Todas estas etiquetas tienen sus respectivos argumentos Pero antes de analizar cada uno de ellos vamos a ver un ejemplo muy sencillito en la Tabla 33 que nos crearaacute una tabla de una sola celda (1 fila X 1 columna = 1 celda) Para ello usaremos la etiqueta de creacioacuten de tabla ltTABLEgt con el argumento border=1 (nos dibuja un borde de tamantildeo 1 alrededor de la tabla)

Ejemplo Resultado

ltTABLE border=1gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 33

Vamos ahora a analizar lo distintos argumentos que componen las etiquetas de la tabla analizaacutendolos desde lo general (la definicioacuten de la tabla) hasta lo especiacutefico (la definicioacuten de las celdas)

1 Definicioacuten de la tabla ltTABLEgt

ltTABLE border=n cellpadding=n cellspacing=n width=n oacute height=n oacute bgcolor=rrggbb oacute nombre gt

Contenido ltTABLEgt

bull border=n Si especificamos este argumento se dibujaraacute un borde alrededor de la

tabla del ancho que le indiquemos como muestra la Tabla 34

Ejemplo Resultado

Mi primera tabla ltTABLE border=4gtltTRgtltTDgtMi primera tablaltTABLEgt

Tabla 34

bull cellpadding=n Indica el espacio en puntos que separa el contenido de la celda con

el borde de la misma siendo 1 por defecto

copy Grupo EIDOS 4 Elementos del lenguaje II

39

Ejemplo Resultado

ltTABLE border=4 cellpadding=8gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 35

bull cellspacing=n Indica el espacio en puntos que separa a las celdas contenidas dentro de la tabla siendo 2 por defecto

bull width=n oacute Indica la anchura de la tabla en puntos o en en funcioacuten del ancho de la ventana del visualizador Si no indicamos este argumento el ancho de la tabla se ajustaraacute al tamantildeo del contenido de las celdas Esto es lo que ha ocurrido en el uacuteltimo ejemplo que hemos realizado Veamos un ejemplo en el Coacutedigo fuente 11 El resultado se muestra en la Tabla 36

ltTABLE border=4 width=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 11

Mi primera tabla

Tabla 36

bull height=n oacute Nos permite definir la altura de la tabla en puntos o en de la

altura de la ventana del visualizador Si indicamos este argumento lo recomendable es darlo en puntos ya que es maacutes complicado adecuarnos a la altura de la ventana del visualizador Al igual que en el caso anterior si no especificamos este argumento la altura se adecuaraacute al contenido de las celdas El Coacutedigo fuente 12 muestra un ejemplo y la Tabla 37 nos muestra el resultado

ltTABLE border=4 width=50 height=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 12

Mi primera tabla

Tabla 37

bull bgcolor= rrggbb o nombre del color Nos permite definir un color

de fondo para todas las celdas de la tabla Maacutes adelante veremos como podemos definir colores especiacuteficos para cada una de las celdas por separado

Lenguaje HTML copy Grupo EIDOS

40

Ejemplo Resultado

ltTABLE border=4 bgcolor=yellowgtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 38

2 Definicioacuten de las filas de la tabla ltTRgt

ltTR align=leftrightcenter valign=topmiddlebottombgcolor=rrggbb oacute nombregt

Antes de empezar a descifrar el significado de cada uno de los argumentos de esta etiqueta vamos a ver un ejemplo en la Tabla 39 de coacutemo se construiriacutea una tabla con dos filas (2 filas X 1 columna = 2 celdas)

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR gtltTDgtPrimera filaltTRgtltTDgtSegunda filaltTABLEgt

Segunda fila

Tabla 39

bull align=leftrightcenter Con este argumento vamos a indicar la alineacioacuten

horizontal (leftizquierda rightderecha centercentrado) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado Veamos un ejemplo en el Coacutedigo fuente 13 y su correspondiente resultado en la Tabla 40

ltTABLE border=4 width=50 gt ltTRgtltTDgtPrimera filaltTRalign=rightgtltTDgtSegunda filaltTABLEgt

Coacutedigo fuente 13

Primera fila

Segunda fila

Tabla 40

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten

vertical (toparriba middlecentrado bottomabajo) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado

copy Grupo EIDOS 4 Elementos del lenguaje II

41

bull bgcolor= rrggbb o nombre del color En este caso este argumento nos permitiraacute definir un color de fondo para todas las celdas de una fila veamos un ejemplo en la

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR bgcolor=yellowgtltTDgtPrimera

filaltTR bgcolor=greengtltTDgtSegunda

filaltTABLEgt

Segunda fila

Tabla 41

3 Definicioacuten de las celdas de la tabla ltTHgt oacute ltTDgt

ltTH oacute TD align=leftrightcenterjustifyvalign=topmiddlebottom bgcolor=rrggbb oacute nombre width=nrowspan=n colspan=ngt

Como ya explicamos anteriormente la etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera y la etiqueta ltTDgt para la creacioacuten de celdas de datos Vamos a completar nuestro ejemplo inicial antildeadieacutendole tres filas de dos celdas cada una (3 filas X 2 columnas = 6 celdas) Tabla 42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTDgtCelda 21ltTDgtCelda 22

ltTABLEgt Celda 21 Celda 22

Tabla 42

bull align=leftrightcenterjustify Con este argumento vamos a indicar la

alineacioacuten horizontal (left izquierda right derecha center centrado justifyjustificado) del contenido de cada celda por separado Su significado es el mismo que en la etiqueta ltTRgt

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten vertical (toparriba middlecentrado bottomabajo) del contenido de cada celda

bull bgcolor= rrggbb o nombre del color En este caso podremos definir un color de fondo para cada una de las celdas de manera independiente

bull width=n oacute Indica el ancho de la celda en puntos o en en funcioacuten del tamantildeo de la tabla

Lenguaje HTML copy Grupo EIDOS

42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera

1ltTHgtCabecera 2ltTR gtltTD align=rightgtCelda

11ltTD bgcolor=redgtCelda 12ltTRgtltTD

bgcolor=yellowgtCelda 21ltTDalign=centergtCelda 22ltTABLEgt

Celda 21 Celda 22

Tabla 43

bull rowspan=n Con este argumento podemos lograr que una celda concreta abarque maacutes de una fila ya sabemos que por defecto una celda ocupa una sola fila

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTD rowspan=2gtCelda

11ltTDgtCelda 12ltTRgtltTDgtCelda 22

ltTABLEgt

Celda 11 Celda 22

Tabla 44

bull colspan=n Con este argumento podemos lograr que una celda se expanda a maacutes

de una columna

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTD colspan=2

align=centergtCelda 22ltTABLEgt

Celda 22

Tabla 45

Para finalizar este tema sobre la creacioacuten de tablas vamos a ver el ejemplo que aparece en el Coacutedigo fuente 14 y su resultado en la Tabla 46

ltTABLE border=4gtltTR gtltTH colspan=3 bgcolor=redgtTiacutetuloltTR bgcolor=yellowgtltTHgtCabecera 1ltTHgtCabecera 2ltTHgtCabecera 3

copy Grupo EIDOS 4 Elementos del lenguaje II

43

ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTDgtCelda 13ltTRgtltTD rowspan=2gtCelda 21ltTD bgcolor=greengtCelda 22ltTDgtCelda 23ltTRgtltTDgtCelda 32ltTDgtCelda 33

ltTABLEgt

Coacutedigo fuente 14

Tiacutetulo

Cabecera 1 Cabecera 2 Cabecera 3

Celda 11 Celda 12 Celda 13

Celda 22 Celda 23 Celda 21

Celda 32 Celda 33

Tabla 46

Formularios El formulario es el elemento de HTML que nos va a permitir interactuar con los visitantes de nuestras paacuteginas web de forma que podemos solicitarle informacioacuten al usuario y procesarla De esta forma podremos crear en nuestras paacuteginas encuestas para solicitar la opinioacuten del visitante sobre alguacuten tema e incluso sobre el contenido de nuestra propia paacutegina web cuestionarios para evaluar la asimilacioacuten de contenidos sobre un tema concreto que se trate en la paacutegina etc

El contenido de la informacioacuten introducida por medio del formulario seraacute enviado a la direccioacuten URL donde resida el programa que se encargaraacute de procesar los datos A este tipo de programas externos se les denomina programas CGI (Common Gateway Interface)

La etiqueta HTML que nos va a permitir la creacioacuten de formularios es ltFORMgt Su formato es el siguiente

ltFORM action=URL del programa que trata el formulariomethod=postgetgt Elementos del formulario ltFORMgt

bull action=URL del programa que trata el formulario A traveacutes de este

argumento indicaremos como ya hemos mencionado la direccioacuten del fichero de programa que va a tratar la informacioacuten suministrada por el formulario

Tambieacuten podriacuteamos incluir como URL que trata el formulario una direccioacuten de correo electroacutenico Por tanto el valor de este argumento podriacutea ser action =mailto direccioacuten de correo

Nota Esta opcioacuten soacutelo funciona adecuadamente con el navegador Netscape Con el Explorer este enviacuteo dariacutea como resultado un correo en blanco Para que esta opcioacuten funcione de manera independiente del navegador que se esteacute utilizando se ha de emplear un programa externo que realice este proceso

Lenguaje HTML copy Grupo EIDOS

44

bull method=postget A traveacutes de este argumento indicaremos el meacutetodo empleado para transferir la informacioacuten generada por el formulario

Si indicamos post se produciraacute la modificacioacuten del documento destino como es el caso de enviar la informacioacuten a una direccioacuten de correo electroacutenico Mediante el meacutetodo get no se produciraacuten cambios en el documento destino

Dentro de un formulario podremos incluir cualquier texto o instruccioacuten HTML de las vistas a lo largo de los capiacutetulos anteriores ademaacutes claro estaacute de los elementos tiacutepicos de un formulario cajas de texto botones de seleccioacuten menuacutes de opciones etc Vamos a ver coacutemo se incluiraacuten estos elementos en un formulario

Entrada baacutesica de datos Para definir los distintos tipos de campos baacutesicos de entrada de datos usaremos la etiqueta ltINPUTgt

El formato es el siguiente

ltINPUT type= text password checkbox radio hidden submit image reset name=Variable value=Valor inicialgt

bull El argumento type determinaraacute el tipo de campo de entrada que estamos insertando A

continuacioacuten describiremos cada uno de ellos

bull El argumento name especifica el nombre de la variable que tomaraacute el valor introducido en el campo

bull El argumento value especifica el valor por defecto que tendraacute el campo

Vamos a continuacioacuten a describir los distintos tipos campos de entrada que vendraacuten dados por los valores del argumento type

Texto corto type=text

Con este argumento vamos a indicar que el campo a introducir seraacute un texto El formato seriacutea

ltINPUT type= text name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los nuevos atributos es

bull size=Tamantildeo Indicaremos el tamantildeo en caracteres de la ventana de introduccioacuten de texto

bull maxlength=Longitud maacutexima Indicaremos el nuacutemero maacuteximo de caracteres a introducir en el campo

Vamos a ver un ejemplo en la Tabla 47

copy Grupo EIDOS 4 Elementos del lenguaje II

45

Ejemplo Resultado

NombreltINPUT type=text name=Var1Value=Texto por defecto size=20 maxlength=25gt

Tabla 47

Claves type=password

Con este argumento indicamos que el campo a introducir seraacute una palabra clave por lo que los caracteres que se introduzcan seraacuten sustituidos por asteriscos en la visualizacioacuten por pantalla El formato es

ltINPUT type= password name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los distintos argumentos es el mismo que en el caso anterior Veamos un ejemplo en la Tabla 48

Ejemplo Resultado

ClaveltINPUT type=password name=Var2Value=tutankamon size=11 maxlength=10gt

Tabla 48

Botones de seleccioacuten type=checkbox

El checkbox es un botoacuten que presenta dos estados marcado (1) y desmarcado (0) Podremos variar su estado simplemente pinchando con el ratoacuten El formato es

ltINPUT type= checkbox name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto

Si incluimos el argumento value cuando el botoacuten esteacute marcado su variable asociada adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 49

Ejemplo Resultado

ltINPUT type=checkbox name=Var3 value=Op1 checkedgtOpcioacuten1 ltbrgtltINPUT type=checkbox name=Var4 value=Op2gt Opcioacuten 2

Tabla 49

Lenguaje HTML copy Grupo EIDOS

46

Seleccioacuten entre varias opciones type=radio

Este argumento se usa cuando hay que hacer una seleccioacuten entre varias alternativas excluyentes pudieacutendose seleccionar uacutenicamente una de las alternativas Debemos incluir una etiqueta radio por cada una de las posibles alternativas El formato es

ltINPUT type= radio name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto En este caso uacutenicamente uno de los botones de radio podraacute aparecer marcado ya que se usa para el caso de opciones excluyentes

Cuando un botoacuten esteacute seleccionado la variable asociada a la lista de botones adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 50

Ejemplo Resultado

ltINPUT type=radio name=Var5 value=Op1gtOpcioacuten1 ltbrgtltINPUT type=radio name=Var5 value=Op2checkedgt Opcioacuten 2 ltbrgtltINPUT type=radio name=Var5 value=Op3 gtOpcioacuten 3

Tabla 50

En este ejemplo la variable Var5 tendraacute el valor Op2

Campos ocultos type=hidden

Este tipo de campos no son visibles para el usuario Su uso tiene sentido en el caso de enviar alguacuten tipo de informacioacuten que no deba ser visualizada o variada por el lector de nuestra paacutegina Web El formato es

ltINPUT type= hidden name=Variable value=Valor gt

Con esta etiqueta asignariacuteamos a la Variable referenciada por name el Valor de value y se mandariacutea junto con el formulario sin que el usuario de la paacutegina se entere de nada Veamos un ejemplo en el Coacutedigo fuente 15

ltINPUT type=hidden name=Var6 value=tutankamongt

Coacutedigo fuente 15

copy Grupo EIDOS 4 Elementos del lenguaje II

47

Botoacuten de enviacuteo de datos type=submit

Con este argumento especificamos un botoacuten en el que al pulsar los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario El formato es

ltINPUT type= submit value=Mensaje a mostrargt

En este caso el paraacutemetro value indica el mensaje que se mostraraacute en el botoacuten Veamos un ejemplo en la Tabla 51

Ejemplo Resultado

ltINPUT type=submit value=Enviar los Datosgt

Tabla 51

Botoacuten graacutefico de enviacuteo de datos type=image

Con este argumento especificamos un botoacuten de tipo imagen en el que al igual que con el botoacuten anterior si pulsamos en la imagen los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario Su formato es el siguiente

ltINPUT type= image src=URL de la imagen name=Variablegt

Con el paraacutemetro src especificamos la URL de la imagen que seraacute insertada en el botoacuten En este caso en la variable referenciada por name se almacenaraacuten las coordenadas del punto de la imagen donde se halla pinchado (de forma que estas coordenadas podriacutean ser procesadas por el programa que recibe los datos del formulario)

Botoacuten de borrado de datos type=reset

Con este argumento especificamos un botoacuten que al ser pulsado borraraacute el contenido actual de todos los campos dejaacutendolos con sus valores por defecto Su formato es

ltINPUT type= reset value=Texto del botoacutengt

Con el paraacutemetro value especificamos el texto que etiquetaraacute al botoacuten

Ejemplo Resultado

ltINPUT type=reset value=Borrar datosgt

Tabla 52

Lenguaje HTML copy Grupo EIDOS

48

Entrada datos en muacuteltiples liacuteneas En un formulario tambieacuten podremos introducir un campo de texto que abarque varias liacuteneas Para ello usaremos la etiqueta ltTEXTAREAgt ltTEXTAREAgt Su formato es el siguiente

ltTEXTAREA name=Variable rows=Filas cols=ColumnasgtContenido por defectoltTEXTAREAgt

Los argumentos rows y cols nos van a permitir especificar respectivamente el nuacutemero de filas de texto visibles y el nuacutemero de columnas de texto visibles en el campo

Ejemplo Resultado

ltTEXTAREA name=Var7 rows=5 cols=40gtContenido por defectoltTEXTAREAgt

Tabla 53

Entrada de datos a traveacutes de campos de seleccioacuten Con los campos de seleccioacuten podremos desplegar una lista de opciones entre las que podremos seleccionar una Para ello usaremos la etiqueta ltSELECTgt ltSELECTgt Su formato es el siguiente

ltSELECT name=Variable multiple size=ngtltOPTION selected value=Valor_1gtPrimera OpcioacutenltOPTION value=Valor_2gtSegunda Opcioacuten

ltOPTION value=Valor_ngtEneacutesima Opcioacuten

ltSELECTgt

Figura 1

bull La variable referenciada por name tomaraacute el valor(value) de la opcioacuten seleccionada

bull Si especificamos el argumento muacuteltiple se mostraraacuten todas la opciones en forma de tabla El nuacutemero de opciones visibles en la tabla vendraacute dado por el argumento size

copy Grupo EIDOS 4 Elementos del lenguaje II

49

bull Con la etiqueta ltOPTIONgt iremos definiendo cada una de las opciones de la lista

bull El argumento selected va a determinar cuaacutel es la opcioacuten por defecto

Para finalizar vamos a ver el Coacutedigo fuente 16 correspondiente a una encuesta realizada por la editorial ficticia EditoPc y en la Figura 2 observamos el resultado del formulario

ltP align=centergtltBgtEDITORIAL ltIgtEditoPcltIgtltBgtltPgtltFORM action=mailtodireccionejemplo method = postgtNombreltINPUT type=text size=30 name=nombregtltBRgtE_mail ltINPUT type=text size=30 name=e_mailgtltPgtDeseas recibir informacioacuten sobreltINPUT type=checkbox name=infor1 value=InternetgtInternetltINPUT type=checkbox name=infor2 value=ProgramacioacutengtProgramacioacutenltINPUT type=checkbox name=infor3 value=SistOperativogtSistOperativoltINPUT type=checkbox name=infor4 value=OfimaacuteticagtOfimaacuteticaltPgtiquestTe conectas a Internet desde casa ltbrgtltINPUT type=radio name=intercasa value=sigtSiacuteltINPUT type=radio name=intercasa value=nogtNoltPgtiquestQueacute uso le das a tu ordenador ltBRgtltSELECT name=uso multiple size=3gtltOPTION selectedgtProfesionalltOPTIONgtDomeacutesticoltOPTIONgtOcioJuegosltSELECTgtltPgtCaracteriacutesticas de tu PCltBRgtltTEXTAREA name=caract rows=5 cols=40gtltTEXTAREAgtltPgtltINPUT type=submit value=Enviar datosgt ltINPUT type=reset value=Borrardatosgt

Coacutedigo fuente 16

Figura 2

Elementos del lenguaje III

Frames Las frames son una utilidad del HTML que nos permite dividir la ventana del navegador en diferentes subventanas que podraacuten ser manipuladas de manera independiente Esto nos permitiraacute mostrar una paacutegina web diferente en cada una de la subventanas o frames

Estructura de un documento con frames Un documento con frames se estructura de manera diferente a un documento HTML normal Asiacute en este tipo de documentos no apareceraacute la etiqueta ltBODYgt En su lugar se incluiraacute la etiqueta ltFRAMESETgt ltFRAMESETgt dentro de la cual se definiraacuten las distintas frames que se incluyan en el documento

La estructura general de un documento de este tipo seriacutea por tanto

ltHTMLgtltHEADgtCabeceraltHEADgtltFRAMESETgt

Definicioacuten de la distintas framesltFRAMESETgtltNOFRAMESgt

Instrucciones HTMLltNOFRAMESgt

ltHTMLgt

Lenguaje HTML copy Grupo EIDOS

52

Puede darse el caso de que programemos nuestro documento con frames siguiendo la estructura anterior y que el navegador que se use para leer el documento no soporte la caracteriacutestica de frames con lo cual no se mostraraacute nada de lo indicado entre las etiquetas ltFRAMESETgt y ltFRAMESETgtPara solucionar este problema todas las instrucciones HTML incluidas entre las etiquetas ltNOFRAMESgt y ltNOFRAMESgt seraacuten ejecutadas por los navegadores que no soportan las frames

La sintaxis de la etiqueta ltFRAMESETgt es

ltFRAMESET rows=Lista de filas cols=Lista de columnasgtltFRAME src=URL de la frame 1 name=Nombre de la frame 1gtltFRAME src=URL de la frame 2 name=Nombre de la frame 2gt

ltFRAME src=URL de la frame n name=Nombre de la frame ngt

ltFRAMESETgt

Como vemos por cada una de la frames que incluyamos en nuestro documento debemos incluir una etiqueta ltFRAMEgt indicando mediante sus argumentos la direccioacuten URL del documento que se insertaraacute en la subventana (src) y el nombre de la frame (name) Posteriormente describiremos la etiqueta ltFRAMEgt con maacutes detalle

Los argumentos de ltFRAMESETgt son rows y cols definieacutendose uacutenicamente uno de los dos atributos en funcioacuten de si la divisioacuten de la pantalla se realizaraacute por filas (rows) o por columnas (cols)

Por cada una de las subventanas que creemos debemos especificar su tamantildeo en puntos o en porcentaje del tamantildeo de cada subventana Asiacute por ejemplo si especificamos rows= 50 2525 crearemos tres subventanas horizontales ocupando la primera el 50 de la ventana principal y las otras dos el resto Si especificamos cols=100150 crearemos tres subventanas verticales ocupando la primera 100 puntos de la ventana principal la segunda 150 puntos y tercera el espacio restante

Vamos a verlo maacutes claramente con un par de ejemplos praacutecticos que vemos en la Tabla 54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 502525gt ltFRAMEsrc=Pagweb1htm name=Pagweb1gtltFRAMEsrc=Pagweb2htm name=Pagweb2gtltFRAMEsrc=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 3: Programacion web   lenguaje html

Iacutendice

IacuteNDICE 5 INTRODUCCIOacuteN AL HTML 7

iquestQUEacute ES HTML 7 REGLAS DE FORMATO 8 ESTRUCTURA DE UN DOCUMENTO HTML 9 NUESTRA PRIMERA PAacuteGINA HTML 9 FORMA DEL URL 10

Localizando un documento hypertexto (http) 10 Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol) 11 Accediendo a un grupo de noticias (news) 11 Accediendo a una direccioacuten e-mail (mailto) 11 Localizacioacuten de un archivo cualquiera (file) 11

CABECERA Y CUERPO DEL DOCUMENTO HTML 13 CABECERA 13 TIacuteTULO DEL DOCUMENTO 13 INDICADOR DE REFRESCO DEL DOCUMENTO 14 INDICADOR DE LA URL BASE DEL DOCUMENTO 14 CUERPO 15 CARACTERES ESPECIALES 17 ESPACIADO Y SALTOS DE LIacuteNEA 19

Inclusioacuten de espacios en blanco ampnbsp 19 Salto de liacutenea ltBRgt BR Break 19 Cambio de paacuterrafo ltPgt P Paragraph 19 Liacutenea Horizontal ltHRgt HR Horizontal Rule 20

Lenguaje HTML copy Grupo EIDOS

6

Texto preformateado ltPREgt PRE Preformatted 21 ELEMENTOS DEL LENGUAJE I 23

CABECERAS Y ATRIBUTOS DE TEXTO 23 Cabeceras ltH1gtltH6gt H Heading 23 Atributos del texto 24

LISTAS 26 Listas no numeradas ltULgt UL Unordered List 26 Listas numeradas ltOLgt OL Ordered List 27 Listas de definiciones ltDLgt DL Definition List 29

HIPERENLACES 29 Enlaces a otras paacuteginas ltA href=gt29 Enlaces dentro de la misma paacutegina ltA name=gt 30

IMAacuteGENES 31 ELEMENTOS DEL LENGUAJE II 37

TABLAS 37 FORMULARIOS 43

Entrada baacutesica de datos 44 Texto corto type=text 44 Claves type=password 45 Botones de seleccioacuten type=checkbox 45 Seleccioacuten entre varias opciones type=radio 46 Campos ocultos type=hidden 46 Botoacuten de enviacuteo de datos type=submit 47 Botoacuten graacutefico de enviacuteo de datos type=image 47 Botoacuten de borrado de datos type=reset 47

Entrada datos en muacuteltiples liacuteneas 48 Entrada de datos a traveacutes de campos de seleccioacuten 48

ELEMENTOS DEL LENGUAJE III 51 FRAMES 51

Estructura de un documento con frames 51 Definicioacuten de cada una de las frames 53

ELEMENTOS MULTIMEDIA 54 Sonido de fondo 54 Reproduccioacuten de viacutedeo 54 Insercioacuten de cualquier tipo de fichero 55

Introduccioacuten al HTML

iquestQueacute es HTML HTML es la abreviatura de HyperText Markup Language y es el lenguaje que todos los programas navegadores usan para presentar informacioacuten en la World Wide Web (WWW)

Este es un lenguaje muy sencillo que se basa en el uso de etiquetas consistentes en un texto ASCII encerrado dentro de un par de pareacutentesis angulares(ltgt) El texto incluido dentro de los pareacutentesis nos daraacute una explicacioacuten de la utilidad de la etiqueta Asiacute por ejemplo la etiqueta ltTABLEgt nos permitiraacute definir una tabla

Las etiquetas podraacuten incluir una serie de atributos o paraacutemetros en su mayoriacutea opcionales que nos permitiraacuten definir diferentes posibilidades o caracteriacutesticas de la misma Estos atributos quedaraacuten definidos por su nombre (que seraacute explicativo de su utilidad) y el valor que toman separados por un signo de igual En el caso de que el valor que tome el atributo tenga maacutes de una palabra deberaacute expresarse entre comillas en caso contrario no seraacute necesario Asiacute por ejemplo la etiqueta ltTABLEborder=2gt nos permitiraacute definir una tabla con borde de tamantildeo 2

Entre otras cosas el manejo de estas etiquetas nos permitiraacute

bull Definir la estructura loacutegica del documento HTML

bull Aplicar distintos estilos al texto (negrita cursiva )

Lenguaje HTML copy Grupo EIDOS

8

bull La inclusioacuten de hiperenlaces que nos permitiraacuten acceder a otros documentos relacionados con el actual

bull La inclusioacuten de imaacutegenes y ficheros multimedia (graacuteficos viacutedeo audio)

iquestQueacute vamos a necesitar para crear un documento HTML

bull Un procesador de textos para escribir y editar el coacutedigo HTML Este podraacute ser cualquiera que no formatee el texto ya que el leguaje HTML estaacute basado en el coacutedigo ASCCI Si usamos un procesador como el Word tendremos que guardar el documento como soacutelo texto

bull Un navegador Web como el Explorer Netscape Mosaic etc el cual se encargaraacute del interpretar el coacutedigo HTML de nuestro documento y mostraacuternoslo en todo su esplendor

La secuencia de trabajo para crear nuestro documento es

1 Con el procesador de texto crearemos el documento HTML y lo guardaremos con el nombre que deseemos a excepcioacuten de la extensioacuten que deberaacute ser necesariamente htm oacute html

2 Para visualizar nuestro documento HTML abriremos el documento con el programa navegador

Reglas de formato Todos los navegadores usan unas reglas baacutesicas para poder mostrar una paacutegina web con un buen formato

bull El espacio en blanco es ignorado Ya que un documento HTML puede estar en cualquier tipo de fuente y ademaacutes la ventana del navegador puede ser de cualquier tamantildeo

bull Las etiquetas pueden ser escritas en mayuacutesculas o en minuacutesculas En todo caso se aconseja su escritura en mayuacutesculas para poder distinguirlas del texto normal

bull Existe normalmente una etiqueta de inicio y otra de fin La etiqueta de fin contendraacute el mismo texto que la de inicio antildeadieacutendole al principio una barra inclinada La etiqueta afectaraacute por tanto a todo lo que esteacute incluido entre las etiquetas de inicio y fin No obstante existen algunas que no necesitan cierre ya que en estas etiquetas se presupone su final como por ejemplo ltPgt paacuterrafo ltBRgt salto de liacutenea oacute ltIMGgt inclusioacuten de una imagen

Vemos un ejemplo en la Tabla 1

Instruccioacuten HTML Resultado

ltBgtTexto en negritaltBgt Texto en negrita

ltHIgtTexto en cursivaltIgt Texto en cursiva

ltBgtltIgtTexto en negrita y cursivaltBgtltIgt Texto en negrita y cursiva

Tabla 1

copy Grupo EIDOS 1 Introduccioacuten al HTML

9

Estructura de un documento HTML La estructura baacutesica de un documento HTML es la siguiente

ltHTMLgt Indica el inicio del documento ltHEADgt Indica el inicio de la cabecera

ltTITLEgt Inicio del tiacutetulo del documento

ltTITLEgt Final del tiacutetulo del documento

ltHEADgt Final de la cabecera ltBODYgt Inicio del cuerpo del documento Instrucciones HTML ltBODYgt Final del cuerpo del documento ltHTMLgt Final del documento

Ninguno de estos elementos es obligatorio pudiendo crear documentos HTML sin incluir estas etiquetas de identificacioacuten No obstante es altamente recomendable la construccioacuten de paacuteginas HTML siguiendo esta estructura para una buena estructuracioacuten y legibilidad del coacutedigo

Nuestra primera paacutegina HTML Una vez que conocemos la estructura baacutesica de un documento HTML vamos a crear una paacutegina HTML muy sencillita

1 Lo primero seraacute abrir el procesador de textos que hayamos elegido y copiar el Coacutedigo fuente 1

ltHTMLgtltHEADgtltTITLEgt Mi primera paacutegina HTML ltTITLEgtltHEADgtltBODYgtEsta es mi primera paacutegina ltBgtHTMLltBgtltBODYgtltHTMLgt

Coacutedigo fuente 1

2 Una vez tecleado el coacutedigo guardamos el documento como Pagina1htm y procedemos a

abrirlo con el navegador correspondiente El resultado seraacute

Esta es mi primera paacutegina HTML

Lenguaje HTML copy Grupo EIDOS

10

Forma del URL El URL(Uniform Resource Locator) nos van a permitir localizar y acceder a cualquier recurso de la red desde nuestro programa navegador A traveacutes de los URL podremos referenciar cualquier fichero que deseemos incluir en nuestro documento HTML Cada elemento de Internet vendraacute definido por su URL correspondiente independientemente del tipo de servidor en el que se encuentre

La forma general del URL es

Tipo de servicio maquinadominiopuertocaminoarchivo

El Tipo de servicio como su propio nombre indica hace referencia a alguno de los servicios de Internet El servicio correspondiente al WWW es http (HiperText Transport Protocol) protocolo para la transmisioacuten de hipertexto Por lo que cualquier referencia a un documento HTML deberiacutea comenzar por http Otros servicios son ftp news telnet o mailto

La maacutequinadominio indica el nombre del servidor en que se encuentra el documento al que estamos haciendo referencia junto con el dominio al que pertenece dicho servidor

El puerto es opcional y lo normal es no ponerlo indicaacutendose soacutelo en el caso de que el servidor utilice un puerto distinto al puerto por defecto

El camino indica la ruta de directorios que hay que seguir para encontrar el documento que estamos referenciando

Finalmente especificaremos el nombre del archivo en que estaacute guardado el documento en cuestioacuten Si no indicamos un archivo accederemos al archivo por defecto del directorio al que estemos referenciando(En el caso del servicio http este archivo por defecto suele ser defaulthtm oacute defaulthtml)

Vamos a ver a continuacioacuten algunos ejemplos de URL s accediendo a distintos servicios de la WWW

Localizando un documento hypertexto (http) Sintaxis

httpmaquinadominiopuertocaminoarchivo

Ejemplo1 httpwwweidoses

En este ejemplo estamos indicando el servicio al que estamos accediendo (http) la maacutequina y el dominio tomaacutendose el resto de paraacutemetros por defecto de forma que accederemos al directorio raiacutez del servidor y al documento por defecto de ese directorio en este caso estamos accediendo a la paacutegina de portada de Villa Eidos

Ejemplo2 httpwwweidosesvulcaninformahtm

Con esta URL estamos accediendo al fichero informahtm que se encuentra en el directorio vulcan del servidor wwweidoses

copy Grupo EIDOS 1 Introduccioacuten al HTML

11

Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol) Sintaxis

ftpmaquinadominiopuertocaminoarchivo

Ejemplo ftp ftpjetespubauto_ftp

En este caso estamos accediendo al servicio ftp (protocolo de transferencia de archivos) ftpjetes En este caso no estamos indicando ninguacuten archivo con lo que se referenciaraacute un iacutendice con los contenidos del directorio pubauto_ftp

Accediendo a un grupo de noticias (news) Sintaxis

newsGRUPO

Ejemplo newsjetes

En este ejemplo estamos accediendo al grupo de noticias del servidor de news jetes

Accediendo a una direccioacuten e-mail (mailto) Sintaxis

mailto Destinatario_1 Destinatario_2Destinatario_n

Ejemplo mailtocursoseidoses

Enviaraacute un mail a la direccioacuten de correo electroacutenico indicada

Localizacioacuten de un archivo cualquiera (file) Sintaxis

filemaquinadominiopuertocaminoarchivo

Ejemplo filecwindows

En este caso estamos accediendo a la carpeta Windows de la unidad C de nuestro ordenador local

Cabecera y cuerpo del documento HTML

Cabecera Cabecera del documento HTML ltHEADgt

ltHEADgt

En la cabecera de un documento HTML incluiremos las definiciones generales que afecten a todo el documento como por ejemplo el tiacutetulo de la paacutegina que apareceraacute en la parte superior de la ventana del navegador

Las etiquetas ltHEADgt y ltHEADgt son las que van a delimitar la cabecera de nuestro documento Todas la etiquetas de la cabecera son opcionales aunque se recomienda incluir en todos nuestros documentos la etiqueta ltTITLEgt correspondiente al tiacutetulo del documento

A continuacioacuten vamos a tratar cada uno de los posibles componentes de la cabecera por separado

Tiacutetulo del documento ltTITLEgtltTITLEgt

El tiacutetulo de nuestro documento viene especificado por las etiquetas ltTITLEgt y ltTITLEgt y como ya hemos mencionado este tiacutetulo es el que apareceraacute en la ventana de nuestro programa

Lenguaje HTML copy Grupo EIDOS

14

navegador Lo normal y recomendable es que el tiacutetulo guarde relacioacuten con el contenido de nuestro documento ya que por ejemplo es utilizado por algunos servidores de buacutesqueda para poder intuir el contenido de nuestro documento Veamos un ejemplo en el Coacutedigo fuente 2

ltTITLEgtMi primera paacutegina WebltTITLEgt

Coacutedigo fuente 2

Indicador de refresco del documento ltMETA http-equiv=refresh content=nuacutemero_segundosurl=URL derefrescogt

Esta etiqueta sirve para indicar un documento que deberaacute sustituir al actual transcurrido un nuacutemero determinado de segundos Una posible utilidad de esta etiqueta podriacutea ser para visualizar documentos de forma secuencial de forma que se empieza por un documento y se pasa al siguiente transcurrido un periacuteodo de tiempo sin necesidad de que la persona que lee el documento realice ninguna accioacuten

Veamos un ejemplo en el Coacutedigo fuente 3

ltMETA http-equiv=refresh content=5url=httpwwweidosesgt

Coacutedigo fuente 3

Si insertamos esta instruccioacuten en la cabecera de nuestro paacutegina HTML transcurridos 5 segundos eacutesta se refrescaraacute con la paacutegina Web de portada de Villa Eidos

Indicador de la URL base del documento ltBASE href=URLgt

Con esta etiqueta indicamos la localizacioacuten de los ficheros a los que se hace referencia en nuestra paacutegina Web Si no incluimos esta etiqueta el navegador entenderaacute que dichos ficheros se encuentran en el mismo lugar donde reside nuestra paacutegina Web

Vemos un ejemplo en el Coacutedigo fuente 4

ltBASE href=httpwwweidosesvulcangt

Coacutedigo fuente 4

Si especificamos como URL base de nuestro documento HTML la indicada en este ejemplo y posteriormente hacemos referencia en nuestra paacutegina a un fichero llamado aulahtm se entenderaacute que la localizacioacuten del fichero es httpwwweidosesvulcanaulahtm

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

15

Cuerpo Cuerpo del documento HTML ltBODYgt

ltBODYgt

En el cuerpo de un documento HTML es donde incluiremos las distintas instrucciones del lenguaje junto con el contenido en siacute de nuestra paacutegina Web textos imaacutegenes enlaces a otras paacuteginas etc

Las etiquetas ltBODYgt y ltBODYgt son las que van a delimitar el cuerpo de nuestro documento Esta posee una serie de argumentos que nos van a permitir variar las caracteriacutesticas del documento en su conjunto como por ejemplo el color del texto o del color de fondo de nuestra paacutegina web

Antes de analizar los componentes y atributos de BODY vamos a ver como se especifican los colores en un documento HTML

Estos se pueden especificar por su nombre (name) o por su coacutedigo de color que es un nuacutemero compuesto de tres pares de cifras hexadecimales que nos indican la proporcioacuten de los colores primarios (rojo verde y azul) que forman el color deseado (rrggbb)

Nombre Coacutedigo de color Color mostrado

Black 000000 Negro

Teal 008080 Teal

Blue 0000FF Azul

Navy 000080 Azul marino

Lime 00FF00 Lima

White FFFFFF Blanco

Purple 800080 Puacuterpura

Yellow FFFF00 Amarillo

Olive 808000 Oliva

Red FF0000 Rojo

maroon 800000 Marroacuten

gray 808080 Gris

fuchsia FF00FF Fucsia

green 008000 Verde

Lenguaje HTML copy Grupo EIDOS

16

silver C0C0C0 Plata

aqua 00FFFF Agua

Tabla 2

La etiqueta ltBODYgt presenta una serie de atributos que van a afectar a todo el documento en su conjunto Estos atributos nos van a permitir definir los colores del texto del fondo y de los hiperenlaces del documento Incluso nos permitiraacuten insertar una imagen de fondo en nuestra paacutegina

ltBODY background=URL bgcolor=rrggbb oacute name text=namelink=name vlink=name gt

bull background=URL Nos va a permitir mostrar una imagen como fondo de nuestro

documento HTML El camino a esta imagen vendraacute especificado por la URL que definamos Si la imagen no rellena todo el fondo del documento eacutesta seraacute reproducida tantas veces como sea necesario hasta completar todo el fondo

Si insertas el Coacutedigo fuente 5 en el documento HTML que creamos como ejemplo en el capiacutetulo anterior Pagina1htm este presentaraacute como fondo la imagen fondogif

ltBODY background=fondogifgt

Coacutedigo fuente 5

bull bgcolor=rrggbb oacute name bgcolor Background Color Nos va a permitir definir un

color para el fondo de nuestro documento Este atributo seraacute ignorado si previamente hemos utilizado el atributo background

Inserte el Coacutedigo fuente 6 en Pagina1htm y compruebe el resultado

ltBODY bgcolor=bluegt

Coacutedigo fuente 6

bull text=rrggbb oacute name Nos permitiraacute definir un color para el texto de nuestro

documento Por defecto es negro Inserte el Coacutedigo fuente 7 en Pagina1html y compruebe el resultado

ltBODY text=redgt

Coacutedigo fuente 7

Y ahora inserte el Coacutedigo fuente 8 en el documento y comprueba el resultado

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

17

ltBODY bgcolor=yellow text=navygt

Coacutedigo fuente 8

bull link=rrggbb oacute name Indica el color que tendraacuten los hiperenlaces que no han sido

accedidos Por defecto es azul Como todaviacutea no sabemos insertar hiperenlaces en nuestro documento vamos a dejar el ejemplo correspondiente para maacutes adelante

bull vlink=rrggbb oacute name vlink Visited Links Indica el color de los hiperenlaces que ya han sido accedidos Por defecto es puacuterpura

Caracteres especiales Hasta ahora hemos escrito algunos ejemplos de coacutedigo HTML pero hemos pasado por alto algunas limitaciones de HTML respecto al uso de caracteres especiales Una de estas limitaciones es por ejemplo el uso de los caracteres lt y gt que como ya sabemos indican el inicio y fin de una etiqueta HTML Pues bien si quisieacuteramos escribir estos caracteres como parte normal de un texto el navegador no sabriacutea si se trata de texto normal o del comienzo y final de una etiqueta o sea que se hariacutea un liacuteo

Como todo tiene solucioacuten existen unos coacutedigos para poder escribir estos caracteres y otros relacionados con las etiquetas los vemos en la Tabla 3

Siacutembolo Coacutedigo

lt (menor que) amplt

gt (mayor que) ampgt

amp (ampersand) ampamp

(comillas) ampquot

Tabla 3

Para las letras especiacuteficas del idioma castellano las vocales acentuadas la ntilde la uuml y los signos iquest y iexcl existen los coacutedigos que muestra la Tabla 4

Letra Coacutedigo Letra Coacutedigo Letra Coacutedigo

aacute ampaacute Aacute ampAacute ntilde ampntilde

eacute ampeacute Eacute ampEacute Ntilde ampNtilde

iacute ampiacute

Iacute ampIacute

uuml ampuuml

Lenguaje HTML copy Grupo EIDOS

18

oacute ampoacute Oacute ampOacute Uuml ampUuml

uacute ampuacute Uacute ampUacute iquest amp191

iexcl amp161

Tabla 4

Para los navegadores actuales podemos escribir nuestro coacutedigo HTML de manera directa sin tener en cuenta estos coacutedigos pero nunca podemos asegurar que las personas que accedan a nuestras paacuteginas con otros navegadores puedan leerlas correctamente Asiacute que los maacutes adecuado es el empleo de los mismos Otros siacutembolos especiales aparecen en la Tabla 5

Siacutembolo Coacutedigo

Ccedil ampccedil

Ccedil ampCcedil

copy ampcopy

reg ampreg

Tabla 5

Veamos un ejemplo en el Coacutedigo fuente 9

ampquotLa inspiraciampoacuten existe pero tiene que encontrarse trabajandoampquotampcopy Pablo Ruampiacutez Picasso

Coacutedigo fuente 9

Esta instruccioacuten HTML deberiacutea producir el siguiente resultado

La inspiracioacuten existe pero tiene que encontrarse trabajando copyPablo Ruiacutez Picasso

Para la inclusioacuten de comentarios en nuestra paacutegina HTML podemos usar la etiqueta lt-- --gt Estos comentarios nos podraacuten servir para efectuar anotaciones en nuestro documento HTML que ayuden a una mayor comprensioacuten del coacutedigo En el Coacutedigo fuente 10 se muestra un ejemplo de comentario

lt-- Esto es un comentario y no seraacute mostrado por el navegador --gt

Coacutedigo fuente 10

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

19

Espaciado y saltos de liacutenea En HTML soacutelo se admite un uacutenico espacio en blanco separando cualquier elemento o texto el resto de espacios seraacuten ignorados por el navegador al igual que las tabulaciones retornos de carro etc Veamos un ejemplo en la Tabla 6

Ejemplo Resultado

Esta frase no se veraacute asiacute en el visor Esta frase no se veraacute asiacute en el visor

Tabla 6

No obstante siacute podremos dar el formato que deseemos a nuestras paacuteginas con el empleo de los siguientes elementos del lenguaje HTML

Inclusioacuten de espacios en blanco ampnbsp Nos permitiraacute la inclusioacuten de maacutes de un espacio en blanco entre dos textos consecutivos de forma que estos espacios se muestren de forma efectiva en el navegador Tendremos que incluir tantas expresiones ampnbsp como espacios en blanco se deseen incluir

Ejemplo Resultado

Texto1ampnbspampnbspampnbspampnbspTexto2 Texto1 Texto2

Tabla 7

Salto de liacutenea ltBRgt BR Break Nos permite dar un salto a la liacutenea siguiente en el punto donde la etiqueta sea insertada

Ejemplo Resultado

Esta frase tiene aquiacuteltBRgt un salto de liacutenea Esta frase tiene aquiacute un salto de liacutenea

Tabla 8

Cambio de paacuterrafo ltPgt P Paragraph Permite definir un paacuterrafo introduciendo normalmente un espacio de separacioacuten de dos liacuteneas con el texto siguiente al punto donde hayamos insertado la etiqueta ltPgt

Lenguaje HTML copy Grupo EIDOS

20

Ejemplo Resultado

Esta frase tiene aquiacuteltPgt un cambio de paacuterrafo Esta frase tiene aquiacute

un cambio de paacuterrafo

Tabla 9

La etiqueta de fin paacuterrafo ltPgt es opcional no siendo necesario incluirla Aunque siempre es recomendable delimitar claramente el inicio y final de un paacuterrafo Ademaacutes cuando usemos esta etiqueta como cerrada ltPgt ltPgt tenemos la posibilidad de incluirle el atributo align el cual indica al navegador la forma de justificar el texto incluido en el paacuterrafo El formato seriacutea el siguiente

ltP align= left right center justify gtTexto contenido en elpaacuterrafo ltPgt

Veamos algunos ejemplos en la Tabla 10

Ejemplo Resultado

ltP align=rightgtEste es un ejemplode paacuterrafo alineado a laderechaltPgt

Este es un ejemplo de paacuterrafo alineado a la derecha

ltP align=centergtEste es unejemplo de paacuterrafo centradoltPgt

Este es un ejemplo de paacuterrafo centrado

Tabla 10

Liacutenea Horizontal ltHRgt HR Horizontal Rule Nos permite insertar una liacutenea horizontal cuyo tamantildeo podremos determinar a traveacutes de sus atributos Si no especificamos ninguacuten atributo dibujaraacute una liacutenea que ocupe el ancho de la pantalla del navegador Su utilidad es la de permitirnos dividir nuestra paacutegina en distintas secciones No seraacute necesaria la etiqueta de fin ltHRgt

El formato de la etiqueta con sus posibles atributos es

ltHR align= left right center noshade size=n width=n gt

bull align= left right center Permite establecer la alineacioacuten de la liacutenea a la izquierda a la derecha o centrarla

bull noshade No muestra la sombra de la liacutenea evitando el efecto de tres dimensiones

bull size=n Indica el grosor de la liacutenea en pixels

bull width=n oacute n Especificaraacute el ancho de la liacutenea este se podraacute especificar en pixels (n) o en tanto por ciento del ancho de la ventana (n) Vamos a ver algunos ejemplos en la Tabla 11

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

21

Ejemplo Resultado

ltHRgt

ltHR size=3 noshadegt

ltHR size=5width=50align=rightgt

ltHR size=10width=50align=centergt

Tabla 11

Texto preformateado ltPREgt PRE Preformatted Nos permitiraacute visualizar el texto tal y como se ha escrito respetando los saltos de liacutenea las tabulaciones y espacios en blanco de todo el texto incluido entre las etiquetas ltPREgt y ltPREgt

El texto se mostraraacute con una fuente de espaciado fijo maacutes pequentildea que el texto normal No es recomendable su uso ya que presenta muchas limitaciones y no se obtiene una buena presentacioacuten

Ejemplo Resultado

ltPREgtEste texto estaacutepreformateadoltPREgt

Este texto estaacute preformateado

Tabla 12

Elementos del lenguaje I

Cabeceras y atributos de texto

Cabeceras ltH1gtltH6gt H Heading En un documento HTML podemos incluir seis tipos distintos de cabeceras que van a constituir normalmente el tiacutetulo y los distintos subapartados que forman el documento aunque podremos utilizarlas en el punto que queramos del documento para resaltar cualquier texto Estas cabeceras son definidas por las etiquetas ltH1gtltH2gtltH3gtltH4gtltH5gt y ltH6gt El texto que componga cada cabecera deberaacute estar incluido entre las etiquetas de inicio (ltHngt) y fin (Hn) correspondiente La cabecera ltH1gtseraacute la que muestre el texto de mayor tamantildeo este tamantildeo iraacute disminuyendo hasta llegar a la cabecera ltH6gt Como podemos ver en la Tabla 13 Para alinear las cabeceras utilizamos el atributo align El formato seriacutea ltHn align=centergt como muestra la Tabla 14

Ejemplo Resultado

ltH1gtCabecera 1ltH1gt Cabecera 1 ltH2gtCabecera 2ltH2gt Cabecera 2

Lenguaje HTML copy Grupo EIDOS

24

ltH3gtCabecera 3ltH3gt Cabecera 3

ltH4gtCabecera 4ltH4gt Cabecera 4

ltH5gtCabecera 5ltH5gtCabecera 5

ltH6gtCabecera 6ltH6gtCabecera 6

Tabla 13

Ejemplo Resultado

ltH5 align=centergtCabecera 5ltH5gtCabecera 5

Tabla 14

Atributos del texto Al texto de nuestro documento HTML le podemos aplicar distintos atributos (negrita cursiva subrayado etc) al igual que hacemos cuando trabajamos con el procesador de textos en la edicioacuten de nuestros documentos Para aplicar estos atributos disponemos de distintas etiquetas que aplicaraacuten su efecto al texto incluido entre sus indicadores de inicio y fin Las vemos en la Tabla 15

Atributo Etiqueta Ejemplo Resultado

Negrita ltBgtltBgtltBgtTexto ennegritaltBgt

Texto en negrita

Cursiva ltIgtltIgtltIgtTexto encursivaltIgt

Texto en cursiva

Teletype ltTTgtltTTgtltTTgtTexto en modoteletypeltTTgt

Texto en modoteletype

Subrayado ltUgtltUgt ltUgtTexto subrayadoltUgt Texto subrayado Tachado ltSgtltSgt ltSgtTexto tachadoltSgt Texto tachado

Parpadeo ltBLINKgtltBLINKgtltBLINKgtTextoparpadeandoltBLINKgt

Texto parpadeando

Superiacutendice ltSUPgtltSUPgt ltSUPgtTexto en modosuperiacutendiceltSUPgt

Texto en modo superiacutendice

Subiacutendice ltSUBgtltSUBgtltSUBgtTexto en modosubiacutendiceltSUBgt

Texto en modo subiacutendice

Centrado ltCENTERgtltCENTERgt

ltCENTERgtTextocentradoltCENTERgt

Texto centrado

B Bold I Italic TT Teletype U Underlined S Strike SUP Superscript SUB Subscript

Tabla 15

copy Grupo EIDOS 3 Elementos del lenguaje I

25

Alguna de estas etiquetas no es reconocida por determinados navegadores Asiacute por ejemplo la etiqueta ltBLINKgt (Parpadeo) no es implementada por el Explorer Por lo que seguacuten el explorador que estemos utilizando podremos ver el resultado correctamente o no

Existen otras etiquetas que nos van a servir para especificar de manera diferenciada unidades loacutegicas de nuestro documento HTML tales como citas direcciones de correo etc En algunos casos el formato obtenido con estas etiquetas de estilo loacutegico va a ser el mismo que con las anteriores a las que se les denomina tambieacuten etiquetas de estilo fiacutesico Algunas etiquetas de estilo loacutegico las vemos en la Tabla 16

Etiqueta Ejemplo Resultado

ltSTRONGgtltSTRONGgtltSTRONGgtEspecifica textoresaltado (igualltBgt)ltSTRONGgt

Especifica texto resaltado(igual ltBgt)

ltCITEgtltCITEgtltCITEgtIndica una cita otiacutetulo (igual ltIgt)ltCITEgt

Indica una cita o tiacutetulo (igualltIgt)

ltSTRIKEgtltSTRIKEgtltltSTRIKEgtTexto tachado(igual ltSgt)ltSTRIKEgt

Texto tachado (igual ltSgt)

Tabla 16

Si queremos aplicar efectos maacutes espectaculares a nuestro documento HTML debemos variar el tamantildeo el color y el tipo de letra del texto La etiqueta que nos permite todo esto es ltFONTgtltFONTgt por medio de sus atributos size color y face

ltFONT size=n oacute +- n color=rrggbb oacute name face=nombre defont gt

bull size=n oacute +- n El atributo size nos permite especificar un tamantildeo determinado

para la fuente del texto incluido entre las etiquetas de inicio y fin el cual puede estar entre 1 y 7 El texto de tamantildeo normal equivale a la fuente de tamantildeo 3 (fuente base) Por tanto si especificamos size=+2 el tamantildeo de la fuente seraacute 5 Y si especificamos size= -1 el tamantildeo seraacute 2

Ejemplo Resultado

ltFONT size=2gtTamantildeo 2ltFONTgtTamantildeo 2

ltFONT size=+2gtTamantildeo 5 (3+2)ltFONTgt Tamantildeo 5 (3+2)

ltFONT size=-1gtTamantildeo 2 (3-1)ltFONTgtTamantildeo 2 (3-1)

Tabla 17

bull color=rrggbb oacute name Nos va a permitir definir el color que tendraacute el texto

incluido entre las etiquetas Tabla 18

Lenguaje HTML copy Grupo EIDOS

26

Ejemplo Resultado

ltFONT color=redgtTexto de colorrojoltFONTgt

Texto de color rojo

ltFONT color=bluegtTexto de colorazulltFONTgt

Texto de color azul

ltFONT size=5 color=008000gtTextoverde y de tamantildeo 5ltFONTgt

Texto verde y detamantildeo 5

Tabla 18

bull face=nombre de font Nos va a permitir escribir texto con el tipo de letra que le

especifiquemos En el caso de que el tipo de letra que le hayamos especificado no esteacute cargada en el ordenador que lee la paacutegina se usaraacute el font por defecto del navegador

Ejemplo Resultado

ltFONT face=TahomagtTipo de letraTahomaltFONTgt

Tipo de letra Tahoma

ltFONT size=4 color=blueface=TahomagtTexto azul de tamantildeo4 y TahomaltFONTgt

Texto azul de tamantildeo 4 y Tahoma

Tabla 19

Listas Podemos representar elementos en forma de lista dentro de nuestros documentos de una forma muy sencilla y con una gran versatilidad Estas listas podraacuten incluir cualquiera de los elementos HTML e incluso podemos definir listas anidadas es decir listas dentro de listas HTML nos permite crear tres tipos distintos de listas

bull Listas no numeradas

bull Listas numeradas

bull Listas de definiciones

Listas no numeradas ltULgt UL Unordered List

Con este tipo de listas podemos especificar una serie de elementos sin un orden predeterminado precedidos de una marca o vintildeeta que nosotros mismos podemos definir Para la definicioacuten de los liacutemites de la lista utilizaremos la etiqueta ltULgt ltULgt y para determinar cada uno de los elementos que la componen usaremos la etiqueta ltLIgt El formato es el siguiente

ltUL type=disk oacute circle oacute squaregtltLHgtTiacutetulo de la listaltLHgt

copy Grupo EIDOS 3 Elementos del lenguaje I

27

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltULgtLH List Head LI List Item

Con el atributo type vamos a especificar el tipo de marca o vintildeeta que antecederaacute a cada uno de los elementos de la lista Estas marcas podraacuten ser un disco (disk) un ciacuterculo (circle) o un cuadrado (square) La etiqueta ltLHgt nos va a servir para especificar un posible tiacutetulo de la lista siendo esta opcional Vamos a ver algunos ejemplos en la Tabla 20

Ejemplo Resultado

ltUL type=circlegtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAfricaltLIgtAmeacutericaltLIgtOceaniacutea

ltULgt

Los cinco continentes

Europa

Asia

Aacutefrica

Ameacuterica

Oceaniacutea

ltUL type=squaregtltLIgtEuropaltLIgtAsialtLIgtAfricaltLIgtAmeacutericaltUL type=circle gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltULgtltLIgtOceaniacutea

ltULgt

Europa

Asia

Aacutefrica

Ameacuterica

Ameacuterica del Norte

Ameacuterica del Sur

Oceaniacutea

Tabla 20

Listas numeradas ltOLgt OL Ordered List

Con este tipo de listas podemos especificar una serie de elementos numerados seguacuten el lugar que ocupan en la lista Para la definicioacuten de los liacutemites de la lista utilizaremos la etiqueta ltOLgt ltOLgt y para determinar cada uno de los elementos que la componen usaremos la etiqueta ltLIgt El formato es el siguiente

ltOL start=n type=Tipo de listagtltLHgtTiacutetulo de la listaltLHgt

Lenguaje HTML copy Grupo EIDOS

28

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltOLgt

Con el atributo start vamos a especificar el nuacutemero por el que va a empezar la lista Si no indicamos este argumento la lista empezaraacute a numerarse a partir del 1 Con el atributo type vamos a especificar el tipo de lista numerada Sus posibles valores aparecen a continuacioacuten y veremos algunos ejemplos en la Tabla 21

A Letras mayuacutesculas (A B C )

a Letras minuacutesculas (a b c )

I Nuacutemeros romanos en mayuacutesculas (I II III IV )

i Nuacutemeros romanos en minuacutesculas (i ii iii iv )

1 Numeacutericamente (1 2 3 4 ) (es la numeracioacuten por defecto y por tanto no habriacutea que indicarla)

Ejemplo Resultado

ltOL type=AgtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltLIgtOceaniacutea

ltOLgt

Los cinco continentes

A Europa

B Asia

C Aacutefrica

D Ameacuterica

E Oceaniacutea

ltOL type=I start=2gtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltOL type=i gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltOLgtltLIgtOceaniacutea

ltOLgt

II Europa

III Asia

IV Aacutefrica

V Ameacuterica

i Ameacuterica del Norte

ii Ameacuterica del Sur

VI Oceaniacutea

Tabla 21

copy Grupo EIDOS 3 Elementos del lenguaje I

29

Listas de definiciones ltDLgt DL Definition List

Estas listas nos van a servir para especificar una serie de teacuterminos y sus definiciones correspondientes Para la definicioacuten de la lista usaremos la etiqueta ltDLgt ltDLgt para especificar los teacuterminos usaremos la etiqueta ltDTgt y para especificar la definicioacuten correspondiente a cada teacutermino usaremos la etiqueta ltDDgt El formato es el siguiente

ltDLgtltLHgtTiacutetulo de la listaltLHgtltDTgtTeacutermino 1ltDDgtDefinicioacuten 1ltDTgtTeacutermino 2ltDDgtDefinicioacuten 2

ltDTgtTeacutermino nltDDgtDefinicioacuten n

ltDLgtDT Definition Term DD Definition Description

Vamos a ver un ejemplo en la Tabla 22

Ejemplo Resultado

ltDLgtltDTgtPariacutesltDDgtCapital de FrancialtDTgtRomaltDDgtCapital de ItalialtDTgtMadridltDDgtCapital de Espantildea

ltDLgt

Pariacutes

Capital de Francia

Roma

Capital de Italia

Madrid

Capital de Espantildea

Tabla 22

Hiperenlaces Los hiperenlaces son enlaces de hipertexto que nos van a permitir acceder de manera directa a otros documentos HTML independientemente de su ubicacioacuten o a otras zonas dentro de nuestro propio documento

Enlaces a otras paacuteginas ltA href=gt Con este tipo de hiperenlaces vamos a poder acceder tanto a otras paacuteginas que esteacuten ubicadas dentro de nuestro propio sistema como a paacuteginas ubicadas en puntos muy distantes del globo El formato de este tipo de hiperenlaces es

ltA href=URL a la que se accedegtTexto del hiperenlaceltAgt

Lenguaje HTML copy Grupo EIDOS

30

Con el atributo href vamos a especificar la URL del documento al que se pretende acceder El texto contenido entre las etiquetas de comienzo y fin nos va a servir para definir el hiperenlace por lo que deberiacutea ser clarificador del contenido del documento con el que vamos a enlazar Esta definicioacuten apareceraacute resaltada normalmente en azul y subrayada En la mayoriacutea de los navegadores esta definicioacuten del hiperenlace es sensible por lo que cuando el cursor pasa por encima del mismo este cambia de aspecto indicaacutendolo

Veamos un ejemplo en la Tabla 23

Ejemplo Resultado

ltA href=httpwwweidosesgtPaacutegina inicialde Villa EidosltAgt

Paacutegina inicial de Villa Eidos

Tabla 23

Si situamos el ratoacuten encima del hiperenlace y pulsamos el navegador accederaacute a la paacutegina Web indicada por href es decir accederaacute a la paacutegina situada en httpwwweidoses

Igualmente podriacuteamos indicar el hiperenlace por medio de una imagen Si esta imagen tiene definido un borde este apareceraacute resaltado en color azul El formato correspondiente seriacutea

ltA href=URL a la que se accedegtltIMG src=Imagengt y tambieacutentextoltAgtIMG Image src Source

Veamos un ejemplo en la Tabla 24

Ejemplo Resultado

ltA href=httpwwweidosesgtltIMGsrc=IconogifgtltAgt Villa Eidos Villa Eidos

Tabla 24

Si pulsamos sobre la imagen el navegador accederaacute a la paacutegina Web inicial de Villa Eidos

Enlaces dentro de la misma paacutegina ltA name=gt Este tipo de hiperenlaces nos va a permitir marcar distintas zonas del documento activo con el objeto de tener un acceso directo a las mismas Una buena utilidad de este tipo de enlaces radica en la creacioacuten de iacutendices para documentos largos de forma que si pinchamos en el hiperenlace correspondiente al tiacutetulo de un capiacutetulo determinado el navegador saltaraacute automaacuteticamente hasta el comienzo de dicho capiacutetulo

Para la creacioacuten de estos hiperenlaces debemos seguir dos pasos

copy Grupo EIDOS 3 Elementos del lenguaje I

31

1 Marcar las distintas zonas o secciones del documento Esto lo haremos con el paraacutemetro name

ltA name=Identificador de seccioacutengtTexto de laseccioacutenltAgt

A cada seccioacuten le asignaremos un identificador distinto para poder referenciarlas posteriormente de manera inequiacutevoca

2 Especificar un enlace a cada una de las secciones que hayamos definido ltA href=Identificador de seccioacutengtTexto del enlace a laseccioacutenltAgt

Si pinchamos en este enlace el navegador saltaraacute automaacuteticamente a la seccioacuten correspondiente Veamos un ejemplo sencillito en la Tabla 25 pero demostrativo de todo lo que acabamos de explicar

Ejemplo Resultado

ltA href=Cap1gtCapiacutetulo1ltAgtltA name=Cap1gtCapiacutetulo 1ltAgt

Capiacutetulo 1

Capiacutetulo 1

Tabla 25

Si nos creamos una paacutegina HTML con distintos capiacutetulos podriacuteamos crear una seccioacuten para cada uno de ellos de forma que si pinchamos en el hiperenlace correspondiente al Capiacutetulo 1 el navegador saltariacutea directamente a la seccioacuten correspondiente al Capiacutetulo 1

Ademaacutes de los dos tipos de hiperenlaces vistos podemos crear hiperenlaces que nos permitan acceder a cualquiera de los servicios de Internet Es decir podriacuteamos indicar enlaces a servidores FTP GOPHER NEWS MAILTO etc Para ello tendriacuteamos que indicar la URL correspondiente al servicio al cual queremos acceder como ya vimos en el primer capiacutetulo de este manual

Imaacutegenes

Podremos dar un aspecto mucho maacutes vistoso a nuestros documentos HTML con la inclusioacuten de imaacutegenes Los formatos de imagen que todos los navegadores reconocen son gif y jpg Si queremos insertar una imagen en otro formato el visor deberiacutea disponer del programa externo que permita su visualizacioacuten De todas formas una buena solucioacuten es utilizar alguacuten programa de tratamiento de imaacutegenes que nos convierta la imagen a uno de los formatos mencionados anteriormente

El formato gif es maacutes recomendado para la inclusioacuten de iconos graacuteficas y el formato jpg para el caso de insertar fotografiacuteas en nuestras paacuteginas

Lenguaje HTML copy Grupo EIDOS

32

La etiqueta que nos va a permitir la insercioacuten de imaacutegenes es ltIMGgt La imagen se insertaraacute justo en el punto del documento donde coloquemos dicha etiqueta pudiendo insertar imaacutegenes dentro de listas tablas o formularios

El formato de la etiqueta con sus posibles argumentos es el siguiente

ltIMG src=URL de la imagen alt=Texto alternativoalign=topmiddlebottonleftrigth border=Tamantildeoheight=Tamantildeo width=Tamantildeo hspace=margen vspace=margengt

bull src=URL de la imagen El atributo src nos va servir para indicar la URL de la imagen que

queremos insertar es decir el servidor y camino hasta llegar al fichero de la imagen

No seraacute necesario que la imagen que queremos insertar en nuestro documento esteacute en el ordenador local aunque siacute es recomendable ya que el acceso a las mismas puede ser maacutes lento

Por tanto es una buena praacutectica copiar todas las imaacutegenes que vayamos a incluir en nuestro documento HTML al ordenador local

Tabla 26

bull alt=Texto alternativo Nos va a permitir mostrar un texto alternativo para el caso en que el

navegador no sea capaz de mostrar la imagen Su uso es muy recomendable ya que cuando publiquemos nuestras paacuteginas en la WWW no sabremos desde queacute tipo de navegadores accederaacuten los internautas a nuestras paacuteginas

En la Tabla 27 vamos a ver un ejemplo

Si usas un navegador que no tiene ninguacuten problema para la visualizacioacuten de imaacutegenes desactiva temporalmente la opcioacuten de mostrar imaacutegenes prueba el ejemplo que muestra la Tabla 27 y compaacuteralo con el anterior

Tabla 27

copy Grupo EIDOS 3 Elementos del lenguaje I

33

bull align=topmiddlebotton leftrigth Nos permite indicar coacutemo se alinearaacute el texto que siga a la imagen

top alinea el texto con la parte superior de la imagen

middle con la parte central

bottom con la parte inferior

left imagen alineada a la izquierda de la paacutegina

rigth imagen alineada a la derecha de la paacutegina

Tabla 28

En el caso de que el texto que acompantildea a la imagen tenga maacutes de una liacutenea tan soacutelo la primera seraacute la que se alinearaacute seguacuten alguna de las anteriores alineaciones el resto de liacuteneas se incluiraacuten debajo de la imagen quedando un efecto bastante feo

Para solventar esto estaacuten las alineaciones LEFT (imagen alineada a la izquierda de la paacutegina) y RIGHT (imagen alineada a la derecha de la paacutegina) Las cuales permiten que la imagen se inserte dentro del paacuterrafo que la rodea produciendo un resultado mucho maacutes profesional en la integracioacuten de texto e imaacutegenes

Estas dos alineaciones no se podraacuten usar en combinacioacuten con las anteriores Veamos algunos ejemplos en la Tabla 29

Vemos como en el primer ejemplo la segunda liacutenea de texto aparece debajo de la imagen produciendo un efecto menos vistoso que en los dos ejemplos siguientes

Lenguaje HTML copy Grupo EIDOS

34

Tabla 29

bull border=Tamantildeo Permite antildeadirle un borde a la imagen del tamantildeo que le

especifiquemos

Si la imagen forma parte de un hiperenlace esta apareceraacute con un borde del color del hiperenlace Si no deseaacuteramos que aparezca este borde tendriacuteamos que especificar border=0

Tabla 30

bull height=Tamantildeo Permite especificar el alto de la imagen en puntos de pantalla

(pixels) o en del tamantildeo del documento

bull width=Tamantildeo Con este argumento especificaremos el ancho al que mostraremos la imagen en puntos de pantalla (pixels) o en del tamantildeo del documento

En el segundo de los ejemplos de la Tabla 31 el ancho de la imagen se ha extendido al 50 del total del ancho de la celda donde estaacute contenida la imagen Si pruebas este ejemplo en tu documento HTML la imagen se extenderaacute horizontalmente hasta ocupar el 50 del ancho de la paacutegina

copy Grupo EIDOS 3 Elementos del lenguaje I

35

Tabla 31

bull hspace=Margen hspace Horizontal Space Permite especificar el nuacutemero de espacios

horizontales (en puntos) que separaraacuten a la imagen de cualquier elemento que le siga o le anteceda

bull vspace=Margen vspace Vertical Space Con este argumento especificaremos el margen vertical (en puntos) que habraacute entre la imagen y cualquier otro elemento de nuestro documento

Tabla 32

Elementos del lenguaje II

Tablas HTML nos va a permitir la inclusioacuten de cualquiera de los elementos de nuestra paacutegina (texto imaacutegenes hiperenlaces listas etc) dentro de una tabla Gracias a lo cual conseguiremos dar una mayor y mejor estructuracioacuten a los contenidos de nuestros documentos Ademaacutes la definicioacuten de las tablas en HTML es muy abierta pudiendo en cualquier momento redimensionar la tabla es decir cambiar su nuacutemero de filas o de columnas cambiar el tamantildeo de alguna de sus celdas etc

La etiqueta que nos va a permitir la definicioacuten de tablas es ltTABLEgt ltTABLEgt

El formato general de la etiqueta sin ninguacuten argumento es el siguiente

ltTABLEgtltTR gt

ltTHgtContenido de la celda ltTHgtltTDgtContenido de la celda ltTDgt

ltTRgtltTABLEgt

TR Table Row TH Table Header TD Table Data

Vamos a analizar cada una de estas etiquetas de forma separada

1 ltTABLEgt ltTABLEgt Definicioacuten general de la tabla Dentro de ella definiremos las filas y columnas que la constituyen pudiendo incluso definir tablas dentro de tablas es decir tablas anidadas

Lenguaje HTML copy Grupo EIDOS

38

2 ltTRgt ltTRgt Definicioacuten de las filas de la tabla Por cada etiqueta ltTRgt que incluyamos se crearaacute una fila en la tabla No seraacute necesario indicar la etiqueta de cierre

3 ltTHgtltTHgt oacute ltTDgtltTDgt Definicioacuten de cada una de las celdas de la tabla Vemos que estas etiquetas estaacuten contenidas dentro de otra etiqueta de definicioacuten de fila de forma que por cada etiqueta ltTHgt o ltTDgt que incluyamos se crearaacute una celda dentro de la fila correspondiente La etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera es decir celdas cuyo contenido estaacute resaltado en negrita dejando la etiqueta ltTDgt para definir celdas de datos En este caso tampoco es necesario indicar las etiquetas de cierre

Todas estas etiquetas tienen sus respectivos argumentos Pero antes de analizar cada uno de ellos vamos a ver un ejemplo muy sencillito en la Tabla 33 que nos crearaacute una tabla de una sola celda (1 fila X 1 columna = 1 celda) Para ello usaremos la etiqueta de creacioacuten de tabla ltTABLEgt con el argumento border=1 (nos dibuja un borde de tamantildeo 1 alrededor de la tabla)

Ejemplo Resultado

ltTABLE border=1gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 33

Vamos ahora a analizar lo distintos argumentos que componen las etiquetas de la tabla analizaacutendolos desde lo general (la definicioacuten de la tabla) hasta lo especiacutefico (la definicioacuten de las celdas)

1 Definicioacuten de la tabla ltTABLEgt

ltTABLE border=n cellpadding=n cellspacing=n width=n oacute height=n oacute bgcolor=rrggbb oacute nombre gt

Contenido ltTABLEgt

bull border=n Si especificamos este argumento se dibujaraacute un borde alrededor de la

tabla del ancho que le indiquemos como muestra la Tabla 34

Ejemplo Resultado

Mi primera tabla ltTABLE border=4gtltTRgtltTDgtMi primera tablaltTABLEgt

Tabla 34

bull cellpadding=n Indica el espacio en puntos que separa el contenido de la celda con

el borde de la misma siendo 1 por defecto

copy Grupo EIDOS 4 Elementos del lenguaje II

39

Ejemplo Resultado

ltTABLE border=4 cellpadding=8gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 35

bull cellspacing=n Indica el espacio en puntos que separa a las celdas contenidas dentro de la tabla siendo 2 por defecto

bull width=n oacute Indica la anchura de la tabla en puntos o en en funcioacuten del ancho de la ventana del visualizador Si no indicamos este argumento el ancho de la tabla se ajustaraacute al tamantildeo del contenido de las celdas Esto es lo que ha ocurrido en el uacuteltimo ejemplo que hemos realizado Veamos un ejemplo en el Coacutedigo fuente 11 El resultado se muestra en la Tabla 36

ltTABLE border=4 width=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 11

Mi primera tabla

Tabla 36

bull height=n oacute Nos permite definir la altura de la tabla en puntos o en de la

altura de la ventana del visualizador Si indicamos este argumento lo recomendable es darlo en puntos ya que es maacutes complicado adecuarnos a la altura de la ventana del visualizador Al igual que en el caso anterior si no especificamos este argumento la altura se adecuaraacute al contenido de las celdas El Coacutedigo fuente 12 muestra un ejemplo y la Tabla 37 nos muestra el resultado

ltTABLE border=4 width=50 height=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 12

Mi primera tabla

Tabla 37

bull bgcolor= rrggbb o nombre del color Nos permite definir un color

de fondo para todas las celdas de la tabla Maacutes adelante veremos como podemos definir colores especiacuteficos para cada una de las celdas por separado

Lenguaje HTML copy Grupo EIDOS

40

Ejemplo Resultado

ltTABLE border=4 bgcolor=yellowgtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 38

2 Definicioacuten de las filas de la tabla ltTRgt

ltTR align=leftrightcenter valign=topmiddlebottombgcolor=rrggbb oacute nombregt

Antes de empezar a descifrar el significado de cada uno de los argumentos de esta etiqueta vamos a ver un ejemplo en la Tabla 39 de coacutemo se construiriacutea una tabla con dos filas (2 filas X 1 columna = 2 celdas)

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR gtltTDgtPrimera filaltTRgtltTDgtSegunda filaltTABLEgt

Segunda fila

Tabla 39

bull align=leftrightcenter Con este argumento vamos a indicar la alineacioacuten

horizontal (leftizquierda rightderecha centercentrado) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado Veamos un ejemplo en el Coacutedigo fuente 13 y su correspondiente resultado en la Tabla 40

ltTABLE border=4 width=50 gt ltTRgtltTDgtPrimera filaltTRalign=rightgtltTDgtSegunda filaltTABLEgt

Coacutedigo fuente 13

Primera fila

Segunda fila

Tabla 40

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten

vertical (toparriba middlecentrado bottomabajo) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado

copy Grupo EIDOS 4 Elementos del lenguaje II

41

bull bgcolor= rrggbb o nombre del color En este caso este argumento nos permitiraacute definir un color de fondo para todas las celdas de una fila veamos un ejemplo en la

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR bgcolor=yellowgtltTDgtPrimera

filaltTR bgcolor=greengtltTDgtSegunda

filaltTABLEgt

Segunda fila

Tabla 41

3 Definicioacuten de las celdas de la tabla ltTHgt oacute ltTDgt

ltTH oacute TD align=leftrightcenterjustifyvalign=topmiddlebottom bgcolor=rrggbb oacute nombre width=nrowspan=n colspan=ngt

Como ya explicamos anteriormente la etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera y la etiqueta ltTDgt para la creacioacuten de celdas de datos Vamos a completar nuestro ejemplo inicial antildeadieacutendole tres filas de dos celdas cada una (3 filas X 2 columnas = 6 celdas) Tabla 42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTDgtCelda 21ltTDgtCelda 22

ltTABLEgt Celda 21 Celda 22

Tabla 42

bull align=leftrightcenterjustify Con este argumento vamos a indicar la

alineacioacuten horizontal (left izquierda right derecha center centrado justifyjustificado) del contenido de cada celda por separado Su significado es el mismo que en la etiqueta ltTRgt

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten vertical (toparriba middlecentrado bottomabajo) del contenido de cada celda

bull bgcolor= rrggbb o nombre del color En este caso podremos definir un color de fondo para cada una de las celdas de manera independiente

bull width=n oacute Indica el ancho de la celda en puntos o en en funcioacuten del tamantildeo de la tabla

Lenguaje HTML copy Grupo EIDOS

42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera

1ltTHgtCabecera 2ltTR gtltTD align=rightgtCelda

11ltTD bgcolor=redgtCelda 12ltTRgtltTD

bgcolor=yellowgtCelda 21ltTDalign=centergtCelda 22ltTABLEgt

Celda 21 Celda 22

Tabla 43

bull rowspan=n Con este argumento podemos lograr que una celda concreta abarque maacutes de una fila ya sabemos que por defecto una celda ocupa una sola fila

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTD rowspan=2gtCelda

11ltTDgtCelda 12ltTRgtltTDgtCelda 22

ltTABLEgt

Celda 11 Celda 22

Tabla 44

bull colspan=n Con este argumento podemos lograr que una celda se expanda a maacutes

de una columna

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTD colspan=2

align=centergtCelda 22ltTABLEgt

Celda 22

Tabla 45

Para finalizar este tema sobre la creacioacuten de tablas vamos a ver el ejemplo que aparece en el Coacutedigo fuente 14 y su resultado en la Tabla 46

ltTABLE border=4gtltTR gtltTH colspan=3 bgcolor=redgtTiacutetuloltTR bgcolor=yellowgtltTHgtCabecera 1ltTHgtCabecera 2ltTHgtCabecera 3

copy Grupo EIDOS 4 Elementos del lenguaje II

43

ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTDgtCelda 13ltTRgtltTD rowspan=2gtCelda 21ltTD bgcolor=greengtCelda 22ltTDgtCelda 23ltTRgtltTDgtCelda 32ltTDgtCelda 33

ltTABLEgt

Coacutedigo fuente 14

Tiacutetulo

Cabecera 1 Cabecera 2 Cabecera 3

Celda 11 Celda 12 Celda 13

Celda 22 Celda 23 Celda 21

Celda 32 Celda 33

Tabla 46

Formularios El formulario es el elemento de HTML que nos va a permitir interactuar con los visitantes de nuestras paacuteginas web de forma que podemos solicitarle informacioacuten al usuario y procesarla De esta forma podremos crear en nuestras paacuteginas encuestas para solicitar la opinioacuten del visitante sobre alguacuten tema e incluso sobre el contenido de nuestra propia paacutegina web cuestionarios para evaluar la asimilacioacuten de contenidos sobre un tema concreto que se trate en la paacutegina etc

El contenido de la informacioacuten introducida por medio del formulario seraacute enviado a la direccioacuten URL donde resida el programa que se encargaraacute de procesar los datos A este tipo de programas externos se les denomina programas CGI (Common Gateway Interface)

La etiqueta HTML que nos va a permitir la creacioacuten de formularios es ltFORMgt Su formato es el siguiente

ltFORM action=URL del programa que trata el formulariomethod=postgetgt Elementos del formulario ltFORMgt

bull action=URL del programa que trata el formulario A traveacutes de este

argumento indicaremos como ya hemos mencionado la direccioacuten del fichero de programa que va a tratar la informacioacuten suministrada por el formulario

Tambieacuten podriacuteamos incluir como URL que trata el formulario una direccioacuten de correo electroacutenico Por tanto el valor de este argumento podriacutea ser action =mailto direccioacuten de correo

Nota Esta opcioacuten soacutelo funciona adecuadamente con el navegador Netscape Con el Explorer este enviacuteo dariacutea como resultado un correo en blanco Para que esta opcioacuten funcione de manera independiente del navegador que se esteacute utilizando se ha de emplear un programa externo que realice este proceso

Lenguaje HTML copy Grupo EIDOS

44

bull method=postget A traveacutes de este argumento indicaremos el meacutetodo empleado para transferir la informacioacuten generada por el formulario

Si indicamos post se produciraacute la modificacioacuten del documento destino como es el caso de enviar la informacioacuten a una direccioacuten de correo electroacutenico Mediante el meacutetodo get no se produciraacuten cambios en el documento destino

Dentro de un formulario podremos incluir cualquier texto o instruccioacuten HTML de las vistas a lo largo de los capiacutetulos anteriores ademaacutes claro estaacute de los elementos tiacutepicos de un formulario cajas de texto botones de seleccioacuten menuacutes de opciones etc Vamos a ver coacutemo se incluiraacuten estos elementos en un formulario

Entrada baacutesica de datos Para definir los distintos tipos de campos baacutesicos de entrada de datos usaremos la etiqueta ltINPUTgt

El formato es el siguiente

ltINPUT type= text password checkbox radio hidden submit image reset name=Variable value=Valor inicialgt

bull El argumento type determinaraacute el tipo de campo de entrada que estamos insertando A

continuacioacuten describiremos cada uno de ellos

bull El argumento name especifica el nombre de la variable que tomaraacute el valor introducido en el campo

bull El argumento value especifica el valor por defecto que tendraacute el campo

Vamos a continuacioacuten a describir los distintos tipos campos de entrada que vendraacuten dados por los valores del argumento type

Texto corto type=text

Con este argumento vamos a indicar que el campo a introducir seraacute un texto El formato seriacutea

ltINPUT type= text name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los nuevos atributos es

bull size=Tamantildeo Indicaremos el tamantildeo en caracteres de la ventana de introduccioacuten de texto

bull maxlength=Longitud maacutexima Indicaremos el nuacutemero maacuteximo de caracteres a introducir en el campo

Vamos a ver un ejemplo en la Tabla 47

copy Grupo EIDOS 4 Elementos del lenguaje II

45

Ejemplo Resultado

NombreltINPUT type=text name=Var1Value=Texto por defecto size=20 maxlength=25gt

Tabla 47

Claves type=password

Con este argumento indicamos que el campo a introducir seraacute una palabra clave por lo que los caracteres que se introduzcan seraacuten sustituidos por asteriscos en la visualizacioacuten por pantalla El formato es

ltINPUT type= password name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los distintos argumentos es el mismo que en el caso anterior Veamos un ejemplo en la Tabla 48

Ejemplo Resultado

ClaveltINPUT type=password name=Var2Value=tutankamon size=11 maxlength=10gt

Tabla 48

Botones de seleccioacuten type=checkbox

El checkbox es un botoacuten que presenta dos estados marcado (1) y desmarcado (0) Podremos variar su estado simplemente pinchando con el ratoacuten El formato es

ltINPUT type= checkbox name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto

Si incluimos el argumento value cuando el botoacuten esteacute marcado su variable asociada adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 49

Ejemplo Resultado

ltINPUT type=checkbox name=Var3 value=Op1 checkedgtOpcioacuten1 ltbrgtltINPUT type=checkbox name=Var4 value=Op2gt Opcioacuten 2

Tabla 49

Lenguaje HTML copy Grupo EIDOS

46

Seleccioacuten entre varias opciones type=radio

Este argumento se usa cuando hay que hacer una seleccioacuten entre varias alternativas excluyentes pudieacutendose seleccionar uacutenicamente una de las alternativas Debemos incluir una etiqueta radio por cada una de las posibles alternativas El formato es

ltINPUT type= radio name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto En este caso uacutenicamente uno de los botones de radio podraacute aparecer marcado ya que se usa para el caso de opciones excluyentes

Cuando un botoacuten esteacute seleccionado la variable asociada a la lista de botones adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 50

Ejemplo Resultado

ltINPUT type=radio name=Var5 value=Op1gtOpcioacuten1 ltbrgtltINPUT type=radio name=Var5 value=Op2checkedgt Opcioacuten 2 ltbrgtltINPUT type=radio name=Var5 value=Op3 gtOpcioacuten 3

Tabla 50

En este ejemplo la variable Var5 tendraacute el valor Op2

Campos ocultos type=hidden

Este tipo de campos no son visibles para el usuario Su uso tiene sentido en el caso de enviar alguacuten tipo de informacioacuten que no deba ser visualizada o variada por el lector de nuestra paacutegina Web El formato es

ltINPUT type= hidden name=Variable value=Valor gt

Con esta etiqueta asignariacuteamos a la Variable referenciada por name el Valor de value y se mandariacutea junto con el formulario sin que el usuario de la paacutegina se entere de nada Veamos un ejemplo en el Coacutedigo fuente 15

ltINPUT type=hidden name=Var6 value=tutankamongt

Coacutedigo fuente 15

copy Grupo EIDOS 4 Elementos del lenguaje II

47

Botoacuten de enviacuteo de datos type=submit

Con este argumento especificamos un botoacuten en el que al pulsar los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario El formato es

ltINPUT type= submit value=Mensaje a mostrargt

En este caso el paraacutemetro value indica el mensaje que se mostraraacute en el botoacuten Veamos un ejemplo en la Tabla 51

Ejemplo Resultado

ltINPUT type=submit value=Enviar los Datosgt

Tabla 51

Botoacuten graacutefico de enviacuteo de datos type=image

Con este argumento especificamos un botoacuten de tipo imagen en el que al igual que con el botoacuten anterior si pulsamos en la imagen los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario Su formato es el siguiente

ltINPUT type= image src=URL de la imagen name=Variablegt

Con el paraacutemetro src especificamos la URL de la imagen que seraacute insertada en el botoacuten En este caso en la variable referenciada por name se almacenaraacuten las coordenadas del punto de la imagen donde se halla pinchado (de forma que estas coordenadas podriacutean ser procesadas por el programa que recibe los datos del formulario)

Botoacuten de borrado de datos type=reset

Con este argumento especificamos un botoacuten que al ser pulsado borraraacute el contenido actual de todos los campos dejaacutendolos con sus valores por defecto Su formato es

ltINPUT type= reset value=Texto del botoacutengt

Con el paraacutemetro value especificamos el texto que etiquetaraacute al botoacuten

Ejemplo Resultado

ltINPUT type=reset value=Borrar datosgt

Tabla 52

Lenguaje HTML copy Grupo EIDOS

48

Entrada datos en muacuteltiples liacuteneas En un formulario tambieacuten podremos introducir un campo de texto que abarque varias liacuteneas Para ello usaremos la etiqueta ltTEXTAREAgt ltTEXTAREAgt Su formato es el siguiente

ltTEXTAREA name=Variable rows=Filas cols=ColumnasgtContenido por defectoltTEXTAREAgt

Los argumentos rows y cols nos van a permitir especificar respectivamente el nuacutemero de filas de texto visibles y el nuacutemero de columnas de texto visibles en el campo

Ejemplo Resultado

ltTEXTAREA name=Var7 rows=5 cols=40gtContenido por defectoltTEXTAREAgt

Tabla 53

Entrada de datos a traveacutes de campos de seleccioacuten Con los campos de seleccioacuten podremos desplegar una lista de opciones entre las que podremos seleccionar una Para ello usaremos la etiqueta ltSELECTgt ltSELECTgt Su formato es el siguiente

ltSELECT name=Variable multiple size=ngtltOPTION selected value=Valor_1gtPrimera OpcioacutenltOPTION value=Valor_2gtSegunda Opcioacuten

ltOPTION value=Valor_ngtEneacutesima Opcioacuten

ltSELECTgt

Figura 1

bull La variable referenciada por name tomaraacute el valor(value) de la opcioacuten seleccionada

bull Si especificamos el argumento muacuteltiple se mostraraacuten todas la opciones en forma de tabla El nuacutemero de opciones visibles en la tabla vendraacute dado por el argumento size

copy Grupo EIDOS 4 Elementos del lenguaje II

49

bull Con la etiqueta ltOPTIONgt iremos definiendo cada una de las opciones de la lista

bull El argumento selected va a determinar cuaacutel es la opcioacuten por defecto

Para finalizar vamos a ver el Coacutedigo fuente 16 correspondiente a una encuesta realizada por la editorial ficticia EditoPc y en la Figura 2 observamos el resultado del formulario

ltP align=centergtltBgtEDITORIAL ltIgtEditoPcltIgtltBgtltPgtltFORM action=mailtodireccionejemplo method = postgtNombreltINPUT type=text size=30 name=nombregtltBRgtE_mail ltINPUT type=text size=30 name=e_mailgtltPgtDeseas recibir informacioacuten sobreltINPUT type=checkbox name=infor1 value=InternetgtInternetltINPUT type=checkbox name=infor2 value=ProgramacioacutengtProgramacioacutenltINPUT type=checkbox name=infor3 value=SistOperativogtSistOperativoltINPUT type=checkbox name=infor4 value=OfimaacuteticagtOfimaacuteticaltPgtiquestTe conectas a Internet desde casa ltbrgtltINPUT type=radio name=intercasa value=sigtSiacuteltINPUT type=radio name=intercasa value=nogtNoltPgtiquestQueacute uso le das a tu ordenador ltBRgtltSELECT name=uso multiple size=3gtltOPTION selectedgtProfesionalltOPTIONgtDomeacutesticoltOPTIONgtOcioJuegosltSELECTgtltPgtCaracteriacutesticas de tu PCltBRgtltTEXTAREA name=caract rows=5 cols=40gtltTEXTAREAgtltPgtltINPUT type=submit value=Enviar datosgt ltINPUT type=reset value=Borrardatosgt

Coacutedigo fuente 16

Figura 2

Elementos del lenguaje III

Frames Las frames son una utilidad del HTML que nos permite dividir la ventana del navegador en diferentes subventanas que podraacuten ser manipuladas de manera independiente Esto nos permitiraacute mostrar una paacutegina web diferente en cada una de la subventanas o frames

Estructura de un documento con frames Un documento con frames se estructura de manera diferente a un documento HTML normal Asiacute en este tipo de documentos no apareceraacute la etiqueta ltBODYgt En su lugar se incluiraacute la etiqueta ltFRAMESETgt ltFRAMESETgt dentro de la cual se definiraacuten las distintas frames que se incluyan en el documento

La estructura general de un documento de este tipo seriacutea por tanto

ltHTMLgtltHEADgtCabeceraltHEADgtltFRAMESETgt

Definicioacuten de la distintas framesltFRAMESETgtltNOFRAMESgt

Instrucciones HTMLltNOFRAMESgt

ltHTMLgt

Lenguaje HTML copy Grupo EIDOS

52

Puede darse el caso de que programemos nuestro documento con frames siguiendo la estructura anterior y que el navegador que se use para leer el documento no soporte la caracteriacutestica de frames con lo cual no se mostraraacute nada de lo indicado entre las etiquetas ltFRAMESETgt y ltFRAMESETgtPara solucionar este problema todas las instrucciones HTML incluidas entre las etiquetas ltNOFRAMESgt y ltNOFRAMESgt seraacuten ejecutadas por los navegadores que no soportan las frames

La sintaxis de la etiqueta ltFRAMESETgt es

ltFRAMESET rows=Lista de filas cols=Lista de columnasgtltFRAME src=URL de la frame 1 name=Nombre de la frame 1gtltFRAME src=URL de la frame 2 name=Nombre de la frame 2gt

ltFRAME src=URL de la frame n name=Nombre de la frame ngt

ltFRAMESETgt

Como vemos por cada una de la frames que incluyamos en nuestro documento debemos incluir una etiqueta ltFRAMEgt indicando mediante sus argumentos la direccioacuten URL del documento que se insertaraacute en la subventana (src) y el nombre de la frame (name) Posteriormente describiremos la etiqueta ltFRAMEgt con maacutes detalle

Los argumentos de ltFRAMESETgt son rows y cols definieacutendose uacutenicamente uno de los dos atributos en funcioacuten de si la divisioacuten de la pantalla se realizaraacute por filas (rows) o por columnas (cols)

Por cada una de las subventanas que creemos debemos especificar su tamantildeo en puntos o en porcentaje del tamantildeo de cada subventana Asiacute por ejemplo si especificamos rows= 50 2525 crearemos tres subventanas horizontales ocupando la primera el 50 de la ventana principal y las otras dos el resto Si especificamos cols=100150 crearemos tres subventanas verticales ocupando la primera 100 puntos de la ventana principal la segunda 150 puntos y tercera el espacio restante

Vamos a verlo maacutes claramente con un par de ejemplos praacutecticos que vemos en la Tabla 54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 502525gt ltFRAMEsrc=Pagweb1htm name=Pagweb1gtltFRAMEsrc=Pagweb2htm name=Pagweb2gtltFRAMEsrc=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 4: Programacion web   lenguaje html

Lenguaje HTML copy Grupo EIDOS

6

Texto preformateado ltPREgt PRE Preformatted 21 ELEMENTOS DEL LENGUAJE I 23

CABECERAS Y ATRIBUTOS DE TEXTO 23 Cabeceras ltH1gtltH6gt H Heading 23 Atributos del texto 24

LISTAS 26 Listas no numeradas ltULgt UL Unordered List 26 Listas numeradas ltOLgt OL Ordered List 27 Listas de definiciones ltDLgt DL Definition List 29

HIPERENLACES 29 Enlaces a otras paacuteginas ltA href=gt29 Enlaces dentro de la misma paacutegina ltA name=gt 30

IMAacuteGENES 31 ELEMENTOS DEL LENGUAJE II 37

TABLAS 37 FORMULARIOS 43

Entrada baacutesica de datos 44 Texto corto type=text 44 Claves type=password 45 Botones de seleccioacuten type=checkbox 45 Seleccioacuten entre varias opciones type=radio 46 Campos ocultos type=hidden 46 Botoacuten de enviacuteo de datos type=submit 47 Botoacuten graacutefico de enviacuteo de datos type=image 47 Botoacuten de borrado de datos type=reset 47

Entrada datos en muacuteltiples liacuteneas 48 Entrada de datos a traveacutes de campos de seleccioacuten 48

ELEMENTOS DEL LENGUAJE III 51 FRAMES 51

Estructura de un documento con frames 51 Definicioacuten de cada una de las frames 53

ELEMENTOS MULTIMEDIA 54 Sonido de fondo 54 Reproduccioacuten de viacutedeo 54 Insercioacuten de cualquier tipo de fichero 55

Introduccioacuten al HTML

iquestQueacute es HTML HTML es la abreviatura de HyperText Markup Language y es el lenguaje que todos los programas navegadores usan para presentar informacioacuten en la World Wide Web (WWW)

Este es un lenguaje muy sencillo que se basa en el uso de etiquetas consistentes en un texto ASCII encerrado dentro de un par de pareacutentesis angulares(ltgt) El texto incluido dentro de los pareacutentesis nos daraacute una explicacioacuten de la utilidad de la etiqueta Asiacute por ejemplo la etiqueta ltTABLEgt nos permitiraacute definir una tabla

Las etiquetas podraacuten incluir una serie de atributos o paraacutemetros en su mayoriacutea opcionales que nos permitiraacuten definir diferentes posibilidades o caracteriacutesticas de la misma Estos atributos quedaraacuten definidos por su nombre (que seraacute explicativo de su utilidad) y el valor que toman separados por un signo de igual En el caso de que el valor que tome el atributo tenga maacutes de una palabra deberaacute expresarse entre comillas en caso contrario no seraacute necesario Asiacute por ejemplo la etiqueta ltTABLEborder=2gt nos permitiraacute definir una tabla con borde de tamantildeo 2

Entre otras cosas el manejo de estas etiquetas nos permitiraacute

bull Definir la estructura loacutegica del documento HTML

bull Aplicar distintos estilos al texto (negrita cursiva )

Lenguaje HTML copy Grupo EIDOS

8

bull La inclusioacuten de hiperenlaces que nos permitiraacuten acceder a otros documentos relacionados con el actual

bull La inclusioacuten de imaacutegenes y ficheros multimedia (graacuteficos viacutedeo audio)

iquestQueacute vamos a necesitar para crear un documento HTML

bull Un procesador de textos para escribir y editar el coacutedigo HTML Este podraacute ser cualquiera que no formatee el texto ya que el leguaje HTML estaacute basado en el coacutedigo ASCCI Si usamos un procesador como el Word tendremos que guardar el documento como soacutelo texto

bull Un navegador Web como el Explorer Netscape Mosaic etc el cual se encargaraacute del interpretar el coacutedigo HTML de nuestro documento y mostraacuternoslo en todo su esplendor

La secuencia de trabajo para crear nuestro documento es

1 Con el procesador de texto crearemos el documento HTML y lo guardaremos con el nombre que deseemos a excepcioacuten de la extensioacuten que deberaacute ser necesariamente htm oacute html

2 Para visualizar nuestro documento HTML abriremos el documento con el programa navegador

Reglas de formato Todos los navegadores usan unas reglas baacutesicas para poder mostrar una paacutegina web con un buen formato

bull El espacio en blanco es ignorado Ya que un documento HTML puede estar en cualquier tipo de fuente y ademaacutes la ventana del navegador puede ser de cualquier tamantildeo

bull Las etiquetas pueden ser escritas en mayuacutesculas o en minuacutesculas En todo caso se aconseja su escritura en mayuacutesculas para poder distinguirlas del texto normal

bull Existe normalmente una etiqueta de inicio y otra de fin La etiqueta de fin contendraacute el mismo texto que la de inicio antildeadieacutendole al principio una barra inclinada La etiqueta afectaraacute por tanto a todo lo que esteacute incluido entre las etiquetas de inicio y fin No obstante existen algunas que no necesitan cierre ya que en estas etiquetas se presupone su final como por ejemplo ltPgt paacuterrafo ltBRgt salto de liacutenea oacute ltIMGgt inclusioacuten de una imagen

Vemos un ejemplo en la Tabla 1

Instruccioacuten HTML Resultado

ltBgtTexto en negritaltBgt Texto en negrita

ltHIgtTexto en cursivaltIgt Texto en cursiva

ltBgtltIgtTexto en negrita y cursivaltBgtltIgt Texto en negrita y cursiva

Tabla 1

copy Grupo EIDOS 1 Introduccioacuten al HTML

9

Estructura de un documento HTML La estructura baacutesica de un documento HTML es la siguiente

ltHTMLgt Indica el inicio del documento ltHEADgt Indica el inicio de la cabecera

ltTITLEgt Inicio del tiacutetulo del documento

ltTITLEgt Final del tiacutetulo del documento

ltHEADgt Final de la cabecera ltBODYgt Inicio del cuerpo del documento Instrucciones HTML ltBODYgt Final del cuerpo del documento ltHTMLgt Final del documento

Ninguno de estos elementos es obligatorio pudiendo crear documentos HTML sin incluir estas etiquetas de identificacioacuten No obstante es altamente recomendable la construccioacuten de paacuteginas HTML siguiendo esta estructura para una buena estructuracioacuten y legibilidad del coacutedigo

Nuestra primera paacutegina HTML Una vez que conocemos la estructura baacutesica de un documento HTML vamos a crear una paacutegina HTML muy sencillita

1 Lo primero seraacute abrir el procesador de textos que hayamos elegido y copiar el Coacutedigo fuente 1

ltHTMLgtltHEADgtltTITLEgt Mi primera paacutegina HTML ltTITLEgtltHEADgtltBODYgtEsta es mi primera paacutegina ltBgtHTMLltBgtltBODYgtltHTMLgt

Coacutedigo fuente 1

2 Una vez tecleado el coacutedigo guardamos el documento como Pagina1htm y procedemos a

abrirlo con el navegador correspondiente El resultado seraacute

Esta es mi primera paacutegina HTML

Lenguaje HTML copy Grupo EIDOS

10

Forma del URL El URL(Uniform Resource Locator) nos van a permitir localizar y acceder a cualquier recurso de la red desde nuestro programa navegador A traveacutes de los URL podremos referenciar cualquier fichero que deseemos incluir en nuestro documento HTML Cada elemento de Internet vendraacute definido por su URL correspondiente independientemente del tipo de servidor en el que se encuentre

La forma general del URL es

Tipo de servicio maquinadominiopuertocaminoarchivo

El Tipo de servicio como su propio nombre indica hace referencia a alguno de los servicios de Internet El servicio correspondiente al WWW es http (HiperText Transport Protocol) protocolo para la transmisioacuten de hipertexto Por lo que cualquier referencia a un documento HTML deberiacutea comenzar por http Otros servicios son ftp news telnet o mailto

La maacutequinadominio indica el nombre del servidor en que se encuentra el documento al que estamos haciendo referencia junto con el dominio al que pertenece dicho servidor

El puerto es opcional y lo normal es no ponerlo indicaacutendose soacutelo en el caso de que el servidor utilice un puerto distinto al puerto por defecto

El camino indica la ruta de directorios que hay que seguir para encontrar el documento que estamos referenciando

Finalmente especificaremos el nombre del archivo en que estaacute guardado el documento en cuestioacuten Si no indicamos un archivo accederemos al archivo por defecto del directorio al que estemos referenciando(En el caso del servicio http este archivo por defecto suele ser defaulthtm oacute defaulthtml)

Vamos a ver a continuacioacuten algunos ejemplos de URL s accediendo a distintos servicios de la WWW

Localizando un documento hypertexto (http) Sintaxis

httpmaquinadominiopuertocaminoarchivo

Ejemplo1 httpwwweidoses

En este ejemplo estamos indicando el servicio al que estamos accediendo (http) la maacutequina y el dominio tomaacutendose el resto de paraacutemetros por defecto de forma que accederemos al directorio raiacutez del servidor y al documento por defecto de ese directorio en este caso estamos accediendo a la paacutegina de portada de Villa Eidos

Ejemplo2 httpwwweidosesvulcaninformahtm

Con esta URL estamos accediendo al fichero informahtm que se encuentra en el directorio vulcan del servidor wwweidoses

copy Grupo EIDOS 1 Introduccioacuten al HTML

11

Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol) Sintaxis

ftpmaquinadominiopuertocaminoarchivo

Ejemplo ftp ftpjetespubauto_ftp

En este caso estamos accediendo al servicio ftp (protocolo de transferencia de archivos) ftpjetes En este caso no estamos indicando ninguacuten archivo con lo que se referenciaraacute un iacutendice con los contenidos del directorio pubauto_ftp

Accediendo a un grupo de noticias (news) Sintaxis

newsGRUPO

Ejemplo newsjetes

En este ejemplo estamos accediendo al grupo de noticias del servidor de news jetes

Accediendo a una direccioacuten e-mail (mailto) Sintaxis

mailto Destinatario_1 Destinatario_2Destinatario_n

Ejemplo mailtocursoseidoses

Enviaraacute un mail a la direccioacuten de correo electroacutenico indicada

Localizacioacuten de un archivo cualquiera (file) Sintaxis

filemaquinadominiopuertocaminoarchivo

Ejemplo filecwindows

En este caso estamos accediendo a la carpeta Windows de la unidad C de nuestro ordenador local

Cabecera y cuerpo del documento HTML

Cabecera Cabecera del documento HTML ltHEADgt

ltHEADgt

En la cabecera de un documento HTML incluiremos las definiciones generales que afecten a todo el documento como por ejemplo el tiacutetulo de la paacutegina que apareceraacute en la parte superior de la ventana del navegador

Las etiquetas ltHEADgt y ltHEADgt son las que van a delimitar la cabecera de nuestro documento Todas la etiquetas de la cabecera son opcionales aunque se recomienda incluir en todos nuestros documentos la etiqueta ltTITLEgt correspondiente al tiacutetulo del documento

A continuacioacuten vamos a tratar cada uno de los posibles componentes de la cabecera por separado

Tiacutetulo del documento ltTITLEgtltTITLEgt

El tiacutetulo de nuestro documento viene especificado por las etiquetas ltTITLEgt y ltTITLEgt y como ya hemos mencionado este tiacutetulo es el que apareceraacute en la ventana de nuestro programa

Lenguaje HTML copy Grupo EIDOS

14

navegador Lo normal y recomendable es que el tiacutetulo guarde relacioacuten con el contenido de nuestro documento ya que por ejemplo es utilizado por algunos servidores de buacutesqueda para poder intuir el contenido de nuestro documento Veamos un ejemplo en el Coacutedigo fuente 2

ltTITLEgtMi primera paacutegina WebltTITLEgt

Coacutedigo fuente 2

Indicador de refresco del documento ltMETA http-equiv=refresh content=nuacutemero_segundosurl=URL derefrescogt

Esta etiqueta sirve para indicar un documento que deberaacute sustituir al actual transcurrido un nuacutemero determinado de segundos Una posible utilidad de esta etiqueta podriacutea ser para visualizar documentos de forma secuencial de forma que se empieza por un documento y se pasa al siguiente transcurrido un periacuteodo de tiempo sin necesidad de que la persona que lee el documento realice ninguna accioacuten

Veamos un ejemplo en el Coacutedigo fuente 3

ltMETA http-equiv=refresh content=5url=httpwwweidosesgt

Coacutedigo fuente 3

Si insertamos esta instruccioacuten en la cabecera de nuestro paacutegina HTML transcurridos 5 segundos eacutesta se refrescaraacute con la paacutegina Web de portada de Villa Eidos

Indicador de la URL base del documento ltBASE href=URLgt

Con esta etiqueta indicamos la localizacioacuten de los ficheros a los que se hace referencia en nuestra paacutegina Web Si no incluimos esta etiqueta el navegador entenderaacute que dichos ficheros se encuentran en el mismo lugar donde reside nuestra paacutegina Web

Vemos un ejemplo en el Coacutedigo fuente 4

ltBASE href=httpwwweidosesvulcangt

Coacutedigo fuente 4

Si especificamos como URL base de nuestro documento HTML la indicada en este ejemplo y posteriormente hacemos referencia en nuestra paacutegina a un fichero llamado aulahtm se entenderaacute que la localizacioacuten del fichero es httpwwweidosesvulcanaulahtm

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

15

Cuerpo Cuerpo del documento HTML ltBODYgt

ltBODYgt

En el cuerpo de un documento HTML es donde incluiremos las distintas instrucciones del lenguaje junto con el contenido en siacute de nuestra paacutegina Web textos imaacutegenes enlaces a otras paacuteginas etc

Las etiquetas ltBODYgt y ltBODYgt son las que van a delimitar el cuerpo de nuestro documento Esta posee una serie de argumentos que nos van a permitir variar las caracteriacutesticas del documento en su conjunto como por ejemplo el color del texto o del color de fondo de nuestra paacutegina web

Antes de analizar los componentes y atributos de BODY vamos a ver como se especifican los colores en un documento HTML

Estos se pueden especificar por su nombre (name) o por su coacutedigo de color que es un nuacutemero compuesto de tres pares de cifras hexadecimales que nos indican la proporcioacuten de los colores primarios (rojo verde y azul) que forman el color deseado (rrggbb)

Nombre Coacutedigo de color Color mostrado

Black 000000 Negro

Teal 008080 Teal

Blue 0000FF Azul

Navy 000080 Azul marino

Lime 00FF00 Lima

White FFFFFF Blanco

Purple 800080 Puacuterpura

Yellow FFFF00 Amarillo

Olive 808000 Oliva

Red FF0000 Rojo

maroon 800000 Marroacuten

gray 808080 Gris

fuchsia FF00FF Fucsia

green 008000 Verde

Lenguaje HTML copy Grupo EIDOS

16

silver C0C0C0 Plata

aqua 00FFFF Agua

Tabla 2

La etiqueta ltBODYgt presenta una serie de atributos que van a afectar a todo el documento en su conjunto Estos atributos nos van a permitir definir los colores del texto del fondo y de los hiperenlaces del documento Incluso nos permitiraacuten insertar una imagen de fondo en nuestra paacutegina

ltBODY background=URL bgcolor=rrggbb oacute name text=namelink=name vlink=name gt

bull background=URL Nos va a permitir mostrar una imagen como fondo de nuestro

documento HTML El camino a esta imagen vendraacute especificado por la URL que definamos Si la imagen no rellena todo el fondo del documento eacutesta seraacute reproducida tantas veces como sea necesario hasta completar todo el fondo

Si insertas el Coacutedigo fuente 5 en el documento HTML que creamos como ejemplo en el capiacutetulo anterior Pagina1htm este presentaraacute como fondo la imagen fondogif

ltBODY background=fondogifgt

Coacutedigo fuente 5

bull bgcolor=rrggbb oacute name bgcolor Background Color Nos va a permitir definir un

color para el fondo de nuestro documento Este atributo seraacute ignorado si previamente hemos utilizado el atributo background

Inserte el Coacutedigo fuente 6 en Pagina1htm y compruebe el resultado

ltBODY bgcolor=bluegt

Coacutedigo fuente 6

bull text=rrggbb oacute name Nos permitiraacute definir un color para el texto de nuestro

documento Por defecto es negro Inserte el Coacutedigo fuente 7 en Pagina1html y compruebe el resultado

ltBODY text=redgt

Coacutedigo fuente 7

Y ahora inserte el Coacutedigo fuente 8 en el documento y comprueba el resultado

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

17

ltBODY bgcolor=yellow text=navygt

Coacutedigo fuente 8

bull link=rrggbb oacute name Indica el color que tendraacuten los hiperenlaces que no han sido

accedidos Por defecto es azul Como todaviacutea no sabemos insertar hiperenlaces en nuestro documento vamos a dejar el ejemplo correspondiente para maacutes adelante

bull vlink=rrggbb oacute name vlink Visited Links Indica el color de los hiperenlaces que ya han sido accedidos Por defecto es puacuterpura

Caracteres especiales Hasta ahora hemos escrito algunos ejemplos de coacutedigo HTML pero hemos pasado por alto algunas limitaciones de HTML respecto al uso de caracteres especiales Una de estas limitaciones es por ejemplo el uso de los caracteres lt y gt que como ya sabemos indican el inicio y fin de una etiqueta HTML Pues bien si quisieacuteramos escribir estos caracteres como parte normal de un texto el navegador no sabriacutea si se trata de texto normal o del comienzo y final de una etiqueta o sea que se hariacutea un liacuteo

Como todo tiene solucioacuten existen unos coacutedigos para poder escribir estos caracteres y otros relacionados con las etiquetas los vemos en la Tabla 3

Siacutembolo Coacutedigo

lt (menor que) amplt

gt (mayor que) ampgt

amp (ampersand) ampamp

(comillas) ampquot

Tabla 3

Para las letras especiacuteficas del idioma castellano las vocales acentuadas la ntilde la uuml y los signos iquest y iexcl existen los coacutedigos que muestra la Tabla 4

Letra Coacutedigo Letra Coacutedigo Letra Coacutedigo

aacute ampaacute Aacute ampAacute ntilde ampntilde

eacute ampeacute Eacute ampEacute Ntilde ampNtilde

iacute ampiacute

Iacute ampIacute

uuml ampuuml

Lenguaje HTML copy Grupo EIDOS

18

oacute ampoacute Oacute ampOacute Uuml ampUuml

uacute ampuacute Uacute ampUacute iquest amp191

iexcl amp161

Tabla 4

Para los navegadores actuales podemos escribir nuestro coacutedigo HTML de manera directa sin tener en cuenta estos coacutedigos pero nunca podemos asegurar que las personas que accedan a nuestras paacuteginas con otros navegadores puedan leerlas correctamente Asiacute que los maacutes adecuado es el empleo de los mismos Otros siacutembolos especiales aparecen en la Tabla 5

Siacutembolo Coacutedigo

Ccedil ampccedil

Ccedil ampCcedil

copy ampcopy

reg ampreg

Tabla 5

Veamos un ejemplo en el Coacutedigo fuente 9

ampquotLa inspiraciampoacuten existe pero tiene que encontrarse trabajandoampquotampcopy Pablo Ruampiacutez Picasso

Coacutedigo fuente 9

Esta instruccioacuten HTML deberiacutea producir el siguiente resultado

La inspiracioacuten existe pero tiene que encontrarse trabajando copyPablo Ruiacutez Picasso

Para la inclusioacuten de comentarios en nuestra paacutegina HTML podemos usar la etiqueta lt-- --gt Estos comentarios nos podraacuten servir para efectuar anotaciones en nuestro documento HTML que ayuden a una mayor comprensioacuten del coacutedigo En el Coacutedigo fuente 10 se muestra un ejemplo de comentario

lt-- Esto es un comentario y no seraacute mostrado por el navegador --gt

Coacutedigo fuente 10

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

19

Espaciado y saltos de liacutenea En HTML soacutelo se admite un uacutenico espacio en blanco separando cualquier elemento o texto el resto de espacios seraacuten ignorados por el navegador al igual que las tabulaciones retornos de carro etc Veamos un ejemplo en la Tabla 6

Ejemplo Resultado

Esta frase no se veraacute asiacute en el visor Esta frase no se veraacute asiacute en el visor

Tabla 6

No obstante siacute podremos dar el formato que deseemos a nuestras paacuteginas con el empleo de los siguientes elementos del lenguaje HTML

Inclusioacuten de espacios en blanco ampnbsp Nos permitiraacute la inclusioacuten de maacutes de un espacio en blanco entre dos textos consecutivos de forma que estos espacios se muestren de forma efectiva en el navegador Tendremos que incluir tantas expresiones ampnbsp como espacios en blanco se deseen incluir

Ejemplo Resultado

Texto1ampnbspampnbspampnbspampnbspTexto2 Texto1 Texto2

Tabla 7

Salto de liacutenea ltBRgt BR Break Nos permite dar un salto a la liacutenea siguiente en el punto donde la etiqueta sea insertada

Ejemplo Resultado

Esta frase tiene aquiacuteltBRgt un salto de liacutenea Esta frase tiene aquiacute un salto de liacutenea

Tabla 8

Cambio de paacuterrafo ltPgt P Paragraph Permite definir un paacuterrafo introduciendo normalmente un espacio de separacioacuten de dos liacuteneas con el texto siguiente al punto donde hayamos insertado la etiqueta ltPgt

Lenguaje HTML copy Grupo EIDOS

20

Ejemplo Resultado

Esta frase tiene aquiacuteltPgt un cambio de paacuterrafo Esta frase tiene aquiacute

un cambio de paacuterrafo

Tabla 9

La etiqueta de fin paacuterrafo ltPgt es opcional no siendo necesario incluirla Aunque siempre es recomendable delimitar claramente el inicio y final de un paacuterrafo Ademaacutes cuando usemos esta etiqueta como cerrada ltPgt ltPgt tenemos la posibilidad de incluirle el atributo align el cual indica al navegador la forma de justificar el texto incluido en el paacuterrafo El formato seriacutea el siguiente

ltP align= left right center justify gtTexto contenido en elpaacuterrafo ltPgt

Veamos algunos ejemplos en la Tabla 10

Ejemplo Resultado

ltP align=rightgtEste es un ejemplode paacuterrafo alineado a laderechaltPgt

Este es un ejemplo de paacuterrafo alineado a la derecha

ltP align=centergtEste es unejemplo de paacuterrafo centradoltPgt

Este es un ejemplo de paacuterrafo centrado

Tabla 10

Liacutenea Horizontal ltHRgt HR Horizontal Rule Nos permite insertar una liacutenea horizontal cuyo tamantildeo podremos determinar a traveacutes de sus atributos Si no especificamos ninguacuten atributo dibujaraacute una liacutenea que ocupe el ancho de la pantalla del navegador Su utilidad es la de permitirnos dividir nuestra paacutegina en distintas secciones No seraacute necesaria la etiqueta de fin ltHRgt

El formato de la etiqueta con sus posibles atributos es

ltHR align= left right center noshade size=n width=n gt

bull align= left right center Permite establecer la alineacioacuten de la liacutenea a la izquierda a la derecha o centrarla

bull noshade No muestra la sombra de la liacutenea evitando el efecto de tres dimensiones

bull size=n Indica el grosor de la liacutenea en pixels

bull width=n oacute n Especificaraacute el ancho de la liacutenea este se podraacute especificar en pixels (n) o en tanto por ciento del ancho de la ventana (n) Vamos a ver algunos ejemplos en la Tabla 11

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

21

Ejemplo Resultado

ltHRgt

ltHR size=3 noshadegt

ltHR size=5width=50align=rightgt

ltHR size=10width=50align=centergt

Tabla 11

Texto preformateado ltPREgt PRE Preformatted Nos permitiraacute visualizar el texto tal y como se ha escrito respetando los saltos de liacutenea las tabulaciones y espacios en blanco de todo el texto incluido entre las etiquetas ltPREgt y ltPREgt

El texto se mostraraacute con una fuente de espaciado fijo maacutes pequentildea que el texto normal No es recomendable su uso ya que presenta muchas limitaciones y no se obtiene una buena presentacioacuten

Ejemplo Resultado

ltPREgtEste texto estaacutepreformateadoltPREgt

Este texto estaacute preformateado

Tabla 12

Elementos del lenguaje I

Cabeceras y atributos de texto

Cabeceras ltH1gtltH6gt H Heading En un documento HTML podemos incluir seis tipos distintos de cabeceras que van a constituir normalmente el tiacutetulo y los distintos subapartados que forman el documento aunque podremos utilizarlas en el punto que queramos del documento para resaltar cualquier texto Estas cabeceras son definidas por las etiquetas ltH1gtltH2gtltH3gtltH4gtltH5gt y ltH6gt El texto que componga cada cabecera deberaacute estar incluido entre las etiquetas de inicio (ltHngt) y fin (Hn) correspondiente La cabecera ltH1gtseraacute la que muestre el texto de mayor tamantildeo este tamantildeo iraacute disminuyendo hasta llegar a la cabecera ltH6gt Como podemos ver en la Tabla 13 Para alinear las cabeceras utilizamos el atributo align El formato seriacutea ltHn align=centergt como muestra la Tabla 14

Ejemplo Resultado

ltH1gtCabecera 1ltH1gt Cabecera 1 ltH2gtCabecera 2ltH2gt Cabecera 2

Lenguaje HTML copy Grupo EIDOS

24

ltH3gtCabecera 3ltH3gt Cabecera 3

ltH4gtCabecera 4ltH4gt Cabecera 4

ltH5gtCabecera 5ltH5gtCabecera 5

ltH6gtCabecera 6ltH6gtCabecera 6

Tabla 13

Ejemplo Resultado

ltH5 align=centergtCabecera 5ltH5gtCabecera 5

Tabla 14

Atributos del texto Al texto de nuestro documento HTML le podemos aplicar distintos atributos (negrita cursiva subrayado etc) al igual que hacemos cuando trabajamos con el procesador de textos en la edicioacuten de nuestros documentos Para aplicar estos atributos disponemos de distintas etiquetas que aplicaraacuten su efecto al texto incluido entre sus indicadores de inicio y fin Las vemos en la Tabla 15

Atributo Etiqueta Ejemplo Resultado

Negrita ltBgtltBgtltBgtTexto ennegritaltBgt

Texto en negrita

Cursiva ltIgtltIgtltIgtTexto encursivaltIgt

Texto en cursiva

Teletype ltTTgtltTTgtltTTgtTexto en modoteletypeltTTgt

Texto en modoteletype

Subrayado ltUgtltUgt ltUgtTexto subrayadoltUgt Texto subrayado Tachado ltSgtltSgt ltSgtTexto tachadoltSgt Texto tachado

Parpadeo ltBLINKgtltBLINKgtltBLINKgtTextoparpadeandoltBLINKgt

Texto parpadeando

Superiacutendice ltSUPgtltSUPgt ltSUPgtTexto en modosuperiacutendiceltSUPgt

Texto en modo superiacutendice

Subiacutendice ltSUBgtltSUBgtltSUBgtTexto en modosubiacutendiceltSUBgt

Texto en modo subiacutendice

Centrado ltCENTERgtltCENTERgt

ltCENTERgtTextocentradoltCENTERgt

Texto centrado

B Bold I Italic TT Teletype U Underlined S Strike SUP Superscript SUB Subscript

Tabla 15

copy Grupo EIDOS 3 Elementos del lenguaje I

25

Alguna de estas etiquetas no es reconocida por determinados navegadores Asiacute por ejemplo la etiqueta ltBLINKgt (Parpadeo) no es implementada por el Explorer Por lo que seguacuten el explorador que estemos utilizando podremos ver el resultado correctamente o no

Existen otras etiquetas que nos van a servir para especificar de manera diferenciada unidades loacutegicas de nuestro documento HTML tales como citas direcciones de correo etc En algunos casos el formato obtenido con estas etiquetas de estilo loacutegico va a ser el mismo que con las anteriores a las que se les denomina tambieacuten etiquetas de estilo fiacutesico Algunas etiquetas de estilo loacutegico las vemos en la Tabla 16

Etiqueta Ejemplo Resultado

ltSTRONGgtltSTRONGgtltSTRONGgtEspecifica textoresaltado (igualltBgt)ltSTRONGgt

Especifica texto resaltado(igual ltBgt)

ltCITEgtltCITEgtltCITEgtIndica una cita otiacutetulo (igual ltIgt)ltCITEgt

Indica una cita o tiacutetulo (igualltIgt)

ltSTRIKEgtltSTRIKEgtltltSTRIKEgtTexto tachado(igual ltSgt)ltSTRIKEgt

Texto tachado (igual ltSgt)

Tabla 16

Si queremos aplicar efectos maacutes espectaculares a nuestro documento HTML debemos variar el tamantildeo el color y el tipo de letra del texto La etiqueta que nos permite todo esto es ltFONTgtltFONTgt por medio de sus atributos size color y face

ltFONT size=n oacute +- n color=rrggbb oacute name face=nombre defont gt

bull size=n oacute +- n El atributo size nos permite especificar un tamantildeo determinado

para la fuente del texto incluido entre las etiquetas de inicio y fin el cual puede estar entre 1 y 7 El texto de tamantildeo normal equivale a la fuente de tamantildeo 3 (fuente base) Por tanto si especificamos size=+2 el tamantildeo de la fuente seraacute 5 Y si especificamos size= -1 el tamantildeo seraacute 2

Ejemplo Resultado

ltFONT size=2gtTamantildeo 2ltFONTgtTamantildeo 2

ltFONT size=+2gtTamantildeo 5 (3+2)ltFONTgt Tamantildeo 5 (3+2)

ltFONT size=-1gtTamantildeo 2 (3-1)ltFONTgtTamantildeo 2 (3-1)

Tabla 17

bull color=rrggbb oacute name Nos va a permitir definir el color que tendraacute el texto

incluido entre las etiquetas Tabla 18

Lenguaje HTML copy Grupo EIDOS

26

Ejemplo Resultado

ltFONT color=redgtTexto de colorrojoltFONTgt

Texto de color rojo

ltFONT color=bluegtTexto de colorazulltFONTgt

Texto de color azul

ltFONT size=5 color=008000gtTextoverde y de tamantildeo 5ltFONTgt

Texto verde y detamantildeo 5

Tabla 18

bull face=nombre de font Nos va a permitir escribir texto con el tipo de letra que le

especifiquemos En el caso de que el tipo de letra que le hayamos especificado no esteacute cargada en el ordenador que lee la paacutegina se usaraacute el font por defecto del navegador

Ejemplo Resultado

ltFONT face=TahomagtTipo de letraTahomaltFONTgt

Tipo de letra Tahoma

ltFONT size=4 color=blueface=TahomagtTexto azul de tamantildeo4 y TahomaltFONTgt

Texto azul de tamantildeo 4 y Tahoma

Tabla 19

Listas Podemos representar elementos en forma de lista dentro de nuestros documentos de una forma muy sencilla y con una gran versatilidad Estas listas podraacuten incluir cualquiera de los elementos HTML e incluso podemos definir listas anidadas es decir listas dentro de listas HTML nos permite crear tres tipos distintos de listas

bull Listas no numeradas

bull Listas numeradas

bull Listas de definiciones

Listas no numeradas ltULgt UL Unordered List

Con este tipo de listas podemos especificar una serie de elementos sin un orden predeterminado precedidos de una marca o vintildeeta que nosotros mismos podemos definir Para la definicioacuten de los liacutemites de la lista utilizaremos la etiqueta ltULgt ltULgt y para determinar cada uno de los elementos que la componen usaremos la etiqueta ltLIgt El formato es el siguiente

ltUL type=disk oacute circle oacute squaregtltLHgtTiacutetulo de la listaltLHgt

copy Grupo EIDOS 3 Elementos del lenguaje I

27

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltULgtLH List Head LI List Item

Con el atributo type vamos a especificar el tipo de marca o vintildeeta que antecederaacute a cada uno de los elementos de la lista Estas marcas podraacuten ser un disco (disk) un ciacuterculo (circle) o un cuadrado (square) La etiqueta ltLHgt nos va a servir para especificar un posible tiacutetulo de la lista siendo esta opcional Vamos a ver algunos ejemplos en la Tabla 20

Ejemplo Resultado

ltUL type=circlegtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAfricaltLIgtAmeacutericaltLIgtOceaniacutea

ltULgt

Los cinco continentes

Europa

Asia

Aacutefrica

Ameacuterica

Oceaniacutea

ltUL type=squaregtltLIgtEuropaltLIgtAsialtLIgtAfricaltLIgtAmeacutericaltUL type=circle gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltULgtltLIgtOceaniacutea

ltULgt

Europa

Asia

Aacutefrica

Ameacuterica

Ameacuterica del Norte

Ameacuterica del Sur

Oceaniacutea

Tabla 20

Listas numeradas ltOLgt OL Ordered List

Con este tipo de listas podemos especificar una serie de elementos numerados seguacuten el lugar que ocupan en la lista Para la definicioacuten de los liacutemites de la lista utilizaremos la etiqueta ltOLgt ltOLgt y para determinar cada uno de los elementos que la componen usaremos la etiqueta ltLIgt El formato es el siguiente

ltOL start=n type=Tipo de listagtltLHgtTiacutetulo de la listaltLHgt

Lenguaje HTML copy Grupo EIDOS

28

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltOLgt

Con el atributo start vamos a especificar el nuacutemero por el que va a empezar la lista Si no indicamos este argumento la lista empezaraacute a numerarse a partir del 1 Con el atributo type vamos a especificar el tipo de lista numerada Sus posibles valores aparecen a continuacioacuten y veremos algunos ejemplos en la Tabla 21

A Letras mayuacutesculas (A B C )

a Letras minuacutesculas (a b c )

I Nuacutemeros romanos en mayuacutesculas (I II III IV )

i Nuacutemeros romanos en minuacutesculas (i ii iii iv )

1 Numeacutericamente (1 2 3 4 ) (es la numeracioacuten por defecto y por tanto no habriacutea que indicarla)

Ejemplo Resultado

ltOL type=AgtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltLIgtOceaniacutea

ltOLgt

Los cinco continentes

A Europa

B Asia

C Aacutefrica

D Ameacuterica

E Oceaniacutea

ltOL type=I start=2gtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltOL type=i gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltOLgtltLIgtOceaniacutea

ltOLgt

II Europa

III Asia

IV Aacutefrica

V Ameacuterica

i Ameacuterica del Norte

ii Ameacuterica del Sur

VI Oceaniacutea

Tabla 21

copy Grupo EIDOS 3 Elementos del lenguaje I

29

Listas de definiciones ltDLgt DL Definition List

Estas listas nos van a servir para especificar una serie de teacuterminos y sus definiciones correspondientes Para la definicioacuten de la lista usaremos la etiqueta ltDLgt ltDLgt para especificar los teacuterminos usaremos la etiqueta ltDTgt y para especificar la definicioacuten correspondiente a cada teacutermino usaremos la etiqueta ltDDgt El formato es el siguiente

ltDLgtltLHgtTiacutetulo de la listaltLHgtltDTgtTeacutermino 1ltDDgtDefinicioacuten 1ltDTgtTeacutermino 2ltDDgtDefinicioacuten 2

ltDTgtTeacutermino nltDDgtDefinicioacuten n

ltDLgtDT Definition Term DD Definition Description

Vamos a ver un ejemplo en la Tabla 22

Ejemplo Resultado

ltDLgtltDTgtPariacutesltDDgtCapital de FrancialtDTgtRomaltDDgtCapital de ItalialtDTgtMadridltDDgtCapital de Espantildea

ltDLgt

Pariacutes

Capital de Francia

Roma

Capital de Italia

Madrid

Capital de Espantildea

Tabla 22

Hiperenlaces Los hiperenlaces son enlaces de hipertexto que nos van a permitir acceder de manera directa a otros documentos HTML independientemente de su ubicacioacuten o a otras zonas dentro de nuestro propio documento

Enlaces a otras paacuteginas ltA href=gt Con este tipo de hiperenlaces vamos a poder acceder tanto a otras paacuteginas que esteacuten ubicadas dentro de nuestro propio sistema como a paacuteginas ubicadas en puntos muy distantes del globo El formato de este tipo de hiperenlaces es

ltA href=URL a la que se accedegtTexto del hiperenlaceltAgt

Lenguaje HTML copy Grupo EIDOS

30

Con el atributo href vamos a especificar la URL del documento al que se pretende acceder El texto contenido entre las etiquetas de comienzo y fin nos va a servir para definir el hiperenlace por lo que deberiacutea ser clarificador del contenido del documento con el que vamos a enlazar Esta definicioacuten apareceraacute resaltada normalmente en azul y subrayada En la mayoriacutea de los navegadores esta definicioacuten del hiperenlace es sensible por lo que cuando el cursor pasa por encima del mismo este cambia de aspecto indicaacutendolo

Veamos un ejemplo en la Tabla 23

Ejemplo Resultado

ltA href=httpwwweidosesgtPaacutegina inicialde Villa EidosltAgt

Paacutegina inicial de Villa Eidos

Tabla 23

Si situamos el ratoacuten encima del hiperenlace y pulsamos el navegador accederaacute a la paacutegina Web indicada por href es decir accederaacute a la paacutegina situada en httpwwweidoses

Igualmente podriacuteamos indicar el hiperenlace por medio de una imagen Si esta imagen tiene definido un borde este apareceraacute resaltado en color azul El formato correspondiente seriacutea

ltA href=URL a la que se accedegtltIMG src=Imagengt y tambieacutentextoltAgtIMG Image src Source

Veamos un ejemplo en la Tabla 24

Ejemplo Resultado

ltA href=httpwwweidosesgtltIMGsrc=IconogifgtltAgt Villa Eidos Villa Eidos

Tabla 24

Si pulsamos sobre la imagen el navegador accederaacute a la paacutegina Web inicial de Villa Eidos

Enlaces dentro de la misma paacutegina ltA name=gt Este tipo de hiperenlaces nos va a permitir marcar distintas zonas del documento activo con el objeto de tener un acceso directo a las mismas Una buena utilidad de este tipo de enlaces radica en la creacioacuten de iacutendices para documentos largos de forma que si pinchamos en el hiperenlace correspondiente al tiacutetulo de un capiacutetulo determinado el navegador saltaraacute automaacuteticamente hasta el comienzo de dicho capiacutetulo

Para la creacioacuten de estos hiperenlaces debemos seguir dos pasos

copy Grupo EIDOS 3 Elementos del lenguaje I

31

1 Marcar las distintas zonas o secciones del documento Esto lo haremos con el paraacutemetro name

ltA name=Identificador de seccioacutengtTexto de laseccioacutenltAgt

A cada seccioacuten le asignaremos un identificador distinto para poder referenciarlas posteriormente de manera inequiacutevoca

2 Especificar un enlace a cada una de las secciones que hayamos definido ltA href=Identificador de seccioacutengtTexto del enlace a laseccioacutenltAgt

Si pinchamos en este enlace el navegador saltaraacute automaacuteticamente a la seccioacuten correspondiente Veamos un ejemplo sencillito en la Tabla 25 pero demostrativo de todo lo que acabamos de explicar

Ejemplo Resultado

ltA href=Cap1gtCapiacutetulo1ltAgtltA name=Cap1gtCapiacutetulo 1ltAgt

Capiacutetulo 1

Capiacutetulo 1

Tabla 25

Si nos creamos una paacutegina HTML con distintos capiacutetulos podriacuteamos crear una seccioacuten para cada uno de ellos de forma que si pinchamos en el hiperenlace correspondiente al Capiacutetulo 1 el navegador saltariacutea directamente a la seccioacuten correspondiente al Capiacutetulo 1

Ademaacutes de los dos tipos de hiperenlaces vistos podemos crear hiperenlaces que nos permitan acceder a cualquiera de los servicios de Internet Es decir podriacuteamos indicar enlaces a servidores FTP GOPHER NEWS MAILTO etc Para ello tendriacuteamos que indicar la URL correspondiente al servicio al cual queremos acceder como ya vimos en el primer capiacutetulo de este manual

Imaacutegenes

Podremos dar un aspecto mucho maacutes vistoso a nuestros documentos HTML con la inclusioacuten de imaacutegenes Los formatos de imagen que todos los navegadores reconocen son gif y jpg Si queremos insertar una imagen en otro formato el visor deberiacutea disponer del programa externo que permita su visualizacioacuten De todas formas una buena solucioacuten es utilizar alguacuten programa de tratamiento de imaacutegenes que nos convierta la imagen a uno de los formatos mencionados anteriormente

El formato gif es maacutes recomendado para la inclusioacuten de iconos graacuteficas y el formato jpg para el caso de insertar fotografiacuteas en nuestras paacuteginas

Lenguaje HTML copy Grupo EIDOS

32

La etiqueta que nos va a permitir la insercioacuten de imaacutegenes es ltIMGgt La imagen se insertaraacute justo en el punto del documento donde coloquemos dicha etiqueta pudiendo insertar imaacutegenes dentro de listas tablas o formularios

El formato de la etiqueta con sus posibles argumentos es el siguiente

ltIMG src=URL de la imagen alt=Texto alternativoalign=topmiddlebottonleftrigth border=Tamantildeoheight=Tamantildeo width=Tamantildeo hspace=margen vspace=margengt

bull src=URL de la imagen El atributo src nos va servir para indicar la URL de la imagen que

queremos insertar es decir el servidor y camino hasta llegar al fichero de la imagen

No seraacute necesario que la imagen que queremos insertar en nuestro documento esteacute en el ordenador local aunque siacute es recomendable ya que el acceso a las mismas puede ser maacutes lento

Por tanto es una buena praacutectica copiar todas las imaacutegenes que vayamos a incluir en nuestro documento HTML al ordenador local

Tabla 26

bull alt=Texto alternativo Nos va a permitir mostrar un texto alternativo para el caso en que el

navegador no sea capaz de mostrar la imagen Su uso es muy recomendable ya que cuando publiquemos nuestras paacuteginas en la WWW no sabremos desde queacute tipo de navegadores accederaacuten los internautas a nuestras paacuteginas

En la Tabla 27 vamos a ver un ejemplo

Si usas un navegador que no tiene ninguacuten problema para la visualizacioacuten de imaacutegenes desactiva temporalmente la opcioacuten de mostrar imaacutegenes prueba el ejemplo que muestra la Tabla 27 y compaacuteralo con el anterior

Tabla 27

copy Grupo EIDOS 3 Elementos del lenguaje I

33

bull align=topmiddlebotton leftrigth Nos permite indicar coacutemo se alinearaacute el texto que siga a la imagen

top alinea el texto con la parte superior de la imagen

middle con la parte central

bottom con la parte inferior

left imagen alineada a la izquierda de la paacutegina

rigth imagen alineada a la derecha de la paacutegina

Tabla 28

En el caso de que el texto que acompantildea a la imagen tenga maacutes de una liacutenea tan soacutelo la primera seraacute la que se alinearaacute seguacuten alguna de las anteriores alineaciones el resto de liacuteneas se incluiraacuten debajo de la imagen quedando un efecto bastante feo

Para solventar esto estaacuten las alineaciones LEFT (imagen alineada a la izquierda de la paacutegina) y RIGHT (imagen alineada a la derecha de la paacutegina) Las cuales permiten que la imagen se inserte dentro del paacuterrafo que la rodea produciendo un resultado mucho maacutes profesional en la integracioacuten de texto e imaacutegenes

Estas dos alineaciones no se podraacuten usar en combinacioacuten con las anteriores Veamos algunos ejemplos en la Tabla 29

Vemos como en el primer ejemplo la segunda liacutenea de texto aparece debajo de la imagen produciendo un efecto menos vistoso que en los dos ejemplos siguientes

Lenguaje HTML copy Grupo EIDOS

34

Tabla 29

bull border=Tamantildeo Permite antildeadirle un borde a la imagen del tamantildeo que le

especifiquemos

Si la imagen forma parte de un hiperenlace esta apareceraacute con un borde del color del hiperenlace Si no deseaacuteramos que aparezca este borde tendriacuteamos que especificar border=0

Tabla 30

bull height=Tamantildeo Permite especificar el alto de la imagen en puntos de pantalla

(pixels) o en del tamantildeo del documento

bull width=Tamantildeo Con este argumento especificaremos el ancho al que mostraremos la imagen en puntos de pantalla (pixels) o en del tamantildeo del documento

En el segundo de los ejemplos de la Tabla 31 el ancho de la imagen se ha extendido al 50 del total del ancho de la celda donde estaacute contenida la imagen Si pruebas este ejemplo en tu documento HTML la imagen se extenderaacute horizontalmente hasta ocupar el 50 del ancho de la paacutegina

copy Grupo EIDOS 3 Elementos del lenguaje I

35

Tabla 31

bull hspace=Margen hspace Horizontal Space Permite especificar el nuacutemero de espacios

horizontales (en puntos) que separaraacuten a la imagen de cualquier elemento que le siga o le anteceda

bull vspace=Margen vspace Vertical Space Con este argumento especificaremos el margen vertical (en puntos) que habraacute entre la imagen y cualquier otro elemento de nuestro documento

Tabla 32

Elementos del lenguaje II

Tablas HTML nos va a permitir la inclusioacuten de cualquiera de los elementos de nuestra paacutegina (texto imaacutegenes hiperenlaces listas etc) dentro de una tabla Gracias a lo cual conseguiremos dar una mayor y mejor estructuracioacuten a los contenidos de nuestros documentos Ademaacutes la definicioacuten de las tablas en HTML es muy abierta pudiendo en cualquier momento redimensionar la tabla es decir cambiar su nuacutemero de filas o de columnas cambiar el tamantildeo de alguna de sus celdas etc

La etiqueta que nos va a permitir la definicioacuten de tablas es ltTABLEgt ltTABLEgt

El formato general de la etiqueta sin ninguacuten argumento es el siguiente

ltTABLEgtltTR gt

ltTHgtContenido de la celda ltTHgtltTDgtContenido de la celda ltTDgt

ltTRgtltTABLEgt

TR Table Row TH Table Header TD Table Data

Vamos a analizar cada una de estas etiquetas de forma separada

1 ltTABLEgt ltTABLEgt Definicioacuten general de la tabla Dentro de ella definiremos las filas y columnas que la constituyen pudiendo incluso definir tablas dentro de tablas es decir tablas anidadas

Lenguaje HTML copy Grupo EIDOS

38

2 ltTRgt ltTRgt Definicioacuten de las filas de la tabla Por cada etiqueta ltTRgt que incluyamos se crearaacute una fila en la tabla No seraacute necesario indicar la etiqueta de cierre

3 ltTHgtltTHgt oacute ltTDgtltTDgt Definicioacuten de cada una de las celdas de la tabla Vemos que estas etiquetas estaacuten contenidas dentro de otra etiqueta de definicioacuten de fila de forma que por cada etiqueta ltTHgt o ltTDgt que incluyamos se crearaacute una celda dentro de la fila correspondiente La etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera es decir celdas cuyo contenido estaacute resaltado en negrita dejando la etiqueta ltTDgt para definir celdas de datos En este caso tampoco es necesario indicar las etiquetas de cierre

Todas estas etiquetas tienen sus respectivos argumentos Pero antes de analizar cada uno de ellos vamos a ver un ejemplo muy sencillito en la Tabla 33 que nos crearaacute una tabla de una sola celda (1 fila X 1 columna = 1 celda) Para ello usaremos la etiqueta de creacioacuten de tabla ltTABLEgt con el argumento border=1 (nos dibuja un borde de tamantildeo 1 alrededor de la tabla)

Ejemplo Resultado

ltTABLE border=1gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 33

Vamos ahora a analizar lo distintos argumentos que componen las etiquetas de la tabla analizaacutendolos desde lo general (la definicioacuten de la tabla) hasta lo especiacutefico (la definicioacuten de las celdas)

1 Definicioacuten de la tabla ltTABLEgt

ltTABLE border=n cellpadding=n cellspacing=n width=n oacute height=n oacute bgcolor=rrggbb oacute nombre gt

Contenido ltTABLEgt

bull border=n Si especificamos este argumento se dibujaraacute un borde alrededor de la

tabla del ancho que le indiquemos como muestra la Tabla 34

Ejemplo Resultado

Mi primera tabla ltTABLE border=4gtltTRgtltTDgtMi primera tablaltTABLEgt

Tabla 34

bull cellpadding=n Indica el espacio en puntos que separa el contenido de la celda con

el borde de la misma siendo 1 por defecto

copy Grupo EIDOS 4 Elementos del lenguaje II

39

Ejemplo Resultado

ltTABLE border=4 cellpadding=8gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 35

bull cellspacing=n Indica el espacio en puntos que separa a las celdas contenidas dentro de la tabla siendo 2 por defecto

bull width=n oacute Indica la anchura de la tabla en puntos o en en funcioacuten del ancho de la ventana del visualizador Si no indicamos este argumento el ancho de la tabla se ajustaraacute al tamantildeo del contenido de las celdas Esto es lo que ha ocurrido en el uacuteltimo ejemplo que hemos realizado Veamos un ejemplo en el Coacutedigo fuente 11 El resultado se muestra en la Tabla 36

ltTABLE border=4 width=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 11

Mi primera tabla

Tabla 36

bull height=n oacute Nos permite definir la altura de la tabla en puntos o en de la

altura de la ventana del visualizador Si indicamos este argumento lo recomendable es darlo en puntos ya que es maacutes complicado adecuarnos a la altura de la ventana del visualizador Al igual que en el caso anterior si no especificamos este argumento la altura se adecuaraacute al contenido de las celdas El Coacutedigo fuente 12 muestra un ejemplo y la Tabla 37 nos muestra el resultado

ltTABLE border=4 width=50 height=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 12

Mi primera tabla

Tabla 37

bull bgcolor= rrggbb o nombre del color Nos permite definir un color

de fondo para todas las celdas de la tabla Maacutes adelante veremos como podemos definir colores especiacuteficos para cada una de las celdas por separado

Lenguaje HTML copy Grupo EIDOS

40

Ejemplo Resultado

ltTABLE border=4 bgcolor=yellowgtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 38

2 Definicioacuten de las filas de la tabla ltTRgt

ltTR align=leftrightcenter valign=topmiddlebottombgcolor=rrggbb oacute nombregt

Antes de empezar a descifrar el significado de cada uno de los argumentos de esta etiqueta vamos a ver un ejemplo en la Tabla 39 de coacutemo se construiriacutea una tabla con dos filas (2 filas X 1 columna = 2 celdas)

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR gtltTDgtPrimera filaltTRgtltTDgtSegunda filaltTABLEgt

Segunda fila

Tabla 39

bull align=leftrightcenter Con este argumento vamos a indicar la alineacioacuten

horizontal (leftizquierda rightderecha centercentrado) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado Veamos un ejemplo en el Coacutedigo fuente 13 y su correspondiente resultado en la Tabla 40

ltTABLE border=4 width=50 gt ltTRgtltTDgtPrimera filaltTRalign=rightgtltTDgtSegunda filaltTABLEgt

Coacutedigo fuente 13

Primera fila

Segunda fila

Tabla 40

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten

vertical (toparriba middlecentrado bottomabajo) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado

copy Grupo EIDOS 4 Elementos del lenguaje II

41

bull bgcolor= rrggbb o nombre del color En este caso este argumento nos permitiraacute definir un color de fondo para todas las celdas de una fila veamos un ejemplo en la

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR bgcolor=yellowgtltTDgtPrimera

filaltTR bgcolor=greengtltTDgtSegunda

filaltTABLEgt

Segunda fila

Tabla 41

3 Definicioacuten de las celdas de la tabla ltTHgt oacute ltTDgt

ltTH oacute TD align=leftrightcenterjustifyvalign=topmiddlebottom bgcolor=rrggbb oacute nombre width=nrowspan=n colspan=ngt

Como ya explicamos anteriormente la etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera y la etiqueta ltTDgt para la creacioacuten de celdas de datos Vamos a completar nuestro ejemplo inicial antildeadieacutendole tres filas de dos celdas cada una (3 filas X 2 columnas = 6 celdas) Tabla 42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTDgtCelda 21ltTDgtCelda 22

ltTABLEgt Celda 21 Celda 22

Tabla 42

bull align=leftrightcenterjustify Con este argumento vamos a indicar la

alineacioacuten horizontal (left izquierda right derecha center centrado justifyjustificado) del contenido de cada celda por separado Su significado es el mismo que en la etiqueta ltTRgt

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten vertical (toparriba middlecentrado bottomabajo) del contenido de cada celda

bull bgcolor= rrggbb o nombre del color En este caso podremos definir un color de fondo para cada una de las celdas de manera independiente

bull width=n oacute Indica el ancho de la celda en puntos o en en funcioacuten del tamantildeo de la tabla

Lenguaje HTML copy Grupo EIDOS

42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera

1ltTHgtCabecera 2ltTR gtltTD align=rightgtCelda

11ltTD bgcolor=redgtCelda 12ltTRgtltTD

bgcolor=yellowgtCelda 21ltTDalign=centergtCelda 22ltTABLEgt

Celda 21 Celda 22

Tabla 43

bull rowspan=n Con este argumento podemos lograr que una celda concreta abarque maacutes de una fila ya sabemos que por defecto una celda ocupa una sola fila

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTD rowspan=2gtCelda

11ltTDgtCelda 12ltTRgtltTDgtCelda 22

ltTABLEgt

Celda 11 Celda 22

Tabla 44

bull colspan=n Con este argumento podemos lograr que una celda se expanda a maacutes

de una columna

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTD colspan=2

align=centergtCelda 22ltTABLEgt

Celda 22

Tabla 45

Para finalizar este tema sobre la creacioacuten de tablas vamos a ver el ejemplo que aparece en el Coacutedigo fuente 14 y su resultado en la Tabla 46

ltTABLE border=4gtltTR gtltTH colspan=3 bgcolor=redgtTiacutetuloltTR bgcolor=yellowgtltTHgtCabecera 1ltTHgtCabecera 2ltTHgtCabecera 3

copy Grupo EIDOS 4 Elementos del lenguaje II

43

ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTDgtCelda 13ltTRgtltTD rowspan=2gtCelda 21ltTD bgcolor=greengtCelda 22ltTDgtCelda 23ltTRgtltTDgtCelda 32ltTDgtCelda 33

ltTABLEgt

Coacutedigo fuente 14

Tiacutetulo

Cabecera 1 Cabecera 2 Cabecera 3

Celda 11 Celda 12 Celda 13

Celda 22 Celda 23 Celda 21

Celda 32 Celda 33

Tabla 46

Formularios El formulario es el elemento de HTML que nos va a permitir interactuar con los visitantes de nuestras paacuteginas web de forma que podemos solicitarle informacioacuten al usuario y procesarla De esta forma podremos crear en nuestras paacuteginas encuestas para solicitar la opinioacuten del visitante sobre alguacuten tema e incluso sobre el contenido de nuestra propia paacutegina web cuestionarios para evaluar la asimilacioacuten de contenidos sobre un tema concreto que se trate en la paacutegina etc

El contenido de la informacioacuten introducida por medio del formulario seraacute enviado a la direccioacuten URL donde resida el programa que se encargaraacute de procesar los datos A este tipo de programas externos se les denomina programas CGI (Common Gateway Interface)

La etiqueta HTML que nos va a permitir la creacioacuten de formularios es ltFORMgt Su formato es el siguiente

ltFORM action=URL del programa que trata el formulariomethod=postgetgt Elementos del formulario ltFORMgt

bull action=URL del programa que trata el formulario A traveacutes de este

argumento indicaremos como ya hemos mencionado la direccioacuten del fichero de programa que va a tratar la informacioacuten suministrada por el formulario

Tambieacuten podriacuteamos incluir como URL que trata el formulario una direccioacuten de correo electroacutenico Por tanto el valor de este argumento podriacutea ser action =mailto direccioacuten de correo

Nota Esta opcioacuten soacutelo funciona adecuadamente con el navegador Netscape Con el Explorer este enviacuteo dariacutea como resultado un correo en blanco Para que esta opcioacuten funcione de manera independiente del navegador que se esteacute utilizando se ha de emplear un programa externo que realice este proceso

Lenguaje HTML copy Grupo EIDOS

44

bull method=postget A traveacutes de este argumento indicaremos el meacutetodo empleado para transferir la informacioacuten generada por el formulario

Si indicamos post se produciraacute la modificacioacuten del documento destino como es el caso de enviar la informacioacuten a una direccioacuten de correo electroacutenico Mediante el meacutetodo get no se produciraacuten cambios en el documento destino

Dentro de un formulario podremos incluir cualquier texto o instruccioacuten HTML de las vistas a lo largo de los capiacutetulos anteriores ademaacutes claro estaacute de los elementos tiacutepicos de un formulario cajas de texto botones de seleccioacuten menuacutes de opciones etc Vamos a ver coacutemo se incluiraacuten estos elementos en un formulario

Entrada baacutesica de datos Para definir los distintos tipos de campos baacutesicos de entrada de datos usaremos la etiqueta ltINPUTgt

El formato es el siguiente

ltINPUT type= text password checkbox radio hidden submit image reset name=Variable value=Valor inicialgt

bull El argumento type determinaraacute el tipo de campo de entrada que estamos insertando A

continuacioacuten describiremos cada uno de ellos

bull El argumento name especifica el nombre de la variable que tomaraacute el valor introducido en el campo

bull El argumento value especifica el valor por defecto que tendraacute el campo

Vamos a continuacioacuten a describir los distintos tipos campos de entrada que vendraacuten dados por los valores del argumento type

Texto corto type=text

Con este argumento vamos a indicar que el campo a introducir seraacute un texto El formato seriacutea

ltINPUT type= text name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los nuevos atributos es

bull size=Tamantildeo Indicaremos el tamantildeo en caracteres de la ventana de introduccioacuten de texto

bull maxlength=Longitud maacutexima Indicaremos el nuacutemero maacuteximo de caracteres a introducir en el campo

Vamos a ver un ejemplo en la Tabla 47

copy Grupo EIDOS 4 Elementos del lenguaje II

45

Ejemplo Resultado

NombreltINPUT type=text name=Var1Value=Texto por defecto size=20 maxlength=25gt

Tabla 47

Claves type=password

Con este argumento indicamos que el campo a introducir seraacute una palabra clave por lo que los caracteres que se introduzcan seraacuten sustituidos por asteriscos en la visualizacioacuten por pantalla El formato es

ltINPUT type= password name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los distintos argumentos es el mismo que en el caso anterior Veamos un ejemplo en la Tabla 48

Ejemplo Resultado

ClaveltINPUT type=password name=Var2Value=tutankamon size=11 maxlength=10gt

Tabla 48

Botones de seleccioacuten type=checkbox

El checkbox es un botoacuten que presenta dos estados marcado (1) y desmarcado (0) Podremos variar su estado simplemente pinchando con el ratoacuten El formato es

ltINPUT type= checkbox name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto

Si incluimos el argumento value cuando el botoacuten esteacute marcado su variable asociada adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 49

Ejemplo Resultado

ltINPUT type=checkbox name=Var3 value=Op1 checkedgtOpcioacuten1 ltbrgtltINPUT type=checkbox name=Var4 value=Op2gt Opcioacuten 2

Tabla 49

Lenguaje HTML copy Grupo EIDOS

46

Seleccioacuten entre varias opciones type=radio

Este argumento se usa cuando hay que hacer una seleccioacuten entre varias alternativas excluyentes pudieacutendose seleccionar uacutenicamente una de las alternativas Debemos incluir una etiqueta radio por cada una de las posibles alternativas El formato es

ltINPUT type= radio name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto En este caso uacutenicamente uno de los botones de radio podraacute aparecer marcado ya que se usa para el caso de opciones excluyentes

Cuando un botoacuten esteacute seleccionado la variable asociada a la lista de botones adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 50

Ejemplo Resultado

ltINPUT type=radio name=Var5 value=Op1gtOpcioacuten1 ltbrgtltINPUT type=radio name=Var5 value=Op2checkedgt Opcioacuten 2 ltbrgtltINPUT type=radio name=Var5 value=Op3 gtOpcioacuten 3

Tabla 50

En este ejemplo la variable Var5 tendraacute el valor Op2

Campos ocultos type=hidden

Este tipo de campos no son visibles para el usuario Su uso tiene sentido en el caso de enviar alguacuten tipo de informacioacuten que no deba ser visualizada o variada por el lector de nuestra paacutegina Web El formato es

ltINPUT type= hidden name=Variable value=Valor gt

Con esta etiqueta asignariacuteamos a la Variable referenciada por name el Valor de value y se mandariacutea junto con el formulario sin que el usuario de la paacutegina se entere de nada Veamos un ejemplo en el Coacutedigo fuente 15

ltINPUT type=hidden name=Var6 value=tutankamongt

Coacutedigo fuente 15

copy Grupo EIDOS 4 Elementos del lenguaje II

47

Botoacuten de enviacuteo de datos type=submit

Con este argumento especificamos un botoacuten en el que al pulsar los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario El formato es

ltINPUT type= submit value=Mensaje a mostrargt

En este caso el paraacutemetro value indica el mensaje que se mostraraacute en el botoacuten Veamos un ejemplo en la Tabla 51

Ejemplo Resultado

ltINPUT type=submit value=Enviar los Datosgt

Tabla 51

Botoacuten graacutefico de enviacuteo de datos type=image

Con este argumento especificamos un botoacuten de tipo imagen en el que al igual que con el botoacuten anterior si pulsamos en la imagen los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario Su formato es el siguiente

ltINPUT type= image src=URL de la imagen name=Variablegt

Con el paraacutemetro src especificamos la URL de la imagen que seraacute insertada en el botoacuten En este caso en la variable referenciada por name se almacenaraacuten las coordenadas del punto de la imagen donde se halla pinchado (de forma que estas coordenadas podriacutean ser procesadas por el programa que recibe los datos del formulario)

Botoacuten de borrado de datos type=reset

Con este argumento especificamos un botoacuten que al ser pulsado borraraacute el contenido actual de todos los campos dejaacutendolos con sus valores por defecto Su formato es

ltINPUT type= reset value=Texto del botoacutengt

Con el paraacutemetro value especificamos el texto que etiquetaraacute al botoacuten

Ejemplo Resultado

ltINPUT type=reset value=Borrar datosgt

Tabla 52

Lenguaje HTML copy Grupo EIDOS

48

Entrada datos en muacuteltiples liacuteneas En un formulario tambieacuten podremos introducir un campo de texto que abarque varias liacuteneas Para ello usaremos la etiqueta ltTEXTAREAgt ltTEXTAREAgt Su formato es el siguiente

ltTEXTAREA name=Variable rows=Filas cols=ColumnasgtContenido por defectoltTEXTAREAgt

Los argumentos rows y cols nos van a permitir especificar respectivamente el nuacutemero de filas de texto visibles y el nuacutemero de columnas de texto visibles en el campo

Ejemplo Resultado

ltTEXTAREA name=Var7 rows=5 cols=40gtContenido por defectoltTEXTAREAgt

Tabla 53

Entrada de datos a traveacutes de campos de seleccioacuten Con los campos de seleccioacuten podremos desplegar una lista de opciones entre las que podremos seleccionar una Para ello usaremos la etiqueta ltSELECTgt ltSELECTgt Su formato es el siguiente

ltSELECT name=Variable multiple size=ngtltOPTION selected value=Valor_1gtPrimera OpcioacutenltOPTION value=Valor_2gtSegunda Opcioacuten

ltOPTION value=Valor_ngtEneacutesima Opcioacuten

ltSELECTgt

Figura 1

bull La variable referenciada por name tomaraacute el valor(value) de la opcioacuten seleccionada

bull Si especificamos el argumento muacuteltiple se mostraraacuten todas la opciones en forma de tabla El nuacutemero de opciones visibles en la tabla vendraacute dado por el argumento size

copy Grupo EIDOS 4 Elementos del lenguaje II

49

bull Con la etiqueta ltOPTIONgt iremos definiendo cada una de las opciones de la lista

bull El argumento selected va a determinar cuaacutel es la opcioacuten por defecto

Para finalizar vamos a ver el Coacutedigo fuente 16 correspondiente a una encuesta realizada por la editorial ficticia EditoPc y en la Figura 2 observamos el resultado del formulario

ltP align=centergtltBgtEDITORIAL ltIgtEditoPcltIgtltBgtltPgtltFORM action=mailtodireccionejemplo method = postgtNombreltINPUT type=text size=30 name=nombregtltBRgtE_mail ltINPUT type=text size=30 name=e_mailgtltPgtDeseas recibir informacioacuten sobreltINPUT type=checkbox name=infor1 value=InternetgtInternetltINPUT type=checkbox name=infor2 value=ProgramacioacutengtProgramacioacutenltINPUT type=checkbox name=infor3 value=SistOperativogtSistOperativoltINPUT type=checkbox name=infor4 value=OfimaacuteticagtOfimaacuteticaltPgtiquestTe conectas a Internet desde casa ltbrgtltINPUT type=radio name=intercasa value=sigtSiacuteltINPUT type=radio name=intercasa value=nogtNoltPgtiquestQueacute uso le das a tu ordenador ltBRgtltSELECT name=uso multiple size=3gtltOPTION selectedgtProfesionalltOPTIONgtDomeacutesticoltOPTIONgtOcioJuegosltSELECTgtltPgtCaracteriacutesticas de tu PCltBRgtltTEXTAREA name=caract rows=5 cols=40gtltTEXTAREAgtltPgtltINPUT type=submit value=Enviar datosgt ltINPUT type=reset value=Borrardatosgt

Coacutedigo fuente 16

Figura 2

Elementos del lenguaje III

Frames Las frames son una utilidad del HTML que nos permite dividir la ventana del navegador en diferentes subventanas que podraacuten ser manipuladas de manera independiente Esto nos permitiraacute mostrar una paacutegina web diferente en cada una de la subventanas o frames

Estructura de un documento con frames Un documento con frames se estructura de manera diferente a un documento HTML normal Asiacute en este tipo de documentos no apareceraacute la etiqueta ltBODYgt En su lugar se incluiraacute la etiqueta ltFRAMESETgt ltFRAMESETgt dentro de la cual se definiraacuten las distintas frames que se incluyan en el documento

La estructura general de un documento de este tipo seriacutea por tanto

ltHTMLgtltHEADgtCabeceraltHEADgtltFRAMESETgt

Definicioacuten de la distintas framesltFRAMESETgtltNOFRAMESgt

Instrucciones HTMLltNOFRAMESgt

ltHTMLgt

Lenguaje HTML copy Grupo EIDOS

52

Puede darse el caso de que programemos nuestro documento con frames siguiendo la estructura anterior y que el navegador que se use para leer el documento no soporte la caracteriacutestica de frames con lo cual no se mostraraacute nada de lo indicado entre las etiquetas ltFRAMESETgt y ltFRAMESETgtPara solucionar este problema todas las instrucciones HTML incluidas entre las etiquetas ltNOFRAMESgt y ltNOFRAMESgt seraacuten ejecutadas por los navegadores que no soportan las frames

La sintaxis de la etiqueta ltFRAMESETgt es

ltFRAMESET rows=Lista de filas cols=Lista de columnasgtltFRAME src=URL de la frame 1 name=Nombre de la frame 1gtltFRAME src=URL de la frame 2 name=Nombre de la frame 2gt

ltFRAME src=URL de la frame n name=Nombre de la frame ngt

ltFRAMESETgt

Como vemos por cada una de la frames que incluyamos en nuestro documento debemos incluir una etiqueta ltFRAMEgt indicando mediante sus argumentos la direccioacuten URL del documento que se insertaraacute en la subventana (src) y el nombre de la frame (name) Posteriormente describiremos la etiqueta ltFRAMEgt con maacutes detalle

Los argumentos de ltFRAMESETgt son rows y cols definieacutendose uacutenicamente uno de los dos atributos en funcioacuten de si la divisioacuten de la pantalla se realizaraacute por filas (rows) o por columnas (cols)

Por cada una de las subventanas que creemos debemos especificar su tamantildeo en puntos o en porcentaje del tamantildeo de cada subventana Asiacute por ejemplo si especificamos rows= 50 2525 crearemos tres subventanas horizontales ocupando la primera el 50 de la ventana principal y las otras dos el resto Si especificamos cols=100150 crearemos tres subventanas verticales ocupando la primera 100 puntos de la ventana principal la segunda 150 puntos y tercera el espacio restante

Vamos a verlo maacutes claramente con un par de ejemplos praacutecticos que vemos en la Tabla 54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 502525gt ltFRAMEsrc=Pagweb1htm name=Pagweb1gtltFRAMEsrc=Pagweb2htm name=Pagweb2gtltFRAMEsrc=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 5: Programacion web   lenguaje html

Introduccioacuten al HTML

iquestQueacute es HTML HTML es la abreviatura de HyperText Markup Language y es el lenguaje que todos los programas navegadores usan para presentar informacioacuten en la World Wide Web (WWW)

Este es un lenguaje muy sencillo que se basa en el uso de etiquetas consistentes en un texto ASCII encerrado dentro de un par de pareacutentesis angulares(ltgt) El texto incluido dentro de los pareacutentesis nos daraacute una explicacioacuten de la utilidad de la etiqueta Asiacute por ejemplo la etiqueta ltTABLEgt nos permitiraacute definir una tabla

Las etiquetas podraacuten incluir una serie de atributos o paraacutemetros en su mayoriacutea opcionales que nos permitiraacuten definir diferentes posibilidades o caracteriacutesticas de la misma Estos atributos quedaraacuten definidos por su nombre (que seraacute explicativo de su utilidad) y el valor que toman separados por un signo de igual En el caso de que el valor que tome el atributo tenga maacutes de una palabra deberaacute expresarse entre comillas en caso contrario no seraacute necesario Asiacute por ejemplo la etiqueta ltTABLEborder=2gt nos permitiraacute definir una tabla con borde de tamantildeo 2

Entre otras cosas el manejo de estas etiquetas nos permitiraacute

bull Definir la estructura loacutegica del documento HTML

bull Aplicar distintos estilos al texto (negrita cursiva )

Lenguaje HTML copy Grupo EIDOS

8

bull La inclusioacuten de hiperenlaces que nos permitiraacuten acceder a otros documentos relacionados con el actual

bull La inclusioacuten de imaacutegenes y ficheros multimedia (graacuteficos viacutedeo audio)

iquestQueacute vamos a necesitar para crear un documento HTML

bull Un procesador de textos para escribir y editar el coacutedigo HTML Este podraacute ser cualquiera que no formatee el texto ya que el leguaje HTML estaacute basado en el coacutedigo ASCCI Si usamos un procesador como el Word tendremos que guardar el documento como soacutelo texto

bull Un navegador Web como el Explorer Netscape Mosaic etc el cual se encargaraacute del interpretar el coacutedigo HTML de nuestro documento y mostraacuternoslo en todo su esplendor

La secuencia de trabajo para crear nuestro documento es

1 Con el procesador de texto crearemos el documento HTML y lo guardaremos con el nombre que deseemos a excepcioacuten de la extensioacuten que deberaacute ser necesariamente htm oacute html

2 Para visualizar nuestro documento HTML abriremos el documento con el programa navegador

Reglas de formato Todos los navegadores usan unas reglas baacutesicas para poder mostrar una paacutegina web con un buen formato

bull El espacio en blanco es ignorado Ya que un documento HTML puede estar en cualquier tipo de fuente y ademaacutes la ventana del navegador puede ser de cualquier tamantildeo

bull Las etiquetas pueden ser escritas en mayuacutesculas o en minuacutesculas En todo caso se aconseja su escritura en mayuacutesculas para poder distinguirlas del texto normal

bull Existe normalmente una etiqueta de inicio y otra de fin La etiqueta de fin contendraacute el mismo texto que la de inicio antildeadieacutendole al principio una barra inclinada La etiqueta afectaraacute por tanto a todo lo que esteacute incluido entre las etiquetas de inicio y fin No obstante existen algunas que no necesitan cierre ya que en estas etiquetas se presupone su final como por ejemplo ltPgt paacuterrafo ltBRgt salto de liacutenea oacute ltIMGgt inclusioacuten de una imagen

Vemos un ejemplo en la Tabla 1

Instruccioacuten HTML Resultado

ltBgtTexto en negritaltBgt Texto en negrita

ltHIgtTexto en cursivaltIgt Texto en cursiva

ltBgtltIgtTexto en negrita y cursivaltBgtltIgt Texto en negrita y cursiva

Tabla 1

copy Grupo EIDOS 1 Introduccioacuten al HTML

9

Estructura de un documento HTML La estructura baacutesica de un documento HTML es la siguiente

ltHTMLgt Indica el inicio del documento ltHEADgt Indica el inicio de la cabecera

ltTITLEgt Inicio del tiacutetulo del documento

ltTITLEgt Final del tiacutetulo del documento

ltHEADgt Final de la cabecera ltBODYgt Inicio del cuerpo del documento Instrucciones HTML ltBODYgt Final del cuerpo del documento ltHTMLgt Final del documento

Ninguno de estos elementos es obligatorio pudiendo crear documentos HTML sin incluir estas etiquetas de identificacioacuten No obstante es altamente recomendable la construccioacuten de paacuteginas HTML siguiendo esta estructura para una buena estructuracioacuten y legibilidad del coacutedigo

Nuestra primera paacutegina HTML Una vez que conocemos la estructura baacutesica de un documento HTML vamos a crear una paacutegina HTML muy sencillita

1 Lo primero seraacute abrir el procesador de textos que hayamos elegido y copiar el Coacutedigo fuente 1

ltHTMLgtltHEADgtltTITLEgt Mi primera paacutegina HTML ltTITLEgtltHEADgtltBODYgtEsta es mi primera paacutegina ltBgtHTMLltBgtltBODYgtltHTMLgt

Coacutedigo fuente 1

2 Una vez tecleado el coacutedigo guardamos el documento como Pagina1htm y procedemos a

abrirlo con el navegador correspondiente El resultado seraacute

Esta es mi primera paacutegina HTML

Lenguaje HTML copy Grupo EIDOS

10

Forma del URL El URL(Uniform Resource Locator) nos van a permitir localizar y acceder a cualquier recurso de la red desde nuestro programa navegador A traveacutes de los URL podremos referenciar cualquier fichero que deseemos incluir en nuestro documento HTML Cada elemento de Internet vendraacute definido por su URL correspondiente independientemente del tipo de servidor en el que se encuentre

La forma general del URL es

Tipo de servicio maquinadominiopuertocaminoarchivo

El Tipo de servicio como su propio nombre indica hace referencia a alguno de los servicios de Internet El servicio correspondiente al WWW es http (HiperText Transport Protocol) protocolo para la transmisioacuten de hipertexto Por lo que cualquier referencia a un documento HTML deberiacutea comenzar por http Otros servicios son ftp news telnet o mailto

La maacutequinadominio indica el nombre del servidor en que se encuentra el documento al que estamos haciendo referencia junto con el dominio al que pertenece dicho servidor

El puerto es opcional y lo normal es no ponerlo indicaacutendose soacutelo en el caso de que el servidor utilice un puerto distinto al puerto por defecto

El camino indica la ruta de directorios que hay que seguir para encontrar el documento que estamos referenciando

Finalmente especificaremos el nombre del archivo en que estaacute guardado el documento en cuestioacuten Si no indicamos un archivo accederemos al archivo por defecto del directorio al que estemos referenciando(En el caso del servicio http este archivo por defecto suele ser defaulthtm oacute defaulthtml)

Vamos a ver a continuacioacuten algunos ejemplos de URL s accediendo a distintos servicios de la WWW

Localizando un documento hypertexto (http) Sintaxis

httpmaquinadominiopuertocaminoarchivo

Ejemplo1 httpwwweidoses

En este ejemplo estamos indicando el servicio al que estamos accediendo (http) la maacutequina y el dominio tomaacutendose el resto de paraacutemetros por defecto de forma que accederemos al directorio raiacutez del servidor y al documento por defecto de ese directorio en este caso estamos accediendo a la paacutegina de portada de Villa Eidos

Ejemplo2 httpwwweidosesvulcaninformahtm

Con esta URL estamos accediendo al fichero informahtm que se encuentra en el directorio vulcan del servidor wwweidoses

copy Grupo EIDOS 1 Introduccioacuten al HTML

11

Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol) Sintaxis

ftpmaquinadominiopuertocaminoarchivo

Ejemplo ftp ftpjetespubauto_ftp

En este caso estamos accediendo al servicio ftp (protocolo de transferencia de archivos) ftpjetes En este caso no estamos indicando ninguacuten archivo con lo que se referenciaraacute un iacutendice con los contenidos del directorio pubauto_ftp

Accediendo a un grupo de noticias (news) Sintaxis

newsGRUPO

Ejemplo newsjetes

En este ejemplo estamos accediendo al grupo de noticias del servidor de news jetes

Accediendo a una direccioacuten e-mail (mailto) Sintaxis

mailto Destinatario_1 Destinatario_2Destinatario_n

Ejemplo mailtocursoseidoses

Enviaraacute un mail a la direccioacuten de correo electroacutenico indicada

Localizacioacuten de un archivo cualquiera (file) Sintaxis

filemaquinadominiopuertocaminoarchivo

Ejemplo filecwindows

En este caso estamos accediendo a la carpeta Windows de la unidad C de nuestro ordenador local

Cabecera y cuerpo del documento HTML

Cabecera Cabecera del documento HTML ltHEADgt

ltHEADgt

En la cabecera de un documento HTML incluiremos las definiciones generales que afecten a todo el documento como por ejemplo el tiacutetulo de la paacutegina que apareceraacute en la parte superior de la ventana del navegador

Las etiquetas ltHEADgt y ltHEADgt son las que van a delimitar la cabecera de nuestro documento Todas la etiquetas de la cabecera son opcionales aunque se recomienda incluir en todos nuestros documentos la etiqueta ltTITLEgt correspondiente al tiacutetulo del documento

A continuacioacuten vamos a tratar cada uno de los posibles componentes de la cabecera por separado

Tiacutetulo del documento ltTITLEgtltTITLEgt

El tiacutetulo de nuestro documento viene especificado por las etiquetas ltTITLEgt y ltTITLEgt y como ya hemos mencionado este tiacutetulo es el que apareceraacute en la ventana de nuestro programa

Lenguaje HTML copy Grupo EIDOS

14

navegador Lo normal y recomendable es que el tiacutetulo guarde relacioacuten con el contenido de nuestro documento ya que por ejemplo es utilizado por algunos servidores de buacutesqueda para poder intuir el contenido de nuestro documento Veamos un ejemplo en el Coacutedigo fuente 2

ltTITLEgtMi primera paacutegina WebltTITLEgt

Coacutedigo fuente 2

Indicador de refresco del documento ltMETA http-equiv=refresh content=nuacutemero_segundosurl=URL derefrescogt

Esta etiqueta sirve para indicar un documento que deberaacute sustituir al actual transcurrido un nuacutemero determinado de segundos Una posible utilidad de esta etiqueta podriacutea ser para visualizar documentos de forma secuencial de forma que se empieza por un documento y se pasa al siguiente transcurrido un periacuteodo de tiempo sin necesidad de que la persona que lee el documento realice ninguna accioacuten

Veamos un ejemplo en el Coacutedigo fuente 3

ltMETA http-equiv=refresh content=5url=httpwwweidosesgt

Coacutedigo fuente 3

Si insertamos esta instruccioacuten en la cabecera de nuestro paacutegina HTML transcurridos 5 segundos eacutesta se refrescaraacute con la paacutegina Web de portada de Villa Eidos

Indicador de la URL base del documento ltBASE href=URLgt

Con esta etiqueta indicamos la localizacioacuten de los ficheros a los que se hace referencia en nuestra paacutegina Web Si no incluimos esta etiqueta el navegador entenderaacute que dichos ficheros se encuentran en el mismo lugar donde reside nuestra paacutegina Web

Vemos un ejemplo en el Coacutedigo fuente 4

ltBASE href=httpwwweidosesvulcangt

Coacutedigo fuente 4

Si especificamos como URL base de nuestro documento HTML la indicada en este ejemplo y posteriormente hacemos referencia en nuestra paacutegina a un fichero llamado aulahtm se entenderaacute que la localizacioacuten del fichero es httpwwweidosesvulcanaulahtm

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

15

Cuerpo Cuerpo del documento HTML ltBODYgt

ltBODYgt

En el cuerpo de un documento HTML es donde incluiremos las distintas instrucciones del lenguaje junto con el contenido en siacute de nuestra paacutegina Web textos imaacutegenes enlaces a otras paacuteginas etc

Las etiquetas ltBODYgt y ltBODYgt son las que van a delimitar el cuerpo de nuestro documento Esta posee una serie de argumentos que nos van a permitir variar las caracteriacutesticas del documento en su conjunto como por ejemplo el color del texto o del color de fondo de nuestra paacutegina web

Antes de analizar los componentes y atributos de BODY vamos a ver como se especifican los colores en un documento HTML

Estos se pueden especificar por su nombre (name) o por su coacutedigo de color que es un nuacutemero compuesto de tres pares de cifras hexadecimales que nos indican la proporcioacuten de los colores primarios (rojo verde y azul) que forman el color deseado (rrggbb)

Nombre Coacutedigo de color Color mostrado

Black 000000 Negro

Teal 008080 Teal

Blue 0000FF Azul

Navy 000080 Azul marino

Lime 00FF00 Lima

White FFFFFF Blanco

Purple 800080 Puacuterpura

Yellow FFFF00 Amarillo

Olive 808000 Oliva

Red FF0000 Rojo

maroon 800000 Marroacuten

gray 808080 Gris

fuchsia FF00FF Fucsia

green 008000 Verde

Lenguaje HTML copy Grupo EIDOS

16

silver C0C0C0 Plata

aqua 00FFFF Agua

Tabla 2

La etiqueta ltBODYgt presenta una serie de atributos que van a afectar a todo el documento en su conjunto Estos atributos nos van a permitir definir los colores del texto del fondo y de los hiperenlaces del documento Incluso nos permitiraacuten insertar una imagen de fondo en nuestra paacutegina

ltBODY background=URL bgcolor=rrggbb oacute name text=namelink=name vlink=name gt

bull background=URL Nos va a permitir mostrar una imagen como fondo de nuestro

documento HTML El camino a esta imagen vendraacute especificado por la URL que definamos Si la imagen no rellena todo el fondo del documento eacutesta seraacute reproducida tantas veces como sea necesario hasta completar todo el fondo

Si insertas el Coacutedigo fuente 5 en el documento HTML que creamos como ejemplo en el capiacutetulo anterior Pagina1htm este presentaraacute como fondo la imagen fondogif

ltBODY background=fondogifgt

Coacutedigo fuente 5

bull bgcolor=rrggbb oacute name bgcolor Background Color Nos va a permitir definir un

color para el fondo de nuestro documento Este atributo seraacute ignorado si previamente hemos utilizado el atributo background

Inserte el Coacutedigo fuente 6 en Pagina1htm y compruebe el resultado

ltBODY bgcolor=bluegt

Coacutedigo fuente 6

bull text=rrggbb oacute name Nos permitiraacute definir un color para el texto de nuestro

documento Por defecto es negro Inserte el Coacutedigo fuente 7 en Pagina1html y compruebe el resultado

ltBODY text=redgt

Coacutedigo fuente 7

Y ahora inserte el Coacutedigo fuente 8 en el documento y comprueba el resultado

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

17

ltBODY bgcolor=yellow text=navygt

Coacutedigo fuente 8

bull link=rrggbb oacute name Indica el color que tendraacuten los hiperenlaces que no han sido

accedidos Por defecto es azul Como todaviacutea no sabemos insertar hiperenlaces en nuestro documento vamos a dejar el ejemplo correspondiente para maacutes adelante

bull vlink=rrggbb oacute name vlink Visited Links Indica el color de los hiperenlaces que ya han sido accedidos Por defecto es puacuterpura

Caracteres especiales Hasta ahora hemos escrito algunos ejemplos de coacutedigo HTML pero hemos pasado por alto algunas limitaciones de HTML respecto al uso de caracteres especiales Una de estas limitaciones es por ejemplo el uso de los caracteres lt y gt que como ya sabemos indican el inicio y fin de una etiqueta HTML Pues bien si quisieacuteramos escribir estos caracteres como parte normal de un texto el navegador no sabriacutea si se trata de texto normal o del comienzo y final de una etiqueta o sea que se hariacutea un liacuteo

Como todo tiene solucioacuten existen unos coacutedigos para poder escribir estos caracteres y otros relacionados con las etiquetas los vemos en la Tabla 3

Siacutembolo Coacutedigo

lt (menor que) amplt

gt (mayor que) ampgt

amp (ampersand) ampamp

(comillas) ampquot

Tabla 3

Para las letras especiacuteficas del idioma castellano las vocales acentuadas la ntilde la uuml y los signos iquest y iexcl existen los coacutedigos que muestra la Tabla 4

Letra Coacutedigo Letra Coacutedigo Letra Coacutedigo

aacute ampaacute Aacute ampAacute ntilde ampntilde

eacute ampeacute Eacute ampEacute Ntilde ampNtilde

iacute ampiacute

Iacute ampIacute

uuml ampuuml

Lenguaje HTML copy Grupo EIDOS

18

oacute ampoacute Oacute ampOacute Uuml ampUuml

uacute ampuacute Uacute ampUacute iquest amp191

iexcl amp161

Tabla 4

Para los navegadores actuales podemos escribir nuestro coacutedigo HTML de manera directa sin tener en cuenta estos coacutedigos pero nunca podemos asegurar que las personas que accedan a nuestras paacuteginas con otros navegadores puedan leerlas correctamente Asiacute que los maacutes adecuado es el empleo de los mismos Otros siacutembolos especiales aparecen en la Tabla 5

Siacutembolo Coacutedigo

Ccedil ampccedil

Ccedil ampCcedil

copy ampcopy

reg ampreg

Tabla 5

Veamos un ejemplo en el Coacutedigo fuente 9

ampquotLa inspiraciampoacuten existe pero tiene que encontrarse trabajandoampquotampcopy Pablo Ruampiacutez Picasso

Coacutedigo fuente 9

Esta instruccioacuten HTML deberiacutea producir el siguiente resultado

La inspiracioacuten existe pero tiene que encontrarse trabajando copyPablo Ruiacutez Picasso

Para la inclusioacuten de comentarios en nuestra paacutegina HTML podemos usar la etiqueta lt-- --gt Estos comentarios nos podraacuten servir para efectuar anotaciones en nuestro documento HTML que ayuden a una mayor comprensioacuten del coacutedigo En el Coacutedigo fuente 10 se muestra un ejemplo de comentario

lt-- Esto es un comentario y no seraacute mostrado por el navegador --gt

Coacutedigo fuente 10

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

19

Espaciado y saltos de liacutenea En HTML soacutelo se admite un uacutenico espacio en blanco separando cualquier elemento o texto el resto de espacios seraacuten ignorados por el navegador al igual que las tabulaciones retornos de carro etc Veamos un ejemplo en la Tabla 6

Ejemplo Resultado

Esta frase no se veraacute asiacute en el visor Esta frase no se veraacute asiacute en el visor

Tabla 6

No obstante siacute podremos dar el formato que deseemos a nuestras paacuteginas con el empleo de los siguientes elementos del lenguaje HTML

Inclusioacuten de espacios en blanco ampnbsp Nos permitiraacute la inclusioacuten de maacutes de un espacio en blanco entre dos textos consecutivos de forma que estos espacios se muestren de forma efectiva en el navegador Tendremos que incluir tantas expresiones ampnbsp como espacios en blanco se deseen incluir

Ejemplo Resultado

Texto1ampnbspampnbspampnbspampnbspTexto2 Texto1 Texto2

Tabla 7

Salto de liacutenea ltBRgt BR Break Nos permite dar un salto a la liacutenea siguiente en el punto donde la etiqueta sea insertada

Ejemplo Resultado

Esta frase tiene aquiacuteltBRgt un salto de liacutenea Esta frase tiene aquiacute un salto de liacutenea

Tabla 8

Cambio de paacuterrafo ltPgt P Paragraph Permite definir un paacuterrafo introduciendo normalmente un espacio de separacioacuten de dos liacuteneas con el texto siguiente al punto donde hayamos insertado la etiqueta ltPgt

Lenguaje HTML copy Grupo EIDOS

20

Ejemplo Resultado

Esta frase tiene aquiacuteltPgt un cambio de paacuterrafo Esta frase tiene aquiacute

un cambio de paacuterrafo

Tabla 9

La etiqueta de fin paacuterrafo ltPgt es opcional no siendo necesario incluirla Aunque siempre es recomendable delimitar claramente el inicio y final de un paacuterrafo Ademaacutes cuando usemos esta etiqueta como cerrada ltPgt ltPgt tenemos la posibilidad de incluirle el atributo align el cual indica al navegador la forma de justificar el texto incluido en el paacuterrafo El formato seriacutea el siguiente

ltP align= left right center justify gtTexto contenido en elpaacuterrafo ltPgt

Veamos algunos ejemplos en la Tabla 10

Ejemplo Resultado

ltP align=rightgtEste es un ejemplode paacuterrafo alineado a laderechaltPgt

Este es un ejemplo de paacuterrafo alineado a la derecha

ltP align=centergtEste es unejemplo de paacuterrafo centradoltPgt

Este es un ejemplo de paacuterrafo centrado

Tabla 10

Liacutenea Horizontal ltHRgt HR Horizontal Rule Nos permite insertar una liacutenea horizontal cuyo tamantildeo podremos determinar a traveacutes de sus atributos Si no especificamos ninguacuten atributo dibujaraacute una liacutenea que ocupe el ancho de la pantalla del navegador Su utilidad es la de permitirnos dividir nuestra paacutegina en distintas secciones No seraacute necesaria la etiqueta de fin ltHRgt

El formato de la etiqueta con sus posibles atributos es

ltHR align= left right center noshade size=n width=n gt

bull align= left right center Permite establecer la alineacioacuten de la liacutenea a la izquierda a la derecha o centrarla

bull noshade No muestra la sombra de la liacutenea evitando el efecto de tres dimensiones

bull size=n Indica el grosor de la liacutenea en pixels

bull width=n oacute n Especificaraacute el ancho de la liacutenea este se podraacute especificar en pixels (n) o en tanto por ciento del ancho de la ventana (n) Vamos a ver algunos ejemplos en la Tabla 11

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

21

Ejemplo Resultado

ltHRgt

ltHR size=3 noshadegt

ltHR size=5width=50align=rightgt

ltHR size=10width=50align=centergt

Tabla 11

Texto preformateado ltPREgt PRE Preformatted Nos permitiraacute visualizar el texto tal y como se ha escrito respetando los saltos de liacutenea las tabulaciones y espacios en blanco de todo el texto incluido entre las etiquetas ltPREgt y ltPREgt

El texto se mostraraacute con una fuente de espaciado fijo maacutes pequentildea que el texto normal No es recomendable su uso ya que presenta muchas limitaciones y no se obtiene una buena presentacioacuten

Ejemplo Resultado

ltPREgtEste texto estaacutepreformateadoltPREgt

Este texto estaacute preformateado

Tabla 12

Elementos del lenguaje I

Cabeceras y atributos de texto

Cabeceras ltH1gtltH6gt H Heading En un documento HTML podemos incluir seis tipos distintos de cabeceras que van a constituir normalmente el tiacutetulo y los distintos subapartados que forman el documento aunque podremos utilizarlas en el punto que queramos del documento para resaltar cualquier texto Estas cabeceras son definidas por las etiquetas ltH1gtltH2gtltH3gtltH4gtltH5gt y ltH6gt El texto que componga cada cabecera deberaacute estar incluido entre las etiquetas de inicio (ltHngt) y fin (Hn) correspondiente La cabecera ltH1gtseraacute la que muestre el texto de mayor tamantildeo este tamantildeo iraacute disminuyendo hasta llegar a la cabecera ltH6gt Como podemos ver en la Tabla 13 Para alinear las cabeceras utilizamos el atributo align El formato seriacutea ltHn align=centergt como muestra la Tabla 14

Ejemplo Resultado

ltH1gtCabecera 1ltH1gt Cabecera 1 ltH2gtCabecera 2ltH2gt Cabecera 2

Lenguaje HTML copy Grupo EIDOS

24

ltH3gtCabecera 3ltH3gt Cabecera 3

ltH4gtCabecera 4ltH4gt Cabecera 4

ltH5gtCabecera 5ltH5gtCabecera 5

ltH6gtCabecera 6ltH6gtCabecera 6

Tabla 13

Ejemplo Resultado

ltH5 align=centergtCabecera 5ltH5gtCabecera 5

Tabla 14

Atributos del texto Al texto de nuestro documento HTML le podemos aplicar distintos atributos (negrita cursiva subrayado etc) al igual que hacemos cuando trabajamos con el procesador de textos en la edicioacuten de nuestros documentos Para aplicar estos atributos disponemos de distintas etiquetas que aplicaraacuten su efecto al texto incluido entre sus indicadores de inicio y fin Las vemos en la Tabla 15

Atributo Etiqueta Ejemplo Resultado

Negrita ltBgtltBgtltBgtTexto ennegritaltBgt

Texto en negrita

Cursiva ltIgtltIgtltIgtTexto encursivaltIgt

Texto en cursiva

Teletype ltTTgtltTTgtltTTgtTexto en modoteletypeltTTgt

Texto en modoteletype

Subrayado ltUgtltUgt ltUgtTexto subrayadoltUgt Texto subrayado Tachado ltSgtltSgt ltSgtTexto tachadoltSgt Texto tachado

Parpadeo ltBLINKgtltBLINKgtltBLINKgtTextoparpadeandoltBLINKgt

Texto parpadeando

Superiacutendice ltSUPgtltSUPgt ltSUPgtTexto en modosuperiacutendiceltSUPgt

Texto en modo superiacutendice

Subiacutendice ltSUBgtltSUBgtltSUBgtTexto en modosubiacutendiceltSUBgt

Texto en modo subiacutendice

Centrado ltCENTERgtltCENTERgt

ltCENTERgtTextocentradoltCENTERgt

Texto centrado

B Bold I Italic TT Teletype U Underlined S Strike SUP Superscript SUB Subscript

Tabla 15

copy Grupo EIDOS 3 Elementos del lenguaje I

25

Alguna de estas etiquetas no es reconocida por determinados navegadores Asiacute por ejemplo la etiqueta ltBLINKgt (Parpadeo) no es implementada por el Explorer Por lo que seguacuten el explorador que estemos utilizando podremos ver el resultado correctamente o no

Existen otras etiquetas que nos van a servir para especificar de manera diferenciada unidades loacutegicas de nuestro documento HTML tales como citas direcciones de correo etc En algunos casos el formato obtenido con estas etiquetas de estilo loacutegico va a ser el mismo que con las anteriores a las que se les denomina tambieacuten etiquetas de estilo fiacutesico Algunas etiquetas de estilo loacutegico las vemos en la Tabla 16

Etiqueta Ejemplo Resultado

ltSTRONGgtltSTRONGgtltSTRONGgtEspecifica textoresaltado (igualltBgt)ltSTRONGgt

Especifica texto resaltado(igual ltBgt)

ltCITEgtltCITEgtltCITEgtIndica una cita otiacutetulo (igual ltIgt)ltCITEgt

Indica una cita o tiacutetulo (igualltIgt)

ltSTRIKEgtltSTRIKEgtltltSTRIKEgtTexto tachado(igual ltSgt)ltSTRIKEgt

Texto tachado (igual ltSgt)

Tabla 16

Si queremos aplicar efectos maacutes espectaculares a nuestro documento HTML debemos variar el tamantildeo el color y el tipo de letra del texto La etiqueta que nos permite todo esto es ltFONTgtltFONTgt por medio de sus atributos size color y face

ltFONT size=n oacute +- n color=rrggbb oacute name face=nombre defont gt

bull size=n oacute +- n El atributo size nos permite especificar un tamantildeo determinado

para la fuente del texto incluido entre las etiquetas de inicio y fin el cual puede estar entre 1 y 7 El texto de tamantildeo normal equivale a la fuente de tamantildeo 3 (fuente base) Por tanto si especificamos size=+2 el tamantildeo de la fuente seraacute 5 Y si especificamos size= -1 el tamantildeo seraacute 2

Ejemplo Resultado

ltFONT size=2gtTamantildeo 2ltFONTgtTamantildeo 2

ltFONT size=+2gtTamantildeo 5 (3+2)ltFONTgt Tamantildeo 5 (3+2)

ltFONT size=-1gtTamantildeo 2 (3-1)ltFONTgtTamantildeo 2 (3-1)

Tabla 17

bull color=rrggbb oacute name Nos va a permitir definir el color que tendraacute el texto

incluido entre las etiquetas Tabla 18

Lenguaje HTML copy Grupo EIDOS

26

Ejemplo Resultado

ltFONT color=redgtTexto de colorrojoltFONTgt

Texto de color rojo

ltFONT color=bluegtTexto de colorazulltFONTgt

Texto de color azul

ltFONT size=5 color=008000gtTextoverde y de tamantildeo 5ltFONTgt

Texto verde y detamantildeo 5

Tabla 18

bull face=nombre de font Nos va a permitir escribir texto con el tipo de letra que le

especifiquemos En el caso de que el tipo de letra que le hayamos especificado no esteacute cargada en el ordenador que lee la paacutegina se usaraacute el font por defecto del navegador

Ejemplo Resultado

ltFONT face=TahomagtTipo de letraTahomaltFONTgt

Tipo de letra Tahoma

ltFONT size=4 color=blueface=TahomagtTexto azul de tamantildeo4 y TahomaltFONTgt

Texto azul de tamantildeo 4 y Tahoma

Tabla 19

Listas Podemos representar elementos en forma de lista dentro de nuestros documentos de una forma muy sencilla y con una gran versatilidad Estas listas podraacuten incluir cualquiera de los elementos HTML e incluso podemos definir listas anidadas es decir listas dentro de listas HTML nos permite crear tres tipos distintos de listas

bull Listas no numeradas

bull Listas numeradas

bull Listas de definiciones

Listas no numeradas ltULgt UL Unordered List

Con este tipo de listas podemos especificar una serie de elementos sin un orden predeterminado precedidos de una marca o vintildeeta que nosotros mismos podemos definir Para la definicioacuten de los liacutemites de la lista utilizaremos la etiqueta ltULgt ltULgt y para determinar cada uno de los elementos que la componen usaremos la etiqueta ltLIgt El formato es el siguiente

ltUL type=disk oacute circle oacute squaregtltLHgtTiacutetulo de la listaltLHgt

copy Grupo EIDOS 3 Elementos del lenguaje I

27

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltULgtLH List Head LI List Item

Con el atributo type vamos a especificar el tipo de marca o vintildeeta que antecederaacute a cada uno de los elementos de la lista Estas marcas podraacuten ser un disco (disk) un ciacuterculo (circle) o un cuadrado (square) La etiqueta ltLHgt nos va a servir para especificar un posible tiacutetulo de la lista siendo esta opcional Vamos a ver algunos ejemplos en la Tabla 20

Ejemplo Resultado

ltUL type=circlegtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAfricaltLIgtAmeacutericaltLIgtOceaniacutea

ltULgt

Los cinco continentes

Europa

Asia

Aacutefrica

Ameacuterica

Oceaniacutea

ltUL type=squaregtltLIgtEuropaltLIgtAsialtLIgtAfricaltLIgtAmeacutericaltUL type=circle gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltULgtltLIgtOceaniacutea

ltULgt

Europa

Asia

Aacutefrica

Ameacuterica

Ameacuterica del Norte

Ameacuterica del Sur

Oceaniacutea

Tabla 20

Listas numeradas ltOLgt OL Ordered List

Con este tipo de listas podemos especificar una serie de elementos numerados seguacuten el lugar que ocupan en la lista Para la definicioacuten de los liacutemites de la lista utilizaremos la etiqueta ltOLgt ltOLgt y para determinar cada uno de los elementos que la componen usaremos la etiqueta ltLIgt El formato es el siguiente

ltOL start=n type=Tipo de listagtltLHgtTiacutetulo de la listaltLHgt

Lenguaje HTML copy Grupo EIDOS

28

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltOLgt

Con el atributo start vamos a especificar el nuacutemero por el que va a empezar la lista Si no indicamos este argumento la lista empezaraacute a numerarse a partir del 1 Con el atributo type vamos a especificar el tipo de lista numerada Sus posibles valores aparecen a continuacioacuten y veremos algunos ejemplos en la Tabla 21

A Letras mayuacutesculas (A B C )

a Letras minuacutesculas (a b c )

I Nuacutemeros romanos en mayuacutesculas (I II III IV )

i Nuacutemeros romanos en minuacutesculas (i ii iii iv )

1 Numeacutericamente (1 2 3 4 ) (es la numeracioacuten por defecto y por tanto no habriacutea que indicarla)

Ejemplo Resultado

ltOL type=AgtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltLIgtOceaniacutea

ltOLgt

Los cinco continentes

A Europa

B Asia

C Aacutefrica

D Ameacuterica

E Oceaniacutea

ltOL type=I start=2gtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltOL type=i gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltOLgtltLIgtOceaniacutea

ltOLgt

II Europa

III Asia

IV Aacutefrica

V Ameacuterica

i Ameacuterica del Norte

ii Ameacuterica del Sur

VI Oceaniacutea

Tabla 21

copy Grupo EIDOS 3 Elementos del lenguaje I

29

Listas de definiciones ltDLgt DL Definition List

Estas listas nos van a servir para especificar una serie de teacuterminos y sus definiciones correspondientes Para la definicioacuten de la lista usaremos la etiqueta ltDLgt ltDLgt para especificar los teacuterminos usaremos la etiqueta ltDTgt y para especificar la definicioacuten correspondiente a cada teacutermino usaremos la etiqueta ltDDgt El formato es el siguiente

ltDLgtltLHgtTiacutetulo de la listaltLHgtltDTgtTeacutermino 1ltDDgtDefinicioacuten 1ltDTgtTeacutermino 2ltDDgtDefinicioacuten 2

ltDTgtTeacutermino nltDDgtDefinicioacuten n

ltDLgtDT Definition Term DD Definition Description

Vamos a ver un ejemplo en la Tabla 22

Ejemplo Resultado

ltDLgtltDTgtPariacutesltDDgtCapital de FrancialtDTgtRomaltDDgtCapital de ItalialtDTgtMadridltDDgtCapital de Espantildea

ltDLgt

Pariacutes

Capital de Francia

Roma

Capital de Italia

Madrid

Capital de Espantildea

Tabla 22

Hiperenlaces Los hiperenlaces son enlaces de hipertexto que nos van a permitir acceder de manera directa a otros documentos HTML independientemente de su ubicacioacuten o a otras zonas dentro de nuestro propio documento

Enlaces a otras paacuteginas ltA href=gt Con este tipo de hiperenlaces vamos a poder acceder tanto a otras paacuteginas que esteacuten ubicadas dentro de nuestro propio sistema como a paacuteginas ubicadas en puntos muy distantes del globo El formato de este tipo de hiperenlaces es

ltA href=URL a la que se accedegtTexto del hiperenlaceltAgt

Lenguaje HTML copy Grupo EIDOS

30

Con el atributo href vamos a especificar la URL del documento al que se pretende acceder El texto contenido entre las etiquetas de comienzo y fin nos va a servir para definir el hiperenlace por lo que deberiacutea ser clarificador del contenido del documento con el que vamos a enlazar Esta definicioacuten apareceraacute resaltada normalmente en azul y subrayada En la mayoriacutea de los navegadores esta definicioacuten del hiperenlace es sensible por lo que cuando el cursor pasa por encima del mismo este cambia de aspecto indicaacutendolo

Veamos un ejemplo en la Tabla 23

Ejemplo Resultado

ltA href=httpwwweidosesgtPaacutegina inicialde Villa EidosltAgt

Paacutegina inicial de Villa Eidos

Tabla 23

Si situamos el ratoacuten encima del hiperenlace y pulsamos el navegador accederaacute a la paacutegina Web indicada por href es decir accederaacute a la paacutegina situada en httpwwweidoses

Igualmente podriacuteamos indicar el hiperenlace por medio de una imagen Si esta imagen tiene definido un borde este apareceraacute resaltado en color azul El formato correspondiente seriacutea

ltA href=URL a la que se accedegtltIMG src=Imagengt y tambieacutentextoltAgtIMG Image src Source

Veamos un ejemplo en la Tabla 24

Ejemplo Resultado

ltA href=httpwwweidosesgtltIMGsrc=IconogifgtltAgt Villa Eidos Villa Eidos

Tabla 24

Si pulsamos sobre la imagen el navegador accederaacute a la paacutegina Web inicial de Villa Eidos

Enlaces dentro de la misma paacutegina ltA name=gt Este tipo de hiperenlaces nos va a permitir marcar distintas zonas del documento activo con el objeto de tener un acceso directo a las mismas Una buena utilidad de este tipo de enlaces radica en la creacioacuten de iacutendices para documentos largos de forma que si pinchamos en el hiperenlace correspondiente al tiacutetulo de un capiacutetulo determinado el navegador saltaraacute automaacuteticamente hasta el comienzo de dicho capiacutetulo

Para la creacioacuten de estos hiperenlaces debemos seguir dos pasos

copy Grupo EIDOS 3 Elementos del lenguaje I

31

1 Marcar las distintas zonas o secciones del documento Esto lo haremos con el paraacutemetro name

ltA name=Identificador de seccioacutengtTexto de laseccioacutenltAgt

A cada seccioacuten le asignaremos un identificador distinto para poder referenciarlas posteriormente de manera inequiacutevoca

2 Especificar un enlace a cada una de las secciones que hayamos definido ltA href=Identificador de seccioacutengtTexto del enlace a laseccioacutenltAgt

Si pinchamos en este enlace el navegador saltaraacute automaacuteticamente a la seccioacuten correspondiente Veamos un ejemplo sencillito en la Tabla 25 pero demostrativo de todo lo que acabamos de explicar

Ejemplo Resultado

ltA href=Cap1gtCapiacutetulo1ltAgtltA name=Cap1gtCapiacutetulo 1ltAgt

Capiacutetulo 1

Capiacutetulo 1

Tabla 25

Si nos creamos una paacutegina HTML con distintos capiacutetulos podriacuteamos crear una seccioacuten para cada uno de ellos de forma que si pinchamos en el hiperenlace correspondiente al Capiacutetulo 1 el navegador saltariacutea directamente a la seccioacuten correspondiente al Capiacutetulo 1

Ademaacutes de los dos tipos de hiperenlaces vistos podemos crear hiperenlaces que nos permitan acceder a cualquiera de los servicios de Internet Es decir podriacuteamos indicar enlaces a servidores FTP GOPHER NEWS MAILTO etc Para ello tendriacuteamos que indicar la URL correspondiente al servicio al cual queremos acceder como ya vimos en el primer capiacutetulo de este manual

Imaacutegenes

Podremos dar un aspecto mucho maacutes vistoso a nuestros documentos HTML con la inclusioacuten de imaacutegenes Los formatos de imagen que todos los navegadores reconocen son gif y jpg Si queremos insertar una imagen en otro formato el visor deberiacutea disponer del programa externo que permita su visualizacioacuten De todas formas una buena solucioacuten es utilizar alguacuten programa de tratamiento de imaacutegenes que nos convierta la imagen a uno de los formatos mencionados anteriormente

El formato gif es maacutes recomendado para la inclusioacuten de iconos graacuteficas y el formato jpg para el caso de insertar fotografiacuteas en nuestras paacuteginas

Lenguaje HTML copy Grupo EIDOS

32

La etiqueta que nos va a permitir la insercioacuten de imaacutegenes es ltIMGgt La imagen se insertaraacute justo en el punto del documento donde coloquemos dicha etiqueta pudiendo insertar imaacutegenes dentro de listas tablas o formularios

El formato de la etiqueta con sus posibles argumentos es el siguiente

ltIMG src=URL de la imagen alt=Texto alternativoalign=topmiddlebottonleftrigth border=Tamantildeoheight=Tamantildeo width=Tamantildeo hspace=margen vspace=margengt

bull src=URL de la imagen El atributo src nos va servir para indicar la URL de la imagen que

queremos insertar es decir el servidor y camino hasta llegar al fichero de la imagen

No seraacute necesario que la imagen que queremos insertar en nuestro documento esteacute en el ordenador local aunque siacute es recomendable ya que el acceso a las mismas puede ser maacutes lento

Por tanto es una buena praacutectica copiar todas las imaacutegenes que vayamos a incluir en nuestro documento HTML al ordenador local

Tabla 26

bull alt=Texto alternativo Nos va a permitir mostrar un texto alternativo para el caso en que el

navegador no sea capaz de mostrar la imagen Su uso es muy recomendable ya que cuando publiquemos nuestras paacuteginas en la WWW no sabremos desde queacute tipo de navegadores accederaacuten los internautas a nuestras paacuteginas

En la Tabla 27 vamos a ver un ejemplo

Si usas un navegador que no tiene ninguacuten problema para la visualizacioacuten de imaacutegenes desactiva temporalmente la opcioacuten de mostrar imaacutegenes prueba el ejemplo que muestra la Tabla 27 y compaacuteralo con el anterior

Tabla 27

copy Grupo EIDOS 3 Elementos del lenguaje I

33

bull align=topmiddlebotton leftrigth Nos permite indicar coacutemo se alinearaacute el texto que siga a la imagen

top alinea el texto con la parte superior de la imagen

middle con la parte central

bottom con la parte inferior

left imagen alineada a la izquierda de la paacutegina

rigth imagen alineada a la derecha de la paacutegina

Tabla 28

En el caso de que el texto que acompantildea a la imagen tenga maacutes de una liacutenea tan soacutelo la primera seraacute la que se alinearaacute seguacuten alguna de las anteriores alineaciones el resto de liacuteneas se incluiraacuten debajo de la imagen quedando un efecto bastante feo

Para solventar esto estaacuten las alineaciones LEFT (imagen alineada a la izquierda de la paacutegina) y RIGHT (imagen alineada a la derecha de la paacutegina) Las cuales permiten que la imagen se inserte dentro del paacuterrafo que la rodea produciendo un resultado mucho maacutes profesional en la integracioacuten de texto e imaacutegenes

Estas dos alineaciones no se podraacuten usar en combinacioacuten con las anteriores Veamos algunos ejemplos en la Tabla 29

Vemos como en el primer ejemplo la segunda liacutenea de texto aparece debajo de la imagen produciendo un efecto menos vistoso que en los dos ejemplos siguientes

Lenguaje HTML copy Grupo EIDOS

34

Tabla 29

bull border=Tamantildeo Permite antildeadirle un borde a la imagen del tamantildeo que le

especifiquemos

Si la imagen forma parte de un hiperenlace esta apareceraacute con un borde del color del hiperenlace Si no deseaacuteramos que aparezca este borde tendriacuteamos que especificar border=0

Tabla 30

bull height=Tamantildeo Permite especificar el alto de la imagen en puntos de pantalla

(pixels) o en del tamantildeo del documento

bull width=Tamantildeo Con este argumento especificaremos el ancho al que mostraremos la imagen en puntos de pantalla (pixels) o en del tamantildeo del documento

En el segundo de los ejemplos de la Tabla 31 el ancho de la imagen se ha extendido al 50 del total del ancho de la celda donde estaacute contenida la imagen Si pruebas este ejemplo en tu documento HTML la imagen se extenderaacute horizontalmente hasta ocupar el 50 del ancho de la paacutegina

copy Grupo EIDOS 3 Elementos del lenguaje I

35

Tabla 31

bull hspace=Margen hspace Horizontal Space Permite especificar el nuacutemero de espacios

horizontales (en puntos) que separaraacuten a la imagen de cualquier elemento que le siga o le anteceda

bull vspace=Margen vspace Vertical Space Con este argumento especificaremos el margen vertical (en puntos) que habraacute entre la imagen y cualquier otro elemento de nuestro documento

Tabla 32

Elementos del lenguaje II

Tablas HTML nos va a permitir la inclusioacuten de cualquiera de los elementos de nuestra paacutegina (texto imaacutegenes hiperenlaces listas etc) dentro de una tabla Gracias a lo cual conseguiremos dar una mayor y mejor estructuracioacuten a los contenidos de nuestros documentos Ademaacutes la definicioacuten de las tablas en HTML es muy abierta pudiendo en cualquier momento redimensionar la tabla es decir cambiar su nuacutemero de filas o de columnas cambiar el tamantildeo de alguna de sus celdas etc

La etiqueta que nos va a permitir la definicioacuten de tablas es ltTABLEgt ltTABLEgt

El formato general de la etiqueta sin ninguacuten argumento es el siguiente

ltTABLEgtltTR gt

ltTHgtContenido de la celda ltTHgtltTDgtContenido de la celda ltTDgt

ltTRgtltTABLEgt

TR Table Row TH Table Header TD Table Data

Vamos a analizar cada una de estas etiquetas de forma separada

1 ltTABLEgt ltTABLEgt Definicioacuten general de la tabla Dentro de ella definiremos las filas y columnas que la constituyen pudiendo incluso definir tablas dentro de tablas es decir tablas anidadas

Lenguaje HTML copy Grupo EIDOS

38

2 ltTRgt ltTRgt Definicioacuten de las filas de la tabla Por cada etiqueta ltTRgt que incluyamos se crearaacute una fila en la tabla No seraacute necesario indicar la etiqueta de cierre

3 ltTHgtltTHgt oacute ltTDgtltTDgt Definicioacuten de cada una de las celdas de la tabla Vemos que estas etiquetas estaacuten contenidas dentro de otra etiqueta de definicioacuten de fila de forma que por cada etiqueta ltTHgt o ltTDgt que incluyamos se crearaacute una celda dentro de la fila correspondiente La etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera es decir celdas cuyo contenido estaacute resaltado en negrita dejando la etiqueta ltTDgt para definir celdas de datos En este caso tampoco es necesario indicar las etiquetas de cierre

Todas estas etiquetas tienen sus respectivos argumentos Pero antes de analizar cada uno de ellos vamos a ver un ejemplo muy sencillito en la Tabla 33 que nos crearaacute una tabla de una sola celda (1 fila X 1 columna = 1 celda) Para ello usaremos la etiqueta de creacioacuten de tabla ltTABLEgt con el argumento border=1 (nos dibuja un borde de tamantildeo 1 alrededor de la tabla)

Ejemplo Resultado

ltTABLE border=1gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 33

Vamos ahora a analizar lo distintos argumentos que componen las etiquetas de la tabla analizaacutendolos desde lo general (la definicioacuten de la tabla) hasta lo especiacutefico (la definicioacuten de las celdas)

1 Definicioacuten de la tabla ltTABLEgt

ltTABLE border=n cellpadding=n cellspacing=n width=n oacute height=n oacute bgcolor=rrggbb oacute nombre gt

Contenido ltTABLEgt

bull border=n Si especificamos este argumento se dibujaraacute un borde alrededor de la

tabla del ancho que le indiquemos como muestra la Tabla 34

Ejemplo Resultado

Mi primera tabla ltTABLE border=4gtltTRgtltTDgtMi primera tablaltTABLEgt

Tabla 34

bull cellpadding=n Indica el espacio en puntos que separa el contenido de la celda con

el borde de la misma siendo 1 por defecto

copy Grupo EIDOS 4 Elementos del lenguaje II

39

Ejemplo Resultado

ltTABLE border=4 cellpadding=8gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 35

bull cellspacing=n Indica el espacio en puntos que separa a las celdas contenidas dentro de la tabla siendo 2 por defecto

bull width=n oacute Indica la anchura de la tabla en puntos o en en funcioacuten del ancho de la ventana del visualizador Si no indicamos este argumento el ancho de la tabla se ajustaraacute al tamantildeo del contenido de las celdas Esto es lo que ha ocurrido en el uacuteltimo ejemplo que hemos realizado Veamos un ejemplo en el Coacutedigo fuente 11 El resultado se muestra en la Tabla 36

ltTABLE border=4 width=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 11

Mi primera tabla

Tabla 36

bull height=n oacute Nos permite definir la altura de la tabla en puntos o en de la

altura de la ventana del visualizador Si indicamos este argumento lo recomendable es darlo en puntos ya que es maacutes complicado adecuarnos a la altura de la ventana del visualizador Al igual que en el caso anterior si no especificamos este argumento la altura se adecuaraacute al contenido de las celdas El Coacutedigo fuente 12 muestra un ejemplo y la Tabla 37 nos muestra el resultado

ltTABLE border=4 width=50 height=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 12

Mi primera tabla

Tabla 37

bull bgcolor= rrggbb o nombre del color Nos permite definir un color

de fondo para todas las celdas de la tabla Maacutes adelante veremos como podemos definir colores especiacuteficos para cada una de las celdas por separado

Lenguaje HTML copy Grupo EIDOS

40

Ejemplo Resultado

ltTABLE border=4 bgcolor=yellowgtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 38

2 Definicioacuten de las filas de la tabla ltTRgt

ltTR align=leftrightcenter valign=topmiddlebottombgcolor=rrggbb oacute nombregt

Antes de empezar a descifrar el significado de cada uno de los argumentos de esta etiqueta vamos a ver un ejemplo en la Tabla 39 de coacutemo se construiriacutea una tabla con dos filas (2 filas X 1 columna = 2 celdas)

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR gtltTDgtPrimera filaltTRgtltTDgtSegunda filaltTABLEgt

Segunda fila

Tabla 39

bull align=leftrightcenter Con este argumento vamos a indicar la alineacioacuten

horizontal (leftizquierda rightderecha centercentrado) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado Veamos un ejemplo en el Coacutedigo fuente 13 y su correspondiente resultado en la Tabla 40

ltTABLE border=4 width=50 gt ltTRgtltTDgtPrimera filaltTRalign=rightgtltTDgtSegunda filaltTABLEgt

Coacutedigo fuente 13

Primera fila

Segunda fila

Tabla 40

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten

vertical (toparriba middlecentrado bottomabajo) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado

copy Grupo EIDOS 4 Elementos del lenguaje II

41

bull bgcolor= rrggbb o nombre del color En este caso este argumento nos permitiraacute definir un color de fondo para todas las celdas de una fila veamos un ejemplo en la

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR bgcolor=yellowgtltTDgtPrimera

filaltTR bgcolor=greengtltTDgtSegunda

filaltTABLEgt

Segunda fila

Tabla 41

3 Definicioacuten de las celdas de la tabla ltTHgt oacute ltTDgt

ltTH oacute TD align=leftrightcenterjustifyvalign=topmiddlebottom bgcolor=rrggbb oacute nombre width=nrowspan=n colspan=ngt

Como ya explicamos anteriormente la etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera y la etiqueta ltTDgt para la creacioacuten de celdas de datos Vamos a completar nuestro ejemplo inicial antildeadieacutendole tres filas de dos celdas cada una (3 filas X 2 columnas = 6 celdas) Tabla 42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTDgtCelda 21ltTDgtCelda 22

ltTABLEgt Celda 21 Celda 22

Tabla 42

bull align=leftrightcenterjustify Con este argumento vamos a indicar la

alineacioacuten horizontal (left izquierda right derecha center centrado justifyjustificado) del contenido de cada celda por separado Su significado es el mismo que en la etiqueta ltTRgt

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten vertical (toparriba middlecentrado bottomabajo) del contenido de cada celda

bull bgcolor= rrggbb o nombre del color En este caso podremos definir un color de fondo para cada una de las celdas de manera independiente

bull width=n oacute Indica el ancho de la celda en puntos o en en funcioacuten del tamantildeo de la tabla

Lenguaje HTML copy Grupo EIDOS

42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera

1ltTHgtCabecera 2ltTR gtltTD align=rightgtCelda

11ltTD bgcolor=redgtCelda 12ltTRgtltTD

bgcolor=yellowgtCelda 21ltTDalign=centergtCelda 22ltTABLEgt

Celda 21 Celda 22

Tabla 43

bull rowspan=n Con este argumento podemos lograr que una celda concreta abarque maacutes de una fila ya sabemos que por defecto una celda ocupa una sola fila

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTD rowspan=2gtCelda

11ltTDgtCelda 12ltTRgtltTDgtCelda 22

ltTABLEgt

Celda 11 Celda 22

Tabla 44

bull colspan=n Con este argumento podemos lograr que una celda se expanda a maacutes

de una columna

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTD colspan=2

align=centergtCelda 22ltTABLEgt

Celda 22

Tabla 45

Para finalizar este tema sobre la creacioacuten de tablas vamos a ver el ejemplo que aparece en el Coacutedigo fuente 14 y su resultado en la Tabla 46

ltTABLE border=4gtltTR gtltTH colspan=3 bgcolor=redgtTiacutetuloltTR bgcolor=yellowgtltTHgtCabecera 1ltTHgtCabecera 2ltTHgtCabecera 3

copy Grupo EIDOS 4 Elementos del lenguaje II

43

ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTDgtCelda 13ltTRgtltTD rowspan=2gtCelda 21ltTD bgcolor=greengtCelda 22ltTDgtCelda 23ltTRgtltTDgtCelda 32ltTDgtCelda 33

ltTABLEgt

Coacutedigo fuente 14

Tiacutetulo

Cabecera 1 Cabecera 2 Cabecera 3

Celda 11 Celda 12 Celda 13

Celda 22 Celda 23 Celda 21

Celda 32 Celda 33

Tabla 46

Formularios El formulario es el elemento de HTML que nos va a permitir interactuar con los visitantes de nuestras paacuteginas web de forma que podemos solicitarle informacioacuten al usuario y procesarla De esta forma podremos crear en nuestras paacuteginas encuestas para solicitar la opinioacuten del visitante sobre alguacuten tema e incluso sobre el contenido de nuestra propia paacutegina web cuestionarios para evaluar la asimilacioacuten de contenidos sobre un tema concreto que se trate en la paacutegina etc

El contenido de la informacioacuten introducida por medio del formulario seraacute enviado a la direccioacuten URL donde resida el programa que se encargaraacute de procesar los datos A este tipo de programas externos se les denomina programas CGI (Common Gateway Interface)

La etiqueta HTML que nos va a permitir la creacioacuten de formularios es ltFORMgt Su formato es el siguiente

ltFORM action=URL del programa que trata el formulariomethod=postgetgt Elementos del formulario ltFORMgt

bull action=URL del programa que trata el formulario A traveacutes de este

argumento indicaremos como ya hemos mencionado la direccioacuten del fichero de programa que va a tratar la informacioacuten suministrada por el formulario

Tambieacuten podriacuteamos incluir como URL que trata el formulario una direccioacuten de correo electroacutenico Por tanto el valor de este argumento podriacutea ser action =mailto direccioacuten de correo

Nota Esta opcioacuten soacutelo funciona adecuadamente con el navegador Netscape Con el Explorer este enviacuteo dariacutea como resultado un correo en blanco Para que esta opcioacuten funcione de manera independiente del navegador que se esteacute utilizando se ha de emplear un programa externo que realice este proceso

Lenguaje HTML copy Grupo EIDOS

44

bull method=postget A traveacutes de este argumento indicaremos el meacutetodo empleado para transferir la informacioacuten generada por el formulario

Si indicamos post se produciraacute la modificacioacuten del documento destino como es el caso de enviar la informacioacuten a una direccioacuten de correo electroacutenico Mediante el meacutetodo get no se produciraacuten cambios en el documento destino

Dentro de un formulario podremos incluir cualquier texto o instruccioacuten HTML de las vistas a lo largo de los capiacutetulos anteriores ademaacutes claro estaacute de los elementos tiacutepicos de un formulario cajas de texto botones de seleccioacuten menuacutes de opciones etc Vamos a ver coacutemo se incluiraacuten estos elementos en un formulario

Entrada baacutesica de datos Para definir los distintos tipos de campos baacutesicos de entrada de datos usaremos la etiqueta ltINPUTgt

El formato es el siguiente

ltINPUT type= text password checkbox radio hidden submit image reset name=Variable value=Valor inicialgt

bull El argumento type determinaraacute el tipo de campo de entrada que estamos insertando A

continuacioacuten describiremos cada uno de ellos

bull El argumento name especifica el nombre de la variable que tomaraacute el valor introducido en el campo

bull El argumento value especifica el valor por defecto que tendraacute el campo

Vamos a continuacioacuten a describir los distintos tipos campos de entrada que vendraacuten dados por los valores del argumento type

Texto corto type=text

Con este argumento vamos a indicar que el campo a introducir seraacute un texto El formato seriacutea

ltINPUT type= text name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los nuevos atributos es

bull size=Tamantildeo Indicaremos el tamantildeo en caracteres de la ventana de introduccioacuten de texto

bull maxlength=Longitud maacutexima Indicaremos el nuacutemero maacuteximo de caracteres a introducir en el campo

Vamos a ver un ejemplo en la Tabla 47

copy Grupo EIDOS 4 Elementos del lenguaje II

45

Ejemplo Resultado

NombreltINPUT type=text name=Var1Value=Texto por defecto size=20 maxlength=25gt

Tabla 47

Claves type=password

Con este argumento indicamos que el campo a introducir seraacute una palabra clave por lo que los caracteres que se introduzcan seraacuten sustituidos por asteriscos en la visualizacioacuten por pantalla El formato es

ltINPUT type= password name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los distintos argumentos es el mismo que en el caso anterior Veamos un ejemplo en la Tabla 48

Ejemplo Resultado

ClaveltINPUT type=password name=Var2Value=tutankamon size=11 maxlength=10gt

Tabla 48

Botones de seleccioacuten type=checkbox

El checkbox es un botoacuten que presenta dos estados marcado (1) y desmarcado (0) Podremos variar su estado simplemente pinchando con el ratoacuten El formato es

ltINPUT type= checkbox name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto

Si incluimos el argumento value cuando el botoacuten esteacute marcado su variable asociada adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 49

Ejemplo Resultado

ltINPUT type=checkbox name=Var3 value=Op1 checkedgtOpcioacuten1 ltbrgtltINPUT type=checkbox name=Var4 value=Op2gt Opcioacuten 2

Tabla 49

Lenguaje HTML copy Grupo EIDOS

46

Seleccioacuten entre varias opciones type=radio

Este argumento se usa cuando hay que hacer una seleccioacuten entre varias alternativas excluyentes pudieacutendose seleccionar uacutenicamente una de las alternativas Debemos incluir una etiqueta radio por cada una de las posibles alternativas El formato es

ltINPUT type= radio name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto En este caso uacutenicamente uno de los botones de radio podraacute aparecer marcado ya que se usa para el caso de opciones excluyentes

Cuando un botoacuten esteacute seleccionado la variable asociada a la lista de botones adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 50

Ejemplo Resultado

ltINPUT type=radio name=Var5 value=Op1gtOpcioacuten1 ltbrgtltINPUT type=radio name=Var5 value=Op2checkedgt Opcioacuten 2 ltbrgtltINPUT type=radio name=Var5 value=Op3 gtOpcioacuten 3

Tabla 50

En este ejemplo la variable Var5 tendraacute el valor Op2

Campos ocultos type=hidden

Este tipo de campos no son visibles para el usuario Su uso tiene sentido en el caso de enviar alguacuten tipo de informacioacuten que no deba ser visualizada o variada por el lector de nuestra paacutegina Web El formato es

ltINPUT type= hidden name=Variable value=Valor gt

Con esta etiqueta asignariacuteamos a la Variable referenciada por name el Valor de value y se mandariacutea junto con el formulario sin que el usuario de la paacutegina se entere de nada Veamos un ejemplo en el Coacutedigo fuente 15

ltINPUT type=hidden name=Var6 value=tutankamongt

Coacutedigo fuente 15

copy Grupo EIDOS 4 Elementos del lenguaje II

47

Botoacuten de enviacuteo de datos type=submit

Con este argumento especificamos un botoacuten en el que al pulsar los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario El formato es

ltINPUT type= submit value=Mensaje a mostrargt

En este caso el paraacutemetro value indica el mensaje que se mostraraacute en el botoacuten Veamos un ejemplo en la Tabla 51

Ejemplo Resultado

ltINPUT type=submit value=Enviar los Datosgt

Tabla 51

Botoacuten graacutefico de enviacuteo de datos type=image

Con este argumento especificamos un botoacuten de tipo imagen en el que al igual que con el botoacuten anterior si pulsamos en la imagen los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario Su formato es el siguiente

ltINPUT type= image src=URL de la imagen name=Variablegt

Con el paraacutemetro src especificamos la URL de la imagen que seraacute insertada en el botoacuten En este caso en la variable referenciada por name se almacenaraacuten las coordenadas del punto de la imagen donde se halla pinchado (de forma que estas coordenadas podriacutean ser procesadas por el programa que recibe los datos del formulario)

Botoacuten de borrado de datos type=reset

Con este argumento especificamos un botoacuten que al ser pulsado borraraacute el contenido actual de todos los campos dejaacutendolos con sus valores por defecto Su formato es

ltINPUT type= reset value=Texto del botoacutengt

Con el paraacutemetro value especificamos el texto que etiquetaraacute al botoacuten

Ejemplo Resultado

ltINPUT type=reset value=Borrar datosgt

Tabla 52

Lenguaje HTML copy Grupo EIDOS

48

Entrada datos en muacuteltiples liacuteneas En un formulario tambieacuten podremos introducir un campo de texto que abarque varias liacuteneas Para ello usaremos la etiqueta ltTEXTAREAgt ltTEXTAREAgt Su formato es el siguiente

ltTEXTAREA name=Variable rows=Filas cols=ColumnasgtContenido por defectoltTEXTAREAgt

Los argumentos rows y cols nos van a permitir especificar respectivamente el nuacutemero de filas de texto visibles y el nuacutemero de columnas de texto visibles en el campo

Ejemplo Resultado

ltTEXTAREA name=Var7 rows=5 cols=40gtContenido por defectoltTEXTAREAgt

Tabla 53

Entrada de datos a traveacutes de campos de seleccioacuten Con los campos de seleccioacuten podremos desplegar una lista de opciones entre las que podremos seleccionar una Para ello usaremos la etiqueta ltSELECTgt ltSELECTgt Su formato es el siguiente

ltSELECT name=Variable multiple size=ngtltOPTION selected value=Valor_1gtPrimera OpcioacutenltOPTION value=Valor_2gtSegunda Opcioacuten

ltOPTION value=Valor_ngtEneacutesima Opcioacuten

ltSELECTgt

Figura 1

bull La variable referenciada por name tomaraacute el valor(value) de la opcioacuten seleccionada

bull Si especificamos el argumento muacuteltiple se mostraraacuten todas la opciones en forma de tabla El nuacutemero de opciones visibles en la tabla vendraacute dado por el argumento size

copy Grupo EIDOS 4 Elementos del lenguaje II

49

bull Con la etiqueta ltOPTIONgt iremos definiendo cada una de las opciones de la lista

bull El argumento selected va a determinar cuaacutel es la opcioacuten por defecto

Para finalizar vamos a ver el Coacutedigo fuente 16 correspondiente a una encuesta realizada por la editorial ficticia EditoPc y en la Figura 2 observamos el resultado del formulario

ltP align=centergtltBgtEDITORIAL ltIgtEditoPcltIgtltBgtltPgtltFORM action=mailtodireccionejemplo method = postgtNombreltINPUT type=text size=30 name=nombregtltBRgtE_mail ltINPUT type=text size=30 name=e_mailgtltPgtDeseas recibir informacioacuten sobreltINPUT type=checkbox name=infor1 value=InternetgtInternetltINPUT type=checkbox name=infor2 value=ProgramacioacutengtProgramacioacutenltINPUT type=checkbox name=infor3 value=SistOperativogtSistOperativoltINPUT type=checkbox name=infor4 value=OfimaacuteticagtOfimaacuteticaltPgtiquestTe conectas a Internet desde casa ltbrgtltINPUT type=radio name=intercasa value=sigtSiacuteltINPUT type=radio name=intercasa value=nogtNoltPgtiquestQueacute uso le das a tu ordenador ltBRgtltSELECT name=uso multiple size=3gtltOPTION selectedgtProfesionalltOPTIONgtDomeacutesticoltOPTIONgtOcioJuegosltSELECTgtltPgtCaracteriacutesticas de tu PCltBRgtltTEXTAREA name=caract rows=5 cols=40gtltTEXTAREAgtltPgtltINPUT type=submit value=Enviar datosgt ltINPUT type=reset value=Borrardatosgt

Coacutedigo fuente 16

Figura 2

Elementos del lenguaje III

Frames Las frames son una utilidad del HTML que nos permite dividir la ventana del navegador en diferentes subventanas que podraacuten ser manipuladas de manera independiente Esto nos permitiraacute mostrar una paacutegina web diferente en cada una de la subventanas o frames

Estructura de un documento con frames Un documento con frames se estructura de manera diferente a un documento HTML normal Asiacute en este tipo de documentos no apareceraacute la etiqueta ltBODYgt En su lugar se incluiraacute la etiqueta ltFRAMESETgt ltFRAMESETgt dentro de la cual se definiraacuten las distintas frames que se incluyan en el documento

La estructura general de un documento de este tipo seriacutea por tanto

ltHTMLgtltHEADgtCabeceraltHEADgtltFRAMESETgt

Definicioacuten de la distintas framesltFRAMESETgtltNOFRAMESgt

Instrucciones HTMLltNOFRAMESgt

ltHTMLgt

Lenguaje HTML copy Grupo EIDOS

52

Puede darse el caso de que programemos nuestro documento con frames siguiendo la estructura anterior y que el navegador que se use para leer el documento no soporte la caracteriacutestica de frames con lo cual no se mostraraacute nada de lo indicado entre las etiquetas ltFRAMESETgt y ltFRAMESETgtPara solucionar este problema todas las instrucciones HTML incluidas entre las etiquetas ltNOFRAMESgt y ltNOFRAMESgt seraacuten ejecutadas por los navegadores que no soportan las frames

La sintaxis de la etiqueta ltFRAMESETgt es

ltFRAMESET rows=Lista de filas cols=Lista de columnasgtltFRAME src=URL de la frame 1 name=Nombre de la frame 1gtltFRAME src=URL de la frame 2 name=Nombre de la frame 2gt

ltFRAME src=URL de la frame n name=Nombre de la frame ngt

ltFRAMESETgt

Como vemos por cada una de la frames que incluyamos en nuestro documento debemos incluir una etiqueta ltFRAMEgt indicando mediante sus argumentos la direccioacuten URL del documento que se insertaraacute en la subventana (src) y el nombre de la frame (name) Posteriormente describiremos la etiqueta ltFRAMEgt con maacutes detalle

Los argumentos de ltFRAMESETgt son rows y cols definieacutendose uacutenicamente uno de los dos atributos en funcioacuten de si la divisioacuten de la pantalla se realizaraacute por filas (rows) o por columnas (cols)

Por cada una de las subventanas que creemos debemos especificar su tamantildeo en puntos o en porcentaje del tamantildeo de cada subventana Asiacute por ejemplo si especificamos rows= 50 2525 crearemos tres subventanas horizontales ocupando la primera el 50 de la ventana principal y las otras dos el resto Si especificamos cols=100150 crearemos tres subventanas verticales ocupando la primera 100 puntos de la ventana principal la segunda 150 puntos y tercera el espacio restante

Vamos a verlo maacutes claramente con un par de ejemplos praacutecticos que vemos en la Tabla 54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 502525gt ltFRAMEsrc=Pagweb1htm name=Pagweb1gtltFRAMEsrc=Pagweb2htm name=Pagweb2gtltFRAMEsrc=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 6: Programacion web   lenguaje html

Lenguaje HTML copy Grupo EIDOS

8

bull La inclusioacuten de hiperenlaces que nos permitiraacuten acceder a otros documentos relacionados con el actual

bull La inclusioacuten de imaacutegenes y ficheros multimedia (graacuteficos viacutedeo audio)

iquestQueacute vamos a necesitar para crear un documento HTML

bull Un procesador de textos para escribir y editar el coacutedigo HTML Este podraacute ser cualquiera que no formatee el texto ya que el leguaje HTML estaacute basado en el coacutedigo ASCCI Si usamos un procesador como el Word tendremos que guardar el documento como soacutelo texto

bull Un navegador Web como el Explorer Netscape Mosaic etc el cual se encargaraacute del interpretar el coacutedigo HTML de nuestro documento y mostraacuternoslo en todo su esplendor

La secuencia de trabajo para crear nuestro documento es

1 Con el procesador de texto crearemos el documento HTML y lo guardaremos con el nombre que deseemos a excepcioacuten de la extensioacuten que deberaacute ser necesariamente htm oacute html

2 Para visualizar nuestro documento HTML abriremos el documento con el programa navegador

Reglas de formato Todos los navegadores usan unas reglas baacutesicas para poder mostrar una paacutegina web con un buen formato

bull El espacio en blanco es ignorado Ya que un documento HTML puede estar en cualquier tipo de fuente y ademaacutes la ventana del navegador puede ser de cualquier tamantildeo

bull Las etiquetas pueden ser escritas en mayuacutesculas o en minuacutesculas En todo caso se aconseja su escritura en mayuacutesculas para poder distinguirlas del texto normal

bull Existe normalmente una etiqueta de inicio y otra de fin La etiqueta de fin contendraacute el mismo texto que la de inicio antildeadieacutendole al principio una barra inclinada La etiqueta afectaraacute por tanto a todo lo que esteacute incluido entre las etiquetas de inicio y fin No obstante existen algunas que no necesitan cierre ya que en estas etiquetas se presupone su final como por ejemplo ltPgt paacuterrafo ltBRgt salto de liacutenea oacute ltIMGgt inclusioacuten de una imagen

Vemos un ejemplo en la Tabla 1

Instruccioacuten HTML Resultado

ltBgtTexto en negritaltBgt Texto en negrita

ltHIgtTexto en cursivaltIgt Texto en cursiva

ltBgtltIgtTexto en negrita y cursivaltBgtltIgt Texto en negrita y cursiva

Tabla 1

copy Grupo EIDOS 1 Introduccioacuten al HTML

9

Estructura de un documento HTML La estructura baacutesica de un documento HTML es la siguiente

ltHTMLgt Indica el inicio del documento ltHEADgt Indica el inicio de la cabecera

ltTITLEgt Inicio del tiacutetulo del documento

ltTITLEgt Final del tiacutetulo del documento

ltHEADgt Final de la cabecera ltBODYgt Inicio del cuerpo del documento Instrucciones HTML ltBODYgt Final del cuerpo del documento ltHTMLgt Final del documento

Ninguno de estos elementos es obligatorio pudiendo crear documentos HTML sin incluir estas etiquetas de identificacioacuten No obstante es altamente recomendable la construccioacuten de paacuteginas HTML siguiendo esta estructura para una buena estructuracioacuten y legibilidad del coacutedigo

Nuestra primera paacutegina HTML Una vez que conocemos la estructura baacutesica de un documento HTML vamos a crear una paacutegina HTML muy sencillita

1 Lo primero seraacute abrir el procesador de textos que hayamos elegido y copiar el Coacutedigo fuente 1

ltHTMLgtltHEADgtltTITLEgt Mi primera paacutegina HTML ltTITLEgtltHEADgtltBODYgtEsta es mi primera paacutegina ltBgtHTMLltBgtltBODYgtltHTMLgt

Coacutedigo fuente 1

2 Una vez tecleado el coacutedigo guardamos el documento como Pagina1htm y procedemos a

abrirlo con el navegador correspondiente El resultado seraacute

Esta es mi primera paacutegina HTML

Lenguaje HTML copy Grupo EIDOS

10

Forma del URL El URL(Uniform Resource Locator) nos van a permitir localizar y acceder a cualquier recurso de la red desde nuestro programa navegador A traveacutes de los URL podremos referenciar cualquier fichero que deseemos incluir en nuestro documento HTML Cada elemento de Internet vendraacute definido por su URL correspondiente independientemente del tipo de servidor en el que se encuentre

La forma general del URL es

Tipo de servicio maquinadominiopuertocaminoarchivo

El Tipo de servicio como su propio nombre indica hace referencia a alguno de los servicios de Internet El servicio correspondiente al WWW es http (HiperText Transport Protocol) protocolo para la transmisioacuten de hipertexto Por lo que cualquier referencia a un documento HTML deberiacutea comenzar por http Otros servicios son ftp news telnet o mailto

La maacutequinadominio indica el nombre del servidor en que se encuentra el documento al que estamos haciendo referencia junto con el dominio al que pertenece dicho servidor

El puerto es opcional y lo normal es no ponerlo indicaacutendose soacutelo en el caso de que el servidor utilice un puerto distinto al puerto por defecto

El camino indica la ruta de directorios que hay que seguir para encontrar el documento que estamos referenciando

Finalmente especificaremos el nombre del archivo en que estaacute guardado el documento en cuestioacuten Si no indicamos un archivo accederemos al archivo por defecto del directorio al que estemos referenciando(En el caso del servicio http este archivo por defecto suele ser defaulthtm oacute defaulthtml)

Vamos a ver a continuacioacuten algunos ejemplos de URL s accediendo a distintos servicios de la WWW

Localizando un documento hypertexto (http) Sintaxis

httpmaquinadominiopuertocaminoarchivo

Ejemplo1 httpwwweidoses

En este ejemplo estamos indicando el servicio al que estamos accediendo (http) la maacutequina y el dominio tomaacutendose el resto de paraacutemetros por defecto de forma que accederemos al directorio raiacutez del servidor y al documento por defecto de ese directorio en este caso estamos accediendo a la paacutegina de portada de Villa Eidos

Ejemplo2 httpwwweidosesvulcaninformahtm

Con esta URL estamos accediendo al fichero informahtm que se encuentra en el directorio vulcan del servidor wwweidoses

copy Grupo EIDOS 1 Introduccioacuten al HTML

11

Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol) Sintaxis

ftpmaquinadominiopuertocaminoarchivo

Ejemplo ftp ftpjetespubauto_ftp

En este caso estamos accediendo al servicio ftp (protocolo de transferencia de archivos) ftpjetes En este caso no estamos indicando ninguacuten archivo con lo que se referenciaraacute un iacutendice con los contenidos del directorio pubauto_ftp

Accediendo a un grupo de noticias (news) Sintaxis

newsGRUPO

Ejemplo newsjetes

En este ejemplo estamos accediendo al grupo de noticias del servidor de news jetes

Accediendo a una direccioacuten e-mail (mailto) Sintaxis

mailto Destinatario_1 Destinatario_2Destinatario_n

Ejemplo mailtocursoseidoses

Enviaraacute un mail a la direccioacuten de correo electroacutenico indicada

Localizacioacuten de un archivo cualquiera (file) Sintaxis

filemaquinadominiopuertocaminoarchivo

Ejemplo filecwindows

En este caso estamos accediendo a la carpeta Windows de la unidad C de nuestro ordenador local

Cabecera y cuerpo del documento HTML

Cabecera Cabecera del documento HTML ltHEADgt

ltHEADgt

En la cabecera de un documento HTML incluiremos las definiciones generales que afecten a todo el documento como por ejemplo el tiacutetulo de la paacutegina que apareceraacute en la parte superior de la ventana del navegador

Las etiquetas ltHEADgt y ltHEADgt son las que van a delimitar la cabecera de nuestro documento Todas la etiquetas de la cabecera son opcionales aunque se recomienda incluir en todos nuestros documentos la etiqueta ltTITLEgt correspondiente al tiacutetulo del documento

A continuacioacuten vamos a tratar cada uno de los posibles componentes de la cabecera por separado

Tiacutetulo del documento ltTITLEgtltTITLEgt

El tiacutetulo de nuestro documento viene especificado por las etiquetas ltTITLEgt y ltTITLEgt y como ya hemos mencionado este tiacutetulo es el que apareceraacute en la ventana de nuestro programa

Lenguaje HTML copy Grupo EIDOS

14

navegador Lo normal y recomendable es que el tiacutetulo guarde relacioacuten con el contenido de nuestro documento ya que por ejemplo es utilizado por algunos servidores de buacutesqueda para poder intuir el contenido de nuestro documento Veamos un ejemplo en el Coacutedigo fuente 2

ltTITLEgtMi primera paacutegina WebltTITLEgt

Coacutedigo fuente 2

Indicador de refresco del documento ltMETA http-equiv=refresh content=nuacutemero_segundosurl=URL derefrescogt

Esta etiqueta sirve para indicar un documento que deberaacute sustituir al actual transcurrido un nuacutemero determinado de segundos Una posible utilidad de esta etiqueta podriacutea ser para visualizar documentos de forma secuencial de forma que se empieza por un documento y se pasa al siguiente transcurrido un periacuteodo de tiempo sin necesidad de que la persona que lee el documento realice ninguna accioacuten

Veamos un ejemplo en el Coacutedigo fuente 3

ltMETA http-equiv=refresh content=5url=httpwwweidosesgt

Coacutedigo fuente 3

Si insertamos esta instruccioacuten en la cabecera de nuestro paacutegina HTML transcurridos 5 segundos eacutesta se refrescaraacute con la paacutegina Web de portada de Villa Eidos

Indicador de la URL base del documento ltBASE href=URLgt

Con esta etiqueta indicamos la localizacioacuten de los ficheros a los que se hace referencia en nuestra paacutegina Web Si no incluimos esta etiqueta el navegador entenderaacute que dichos ficheros se encuentran en el mismo lugar donde reside nuestra paacutegina Web

Vemos un ejemplo en el Coacutedigo fuente 4

ltBASE href=httpwwweidosesvulcangt

Coacutedigo fuente 4

Si especificamos como URL base de nuestro documento HTML la indicada en este ejemplo y posteriormente hacemos referencia en nuestra paacutegina a un fichero llamado aulahtm se entenderaacute que la localizacioacuten del fichero es httpwwweidosesvulcanaulahtm

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

15

Cuerpo Cuerpo del documento HTML ltBODYgt

ltBODYgt

En el cuerpo de un documento HTML es donde incluiremos las distintas instrucciones del lenguaje junto con el contenido en siacute de nuestra paacutegina Web textos imaacutegenes enlaces a otras paacuteginas etc

Las etiquetas ltBODYgt y ltBODYgt son las que van a delimitar el cuerpo de nuestro documento Esta posee una serie de argumentos que nos van a permitir variar las caracteriacutesticas del documento en su conjunto como por ejemplo el color del texto o del color de fondo de nuestra paacutegina web

Antes de analizar los componentes y atributos de BODY vamos a ver como se especifican los colores en un documento HTML

Estos se pueden especificar por su nombre (name) o por su coacutedigo de color que es un nuacutemero compuesto de tres pares de cifras hexadecimales que nos indican la proporcioacuten de los colores primarios (rojo verde y azul) que forman el color deseado (rrggbb)

Nombre Coacutedigo de color Color mostrado

Black 000000 Negro

Teal 008080 Teal

Blue 0000FF Azul

Navy 000080 Azul marino

Lime 00FF00 Lima

White FFFFFF Blanco

Purple 800080 Puacuterpura

Yellow FFFF00 Amarillo

Olive 808000 Oliva

Red FF0000 Rojo

maroon 800000 Marroacuten

gray 808080 Gris

fuchsia FF00FF Fucsia

green 008000 Verde

Lenguaje HTML copy Grupo EIDOS

16

silver C0C0C0 Plata

aqua 00FFFF Agua

Tabla 2

La etiqueta ltBODYgt presenta una serie de atributos que van a afectar a todo el documento en su conjunto Estos atributos nos van a permitir definir los colores del texto del fondo y de los hiperenlaces del documento Incluso nos permitiraacuten insertar una imagen de fondo en nuestra paacutegina

ltBODY background=URL bgcolor=rrggbb oacute name text=namelink=name vlink=name gt

bull background=URL Nos va a permitir mostrar una imagen como fondo de nuestro

documento HTML El camino a esta imagen vendraacute especificado por la URL que definamos Si la imagen no rellena todo el fondo del documento eacutesta seraacute reproducida tantas veces como sea necesario hasta completar todo el fondo

Si insertas el Coacutedigo fuente 5 en el documento HTML que creamos como ejemplo en el capiacutetulo anterior Pagina1htm este presentaraacute como fondo la imagen fondogif

ltBODY background=fondogifgt

Coacutedigo fuente 5

bull bgcolor=rrggbb oacute name bgcolor Background Color Nos va a permitir definir un

color para el fondo de nuestro documento Este atributo seraacute ignorado si previamente hemos utilizado el atributo background

Inserte el Coacutedigo fuente 6 en Pagina1htm y compruebe el resultado

ltBODY bgcolor=bluegt

Coacutedigo fuente 6

bull text=rrggbb oacute name Nos permitiraacute definir un color para el texto de nuestro

documento Por defecto es negro Inserte el Coacutedigo fuente 7 en Pagina1html y compruebe el resultado

ltBODY text=redgt

Coacutedigo fuente 7

Y ahora inserte el Coacutedigo fuente 8 en el documento y comprueba el resultado

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

17

ltBODY bgcolor=yellow text=navygt

Coacutedigo fuente 8

bull link=rrggbb oacute name Indica el color que tendraacuten los hiperenlaces que no han sido

accedidos Por defecto es azul Como todaviacutea no sabemos insertar hiperenlaces en nuestro documento vamos a dejar el ejemplo correspondiente para maacutes adelante

bull vlink=rrggbb oacute name vlink Visited Links Indica el color de los hiperenlaces que ya han sido accedidos Por defecto es puacuterpura

Caracteres especiales Hasta ahora hemos escrito algunos ejemplos de coacutedigo HTML pero hemos pasado por alto algunas limitaciones de HTML respecto al uso de caracteres especiales Una de estas limitaciones es por ejemplo el uso de los caracteres lt y gt que como ya sabemos indican el inicio y fin de una etiqueta HTML Pues bien si quisieacuteramos escribir estos caracteres como parte normal de un texto el navegador no sabriacutea si se trata de texto normal o del comienzo y final de una etiqueta o sea que se hariacutea un liacuteo

Como todo tiene solucioacuten existen unos coacutedigos para poder escribir estos caracteres y otros relacionados con las etiquetas los vemos en la Tabla 3

Siacutembolo Coacutedigo

lt (menor que) amplt

gt (mayor que) ampgt

amp (ampersand) ampamp

(comillas) ampquot

Tabla 3

Para las letras especiacuteficas del idioma castellano las vocales acentuadas la ntilde la uuml y los signos iquest y iexcl existen los coacutedigos que muestra la Tabla 4

Letra Coacutedigo Letra Coacutedigo Letra Coacutedigo

aacute ampaacute Aacute ampAacute ntilde ampntilde

eacute ampeacute Eacute ampEacute Ntilde ampNtilde

iacute ampiacute

Iacute ampIacute

uuml ampuuml

Lenguaje HTML copy Grupo EIDOS

18

oacute ampoacute Oacute ampOacute Uuml ampUuml

uacute ampuacute Uacute ampUacute iquest amp191

iexcl amp161

Tabla 4

Para los navegadores actuales podemos escribir nuestro coacutedigo HTML de manera directa sin tener en cuenta estos coacutedigos pero nunca podemos asegurar que las personas que accedan a nuestras paacuteginas con otros navegadores puedan leerlas correctamente Asiacute que los maacutes adecuado es el empleo de los mismos Otros siacutembolos especiales aparecen en la Tabla 5

Siacutembolo Coacutedigo

Ccedil ampccedil

Ccedil ampCcedil

copy ampcopy

reg ampreg

Tabla 5

Veamos un ejemplo en el Coacutedigo fuente 9

ampquotLa inspiraciampoacuten existe pero tiene que encontrarse trabajandoampquotampcopy Pablo Ruampiacutez Picasso

Coacutedigo fuente 9

Esta instruccioacuten HTML deberiacutea producir el siguiente resultado

La inspiracioacuten existe pero tiene que encontrarse trabajando copyPablo Ruiacutez Picasso

Para la inclusioacuten de comentarios en nuestra paacutegina HTML podemos usar la etiqueta lt-- --gt Estos comentarios nos podraacuten servir para efectuar anotaciones en nuestro documento HTML que ayuden a una mayor comprensioacuten del coacutedigo En el Coacutedigo fuente 10 se muestra un ejemplo de comentario

lt-- Esto es un comentario y no seraacute mostrado por el navegador --gt

Coacutedigo fuente 10

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

19

Espaciado y saltos de liacutenea En HTML soacutelo se admite un uacutenico espacio en blanco separando cualquier elemento o texto el resto de espacios seraacuten ignorados por el navegador al igual que las tabulaciones retornos de carro etc Veamos un ejemplo en la Tabla 6

Ejemplo Resultado

Esta frase no se veraacute asiacute en el visor Esta frase no se veraacute asiacute en el visor

Tabla 6

No obstante siacute podremos dar el formato que deseemos a nuestras paacuteginas con el empleo de los siguientes elementos del lenguaje HTML

Inclusioacuten de espacios en blanco ampnbsp Nos permitiraacute la inclusioacuten de maacutes de un espacio en blanco entre dos textos consecutivos de forma que estos espacios se muestren de forma efectiva en el navegador Tendremos que incluir tantas expresiones ampnbsp como espacios en blanco se deseen incluir

Ejemplo Resultado

Texto1ampnbspampnbspampnbspampnbspTexto2 Texto1 Texto2

Tabla 7

Salto de liacutenea ltBRgt BR Break Nos permite dar un salto a la liacutenea siguiente en el punto donde la etiqueta sea insertada

Ejemplo Resultado

Esta frase tiene aquiacuteltBRgt un salto de liacutenea Esta frase tiene aquiacute un salto de liacutenea

Tabla 8

Cambio de paacuterrafo ltPgt P Paragraph Permite definir un paacuterrafo introduciendo normalmente un espacio de separacioacuten de dos liacuteneas con el texto siguiente al punto donde hayamos insertado la etiqueta ltPgt

Lenguaje HTML copy Grupo EIDOS

20

Ejemplo Resultado

Esta frase tiene aquiacuteltPgt un cambio de paacuterrafo Esta frase tiene aquiacute

un cambio de paacuterrafo

Tabla 9

La etiqueta de fin paacuterrafo ltPgt es opcional no siendo necesario incluirla Aunque siempre es recomendable delimitar claramente el inicio y final de un paacuterrafo Ademaacutes cuando usemos esta etiqueta como cerrada ltPgt ltPgt tenemos la posibilidad de incluirle el atributo align el cual indica al navegador la forma de justificar el texto incluido en el paacuterrafo El formato seriacutea el siguiente

ltP align= left right center justify gtTexto contenido en elpaacuterrafo ltPgt

Veamos algunos ejemplos en la Tabla 10

Ejemplo Resultado

ltP align=rightgtEste es un ejemplode paacuterrafo alineado a laderechaltPgt

Este es un ejemplo de paacuterrafo alineado a la derecha

ltP align=centergtEste es unejemplo de paacuterrafo centradoltPgt

Este es un ejemplo de paacuterrafo centrado

Tabla 10

Liacutenea Horizontal ltHRgt HR Horizontal Rule Nos permite insertar una liacutenea horizontal cuyo tamantildeo podremos determinar a traveacutes de sus atributos Si no especificamos ninguacuten atributo dibujaraacute una liacutenea que ocupe el ancho de la pantalla del navegador Su utilidad es la de permitirnos dividir nuestra paacutegina en distintas secciones No seraacute necesaria la etiqueta de fin ltHRgt

El formato de la etiqueta con sus posibles atributos es

ltHR align= left right center noshade size=n width=n gt

bull align= left right center Permite establecer la alineacioacuten de la liacutenea a la izquierda a la derecha o centrarla

bull noshade No muestra la sombra de la liacutenea evitando el efecto de tres dimensiones

bull size=n Indica el grosor de la liacutenea en pixels

bull width=n oacute n Especificaraacute el ancho de la liacutenea este se podraacute especificar en pixels (n) o en tanto por ciento del ancho de la ventana (n) Vamos a ver algunos ejemplos en la Tabla 11

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

21

Ejemplo Resultado

ltHRgt

ltHR size=3 noshadegt

ltHR size=5width=50align=rightgt

ltHR size=10width=50align=centergt

Tabla 11

Texto preformateado ltPREgt PRE Preformatted Nos permitiraacute visualizar el texto tal y como se ha escrito respetando los saltos de liacutenea las tabulaciones y espacios en blanco de todo el texto incluido entre las etiquetas ltPREgt y ltPREgt

El texto se mostraraacute con una fuente de espaciado fijo maacutes pequentildea que el texto normal No es recomendable su uso ya que presenta muchas limitaciones y no se obtiene una buena presentacioacuten

Ejemplo Resultado

ltPREgtEste texto estaacutepreformateadoltPREgt

Este texto estaacute preformateado

Tabla 12

Elementos del lenguaje I

Cabeceras y atributos de texto

Cabeceras ltH1gtltH6gt H Heading En un documento HTML podemos incluir seis tipos distintos de cabeceras que van a constituir normalmente el tiacutetulo y los distintos subapartados que forman el documento aunque podremos utilizarlas en el punto que queramos del documento para resaltar cualquier texto Estas cabeceras son definidas por las etiquetas ltH1gtltH2gtltH3gtltH4gtltH5gt y ltH6gt El texto que componga cada cabecera deberaacute estar incluido entre las etiquetas de inicio (ltHngt) y fin (Hn) correspondiente La cabecera ltH1gtseraacute la que muestre el texto de mayor tamantildeo este tamantildeo iraacute disminuyendo hasta llegar a la cabecera ltH6gt Como podemos ver en la Tabla 13 Para alinear las cabeceras utilizamos el atributo align El formato seriacutea ltHn align=centergt como muestra la Tabla 14

Ejemplo Resultado

ltH1gtCabecera 1ltH1gt Cabecera 1 ltH2gtCabecera 2ltH2gt Cabecera 2

Lenguaje HTML copy Grupo EIDOS

24

ltH3gtCabecera 3ltH3gt Cabecera 3

ltH4gtCabecera 4ltH4gt Cabecera 4

ltH5gtCabecera 5ltH5gtCabecera 5

ltH6gtCabecera 6ltH6gtCabecera 6

Tabla 13

Ejemplo Resultado

ltH5 align=centergtCabecera 5ltH5gtCabecera 5

Tabla 14

Atributos del texto Al texto de nuestro documento HTML le podemos aplicar distintos atributos (negrita cursiva subrayado etc) al igual que hacemos cuando trabajamos con el procesador de textos en la edicioacuten de nuestros documentos Para aplicar estos atributos disponemos de distintas etiquetas que aplicaraacuten su efecto al texto incluido entre sus indicadores de inicio y fin Las vemos en la Tabla 15

Atributo Etiqueta Ejemplo Resultado

Negrita ltBgtltBgtltBgtTexto ennegritaltBgt

Texto en negrita

Cursiva ltIgtltIgtltIgtTexto encursivaltIgt

Texto en cursiva

Teletype ltTTgtltTTgtltTTgtTexto en modoteletypeltTTgt

Texto en modoteletype

Subrayado ltUgtltUgt ltUgtTexto subrayadoltUgt Texto subrayado Tachado ltSgtltSgt ltSgtTexto tachadoltSgt Texto tachado

Parpadeo ltBLINKgtltBLINKgtltBLINKgtTextoparpadeandoltBLINKgt

Texto parpadeando

Superiacutendice ltSUPgtltSUPgt ltSUPgtTexto en modosuperiacutendiceltSUPgt

Texto en modo superiacutendice

Subiacutendice ltSUBgtltSUBgtltSUBgtTexto en modosubiacutendiceltSUBgt

Texto en modo subiacutendice

Centrado ltCENTERgtltCENTERgt

ltCENTERgtTextocentradoltCENTERgt

Texto centrado

B Bold I Italic TT Teletype U Underlined S Strike SUP Superscript SUB Subscript

Tabla 15

copy Grupo EIDOS 3 Elementos del lenguaje I

25

Alguna de estas etiquetas no es reconocida por determinados navegadores Asiacute por ejemplo la etiqueta ltBLINKgt (Parpadeo) no es implementada por el Explorer Por lo que seguacuten el explorador que estemos utilizando podremos ver el resultado correctamente o no

Existen otras etiquetas que nos van a servir para especificar de manera diferenciada unidades loacutegicas de nuestro documento HTML tales como citas direcciones de correo etc En algunos casos el formato obtenido con estas etiquetas de estilo loacutegico va a ser el mismo que con las anteriores a las que se les denomina tambieacuten etiquetas de estilo fiacutesico Algunas etiquetas de estilo loacutegico las vemos en la Tabla 16

Etiqueta Ejemplo Resultado

ltSTRONGgtltSTRONGgtltSTRONGgtEspecifica textoresaltado (igualltBgt)ltSTRONGgt

Especifica texto resaltado(igual ltBgt)

ltCITEgtltCITEgtltCITEgtIndica una cita otiacutetulo (igual ltIgt)ltCITEgt

Indica una cita o tiacutetulo (igualltIgt)

ltSTRIKEgtltSTRIKEgtltltSTRIKEgtTexto tachado(igual ltSgt)ltSTRIKEgt

Texto tachado (igual ltSgt)

Tabla 16

Si queremos aplicar efectos maacutes espectaculares a nuestro documento HTML debemos variar el tamantildeo el color y el tipo de letra del texto La etiqueta que nos permite todo esto es ltFONTgtltFONTgt por medio de sus atributos size color y face

ltFONT size=n oacute +- n color=rrggbb oacute name face=nombre defont gt

bull size=n oacute +- n El atributo size nos permite especificar un tamantildeo determinado

para la fuente del texto incluido entre las etiquetas de inicio y fin el cual puede estar entre 1 y 7 El texto de tamantildeo normal equivale a la fuente de tamantildeo 3 (fuente base) Por tanto si especificamos size=+2 el tamantildeo de la fuente seraacute 5 Y si especificamos size= -1 el tamantildeo seraacute 2

Ejemplo Resultado

ltFONT size=2gtTamantildeo 2ltFONTgtTamantildeo 2

ltFONT size=+2gtTamantildeo 5 (3+2)ltFONTgt Tamantildeo 5 (3+2)

ltFONT size=-1gtTamantildeo 2 (3-1)ltFONTgtTamantildeo 2 (3-1)

Tabla 17

bull color=rrggbb oacute name Nos va a permitir definir el color que tendraacute el texto

incluido entre las etiquetas Tabla 18

Lenguaje HTML copy Grupo EIDOS

26

Ejemplo Resultado

ltFONT color=redgtTexto de colorrojoltFONTgt

Texto de color rojo

ltFONT color=bluegtTexto de colorazulltFONTgt

Texto de color azul

ltFONT size=5 color=008000gtTextoverde y de tamantildeo 5ltFONTgt

Texto verde y detamantildeo 5

Tabla 18

bull face=nombre de font Nos va a permitir escribir texto con el tipo de letra que le

especifiquemos En el caso de que el tipo de letra que le hayamos especificado no esteacute cargada en el ordenador que lee la paacutegina se usaraacute el font por defecto del navegador

Ejemplo Resultado

ltFONT face=TahomagtTipo de letraTahomaltFONTgt

Tipo de letra Tahoma

ltFONT size=4 color=blueface=TahomagtTexto azul de tamantildeo4 y TahomaltFONTgt

Texto azul de tamantildeo 4 y Tahoma

Tabla 19

Listas Podemos representar elementos en forma de lista dentro de nuestros documentos de una forma muy sencilla y con una gran versatilidad Estas listas podraacuten incluir cualquiera de los elementos HTML e incluso podemos definir listas anidadas es decir listas dentro de listas HTML nos permite crear tres tipos distintos de listas

bull Listas no numeradas

bull Listas numeradas

bull Listas de definiciones

Listas no numeradas ltULgt UL Unordered List

Con este tipo de listas podemos especificar una serie de elementos sin un orden predeterminado precedidos de una marca o vintildeeta que nosotros mismos podemos definir Para la definicioacuten de los liacutemites de la lista utilizaremos la etiqueta ltULgt ltULgt y para determinar cada uno de los elementos que la componen usaremos la etiqueta ltLIgt El formato es el siguiente

ltUL type=disk oacute circle oacute squaregtltLHgtTiacutetulo de la listaltLHgt

copy Grupo EIDOS 3 Elementos del lenguaje I

27

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltULgtLH List Head LI List Item

Con el atributo type vamos a especificar el tipo de marca o vintildeeta que antecederaacute a cada uno de los elementos de la lista Estas marcas podraacuten ser un disco (disk) un ciacuterculo (circle) o un cuadrado (square) La etiqueta ltLHgt nos va a servir para especificar un posible tiacutetulo de la lista siendo esta opcional Vamos a ver algunos ejemplos en la Tabla 20

Ejemplo Resultado

ltUL type=circlegtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAfricaltLIgtAmeacutericaltLIgtOceaniacutea

ltULgt

Los cinco continentes

Europa

Asia

Aacutefrica

Ameacuterica

Oceaniacutea

ltUL type=squaregtltLIgtEuropaltLIgtAsialtLIgtAfricaltLIgtAmeacutericaltUL type=circle gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltULgtltLIgtOceaniacutea

ltULgt

Europa

Asia

Aacutefrica

Ameacuterica

Ameacuterica del Norte

Ameacuterica del Sur

Oceaniacutea

Tabla 20

Listas numeradas ltOLgt OL Ordered List

Con este tipo de listas podemos especificar una serie de elementos numerados seguacuten el lugar que ocupan en la lista Para la definicioacuten de los liacutemites de la lista utilizaremos la etiqueta ltOLgt ltOLgt y para determinar cada uno de los elementos que la componen usaremos la etiqueta ltLIgt El formato es el siguiente

ltOL start=n type=Tipo de listagtltLHgtTiacutetulo de la listaltLHgt

Lenguaje HTML copy Grupo EIDOS

28

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltOLgt

Con el atributo start vamos a especificar el nuacutemero por el que va a empezar la lista Si no indicamos este argumento la lista empezaraacute a numerarse a partir del 1 Con el atributo type vamos a especificar el tipo de lista numerada Sus posibles valores aparecen a continuacioacuten y veremos algunos ejemplos en la Tabla 21

A Letras mayuacutesculas (A B C )

a Letras minuacutesculas (a b c )

I Nuacutemeros romanos en mayuacutesculas (I II III IV )

i Nuacutemeros romanos en minuacutesculas (i ii iii iv )

1 Numeacutericamente (1 2 3 4 ) (es la numeracioacuten por defecto y por tanto no habriacutea que indicarla)

Ejemplo Resultado

ltOL type=AgtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltLIgtOceaniacutea

ltOLgt

Los cinco continentes

A Europa

B Asia

C Aacutefrica

D Ameacuterica

E Oceaniacutea

ltOL type=I start=2gtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltOL type=i gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltOLgtltLIgtOceaniacutea

ltOLgt

II Europa

III Asia

IV Aacutefrica

V Ameacuterica

i Ameacuterica del Norte

ii Ameacuterica del Sur

VI Oceaniacutea

Tabla 21

copy Grupo EIDOS 3 Elementos del lenguaje I

29

Listas de definiciones ltDLgt DL Definition List

Estas listas nos van a servir para especificar una serie de teacuterminos y sus definiciones correspondientes Para la definicioacuten de la lista usaremos la etiqueta ltDLgt ltDLgt para especificar los teacuterminos usaremos la etiqueta ltDTgt y para especificar la definicioacuten correspondiente a cada teacutermino usaremos la etiqueta ltDDgt El formato es el siguiente

ltDLgtltLHgtTiacutetulo de la listaltLHgtltDTgtTeacutermino 1ltDDgtDefinicioacuten 1ltDTgtTeacutermino 2ltDDgtDefinicioacuten 2

ltDTgtTeacutermino nltDDgtDefinicioacuten n

ltDLgtDT Definition Term DD Definition Description

Vamos a ver un ejemplo en la Tabla 22

Ejemplo Resultado

ltDLgtltDTgtPariacutesltDDgtCapital de FrancialtDTgtRomaltDDgtCapital de ItalialtDTgtMadridltDDgtCapital de Espantildea

ltDLgt

Pariacutes

Capital de Francia

Roma

Capital de Italia

Madrid

Capital de Espantildea

Tabla 22

Hiperenlaces Los hiperenlaces son enlaces de hipertexto que nos van a permitir acceder de manera directa a otros documentos HTML independientemente de su ubicacioacuten o a otras zonas dentro de nuestro propio documento

Enlaces a otras paacuteginas ltA href=gt Con este tipo de hiperenlaces vamos a poder acceder tanto a otras paacuteginas que esteacuten ubicadas dentro de nuestro propio sistema como a paacuteginas ubicadas en puntos muy distantes del globo El formato de este tipo de hiperenlaces es

ltA href=URL a la que se accedegtTexto del hiperenlaceltAgt

Lenguaje HTML copy Grupo EIDOS

30

Con el atributo href vamos a especificar la URL del documento al que se pretende acceder El texto contenido entre las etiquetas de comienzo y fin nos va a servir para definir el hiperenlace por lo que deberiacutea ser clarificador del contenido del documento con el que vamos a enlazar Esta definicioacuten apareceraacute resaltada normalmente en azul y subrayada En la mayoriacutea de los navegadores esta definicioacuten del hiperenlace es sensible por lo que cuando el cursor pasa por encima del mismo este cambia de aspecto indicaacutendolo

Veamos un ejemplo en la Tabla 23

Ejemplo Resultado

ltA href=httpwwweidosesgtPaacutegina inicialde Villa EidosltAgt

Paacutegina inicial de Villa Eidos

Tabla 23

Si situamos el ratoacuten encima del hiperenlace y pulsamos el navegador accederaacute a la paacutegina Web indicada por href es decir accederaacute a la paacutegina situada en httpwwweidoses

Igualmente podriacuteamos indicar el hiperenlace por medio de una imagen Si esta imagen tiene definido un borde este apareceraacute resaltado en color azul El formato correspondiente seriacutea

ltA href=URL a la que se accedegtltIMG src=Imagengt y tambieacutentextoltAgtIMG Image src Source

Veamos un ejemplo en la Tabla 24

Ejemplo Resultado

ltA href=httpwwweidosesgtltIMGsrc=IconogifgtltAgt Villa Eidos Villa Eidos

Tabla 24

Si pulsamos sobre la imagen el navegador accederaacute a la paacutegina Web inicial de Villa Eidos

Enlaces dentro de la misma paacutegina ltA name=gt Este tipo de hiperenlaces nos va a permitir marcar distintas zonas del documento activo con el objeto de tener un acceso directo a las mismas Una buena utilidad de este tipo de enlaces radica en la creacioacuten de iacutendices para documentos largos de forma que si pinchamos en el hiperenlace correspondiente al tiacutetulo de un capiacutetulo determinado el navegador saltaraacute automaacuteticamente hasta el comienzo de dicho capiacutetulo

Para la creacioacuten de estos hiperenlaces debemos seguir dos pasos

copy Grupo EIDOS 3 Elementos del lenguaje I

31

1 Marcar las distintas zonas o secciones del documento Esto lo haremos con el paraacutemetro name

ltA name=Identificador de seccioacutengtTexto de laseccioacutenltAgt

A cada seccioacuten le asignaremos un identificador distinto para poder referenciarlas posteriormente de manera inequiacutevoca

2 Especificar un enlace a cada una de las secciones que hayamos definido ltA href=Identificador de seccioacutengtTexto del enlace a laseccioacutenltAgt

Si pinchamos en este enlace el navegador saltaraacute automaacuteticamente a la seccioacuten correspondiente Veamos un ejemplo sencillito en la Tabla 25 pero demostrativo de todo lo que acabamos de explicar

Ejemplo Resultado

ltA href=Cap1gtCapiacutetulo1ltAgtltA name=Cap1gtCapiacutetulo 1ltAgt

Capiacutetulo 1

Capiacutetulo 1

Tabla 25

Si nos creamos una paacutegina HTML con distintos capiacutetulos podriacuteamos crear una seccioacuten para cada uno de ellos de forma que si pinchamos en el hiperenlace correspondiente al Capiacutetulo 1 el navegador saltariacutea directamente a la seccioacuten correspondiente al Capiacutetulo 1

Ademaacutes de los dos tipos de hiperenlaces vistos podemos crear hiperenlaces que nos permitan acceder a cualquiera de los servicios de Internet Es decir podriacuteamos indicar enlaces a servidores FTP GOPHER NEWS MAILTO etc Para ello tendriacuteamos que indicar la URL correspondiente al servicio al cual queremos acceder como ya vimos en el primer capiacutetulo de este manual

Imaacutegenes

Podremos dar un aspecto mucho maacutes vistoso a nuestros documentos HTML con la inclusioacuten de imaacutegenes Los formatos de imagen que todos los navegadores reconocen son gif y jpg Si queremos insertar una imagen en otro formato el visor deberiacutea disponer del programa externo que permita su visualizacioacuten De todas formas una buena solucioacuten es utilizar alguacuten programa de tratamiento de imaacutegenes que nos convierta la imagen a uno de los formatos mencionados anteriormente

El formato gif es maacutes recomendado para la inclusioacuten de iconos graacuteficas y el formato jpg para el caso de insertar fotografiacuteas en nuestras paacuteginas

Lenguaje HTML copy Grupo EIDOS

32

La etiqueta que nos va a permitir la insercioacuten de imaacutegenes es ltIMGgt La imagen se insertaraacute justo en el punto del documento donde coloquemos dicha etiqueta pudiendo insertar imaacutegenes dentro de listas tablas o formularios

El formato de la etiqueta con sus posibles argumentos es el siguiente

ltIMG src=URL de la imagen alt=Texto alternativoalign=topmiddlebottonleftrigth border=Tamantildeoheight=Tamantildeo width=Tamantildeo hspace=margen vspace=margengt

bull src=URL de la imagen El atributo src nos va servir para indicar la URL de la imagen que

queremos insertar es decir el servidor y camino hasta llegar al fichero de la imagen

No seraacute necesario que la imagen que queremos insertar en nuestro documento esteacute en el ordenador local aunque siacute es recomendable ya que el acceso a las mismas puede ser maacutes lento

Por tanto es una buena praacutectica copiar todas las imaacutegenes que vayamos a incluir en nuestro documento HTML al ordenador local

Tabla 26

bull alt=Texto alternativo Nos va a permitir mostrar un texto alternativo para el caso en que el

navegador no sea capaz de mostrar la imagen Su uso es muy recomendable ya que cuando publiquemos nuestras paacuteginas en la WWW no sabremos desde queacute tipo de navegadores accederaacuten los internautas a nuestras paacuteginas

En la Tabla 27 vamos a ver un ejemplo

Si usas un navegador que no tiene ninguacuten problema para la visualizacioacuten de imaacutegenes desactiva temporalmente la opcioacuten de mostrar imaacutegenes prueba el ejemplo que muestra la Tabla 27 y compaacuteralo con el anterior

Tabla 27

copy Grupo EIDOS 3 Elementos del lenguaje I

33

bull align=topmiddlebotton leftrigth Nos permite indicar coacutemo se alinearaacute el texto que siga a la imagen

top alinea el texto con la parte superior de la imagen

middle con la parte central

bottom con la parte inferior

left imagen alineada a la izquierda de la paacutegina

rigth imagen alineada a la derecha de la paacutegina

Tabla 28

En el caso de que el texto que acompantildea a la imagen tenga maacutes de una liacutenea tan soacutelo la primera seraacute la que se alinearaacute seguacuten alguna de las anteriores alineaciones el resto de liacuteneas se incluiraacuten debajo de la imagen quedando un efecto bastante feo

Para solventar esto estaacuten las alineaciones LEFT (imagen alineada a la izquierda de la paacutegina) y RIGHT (imagen alineada a la derecha de la paacutegina) Las cuales permiten que la imagen se inserte dentro del paacuterrafo que la rodea produciendo un resultado mucho maacutes profesional en la integracioacuten de texto e imaacutegenes

Estas dos alineaciones no se podraacuten usar en combinacioacuten con las anteriores Veamos algunos ejemplos en la Tabla 29

Vemos como en el primer ejemplo la segunda liacutenea de texto aparece debajo de la imagen produciendo un efecto menos vistoso que en los dos ejemplos siguientes

Lenguaje HTML copy Grupo EIDOS

34

Tabla 29

bull border=Tamantildeo Permite antildeadirle un borde a la imagen del tamantildeo que le

especifiquemos

Si la imagen forma parte de un hiperenlace esta apareceraacute con un borde del color del hiperenlace Si no deseaacuteramos que aparezca este borde tendriacuteamos que especificar border=0

Tabla 30

bull height=Tamantildeo Permite especificar el alto de la imagen en puntos de pantalla

(pixels) o en del tamantildeo del documento

bull width=Tamantildeo Con este argumento especificaremos el ancho al que mostraremos la imagen en puntos de pantalla (pixels) o en del tamantildeo del documento

En el segundo de los ejemplos de la Tabla 31 el ancho de la imagen se ha extendido al 50 del total del ancho de la celda donde estaacute contenida la imagen Si pruebas este ejemplo en tu documento HTML la imagen se extenderaacute horizontalmente hasta ocupar el 50 del ancho de la paacutegina

copy Grupo EIDOS 3 Elementos del lenguaje I

35

Tabla 31

bull hspace=Margen hspace Horizontal Space Permite especificar el nuacutemero de espacios

horizontales (en puntos) que separaraacuten a la imagen de cualquier elemento que le siga o le anteceda

bull vspace=Margen vspace Vertical Space Con este argumento especificaremos el margen vertical (en puntos) que habraacute entre la imagen y cualquier otro elemento de nuestro documento

Tabla 32

Elementos del lenguaje II

Tablas HTML nos va a permitir la inclusioacuten de cualquiera de los elementos de nuestra paacutegina (texto imaacutegenes hiperenlaces listas etc) dentro de una tabla Gracias a lo cual conseguiremos dar una mayor y mejor estructuracioacuten a los contenidos de nuestros documentos Ademaacutes la definicioacuten de las tablas en HTML es muy abierta pudiendo en cualquier momento redimensionar la tabla es decir cambiar su nuacutemero de filas o de columnas cambiar el tamantildeo de alguna de sus celdas etc

La etiqueta que nos va a permitir la definicioacuten de tablas es ltTABLEgt ltTABLEgt

El formato general de la etiqueta sin ninguacuten argumento es el siguiente

ltTABLEgtltTR gt

ltTHgtContenido de la celda ltTHgtltTDgtContenido de la celda ltTDgt

ltTRgtltTABLEgt

TR Table Row TH Table Header TD Table Data

Vamos a analizar cada una de estas etiquetas de forma separada

1 ltTABLEgt ltTABLEgt Definicioacuten general de la tabla Dentro de ella definiremos las filas y columnas que la constituyen pudiendo incluso definir tablas dentro de tablas es decir tablas anidadas

Lenguaje HTML copy Grupo EIDOS

38

2 ltTRgt ltTRgt Definicioacuten de las filas de la tabla Por cada etiqueta ltTRgt que incluyamos se crearaacute una fila en la tabla No seraacute necesario indicar la etiqueta de cierre

3 ltTHgtltTHgt oacute ltTDgtltTDgt Definicioacuten de cada una de las celdas de la tabla Vemos que estas etiquetas estaacuten contenidas dentro de otra etiqueta de definicioacuten de fila de forma que por cada etiqueta ltTHgt o ltTDgt que incluyamos se crearaacute una celda dentro de la fila correspondiente La etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera es decir celdas cuyo contenido estaacute resaltado en negrita dejando la etiqueta ltTDgt para definir celdas de datos En este caso tampoco es necesario indicar las etiquetas de cierre

Todas estas etiquetas tienen sus respectivos argumentos Pero antes de analizar cada uno de ellos vamos a ver un ejemplo muy sencillito en la Tabla 33 que nos crearaacute una tabla de una sola celda (1 fila X 1 columna = 1 celda) Para ello usaremos la etiqueta de creacioacuten de tabla ltTABLEgt con el argumento border=1 (nos dibuja un borde de tamantildeo 1 alrededor de la tabla)

Ejemplo Resultado

ltTABLE border=1gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 33

Vamos ahora a analizar lo distintos argumentos que componen las etiquetas de la tabla analizaacutendolos desde lo general (la definicioacuten de la tabla) hasta lo especiacutefico (la definicioacuten de las celdas)

1 Definicioacuten de la tabla ltTABLEgt

ltTABLE border=n cellpadding=n cellspacing=n width=n oacute height=n oacute bgcolor=rrggbb oacute nombre gt

Contenido ltTABLEgt

bull border=n Si especificamos este argumento se dibujaraacute un borde alrededor de la

tabla del ancho que le indiquemos como muestra la Tabla 34

Ejemplo Resultado

Mi primera tabla ltTABLE border=4gtltTRgtltTDgtMi primera tablaltTABLEgt

Tabla 34

bull cellpadding=n Indica el espacio en puntos que separa el contenido de la celda con

el borde de la misma siendo 1 por defecto

copy Grupo EIDOS 4 Elementos del lenguaje II

39

Ejemplo Resultado

ltTABLE border=4 cellpadding=8gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 35

bull cellspacing=n Indica el espacio en puntos que separa a las celdas contenidas dentro de la tabla siendo 2 por defecto

bull width=n oacute Indica la anchura de la tabla en puntos o en en funcioacuten del ancho de la ventana del visualizador Si no indicamos este argumento el ancho de la tabla se ajustaraacute al tamantildeo del contenido de las celdas Esto es lo que ha ocurrido en el uacuteltimo ejemplo que hemos realizado Veamos un ejemplo en el Coacutedigo fuente 11 El resultado se muestra en la Tabla 36

ltTABLE border=4 width=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 11

Mi primera tabla

Tabla 36

bull height=n oacute Nos permite definir la altura de la tabla en puntos o en de la

altura de la ventana del visualizador Si indicamos este argumento lo recomendable es darlo en puntos ya que es maacutes complicado adecuarnos a la altura de la ventana del visualizador Al igual que en el caso anterior si no especificamos este argumento la altura se adecuaraacute al contenido de las celdas El Coacutedigo fuente 12 muestra un ejemplo y la Tabla 37 nos muestra el resultado

ltTABLE border=4 width=50 height=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 12

Mi primera tabla

Tabla 37

bull bgcolor= rrggbb o nombre del color Nos permite definir un color

de fondo para todas las celdas de la tabla Maacutes adelante veremos como podemos definir colores especiacuteficos para cada una de las celdas por separado

Lenguaje HTML copy Grupo EIDOS

40

Ejemplo Resultado

ltTABLE border=4 bgcolor=yellowgtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 38

2 Definicioacuten de las filas de la tabla ltTRgt

ltTR align=leftrightcenter valign=topmiddlebottombgcolor=rrggbb oacute nombregt

Antes de empezar a descifrar el significado de cada uno de los argumentos de esta etiqueta vamos a ver un ejemplo en la Tabla 39 de coacutemo se construiriacutea una tabla con dos filas (2 filas X 1 columna = 2 celdas)

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR gtltTDgtPrimera filaltTRgtltTDgtSegunda filaltTABLEgt

Segunda fila

Tabla 39

bull align=leftrightcenter Con este argumento vamos a indicar la alineacioacuten

horizontal (leftizquierda rightderecha centercentrado) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado Veamos un ejemplo en el Coacutedigo fuente 13 y su correspondiente resultado en la Tabla 40

ltTABLE border=4 width=50 gt ltTRgtltTDgtPrimera filaltTRalign=rightgtltTDgtSegunda filaltTABLEgt

Coacutedigo fuente 13

Primera fila

Segunda fila

Tabla 40

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten

vertical (toparriba middlecentrado bottomabajo) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado

copy Grupo EIDOS 4 Elementos del lenguaje II

41

bull bgcolor= rrggbb o nombre del color En este caso este argumento nos permitiraacute definir un color de fondo para todas las celdas de una fila veamos un ejemplo en la

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR bgcolor=yellowgtltTDgtPrimera

filaltTR bgcolor=greengtltTDgtSegunda

filaltTABLEgt

Segunda fila

Tabla 41

3 Definicioacuten de las celdas de la tabla ltTHgt oacute ltTDgt

ltTH oacute TD align=leftrightcenterjustifyvalign=topmiddlebottom bgcolor=rrggbb oacute nombre width=nrowspan=n colspan=ngt

Como ya explicamos anteriormente la etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera y la etiqueta ltTDgt para la creacioacuten de celdas de datos Vamos a completar nuestro ejemplo inicial antildeadieacutendole tres filas de dos celdas cada una (3 filas X 2 columnas = 6 celdas) Tabla 42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTDgtCelda 21ltTDgtCelda 22

ltTABLEgt Celda 21 Celda 22

Tabla 42

bull align=leftrightcenterjustify Con este argumento vamos a indicar la

alineacioacuten horizontal (left izquierda right derecha center centrado justifyjustificado) del contenido de cada celda por separado Su significado es el mismo que en la etiqueta ltTRgt

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten vertical (toparriba middlecentrado bottomabajo) del contenido de cada celda

bull bgcolor= rrggbb o nombre del color En este caso podremos definir un color de fondo para cada una de las celdas de manera independiente

bull width=n oacute Indica el ancho de la celda en puntos o en en funcioacuten del tamantildeo de la tabla

Lenguaje HTML copy Grupo EIDOS

42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera

1ltTHgtCabecera 2ltTR gtltTD align=rightgtCelda

11ltTD bgcolor=redgtCelda 12ltTRgtltTD

bgcolor=yellowgtCelda 21ltTDalign=centergtCelda 22ltTABLEgt

Celda 21 Celda 22

Tabla 43

bull rowspan=n Con este argumento podemos lograr que una celda concreta abarque maacutes de una fila ya sabemos que por defecto una celda ocupa una sola fila

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTD rowspan=2gtCelda

11ltTDgtCelda 12ltTRgtltTDgtCelda 22

ltTABLEgt

Celda 11 Celda 22

Tabla 44

bull colspan=n Con este argumento podemos lograr que una celda se expanda a maacutes

de una columna

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTD colspan=2

align=centergtCelda 22ltTABLEgt

Celda 22

Tabla 45

Para finalizar este tema sobre la creacioacuten de tablas vamos a ver el ejemplo que aparece en el Coacutedigo fuente 14 y su resultado en la Tabla 46

ltTABLE border=4gtltTR gtltTH colspan=3 bgcolor=redgtTiacutetuloltTR bgcolor=yellowgtltTHgtCabecera 1ltTHgtCabecera 2ltTHgtCabecera 3

copy Grupo EIDOS 4 Elementos del lenguaje II

43

ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTDgtCelda 13ltTRgtltTD rowspan=2gtCelda 21ltTD bgcolor=greengtCelda 22ltTDgtCelda 23ltTRgtltTDgtCelda 32ltTDgtCelda 33

ltTABLEgt

Coacutedigo fuente 14

Tiacutetulo

Cabecera 1 Cabecera 2 Cabecera 3

Celda 11 Celda 12 Celda 13

Celda 22 Celda 23 Celda 21

Celda 32 Celda 33

Tabla 46

Formularios El formulario es el elemento de HTML que nos va a permitir interactuar con los visitantes de nuestras paacuteginas web de forma que podemos solicitarle informacioacuten al usuario y procesarla De esta forma podremos crear en nuestras paacuteginas encuestas para solicitar la opinioacuten del visitante sobre alguacuten tema e incluso sobre el contenido de nuestra propia paacutegina web cuestionarios para evaluar la asimilacioacuten de contenidos sobre un tema concreto que se trate en la paacutegina etc

El contenido de la informacioacuten introducida por medio del formulario seraacute enviado a la direccioacuten URL donde resida el programa que se encargaraacute de procesar los datos A este tipo de programas externos se les denomina programas CGI (Common Gateway Interface)

La etiqueta HTML que nos va a permitir la creacioacuten de formularios es ltFORMgt Su formato es el siguiente

ltFORM action=URL del programa que trata el formulariomethod=postgetgt Elementos del formulario ltFORMgt

bull action=URL del programa que trata el formulario A traveacutes de este

argumento indicaremos como ya hemos mencionado la direccioacuten del fichero de programa que va a tratar la informacioacuten suministrada por el formulario

Tambieacuten podriacuteamos incluir como URL que trata el formulario una direccioacuten de correo electroacutenico Por tanto el valor de este argumento podriacutea ser action =mailto direccioacuten de correo

Nota Esta opcioacuten soacutelo funciona adecuadamente con el navegador Netscape Con el Explorer este enviacuteo dariacutea como resultado un correo en blanco Para que esta opcioacuten funcione de manera independiente del navegador que se esteacute utilizando se ha de emplear un programa externo que realice este proceso

Lenguaje HTML copy Grupo EIDOS

44

bull method=postget A traveacutes de este argumento indicaremos el meacutetodo empleado para transferir la informacioacuten generada por el formulario

Si indicamos post se produciraacute la modificacioacuten del documento destino como es el caso de enviar la informacioacuten a una direccioacuten de correo electroacutenico Mediante el meacutetodo get no se produciraacuten cambios en el documento destino

Dentro de un formulario podremos incluir cualquier texto o instruccioacuten HTML de las vistas a lo largo de los capiacutetulos anteriores ademaacutes claro estaacute de los elementos tiacutepicos de un formulario cajas de texto botones de seleccioacuten menuacutes de opciones etc Vamos a ver coacutemo se incluiraacuten estos elementos en un formulario

Entrada baacutesica de datos Para definir los distintos tipos de campos baacutesicos de entrada de datos usaremos la etiqueta ltINPUTgt

El formato es el siguiente

ltINPUT type= text password checkbox radio hidden submit image reset name=Variable value=Valor inicialgt

bull El argumento type determinaraacute el tipo de campo de entrada que estamos insertando A

continuacioacuten describiremos cada uno de ellos

bull El argumento name especifica el nombre de la variable que tomaraacute el valor introducido en el campo

bull El argumento value especifica el valor por defecto que tendraacute el campo

Vamos a continuacioacuten a describir los distintos tipos campos de entrada que vendraacuten dados por los valores del argumento type

Texto corto type=text

Con este argumento vamos a indicar que el campo a introducir seraacute un texto El formato seriacutea

ltINPUT type= text name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los nuevos atributos es

bull size=Tamantildeo Indicaremos el tamantildeo en caracteres de la ventana de introduccioacuten de texto

bull maxlength=Longitud maacutexima Indicaremos el nuacutemero maacuteximo de caracteres a introducir en el campo

Vamos a ver un ejemplo en la Tabla 47

copy Grupo EIDOS 4 Elementos del lenguaje II

45

Ejemplo Resultado

NombreltINPUT type=text name=Var1Value=Texto por defecto size=20 maxlength=25gt

Tabla 47

Claves type=password

Con este argumento indicamos que el campo a introducir seraacute una palabra clave por lo que los caracteres que se introduzcan seraacuten sustituidos por asteriscos en la visualizacioacuten por pantalla El formato es

ltINPUT type= password name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los distintos argumentos es el mismo que en el caso anterior Veamos un ejemplo en la Tabla 48

Ejemplo Resultado

ClaveltINPUT type=password name=Var2Value=tutankamon size=11 maxlength=10gt

Tabla 48

Botones de seleccioacuten type=checkbox

El checkbox es un botoacuten que presenta dos estados marcado (1) y desmarcado (0) Podremos variar su estado simplemente pinchando con el ratoacuten El formato es

ltINPUT type= checkbox name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto

Si incluimos el argumento value cuando el botoacuten esteacute marcado su variable asociada adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 49

Ejemplo Resultado

ltINPUT type=checkbox name=Var3 value=Op1 checkedgtOpcioacuten1 ltbrgtltINPUT type=checkbox name=Var4 value=Op2gt Opcioacuten 2

Tabla 49

Lenguaje HTML copy Grupo EIDOS

46

Seleccioacuten entre varias opciones type=radio

Este argumento se usa cuando hay que hacer una seleccioacuten entre varias alternativas excluyentes pudieacutendose seleccionar uacutenicamente una de las alternativas Debemos incluir una etiqueta radio por cada una de las posibles alternativas El formato es

ltINPUT type= radio name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto En este caso uacutenicamente uno de los botones de radio podraacute aparecer marcado ya que se usa para el caso de opciones excluyentes

Cuando un botoacuten esteacute seleccionado la variable asociada a la lista de botones adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 50

Ejemplo Resultado

ltINPUT type=radio name=Var5 value=Op1gtOpcioacuten1 ltbrgtltINPUT type=radio name=Var5 value=Op2checkedgt Opcioacuten 2 ltbrgtltINPUT type=radio name=Var5 value=Op3 gtOpcioacuten 3

Tabla 50

En este ejemplo la variable Var5 tendraacute el valor Op2

Campos ocultos type=hidden

Este tipo de campos no son visibles para el usuario Su uso tiene sentido en el caso de enviar alguacuten tipo de informacioacuten que no deba ser visualizada o variada por el lector de nuestra paacutegina Web El formato es

ltINPUT type= hidden name=Variable value=Valor gt

Con esta etiqueta asignariacuteamos a la Variable referenciada por name el Valor de value y se mandariacutea junto con el formulario sin que el usuario de la paacutegina se entere de nada Veamos un ejemplo en el Coacutedigo fuente 15

ltINPUT type=hidden name=Var6 value=tutankamongt

Coacutedigo fuente 15

copy Grupo EIDOS 4 Elementos del lenguaje II

47

Botoacuten de enviacuteo de datos type=submit

Con este argumento especificamos un botoacuten en el que al pulsar los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario El formato es

ltINPUT type= submit value=Mensaje a mostrargt

En este caso el paraacutemetro value indica el mensaje que se mostraraacute en el botoacuten Veamos un ejemplo en la Tabla 51

Ejemplo Resultado

ltINPUT type=submit value=Enviar los Datosgt

Tabla 51

Botoacuten graacutefico de enviacuteo de datos type=image

Con este argumento especificamos un botoacuten de tipo imagen en el que al igual que con el botoacuten anterior si pulsamos en la imagen los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario Su formato es el siguiente

ltINPUT type= image src=URL de la imagen name=Variablegt

Con el paraacutemetro src especificamos la URL de la imagen que seraacute insertada en el botoacuten En este caso en la variable referenciada por name se almacenaraacuten las coordenadas del punto de la imagen donde se halla pinchado (de forma que estas coordenadas podriacutean ser procesadas por el programa que recibe los datos del formulario)

Botoacuten de borrado de datos type=reset

Con este argumento especificamos un botoacuten que al ser pulsado borraraacute el contenido actual de todos los campos dejaacutendolos con sus valores por defecto Su formato es

ltINPUT type= reset value=Texto del botoacutengt

Con el paraacutemetro value especificamos el texto que etiquetaraacute al botoacuten

Ejemplo Resultado

ltINPUT type=reset value=Borrar datosgt

Tabla 52

Lenguaje HTML copy Grupo EIDOS

48

Entrada datos en muacuteltiples liacuteneas En un formulario tambieacuten podremos introducir un campo de texto que abarque varias liacuteneas Para ello usaremos la etiqueta ltTEXTAREAgt ltTEXTAREAgt Su formato es el siguiente

ltTEXTAREA name=Variable rows=Filas cols=ColumnasgtContenido por defectoltTEXTAREAgt

Los argumentos rows y cols nos van a permitir especificar respectivamente el nuacutemero de filas de texto visibles y el nuacutemero de columnas de texto visibles en el campo

Ejemplo Resultado

ltTEXTAREA name=Var7 rows=5 cols=40gtContenido por defectoltTEXTAREAgt

Tabla 53

Entrada de datos a traveacutes de campos de seleccioacuten Con los campos de seleccioacuten podremos desplegar una lista de opciones entre las que podremos seleccionar una Para ello usaremos la etiqueta ltSELECTgt ltSELECTgt Su formato es el siguiente

ltSELECT name=Variable multiple size=ngtltOPTION selected value=Valor_1gtPrimera OpcioacutenltOPTION value=Valor_2gtSegunda Opcioacuten

ltOPTION value=Valor_ngtEneacutesima Opcioacuten

ltSELECTgt

Figura 1

bull La variable referenciada por name tomaraacute el valor(value) de la opcioacuten seleccionada

bull Si especificamos el argumento muacuteltiple se mostraraacuten todas la opciones en forma de tabla El nuacutemero de opciones visibles en la tabla vendraacute dado por el argumento size

copy Grupo EIDOS 4 Elementos del lenguaje II

49

bull Con la etiqueta ltOPTIONgt iremos definiendo cada una de las opciones de la lista

bull El argumento selected va a determinar cuaacutel es la opcioacuten por defecto

Para finalizar vamos a ver el Coacutedigo fuente 16 correspondiente a una encuesta realizada por la editorial ficticia EditoPc y en la Figura 2 observamos el resultado del formulario

ltP align=centergtltBgtEDITORIAL ltIgtEditoPcltIgtltBgtltPgtltFORM action=mailtodireccionejemplo method = postgtNombreltINPUT type=text size=30 name=nombregtltBRgtE_mail ltINPUT type=text size=30 name=e_mailgtltPgtDeseas recibir informacioacuten sobreltINPUT type=checkbox name=infor1 value=InternetgtInternetltINPUT type=checkbox name=infor2 value=ProgramacioacutengtProgramacioacutenltINPUT type=checkbox name=infor3 value=SistOperativogtSistOperativoltINPUT type=checkbox name=infor4 value=OfimaacuteticagtOfimaacuteticaltPgtiquestTe conectas a Internet desde casa ltbrgtltINPUT type=radio name=intercasa value=sigtSiacuteltINPUT type=radio name=intercasa value=nogtNoltPgtiquestQueacute uso le das a tu ordenador ltBRgtltSELECT name=uso multiple size=3gtltOPTION selectedgtProfesionalltOPTIONgtDomeacutesticoltOPTIONgtOcioJuegosltSELECTgtltPgtCaracteriacutesticas de tu PCltBRgtltTEXTAREA name=caract rows=5 cols=40gtltTEXTAREAgtltPgtltINPUT type=submit value=Enviar datosgt ltINPUT type=reset value=Borrardatosgt

Coacutedigo fuente 16

Figura 2

Elementos del lenguaje III

Frames Las frames son una utilidad del HTML que nos permite dividir la ventana del navegador en diferentes subventanas que podraacuten ser manipuladas de manera independiente Esto nos permitiraacute mostrar una paacutegina web diferente en cada una de la subventanas o frames

Estructura de un documento con frames Un documento con frames se estructura de manera diferente a un documento HTML normal Asiacute en este tipo de documentos no apareceraacute la etiqueta ltBODYgt En su lugar se incluiraacute la etiqueta ltFRAMESETgt ltFRAMESETgt dentro de la cual se definiraacuten las distintas frames que se incluyan en el documento

La estructura general de un documento de este tipo seriacutea por tanto

ltHTMLgtltHEADgtCabeceraltHEADgtltFRAMESETgt

Definicioacuten de la distintas framesltFRAMESETgtltNOFRAMESgt

Instrucciones HTMLltNOFRAMESgt

ltHTMLgt

Lenguaje HTML copy Grupo EIDOS

52

Puede darse el caso de que programemos nuestro documento con frames siguiendo la estructura anterior y que el navegador que se use para leer el documento no soporte la caracteriacutestica de frames con lo cual no se mostraraacute nada de lo indicado entre las etiquetas ltFRAMESETgt y ltFRAMESETgtPara solucionar este problema todas las instrucciones HTML incluidas entre las etiquetas ltNOFRAMESgt y ltNOFRAMESgt seraacuten ejecutadas por los navegadores que no soportan las frames

La sintaxis de la etiqueta ltFRAMESETgt es

ltFRAMESET rows=Lista de filas cols=Lista de columnasgtltFRAME src=URL de la frame 1 name=Nombre de la frame 1gtltFRAME src=URL de la frame 2 name=Nombre de la frame 2gt

ltFRAME src=URL de la frame n name=Nombre de la frame ngt

ltFRAMESETgt

Como vemos por cada una de la frames que incluyamos en nuestro documento debemos incluir una etiqueta ltFRAMEgt indicando mediante sus argumentos la direccioacuten URL del documento que se insertaraacute en la subventana (src) y el nombre de la frame (name) Posteriormente describiremos la etiqueta ltFRAMEgt con maacutes detalle

Los argumentos de ltFRAMESETgt son rows y cols definieacutendose uacutenicamente uno de los dos atributos en funcioacuten de si la divisioacuten de la pantalla se realizaraacute por filas (rows) o por columnas (cols)

Por cada una de las subventanas que creemos debemos especificar su tamantildeo en puntos o en porcentaje del tamantildeo de cada subventana Asiacute por ejemplo si especificamos rows= 50 2525 crearemos tres subventanas horizontales ocupando la primera el 50 de la ventana principal y las otras dos el resto Si especificamos cols=100150 crearemos tres subventanas verticales ocupando la primera 100 puntos de la ventana principal la segunda 150 puntos y tercera el espacio restante

Vamos a verlo maacutes claramente con un par de ejemplos praacutecticos que vemos en la Tabla 54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 502525gt ltFRAMEsrc=Pagweb1htm name=Pagweb1gtltFRAMEsrc=Pagweb2htm name=Pagweb2gtltFRAMEsrc=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 7: Programacion web   lenguaje html

copy Grupo EIDOS 1 Introduccioacuten al HTML

9

Estructura de un documento HTML La estructura baacutesica de un documento HTML es la siguiente

ltHTMLgt Indica el inicio del documento ltHEADgt Indica el inicio de la cabecera

ltTITLEgt Inicio del tiacutetulo del documento

ltTITLEgt Final del tiacutetulo del documento

ltHEADgt Final de la cabecera ltBODYgt Inicio del cuerpo del documento Instrucciones HTML ltBODYgt Final del cuerpo del documento ltHTMLgt Final del documento

Ninguno de estos elementos es obligatorio pudiendo crear documentos HTML sin incluir estas etiquetas de identificacioacuten No obstante es altamente recomendable la construccioacuten de paacuteginas HTML siguiendo esta estructura para una buena estructuracioacuten y legibilidad del coacutedigo

Nuestra primera paacutegina HTML Una vez que conocemos la estructura baacutesica de un documento HTML vamos a crear una paacutegina HTML muy sencillita

1 Lo primero seraacute abrir el procesador de textos que hayamos elegido y copiar el Coacutedigo fuente 1

ltHTMLgtltHEADgtltTITLEgt Mi primera paacutegina HTML ltTITLEgtltHEADgtltBODYgtEsta es mi primera paacutegina ltBgtHTMLltBgtltBODYgtltHTMLgt

Coacutedigo fuente 1

2 Una vez tecleado el coacutedigo guardamos el documento como Pagina1htm y procedemos a

abrirlo con el navegador correspondiente El resultado seraacute

Esta es mi primera paacutegina HTML

Lenguaje HTML copy Grupo EIDOS

10

Forma del URL El URL(Uniform Resource Locator) nos van a permitir localizar y acceder a cualquier recurso de la red desde nuestro programa navegador A traveacutes de los URL podremos referenciar cualquier fichero que deseemos incluir en nuestro documento HTML Cada elemento de Internet vendraacute definido por su URL correspondiente independientemente del tipo de servidor en el que se encuentre

La forma general del URL es

Tipo de servicio maquinadominiopuertocaminoarchivo

El Tipo de servicio como su propio nombre indica hace referencia a alguno de los servicios de Internet El servicio correspondiente al WWW es http (HiperText Transport Protocol) protocolo para la transmisioacuten de hipertexto Por lo que cualquier referencia a un documento HTML deberiacutea comenzar por http Otros servicios son ftp news telnet o mailto

La maacutequinadominio indica el nombre del servidor en que se encuentra el documento al que estamos haciendo referencia junto con el dominio al que pertenece dicho servidor

El puerto es opcional y lo normal es no ponerlo indicaacutendose soacutelo en el caso de que el servidor utilice un puerto distinto al puerto por defecto

El camino indica la ruta de directorios que hay que seguir para encontrar el documento que estamos referenciando

Finalmente especificaremos el nombre del archivo en que estaacute guardado el documento en cuestioacuten Si no indicamos un archivo accederemos al archivo por defecto del directorio al que estemos referenciando(En el caso del servicio http este archivo por defecto suele ser defaulthtm oacute defaulthtml)

Vamos a ver a continuacioacuten algunos ejemplos de URL s accediendo a distintos servicios de la WWW

Localizando un documento hypertexto (http) Sintaxis

httpmaquinadominiopuertocaminoarchivo

Ejemplo1 httpwwweidoses

En este ejemplo estamos indicando el servicio al que estamos accediendo (http) la maacutequina y el dominio tomaacutendose el resto de paraacutemetros por defecto de forma que accederemos al directorio raiacutez del servidor y al documento por defecto de ese directorio en este caso estamos accediendo a la paacutegina de portada de Villa Eidos

Ejemplo2 httpwwweidosesvulcaninformahtm

Con esta URL estamos accediendo al fichero informahtm que se encuentra en el directorio vulcan del servidor wwweidoses

copy Grupo EIDOS 1 Introduccioacuten al HTML

11

Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol) Sintaxis

ftpmaquinadominiopuertocaminoarchivo

Ejemplo ftp ftpjetespubauto_ftp

En este caso estamos accediendo al servicio ftp (protocolo de transferencia de archivos) ftpjetes En este caso no estamos indicando ninguacuten archivo con lo que se referenciaraacute un iacutendice con los contenidos del directorio pubauto_ftp

Accediendo a un grupo de noticias (news) Sintaxis

newsGRUPO

Ejemplo newsjetes

En este ejemplo estamos accediendo al grupo de noticias del servidor de news jetes

Accediendo a una direccioacuten e-mail (mailto) Sintaxis

mailto Destinatario_1 Destinatario_2Destinatario_n

Ejemplo mailtocursoseidoses

Enviaraacute un mail a la direccioacuten de correo electroacutenico indicada

Localizacioacuten de un archivo cualquiera (file) Sintaxis

filemaquinadominiopuertocaminoarchivo

Ejemplo filecwindows

En este caso estamos accediendo a la carpeta Windows de la unidad C de nuestro ordenador local

Cabecera y cuerpo del documento HTML

Cabecera Cabecera del documento HTML ltHEADgt

ltHEADgt

En la cabecera de un documento HTML incluiremos las definiciones generales que afecten a todo el documento como por ejemplo el tiacutetulo de la paacutegina que apareceraacute en la parte superior de la ventana del navegador

Las etiquetas ltHEADgt y ltHEADgt son las que van a delimitar la cabecera de nuestro documento Todas la etiquetas de la cabecera son opcionales aunque se recomienda incluir en todos nuestros documentos la etiqueta ltTITLEgt correspondiente al tiacutetulo del documento

A continuacioacuten vamos a tratar cada uno de los posibles componentes de la cabecera por separado

Tiacutetulo del documento ltTITLEgtltTITLEgt

El tiacutetulo de nuestro documento viene especificado por las etiquetas ltTITLEgt y ltTITLEgt y como ya hemos mencionado este tiacutetulo es el que apareceraacute en la ventana de nuestro programa

Lenguaje HTML copy Grupo EIDOS

14

navegador Lo normal y recomendable es que el tiacutetulo guarde relacioacuten con el contenido de nuestro documento ya que por ejemplo es utilizado por algunos servidores de buacutesqueda para poder intuir el contenido de nuestro documento Veamos un ejemplo en el Coacutedigo fuente 2

ltTITLEgtMi primera paacutegina WebltTITLEgt

Coacutedigo fuente 2

Indicador de refresco del documento ltMETA http-equiv=refresh content=nuacutemero_segundosurl=URL derefrescogt

Esta etiqueta sirve para indicar un documento que deberaacute sustituir al actual transcurrido un nuacutemero determinado de segundos Una posible utilidad de esta etiqueta podriacutea ser para visualizar documentos de forma secuencial de forma que se empieza por un documento y se pasa al siguiente transcurrido un periacuteodo de tiempo sin necesidad de que la persona que lee el documento realice ninguna accioacuten

Veamos un ejemplo en el Coacutedigo fuente 3

ltMETA http-equiv=refresh content=5url=httpwwweidosesgt

Coacutedigo fuente 3

Si insertamos esta instruccioacuten en la cabecera de nuestro paacutegina HTML transcurridos 5 segundos eacutesta se refrescaraacute con la paacutegina Web de portada de Villa Eidos

Indicador de la URL base del documento ltBASE href=URLgt

Con esta etiqueta indicamos la localizacioacuten de los ficheros a los que se hace referencia en nuestra paacutegina Web Si no incluimos esta etiqueta el navegador entenderaacute que dichos ficheros se encuentran en el mismo lugar donde reside nuestra paacutegina Web

Vemos un ejemplo en el Coacutedigo fuente 4

ltBASE href=httpwwweidosesvulcangt

Coacutedigo fuente 4

Si especificamos como URL base de nuestro documento HTML la indicada en este ejemplo y posteriormente hacemos referencia en nuestra paacutegina a un fichero llamado aulahtm se entenderaacute que la localizacioacuten del fichero es httpwwweidosesvulcanaulahtm

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

15

Cuerpo Cuerpo del documento HTML ltBODYgt

ltBODYgt

En el cuerpo de un documento HTML es donde incluiremos las distintas instrucciones del lenguaje junto con el contenido en siacute de nuestra paacutegina Web textos imaacutegenes enlaces a otras paacuteginas etc

Las etiquetas ltBODYgt y ltBODYgt son las que van a delimitar el cuerpo de nuestro documento Esta posee una serie de argumentos que nos van a permitir variar las caracteriacutesticas del documento en su conjunto como por ejemplo el color del texto o del color de fondo de nuestra paacutegina web

Antes de analizar los componentes y atributos de BODY vamos a ver como se especifican los colores en un documento HTML

Estos se pueden especificar por su nombre (name) o por su coacutedigo de color que es un nuacutemero compuesto de tres pares de cifras hexadecimales que nos indican la proporcioacuten de los colores primarios (rojo verde y azul) que forman el color deseado (rrggbb)

Nombre Coacutedigo de color Color mostrado

Black 000000 Negro

Teal 008080 Teal

Blue 0000FF Azul

Navy 000080 Azul marino

Lime 00FF00 Lima

White FFFFFF Blanco

Purple 800080 Puacuterpura

Yellow FFFF00 Amarillo

Olive 808000 Oliva

Red FF0000 Rojo

maroon 800000 Marroacuten

gray 808080 Gris

fuchsia FF00FF Fucsia

green 008000 Verde

Lenguaje HTML copy Grupo EIDOS

16

silver C0C0C0 Plata

aqua 00FFFF Agua

Tabla 2

La etiqueta ltBODYgt presenta una serie de atributos que van a afectar a todo el documento en su conjunto Estos atributos nos van a permitir definir los colores del texto del fondo y de los hiperenlaces del documento Incluso nos permitiraacuten insertar una imagen de fondo en nuestra paacutegina

ltBODY background=URL bgcolor=rrggbb oacute name text=namelink=name vlink=name gt

bull background=URL Nos va a permitir mostrar una imagen como fondo de nuestro

documento HTML El camino a esta imagen vendraacute especificado por la URL que definamos Si la imagen no rellena todo el fondo del documento eacutesta seraacute reproducida tantas veces como sea necesario hasta completar todo el fondo

Si insertas el Coacutedigo fuente 5 en el documento HTML que creamos como ejemplo en el capiacutetulo anterior Pagina1htm este presentaraacute como fondo la imagen fondogif

ltBODY background=fondogifgt

Coacutedigo fuente 5

bull bgcolor=rrggbb oacute name bgcolor Background Color Nos va a permitir definir un

color para el fondo de nuestro documento Este atributo seraacute ignorado si previamente hemos utilizado el atributo background

Inserte el Coacutedigo fuente 6 en Pagina1htm y compruebe el resultado

ltBODY bgcolor=bluegt

Coacutedigo fuente 6

bull text=rrggbb oacute name Nos permitiraacute definir un color para el texto de nuestro

documento Por defecto es negro Inserte el Coacutedigo fuente 7 en Pagina1html y compruebe el resultado

ltBODY text=redgt

Coacutedigo fuente 7

Y ahora inserte el Coacutedigo fuente 8 en el documento y comprueba el resultado

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

17

ltBODY bgcolor=yellow text=navygt

Coacutedigo fuente 8

bull link=rrggbb oacute name Indica el color que tendraacuten los hiperenlaces que no han sido

accedidos Por defecto es azul Como todaviacutea no sabemos insertar hiperenlaces en nuestro documento vamos a dejar el ejemplo correspondiente para maacutes adelante

bull vlink=rrggbb oacute name vlink Visited Links Indica el color de los hiperenlaces que ya han sido accedidos Por defecto es puacuterpura

Caracteres especiales Hasta ahora hemos escrito algunos ejemplos de coacutedigo HTML pero hemos pasado por alto algunas limitaciones de HTML respecto al uso de caracteres especiales Una de estas limitaciones es por ejemplo el uso de los caracteres lt y gt que como ya sabemos indican el inicio y fin de una etiqueta HTML Pues bien si quisieacuteramos escribir estos caracteres como parte normal de un texto el navegador no sabriacutea si se trata de texto normal o del comienzo y final de una etiqueta o sea que se hariacutea un liacuteo

Como todo tiene solucioacuten existen unos coacutedigos para poder escribir estos caracteres y otros relacionados con las etiquetas los vemos en la Tabla 3

Siacutembolo Coacutedigo

lt (menor que) amplt

gt (mayor que) ampgt

amp (ampersand) ampamp

(comillas) ampquot

Tabla 3

Para las letras especiacuteficas del idioma castellano las vocales acentuadas la ntilde la uuml y los signos iquest y iexcl existen los coacutedigos que muestra la Tabla 4

Letra Coacutedigo Letra Coacutedigo Letra Coacutedigo

aacute ampaacute Aacute ampAacute ntilde ampntilde

eacute ampeacute Eacute ampEacute Ntilde ampNtilde

iacute ampiacute

Iacute ampIacute

uuml ampuuml

Lenguaje HTML copy Grupo EIDOS

18

oacute ampoacute Oacute ampOacute Uuml ampUuml

uacute ampuacute Uacute ampUacute iquest amp191

iexcl amp161

Tabla 4

Para los navegadores actuales podemos escribir nuestro coacutedigo HTML de manera directa sin tener en cuenta estos coacutedigos pero nunca podemos asegurar que las personas que accedan a nuestras paacuteginas con otros navegadores puedan leerlas correctamente Asiacute que los maacutes adecuado es el empleo de los mismos Otros siacutembolos especiales aparecen en la Tabla 5

Siacutembolo Coacutedigo

Ccedil ampccedil

Ccedil ampCcedil

copy ampcopy

reg ampreg

Tabla 5

Veamos un ejemplo en el Coacutedigo fuente 9

ampquotLa inspiraciampoacuten existe pero tiene que encontrarse trabajandoampquotampcopy Pablo Ruampiacutez Picasso

Coacutedigo fuente 9

Esta instruccioacuten HTML deberiacutea producir el siguiente resultado

La inspiracioacuten existe pero tiene que encontrarse trabajando copyPablo Ruiacutez Picasso

Para la inclusioacuten de comentarios en nuestra paacutegina HTML podemos usar la etiqueta lt-- --gt Estos comentarios nos podraacuten servir para efectuar anotaciones en nuestro documento HTML que ayuden a una mayor comprensioacuten del coacutedigo En el Coacutedigo fuente 10 se muestra un ejemplo de comentario

lt-- Esto es un comentario y no seraacute mostrado por el navegador --gt

Coacutedigo fuente 10

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

19

Espaciado y saltos de liacutenea En HTML soacutelo se admite un uacutenico espacio en blanco separando cualquier elemento o texto el resto de espacios seraacuten ignorados por el navegador al igual que las tabulaciones retornos de carro etc Veamos un ejemplo en la Tabla 6

Ejemplo Resultado

Esta frase no se veraacute asiacute en el visor Esta frase no se veraacute asiacute en el visor

Tabla 6

No obstante siacute podremos dar el formato que deseemos a nuestras paacuteginas con el empleo de los siguientes elementos del lenguaje HTML

Inclusioacuten de espacios en blanco ampnbsp Nos permitiraacute la inclusioacuten de maacutes de un espacio en blanco entre dos textos consecutivos de forma que estos espacios se muestren de forma efectiva en el navegador Tendremos que incluir tantas expresiones ampnbsp como espacios en blanco se deseen incluir

Ejemplo Resultado

Texto1ampnbspampnbspampnbspampnbspTexto2 Texto1 Texto2

Tabla 7

Salto de liacutenea ltBRgt BR Break Nos permite dar un salto a la liacutenea siguiente en el punto donde la etiqueta sea insertada

Ejemplo Resultado

Esta frase tiene aquiacuteltBRgt un salto de liacutenea Esta frase tiene aquiacute un salto de liacutenea

Tabla 8

Cambio de paacuterrafo ltPgt P Paragraph Permite definir un paacuterrafo introduciendo normalmente un espacio de separacioacuten de dos liacuteneas con el texto siguiente al punto donde hayamos insertado la etiqueta ltPgt

Lenguaje HTML copy Grupo EIDOS

20

Ejemplo Resultado

Esta frase tiene aquiacuteltPgt un cambio de paacuterrafo Esta frase tiene aquiacute

un cambio de paacuterrafo

Tabla 9

La etiqueta de fin paacuterrafo ltPgt es opcional no siendo necesario incluirla Aunque siempre es recomendable delimitar claramente el inicio y final de un paacuterrafo Ademaacutes cuando usemos esta etiqueta como cerrada ltPgt ltPgt tenemos la posibilidad de incluirle el atributo align el cual indica al navegador la forma de justificar el texto incluido en el paacuterrafo El formato seriacutea el siguiente

ltP align= left right center justify gtTexto contenido en elpaacuterrafo ltPgt

Veamos algunos ejemplos en la Tabla 10

Ejemplo Resultado

ltP align=rightgtEste es un ejemplode paacuterrafo alineado a laderechaltPgt

Este es un ejemplo de paacuterrafo alineado a la derecha

ltP align=centergtEste es unejemplo de paacuterrafo centradoltPgt

Este es un ejemplo de paacuterrafo centrado

Tabla 10

Liacutenea Horizontal ltHRgt HR Horizontal Rule Nos permite insertar una liacutenea horizontal cuyo tamantildeo podremos determinar a traveacutes de sus atributos Si no especificamos ninguacuten atributo dibujaraacute una liacutenea que ocupe el ancho de la pantalla del navegador Su utilidad es la de permitirnos dividir nuestra paacutegina en distintas secciones No seraacute necesaria la etiqueta de fin ltHRgt

El formato de la etiqueta con sus posibles atributos es

ltHR align= left right center noshade size=n width=n gt

bull align= left right center Permite establecer la alineacioacuten de la liacutenea a la izquierda a la derecha o centrarla

bull noshade No muestra la sombra de la liacutenea evitando el efecto de tres dimensiones

bull size=n Indica el grosor de la liacutenea en pixels

bull width=n oacute n Especificaraacute el ancho de la liacutenea este se podraacute especificar en pixels (n) o en tanto por ciento del ancho de la ventana (n) Vamos a ver algunos ejemplos en la Tabla 11

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

21

Ejemplo Resultado

ltHRgt

ltHR size=3 noshadegt

ltHR size=5width=50align=rightgt

ltHR size=10width=50align=centergt

Tabla 11

Texto preformateado ltPREgt PRE Preformatted Nos permitiraacute visualizar el texto tal y como se ha escrito respetando los saltos de liacutenea las tabulaciones y espacios en blanco de todo el texto incluido entre las etiquetas ltPREgt y ltPREgt

El texto se mostraraacute con una fuente de espaciado fijo maacutes pequentildea que el texto normal No es recomendable su uso ya que presenta muchas limitaciones y no se obtiene una buena presentacioacuten

Ejemplo Resultado

ltPREgtEste texto estaacutepreformateadoltPREgt

Este texto estaacute preformateado

Tabla 12

Elementos del lenguaje I

Cabeceras y atributos de texto

Cabeceras ltH1gtltH6gt H Heading En un documento HTML podemos incluir seis tipos distintos de cabeceras que van a constituir normalmente el tiacutetulo y los distintos subapartados que forman el documento aunque podremos utilizarlas en el punto que queramos del documento para resaltar cualquier texto Estas cabeceras son definidas por las etiquetas ltH1gtltH2gtltH3gtltH4gtltH5gt y ltH6gt El texto que componga cada cabecera deberaacute estar incluido entre las etiquetas de inicio (ltHngt) y fin (Hn) correspondiente La cabecera ltH1gtseraacute la que muestre el texto de mayor tamantildeo este tamantildeo iraacute disminuyendo hasta llegar a la cabecera ltH6gt Como podemos ver en la Tabla 13 Para alinear las cabeceras utilizamos el atributo align El formato seriacutea ltHn align=centergt como muestra la Tabla 14

Ejemplo Resultado

ltH1gtCabecera 1ltH1gt Cabecera 1 ltH2gtCabecera 2ltH2gt Cabecera 2

Lenguaje HTML copy Grupo EIDOS

24

ltH3gtCabecera 3ltH3gt Cabecera 3

ltH4gtCabecera 4ltH4gt Cabecera 4

ltH5gtCabecera 5ltH5gtCabecera 5

ltH6gtCabecera 6ltH6gtCabecera 6

Tabla 13

Ejemplo Resultado

ltH5 align=centergtCabecera 5ltH5gtCabecera 5

Tabla 14

Atributos del texto Al texto de nuestro documento HTML le podemos aplicar distintos atributos (negrita cursiva subrayado etc) al igual que hacemos cuando trabajamos con el procesador de textos en la edicioacuten de nuestros documentos Para aplicar estos atributos disponemos de distintas etiquetas que aplicaraacuten su efecto al texto incluido entre sus indicadores de inicio y fin Las vemos en la Tabla 15

Atributo Etiqueta Ejemplo Resultado

Negrita ltBgtltBgtltBgtTexto ennegritaltBgt

Texto en negrita

Cursiva ltIgtltIgtltIgtTexto encursivaltIgt

Texto en cursiva

Teletype ltTTgtltTTgtltTTgtTexto en modoteletypeltTTgt

Texto en modoteletype

Subrayado ltUgtltUgt ltUgtTexto subrayadoltUgt Texto subrayado Tachado ltSgtltSgt ltSgtTexto tachadoltSgt Texto tachado

Parpadeo ltBLINKgtltBLINKgtltBLINKgtTextoparpadeandoltBLINKgt

Texto parpadeando

Superiacutendice ltSUPgtltSUPgt ltSUPgtTexto en modosuperiacutendiceltSUPgt

Texto en modo superiacutendice

Subiacutendice ltSUBgtltSUBgtltSUBgtTexto en modosubiacutendiceltSUBgt

Texto en modo subiacutendice

Centrado ltCENTERgtltCENTERgt

ltCENTERgtTextocentradoltCENTERgt

Texto centrado

B Bold I Italic TT Teletype U Underlined S Strike SUP Superscript SUB Subscript

Tabla 15

copy Grupo EIDOS 3 Elementos del lenguaje I

25

Alguna de estas etiquetas no es reconocida por determinados navegadores Asiacute por ejemplo la etiqueta ltBLINKgt (Parpadeo) no es implementada por el Explorer Por lo que seguacuten el explorador que estemos utilizando podremos ver el resultado correctamente o no

Existen otras etiquetas que nos van a servir para especificar de manera diferenciada unidades loacutegicas de nuestro documento HTML tales como citas direcciones de correo etc En algunos casos el formato obtenido con estas etiquetas de estilo loacutegico va a ser el mismo que con las anteriores a las que se les denomina tambieacuten etiquetas de estilo fiacutesico Algunas etiquetas de estilo loacutegico las vemos en la Tabla 16

Etiqueta Ejemplo Resultado

ltSTRONGgtltSTRONGgtltSTRONGgtEspecifica textoresaltado (igualltBgt)ltSTRONGgt

Especifica texto resaltado(igual ltBgt)

ltCITEgtltCITEgtltCITEgtIndica una cita otiacutetulo (igual ltIgt)ltCITEgt

Indica una cita o tiacutetulo (igualltIgt)

ltSTRIKEgtltSTRIKEgtltltSTRIKEgtTexto tachado(igual ltSgt)ltSTRIKEgt

Texto tachado (igual ltSgt)

Tabla 16

Si queremos aplicar efectos maacutes espectaculares a nuestro documento HTML debemos variar el tamantildeo el color y el tipo de letra del texto La etiqueta que nos permite todo esto es ltFONTgtltFONTgt por medio de sus atributos size color y face

ltFONT size=n oacute +- n color=rrggbb oacute name face=nombre defont gt

bull size=n oacute +- n El atributo size nos permite especificar un tamantildeo determinado

para la fuente del texto incluido entre las etiquetas de inicio y fin el cual puede estar entre 1 y 7 El texto de tamantildeo normal equivale a la fuente de tamantildeo 3 (fuente base) Por tanto si especificamos size=+2 el tamantildeo de la fuente seraacute 5 Y si especificamos size= -1 el tamantildeo seraacute 2

Ejemplo Resultado

ltFONT size=2gtTamantildeo 2ltFONTgtTamantildeo 2

ltFONT size=+2gtTamantildeo 5 (3+2)ltFONTgt Tamantildeo 5 (3+2)

ltFONT size=-1gtTamantildeo 2 (3-1)ltFONTgtTamantildeo 2 (3-1)

Tabla 17

bull color=rrggbb oacute name Nos va a permitir definir el color que tendraacute el texto

incluido entre las etiquetas Tabla 18

Lenguaje HTML copy Grupo EIDOS

26

Ejemplo Resultado

ltFONT color=redgtTexto de colorrojoltFONTgt

Texto de color rojo

ltFONT color=bluegtTexto de colorazulltFONTgt

Texto de color azul

ltFONT size=5 color=008000gtTextoverde y de tamantildeo 5ltFONTgt

Texto verde y detamantildeo 5

Tabla 18

bull face=nombre de font Nos va a permitir escribir texto con el tipo de letra que le

especifiquemos En el caso de que el tipo de letra que le hayamos especificado no esteacute cargada en el ordenador que lee la paacutegina se usaraacute el font por defecto del navegador

Ejemplo Resultado

ltFONT face=TahomagtTipo de letraTahomaltFONTgt

Tipo de letra Tahoma

ltFONT size=4 color=blueface=TahomagtTexto azul de tamantildeo4 y TahomaltFONTgt

Texto azul de tamantildeo 4 y Tahoma

Tabla 19

Listas Podemos representar elementos en forma de lista dentro de nuestros documentos de una forma muy sencilla y con una gran versatilidad Estas listas podraacuten incluir cualquiera de los elementos HTML e incluso podemos definir listas anidadas es decir listas dentro de listas HTML nos permite crear tres tipos distintos de listas

bull Listas no numeradas

bull Listas numeradas

bull Listas de definiciones

Listas no numeradas ltULgt UL Unordered List

Con este tipo de listas podemos especificar una serie de elementos sin un orden predeterminado precedidos de una marca o vintildeeta que nosotros mismos podemos definir Para la definicioacuten de los liacutemites de la lista utilizaremos la etiqueta ltULgt ltULgt y para determinar cada uno de los elementos que la componen usaremos la etiqueta ltLIgt El formato es el siguiente

ltUL type=disk oacute circle oacute squaregtltLHgtTiacutetulo de la listaltLHgt

copy Grupo EIDOS 3 Elementos del lenguaje I

27

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltULgtLH List Head LI List Item

Con el atributo type vamos a especificar el tipo de marca o vintildeeta que antecederaacute a cada uno de los elementos de la lista Estas marcas podraacuten ser un disco (disk) un ciacuterculo (circle) o un cuadrado (square) La etiqueta ltLHgt nos va a servir para especificar un posible tiacutetulo de la lista siendo esta opcional Vamos a ver algunos ejemplos en la Tabla 20

Ejemplo Resultado

ltUL type=circlegtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAfricaltLIgtAmeacutericaltLIgtOceaniacutea

ltULgt

Los cinco continentes

Europa

Asia

Aacutefrica

Ameacuterica

Oceaniacutea

ltUL type=squaregtltLIgtEuropaltLIgtAsialtLIgtAfricaltLIgtAmeacutericaltUL type=circle gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltULgtltLIgtOceaniacutea

ltULgt

Europa

Asia

Aacutefrica

Ameacuterica

Ameacuterica del Norte

Ameacuterica del Sur

Oceaniacutea

Tabla 20

Listas numeradas ltOLgt OL Ordered List

Con este tipo de listas podemos especificar una serie de elementos numerados seguacuten el lugar que ocupan en la lista Para la definicioacuten de los liacutemites de la lista utilizaremos la etiqueta ltOLgt ltOLgt y para determinar cada uno de los elementos que la componen usaremos la etiqueta ltLIgt El formato es el siguiente

ltOL start=n type=Tipo de listagtltLHgtTiacutetulo de la listaltLHgt

Lenguaje HTML copy Grupo EIDOS

28

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltOLgt

Con el atributo start vamos a especificar el nuacutemero por el que va a empezar la lista Si no indicamos este argumento la lista empezaraacute a numerarse a partir del 1 Con el atributo type vamos a especificar el tipo de lista numerada Sus posibles valores aparecen a continuacioacuten y veremos algunos ejemplos en la Tabla 21

A Letras mayuacutesculas (A B C )

a Letras minuacutesculas (a b c )

I Nuacutemeros romanos en mayuacutesculas (I II III IV )

i Nuacutemeros romanos en minuacutesculas (i ii iii iv )

1 Numeacutericamente (1 2 3 4 ) (es la numeracioacuten por defecto y por tanto no habriacutea que indicarla)

Ejemplo Resultado

ltOL type=AgtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltLIgtOceaniacutea

ltOLgt

Los cinco continentes

A Europa

B Asia

C Aacutefrica

D Ameacuterica

E Oceaniacutea

ltOL type=I start=2gtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltOL type=i gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltOLgtltLIgtOceaniacutea

ltOLgt

II Europa

III Asia

IV Aacutefrica

V Ameacuterica

i Ameacuterica del Norte

ii Ameacuterica del Sur

VI Oceaniacutea

Tabla 21

copy Grupo EIDOS 3 Elementos del lenguaje I

29

Listas de definiciones ltDLgt DL Definition List

Estas listas nos van a servir para especificar una serie de teacuterminos y sus definiciones correspondientes Para la definicioacuten de la lista usaremos la etiqueta ltDLgt ltDLgt para especificar los teacuterminos usaremos la etiqueta ltDTgt y para especificar la definicioacuten correspondiente a cada teacutermino usaremos la etiqueta ltDDgt El formato es el siguiente

ltDLgtltLHgtTiacutetulo de la listaltLHgtltDTgtTeacutermino 1ltDDgtDefinicioacuten 1ltDTgtTeacutermino 2ltDDgtDefinicioacuten 2

ltDTgtTeacutermino nltDDgtDefinicioacuten n

ltDLgtDT Definition Term DD Definition Description

Vamos a ver un ejemplo en la Tabla 22

Ejemplo Resultado

ltDLgtltDTgtPariacutesltDDgtCapital de FrancialtDTgtRomaltDDgtCapital de ItalialtDTgtMadridltDDgtCapital de Espantildea

ltDLgt

Pariacutes

Capital de Francia

Roma

Capital de Italia

Madrid

Capital de Espantildea

Tabla 22

Hiperenlaces Los hiperenlaces son enlaces de hipertexto que nos van a permitir acceder de manera directa a otros documentos HTML independientemente de su ubicacioacuten o a otras zonas dentro de nuestro propio documento

Enlaces a otras paacuteginas ltA href=gt Con este tipo de hiperenlaces vamos a poder acceder tanto a otras paacuteginas que esteacuten ubicadas dentro de nuestro propio sistema como a paacuteginas ubicadas en puntos muy distantes del globo El formato de este tipo de hiperenlaces es

ltA href=URL a la que se accedegtTexto del hiperenlaceltAgt

Lenguaje HTML copy Grupo EIDOS

30

Con el atributo href vamos a especificar la URL del documento al que se pretende acceder El texto contenido entre las etiquetas de comienzo y fin nos va a servir para definir el hiperenlace por lo que deberiacutea ser clarificador del contenido del documento con el que vamos a enlazar Esta definicioacuten apareceraacute resaltada normalmente en azul y subrayada En la mayoriacutea de los navegadores esta definicioacuten del hiperenlace es sensible por lo que cuando el cursor pasa por encima del mismo este cambia de aspecto indicaacutendolo

Veamos un ejemplo en la Tabla 23

Ejemplo Resultado

ltA href=httpwwweidosesgtPaacutegina inicialde Villa EidosltAgt

Paacutegina inicial de Villa Eidos

Tabla 23

Si situamos el ratoacuten encima del hiperenlace y pulsamos el navegador accederaacute a la paacutegina Web indicada por href es decir accederaacute a la paacutegina situada en httpwwweidoses

Igualmente podriacuteamos indicar el hiperenlace por medio de una imagen Si esta imagen tiene definido un borde este apareceraacute resaltado en color azul El formato correspondiente seriacutea

ltA href=URL a la que se accedegtltIMG src=Imagengt y tambieacutentextoltAgtIMG Image src Source

Veamos un ejemplo en la Tabla 24

Ejemplo Resultado

ltA href=httpwwweidosesgtltIMGsrc=IconogifgtltAgt Villa Eidos Villa Eidos

Tabla 24

Si pulsamos sobre la imagen el navegador accederaacute a la paacutegina Web inicial de Villa Eidos

Enlaces dentro de la misma paacutegina ltA name=gt Este tipo de hiperenlaces nos va a permitir marcar distintas zonas del documento activo con el objeto de tener un acceso directo a las mismas Una buena utilidad de este tipo de enlaces radica en la creacioacuten de iacutendices para documentos largos de forma que si pinchamos en el hiperenlace correspondiente al tiacutetulo de un capiacutetulo determinado el navegador saltaraacute automaacuteticamente hasta el comienzo de dicho capiacutetulo

Para la creacioacuten de estos hiperenlaces debemos seguir dos pasos

copy Grupo EIDOS 3 Elementos del lenguaje I

31

1 Marcar las distintas zonas o secciones del documento Esto lo haremos con el paraacutemetro name

ltA name=Identificador de seccioacutengtTexto de laseccioacutenltAgt

A cada seccioacuten le asignaremos un identificador distinto para poder referenciarlas posteriormente de manera inequiacutevoca

2 Especificar un enlace a cada una de las secciones que hayamos definido ltA href=Identificador de seccioacutengtTexto del enlace a laseccioacutenltAgt

Si pinchamos en este enlace el navegador saltaraacute automaacuteticamente a la seccioacuten correspondiente Veamos un ejemplo sencillito en la Tabla 25 pero demostrativo de todo lo que acabamos de explicar

Ejemplo Resultado

ltA href=Cap1gtCapiacutetulo1ltAgtltA name=Cap1gtCapiacutetulo 1ltAgt

Capiacutetulo 1

Capiacutetulo 1

Tabla 25

Si nos creamos una paacutegina HTML con distintos capiacutetulos podriacuteamos crear una seccioacuten para cada uno de ellos de forma que si pinchamos en el hiperenlace correspondiente al Capiacutetulo 1 el navegador saltariacutea directamente a la seccioacuten correspondiente al Capiacutetulo 1

Ademaacutes de los dos tipos de hiperenlaces vistos podemos crear hiperenlaces que nos permitan acceder a cualquiera de los servicios de Internet Es decir podriacuteamos indicar enlaces a servidores FTP GOPHER NEWS MAILTO etc Para ello tendriacuteamos que indicar la URL correspondiente al servicio al cual queremos acceder como ya vimos en el primer capiacutetulo de este manual

Imaacutegenes

Podremos dar un aspecto mucho maacutes vistoso a nuestros documentos HTML con la inclusioacuten de imaacutegenes Los formatos de imagen que todos los navegadores reconocen son gif y jpg Si queremos insertar una imagen en otro formato el visor deberiacutea disponer del programa externo que permita su visualizacioacuten De todas formas una buena solucioacuten es utilizar alguacuten programa de tratamiento de imaacutegenes que nos convierta la imagen a uno de los formatos mencionados anteriormente

El formato gif es maacutes recomendado para la inclusioacuten de iconos graacuteficas y el formato jpg para el caso de insertar fotografiacuteas en nuestras paacuteginas

Lenguaje HTML copy Grupo EIDOS

32

La etiqueta que nos va a permitir la insercioacuten de imaacutegenes es ltIMGgt La imagen se insertaraacute justo en el punto del documento donde coloquemos dicha etiqueta pudiendo insertar imaacutegenes dentro de listas tablas o formularios

El formato de la etiqueta con sus posibles argumentos es el siguiente

ltIMG src=URL de la imagen alt=Texto alternativoalign=topmiddlebottonleftrigth border=Tamantildeoheight=Tamantildeo width=Tamantildeo hspace=margen vspace=margengt

bull src=URL de la imagen El atributo src nos va servir para indicar la URL de la imagen que

queremos insertar es decir el servidor y camino hasta llegar al fichero de la imagen

No seraacute necesario que la imagen que queremos insertar en nuestro documento esteacute en el ordenador local aunque siacute es recomendable ya que el acceso a las mismas puede ser maacutes lento

Por tanto es una buena praacutectica copiar todas las imaacutegenes que vayamos a incluir en nuestro documento HTML al ordenador local

Tabla 26

bull alt=Texto alternativo Nos va a permitir mostrar un texto alternativo para el caso en que el

navegador no sea capaz de mostrar la imagen Su uso es muy recomendable ya que cuando publiquemos nuestras paacuteginas en la WWW no sabremos desde queacute tipo de navegadores accederaacuten los internautas a nuestras paacuteginas

En la Tabla 27 vamos a ver un ejemplo

Si usas un navegador que no tiene ninguacuten problema para la visualizacioacuten de imaacutegenes desactiva temporalmente la opcioacuten de mostrar imaacutegenes prueba el ejemplo que muestra la Tabla 27 y compaacuteralo con el anterior

Tabla 27

copy Grupo EIDOS 3 Elementos del lenguaje I

33

bull align=topmiddlebotton leftrigth Nos permite indicar coacutemo se alinearaacute el texto que siga a la imagen

top alinea el texto con la parte superior de la imagen

middle con la parte central

bottom con la parte inferior

left imagen alineada a la izquierda de la paacutegina

rigth imagen alineada a la derecha de la paacutegina

Tabla 28

En el caso de que el texto que acompantildea a la imagen tenga maacutes de una liacutenea tan soacutelo la primera seraacute la que se alinearaacute seguacuten alguna de las anteriores alineaciones el resto de liacuteneas se incluiraacuten debajo de la imagen quedando un efecto bastante feo

Para solventar esto estaacuten las alineaciones LEFT (imagen alineada a la izquierda de la paacutegina) y RIGHT (imagen alineada a la derecha de la paacutegina) Las cuales permiten que la imagen se inserte dentro del paacuterrafo que la rodea produciendo un resultado mucho maacutes profesional en la integracioacuten de texto e imaacutegenes

Estas dos alineaciones no se podraacuten usar en combinacioacuten con las anteriores Veamos algunos ejemplos en la Tabla 29

Vemos como en el primer ejemplo la segunda liacutenea de texto aparece debajo de la imagen produciendo un efecto menos vistoso que en los dos ejemplos siguientes

Lenguaje HTML copy Grupo EIDOS

34

Tabla 29

bull border=Tamantildeo Permite antildeadirle un borde a la imagen del tamantildeo que le

especifiquemos

Si la imagen forma parte de un hiperenlace esta apareceraacute con un borde del color del hiperenlace Si no deseaacuteramos que aparezca este borde tendriacuteamos que especificar border=0

Tabla 30

bull height=Tamantildeo Permite especificar el alto de la imagen en puntos de pantalla

(pixels) o en del tamantildeo del documento

bull width=Tamantildeo Con este argumento especificaremos el ancho al que mostraremos la imagen en puntos de pantalla (pixels) o en del tamantildeo del documento

En el segundo de los ejemplos de la Tabla 31 el ancho de la imagen se ha extendido al 50 del total del ancho de la celda donde estaacute contenida la imagen Si pruebas este ejemplo en tu documento HTML la imagen se extenderaacute horizontalmente hasta ocupar el 50 del ancho de la paacutegina

copy Grupo EIDOS 3 Elementos del lenguaje I

35

Tabla 31

bull hspace=Margen hspace Horizontal Space Permite especificar el nuacutemero de espacios

horizontales (en puntos) que separaraacuten a la imagen de cualquier elemento que le siga o le anteceda

bull vspace=Margen vspace Vertical Space Con este argumento especificaremos el margen vertical (en puntos) que habraacute entre la imagen y cualquier otro elemento de nuestro documento

Tabla 32

Elementos del lenguaje II

Tablas HTML nos va a permitir la inclusioacuten de cualquiera de los elementos de nuestra paacutegina (texto imaacutegenes hiperenlaces listas etc) dentro de una tabla Gracias a lo cual conseguiremos dar una mayor y mejor estructuracioacuten a los contenidos de nuestros documentos Ademaacutes la definicioacuten de las tablas en HTML es muy abierta pudiendo en cualquier momento redimensionar la tabla es decir cambiar su nuacutemero de filas o de columnas cambiar el tamantildeo de alguna de sus celdas etc

La etiqueta que nos va a permitir la definicioacuten de tablas es ltTABLEgt ltTABLEgt

El formato general de la etiqueta sin ninguacuten argumento es el siguiente

ltTABLEgtltTR gt

ltTHgtContenido de la celda ltTHgtltTDgtContenido de la celda ltTDgt

ltTRgtltTABLEgt

TR Table Row TH Table Header TD Table Data

Vamos a analizar cada una de estas etiquetas de forma separada

1 ltTABLEgt ltTABLEgt Definicioacuten general de la tabla Dentro de ella definiremos las filas y columnas que la constituyen pudiendo incluso definir tablas dentro de tablas es decir tablas anidadas

Lenguaje HTML copy Grupo EIDOS

38

2 ltTRgt ltTRgt Definicioacuten de las filas de la tabla Por cada etiqueta ltTRgt que incluyamos se crearaacute una fila en la tabla No seraacute necesario indicar la etiqueta de cierre

3 ltTHgtltTHgt oacute ltTDgtltTDgt Definicioacuten de cada una de las celdas de la tabla Vemos que estas etiquetas estaacuten contenidas dentro de otra etiqueta de definicioacuten de fila de forma que por cada etiqueta ltTHgt o ltTDgt que incluyamos se crearaacute una celda dentro de la fila correspondiente La etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera es decir celdas cuyo contenido estaacute resaltado en negrita dejando la etiqueta ltTDgt para definir celdas de datos En este caso tampoco es necesario indicar las etiquetas de cierre

Todas estas etiquetas tienen sus respectivos argumentos Pero antes de analizar cada uno de ellos vamos a ver un ejemplo muy sencillito en la Tabla 33 que nos crearaacute una tabla de una sola celda (1 fila X 1 columna = 1 celda) Para ello usaremos la etiqueta de creacioacuten de tabla ltTABLEgt con el argumento border=1 (nos dibuja un borde de tamantildeo 1 alrededor de la tabla)

Ejemplo Resultado

ltTABLE border=1gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 33

Vamos ahora a analizar lo distintos argumentos que componen las etiquetas de la tabla analizaacutendolos desde lo general (la definicioacuten de la tabla) hasta lo especiacutefico (la definicioacuten de las celdas)

1 Definicioacuten de la tabla ltTABLEgt

ltTABLE border=n cellpadding=n cellspacing=n width=n oacute height=n oacute bgcolor=rrggbb oacute nombre gt

Contenido ltTABLEgt

bull border=n Si especificamos este argumento se dibujaraacute un borde alrededor de la

tabla del ancho que le indiquemos como muestra la Tabla 34

Ejemplo Resultado

Mi primera tabla ltTABLE border=4gtltTRgtltTDgtMi primera tablaltTABLEgt

Tabla 34

bull cellpadding=n Indica el espacio en puntos que separa el contenido de la celda con

el borde de la misma siendo 1 por defecto

copy Grupo EIDOS 4 Elementos del lenguaje II

39

Ejemplo Resultado

ltTABLE border=4 cellpadding=8gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 35

bull cellspacing=n Indica el espacio en puntos que separa a las celdas contenidas dentro de la tabla siendo 2 por defecto

bull width=n oacute Indica la anchura de la tabla en puntos o en en funcioacuten del ancho de la ventana del visualizador Si no indicamos este argumento el ancho de la tabla se ajustaraacute al tamantildeo del contenido de las celdas Esto es lo que ha ocurrido en el uacuteltimo ejemplo que hemos realizado Veamos un ejemplo en el Coacutedigo fuente 11 El resultado se muestra en la Tabla 36

ltTABLE border=4 width=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 11

Mi primera tabla

Tabla 36

bull height=n oacute Nos permite definir la altura de la tabla en puntos o en de la

altura de la ventana del visualizador Si indicamos este argumento lo recomendable es darlo en puntos ya que es maacutes complicado adecuarnos a la altura de la ventana del visualizador Al igual que en el caso anterior si no especificamos este argumento la altura se adecuaraacute al contenido de las celdas El Coacutedigo fuente 12 muestra un ejemplo y la Tabla 37 nos muestra el resultado

ltTABLE border=4 width=50 height=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 12

Mi primera tabla

Tabla 37

bull bgcolor= rrggbb o nombre del color Nos permite definir un color

de fondo para todas las celdas de la tabla Maacutes adelante veremos como podemos definir colores especiacuteficos para cada una de las celdas por separado

Lenguaje HTML copy Grupo EIDOS

40

Ejemplo Resultado

ltTABLE border=4 bgcolor=yellowgtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 38

2 Definicioacuten de las filas de la tabla ltTRgt

ltTR align=leftrightcenter valign=topmiddlebottombgcolor=rrggbb oacute nombregt

Antes de empezar a descifrar el significado de cada uno de los argumentos de esta etiqueta vamos a ver un ejemplo en la Tabla 39 de coacutemo se construiriacutea una tabla con dos filas (2 filas X 1 columna = 2 celdas)

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR gtltTDgtPrimera filaltTRgtltTDgtSegunda filaltTABLEgt

Segunda fila

Tabla 39

bull align=leftrightcenter Con este argumento vamos a indicar la alineacioacuten

horizontal (leftizquierda rightderecha centercentrado) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado Veamos un ejemplo en el Coacutedigo fuente 13 y su correspondiente resultado en la Tabla 40

ltTABLE border=4 width=50 gt ltTRgtltTDgtPrimera filaltTRalign=rightgtltTDgtSegunda filaltTABLEgt

Coacutedigo fuente 13

Primera fila

Segunda fila

Tabla 40

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten

vertical (toparriba middlecentrado bottomabajo) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado

copy Grupo EIDOS 4 Elementos del lenguaje II

41

bull bgcolor= rrggbb o nombre del color En este caso este argumento nos permitiraacute definir un color de fondo para todas las celdas de una fila veamos un ejemplo en la

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR bgcolor=yellowgtltTDgtPrimera

filaltTR bgcolor=greengtltTDgtSegunda

filaltTABLEgt

Segunda fila

Tabla 41

3 Definicioacuten de las celdas de la tabla ltTHgt oacute ltTDgt

ltTH oacute TD align=leftrightcenterjustifyvalign=topmiddlebottom bgcolor=rrggbb oacute nombre width=nrowspan=n colspan=ngt

Como ya explicamos anteriormente la etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera y la etiqueta ltTDgt para la creacioacuten de celdas de datos Vamos a completar nuestro ejemplo inicial antildeadieacutendole tres filas de dos celdas cada una (3 filas X 2 columnas = 6 celdas) Tabla 42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTDgtCelda 21ltTDgtCelda 22

ltTABLEgt Celda 21 Celda 22

Tabla 42

bull align=leftrightcenterjustify Con este argumento vamos a indicar la

alineacioacuten horizontal (left izquierda right derecha center centrado justifyjustificado) del contenido de cada celda por separado Su significado es el mismo que en la etiqueta ltTRgt

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten vertical (toparriba middlecentrado bottomabajo) del contenido de cada celda

bull bgcolor= rrggbb o nombre del color En este caso podremos definir un color de fondo para cada una de las celdas de manera independiente

bull width=n oacute Indica el ancho de la celda en puntos o en en funcioacuten del tamantildeo de la tabla

Lenguaje HTML copy Grupo EIDOS

42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera

1ltTHgtCabecera 2ltTR gtltTD align=rightgtCelda

11ltTD bgcolor=redgtCelda 12ltTRgtltTD

bgcolor=yellowgtCelda 21ltTDalign=centergtCelda 22ltTABLEgt

Celda 21 Celda 22

Tabla 43

bull rowspan=n Con este argumento podemos lograr que una celda concreta abarque maacutes de una fila ya sabemos que por defecto una celda ocupa una sola fila

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTD rowspan=2gtCelda

11ltTDgtCelda 12ltTRgtltTDgtCelda 22

ltTABLEgt

Celda 11 Celda 22

Tabla 44

bull colspan=n Con este argumento podemos lograr que una celda se expanda a maacutes

de una columna

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTD colspan=2

align=centergtCelda 22ltTABLEgt

Celda 22

Tabla 45

Para finalizar este tema sobre la creacioacuten de tablas vamos a ver el ejemplo que aparece en el Coacutedigo fuente 14 y su resultado en la Tabla 46

ltTABLE border=4gtltTR gtltTH colspan=3 bgcolor=redgtTiacutetuloltTR bgcolor=yellowgtltTHgtCabecera 1ltTHgtCabecera 2ltTHgtCabecera 3

copy Grupo EIDOS 4 Elementos del lenguaje II

43

ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTDgtCelda 13ltTRgtltTD rowspan=2gtCelda 21ltTD bgcolor=greengtCelda 22ltTDgtCelda 23ltTRgtltTDgtCelda 32ltTDgtCelda 33

ltTABLEgt

Coacutedigo fuente 14

Tiacutetulo

Cabecera 1 Cabecera 2 Cabecera 3

Celda 11 Celda 12 Celda 13

Celda 22 Celda 23 Celda 21

Celda 32 Celda 33

Tabla 46

Formularios El formulario es el elemento de HTML que nos va a permitir interactuar con los visitantes de nuestras paacuteginas web de forma que podemos solicitarle informacioacuten al usuario y procesarla De esta forma podremos crear en nuestras paacuteginas encuestas para solicitar la opinioacuten del visitante sobre alguacuten tema e incluso sobre el contenido de nuestra propia paacutegina web cuestionarios para evaluar la asimilacioacuten de contenidos sobre un tema concreto que se trate en la paacutegina etc

El contenido de la informacioacuten introducida por medio del formulario seraacute enviado a la direccioacuten URL donde resida el programa que se encargaraacute de procesar los datos A este tipo de programas externos se les denomina programas CGI (Common Gateway Interface)

La etiqueta HTML que nos va a permitir la creacioacuten de formularios es ltFORMgt Su formato es el siguiente

ltFORM action=URL del programa que trata el formulariomethod=postgetgt Elementos del formulario ltFORMgt

bull action=URL del programa que trata el formulario A traveacutes de este

argumento indicaremos como ya hemos mencionado la direccioacuten del fichero de programa que va a tratar la informacioacuten suministrada por el formulario

Tambieacuten podriacuteamos incluir como URL que trata el formulario una direccioacuten de correo electroacutenico Por tanto el valor de este argumento podriacutea ser action =mailto direccioacuten de correo

Nota Esta opcioacuten soacutelo funciona adecuadamente con el navegador Netscape Con el Explorer este enviacuteo dariacutea como resultado un correo en blanco Para que esta opcioacuten funcione de manera independiente del navegador que se esteacute utilizando se ha de emplear un programa externo que realice este proceso

Lenguaje HTML copy Grupo EIDOS

44

bull method=postget A traveacutes de este argumento indicaremos el meacutetodo empleado para transferir la informacioacuten generada por el formulario

Si indicamos post se produciraacute la modificacioacuten del documento destino como es el caso de enviar la informacioacuten a una direccioacuten de correo electroacutenico Mediante el meacutetodo get no se produciraacuten cambios en el documento destino

Dentro de un formulario podremos incluir cualquier texto o instruccioacuten HTML de las vistas a lo largo de los capiacutetulos anteriores ademaacutes claro estaacute de los elementos tiacutepicos de un formulario cajas de texto botones de seleccioacuten menuacutes de opciones etc Vamos a ver coacutemo se incluiraacuten estos elementos en un formulario

Entrada baacutesica de datos Para definir los distintos tipos de campos baacutesicos de entrada de datos usaremos la etiqueta ltINPUTgt

El formato es el siguiente

ltINPUT type= text password checkbox radio hidden submit image reset name=Variable value=Valor inicialgt

bull El argumento type determinaraacute el tipo de campo de entrada que estamos insertando A

continuacioacuten describiremos cada uno de ellos

bull El argumento name especifica el nombre de la variable que tomaraacute el valor introducido en el campo

bull El argumento value especifica el valor por defecto que tendraacute el campo

Vamos a continuacioacuten a describir los distintos tipos campos de entrada que vendraacuten dados por los valores del argumento type

Texto corto type=text

Con este argumento vamos a indicar que el campo a introducir seraacute un texto El formato seriacutea

ltINPUT type= text name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los nuevos atributos es

bull size=Tamantildeo Indicaremos el tamantildeo en caracteres de la ventana de introduccioacuten de texto

bull maxlength=Longitud maacutexima Indicaremos el nuacutemero maacuteximo de caracteres a introducir en el campo

Vamos a ver un ejemplo en la Tabla 47

copy Grupo EIDOS 4 Elementos del lenguaje II

45

Ejemplo Resultado

NombreltINPUT type=text name=Var1Value=Texto por defecto size=20 maxlength=25gt

Tabla 47

Claves type=password

Con este argumento indicamos que el campo a introducir seraacute una palabra clave por lo que los caracteres que se introduzcan seraacuten sustituidos por asteriscos en la visualizacioacuten por pantalla El formato es

ltINPUT type= password name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los distintos argumentos es el mismo que en el caso anterior Veamos un ejemplo en la Tabla 48

Ejemplo Resultado

ClaveltINPUT type=password name=Var2Value=tutankamon size=11 maxlength=10gt

Tabla 48

Botones de seleccioacuten type=checkbox

El checkbox es un botoacuten que presenta dos estados marcado (1) y desmarcado (0) Podremos variar su estado simplemente pinchando con el ratoacuten El formato es

ltINPUT type= checkbox name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto

Si incluimos el argumento value cuando el botoacuten esteacute marcado su variable asociada adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 49

Ejemplo Resultado

ltINPUT type=checkbox name=Var3 value=Op1 checkedgtOpcioacuten1 ltbrgtltINPUT type=checkbox name=Var4 value=Op2gt Opcioacuten 2

Tabla 49

Lenguaje HTML copy Grupo EIDOS

46

Seleccioacuten entre varias opciones type=radio

Este argumento se usa cuando hay que hacer una seleccioacuten entre varias alternativas excluyentes pudieacutendose seleccionar uacutenicamente una de las alternativas Debemos incluir una etiqueta radio por cada una de las posibles alternativas El formato es

ltINPUT type= radio name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto En este caso uacutenicamente uno de los botones de radio podraacute aparecer marcado ya que se usa para el caso de opciones excluyentes

Cuando un botoacuten esteacute seleccionado la variable asociada a la lista de botones adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 50

Ejemplo Resultado

ltINPUT type=radio name=Var5 value=Op1gtOpcioacuten1 ltbrgtltINPUT type=radio name=Var5 value=Op2checkedgt Opcioacuten 2 ltbrgtltINPUT type=radio name=Var5 value=Op3 gtOpcioacuten 3

Tabla 50

En este ejemplo la variable Var5 tendraacute el valor Op2

Campos ocultos type=hidden

Este tipo de campos no son visibles para el usuario Su uso tiene sentido en el caso de enviar alguacuten tipo de informacioacuten que no deba ser visualizada o variada por el lector de nuestra paacutegina Web El formato es

ltINPUT type= hidden name=Variable value=Valor gt

Con esta etiqueta asignariacuteamos a la Variable referenciada por name el Valor de value y se mandariacutea junto con el formulario sin que el usuario de la paacutegina se entere de nada Veamos un ejemplo en el Coacutedigo fuente 15

ltINPUT type=hidden name=Var6 value=tutankamongt

Coacutedigo fuente 15

copy Grupo EIDOS 4 Elementos del lenguaje II

47

Botoacuten de enviacuteo de datos type=submit

Con este argumento especificamos un botoacuten en el que al pulsar los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario El formato es

ltINPUT type= submit value=Mensaje a mostrargt

En este caso el paraacutemetro value indica el mensaje que se mostraraacute en el botoacuten Veamos un ejemplo en la Tabla 51

Ejemplo Resultado

ltINPUT type=submit value=Enviar los Datosgt

Tabla 51

Botoacuten graacutefico de enviacuteo de datos type=image

Con este argumento especificamos un botoacuten de tipo imagen en el que al igual que con el botoacuten anterior si pulsamos en la imagen los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario Su formato es el siguiente

ltINPUT type= image src=URL de la imagen name=Variablegt

Con el paraacutemetro src especificamos la URL de la imagen que seraacute insertada en el botoacuten En este caso en la variable referenciada por name se almacenaraacuten las coordenadas del punto de la imagen donde se halla pinchado (de forma que estas coordenadas podriacutean ser procesadas por el programa que recibe los datos del formulario)

Botoacuten de borrado de datos type=reset

Con este argumento especificamos un botoacuten que al ser pulsado borraraacute el contenido actual de todos los campos dejaacutendolos con sus valores por defecto Su formato es

ltINPUT type= reset value=Texto del botoacutengt

Con el paraacutemetro value especificamos el texto que etiquetaraacute al botoacuten

Ejemplo Resultado

ltINPUT type=reset value=Borrar datosgt

Tabla 52

Lenguaje HTML copy Grupo EIDOS

48

Entrada datos en muacuteltiples liacuteneas En un formulario tambieacuten podremos introducir un campo de texto que abarque varias liacuteneas Para ello usaremos la etiqueta ltTEXTAREAgt ltTEXTAREAgt Su formato es el siguiente

ltTEXTAREA name=Variable rows=Filas cols=ColumnasgtContenido por defectoltTEXTAREAgt

Los argumentos rows y cols nos van a permitir especificar respectivamente el nuacutemero de filas de texto visibles y el nuacutemero de columnas de texto visibles en el campo

Ejemplo Resultado

ltTEXTAREA name=Var7 rows=5 cols=40gtContenido por defectoltTEXTAREAgt

Tabla 53

Entrada de datos a traveacutes de campos de seleccioacuten Con los campos de seleccioacuten podremos desplegar una lista de opciones entre las que podremos seleccionar una Para ello usaremos la etiqueta ltSELECTgt ltSELECTgt Su formato es el siguiente

ltSELECT name=Variable multiple size=ngtltOPTION selected value=Valor_1gtPrimera OpcioacutenltOPTION value=Valor_2gtSegunda Opcioacuten

ltOPTION value=Valor_ngtEneacutesima Opcioacuten

ltSELECTgt

Figura 1

bull La variable referenciada por name tomaraacute el valor(value) de la opcioacuten seleccionada

bull Si especificamos el argumento muacuteltiple se mostraraacuten todas la opciones en forma de tabla El nuacutemero de opciones visibles en la tabla vendraacute dado por el argumento size

copy Grupo EIDOS 4 Elementos del lenguaje II

49

bull Con la etiqueta ltOPTIONgt iremos definiendo cada una de las opciones de la lista

bull El argumento selected va a determinar cuaacutel es la opcioacuten por defecto

Para finalizar vamos a ver el Coacutedigo fuente 16 correspondiente a una encuesta realizada por la editorial ficticia EditoPc y en la Figura 2 observamos el resultado del formulario

ltP align=centergtltBgtEDITORIAL ltIgtEditoPcltIgtltBgtltPgtltFORM action=mailtodireccionejemplo method = postgtNombreltINPUT type=text size=30 name=nombregtltBRgtE_mail ltINPUT type=text size=30 name=e_mailgtltPgtDeseas recibir informacioacuten sobreltINPUT type=checkbox name=infor1 value=InternetgtInternetltINPUT type=checkbox name=infor2 value=ProgramacioacutengtProgramacioacutenltINPUT type=checkbox name=infor3 value=SistOperativogtSistOperativoltINPUT type=checkbox name=infor4 value=OfimaacuteticagtOfimaacuteticaltPgtiquestTe conectas a Internet desde casa ltbrgtltINPUT type=radio name=intercasa value=sigtSiacuteltINPUT type=radio name=intercasa value=nogtNoltPgtiquestQueacute uso le das a tu ordenador ltBRgtltSELECT name=uso multiple size=3gtltOPTION selectedgtProfesionalltOPTIONgtDomeacutesticoltOPTIONgtOcioJuegosltSELECTgtltPgtCaracteriacutesticas de tu PCltBRgtltTEXTAREA name=caract rows=5 cols=40gtltTEXTAREAgtltPgtltINPUT type=submit value=Enviar datosgt ltINPUT type=reset value=Borrardatosgt

Coacutedigo fuente 16

Figura 2

Elementos del lenguaje III

Frames Las frames son una utilidad del HTML que nos permite dividir la ventana del navegador en diferentes subventanas que podraacuten ser manipuladas de manera independiente Esto nos permitiraacute mostrar una paacutegina web diferente en cada una de la subventanas o frames

Estructura de un documento con frames Un documento con frames se estructura de manera diferente a un documento HTML normal Asiacute en este tipo de documentos no apareceraacute la etiqueta ltBODYgt En su lugar se incluiraacute la etiqueta ltFRAMESETgt ltFRAMESETgt dentro de la cual se definiraacuten las distintas frames que se incluyan en el documento

La estructura general de un documento de este tipo seriacutea por tanto

ltHTMLgtltHEADgtCabeceraltHEADgtltFRAMESETgt

Definicioacuten de la distintas framesltFRAMESETgtltNOFRAMESgt

Instrucciones HTMLltNOFRAMESgt

ltHTMLgt

Lenguaje HTML copy Grupo EIDOS

52

Puede darse el caso de que programemos nuestro documento con frames siguiendo la estructura anterior y que el navegador que se use para leer el documento no soporte la caracteriacutestica de frames con lo cual no se mostraraacute nada de lo indicado entre las etiquetas ltFRAMESETgt y ltFRAMESETgtPara solucionar este problema todas las instrucciones HTML incluidas entre las etiquetas ltNOFRAMESgt y ltNOFRAMESgt seraacuten ejecutadas por los navegadores que no soportan las frames

La sintaxis de la etiqueta ltFRAMESETgt es

ltFRAMESET rows=Lista de filas cols=Lista de columnasgtltFRAME src=URL de la frame 1 name=Nombre de la frame 1gtltFRAME src=URL de la frame 2 name=Nombre de la frame 2gt

ltFRAME src=URL de la frame n name=Nombre de la frame ngt

ltFRAMESETgt

Como vemos por cada una de la frames que incluyamos en nuestro documento debemos incluir una etiqueta ltFRAMEgt indicando mediante sus argumentos la direccioacuten URL del documento que se insertaraacute en la subventana (src) y el nombre de la frame (name) Posteriormente describiremos la etiqueta ltFRAMEgt con maacutes detalle

Los argumentos de ltFRAMESETgt son rows y cols definieacutendose uacutenicamente uno de los dos atributos en funcioacuten de si la divisioacuten de la pantalla se realizaraacute por filas (rows) o por columnas (cols)

Por cada una de las subventanas que creemos debemos especificar su tamantildeo en puntos o en porcentaje del tamantildeo de cada subventana Asiacute por ejemplo si especificamos rows= 50 2525 crearemos tres subventanas horizontales ocupando la primera el 50 de la ventana principal y las otras dos el resto Si especificamos cols=100150 crearemos tres subventanas verticales ocupando la primera 100 puntos de la ventana principal la segunda 150 puntos y tercera el espacio restante

Vamos a verlo maacutes claramente con un par de ejemplos praacutecticos que vemos en la Tabla 54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 502525gt ltFRAMEsrc=Pagweb1htm name=Pagweb1gtltFRAMEsrc=Pagweb2htm name=Pagweb2gtltFRAMEsrc=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 8: Programacion web   lenguaje html

Lenguaje HTML copy Grupo EIDOS

10

Forma del URL El URL(Uniform Resource Locator) nos van a permitir localizar y acceder a cualquier recurso de la red desde nuestro programa navegador A traveacutes de los URL podremos referenciar cualquier fichero que deseemos incluir en nuestro documento HTML Cada elemento de Internet vendraacute definido por su URL correspondiente independientemente del tipo de servidor en el que se encuentre

La forma general del URL es

Tipo de servicio maquinadominiopuertocaminoarchivo

El Tipo de servicio como su propio nombre indica hace referencia a alguno de los servicios de Internet El servicio correspondiente al WWW es http (HiperText Transport Protocol) protocolo para la transmisioacuten de hipertexto Por lo que cualquier referencia a un documento HTML deberiacutea comenzar por http Otros servicios son ftp news telnet o mailto

La maacutequinadominio indica el nombre del servidor en que se encuentra el documento al que estamos haciendo referencia junto con el dominio al que pertenece dicho servidor

El puerto es opcional y lo normal es no ponerlo indicaacutendose soacutelo en el caso de que el servidor utilice un puerto distinto al puerto por defecto

El camino indica la ruta de directorios que hay que seguir para encontrar el documento que estamos referenciando

Finalmente especificaremos el nombre del archivo en que estaacute guardado el documento en cuestioacuten Si no indicamos un archivo accederemos al archivo por defecto del directorio al que estemos referenciando(En el caso del servicio http este archivo por defecto suele ser defaulthtm oacute defaulthtml)

Vamos a ver a continuacioacuten algunos ejemplos de URL s accediendo a distintos servicios de la WWW

Localizando un documento hypertexto (http) Sintaxis

httpmaquinadominiopuertocaminoarchivo

Ejemplo1 httpwwweidoses

En este ejemplo estamos indicando el servicio al que estamos accediendo (http) la maacutequina y el dominio tomaacutendose el resto de paraacutemetros por defecto de forma que accederemos al directorio raiacutez del servidor y al documento por defecto de ese directorio en este caso estamos accediendo a la paacutegina de portada de Villa Eidos

Ejemplo2 httpwwweidosesvulcaninformahtm

Con esta URL estamos accediendo al fichero informahtm que se encuentra en el directorio vulcan del servidor wwweidoses

copy Grupo EIDOS 1 Introduccioacuten al HTML

11

Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol) Sintaxis

ftpmaquinadominiopuertocaminoarchivo

Ejemplo ftp ftpjetespubauto_ftp

En este caso estamos accediendo al servicio ftp (protocolo de transferencia de archivos) ftpjetes En este caso no estamos indicando ninguacuten archivo con lo que se referenciaraacute un iacutendice con los contenidos del directorio pubauto_ftp

Accediendo a un grupo de noticias (news) Sintaxis

newsGRUPO

Ejemplo newsjetes

En este ejemplo estamos accediendo al grupo de noticias del servidor de news jetes

Accediendo a una direccioacuten e-mail (mailto) Sintaxis

mailto Destinatario_1 Destinatario_2Destinatario_n

Ejemplo mailtocursoseidoses

Enviaraacute un mail a la direccioacuten de correo electroacutenico indicada

Localizacioacuten de un archivo cualquiera (file) Sintaxis

filemaquinadominiopuertocaminoarchivo

Ejemplo filecwindows

En este caso estamos accediendo a la carpeta Windows de la unidad C de nuestro ordenador local

Cabecera y cuerpo del documento HTML

Cabecera Cabecera del documento HTML ltHEADgt

ltHEADgt

En la cabecera de un documento HTML incluiremos las definiciones generales que afecten a todo el documento como por ejemplo el tiacutetulo de la paacutegina que apareceraacute en la parte superior de la ventana del navegador

Las etiquetas ltHEADgt y ltHEADgt son las que van a delimitar la cabecera de nuestro documento Todas la etiquetas de la cabecera son opcionales aunque se recomienda incluir en todos nuestros documentos la etiqueta ltTITLEgt correspondiente al tiacutetulo del documento

A continuacioacuten vamos a tratar cada uno de los posibles componentes de la cabecera por separado

Tiacutetulo del documento ltTITLEgtltTITLEgt

El tiacutetulo de nuestro documento viene especificado por las etiquetas ltTITLEgt y ltTITLEgt y como ya hemos mencionado este tiacutetulo es el que apareceraacute en la ventana de nuestro programa

Lenguaje HTML copy Grupo EIDOS

14

navegador Lo normal y recomendable es que el tiacutetulo guarde relacioacuten con el contenido de nuestro documento ya que por ejemplo es utilizado por algunos servidores de buacutesqueda para poder intuir el contenido de nuestro documento Veamos un ejemplo en el Coacutedigo fuente 2

ltTITLEgtMi primera paacutegina WebltTITLEgt

Coacutedigo fuente 2

Indicador de refresco del documento ltMETA http-equiv=refresh content=nuacutemero_segundosurl=URL derefrescogt

Esta etiqueta sirve para indicar un documento que deberaacute sustituir al actual transcurrido un nuacutemero determinado de segundos Una posible utilidad de esta etiqueta podriacutea ser para visualizar documentos de forma secuencial de forma que se empieza por un documento y se pasa al siguiente transcurrido un periacuteodo de tiempo sin necesidad de que la persona que lee el documento realice ninguna accioacuten

Veamos un ejemplo en el Coacutedigo fuente 3

ltMETA http-equiv=refresh content=5url=httpwwweidosesgt

Coacutedigo fuente 3

Si insertamos esta instruccioacuten en la cabecera de nuestro paacutegina HTML transcurridos 5 segundos eacutesta se refrescaraacute con la paacutegina Web de portada de Villa Eidos

Indicador de la URL base del documento ltBASE href=URLgt

Con esta etiqueta indicamos la localizacioacuten de los ficheros a los que se hace referencia en nuestra paacutegina Web Si no incluimos esta etiqueta el navegador entenderaacute que dichos ficheros se encuentran en el mismo lugar donde reside nuestra paacutegina Web

Vemos un ejemplo en el Coacutedigo fuente 4

ltBASE href=httpwwweidosesvulcangt

Coacutedigo fuente 4

Si especificamos como URL base de nuestro documento HTML la indicada en este ejemplo y posteriormente hacemos referencia en nuestra paacutegina a un fichero llamado aulahtm se entenderaacute que la localizacioacuten del fichero es httpwwweidosesvulcanaulahtm

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

15

Cuerpo Cuerpo del documento HTML ltBODYgt

ltBODYgt

En el cuerpo de un documento HTML es donde incluiremos las distintas instrucciones del lenguaje junto con el contenido en siacute de nuestra paacutegina Web textos imaacutegenes enlaces a otras paacuteginas etc

Las etiquetas ltBODYgt y ltBODYgt son las que van a delimitar el cuerpo de nuestro documento Esta posee una serie de argumentos que nos van a permitir variar las caracteriacutesticas del documento en su conjunto como por ejemplo el color del texto o del color de fondo de nuestra paacutegina web

Antes de analizar los componentes y atributos de BODY vamos a ver como se especifican los colores en un documento HTML

Estos se pueden especificar por su nombre (name) o por su coacutedigo de color que es un nuacutemero compuesto de tres pares de cifras hexadecimales que nos indican la proporcioacuten de los colores primarios (rojo verde y azul) que forman el color deseado (rrggbb)

Nombre Coacutedigo de color Color mostrado

Black 000000 Negro

Teal 008080 Teal

Blue 0000FF Azul

Navy 000080 Azul marino

Lime 00FF00 Lima

White FFFFFF Blanco

Purple 800080 Puacuterpura

Yellow FFFF00 Amarillo

Olive 808000 Oliva

Red FF0000 Rojo

maroon 800000 Marroacuten

gray 808080 Gris

fuchsia FF00FF Fucsia

green 008000 Verde

Lenguaje HTML copy Grupo EIDOS

16

silver C0C0C0 Plata

aqua 00FFFF Agua

Tabla 2

La etiqueta ltBODYgt presenta una serie de atributos que van a afectar a todo el documento en su conjunto Estos atributos nos van a permitir definir los colores del texto del fondo y de los hiperenlaces del documento Incluso nos permitiraacuten insertar una imagen de fondo en nuestra paacutegina

ltBODY background=URL bgcolor=rrggbb oacute name text=namelink=name vlink=name gt

bull background=URL Nos va a permitir mostrar una imagen como fondo de nuestro

documento HTML El camino a esta imagen vendraacute especificado por la URL que definamos Si la imagen no rellena todo el fondo del documento eacutesta seraacute reproducida tantas veces como sea necesario hasta completar todo el fondo

Si insertas el Coacutedigo fuente 5 en el documento HTML que creamos como ejemplo en el capiacutetulo anterior Pagina1htm este presentaraacute como fondo la imagen fondogif

ltBODY background=fondogifgt

Coacutedigo fuente 5

bull bgcolor=rrggbb oacute name bgcolor Background Color Nos va a permitir definir un

color para el fondo de nuestro documento Este atributo seraacute ignorado si previamente hemos utilizado el atributo background

Inserte el Coacutedigo fuente 6 en Pagina1htm y compruebe el resultado

ltBODY bgcolor=bluegt

Coacutedigo fuente 6

bull text=rrggbb oacute name Nos permitiraacute definir un color para el texto de nuestro

documento Por defecto es negro Inserte el Coacutedigo fuente 7 en Pagina1html y compruebe el resultado

ltBODY text=redgt

Coacutedigo fuente 7

Y ahora inserte el Coacutedigo fuente 8 en el documento y comprueba el resultado

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

17

ltBODY bgcolor=yellow text=navygt

Coacutedigo fuente 8

bull link=rrggbb oacute name Indica el color que tendraacuten los hiperenlaces que no han sido

accedidos Por defecto es azul Como todaviacutea no sabemos insertar hiperenlaces en nuestro documento vamos a dejar el ejemplo correspondiente para maacutes adelante

bull vlink=rrggbb oacute name vlink Visited Links Indica el color de los hiperenlaces que ya han sido accedidos Por defecto es puacuterpura

Caracteres especiales Hasta ahora hemos escrito algunos ejemplos de coacutedigo HTML pero hemos pasado por alto algunas limitaciones de HTML respecto al uso de caracteres especiales Una de estas limitaciones es por ejemplo el uso de los caracteres lt y gt que como ya sabemos indican el inicio y fin de una etiqueta HTML Pues bien si quisieacuteramos escribir estos caracteres como parte normal de un texto el navegador no sabriacutea si se trata de texto normal o del comienzo y final de una etiqueta o sea que se hariacutea un liacuteo

Como todo tiene solucioacuten existen unos coacutedigos para poder escribir estos caracteres y otros relacionados con las etiquetas los vemos en la Tabla 3

Siacutembolo Coacutedigo

lt (menor que) amplt

gt (mayor que) ampgt

amp (ampersand) ampamp

(comillas) ampquot

Tabla 3

Para las letras especiacuteficas del idioma castellano las vocales acentuadas la ntilde la uuml y los signos iquest y iexcl existen los coacutedigos que muestra la Tabla 4

Letra Coacutedigo Letra Coacutedigo Letra Coacutedigo

aacute ampaacute Aacute ampAacute ntilde ampntilde

eacute ampeacute Eacute ampEacute Ntilde ampNtilde

iacute ampiacute

Iacute ampIacute

uuml ampuuml

Lenguaje HTML copy Grupo EIDOS

18

oacute ampoacute Oacute ampOacute Uuml ampUuml

uacute ampuacute Uacute ampUacute iquest amp191

iexcl amp161

Tabla 4

Para los navegadores actuales podemos escribir nuestro coacutedigo HTML de manera directa sin tener en cuenta estos coacutedigos pero nunca podemos asegurar que las personas que accedan a nuestras paacuteginas con otros navegadores puedan leerlas correctamente Asiacute que los maacutes adecuado es el empleo de los mismos Otros siacutembolos especiales aparecen en la Tabla 5

Siacutembolo Coacutedigo

Ccedil ampccedil

Ccedil ampCcedil

copy ampcopy

reg ampreg

Tabla 5

Veamos un ejemplo en el Coacutedigo fuente 9

ampquotLa inspiraciampoacuten existe pero tiene que encontrarse trabajandoampquotampcopy Pablo Ruampiacutez Picasso

Coacutedigo fuente 9

Esta instruccioacuten HTML deberiacutea producir el siguiente resultado

La inspiracioacuten existe pero tiene que encontrarse trabajando copyPablo Ruiacutez Picasso

Para la inclusioacuten de comentarios en nuestra paacutegina HTML podemos usar la etiqueta lt-- --gt Estos comentarios nos podraacuten servir para efectuar anotaciones en nuestro documento HTML que ayuden a una mayor comprensioacuten del coacutedigo En el Coacutedigo fuente 10 se muestra un ejemplo de comentario

lt-- Esto es un comentario y no seraacute mostrado por el navegador --gt

Coacutedigo fuente 10

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

19

Espaciado y saltos de liacutenea En HTML soacutelo se admite un uacutenico espacio en blanco separando cualquier elemento o texto el resto de espacios seraacuten ignorados por el navegador al igual que las tabulaciones retornos de carro etc Veamos un ejemplo en la Tabla 6

Ejemplo Resultado

Esta frase no se veraacute asiacute en el visor Esta frase no se veraacute asiacute en el visor

Tabla 6

No obstante siacute podremos dar el formato que deseemos a nuestras paacuteginas con el empleo de los siguientes elementos del lenguaje HTML

Inclusioacuten de espacios en blanco ampnbsp Nos permitiraacute la inclusioacuten de maacutes de un espacio en blanco entre dos textos consecutivos de forma que estos espacios se muestren de forma efectiva en el navegador Tendremos que incluir tantas expresiones ampnbsp como espacios en blanco se deseen incluir

Ejemplo Resultado

Texto1ampnbspampnbspampnbspampnbspTexto2 Texto1 Texto2

Tabla 7

Salto de liacutenea ltBRgt BR Break Nos permite dar un salto a la liacutenea siguiente en el punto donde la etiqueta sea insertada

Ejemplo Resultado

Esta frase tiene aquiacuteltBRgt un salto de liacutenea Esta frase tiene aquiacute un salto de liacutenea

Tabla 8

Cambio de paacuterrafo ltPgt P Paragraph Permite definir un paacuterrafo introduciendo normalmente un espacio de separacioacuten de dos liacuteneas con el texto siguiente al punto donde hayamos insertado la etiqueta ltPgt

Lenguaje HTML copy Grupo EIDOS

20

Ejemplo Resultado

Esta frase tiene aquiacuteltPgt un cambio de paacuterrafo Esta frase tiene aquiacute

un cambio de paacuterrafo

Tabla 9

La etiqueta de fin paacuterrafo ltPgt es opcional no siendo necesario incluirla Aunque siempre es recomendable delimitar claramente el inicio y final de un paacuterrafo Ademaacutes cuando usemos esta etiqueta como cerrada ltPgt ltPgt tenemos la posibilidad de incluirle el atributo align el cual indica al navegador la forma de justificar el texto incluido en el paacuterrafo El formato seriacutea el siguiente

ltP align= left right center justify gtTexto contenido en elpaacuterrafo ltPgt

Veamos algunos ejemplos en la Tabla 10

Ejemplo Resultado

ltP align=rightgtEste es un ejemplode paacuterrafo alineado a laderechaltPgt

Este es un ejemplo de paacuterrafo alineado a la derecha

ltP align=centergtEste es unejemplo de paacuterrafo centradoltPgt

Este es un ejemplo de paacuterrafo centrado

Tabla 10

Liacutenea Horizontal ltHRgt HR Horizontal Rule Nos permite insertar una liacutenea horizontal cuyo tamantildeo podremos determinar a traveacutes de sus atributos Si no especificamos ninguacuten atributo dibujaraacute una liacutenea que ocupe el ancho de la pantalla del navegador Su utilidad es la de permitirnos dividir nuestra paacutegina en distintas secciones No seraacute necesaria la etiqueta de fin ltHRgt

El formato de la etiqueta con sus posibles atributos es

ltHR align= left right center noshade size=n width=n gt

bull align= left right center Permite establecer la alineacioacuten de la liacutenea a la izquierda a la derecha o centrarla

bull noshade No muestra la sombra de la liacutenea evitando el efecto de tres dimensiones

bull size=n Indica el grosor de la liacutenea en pixels

bull width=n oacute n Especificaraacute el ancho de la liacutenea este se podraacute especificar en pixels (n) o en tanto por ciento del ancho de la ventana (n) Vamos a ver algunos ejemplos en la Tabla 11

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

21

Ejemplo Resultado

ltHRgt

ltHR size=3 noshadegt

ltHR size=5width=50align=rightgt

ltHR size=10width=50align=centergt

Tabla 11

Texto preformateado ltPREgt PRE Preformatted Nos permitiraacute visualizar el texto tal y como se ha escrito respetando los saltos de liacutenea las tabulaciones y espacios en blanco de todo el texto incluido entre las etiquetas ltPREgt y ltPREgt

El texto se mostraraacute con una fuente de espaciado fijo maacutes pequentildea que el texto normal No es recomendable su uso ya que presenta muchas limitaciones y no se obtiene una buena presentacioacuten

Ejemplo Resultado

ltPREgtEste texto estaacutepreformateadoltPREgt

Este texto estaacute preformateado

Tabla 12

Elementos del lenguaje I

Cabeceras y atributos de texto

Cabeceras ltH1gtltH6gt H Heading En un documento HTML podemos incluir seis tipos distintos de cabeceras que van a constituir normalmente el tiacutetulo y los distintos subapartados que forman el documento aunque podremos utilizarlas en el punto que queramos del documento para resaltar cualquier texto Estas cabeceras son definidas por las etiquetas ltH1gtltH2gtltH3gtltH4gtltH5gt y ltH6gt El texto que componga cada cabecera deberaacute estar incluido entre las etiquetas de inicio (ltHngt) y fin (Hn) correspondiente La cabecera ltH1gtseraacute la que muestre el texto de mayor tamantildeo este tamantildeo iraacute disminuyendo hasta llegar a la cabecera ltH6gt Como podemos ver en la Tabla 13 Para alinear las cabeceras utilizamos el atributo align El formato seriacutea ltHn align=centergt como muestra la Tabla 14

Ejemplo Resultado

ltH1gtCabecera 1ltH1gt Cabecera 1 ltH2gtCabecera 2ltH2gt Cabecera 2

Lenguaje HTML copy Grupo EIDOS

24

ltH3gtCabecera 3ltH3gt Cabecera 3

ltH4gtCabecera 4ltH4gt Cabecera 4

ltH5gtCabecera 5ltH5gtCabecera 5

ltH6gtCabecera 6ltH6gtCabecera 6

Tabla 13

Ejemplo Resultado

ltH5 align=centergtCabecera 5ltH5gtCabecera 5

Tabla 14

Atributos del texto Al texto de nuestro documento HTML le podemos aplicar distintos atributos (negrita cursiva subrayado etc) al igual que hacemos cuando trabajamos con el procesador de textos en la edicioacuten de nuestros documentos Para aplicar estos atributos disponemos de distintas etiquetas que aplicaraacuten su efecto al texto incluido entre sus indicadores de inicio y fin Las vemos en la Tabla 15

Atributo Etiqueta Ejemplo Resultado

Negrita ltBgtltBgtltBgtTexto ennegritaltBgt

Texto en negrita

Cursiva ltIgtltIgtltIgtTexto encursivaltIgt

Texto en cursiva

Teletype ltTTgtltTTgtltTTgtTexto en modoteletypeltTTgt

Texto en modoteletype

Subrayado ltUgtltUgt ltUgtTexto subrayadoltUgt Texto subrayado Tachado ltSgtltSgt ltSgtTexto tachadoltSgt Texto tachado

Parpadeo ltBLINKgtltBLINKgtltBLINKgtTextoparpadeandoltBLINKgt

Texto parpadeando

Superiacutendice ltSUPgtltSUPgt ltSUPgtTexto en modosuperiacutendiceltSUPgt

Texto en modo superiacutendice

Subiacutendice ltSUBgtltSUBgtltSUBgtTexto en modosubiacutendiceltSUBgt

Texto en modo subiacutendice

Centrado ltCENTERgtltCENTERgt

ltCENTERgtTextocentradoltCENTERgt

Texto centrado

B Bold I Italic TT Teletype U Underlined S Strike SUP Superscript SUB Subscript

Tabla 15

copy Grupo EIDOS 3 Elementos del lenguaje I

25

Alguna de estas etiquetas no es reconocida por determinados navegadores Asiacute por ejemplo la etiqueta ltBLINKgt (Parpadeo) no es implementada por el Explorer Por lo que seguacuten el explorador que estemos utilizando podremos ver el resultado correctamente o no

Existen otras etiquetas que nos van a servir para especificar de manera diferenciada unidades loacutegicas de nuestro documento HTML tales como citas direcciones de correo etc En algunos casos el formato obtenido con estas etiquetas de estilo loacutegico va a ser el mismo que con las anteriores a las que se les denomina tambieacuten etiquetas de estilo fiacutesico Algunas etiquetas de estilo loacutegico las vemos en la Tabla 16

Etiqueta Ejemplo Resultado

ltSTRONGgtltSTRONGgtltSTRONGgtEspecifica textoresaltado (igualltBgt)ltSTRONGgt

Especifica texto resaltado(igual ltBgt)

ltCITEgtltCITEgtltCITEgtIndica una cita otiacutetulo (igual ltIgt)ltCITEgt

Indica una cita o tiacutetulo (igualltIgt)

ltSTRIKEgtltSTRIKEgtltltSTRIKEgtTexto tachado(igual ltSgt)ltSTRIKEgt

Texto tachado (igual ltSgt)

Tabla 16

Si queremos aplicar efectos maacutes espectaculares a nuestro documento HTML debemos variar el tamantildeo el color y el tipo de letra del texto La etiqueta que nos permite todo esto es ltFONTgtltFONTgt por medio de sus atributos size color y face

ltFONT size=n oacute +- n color=rrggbb oacute name face=nombre defont gt

bull size=n oacute +- n El atributo size nos permite especificar un tamantildeo determinado

para la fuente del texto incluido entre las etiquetas de inicio y fin el cual puede estar entre 1 y 7 El texto de tamantildeo normal equivale a la fuente de tamantildeo 3 (fuente base) Por tanto si especificamos size=+2 el tamantildeo de la fuente seraacute 5 Y si especificamos size= -1 el tamantildeo seraacute 2

Ejemplo Resultado

ltFONT size=2gtTamantildeo 2ltFONTgtTamantildeo 2

ltFONT size=+2gtTamantildeo 5 (3+2)ltFONTgt Tamantildeo 5 (3+2)

ltFONT size=-1gtTamantildeo 2 (3-1)ltFONTgtTamantildeo 2 (3-1)

Tabla 17

bull color=rrggbb oacute name Nos va a permitir definir el color que tendraacute el texto

incluido entre las etiquetas Tabla 18

Lenguaje HTML copy Grupo EIDOS

26

Ejemplo Resultado

ltFONT color=redgtTexto de colorrojoltFONTgt

Texto de color rojo

ltFONT color=bluegtTexto de colorazulltFONTgt

Texto de color azul

ltFONT size=5 color=008000gtTextoverde y de tamantildeo 5ltFONTgt

Texto verde y detamantildeo 5

Tabla 18

bull face=nombre de font Nos va a permitir escribir texto con el tipo de letra que le

especifiquemos En el caso de que el tipo de letra que le hayamos especificado no esteacute cargada en el ordenador que lee la paacutegina se usaraacute el font por defecto del navegador

Ejemplo Resultado

ltFONT face=TahomagtTipo de letraTahomaltFONTgt

Tipo de letra Tahoma

ltFONT size=4 color=blueface=TahomagtTexto azul de tamantildeo4 y TahomaltFONTgt

Texto azul de tamantildeo 4 y Tahoma

Tabla 19

Listas Podemos representar elementos en forma de lista dentro de nuestros documentos de una forma muy sencilla y con una gran versatilidad Estas listas podraacuten incluir cualquiera de los elementos HTML e incluso podemos definir listas anidadas es decir listas dentro de listas HTML nos permite crear tres tipos distintos de listas

bull Listas no numeradas

bull Listas numeradas

bull Listas de definiciones

Listas no numeradas ltULgt UL Unordered List

Con este tipo de listas podemos especificar una serie de elementos sin un orden predeterminado precedidos de una marca o vintildeeta que nosotros mismos podemos definir Para la definicioacuten de los liacutemites de la lista utilizaremos la etiqueta ltULgt ltULgt y para determinar cada uno de los elementos que la componen usaremos la etiqueta ltLIgt El formato es el siguiente

ltUL type=disk oacute circle oacute squaregtltLHgtTiacutetulo de la listaltLHgt

copy Grupo EIDOS 3 Elementos del lenguaje I

27

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltULgtLH List Head LI List Item

Con el atributo type vamos a especificar el tipo de marca o vintildeeta que antecederaacute a cada uno de los elementos de la lista Estas marcas podraacuten ser un disco (disk) un ciacuterculo (circle) o un cuadrado (square) La etiqueta ltLHgt nos va a servir para especificar un posible tiacutetulo de la lista siendo esta opcional Vamos a ver algunos ejemplos en la Tabla 20

Ejemplo Resultado

ltUL type=circlegtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAfricaltLIgtAmeacutericaltLIgtOceaniacutea

ltULgt

Los cinco continentes

Europa

Asia

Aacutefrica

Ameacuterica

Oceaniacutea

ltUL type=squaregtltLIgtEuropaltLIgtAsialtLIgtAfricaltLIgtAmeacutericaltUL type=circle gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltULgtltLIgtOceaniacutea

ltULgt

Europa

Asia

Aacutefrica

Ameacuterica

Ameacuterica del Norte

Ameacuterica del Sur

Oceaniacutea

Tabla 20

Listas numeradas ltOLgt OL Ordered List

Con este tipo de listas podemos especificar una serie de elementos numerados seguacuten el lugar que ocupan en la lista Para la definicioacuten de los liacutemites de la lista utilizaremos la etiqueta ltOLgt ltOLgt y para determinar cada uno de los elementos que la componen usaremos la etiqueta ltLIgt El formato es el siguiente

ltOL start=n type=Tipo de listagtltLHgtTiacutetulo de la listaltLHgt

Lenguaje HTML copy Grupo EIDOS

28

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltOLgt

Con el atributo start vamos a especificar el nuacutemero por el que va a empezar la lista Si no indicamos este argumento la lista empezaraacute a numerarse a partir del 1 Con el atributo type vamos a especificar el tipo de lista numerada Sus posibles valores aparecen a continuacioacuten y veremos algunos ejemplos en la Tabla 21

A Letras mayuacutesculas (A B C )

a Letras minuacutesculas (a b c )

I Nuacutemeros romanos en mayuacutesculas (I II III IV )

i Nuacutemeros romanos en minuacutesculas (i ii iii iv )

1 Numeacutericamente (1 2 3 4 ) (es la numeracioacuten por defecto y por tanto no habriacutea que indicarla)

Ejemplo Resultado

ltOL type=AgtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltLIgtOceaniacutea

ltOLgt

Los cinco continentes

A Europa

B Asia

C Aacutefrica

D Ameacuterica

E Oceaniacutea

ltOL type=I start=2gtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltOL type=i gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltOLgtltLIgtOceaniacutea

ltOLgt

II Europa

III Asia

IV Aacutefrica

V Ameacuterica

i Ameacuterica del Norte

ii Ameacuterica del Sur

VI Oceaniacutea

Tabla 21

copy Grupo EIDOS 3 Elementos del lenguaje I

29

Listas de definiciones ltDLgt DL Definition List

Estas listas nos van a servir para especificar una serie de teacuterminos y sus definiciones correspondientes Para la definicioacuten de la lista usaremos la etiqueta ltDLgt ltDLgt para especificar los teacuterminos usaremos la etiqueta ltDTgt y para especificar la definicioacuten correspondiente a cada teacutermino usaremos la etiqueta ltDDgt El formato es el siguiente

ltDLgtltLHgtTiacutetulo de la listaltLHgtltDTgtTeacutermino 1ltDDgtDefinicioacuten 1ltDTgtTeacutermino 2ltDDgtDefinicioacuten 2

ltDTgtTeacutermino nltDDgtDefinicioacuten n

ltDLgtDT Definition Term DD Definition Description

Vamos a ver un ejemplo en la Tabla 22

Ejemplo Resultado

ltDLgtltDTgtPariacutesltDDgtCapital de FrancialtDTgtRomaltDDgtCapital de ItalialtDTgtMadridltDDgtCapital de Espantildea

ltDLgt

Pariacutes

Capital de Francia

Roma

Capital de Italia

Madrid

Capital de Espantildea

Tabla 22

Hiperenlaces Los hiperenlaces son enlaces de hipertexto que nos van a permitir acceder de manera directa a otros documentos HTML independientemente de su ubicacioacuten o a otras zonas dentro de nuestro propio documento

Enlaces a otras paacuteginas ltA href=gt Con este tipo de hiperenlaces vamos a poder acceder tanto a otras paacuteginas que esteacuten ubicadas dentro de nuestro propio sistema como a paacuteginas ubicadas en puntos muy distantes del globo El formato de este tipo de hiperenlaces es

ltA href=URL a la que se accedegtTexto del hiperenlaceltAgt

Lenguaje HTML copy Grupo EIDOS

30

Con el atributo href vamos a especificar la URL del documento al que se pretende acceder El texto contenido entre las etiquetas de comienzo y fin nos va a servir para definir el hiperenlace por lo que deberiacutea ser clarificador del contenido del documento con el que vamos a enlazar Esta definicioacuten apareceraacute resaltada normalmente en azul y subrayada En la mayoriacutea de los navegadores esta definicioacuten del hiperenlace es sensible por lo que cuando el cursor pasa por encima del mismo este cambia de aspecto indicaacutendolo

Veamos un ejemplo en la Tabla 23

Ejemplo Resultado

ltA href=httpwwweidosesgtPaacutegina inicialde Villa EidosltAgt

Paacutegina inicial de Villa Eidos

Tabla 23

Si situamos el ratoacuten encima del hiperenlace y pulsamos el navegador accederaacute a la paacutegina Web indicada por href es decir accederaacute a la paacutegina situada en httpwwweidoses

Igualmente podriacuteamos indicar el hiperenlace por medio de una imagen Si esta imagen tiene definido un borde este apareceraacute resaltado en color azul El formato correspondiente seriacutea

ltA href=URL a la que se accedegtltIMG src=Imagengt y tambieacutentextoltAgtIMG Image src Source

Veamos un ejemplo en la Tabla 24

Ejemplo Resultado

ltA href=httpwwweidosesgtltIMGsrc=IconogifgtltAgt Villa Eidos Villa Eidos

Tabla 24

Si pulsamos sobre la imagen el navegador accederaacute a la paacutegina Web inicial de Villa Eidos

Enlaces dentro de la misma paacutegina ltA name=gt Este tipo de hiperenlaces nos va a permitir marcar distintas zonas del documento activo con el objeto de tener un acceso directo a las mismas Una buena utilidad de este tipo de enlaces radica en la creacioacuten de iacutendices para documentos largos de forma que si pinchamos en el hiperenlace correspondiente al tiacutetulo de un capiacutetulo determinado el navegador saltaraacute automaacuteticamente hasta el comienzo de dicho capiacutetulo

Para la creacioacuten de estos hiperenlaces debemos seguir dos pasos

copy Grupo EIDOS 3 Elementos del lenguaje I

31

1 Marcar las distintas zonas o secciones del documento Esto lo haremos con el paraacutemetro name

ltA name=Identificador de seccioacutengtTexto de laseccioacutenltAgt

A cada seccioacuten le asignaremos un identificador distinto para poder referenciarlas posteriormente de manera inequiacutevoca

2 Especificar un enlace a cada una de las secciones que hayamos definido ltA href=Identificador de seccioacutengtTexto del enlace a laseccioacutenltAgt

Si pinchamos en este enlace el navegador saltaraacute automaacuteticamente a la seccioacuten correspondiente Veamos un ejemplo sencillito en la Tabla 25 pero demostrativo de todo lo que acabamos de explicar

Ejemplo Resultado

ltA href=Cap1gtCapiacutetulo1ltAgtltA name=Cap1gtCapiacutetulo 1ltAgt

Capiacutetulo 1

Capiacutetulo 1

Tabla 25

Si nos creamos una paacutegina HTML con distintos capiacutetulos podriacuteamos crear una seccioacuten para cada uno de ellos de forma que si pinchamos en el hiperenlace correspondiente al Capiacutetulo 1 el navegador saltariacutea directamente a la seccioacuten correspondiente al Capiacutetulo 1

Ademaacutes de los dos tipos de hiperenlaces vistos podemos crear hiperenlaces que nos permitan acceder a cualquiera de los servicios de Internet Es decir podriacuteamos indicar enlaces a servidores FTP GOPHER NEWS MAILTO etc Para ello tendriacuteamos que indicar la URL correspondiente al servicio al cual queremos acceder como ya vimos en el primer capiacutetulo de este manual

Imaacutegenes

Podremos dar un aspecto mucho maacutes vistoso a nuestros documentos HTML con la inclusioacuten de imaacutegenes Los formatos de imagen que todos los navegadores reconocen son gif y jpg Si queremos insertar una imagen en otro formato el visor deberiacutea disponer del programa externo que permita su visualizacioacuten De todas formas una buena solucioacuten es utilizar alguacuten programa de tratamiento de imaacutegenes que nos convierta la imagen a uno de los formatos mencionados anteriormente

El formato gif es maacutes recomendado para la inclusioacuten de iconos graacuteficas y el formato jpg para el caso de insertar fotografiacuteas en nuestras paacuteginas

Lenguaje HTML copy Grupo EIDOS

32

La etiqueta que nos va a permitir la insercioacuten de imaacutegenes es ltIMGgt La imagen se insertaraacute justo en el punto del documento donde coloquemos dicha etiqueta pudiendo insertar imaacutegenes dentro de listas tablas o formularios

El formato de la etiqueta con sus posibles argumentos es el siguiente

ltIMG src=URL de la imagen alt=Texto alternativoalign=topmiddlebottonleftrigth border=Tamantildeoheight=Tamantildeo width=Tamantildeo hspace=margen vspace=margengt

bull src=URL de la imagen El atributo src nos va servir para indicar la URL de la imagen que

queremos insertar es decir el servidor y camino hasta llegar al fichero de la imagen

No seraacute necesario que la imagen que queremos insertar en nuestro documento esteacute en el ordenador local aunque siacute es recomendable ya que el acceso a las mismas puede ser maacutes lento

Por tanto es una buena praacutectica copiar todas las imaacutegenes que vayamos a incluir en nuestro documento HTML al ordenador local

Tabla 26

bull alt=Texto alternativo Nos va a permitir mostrar un texto alternativo para el caso en que el

navegador no sea capaz de mostrar la imagen Su uso es muy recomendable ya que cuando publiquemos nuestras paacuteginas en la WWW no sabremos desde queacute tipo de navegadores accederaacuten los internautas a nuestras paacuteginas

En la Tabla 27 vamos a ver un ejemplo

Si usas un navegador que no tiene ninguacuten problema para la visualizacioacuten de imaacutegenes desactiva temporalmente la opcioacuten de mostrar imaacutegenes prueba el ejemplo que muestra la Tabla 27 y compaacuteralo con el anterior

Tabla 27

copy Grupo EIDOS 3 Elementos del lenguaje I

33

bull align=topmiddlebotton leftrigth Nos permite indicar coacutemo se alinearaacute el texto que siga a la imagen

top alinea el texto con la parte superior de la imagen

middle con la parte central

bottom con la parte inferior

left imagen alineada a la izquierda de la paacutegina

rigth imagen alineada a la derecha de la paacutegina

Tabla 28

En el caso de que el texto que acompantildea a la imagen tenga maacutes de una liacutenea tan soacutelo la primera seraacute la que se alinearaacute seguacuten alguna de las anteriores alineaciones el resto de liacuteneas se incluiraacuten debajo de la imagen quedando un efecto bastante feo

Para solventar esto estaacuten las alineaciones LEFT (imagen alineada a la izquierda de la paacutegina) y RIGHT (imagen alineada a la derecha de la paacutegina) Las cuales permiten que la imagen se inserte dentro del paacuterrafo que la rodea produciendo un resultado mucho maacutes profesional en la integracioacuten de texto e imaacutegenes

Estas dos alineaciones no se podraacuten usar en combinacioacuten con las anteriores Veamos algunos ejemplos en la Tabla 29

Vemos como en el primer ejemplo la segunda liacutenea de texto aparece debajo de la imagen produciendo un efecto menos vistoso que en los dos ejemplos siguientes

Lenguaje HTML copy Grupo EIDOS

34

Tabla 29

bull border=Tamantildeo Permite antildeadirle un borde a la imagen del tamantildeo que le

especifiquemos

Si la imagen forma parte de un hiperenlace esta apareceraacute con un borde del color del hiperenlace Si no deseaacuteramos que aparezca este borde tendriacuteamos que especificar border=0

Tabla 30

bull height=Tamantildeo Permite especificar el alto de la imagen en puntos de pantalla

(pixels) o en del tamantildeo del documento

bull width=Tamantildeo Con este argumento especificaremos el ancho al que mostraremos la imagen en puntos de pantalla (pixels) o en del tamantildeo del documento

En el segundo de los ejemplos de la Tabla 31 el ancho de la imagen se ha extendido al 50 del total del ancho de la celda donde estaacute contenida la imagen Si pruebas este ejemplo en tu documento HTML la imagen se extenderaacute horizontalmente hasta ocupar el 50 del ancho de la paacutegina

copy Grupo EIDOS 3 Elementos del lenguaje I

35

Tabla 31

bull hspace=Margen hspace Horizontal Space Permite especificar el nuacutemero de espacios

horizontales (en puntos) que separaraacuten a la imagen de cualquier elemento que le siga o le anteceda

bull vspace=Margen vspace Vertical Space Con este argumento especificaremos el margen vertical (en puntos) que habraacute entre la imagen y cualquier otro elemento de nuestro documento

Tabla 32

Elementos del lenguaje II

Tablas HTML nos va a permitir la inclusioacuten de cualquiera de los elementos de nuestra paacutegina (texto imaacutegenes hiperenlaces listas etc) dentro de una tabla Gracias a lo cual conseguiremos dar una mayor y mejor estructuracioacuten a los contenidos de nuestros documentos Ademaacutes la definicioacuten de las tablas en HTML es muy abierta pudiendo en cualquier momento redimensionar la tabla es decir cambiar su nuacutemero de filas o de columnas cambiar el tamantildeo de alguna de sus celdas etc

La etiqueta que nos va a permitir la definicioacuten de tablas es ltTABLEgt ltTABLEgt

El formato general de la etiqueta sin ninguacuten argumento es el siguiente

ltTABLEgtltTR gt

ltTHgtContenido de la celda ltTHgtltTDgtContenido de la celda ltTDgt

ltTRgtltTABLEgt

TR Table Row TH Table Header TD Table Data

Vamos a analizar cada una de estas etiquetas de forma separada

1 ltTABLEgt ltTABLEgt Definicioacuten general de la tabla Dentro de ella definiremos las filas y columnas que la constituyen pudiendo incluso definir tablas dentro de tablas es decir tablas anidadas

Lenguaje HTML copy Grupo EIDOS

38

2 ltTRgt ltTRgt Definicioacuten de las filas de la tabla Por cada etiqueta ltTRgt que incluyamos se crearaacute una fila en la tabla No seraacute necesario indicar la etiqueta de cierre

3 ltTHgtltTHgt oacute ltTDgtltTDgt Definicioacuten de cada una de las celdas de la tabla Vemos que estas etiquetas estaacuten contenidas dentro de otra etiqueta de definicioacuten de fila de forma que por cada etiqueta ltTHgt o ltTDgt que incluyamos se crearaacute una celda dentro de la fila correspondiente La etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera es decir celdas cuyo contenido estaacute resaltado en negrita dejando la etiqueta ltTDgt para definir celdas de datos En este caso tampoco es necesario indicar las etiquetas de cierre

Todas estas etiquetas tienen sus respectivos argumentos Pero antes de analizar cada uno de ellos vamos a ver un ejemplo muy sencillito en la Tabla 33 que nos crearaacute una tabla de una sola celda (1 fila X 1 columna = 1 celda) Para ello usaremos la etiqueta de creacioacuten de tabla ltTABLEgt con el argumento border=1 (nos dibuja un borde de tamantildeo 1 alrededor de la tabla)

Ejemplo Resultado

ltTABLE border=1gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 33

Vamos ahora a analizar lo distintos argumentos que componen las etiquetas de la tabla analizaacutendolos desde lo general (la definicioacuten de la tabla) hasta lo especiacutefico (la definicioacuten de las celdas)

1 Definicioacuten de la tabla ltTABLEgt

ltTABLE border=n cellpadding=n cellspacing=n width=n oacute height=n oacute bgcolor=rrggbb oacute nombre gt

Contenido ltTABLEgt

bull border=n Si especificamos este argumento se dibujaraacute un borde alrededor de la

tabla del ancho que le indiquemos como muestra la Tabla 34

Ejemplo Resultado

Mi primera tabla ltTABLE border=4gtltTRgtltTDgtMi primera tablaltTABLEgt

Tabla 34

bull cellpadding=n Indica el espacio en puntos que separa el contenido de la celda con

el borde de la misma siendo 1 por defecto

copy Grupo EIDOS 4 Elementos del lenguaje II

39

Ejemplo Resultado

ltTABLE border=4 cellpadding=8gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 35

bull cellspacing=n Indica el espacio en puntos que separa a las celdas contenidas dentro de la tabla siendo 2 por defecto

bull width=n oacute Indica la anchura de la tabla en puntos o en en funcioacuten del ancho de la ventana del visualizador Si no indicamos este argumento el ancho de la tabla se ajustaraacute al tamantildeo del contenido de las celdas Esto es lo que ha ocurrido en el uacuteltimo ejemplo que hemos realizado Veamos un ejemplo en el Coacutedigo fuente 11 El resultado se muestra en la Tabla 36

ltTABLE border=4 width=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 11

Mi primera tabla

Tabla 36

bull height=n oacute Nos permite definir la altura de la tabla en puntos o en de la

altura de la ventana del visualizador Si indicamos este argumento lo recomendable es darlo en puntos ya que es maacutes complicado adecuarnos a la altura de la ventana del visualizador Al igual que en el caso anterior si no especificamos este argumento la altura se adecuaraacute al contenido de las celdas El Coacutedigo fuente 12 muestra un ejemplo y la Tabla 37 nos muestra el resultado

ltTABLE border=4 width=50 height=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 12

Mi primera tabla

Tabla 37

bull bgcolor= rrggbb o nombre del color Nos permite definir un color

de fondo para todas las celdas de la tabla Maacutes adelante veremos como podemos definir colores especiacuteficos para cada una de las celdas por separado

Lenguaje HTML copy Grupo EIDOS

40

Ejemplo Resultado

ltTABLE border=4 bgcolor=yellowgtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 38

2 Definicioacuten de las filas de la tabla ltTRgt

ltTR align=leftrightcenter valign=topmiddlebottombgcolor=rrggbb oacute nombregt

Antes de empezar a descifrar el significado de cada uno de los argumentos de esta etiqueta vamos a ver un ejemplo en la Tabla 39 de coacutemo se construiriacutea una tabla con dos filas (2 filas X 1 columna = 2 celdas)

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR gtltTDgtPrimera filaltTRgtltTDgtSegunda filaltTABLEgt

Segunda fila

Tabla 39

bull align=leftrightcenter Con este argumento vamos a indicar la alineacioacuten

horizontal (leftizquierda rightderecha centercentrado) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado Veamos un ejemplo en el Coacutedigo fuente 13 y su correspondiente resultado en la Tabla 40

ltTABLE border=4 width=50 gt ltTRgtltTDgtPrimera filaltTRalign=rightgtltTDgtSegunda filaltTABLEgt

Coacutedigo fuente 13

Primera fila

Segunda fila

Tabla 40

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten

vertical (toparriba middlecentrado bottomabajo) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado

copy Grupo EIDOS 4 Elementos del lenguaje II

41

bull bgcolor= rrggbb o nombre del color En este caso este argumento nos permitiraacute definir un color de fondo para todas las celdas de una fila veamos un ejemplo en la

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR bgcolor=yellowgtltTDgtPrimera

filaltTR bgcolor=greengtltTDgtSegunda

filaltTABLEgt

Segunda fila

Tabla 41

3 Definicioacuten de las celdas de la tabla ltTHgt oacute ltTDgt

ltTH oacute TD align=leftrightcenterjustifyvalign=topmiddlebottom bgcolor=rrggbb oacute nombre width=nrowspan=n colspan=ngt

Como ya explicamos anteriormente la etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera y la etiqueta ltTDgt para la creacioacuten de celdas de datos Vamos a completar nuestro ejemplo inicial antildeadieacutendole tres filas de dos celdas cada una (3 filas X 2 columnas = 6 celdas) Tabla 42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTDgtCelda 21ltTDgtCelda 22

ltTABLEgt Celda 21 Celda 22

Tabla 42

bull align=leftrightcenterjustify Con este argumento vamos a indicar la

alineacioacuten horizontal (left izquierda right derecha center centrado justifyjustificado) del contenido de cada celda por separado Su significado es el mismo que en la etiqueta ltTRgt

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten vertical (toparriba middlecentrado bottomabajo) del contenido de cada celda

bull bgcolor= rrggbb o nombre del color En este caso podremos definir un color de fondo para cada una de las celdas de manera independiente

bull width=n oacute Indica el ancho de la celda en puntos o en en funcioacuten del tamantildeo de la tabla

Lenguaje HTML copy Grupo EIDOS

42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera

1ltTHgtCabecera 2ltTR gtltTD align=rightgtCelda

11ltTD bgcolor=redgtCelda 12ltTRgtltTD

bgcolor=yellowgtCelda 21ltTDalign=centergtCelda 22ltTABLEgt

Celda 21 Celda 22

Tabla 43

bull rowspan=n Con este argumento podemos lograr que una celda concreta abarque maacutes de una fila ya sabemos que por defecto una celda ocupa una sola fila

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTD rowspan=2gtCelda

11ltTDgtCelda 12ltTRgtltTDgtCelda 22

ltTABLEgt

Celda 11 Celda 22

Tabla 44

bull colspan=n Con este argumento podemos lograr que una celda se expanda a maacutes

de una columna

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTD colspan=2

align=centergtCelda 22ltTABLEgt

Celda 22

Tabla 45

Para finalizar este tema sobre la creacioacuten de tablas vamos a ver el ejemplo que aparece en el Coacutedigo fuente 14 y su resultado en la Tabla 46

ltTABLE border=4gtltTR gtltTH colspan=3 bgcolor=redgtTiacutetuloltTR bgcolor=yellowgtltTHgtCabecera 1ltTHgtCabecera 2ltTHgtCabecera 3

copy Grupo EIDOS 4 Elementos del lenguaje II

43

ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTDgtCelda 13ltTRgtltTD rowspan=2gtCelda 21ltTD bgcolor=greengtCelda 22ltTDgtCelda 23ltTRgtltTDgtCelda 32ltTDgtCelda 33

ltTABLEgt

Coacutedigo fuente 14

Tiacutetulo

Cabecera 1 Cabecera 2 Cabecera 3

Celda 11 Celda 12 Celda 13

Celda 22 Celda 23 Celda 21

Celda 32 Celda 33

Tabla 46

Formularios El formulario es el elemento de HTML que nos va a permitir interactuar con los visitantes de nuestras paacuteginas web de forma que podemos solicitarle informacioacuten al usuario y procesarla De esta forma podremos crear en nuestras paacuteginas encuestas para solicitar la opinioacuten del visitante sobre alguacuten tema e incluso sobre el contenido de nuestra propia paacutegina web cuestionarios para evaluar la asimilacioacuten de contenidos sobre un tema concreto que se trate en la paacutegina etc

El contenido de la informacioacuten introducida por medio del formulario seraacute enviado a la direccioacuten URL donde resida el programa que se encargaraacute de procesar los datos A este tipo de programas externos se les denomina programas CGI (Common Gateway Interface)

La etiqueta HTML que nos va a permitir la creacioacuten de formularios es ltFORMgt Su formato es el siguiente

ltFORM action=URL del programa que trata el formulariomethod=postgetgt Elementos del formulario ltFORMgt

bull action=URL del programa que trata el formulario A traveacutes de este

argumento indicaremos como ya hemos mencionado la direccioacuten del fichero de programa que va a tratar la informacioacuten suministrada por el formulario

Tambieacuten podriacuteamos incluir como URL que trata el formulario una direccioacuten de correo electroacutenico Por tanto el valor de este argumento podriacutea ser action =mailto direccioacuten de correo

Nota Esta opcioacuten soacutelo funciona adecuadamente con el navegador Netscape Con el Explorer este enviacuteo dariacutea como resultado un correo en blanco Para que esta opcioacuten funcione de manera independiente del navegador que se esteacute utilizando se ha de emplear un programa externo que realice este proceso

Lenguaje HTML copy Grupo EIDOS

44

bull method=postget A traveacutes de este argumento indicaremos el meacutetodo empleado para transferir la informacioacuten generada por el formulario

Si indicamos post se produciraacute la modificacioacuten del documento destino como es el caso de enviar la informacioacuten a una direccioacuten de correo electroacutenico Mediante el meacutetodo get no se produciraacuten cambios en el documento destino

Dentro de un formulario podremos incluir cualquier texto o instruccioacuten HTML de las vistas a lo largo de los capiacutetulos anteriores ademaacutes claro estaacute de los elementos tiacutepicos de un formulario cajas de texto botones de seleccioacuten menuacutes de opciones etc Vamos a ver coacutemo se incluiraacuten estos elementos en un formulario

Entrada baacutesica de datos Para definir los distintos tipos de campos baacutesicos de entrada de datos usaremos la etiqueta ltINPUTgt

El formato es el siguiente

ltINPUT type= text password checkbox radio hidden submit image reset name=Variable value=Valor inicialgt

bull El argumento type determinaraacute el tipo de campo de entrada que estamos insertando A

continuacioacuten describiremos cada uno de ellos

bull El argumento name especifica el nombre de la variable que tomaraacute el valor introducido en el campo

bull El argumento value especifica el valor por defecto que tendraacute el campo

Vamos a continuacioacuten a describir los distintos tipos campos de entrada que vendraacuten dados por los valores del argumento type

Texto corto type=text

Con este argumento vamos a indicar que el campo a introducir seraacute un texto El formato seriacutea

ltINPUT type= text name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los nuevos atributos es

bull size=Tamantildeo Indicaremos el tamantildeo en caracteres de la ventana de introduccioacuten de texto

bull maxlength=Longitud maacutexima Indicaremos el nuacutemero maacuteximo de caracteres a introducir en el campo

Vamos a ver un ejemplo en la Tabla 47

copy Grupo EIDOS 4 Elementos del lenguaje II

45

Ejemplo Resultado

NombreltINPUT type=text name=Var1Value=Texto por defecto size=20 maxlength=25gt

Tabla 47

Claves type=password

Con este argumento indicamos que el campo a introducir seraacute una palabra clave por lo que los caracteres que se introduzcan seraacuten sustituidos por asteriscos en la visualizacioacuten por pantalla El formato es

ltINPUT type= password name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los distintos argumentos es el mismo que en el caso anterior Veamos un ejemplo en la Tabla 48

Ejemplo Resultado

ClaveltINPUT type=password name=Var2Value=tutankamon size=11 maxlength=10gt

Tabla 48

Botones de seleccioacuten type=checkbox

El checkbox es un botoacuten que presenta dos estados marcado (1) y desmarcado (0) Podremos variar su estado simplemente pinchando con el ratoacuten El formato es

ltINPUT type= checkbox name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto

Si incluimos el argumento value cuando el botoacuten esteacute marcado su variable asociada adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 49

Ejemplo Resultado

ltINPUT type=checkbox name=Var3 value=Op1 checkedgtOpcioacuten1 ltbrgtltINPUT type=checkbox name=Var4 value=Op2gt Opcioacuten 2

Tabla 49

Lenguaje HTML copy Grupo EIDOS

46

Seleccioacuten entre varias opciones type=radio

Este argumento se usa cuando hay que hacer una seleccioacuten entre varias alternativas excluyentes pudieacutendose seleccionar uacutenicamente una de las alternativas Debemos incluir una etiqueta radio por cada una de las posibles alternativas El formato es

ltINPUT type= radio name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto En este caso uacutenicamente uno de los botones de radio podraacute aparecer marcado ya que se usa para el caso de opciones excluyentes

Cuando un botoacuten esteacute seleccionado la variable asociada a la lista de botones adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 50

Ejemplo Resultado

ltINPUT type=radio name=Var5 value=Op1gtOpcioacuten1 ltbrgtltINPUT type=radio name=Var5 value=Op2checkedgt Opcioacuten 2 ltbrgtltINPUT type=radio name=Var5 value=Op3 gtOpcioacuten 3

Tabla 50

En este ejemplo la variable Var5 tendraacute el valor Op2

Campos ocultos type=hidden

Este tipo de campos no son visibles para el usuario Su uso tiene sentido en el caso de enviar alguacuten tipo de informacioacuten que no deba ser visualizada o variada por el lector de nuestra paacutegina Web El formato es

ltINPUT type= hidden name=Variable value=Valor gt

Con esta etiqueta asignariacuteamos a la Variable referenciada por name el Valor de value y se mandariacutea junto con el formulario sin que el usuario de la paacutegina se entere de nada Veamos un ejemplo en el Coacutedigo fuente 15

ltINPUT type=hidden name=Var6 value=tutankamongt

Coacutedigo fuente 15

copy Grupo EIDOS 4 Elementos del lenguaje II

47

Botoacuten de enviacuteo de datos type=submit

Con este argumento especificamos un botoacuten en el que al pulsar los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario El formato es

ltINPUT type= submit value=Mensaje a mostrargt

En este caso el paraacutemetro value indica el mensaje que se mostraraacute en el botoacuten Veamos un ejemplo en la Tabla 51

Ejemplo Resultado

ltINPUT type=submit value=Enviar los Datosgt

Tabla 51

Botoacuten graacutefico de enviacuteo de datos type=image

Con este argumento especificamos un botoacuten de tipo imagen en el que al igual que con el botoacuten anterior si pulsamos en la imagen los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario Su formato es el siguiente

ltINPUT type= image src=URL de la imagen name=Variablegt

Con el paraacutemetro src especificamos la URL de la imagen que seraacute insertada en el botoacuten En este caso en la variable referenciada por name se almacenaraacuten las coordenadas del punto de la imagen donde se halla pinchado (de forma que estas coordenadas podriacutean ser procesadas por el programa que recibe los datos del formulario)

Botoacuten de borrado de datos type=reset

Con este argumento especificamos un botoacuten que al ser pulsado borraraacute el contenido actual de todos los campos dejaacutendolos con sus valores por defecto Su formato es

ltINPUT type= reset value=Texto del botoacutengt

Con el paraacutemetro value especificamos el texto que etiquetaraacute al botoacuten

Ejemplo Resultado

ltINPUT type=reset value=Borrar datosgt

Tabla 52

Lenguaje HTML copy Grupo EIDOS

48

Entrada datos en muacuteltiples liacuteneas En un formulario tambieacuten podremos introducir un campo de texto que abarque varias liacuteneas Para ello usaremos la etiqueta ltTEXTAREAgt ltTEXTAREAgt Su formato es el siguiente

ltTEXTAREA name=Variable rows=Filas cols=ColumnasgtContenido por defectoltTEXTAREAgt

Los argumentos rows y cols nos van a permitir especificar respectivamente el nuacutemero de filas de texto visibles y el nuacutemero de columnas de texto visibles en el campo

Ejemplo Resultado

ltTEXTAREA name=Var7 rows=5 cols=40gtContenido por defectoltTEXTAREAgt

Tabla 53

Entrada de datos a traveacutes de campos de seleccioacuten Con los campos de seleccioacuten podremos desplegar una lista de opciones entre las que podremos seleccionar una Para ello usaremos la etiqueta ltSELECTgt ltSELECTgt Su formato es el siguiente

ltSELECT name=Variable multiple size=ngtltOPTION selected value=Valor_1gtPrimera OpcioacutenltOPTION value=Valor_2gtSegunda Opcioacuten

ltOPTION value=Valor_ngtEneacutesima Opcioacuten

ltSELECTgt

Figura 1

bull La variable referenciada por name tomaraacute el valor(value) de la opcioacuten seleccionada

bull Si especificamos el argumento muacuteltiple se mostraraacuten todas la opciones en forma de tabla El nuacutemero de opciones visibles en la tabla vendraacute dado por el argumento size

copy Grupo EIDOS 4 Elementos del lenguaje II

49

bull Con la etiqueta ltOPTIONgt iremos definiendo cada una de las opciones de la lista

bull El argumento selected va a determinar cuaacutel es la opcioacuten por defecto

Para finalizar vamos a ver el Coacutedigo fuente 16 correspondiente a una encuesta realizada por la editorial ficticia EditoPc y en la Figura 2 observamos el resultado del formulario

ltP align=centergtltBgtEDITORIAL ltIgtEditoPcltIgtltBgtltPgtltFORM action=mailtodireccionejemplo method = postgtNombreltINPUT type=text size=30 name=nombregtltBRgtE_mail ltINPUT type=text size=30 name=e_mailgtltPgtDeseas recibir informacioacuten sobreltINPUT type=checkbox name=infor1 value=InternetgtInternetltINPUT type=checkbox name=infor2 value=ProgramacioacutengtProgramacioacutenltINPUT type=checkbox name=infor3 value=SistOperativogtSistOperativoltINPUT type=checkbox name=infor4 value=OfimaacuteticagtOfimaacuteticaltPgtiquestTe conectas a Internet desde casa ltbrgtltINPUT type=radio name=intercasa value=sigtSiacuteltINPUT type=radio name=intercasa value=nogtNoltPgtiquestQueacute uso le das a tu ordenador ltBRgtltSELECT name=uso multiple size=3gtltOPTION selectedgtProfesionalltOPTIONgtDomeacutesticoltOPTIONgtOcioJuegosltSELECTgtltPgtCaracteriacutesticas de tu PCltBRgtltTEXTAREA name=caract rows=5 cols=40gtltTEXTAREAgtltPgtltINPUT type=submit value=Enviar datosgt ltINPUT type=reset value=Borrardatosgt

Coacutedigo fuente 16

Figura 2

Elementos del lenguaje III

Frames Las frames son una utilidad del HTML que nos permite dividir la ventana del navegador en diferentes subventanas que podraacuten ser manipuladas de manera independiente Esto nos permitiraacute mostrar una paacutegina web diferente en cada una de la subventanas o frames

Estructura de un documento con frames Un documento con frames se estructura de manera diferente a un documento HTML normal Asiacute en este tipo de documentos no apareceraacute la etiqueta ltBODYgt En su lugar se incluiraacute la etiqueta ltFRAMESETgt ltFRAMESETgt dentro de la cual se definiraacuten las distintas frames que se incluyan en el documento

La estructura general de un documento de este tipo seriacutea por tanto

ltHTMLgtltHEADgtCabeceraltHEADgtltFRAMESETgt

Definicioacuten de la distintas framesltFRAMESETgtltNOFRAMESgt

Instrucciones HTMLltNOFRAMESgt

ltHTMLgt

Lenguaje HTML copy Grupo EIDOS

52

Puede darse el caso de que programemos nuestro documento con frames siguiendo la estructura anterior y que el navegador que se use para leer el documento no soporte la caracteriacutestica de frames con lo cual no se mostraraacute nada de lo indicado entre las etiquetas ltFRAMESETgt y ltFRAMESETgtPara solucionar este problema todas las instrucciones HTML incluidas entre las etiquetas ltNOFRAMESgt y ltNOFRAMESgt seraacuten ejecutadas por los navegadores que no soportan las frames

La sintaxis de la etiqueta ltFRAMESETgt es

ltFRAMESET rows=Lista de filas cols=Lista de columnasgtltFRAME src=URL de la frame 1 name=Nombre de la frame 1gtltFRAME src=URL de la frame 2 name=Nombre de la frame 2gt

ltFRAME src=URL de la frame n name=Nombre de la frame ngt

ltFRAMESETgt

Como vemos por cada una de la frames que incluyamos en nuestro documento debemos incluir una etiqueta ltFRAMEgt indicando mediante sus argumentos la direccioacuten URL del documento que se insertaraacute en la subventana (src) y el nombre de la frame (name) Posteriormente describiremos la etiqueta ltFRAMEgt con maacutes detalle

Los argumentos de ltFRAMESETgt son rows y cols definieacutendose uacutenicamente uno de los dos atributos en funcioacuten de si la divisioacuten de la pantalla se realizaraacute por filas (rows) o por columnas (cols)

Por cada una de las subventanas que creemos debemos especificar su tamantildeo en puntos o en porcentaje del tamantildeo de cada subventana Asiacute por ejemplo si especificamos rows= 50 2525 crearemos tres subventanas horizontales ocupando la primera el 50 de la ventana principal y las otras dos el resto Si especificamos cols=100150 crearemos tres subventanas verticales ocupando la primera 100 puntos de la ventana principal la segunda 150 puntos y tercera el espacio restante

Vamos a verlo maacutes claramente con un par de ejemplos praacutecticos que vemos en la Tabla 54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 502525gt ltFRAMEsrc=Pagweb1htm name=Pagweb1gtltFRAMEsrc=Pagweb2htm name=Pagweb2gtltFRAMEsrc=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 9: Programacion web   lenguaje html

copy Grupo EIDOS 1 Introduccioacuten al HTML

11

Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol) Sintaxis

ftpmaquinadominiopuertocaminoarchivo

Ejemplo ftp ftpjetespubauto_ftp

En este caso estamos accediendo al servicio ftp (protocolo de transferencia de archivos) ftpjetes En este caso no estamos indicando ninguacuten archivo con lo que se referenciaraacute un iacutendice con los contenidos del directorio pubauto_ftp

Accediendo a un grupo de noticias (news) Sintaxis

newsGRUPO

Ejemplo newsjetes

En este ejemplo estamos accediendo al grupo de noticias del servidor de news jetes

Accediendo a una direccioacuten e-mail (mailto) Sintaxis

mailto Destinatario_1 Destinatario_2Destinatario_n

Ejemplo mailtocursoseidoses

Enviaraacute un mail a la direccioacuten de correo electroacutenico indicada

Localizacioacuten de un archivo cualquiera (file) Sintaxis

filemaquinadominiopuertocaminoarchivo

Ejemplo filecwindows

En este caso estamos accediendo a la carpeta Windows de la unidad C de nuestro ordenador local

Cabecera y cuerpo del documento HTML

Cabecera Cabecera del documento HTML ltHEADgt

ltHEADgt

En la cabecera de un documento HTML incluiremos las definiciones generales que afecten a todo el documento como por ejemplo el tiacutetulo de la paacutegina que apareceraacute en la parte superior de la ventana del navegador

Las etiquetas ltHEADgt y ltHEADgt son las que van a delimitar la cabecera de nuestro documento Todas la etiquetas de la cabecera son opcionales aunque se recomienda incluir en todos nuestros documentos la etiqueta ltTITLEgt correspondiente al tiacutetulo del documento

A continuacioacuten vamos a tratar cada uno de los posibles componentes de la cabecera por separado

Tiacutetulo del documento ltTITLEgtltTITLEgt

El tiacutetulo de nuestro documento viene especificado por las etiquetas ltTITLEgt y ltTITLEgt y como ya hemos mencionado este tiacutetulo es el que apareceraacute en la ventana de nuestro programa

Lenguaje HTML copy Grupo EIDOS

14

navegador Lo normal y recomendable es que el tiacutetulo guarde relacioacuten con el contenido de nuestro documento ya que por ejemplo es utilizado por algunos servidores de buacutesqueda para poder intuir el contenido de nuestro documento Veamos un ejemplo en el Coacutedigo fuente 2

ltTITLEgtMi primera paacutegina WebltTITLEgt

Coacutedigo fuente 2

Indicador de refresco del documento ltMETA http-equiv=refresh content=nuacutemero_segundosurl=URL derefrescogt

Esta etiqueta sirve para indicar un documento que deberaacute sustituir al actual transcurrido un nuacutemero determinado de segundos Una posible utilidad de esta etiqueta podriacutea ser para visualizar documentos de forma secuencial de forma que se empieza por un documento y se pasa al siguiente transcurrido un periacuteodo de tiempo sin necesidad de que la persona que lee el documento realice ninguna accioacuten

Veamos un ejemplo en el Coacutedigo fuente 3

ltMETA http-equiv=refresh content=5url=httpwwweidosesgt

Coacutedigo fuente 3

Si insertamos esta instruccioacuten en la cabecera de nuestro paacutegina HTML transcurridos 5 segundos eacutesta se refrescaraacute con la paacutegina Web de portada de Villa Eidos

Indicador de la URL base del documento ltBASE href=URLgt

Con esta etiqueta indicamos la localizacioacuten de los ficheros a los que se hace referencia en nuestra paacutegina Web Si no incluimos esta etiqueta el navegador entenderaacute que dichos ficheros se encuentran en el mismo lugar donde reside nuestra paacutegina Web

Vemos un ejemplo en el Coacutedigo fuente 4

ltBASE href=httpwwweidosesvulcangt

Coacutedigo fuente 4

Si especificamos como URL base de nuestro documento HTML la indicada en este ejemplo y posteriormente hacemos referencia en nuestra paacutegina a un fichero llamado aulahtm se entenderaacute que la localizacioacuten del fichero es httpwwweidosesvulcanaulahtm

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

15

Cuerpo Cuerpo del documento HTML ltBODYgt

ltBODYgt

En el cuerpo de un documento HTML es donde incluiremos las distintas instrucciones del lenguaje junto con el contenido en siacute de nuestra paacutegina Web textos imaacutegenes enlaces a otras paacuteginas etc

Las etiquetas ltBODYgt y ltBODYgt son las que van a delimitar el cuerpo de nuestro documento Esta posee una serie de argumentos que nos van a permitir variar las caracteriacutesticas del documento en su conjunto como por ejemplo el color del texto o del color de fondo de nuestra paacutegina web

Antes de analizar los componentes y atributos de BODY vamos a ver como se especifican los colores en un documento HTML

Estos se pueden especificar por su nombre (name) o por su coacutedigo de color que es un nuacutemero compuesto de tres pares de cifras hexadecimales que nos indican la proporcioacuten de los colores primarios (rojo verde y azul) que forman el color deseado (rrggbb)

Nombre Coacutedigo de color Color mostrado

Black 000000 Negro

Teal 008080 Teal

Blue 0000FF Azul

Navy 000080 Azul marino

Lime 00FF00 Lima

White FFFFFF Blanco

Purple 800080 Puacuterpura

Yellow FFFF00 Amarillo

Olive 808000 Oliva

Red FF0000 Rojo

maroon 800000 Marroacuten

gray 808080 Gris

fuchsia FF00FF Fucsia

green 008000 Verde

Lenguaje HTML copy Grupo EIDOS

16

silver C0C0C0 Plata

aqua 00FFFF Agua

Tabla 2

La etiqueta ltBODYgt presenta una serie de atributos que van a afectar a todo el documento en su conjunto Estos atributos nos van a permitir definir los colores del texto del fondo y de los hiperenlaces del documento Incluso nos permitiraacuten insertar una imagen de fondo en nuestra paacutegina

ltBODY background=URL bgcolor=rrggbb oacute name text=namelink=name vlink=name gt

bull background=URL Nos va a permitir mostrar una imagen como fondo de nuestro

documento HTML El camino a esta imagen vendraacute especificado por la URL que definamos Si la imagen no rellena todo el fondo del documento eacutesta seraacute reproducida tantas veces como sea necesario hasta completar todo el fondo

Si insertas el Coacutedigo fuente 5 en el documento HTML que creamos como ejemplo en el capiacutetulo anterior Pagina1htm este presentaraacute como fondo la imagen fondogif

ltBODY background=fondogifgt

Coacutedigo fuente 5

bull bgcolor=rrggbb oacute name bgcolor Background Color Nos va a permitir definir un

color para el fondo de nuestro documento Este atributo seraacute ignorado si previamente hemos utilizado el atributo background

Inserte el Coacutedigo fuente 6 en Pagina1htm y compruebe el resultado

ltBODY bgcolor=bluegt

Coacutedigo fuente 6

bull text=rrggbb oacute name Nos permitiraacute definir un color para el texto de nuestro

documento Por defecto es negro Inserte el Coacutedigo fuente 7 en Pagina1html y compruebe el resultado

ltBODY text=redgt

Coacutedigo fuente 7

Y ahora inserte el Coacutedigo fuente 8 en el documento y comprueba el resultado

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

17

ltBODY bgcolor=yellow text=navygt

Coacutedigo fuente 8

bull link=rrggbb oacute name Indica el color que tendraacuten los hiperenlaces que no han sido

accedidos Por defecto es azul Como todaviacutea no sabemos insertar hiperenlaces en nuestro documento vamos a dejar el ejemplo correspondiente para maacutes adelante

bull vlink=rrggbb oacute name vlink Visited Links Indica el color de los hiperenlaces que ya han sido accedidos Por defecto es puacuterpura

Caracteres especiales Hasta ahora hemos escrito algunos ejemplos de coacutedigo HTML pero hemos pasado por alto algunas limitaciones de HTML respecto al uso de caracteres especiales Una de estas limitaciones es por ejemplo el uso de los caracteres lt y gt que como ya sabemos indican el inicio y fin de una etiqueta HTML Pues bien si quisieacuteramos escribir estos caracteres como parte normal de un texto el navegador no sabriacutea si se trata de texto normal o del comienzo y final de una etiqueta o sea que se hariacutea un liacuteo

Como todo tiene solucioacuten existen unos coacutedigos para poder escribir estos caracteres y otros relacionados con las etiquetas los vemos en la Tabla 3

Siacutembolo Coacutedigo

lt (menor que) amplt

gt (mayor que) ampgt

amp (ampersand) ampamp

(comillas) ampquot

Tabla 3

Para las letras especiacuteficas del idioma castellano las vocales acentuadas la ntilde la uuml y los signos iquest y iexcl existen los coacutedigos que muestra la Tabla 4

Letra Coacutedigo Letra Coacutedigo Letra Coacutedigo

aacute ampaacute Aacute ampAacute ntilde ampntilde

eacute ampeacute Eacute ampEacute Ntilde ampNtilde

iacute ampiacute

Iacute ampIacute

uuml ampuuml

Lenguaje HTML copy Grupo EIDOS

18

oacute ampoacute Oacute ampOacute Uuml ampUuml

uacute ampuacute Uacute ampUacute iquest amp191

iexcl amp161

Tabla 4

Para los navegadores actuales podemos escribir nuestro coacutedigo HTML de manera directa sin tener en cuenta estos coacutedigos pero nunca podemos asegurar que las personas que accedan a nuestras paacuteginas con otros navegadores puedan leerlas correctamente Asiacute que los maacutes adecuado es el empleo de los mismos Otros siacutembolos especiales aparecen en la Tabla 5

Siacutembolo Coacutedigo

Ccedil ampccedil

Ccedil ampCcedil

copy ampcopy

reg ampreg

Tabla 5

Veamos un ejemplo en el Coacutedigo fuente 9

ampquotLa inspiraciampoacuten existe pero tiene que encontrarse trabajandoampquotampcopy Pablo Ruampiacutez Picasso

Coacutedigo fuente 9

Esta instruccioacuten HTML deberiacutea producir el siguiente resultado

La inspiracioacuten existe pero tiene que encontrarse trabajando copyPablo Ruiacutez Picasso

Para la inclusioacuten de comentarios en nuestra paacutegina HTML podemos usar la etiqueta lt-- --gt Estos comentarios nos podraacuten servir para efectuar anotaciones en nuestro documento HTML que ayuden a una mayor comprensioacuten del coacutedigo En el Coacutedigo fuente 10 se muestra un ejemplo de comentario

lt-- Esto es un comentario y no seraacute mostrado por el navegador --gt

Coacutedigo fuente 10

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

19

Espaciado y saltos de liacutenea En HTML soacutelo se admite un uacutenico espacio en blanco separando cualquier elemento o texto el resto de espacios seraacuten ignorados por el navegador al igual que las tabulaciones retornos de carro etc Veamos un ejemplo en la Tabla 6

Ejemplo Resultado

Esta frase no se veraacute asiacute en el visor Esta frase no se veraacute asiacute en el visor

Tabla 6

No obstante siacute podremos dar el formato que deseemos a nuestras paacuteginas con el empleo de los siguientes elementos del lenguaje HTML

Inclusioacuten de espacios en blanco ampnbsp Nos permitiraacute la inclusioacuten de maacutes de un espacio en blanco entre dos textos consecutivos de forma que estos espacios se muestren de forma efectiva en el navegador Tendremos que incluir tantas expresiones ampnbsp como espacios en blanco se deseen incluir

Ejemplo Resultado

Texto1ampnbspampnbspampnbspampnbspTexto2 Texto1 Texto2

Tabla 7

Salto de liacutenea ltBRgt BR Break Nos permite dar un salto a la liacutenea siguiente en el punto donde la etiqueta sea insertada

Ejemplo Resultado

Esta frase tiene aquiacuteltBRgt un salto de liacutenea Esta frase tiene aquiacute un salto de liacutenea

Tabla 8

Cambio de paacuterrafo ltPgt P Paragraph Permite definir un paacuterrafo introduciendo normalmente un espacio de separacioacuten de dos liacuteneas con el texto siguiente al punto donde hayamos insertado la etiqueta ltPgt

Lenguaje HTML copy Grupo EIDOS

20

Ejemplo Resultado

Esta frase tiene aquiacuteltPgt un cambio de paacuterrafo Esta frase tiene aquiacute

un cambio de paacuterrafo

Tabla 9

La etiqueta de fin paacuterrafo ltPgt es opcional no siendo necesario incluirla Aunque siempre es recomendable delimitar claramente el inicio y final de un paacuterrafo Ademaacutes cuando usemos esta etiqueta como cerrada ltPgt ltPgt tenemos la posibilidad de incluirle el atributo align el cual indica al navegador la forma de justificar el texto incluido en el paacuterrafo El formato seriacutea el siguiente

ltP align= left right center justify gtTexto contenido en elpaacuterrafo ltPgt

Veamos algunos ejemplos en la Tabla 10

Ejemplo Resultado

ltP align=rightgtEste es un ejemplode paacuterrafo alineado a laderechaltPgt

Este es un ejemplo de paacuterrafo alineado a la derecha

ltP align=centergtEste es unejemplo de paacuterrafo centradoltPgt

Este es un ejemplo de paacuterrafo centrado

Tabla 10

Liacutenea Horizontal ltHRgt HR Horizontal Rule Nos permite insertar una liacutenea horizontal cuyo tamantildeo podremos determinar a traveacutes de sus atributos Si no especificamos ninguacuten atributo dibujaraacute una liacutenea que ocupe el ancho de la pantalla del navegador Su utilidad es la de permitirnos dividir nuestra paacutegina en distintas secciones No seraacute necesaria la etiqueta de fin ltHRgt

El formato de la etiqueta con sus posibles atributos es

ltHR align= left right center noshade size=n width=n gt

bull align= left right center Permite establecer la alineacioacuten de la liacutenea a la izquierda a la derecha o centrarla

bull noshade No muestra la sombra de la liacutenea evitando el efecto de tres dimensiones

bull size=n Indica el grosor de la liacutenea en pixels

bull width=n oacute n Especificaraacute el ancho de la liacutenea este se podraacute especificar en pixels (n) o en tanto por ciento del ancho de la ventana (n) Vamos a ver algunos ejemplos en la Tabla 11

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

21

Ejemplo Resultado

ltHRgt

ltHR size=3 noshadegt

ltHR size=5width=50align=rightgt

ltHR size=10width=50align=centergt

Tabla 11

Texto preformateado ltPREgt PRE Preformatted Nos permitiraacute visualizar el texto tal y como se ha escrito respetando los saltos de liacutenea las tabulaciones y espacios en blanco de todo el texto incluido entre las etiquetas ltPREgt y ltPREgt

El texto se mostraraacute con una fuente de espaciado fijo maacutes pequentildea que el texto normal No es recomendable su uso ya que presenta muchas limitaciones y no se obtiene una buena presentacioacuten

Ejemplo Resultado

ltPREgtEste texto estaacutepreformateadoltPREgt

Este texto estaacute preformateado

Tabla 12

Elementos del lenguaje I

Cabeceras y atributos de texto

Cabeceras ltH1gtltH6gt H Heading En un documento HTML podemos incluir seis tipos distintos de cabeceras que van a constituir normalmente el tiacutetulo y los distintos subapartados que forman el documento aunque podremos utilizarlas en el punto que queramos del documento para resaltar cualquier texto Estas cabeceras son definidas por las etiquetas ltH1gtltH2gtltH3gtltH4gtltH5gt y ltH6gt El texto que componga cada cabecera deberaacute estar incluido entre las etiquetas de inicio (ltHngt) y fin (Hn) correspondiente La cabecera ltH1gtseraacute la que muestre el texto de mayor tamantildeo este tamantildeo iraacute disminuyendo hasta llegar a la cabecera ltH6gt Como podemos ver en la Tabla 13 Para alinear las cabeceras utilizamos el atributo align El formato seriacutea ltHn align=centergt como muestra la Tabla 14

Ejemplo Resultado

ltH1gtCabecera 1ltH1gt Cabecera 1 ltH2gtCabecera 2ltH2gt Cabecera 2

Lenguaje HTML copy Grupo EIDOS

24

ltH3gtCabecera 3ltH3gt Cabecera 3

ltH4gtCabecera 4ltH4gt Cabecera 4

ltH5gtCabecera 5ltH5gtCabecera 5

ltH6gtCabecera 6ltH6gtCabecera 6

Tabla 13

Ejemplo Resultado

ltH5 align=centergtCabecera 5ltH5gtCabecera 5

Tabla 14

Atributos del texto Al texto de nuestro documento HTML le podemos aplicar distintos atributos (negrita cursiva subrayado etc) al igual que hacemos cuando trabajamos con el procesador de textos en la edicioacuten de nuestros documentos Para aplicar estos atributos disponemos de distintas etiquetas que aplicaraacuten su efecto al texto incluido entre sus indicadores de inicio y fin Las vemos en la Tabla 15

Atributo Etiqueta Ejemplo Resultado

Negrita ltBgtltBgtltBgtTexto ennegritaltBgt

Texto en negrita

Cursiva ltIgtltIgtltIgtTexto encursivaltIgt

Texto en cursiva

Teletype ltTTgtltTTgtltTTgtTexto en modoteletypeltTTgt

Texto en modoteletype

Subrayado ltUgtltUgt ltUgtTexto subrayadoltUgt Texto subrayado Tachado ltSgtltSgt ltSgtTexto tachadoltSgt Texto tachado

Parpadeo ltBLINKgtltBLINKgtltBLINKgtTextoparpadeandoltBLINKgt

Texto parpadeando

Superiacutendice ltSUPgtltSUPgt ltSUPgtTexto en modosuperiacutendiceltSUPgt

Texto en modo superiacutendice

Subiacutendice ltSUBgtltSUBgtltSUBgtTexto en modosubiacutendiceltSUBgt

Texto en modo subiacutendice

Centrado ltCENTERgtltCENTERgt

ltCENTERgtTextocentradoltCENTERgt

Texto centrado

B Bold I Italic TT Teletype U Underlined S Strike SUP Superscript SUB Subscript

Tabla 15

copy Grupo EIDOS 3 Elementos del lenguaje I

25

Alguna de estas etiquetas no es reconocida por determinados navegadores Asiacute por ejemplo la etiqueta ltBLINKgt (Parpadeo) no es implementada por el Explorer Por lo que seguacuten el explorador que estemos utilizando podremos ver el resultado correctamente o no

Existen otras etiquetas que nos van a servir para especificar de manera diferenciada unidades loacutegicas de nuestro documento HTML tales como citas direcciones de correo etc En algunos casos el formato obtenido con estas etiquetas de estilo loacutegico va a ser el mismo que con las anteriores a las que se les denomina tambieacuten etiquetas de estilo fiacutesico Algunas etiquetas de estilo loacutegico las vemos en la Tabla 16

Etiqueta Ejemplo Resultado

ltSTRONGgtltSTRONGgtltSTRONGgtEspecifica textoresaltado (igualltBgt)ltSTRONGgt

Especifica texto resaltado(igual ltBgt)

ltCITEgtltCITEgtltCITEgtIndica una cita otiacutetulo (igual ltIgt)ltCITEgt

Indica una cita o tiacutetulo (igualltIgt)

ltSTRIKEgtltSTRIKEgtltltSTRIKEgtTexto tachado(igual ltSgt)ltSTRIKEgt

Texto tachado (igual ltSgt)

Tabla 16

Si queremos aplicar efectos maacutes espectaculares a nuestro documento HTML debemos variar el tamantildeo el color y el tipo de letra del texto La etiqueta que nos permite todo esto es ltFONTgtltFONTgt por medio de sus atributos size color y face

ltFONT size=n oacute +- n color=rrggbb oacute name face=nombre defont gt

bull size=n oacute +- n El atributo size nos permite especificar un tamantildeo determinado

para la fuente del texto incluido entre las etiquetas de inicio y fin el cual puede estar entre 1 y 7 El texto de tamantildeo normal equivale a la fuente de tamantildeo 3 (fuente base) Por tanto si especificamos size=+2 el tamantildeo de la fuente seraacute 5 Y si especificamos size= -1 el tamantildeo seraacute 2

Ejemplo Resultado

ltFONT size=2gtTamantildeo 2ltFONTgtTamantildeo 2

ltFONT size=+2gtTamantildeo 5 (3+2)ltFONTgt Tamantildeo 5 (3+2)

ltFONT size=-1gtTamantildeo 2 (3-1)ltFONTgtTamantildeo 2 (3-1)

Tabla 17

bull color=rrggbb oacute name Nos va a permitir definir el color que tendraacute el texto

incluido entre las etiquetas Tabla 18

Lenguaje HTML copy Grupo EIDOS

26

Ejemplo Resultado

ltFONT color=redgtTexto de colorrojoltFONTgt

Texto de color rojo

ltFONT color=bluegtTexto de colorazulltFONTgt

Texto de color azul

ltFONT size=5 color=008000gtTextoverde y de tamantildeo 5ltFONTgt

Texto verde y detamantildeo 5

Tabla 18

bull face=nombre de font Nos va a permitir escribir texto con el tipo de letra que le

especifiquemos En el caso de que el tipo de letra que le hayamos especificado no esteacute cargada en el ordenador que lee la paacutegina se usaraacute el font por defecto del navegador

Ejemplo Resultado

ltFONT face=TahomagtTipo de letraTahomaltFONTgt

Tipo de letra Tahoma

ltFONT size=4 color=blueface=TahomagtTexto azul de tamantildeo4 y TahomaltFONTgt

Texto azul de tamantildeo 4 y Tahoma

Tabla 19

Listas Podemos representar elementos en forma de lista dentro de nuestros documentos de una forma muy sencilla y con una gran versatilidad Estas listas podraacuten incluir cualquiera de los elementos HTML e incluso podemos definir listas anidadas es decir listas dentro de listas HTML nos permite crear tres tipos distintos de listas

bull Listas no numeradas

bull Listas numeradas

bull Listas de definiciones

Listas no numeradas ltULgt UL Unordered List

Con este tipo de listas podemos especificar una serie de elementos sin un orden predeterminado precedidos de una marca o vintildeeta que nosotros mismos podemos definir Para la definicioacuten de los liacutemites de la lista utilizaremos la etiqueta ltULgt ltULgt y para determinar cada uno de los elementos que la componen usaremos la etiqueta ltLIgt El formato es el siguiente

ltUL type=disk oacute circle oacute squaregtltLHgtTiacutetulo de la listaltLHgt

copy Grupo EIDOS 3 Elementos del lenguaje I

27

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltULgtLH List Head LI List Item

Con el atributo type vamos a especificar el tipo de marca o vintildeeta que antecederaacute a cada uno de los elementos de la lista Estas marcas podraacuten ser un disco (disk) un ciacuterculo (circle) o un cuadrado (square) La etiqueta ltLHgt nos va a servir para especificar un posible tiacutetulo de la lista siendo esta opcional Vamos a ver algunos ejemplos en la Tabla 20

Ejemplo Resultado

ltUL type=circlegtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAfricaltLIgtAmeacutericaltLIgtOceaniacutea

ltULgt

Los cinco continentes

Europa

Asia

Aacutefrica

Ameacuterica

Oceaniacutea

ltUL type=squaregtltLIgtEuropaltLIgtAsialtLIgtAfricaltLIgtAmeacutericaltUL type=circle gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltULgtltLIgtOceaniacutea

ltULgt

Europa

Asia

Aacutefrica

Ameacuterica

Ameacuterica del Norte

Ameacuterica del Sur

Oceaniacutea

Tabla 20

Listas numeradas ltOLgt OL Ordered List

Con este tipo de listas podemos especificar una serie de elementos numerados seguacuten el lugar que ocupan en la lista Para la definicioacuten de los liacutemites de la lista utilizaremos la etiqueta ltOLgt ltOLgt y para determinar cada uno de los elementos que la componen usaremos la etiqueta ltLIgt El formato es el siguiente

ltOL start=n type=Tipo de listagtltLHgtTiacutetulo de la listaltLHgt

Lenguaje HTML copy Grupo EIDOS

28

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltOLgt

Con el atributo start vamos a especificar el nuacutemero por el que va a empezar la lista Si no indicamos este argumento la lista empezaraacute a numerarse a partir del 1 Con el atributo type vamos a especificar el tipo de lista numerada Sus posibles valores aparecen a continuacioacuten y veremos algunos ejemplos en la Tabla 21

A Letras mayuacutesculas (A B C )

a Letras minuacutesculas (a b c )

I Nuacutemeros romanos en mayuacutesculas (I II III IV )

i Nuacutemeros romanos en minuacutesculas (i ii iii iv )

1 Numeacutericamente (1 2 3 4 ) (es la numeracioacuten por defecto y por tanto no habriacutea que indicarla)

Ejemplo Resultado

ltOL type=AgtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltLIgtOceaniacutea

ltOLgt

Los cinco continentes

A Europa

B Asia

C Aacutefrica

D Ameacuterica

E Oceaniacutea

ltOL type=I start=2gtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltOL type=i gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltOLgtltLIgtOceaniacutea

ltOLgt

II Europa

III Asia

IV Aacutefrica

V Ameacuterica

i Ameacuterica del Norte

ii Ameacuterica del Sur

VI Oceaniacutea

Tabla 21

copy Grupo EIDOS 3 Elementos del lenguaje I

29

Listas de definiciones ltDLgt DL Definition List

Estas listas nos van a servir para especificar una serie de teacuterminos y sus definiciones correspondientes Para la definicioacuten de la lista usaremos la etiqueta ltDLgt ltDLgt para especificar los teacuterminos usaremos la etiqueta ltDTgt y para especificar la definicioacuten correspondiente a cada teacutermino usaremos la etiqueta ltDDgt El formato es el siguiente

ltDLgtltLHgtTiacutetulo de la listaltLHgtltDTgtTeacutermino 1ltDDgtDefinicioacuten 1ltDTgtTeacutermino 2ltDDgtDefinicioacuten 2

ltDTgtTeacutermino nltDDgtDefinicioacuten n

ltDLgtDT Definition Term DD Definition Description

Vamos a ver un ejemplo en la Tabla 22

Ejemplo Resultado

ltDLgtltDTgtPariacutesltDDgtCapital de FrancialtDTgtRomaltDDgtCapital de ItalialtDTgtMadridltDDgtCapital de Espantildea

ltDLgt

Pariacutes

Capital de Francia

Roma

Capital de Italia

Madrid

Capital de Espantildea

Tabla 22

Hiperenlaces Los hiperenlaces son enlaces de hipertexto que nos van a permitir acceder de manera directa a otros documentos HTML independientemente de su ubicacioacuten o a otras zonas dentro de nuestro propio documento

Enlaces a otras paacuteginas ltA href=gt Con este tipo de hiperenlaces vamos a poder acceder tanto a otras paacuteginas que esteacuten ubicadas dentro de nuestro propio sistema como a paacuteginas ubicadas en puntos muy distantes del globo El formato de este tipo de hiperenlaces es

ltA href=URL a la que se accedegtTexto del hiperenlaceltAgt

Lenguaje HTML copy Grupo EIDOS

30

Con el atributo href vamos a especificar la URL del documento al que se pretende acceder El texto contenido entre las etiquetas de comienzo y fin nos va a servir para definir el hiperenlace por lo que deberiacutea ser clarificador del contenido del documento con el que vamos a enlazar Esta definicioacuten apareceraacute resaltada normalmente en azul y subrayada En la mayoriacutea de los navegadores esta definicioacuten del hiperenlace es sensible por lo que cuando el cursor pasa por encima del mismo este cambia de aspecto indicaacutendolo

Veamos un ejemplo en la Tabla 23

Ejemplo Resultado

ltA href=httpwwweidosesgtPaacutegina inicialde Villa EidosltAgt

Paacutegina inicial de Villa Eidos

Tabla 23

Si situamos el ratoacuten encima del hiperenlace y pulsamos el navegador accederaacute a la paacutegina Web indicada por href es decir accederaacute a la paacutegina situada en httpwwweidoses

Igualmente podriacuteamos indicar el hiperenlace por medio de una imagen Si esta imagen tiene definido un borde este apareceraacute resaltado en color azul El formato correspondiente seriacutea

ltA href=URL a la que se accedegtltIMG src=Imagengt y tambieacutentextoltAgtIMG Image src Source

Veamos un ejemplo en la Tabla 24

Ejemplo Resultado

ltA href=httpwwweidosesgtltIMGsrc=IconogifgtltAgt Villa Eidos Villa Eidos

Tabla 24

Si pulsamos sobre la imagen el navegador accederaacute a la paacutegina Web inicial de Villa Eidos

Enlaces dentro de la misma paacutegina ltA name=gt Este tipo de hiperenlaces nos va a permitir marcar distintas zonas del documento activo con el objeto de tener un acceso directo a las mismas Una buena utilidad de este tipo de enlaces radica en la creacioacuten de iacutendices para documentos largos de forma que si pinchamos en el hiperenlace correspondiente al tiacutetulo de un capiacutetulo determinado el navegador saltaraacute automaacuteticamente hasta el comienzo de dicho capiacutetulo

Para la creacioacuten de estos hiperenlaces debemos seguir dos pasos

copy Grupo EIDOS 3 Elementos del lenguaje I

31

1 Marcar las distintas zonas o secciones del documento Esto lo haremos con el paraacutemetro name

ltA name=Identificador de seccioacutengtTexto de laseccioacutenltAgt

A cada seccioacuten le asignaremos un identificador distinto para poder referenciarlas posteriormente de manera inequiacutevoca

2 Especificar un enlace a cada una de las secciones que hayamos definido ltA href=Identificador de seccioacutengtTexto del enlace a laseccioacutenltAgt

Si pinchamos en este enlace el navegador saltaraacute automaacuteticamente a la seccioacuten correspondiente Veamos un ejemplo sencillito en la Tabla 25 pero demostrativo de todo lo que acabamos de explicar

Ejemplo Resultado

ltA href=Cap1gtCapiacutetulo1ltAgtltA name=Cap1gtCapiacutetulo 1ltAgt

Capiacutetulo 1

Capiacutetulo 1

Tabla 25

Si nos creamos una paacutegina HTML con distintos capiacutetulos podriacuteamos crear una seccioacuten para cada uno de ellos de forma que si pinchamos en el hiperenlace correspondiente al Capiacutetulo 1 el navegador saltariacutea directamente a la seccioacuten correspondiente al Capiacutetulo 1

Ademaacutes de los dos tipos de hiperenlaces vistos podemos crear hiperenlaces que nos permitan acceder a cualquiera de los servicios de Internet Es decir podriacuteamos indicar enlaces a servidores FTP GOPHER NEWS MAILTO etc Para ello tendriacuteamos que indicar la URL correspondiente al servicio al cual queremos acceder como ya vimos en el primer capiacutetulo de este manual

Imaacutegenes

Podremos dar un aspecto mucho maacutes vistoso a nuestros documentos HTML con la inclusioacuten de imaacutegenes Los formatos de imagen que todos los navegadores reconocen son gif y jpg Si queremos insertar una imagen en otro formato el visor deberiacutea disponer del programa externo que permita su visualizacioacuten De todas formas una buena solucioacuten es utilizar alguacuten programa de tratamiento de imaacutegenes que nos convierta la imagen a uno de los formatos mencionados anteriormente

El formato gif es maacutes recomendado para la inclusioacuten de iconos graacuteficas y el formato jpg para el caso de insertar fotografiacuteas en nuestras paacuteginas

Lenguaje HTML copy Grupo EIDOS

32

La etiqueta que nos va a permitir la insercioacuten de imaacutegenes es ltIMGgt La imagen se insertaraacute justo en el punto del documento donde coloquemos dicha etiqueta pudiendo insertar imaacutegenes dentro de listas tablas o formularios

El formato de la etiqueta con sus posibles argumentos es el siguiente

ltIMG src=URL de la imagen alt=Texto alternativoalign=topmiddlebottonleftrigth border=Tamantildeoheight=Tamantildeo width=Tamantildeo hspace=margen vspace=margengt

bull src=URL de la imagen El atributo src nos va servir para indicar la URL de la imagen que

queremos insertar es decir el servidor y camino hasta llegar al fichero de la imagen

No seraacute necesario que la imagen que queremos insertar en nuestro documento esteacute en el ordenador local aunque siacute es recomendable ya que el acceso a las mismas puede ser maacutes lento

Por tanto es una buena praacutectica copiar todas las imaacutegenes que vayamos a incluir en nuestro documento HTML al ordenador local

Tabla 26

bull alt=Texto alternativo Nos va a permitir mostrar un texto alternativo para el caso en que el

navegador no sea capaz de mostrar la imagen Su uso es muy recomendable ya que cuando publiquemos nuestras paacuteginas en la WWW no sabremos desde queacute tipo de navegadores accederaacuten los internautas a nuestras paacuteginas

En la Tabla 27 vamos a ver un ejemplo

Si usas un navegador que no tiene ninguacuten problema para la visualizacioacuten de imaacutegenes desactiva temporalmente la opcioacuten de mostrar imaacutegenes prueba el ejemplo que muestra la Tabla 27 y compaacuteralo con el anterior

Tabla 27

copy Grupo EIDOS 3 Elementos del lenguaje I

33

bull align=topmiddlebotton leftrigth Nos permite indicar coacutemo se alinearaacute el texto que siga a la imagen

top alinea el texto con la parte superior de la imagen

middle con la parte central

bottom con la parte inferior

left imagen alineada a la izquierda de la paacutegina

rigth imagen alineada a la derecha de la paacutegina

Tabla 28

En el caso de que el texto que acompantildea a la imagen tenga maacutes de una liacutenea tan soacutelo la primera seraacute la que se alinearaacute seguacuten alguna de las anteriores alineaciones el resto de liacuteneas se incluiraacuten debajo de la imagen quedando un efecto bastante feo

Para solventar esto estaacuten las alineaciones LEFT (imagen alineada a la izquierda de la paacutegina) y RIGHT (imagen alineada a la derecha de la paacutegina) Las cuales permiten que la imagen se inserte dentro del paacuterrafo que la rodea produciendo un resultado mucho maacutes profesional en la integracioacuten de texto e imaacutegenes

Estas dos alineaciones no se podraacuten usar en combinacioacuten con las anteriores Veamos algunos ejemplos en la Tabla 29

Vemos como en el primer ejemplo la segunda liacutenea de texto aparece debajo de la imagen produciendo un efecto menos vistoso que en los dos ejemplos siguientes

Lenguaje HTML copy Grupo EIDOS

34

Tabla 29

bull border=Tamantildeo Permite antildeadirle un borde a la imagen del tamantildeo que le

especifiquemos

Si la imagen forma parte de un hiperenlace esta apareceraacute con un borde del color del hiperenlace Si no deseaacuteramos que aparezca este borde tendriacuteamos que especificar border=0

Tabla 30

bull height=Tamantildeo Permite especificar el alto de la imagen en puntos de pantalla

(pixels) o en del tamantildeo del documento

bull width=Tamantildeo Con este argumento especificaremos el ancho al que mostraremos la imagen en puntos de pantalla (pixels) o en del tamantildeo del documento

En el segundo de los ejemplos de la Tabla 31 el ancho de la imagen se ha extendido al 50 del total del ancho de la celda donde estaacute contenida la imagen Si pruebas este ejemplo en tu documento HTML la imagen se extenderaacute horizontalmente hasta ocupar el 50 del ancho de la paacutegina

copy Grupo EIDOS 3 Elementos del lenguaje I

35

Tabla 31

bull hspace=Margen hspace Horizontal Space Permite especificar el nuacutemero de espacios

horizontales (en puntos) que separaraacuten a la imagen de cualquier elemento que le siga o le anteceda

bull vspace=Margen vspace Vertical Space Con este argumento especificaremos el margen vertical (en puntos) que habraacute entre la imagen y cualquier otro elemento de nuestro documento

Tabla 32

Elementos del lenguaje II

Tablas HTML nos va a permitir la inclusioacuten de cualquiera de los elementos de nuestra paacutegina (texto imaacutegenes hiperenlaces listas etc) dentro de una tabla Gracias a lo cual conseguiremos dar una mayor y mejor estructuracioacuten a los contenidos de nuestros documentos Ademaacutes la definicioacuten de las tablas en HTML es muy abierta pudiendo en cualquier momento redimensionar la tabla es decir cambiar su nuacutemero de filas o de columnas cambiar el tamantildeo de alguna de sus celdas etc

La etiqueta que nos va a permitir la definicioacuten de tablas es ltTABLEgt ltTABLEgt

El formato general de la etiqueta sin ninguacuten argumento es el siguiente

ltTABLEgtltTR gt

ltTHgtContenido de la celda ltTHgtltTDgtContenido de la celda ltTDgt

ltTRgtltTABLEgt

TR Table Row TH Table Header TD Table Data

Vamos a analizar cada una de estas etiquetas de forma separada

1 ltTABLEgt ltTABLEgt Definicioacuten general de la tabla Dentro de ella definiremos las filas y columnas que la constituyen pudiendo incluso definir tablas dentro de tablas es decir tablas anidadas

Lenguaje HTML copy Grupo EIDOS

38

2 ltTRgt ltTRgt Definicioacuten de las filas de la tabla Por cada etiqueta ltTRgt que incluyamos se crearaacute una fila en la tabla No seraacute necesario indicar la etiqueta de cierre

3 ltTHgtltTHgt oacute ltTDgtltTDgt Definicioacuten de cada una de las celdas de la tabla Vemos que estas etiquetas estaacuten contenidas dentro de otra etiqueta de definicioacuten de fila de forma que por cada etiqueta ltTHgt o ltTDgt que incluyamos se crearaacute una celda dentro de la fila correspondiente La etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera es decir celdas cuyo contenido estaacute resaltado en negrita dejando la etiqueta ltTDgt para definir celdas de datos En este caso tampoco es necesario indicar las etiquetas de cierre

Todas estas etiquetas tienen sus respectivos argumentos Pero antes de analizar cada uno de ellos vamos a ver un ejemplo muy sencillito en la Tabla 33 que nos crearaacute una tabla de una sola celda (1 fila X 1 columna = 1 celda) Para ello usaremos la etiqueta de creacioacuten de tabla ltTABLEgt con el argumento border=1 (nos dibuja un borde de tamantildeo 1 alrededor de la tabla)

Ejemplo Resultado

ltTABLE border=1gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 33

Vamos ahora a analizar lo distintos argumentos que componen las etiquetas de la tabla analizaacutendolos desde lo general (la definicioacuten de la tabla) hasta lo especiacutefico (la definicioacuten de las celdas)

1 Definicioacuten de la tabla ltTABLEgt

ltTABLE border=n cellpadding=n cellspacing=n width=n oacute height=n oacute bgcolor=rrggbb oacute nombre gt

Contenido ltTABLEgt

bull border=n Si especificamos este argumento se dibujaraacute un borde alrededor de la

tabla del ancho que le indiquemos como muestra la Tabla 34

Ejemplo Resultado

Mi primera tabla ltTABLE border=4gtltTRgtltTDgtMi primera tablaltTABLEgt

Tabla 34

bull cellpadding=n Indica el espacio en puntos que separa el contenido de la celda con

el borde de la misma siendo 1 por defecto

copy Grupo EIDOS 4 Elementos del lenguaje II

39

Ejemplo Resultado

ltTABLE border=4 cellpadding=8gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 35

bull cellspacing=n Indica el espacio en puntos que separa a las celdas contenidas dentro de la tabla siendo 2 por defecto

bull width=n oacute Indica la anchura de la tabla en puntos o en en funcioacuten del ancho de la ventana del visualizador Si no indicamos este argumento el ancho de la tabla se ajustaraacute al tamantildeo del contenido de las celdas Esto es lo que ha ocurrido en el uacuteltimo ejemplo que hemos realizado Veamos un ejemplo en el Coacutedigo fuente 11 El resultado se muestra en la Tabla 36

ltTABLE border=4 width=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 11

Mi primera tabla

Tabla 36

bull height=n oacute Nos permite definir la altura de la tabla en puntos o en de la

altura de la ventana del visualizador Si indicamos este argumento lo recomendable es darlo en puntos ya que es maacutes complicado adecuarnos a la altura de la ventana del visualizador Al igual que en el caso anterior si no especificamos este argumento la altura se adecuaraacute al contenido de las celdas El Coacutedigo fuente 12 muestra un ejemplo y la Tabla 37 nos muestra el resultado

ltTABLE border=4 width=50 height=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 12

Mi primera tabla

Tabla 37

bull bgcolor= rrggbb o nombre del color Nos permite definir un color

de fondo para todas las celdas de la tabla Maacutes adelante veremos como podemos definir colores especiacuteficos para cada una de las celdas por separado

Lenguaje HTML copy Grupo EIDOS

40

Ejemplo Resultado

ltTABLE border=4 bgcolor=yellowgtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 38

2 Definicioacuten de las filas de la tabla ltTRgt

ltTR align=leftrightcenter valign=topmiddlebottombgcolor=rrggbb oacute nombregt

Antes de empezar a descifrar el significado de cada uno de los argumentos de esta etiqueta vamos a ver un ejemplo en la Tabla 39 de coacutemo se construiriacutea una tabla con dos filas (2 filas X 1 columna = 2 celdas)

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR gtltTDgtPrimera filaltTRgtltTDgtSegunda filaltTABLEgt

Segunda fila

Tabla 39

bull align=leftrightcenter Con este argumento vamos a indicar la alineacioacuten

horizontal (leftizquierda rightderecha centercentrado) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado Veamos un ejemplo en el Coacutedigo fuente 13 y su correspondiente resultado en la Tabla 40

ltTABLE border=4 width=50 gt ltTRgtltTDgtPrimera filaltTRalign=rightgtltTDgtSegunda filaltTABLEgt

Coacutedigo fuente 13

Primera fila

Segunda fila

Tabla 40

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten

vertical (toparriba middlecentrado bottomabajo) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado

copy Grupo EIDOS 4 Elementos del lenguaje II

41

bull bgcolor= rrggbb o nombre del color En este caso este argumento nos permitiraacute definir un color de fondo para todas las celdas de una fila veamos un ejemplo en la

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR bgcolor=yellowgtltTDgtPrimera

filaltTR bgcolor=greengtltTDgtSegunda

filaltTABLEgt

Segunda fila

Tabla 41

3 Definicioacuten de las celdas de la tabla ltTHgt oacute ltTDgt

ltTH oacute TD align=leftrightcenterjustifyvalign=topmiddlebottom bgcolor=rrggbb oacute nombre width=nrowspan=n colspan=ngt

Como ya explicamos anteriormente la etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera y la etiqueta ltTDgt para la creacioacuten de celdas de datos Vamos a completar nuestro ejemplo inicial antildeadieacutendole tres filas de dos celdas cada una (3 filas X 2 columnas = 6 celdas) Tabla 42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTDgtCelda 21ltTDgtCelda 22

ltTABLEgt Celda 21 Celda 22

Tabla 42

bull align=leftrightcenterjustify Con este argumento vamos a indicar la

alineacioacuten horizontal (left izquierda right derecha center centrado justifyjustificado) del contenido de cada celda por separado Su significado es el mismo que en la etiqueta ltTRgt

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten vertical (toparriba middlecentrado bottomabajo) del contenido de cada celda

bull bgcolor= rrggbb o nombre del color En este caso podremos definir un color de fondo para cada una de las celdas de manera independiente

bull width=n oacute Indica el ancho de la celda en puntos o en en funcioacuten del tamantildeo de la tabla

Lenguaje HTML copy Grupo EIDOS

42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera

1ltTHgtCabecera 2ltTR gtltTD align=rightgtCelda

11ltTD bgcolor=redgtCelda 12ltTRgtltTD

bgcolor=yellowgtCelda 21ltTDalign=centergtCelda 22ltTABLEgt

Celda 21 Celda 22

Tabla 43

bull rowspan=n Con este argumento podemos lograr que una celda concreta abarque maacutes de una fila ya sabemos que por defecto una celda ocupa una sola fila

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTD rowspan=2gtCelda

11ltTDgtCelda 12ltTRgtltTDgtCelda 22

ltTABLEgt

Celda 11 Celda 22

Tabla 44

bull colspan=n Con este argumento podemos lograr que una celda se expanda a maacutes

de una columna

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTD colspan=2

align=centergtCelda 22ltTABLEgt

Celda 22

Tabla 45

Para finalizar este tema sobre la creacioacuten de tablas vamos a ver el ejemplo que aparece en el Coacutedigo fuente 14 y su resultado en la Tabla 46

ltTABLE border=4gtltTR gtltTH colspan=3 bgcolor=redgtTiacutetuloltTR bgcolor=yellowgtltTHgtCabecera 1ltTHgtCabecera 2ltTHgtCabecera 3

copy Grupo EIDOS 4 Elementos del lenguaje II

43

ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTDgtCelda 13ltTRgtltTD rowspan=2gtCelda 21ltTD bgcolor=greengtCelda 22ltTDgtCelda 23ltTRgtltTDgtCelda 32ltTDgtCelda 33

ltTABLEgt

Coacutedigo fuente 14

Tiacutetulo

Cabecera 1 Cabecera 2 Cabecera 3

Celda 11 Celda 12 Celda 13

Celda 22 Celda 23 Celda 21

Celda 32 Celda 33

Tabla 46

Formularios El formulario es el elemento de HTML que nos va a permitir interactuar con los visitantes de nuestras paacuteginas web de forma que podemos solicitarle informacioacuten al usuario y procesarla De esta forma podremos crear en nuestras paacuteginas encuestas para solicitar la opinioacuten del visitante sobre alguacuten tema e incluso sobre el contenido de nuestra propia paacutegina web cuestionarios para evaluar la asimilacioacuten de contenidos sobre un tema concreto que se trate en la paacutegina etc

El contenido de la informacioacuten introducida por medio del formulario seraacute enviado a la direccioacuten URL donde resida el programa que se encargaraacute de procesar los datos A este tipo de programas externos se les denomina programas CGI (Common Gateway Interface)

La etiqueta HTML que nos va a permitir la creacioacuten de formularios es ltFORMgt Su formato es el siguiente

ltFORM action=URL del programa que trata el formulariomethod=postgetgt Elementos del formulario ltFORMgt

bull action=URL del programa que trata el formulario A traveacutes de este

argumento indicaremos como ya hemos mencionado la direccioacuten del fichero de programa que va a tratar la informacioacuten suministrada por el formulario

Tambieacuten podriacuteamos incluir como URL que trata el formulario una direccioacuten de correo electroacutenico Por tanto el valor de este argumento podriacutea ser action =mailto direccioacuten de correo

Nota Esta opcioacuten soacutelo funciona adecuadamente con el navegador Netscape Con el Explorer este enviacuteo dariacutea como resultado un correo en blanco Para que esta opcioacuten funcione de manera independiente del navegador que se esteacute utilizando se ha de emplear un programa externo que realice este proceso

Lenguaje HTML copy Grupo EIDOS

44

bull method=postget A traveacutes de este argumento indicaremos el meacutetodo empleado para transferir la informacioacuten generada por el formulario

Si indicamos post se produciraacute la modificacioacuten del documento destino como es el caso de enviar la informacioacuten a una direccioacuten de correo electroacutenico Mediante el meacutetodo get no se produciraacuten cambios en el documento destino

Dentro de un formulario podremos incluir cualquier texto o instruccioacuten HTML de las vistas a lo largo de los capiacutetulos anteriores ademaacutes claro estaacute de los elementos tiacutepicos de un formulario cajas de texto botones de seleccioacuten menuacutes de opciones etc Vamos a ver coacutemo se incluiraacuten estos elementos en un formulario

Entrada baacutesica de datos Para definir los distintos tipos de campos baacutesicos de entrada de datos usaremos la etiqueta ltINPUTgt

El formato es el siguiente

ltINPUT type= text password checkbox radio hidden submit image reset name=Variable value=Valor inicialgt

bull El argumento type determinaraacute el tipo de campo de entrada que estamos insertando A

continuacioacuten describiremos cada uno de ellos

bull El argumento name especifica el nombre de la variable que tomaraacute el valor introducido en el campo

bull El argumento value especifica el valor por defecto que tendraacute el campo

Vamos a continuacioacuten a describir los distintos tipos campos de entrada que vendraacuten dados por los valores del argumento type

Texto corto type=text

Con este argumento vamos a indicar que el campo a introducir seraacute un texto El formato seriacutea

ltINPUT type= text name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los nuevos atributos es

bull size=Tamantildeo Indicaremos el tamantildeo en caracteres de la ventana de introduccioacuten de texto

bull maxlength=Longitud maacutexima Indicaremos el nuacutemero maacuteximo de caracteres a introducir en el campo

Vamos a ver un ejemplo en la Tabla 47

copy Grupo EIDOS 4 Elementos del lenguaje II

45

Ejemplo Resultado

NombreltINPUT type=text name=Var1Value=Texto por defecto size=20 maxlength=25gt

Tabla 47

Claves type=password

Con este argumento indicamos que el campo a introducir seraacute una palabra clave por lo que los caracteres que se introduzcan seraacuten sustituidos por asteriscos en la visualizacioacuten por pantalla El formato es

ltINPUT type= password name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los distintos argumentos es el mismo que en el caso anterior Veamos un ejemplo en la Tabla 48

Ejemplo Resultado

ClaveltINPUT type=password name=Var2Value=tutankamon size=11 maxlength=10gt

Tabla 48

Botones de seleccioacuten type=checkbox

El checkbox es un botoacuten que presenta dos estados marcado (1) y desmarcado (0) Podremos variar su estado simplemente pinchando con el ratoacuten El formato es

ltINPUT type= checkbox name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto

Si incluimos el argumento value cuando el botoacuten esteacute marcado su variable asociada adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 49

Ejemplo Resultado

ltINPUT type=checkbox name=Var3 value=Op1 checkedgtOpcioacuten1 ltbrgtltINPUT type=checkbox name=Var4 value=Op2gt Opcioacuten 2

Tabla 49

Lenguaje HTML copy Grupo EIDOS

46

Seleccioacuten entre varias opciones type=radio

Este argumento se usa cuando hay que hacer una seleccioacuten entre varias alternativas excluyentes pudieacutendose seleccionar uacutenicamente una de las alternativas Debemos incluir una etiqueta radio por cada una de las posibles alternativas El formato es

ltINPUT type= radio name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto En este caso uacutenicamente uno de los botones de radio podraacute aparecer marcado ya que se usa para el caso de opciones excluyentes

Cuando un botoacuten esteacute seleccionado la variable asociada a la lista de botones adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 50

Ejemplo Resultado

ltINPUT type=radio name=Var5 value=Op1gtOpcioacuten1 ltbrgtltINPUT type=radio name=Var5 value=Op2checkedgt Opcioacuten 2 ltbrgtltINPUT type=radio name=Var5 value=Op3 gtOpcioacuten 3

Tabla 50

En este ejemplo la variable Var5 tendraacute el valor Op2

Campos ocultos type=hidden

Este tipo de campos no son visibles para el usuario Su uso tiene sentido en el caso de enviar alguacuten tipo de informacioacuten que no deba ser visualizada o variada por el lector de nuestra paacutegina Web El formato es

ltINPUT type= hidden name=Variable value=Valor gt

Con esta etiqueta asignariacuteamos a la Variable referenciada por name el Valor de value y se mandariacutea junto con el formulario sin que el usuario de la paacutegina se entere de nada Veamos un ejemplo en el Coacutedigo fuente 15

ltINPUT type=hidden name=Var6 value=tutankamongt

Coacutedigo fuente 15

copy Grupo EIDOS 4 Elementos del lenguaje II

47

Botoacuten de enviacuteo de datos type=submit

Con este argumento especificamos un botoacuten en el que al pulsar los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario El formato es

ltINPUT type= submit value=Mensaje a mostrargt

En este caso el paraacutemetro value indica el mensaje que se mostraraacute en el botoacuten Veamos un ejemplo en la Tabla 51

Ejemplo Resultado

ltINPUT type=submit value=Enviar los Datosgt

Tabla 51

Botoacuten graacutefico de enviacuteo de datos type=image

Con este argumento especificamos un botoacuten de tipo imagen en el que al igual que con el botoacuten anterior si pulsamos en la imagen los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario Su formato es el siguiente

ltINPUT type= image src=URL de la imagen name=Variablegt

Con el paraacutemetro src especificamos la URL de la imagen que seraacute insertada en el botoacuten En este caso en la variable referenciada por name se almacenaraacuten las coordenadas del punto de la imagen donde se halla pinchado (de forma que estas coordenadas podriacutean ser procesadas por el programa que recibe los datos del formulario)

Botoacuten de borrado de datos type=reset

Con este argumento especificamos un botoacuten que al ser pulsado borraraacute el contenido actual de todos los campos dejaacutendolos con sus valores por defecto Su formato es

ltINPUT type= reset value=Texto del botoacutengt

Con el paraacutemetro value especificamos el texto que etiquetaraacute al botoacuten

Ejemplo Resultado

ltINPUT type=reset value=Borrar datosgt

Tabla 52

Lenguaje HTML copy Grupo EIDOS

48

Entrada datos en muacuteltiples liacuteneas En un formulario tambieacuten podremos introducir un campo de texto que abarque varias liacuteneas Para ello usaremos la etiqueta ltTEXTAREAgt ltTEXTAREAgt Su formato es el siguiente

ltTEXTAREA name=Variable rows=Filas cols=ColumnasgtContenido por defectoltTEXTAREAgt

Los argumentos rows y cols nos van a permitir especificar respectivamente el nuacutemero de filas de texto visibles y el nuacutemero de columnas de texto visibles en el campo

Ejemplo Resultado

ltTEXTAREA name=Var7 rows=5 cols=40gtContenido por defectoltTEXTAREAgt

Tabla 53

Entrada de datos a traveacutes de campos de seleccioacuten Con los campos de seleccioacuten podremos desplegar una lista de opciones entre las que podremos seleccionar una Para ello usaremos la etiqueta ltSELECTgt ltSELECTgt Su formato es el siguiente

ltSELECT name=Variable multiple size=ngtltOPTION selected value=Valor_1gtPrimera OpcioacutenltOPTION value=Valor_2gtSegunda Opcioacuten

ltOPTION value=Valor_ngtEneacutesima Opcioacuten

ltSELECTgt

Figura 1

bull La variable referenciada por name tomaraacute el valor(value) de la opcioacuten seleccionada

bull Si especificamos el argumento muacuteltiple se mostraraacuten todas la opciones en forma de tabla El nuacutemero de opciones visibles en la tabla vendraacute dado por el argumento size

copy Grupo EIDOS 4 Elementos del lenguaje II

49

bull Con la etiqueta ltOPTIONgt iremos definiendo cada una de las opciones de la lista

bull El argumento selected va a determinar cuaacutel es la opcioacuten por defecto

Para finalizar vamos a ver el Coacutedigo fuente 16 correspondiente a una encuesta realizada por la editorial ficticia EditoPc y en la Figura 2 observamos el resultado del formulario

ltP align=centergtltBgtEDITORIAL ltIgtEditoPcltIgtltBgtltPgtltFORM action=mailtodireccionejemplo method = postgtNombreltINPUT type=text size=30 name=nombregtltBRgtE_mail ltINPUT type=text size=30 name=e_mailgtltPgtDeseas recibir informacioacuten sobreltINPUT type=checkbox name=infor1 value=InternetgtInternetltINPUT type=checkbox name=infor2 value=ProgramacioacutengtProgramacioacutenltINPUT type=checkbox name=infor3 value=SistOperativogtSistOperativoltINPUT type=checkbox name=infor4 value=OfimaacuteticagtOfimaacuteticaltPgtiquestTe conectas a Internet desde casa ltbrgtltINPUT type=radio name=intercasa value=sigtSiacuteltINPUT type=radio name=intercasa value=nogtNoltPgtiquestQueacute uso le das a tu ordenador ltBRgtltSELECT name=uso multiple size=3gtltOPTION selectedgtProfesionalltOPTIONgtDomeacutesticoltOPTIONgtOcioJuegosltSELECTgtltPgtCaracteriacutesticas de tu PCltBRgtltTEXTAREA name=caract rows=5 cols=40gtltTEXTAREAgtltPgtltINPUT type=submit value=Enviar datosgt ltINPUT type=reset value=Borrardatosgt

Coacutedigo fuente 16

Figura 2

Elementos del lenguaje III

Frames Las frames son una utilidad del HTML que nos permite dividir la ventana del navegador en diferentes subventanas que podraacuten ser manipuladas de manera independiente Esto nos permitiraacute mostrar una paacutegina web diferente en cada una de la subventanas o frames

Estructura de un documento con frames Un documento con frames se estructura de manera diferente a un documento HTML normal Asiacute en este tipo de documentos no apareceraacute la etiqueta ltBODYgt En su lugar se incluiraacute la etiqueta ltFRAMESETgt ltFRAMESETgt dentro de la cual se definiraacuten las distintas frames que se incluyan en el documento

La estructura general de un documento de este tipo seriacutea por tanto

ltHTMLgtltHEADgtCabeceraltHEADgtltFRAMESETgt

Definicioacuten de la distintas framesltFRAMESETgtltNOFRAMESgt

Instrucciones HTMLltNOFRAMESgt

ltHTMLgt

Lenguaje HTML copy Grupo EIDOS

52

Puede darse el caso de que programemos nuestro documento con frames siguiendo la estructura anterior y que el navegador que se use para leer el documento no soporte la caracteriacutestica de frames con lo cual no se mostraraacute nada de lo indicado entre las etiquetas ltFRAMESETgt y ltFRAMESETgtPara solucionar este problema todas las instrucciones HTML incluidas entre las etiquetas ltNOFRAMESgt y ltNOFRAMESgt seraacuten ejecutadas por los navegadores que no soportan las frames

La sintaxis de la etiqueta ltFRAMESETgt es

ltFRAMESET rows=Lista de filas cols=Lista de columnasgtltFRAME src=URL de la frame 1 name=Nombre de la frame 1gtltFRAME src=URL de la frame 2 name=Nombre de la frame 2gt

ltFRAME src=URL de la frame n name=Nombre de la frame ngt

ltFRAMESETgt

Como vemos por cada una de la frames que incluyamos en nuestro documento debemos incluir una etiqueta ltFRAMEgt indicando mediante sus argumentos la direccioacuten URL del documento que se insertaraacute en la subventana (src) y el nombre de la frame (name) Posteriormente describiremos la etiqueta ltFRAMEgt con maacutes detalle

Los argumentos de ltFRAMESETgt son rows y cols definieacutendose uacutenicamente uno de los dos atributos en funcioacuten de si la divisioacuten de la pantalla se realizaraacute por filas (rows) o por columnas (cols)

Por cada una de las subventanas que creemos debemos especificar su tamantildeo en puntos o en porcentaje del tamantildeo de cada subventana Asiacute por ejemplo si especificamos rows= 50 2525 crearemos tres subventanas horizontales ocupando la primera el 50 de la ventana principal y las otras dos el resto Si especificamos cols=100150 crearemos tres subventanas verticales ocupando la primera 100 puntos de la ventana principal la segunda 150 puntos y tercera el espacio restante

Vamos a verlo maacutes claramente con un par de ejemplos praacutecticos que vemos en la Tabla 54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 502525gt ltFRAMEsrc=Pagweb1htm name=Pagweb1gtltFRAMEsrc=Pagweb2htm name=Pagweb2gtltFRAMEsrc=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 10: Programacion web   lenguaje html

Cabecera y cuerpo del documento HTML

Cabecera Cabecera del documento HTML ltHEADgt

ltHEADgt

En la cabecera de un documento HTML incluiremos las definiciones generales que afecten a todo el documento como por ejemplo el tiacutetulo de la paacutegina que apareceraacute en la parte superior de la ventana del navegador

Las etiquetas ltHEADgt y ltHEADgt son las que van a delimitar la cabecera de nuestro documento Todas la etiquetas de la cabecera son opcionales aunque se recomienda incluir en todos nuestros documentos la etiqueta ltTITLEgt correspondiente al tiacutetulo del documento

A continuacioacuten vamos a tratar cada uno de los posibles componentes de la cabecera por separado

Tiacutetulo del documento ltTITLEgtltTITLEgt

El tiacutetulo de nuestro documento viene especificado por las etiquetas ltTITLEgt y ltTITLEgt y como ya hemos mencionado este tiacutetulo es el que apareceraacute en la ventana de nuestro programa

Lenguaje HTML copy Grupo EIDOS

14

navegador Lo normal y recomendable es que el tiacutetulo guarde relacioacuten con el contenido de nuestro documento ya que por ejemplo es utilizado por algunos servidores de buacutesqueda para poder intuir el contenido de nuestro documento Veamos un ejemplo en el Coacutedigo fuente 2

ltTITLEgtMi primera paacutegina WebltTITLEgt

Coacutedigo fuente 2

Indicador de refresco del documento ltMETA http-equiv=refresh content=nuacutemero_segundosurl=URL derefrescogt

Esta etiqueta sirve para indicar un documento que deberaacute sustituir al actual transcurrido un nuacutemero determinado de segundos Una posible utilidad de esta etiqueta podriacutea ser para visualizar documentos de forma secuencial de forma que se empieza por un documento y se pasa al siguiente transcurrido un periacuteodo de tiempo sin necesidad de que la persona que lee el documento realice ninguna accioacuten

Veamos un ejemplo en el Coacutedigo fuente 3

ltMETA http-equiv=refresh content=5url=httpwwweidosesgt

Coacutedigo fuente 3

Si insertamos esta instruccioacuten en la cabecera de nuestro paacutegina HTML transcurridos 5 segundos eacutesta se refrescaraacute con la paacutegina Web de portada de Villa Eidos

Indicador de la URL base del documento ltBASE href=URLgt

Con esta etiqueta indicamos la localizacioacuten de los ficheros a los que se hace referencia en nuestra paacutegina Web Si no incluimos esta etiqueta el navegador entenderaacute que dichos ficheros se encuentran en el mismo lugar donde reside nuestra paacutegina Web

Vemos un ejemplo en el Coacutedigo fuente 4

ltBASE href=httpwwweidosesvulcangt

Coacutedigo fuente 4

Si especificamos como URL base de nuestro documento HTML la indicada en este ejemplo y posteriormente hacemos referencia en nuestra paacutegina a un fichero llamado aulahtm se entenderaacute que la localizacioacuten del fichero es httpwwweidosesvulcanaulahtm

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

15

Cuerpo Cuerpo del documento HTML ltBODYgt

ltBODYgt

En el cuerpo de un documento HTML es donde incluiremos las distintas instrucciones del lenguaje junto con el contenido en siacute de nuestra paacutegina Web textos imaacutegenes enlaces a otras paacuteginas etc

Las etiquetas ltBODYgt y ltBODYgt son las que van a delimitar el cuerpo de nuestro documento Esta posee una serie de argumentos que nos van a permitir variar las caracteriacutesticas del documento en su conjunto como por ejemplo el color del texto o del color de fondo de nuestra paacutegina web

Antes de analizar los componentes y atributos de BODY vamos a ver como se especifican los colores en un documento HTML

Estos se pueden especificar por su nombre (name) o por su coacutedigo de color que es un nuacutemero compuesto de tres pares de cifras hexadecimales que nos indican la proporcioacuten de los colores primarios (rojo verde y azul) que forman el color deseado (rrggbb)

Nombre Coacutedigo de color Color mostrado

Black 000000 Negro

Teal 008080 Teal

Blue 0000FF Azul

Navy 000080 Azul marino

Lime 00FF00 Lima

White FFFFFF Blanco

Purple 800080 Puacuterpura

Yellow FFFF00 Amarillo

Olive 808000 Oliva

Red FF0000 Rojo

maroon 800000 Marroacuten

gray 808080 Gris

fuchsia FF00FF Fucsia

green 008000 Verde

Lenguaje HTML copy Grupo EIDOS

16

silver C0C0C0 Plata

aqua 00FFFF Agua

Tabla 2

La etiqueta ltBODYgt presenta una serie de atributos que van a afectar a todo el documento en su conjunto Estos atributos nos van a permitir definir los colores del texto del fondo y de los hiperenlaces del documento Incluso nos permitiraacuten insertar una imagen de fondo en nuestra paacutegina

ltBODY background=URL bgcolor=rrggbb oacute name text=namelink=name vlink=name gt

bull background=URL Nos va a permitir mostrar una imagen como fondo de nuestro

documento HTML El camino a esta imagen vendraacute especificado por la URL que definamos Si la imagen no rellena todo el fondo del documento eacutesta seraacute reproducida tantas veces como sea necesario hasta completar todo el fondo

Si insertas el Coacutedigo fuente 5 en el documento HTML que creamos como ejemplo en el capiacutetulo anterior Pagina1htm este presentaraacute como fondo la imagen fondogif

ltBODY background=fondogifgt

Coacutedigo fuente 5

bull bgcolor=rrggbb oacute name bgcolor Background Color Nos va a permitir definir un

color para el fondo de nuestro documento Este atributo seraacute ignorado si previamente hemos utilizado el atributo background

Inserte el Coacutedigo fuente 6 en Pagina1htm y compruebe el resultado

ltBODY bgcolor=bluegt

Coacutedigo fuente 6

bull text=rrggbb oacute name Nos permitiraacute definir un color para el texto de nuestro

documento Por defecto es negro Inserte el Coacutedigo fuente 7 en Pagina1html y compruebe el resultado

ltBODY text=redgt

Coacutedigo fuente 7

Y ahora inserte el Coacutedigo fuente 8 en el documento y comprueba el resultado

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

17

ltBODY bgcolor=yellow text=navygt

Coacutedigo fuente 8

bull link=rrggbb oacute name Indica el color que tendraacuten los hiperenlaces que no han sido

accedidos Por defecto es azul Como todaviacutea no sabemos insertar hiperenlaces en nuestro documento vamos a dejar el ejemplo correspondiente para maacutes adelante

bull vlink=rrggbb oacute name vlink Visited Links Indica el color de los hiperenlaces que ya han sido accedidos Por defecto es puacuterpura

Caracteres especiales Hasta ahora hemos escrito algunos ejemplos de coacutedigo HTML pero hemos pasado por alto algunas limitaciones de HTML respecto al uso de caracteres especiales Una de estas limitaciones es por ejemplo el uso de los caracteres lt y gt que como ya sabemos indican el inicio y fin de una etiqueta HTML Pues bien si quisieacuteramos escribir estos caracteres como parte normal de un texto el navegador no sabriacutea si se trata de texto normal o del comienzo y final de una etiqueta o sea que se hariacutea un liacuteo

Como todo tiene solucioacuten existen unos coacutedigos para poder escribir estos caracteres y otros relacionados con las etiquetas los vemos en la Tabla 3

Siacutembolo Coacutedigo

lt (menor que) amplt

gt (mayor que) ampgt

amp (ampersand) ampamp

(comillas) ampquot

Tabla 3

Para las letras especiacuteficas del idioma castellano las vocales acentuadas la ntilde la uuml y los signos iquest y iexcl existen los coacutedigos que muestra la Tabla 4

Letra Coacutedigo Letra Coacutedigo Letra Coacutedigo

aacute ampaacute Aacute ampAacute ntilde ampntilde

eacute ampeacute Eacute ampEacute Ntilde ampNtilde

iacute ampiacute

Iacute ampIacute

uuml ampuuml

Lenguaje HTML copy Grupo EIDOS

18

oacute ampoacute Oacute ampOacute Uuml ampUuml

uacute ampuacute Uacute ampUacute iquest amp191

iexcl amp161

Tabla 4

Para los navegadores actuales podemos escribir nuestro coacutedigo HTML de manera directa sin tener en cuenta estos coacutedigos pero nunca podemos asegurar que las personas que accedan a nuestras paacuteginas con otros navegadores puedan leerlas correctamente Asiacute que los maacutes adecuado es el empleo de los mismos Otros siacutembolos especiales aparecen en la Tabla 5

Siacutembolo Coacutedigo

Ccedil ampccedil

Ccedil ampCcedil

copy ampcopy

reg ampreg

Tabla 5

Veamos un ejemplo en el Coacutedigo fuente 9

ampquotLa inspiraciampoacuten existe pero tiene que encontrarse trabajandoampquotampcopy Pablo Ruampiacutez Picasso

Coacutedigo fuente 9

Esta instruccioacuten HTML deberiacutea producir el siguiente resultado

La inspiracioacuten existe pero tiene que encontrarse trabajando copyPablo Ruiacutez Picasso

Para la inclusioacuten de comentarios en nuestra paacutegina HTML podemos usar la etiqueta lt-- --gt Estos comentarios nos podraacuten servir para efectuar anotaciones en nuestro documento HTML que ayuden a una mayor comprensioacuten del coacutedigo En el Coacutedigo fuente 10 se muestra un ejemplo de comentario

lt-- Esto es un comentario y no seraacute mostrado por el navegador --gt

Coacutedigo fuente 10

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

19

Espaciado y saltos de liacutenea En HTML soacutelo se admite un uacutenico espacio en blanco separando cualquier elemento o texto el resto de espacios seraacuten ignorados por el navegador al igual que las tabulaciones retornos de carro etc Veamos un ejemplo en la Tabla 6

Ejemplo Resultado

Esta frase no se veraacute asiacute en el visor Esta frase no se veraacute asiacute en el visor

Tabla 6

No obstante siacute podremos dar el formato que deseemos a nuestras paacuteginas con el empleo de los siguientes elementos del lenguaje HTML

Inclusioacuten de espacios en blanco ampnbsp Nos permitiraacute la inclusioacuten de maacutes de un espacio en blanco entre dos textos consecutivos de forma que estos espacios se muestren de forma efectiva en el navegador Tendremos que incluir tantas expresiones ampnbsp como espacios en blanco se deseen incluir

Ejemplo Resultado

Texto1ampnbspampnbspampnbspampnbspTexto2 Texto1 Texto2

Tabla 7

Salto de liacutenea ltBRgt BR Break Nos permite dar un salto a la liacutenea siguiente en el punto donde la etiqueta sea insertada

Ejemplo Resultado

Esta frase tiene aquiacuteltBRgt un salto de liacutenea Esta frase tiene aquiacute un salto de liacutenea

Tabla 8

Cambio de paacuterrafo ltPgt P Paragraph Permite definir un paacuterrafo introduciendo normalmente un espacio de separacioacuten de dos liacuteneas con el texto siguiente al punto donde hayamos insertado la etiqueta ltPgt

Lenguaje HTML copy Grupo EIDOS

20

Ejemplo Resultado

Esta frase tiene aquiacuteltPgt un cambio de paacuterrafo Esta frase tiene aquiacute

un cambio de paacuterrafo

Tabla 9

La etiqueta de fin paacuterrafo ltPgt es opcional no siendo necesario incluirla Aunque siempre es recomendable delimitar claramente el inicio y final de un paacuterrafo Ademaacutes cuando usemos esta etiqueta como cerrada ltPgt ltPgt tenemos la posibilidad de incluirle el atributo align el cual indica al navegador la forma de justificar el texto incluido en el paacuterrafo El formato seriacutea el siguiente

ltP align= left right center justify gtTexto contenido en elpaacuterrafo ltPgt

Veamos algunos ejemplos en la Tabla 10

Ejemplo Resultado

ltP align=rightgtEste es un ejemplode paacuterrafo alineado a laderechaltPgt

Este es un ejemplo de paacuterrafo alineado a la derecha

ltP align=centergtEste es unejemplo de paacuterrafo centradoltPgt

Este es un ejemplo de paacuterrafo centrado

Tabla 10

Liacutenea Horizontal ltHRgt HR Horizontal Rule Nos permite insertar una liacutenea horizontal cuyo tamantildeo podremos determinar a traveacutes de sus atributos Si no especificamos ninguacuten atributo dibujaraacute una liacutenea que ocupe el ancho de la pantalla del navegador Su utilidad es la de permitirnos dividir nuestra paacutegina en distintas secciones No seraacute necesaria la etiqueta de fin ltHRgt

El formato de la etiqueta con sus posibles atributos es

ltHR align= left right center noshade size=n width=n gt

bull align= left right center Permite establecer la alineacioacuten de la liacutenea a la izquierda a la derecha o centrarla

bull noshade No muestra la sombra de la liacutenea evitando el efecto de tres dimensiones

bull size=n Indica el grosor de la liacutenea en pixels

bull width=n oacute n Especificaraacute el ancho de la liacutenea este se podraacute especificar en pixels (n) o en tanto por ciento del ancho de la ventana (n) Vamos a ver algunos ejemplos en la Tabla 11

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

21

Ejemplo Resultado

ltHRgt

ltHR size=3 noshadegt

ltHR size=5width=50align=rightgt

ltHR size=10width=50align=centergt

Tabla 11

Texto preformateado ltPREgt PRE Preformatted Nos permitiraacute visualizar el texto tal y como se ha escrito respetando los saltos de liacutenea las tabulaciones y espacios en blanco de todo el texto incluido entre las etiquetas ltPREgt y ltPREgt

El texto se mostraraacute con una fuente de espaciado fijo maacutes pequentildea que el texto normal No es recomendable su uso ya que presenta muchas limitaciones y no se obtiene una buena presentacioacuten

Ejemplo Resultado

ltPREgtEste texto estaacutepreformateadoltPREgt

Este texto estaacute preformateado

Tabla 12

Elementos del lenguaje I

Cabeceras y atributos de texto

Cabeceras ltH1gtltH6gt H Heading En un documento HTML podemos incluir seis tipos distintos de cabeceras que van a constituir normalmente el tiacutetulo y los distintos subapartados que forman el documento aunque podremos utilizarlas en el punto que queramos del documento para resaltar cualquier texto Estas cabeceras son definidas por las etiquetas ltH1gtltH2gtltH3gtltH4gtltH5gt y ltH6gt El texto que componga cada cabecera deberaacute estar incluido entre las etiquetas de inicio (ltHngt) y fin (Hn) correspondiente La cabecera ltH1gtseraacute la que muestre el texto de mayor tamantildeo este tamantildeo iraacute disminuyendo hasta llegar a la cabecera ltH6gt Como podemos ver en la Tabla 13 Para alinear las cabeceras utilizamos el atributo align El formato seriacutea ltHn align=centergt como muestra la Tabla 14

Ejemplo Resultado

ltH1gtCabecera 1ltH1gt Cabecera 1 ltH2gtCabecera 2ltH2gt Cabecera 2

Lenguaje HTML copy Grupo EIDOS

24

ltH3gtCabecera 3ltH3gt Cabecera 3

ltH4gtCabecera 4ltH4gt Cabecera 4

ltH5gtCabecera 5ltH5gtCabecera 5

ltH6gtCabecera 6ltH6gtCabecera 6

Tabla 13

Ejemplo Resultado

ltH5 align=centergtCabecera 5ltH5gtCabecera 5

Tabla 14

Atributos del texto Al texto de nuestro documento HTML le podemos aplicar distintos atributos (negrita cursiva subrayado etc) al igual que hacemos cuando trabajamos con el procesador de textos en la edicioacuten de nuestros documentos Para aplicar estos atributos disponemos de distintas etiquetas que aplicaraacuten su efecto al texto incluido entre sus indicadores de inicio y fin Las vemos en la Tabla 15

Atributo Etiqueta Ejemplo Resultado

Negrita ltBgtltBgtltBgtTexto ennegritaltBgt

Texto en negrita

Cursiva ltIgtltIgtltIgtTexto encursivaltIgt

Texto en cursiva

Teletype ltTTgtltTTgtltTTgtTexto en modoteletypeltTTgt

Texto en modoteletype

Subrayado ltUgtltUgt ltUgtTexto subrayadoltUgt Texto subrayado Tachado ltSgtltSgt ltSgtTexto tachadoltSgt Texto tachado

Parpadeo ltBLINKgtltBLINKgtltBLINKgtTextoparpadeandoltBLINKgt

Texto parpadeando

Superiacutendice ltSUPgtltSUPgt ltSUPgtTexto en modosuperiacutendiceltSUPgt

Texto en modo superiacutendice

Subiacutendice ltSUBgtltSUBgtltSUBgtTexto en modosubiacutendiceltSUBgt

Texto en modo subiacutendice

Centrado ltCENTERgtltCENTERgt

ltCENTERgtTextocentradoltCENTERgt

Texto centrado

B Bold I Italic TT Teletype U Underlined S Strike SUP Superscript SUB Subscript

Tabla 15

copy Grupo EIDOS 3 Elementos del lenguaje I

25

Alguna de estas etiquetas no es reconocida por determinados navegadores Asiacute por ejemplo la etiqueta ltBLINKgt (Parpadeo) no es implementada por el Explorer Por lo que seguacuten el explorador que estemos utilizando podremos ver el resultado correctamente o no

Existen otras etiquetas que nos van a servir para especificar de manera diferenciada unidades loacutegicas de nuestro documento HTML tales como citas direcciones de correo etc En algunos casos el formato obtenido con estas etiquetas de estilo loacutegico va a ser el mismo que con las anteriores a las que se les denomina tambieacuten etiquetas de estilo fiacutesico Algunas etiquetas de estilo loacutegico las vemos en la Tabla 16

Etiqueta Ejemplo Resultado

ltSTRONGgtltSTRONGgtltSTRONGgtEspecifica textoresaltado (igualltBgt)ltSTRONGgt

Especifica texto resaltado(igual ltBgt)

ltCITEgtltCITEgtltCITEgtIndica una cita otiacutetulo (igual ltIgt)ltCITEgt

Indica una cita o tiacutetulo (igualltIgt)

ltSTRIKEgtltSTRIKEgtltltSTRIKEgtTexto tachado(igual ltSgt)ltSTRIKEgt

Texto tachado (igual ltSgt)

Tabla 16

Si queremos aplicar efectos maacutes espectaculares a nuestro documento HTML debemos variar el tamantildeo el color y el tipo de letra del texto La etiqueta que nos permite todo esto es ltFONTgtltFONTgt por medio de sus atributos size color y face

ltFONT size=n oacute +- n color=rrggbb oacute name face=nombre defont gt

bull size=n oacute +- n El atributo size nos permite especificar un tamantildeo determinado

para la fuente del texto incluido entre las etiquetas de inicio y fin el cual puede estar entre 1 y 7 El texto de tamantildeo normal equivale a la fuente de tamantildeo 3 (fuente base) Por tanto si especificamos size=+2 el tamantildeo de la fuente seraacute 5 Y si especificamos size= -1 el tamantildeo seraacute 2

Ejemplo Resultado

ltFONT size=2gtTamantildeo 2ltFONTgtTamantildeo 2

ltFONT size=+2gtTamantildeo 5 (3+2)ltFONTgt Tamantildeo 5 (3+2)

ltFONT size=-1gtTamantildeo 2 (3-1)ltFONTgtTamantildeo 2 (3-1)

Tabla 17

bull color=rrggbb oacute name Nos va a permitir definir el color que tendraacute el texto

incluido entre las etiquetas Tabla 18

Lenguaje HTML copy Grupo EIDOS

26

Ejemplo Resultado

ltFONT color=redgtTexto de colorrojoltFONTgt

Texto de color rojo

ltFONT color=bluegtTexto de colorazulltFONTgt

Texto de color azul

ltFONT size=5 color=008000gtTextoverde y de tamantildeo 5ltFONTgt

Texto verde y detamantildeo 5

Tabla 18

bull face=nombre de font Nos va a permitir escribir texto con el tipo de letra que le

especifiquemos En el caso de que el tipo de letra que le hayamos especificado no esteacute cargada en el ordenador que lee la paacutegina se usaraacute el font por defecto del navegador

Ejemplo Resultado

ltFONT face=TahomagtTipo de letraTahomaltFONTgt

Tipo de letra Tahoma

ltFONT size=4 color=blueface=TahomagtTexto azul de tamantildeo4 y TahomaltFONTgt

Texto azul de tamantildeo 4 y Tahoma

Tabla 19

Listas Podemos representar elementos en forma de lista dentro de nuestros documentos de una forma muy sencilla y con una gran versatilidad Estas listas podraacuten incluir cualquiera de los elementos HTML e incluso podemos definir listas anidadas es decir listas dentro de listas HTML nos permite crear tres tipos distintos de listas

bull Listas no numeradas

bull Listas numeradas

bull Listas de definiciones

Listas no numeradas ltULgt UL Unordered List

Con este tipo de listas podemos especificar una serie de elementos sin un orden predeterminado precedidos de una marca o vintildeeta que nosotros mismos podemos definir Para la definicioacuten de los liacutemites de la lista utilizaremos la etiqueta ltULgt ltULgt y para determinar cada uno de los elementos que la componen usaremos la etiqueta ltLIgt El formato es el siguiente

ltUL type=disk oacute circle oacute squaregtltLHgtTiacutetulo de la listaltLHgt

copy Grupo EIDOS 3 Elementos del lenguaje I

27

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltULgtLH List Head LI List Item

Con el atributo type vamos a especificar el tipo de marca o vintildeeta que antecederaacute a cada uno de los elementos de la lista Estas marcas podraacuten ser un disco (disk) un ciacuterculo (circle) o un cuadrado (square) La etiqueta ltLHgt nos va a servir para especificar un posible tiacutetulo de la lista siendo esta opcional Vamos a ver algunos ejemplos en la Tabla 20

Ejemplo Resultado

ltUL type=circlegtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAfricaltLIgtAmeacutericaltLIgtOceaniacutea

ltULgt

Los cinco continentes

Europa

Asia

Aacutefrica

Ameacuterica

Oceaniacutea

ltUL type=squaregtltLIgtEuropaltLIgtAsialtLIgtAfricaltLIgtAmeacutericaltUL type=circle gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltULgtltLIgtOceaniacutea

ltULgt

Europa

Asia

Aacutefrica

Ameacuterica

Ameacuterica del Norte

Ameacuterica del Sur

Oceaniacutea

Tabla 20

Listas numeradas ltOLgt OL Ordered List

Con este tipo de listas podemos especificar una serie de elementos numerados seguacuten el lugar que ocupan en la lista Para la definicioacuten de los liacutemites de la lista utilizaremos la etiqueta ltOLgt ltOLgt y para determinar cada uno de los elementos que la componen usaremos la etiqueta ltLIgt El formato es el siguiente

ltOL start=n type=Tipo de listagtltLHgtTiacutetulo de la listaltLHgt

Lenguaje HTML copy Grupo EIDOS

28

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltOLgt

Con el atributo start vamos a especificar el nuacutemero por el que va a empezar la lista Si no indicamos este argumento la lista empezaraacute a numerarse a partir del 1 Con el atributo type vamos a especificar el tipo de lista numerada Sus posibles valores aparecen a continuacioacuten y veremos algunos ejemplos en la Tabla 21

A Letras mayuacutesculas (A B C )

a Letras minuacutesculas (a b c )

I Nuacutemeros romanos en mayuacutesculas (I II III IV )

i Nuacutemeros romanos en minuacutesculas (i ii iii iv )

1 Numeacutericamente (1 2 3 4 ) (es la numeracioacuten por defecto y por tanto no habriacutea que indicarla)

Ejemplo Resultado

ltOL type=AgtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltLIgtOceaniacutea

ltOLgt

Los cinco continentes

A Europa

B Asia

C Aacutefrica

D Ameacuterica

E Oceaniacutea

ltOL type=I start=2gtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltOL type=i gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltOLgtltLIgtOceaniacutea

ltOLgt

II Europa

III Asia

IV Aacutefrica

V Ameacuterica

i Ameacuterica del Norte

ii Ameacuterica del Sur

VI Oceaniacutea

Tabla 21

copy Grupo EIDOS 3 Elementos del lenguaje I

29

Listas de definiciones ltDLgt DL Definition List

Estas listas nos van a servir para especificar una serie de teacuterminos y sus definiciones correspondientes Para la definicioacuten de la lista usaremos la etiqueta ltDLgt ltDLgt para especificar los teacuterminos usaremos la etiqueta ltDTgt y para especificar la definicioacuten correspondiente a cada teacutermino usaremos la etiqueta ltDDgt El formato es el siguiente

ltDLgtltLHgtTiacutetulo de la listaltLHgtltDTgtTeacutermino 1ltDDgtDefinicioacuten 1ltDTgtTeacutermino 2ltDDgtDefinicioacuten 2

ltDTgtTeacutermino nltDDgtDefinicioacuten n

ltDLgtDT Definition Term DD Definition Description

Vamos a ver un ejemplo en la Tabla 22

Ejemplo Resultado

ltDLgtltDTgtPariacutesltDDgtCapital de FrancialtDTgtRomaltDDgtCapital de ItalialtDTgtMadridltDDgtCapital de Espantildea

ltDLgt

Pariacutes

Capital de Francia

Roma

Capital de Italia

Madrid

Capital de Espantildea

Tabla 22

Hiperenlaces Los hiperenlaces son enlaces de hipertexto que nos van a permitir acceder de manera directa a otros documentos HTML independientemente de su ubicacioacuten o a otras zonas dentro de nuestro propio documento

Enlaces a otras paacuteginas ltA href=gt Con este tipo de hiperenlaces vamos a poder acceder tanto a otras paacuteginas que esteacuten ubicadas dentro de nuestro propio sistema como a paacuteginas ubicadas en puntos muy distantes del globo El formato de este tipo de hiperenlaces es

ltA href=URL a la que se accedegtTexto del hiperenlaceltAgt

Lenguaje HTML copy Grupo EIDOS

30

Con el atributo href vamos a especificar la URL del documento al que se pretende acceder El texto contenido entre las etiquetas de comienzo y fin nos va a servir para definir el hiperenlace por lo que deberiacutea ser clarificador del contenido del documento con el que vamos a enlazar Esta definicioacuten apareceraacute resaltada normalmente en azul y subrayada En la mayoriacutea de los navegadores esta definicioacuten del hiperenlace es sensible por lo que cuando el cursor pasa por encima del mismo este cambia de aspecto indicaacutendolo

Veamos un ejemplo en la Tabla 23

Ejemplo Resultado

ltA href=httpwwweidosesgtPaacutegina inicialde Villa EidosltAgt

Paacutegina inicial de Villa Eidos

Tabla 23

Si situamos el ratoacuten encima del hiperenlace y pulsamos el navegador accederaacute a la paacutegina Web indicada por href es decir accederaacute a la paacutegina situada en httpwwweidoses

Igualmente podriacuteamos indicar el hiperenlace por medio de una imagen Si esta imagen tiene definido un borde este apareceraacute resaltado en color azul El formato correspondiente seriacutea

ltA href=URL a la que se accedegtltIMG src=Imagengt y tambieacutentextoltAgtIMG Image src Source

Veamos un ejemplo en la Tabla 24

Ejemplo Resultado

ltA href=httpwwweidosesgtltIMGsrc=IconogifgtltAgt Villa Eidos Villa Eidos

Tabla 24

Si pulsamos sobre la imagen el navegador accederaacute a la paacutegina Web inicial de Villa Eidos

Enlaces dentro de la misma paacutegina ltA name=gt Este tipo de hiperenlaces nos va a permitir marcar distintas zonas del documento activo con el objeto de tener un acceso directo a las mismas Una buena utilidad de este tipo de enlaces radica en la creacioacuten de iacutendices para documentos largos de forma que si pinchamos en el hiperenlace correspondiente al tiacutetulo de un capiacutetulo determinado el navegador saltaraacute automaacuteticamente hasta el comienzo de dicho capiacutetulo

Para la creacioacuten de estos hiperenlaces debemos seguir dos pasos

copy Grupo EIDOS 3 Elementos del lenguaje I

31

1 Marcar las distintas zonas o secciones del documento Esto lo haremos con el paraacutemetro name

ltA name=Identificador de seccioacutengtTexto de laseccioacutenltAgt

A cada seccioacuten le asignaremos un identificador distinto para poder referenciarlas posteriormente de manera inequiacutevoca

2 Especificar un enlace a cada una de las secciones que hayamos definido ltA href=Identificador de seccioacutengtTexto del enlace a laseccioacutenltAgt

Si pinchamos en este enlace el navegador saltaraacute automaacuteticamente a la seccioacuten correspondiente Veamos un ejemplo sencillito en la Tabla 25 pero demostrativo de todo lo que acabamos de explicar

Ejemplo Resultado

ltA href=Cap1gtCapiacutetulo1ltAgtltA name=Cap1gtCapiacutetulo 1ltAgt

Capiacutetulo 1

Capiacutetulo 1

Tabla 25

Si nos creamos una paacutegina HTML con distintos capiacutetulos podriacuteamos crear una seccioacuten para cada uno de ellos de forma que si pinchamos en el hiperenlace correspondiente al Capiacutetulo 1 el navegador saltariacutea directamente a la seccioacuten correspondiente al Capiacutetulo 1

Ademaacutes de los dos tipos de hiperenlaces vistos podemos crear hiperenlaces que nos permitan acceder a cualquiera de los servicios de Internet Es decir podriacuteamos indicar enlaces a servidores FTP GOPHER NEWS MAILTO etc Para ello tendriacuteamos que indicar la URL correspondiente al servicio al cual queremos acceder como ya vimos en el primer capiacutetulo de este manual

Imaacutegenes

Podremos dar un aspecto mucho maacutes vistoso a nuestros documentos HTML con la inclusioacuten de imaacutegenes Los formatos de imagen que todos los navegadores reconocen son gif y jpg Si queremos insertar una imagen en otro formato el visor deberiacutea disponer del programa externo que permita su visualizacioacuten De todas formas una buena solucioacuten es utilizar alguacuten programa de tratamiento de imaacutegenes que nos convierta la imagen a uno de los formatos mencionados anteriormente

El formato gif es maacutes recomendado para la inclusioacuten de iconos graacuteficas y el formato jpg para el caso de insertar fotografiacuteas en nuestras paacuteginas

Lenguaje HTML copy Grupo EIDOS

32

La etiqueta que nos va a permitir la insercioacuten de imaacutegenes es ltIMGgt La imagen se insertaraacute justo en el punto del documento donde coloquemos dicha etiqueta pudiendo insertar imaacutegenes dentro de listas tablas o formularios

El formato de la etiqueta con sus posibles argumentos es el siguiente

ltIMG src=URL de la imagen alt=Texto alternativoalign=topmiddlebottonleftrigth border=Tamantildeoheight=Tamantildeo width=Tamantildeo hspace=margen vspace=margengt

bull src=URL de la imagen El atributo src nos va servir para indicar la URL de la imagen que

queremos insertar es decir el servidor y camino hasta llegar al fichero de la imagen

No seraacute necesario que la imagen que queremos insertar en nuestro documento esteacute en el ordenador local aunque siacute es recomendable ya que el acceso a las mismas puede ser maacutes lento

Por tanto es una buena praacutectica copiar todas las imaacutegenes que vayamos a incluir en nuestro documento HTML al ordenador local

Tabla 26

bull alt=Texto alternativo Nos va a permitir mostrar un texto alternativo para el caso en que el

navegador no sea capaz de mostrar la imagen Su uso es muy recomendable ya que cuando publiquemos nuestras paacuteginas en la WWW no sabremos desde queacute tipo de navegadores accederaacuten los internautas a nuestras paacuteginas

En la Tabla 27 vamos a ver un ejemplo

Si usas un navegador que no tiene ninguacuten problema para la visualizacioacuten de imaacutegenes desactiva temporalmente la opcioacuten de mostrar imaacutegenes prueba el ejemplo que muestra la Tabla 27 y compaacuteralo con el anterior

Tabla 27

copy Grupo EIDOS 3 Elementos del lenguaje I

33

bull align=topmiddlebotton leftrigth Nos permite indicar coacutemo se alinearaacute el texto que siga a la imagen

top alinea el texto con la parte superior de la imagen

middle con la parte central

bottom con la parte inferior

left imagen alineada a la izquierda de la paacutegina

rigth imagen alineada a la derecha de la paacutegina

Tabla 28

En el caso de que el texto que acompantildea a la imagen tenga maacutes de una liacutenea tan soacutelo la primera seraacute la que se alinearaacute seguacuten alguna de las anteriores alineaciones el resto de liacuteneas se incluiraacuten debajo de la imagen quedando un efecto bastante feo

Para solventar esto estaacuten las alineaciones LEFT (imagen alineada a la izquierda de la paacutegina) y RIGHT (imagen alineada a la derecha de la paacutegina) Las cuales permiten que la imagen se inserte dentro del paacuterrafo que la rodea produciendo un resultado mucho maacutes profesional en la integracioacuten de texto e imaacutegenes

Estas dos alineaciones no se podraacuten usar en combinacioacuten con las anteriores Veamos algunos ejemplos en la Tabla 29

Vemos como en el primer ejemplo la segunda liacutenea de texto aparece debajo de la imagen produciendo un efecto menos vistoso que en los dos ejemplos siguientes

Lenguaje HTML copy Grupo EIDOS

34

Tabla 29

bull border=Tamantildeo Permite antildeadirle un borde a la imagen del tamantildeo que le

especifiquemos

Si la imagen forma parte de un hiperenlace esta apareceraacute con un borde del color del hiperenlace Si no deseaacuteramos que aparezca este borde tendriacuteamos que especificar border=0

Tabla 30

bull height=Tamantildeo Permite especificar el alto de la imagen en puntos de pantalla

(pixels) o en del tamantildeo del documento

bull width=Tamantildeo Con este argumento especificaremos el ancho al que mostraremos la imagen en puntos de pantalla (pixels) o en del tamantildeo del documento

En el segundo de los ejemplos de la Tabla 31 el ancho de la imagen se ha extendido al 50 del total del ancho de la celda donde estaacute contenida la imagen Si pruebas este ejemplo en tu documento HTML la imagen se extenderaacute horizontalmente hasta ocupar el 50 del ancho de la paacutegina

copy Grupo EIDOS 3 Elementos del lenguaje I

35

Tabla 31

bull hspace=Margen hspace Horizontal Space Permite especificar el nuacutemero de espacios

horizontales (en puntos) que separaraacuten a la imagen de cualquier elemento que le siga o le anteceda

bull vspace=Margen vspace Vertical Space Con este argumento especificaremos el margen vertical (en puntos) que habraacute entre la imagen y cualquier otro elemento de nuestro documento

Tabla 32

Elementos del lenguaje II

Tablas HTML nos va a permitir la inclusioacuten de cualquiera de los elementos de nuestra paacutegina (texto imaacutegenes hiperenlaces listas etc) dentro de una tabla Gracias a lo cual conseguiremos dar una mayor y mejor estructuracioacuten a los contenidos de nuestros documentos Ademaacutes la definicioacuten de las tablas en HTML es muy abierta pudiendo en cualquier momento redimensionar la tabla es decir cambiar su nuacutemero de filas o de columnas cambiar el tamantildeo de alguna de sus celdas etc

La etiqueta que nos va a permitir la definicioacuten de tablas es ltTABLEgt ltTABLEgt

El formato general de la etiqueta sin ninguacuten argumento es el siguiente

ltTABLEgtltTR gt

ltTHgtContenido de la celda ltTHgtltTDgtContenido de la celda ltTDgt

ltTRgtltTABLEgt

TR Table Row TH Table Header TD Table Data

Vamos a analizar cada una de estas etiquetas de forma separada

1 ltTABLEgt ltTABLEgt Definicioacuten general de la tabla Dentro de ella definiremos las filas y columnas que la constituyen pudiendo incluso definir tablas dentro de tablas es decir tablas anidadas

Lenguaje HTML copy Grupo EIDOS

38

2 ltTRgt ltTRgt Definicioacuten de las filas de la tabla Por cada etiqueta ltTRgt que incluyamos se crearaacute una fila en la tabla No seraacute necesario indicar la etiqueta de cierre

3 ltTHgtltTHgt oacute ltTDgtltTDgt Definicioacuten de cada una de las celdas de la tabla Vemos que estas etiquetas estaacuten contenidas dentro de otra etiqueta de definicioacuten de fila de forma que por cada etiqueta ltTHgt o ltTDgt que incluyamos se crearaacute una celda dentro de la fila correspondiente La etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera es decir celdas cuyo contenido estaacute resaltado en negrita dejando la etiqueta ltTDgt para definir celdas de datos En este caso tampoco es necesario indicar las etiquetas de cierre

Todas estas etiquetas tienen sus respectivos argumentos Pero antes de analizar cada uno de ellos vamos a ver un ejemplo muy sencillito en la Tabla 33 que nos crearaacute una tabla de una sola celda (1 fila X 1 columna = 1 celda) Para ello usaremos la etiqueta de creacioacuten de tabla ltTABLEgt con el argumento border=1 (nos dibuja un borde de tamantildeo 1 alrededor de la tabla)

Ejemplo Resultado

ltTABLE border=1gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 33

Vamos ahora a analizar lo distintos argumentos que componen las etiquetas de la tabla analizaacutendolos desde lo general (la definicioacuten de la tabla) hasta lo especiacutefico (la definicioacuten de las celdas)

1 Definicioacuten de la tabla ltTABLEgt

ltTABLE border=n cellpadding=n cellspacing=n width=n oacute height=n oacute bgcolor=rrggbb oacute nombre gt

Contenido ltTABLEgt

bull border=n Si especificamos este argumento se dibujaraacute un borde alrededor de la

tabla del ancho que le indiquemos como muestra la Tabla 34

Ejemplo Resultado

Mi primera tabla ltTABLE border=4gtltTRgtltTDgtMi primera tablaltTABLEgt

Tabla 34

bull cellpadding=n Indica el espacio en puntos que separa el contenido de la celda con

el borde de la misma siendo 1 por defecto

copy Grupo EIDOS 4 Elementos del lenguaje II

39

Ejemplo Resultado

ltTABLE border=4 cellpadding=8gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 35

bull cellspacing=n Indica el espacio en puntos que separa a las celdas contenidas dentro de la tabla siendo 2 por defecto

bull width=n oacute Indica la anchura de la tabla en puntos o en en funcioacuten del ancho de la ventana del visualizador Si no indicamos este argumento el ancho de la tabla se ajustaraacute al tamantildeo del contenido de las celdas Esto es lo que ha ocurrido en el uacuteltimo ejemplo que hemos realizado Veamos un ejemplo en el Coacutedigo fuente 11 El resultado se muestra en la Tabla 36

ltTABLE border=4 width=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 11

Mi primera tabla

Tabla 36

bull height=n oacute Nos permite definir la altura de la tabla en puntos o en de la

altura de la ventana del visualizador Si indicamos este argumento lo recomendable es darlo en puntos ya que es maacutes complicado adecuarnos a la altura de la ventana del visualizador Al igual que en el caso anterior si no especificamos este argumento la altura se adecuaraacute al contenido de las celdas El Coacutedigo fuente 12 muestra un ejemplo y la Tabla 37 nos muestra el resultado

ltTABLE border=4 width=50 height=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 12

Mi primera tabla

Tabla 37

bull bgcolor= rrggbb o nombre del color Nos permite definir un color

de fondo para todas las celdas de la tabla Maacutes adelante veremos como podemos definir colores especiacuteficos para cada una de las celdas por separado

Lenguaje HTML copy Grupo EIDOS

40

Ejemplo Resultado

ltTABLE border=4 bgcolor=yellowgtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 38

2 Definicioacuten de las filas de la tabla ltTRgt

ltTR align=leftrightcenter valign=topmiddlebottombgcolor=rrggbb oacute nombregt

Antes de empezar a descifrar el significado de cada uno de los argumentos de esta etiqueta vamos a ver un ejemplo en la Tabla 39 de coacutemo se construiriacutea una tabla con dos filas (2 filas X 1 columna = 2 celdas)

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR gtltTDgtPrimera filaltTRgtltTDgtSegunda filaltTABLEgt

Segunda fila

Tabla 39

bull align=leftrightcenter Con este argumento vamos a indicar la alineacioacuten

horizontal (leftizquierda rightderecha centercentrado) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado Veamos un ejemplo en el Coacutedigo fuente 13 y su correspondiente resultado en la Tabla 40

ltTABLE border=4 width=50 gt ltTRgtltTDgtPrimera filaltTRalign=rightgtltTDgtSegunda filaltTABLEgt

Coacutedigo fuente 13

Primera fila

Segunda fila

Tabla 40

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten

vertical (toparriba middlecentrado bottomabajo) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado

copy Grupo EIDOS 4 Elementos del lenguaje II

41

bull bgcolor= rrggbb o nombre del color En este caso este argumento nos permitiraacute definir un color de fondo para todas las celdas de una fila veamos un ejemplo en la

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR bgcolor=yellowgtltTDgtPrimera

filaltTR bgcolor=greengtltTDgtSegunda

filaltTABLEgt

Segunda fila

Tabla 41

3 Definicioacuten de las celdas de la tabla ltTHgt oacute ltTDgt

ltTH oacute TD align=leftrightcenterjustifyvalign=topmiddlebottom bgcolor=rrggbb oacute nombre width=nrowspan=n colspan=ngt

Como ya explicamos anteriormente la etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera y la etiqueta ltTDgt para la creacioacuten de celdas de datos Vamos a completar nuestro ejemplo inicial antildeadieacutendole tres filas de dos celdas cada una (3 filas X 2 columnas = 6 celdas) Tabla 42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTDgtCelda 21ltTDgtCelda 22

ltTABLEgt Celda 21 Celda 22

Tabla 42

bull align=leftrightcenterjustify Con este argumento vamos a indicar la

alineacioacuten horizontal (left izquierda right derecha center centrado justifyjustificado) del contenido de cada celda por separado Su significado es el mismo que en la etiqueta ltTRgt

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten vertical (toparriba middlecentrado bottomabajo) del contenido de cada celda

bull bgcolor= rrggbb o nombre del color En este caso podremos definir un color de fondo para cada una de las celdas de manera independiente

bull width=n oacute Indica el ancho de la celda en puntos o en en funcioacuten del tamantildeo de la tabla

Lenguaje HTML copy Grupo EIDOS

42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera

1ltTHgtCabecera 2ltTR gtltTD align=rightgtCelda

11ltTD bgcolor=redgtCelda 12ltTRgtltTD

bgcolor=yellowgtCelda 21ltTDalign=centergtCelda 22ltTABLEgt

Celda 21 Celda 22

Tabla 43

bull rowspan=n Con este argumento podemos lograr que una celda concreta abarque maacutes de una fila ya sabemos que por defecto una celda ocupa una sola fila

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTD rowspan=2gtCelda

11ltTDgtCelda 12ltTRgtltTDgtCelda 22

ltTABLEgt

Celda 11 Celda 22

Tabla 44

bull colspan=n Con este argumento podemos lograr que una celda se expanda a maacutes

de una columna

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTD colspan=2

align=centergtCelda 22ltTABLEgt

Celda 22

Tabla 45

Para finalizar este tema sobre la creacioacuten de tablas vamos a ver el ejemplo que aparece en el Coacutedigo fuente 14 y su resultado en la Tabla 46

ltTABLE border=4gtltTR gtltTH colspan=3 bgcolor=redgtTiacutetuloltTR bgcolor=yellowgtltTHgtCabecera 1ltTHgtCabecera 2ltTHgtCabecera 3

copy Grupo EIDOS 4 Elementos del lenguaje II

43

ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTDgtCelda 13ltTRgtltTD rowspan=2gtCelda 21ltTD bgcolor=greengtCelda 22ltTDgtCelda 23ltTRgtltTDgtCelda 32ltTDgtCelda 33

ltTABLEgt

Coacutedigo fuente 14

Tiacutetulo

Cabecera 1 Cabecera 2 Cabecera 3

Celda 11 Celda 12 Celda 13

Celda 22 Celda 23 Celda 21

Celda 32 Celda 33

Tabla 46

Formularios El formulario es el elemento de HTML que nos va a permitir interactuar con los visitantes de nuestras paacuteginas web de forma que podemos solicitarle informacioacuten al usuario y procesarla De esta forma podremos crear en nuestras paacuteginas encuestas para solicitar la opinioacuten del visitante sobre alguacuten tema e incluso sobre el contenido de nuestra propia paacutegina web cuestionarios para evaluar la asimilacioacuten de contenidos sobre un tema concreto que se trate en la paacutegina etc

El contenido de la informacioacuten introducida por medio del formulario seraacute enviado a la direccioacuten URL donde resida el programa que se encargaraacute de procesar los datos A este tipo de programas externos se les denomina programas CGI (Common Gateway Interface)

La etiqueta HTML que nos va a permitir la creacioacuten de formularios es ltFORMgt Su formato es el siguiente

ltFORM action=URL del programa que trata el formulariomethod=postgetgt Elementos del formulario ltFORMgt

bull action=URL del programa que trata el formulario A traveacutes de este

argumento indicaremos como ya hemos mencionado la direccioacuten del fichero de programa que va a tratar la informacioacuten suministrada por el formulario

Tambieacuten podriacuteamos incluir como URL que trata el formulario una direccioacuten de correo electroacutenico Por tanto el valor de este argumento podriacutea ser action =mailto direccioacuten de correo

Nota Esta opcioacuten soacutelo funciona adecuadamente con el navegador Netscape Con el Explorer este enviacuteo dariacutea como resultado un correo en blanco Para que esta opcioacuten funcione de manera independiente del navegador que se esteacute utilizando se ha de emplear un programa externo que realice este proceso

Lenguaje HTML copy Grupo EIDOS

44

bull method=postget A traveacutes de este argumento indicaremos el meacutetodo empleado para transferir la informacioacuten generada por el formulario

Si indicamos post se produciraacute la modificacioacuten del documento destino como es el caso de enviar la informacioacuten a una direccioacuten de correo electroacutenico Mediante el meacutetodo get no se produciraacuten cambios en el documento destino

Dentro de un formulario podremos incluir cualquier texto o instruccioacuten HTML de las vistas a lo largo de los capiacutetulos anteriores ademaacutes claro estaacute de los elementos tiacutepicos de un formulario cajas de texto botones de seleccioacuten menuacutes de opciones etc Vamos a ver coacutemo se incluiraacuten estos elementos en un formulario

Entrada baacutesica de datos Para definir los distintos tipos de campos baacutesicos de entrada de datos usaremos la etiqueta ltINPUTgt

El formato es el siguiente

ltINPUT type= text password checkbox radio hidden submit image reset name=Variable value=Valor inicialgt

bull El argumento type determinaraacute el tipo de campo de entrada que estamos insertando A

continuacioacuten describiremos cada uno de ellos

bull El argumento name especifica el nombre de la variable que tomaraacute el valor introducido en el campo

bull El argumento value especifica el valor por defecto que tendraacute el campo

Vamos a continuacioacuten a describir los distintos tipos campos de entrada que vendraacuten dados por los valores del argumento type

Texto corto type=text

Con este argumento vamos a indicar que el campo a introducir seraacute un texto El formato seriacutea

ltINPUT type= text name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los nuevos atributos es

bull size=Tamantildeo Indicaremos el tamantildeo en caracteres de la ventana de introduccioacuten de texto

bull maxlength=Longitud maacutexima Indicaremos el nuacutemero maacuteximo de caracteres a introducir en el campo

Vamos a ver un ejemplo en la Tabla 47

copy Grupo EIDOS 4 Elementos del lenguaje II

45

Ejemplo Resultado

NombreltINPUT type=text name=Var1Value=Texto por defecto size=20 maxlength=25gt

Tabla 47

Claves type=password

Con este argumento indicamos que el campo a introducir seraacute una palabra clave por lo que los caracteres que se introduzcan seraacuten sustituidos por asteriscos en la visualizacioacuten por pantalla El formato es

ltINPUT type= password name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los distintos argumentos es el mismo que en el caso anterior Veamos un ejemplo en la Tabla 48

Ejemplo Resultado

ClaveltINPUT type=password name=Var2Value=tutankamon size=11 maxlength=10gt

Tabla 48

Botones de seleccioacuten type=checkbox

El checkbox es un botoacuten que presenta dos estados marcado (1) y desmarcado (0) Podremos variar su estado simplemente pinchando con el ratoacuten El formato es

ltINPUT type= checkbox name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto

Si incluimos el argumento value cuando el botoacuten esteacute marcado su variable asociada adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 49

Ejemplo Resultado

ltINPUT type=checkbox name=Var3 value=Op1 checkedgtOpcioacuten1 ltbrgtltINPUT type=checkbox name=Var4 value=Op2gt Opcioacuten 2

Tabla 49

Lenguaje HTML copy Grupo EIDOS

46

Seleccioacuten entre varias opciones type=radio

Este argumento se usa cuando hay que hacer una seleccioacuten entre varias alternativas excluyentes pudieacutendose seleccionar uacutenicamente una de las alternativas Debemos incluir una etiqueta radio por cada una de las posibles alternativas El formato es

ltINPUT type= radio name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto En este caso uacutenicamente uno de los botones de radio podraacute aparecer marcado ya que se usa para el caso de opciones excluyentes

Cuando un botoacuten esteacute seleccionado la variable asociada a la lista de botones adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 50

Ejemplo Resultado

ltINPUT type=radio name=Var5 value=Op1gtOpcioacuten1 ltbrgtltINPUT type=radio name=Var5 value=Op2checkedgt Opcioacuten 2 ltbrgtltINPUT type=radio name=Var5 value=Op3 gtOpcioacuten 3

Tabla 50

En este ejemplo la variable Var5 tendraacute el valor Op2

Campos ocultos type=hidden

Este tipo de campos no son visibles para el usuario Su uso tiene sentido en el caso de enviar alguacuten tipo de informacioacuten que no deba ser visualizada o variada por el lector de nuestra paacutegina Web El formato es

ltINPUT type= hidden name=Variable value=Valor gt

Con esta etiqueta asignariacuteamos a la Variable referenciada por name el Valor de value y se mandariacutea junto con el formulario sin que el usuario de la paacutegina se entere de nada Veamos un ejemplo en el Coacutedigo fuente 15

ltINPUT type=hidden name=Var6 value=tutankamongt

Coacutedigo fuente 15

copy Grupo EIDOS 4 Elementos del lenguaje II

47

Botoacuten de enviacuteo de datos type=submit

Con este argumento especificamos un botoacuten en el que al pulsar los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario El formato es

ltINPUT type= submit value=Mensaje a mostrargt

En este caso el paraacutemetro value indica el mensaje que se mostraraacute en el botoacuten Veamos un ejemplo en la Tabla 51

Ejemplo Resultado

ltINPUT type=submit value=Enviar los Datosgt

Tabla 51

Botoacuten graacutefico de enviacuteo de datos type=image

Con este argumento especificamos un botoacuten de tipo imagen en el que al igual que con el botoacuten anterior si pulsamos en la imagen los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario Su formato es el siguiente

ltINPUT type= image src=URL de la imagen name=Variablegt

Con el paraacutemetro src especificamos la URL de la imagen que seraacute insertada en el botoacuten En este caso en la variable referenciada por name se almacenaraacuten las coordenadas del punto de la imagen donde se halla pinchado (de forma que estas coordenadas podriacutean ser procesadas por el programa que recibe los datos del formulario)

Botoacuten de borrado de datos type=reset

Con este argumento especificamos un botoacuten que al ser pulsado borraraacute el contenido actual de todos los campos dejaacutendolos con sus valores por defecto Su formato es

ltINPUT type= reset value=Texto del botoacutengt

Con el paraacutemetro value especificamos el texto que etiquetaraacute al botoacuten

Ejemplo Resultado

ltINPUT type=reset value=Borrar datosgt

Tabla 52

Lenguaje HTML copy Grupo EIDOS

48

Entrada datos en muacuteltiples liacuteneas En un formulario tambieacuten podremos introducir un campo de texto que abarque varias liacuteneas Para ello usaremos la etiqueta ltTEXTAREAgt ltTEXTAREAgt Su formato es el siguiente

ltTEXTAREA name=Variable rows=Filas cols=ColumnasgtContenido por defectoltTEXTAREAgt

Los argumentos rows y cols nos van a permitir especificar respectivamente el nuacutemero de filas de texto visibles y el nuacutemero de columnas de texto visibles en el campo

Ejemplo Resultado

ltTEXTAREA name=Var7 rows=5 cols=40gtContenido por defectoltTEXTAREAgt

Tabla 53

Entrada de datos a traveacutes de campos de seleccioacuten Con los campos de seleccioacuten podremos desplegar una lista de opciones entre las que podremos seleccionar una Para ello usaremos la etiqueta ltSELECTgt ltSELECTgt Su formato es el siguiente

ltSELECT name=Variable multiple size=ngtltOPTION selected value=Valor_1gtPrimera OpcioacutenltOPTION value=Valor_2gtSegunda Opcioacuten

ltOPTION value=Valor_ngtEneacutesima Opcioacuten

ltSELECTgt

Figura 1

bull La variable referenciada por name tomaraacute el valor(value) de la opcioacuten seleccionada

bull Si especificamos el argumento muacuteltiple se mostraraacuten todas la opciones en forma de tabla El nuacutemero de opciones visibles en la tabla vendraacute dado por el argumento size

copy Grupo EIDOS 4 Elementos del lenguaje II

49

bull Con la etiqueta ltOPTIONgt iremos definiendo cada una de las opciones de la lista

bull El argumento selected va a determinar cuaacutel es la opcioacuten por defecto

Para finalizar vamos a ver el Coacutedigo fuente 16 correspondiente a una encuesta realizada por la editorial ficticia EditoPc y en la Figura 2 observamos el resultado del formulario

ltP align=centergtltBgtEDITORIAL ltIgtEditoPcltIgtltBgtltPgtltFORM action=mailtodireccionejemplo method = postgtNombreltINPUT type=text size=30 name=nombregtltBRgtE_mail ltINPUT type=text size=30 name=e_mailgtltPgtDeseas recibir informacioacuten sobreltINPUT type=checkbox name=infor1 value=InternetgtInternetltINPUT type=checkbox name=infor2 value=ProgramacioacutengtProgramacioacutenltINPUT type=checkbox name=infor3 value=SistOperativogtSistOperativoltINPUT type=checkbox name=infor4 value=OfimaacuteticagtOfimaacuteticaltPgtiquestTe conectas a Internet desde casa ltbrgtltINPUT type=radio name=intercasa value=sigtSiacuteltINPUT type=radio name=intercasa value=nogtNoltPgtiquestQueacute uso le das a tu ordenador ltBRgtltSELECT name=uso multiple size=3gtltOPTION selectedgtProfesionalltOPTIONgtDomeacutesticoltOPTIONgtOcioJuegosltSELECTgtltPgtCaracteriacutesticas de tu PCltBRgtltTEXTAREA name=caract rows=5 cols=40gtltTEXTAREAgtltPgtltINPUT type=submit value=Enviar datosgt ltINPUT type=reset value=Borrardatosgt

Coacutedigo fuente 16

Figura 2

Elementos del lenguaje III

Frames Las frames son una utilidad del HTML que nos permite dividir la ventana del navegador en diferentes subventanas que podraacuten ser manipuladas de manera independiente Esto nos permitiraacute mostrar una paacutegina web diferente en cada una de la subventanas o frames

Estructura de un documento con frames Un documento con frames se estructura de manera diferente a un documento HTML normal Asiacute en este tipo de documentos no apareceraacute la etiqueta ltBODYgt En su lugar se incluiraacute la etiqueta ltFRAMESETgt ltFRAMESETgt dentro de la cual se definiraacuten las distintas frames que se incluyan en el documento

La estructura general de un documento de este tipo seriacutea por tanto

ltHTMLgtltHEADgtCabeceraltHEADgtltFRAMESETgt

Definicioacuten de la distintas framesltFRAMESETgtltNOFRAMESgt

Instrucciones HTMLltNOFRAMESgt

ltHTMLgt

Lenguaje HTML copy Grupo EIDOS

52

Puede darse el caso de que programemos nuestro documento con frames siguiendo la estructura anterior y que el navegador que se use para leer el documento no soporte la caracteriacutestica de frames con lo cual no se mostraraacute nada de lo indicado entre las etiquetas ltFRAMESETgt y ltFRAMESETgtPara solucionar este problema todas las instrucciones HTML incluidas entre las etiquetas ltNOFRAMESgt y ltNOFRAMESgt seraacuten ejecutadas por los navegadores que no soportan las frames

La sintaxis de la etiqueta ltFRAMESETgt es

ltFRAMESET rows=Lista de filas cols=Lista de columnasgtltFRAME src=URL de la frame 1 name=Nombre de la frame 1gtltFRAME src=URL de la frame 2 name=Nombre de la frame 2gt

ltFRAME src=URL de la frame n name=Nombre de la frame ngt

ltFRAMESETgt

Como vemos por cada una de la frames que incluyamos en nuestro documento debemos incluir una etiqueta ltFRAMEgt indicando mediante sus argumentos la direccioacuten URL del documento que se insertaraacute en la subventana (src) y el nombre de la frame (name) Posteriormente describiremos la etiqueta ltFRAMEgt con maacutes detalle

Los argumentos de ltFRAMESETgt son rows y cols definieacutendose uacutenicamente uno de los dos atributos en funcioacuten de si la divisioacuten de la pantalla se realizaraacute por filas (rows) o por columnas (cols)

Por cada una de las subventanas que creemos debemos especificar su tamantildeo en puntos o en porcentaje del tamantildeo de cada subventana Asiacute por ejemplo si especificamos rows= 50 2525 crearemos tres subventanas horizontales ocupando la primera el 50 de la ventana principal y las otras dos el resto Si especificamos cols=100150 crearemos tres subventanas verticales ocupando la primera 100 puntos de la ventana principal la segunda 150 puntos y tercera el espacio restante

Vamos a verlo maacutes claramente con un par de ejemplos praacutecticos que vemos en la Tabla 54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 502525gt ltFRAMEsrc=Pagweb1htm name=Pagweb1gtltFRAMEsrc=Pagweb2htm name=Pagweb2gtltFRAMEsrc=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 11: Programacion web   lenguaje html

Lenguaje HTML copy Grupo EIDOS

14

navegador Lo normal y recomendable es que el tiacutetulo guarde relacioacuten con el contenido de nuestro documento ya que por ejemplo es utilizado por algunos servidores de buacutesqueda para poder intuir el contenido de nuestro documento Veamos un ejemplo en el Coacutedigo fuente 2

ltTITLEgtMi primera paacutegina WebltTITLEgt

Coacutedigo fuente 2

Indicador de refresco del documento ltMETA http-equiv=refresh content=nuacutemero_segundosurl=URL derefrescogt

Esta etiqueta sirve para indicar un documento que deberaacute sustituir al actual transcurrido un nuacutemero determinado de segundos Una posible utilidad de esta etiqueta podriacutea ser para visualizar documentos de forma secuencial de forma que se empieza por un documento y se pasa al siguiente transcurrido un periacuteodo de tiempo sin necesidad de que la persona que lee el documento realice ninguna accioacuten

Veamos un ejemplo en el Coacutedigo fuente 3

ltMETA http-equiv=refresh content=5url=httpwwweidosesgt

Coacutedigo fuente 3

Si insertamos esta instruccioacuten en la cabecera de nuestro paacutegina HTML transcurridos 5 segundos eacutesta se refrescaraacute con la paacutegina Web de portada de Villa Eidos

Indicador de la URL base del documento ltBASE href=URLgt

Con esta etiqueta indicamos la localizacioacuten de los ficheros a los que se hace referencia en nuestra paacutegina Web Si no incluimos esta etiqueta el navegador entenderaacute que dichos ficheros se encuentran en el mismo lugar donde reside nuestra paacutegina Web

Vemos un ejemplo en el Coacutedigo fuente 4

ltBASE href=httpwwweidosesvulcangt

Coacutedigo fuente 4

Si especificamos como URL base de nuestro documento HTML la indicada en este ejemplo y posteriormente hacemos referencia en nuestra paacutegina a un fichero llamado aulahtm se entenderaacute que la localizacioacuten del fichero es httpwwweidosesvulcanaulahtm

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

15

Cuerpo Cuerpo del documento HTML ltBODYgt

ltBODYgt

En el cuerpo de un documento HTML es donde incluiremos las distintas instrucciones del lenguaje junto con el contenido en siacute de nuestra paacutegina Web textos imaacutegenes enlaces a otras paacuteginas etc

Las etiquetas ltBODYgt y ltBODYgt son las que van a delimitar el cuerpo de nuestro documento Esta posee una serie de argumentos que nos van a permitir variar las caracteriacutesticas del documento en su conjunto como por ejemplo el color del texto o del color de fondo de nuestra paacutegina web

Antes de analizar los componentes y atributos de BODY vamos a ver como se especifican los colores en un documento HTML

Estos se pueden especificar por su nombre (name) o por su coacutedigo de color que es un nuacutemero compuesto de tres pares de cifras hexadecimales que nos indican la proporcioacuten de los colores primarios (rojo verde y azul) que forman el color deseado (rrggbb)

Nombre Coacutedigo de color Color mostrado

Black 000000 Negro

Teal 008080 Teal

Blue 0000FF Azul

Navy 000080 Azul marino

Lime 00FF00 Lima

White FFFFFF Blanco

Purple 800080 Puacuterpura

Yellow FFFF00 Amarillo

Olive 808000 Oliva

Red FF0000 Rojo

maroon 800000 Marroacuten

gray 808080 Gris

fuchsia FF00FF Fucsia

green 008000 Verde

Lenguaje HTML copy Grupo EIDOS

16

silver C0C0C0 Plata

aqua 00FFFF Agua

Tabla 2

La etiqueta ltBODYgt presenta una serie de atributos que van a afectar a todo el documento en su conjunto Estos atributos nos van a permitir definir los colores del texto del fondo y de los hiperenlaces del documento Incluso nos permitiraacuten insertar una imagen de fondo en nuestra paacutegina

ltBODY background=URL bgcolor=rrggbb oacute name text=namelink=name vlink=name gt

bull background=URL Nos va a permitir mostrar una imagen como fondo de nuestro

documento HTML El camino a esta imagen vendraacute especificado por la URL que definamos Si la imagen no rellena todo el fondo del documento eacutesta seraacute reproducida tantas veces como sea necesario hasta completar todo el fondo

Si insertas el Coacutedigo fuente 5 en el documento HTML que creamos como ejemplo en el capiacutetulo anterior Pagina1htm este presentaraacute como fondo la imagen fondogif

ltBODY background=fondogifgt

Coacutedigo fuente 5

bull bgcolor=rrggbb oacute name bgcolor Background Color Nos va a permitir definir un

color para el fondo de nuestro documento Este atributo seraacute ignorado si previamente hemos utilizado el atributo background

Inserte el Coacutedigo fuente 6 en Pagina1htm y compruebe el resultado

ltBODY bgcolor=bluegt

Coacutedigo fuente 6

bull text=rrggbb oacute name Nos permitiraacute definir un color para el texto de nuestro

documento Por defecto es negro Inserte el Coacutedigo fuente 7 en Pagina1html y compruebe el resultado

ltBODY text=redgt

Coacutedigo fuente 7

Y ahora inserte el Coacutedigo fuente 8 en el documento y comprueba el resultado

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

17

ltBODY bgcolor=yellow text=navygt

Coacutedigo fuente 8

bull link=rrggbb oacute name Indica el color que tendraacuten los hiperenlaces que no han sido

accedidos Por defecto es azul Como todaviacutea no sabemos insertar hiperenlaces en nuestro documento vamos a dejar el ejemplo correspondiente para maacutes adelante

bull vlink=rrggbb oacute name vlink Visited Links Indica el color de los hiperenlaces que ya han sido accedidos Por defecto es puacuterpura

Caracteres especiales Hasta ahora hemos escrito algunos ejemplos de coacutedigo HTML pero hemos pasado por alto algunas limitaciones de HTML respecto al uso de caracteres especiales Una de estas limitaciones es por ejemplo el uso de los caracteres lt y gt que como ya sabemos indican el inicio y fin de una etiqueta HTML Pues bien si quisieacuteramos escribir estos caracteres como parte normal de un texto el navegador no sabriacutea si se trata de texto normal o del comienzo y final de una etiqueta o sea que se hariacutea un liacuteo

Como todo tiene solucioacuten existen unos coacutedigos para poder escribir estos caracteres y otros relacionados con las etiquetas los vemos en la Tabla 3

Siacutembolo Coacutedigo

lt (menor que) amplt

gt (mayor que) ampgt

amp (ampersand) ampamp

(comillas) ampquot

Tabla 3

Para las letras especiacuteficas del idioma castellano las vocales acentuadas la ntilde la uuml y los signos iquest y iexcl existen los coacutedigos que muestra la Tabla 4

Letra Coacutedigo Letra Coacutedigo Letra Coacutedigo

aacute ampaacute Aacute ampAacute ntilde ampntilde

eacute ampeacute Eacute ampEacute Ntilde ampNtilde

iacute ampiacute

Iacute ampIacute

uuml ampuuml

Lenguaje HTML copy Grupo EIDOS

18

oacute ampoacute Oacute ampOacute Uuml ampUuml

uacute ampuacute Uacute ampUacute iquest amp191

iexcl amp161

Tabla 4

Para los navegadores actuales podemos escribir nuestro coacutedigo HTML de manera directa sin tener en cuenta estos coacutedigos pero nunca podemos asegurar que las personas que accedan a nuestras paacuteginas con otros navegadores puedan leerlas correctamente Asiacute que los maacutes adecuado es el empleo de los mismos Otros siacutembolos especiales aparecen en la Tabla 5

Siacutembolo Coacutedigo

Ccedil ampccedil

Ccedil ampCcedil

copy ampcopy

reg ampreg

Tabla 5

Veamos un ejemplo en el Coacutedigo fuente 9

ampquotLa inspiraciampoacuten existe pero tiene que encontrarse trabajandoampquotampcopy Pablo Ruampiacutez Picasso

Coacutedigo fuente 9

Esta instruccioacuten HTML deberiacutea producir el siguiente resultado

La inspiracioacuten existe pero tiene que encontrarse trabajando copyPablo Ruiacutez Picasso

Para la inclusioacuten de comentarios en nuestra paacutegina HTML podemos usar la etiqueta lt-- --gt Estos comentarios nos podraacuten servir para efectuar anotaciones en nuestro documento HTML que ayuden a una mayor comprensioacuten del coacutedigo En el Coacutedigo fuente 10 se muestra un ejemplo de comentario

lt-- Esto es un comentario y no seraacute mostrado por el navegador --gt

Coacutedigo fuente 10

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

19

Espaciado y saltos de liacutenea En HTML soacutelo se admite un uacutenico espacio en blanco separando cualquier elemento o texto el resto de espacios seraacuten ignorados por el navegador al igual que las tabulaciones retornos de carro etc Veamos un ejemplo en la Tabla 6

Ejemplo Resultado

Esta frase no se veraacute asiacute en el visor Esta frase no se veraacute asiacute en el visor

Tabla 6

No obstante siacute podremos dar el formato que deseemos a nuestras paacuteginas con el empleo de los siguientes elementos del lenguaje HTML

Inclusioacuten de espacios en blanco ampnbsp Nos permitiraacute la inclusioacuten de maacutes de un espacio en blanco entre dos textos consecutivos de forma que estos espacios se muestren de forma efectiva en el navegador Tendremos que incluir tantas expresiones ampnbsp como espacios en blanco se deseen incluir

Ejemplo Resultado

Texto1ampnbspampnbspampnbspampnbspTexto2 Texto1 Texto2

Tabla 7

Salto de liacutenea ltBRgt BR Break Nos permite dar un salto a la liacutenea siguiente en el punto donde la etiqueta sea insertada

Ejemplo Resultado

Esta frase tiene aquiacuteltBRgt un salto de liacutenea Esta frase tiene aquiacute un salto de liacutenea

Tabla 8

Cambio de paacuterrafo ltPgt P Paragraph Permite definir un paacuterrafo introduciendo normalmente un espacio de separacioacuten de dos liacuteneas con el texto siguiente al punto donde hayamos insertado la etiqueta ltPgt

Lenguaje HTML copy Grupo EIDOS

20

Ejemplo Resultado

Esta frase tiene aquiacuteltPgt un cambio de paacuterrafo Esta frase tiene aquiacute

un cambio de paacuterrafo

Tabla 9

La etiqueta de fin paacuterrafo ltPgt es opcional no siendo necesario incluirla Aunque siempre es recomendable delimitar claramente el inicio y final de un paacuterrafo Ademaacutes cuando usemos esta etiqueta como cerrada ltPgt ltPgt tenemos la posibilidad de incluirle el atributo align el cual indica al navegador la forma de justificar el texto incluido en el paacuterrafo El formato seriacutea el siguiente

ltP align= left right center justify gtTexto contenido en elpaacuterrafo ltPgt

Veamos algunos ejemplos en la Tabla 10

Ejemplo Resultado

ltP align=rightgtEste es un ejemplode paacuterrafo alineado a laderechaltPgt

Este es un ejemplo de paacuterrafo alineado a la derecha

ltP align=centergtEste es unejemplo de paacuterrafo centradoltPgt

Este es un ejemplo de paacuterrafo centrado

Tabla 10

Liacutenea Horizontal ltHRgt HR Horizontal Rule Nos permite insertar una liacutenea horizontal cuyo tamantildeo podremos determinar a traveacutes de sus atributos Si no especificamos ninguacuten atributo dibujaraacute una liacutenea que ocupe el ancho de la pantalla del navegador Su utilidad es la de permitirnos dividir nuestra paacutegina en distintas secciones No seraacute necesaria la etiqueta de fin ltHRgt

El formato de la etiqueta con sus posibles atributos es

ltHR align= left right center noshade size=n width=n gt

bull align= left right center Permite establecer la alineacioacuten de la liacutenea a la izquierda a la derecha o centrarla

bull noshade No muestra la sombra de la liacutenea evitando el efecto de tres dimensiones

bull size=n Indica el grosor de la liacutenea en pixels

bull width=n oacute n Especificaraacute el ancho de la liacutenea este se podraacute especificar en pixels (n) o en tanto por ciento del ancho de la ventana (n) Vamos a ver algunos ejemplos en la Tabla 11

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

21

Ejemplo Resultado

ltHRgt

ltHR size=3 noshadegt

ltHR size=5width=50align=rightgt

ltHR size=10width=50align=centergt

Tabla 11

Texto preformateado ltPREgt PRE Preformatted Nos permitiraacute visualizar el texto tal y como se ha escrito respetando los saltos de liacutenea las tabulaciones y espacios en blanco de todo el texto incluido entre las etiquetas ltPREgt y ltPREgt

El texto se mostraraacute con una fuente de espaciado fijo maacutes pequentildea que el texto normal No es recomendable su uso ya que presenta muchas limitaciones y no se obtiene una buena presentacioacuten

Ejemplo Resultado

ltPREgtEste texto estaacutepreformateadoltPREgt

Este texto estaacute preformateado

Tabla 12

Elementos del lenguaje I

Cabeceras y atributos de texto

Cabeceras ltH1gtltH6gt H Heading En un documento HTML podemos incluir seis tipos distintos de cabeceras que van a constituir normalmente el tiacutetulo y los distintos subapartados que forman el documento aunque podremos utilizarlas en el punto que queramos del documento para resaltar cualquier texto Estas cabeceras son definidas por las etiquetas ltH1gtltH2gtltH3gtltH4gtltH5gt y ltH6gt El texto que componga cada cabecera deberaacute estar incluido entre las etiquetas de inicio (ltHngt) y fin (Hn) correspondiente La cabecera ltH1gtseraacute la que muestre el texto de mayor tamantildeo este tamantildeo iraacute disminuyendo hasta llegar a la cabecera ltH6gt Como podemos ver en la Tabla 13 Para alinear las cabeceras utilizamos el atributo align El formato seriacutea ltHn align=centergt como muestra la Tabla 14

Ejemplo Resultado

ltH1gtCabecera 1ltH1gt Cabecera 1 ltH2gtCabecera 2ltH2gt Cabecera 2

Lenguaje HTML copy Grupo EIDOS

24

ltH3gtCabecera 3ltH3gt Cabecera 3

ltH4gtCabecera 4ltH4gt Cabecera 4

ltH5gtCabecera 5ltH5gtCabecera 5

ltH6gtCabecera 6ltH6gtCabecera 6

Tabla 13

Ejemplo Resultado

ltH5 align=centergtCabecera 5ltH5gtCabecera 5

Tabla 14

Atributos del texto Al texto de nuestro documento HTML le podemos aplicar distintos atributos (negrita cursiva subrayado etc) al igual que hacemos cuando trabajamos con el procesador de textos en la edicioacuten de nuestros documentos Para aplicar estos atributos disponemos de distintas etiquetas que aplicaraacuten su efecto al texto incluido entre sus indicadores de inicio y fin Las vemos en la Tabla 15

Atributo Etiqueta Ejemplo Resultado

Negrita ltBgtltBgtltBgtTexto ennegritaltBgt

Texto en negrita

Cursiva ltIgtltIgtltIgtTexto encursivaltIgt

Texto en cursiva

Teletype ltTTgtltTTgtltTTgtTexto en modoteletypeltTTgt

Texto en modoteletype

Subrayado ltUgtltUgt ltUgtTexto subrayadoltUgt Texto subrayado Tachado ltSgtltSgt ltSgtTexto tachadoltSgt Texto tachado

Parpadeo ltBLINKgtltBLINKgtltBLINKgtTextoparpadeandoltBLINKgt

Texto parpadeando

Superiacutendice ltSUPgtltSUPgt ltSUPgtTexto en modosuperiacutendiceltSUPgt

Texto en modo superiacutendice

Subiacutendice ltSUBgtltSUBgtltSUBgtTexto en modosubiacutendiceltSUBgt

Texto en modo subiacutendice

Centrado ltCENTERgtltCENTERgt

ltCENTERgtTextocentradoltCENTERgt

Texto centrado

B Bold I Italic TT Teletype U Underlined S Strike SUP Superscript SUB Subscript

Tabla 15

copy Grupo EIDOS 3 Elementos del lenguaje I

25

Alguna de estas etiquetas no es reconocida por determinados navegadores Asiacute por ejemplo la etiqueta ltBLINKgt (Parpadeo) no es implementada por el Explorer Por lo que seguacuten el explorador que estemos utilizando podremos ver el resultado correctamente o no

Existen otras etiquetas que nos van a servir para especificar de manera diferenciada unidades loacutegicas de nuestro documento HTML tales como citas direcciones de correo etc En algunos casos el formato obtenido con estas etiquetas de estilo loacutegico va a ser el mismo que con las anteriores a las que se les denomina tambieacuten etiquetas de estilo fiacutesico Algunas etiquetas de estilo loacutegico las vemos en la Tabla 16

Etiqueta Ejemplo Resultado

ltSTRONGgtltSTRONGgtltSTRONGgtEspecifica textoresaltado (igualltBgt)ltSTRONGgt

Especifica texto resaltado(igual ltBgt)

ltCITEgtltCITEgtltCITEgtIndica una cita otiacutetulo (igual ltIgt)ltCITEgt

Indica una cita o tiacutetulo (igualltIgt)

ltSTRIKEgtltSTRIKEgtltltSTRIKEgtTexto tachado(igual ltSgt)ltSTRIKEgt

Texto tachado (igual ltSgt)

Tabla 16

Si queremos aplicar efectos maacutes espectaculares a nuestro documento HTML debemos variar el tamantildeo el color y el tipo de letra del texto La etiqueta que nos permite todo esto es ltFONTgtltFONTgt por medio de sus atributos size color y face

ltFONT size=n oacute +- n color=rrggbb oacute name face=nombre defont gt

bull size=n oacute +- n El atributo size nos permite especificar un tamantildeo determinado

para la fuente del texto incluido entre las etiquetas de inicio y fin el cual puede estar entre 1 y 7 El texto de tamantildeo normal equivale a la fuente de tamantildeo 3 (fuente base) Por tanto si especificamos size=+2 el tamantildeo de la fuente seraacute 5 Y si especificamos size= -1 el tamantildeo seraacute 2

Ejemplo Resultado

ltFONT size=2gtTamantildeo 2ltFONTgtTamantildeo 2

ltFONT size=+2gtTamantildeo 5 (3+2)ltFONTgt Tamantildeo 5 (3+2)

ltFONT size=-1gtTamantildeo 2 (3-1)ltFONTgtTamantildeo 2 (3-1)

Tabla 17

bull color=rrggbb oacute name Nos va a permitir definir el color que tendraacute el texto

incluido entre las etiquetas Tabla 18

Lenguaje HTML copy Grupo EIDOS

26

Ejemplo Resultado

ltFONT color=redgtTexto de colorrojoltFONTgt

Texto de color rojo

ltFONT color=bluegtTexto de colorazulltFONTgt

Texto de color azul

ltFONT size=5 color=008000gtTextoverde y de tamantildeo 5ltFONTgt

Texto verde y detamantildeo 5

Tabla 18

bull face=nombre de font Nos va a permitir escribir texto con el tipo de letra que le

especifiquemos En el caso de que el tipo de letra que le hayamos especificado no esteacute cargada en el ordenador que lee la paacutegina se usaraacute el font por defecto del navegador

Ejemplo Resultado

ltFONT face=TahomagtTipo de letraTahomaltFONTgt

Tipo de letra Tahoma

ltFONT size=4 color=blueface=TahomagtTexto azul de tamantildeo4 y TahomaltFONTgt

Texto azul de tamantildeo 4 y Tahoma

Tabla 19

Listas Podemos representar elementos en forma de lista dentro de nuestros documentos de una forma muy sencilla y con una gran versatilidad Estas listas podraacuten incluir cualquiera de los elementos HTML e incluso podemos definir listas anidadas es decir listas dentro de listas HTML nos permite crear tres tipos distintos de listas

bull Listas no numeradas

bull Listas numeradas

bull Listas de definiciones

Listas no numeradas ltULgt UL Unordered List

Con este tipo de listas podemos especificar una serie de elementos sin un orden predeterminado precedidos de una marca o vintildeeta que nosotros mismos podemos definir Para la definicioacuten de los liacutemites de la lista utilizaremos la etiqueta ltULgt ltULgt y para determinar cada uno de los elementos que la componen usaremos la etiqueta ltLIgt El formato es el siguiente

ltUL type=disk oacute circle oacute squaregtltLHgtTiacutetulo de la listaltLHgt

copy Grupo EIDOS 3 Elementos del lenguaje I

27

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltULgtLH List Head LI List Item

Con el atributo type vamos a especificar el tipo de marca o vintildeeta que antecederaacute a cada uno de los elementos de la lista Estas marcas podraacuten ser un disco (disk) un ciacuterculo (circle) o un cuadrado (square) La etiqueta ltLHgt nos va a servir para especificar un posible tiacutetulo de la lista siendo esta opcional Vamos a ver algunos ejemplos en la Tabla 20

Ejemplo Resultado

ltUL type=circlegtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAfricaltLIgtAmeacutericaltLIgtOceaniacutea

ltULgt

Los cinco continentes

Europa

Asia

Aacutefrica

Ameacuterica

Oceaniacutea

ltUL type=squaregtltLIgtEuropaltLIgtAsialtLIgtAfricaltLIgtAmeacutericaltUL type=circle gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltULgtltLIgtOceaniacutea

ltULgt

Europa

Asia

Aacutefrica

Ameacuterica

Ameacuterica del Norte

Ameacuterica del Sur

Oceaniacutea

Tabla 20

Listas numeradas ltOLgt OL Ordered List

Con este tipo de listas podemos especificar una serie de elementos numerados seguacuten el lugar que ocupan en la lista Para la definicioacuten de los liacutemites de la lista utilizaremos la etiqueta ltOLgt ltOLgt y para determinar cada uno de los elementos que la componen usaremos la etiqueta ltLIgt El formato es el siguiente

ltOL start=n type=Tipo de listagtltLHgtTiacutetulo de la listaltLHgt

Lenguaje HTML copy Grupo EIDOS

28

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltOLgt

Con el atributo start vamos a especificar el nuacutemero por el que va a empezar la lista Si no indicamos este argumento la lista empezaraacute a numerarse a partir del 1 Con el atributo type vamos a especificar el tipo de lista numerada Sus posibles valores aparecen a continuacioacuten y veremos algunos ejemplos en la Tabla 21

A Letras mayuacutesculas (A B C )

a Letras minuacutesculas (a b c )

I Nuacutemeros romanos en mayuacutesculas (I II III IV )

i Nuacutemeros romanos en minuacutesculas (i ii iii iv )

1 Numeacutericamente (1 2 3 4 ) (es la numeracioacuten por defecto y por tanto no habriacutea que indicarla)

Ejemplo Resultado

ltOL type=AgtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltLIgtOceaniacutea

ltOLgt

Los cinco continentes

A Europa

B Asia

C Aacutefrica

D Ameacuterica

E Oceaniacutea

ltOL type=I start=2gtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltOL type=i gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltOLgtltLIgtOceaniacutea

ltOLgt

II Europa

III Asia

IV Aacutefrica

V Ameacuterica

i Ameacuterica del Norte

ii Ameacuterica del Sur

VI Oceaniacutea

Tabla 21

copy Grupo EIDOS 3 Elementos del lenguaje I

29

Listas de definiciones ltDLgt DL Definition List

Estas listas nos van a servir para especificar una serie de teacuterminos y sus definiciones correspondientes Para la definicioacuten de la lista usaremos la etiqueta ltDLgt ltDLgt para especificar los teacuterminos usaremos la etiqueta ltDTgt y para especificar la definicioacuten correspondiente a cada teacutermino usaremos la etiqueta ltDDgt El formato es el siguiente

ltDLgtltLHgtTiacutetulo de la listaltLHgtltDTgtTeacutermino 1ltDDgtDefinicioacuten 1ltDTgtTeacutermino 2ltDDgtDefinicioacuten 2

ltDTgtTeacutermino nltDDgtDefinicioacuten n

ltDLgtDT Definition Term DD Definition Description

Vamos a ver un ejemplo en la Tabla 22

Ejemplo Resultado

ltDLgtltDTgtPariacutesltDDgtCapital de FrancialtDTgtRomaltDDgtCapital de ItalialtDTgtMadridltDDgtCapital de Espantildea

ltDLgt

Pariacutes

Capital de Francia

Roma

Capital de Italia

Madrid

Capital de Espantildea

Tabla 22

Hiperenlaces Los hiperenlaces son enlaces de hipertexto que nos van a permitir acceder de manera directa a otros documentos HTML independientemente de su ubicacioacuten o a otras zonas dentro de nuestro propio documento

Enlaces a otras paacuteginas ltA href=gt Con este tipo de hiperenlaces vamos a poder acceder tanto a otras paacuteginas que esteacuten ubicadas dentro de nuestro propio sistema como a paacuteginas ubicadas en puntos muy distantes del globo El formato de este tipo de hiperenlaces es

ltA href=URL a la que se accedegtTexto del hiperenlaceltAgt

Lenguaje HTML copy Grupo EIDOS

30

Con el atributo href vamos a especificar la URL del documento al que se pretende acceder El texto contenido entre las etiquetas de comienzo y fin nos va a servir para definir el hiperenlace por lo que deberiacutea ser clarificador del contenido del documento con el que vamos a enlazar Esta definicioacuten apareceraacute resaltada normalmente en azul y subrayada En la mayoriacutea de los navegadores esta definicioacuten del hiperenlace es sensible por lo que cuando el cursor pasa por encima del mismo este cambia de aspecto indicaacutendolo

Veamos un ejemplo en la Tabla 23

Ejemplo Resultado

ltA href=httpwwweidosesgtPaacutegina inicialde Villa EidosltAgt

Paacutegina inicial de Villa Eidos

Tabla 23

Si situamos el ratoacuten encima del hiperenlace y pulsamos el navegador accederaacute a la paacutegina Web indicada por href es decir accederaacute a la paacutegina situada en httpwwweidoses

Igualmente podriacuteamos indicar el hiperenlace por medio de una imagen Si esta imagen tiene definido un borde este apareceraacute resaltado en color azul El formato correspondiente seriacutea

ltA href=URL a la que se accedegtltIMG src=Imagengt y tambieacutentextoltAgtIMG Image src Source

Veamos un ejemplo en la Tabla 24

Ejemplo Resultado

ltA href=httpwwweidosesgtltIMGsrc=IconogifgtltAgt Villa Eidos Villa Eidos

Tabla 24

Si pulsamos sobre la imagen el navegador accederaacute a la paacutegina Web inicial de Villa Eidos

Enlaces dentro de la misma paacutegina ltA name=gt Este tipo de hiperenlaces nos va a permitir marcar distintas zonas del documento activo con el objeto de tener un acceso directo a las mismas Una buena utilidad de este tipo de enlaces radica en la creacioacuten de iacutendices para documentos largos de forma que si pinchamos en el hiperenlace correspondiente al tiacutetulo de un capiacutetulo determinado el navegador saltaraacute automaacuteticamente hasta el comienzo de dicho capiacutetulo

Para la creacioacuten de estos hiperenlaces debemos seguir dos pasos

copy Grupo EIDOS 3 Elementos del lenguaje I

31

1 Marcar las distintas zonas o secciones del documento Esto lo haremos con el paraacutemetro name

ltA name=Identificador de seccioacutengtTexto de laseccioacutenltAgt

A cada seccioacuten le asignaremos un identificador distinto para poder referenciarlas posteriormente de manera inequiacutevoca

2 Especificar un enlace a cada una de las secciones que hayamos definido ltA href=Identificador de seccioacutengtTexto del enlace a laseccioacutenltAgt

Si pinchamos en este enlace el navegador saltaraacute automaacuteticamente a la seccioacuten correspondiente Veamos un ejemplo sencillito en la Tabla 25 pero demostrativo de todo lo que acabamos de explicar

Ejemplo Resultado

ltA href=Cap1gtCapiacutetulo1ltAgtltA name=Cap1gtCapiacutetulo 1ltAgt

Capiacutetulo 1

Capiacutetulo 1

Tabla 25

Si nos creamos una paacutegina HTML con distintos capiacutetulos podriacuteamos crear una seccioacuten para cada uno de ellos de forma que si pinchamos en el hiperenlace correspondiente al Capiacutetulo 1 el navegador saltariacutea directamente a la seccioacuten correspondiente al Capiacutetulo 1

Ademaacutes de los dos tipos de hiperenlaces vistos podemos crear hiperenlaces que nos permitan acceder a cualquiera de los servicios de Internet Es decir podriacuteamos indicar enlaces a servidores FTP GOPHER NEWS MAILTO etc Para ello tendriacuteamos que indicar la URL correspondiente al servicio al cual queremos acceder como ya vimos en el primer capiacutetulo de este manual

Imaacutegenes

Podremos dar un aspecto mucho maacutes vistoso a nuestros documentos HTML con la inclusioacuten de imaacutegenes Los formatos de imagen que todos los navegadores reconocen son gif y jpg Si queremos insertar una imagen en otro formato el visor deberiacutea disponer del programa externo que permita su visualizacioacuten De todas formas una buena solucioacuten es utilizar alguacuten programa de tratamiento de imaacutegenes que nos convierta la imagen a uno de los formatos mencionados anteriormente

El formato gif es maacutes recomendado para la inclusioacuten de iconos graacuteficas y el formato jpg para el caso de insertar fotografiacuteas en nuestras paacuteginas

Lenguaje HTML copy Grupo EIDOS

32

La etiqueta que nos va a permitir la insercioacuten de imaacutegenes es ltIMGgt La imagen se insertaraacute justo en el punto del documento donde coloquemos dicha etiqueta pudiendo insertar imaacutegenes dentro de listas tablas o formularios

El formato de la etiqueta con sus posibles argumentos es el siguiente

ltIMG src=URL de la imagen alt=Texto alternativoalign=topmiddlebottonleftrigth border=Tamantildeoheight=Tamantildeo width=Tamantildeo hspace=margen vspace=margengt

bull src=URL de la imagen El atributo src nos va servir para indicar la URL de la imagen que

queremos insertar es decir el servidor y camino hasta llegar al fichero de la imagen

No seraacute necesario que la imagen que queremos insertar en nuestro documento esteacute en el ordenador local aunque siacute es recomendable ya que el acceso a las mismas puede ser maacutes lento

Por tanto es una buena praacutectica copiar todas las imaacutegenes que vayamos a incluir en nuestro documento HTML al ordenador local

Tabla 26

bull alt=Texto alternativo Nos va a permitir mostrar un texto alternativo para el caso en que el

navegador no sea capaz de mostrar la imagen Su uso es muy recomendable ya que cuando publiquemos nuestras paacuteginas en la WWW no sabremos desde queacute tipo de navegadores accederaacuten los internautas a nuestras paacuteginas

En la Tabla 27 vamos a ver un ejemplo

Si usas un navegador que no tiene ninguacuten problema para la visualizacioacuten de imaacutegenes desactiva temporalmente la opcioacuten de mostrar imaacutegenes prueba el ejemplo que muestra la Tabla 27 y compaacuteralo con el anterior

Tabla 27

copy Grupo EIDOS 3 Elementos del lenguaje I

33

bull align=topmiddlebotton leftrigth Nos permite indicar coacutemo se alinearaacute el texto que siga a la imagen

top alinea el texto con la parte superior de la imagen

middle con la parte central

bottom con la parte inferior

left imagen alineada a la izquierda de la paacutegina

rigth imagen alineada a la derecha de la paacutegina

Tabla 28

En el caso de que el texto que acompantildea a la imagen tenga maacutes de una liacutenea tan soacutelo la primera seraacute la que se alinearaacute seguacuten alguna de las anteriores alineaciones el resto de liacuteneas se incluiraacuten debajo de la imagen quedando un efecto bastante feo

Para solventar esto estaacuten las alineaciones LEFT (imagen alineada a la izquierda de la paacutegina) y RIGHT (imagen alineada a la derecha de la paacutegina) Las cuales permiten que la imagen se inserte dentro del paacuterrafo que la rodea produciendo un resultado mucho maacutes profesional en la integracioacuten de texto e imaacutegenes

Estas dos alineaciones no se podraacuten usar en combinacioacuten con las anteriores Veamos algunos ejemplos en la Tabla 29

Vemos como en el primer ejemplo la segunda liacutenea de texto aparece debajo de la imagen produciendo un efecto menos vistoso que en los dos ejemplos siguientes

Lenguaje HTML copy Grupo EIDOS

34

Tabla 29

bull border=Tamantildeo Permite antildeadirle un borde a la imagen del tamantildeo que le

especifiquemos

Si la imagen forma parte de un hiperenlace esta apareceraacute con un borde del color del hiperenlace Si no deseaacuteramos que aparezca este borde tendriacuteamos que especificar border=0

Tabla 30

bull height=Tamantildeo Permite especificar el alto de la imagen en puntos de pantalla

(pixels) o en del tamantildeo del documento

bull width=Tamantildeo Con este argumento especificaremos el ancho al que mostraremos la imagen en puntos de pantalla (pixels) o en del tamantildeo del documento

En el segundo de los ejemplos de la Tabla 31 el ancho de la imagen se ha extendido al 50 del total del ancho de la celda donde estaacute contenida la imagen Si pruebas este ejemplo en tu documento HTML la imagen se extenderaacute horizontalmente hasta ocupar el 50 del ancho de la paacutegina

copy Grupo EIDOS 3 Elementos del lenguaje I

35

Tabla 31

bull hspace=Margen hspace Horizontal Space Permite especificar el nuacutemero de espacios

horizontales (en puntos) que separaraacuten a la imagen de cualquier elemento que le siga o le anteceda

bull vspace=Margen vspace Vertical Space Con este argumento especificaremos el margen vertical (en puntos) que habraacute entre la imagen y cualquier otro elemento de nuestro documento

Tabla 32

Elementos del lenguaje II

Tablas HTML nos va a permitir la inclusioacuten de cualquiera de los elementos de nuestra paacutegina (texto imaacutegenes hiperenlaces listas etc) dentro de una tabla Gracias a lo cual conseguiremos dar una mayor y mejor estructuracioacuten a los contenidos de nuestros documentos Ademaacutes la definicioacuten de las tablas en HTML es muy abierta pudiendo en cualquier momento redimensionar la tabla es decir cambiar su nuacutemero de filas o de columnas cambiar el tamantildeo de alguna de sus celdas etc

La etiqueta que nos va a permitir la definicioacuten de tablas es ltTABLEgt ltTABLEgt

El formato general de la etiqueta sin ninguacuten argumento es el siguiente

ltTABLEgtltTR gt

ltTHgtContenido de la celda ltTHgtltTDgtContenido de la celda ltTDgt

ltTRgtltTABLEgt

TR Table Row TH Table Header TD Table Data

Vamos a analizar cada una de estas etiquetas de forma separada

1 ltTABLEgt ltTABLEgt Definicioacuten general de la tabla Dentro de ella definiremos las filas y columnas que la constituyen pudiendo incluso definir tablas dentro de tablas es decir tablas anidadas

Lenguaje HTML copy Grupo EIDOS

38

2 ltTRgt ltTRgt Definicioacuten de las filas de la tabla Por cada etiqueta ltTRgt que incluyamos se crearaacute una fila en la tabla No seraacute necesario indicar la etiqueta de cierre

3 ltTHgtltTHgt oacute ltTDgtltTDgt Definicioacuten de cada una de las celdas de la tabla Vemos que estas etiquetas estaacuten contenidas dentro de otra etiqueta de definicioacuten de fila de forma que por cada etiqueta ltTHgt o ltTDgt que incluyamos se crearaacute una celda dentro de la fila correspondiente La etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera es decir celdas cuyo contenido estaacute resaltado en negrita dejando la etiqueta ltTDgt para definir celdas de datos En este caso tampoco es necesario indicar las etiquetas de cierre

Todas estas etiquetas tienen sus respectivos argumentos Pero antes de analizar cada uno de ellos vamos a ver un ejemplo muy sencillito en la Tabla 33 que nos crearaacute una tabla de una sola celda (1 fila X 1 columna = 1 celda) Para ello usaremos la etiqueta de creacioacuten de tabla ltTABLEgt con el argumento border=1 (nos dibuja un borde de tamantildeo 1 alrededor de la tabla)

Ejemplo Resultado

ltTABLE border=1gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 33

Vamos ahora a analizar lo distintos argumentos que componen las etiquetas de la tabla analizaacutendolos desde lo general (la definicioacuten de la tabla) hasta lo especiacutefico (la definicioacuten de las celdas)

1 Definicioacuten de la tabla ltTABLEgt

ltTABLE border=n cellpadding=n cellspacing=n width=n oacute height=n oacute bgcolor=rrggbb oacute nombre gt

Contenido ltTABLEgt

bull border=n Si especificamos este argumento se dibujaraacute un borde alrededor de la

tabla del ancho que le indiquemos como muestra la Tabla 34

Ejemplo Resultado

Mi primera tabla ltTABLE border=4gtltTRgtltTDgtMi primera tablaltTABLEgt

Tabla 34

bull cellpadding=n Indica el espacio en puntos que separa el contenido de la celda con

el borde de la misma siendo 1 por defecto

copy Grupo EIDOS 4 Elementos del lenguaje II

39

Ejemplo Resultado

ltTABLE border=4 cellpadding=8gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 35

bull cellspacing=n Indica el espacio en puntos que separa a las celdas contenidas dentro de la tabla siendo 2 por defecto

bull width=n oacute Indica la anchura de la tabla en puntos o en en funcioacuten del ancho de la ventana del visualizador Si no indicamos este argumento el ancho de la tabla se ajustaraacute al tamantildeo del contenido de las celdas Esto es lo que ha ocurrido en el uacuteltimo ejemplo que hemos realizado Veamos un ejemplo en el Coacutedigo fuente 11 El resultado se muestra en la Tabla 36

ltTABLE border=4 width=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 11

Mi primera tabla

Tabla 36

bull height=n oacute Nos permite definir la altura de la tabla en puntos o en de la

altura de la ventana del visualizador Si indicamos este argumento lo recomendable es darlo en puntos ya que es maacutes complicado adecuarnos a la altura de la ventana del visualizador Al igual que en el caso anterior si no especificamos este argumento la altura se adecuaraacute al contenido de las celdas El Coacutedigo fuente 12 muestra un ejemplo y la Tabla 37 nos muestra el resultado

ltTABLE border=4 width=50 height=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 12

Mi primera tabla

Tabla 37

bull bgcolor= rrggbb o nombre del color Nos permite definir un color

de fondo para todas las celdas de la tabla Maacutes adelante veremos como podemos definir colores especiacuteficos para cada una de las celdas por separado

Lenguaje HTML copy Grupo EIDOS

40

Ejemplo Resultado

ltTABLE border=4 bgcolor=yellowgtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 38

2 Definicioacuten de las filas de la tabla ltTRgt

ltTR align=leftrightcenter valign=topmiddlebottombgcolor=rrggbb oacute nombregt

Antes de empezar a descifrar el significado de cada uno de los argumentos de esta etiqueta vamos a ver un ejemplo en la Tabla 39 de coacutemo se construiriacutea una tabla con dos filas (2 filas X 1 columna = 2 celdas)

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR gtltTDgtPrimera filaltTRgtltTDgtSegunda filaltTABLEgt

Segunda fila

Tabla 39

bull align=leftrightcenter Con este argumento vamos a indicar la alineacioacuten

horizontal (leftizquierda rightderecha centercentrado) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado Veamos un ejemplo en el Coacutedigo fuente 13 y su correspondiente resultado en la Tabla 40

ltTABLE border=4 width=50 gt ltTRgtltTDgtPrimera filaltTRalign=rightgtltTDgtSegunda filaltTABLEgt

Coacutedigo fuente 13

Primera fila

Segunda fila

Tabla 40

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten

vertical (toparriba middlecentrado bottomabajo) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado

copy Grupo EIDOS 4 Elementos del lenguaje II

41

bull bgcolor= rrggbb o nombre del color En este caso este argumento nos permitiraacute definir un color de fondo para todas las celdas de una fila veamos un ejemplo en la

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR bgcolor=yellowgtltTDgtPrimera

filaltTR bgcolor=greengtltTDgtSegunda

filaltTABLEgt

Segunda fila

Tabla 41

3 Definicioacuten de las celdas de la tabla ltTHgt oacute ltTDgt

ltTH oacute TD align=leftrightcenterjustifyvalign=topmiddlebottom bgcolor=rrggbb oacute nombre width=nrowspan=n colspan=ngt

Como ya explicamos anteriormente la etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera y la etiqueta ltTDgt para la creacioacuten de celdas de datos Vamos a completar nuestro ejemplo inicial antildeadieacutendole tres filas de dos celdas cada una (3 filas X 2 columnas = 6 celdas) Tabla 42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTDgtCelda 21ltTDgtCelda 22

ltTABLEgt Celda 21 Celda 22

Tabla 42

bull align=leftrightcenterjustify Con este argumento vamos a indicar la

alineacioacuten horizontal (left izquierda right derecha center centrado justifyjustificado) del contenido de cada celda por separado Su significado es el mismo que en la etiqueta ltTRgt

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten vertical (toparriba middlecentrado bottomabajo) del contenido de cada celda

bull bgcolor= rrggbb o nombre del color En este caso podremos definir un color de fondo para cada una de las celdas de manera independiente

bull width=n oacute Indica el ancho de la celda en puntos o en en funcioacuten del tamantildeo de la tabla

Lenguaje HTML copy Grupo EIDOS

42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera

1ltTHgtCabecera 2ltTR gtltTD align=rightgtCelda

11ltTD bgcolor=redgtCelda 12ltTRgtltTD

bgcolor=yellowgtCelda 21ltTDalign=centergtCelda 22ltTABLEgt

Celda 21 Celda 22

Tabla 43

bull rowspan=n Con este argumento podemos lograr que una celda concreta abarque maacutes de una fila ya sabemos que por defecto una celda ocupa una sola fila

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTD rowspan=2gtCelda

11ltTDgtCelda 12ltTRgtltTDgtCelda 22

ltTABLEgt

Celda 11 Celda 22

Tabla 44

bull colspan=n Con este argumento podemos lograr que una celda se expanda a maacutes

de una columna

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTD colspan=2

align=centergtCelda 22ltTABLEgt

Celda 22

Tabla 45

Para finalizar este tema sobre la creacioacuten de tablas vamos a ver el ejemplo que aparece en el Coacutedigo fuente 14 y su resultado en la Tabla 46

ltTABLE border=4gtltTR gtltTH colspan=3 bgcolor=redgtTiacutetuloltTR bgcolor=yellowgtltTHgtCabecera 1ltTHgtCabecera 2ltTHgtCabecera 3

copy Grupo EIDOS 4 Elementos del lenguaje II

43

ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTDgtCelda 13ltTRgtltTD rowspan=2gtCelda 21ltTD bgcolor=greengtCelda 22ltTDgtCelda 23ltTRgtltTDgtCelda 32ltTDgtCelda 33

ltTABLEgt

Coacutedigo fuente 14

Tiacutetulo

Cabecera 1 Cabecera 2 Cabecera 3

Celda 11 Celda 12 Celda 13

Celda 22 Celda 23 Celda 21

Celda 32 Celda 33

Tabla 46

Formularios El formulario es el elemento de HTML que nos va a permitir interactuar con los visitantes de nuestras paacuteginas web de forma que podemos solicitarle informacioacuten al usuario y procesarla De esta forma podremos crear en nuestras paacuteginas encuestas para solicitar la opinioacuten del visitante sobre alguacuten tema e incluso sobre el contenido de nuestra propia paacutegina web cuestionarios para evaluar la asimilacioacuten de contenidos sobre un tema concreto que se trate en la paacutegina etc

El contenido de la informacioacuten introducida por medio del formulario seraacute enviado a la direccioacuten URL donde resida el programa que se encargaraacute de procesar los datos A este tipo de programas externos se les denomina programas CGI (Common Gateway Interface)

La etiqueta HTML que nos va a permitir la creacioacuten de formularios es ltFORMgt Su formato es el siguiente

ltFORM action=URL del programa que trata el formulariomethod=postgetgt Elementos del formulario ltFORMgt

bull action=URL del programa que trata el formulario A traveacutes de este

argumento indicaremos como ya hemos mencionado la direccioacuten del fichero de programa que va a tratar la informacioacuten suministrada por el formulario

Tambieacuten podriacuteamos incluir como URL que trata el formulario una direccioacuten de correo electroacutenico Por tanto el valor de este argumento podriacutea ser action =mailto direccioacuten de correo

Nota Esta opcioacuten soacutelo funciona adecuadamente con el navegador Netscape Con el Explorer este enviacuteo dariacutea como resultado un correo en blanco Para que esta opcioacuten funcione de manera independiente del navegador que se esteacute utilizando se ha de emplear un programa externo que realice este proceso

Lenguaje HTML copy Grupo EIDOS

44

bull method=postget A traveacutes de este argumento indicaremos el meacutetodo empleado para transferir la informacioacuten generada por el formulario

Si indicamos post se produciraacute la modificacioacuten del documento destino como es el caso de enviar la informacioacuten a una direccioacuten de correo electroacutenico Mediante el meacutetodo get no se produciraacuten cambios en el documento destino

Dentro de un formulario podremos incluir cualquier texto o instruccioacuten HTML de las vistas a lo largo de los capiacutetulos anteriores ademaacutes claro estaacute de los elementos tiacutepicos de un formulario cajas de texto botones de seleccioacuten menuacutes de opciones etc Vamos a ver coacutemo se incluiraacuten estos elementos en un formulario

Entrada baacutesica de datos Para definir los distintos tipos de campos baacutesicos de entrada de datos usaremos la etiqueta ltINPUTgt

El formato es el siguiente

ltINPUT type= text password checkbox radio hidden submit image reset name=Variable value=Valor inicialgt

bull El argumento type determinaraacute el tipo de campo de entrada que estamos insertando A

continuacioacuten describiremos cada uno de ellos

bull El argumento name especifica el nombre de la variable que tomaraacute el valor introducido en el campo

bull El argumento value especifica el valor por defecto que tendraacute el campo

Vamos a continuacioacuten a describir los distintos tipos campos de entrada que vendraacuten dados por los valores del argumento type

Texto corto type=text

Con este argumento vamos a indicar que el campo a introducir seraacute un texto El formato seriacutea

ltINPUT type= text name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los nuevos atributos es

bull size=Tamantildeo Indicaremos el tamantildeo en caracteres de la ventana de introduccioacuten de texto

bull maxlength=Longitud maacutexima Indicaremos el nuacutemero maacuteximo de caracteres a introducir en el campo

Vamos a ver un ejemplo en la Tabla 47

copy Grupo EIDOS 4 Elementos del lenguaje II

45

Ejemplo Resultado

NombreltINPUT type=text name=Var1Value=Texto por defecto size=20 maxlength=25gt

Tabla 47

Claves type=password

Con este argumento indicamos que el campo a introducir seraacute una palabra clave por lo que los caracteres que se introduzcan seraacuten sustituidos por asteriscos en la visualizacioacuten por pantalla El formato es

ltINPUT type= password name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los distintos argumentos es el mismo que en el caso anterior Veamos un ejemplo en la Tabla 48

Ejemplo Resultado

ClaveltINPUT type=password name=Var2Value=tutankamon size=11 maxlength=10gt

Tabla 48

Botones de seleccioacuten type=checkbox

El checkbox es un botoacuten que presenta dos estados marcado (1) y desmarcado (0) Podremos variar su estado simplemente pinchando con el ratoacuten El formato es

ltINPUT type= checkbox name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto

Si incluimos el argumento value cuando el botoacuten esteacute marcado su variable asociada adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 49

Ejemplo Resultado

ltINPUT type=checkbox name=Var3 value=Op1 checkedgtOpcioacuten1 ltbrgtltINPUT type=checkbox name=Var4 value=Op2gt Opcioacuten 2

Tabla 49

Lenguaje HTML copy Grupo EIDOS

46

Seleccioacuten entre varias opciones type=radio

Este argumento se usa cuando hay que hacer una seleccioacuten entre varias alternativas excluyentes pudieacutendose seleccionar uacutenicamente una de las alternativas Debemos incluir una etiqueta radio por cada una de las posibles alternativas El formato es

ltINPUT type= radio name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto En este caso uacutenicamente uno de los botones de radio podraacute aparecer marcado ya que se usa para el caso de opciones excluyentes

Cuando un botoacuten esteacute seleccionado la variable asociada a la lista de botones adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 50

Ejemplo Resultado

ltINPUT type=radio name=Var5 value=Op1gtOpcioacuten1 ltbrgtltINPUT type=radio name=Var5 value=Op2checkedgt Opcioacuten 2 ltbrgtltINPUT type=radio name=Var5 value=Op3 gtOpcioacuten 3

Tabla 50

En este ejemplo la variable Var5 tendraacute el valor Op2

Campos ocultos type=hidden

Este tipo de campos no son visibles para el usuario Su uso tiene sentido en el caso de enviar alguacuten tipo de informacioacuten que no deba ser visualizada o variada por el lector de nuestra paacutegina Web El formato es

ltINPUT type= hidden name=Variable value=Valor gt

Con esta etiqueta asignariacuteamos a la Variable referenciada por name el Valor de value y se mandariacutea junto con el formulario sin que el usuario de la paacutegina se entere de nada Veamos un ejemplo en el Coacutedigo fuente 15

ltINPUT type=hidden name=Var6 value=tutankamongt

Coacutedigo fuente 15

copy Grupo EIDOS 4 Elementos del lenguaje II

47

Botoacuten de enviacuteo de datos type=submit

Con este argumento especificamos un botoacuten en el que al pulsar los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario El formato es

ltINPUT type= submit value=Mensaje a mostrargt

En este caso el paraacutemetro value indica el mensaje que se mostraraacute en el botoacuten Veamos un ejemplo en la Tabla 51

Ejemplo Resultado

ltINPUT type=submit value=Enviar los Datosgt

Tabla 51

Botoacuten graacutefico de enviacuteo de datos type=image

Con este argumento especificamos un botoacuten de tipo imagen en el que al igual que con el botoacuten anterior si pulsamos en la imagen los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario Su formato es el siguiente

ltINPUT type= image src=URL de la imagen name=Variablegt

Con el paraacutemetro src especificamos la URL de la imagen que seraacute insertada en el botoacuten En este caso en la variable referenciada por name se almacenaraacuten las coordenadas del punto de la imagen donde se halla pinchado (de forma que estas coordenadas podriacutean ser procesadas por el programa que recibe los datos del formulario)

Botoacuten de borrado de datos type=reset

Con este argumento especificamos un botoacuten que al ser pulsado borraraacute el contenido actual de todos los campos dejaacutendolos con sus valores por defecto Su formato es

ltINPUT type= reset value=Texto del botoacutengt

Con el paraacutemetro value especificamos el texto que etiquetaraacute al botoacuten

Ejemplo Resultado

ltINPUT type=reset value=Borrar datosgt

Tabla 52

Lenguaje HTML copy Grupo EIDOS

48

Entrada datos en muacuteltiples liacuteneas En un formulario tambieacuten podremos introducir un campo de texto que abarque varias liacuteneas Para ello usaremos la etiqueta ltTEXTAREAgt ltTEXTAREAgt Su formato es el siguiente

ltTEXTAREA name=Variable rows=Filas cols=ColumnasgtContenido por defectoltTEXTAREAgt

Los argumentos rows y cols nos van a permitir especificar respectivamente el nuacutemero de filas de texto visibles y el nuacutemero de columnas de texto visibles en el campo

Ejemplo Resultado

ltTEXTAREA name=Var7 rows=5 cols=40gtContenido por defectoltTEXTAREAgt

Tabla 53

Entrada de datos a traveacutes de campos de seleccioacuten Con los campos de seleccioacuten podremos desplegar una lista de opciones entre las que podremos seleccionar una Para ello usaremos la etiqueta ltSELECTgt ltSELECTgt Su formato es el siguiente

ltSELECT name=Variable multiple size=ngtltOPTION selected value=Valor_1gtPrimera OpcioacutenltOPTION value=Valor_2gtSegunda Opcioacuten

ltOPTION value=Valor_ngtEneacutesima Opcioacuten

ltSELECTgt

Figura 1

bull La variable referenciada por name tomaraacute el valor(value) de la opcioacuten seleccionada

bull Si especificamos el argumento muacuteltiple se mostraraacuten todas la opciones en forma de tabla El nuacutemero de opciones visibles en la tabla vendraacute dado por el argumento size

copy Grupo EIDOS 4 Elementos del lenguaje II

49

bull Con la etiqueta ltOPTIONgt iremos definiendo cada una de las opciones de la lista

bull El argumento selected va a determinar cuaacutel es la opcioacuten por defecto

Para finalizar vamos a ver el Coacutedigo fuente 16 correspondiente a una encuesta realizada por la editorial ficticia EditoPc y en la Figura 2 observamos el resultado del formulario

ltP align=centergtltBgtEDITORIAL ltIgtEditoPcltIgtltBgtltPgtltFORM action=mailtodireccionejemplo method = postgtNombreltINPUT type=text size=30 name=nombregtltBRgtE_mail ltINPUT type=text size=30 name=e_mailgtltPgtDeseas recibir informacioacuten sobreltINPUT type=checkbox name=infor1 value=InternetgtInternetltINPUT type=checkbox name=infor2 value=ProgramacioacutengtProgramacioacutenltINPUT type=checkbox name=infor3 value=SistOperativogtSistOperativoltINPUT type=checkbox name=infor4 value=OfimaacuteticagtOfimaacuteticaltPgtiquestTe conectas a Internet desde casa ltbrgtltINPUT type=radio name=intercasa value=sigtSiacuteltINPUT type=radio name=intercasa value=nogtNoltPgtiquestQueacute uso le das a tu ordenador ltBRgtltSELECT name=uso multiple size=3gtltOPTION selectedgtProfesionalltOPTIONgtDomeacutesticoltOPTIONgtOcioJuegosltSELECTgtltPgtCaracteriacutesticas de tu PCltBRgtltTEXTAREA name=caract rows=5 cols=40gtltTEXTAREAgtltPgtltINPUT type=submit value=Enviar datosgt ltINPUT type=reset value=Borrardatosgt

Coacutedigo fuente 16

Figura 2

Elementos del lenguaje III

Frames Las frames son una utilidad del HTML que nos permite dividir la ventana del navegador en diferentes subventanas que podraacuten ser manipuladas de manera independiente Esto nos permitiraacute mostrar una paacutegina web diferente en cada una de la subventanas o frames

Estructura de un documento con frames Un documento con frames se estructura de manera diferente a un documento HTML normal Asiacute en este tipo de documentos no apareceraacute la etiqueta ltBODYgt En su lugar se incluiraacute la etiqueta ltFRAMESETgt ltFRAMESETgt dentro de la cual se definiraacuten las distintas frames que se incluyan en el documento

La estructura general de un documento de este tipo seriacutea por tanto

ltHTMLgtltHEADgtCabeceraltHEADgtltFRAMESETgt

Definicioacuten de la distintas framesltFRAMESETgtltNOFRAMESgt

Instrucciones HTMLltNOFRAMESgt

ltHTMLgt

Lenguaje HTML copy Grupo EIDOS

52

Puede darse el caso de que programemos nuestro documento con frames siguiendo la estructura anterior y que el navegador que se use para leer el documento no soporte la caracteriacutestica de frames con lo cual no se mostraraacute nada de lo indicado entre las etiquetas ltFRAMESETgt y ltFRAMESETgtPara solucionar este problema todas las instrucciones HTML incluidas entre las etiquetas ltNOFRAMESgt y ltNOFRAMESgt seraacuten ejecutadas por los navegadores que no soportan las frames

La sintaxis de la etiqueta ltFRAMESETgt es

ltFRAMESET rows=Lista de filas cols=Lista de columnasgtltFRAME src=URL de la frame 1 name=Nombre de la frame 1gtltFRAME src=URL de la frame 2 name=Nombre de la frame 2gt

ltFRAME src=URL de la frame n name=Nombre de la frame ngt

ltFRAMESETgt

Como vemos por cada una de la frames que incluyamos en nuestro documento debemos incluir una etiqueta ltFRAMEgt indicando mediante sus argumentos la direccioacuten URL del documento que se insertaraacute en la subventana (src) y el nombre de la frame (name) Posteriormente describiremos la etiqueta ltFRAMEgt con maacutes detalle

Los argumentos de ltFRAMESETgt son rows y cols definieacutendose uacutenicamente uno de los dos atributos en funcioacuten de si la divisioacuten de la pantalla se realizaraacute por filas (rows) o por columnas (cols)

Por cada una de las subventanas que creemos debemos especificar su tamantildeo en puntos o en porcentaje del tamantildeo de cada subventana Asiacute por ejemplo si especificamos rows= 50 2525 crearemos tres subventanas horizontales ocupando la primera el 50 de la ventana principal y las otras dos el resto Si especificamos cols=100150 crearemos tres subventanas verticales ocupando la primera 100 puntos de la ventana principal la segunda 150 puntos y tercera el espacio restante

Vamos a verlo maacutes claramente con un par de ejemplos praacutecticos que vemos en la Tabla 54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 502525gt ltFRAMEsrc=Pagweb1htm name=Pagweb1gtltFRAMEsrc=Pagweb2htm name=Pagweb2gtltFRAMEsrc=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 12: Programacion web   lenguaje html

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

15

Cuerpo Cuerpo del documento HTML ltBODYgt

ltBODYgt

En el cuerpo de un documento HTML es donde incluiremos las distintas instrucciones del lenguaje junto con el contenido en siacute de nuestra paacutegina Web textos imaacutegenes enlaces a otras paacuteginas etc

Las etiquetas ltBODYgt y ltBODYgt son las que van a delimitar el cuerpo de nuestro documento Esta posee una serie de argumentos que nos van a permitir variar las caracteriacutesticas del documento en su conjunto como por ejemplo el color del texto o del color de fondo de nuestra paacutegina web

Antes de analizar los componentes y atributos de BODY vamos a ver como se especifican los colores en un documento HTML

Estos se pueden especificar por su nombre (name) o por su coacutedigo de color que es un nuacutemero compuesto de tres pares de cifras hexadecimales que nos indican la proporcioacuten de los colores primarios (rojo verde y azul) que forman el color deseado (rrggbb)

Nombre Coacutedigo de color Color mostrado

Black 000000 Negro

Teal 008080 Teal

Blue 0000FF Azul

Navy 000080 Azul marino

Lime 00FF00 Lima

White FFFFFF Blanco

Purple 800080 Puacuterpura

Yellow FFFF00 Amarillo

Olive 808000 Oliva

Red FF0000 Rojo

maroon 800000 Marroacuten

gray 808080 Gris

fuchsia FF00FF Fucsia

green 008000 Verde

Lenguaje HTML copy Grupo EIDOS

16

silver C0C0C0 Plata

aqua 00FFFF Agua

Tabla 2

La etiqueta ltBODYgt presenta una serie de atributos que van a afectar a todo el documento en su conjunto Estos atributos nos van a permitir definir los colores del texto del fondo y de los hiperenlaces del documento Incluso nos permitiraacuten insertar una imagen de fondo en nuestra paacutegina

ltBODY background=URL bgcolor=rrggbb oacute name text=namelink=name vlink=name gt

bull background=URL Nos va a permitir mostrar una imagen como fondo de nuestro

documento HTML El camino a esta imagen vendraacute especificado por la URL que definamos Si la imagen no rellena todo el fondo del documento eacutesta seraacute reproducida tantas veces como sea necesario hasta completar todo el fondo

Si insertas el Coacutedigo fuente 5 en el documento HTML que creamos como ejemplo en el capiacutetulo anterior Pagina1htm este presentaraacute como fondo la imagen fondogif

ltBODY background=fondogifgt

Coacutedigo fuente 5

bull bgcolor=rrggbb oacute name bgcolor Background Color Nos va a permitir definir un

color para el fondo de nuestro documento Este atributo seraacute ignorado si previamente hemos utilizado el atributo background

Inserte el Coacutedigo fuente 6 en Pagina1htm y compruebe el resultado

ltBODY bgcolor=bluegt

Coacutedigo fuente 6

bull text=rrggbb oacute name Nos permitiraacute definir un color para el texto de nuestro

documento Por defecto es negro Inserte el Coacutedigo fuente 7 en Pagina1html y compruebe el resultado

ltBODY text=redgt

Coacutedigo fuente 7

Y ahora inserte el Coacutedigo fuente 8 en el documento y comprueba el resultado

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

17

ltBODY bgcolor=yellow text=navygt

Coacutedigo fuente 8

bull link=rrggbb oacute name Indica el color que tendraacuten los hiperenlaces que no han sido

accedidos Por defecto es azul Como todaviacutea no sabemos insertar hiperenlaces en nuestro documento vamos a dejar el ejemplo correspondiente para maacutes adelante

bull vlink=rrggbb oacute name vlink Visited Links Indica el color de los hiperenlaces que ya han sido accedidos Por defecto es puacuterpura

Caracteres especiales Hasta ahora hemos escrito algunos ejemplos de coacutedigo HTML pero hemos pasado por alto algunas limitaciones de HTML respecto al uso de caracteres especiales Una de estas limitaciones es por ejemplo el uso de los caracteres lt y gt que como ya sabemos indican el inicio y fin de una etiqueta HTML Pues bien si quisieacuteramos escribir estos caracteres como parte normal de un texto el navegador no sabriacutea si se trata de texto normal o del comienzo y final de una etiqueta o sea que se hariacutea un liacuteo

Como todo tiene solucioacuten existen unos coacutedigos para poder escribir estos caracteres y otros relacionados con las etiquetas los vemos en la Tabla 3

Siacutembolo Coacutedigo

lt (menor que) amplt

gt (mayor que) ampgt

amp (ampersand) ampamp

(comillas) ampquot

Tabla 3

Para las letras especiacuteficas del idioma castellano las vocales acentuadas la ntilde la uuml y los signos iquest y iexcl existen los coacutedigos que muestra la Tabla 4

Letra Coacutedigo Letra Coacutedigo Letra Coacutedigo

aacute ampaacute Aacute ampAacute ntilde ampntilde

eacute ampeacute Eacute ampEacute Ntilde ampNtilde

iacute ampiacute

Iacute ampIacute

uuml ampuuml

Lenguaje HTML copy Grupo EIDOS

18

oacute ampoacute Oacute ampOacute Uuml ampUuml

uacute ampuacute Uacute ampUacute iquest amp191

iexcl amp161

Tabla 4

Para los navegadores actuales podemos escribir nuestro coacutedigo HTML de manera directa sin tener en cuenta estos coacutedigos pero nunca podemos asegurar que las personas que accedan a nuestras paacuteginas con otros navegadores puedan leerlas correctamente Asiacute que los maacutes adecuado es el empleo de los mismos Otros siacutembolos especiales aparecen en la Tabla 5

Siacutembolo Coacutedigo

Ccedil ampccedil

Ccedil ampCcedil

copy ampcopy

reg ampreg

Tabla 5

Veamos un ejemplo en el Coacutedigo fuente 9

ampquotLa inspiraciampoacuten existe pero tiene que encontrarse trabajandoampquotampcopy Pablo Ruampiacutez Picasso

Coacutedigo fuente 9

Esta instruccioacuten HTML deberiacutea producir el siguiente resultado

La inspiracioacuten existe pero tiene que encontrarse trabajando copyPablo Ruiacutez Picasso

Para la inclusioacuten de comentarios en nuestra paacutegina HTML podemos usar la etiqueta lt-- --gt Estos comentarios nos podraacuten servir para efectuar anotaciones en nuestro documento HTML que ayuden a una mayor comprensioacuten del coacutedigo En el Coacutedigo fuente 10 se muestra un ejemplo de comentario

lt-- Esto es un comentario y no seraacute mostrado por el navegador --gt

Coacutedigo fuente 10

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

19

Espaciado y saltos de liacutenea En HTML soacutelo se admite un uacutenico espacio en blanco separando cualquier elemento o texto el resto de espacios seraacuten ignorados por el navegador al igual que las tabulaciones retornos de carro etc Veamos un ejemplo en la Tabla 6

Ejemplo Resultado

Esta frase no se veraacute asiacute en el visor Esta frase no se veraacute asiacute en el visor

Tabla 6

No obstante siacute podremos dar el formato que deseemos a nuestras paacuteginas con el empleo de los siguientes elementos del lenguaje HTML

Inclusioacuten de espacios en blanco ampnbsp Nos permitiraacute la inclusioacuten de maacutes de un espacio en blanco entre dos textos consecutivos de forma que estos espacios se muestren de forma efectiva en el navegador Tendremos que incluir tantas expresiones ampnbsp como espacios en blanco se deseen incluir

Ejemplo Resultado

Texto1ampnbspampnbspampnbspampnbspTexto2 Texto1 Texto2

Tabla 7

Salto de liacutenea ltBRgt BR Break Nos permite dar un salto a la liacutenea siguiente en el punto donde la etiqueta sea insertada

Ejemplo Resultado

Esta frase tiene aquiacuteltBRgt un salto de liacutenea Esta frase tiene aquiacute un salto de liacutenea

Tabla 8

Cambio de paacuterrafo ltPgt P Paragraph Permite definir un paacuterrafo introduciendo normalmente un espacio de separacioacuten de dos liacuteneas con el texto siguiente al punto donde hayamos insertado la etiqueta ltPgt

Lenguaje HTML copy Grupo EIDOS

20

Ejemplo Resultado

Esta frase tiene aquiacuteltPgt un cambio de paacuterrafo Esta frase tiene aquiacute

un cambio de paacuterrafo

Tabla 9

La etiqueta de fin paacuterrafo ltPgt es opcional no siendo necesario incluirla Aunque siempre es recomendable delimitar claramente el inicio y final de un paacuterrafo Ademaacutes cuando usemos esta etiqueta como cerrada ltPgt ltPgt tenemos la posibilidad de incluirle el atributo align el cual indica al navegador la forma de justificar el texto incluido en el paacuterrafo El formato seriacutea el siguiente

ltP align= left right center justify gtTexto contenido en elpaacuterrafo ltPgt

Veamos algunos ejemplos en la Tabla 10

Ejemplo Resultado

ltP align=rightgtEste es un ejemplode paacuterrafo alineado a laderechaltPgt

Este es un ejemplo de paacuterrafo alineado a la derecha

ltP align=centergtEste es unejemplo de paacuterrafo centradoltPgt

Este es un ejemplo de paacuterrafo centrado

Tabla 10

Liacutenea Horizontal ltHRgt HR Horizontal Rule Nos permite insertar una liacutenea horizontal cuyo tamantildeo podremos determinar a traveacutes de sus atributos Si no especificamos ninguacuten atributo dibujaraacute una liacutenea que ocupe el ancho de la pantalla del navegador Su utilidad es la de permitirnos dividir nuestra paacutegina en distintas secciones No seraacute necesaria la etiqueta de fin ltHRgt

El formato de la etiqueta con sus posibles atributos es

ltHR align= left right center noshade size=n width=n gt

bull align= left right center Permite establecer la alineacioacuten de la liacutenea a la izquierda a la derecha o centrarla

bull noshade No muestra la sombra de la liacutenea evitando el efecto de tres dimensiones

bull size=n Indica el grosor de la liacutenea en pixels

bull width=n oacute n Especificaraacute el ancho de la liacutenea este se podraacute especificar en pixels (n) o en tanto por ciento del ancho de la ventana (n) Vamos a ver algunos ejemplos en la Tabla 11

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

21

Ejemplo Resultado

ltHRgt

ltHR size=3 noshadegt

ltHR size=5width=50align=rightgt

ltHR size=10width=50align=centergt

Tabla 11

Texto preformateado ltPREgt PRE Preformatted Nos permitiraacute visualizar el texto tal y como se ha escrito respetando los saltos de liacutenea las tabulaciones y espacios en blanco de todo el texto incluido entre las etiquetas ltPREgt y ltPREgt

El texto se mostraraacute con una fuente de espaciado fijo maacutes pequentildea que el texto normal No es recomendable su uso ya que presenta muchas limitaciones y no se obtiene una buena presentacioacuten

Ejemplo Resultado

ltPREgtEste texto estaacutepreformateadoltPREgt

Este texto estaacute preformateado

Tabla 12

Elementos del lenguaje I

Cabeceras y atributos de texto

Cabeceras ltH1gtltH6gt H Heading En un documento HTML podemos incluir seis tipos distintos de cabeceras que van a constituir normalmente el tiacutetulo y los distintos subapartados que forman el documento aunque podremos utilizarlas en el punto que queramos del documento para resaltar cualquier texto Estas cabeceras son definidas por las etiquetas ltH1gtltH2gtltH3gtltH4gtltH5gt y ltH6gt El texto que componga cada cabecera deberaacute estar incluido entre las etiquetas de inicio (ltHngt) y fin (Hn) correspondiente La cabecera ltH1gtseraacute la que muestre el texto de mayor tamantildeo este tamantildeo iraacute disminuyendo hasta llegar a la cabecera ltH6gt Como podemos ver en la Tabla 13 Para alinear las cabeceras utilizamos el atributo align El formato seriacutea ltHn align=centergt como muestra la Tabla 14

Ejemplo Resultado

ltH1gtCabecera 1ltH1gt Cabecera 1 ltH2gtCabecera 2ltH2gt Cabecera 2

Lenguaje HTML copy Grupo EIDOS

24

ltH3gtCabecera 3ltH3gt Cabecera 3

ltH4gtCabecera 4ltH4gt Cabecera 4

ltH5gtCabecera 5ltH5gtCabecera 5

ltH6gtCabecera 6ltH6gtCabecera 6

Tabla 13

Ejemplo Resultado

ltH5 align=centergtCabecera 5ltH5gtCabecera 5

Tabla 14

Atributos del texto Al texto de nuestro documento HTML le podemos aplicar distintos atributos (negrita cursiva subrayado etc) al igual que hacemos cuando trabajamos con el procesador de textos en la edicioacuten de nuestros documentos Para aplicar estos atributos disponemos de distintas etiquetas que aplicaraacuten su efecto al texto incluido entre sus indicadores de inicio y fin Las vemos en la Tabla 15

Atributo Etiqueta Ejemplo Resultado

Negrita ltBgtltBgtltBgtTexto ennegritaltBgt

Texto en negrita

Cursiva ltIgtltIgtltIgtTexto encursivaltIgt

Texto en cursiva

Teletype ltTTgtltTTgtltTTgtTexto en modoteletypeltTTgt

Texto en modoteletype

Subrayado ltUgtltUgt ltUgtTexto subrayadoltUgt Texto subrayado Tachado ltSgtltSgt ltSgtTexto tachadoltSgt Texto tachado

Parpadeo ltBLINKgtltBLINKgtltBLINKgtTextoparpadeandoltBLINKgt

Texto parpadeando

Superiacutendice ltSUPgtltSUPgt ltSUPgtTexto en modosuperiacutendiceltSUPgt

Texto en modo superiacutendice

Subiacutendice ltSUBgtltSUBgtltSUBgtTexto en modosubiacutendiceltSUBgt

Texto en modo subiacutendice

Centrado ltCENTERgtltCENTERgt

ltCENTERgtTextocentradoltCENTERgt

Texto centrado

B Bold I Italic TT Teletype U Underlined S Strike SUP Superscript SUB Subscript

Tabla 15

copy Grupo EIDOS 3 Elementos del lenguaje I

25

Alguna de estas etiquetas no es reconocida por determinados navegadores Asiacute por ejemplo la etiqueta ltBLINKgt (Parpadeo) no es implementada por el Explorer Por lo que seguacuten el explorador que estemos utilizando podremos ver el resultado correctamente o no

Existen otras etiquetas que nos van a servir para especificar de manera diferenciada unidades loacutegicas de nuestro documento HTML tales como citas direcciones de correo etc En algunos casos el formato obtenido con estas etiquetas de estilo loacutegico va a ser el mismo que con las anteriores a las que se les denomina tambieacuten etiquetas de estilo fiacutesico Algunas etiquetas de estilo loacutegico las vemos en la Tabla 16

Etiqueta Ejemplo Resultado

ltSTRONGgtltSTRONGgtltSTRONGgtEspecifica textoresaltado (igualltBgt)ltSTRONGgt

Especifica texto resaltado(igual ltBgt)

ltCITEgtltCITEgtltCITEgtIndica una cita otiacutetulo (igual ltIgt)ltCITEgt

Indica una cita o tiacutetulo (igualltIgt)

ltSTRIKEgtltSTRIKEgtltltSTRIKEgtTexto tachado(igual ltSgt)ltSTRIKEgt

Texto tachado (igual ltSgt)

Tabla 16

Si queremos aplicar efectos maacutes espectaculares a nuestro documento HTML debemos variar el tamantildeo el color y el tipo de letra del texto La etiqueta que nos permite todo esto es ltFONTgtltFONTgt por medio de sus atributos size color y face

ltFONT size=n oacute +- n color=rrggbb oacute name face=nombre defont gt

bull size=n oacute +- n El atributo size nos permite especificar un tamantildeo determinado

para la fuente del texto incluido entre las etiquetas de inicio y fin el cual puede estar entre 1 y 7 El texto de tamantildeo normal equivale a la fuente de tamantildeo 3 (fuente base) Por tanto si especificamos size=+2 el tamantildeo de la fuente seraacute 5 Y si especificamos size= -1 el tamantildeo seraacute 2

Ejemplo Resultado

ltFONT size=2gtTamantildeo 2ltFONTgtTamantildeo 2

ltFONT size=+2gtTamantildeo 5 (3+2)ltFONTgt Tamantildeo 5 (3+2)

ltFONT size=-1gtTamantildeo 2 (3-1)ltFONTgtTamantildeo 2 (3-1)

Tabla 17

bull color=rrggbb oacute name Nos va a permitir definir el color que tendraacute el texto

incluido entre las etiquetas Tabla 18

Lenguaje HTML copy Grupo EIDOS

26

Ejemplo Resultado

ltFONT color=redgtTexto de colorrojoltFONTgt

Texto de color rojo

ltFONT color=bluegtTexto de colorazulltFONTgt

Texto de color azul

ltFONT size=5 color=008000gtTextoverde y de tamantildeo 5ltFONTgt

Texto verde y detamantildeo 5

Tabla 18

bull face=nombre de font Nos va a permitir escribir texto con el tipo de letra que le

especifiquemos En el caso de que el tipo de letra que le hayamos especificado no esteacute cargada en el ordenador que lee la paacutegina se usaraacute el font por defecto del navegador

Ejemplo Resultado

ltFONT face=TahomagtTipo de letraTahomaltFONTgt

Tipo de letra Tahoma

ltFONT size=4 color=blueface=TahomagtTexto azul de tamantildeo4 y TahomaltFONTgt

Texto azul de tamantildeo 4 y Tahoma

Tabla 19

Listas Podemos representar elementos en forma de lista dentro de nuestros documentos de una forma muy sencilla y con una gran versatilidad Estas listas podraacuten incluir cualquiera de los elementos HTML e incluso podemos definir listas anidadas es decir listas dentro de listas HTML nos permite crear tres tipos distintos de listas

bull Listas no numeradas

bull Listas numeradas

bull Listas de definiciones

Listas no numeradas ltULgt UL Unordered List

Con este tipo de listas podemos especificar una serie de elementos sin un orden predeterminado precedidos de una marca o vintildeeta que nosotros mismos podemos definir Para la definicioacuten de los liacutemites de la lista utilizaremos la etiqueta ltULgt ltULgt y para determinar cada uno de los elementos que la componen usaremos la etiqueta ltLIgt El formato es el siguiente

ltUL type=disk oacute circle oacute squaregtltLHgtTiacutetulo de la listaltLHgt

copy Grupo EIDOS 3 Elementos del lenguaje I

27

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltULgtLH List Head LI List Item

Con el atributo type vamos a especificar el tipo de marca o vintildeeta que antecederaacute a cada uno de los elementos de la lista Estas marcas podraacuten ser un disco (disk) un ciacuterculo (circle) o un cuadrado (square) La etiqueta ltLHgt nos va a servir para especificar un posible tiacutetulo de la lista siendo esta opcional Vamos a ver algunos ejemplos en la Tabla 20

Ejemplo Resultado

ltUL type=circlegtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAfricaltLIgtAmeacutericaltLIgtOceaniacutea

ltULgt

Los cinco continentes

Europa

Asia

Aacutefrica

Ameacuterica

Oceaniacutea

ltUL type=squaregtltLIgtEuropaltLIgtAsialtLIgtAfricaltLIgtAmeacutericaltUL type=circle gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltULgtltLIgtOceaniacutea

ltULgt

Europa

Asia

Aacutefrica

Ameacuterica

Ameacuterica del Norte

Ameacuterica del Sur

Oceaniacutea

Tabla 20

Listas numeradas ltOLgt OL Ordered List

Con este tipo de listas podemos especificar una serie de elementos numerados seguacuten el lugar que ocupan en la lista Para la definicioacuten de los liacutemites de la lista utilizaremos la etiqueta ltOLgt ltOLgt y para determinar cada uno de los elementos que la componen usaremos la etiqueta ltLIgt El formato es el siguiente

ltOL start=n type=Tipo de listagtltLHgtTiacutetulo de la listaltLHgt

Lenguaje HTML copy Grupo EIDOS

28

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltOLgt

Con el atributo start vamos a especificar el nuacutemero por el que va a empezar la lista Si no indicamos este argumento la lista empezaraacute a numerarse a partir del 1 Con el atributo type vamos a especificar el tipo de lista numerada Sus posibles valores aparecen a continuacioacuten y veremos algunos ejemplos en la Tabla 21

A Letras mayuacutesculas (A B C )

a Letras minuacutesculas (a b c )

I Nuacutemeros romanos en mayuacutesculas (I II III IV )

i Nuacutemeros romanos en minuacutesculas (i ii iii iv )

1 Numeacutericamente (1 2 3 4 ) (es la numeracioacuten por defecto y por tanto no habriacutea que indicarla)

Ejemplo Resultado

ltOL type=AgtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltLIgtOceaniacutea

ltOLgt

Los cinco continentes

A Europa

B Asia

C Aacutefrica

D Ameacuterica

E Oceaniacutea

ltOL type=I start=2gtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltOL type=i gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltOLgtltLIgtOceaniacutea

ltOLgt

II Europa

III Asia

IV Aacutefrica

V Ameacuterica

i Ameacuterica del Norte

ii Ameacuterica del Sur

VI Oceaniacutea

Tabla 21

copy Grupo EIDOS 3 Elementos del lenguaje I

29

Listas de definiciones ltDLgt DL Definition List

Estas listas nos van a servir para especificar una serie de teacuterminos y sus definiciones correspondientes Para la definicioacuten de la lista usaremos la etiqueta ltDLgt ltDLgt para especificar los teacuterminos usaremos la etiqueta ltDTgt y para especificar la definicioacuten correspondiente a cada teacutermino usaremos la etiqueta ltDDgt El formato es el siguiente

ltDLgtltLHgtTiacutetulo de la listaltLHgtltDTgtTeacutermino 1ltDDgtDefinicioacuten 1ltDTgtTeacutermino 2ltDDgtDefinicioacuten 2

ltDTgtTeacutermino nltDDgtDefinicioacuten n

ltDLgtDT Definition Term DD Definition Description

Vamos a ver un ejemplo en la Tabla 22

Ejemplo Resultado

ltDLgtltDTgtPariacutesltDDgtCapital de FrancialtDTgtRomaltDDgtCapital de ItalialtDTgtMadridltDDgtCapital de Espantildea

ltDLgt

Pariacutes

Capital de Francia

Roma

Capital de Italia

Madrid

Capital de Espantildea

Tabla 22

Hiperenlaces Los hiperenlaces son enlaces de hipertexto que nos van a permitir acceder de manera directa a otros documentos HTML independientemente de su ubicacioacuten o a otras zonas dentro de nuestro propio documento

Enlaces a otras paacuteginas ltA href=gt Con este tipo de hiperenlaces vamos a poder acceder tanto a otras paacuteginas que esteacuten ubicadas dentro de nuestro propio sistema como a paacuteginas ubicadas en puntos muy distantes del globo El formato de este tipo de hiperenlaces es

ltA href=URL a la que se accedegtTexto del hiperenlaceltAgt

Lenguaje HTML copy Grupo EIDOS

30

Con el atributo href vamos a especificar la URL del documento al que se pretende acceder El texto contenido entre las etiquetas de comienzo y fin nos va a servir para definir el hiperenlace por lo que deberiacutea ser clarificador del contenido del documento con el que vamos a enlazar Esta definicioacuten apareceraacute resaltada normalmente en azul y subrayada En la mayoriacutea de los navegadores esta definicioacuten del hiperenlace es sensible por lo que cuando el cursor pasa por encima del mismo este cambia de aspecto indicaacutendolo

Veamos un ejemplo en la Tabla 23

Ejemplo Resultado

ltA href=httpwwweidosesgtPaacutegina inicialde Villa EidosltAgt

Paacutegina inicial de Villa Eidos

Tabla 23

Si situamos el ratoacuten encima del hiperenlace y pulsamos el navegador accederaacute a la paacutegina Web indicada por href es decir accederaacute a la paacutegina situada en httpwwweidoses

Igualmente podriacuteamos indicar el hiperenlace por medio de una imagen Si esta imagen tiene definido un borde este apareceraacute resaltado en color azul El formato correspondiente seriacutea

ltA href=URL a la que se accedegtltIMG src=Imagengt y tambieacutentextoltAgtIMG Image src Source

Veamos un ejemplo en la Tabla 24

Ejemplo Resultado

ltA href=httpwwweidosesgtltIMGsrc=IconogifgtltAgt Villa Eidos Villa Eidos

Tabla 24

Si pulsamos sobre la imagen el navegador accederaacute a la paacutegina Web inicial de Villa Eidos

Enlaces dentro de la misma paacutegina ltA name=gt Este tipo de hiperenlaces nos va a permitir marcar distintas zonas del documento activo con el objeto de tener un acceso directo a las mismas Una buena utilidad de este tipo de enlaces radica en la creacioacuten de iacutendices para documentos largos de forma que si pinchamos en el hiperenlace correspondiente al tiacutetulo de un capiacutetulo determinado el navegador saltaraacute automaacuteticamente hasta el comienzo de dicho capiacutetulo

Para la creacioacuten de estos hiperenlaces debemos seguir dos pasos

copy Grupo EIDOS 3 Elementos del lenguaje I

31

1 Marcar las distintas zonas o secciones del documento Esto lo haremos con el paraacutemetro name

ltA name=Identificador de seccioacutengtTexto de laseccioacutenltAgt

A cada seccioacuten le asignaremos un identificador distinto para poder referenciarlas posteriormente de manera inequiacutevoca

2 Especificar un enlace a cada una de las secciones que hayamos definido ltA href=Identificador de seccioacutengtTexto del enlace a laseccioacutenltAgt

Si pinchamos en este enlace el navegador saltaraacute automaacuteticamente a la seccioacuten correspondiente Veamos un ejemplo sencillito en la Tabla 25 pero demostrativo de todo lo que acabamos de explicar

Ejemplo Resultado

ltA href=Cap1gtCapiacutetulo1ltAgtltA name=Cap1gtCapiacutetulo 1ltAgt

Capiacutetulo 1

Capiacutetulo 1

Tabla 25

Si nos creamos una paacutegina HTML con distintos capiacutetulos podriacuteamos crear una seccioacuten para cada uno de ellos de forma que si pinchamos en el hiperenlace correspondiente al Capiacutetulo 1 el navegador saltariacutea directamente a la seccioacuten correspondiente al Capiacutetulo 1

Ademaacutes de los dos tipos de hiperenlaces vistos podemos crear hiperenlaces que nos permitan acceder a cualquiera de los servicios de Internet Es decir podriacuteamos indicar enlaces a servidores FTP GOPHER NEWS MAILTO etc Para ello tendriacuteamos que indicar la URL correspondiente al servicio al cual queremos acceder como ya vimos en el primer capiacutetulo de este manual

Imaacutegenes

Podremos dar un aspecto mucho maacutes vistoso a nuestros documentos HTML con la inclusioacuten de imaacutegenes Los formatos de imagen que todos los navegadores reconocen son gif y jpg Si queremos insertar una imagen en otro formato el visor deberiacutea disponer del programa externo que permita su visualizacioacuten De todas formas una buena solucioacuten es utilizar alguacuten programa de tratamiento de imaacutegenes que nos convierta la imagen a uno de los formatos mencionados anteriormente

El formato gif es maacutes recomendado para la inclusioacuten de iconos graacuteficas y el formato jpg para el caso de insertar fotografiacuteas en nuestras paacuteginas

Lenguaje HTML copy Grupo EIDOS

32

La etiqueta que nos va a permitir la insercioacuten de imaacutegenes es ltIMGgt La imagen se insertaraacute justo en el punto del documento donde coloquemos dicha etiqueta pudiendo insertar imaacutegenes dentro de listas tablas o formularios

El formato de la etiqueta con sus posibles argumentos es el siguiente

ltIMG src=URL de la imagen alt=Texto alternativoalign=topmiddlebottonleftrigth border=Tamantildeoheight=Tamantildeo width=Tamantildeo hspace=margen vspace=margengt

bull src=URL de la imagen El atributo src nos va servir para indicar la URL de la imagen que

queremos insertar es decir el servidor y camino hasta llegar al fichero de la imagen

No seraacute necesario que la imagen que queremos insertar en nuestro documento esteacute en el ordenador local aunque siacute es recomendable ya que el acceso a las mismas puede ser maacutes lento

Por tanto es una buena praacutectica copiar todas las imaacutegenes que vayamos a incluir en nuestro documento HTML al ordenador local

Tabla 26

bull alt=Texto alternativo Nos va a permitir mostrar un texto alternativo para el caso en que el

navegador no sea capaz de mostrar la imagen Su uso es muy recomendable ya que cuando publiquemos nuestras paacuteginas en la WWW no sabremos desde queacute tipo de navegadores accederaacuten los internautas a nuestras paacuteginas

En la Tabla 27 vamos a ver un ejemplo

Si usas un navegador que no tiene ninguacuten problema para la visualizacioacuten de imaacutegenes desactiva temporalmente la opcioacuten de mostrar imaacutegenes prueba el ejemplo que muestra la Tabla 27 y compaacuteralo con el anterior

Tabla 27

copy Grupo EIDOS 3 Elementos del lenguaje I

33

bull align=topmiddlebotton leftrigth Nos permite indicar coacutemo se alinearaacute el texto que siga a la imagen

top alinea el texto con la parte superior de la imagen

middle con la parte central

bottom con la parte inferior

left imagen alineada a la izquierda de la paacutegina

rigth imagen alineada a la derecha de la paacutegina

Tabla 28

En el caso de que el texto que acompantildea a la imagen tenga maacutes de una liacutenea tan soacutelo la primera seraacute la que se alinearaacute seguacuten alguna de las anteriores alineaciones el resto de liacuteneas se incluiraacuten debajo de la imagen quedando un efecto bastante feo

Para solventar esto estaacuten las alineaciones LEFT (imagen alineada a la izquierda de la paacutegina) y RIGHT (imagen alineada a la derecha de la paacutegina) Las cuales permiten que la imagen se inserte dentro del paacuterrafo que la rodea produciendo un resultado mucho maacutes profesional en la integracioacuten de texto e imaacutegenes

Estas dos alineaciones no se podraacuten usar en combinacioacuten con las anteriores Veamos algunos ejemplos en la Tabla 29

Vemos como en el primer ejemplo la segunda liacutenea de texto aparece debajo de la imagen produciendo un efecto menos vistoso que en los dos ejemplos siguientes

Lenguaje HTML copy Grupo EIDOS

34

Tabla 29

bull border=Tamantildeo Permite antildeadirle un borde a la imagen del tamantildeo que le

especifiquemos

Si la imagen forma parte de un hiperenlace esta apareceraacute con un borde del color del hiperenlace Si no deseaacuteramos que aparezca este borde tendriacuteamos que especificar border=0

Tabla 30

bull height=Tamantildeo Permite especificar el alto de la imagen en puntos de pantalla

(pixels) o en del tamantildeo del documento

bull width=Tamantildeo Con este argumento especificaremos el ancho al que mostraremos la imagen en puntos de pantalla (pixels) o en del tamantildeo del documento

En el segundo de los ejemplos de la Tabla 31 el ancho de la imagen se ha extendido al 50 del total del ancho de la celda donde estaacute contenida la imagen Si pruebas este ejemplo en tu documento HTML la imagen se extenderaacute horizontalmente hasta ocupar el 50 del ancho de la paacutegina

copy Grupo EIDOS 3 Elementos del lenguaje I

35

Tabla 31

bull hspace=Margen hspace Horizontal Space Permite especificar el nuacutemero de espacios

horizontales (en puntos) que separaraacuten a la imagen de cualquier elemento que le siga o le anteceda

bull vspace=Margen vspace Vertical Space Con este argumento especificaremos el margen vertical (en puntos) que habraacute entre la imagen y cualquier otro elemento de nuestro documento

Tabla 32

Elementos del lenguaje II

Tablas HTML nos va a permitir la inclusioacuten de cualquiera de los elementos de nuestra paacutegina (texto imaacutegenes hiperenlaces listas etc) dentro de una tabla Gracias a lo cual conseguiremos dar una mayor y mejor estructuracioacuten a los contenidos de nuestros documentos Ademaacutes la definicioacuten de las tablas en HTML es muy abierta pudiendo en cualquier momento redimensionar la tabla es decir cambiar su nuacutemero de filas o de columnas cambiar el tamantildeo de alguna de sus celdas etc

La etiqueta que nos va a permitir la definicioacuten de tablas es ltTABLEgt ltTABLEgt

El formato general de la etiqueta sin ninguacuten argumento es el siguiente

ltTABLEgtltTR gt

ltTHgtContenido de la celda ltTHgtltTDgtContenido de la celda ltTDgt

ltTRgtltTABLEgt

TR Table Row TH Table Header TD Table Data

Vamos a analizar cada una de estas etiquetas de forma separada

1 ltTABLEgt ltTABLEgt Definicioacuten general de la tabla Dentro de ella definiremos las filas y columnas que la constituyen pudiendo incluso definir tablas dentro de tablas es decir tablas anidadas

Lenguaje HTML copy Grupo EIDOS

38

2 ltTRgt ltTRgt Definicioacuten de las filas de la tabla Por cada etiqueta ltTRgt que incluyamos se crearaacute una fila en la tabla No seraacute necesario indicar la etiqueta de cierre

3 ltTHgtltTHgt oacute ltTDgtltTDgt Definicioacuten de cada una de las celdas de la tabla Vemos que estas etiquetas estaacuten contenidas dentro de otra etiqueta de definicioacuten de fila de forma que por cada etiqueta ltTHgt o ltTDgt que incluyamos se crearaacute una celda dentro de la fila correspondiente La etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera es decir celdas cuyo contenido estaacute resaltado en negrita dejando la etiqueta ltTDgt para definir celdas de datos En este caso tampoco es necesario indicar las etiquetas de cierre

Todas estas etiquetas tienen sus respectivos argumentos Pero antes de analizar cada uno de ellos vamos a ver un ejemplo muy sencillito en la Tabla 33 que nos crearaacute una tabla de una sola celda (1 fila X 1 columna = 1 celda) Para ello usaremos la etiqueta de creacioacuten de tabla ltTABLEgt con el argumento border=1 (nos dibuja un borde de tamantildeo 1 alrededor de la tabla)

Ejemplo Resultado

ltTABLE border=1gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 33

Vamos ahora a analizar lo distintos argumentos que componen las etiquetas de la tabla analizaacutendolos desde lo general (la definicioacuten de la tabla) hasta lo especiacutefico (la definicioacuten de las celdas)

1 Definicioacuten de la tabla ltTABLEgt

ltTABLE border=n cellpadding=n cellspacing=n width=n oacute height=n oacute bgcolor=rrggbb oacute nombre gt

Contenido ltTABLEgt

bull border=n Si especificamos este argumento se dibujaraacute un borde alrededor de la

tabla del ancho que le indiquemos como muestra la Tabla 34

Ejemplo Resultado

Mi primera tabla ltTABLE border=4gtltTRgtltTDgtMi primera tablaltTABLEgt

Tabla 34

bull cellpadding=n Indica el espacio en puntos que separa el contenido de la celda con

el borde de la misma siendo 1 por defecto

copy Grupo EIDOS 4 Elementos del lenguaje II

39

Ejemplo Resultado

ltTABLE border=4 cellpadding=8gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 35

bull cellspacing=n Indica el espacio en puntos que separa a las celdas contenidas dentro de la tabla siendo 2 por defecto

bull width=n oacute Indica la anchura de la tabla en puntos o en en funcioacuten del ancho de la ventana del visualizador Si no indicamos este argumento el ancho de la tabla se ajustaraacute al tamantildeo del contenido de las celdas Esto es lo que ha ocurrido en el uacuteltimo ejemplo que hemos realizado Veamos un ejemplo en el Coacutedigo fuente 11 El resultado se muestra en la Tabla 36

ltTABLE border=4 width=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 11

Mi primera tabla

Tabla 36

bull height=n oacute Nos permite definir la altura de la tabla en puntos o en de la

altura de la ventana del visualizador Si indicamos este argumento lo recomendable es darlo en puntos ya que es maacutes complicado adecuarnos a la altura de la ventana del visualizador Al igual que en el caso anterior si no especificamos este argumento la altura se adecuaraacute al contenido de las celdas El Coacutedigo fuente 12 muestra un ejemplo y la Tabla 37 nos muestra el resultado

ltTABLE border=4 width=50 height=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 12

Mi primera tabla

Tabla 37

bull bgcolor= rrggbb o nombre del color Nos permite definir un color

de fondo para todas las celdas de la tabla Maacutes adelante veremos como podemos definir colores especiacuteficos para cada una de las celdas por separado

Lenguaje HTML copy Grupo EIDOS

40

Ejemplo Resultado

ltTABLE border=4 bgcolor=yellowgtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 38

2 Definicioacuten de las filas de la tabla ltTRgt

ltTR align=leftrightcenter valign=topmiddlebottombgcolor=rrggbb oacute nombregt

Antes de empezar a descifrar el significado de cada uno de los argumentos de esta etiqueta vamos a ver un ejemplo en la Tabla 39 de coacutemo se construiriacutea una tabla con dos filas (2 filas X 1 columna = 2 celdas)

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR gtltTDgtPrimera filaltTRgtltTDgtSegunda filaltTABLEgt

Segunda fila

Tabla 39

bull align=leftrightcenter Con este argumento vamos a indicar la alineacioacuten

horizontal (leftizquierda rightderecha centercentrado) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado Veamos un ejemplo en el Coacutedigo fuente 13 y su correspondiente resultado en la Tabla 40

ltTABLE border=4 width=50 gt ltTRgtltTDgtPrimera filaltTRalign=rightgtltTDgtSegunda filaltTABLEgt

Coacutedigo fuente 13

Primera fila

Segunda fila

Tabla 40

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten

vertical (toparriba middlecentrado bottomabajo) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado

copy Grupo EIDOS 4 Elementos del lenguaje II

41

bull bgcolor= rrggbb o nombre del color En este caso este argumento nos permitiraacute definir un color de fondo para todas las celdas de una fila veamos un ejemplo en la

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR bgcolor=yellowgtltTDgtPrimera

filaltTR bgcolor=greengtltTDgtSegunda

filaltTABLEgt

Segunda fila

Tabla 41

3 Definicioacuten de las celdas de la tabla ltTHgt oacute ltTDgt

ltTH oacute TD align=leftrightcenterjustifyvalign=topmiddlebottom bgcolor=rrggbb oacute nombre width=nrowspan=n colspan=ngt

Como ya explicamos anteriormente la etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera y la etiqueta ltTDgt para la creacioacuten de celdas de datos Vamos a completar nuestro ejemplo inicial antildeadieacutendole tres filas de dos celdas cada una (3 filas X 2 columnas = 6 celdas) Tabla 42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTDgtCelda 21ltTDgtCelda 22

ltTABLEgt Celda 21 Celda 22

Tabla 42

bull align=leftrightcenterjustify Con este argumento vamos a indicar la

alineacioacuten horizontal (left izquierda right derecha center centrado justifyjustificado) del contenido de cada celda por separado Su significado es el mismo que en la etiqueta ltTRgt

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten vertical (toparriba middlecentrado bottomabajo) del contenido de cada celda

bull bgcolor= rrggbb o nombre del color En este caso podremos definir un color de fondo para cada una de las celdas de manera independiente

bull width=n oacute Indica el ancho de la celda en puntos o en en funcioacuten del tamantildeo de la tabla

Lenguaje HTML copy Grupo EIDOS

42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera

1ltTHgtCabecera 2ltTR gtltTD align=rightgtCelda

11ltTD bgcolor=redgtCelda 12ltTRgtltTD

bgcolor=yellowgtCelda 21ltTDalign=centergtCelda 22ltTABLEgt

Celda 21 Celda 22

Tabla 43

bull rowspan=n Con este argumento podemos lograr que una celda concreta abarque maacutes de una fila ya sabemos que por defecto una celda ocupa una sola fila

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTD rowspan=2gtCelda

11ltTDgtCelda 12ltTRgtltTDgtCelda 22

ltTABLEgt

Celda 11 Celda 22

Tabla 44

bull colspan=n Con este argumento podemos lograr que una celda se expanda a maacutes

de una columna

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTD colspan=2

align=centergtCelda 22ltTABLEgt

Celda 22

Tabla 45

Para finalizar este tema sobre la creacioacuten de tablas vamos a ver el ejemplo que aparece en el Coacutedigo fuente 14 y su resultado en la Tabla 46

ltTABLE border=4gtltTR gtltTH colspan=3 bgcolor=redgtTiacutetuloltTR bgcolor=yellowgtltTHgtCabecera 1ltTHgtCabecera 2ltTHgtCabecera 3

copy Grupo EIDOS 4 Elementos del lenguaje II

43

ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTDgtCelda 13ltTRgtltTD rowspan=2gtCelda 21ltTD bgcolor=greengtCelda 22ltTDgtCelda 23ltTRgtltTDgtCelda 32ltTDgtCelda 33

ltTABLEgt

Coacutedigo fuente 14

Tiacutetulo

Cabecera 1 Cabecera 2 Cabecera 3

Celda 11 Celda 12 Celda 13

Celda 22 Celda 23 Celda 21

Celda 32 Celda 33

Tabla 46

Formularios El formulario es el elemento de HTML que nos va a permitir interactuar con los visitantes de nuestras paacuteginas web de forma que podemos solicitarle informacioacuten al usuario y procesarla De esta forma podremos crear en nuestras paacuteginas encuestas para solicitar la opinioacuten del visitante sobre alguacuten tema e incluso sobre el contenido de nuestra propia paacutegina web cuestionarios para evaluar la asimilacioacuten de contenidos sobre un tema concreto que se trate en la paacutegina etc

El contenido de la informacioacuten introducida por medio del formulario seraacute enviado a la direccioacuten URL donde resida el programa que se encargaraacute de procesar los datos A este tipo de programas externos se les denomina programas CGI (Common Gateway Interface)

La etiqueta HTML que nos va a permitir la creacioacuten de formularios es ltFORMgt Su formato es el siguiente

ltFORM action=URL del programa que trata el formulariomethod=postgetgt Elementos del formulario ltFORMgt

bull action=URL del programa que trata el formulario A traveacutes de este

argumento indicaremos como ya hemos mencionado la direccioacuten del fichero de programa que va a tratar la informacioacuten suministrada por el formulario

Tambieacuten podriacuteamos incluir como URL que trata el formulario una direccioacuten de correo electroacutenico Por tanto el valor de este argumento podriacutea ser action =mailto direccioacuten de correo

Nota Esta opcioacuten soacutelo funciona adecuadamente con el navegador Netscape Con el Explorer este enviacuteo dariacutea como resultado un correo en blanco Para que esta opcioacuten funcione de manera independiente del navegador que se esteacute utilizando se ha de emplear un programa externo que realice este proceso

Lenguaje HTML copy Grupo EIDOS

44

bull method=postget A traveacutes de este argumento indicaremos el meacutetodo empleado para transferir la informacioacuten generada por el formulario

Si indicamos post se produciraacute la modificacioacuten del documento destino como es el caso de enviar la informacioacuten a una direccioacuten de correo electroacutenico Mediante el meacutetodo get no se produciraacuten cambios en el documento destino

Dentro de un formulario podremos incluir cualquier texto o instruccioacuten HTML de las vistas a lo largo de los capiacutetulos anteriores ademaacutes claro estaacute de los elementos tiacutepicos de un formulario cajas de texto botones de seleccioacuten menuacutes de opciones etc Vamos a ver coacutemo se incluiraacuten estos elementos en un formulario

Entrada baacutesica de datos Para definir los distintos tipos de campos baacutesicos de entrada de datos usaremos la etiqueta ltINPUTgt

El formato es el siguiente

ltINPUT type= text password checkbox radio hidden submit image reset name=Variable value=Valor inicialgt

bull El argumento type determinaraacute el tipo de campo de entrada que estamos insertando A

continuacioacuten describiremos cada uno de ellos

bull El argumento name especifica el nombre de la variable que tomaraacute el valor introducido en el campo

bull El argumento value especifica el valor por defecto que tendraacute el campo

Vamos a continuacioacuten a describir los distintos tipos campos de entrada que vendraacuten dados por los valores del argumento type

Texto corto type=text

Con este argumento vamos a indicar que el campo a introducir seraacute un texto El formato seriacutea

ltINPUT type= text name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los nuevos atributos es

bull size=Tamantildeo Indicaremos el tamantildeo en caracteres de la ventana de introduccioacuten de texto

bull maxlength=Longitud maacutexima Indicaremos el nuacutemero maacuteximo de caracteres a introducir en el campo

Vamos a ver un ejemplo en la Tabla 47

copy Grupo EIDOS 4 Elementos del lenguaje II

45

Ejemplo Resultado

NombreltINPUT type=text name=Var1Value=Texto por defecto size=20 maxlength=25gt

Tabla 47

Claves type=password

Con este argumento indicamos que el campo a introducir seraacute una palabra clave por lo que los caracteres que se introduzcan seraacuten sustituidos por asteriscos en la visualizacioacuten por pantalla El formato es

ltINPUT type= password name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los distintos argumentos es el mismo que en el caso anterior Veamos un ejemplo en la Tabla 48

Ejemplo Resultado

ClaveltINPUT type=password name=Var2Value=tutankamon size=11 maxlength=10gt

Tabla 48

Botones de seleccioacuten type=checkbox

El checkbox es un botoacuten que presenta dos estados marcado (1) y desmarcado (0) Podremos variar su estado simplemente pinchando con el ratoacuten El formato es

ltINPUT type= checkbox name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto

Si incluimos el argumento value cuando el botoacuten esteacute marcado su variable asociada adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 49

Ejemplo Resultado

ltINPUT type=checkbox name=Var3 value=Op1 checkedgtOpcioacuten1 ltbrgtltINPUT type=checkbox name=Var4 value=Op2gt Opcioacuten 2

Tabla 49

Lenguaje HTML copy Grupo EIDOS

46

Seleccioacuten entre varias opciones type=radio

Este argumento se usa cuando hay que hacer una seleccioacuten entre varias alternativas excluyentes pudieacutendose seleccionar uacutenicamente una de las alternativas Debemos incluir una etiqueta radio por cada una de las posibles alternativas El formato es

ltINPUT type= radio name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto En este caso uacutenicamente uno de los botones de radio podraacute aparecer marcado ya que se usa para el caso de opciones excluyentes

Cuando un botoacuten esteacute seleccionado la variable asociada a la lista de botones adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 50

Ejemplo Resultado

ltINPUT type=radio name=Var5 value=Op1gtOpcioacuten1 ltbrgtltINPUT type=radio name=Var5 value=Op2checkedgt Opcioacuten 2 ltbrgtltINPUT type=radio name=Var5 value=Op3 gtOpcioacuten 3

Tabla 50

En este ejemplo la variable Var5 tendraacute el valor Op2

Campos ocultos type=hidden

Este tipo de campos no son visibles para el usuario Su uso tiene sentido en el caso de enviar alguacuten tipo de informacioacuten que no deba ser visualizada o variada por el lector de nuestra paacutegina Web El formato es

ltINPUT type= hidden name=Variable value=Valor gt

Con esta etiqueta asignariacuteamos a la Variable referenciada por name el Valor de value y se mandariacutea junto con el formulario sin que el usuario de la paacutegina se entere de nada Veamos un ejemplo en el Coacutedigo fuente 15

ltINPUT type=hidden name=Var6 value=tutankamongt

Coacutedigo fuente 15

copy Grupo EIDOS 4 Elementos del lenguaje II

47

Botoacuten de enviacuteo de datos type=submit

Con este argumento especificamos un botoacuten en el que al pulsar los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario El formato es

ltINPUT type= submit value=Mensaje a mostrargt

En este caso el paraacutemetro value indica el mensaje que se mostraraacute en el botoacuten Veamos un ejemplo en la Tabla 51

Ejemplo Resultado

ltINPUT type=submit value=Enviar los Datosgt

Tabla 51

Botoacuten graacutefico de enviacuteo de datos type=image

Con este argumento especificamos un botoacuten de tipo imagen en el que al igual que con el botoacuten anterior si pulsamos en la imagen los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario Su formato es el siguiente

ltINPUT type= image src=URL de la imagen name=Variablegt

Con el paraacutemetro src especificamos la URL de la imagen que seraacute insertada en el botoacuten En este caso en la variable referenciada por name se almacenaraacuten las coordenadas del punto de la imagen donde se halla pinchado (de forma que estas coordenadas podriacutean ser procesadas por el programa que recibe los datos del formulario)

Botoacuten de borrado de datos type=reset

Con este argumento especificamos un botoacuten que al ser pulsado borraraacute el contenido actual de todos los campos dejaacutendolos con sus valores por defecto Su formato es

ltINPUT type= reset value=Texto del botoacutengt

Con el paraacutemetro value especificamos el texto que etiquetaraacute al botoacuten

Ejemplo Resultado

ltINPUT type=reset value=Borrar datosgt

Tabla 52

Lenguaje HTML copy Grupo EIDOS

48

Entrada datos en muacuteltiples liacuteneas En un formulario tambieacuten podremos introducir un campo de texto que abarque varias liacuteneas Para ello usaremos la etiqueta ltTEXTAREAgt ltTEXTAREAgt Su formato es el siguiente

ltTEXTAREA name=Variable rows=Filas cols=ColumnasgtContenido por defectoltTEXTAREAgt

Los argumentos rows y cols nos van a permitir especificar respectivamente el nuacutemero de filas de texto visibles y el nuacutemero de columnas de texto visibles en el campo

Ejemplo Resultado

ltTEXTAREA name=Var7 rows=5 cols=40gtContenido por defectoltTEXTAREAgt

Tabla 53

Entrada de datos a traveacutes de campos de seleccioacuten Con los campos de seleccioacuten podremos desplegar una lista de opciones entre las que podremos seleccionar una Para ello usaremos la etiqueta ltSELECTgt ltSELECTgt Su formato es el siguiente

ltSELECT name=Variable multiple size=ngtltOPTION selected value=Valor_1gtPrimera OpcioacutenltOPTION value=Valor_2gtSegunda Opcioacuten

ltOPTION value=Valor_ngtEneacutesima Opcioacuten

ltSELECTgt

Figura 1

bull La variable referenciada por name tomaraacute el valor(value) de la opcioacuten seleccionada

bull Si especificamos el argumento muacuteltiple se mostraraacuten todas la opciones en forma de tabla El nuacutemero de opciones visibles en la tabla vendraacute dado por el argumento size

copy Grupo EIDOS 4 Elementos del lenguaje II

49

bull Con la etiqueta ltOPTIONgt iremos definiendo cada una de las opciones de la lista

bull El argumento selected va a determinar cuaacutel es la opcioacuten por defecto

Para finalizar vamos a ver el Coacutedigo fuente 16 correspondiente a una encuesta realizada por la editorial ficticia EditoPc y en la Figura 2 observamos el resultado del formulario

ltP align=centergtltBgtEDITORIAL ltIgtEditoPcltIgtltBgtltPgtltFORM action=mailtodireccionejemplo method = postgtNombreltINPUT type=text size=30 name=nombregtltBRgtE_mail ltINPUT type=text size=30 name=e_mailgtltPgtDeseas recibir informacioacuten sobreltINPUT type=checkbox name=infor1 value=InternetgtInternetltINPUT type=checkbox name=infor2 value=ProgramacioacutengtProgramacioacutenltINPUT type=checkbox name=infor3 value=SistOperativogtSistOperativoltINPUT type=checkbox name=infor4 value=OfimaacuteticagtOfimaacuteticaltPgtiquestTe conectas a Internet desde casa ltbrgtltINPUT type=radio name=intercasa value=sigtSiacuteltINPUT type=radio name=intercasa value=nogtNoltPgtiquestQueacute uso le das a tu ordenador ltBRgtltSELECT name=uso multiple size=3gtltOPTION selectedgtProfesionalltOPTIONgtDomeacutesticoltOPTIONgtOcioJuegosltSELECTgtltPgtCaracteriacutesticas de tu PCltBRgtltTEXTAREA name=caract rows=5 cols=40gtltTEXTAREAgtltPgtltINPUT type=submit value=Enviar datosgt ltINPUT type=reset value=Borrardatosgt

Coacutedigo fuente 16

Figura 2

Elementos del lenguaje III

Frames Las frames son una utilidad del HTML que nos permite dividir la ventana del navegador en diferentes subventanas que podraacuten ser manipuladas de manera independiente Esto nos permitiraacute mostrar una paacutegina web diferente en cada una de la subventanas o frames

Estructura de un documento con frames Un documento con frames se estructura de manera diferente a un documento HTML normal Asiacute en este tipo de documentos no apareceraacute la etiqueta ltBODYgt En su lugar se incluiraacute la etiqueta ltFRAMESETgt ltFRAMESETgt dentro de la cual se definiraacuten las distintas frames que se incluyan en el documento

La estructura general de un documento de este tipo seriacutea por tanto

ltHTMLgtltHEADgtCabeceraltHEADgtltFRAMESETgt

Definicioacuten de la distintas framesltFRAMESETgtltNOFRAMESgt

Instrucciones HTMLltNOFRAMESgt

ltHTMLgt

Lenguaje HTML copy Grupo EIDOS

52

Puede darse el caso de que programemos nuestro documento con frames siguiendo la estructura anterior y que el navegador que se use para leer el documento no soporte la caracteriacutestica de frames con lo cual no se mostraraacute nada de lo indicado entre las etiquetas ltFRAMESETgt y ltFRAMESETgtPara solucionar este problema todas las instrucciones HTML incluidas entre las etiquetas ltNOFRAMESgt y ltNOFRAMESgt seraacuten ejecutadas por los navegadores que no soportan las frames

La sintaxis de la etiqueta ltFRAMESETgt es

ltFRAMESET rows=Lista de filas cols=Lista de columnasgtltFRAME src=URL de la frame 1 name=Nombre de la frame 1gtltFRAME src=URL de la frame 2 name=Nombre de la frame 2gt

ltFRAME src=URL de la frame n name=Nombre de la frame ngt

ltFRAMESETgt

Como vemos por cada una de la frames que incluyamos en nuestro documento debemos incluir una etiqueta ltFRAMEgt indicando mediante sus argumentos la direccioacuten URL del documento que se insertaraacute en la subventana (src) y el nombre de la frame (name) Posteriormente describiremos la etiqueta ltFRAMEgt con maacutes detalle

Los argumentos de ltFRAMESETgt son rows y cols definieacutendose uacutenicamente uno de los dos atributos en funcioacuten de si la divisioacuten de la pantalla se realizaraacute por filas (rows) o por columnas (cols)

Por cada una de las subventanas que creemos debemos especificar su tamantildeo en puntos o en porcentaje del tamantildeo de cada subventana Asiacute por ejemplo si especificamos rows= 50 2525 crearemos tres subventanas horizontales ocupando la primera el 50 de la ventana principal y las otras dos el resto Si especificamos cols=100150 crearemos tres subventanas verticales ocupando la primera 100 puntos de la ventana principal la segunda 150 puntos y tercera el espacio restante

Vamos a verlo maacutes claramente con un par de ejemplos praacutecticos que vemos en la Tabla 54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 502525gt ltFRAMEsrc=Pagweb1htm name=Pagweb1gtltFRAMEsrc=Pagweb2htm name=Pagweb2gtltFRAMEsrc=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 13: Programacion web   lenguaje html

Lenguaje HTML copy Grupo EIDOS

16

silver C0C0C0 Plata

aqua 00FFFF Agua

Tabla 2

La etiqueta ltBODYgt presenta una serie de atributos que van a afectar a todo el documento en su conjunto Estos atributos nos van a permitir definir los colores del texto del fondo y de los hiperenlaces del documento Incluso nos permitiraacuten insertar una imagen de fondo en nuestra paacutegina

ltBODY background=URL bgcolor=rrggbb oacute name text=namelink=name vlink=name gt

bull background=URL Nos va a permitir mostrar una imagen como fondo de nuestro

documento HTML El camino a esta imagen vendraacute especificado por la URL que definamos Si la imagen no rellena todo el fondo del documento eacutesta seraacute reproducida tantas veces como sea necesario hasta completar todo el fondo

Si insertas el Coacutedigo fuente 5 en el documento HTML que creamos como ejemplo en el capiacutetulo anterior Pagina1htm este presentaraacute como fondo la imagen fondogif

ltBODY background=fondogifgt

Coacutedigo fuente 5

bull bgcolor=rrggbb oacute name bgcolor Background Color Nos va a permitir definir un

color para el fondo de nuestro documento Este atributo seraacute ignorado si previamente hemos utilizado el atributo background

Inserte el Coacutedigo fuente 6 en Pagina1htm y compruebe el resultado

ltBODY bgcolor=bluegt

Coacutedigo fuente 6

bull text=rrggbb oacute name Nos permitiraacute definir un color para el texto de nuestro

documento Por defecto es negro Inserte el Coacutedigo fuente 7 en Pagina1html y compruebe el resultado

ltBODY text=redgt

Coacutedigo fuente 7

Y ahora inserte el Coacutedigo fuente 8 en el documento y comprueba el resultado

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

17

ltBODY bgcolor=yellow text=navygt

Coacutedigo fuente 8

bull link=rrggbb oacute name Indica el color que tendraacuten los hiperenlaces que no han sido

accedidos Por defecto es azul Como todaviacutea no sabemos insertar hiperenlaces en nuestro documento vamos a dejar el ejemplo correspondiente para maacutes adelante

bull vlink=rrggbb oacute name vlink Visited Links Indica el color de los hiperenlaces que ya han sido accedidos Por defecto es puacuterpura

Caracteres especiales Hasta ahora hemos escrito algunos ejemplos de coacutedigo HTML pero hemos pasado por alto algunas limitaciones de HTML respecto al uso de caracteres especiales Una de estas limitaciones es por ejemplo el uso de los caracteres lt y gt que como ya sabemos indican el inicio y fin de una etiqueta HTML Pues bien si quisieacuteramos escribir estos caracteres como parte normal de un texto el navegador no sabriacutea si se trata de texto normal o del comienzo y final de una etiqueta o sea que se hariacutea un liacuteo

Como todo tiene solucioacuten existen unos coacutedigos para poder escribir estos caracteres y otros relacionados con las etiquetas los vemos en la Tabla 3

Siacutembolo Coacutedigo

lt (menor que) amplt

gt (mayor que) ampgt

amp (ampersand) ampamp

(comillas) ampquot

Tabla 3

Para las letras especiacuteficas del idioma castellano las vocales acentuadas la ntilde la uuml y los signos iquest y iexcl existen los coacutedigos que muestra la Tabla 4

Letra Coacutedigo Letra Coacutedigo Letra Coacutedigo

aacute ampaacute Aacute ampAacute ntilde ampntilde

eacute ampeacute Eacute ampEacute Ntilde ampNtilde

iacute ampiacute

Iacute ampIacute

uuml ampuuml

Lenguaje HTML copy Grupo EIDOS

18

oacute ampoacute Oacute ampOacute Uuml ampUuml

uacute ampuacute Uacute ampUacute iquest amp191

iexcl amp161

Tabla 4

Para los navegadores actuales podemos escribir nuestro coacutedigo HTML de manera directa sin tener en cuenta estos coacutedigos pero nunca podemos asegurar que las personas que accedan a nuestras paacuteginas con otros navegadores puedan leerlas correctamente Asiacute que los maacutes adecuado es el empleo de los mismos Otros siacutembolos especiales aparecen en la Tabla 5

Siacutembolo Coacutedigo

Ccedil ampccedil

Ccedil ampCcedil

copy ampcopy

reg ampreg

Tabla 5

Veamos un ejemplo en el Coacutedigo fuente 9

ampquotLa inspiraciampoacuten existe pero tiene que encontrarse trabajandoampquotampcopy Pablo Ruampiacutez Picasso

Coacutedigo fuente 9

Esta instruccioacuten HTML deberiacutea producir el siguiente resultado

La inspiracioacuten existe pero tiene que encontrarse trabajando copyPablo Ruiacutez Picasso

Para la inclusioacuten de comentarios en nuestra paacutegina HTML podemos usar la etiqueta lt-- --gt Estos comentarios nos podraacuten servir para efectuar anotaciones en nuestro documento HTML que ayuden a una mayor comprensioacuten del coacutedigo En el Coacutedigo fuente 10 se muestra un ejemplo de comentario

lt-- Esto es un comentario y no seraacute mostrado por el navegador --gt

Coacutedigo fuente 10

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

19

Espaciado y saltos de liacutenea En HTML soacutelo se admite un uacutenico espacio en blanco separando cualquier elemento o texto el resto de espacios seraacuten ignorados por el navegador al igual que las tabulaciones retornos de carro etc Veamos un ejemplo en la Tabla 6

Ejemplo Resultado

Esta frase no se veraacute asiacute en el visor Esta frase no se veraacute asiacute en el visor

Tabla 6

No obstante siacute podremos dar el formato que deseemos a nuestras paacuteginas con el empleo de los siguientes elementos del lenguaje HTML

Inclusioacuten de espacios en blanco ampnbsp Nos permitiraacute la inclusioacuten de maacutes de un espacio en blanco entre dos textos consecutivos de forma que estos espacios se muestren de forma efectiva en el navegador Tendremos que incluir tantas expresiones ampnbsp como espacios en blanco se deseen incluir

Ejemplo Resultado

Texto1ampnbspampnbspampnbspampnbspTexto2 Texto1 Texto2

Tabla 7

Salto de liacutenea ltBRgt BR Break Nos permite dar un salto a la liacutenea siguiente en el punto donde la etiqueta sea insertada

Ejemplo Resultado

Esta frase tiene aquiacuteltBRgt un salto de liacutenea Esta frase tiene aquiacute un salto de liacutenea

Tabla 8

Cambio de paacuterrafo ltPgt P Paragraph Permite definir un paacuterrafo introduciendo normalmente un espacio de separacioacuten de dos liacuteneas con el texto siguiente al punto donde hayamos insertado la etiqueta ltPgt

Lenguaje HTML copy Grupo EIDOS

20

Ejemplo Resultado

Esta frase tiene aquiacuteltPgt un cambio de paacuterrafo Esta frase tiene aquiacute

un cambio de paacuterrafo

Tabla 9

La etiqueta de fin paacuterrafo ltPgt es opcional no siendo necesario incluirla Aunque siempre es recomendable delimitar claramente el inicio y final de un paacuterrafo Ademaacutes cuando usemos esta etiqueta como cerrada ltPgt ltPgt tenemos la posibilidad de incluirle el atributo align el cual indica al navegador la forma de justificar el texto incluido en el paacuterrafo El formato seriacutea el siguiente

ltP align= left right center justify gtTexto contenido en elpaacuterrafo ltPgt

Veamos algunos ejemplos en la Tabla 10

Ejemplo Resultado

ltP align=rightgtEste es un ejemplode paacuterrafo alineado a laderechaltPgt

Este es un ejemplo de paacuterrafo alineado a la derecha

ltP align=centergtEste es unejemplo de paacuterrafo centradoltPgt

Este es un ejemplo de paacuterrafo centrado

Tabla 10

Liacutenea Horizontal ltHRgt HR Horizontal Rule Nos permite insertar una liacutenea horizontal cuyo tamantildeo podremos determinar a traveacutes de sus atributos Si no especificamos ninguacuten atributo dibujaraacute una liacutenea que ocupe el ancho de la pantalla del navegador Su utilidad es la de permitirnos dividir nuestra paacutegina en distintas secciones No seraacute necesaria la etiqueta de fin ltHRgt

El formato de la etiqueta con sus posibles atributos es

ltHR align= left right center noshade size=n width=n gt

bull align= left right center Permite establecer la alineacioacuten de la liacutenea a la izquierda a la derecha o centrarla

bull noshade No muestra la sombra de la liacutenea evitando el efecto de tres dimensiones

bull size=n Indica el grosor de la liacutenea en pixels

bull width=n oacute n Especificaraacute el ancho de la liacutenea este se podraacute especificar en pixels (n) o en tanto por ciento del ancho de la ventana (n) Vamos a ver algunos ejemplos en la Tabla 11

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

21

Ejemplo Resultado

ltHRgt

ltHR size=3 noshadegt

ltHR size=5width=50align=rightgt

ltHR size=10width=50align=centergt

Tabla 11

Texto preformateado ltPREgt PRE Preformatted Nos permitiraacute visualizar el texto tal y como se ha escrito respetando los saltos de liacutenea las tabulaciones y espacios en blanco de todo el texto incluido entre las etiquetas ltPREgt y ltPREgt

El texto se mostraraacute con una fuente de espaciado fijo maacutes pequentildea que el texto normal No es recomendable su uso ya que presenta muchas limitaciones y no se obtiene una buena presentacioacuten

Ejemplo Resultado

ltPREgtEste texto estaacutepreformateadoltPREgt

Este texto estaacute preformateado

Tabla 12

Elementos del lenguaje I

Cabeceras y atributos de texto

Cabeceras ltH1gtltH6gt H Heading En un documento HTML podemos incluir seis tipos distintos de cabeceras que van a constituir normalmente el tiacutetulo y los distintos subapartados que forman el documento aunque podremos utilizarlas en el punto que queramos del documento para resaltar cualquier texto Estas cabeceras son definidas por las etiquetas ltH1gtltH2gtltH3gtltH4gtltH5gt y ltH6gt El texto que componga cada cabecera deberaacute estar incluido entre las etiquetas de inicio (ltHngt) y fin (Hn) correspondiente La cabecera ltH1gtseraacute la que muestre el texto de mayor tamantildeo este tamantildeo iraacute disminuyendo hasta llegar a la cabecera ltH6gt Como podemos ver en la Tabla 13 Para alinear las cabeceras utilizamos el atributo align El formato seriacutea ltHn align=centergt como muestra la Tabla 14

Ejemplo Resultado

ltH1gtCabecera 1ltH1gt Cabecera 1 ltH2gtCabecera 2ltH2gt Cabecera 2

Lenguaje HTML copy Grupo EIDOS

24

ltH3gtCabecera 3ltH3gt Cabecera 3

ltH4gtCabecera 4ltH4gt Cabecera 4

ltH5gtCabecera 5ltH5gtCabecera 5

ltH6gtCabecera 6ltH6gtCabecera 6

Tabla 13

Ejemplo Resultado

ltH5 align=centergtCabecera 5ltH5gtCabecera 5

Tabla 14

Atributos del texto Al texto de nuestro documento HTML le podemos aplicar distintos atributos (negrita cursiva subrayado etc) al igual que hacemos cuando trabajamos con el procesador de textos en la edicioacuten de nuestros documentos Para aplicar estos atributos disponemos de distintas etiquetas que aplicaraacuten su efecto al texto incluido entre sus indicadores de inicio y fin Las vemos en la Tabla 15

Atributo Etiqueta Ejemplo Resultado

Negrita ltBgtltBgtltBgtTexto ennegritaltBgt

Texto en negrita

Cursiva ltIgtltIgtltIgtTexto encursivaltIgt

Texto en cursiva

Teletype ltTTgtltTTgtltTTgtTexto en modoteletypeltTTgt

Texto en modoteletype

Subrayado ltUgtltUgt ltUgtTexto subrayadoltUgt Texto subrayado Tachado ltSgtltSgt ltSgtTexto tachadoltSgt Texto tachado

Parpadeo ltBLINKgtltBLINKgtltBLINKgtTextoparpadeandoltBLINKgt

Texto parpadeando

Superiacutendice ltSUPgtltSUPgt ltSUPgtTexto en modosuperiacutendiceltSUPgt

Texto en modo superiacutendice

Subiacutendice ltSUBgtltSUBgtltSUBgtTexto en modosubiacutendiceltSUBgt

Texto en modo subiacutendice

Centrado ltCENTERgtltCENTERgt

ltCENTERgtTextocentradoltCENTERgt

Texto centrado

B Bold I Italic TT Teletype U Underlined S Strike SUP Superscript SUB Subscript

Tabla 15

copy Grupo EIDOS 3 Elementos del lenguaje I

25

Alguna de estas etiquetas no es reconocida por determinados navegadores Asiacute por ejemplo la etiqueta ltBLINKgt (Parpadeo) no es implementada por el Explorer Por lo que seguacuten el explorador que estemos utilizando podremos ver el resultado correctamente o no

Existen otras etiquetas que nos van a servir para especificar de manera diferenciada unidades loacutegicas de nuestro documento HTML tales como citas direcciones de correo etc En algunos casos el formato obtenido con estas etiquetas de estilo loacutegico va a ser el mismo que con las anteriores a las que se les denomina tambieacuten etiquetas de estilo fiacutesico Algunas etiquetas de estilo loacutegico las vemos en la Tabla 16

Etiqueta Ejemplo Resultado

ltSTRONGgtltSTRONGgtltSTRONGgtEspecifica textoresaltado (igualltBgt)ltSTRONGgt

Especifica texto resaltado(igual ltBgt)

ltCITEgtltCITEgtltCITEgtIndica una cita otiacutetulo (igual ltIgt)ltCITEgt

Indica una cita o tiacutetulo (igualltIgt)

ltSTRIKEgtltSTRIKEgtltltSTRIKEgtTexto tachado(igual ltSgt)ltSTRIKEgt

Texto tachado (igual ltSgt)

Tabla 16

Si queremos aplicar efectos maacutes espectaculares a nuestro documento HTML debemos variar el tamantildeo el color y el tipo de letra del texto La etiqueta que nos permite todo esto es ltFONTgtltFONTgt por medio de sus atributos size color y face

ltFONT size=n oacute +- n color=rrggbb oacute name face=nombre defont gt

bull size=n oacute +- n El atributo size nos permite especificar un tamantildeo determinado

para la fuente del texto incluido entre las etiquetas de inicio y fin el cual puede estar entre 1 y 7 El texto de tamantildeo normal equivale a la fuente de tamantildeo 3 (fuente base) Por tanto si especificamos size=+2 el tamantildeo de la fuente seraacute 5 Y si especificamos size= -1 el tamantildeo seraacute 2

Ejemplo Resultado

ltFONT size=2gtTamantildeo 2ltFONTgtTamantildeo 2

ltFONT size=+2gtTamantildeo 5 (3+2)ltFONTgt Tamantildeo 5 (3+2)

ltFONT size=-1gtTamantildeo 2 (3-1)ltFONTgtTamantildeo 2 (3-1)

Tabla 17

bull color=rrggbb oacute name Nos va a permitir definir el color que tendraacute el texto

incluido entre las etiquetas Tabla 18

Lenguaje HTML copy Grupo EIDOS

26

Ejemplo Resultado

ltFONT color=redgtTexto de colorrojoltFONTgt

Texto de color rojo

ltFONT color=bluegtTexto de colorazulltFONTgt

Texto de color azul

ltFONT size=5 color=008000gtTextoverde y de tamantildeo 5ltFONTgt

Texto verde y detamantildeo 5

Tabla 18

bull face=nombre de font Nos va a permitir escribir texto con el tipo de letra que le

especifiquemos En el caso de que el tipo de letra que le hayamos especificado no esteacute cargada en el ordenador que lee la paacutegina se usaraacute el font por defecto del navegador

Ejemplo Resultado

ltFONT face=TahomagtTipo de letraTahomaltFONTgt

Tipo de letra Tahoma

ltFONT size=4 color=blueface=TahomagtTexto azul de tamantildeo4 y TahomaltFONTgt

Texto azul de tamantildeo 4 y Tahoma

Tabla 19

Listas Podemos representar elementos en forma de lista dentro de nuestros documentos de una forma muy sencilla y con una gran versatilidad Estas listas podraacuten incluir cualquiera de los elementos HTML e incluso podemos definir listas anidadas es decir listas dentro de listas HTML nos permite crear tres tipos distintos de listas

bull Listas no numeradas

bull Listas numeradas

bull Listas de definiciones

Listas no numeradas ltULgt UL Unordered List

Con este tipo de listas podemos especificar una serie de elementos sin un orden predeterminado precedidos de una marca o vintildeeta que nosotros mismos podemos definir Para la definicioacuten de los liacutemites de la lista utilizaremos la etiqueta ltULgt ltULgt y para determinar cada uno de los elementos que la componen usaremos la etiqueta ltLIgt El formato es el siguiente

ltUL type=disk oacute circle oacute squaregtltLHgtTiacutetulo de la listaltLHgt

copy Grupo EIDOS 3 Elementos del lenguaje I

27

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltULgtLH List Head LI List Item

Con el atributo type vamos a especificar el tipo de marca o vintildeeta que antecederaacute a cada uno de los elementos de la lista Estas marcas podraacuten ser un disco (disk) un ciacuterculo (circle) o un cuadrado (square) La etiqueta ltLHgt nos va a servir para especificar un posible tiacutetulo de la lista siendo esta opcional Vamos a ver algunos ejemplos en la Tabla 20

Ejemplo Resultado

ltUL type=circlegtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAfricaltLIgtAmeacutericaltLIgtOceaniacutea

ltULgt

Los cinco continentes

Europa

Asia

Aacutefrica

Ameacuterica

Oceaniacutea

ltUL type=squaregtltLIgtEuropaltLIgtAsialtLIgtAfricaltLIgtAmeacutericaltUL type=circle gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltULgtltLIgtOceaniacutea

ltULgt

Europa

Asia

Aacutefrica

Ameacuterica

Ameacuterica del Norte

Ameacuterica del Sur

Oceaniacutea

Tabla 20

Listas numeradas ltOLgt OL Ordered List

Con este tipo de listas podemos especificar una serie de elementos numerados seguacuten el lugar que ocupan en la lista Para la definicioacuten de los liacutemites de la lista utilizaremos la etiqueta ltOLgt ltOLgt y para determinar cada uno de los elementos que la componen usaremos la etiqueta ltLIgt El formato es el siguiente

ltOL start=n type=Tipo de listagtltLHgtTiacutetulo de la listaltLHgt

Lenguaje HTML copy Grupo EIDOS

28

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltOLgt

Con el atributo start vamos a especificar el nuacutemero por el que va a empezar la lista Si no indicamos este argumento la lista empezaraacute a numerarse a partir del 1 Con el atributo type vamos a especificar el tipo de lista numerada Sus posibles valores aparecen a continuacioacuten y veremos algunos ejemplos en la Tabla 21

A Letras mayuacutesculas (A B C )

a Letras minuacutesculas (a b c )

I Nuacutemeros romanos en mayuacutesculas (I II III IV )

i Nuacutemeros romanos en minuacutesculas (i ii iii iv )

1 Numeacutericamente (1 2 3 4 ) (es la numeracioacuten por defecto y por tanto no habriacutea que indicarla)

Ejemplo Resultado

ltOL type=AgtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltLIgtOceaniacutea

ltOLgt

Los cinco continentes

A Europa

B Asia

C Aacutefrica

D Ameacuterica

E Oceaniacutea

ltOL type=I start=2gtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltOL type=i gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltOLgtltLIgtOceaniacutea

ltOLgt

II Europa

III Asia

IV Aacutefrica

V Ameacuterica

i Ameacuterica del Norte

ii Ameacuterica del Sur

VI Oceaniacutea

Tabla 21

copy Grupo EIDOS 3 Elementos del lenguaje I

29

Listas de definiciones ltDLgt DL Definition List

Estas listas nos van a servir para especificar una serie de teacuterminos y sus definiciones correspondientes Para la definicioacuten de la lista usaremos la etiqueta ltDLgt ltDLgt para especificar los teacuterminos usaremos la etiqueta ltDTgt y para especificar la definicioacuten correspondiente a cada teacutermino usaremos la etiqueta ltDDgt El formato es el siguiente

ltDLgtltLHgtTiacutetulo de la listaltLHgtltDTgtTeacutermino 1ltDDgtDefinicioacuten 1ltDTgtTeacutermino 2ltDDgtDefinicioacuten 2

ltDTgtTeacutermino nltDDgtDefinicioacuten n

ltDLgtDT Definition Term DD Definition Description

Vamos a ver un ejemplo en la Tabla 22

Ejemplo Resultado

ltDLgtltDTgtPariacutesltDDgtCapital de FrancialtDTgtRomaltDDgtCapital de ItalialtDTgtMadridltDDgtCapital de Espantildea

ltDLgt

Pariacutes

Capital de Francia

Roma

Capital de Italia

Madrid

Capital de Espantildea

Tabla 22

Hiperenlaces Los hiperenlaces son enlaces de hipertexto que nos van a permitir acceder de manera directa a otros documentos HTML independientemente de su ubicacioacuten o a otras zonas dentro de nuestro propio documento

Enlaces a otras paacuteginas ltA href=gt Con este tipo de hiperenlaces vamos a poder acceder tanto a otras paacuteginas que esteacuten ubicadas dentro de nuestro propio sistema como a paacuteginas ubicadas en puntos muy distantes del globo El formato de este tipo de hiperenlaces es

ltA href=URL a la que se accedegtTexto del hiperenlaceltAgt

Lenguaje HTML copy Grupo EIDOS

30

Con el atributo href vamos a especificar la URL del documento al que se pretende acceder El texto contenido entre las etiquetas de comienzo y fin nos va a servir para definir el hiperenlace por lo que deberiacutea ser clarificador del contenido del documento con el que vamos a enlazar Esta definicioacuten apareceraacute resaltada normalmente en azul y subrayada En la mayoriacutea de los navegadores esta definicioacuten del hiperenlace es sensible por lo que cuando el cursor pasa por encima del mismo este cambia de aspecto indicaacutendolo

Veamos un ejemplo en la Tabla 23

Ejemplo Resultado

ltA href=httpwwweidosesgtPaacutegina inicialde Villa EidosltAgt

Paacutegina inicial de Villa Eidos

Tabla 23

Si situamos el ratoacuten encima del hiperenlace y pulsamos el navegador accederaacute a la paacutegina Web indicada por href es decir accederaacute a la paacutegina situada en httpwwweidoses

Igualmente podriacuteamos indicar el hiperenlace por medio de una imagen Si esta imagen tiene definido un borde este apareceraacute resaltado en color azul El formato correspondiente seriacutea

ltA href=URL a la que se accedegtltIMG src=Imagengt y tambieacutentextoltAgtIMG Image src Source

Veamos un ejemplo en la Tabla 24

Ejemplo Resultado

ltA href=httpwwweidosesgtltIMGsrc=IconogifgtltAgt Villa Eidos Villa Eidos

Tabla 24

Si pulsamos sobre la imagen el navegador accederaacute a la paacutegina Web inicial de Villa Eidos

Enlaces dentro de la misma paacutegina ltA name=gt Este tipo de hiperenlaces nos va a permitir marcar distintas zonas del documento activo con el objeto de tener un acceso directo a las mismas Una buena utilidad de este tipo de enlaces radica en la creacioacuten de iacutendices para documentos largos de forma que si pinchamos en el hiperenlace correspondiente al tiacutetulo de un capiacutetulo determinado el navegador saltaraacute automaacuteticamente hasta el comienzo de dicho capiacutetulo

Para la creacioacuten de estos hiperenlaces debemos seguir dos pasos

copy Grupo EIDOS 3 Elementos del lenguaje I

31

1 Marcar las distintas zonas o secciones del documento Esto lo haremos con el paraacutemetro name

ltA name=Identificador de seccioacutengtTexto de laseccioacutenltAgt

A cada seccioacuten le asignaremos un identificador distinto para poder referenciarlas posteriormente de manera inequiacutevoca

2 Especificar un enlace a cada una de las secciones que hayamos definido ltA href=Identificador de seccioacutengtTexto del enlace a laseccioacutenltAgt

Si pinchamos en este enlace el navegador saltaraacute automaacuteticamente a la seccioacuten correspondiente Veamos un ejemplo sencillito en la Tabla 25 pero demostrativo de todo lo que acabamos de explicar

Ejemplo Resultado

ltA href=Cap1gtCapiacutetulo1ltAgtltA name=Cap1gtCapiacutetulo 1ltAgt

Capiacutetulo 1

Capiacutetulo 1

Tabla 25

Si nos creamos una paacutegina HTML con distintos capiacutetulos podriacuteamos crear una seccioacuten para cada uno de ellos de forma que si pinchamos en el hiperenlace correspondiente al Capiacutetulo 1 el navegador saltariacutea directamente a la seccioacuten correspondiente al Capiacutetulo 1

Ademaacutes de los dos tipos de hiperenlaces vistos podemos crear hiperenlaces que nos permitan acceder a cualquiera de los servicios de Internet Es decir podriacuteamos indicar enlaces a servidores FTP GOPHER NEWS MAILTO etc Para ello tendriacuteamos que indicar la URL correspondiente al servicio al cual queremos acceder como ya vimos en el primer capiacutetulo de este manual

Imaacutegenes

Podremos dar un aspecto mucho maacutes vistoso a nuestros documentos HTML con la inclusioacuten de imaacutegenes Los formatos de imagen que todos los navegadores reconocen son gif y jpg Si queremos insertar una imagen en otro formato el visor deberiacutea disponer del programa externo que permita su visualizacioacuten De todas formas una buena solucioacuten es utilizar alguacuten programa de tratamiento de imaacutegenes que nos convierta la imagen a uno de los formatos mencionados anteriormente

El formato gif es maacutes recomendado para la inclusioacuten de iconos graacuteficas y el formato jpg para el caso de insertar fotografiacuteas en nuestras paacuteginas

Lenguaje HTML copy Grupo EIDOS

32

La etiqueta que nos va a permitir la insercioacuten de imaacutegenes es ltIMGgt La imagen se insertaraacute justo en el punto del documento donde coloquemos dicha etiqueta pudiendo insertar imaacutegenes dentro de listas tablas o formularios

El formato de la etiqueta con sus posibles argumentos es el siguiente

ltIMG src=URL de la imagen alt=Texto alternativoalign=topmiddlebottonleftrigth border=Tamantildeoheight=Tamantildeo width=Tamantildeo hspace=margen vspace=margengt

bull src=URL de la imagen El atributo src nos va servir para indicar la URL de la imagen que

queremos insertar es decir el servidor y camino hasta llegar al fichero de la imagen

No seraacute necesario que la imagen que queremos insertar en nuestro documento esteacute en el ordenador local aunque siacute es recomendable ya que el acceso a las mismas puede ser maacutes lento

Por tanto es una buena praacutectica copiar todas las imaacutegenes que vayamos a incluir en nuestro documento HTML al ordenador local

Tabla 26

bull alt=Texto alternativo Nos va a permitir mostrar un texto alternativo para el caso en que el

navegador no sea capaz de mostrar la imagen Su uso es muy recomendable ya que cuando publiquemos nuestras paacuteginas en la WWW no sabremos desde queacute tipo de navegadores accederaacuten los internautas a nuestras paacuteginas

En la Tabla 27 vamos a ver un ejemplo

Si usas un navegador que no tiene ninguacuten problema para la visualizacioacuten de imaacutegenes desactiva temporalmente la opcioacuten de mostrar imaacutegenes prueba el ejemplo que muestra la Tabla 27 y compaacuteralo con el anterior

Tabla 27

copy Grupo EIDOS 3 Elementos del lenguaje I

33

bull align=topmiddlebotton leftrigth Nos permite indicar coacutemo se alinearaacute el texto que siga a la imagen

top alinea el texto con la parte superior de la imagen

middle con la parte central

bottom con la parte inferior

left imagen alineada a la izquierda de la paacutegina

rigth imagen alineada a la derecha de la paacutegina

Tabla 28

En el caso de que el texto que acompantildea a la imagen tenga maacutes de una liacutenea tan soacutelo la primera seraacute la que se alinearaacute seguacuten alguna de las anteriores alineaciones el resto de liacuteneas se incluiraacuten debajo de la imagen quedando un efecto bastante feo

Para solventar esto estaacuten las alineaciones LEFT (imagen alineada a la izquierda de la paacutegina) y RIGHT (imagen alineada a la derecha de la paacutegina) Las cuales permiten que la imagen se inserte dentro del paacuterrafo que la rodea produciendo un resultado mucho maacutes profesional en la integracioacuten de texto e imaacutegenes

Estas dos alineaciones no se podraacuten usar en combinacioacuten con las anteriores Veamos algunos ejemplos en la Tabla 29

Vemos como en el primer ejemplo la segunda liacutenea de texto aparece debajo de la imagen produciendo un efecto menos vistoso que en los dos ejemplos siguientes

Lenguaje HTML copy Grupo EIDOS

34

Tabla 29

bull border=Tamantildeo Permite antildeadirle un borde a la imagen del tamantildeo que le

especifiquemos

Si la imagen forma parte de un hiperenlace esta apareceraacute con un borde del color del hiperenlace Si no deseaacuteramos que aparezca este borde tendriacuteamos que especificar border=0

Tabla 30

bull height=Tamantildeo Permite especificar el alto de la imagen en puntos de pantalla

(pixels) o en del tamantildeo del documento

bull width=Tamantildeo Con este argumento especificaremos el ancho al que mostraremos la imagen en puntos de pantalla (pixels) o en del tamantildeo del documento

En el segundo de los ejemplos de la Tabla 31 el ancho de la imagen se ha extendido al 50 del total del ancho de la celda donde estaacute contenida la imagen Si pruebas este ejemplo en tu documento HTML la imagen se extenderaacute horizontalmente hasta ocupar el 50 del ancho de la paacutegina

copy Grupo EIDOS 3 Elementos del lenguaje I

35

Tabla 31

bull hspace=Margen hspace Horizontal Space Permite especificar el nuacutemero de espacios

horizontales (en puntos) que separaraacuten a la imagen de cualquier elemento que le siga o le anteceda

bull vspace=Margen vspace Vertical Space Con este argumento especificaremos el margen vertical (en puntos) que habraacute entre la imagen y cualquier otro elemento de nuestro documento

Tabla 32

Elementos del lenguaje II

Tablas HTML nos va a permitir la inclusioacuten de cualquiera de los elementos de nuestra paacutegina (texto imaacutegenes hiperenlaces listas etc) dentro de una tabla Gracias a lo cual conseguiremos dar una mayor y mejor estructuracioacuten a los contenidos de nuestros documentos Ademaacutes la definicioacuten de las tablas en HTML es muy abierta pudiendo en cualquier momento redimensionar la tabla es decir cambiar su nuacutemero de filas o de columnas cambiar el tamantildeo de alguna de sus celdas etc

La etiqueta que nos va a permitir la definicioacuten de tablas es ltTABLEgt ltTABLEgt

El formato general de la etiqueta sin ninguacuten argumento es el siguiente

ltTABLEgtltTR gt

ltTHgtContenido de la celda ltTHgtltTDgtContenido de la celda ltTDgt

ltTRgtltTABLEgt

TR Table Row TH Table Header TD Table Data

Vamos a analizar cada una de estas etiquetas de forma separada

1 ltTABLEgt ltTABLEgt Definicioacuten general de la tabla Dentro de ella definiremos las filas y columnas que la constituyen pudiendo incluso definir tablas dentro de tablas es decir tablas anidadas

Lenguaje HTML copy Grupo EIDOS

38

2 ltTRgt ltTRgt Definicioacuten de las filas de la tabla Por cada etiqueta ltTRgt que incluyamos se crearaacute una fila en la tabla No seraacute necesario indicar la etiqueta de cierre

3 ltTHgtltTHgt oacute ltTDgtltTDgt Definicioacuten de cada una de las celdas de la tabla Vemos que estas etiquetas estaacuten contenidas dentro de otra etiqueta de definicioacuten de fila de forma que por cada etiqueta ltTHgt o ltTDgt que incluyamos se crearaacute una celda dentro de la fila correspondiente La etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera es decir celdas cuyo contenido estaacute resaltado en negrita dejando la etiqueta ltTDgt para definir celdas de datos En este caso tampoco es necesario indicar las etiquetas de cierre

Todas estas etiquetas tienen sus respectivos argumentos Pero antes de analizar cada uno de ellos vamos a ver un ejemplo muy sencillito en la Tabla 33 que nos crearaacute una tabla de una sola celda (1 fila X 1 columna = 1 celda) Para ello usaremos la etiqueta de creacioacuten de tabla ltTABLEgt con el argumento border=1 (nos dibuja un borde de tamantildeo 1 alrededor de la tabla)

Ejemplo Resultado

ltTABLE border=1gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 33

Vamos ahora a analizar lo distintos argumentos que componen las etiquetas de la tabla analizaacutendolos desde lo general (la definicioacuten de la tabla) hasta lo especiacutefico (la definicioacuten de las celdas)

1 Definicioacuten de la tabla ltTABLEgt

ltTABLE border=n cellpadding=n cellspacing=n width=n oacute height=n oacute bgcolor=rrggbb oacute nombre gt

Contenido ltTABLEgt

bull border=n Si especificamos este argumento se dibujaraacute un borde alrededor de la

tabla del ancho que le indiquemos como muestra la Tabla 34

Ejemplo Resultado

Mi primera tabla ltTABLE border=4gtltTRgtltTDgtMi primera tablaltTABLEgt

Tabla 34

bull cellpadding=n Indica el espacio en puntos que separa el contenido de la celda con

el borde de la misma siendo 1 por defecto

copy Grupo EIDOS 4 Elementos del lenguaje II

39

Ejemplo Resultado

ltTABLE border=4 cellpadding=8gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 35

bull cellspacing=n Indica el espacio en puntos que separa a las celdas contenidas dentro de la tabla siendo 2 por defecto

bull width=n oacute Indica la anchura de la tabla en puntos o en en funcioacuten del ancho de la ventana del visualizador Si no indicamos este argumento el ancho de la tabla se ajustaraacute al tamantildeo del contenido de las celdas Esto es lo que ha ocurrido en el uacuteltimo ejemplo que hemos realizado Veamos un ejemplo en el Coacutedigo fuente 11 El resultado se muestra en la Tabla 36

ltTABLE border=4 width=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 11

Mi primera tabla

Tabla 36

bull height=n oacute Nos permite definir la altura de la tabla en puntos o en de la

altura de la ventana del visualizador Si indicamos este argumento lo recomendable es darlo en puntos ya que es maacutes complicado adecuarnos a la altura de la ventana del visualizador Al igual que en el caso anterior si no especificamos este argumento la altura se adecuaraacute al contenido de las celdas El Coacutedigo fuente 12 muestra un ejemplo y la Tabla 37 nos muestra el resultado

ltTABLE border=4 width=50 height=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 12

Mi primera tabla

Tabla 37

bull bgcolor= rrggbb o nombre del color Nos permite definir un color

de fondo para todas las celdas de la tabla Maacutes adelante veremos como podemos definir colores especiacuteficos para cada una de las celdas por separado

Lenguaje HTML copy Grupo EIDOS

40

Ejemplo Resultado

ltTABLE border=4 bgcolor=yellowgtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 38

2 Definicioacuten de las filas de la tabla ltTRgt

ltTR align=leftrightcenter valign=topmiddlebottombgcolor=rrggbb oacute nombregt

Antes de empezar a descifrar el significado de cada uno de los argumentos de esta etiqueta vamos a ver un ejemplo en la Tabla 39 de coacutemo se construiriacutea una tabla con dos filas (2 filas X 1 columna = 2 celdas)

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR gtltTDgtPrimera filaltTRgtltTDgtSegunda filaltTABLEgt

Segunda fila

Tabla 39

bull align=leftrightcenter Con este argumento vamos a indicar la alineacioacuten

horizontal (leftizquierda rightderecha centercentrado) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado Veamos un ejemplo en el Coacutedigo fuente 13 y su correspondiente resultado en la Tabla 40

ltTABLE border=4 width=50 gt ltTRgtltTDgtPrimera filaltTRalign=rightgtltTDgtSegunda filaltTABLEgt

Coacutedigo fuente 13

Primera fila

Segunda fila

Tabla 40

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten

vertical (toparriba middlecentrado bottomabajo) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado

copy Grupo EIDOS 4 Elementos del lenguaje II

41

bull bgcolor= rrggbb o nombre del color En este caso este argumento nos permitiraacute definir un color de fondo para todas las celdas de una fila veamos un ejemplo en la

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR bgcolor=yellowgtltTDgtPrimera

filaltTR bgcolor=greengtltTDgtSegunda

filaltTABLEgt

Segunda fila

Tabla 41

3 Definicioacuten de las celdas de la tabla ltTHgt oacute ltTDgt

ltTH oacute TD align=leftrightcenterjustifyvalign=topmiddlebottom bgcolor=rrggbb oacute nombre width=nrowspan=n colspan=ngt

Como ya explicamos anteriormente la etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera y la etiqueta ltTDgt para la creacioacuten de celdas de datos Vamos a completar nuestro ejemplo inicial antildeadieacutendole tres filas de dos celdas cada una (3 filas X 2 columnas = 6 celdas) Tabla 42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTDgtCelda 21ltTDgtCelda 22

ltTABLEgt Celda 21 Celda 22

Tabla 42

bull align=leftrightcenterjustify Con este argumento vamos a indicar la

alineacioacuten horizontal (left izquierda right derecha center centrado justifyjustificado) del contenido de cada celda por separado Su significado es el mismo que en la etiqueta ltTRgt

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten vertical (toparriba middlecentrado bottomabajo) del contenido de cada celda

bull bgcolor= rrggbb o nombre del color En este caso podremos definir un color de fondo para cada una de las celdas de manera independiente

bull width=n oacute Indica el ancho de la celda en puntos o en en funcioacuten del tamantildeo de la tabla

Lenguaje HTML copy Grupo EIDOS

42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera

1ltTHgtCabecera 2ltTR gtltTD align=rightgtCelda

11ltTD bgcolor=redgtCelda 12ltTRgtltTD

bgcolor=yellowgtCelda 21ltTDalign=centergtCelda 22ltTABLEgt

Celda 21 Celda 22

Tabla 43

bull rowspan=n Con este argumento podemos lograr que una celda concreta abarque maacutes de una fila ya sabemos que por defecto una celda ocupa una sola fila

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTD rowspan=2gtCelda

11ltTDgtCelda 12ltTRgtltTDgtCelda 22

ltTABLEgt

Celda 11 Celda 22

Tabla 44

bull colspan=n Con este argumento podemos lograr que una celda se expanda a maacutes

de una columna

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTD colspan=2

align=centergtCelda 22ltTABLEgt

Celda 22

Tabla 45

Para finalizar este tema sobre la creacioacuten de tablas vamos a ver el ejemplo que aparece en el Coacutedigo fuente 14 y su resultado en la Tabla 46

ltTABLE border=4gtltTR gtltTH colspan=3 bgcolor=redgtTiacutetuloltTR bgcolor=yellowgtltTHgtCabecera 1ltTHgtCabecera 2ltTHgtCabecera 3

copy Grupo EIDOS 4 Elementos del lenguaje II

43

ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTDgtCelda 13ltTRgtltTD rowspan=2gtCelda 21ltTD bgcolor=greengtCelda 22ltTDgtCelda 23ltTRgtltTDgtCelda 32ltTDgtCelda 33

ltTABLEgt

Coacutedigo fuente 14

Tiacutetulo

Cabecera 1 Cabecera 2 Cabecera 3

Celda 11 Celda 12 Celda 13

Celda 22 Celda 23 Celda 21

Celda 32 Celda 33

Tabla 46

Formularios El formulario es el elemento de HTML que nos va a permitir interactuar con los visitantes de nuestras paacuteginas web de forma que podemos solicitarle informacioacuten al usuario y procesarla De esta forma podremos crear en nuestras paacuteginas encuestas para solicitar la opinioacuten del visitante sobre alguacuten tema e incluso sobre el contenido de nuestra propia paacutegina web cuestionarios para evaluar la asimilacioacuten de contenidos sobre un tema concreto que se trate en la paacutegina etc

El contenido de la informacioacuten introducida por medio del formulario seraacute enviado a la direccioacuten URL donde resida el programa que se encargaraacute de procesar los datos A este tipo de programas externos se les denomina programas CGI (Common Gateway Interface)

La etiqueta HTML que nos va a permitir la creacioacuten de formularios es ltFORMgt Su formato es el siguiente

ltFORM action=URL del programa que trata el formulariomethod=postgetgt Elementos del formulario ltFORMgt

bull action=URL del programa que trata el formulario A traveacutes de este

argumento indicaremos como ya hemos mencionado la direccioacuten del fichero de programa que va a tratar la informacioacuten suministrada por el formulario

Tambieacuten podriacuteamos incluir como URL que trata el formulario una direccioacuten de correo electroacutenico Por tanto el valor de este argumento podriacutea ser action =mailto direccioacuten de correo

Nota Esta opcioacuten soacutelo funciona adecuadamente con el navegador Netscape Con el Explorer este enviacuteo dariacutea como resultado un correo en blanco Para que esta opcioacuten funcione de manera independiente del navegador que se esteacute utilizando se ha de emplear un programa externo que realice este proceso

Lenguaje HTML copy Grupo EIDOS

44

bull method=postget A traveacutes de este argumento indicaremos el meacutetodo empleado para transferir la informacioacuten generada por el formulario

Si indicamos post se produciraacute la modificacioacuten del documento destino como es el caso de enviar la informacioacuten a una direccioacuten de correo electroacutenico Mediante el meacutetodo get no se produciraacuten cambios en el documento destino

Dentro de un formulario podremos incluir cualquier texto o instruccioacuten HTML de las vistas a lo largo de los capiacutetulos anteriores ademaacutes claro estaacute de los elementos tiacutepicos de un formulario cajas de texto botones de seleccioacuten menuacutes de opciones etc Vamos a ver coacutemo se incluiraacuten estos elementos en un formulario

Entrada baacutesica de datos Para definir los distintos tipos de campos baacutesicos de entrada de datos usaremos la etiqueta ltINPUTgt

El formato es el siguiente

ltINPUT type= text password checkbox radio hidden submit image reset name=Variable value=Valor inicialgt

bull El argumento type determinaraacute el tipo de campo de entrada que estamos insertando A

continuacioacuten describiremos cada uno de ellos

bull El argumento name especifica el nombre de la variable que tomaraacute el valor introducido en el campo

bull El argumento value especifica el valor por defecto que tendraacute el campo

Vamos a continuacioacuten a describir los distintos tipos campos de entrada que vendraacuten dados por los valores del argumento type

Texto corto type=text

Con este argumento vamos a indicar que el campo a introducir seraacute un texto El formato seriacutea

ltINPUT type= text name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los nuevos atributos es

bull size=Tamantildeo Indicaremos el tamantildeo en caracteres de la ventana de introduccioacuten de texto

bull maxlength=Longitud maacutexima Indicaremos el nuacutemero maacuteximo de caracteres a introducir en el campo

Vamos a ver un ejemplo en la Tabla 47

copy Grupo EIDOS 4 Elementos del lenguaje II

45

Ejemplo Resultado

NombreltINPUT type=text name=Var1Value=Texto por defecto size=20 maxlength=25gt

Tabla 47

Claves type=password

Con este argumento indicamos que el campo a introducir seraacute una palabra clave por lo que los caracteres que se introduzcan seraacuten sustituidos por asteriscos en la visualizacioacuten por pantalla El formato es

ltINPUT type= password name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los distintos argumentos es el mismo que en el caso anterior Veamos un ejemplo en la Tabla 48

Ejemplo Resultado

ClaveltINPUT type=password name=Var2Value=tutankamon size=11 maxlength=10gt

Tabla 48

Botones de seleccioacuten type=checkbox

El checkbox es un botoacuten que presenta dos estados marcado (1) y desmarcado (0) Podremos variar su estado simplemente pinchando con el ratoacuten El formato es

ltINPUT type= checkbox name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto

Si incluimos el argumento value cuando el botoacuten esteacute marcado su variable asociada adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 49

Ejemplo Resultado

ltINPUT type=checkbox name=Var3 value=Op1 checkedgtOpcioacuten1 ltbrgtltINPUT type=checkbox name=Var4 value=Op2gt Opcioacuten 2

Tabla 49

Lenguaje HTML copy Grupo EIDOS

46

Seleccioacuten entre varias opciones type=radio

Este argumento se usa cuando hay que hacer una seleccioacuten entre varias alternativas excluyentes pudieacutendose seleccionar uacutenicamente una de las alternativas Debemos incluir una etiqueta radio por cada una de las posibles alternativas El formato es

ltINPUT type= radio name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto En este caso uacutenicamente uno de los botones de radio podraacute aparecer marcado ya que se usa para el caso de opciones excluyentes

Cuando un botoacuten esteacute seleccionado la variable asociada a la lista de botones adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 50

Ejemplo Resultado

ltINPUT type=radio name=Var5 value=Op1gtOpcioacuten1 ltbrgtltINPUT type=radio name=Var5 value=Op2checkedgt Opcioacuten 2 ltbrgtltINPUT type=radio name=Var5 value=Op3 gtOpcioacuten 3

Tabla 50

En este ejemplo la variable Var5 tendraacute el valor Op2

Campos ocultos type=hidden

Este tipo de campos no son visibles para el usuario Su uso tiene sentido en el caso de enviar alguacuten tipo de informacioacuten que no deba ser visualizada o variada por el lector de nuestra paacutegina Web El formato es

ltINPUT type= hidden name=Variable value=Valor gt

Con esta etiqueta asignariacuteamos a la Variable referenciada por name el Valor de value y se mandariacutea junto con el formulario sin que el usuario de la paacutegina se entere de nada Veamos un ejemplo en el Coacutedigo fuente 15

ltINPUT type=hidden name=Var6 value=tutankamongt

Coacutedigo fuente 15

copy Grupo EIDOS 4 Elementos del lenguaje II

47

Botoacuten de enviacuteo de datos type=submit

Con este argumento especificamos un botoacuten en el que al pulsar los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario El formato es

ltINPUT type= submit value=Mensaje a mostrargt

En este caso el paraacutemetro value indica el mensaje que se mostraraacute en el botoacuten Veamos un ejemplo en la Tabla 51

Ejemplo Resultado

ltINPUT type=submit value=Enviar los Datosgt

Tabla 51

Botoacuten graacutefico de enviacuteo de datos type=image

Con este argumento especificamos un botoacuten de tipo imagen en el que al igual que con el botoacuten anterior si pulsamos en la imagen los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario Su formato es el siguiente

ltINPUT type= image src=URL de la imagen name=Variablegt

Con el paraacutemetro src especificamos la URL de la imagen que seraacute insertada en el botoacuten En este caso en la variable referenciada por name se almacenaraacuten las coordenadas del punto de la imagen donde se halla pinchado (de forma que estas coordenadas podriacutean ser procesadas por el programa que recibe los datos del formulario)

Botoacuten de borrado de datos type=reset

Con este argumento especificamos un botoacuten que al ser pulsado borraraacute el contenido actual de todos los campos dejaacutendolos con sus valores por defecto Su formato es

ltINPUT type= reset value=Texto del botoacutengt

Con el paraacutemetro value especificamos el texto que etiquetaraacute al botoacuten

Ejemplo Resultado

ltINPUT type=reset value=Borrar datosgt

Tabla 52

Lenguaje HTML copy Grupo EIDOS

48

Entrada datos en muacuteltiples liacuteneas En un formulario tambieacuten podremos introducir un campo de texto que abarque varias liacuteneas Para ello usaremos la etiqueta ltTEXTAREAgt ltTEXTAREAgt Su formato es el siguiente

ltTEXTAREA name=Variable rows=Filas cols=ColumnasgtContenido por defectoltTEXTAREAgt

Los argumentos rows y cols nos van a permitir especificar respectivamente el nuacutemero de filas de texto visibles y el nuacutemero de columnas de texto visibles en el campo

Ejemplo Resultado

ltTEXTAREA name=Var7 rows=5 cols=40gtContenido por defectoltTEXTAREAgt

Tabla 53

Entrada de datos a traveacutes de campos de seleccioacuten Con los campos de seleccioacuten podremos desplegar una lista de opciones entre las que podremos seleccionar una Para ello usaremos la etiqueta ltSELECTgt ltSELECTgt Su formato es el siguiente

ltSELECT name=Variable multiple size=ngtltOPTION selected value=Valor_1gtPrimera OpcioacutenltOPTION value=Valor_2gtSegunda Opcioacuten

ltOPTION value=Valor_ngtEneacutesima Opcioacuten

ltSELECTgt

Figura 1

bull La variable referenciada por name tomaraacute el valor(value) de la opcioacuten seleccionada

bull Si especificamos el argumento muacuteltiple se mostraraacuten todas la opciones en forma de tabla El nuacutemero de opciones visibles en la tabla vendraacute dado por el argumento size

copy Grupo EIDOS 4 Elementos del lenguaje II

49

bull Con la etiqueta ltOPTIONgt iremos definiendo cada una de las opciones de la lista

bull El argumento selected va a determinar cuaacutel es la opcioacuten por defecto

Para finalizar vamos a ver el Coacutedigo fuente 16 correspondiente a una encuesta realizada por la editorial ficticia EditoPc y en la Figura 2 observamos el resultado del formulario

ltP align=centergtltBgtEDITORIAL ltIgtEditoPcltIgtltBgtltPgtltFORM action=mailtodireccionejemplo method = postgtNombreltINPUT type=text size=30 name=nombregtltBRgtE_mail ltINPUT type=text size=30 name=e_mailgtltPgtDeseas recibir informacioacuten sobreltINPUT type=checkbox name=infor1 value=InternetgtInternetltINPUT type=checkbox name=infor2 value=ProgramacioacutengtProgramacioacutenltINPUT type=checkbox name=infor3 value=SistOperativogtSistOperativoltINPUT type=checkbox name=infor4 value=OfimaacuteticagtOfimaacuteticaltPgtiquestTe conectas a Internet desde casa ltbrgtltINPUT type=radio name=intercasa value=sigtSiacuteltINPUT type=radio name=intercasa value=nogtNoltPgtiquestQueacute uso le das a tu ordenador ltBRgtltSELECT name=uso multiple size=3gtltOPTION selectedgtProfesionalltOPTIONgtDomeacutesticoltOPTIONgtOcioJuegosltSELECTgtltPgtCaracteriacutesticas de tu PCltBRgtltTEXTAREA name=caract rows=5 cols=40gtltTEXTAREAgtltPgtltINPUT type=submit value=Enviar datosgt ltINPUT type=reset value=Borrardatosgt

Coacutedigo fuente 16

Figura 2

Elementos del lenguaje III

Frames Las frames son una utilidad del HTML que nos permite dividir la ventana del navegador en diferentes subventanas que podraacuten ser manipuladas de manera independiente Esto nos permitiraacute mostrar una paacutegina web diferente en cada una de la subventanas o frames

Estructura de un documento con frames Un documento con frames se estructura de manera diferente a un documento HTML normal Asiacute en este tipo de documentos no apareceraacute la etiqueta ltBODYgt En su lugar se incluiraacute la etiqueta ltFRAMESETgt ltFRAMESETgt dentro de la cual se definiraacuten las distintas frames que se incluyan en el documento

La estructura general de un documento de este tipo seriacutea por tanto

ltHTMLgtltHEADgtCabeceraltHEADgtltFRAMESETgt

Definicioacuten de la distintas framesltFRAMESETgtltNOFRAMESgt

Instrucciones HTMLltNOFRAMESgt

ltHTMLgt

Lenguaje HTML copy Grupo EIDOS

52

Puede darse el caso de que programemos nuestro documento con frames siguiendo la estructura anterior y que el navegador que se use para leer el documento no soporte la caracteriacutestica de frames con lo cual no se mostraraacute nada de lo indicado entre las etiquetas ltFRAMESETgt y ltFRAMESETgtPara solucionar este problema todas las instrucciones HTML incluidas entre las etiquetas ltNOFRAMESgt y ltNOFRAMESgt seraacuten ejecutadas por los navegadores que no soportan las frames

La sintaxis de la etiqueta ltFRAMESETgt es

ltFRAMESET rows=Lista de filas cols=Lista de columnasgtltFRAME src=URL de la frame 1 name=Nombre de la frame 1gtltFRAME src=URL de la frame 2 name=Nombre de la frame 2gt

ltFRAME src=URL de la frame n name=Nombre de la frame ngt

ltFRAMESETgt

Como vemos por cada una de la frames que incluyamos en nuestro documento debemos incluir una etiqueta ltFRAMEgt indicando mediante sus argumentos la direccioacuten URL del documento que se insertaraacute en la subventana (src) y el nombre de la frame (name) Posteriormente describiremos la etiqueta ltFRAMEgt con maacutes detalle

Los argumentos de ltFRAMESETgt son rows y cols definieacutendose uacutenicamente uno de los dos atributos en funcioacuten de si la divisioacuten de la pantalla se realizaraacute por filas (rows) o por columnas (cols)

Por cada una de las subventanas que creemos debemos especificar su tamantildeo en puntos o en porcentaje del tamantildeo de cada subventana Asiacute por ejemplo si especificamos rows= 50 2525 crearemos tres subventanas horizontales ocupando la primera el 50 de la ventana principal y las otras dos el resto Si especificamos cols=100150 crearemos tres subventanas verticales ocupando la primera 100 puntos de la ventana principal la segunda 150 puntos y tercera el espacio restante

Vamos a verlo maacutes claramente con un par de ejemplos praacutecticos que vemos en la Tabla 54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 502525gt ltFRAMEsrc=Pagweb1htm name=Pagweb1gtltFRAMEsrc=Pagweb2htm name=Pagweb2gtltFRAMEsrc=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 14: Programacion web   lenguaje html

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

17

ltBODY bgcolor=yellow text=navygt

Coacutedigo fuente 8

bull link=rrggbb oacute name Indica el color que tendraacuten los hiperenlaces que no han sido

accedidos Por defecto es azul Como todaviacutea no sabemos insertar hiperenlaces en nuestro documento vamos a dejar el ejemplo correspondiente para maacutes adelante

bull vlink=rrggbb oacute name vlink Visited Links Indica el color de los hiperenlaces que ya han sido accedidos Por defecto es puacuterpura

Caracteres especiales Hasta ahora hemos escrito algunos ejemplos de coacutedigo HTML pero hemos pasado por alto algunas limitaciones de HTML respecto al uso de caracteres especiales Una de estas limitaciones es por ejemplo el uso de los caracteres lt y gt que como ya sabemos indican el inicio y fin de una etiqueta HTML Pues bien si quisieacuteramos escribir estos caracteres como parte normal de un texto el navegador no sabriacutea si se trata de texto normal o del comienzo y final de una etiqueta o sea que se hariacutea un liacuteo

Como todo tiene solucioacuten existen unos coacutedigos para poder escribir estos caracteres y otros relacionados con las etiquetas los vemos en la Tabla 3

Siacutembolo Coacutedigo

lt (menor que) amplt

gt (mayor que) ampgt

amp (ampersand) ampamp

(comillas) ampquot

Tabla 3

Para las letras especiacuteficas del idioma castellano las vocales acentuadas la ntilde la uuml y los signos iquest y iexcl existen los coacutedigos que muestra la Tabla 4

Letra Coacutedigo Letra Coacutedigo Letra Coacutedigo

aacute ampaacute Aacute ampAacute ntilde ampntilde

eacute ampeacute Eacute ampEacute Ntilde ampNtilde

iacute ampiacute

Iacute ampIacute

uuml ampuuml

Lenguaje HTML copy Grupo EIDOS

18

oacute ampoacute Oacute ampOacute Uuml ampUuml

uacute ampuacute Uacute ampUacute iquest amp191

iexcl amp161

Tabla 4

Para los navegadores actuales podemos escribir nuestro coacutedigo HTML de manera directa sin tener en cuenta estos coacutedigos pero nunca podemos asegurar que las personas que accedan a nuestras paacuteginas con otros navegadores puedan leerlas correctamente Asiacute que los maacutes adecuado es el empleo de los mismos Otros siacutembolos especiales aparecen en la Tabla 5

Siacutembolo Coacutedigo

Ccedil ampccedil

Ccedil ampCcedil

copy ampcopy

reg ampreg

Tabla 5

Veamos un ejemplo en el Coacutedigo fuente 9

ampquotLa inspiraciampoacuten existe pero tiene que encontrarse trabajandoampquotampcopy Pablo Ruampiacutez Picasso

Coacutedigo fuente 9

Esta instruccioacuten HTML deberiacutea producir el siguiente resultado

La inspiracioacuten existe pero tiene que encontrarse trabajando copyPablo Ruiacutez Picasso

Para la inclusioacuten de comentarios en nuestra paacutegina HTML podemos usar la etiqueta lt-- --gt Estos comentarios nos podraacuten servir para efectuar anotaciones en nuestro documento HTML que ayuden a una mayor comprensioacuten del coacutedigo En el Coacutedigo fuente 10 se muestra un ejemplo de comentario

lt-- Esto es un comentario y no seraacute mostrado por el navegador --gt

Coacutedigo fuente 10

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

19

Espaciado y saltos de liacutenea En HTML soacutelo se admite un uacutenico espacio en blanco separando cualquier elemento o texto el resto de espacios seraacuten ignorados por el navegador al igual que las tabulaciones retornos de carro etc Veamos un ejemplo en la Tabla 6

Ejemplo Resultado

Esta frase no se veraacute asiacute en el visor Esta frase no se veraacute asiacute en el visor

Tabla 6

No obstante siacute podremos dar el formato que deseemos a nuestras paacuteginas con el empleo de los siguientes elementos del lenguaje HTML

Inclusioacuten de espacios en blanco ampnbsp Nos permitiraacute la inclusioacuten de maacutes de un espacio en blanco entre dos textos consecutivos de forma que estos espacios se muestren de forma efectiva en el navegador Tendremos que incluir tantas expresiones ampnbsp como espacios en blanco se deseen incluir

Ejemplo Resultado

Texto1ampnbspampnbspampnbspampnbspTexto2 Texto1 Texto2

Tabla 7

Salto de liacutenea ltBRgt BR Break Nos permite dar un salto a la liacutenea siguiente en el punto donde la etiqueta sea insertada

Ejemplo Resultado

Esta frase tiene aquiacuteltBRgt un salto de liacutenea Esta frase tiene aquiacute un salto de liacutenea

Tabla 8

Cambio de paacuterrafo ltPgt P Paragraph Permite definir un paacuterrafo introduciendo normalmente un espacio de separacioacuten de dos liacuteneas con el texto siguiente al punto donde hayamos insertado la etiqueta ltPgt

Lenguaje HTML copy Grupo EIDOS

20

Ejemplo Resultado

Esta frase tiene aquiacuteltPgt un cambio de paacuterrafo Esta frase tiene aquiacute

un cambio de paacuterrafo

Tabla 9

La etiqueta de fin paacuterrafo ltPgt es opcional no siendo necesario incluirla Aunque siempre es recomendable delimitar claramente el inicio y final de un paacuterrafo Ademaacutes cuando usemos esta etiqueta como cerrada ltPgt ltPgt tenemos la posibilidad de incluirle el atributo align el cual indica al navegador la forma de justificar el texto incluido en el paacuterrafo El formato seriacutea el siguiente

ltP align= left right center justify gtTexto contenido en elpaacuterrafo ltPgt

Veamos algunos ejemplos en la Tabla 10

Ejemplo Resultado

ltP align=rightgtEste es un ejemplode paacuterrafo alineado a laderechaltPgt

Este es un ejemplo de paacuterrafo alineado a la derecha

ltP align=centergtEste es unejemplo de paacuterrafo centradoltPgt

Este es un ejemplo de paacuterrafo centrado

Tabla 10

Liacutenea Horizontal ltHRgt HR Horizontal Rule Nos permite insertar una liacutenea horizontal cuyo tamantildeo podremos determinar a traveacutes de sus atributos Si no especificamos ninguacuten atributo dibujaraacute una liacutenea que ocupe el ancho de la pantalla del navegador Su utilidad es la de permitirnos dividir nuestra paacutegina en distintas secciones No seraacute necesaria la etiqueta de fin ltHRgt

El formato de la etiqueta con sus posibles atributos es

ltHR align= left right center noshade size=n width=n gt

bull align= left right center Permite establecer la alineacioacuten de la liacutenea a la izquierda a la derecha o centrarla

bull noshade No muestra la sombra de la liacutenea evitando el efecto de tres dimensiones

bull size=n Indica el grosor de la liacutenea en pixels

bull width=n oacute n Especificaraacute el ancho de la liacutenea este se podraacute especificar en pixels (n) o en tanto por ciento del ancho de la ventana (n) Vamos a ver algunos ejemplos en la Tabla 11

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

21

Ejemplo Resultado

ltHRgt

ltHR size=3 noshadegt

ltHR size=5width=50align=rightgt

ltHR size=10width=50align=centergt

Tabla 11

Texto preformateado ltPREgt PRE Preformatted Nos permitiraacute visualizar el texto tal y como se ha escrito respetando los saltos de liacutenea las tabulaciones y espacios en blanco de todo el texto incluido entre las etiquetas ltPREgt y ltPREgt

El texto se mostraraacute con una fuente de espaciado fijo maacutes pequentildea que el texto normal No es recomendable su uso ya que presenta muchas limitaciones y no se obtiene una buena presentacioacuten

Ejemplo Resultado

ltPREgtEste texto estaacutepreformateadoltPREgt

Este texto estaacute preformateado

Tabla 12

Elementos del lenguaje I

Cabeceras y atributos de texto

Cabeceras ltH1gtltH6gt H Heading En un documento HTML podemos incluir seis tipos distintos de cabeceras que van a constituir normalmente el tiacutetulo y los distintos subapartados que forman el documento aunque podremos utilizarlas en el punto que queramos del documento para resaltar cualquier texto Estas cabeceras son definidas por las etiquetas ltH1gtltH2gtltH3gtltH4gtltH5gt y ltH6gt El texto que componga cada cabecera deberaacute estar incluido entre las etiquetas de inicio (ltHngt) y fin (Hn) correspondiente La cabecera ltH1gtseraacute la que muestre el texto de mayor tamantildeo este tamantildeo iraacute disminuyendo hasta llegar a la cabecera ltH6gt Como podemos ver en la Tabla 13 Para alinear las cabeceras utilizamos el atributo align El formato seriacutea ltHn align=centergt como muestra la Tabla 14

Ejemplo Resultado

ltH1gtCabecera 1ltH1gt Cabecera 1 ltH2gtCabecera 2ltH2gt Cabecera 2

Lenguaje HTML copy Grupo EIDOS

24

ltH3gtCabecera 3ltH3gt Cabecera 3

ltH4gtCabecera 4ltH4gt Cabecera 4

ltH5gtCabecera 5ltH5gtCabecera 5

ltH6gtCabecera 6ltH6gtCabecera 6

Tabla 13

Ejemplo Resultado

ltH5 align=centergtCabecera 5ltH5gtCabecera 5

Tabla 14

Atributos del texto Al texto de nuestro documento HTML le podemos aplicar distintos atributos (negrita cursiva subrayado etc) al igual que hacemos cuando trabajamos con el procesador de textos en la edicioacuten de nuestros documentos Para aplicar estos atributos disponemos de distintas etiquetas que aplicaraacuten su efecto al texto incluido entre sus indicadores de inicio y fin Las vemos en la Tabla 15

Atributo Etiqueta Ejemplo Resultado

Negrita ltBgtltBgtltBgtTexto ennegritaltBgt

Texto en negrita

Cursiva ltIgtltIgtltIgtTexto encursivaltIgt

Texto en cursiva

Teletype ltTTgtltTTgtltTTgtTexto en modoteletypeltTTgt

Texto en modoteletype

Subrayado ltUgtltUgt ltUgtTexto subrayadoltUgt Texto subrayado Tachado ltSgtltSgt ltSgtTexto tachadoltSgt Texto tachado

Parpadeo ltBLINKgtltBLINKgtltBLINKgtTextoparpadeandoltBLINKgt

Texto parpadeando

Superiacutendice ltSUPgtltSUPgt ltSUPgtTexto en modosuperiacutendiceltSUPgt

Texto en modo superiacutendice

Subiacutendice ltSUBgtltSUBgtltSUBgtTexto en modosubiacutendiceltSUBgt

Texto en modo subiacutendice

Centrado ltCENTERgtltCENTERgt

ltCENTERgtTextocentradoltCENTERgt

Texto centrado

B Bold I Italic TT Teletype U Underlined S Strike SUP Superscript SUB Subscript

Tabla 15

copy Grupo EIDOS 3 Elementos del lenguaje I

25

Alguna de estas etiquetas no es reconocida por determinados navegadores Asiacute por ejemplo la etiqueta ltBLINKgt (Parpadeo) no es implementada por el Explorer Por lo que seguacuten el explorador que estemos utilizando podremos ver el resultado correctamente o no

Existen otras etiquetas que nos van a servir para especificar de manera diferenciada unidades loacutegicas de nuestro documento HTML tales como citas direcciones de correo etc En algunos casos el formato obtenido con estas etiquetas de estilo loacutegico va a ser el mismo que con las anteriores a las que se les denomina tambieacuten etiquetas de estilo fiacutesico Algunas etiquetas de estilo loacutegico las vemos en la Tabla 16

Etiqueta Ejemplo Resultado

ltSTRONGgtltSTRONGgtltSTRONGgtEspecifica textoresaltado (igualltBgt)ltSTRONGgt

Especifica texto resaltado(igual ltBgt)

ltCITEgtltCITEgtltCITEgtIndica una cita otiacutetulo (igual ltIgt)ltCITEgt

Indica una cita o tiacutetulo (igualltIgt)

ltSTRIKEgtltSTRIKEgtltltSTRIKEgtTexto tachado(igual ltSgt)ltSTRIKEgt

Texto tachado (igual ltSgt)

Tabla 16

Si queremos aplicar efectos maacutes espectaculares a nuestro documento HTML debemos variar el tamantildeo el color y el tipo de letra del texto La etiqueta que nos permite todo esto es ltFONTgtltFONTgt por medio de sus atributos size color y face

ltFONT size=n oacute +- n color=rrggbb oacute name face=nombre defont gt

bull size=n oacute +- n El atributo size nos permite especificar un tamantildeo determinado

para la fuente del texto incluido entre las etiquetas de inicio y fin el cual puede estar entre 1 y 7 El texto de tamantildeo normal equivale a la fuente de tamantildeo 3 (fuente base) Por tanto si especificamos size=+2 el tamantildeo de la fuente seraacute 5 Y si especificamos size= -1 el tamantildeo seraacute 2

Ejemplo Resultado

ltFONT size=2gtTamantildeo 2ltFONTgtTamantildeo 2

ltFONT size=+2gtTamantildeo 5 (3+2)ltFONTgt Tamantildeo 5 (3+2)

ltFONT size=-1gtTamantildeo 2 (3-1)ltFONTgtTamantildeo 2 (3-1)

Tabla 17

bull color=rrggbb oacute name Nos va a permitir definir el color que tendraacute el texto

incluido entre las etiquetas Tabla 18

Lenguaje HTML copy Grupo EIDOS

26

Ejemplo Resultado

ltFONT color=redgtTexto de colorrojoltFONTgt

Texto de color rojo

ltFONT color=bluegtTexto de colorazulltFONTgt

Texto de color azul

ltFONT size=5 color=008000gtTextoverde y de tamantildeo 5ltFONTgt

Texto verde y detamantildeo 5

Tabla 18

bull face=nombre de font Nos va a permitir escribir texto con el tipo de letra que le

especifiquemos En el caso de que el tipo de letra que le hayamos especificado no esteacute cargada en el ordenador que lee la paacutegina se usaraacute el font por defecto del navegador

Ejemplo Resultado

ltFONT face=TahomagtTipo de letraTahomaltFONTgt

Tipo de letra Tahoma

ltFONT size=4 color=blueface=TahomagtTexto azul de tamantildeo4 y TahomaltFONTgt

Texto azul de tamantildeo 4 y Tahoma

Tabla 19

Listas Podemos representar elementos en forma de lista dentro de nuestros documentos de una forma muy sencilla y con una gran versatilidad Estas listas podraacuten incluir cualquiera de los elementos HTML e incluso podemos definir listas anidadas es decir listas dentro de listas HTML nos permite crear tres tipos distintos de listas

bull Listas no numeradas

bull Listas numeradas

bull Listas de definiciones

Listas no numeradas ltULgt UL Unordered List

Con este tipo de listas podemos especificar una serie de elementos sin un orden predeterminado precedidos de una marca o vintildeeta que nosotros mismos podemos definir Para la definicioacuten de los liacutemites de la lista utilizaremos la etiqueta ltULgt ltULgt y para determinar cada uno de los elementos que la componen usaremos la etiqueta ltLIgt El formato es el siguiente

ltUL type=disk oacute circle oacute squaregtltLHgtTiacutetulo de la listaltLHgt

copy Grupo EIDOS 3 Elementos del lenguaje I

27

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltULgtLH List Head LI List Item

Con el atributo type vamos a especificar el tipo de marca o vintildeeta que antecederaacute a cada uno de los elementos de la lista Estas marcas podraacuten ser un disco (disk) un ciacuterculo (circle) o un cuadrado (square) La etiqueta ltLHgt nos va a servir para especificar un posible tiacutetulo de la lista siendo esta opcional Vamos a ver algunos ejemplos en la Tabla 20

Ejemplo Resultado

ltUL type=circlegtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAfricaltLIgtAmeacutericaltLIgtOceaniacutea

ltULgt

Los cinco continentes

Europa

Asia

Aacutefrica

Ameacuterica

Oceaniacutea

ltUL type=squaregtltLIgtEuropaltLIgtAsialtLIgtAfricaltLIgtAmeacutericaltUL type=circle gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltULgtltLIgtOceaniacutea

ltULgt

Europa

Asia

Aacutefrica

Ameacuterica

Ameacuterica del Norte

Ameacuterica del Sur

Oceaniacutea

Tabla 20

Listas numeradas ltOLgt OL Ordered List

Con este tipo de listas podemos especificar una serie de elementos numerados seguacuten el lugar que ocupan en la lista Para la definicioacuten de los liacutemites de la lista utilizaremos la etiqueta ltOLgt ltOLgt y para determinar cada uno de los elementos que la componen usaremos la etiqueta ltLIgt El formato es el siguiente

ltOL start=n type=Tipo de listagtltLHgtTiacutetulo de la listaltLHgt

Lenguaje HTML copy Grupo EIDOS

28

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltOLgt

Con el atributo start vamos a especificar el nuacutemero por el que va a empezar la lista Si no indicamos este argumento la lista empezaraacute a numerarse a partir del 1 Con el atributo type vamos a especificar el tipo de lista numerada Sus posibles valores aparecen a continuacioacuten y veremos algunos ejemplos en la Tabla 21

A Letras mayuacutesculas (A B C )

a Letras minuacutesculas (a b c )

I Nuacutemeros romanos en mayuacutesculas (I II III IV )

i Nuacutemeros romanos en minuacutesculas (i ii iii iv )

1 Numeacutericamente (1 2 3 4 ) (es la numeracioacuten por defecto y por tanto no habriacutea que indicarla)

Ejemplo Resultado

ltOL type=AgtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltLIgtOceaniacutea

ltOLgt

Los cinco continentes

A Europa

B Asia

C Aacutefrica

D Ameacuterica

E Oceaniacutea

ltOL type=I start=2gtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltOL type=i gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltOLgtltLIgtOceaniacutea

ltOLgt

II Europa

III Asia

IV Aacutefrica

V Ameacuterica

i Ameacuterica del Norte

ii Ameacuterica del Sur

VI Oceaniacutea

Tabla 21

copy Grupo EIDOS 3 Elementos del lenguaje I

29

Listas de definiciones ltDLgt DL Definition List

Estas listas nos van a servir para especificar una serie de teacuterminos y sus definiciones correspondientes Para la definicioacuten de la lista usaremos la etiqueta ltDLgt ltDLgt para especificar los teacuterminos usaremos la etiqueta ltDTgt y para especificar la definicioacuten correspondiente a cada teacutermino usaremos la etiqueta ltDDgt El formato es el siguiente

ltDLgtltLHgtTiacutetulo de la listaltLHgtltDTgtTeacutermino 1ltDDgtDefinicioacuten 1ltDTgtTeacutermino 2ltDDgtDefinicioacuten 2

ltDTgtTeacutermino nltDDgtDefinicioacuten n

ltDLgtDT Definition Term DD Definition Description

Vamos a ver un ejemplo en la Tabla 22

Ejemplo Resultado

ltDLgtltDTgtPariacutesltDDgtCapital de FrancialtDTgtRomaltDDgtCapital de ItalialtDTgtMadridltDDgtCapital de Espantildea

ltDLgt

Pariacutes

Capital de Francia

Roma

Capital de Italia

Madrid

Capital de Espantildea

Tabla 22

Hiperenlaces Los hiperenlaces son enlaces de hipertexto que nos van a permitir acceder de manera directa a otros documentos HTML independientemente de su ubicacioacuten o a otras zonas dentro de nuestro propio documento

Enlaces a otras paacuteginas ltA href=gt Con este tipo de hiperenlaces vamos a poder acceder tanto a otras paacuteginas que esteacuten ubicadas dentro de nuestro propio sistema como a paacuteginas ubicadas en puntos muy distantes del globo El formato de este tipo de hiperenlaces es

ltA href=URL a la que se accedegtTexto del hiperenlaceltAgt

Lenguaje HTML copy Grupo EIDOS

30

Con el atributo href vamos a especificar la URL del documento al que se pretende acceder El texto contenido entre las etiquetas de comienzo y fin nos va a servir para definir el hiperenlace por lo que deberiacutea ser clarificador del contenido del documento con el que vamos a enlazar Esta definicioacuten apareceraacute resaltada normalmente en azul y subrayada En la mayoriacutea de los navegadores esta definicioacuten del hiperenlace es sensible por lo que cuando el cursor pasa por encima del mismo este cambia de aspecto indicaacutendolo

Veamos un ejemplo en la Tabla 23

Ejemplo Resultado

ltA href=httpwwweidosesgtPaacutegina inicialde Villa EidosltAgt

Paacutegina inicial de Villa Eidos

Tabla 23

Si situamos el ratoacuten encima del hiperenlace y pulsamos el navegador accederaacute a la paacutegina Web indicada por href es decir accederaacute a la paacutegina situada en httpwwweidoses

Igualmente podriacuteamos indicar el hiperenlace por medio de una imagen Si esta imagen tiene definido un borde este apareceraacute resaltado en color azul El formato correspondiente seriacutea

ltA href=URL a la que se accedegtltIMG src=Imagengt y tambieacutentextoltAgtIMG Image src Source

Veamos un ejemplo en la Tabla 24

Ejemplo Resultado

ltA href=httpwwweidosesgtltIMGsrc=IconogifgtltAgt Villa Eidos Villa Eidos

Tabla 24

Si pulsamos sobre la imagen el navegador accederaacute a la paacutegina Web inicial de Villa Eidos

Enlaces dentro de la misma paacutegina ltA name=gt Este tipo de hiperenlaces nos va a permitir marcar distintas zonas del documento activo con el objeto de tener un acceso directo a las mismas Una buena utilidad de este tipo de enlaces radica en la creacioacuten de iacutendices para documentos largos de forma que si pinchamos en el hiperenlace correspondiente al tiacutetulo de un capiacutetulo determinado el navegador saltaraacute automaacuteticamente hasta el comienzo de dicho capiacutetulo

Para la creacioacuten de estos hiperenlaces debemos seguir dos pasos

copy Grupo EIDOS 3 Elementos del lenguaje I

31

1 Marcar las distintas zonas o secciones del documento Esto lo haremos con el paraacutemetro name

ltA name=Identificador de seccioacutengtTexto de laseccioacutenltAgt

A cada seccioacuten le asignaremos un identificador distinto para poder referenciarlas posteriormente de manera inequiacutevoca

2 Especificar un enlace a cada una de las secciones que hayamos definido ltA href=Identificador de seccioacutengtTexto del enlace a laseccioacutenltAgt

Si pinchamos en este enlace el navegador saltaraacute automaacuteticamente a la seccioacuten correspondiente Veamos un ejemplo sencillito en la Tabla 25 pero demostrativo de todo lo que acabamos de explicar

Ejemplo Resultado

ltA href=Cap1gtCapiacutetulo1ltAgtltA name=Cap1gtCapiacutetulo 1ltAgt

Capiacutetulo 1

Capiacutetulo 1

Tabla 25

Si nos creamos una paacutegina HTML con distintos capiacutetulos podriacuteamos crear una seccioacuten para cada uno de ellos de forma que si pinchamos en el hiperenlace correspondiente al Capiacutetulo 1 el navegador saltariacutea directamente a la seccioacuten correspondiente al Capiacutetulo 1

Ademaacutes de los dos tipos de hiperenlaces vistos podemos crear hiperenlaces que nos permitan acceder a cualquiera de los servicios de Internet Es decir podriacuteamos indicar enlaces a servidores FTP GOPHER NEWS MAILTO etc Para ello tendriacuteamos que indicar la URL correspondiente al servicio al cual queremos acceder como ya vimos en el primer capiacutetulo de este manual

Imaacutegenes

Podremos dar un aspecto mucho maacutes vistoso a nuestros documentos HTML con la inclusioacuten de imaacutegenes Los formatos de imagen que todos los navegadores reconocen son gif y jpg Si queremos insertar una imagen en otro formato el visor deberiacutea disponer del programa externo que permita su visualizacioacuten De todas formas una buena solucioacuten es utilizar alguacuten programa de tratamiento de imaacutegenes que nos convierta la imagen a uno de los formatos mencionados anteriormente

El formato gif es maacutes recomendado para la inclusioacuten de iconos graacuteficas y el formato jpg para el caso de insertar fotografiacuteas en nuestras paacuteginas

Lenguaje HTML copy Grupo EIDOS

32

La etiqueta que nos va a permitir la insercioacuten de imaacutegenes es ltIMGgt La imagen se insertaraacute justo en el punto del documento donde coloquemos dicha etiqueta pudiendo insertar imaacutegenes dentro de listas tablas o formularios

El formato de la etiqueta con sus posibles argumentos es el siguiente

ltIMG src=URL de la imagen alt=Texto alternativoalign=topmiddlebottonleftrigth border=Tamantildeoheight=Tamantildeo width=Tamantildeo hspace=margen vspace=margengt

bull src=URL de la imagen El atributo src nos va servir para indicar la URL de la imagen que

queremos insertar es decir el servidor y camino hasta llegar al fichero de la imagen

No seraacute necesario que la imagen que queremos insertar en nuestro documento esteacute en el ordenador local aunque siacute es recomendable ya que el acceso a las mismas puede ser maacutes lento

Por tanto es una buena praacutectica copiar todas las imaacutegenes que vayamos a incluir en nuestro documento HTML al ordenador local

Tabla 26

bull alt=Texto alternativo Nos va a permitir mostrar un texto alternativo para el caso en que el

navegador no sea capaz de mostrar la imagen Su uso es muy recomendable ya que cuando publiquemos nuestras paacuteginas en la WWW no sabremos desde queacute tipo de navegadores accederaacuten los internautas a nuestras paacuteginas

En la Tabla 27 vamos a ver un ejemplo

Si usas un navegador que no tiene ninguacuten problema para la visualizacioacuten de imaacutegenes desactiva temporalmente la opcioacuten de mostrar imaacutegenes prueba el ejemplo que muestra la Tabla 27 y compaacuteralo con el anterior

Tabla 27

copy Grupo EIDOS 3 Elementos del lenguaje I

33

bull align=topmiddlebotton leftrigth Nos permite indicar coacutemo se alinearaacute el texto que siga a la imagen

top alinea el texto con la parte superior de la imagen

middle con la parte central

bottom con la parte inferior

left imagen alineada a la izquierda de la paacutegina

rigth imagen alineada a la derecha de la paacutegina

Tabla 28

En el caso de que el texto que acompantildea a la imagen tenga maacutes de una liacutenea tan soacutelo la primera seraacute la que se alinearaacute seguacuten alguna de las anteriores alineaciones el resto de liacuteneas se incluiraacuten debajo de la imagen quedando un efecto bastante feo

Para solventar esto estaacuten las alineaciones LEFT (imagen alineada a la izquierda de la paacutegina) y RIGHT (imagen alineada a la derecha de la paacutegina) Las cuales permiten que la imagen se inserte dentro del paacuterrafo que la rodea produciendo un resultado mucho maacutes profesional en la integracioacuten de texto e imaacutegenes

Estas dos alineaciones no se podraacuten usar en combinacioacuten con las anteriores Veamos algunos ejemplos en la Tabla 29

Vemos como en el primer ejemplo la segunda liacutenea de texto aparece debajo de la imagen produciendo un efecto menos vistoso que en los dos ejemplos siguientes

Lenguaje HTML copy Grupo EIDOS

34

Tabla 29

bull border=Tamantildeo Permite antildeadirle un borde a la imagen del tamantildeo que le

especifiquemos

Si la imagen forma parte de un hiperenlace esta apareceraacute con un borde del color del hiperenlace Si no deseaacuteramos que aparezca este borde tendriacuteamos que especificar border=0

Tabla 30

bull height=Tamantildeo Permite especificar el alto de la imagen en puntos de pantalla

(pixels) o en del tamantildeo del documento

bull width=Tamantildeo Con este argumento especificaremos el ancho al que mostraremos la imagen en puntos de pantalla (pixels) o en del tamantildeo del documento

En el segundo de los ejemplos de la Tabla 31 el ancho de la imagen se ha extendido al 50 del total del ancho de la celda donde estaacute contenida la imagen Si pruebas este ejemplo en tu documento HTML la imagen se extenderaacute horizontalmente hasta ocupar el 50 del ancho de la paacutegina

copy Grupo EIDOS 3 Elementos del lenguaje I

35

Tabla 31

bull hspace=Margen hspace Horizontal Space Permite especificar el nuacutemero de espacios

horizontales (en puntos) que separaraacuten a la imagen de cualquier elemento que le siga o le anteceda

bull vspace=Margen vspace Vertical Space Con este argumento especificaremos el margen vertical (en puntos) que habraacute entre la imagen y cualquier otro elemento de nuestro documento

Tabla 32

Elementos del lenguaje II

Tablas HTML nos va a permitir la inclusioacuten de cualquiera de los elementos de nuestra paacutegina (texto imaacutegenes hiperenlaces listas etc) dentro de una tabla Gracias a lo cual conseguiremos dar una mayor y mejor estructuracioacuten a los contenidos de nuestros documentos Ademaacutes la definicioacuten de las tablas en HTML es muy abierta pudiendo en cualquier momento redimensionar la tabla es decir cambiar su nuacutemero de filas o de columnas cambiar el tamantildeo de alguna de sus celdas etc

La etiqueta que nos va a permitir la definicioacuten de tablas es ltTABLEgt ltTABLEgt

El formato general de la etiqueta sin ninguacuten argumento es el siguiente

ltTABLEgtltTR gt

ltTHgtContenido de la celda ltTHgtltTDgtContenido de la celda ltTDgt

ltTRgtltTABLEgt

TR Table Row TH Table Header TD Table Data

Vamos a analizar cada una de estas etiquetas de forma separada

1 ltTABLEgt ltTABLEgt Definicioacuten general de la tabla Dentro de ella definiremos las filas y columnas que la constituyen pudiendo incluso definir tablas dentro de tablas es decir tablas anidadas

Lenguaje HTML copy Grupo EIDOS

38

2 ltTRgt ltTRgt Definicioacuten de las filas de la tabla Por cada etiqueta ltTRgt que incluyamos se crearaacute una fila en la tabla No seraacute necesario indicar la etiqueta de cierre

3 ltTHgtltTHgt oacute ltTDgtltTDgt Definicioacuten de cada una de las celdas de la tabla Vemos que estas etiquetas estaacuten contenidas dentro de otra etiqueta de definicioacuten de fila de forma que por cada etiqueta ltTHgt o ltTDgt que incluyamos se crearaacute una celda dentro de la fila correspondiente La etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera es decir celdas cuyo contenido estaacute resaltado en negrita dejando la etiqueta ltTDgt para definir celdas de datos En este caso tampoco es necesario indicar las etiquetas de cierre

Todas estas etiquetas tienen sus respectivos argumentos Pero antes de analizar cada uno de ellos vamos a ver un ejemplo muy sencillito en la Tabla 33 que nos crearaacute una tabla de una sola celda (1 fila X 1 columna = 1 celda) Para ello usaremos la etiqueta de creacioacuten de tabla ltTABLEgt con el argumento border=1 (nos dibuja un borde de tamantildeo 1 alrededor de la tabla)

Ejemplo Resultado

ltTABLE border=1gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 33

Vamos ahora a analizar lo distintos argumentos que componen las etiquetas de la tabla analizaacutendolos desde lo general (la definicioacuten de la tabla) hasta lo especiacutefico (la definicioacuten de las celdas)

1 Definicioacuten de la tabla ltTABLEgt

ltTABLE border=n cellpadding=n cellspacing=n width=n oacute height=n oacute bgcolor=rrggbb oacute nombre gt

Contenido ltTABLEgt

bull border=n Si especificamos este argumento se dibujaraacute un borde alrededor de la

tabla del ancho que le indiquemos como muestra la Tabla 34

Ejemplo Resultado

Mi primera tabla ltTABLE border=4gtltTRgtltTDgtMi primera tablaltTABLEgt

Tabla 34

bull cellpadding=n Indica el espacio en puntos que separa el contenido de la celda con

el borde de la misma siendo 1 por defecto

copy Grupo EIDOS 4 Elementos del lenguaje II

39

Ejemplo Resultado

ltTABLE border=4 cellpadding=8gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 35

bull cellspacing=n Indica el espacio en puntos que separa a las celdas contenidas dentro de la tabla siendo 2 por defecto

bull width=n oacute Indica la anchura de la tabla en puntos o en en funcioacuten del ancho de la ventana del visualizador Si no indicamos este argumento el ancho de la tabla se ajustaraacute al tamantildeo del contenido de las celdas Esto es lo que ha ocurrido en el uacuteltimo ejemplo que hemos realizado Veamos un ejemplo en el Coacutedigo fuente 11 El resultado se muestra en la Tabla 36

ltTABLE border=4 width=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 11

Mi primera tabla

Tabla 36

bull height=n oacute Nos permite definir la altura de la tabla en puntos o en de la

altura de la ventana del visualizador Si indicamos este argumento lo recomendable es darlo en puntos ya que es maacutes complicado adecuarnos a la altura de la ventana del visualizador Al igual que en el caso anterior si no especificamos este argumento la altura se adecuaraacute al contenido de las celdas El Coacutedigo fuente 12 muestra un ejemplo y la Tabla 37 nos muestra el resultado

ltTABLE border=4 width=50 height=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 12

Mi primera tabla

Tabla 37

bull bgcolor= rrggbb o nombre del color Nos permite definir un color

de fondo para todas las celdas de la tabla Maacutes adelante veremos como podemos definir colores especiacuteficos para cada una de las celdas por separado

Lenguaje HTML copy Grupo EIDOS

40

Ejemplo Resultado

ltTABLE border=4 bgcolor=yellowgtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 38

2 Definicioacuten de las filas de la tabla ltTRgt

ltTR align=leftrightcenter valign=topmiddlebottombgcolor=rrggbb oacute nombregt

Antes de empezar a descifrar el significado de cada uno de los argumentos de esta etiqueta vamos a ver un ejemplo en la Tabla 39 de coacutemo se construiriacutea una tabla con dos filas (2 filas X 1 columna = 2 celdas)

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR gtltTDgtPrimera filaltTRgtltTDgtSegunda filaltTABLEgt

Segunda fila

Tabla 39

bull align=leftrightcenter Con este argumento vamos a indicar la alineacioacuten

horizontal (leftizquierda rightderecha centercentrado) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado Veamos un ejemplo en el Coacutedigo fuente 13 y su correspondiente resultado en la Tabla 40

ltTABLE border=4 width=50 gt ltTRgtltTDgtPrimera filaltTRalign=rightgtltTDgtSegunda filaltTABLEgt

Coacutedigo fuente 13

Primera fila

Segunda fila

Tabla 40

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten

vertical (toparriba middlecentrado bottomabajo) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado

copy Grupo EIDOS 4 Elementos del lenguaje II

41

bull bgcolor= rrggbb o nombre del color En este caso este argumento nos permitiraacute definir un color de fondo para todas las celdas de una fila veamos un ejemplo en la

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR bgcolor=yellowgtltTDgtPrimera

filaltTR bgcolor=greengtltTDgtSegunda

filaltTABLEgt

Segunda fila

Tabla 41

3 Definicioacuten de las celdas de la tabla ltTHgt oacute ltTDgt

ltTH oacute TD align=leftrightcenterjustifyvalign=topmiddlebottom bgcolor=rrggbb oacute nombre width=nrowspan=n colspan=ngt

Como ya explicamos anteriormente la etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera y la etiqueta ltTDgt para la creacioacuten de celdas de datos Vamos a completar nuestro ejemplo inicial antildeadieacutendole tres filas de dos celdas cada una (3 filas X 2 columnas = 6 celdas) Tabla 42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTDgtCelda 21ltTDgtCelda 22

ltTABLEgt Celda 21 Celda 22

Tabla 42

bull align=leftrightcenterjustify Con este argumento vamos a indicar la

alineacioacuten horizontal (left izquierda right derecha center centrado justifyjustificado) del contenido de cada celda por separado Su significado es el mismo que en la etiqueta ltTRgt

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten vertical (toparriba middlecentrado bottomabajo) del contenido de cada celda

bull bgcolor= rrggbb o nombre del color En este caso podremos definir un color de fondo para cada una de las celdas de manera independiente

bull width=n oacute Indica el ancho de la celda en puntos o en en funcioacuten del tamantildeo de la tabla

Lenguaje HTML copy Grupo EIDOS

42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera

1ltTHgtCabecera 2ltTR gtltTD align=rightgtCelda

11ltTD bgcolor=redgtCelda 12ltTRgtltTD

bgcolor=yellowgtCelda 21ltTDalign=centergtCelda 22ltTABLEgt

Celda 21 Celda 22

Tabla 43

bull rowspan=n Con este argumento podemos lograr que una celda concreta abarque maacutes de una fila ya sabemos que por defecto una celda ocupa una sola fila

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTD rowspan=2gtCelda

11ltTDgtCelda 12ltTRgtltTDgtCelda 22

ltTABLEgt

Celda 11 Celda 22

Tabla 44

bull colspan=n Con este argumento podemos lograr que una celda se expanda a maacutes

de una columna

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTD colspan=2

align=centergtCelda 22ltTABLEgt

Celda 22

Tabla 45

Para finalizar este tema sobre la creacioacuten de tablas vamos a ver el ejemplo que aparece en el Coacutedigo fuente 14 y su resultado en la Tabla 46

ltTABLE border=4gtltTR gtltTH colspan=3 bgcolor=redgtTiacutetuloltTR bgcolor=yellowgtltTHgtCabecera 1ltTHgtCabecera 2ltTHgtCabecera 3

copy Grupo EIDOS 4 Elementos del lenguaje II

43

ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTDgtCelda 13ltTRgtltTD rowspan=2gtCelda 21ltTD bgcolor=greengtCelda 22ltTDgtCelda 23ltTRgtltTDgtCelda 32ltTDgtCelda 33

ltTABLEgt

Coacutedigo fuente 14

Tiacutetulo

Cabecera 1 Cabecera 2 Cabecera 3

Celda 11 Celda 12 Celda 13

Celda 22 Celda 23 Celda 21

Celda 32 Celda 33

Tabla 46

Formularios El formulario es el elemento de HTML que nos va a permitir interactuar con los visitantes de nuestras paacuteginas web de forma que podemos solicitarle informacioacuten al usuario y procesarla De esta forma podremos crear en nuestras paacuteginas encuestas para solicitar la opinioacuten del visitante sobre alguacuten tema e incluso sobre el contenido de nuestra propia paacutegina web cuestionarios para evaluar la asimilacioacuten de contenidos sobre un tema concreto que se trate en la paacutegina etc

El contenido de la informacioacuten introducida por medio del formulario seraacute enviado a la direccioacuten URL donde resida el programa que se encargaraacute de procesar los datos A este tipo de programas externos se les denomina programas CGI (Common Gateway Interface)

La etiqueta HTML que nos va a permitir la creacioacuten de formularios es ltFORMgt Su formato es el siguiente

ltFORM action=URL del programa que trata el formulariomethod=postgetgt Elementos del formulario ltFORMgt

bull action=URL del programa que trata el formulario A traveacutes de este

argumento indicaremos como ya hemos mencionado la direccioacuten del fichero de programa que va a tratar la informacioacuten suministrada por el formulario

Tambieacuten podriacuteamos incluir como URL que trata el formulario una direccioacuten de correo electroacutenico Por tanto el valor de este argumento podriacutea ser action =mailto direccioacuten de correo

Nota Esta opcioacuten soacutelo funciona adecuadamente con el navegador Netscape Con el Explorer este enviacuteo dariacutea como resultado un correo en blanco Para que esta opcioacuten funcione de manera independiente del navegador que se esteacute utilizando se ha de emplear un programa externo que realice este proceso

Lenguaje HTML copy Grupo EIDOS

44

bull method=postget A traveacutes de este argumento indicaremos el meacutetodo empleado para transferir la informacioacuten generada por el formulario

Si indicamos post se produciraacute la modificacioacuten del documento destino como es el caso de enviar la informacioacuten a una direccioacuten de correo electroacutenico Mediante el meacutetodo get no se produciraacuten cambios en el documento destino

Dentro de un formulario podremos incluir cualquier texto o instruccioacuten HTML de las vistas a lo largo de los capiacutetulos anteriores ademaacutes claro estaacute de los elementos tiacutepicos de un formulario cajas de texto botones de seleccioacuten menuacutes de opciones etc Vamos a ver coacutemo se incluiraacuten estos elementos en un formulario

Entrada baacutesica de datos Para definir los distintos tipos de campos baacutesicos de entrada de datos usaremos la etiqueta ltINPUTgt

El formato es el siguiente

ltINPUT type= text password checkbox radio hidden submit image reset name=Variable value=Valor inicialgt

bull El argumento type determinaraacute el tipo de campo de entrada que estamos insertando A

continuacioacuten describiremos cada uno de ellos

bull El argumento name especifica el nombre de la variable que tomaraacute el valor introducido en el campo

bull El argumento value especifica el valor por defecto que tendraacute el campo

Vamos a continuacioacuten a describir los distintos tipos campos de entrada que vendraacuten dados por los valores del argumento type

Texto corto type=text

Con este argumento vamos a indicar que el campo a introducir seraacute un texto El formato seriacutea

ltINPUT type= text name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los nuevos atributos es

bull size=Tamantildeo Indicaremos el tamantildeo en caracteres de la ventana de introduccioacuten de texto

bull maxlength=Longitud maacutexima Indicaremos el nuacutemero maacuteximo de caracteres a introducir en el campo

Vamos a ver un ejemplo en la Tabla 47

copy Grupo EIDOS 4 Elementos del lenguaje II

45

Ejemplo Resultado

NombreltINPUT type=text name=Var1Value=Texto por defecto size=20 maxlength=25gt

Tabla 47

Claves type=password

Con este argumento indicamos que el campo a introducir seraacute una palabra clave por lo que los caracteres que se introduzcan seraacuten sustituidos por asteriscos en la visualizacioacuten por pantalla El formato es

ltINPUT type= password name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los distintos argumentos es el mismo que en el caso anterior Veamos un ejemplo en la Tabla 48

Ejemplo Resultado

ClaveltINPUT type=password name=Var2Value=tutankamon size=11 maxlength=10gt

Tabla 48

Botones de seleccioacuten type=checkbox

El checkbox es un botoacuten que presenta dos estados marcado (1) y desmarcado (0) Podremos variar su estado simplemente pinchando con el ratoacuten El formato es

ltINPUT type= checkbox name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto

Si incluimos el argumento value cuando el botoacuten esteacute marcado su variable asociada adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 49

Ejemplo Resultado

ltINPUT type=checkbox name=Var3 value=Op1 checkedgtOpcioacuten1 ltbrgtltINPUT type=checkbox name=Var4 value=Op2gt Opcioacuten 2

Tabla 49

Lenguaje HTML copy Grupo EIDOS

46

Seleccioacuten entre varias opciones type=radio

Este argumento se usa cuando hay que hacer una seleccioacuten entre varias alternativas excluyentes pudieacutendose seleccionar uacutenicamente una de las alternativas Debemos incluir una etiqueta radio por cada una de las posibles alternativas El formato es

ltINPUT type= radio name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto En este caso uacutenicamente uno de los botones de radio podraacute aparecer marcado ya que se usa para el caso de opciones excluyentes

Cuando un botoacuten esteacute seleccionado la variable asociada a la lista de botones adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 50

Ejemplo Resultado

ltINPUT type=radio name=Var5 value=Op1gtOpcioacuten1 ltbrgtltINPUT type=radio name=Var5 value=Op2checkedgt Opcioacuten 2 ltbrgtltINPUT type=radio name=Var5 value=Op3 gtOpcioacuten 3

Tabla 50

En este ejemplo la variable Var5 tendraacute el valor Op2

Campos ocultos type=hidden

Este tipo de campos no son visibles para el usuario Su uso tiene sentido en el caso de enviar alguacuten tipo de informacioacuten que no deba ser visualizada o variada por el lector de nuestra paacutegina Web El formato es

ltINPUT type= hidden name=Variable value=Valor gt

Con esta etiqueta asignariacuteamos a la Variable referenciada por name el Valor de value y se mandariacutea junto con el formulario sin que el usuario de la paacutegina se entere de nada Veamos un ejemplo en el Coacutedigo fuente 15

ltINPUT type=hidden name=Var6 value=tutankamongt

Coacutedigo fuente 15

copy Grupo EIDOS 4 Elementos del lenguaje II

47

Botoacuten de enviacuteo de datos type=submit

Con este argumento especificamos un botoacuten en el que al pulsar los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario El formato es

ltINPUT type= submit value=Mensaje a mostrargt

En este caso el paraacutemetro value indica el mensaje que se mostraraacute en el botoacuten Veamos un ejemplo en la Tabla 51

Ejemplo Resultado

ltINPUT type=submit value=Enviar los Datosgt

Tabla 51

Botoacuten graacutefico de enviacuteo de datos type=image

Con este argumento especificamos un botoacuten de tipo imagen en el que al igual que con el botoacuten anterior si pulsamos en la imagen los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario Su formato es el siguiente

ltINPUT type= image src=URL de la imagen name=Variablegt

Con el paraacutemetro src especificamos la URL de la imagen que seraacute insertada en el botoacuten En este caso en la variable referenciada por name se almacenaraacuten las coordenadas del punto de la imagen donde se halla pinchado (de forma que estas coordenadas podriacutean ser procesadas por el programa que recibe los datos del formulario)

Botoacuten de borrado de datos type=reset

Con este argumento especificamos un botoacuten que al ser pulsado borraraacute el contenido actual de todos los campos dejaacutendolos con sus valores por defecto Su formato es

ltINPUT type= reset value=Texto del botoacutengt

Con el paraacutemetro value especificamos el texto que etiquetaraacute al botoacuten

Ejemplo Resultado

ltINPUT type=reset value=Borrar datosgt

Tabla 52

Lenguaje HTML copy Grupo EIDOS

48

Entrada datos en muacuteltiples liacuteneas En un formulario tambieacuten podremos introducir un campo de texto que abarque varias liacuteneas Para ello usaremos la etiqueta ltTEXTAREAgt ltTEXTAREAgt Su formato es el siguiente

ltTEXTAREA name=Variable rows=Filas cols=ColumnasgtContenido por defectoltTEXTAREAgt

Los argumentos rows y cols nos van a permitir especificar respectivamente el nuacutemero de filas de texto visibles y el nuacutemero de columnas de texto visibles en el campo

Ejemplo Resultado

ltTEXTAREA name=Var7 rows=5 cols=40gtContenido por defectoltTEXTAREAgt

Tabla 53

Entrada de datos a traveacutes de campos de seleccioacuten Con los campos de seleccioacuten podremos desplegar una lista de opciones entre las que podremos seleccionar una Para ello usaremos la etiqueta ltSELECTgt ltSELECTgt Su formato es el siguiente

ltSELECT name=Variable multiple size=ngtltOPTION selected value=Valor_1gtPrimera OpcioacutenltOPTION value=Valor_2gtSegunda Opcioacuten

ltOPTION value=Valor_ngtEneacutesima Opcioacuten

ltSELECTgt

Figura 1

bull La variable referenciada por name tomaraacute el valor(value) de la opcioacuten seleccionada

bull Si especificamos el argumento muacuteltiple se mostraraacuten todas la opciones en forma de tabla El nuacutemero de opciones visibles en la tabla vendraacute dado por el argumento size

copy Grupo EIDOS 4 Elementos del lenguaje II

49

bull Con la etiqueta ltOPTIONgt iremos definiendo cada una de las opciones de la lista

bull El argumento selected va a determinar cuaacutel es la opcioacuten por defecto

Para finalizar vamos a ver el Coacutedigo fuente 16 correspondiente a una encuesta realizada por la editorial ficticia EditoPc y en la Figura 2 observamos el resultado del formulario

ltP align=centergtltBgtEDITORIAL ltIgtEditoPcltIgtltBgtltPgtltFORM action=mailtodireccionejemplo method = postgtNombreltINPUT type=text size=30 name=nombregtltBRgtE_mail ltINPUT type=text size=30 name=e_mailgtltPgtDeseas recibir informacioacuten sobreltINPUT type=checkbox name=infor1 value=InternetgtInternetltINPUT type=checkbox name=infor2 value=ProgramacioacutengtProgramacioacutenltINPUT type=checkbox name=infor3 value=SistOperativogtSistOperativoltINPUT type=checkbox name=infor4 value=OfimaacuteticagtOfimaacuteticaltPgtiquestTe conectas a Internet desde casa ltbrgtltINPUT type=radio name=intercasa value=sigtSiacuteltINPUT type=radio name=intercasa value=nogtNoltPgtiquestQueacute uso le das a tu ordenador ltBRgtltSELECT name=uso multiple size=3gtltOPTION selectedgtProfesionalltOPTIONgtDomeacutesticoltOPTIONgtOcioJuegosltSELECTgtltPgtCaracteriacutesticas de tu PCltBRgtltTEXTAREA name=caract rows=5 cols=40gtltTEXTAREAgtltPgtltINPUT type=submit value=Enviar datosgt ltINPUT type=reset value=Borrardatosgt

Coacutedigo fuente 16

Figura 2

Elementos del lenguaje III

Frames Las frames son una utilidad del HTML que nos permite dividir la ventana del navegador en diferentes subventanas que podraacuten ser manipuladas de manera independiente Esto nos permitiraacute mostrar una paacutegina web diferente en cada una de la subventanas o frames

Estructura de un documento con frames Un documento con frames se estructura de manera diferente a un documento HTML normal Asiacute en este tipo de documentos no apareceraacute la etiqueta ltBODYgt En su lugar se incluiraacute la etiqueta ltFRAMESETgt ltFRAMESETgt dentro de la cual se definiraacuten las distintas frames que se incluyan en el documento

La estructura general de un documento de este tipo seriacutea por tanto

ltHTMLgtltHEADgtCabeceraltHEADgtltFRAMESETgt

Definicioacuten de la distintas framesltFRAMESETgtltNOFRAMESgt

Instrucciones HTMLltNOFRAMESgt

ltHTMLgt

Lenguaje HTML copy Grupo EIDOS

52

Puede darse el caso de que programemos nuestro documento con frames siguiendo la estructura anterior y que el navegador que se use para leer el documento no soporte la caracteriacutestica de frames con lo cual no se mostraraacute nada de lo indicado entre las etiquetas ltFRAMESETgt y ltFRAMESETgtPara solucionar este problema todas las instrucciones HTML incluidas entre las etiquetas ltNOFRAMESgt y ltNOFRAMESgt seraacuten ejecutadas por los navegadores que no soportan las frames

La sintaxis de la etiqueta ltFRAMESETgt es

ltFRAMESET rows=Lista de filas cols=Lista de columnasgtltFRAME src=URL de la frame 1 name=Nombre de la frame 1gtltFRAME src=URL de la frame 2 name=Nombre de la frame 2gt

ltFRAME src=URL de la frame n name=Nombre de la frame ngt

ltFRAMESETgt

Como vemos por cada una de la frames que incluyamos en nuestro documento debemos incluir una etiqueta ltFRAMEgt indicando mediante sus argumentos la direccioacuten URL del documento que se insertaraacute en la subventana (src) y el nombre de la frame (name) Posteriormente describiremos la etiqueta ltFRAMEgt con maacutes detalle

Los argumentos de ltFRAMESETgt son rows y cols definieacutendose uacutenicamente uno de los dos atributos en funcioacuten de si la divisioacuten de la pantalla se realizaraacute por filas (rows) o por columnas (cols)

Por cada una de las subventanas que creemos debemos especificar su tamantildeo en puntos o en porcentaje del tamantildeo de cada subventana Asiacute por ejemplo si especificamos rows= 50 2525 crearemos tres subventanas horizontales ocupando la primera el 50 de la ventana principal y las otras dos el resto Si especificamos cols=100150 crearemos tres subventanas verticales ocupando la primera 100 puntos de la ventana principal la segunda 150 puntos y tercera el espacio restante

Vamos a verlo maacutes claramente con un par de ejemplos praacutecticos que vemos en la Tabla 54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 502525gt ltFRAMEsrc=Pagweb1htm name=Pagweb1gtltFRAMEsrc=Pagweb2htm name=Pagweb2gtltFRAMEsrc=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 15: Programacion web   lenguaje html

Lenguaje HTML copy Grupo EIDOS

18

oacute ampoacute Oacute ampOacute Uuml ampUuml

uacute ampuacute Uacute ampUacute iquest amp191

iexcl amp161

Tabla 4

Para los navegadores actuales podemos escribir nuestro coacutedigo HTML de manera directa sin tener en cuenta estos coacutedigos pero nunca podemos asegurar que las personas que accedan a nuestras paacuteginas con otros navegadores puedan leerlas correctamente Asiacute que los maacutes adecuado es el empleo de los mismos Otros siacutembolos especiales aparecen en la Tabla 5

Siacutembolo Coacutedigo

Ccedil ampccedil

Ccedil ampCcedil

copy ampcopy

reg ampreg

Tabla 5

Veamos un ejemplo en el Coacutedigo fuente 9

ampquotLa inspiraciampoacuten existe pero tiene que encontrarse trabajandoampquotampcopy Pablo Ruampiacutez Picasso

Coacutedigo fuente 9

Esta instruccioacuten HTML deberiacutea producir el siguiente resultado

La inspiracioacuten existe pero tiene que encontrarse trabajando copyPablo Ruiacutez Picasso

Para la inclusioacuten de comentarios en nuestra paacutegina HTML podemos usar la etiqueta lt-- --gt Estos comentarios nos podraacuten servir para efectuar anotaciones en nuestro documento HTML que ayuden a una mayor comprensioacuten del coacutedigo En el Coacutedigo fuente 10 se muestra un ejemplo de comentario

lt-- Esto es un comentario y no seraacute mostrado por el navegador --gt

Coacutedigo fuente 10

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

19

Espaciado y saltos de liacutenea En HTML soacutelo se admite un uacutenico espacio en blanco separando cualquier elemento o texto el resto de espacios seraacuten ignorados por el navegador al igual que las tabulaciones retornos de carro etc Veamos un ejemplo en la Tabla 6

Ejemplo Resultado

Esta frase no se veraacute asiacute en el visor Esta frase no se veraacute asiacute en el visor

Tabla 6

No obstante siacute podremos dar el formato que deseemos a nuestras paacuteginas con el empleo de los siguientes elementos del lenguaje HTML

Inclusioacuten de espacios en blanco ampnbsp Nos permitiraacute la inclusioacuten de maacutes de un espacio en blanco entre dos textos consecutivos de forma que estos espacios se muestren de forma efectiva en el navegador Tendremos que incluir tantas expresiones ampnbsp como espacios en blanco se deseen incluir

Ejemplo Resultado

Texto1ampnbspampnbspampnbspampnbspTexto2 Texto1 Texto2

Tabla 7

Salto de liacutenea ltBRgt BR Break Nos permite dar un salto a la liacutenea siguiente en el punto donde la etiqueta sea insertada

Ejemplo Resultado

Esta frase tiene aquiacuteltBRgt un salto de liacutenea Esta frase tiene aquiacute un salto de liacutenea

Tabla 8

Cambio de paacuterrafo ltPgt P Paragraph Permite definir un paacuterrafo introduciendo normalmente un espacio de separacioacuten de dos liacuteneas con el texto siguiente al punto donde hayamos insertado la etiqueta ltPgt

Lenguaje HTML copy Grupo EIDOS

20

Ejemplo Resultado

Esta frase tiene aquiacuteltPgt un cambio de paacuterrafo Esta frase tiene aquiacute

un cambio de paacuterrafo

Tabla 9

La etiqueta de fin paacuterrafo ltPgt es opcional no siendo necesario incluirla Aunque siempre es recomendable delimitar claramente el inicio y final de un paacuterrafo Ademaacutes cuando usemos esta etiqueta como cerrada ltPgt ltPgt tenemos la posibilidad de incluirle el atributo align el cual indica al navegador la forma de justificar el texto incluido en el paacuterrafo El formato seriacutea el siguiente

ltP align= left right center justify gtTexto contenido en elpaacuterrafo ltPgt

Veamos algunos ejemplos en la Tabla 10

Ejemplo Resultado

ltP align=rightgtEste es un ejemplode paacuterrafo alineado a laderechaltPgt

Este es un ejemplo de paacuterrafo alineado a la derecha

ltP align=centergtEste es unejemplo de paacuterrafo centradoltPgt

Este es un ejemplo de paacuterrafo centrado

Tabla 10

Liacutenea Horizontal ltHRgt HR Horizontal Rule Nos permite insertar una liacutenea horizontal cuyo tamantildeo podremos determinar a traveacutes de sus atributos Si no especificamos ninguacuten atributo dibujaraacute una liacutenea que ocupe el ancho de la pantalla del navegador Su utilidad es la de permitirnos dividir nuestra paacutegina en distintas secciones No seraacute necesaria la etiqueta de fin ltHRgt

El formato de la etiqueta con sus posibles atributos es

ltHR align= left right center noshade size=n width=n gt

bull align= left right center Permite establecer la alineacioacuten de la liacutenea a la izquierda a la derecha o centrarla

bull noshade No muestra la sombra de la liacutenea evitando el efecto de tres dimensiones

bull size=n Indica el grosor de la liacutenea en pixels

bull width=n oacute n Especificaraacute el ancho de la liacutenea este se podraacute especificar en pixels (n) o en tanto por ciento del ancho de la ventana (n) Vamos a ver algunos ejemplos en la Tabla 11

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

21

Ejemplo Resultado

ltHRgt

ltHR size=3 noshadegt

ltHR size=5width=50align=rightgt

ltHR size=10width=50align=centergt

Tabla 11

Texto preformateado ltPREgt PRE Preformatted Nos permitiraacute visualizar el texto tal y como se ha escrito respetando los saltos de liacutenea las tabulaciones y espacios en blanco de todo el texto incluido entre las etiquetas ltPREgt y ltPREgt

El texto se mostraraacute con una fuente de espaciado fijo maacutes pequentildea que el texto normal No es recomendable su uso ya que presenta muchas limitaciones y no se obtiene una buena presentacioacuten

Ejemplo Resultado

ltPREgtEste texto estaacutepreformateadoltPREgt

Este texto estaacute preformateado

Tabla 12

Elementos del lenguaje I

Cabeceras y atributos de texto

Cabeceras ltH1gtltH6gt H Heading En un documento HTML podemos incluir seis tipos distintos de cabeceras que van a constituir normalmente el tiacutetulo y los distintos subapartados que forman el documento aunque podremos utilizarlas en el punto que queramos del documento para resaltar cualquier texto Estas cabeceras son definidas por las etiquetas ltH1gtltH2gtltH3gtltH4gtltH5gt y ltH6gt El texto que componga cada cabecera deberaacute estar incluido entre las etiquetas de inicio (ltHngt) y fin (Hn) correspondiente La cabecera ltH1gtseraacute la que muestre el texto de mayor tamantildeo este tamantildeo iraacute disminuyendo hasta llegar a la cabecera ltH6gt Como podemos ver en la Tabla 13 Para alinear las cabeceras utilizamos el atributo align El formato seriacutea ltHn align=centergt como muestra la Tabla 14

Ejemplo Resultado

ltH1gtCabecera 1ltH1gt Cabecera 1 ltH2gtCabecera 2ltH2gt Cabecera 2

Lenguaje HTML copy Grupo EIDOS

24

ltH3gtCabecera 3ltH3gt Cabecera 3

ltH4gtCabecera 4ltH4gt Cabecera 4

ltH5gtCabecera 5ltH5gtCabecera 5

ltH6gtCabecera 6ltH6gtCabecera 6

Tabla 13

Ejemplo Resultado

ltH5 align=centergtCabecera 5ltH5gtCabecera 5

Tabla 14

Atributos del texto Al texto de nuestro documento HTML le podemos aplicar distintos atributos (negrita cursiva subrayado etc) al igual que hacemos cuando trabajamos con el procesador de textos en la edicioacuten de nuestros documentos Para aplicar estos atributos disponemos de distintas etiquetas que aplicaraacuten su efecto al texto incluido entre sus indicadores de inicio y fin Las vemos en la Tabla 15

Atributo Etiqueta Ejemplo Resultado

Negrita ltBgtltBgtltBgtTexto ennegritaltBgt

Texto en negrita

Cursiva ltIgtltIgtltIgtTexto encursivaltIgt

Texto en cursiva

Teletype ltTTgtltTTgtltTTgtTexto en modoteletypeltTTgt

Texto en modoteletype

Subrayado ltUgtltUgt ltUgtTexto subrayadoltUgt Texto subrayado Tachado ltSgtltSgt ltSgtTexto tachadoltSgt Texto tachado

Parpadeo ltBLINKgtltBLINKgtltBLINKgtTextoparpadeandoltBLINKgt

Texto parpadeando

Superiacutendice ltSUPgtltSUPgt ltSUPgtTexto en modosuperiacutendiceltSUPgt

Texto en modo superiacutendice

Subiacutendice ltSUBgtltSUBgtltSUBgtTexto en modosubiacutendiceltSUBgt

Texto en modo subiacutendice

Centrado ltCENTERgtltCENTERgt

ltCENTERgtTextocentradoltCENTERgt

Texto centrado

B Bold I Italic TT Teletype U Underlined S Strike SUP Superscript SUB Subscript

Tabla 15

copy Grupo EIDOS 3 Elementos del lenguaje I

25

Alguna de estas etiquetas no es reconocida por determinados navegadores Asiacute por ejemplo la etiqueta ltBLINKgt (Parpadeo) no es implementada por el Explorer Por lo que seguacuten el explorador que estemos utilizando podremos ver el resultado correctamente o no

Existen otras etiquetas que nos van a servir para especificar de manera diferenciada unidades loacutegicas de nuestro documento HTML tales como citas direcciones de correo etc En algunos casos el formato obtenido con estas etiquetas de estilo loacutegico va a ser el mismo que con las anteriores a las que se les denomina tambieacuten etiquetas de estilo fiacutesico Algunas etiquetas de estilo loacutegico las vemos en la Tabla 16

Etiqueta Ejemplo Resultado

ltSTRONGgtltSTRONGgtltSTRONGgtEspecifica textoresaltado (igualltBgt)ltSTRONGgt

Especifica texto resaltado(igual ltBgt)

ltCITEgtltCITEgtltCITEgtIndica una cita otiacutetulo (igual ltIgt)ltCITEgt

Indica una cita o tiacutetulo (igualltIgt)

ltSTRIKEgtltSTRIKEgtltltSTRIKEgtTexto tachado(igual ltSgt)ltSTRIKEgt

Texto tachado (igual ltSgt)

Tabla 16

Si queremos aplicar efectos maacutes espectaculares a nuestro documento HTML debemos variar el tamantildeo el color y el tipo de letra del texto La etiqueta que nos permite todo esto es ltFONTgtltFONTgt por medio de sus atributos size color y face

ltFONT size=n oacute +- n color=rrggbb oacute name face=nombre defont gt

bull size=n oacute +- n El atributo size nos permite especificar un tamantildeo determinado

para la fuente del texto incluido entre las etiquetas de inicio y fin el cual puede estar entre 1 y 7 El texto de tamantildeo normal equivale a la fuente de tamantildeo 3 (fuente base) Por tanto si especificamos size=+2 el tamantildeo de la fuente seraacute 5 Y si especificamos size= -1 el tamantildeo seraacute 2

Ejemplo Resultado

ltFONT size=2gtTamantildeo 2ltFONTgtTamantildeo 2

ltFONT size=+2gtTamantildeo 5 (3+2)ltFONTgt Tamantildeo 5 (3+2)

ltFONT size=-1gtTamantildeo 2 (3-1)ltFONTgtTamantildeo 2 (3-1)

Tabla 17

bull color=rrggbb oacute name Nos va a permitir definir el color que tendraacute el texto

incluido entre las etiquetas Tabla 18

Lenguaje HTML copy Grupo EIDOS

26

Ejemplo Resultado

ltFONT color=redgtTexto de colorrojoltFONTgt

Texto de color rojo

ltFONT color=bluegtTexto de colorazulltFONTgt

Texto de color azul

ltFONT size=5 color=008000gtTextoverde y de tamantildeo 5ltFONTgt

Texto verde y detamantildeo 5

Tabla 18

bull face=nombre de font Nos va a permitir escribir texto con el tipo de letra que le

especifiquemos En el caso de que el tipo de letra que le hayamos especificado no esteacute cargada en el ordenador que lee la paacutegina se usaraacute el font por defecto del navegador

Ejemplo Resultado

ltFONT face=TahomagtTipo de letraTahomaltFONTgt

Tipo de letra Tahoma

ltFONT size=4 color=blueface=TahomagtTexto azul de tamantildeo4 y TahomaltFONTgt

Texto azul de tamantildeo 4 y Tahoma

Tabla 19

Listas Podemos representar elementos en forma de lista dentro de nuestros documentos de una forma muy sencilla y con una gran versatilidad Estas listas podraacuten incluir cualquiera de los elementos HTML e incluso podemos definir listas anidadas es decir listas dentro de listas HTML nos permite crear tres tipos distintos de listas

bull Listas no numeradas

bull Listas numeradas

bull Listas de definiciones

Listas no numeradas ltULgt UL Unordered List

Con este tipo de listas podemos especificar una serie de elementos sin un orden predeterminado precedidos de una marca o vintildeeta que nosotros mismos podemos definir Para la definicioacuten de los liacutemites de la lista utilizaremos la etiqueta ltULgt ltULgt y para determinar cada uno de los elementos que la componen usaremos la etiqueta ltLIgt El formato es el siguiente

ltUL type=disk oacute circle oacute squaregtltLHgtTiacutetulo de la listaltLHgt

copy Grupo EIDOS 3 Elementos del lenguaje I

27

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltULgtLH List Head LI List Item

Con el atributo type vamos a especificar el tipo de marca o vintildeeta que antecederaacute a cada uno de los elementos de la lista Estas marcas podraacuten ser un disco (disk) un ciacuterculo (circle) o un cuadrado (square) La etiqueta ltLHgt nos va a servir para especificar un posible tiacutetulo de la lista siendo esta opcional Vamos a ver algunos ejemplos en la Tabla 20

Ejemplo Resultado

ltUL type=circlegtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAfricaltLIgtAmeacutericaltLIgtOceaniacutea

ltULgt

Los cinco continentes

Europa

Asia

Aacutefrica

Ameacuterica

Oceaniacutea

ltUL type=squaregtltLIgtEuropaltLIgtAsialtLIgtAfricaltLIgtAmeacutericaltUL type=circle gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltULgtltLIgtOceaniacutea

ltULgt

Europa

Asia

Aacutefrica

Ameacuterica

Ameacuterica del Norte

Ameacuterica del Sur

Oceaniacutea

Tabla 20

Listas numeradas ltOLgt OL Ordered List

Con este tipo de listas podemos especificar una serie de elementos numerados seguacuten el lugar que ocupan en la lista Para la definicioacuten de los liacutemites de la lista utilizaremos la etiqueta ltOLgt ltOLgt y para determinar cada uno de los elementos que la componen usaremos la etiqueta ltLIgt El formato es el siguiente

ltOL start=n type=Tipo de listagtltLHgtTiacutetulo de la listaltLHgt

Lenguaje HTML copy Grupo EIDOS

28

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltOLgt

Con el atributo start vamos a especificar el nuacutemero por el que va a empezar la lista Si no indicamos este argumento la lista empezaraacute a numerarse a partir del 1 Con el atributo type vamos a especificar el tipo de lista numerada Sus posibles valores aparecen a continuacioacuten y veremos algunos ejemplos en la Tabla 21

A Letras mayuacutesculas (A B C )

a Letras minuacutesculas (a b c )

I Nuacutemeros romanos en mayuacutesculas (I II III IV )

i Nuacutemeros romanos en minuacutesculas (i ii iii iv )

1 Numeacutericamente (1 2 3 4 ) (es la numeracioacuten por defecto y por tanto no habriacutea que indicarla)

Ejemplo Resultado

ltOL type=AgtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltLIgtOceaniacutea

ltOLgt

Los cinco continentes

A Europa

B Asia

C Aacutefrica

D Ameacuterica

E Oceaniacutea

ltOL type=I start=2gtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltOL type=i gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltOLgtltLIgtOceaniacutea

ltOLgt

II Europa

III Asia

IV Aacutefrica

V Ameacuterica

i Ameacuterica del Norte

ii Ameacuterica del Sur

VI Oceaniacutea

Tabla 21

copy Grupo EIDOS 3 Elementos del lenguaje I

29

Listas de definiciones ltDLgt DL Definition List

Estas listas nos van a servir para especificar una serie de teacuterminos y sus definiciones correspondientes Para la definicioacuten de la lista usaremos la etiqueta ltDLgt ltDLgt para especificar los teacuterminos usaremos la etiqueta ltDTgt y para especificar la definicioacuten correspondiente a cada teacutermino usaremos la etiqueta ltDDgt El formato es el siguiente

ltDLgtltLHgtTiacutetulo de la listaltLHgtltDTgtTeacutermino 1ltDDgtDefinicioacuten 1ltDTgtTeacutermino 2ltDDgtDefinicioacuten 2

ltDTgtTeacutermino nltDDgtDefinicioacuten n

ltDLgtDT Definition Term DD Definition Description

Vamos a ver un ejemplo en la Tabla 22

Ejemplo Resultado

ltDLgtltDTgtPariacutesltDDgtCapital de FrancialtDTgtRomaltDDgtCapital de ItalialtDTgtMadridltDDgtCapital de Espantildea

ltDLgt

Pariacutes

Capital de Francia

Roma

Capital de Italia

Madrid

Capital de Espantildea

Tabla 22

Hiperenlaces Los hiperenlaces son enlaces de hipertexto que nos van a permitir acceder de manera directa a otros documentos HTML independientemente de su ubicacioacuten o a otras zonas dentro de nuestro propio documento

Enlaces a otras paacuteginas ltA href=gt Con este tipo de hiperenlaces vamos a poder acceder tanto a otras paacuteginas que esteacuten ubicadas dentro de nuestro propio sistema como a paacuteginas ubicadas en puntos muy distantes del globo El formato de este tipo de hiperenlaces es

ltA href=URL a la que se accedegtTexto del hiperenlaceltAgt

Lenguaje HTML copy Grupo EIDOS

30

Con el atributo href vamos a especificar la URL del documento al que se pretende acceder El texto contenido entre las etiquetas de comienzo y fin nos va a servir para definir el hiperenlace por lo que deberiacutea ser clarificador del contenido del documento con el que vamos a enlazar Esta definicioacuten apareceraacute resaltada normalmente en azul y subrayada En la mayoriacutea de los navegadores esta definicioacuten del hiperenlace es sensible por lo que cuando el cursor pasa por encima del mismo este cambia de aspecto indicaacutendolo

Veamos un ejemplo en la Tabla 23

Ejemplo Resultado

ltA href=httpwwweidosesgtPaacutegina inicialde Villa EidosltAgt

Paacutegina inicial de Villa Eidos

Tabla 23

Si situamos el ratoacuten encima del hiperenlace y pulsamos el navegador accederaacute a la paacutegina Web indicada por href es decir accederaacute a la paacutegina situada en httpwwweidoses

Igualmente podriacuteamos indicar el hiperenlace por medio de una imagen Si esta imagen tiene definido un borde este apareceraacute resaltado en color azul El formato correspondiente seriacutea

ltA href=URL a la que se accedegtltIMG src=Imagengt y tambieacutentextoltAgtIMG Image src Source

Veamos un ejemplo en la Tabla 24

Ejemplo Resultado

ltA href=httpwwweidosesgtltIMGsrc=IconogifgtltAgt Villa Eidos Villa Eidos

Tabla 24

Si pulsamos sobre la imagen el navegador accederaacute a la paacutegina Web inicial de Villa Eidos

Enlaces dentro de la misma paacutegina ltA name=gt Este tipo de hiperenlaces nos va a permitir marcar distintas zonas del documento activo con el objeto de tener un acceso directo a las mismas Una buena utilidad de este tipo de enlaces radica en la creacioacuten de iacutendices para documentos largos de forma que si pinchamos en el hiperenlace correspondiente al tiacutetulo de un capiacutetulo determinado el navegador saltaraacute automaacuteticamente hasta el comienzo de dicho capiacutetulo

Para la creacioacuten de estos hiperenlaces debemos seguir dos pasos

copy Grupo EIDOS 3 Elementos del lenguaje I

31

1 Marcar las distintas zonas o secciones del documento Esto lo haremos con el paraacutemetro name

ltA name=Identificador de seccioacutengtTexto de laseccioacutenltAgt

A cada seccioacuten le asignaremos un identificador distinto para poder referenciarlas posteriormente de manera inequiacutevoca

2 Especificar un enlace a cada una de las secciones que hayamos definido ltA href=Identificador de seccioacutengtTexto del enlace a laseccioacutenltAgt

Si pinchamos en este enlace el navegador saltaraacute automaacuteticamente a la seccioacuten correspondiente Veamos un ejemplo sencillito en la Tabla 25 pero demostrativo de todo lo que acabamos de explicar

Ejemplo Resultado

ltA href=Cap1gtCapiacutetulo1ltAgtltA name=Cap1gtCapiacutetulo 1ltAgt

Capiacutetulo 1

Capiacutetulo 1

Tabla 25

Si nos creamos una paacutegina HTML con distintos capiacutetulos podriacuteamos crear una seccioacuten para cada uno de ellos de forma que si pinchamos en el hiperenlace correspondiente al Capiacutetulo 1 el navegador saltariacutea directamente a la seccioacuten correspondiente al Capiacutetulo 1

Ademaacutes de los dos tipos de hiperenlaces vistos podemos crear hiperenlaces que nos permitan acceder a cualquiera de los servicios de Internet Es decir podriacuteamos indicar enlaces a servidores FTP GOPHER NEWS MAILTO etc Para ello tendriacuteamos que indicar la URL correspondiente al servicio al cual queremos acceder como ya vimos en el primer capiacutetulo de este manual

Imaacutegenes

Podremos dar un aspecto mucho maacutes vistoso a nuestros documentos HTML con la inclusioacuten de imaacutegenes Los formatos de imagen que todos los navegadores reconocen son gif y jpg Si queremos insertar una imagen en otro formato el visor deberiacutea disponer del programa externo que permita su visualizacioacuten De todas formas una buena solucioacuten es utilizar alguacuten programa de tratamiento de imaacutegenes que nos convierta la imagen a uno de los formatos mencionados anteriormente

El formato gif es maacutes recomendado para la inclusioacuten de iconos graacuteficas y el formato jpg para el caso de insertar fotografiacuteas en nuestras paacuteginas

Lenguaje HTML copy Grupo EIDOS

32

La etiqueta que nos va a permitir la insercioacuten de imaacutegenes es ltIMGgt La imagen se insertaraacute justo en el punto del documento donde coloquemos dicha etiqueta pudiendo insertar imaacutegenes dentro de listas tablas o formularios

El formato de la etiqueta con sus posibles argumentos es el siguiente

ltIMG src=URL de la imagen alt=Texto alternativoalign=topmiddlebottonleftrigth border=Tamantildeoheight=Tamantildeo width=Tamantildeo hspace=margen vspace=margengt

bull src=URL de la imagen El atributo src nos va servir para indicar la URL de la imagen que

queremos insertar es decir el servidor y camino hasta llegar al fichero de la imagen

No seraacute necesario que la imagen que queremos insertar en nuestro documento esteacute en el ordenador local aunque siacute es recomendable ya que el acceso a las mismas puede ser maacutes lento

Por tanto es una buena praacutectica copiar todas las imaacutegenes que vayamos a incluir en nuestro documento HTML al ordenador local

Tabla 26

bull alt=Texto alternativo Nos va a permitir mostrar un texto alternativo para el caso en que el

navegador no sea capaz de mostrar la imagen Su uso es muy recomendable ya que cuando publiquemos nuestras paacuteginas en la WWW no sabremos desde queacute tipo de navegadores accederaacuten los internautas a nuestras paacuteginas

En la Tabla 27 vamos a ver un ejemplo

Si usas un navegador que no tiene ninguacuten problema para la visualizacioacuten de imaacutegenes desactiva temporalmente la opcioacuten de mostrar imaacutegenes prueba el ejemplo que muestra la Tabla 27 y compaacuteralo con el anterior

Tabla 27

copy Grupo EIDOS 3 Elementos del lenguaje I

33

bull align=topmiddlebotton leftrigth Nos permite indicar coacutemo se alinearaacute el texto que siga a la imagen

top alinea el texto con la parte superior de la imagen

middle con la parte central

bottom con la parte inferior

left imagen alineada a la izquierda de la paacutegina

rigth imagen alineada a la derecha de la paacutegina

Tabla 28

En el caso de que el texto que acompantildea a la imagen tenga maacutes de una liacutenea tan soacutelo la primera seraacute la que se alinearaacute seguacuten alguna de las anteriores alineaciones el resto de liacuteneas se incluiraacuten debajo de la imagen quedando un efecto bastante feo

Para solventar esto estaacuten las alineaciones LEFT (imagen alineada a la izquierda de la paacutegina) y RIGHT (imagen alineada a la derecha de la paacutegina) Las cuales permiten que la imagen se inserte dentro del paacuterrafo que la rodea produciendo un resultado mucho maacutes profesional en la integracioacuten de texto e imaacutegenes

Estas dos alineaciones no se podraacuten usar en combinacioacuten con las anteriores Veamos algunos ejemplos en la Tabla 29

Vemos como en el primer ejemplo la segunda liacutenea de texto aparece debajo de la imagen produciendo un efecto menos vistoso que en los dos ejemplos siguientes

Lenguaje HTML copy Grupo EIDOS

34

Tabla 29

bull border=Tamantildeo Permite antildeadirle un borde a la imagen del tamantildeo que le

especifiquemos

Si la imagen forma parte de un hiperenlace esta apareceraacute con un borde del color del hiperenlace Si no deseaacuteramos que aparezca este borde tendriacuteamos que especificar border=0

Tabla 30

bull height=Tamantildeo Permite especificar el alto de la imagen en puntos de pantalla

(pixels) o en del tamantildeo del documento

bull width=Tamantildeo Con este argumento especificaremos el ancho al que mostraremos la imagen en puntos de pantalla (pixels) o en del tamantildeo del documento

En el segundo de los ejemplos de la Tabla 31 el ancho de la imagen se ha extendido al 50 del total del ancho de la celda donde estaacute contenida la imagen Si pruebas este ejemplo en tu documento HTML la imagen se extenderaacute horizontalmente hasta ocupar el 50 del ancho de la paacutegina

copy Grupo EIDOS 3 Elementos del lenguaje I

35

Tabla 31

bull hspace=Margen hspace Horizontal Space Permite especificar el nuacutemero de espacios

horizontales (en puntos) que separaraacuten a la imagen de cualquier elemento que le siga o le anteceda

bull vspace=Margen vspace Vertical Space Con este argumento especificaremos el margen vertical (en puntos) que habraacute entre la imagen y cualquier otro elemento de nuestro documento

Tabla 32

Elementos del lenguaje II

Tablas HTML nos va a permitir la inclusioacuten de cualquiera de los elementos de nuestra paacutegina (texto imaacutegenes hiperenlaces listas etc) dentro de una tabla Gracias a lo cual conseguiremos dar una mayor y mejor estructuracioacuten a los contenidos de nuestros documentos Ademaacutes la definicioacuten de las tablas en HTML es muy abierta pudiendo en cualquier momento redimensionar la tabla es decir cambiar su nuacutemero de filas o de columnas cambiar el tamantildeo de alguna de sus celdas etc

La etiqueta que nos va a permitir la definicioacuten de tablas es ltTABLEgt ltTABLEgt

El formato general de la etiqueta sin ninguacuten argumento es el siguiente

ltTABLEgtltTR gt

ltTHgtContenido de la celda ltTHgtltTDgtContenido de la celda ltTDgt

ltTRgtltTABLEgt

TR Table Row TH Table Header TD Table Data

Vamos a analizar cada una de estas etiquetas de forma separada

1 ltTABLEgt ltTABLEgt Definicioacuten general de la tabla Dentro de ella definiremos las filas y columnas que la constituyen pudiendo incluso definir tablas dentro de tablas es decir tablas anidadas

Lenguaje HTML copy Grupo EIDOS

38

2 ltTRgt ltTRgt Definicioacuten de las filas de la tabla Por cada etiqueta ltTRgt que incluyamos se crearaacute una fila en la tabla No seraacute necesario indicar la etiqueta de cierre

3 ltTHgtltTHgt oacute ltTDgtltTDgt Definicioacuten de cada una de las celdas de la tabla Vemos que estas etiquetas estaacuten contenidas dentro de otra etiqueta de definicioacuten de fila de forma que por cada etiqueta ltTHgt o ltTDgt que incluyamos se crearaacute una celda dentro de la fila correspondiente La etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera es decir celdas cuyo contenido estaacute resaltado en negrita dejando la etiqueta ltTDgt para definir celdas de datos En este caso tampoco es necesario indicar las etiquetas de cierre

Todas estas etiquetas tienen sus respectivos argumentos Pero antes de analizar cada uno de ellos vamos a ver un ejemplo muy sencillito en la Tabla 33 que nos crearaacute una tabla de una sola celda (1 fila X 1 columna = 1 celda) Para ello usaremos la etiqueta de creacioacuten de tabla ltTABLEgt con el argumento border=1 (nos dibuja un borde de tamantildeo 1 alrededor de la tabla)

Ejemplo Resultado

ltTABLE border=1gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 33

Vamos ahora a analizar lo distintos argumentos que componen las etiquetas de la tabla analizaacutendolos desde lo general (la definicioacuten de la tabla) hasta lo especiacutefico (la definicioacuten de las celdas)

1 Definicioacuten de la tabla ltTABLEgt

ltTABLE border=n cellpadding=n cellspacing=n width=n oacute height=n oacute bgcolor=rrggbb oacute nombre gt

Contenido ltTABLEgt

bull border=n Si especificamos este argumento se dibujaraacute un borde alrededor de la

tabla del ancho que le indiquemos como muestra la Tabla 34

Ejemplo Resultado

Mi primera tabla ltTABLE border=4gtltTRgtltTDgtMi primera tablaltTABLEgt

Tabla 34

bull cellpadding=n Indica el espacio en puntos que separa el contenido de la celda con

el borde de la misma siendo 1 por defecto

copy Grupo EIDOS 4 Elementos del lenguaje II

39

Ejemplo Resultado

ltTABLE border=4 cellpadding=8gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 35

bull cellspacing=n Indica el espacio en puntos que separa a las celdas contenidas dentro de la tabla siendo 2 por defecto

bull width=n oacute Indica la anchura de la tabla en puntos o en en funcioacuten del ancho de la ventana del visualizador Si no indicamos este argumento el ancho de la tabla se ajustaraacute al tamantildeo del contenido de las celdas Esto es lo que ha ocurrido en el uacuteltimo ejemplo que hemos realizado Veamos un ejemplo en el Coacutedigo fuente 11 El resultado se muestra en la Tabla 36

ltTABLE border=4 width=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 11

Mi primera tabla

Tabla 36

bull height=n oacute Nos permite definir la altura de la tabla en puntos o en de la

altura de la ventana del visualizador Si indicamos este argumento lo recomendable es darlo en puntos ya que es maacutes complicado adecuarnos a la altura de la ventana del visualizador Al igual que en el caso anterior si no especificamos este argumento la altura se adecuaraacute al contenido de las celdas El Coacutedigo fuente 12 muestra un ejemplo y la Tabla 37 nos muestra el resultado

ltTABLE border=4 width=50 height=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 12

Mi primera tabla

Tabla 37

bull bgcolor= rrggbb o nombre del color Nos permite definir un color

de fondo para todas las celdas de la tabla Maacutes adelante veremos como podemos definir colores especiacuteficos para cada una de las celdas por separado

Lenguaje HTML copy Grupo EIDOS

40

Ejemplo Resultado

ltTABLE border=4 bgcolor=yellowgtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 38

2 Definicioacuten de las filas de la tabla ltTRgt

ltTR align=leftrightcenter valign=topmiddlebottombgcolor=rrggbb oacute nombregt

Antes de empezar a descifrar el significado de cada uno de los argumentos de esta etiqueta vamos a ver un ejemplo en la Tabla 39 de coacutemo se construiriacutea una tabla con dos filas (2 filas X 1 columna = 2 celdas)

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR gtltTDgtPrimera filaltTRgtltTDgtSegunda filaltTABLEgt

Segunda fila

Tabla 39

bull align=leftrightcenter Con este argumento vamos a indicar la alineacioacuten

horizontal (leftizquierda rightderecha centercentrado) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado Veamos un ejemplo en el Coacutedigo fuente 13 y su correspondiente resultado en la Tabla 40

ltTABLE border=4 width=50 gt ltTRgtltTDgtPrimera filaltTRalign=rightgtltTDgtSegunda filaltTABLEgt

Coacutedigo fuente 13

Primera fila

Segunda fila

Tabla 40

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten

vertical (toparriba middlecentrado bottomabajo) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado

copy Grupo EIDOS 4 Elementos del lenguaje II

41

bull bgcolor= rrggbb o nombre del color En este caso este argumento nos permitiraacute definir un color de fondo para todas las celdas de una fila veamos un ejemplo en la

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR bgcolor=yellowgtltTDgtPrimera

filaltTR bgcolor=greengtltTDgtSegunda

filaltTABLEgt

Segunda fila

Tabla 41

3 Definicioacuten de las celdas de la tabla ltTHgt oacute ltTDgt

ltTH oacute TD align=leftrightcenterjustifyvalign=topmiddlebottom bgcolor=rrggbb oacute nombre width=nrowspan=n colspan=ngt

Como ya explicamos anteriormente la etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera y la etiqueta ltTDgt para la creacioacuten de celdas de datos Vamos a completar nuestro ejemplo inicial antildeadieacutendole tres filas de dos celdas cada una (3 filas X 2 columnas = 6 celdas) Tabla 42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTDgtCelda 21ltTDgtCelda 22

ltTABLEgt Celda 21 Celda 22

Tabla 42

bull align=leftrightcenterjustify Con este argumento vamos a indicar la

alineacioacuten horizontal (left izquierda right derecha center centrado justifyjustificado) del contenido de cada celda por separado Su significado es el mismo que en la etiqueta ltTRgt

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten vertical (toparriba middlecentrado bottomabajo) del contenido de cada celda

bull bgcolor= rrggbb o nombre del color En este caso podremos definir un color de fondo para cada una de las celdas de manera independiente

bull width=n oacute Indica el ancho de la celda en puntos o en en funcioacuten del tamantildeo de la tabla

Lenguaje HTML copy Grupo EIDOS

42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera

1ltTHgtCabecera 2ltTR gtltTD align=rightgtCelda

11ltTD bgcolor=redgtCelda 12ltTRgtltTD

bgcolor=yellowgtCelda 21ltTDalign=centergtCelda 22ltTABLEgt

Celda 21 Celda 22

Tabla 43

bull rowspan=n Con este argumento podemos lograr que una celda concreta abarque maacutes de una fila ya sabemos que por defecto una celda ocupa una sola fila

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTD rowspan=2gtCelda

11ltTDgtCelda 12ltTRgtltTDgtCelda 22

ltTABLEgt

Celda 11 Celda 22

Tabla 44

bull colspan=n Con este argumento podemos lograr que una celda se expanda a maacutes

de una columna

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTD colspan=2

align=centergtCelda 22ltTABLEgt

Celda 22

Tabla 45

Para finalizar este tema sobre la creacioacuten de tablas vamos a ver el ejemplo que aparece en el Coacutedigo fuente 14 y su resultado en la Tabla 46

ltTABLE border=4gtltTR gtltTH colspan=3 bgcolor=redgtTiacutetuloltTR bgcolor=yellowgtltTHgtCabecera 1ltTHgtCabecera 2ltTHgtCabecera 3

copy Grupo EIDOS 4 Elementos del lenguaje II

43

ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTDgtCelda 13ltTRgtltTD rowspan=2gtCelda 21ltTD bgcolor=greengtCelda 22ltTDgtCelda 23ltTRgtltTDgtCelda 32ltTDgtCelda 33

ltTABLEgt

Coacutedigo fuente 14

Tiacutetulo

Cabecera 1 Cabecera 2 Cabecera 3

Celda 11 Celda 12 Celda 13

Celda 22 Celda 23 Celda 21

Celda 32 Celda 33

Tabla 46

Formularios El formulario es el elemento de HTML que nos va a permitir interactuar con los visitantes de nuestras paacuteginas web de forma que podemos solicitarle informacioacuten al usuario y procesarla De esta forma podremos crear en nuestras paacuteginas encuestas para solicitar la opinioacuten del visitante sobre alguacuten tema e incluso sobre el contenido de nuestra propia paacutegina web cuestionarios para evaluar la asimilacioacuten de contenidos sobre un tema concreto que se trate en la paacutegina etc

El contenido de la informacioacuten introducida por medio del formulario seraacute enviado a la direccioacuten URL donde resida el programa que se encargaraacute de procesar los datos A este tipo de programas externos se les denomina programas CGI (Common Gateway Interface)

La etiqueta HTML que nos va a permitir la creacioacuten de formularios es ltFORMgt Su formato es el siguiente

ltFORM action=URL del programa que trata el formulariomethod=postgetgt Elementos del formulario ltFORMgt

bull action=URL del programa que trata el formulario A traveacutes de este

argumento indicaremos como ya hemos mencionado la direccioacuten del fichero de programa que va a tratar la informacioacuten suministrada por el formulario

Tambieacuten podriacuteamos incluir como URL que trata el formulario una direccioacuten de correo electroacutenico Por tanto el valor de este argumento podriacutea ser action =mailto direccioacuten de correo

Nota Esta opcioacuten soacutelo funciona adecuadamente con el navegador Netscape Con el Explorer este enviacuteo dariacutea como resultado un correo en blanco Para que esta opcioacuten funcione de manera independiente del navegador que se esteacute utilizando se ha de emplear un programa externo que realice este proceso

Lenguaje HTML copy Grupo EIDOS

44

bull method=postget A traveacutes de este argumento indicaremos el meacutetodo empleado para transferir la informacioacuten generada por el formulario

Si indicamos post se produciraacute la modificacioacuten del documento destino como es el caso de enviar la informacioacuten a una direccioacuten de correo electroacutenico Mediante el meacutetodo get no se produciraacuten cambios en el documento destino

Dentro de un formulario podremos incluir cualquier texto o instruccioacuten HTML de las vistas a lo largo de los capiacutetulos anteriores ademaacutes claro estaacute de los elementos tiacutepicos de un formulario cajas de texto botones de seleccioacuten menuacutes de opciones etc Vamos a ver coacutemo se incluiraacuten estos elementos en un formulario

Entrada baacutesica de datos Para definir los distintos tipos de campos baacutesicos de entrada de datos usaremos la etiqueta ltINPUTgt

El formato es el siguiente

ltINPUT type= text password checkbox radio hidden submit image reset name=Variable value=Valor inicialgt

bull El argumento type determinaraacute el tipo de campo de entrada que estamos insertando A

continuacioacuten describiremos cada uno de ellos

bull El argumento name especifica el nombre de la variable que tomaraacute el valor introducido en el campo

bull El argumento value especifica el valor por defecto que tendraacute el campo

Vamos a continuacioacuten a describir los distintos tipos campos de entrada que vendraacuten dados por los valores del argumento type

Texto corto type=text

Con este argumento vamos a indicar que el campo a introducir seraacute un texto El formato seriacutea

ltINPUT type= text name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los nuevos atributos es

bull size=Tamantildeo Indicaremos el tamantildeo en caracteres de la ventana de introduccioacuten de texto

bull maxlength=Longitud maacutexima Indicaremos el nuacutemero maacuteximo de caracteres a introducir en el campo

Vamos a ver un ejemplo en la Tabla 47

copy Grupo EIDOS 4 Elementos del lenguaje II

45

Ejemplo Resultado

NombreltINPUT type=text name=Var1Value=Texto por defecto size=20 maxlength=25gt

Tabla 47

Claves type=password

Con este argumento indicamos que el campo a introducir seraacute una palabra clave por lo que los caracteres que se introduzcan seraacuten sustituidos por asteriscos en la visualizacioacuten por pantalla El formato es

ltINPUT type= password name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los distintos argumentos es el mismo que en el caso anterior Veamos un ejemplo en la Tabla 48

Ejemplo Resultado

ClaveltINPUT type=password name=Var2Value=tutankamon size=11 maxlength=10gt

Tabla 48

Botones de seleccioacuten type=checkbox

El checkbox es un botoacuten que presenta dos estados marcado (1) y desmarcado (0) Podremos variar su estado simplemente pinchando con el ratoacuten El formato es

ltINPUT type= checkbox name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto

Si incluimos el argumento value cuando el botoacuten esteacute marcado su variable asociada adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 49

Ejemplo Resultado

ltINPUT type=checkbox name=Var3 value=Op1 checkedgtOpcioacuten1 ltbrgtltINPUT type=checkbox name=Var4 value=Op2gt Opcioacuten 2

Tabla 49

Lenguaje HTML copy Grupo EIDOS

46

Seleccioacuten entre varias opciones type=radio

Este argumento se usa cuando hay que hacer una seleccioacuten entre varias alternativas excluyentes pudieacutendose seleccionar uacutenicamente una de las alternativas Debemos incluir una etiqueta radio por cada una de las posibles alternativas El formato es

ltINPUT type= radio name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto En este caso uacutenicamente uno de los botones de radio podraacute aparecer marcado ya que se usa para el caso de opciones excluyentes

Cuando un botoacuten esteacute seleccionado la variable asociada a la lista de botones adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 50

Ejemplo Resultado

ltINPUT type=radio name=Var5 value=Op1gtOpcioacuten1 ltbrgtltINPUT type=radio name=Var5 value=Op2checkedgt Opcioacuten 2 ltbrgtltINPUT type=radio name=Var5 value=Op3 gtOpcioacuten 3

Tabla 50

En este ejemplo la variable Var5 tendraacute el valor Op2

Campos ocultos type=hidden

Este tipo de campos no son visibles para el usuario Su uso tiene sentido en el caso de enviar alguacuten tipo de informacioacuten que no deba ser visualizada o variada por el lector de nuestra paacutegina Web El formato es

ltINPUT type= hidden name=Variable value=Valor gt

Con esta etiqueta asignariacuteamos a la Variable referenciada por name el Valor de value y se mandariacutea junto con el formulario sin que el usuario de la paacutegina se entere de nada Veamos un ejemplo en el Coacutedigo fuente 15

ltINPUT type=hidden name=Var6 value=tutankamongt

Coacutedigo fuente 15

copy Grupo EIDOS 4 Elementos del lenguaje II

47

Botoacuten de enviacuteo de datos type=submit

Con este argumento especificamos un botoacuten en el que al pulsar los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario El formato es

ltINPUT type= submit value=Mensaje a mostrargt

En este caso el paraacutemetro value indica el mensaje que se mostraraacute en el botoacuten Veamos un ejemplo en la Tabla 51

Ejemplo Resultado

ltINPUT type=submit value=Enviar los Datosgt

Tabla 51

Botoacuten graacutefico de enviacuteo de datos type=image

Con este argumento especificamos un botoacuten de tipo imagen en el que al igual que con el botoacuten anterior si pulsamos en la imagen los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario Su formato es el siguiente

ltINPUT type= image src=URL de la imagen name=Variablegt

Con el paraacutemetro src especificamos la URL de la imagen que seraacute insertada en el botoacuten En este caso en la variable referenciada por name se almacenaraacuten las coordenadas del punto de la imagen donde se halla pinchado (de forma que estas coordenadas podriacutean ser procesadas por el programa que recibe los datos del formulario)

Botoacuten de borrado de datos type=reset

Con este argumento especificamos un botoacuten que al ser pulsado borraraacute el contenido actual de todos los campos dejaacutendolos con sus valores por defecto Su formato es

ltINPUT type= reset value=Texto del botoacutengt

Con el paraacutemetro value especificamos el texto que etiquetaraacute al botoacuten

Ejemplo Resultado

ltINPUT type=reset value=Borrar datosgt

Tabla 52

Lenguaje HTML copy Grupo EIDOS

48

Entrada datos en muacuteltiples liacuteneas En un formulario tambieacuten podremos introducir un campo de texto que abarque varias liacuteneas Para ello usaremos la etiqueta ltTEXTAREAgt ltTEXTAREAgt Su formato es el siguiente

ltTEXTAREA name=Variable rows=Filas cols=ColumnasgtContenido por defectoltTEXTAREAgt

Los argumentos rows y cols nos van a permitir especificar respectivamente el nuacutemero de filas de texto visibles y el nuacutemero de columnas de texto visibles en el campo

Ejemplo Resultado

ltTEXTAREA name=Var7 rows=5 cols=40gtContenido por defectoltTEXTAREAgt

Tabla 53

Entrada de datos a traveacutes de campos de seleccioacuten Con los campos de seleccioacuten podremos desplegar una lista de opciones entre las que podremos seleccionar una Para ello usaremos la etiqueta ltSELECTgt ltSELECTgt Su formato es el siguiente

ltSELECT name=Variable multiple size=ngtltOPTION selected value=Valor_1gtPrimera OpcioacutenltOPTION value=Valor_2gtSegunda Opcioacuten

ltOPTION value=Valor_ngtEneacutesima Opcioacuten

ltSELECTgt

Figura 1

bull La variable referenciada por name tomaraacute el valor(value) de la opcioacuten seleccionada

bull Si especificamos el argumento muacuteltiple se mostraraacuten todas la opciones en forma de tabla El nuacutemero de opciones visibles en la tabla vendraacute dado por el argumento size

copy Grupo EIDOS 4 Elementos del lenguaje II

49

bull Con la etiqueta ltOPTIONgt iremos definiendo cada una de las opciones de la lista

bull El argumento selected va a determinar cuaacutel es la opcioacuten por defecto

Para finalizar vamos a ver el Coacutedigo fuente 16 correspondiente a una encuesta realizada por la editorial ficticia EditoPc y en la Figura 2 observamos el resultado del formulario

ltP align=centergtltBgtEDITORIAL ltIgtEditoPcltIgtltBgtltPgtltFORM action=mailtodireccionejemplo method = postgtNombreltINPUT type=text size=30 name=nombregtltBRgtE_mail ltINPUT type=text size=30 name=e_mailgtltPgtDeseas recibir informacioacuten sobreltINPUT type=checkbox name=infor1 value=InternetgtInternetltINPUT type=checkbox name=infor2 value=ProgramacioacutengtProgramacioacutenltINPUT type=checkbox name=infor3 value=SistOperativogtSistOperativoltINPUT type=checkbox name=infor4 value=OfimaacuteticagtOfimaacuteticaltPgtiquestTe conectas a Internet desde casa ltbrgtltINPUT type=radio name=intercasa value=sigtSiacuteltINPUT type=radio name=intercasa value=nogtNoltPgtiquestQueacute uso le das a tu ordenador ltBRgtltSELECT name=uso multiple size=3gtltOPTION selectedgtProfesionalltOPTIONgtDomeacutesticoltOPTIONgtOcioJuegosltSELECTgtltPgtCaracteriacutesticas de tu PCltBRgtltTEXTAREA name=caract rows=5 cols=40gtltTEXTAREAgtltPgtltINPUT type=submit value=Enviar datosgt ltINPUT type=reset value=Borrardatosgt

Coacutedigo fuente 16

Figura 2

Elementos del lenguaje III

Frames Las frames son una utilidad del HTML que nos permite dividir la ventana del navegador en diferentes subventanas que podraacuten ser manipuladas de manera independiente Esto nos permitiraacute mostrar una paacutegina web diferente en cada una de la subventanas o frames

Estructura de un documento con frames Un documento con frames se estructura de manera diferente a un documento HTML normal Asiacute en este tipo de documentos no apareceraacute la etiqueta ltBODYgt En su lugar se incluiraacute la etiqueta ltFRAMESETgt ltFRAMESETgt dentro de la cual se definiraacuten las distintas frames que se incluyan en el documento

La estructura general de un documento de este tipo seriacutea por tanto

ltHTMLgtltHEADgtCabeceraltHEADgtltFRAMESETgt

Definicioacuten de la distintas framesltFRAMESETgtltNOFRAMESgt

Instrucciones HTMLltNOFRAMESgt

ltHTMLgt

Lenguaje HTML copy Grupo EIDOS

52

Puede darse el caso de que programemos nuestro documento con frames siguiendo la estructura anterior y que el navegador que se use para leer el documento no soporte la caracteriacutestica de frames con lo cual no se mostraraacute nada de lo indicado entre las etiquetas ltFRAMESETgt y ltFRAMESETgtPara solucionar este problema todas las instrucciones HTML incluidas entre las etiquetas ltNOFRAMESgt y ltNOFRAMESgt seraacuten ejecutadas por los navegadores que no soportan las frames

La sintaxis de la etiqueta ltFRAMESETgt es

ltFRAMESET rows=Lista de filas cols=Lista de columnasgtltFRAME src=URL de la frame 1 name=Nombre de la frame 1gtltFRAME src=URL de la frame 2 name=Nombre de la frame 2gt

ltFRAME src=URL de la frame n name=Nombre de la frame ngt

ltFRAMESETgt

Como vemos por cada una de la frames que incluyamos en nuestro documento debemos incluir una etiqueta ltFRAMEgt indicando mediante sus argumentos la direccioacuten URL del documento que se insertaraacute en la subventana (src) y el nombre de la frame (name) Posteriormente describiremos la etiqueta ltFRAMEgt con maacutes detalle

Los argumentos de ltFRAMESETgt son rows y cols definieacutendose uacutenicamente uno de los dos atributos en funcioacuten de si la divisioacuten de la pantalla se realizaraacute por filas (rows) o por columnas (cols)

Por cada una de las subventanas que creemos debemos especificar su tamantildeo en puntos o en porcentaje del tamantildeo de cada subventana Asiacute por ejemplo si especificamos rows= 50 2525 crearemos tres subventanas horizontales ocupando la primera el 50 de la ventana principal y las otras dos el resto Si especificamos cols=100150 crearemos tres subventanas verticales ocupando la primera 100 puntos de la ventana principal la segunda 150 puntos y tercera el espacio restante

Vamos a verlo maacutes claramente con un par de ejemplos praacutecticos que vemos en la Tabla 54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 502525gt ltFRAMEsrc=Pagweb1htm name=Pagweb1gtltFRAMEsrc=Pagweb2htm name=Pagweb2gtltFRAMEsrc=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 16: Programacion web   lenguaje html

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

19

Espaciado y saltos de liacutenea En HTML soacutelo se admite un uacutenico espacio en blanco separando cualquier elemento o texto el resto de espacios seraacuten ignorados por el navegador al igual que las tabulaciones retornos de carro etc Veamos un ejemplo en la Tabla 6

Ejemplo Resultado

Esta frase no se veraacute asiacute en el visor Esta frase no se veraacute asiacute en el visor

Tabla 6

No obstante siacute podremos dar el formato que deseemos a nuestras paacuteginas con el empleo de los siguientes elementos del lenguaje HTML

Inclusioacuten de espacios en blanco ampnbsp Nos permitiraacute la inclusioacuten de maacutes de un espacio en blanco entre dos textos consecutivos de forma que estos espacios se muestren de forma efectiva en el navegador Tendremos que incluir tantas expresiones ampnbsp como espacios en blanco se deseen incluir

Ejemplo Resultado

Texto1ampnbspampnbspampnbspampnbspTexto2 Texto1 Texto2

Tabla 7

Salto de liacutenea ltBRgt BR Break Nos permite dar un salto a la liacutenea siguiente en el punto donde la etiqueta sea insertada

Ejemplo Resultado

Esta frase tiene aquiacuteltBRgt un salto de liacutenea Esta frase tiene aquiacute un salto de liacutenea

Tabla 8

Cambio de paacuterrafo ltPgt P Paragraph Permite definir un paacuterrafo introduciendo normalmente un espacio de separacioacuten de dos liacuteneas con el texto siguiente al punto donde hayamos insertado la etiqueta ltPgt

Lenguaje HTML copy Grupo EIDOS

20

Ejemplo Resultado

Esta frase tiene aquiacuteltPgt un cambio de paacuterrafo Esta frase tiene aquiacute

un cambio de paacuterrafo

Tabla 9

La etiqueta de fin paacuterrafo ltPgt es opcional no siendo necesario incluirla Aunque siempre es recomendable delimitar claramente el inicio y final de un paacuterrafo Ademaacutes cuando usemos esta etiqueta como cerrada ltPgt ltPgt tenemos la posibilidad de incluirle el atributo align el cual indica al navegador la forma de justificar el texto incluido en el paacuterrafo El formato seriacutea el siguiente

ltP align= left right center justify gtTexto contenido en elpaacuterrafo ltPgt

Veamos algunos ejemplos en la Tabla 10

Ejemplo Resultado

ltP align=rightgtEste es un ejemplode paacuterrafo alineado a laderechaltPgt

Este es un ejemplo de paacuterrafo alineado a la derecha

ltP align=centergtEste es unejemplo de paacuterrafo centradoltPgt

Este es un ejemplo de paacuterrafo centrado

Tabla 10

Liacutenea Horizontal ltHRgt HR Horizontal Rule Nos permite insertar una liacutenea horizontal cuyo tamantildeo podremos determinar a traveacutes de sus atributos Si no especificamos ninguacuten atributo dibujaraacute una liacutenea que ocupe el ancho de la pantalla del navegador Su utilidad es la de permitirnos dividir nuestra paacutegina en distintas secciones No seraacute necesaria la etiqueta de fin ltHRgt

El formato de la etiqueta con sus posibles atributos es

ltHR align= left right center noshade size=n width=n gt

bull align= left right center Permite establecer la alineacioacuten de la liacutenea a la izquierda a la derecha o centrarla

bull noshade No muestra la sombra de la liacutenea evitando el efecto de tres dimensiones

bull size=n Indica el grosor de la liacutenea en pixels

bull width=n oacute n Especificaraacute el ancho de la liacutenea este se podraacute especificar en pixels (n) o en tanto por ciento del ancho de la ventana (n) Vamos a ver algunos ejemplos en la Tabla 11

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

21

Ejemplo Resultado

ltHRgt

ltHR size=3 noshadegt

ltHR size=5width=50align=rightgt

ltHR size=10width=50align=centergt

Tabla 11

Texto preformateado ltPREgt PRE Preformatted Nos permitiraacute visualizar el texto tal y como se ha escrito respetando los saltos de liacutenea las tabulaciones y espacios en blanco de todo el texto incluido entre las etiquetas ltPREgt y ltPREgt

El texto se mostraraacute con una fuente de espaciado fijo maacutes pequentildea que el texto normal No es recomendable su uso ya que presenta muchas limitaciones y no se obtiene una buena presentacioacuten

Ejemplo Resultado

ltPREgtEste texto estaacutepreformateadoltPREgt

Este texto estaacute preformateado

Tabla 12

Elementos del lenguaje I

Cabeceras y atributos de texto

Cabeceras ltH1gtltH6gt H Heading En un documento HTML podemos incluir seis tipos distintos de cabeceras que van a constituir normalmente el tiacutetulo y los distintos subapartados que forman el documento aunque podremos utilizarlas en el punto que queramos del documento para resaltar cualquier texto Estas cabeceras son definidas por las etiquetas ltH1gtltH2gtltH3gtltH4gtltH5gt y ltH6gt El texto que componga cada cabecera deberaacute estar incluido entre las etiquetas de inicio (ltHngt) y fin (Hn) correspondiente La cabecera ltH1gtseraacute la que muestre el texto de mayor tamantildeo este tamantildeo iraacute disminuyendo hasta llegar a la cabecera ltH6gt Como podemos ver en la Tabla 13 Para alinear las cabeceras utilizamos el atributo align El formato seriacutea ltHn align=centergt como muestra la Tabla 14

Ejemplo Resultado

ltH1gtCabecera 1ltH1gt Cabecera 1 ltH2gtCabecera 2ltH2gt Cabecera 2

Lenguaje HTML copy Grupo EIDOS

24

ltH3gtCabecera 3ltH3gt Cabecera 3

ltH4gtCabecera 4ltH4gt Cabecera 4

ltH5gtCabecera 5ltH5gtCabecera 5

ltH6gtCabecera 6ltH6gtCabecera 6

Tabla 13

Ejemplo Resultado

ltH5 align=centergtCabecera 5ltH5gtCabecera 5

Tabla 14

Atributos del texto Al texto de nuestro documento HTML le podemos aplicar distintos atributos (negrita cursiva subrayado etc) al igual que hacemos cuando trabajamos con el procesador de textos en la edicioacuten de nuestros documentos Para aplicar estos atributos disponemos de distintas etiquetas que aplicaraacuten su efecto al texto incluido entre sus indicadores de inicio y fin Las vemos en la Tabla 15

Atributo Etiqueta Ejemplo Resultado

Negrita ltBgtltBgtltBgtTexto ennegritaltBgt

Texto en negrita

Cursiva ltIgtltIgtltIgtTexto encursivaltIgt

Texto en cursiva

Teletype ltTTgtltTTgtltTTgtTexto en modoteletypeltTTgt

Texto en modoteletype

Subrayado ltUgtltUgt ltUgtTexto subrayadoltUgt Texto subrayado Tachado ltSgtltSgt ltSgtTexto tachadoltSgt Texto tachado

Parpadeo ltBLINKgtltBLINKgtltBLINKgtTextoparpadeandoltBLINKgt

Texto parpadeando

Superiacutendice ltSUPgtltSUPgt ltSUPgtTexto en modosuperiacutendiceltSUPgt

Texto en modo superiacutendice

Subiacutendice ltSUBgtltSUBgtltSUBgtTexto en modosubiacutendiceltSUBgt

Texto en modo subiacutendice

Centrado ltCENTERgtltCENTERgt

ltCENTERgtTextocentradoltCENTERgt

Texto centrado

B Bold I Italic TT Teletype U Underlined S Strike SUP Superscript SUB Subscript

Tabla 15

copy Grupo EIDOS 3 Elementos del lenguaje I

25

Alguna de estas etiquetas no es reconocida por determinados navegadores Asiacute por ejemplo la etiqueta ltBLINKgt (Parpadeo) no es implementada por el Explorer Por lo que seguacuten el explorador que estemos utilizando podremos ver el resultado correctamente o no

Existen otras etiquetas que nos van a servir para especificar de manera diferenciada unidades loacutegicas de nuestro documento HTML tales como citas direcciones de correo etc En algunos casos el formato obtenido con estas etiquetas de estilo loacutegico va a ser el mismo que con las anteriores a las que se les denomina tambieacuten etiquetas de estilo fiacutesico Algunas etiquetas de estilo loacutegico las vemos en la Tabla 16

Etiqueta Ejemplo Resultado

ltSTRONGgtltSTRONGgtltSTRONGgtEspecifica textoresaltado (igualltBgt)ltSTRONGgt

Especifica texto resaltado(igual ltBgt)

ltCITEgtltCITEgtltCITEgtIndica una cita otiacutetulo (igual ltIgt)ltCITEgt

Indica una cita o tiacutetulo (igualltIgt)

ltSTRIKEgtltSTRIKEgtltltSTRIKEgtTexto tachado(igual ltSgt)ltSTRIKEgt

Texto tachado (igual ltSgt)

Tabla 16

Si queremos aplicar efectos maacutes espectaculares a nuestro documento HTML debemos variar el tamantildeo el color y el tipo de letra del texto La etiqueta que nos permite todo esto es ltFONTgtltFONTgt por medio de sus atributos size color y face

ltFONT size=n oacute +- n color=rrggbb oacute name face=nombre defont gt

bull size=n oacute +- n El atributo size nos permite especificar un tamantildeo determinado

para la fuente del texto incluido entre las etiquetas de inicio y fin el cual puede estar entre 1 y 7 El texto de tamantildeo normal equivale a la fuente de tamantildeo 3 (fuente base) Por tanto si especificamos size=+2 el tamantildeo de la fuente seraacute 5 Y si especificamos size= -1 el tamantildeo seraacute 2

Ejemplo Resultado

ltFONT size=2gtTamantildeo 2ltFONTgtTamantildeo 2

ltFONT size=+2gtTamantildeo 5 (3+2)ltFONTgt Tamantildeo 5 (3+2)

ltFONT size=-1gtTamantildeo 2 (3-1)ltFONTgtTamantildeo 2 (3-1)

Tabla 17

bull color=rrggbb oacute name Nos va a permitir definir el color que tendraacute el texto

incluido entre las etiquetas Tabla 18

Lenguaje HTML copy Grupo EIDOS

26

Ejemplo Resultado

ltFONT color=redgtTexto de colorrojoltFONTgt

Texto de color rojo

ltFONT color=bluegtTexto de colorazulltFONTgt

Texto de color azul

ltFONT size=5 color=008000gtTextoverde y de tamantildeo 5ltFONTgt

Texto verde y detamantildeo 5

Tabla 18

bull face=nombre de font Nos va a permitir escribir texto con el tipo de letra que le

especifiquemos En el caso de que el tipo de letra que le hayamos especificado no esteacute cargada en el ordenador que lee la paacutegina se usaraacute el font por defecto del navegador

Ejemplo Resultado

ltFONT face=TahomagtTipo de letraTahomaltFONTgt

Tipo de letra Tahoma

ltFONT size=4 color=blueface=TahomagtTexto azul de tamantildeo4 y TahomaltFONTgt

Texto azul de tamantildeo 4 y Tahoma

Tabla 19

Listas Podemos representar elementos en forma de lista dentro de nuestros documentos de una forma muy sencilla y con una gran versatilidad Estas listas podraacuten incluir cualquiera de los elementos HTML e incluso podemos definir listas anidadas es decir listas dentro de listas HTML nos permite crear tres tipos distintos de listas

bull Listas no numeradas

bull Listas numeradas

bull Listas de definiciones

Listas no numeradas ltULgt UL Unordered List

Con este tipo de listas podemos especificar una serie de elementos sin un orden predeterminado precedidos de una marca o vintildeeta que nosotros mismos podemos definir Para la definicioacuten de los liacutemites de la lista utilizaremos la etiqueta ltULgt ltULgt y para determinar cada uno de los elementos que la componen usaremos la etiqueta ltLIgt El formato es el siguiente

ltUL type=disk oacute circle oacute squaregtltLHgtTiacutetulo de la listaltLHgt

copy Grupo EIDOS 3 Elementos del lenguaje I

27

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltULgtLH List Head LI List Item

Con el atributo type vamos a especificar el tipo de marca o vintildeeta que antecederaacute a cada uno de los elementos de la lista Estas marcas podraacuten ser un disco (disk) un ciacuterculo (circle) o un cuadrado (square) La etiqueta ltLHgt nos va a servir para especificar un posible tiacutetulo de la lista siendo esta opcional Vamos a ver algunos ejemplos en la Tabla 20

Ejemplo Resultado

ltUL type=circlegtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAfricaltLIgtAmeacutericaltLIgtOceaniacutea

ltULgt

Los cinco continentes

Europa

Asia

Aacutefrica

Ameacuterica

Oceaniacutea

ltUL type=squaregtltLIgtEuropaltLIgtAsialtLIgtAfricaltLIgtAmeacutericaltUL type=circle gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltULgtltLIgtOceaniacutea

ltULgt

Europa

Asia

Aacutefrica

Ameacuterica

Ameacuterica del Norte

Ameacuterica del Sur

Oceaniacutea

Tabla 20

Listas numeradas ltOLgt OL Ordered List

Con este tipo de listas podemos especificar una serie de elementos numerados seguacuten el lugar que ocupan en la lista Para la definicioacuten de los liacutemites de la lista utilizaremos la etiqueta ltOLgt ltOLgt y para determinar cada uno de los elementos que la componen usaremos la etiqueta ltLIgt El formato es el siguiente

ltOL start=n type=Tipo de listagtltLHgtTiacutetulo de la listaltLHgt

Lenguaje HTML copy Grupo EIDOS

28

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltOLgt

Con el atributo start vamos a especificar el nuacutemero por el que va a empezar la lista Si no indicamos este argumento la lista empezaraacute a numerarse a partir del 1 Con el atributo type vamos a especificar el tipo de lista numerada Sus posibles valores aparecen a continuacioacuten y veremos algunos ejemplos en la Tabla 21

A Letras mayuacutesculas (A B C )

a Letras minuacutesculas (a b c )

I Nuacutemeros romanos en mayuacutesculas (I II III IV )

i Nuacutemeros romanos en minuacutesculas (i ii iii iv )

1 Numeacutericamente (1 2 3 4 ) (es la numeracioacuten por defecto y por tanto no habriacutea que indicarla)

Ejemplo Resultado

ltOL type=AgtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltLIgtOceaniacutea

ltOLgt

Los cinco continentes

A Europa

B Asia

C Aacutefrica

D Ameacuterica

E Oceaniacutea

ltOL type=I start=2gtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltOL type=i gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltOLgtltLIgtOceaniacutea

ltOLgt

II Europa

III Asia

IV Aacutefrica

V Ameacuterica

i Ameacuterica del Norte

ii Ameacuterica del Sur

VI Oceaniacutea

Tabla 21

copy Grupo EIDOS 3 Elementos del lenguaje I

29

Listas de definiciones ltDLgt DL Definition List

Estas listas nos van a servir para especificar una serie de teacuterminos y sus definiciones correspondientes Para la definicioacuten de la lista usaremos la etiqueta ltDLgt ltDLgt para especificar los teacuterminos usaremos la etiqueta ltDTgt y para especificar la definicioacuten correspondiente a cada teacutermino usaremos la etiqueta ltDDgt El formato es el siguiente

ltDLgtltLHgtTiacutetulo de la listaltLHgtltDTgtTeacutermino 1ltDDgtDefinicioacuten 1ltDTgtTeacutermino 2ltDDgtDefinicioacuten 2

ltDTgtTeacutermino nltDDgtDefinicioacuten n

ltDLgtDT Definition Term DD Definition Description

Vamos a ver un ejemplo en la Tabla 22

Ejemplo Resultado

ltDLgtltDTgtPariacutesltDDgtCapital de FrancialtDTgtRomaltDDgtCapital de ItalialtDTgtMadridltDDgtCapital de Espantildea

ltDLgt

Pariacutes

Capital de Francia

Roma

Capital de Italia

Madrid

Capital de Espantildea

Tabla 22

Hiperenlaces Los hiperenlaces son enlaces de hipertexto que nos van a permitir acceder de manera directa a otros documentos HTML independientemente de su ubicacioacuten o a otras zonas dentro de nuestro propio documento

Enlaces a otras paacuteginas ltA href=gt Con este tipo de hiperenlaces vamos a poder acceder tanto a otras paacuteginas que esteacuten ubicadas dentro de nuestro propio sistema como a paacuteginas ubicadas en puntos muy distantes del globo El formato de este tipo de hiperenlaces es

ltA href=URL a la que se accedegtTexto del hiperenlaceltAgt

Lenguaje HTML copy Grupo EIDOS

30

Con el atributo href vamos a especificar la URL del documento al que se pretende acceder El texto contenido entre las etiquetas de comienzo y fin nos va a servir para definir el hiperenlace por lo que deberiacutea ser clarificador del contenido del documento con el que vamos a enlazar Esta definicioacuten apareceraacute resaltada normalmente en azul y subrayada En la mayoriacutea de los navegadores esta definicioacuten del hiperenlace es sensible por lo que cuando el cursor pasa por encima del mismo este cambia de aspecto indicaacutendolo

Veamos un ejemplo en la Tabla 23

Ejemplo Resultado

ltA href=httpwwweidosesgtPaacutegina inicialde Villa EidosltAgt

Paacutegina inicial de Villa Eidos

Tabla 23

Si situamos el ratoacuten encima del hiperenlace y pulsamos el navegador accederaacute a la paacutegina Web indicada por href es decir accederaacute a la paacutegina situada en httpwwweidoses

Igualmente podriacuteamos indicar el hiperenlace por medio de una imagen Si esta imagen tiene definido un borde este apareceraacute resaltado en color azul El formato correspondiente seriacutea

ltA href=URL a la que se accedegtltIMG src=Imagengt y tambieacutentextoltAgtIMG Image src Source

Veamos un ejemplo en la Tabla 24

Ejemplo Resultado

ltA href=httpwwweidosesgtltIMGsrc=IconogifgtltAgt Villa Eidos Villa Eidos

Tabla 24

Si pulsamos sobre la imagen el navegador accederaacute a la paacutegina Web inicial de Villa Eidos

Enlaces dentro de la misma paacutegina ltA name=gt Este tipo de hiperenlaces nos va a permitir marcar distintas zonas del documento activo con el objeto de tener un acceso directo a las mismas Una buena utilidad de este tipo de enlaces radica en la creacioacuten de iacutendices para documentos largos de forma que si pinchamos en el hiperenlace correspondiente al tiacutetulo de un capiacutetulo determinado el navegador saltaraacute automaacuteticamente hasta el comienzo de dicho capiacutetulo

Para la creacioacuten de estos hiperenlaces debemos seguir dos pasos

copy Grupo EIDOS 3 Elementos del lenguaje I

31

1 Marcar las distintas zonas o secciones del documento Esto lo haremos con el paraacutemetro name

ltA name=Identificador de seccioacutengtTexto de laseccioacutenltAgt

A cada seccioacuten le asignaremos un identificador distinto para poder referenciarlas posteriormente de manera inequiacutevoca

2 Especificar un enlace a cada una de las secciones que hayamos definido ltA href=Identificador de seccioacutengtTexto del enlace a laseccioacutenltAgt

Si pinchamos en este enlace el navegador saltaraacute automaacuteticamente a la seccioacuten correspondiente Veamos un ejemplo sencillito en la Tabla 25 pero demostrativo de todo lo que acabamos de explicar

Ejemplo Resultado

ltA href=Cap1gtCapiacutetulo1ltAgtltA name=Cap1gtCapiacutetulo 1ltAgt

Capiacutetulo 1

Capiacutetulo 1

Tabla 25

Si nos creamos una paacutegina HTML con distintos capiacutetulos podriacuteamos crear una seccioacuten para cada uno de ellos de forma que si pinchamos en el hiperenlace correspondiente al Capiacutetulo 1 el navegador saltariacutea directamente a la seccioacuten correspondiente al Capiacutetulo 1

Ademaacutes de los dos tipos de hiperenlaces vistos podemos crear hiperenlaces que nos permitan acceder a cualquiera de los servicios de Internet Es decir podriacuteamos indicar enlaces a servidores FTP GOPHER NEWS MAILTO etc Para ello tendriacuteamos que indicar la URL correspondiente al servicio al cual queremos acceder como ya vimos en el primer capiacutetulo de este manual

Imaacutegenes

Podremos dar un aspecto mucho maacutes vistoso a nuestros documentos HTML con la inclusioacuten de imaacutegenes Los formatos de imagen que todos los navegadores reconocen son gif y jpg Si queremos insertar una imagen en otro formato el visor deberiacutea disponer del programa externo que permita su visualizacioacuten De todas formas una buena solucioacuten es utilizar alguacuten programa de tratamiento de imaacutegenes que nos convierta la imagen a uno de los formatos mencionados anteriormente

El formato gif es maacutes recomendado para la inclusioacuten de iconos graacuteficas y el formato jpg para el caso de insertar fotografiacuteas en nuestras paacuteginas

Lenguaje HTML copy Grupo EIDOS

32

La etiqueta que nos va a permitir la insercioacuten de imaacutegenes es ltIMGgt La imagen se insertaraacute justo en el punto del documento donde coloquemos dicha etiqueta pudiendo insertar imaacutegenes dentro de listas tablas o formularios

El formato de la etiqueta con sus posibles argumentos es el siguiente

ltIMG src=URL de la imagen alt=Texto alternativoalign=topmiddlebottonleftrigth border=Tamantildeoheight=Tamantildeo width=Tamantildeo hspace=margen vspace=margengt

bull src=URL de la imagen El atributo src nos va servir para indicar la URL de la imagen que

queremos insertar es decir el servidor y camino hasta llegar al fichero de la imagen

No seraacute necesario que la imagen que queremos insertar en nuestro documento esteacute en el ordenador local aunque siacute es recomendable ya que el acceso a las mismas puede ser maacutes lento

Por tanto es una buena praacutectica copiar todas las imaacutegenes que vayamos a incluir en nuestro documento HTML al ordenador local

Tabla 26

bull alt=Texto alternativo Nos va a permitir mostrar un texto alternativo para el caso en que el

navegador no sea capaz de mostrar la imagen Su uso es muy recomendable ya que cuando publiquemos nuestras paacuteginas en la WWW no sabremos desde queacute tipo de navegadores accederaacuten los internautas a nuestras paacuteginas

En la Tabla 27 vamos a ver un ejemplo

Si usas un navegador que no tiene ninguacuten problema para la visualizacioacuten de imaacutegenes desactiva temporalmente la opcioacuten de mostrar imaacutegenes prueba el ejemplo que muestra la Tabla 27 y compaacuteralo con el anterior

Tabla 27

copy Grupo EIDOS 3 Elementos del lenguaje I

33

bull align=topmiddlebotton leftrigth Nos permite indicar coacutemo se alinearaacute el texto que siga a la imagen

top alinea el texto con la parte superior de la imagen

middle con la parte central

bottom con la parte inferior

left imagen alineada a la izquierda de la paacutegina

rigth imagen alineada a la derecha de la paacutegina

Tabla 28

En el caso de que el texto que acompantildea a la imagen tenga maacutes de una liacutenea tan soacutelo la primera seraacute la que se alinearaacute seguacuten alguna de las anteriores alineaciones el resto de liacuteneas se incluiraacuten debajo de la imagen quedando un efecto bastante feo

Para solventar esto estaacuten las alineaciones LEFT (imagen alineada a la izquierda de la paacutegina) y RIGHT (imagen alineada a la derecha de la paacutegina) Las cuales permiten que la imagen se inserte dentro del paacuterrafo que la rodea produciendo un resultado mucho maacutes profesional en la integracioacuten de texto e imaacutegenes

Estas dos alineaciones no se podraacuten usar en combinacioacuten con las anteriores Veamos algunos ejemplos en la Tabla 29

Vemos como en el primer ejemplo la segunda liacutenea de texto aparece debajo de la imagen produciendo un efecto menos vistoso que en los dos ejemplos siguientes

Lenguaje HTML copy Grupo EIDOS

34

Tabla 29

bull border=Tamantildeo Permite antildeadirle un borde a la imagen del tamantildeo que le

especifiquemos

Si la imagen forma parte de un hiperenlace esta apareceraacute con un borde del color del hiperenlace Si no deseaacuteramos que aparezca este borde tendriacuteamos que especificar border=0

Tabla 30

bull height=Tamantildeo Permite especificar el alto de la imagen en puntos de pantalla

(pixels) o en del tamantildeo del documento

bull width=Tamantildeo Con este argumento especificaremos el ancho al que mostraremos la imagen en puntos de pantalla (pixels) o en del tamantildeo del documento

En el segundo de los ejemplos de la Tabla 31 el ancho de la imagen se ha extendido al 50 del total del ancho de la celda donde estaacute contenida la imagen Si pruebas este ejemplo en tu documento HTML la imagen se extenderaacute horizontalmente hasta ocupar el 50 del ancho de la paacutegina

copy Grupo EIDOS 3 Elementos del lenguaje I

35

Tabla 31

bull hspace=Margen hspace Horizontal Space Permite especificar el nuacutemero de espacios

horizontales (en puntos) que separaraacuten a la imagen de cualquier elemento que le siga o le anteceda

bull vspace=Margen vspace Vertical Space Con este argumento especificaremos el margen vertical (en puntos) que habraacute entre la imagen y cualquier otro elemento de nuestro documento

Tabla 32

Elementos del lenguaje II

Tablas HTML nos va a permitir la inclusioacuten de cualquiera de los elementos de nuestra paacutegina (texto imaacutegenes hiperenlaces listas etc) dentro de una tabla Gracias a lo cual conseguiremos dar una mayor y mejor estructuracioacuten a los contenidos de nuestros documentos Ademaacutes la definicioacuten de las tablas en HTML es muy abierta pudiendo en cualquier momento redimensionar la tabla es decir cambiar su nuacutemero de filas o de columnas cambiar el tamantildeo de alguna de sus celdas etc

La etiqueta que nos va a permitir la definicioacuten de tablas es ltTABLEgt ltTABLEgt

El formato general de la etiqueta sin ninguacuten argumento es el siguiente

ltTABLEgtltTR gt

ltTHgtContenido de la celda ltTHgtltTDgtContenido de la celda ltTDgt

ltTRgtltTABLEgt

TR Table Row TH Table Header TD Table Data

Vamos a analizar cada una de estas etiquetas de forma separada

1 ltTABLEgt ltTABLEgt Definicioacuten general de la tabla Dentro de ella definiremos las filas y columnas que la constituyen pudiendo incluso definir tablas dentro de tablas es decir tablas anidadas

Lenguaje HTML copy Grupo EIDOS

38

2 ltTRgt ltTRgt Definicioacuten de las filas de la tabla Por cada etiqueta ltTRgt que incluyamos se crearaacute una fila en la tabla No seraacute necesario indicar la etiqueta de cierre

3 ltTHgtltTHgt oacute ltTDgtltTDgt Definicioacuten de cada una de las celdas de la tabla Vemos que estas etiquetas estaacuten contenidas dentro de otra etiqueta de definicioacuten de fila de forma que por cada etiqueta ltTHgt o ltTDgt que incluyamos se crearaacute una celda dentro de la fila correspondiente La etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera es decir celdas cuyo contenido estaacute resaltado en negrita dejando la etiqueta ltTDgt para definir celdas de datos En este caso tampoco es necesario indicar las etiquetas de cierre

Todas estas etiquetas tienen sus respectivos argumentos Pero antes de analizar cada uno de ellos vamos a ver un ejemplo muy sencillito en la Tabla 33 que nos crearaacute una tabla de una sola celda (1 fila X 1 columna = 1 celda) Para ello usaremos la etiqueta de creacioacuten de tabla ltTABLEgt con el argumento border=1 (nos dibuja un borde de tamantildeo 1 alrededor de la tabla)

Ejemplo Resultado

ltTABLE border=1gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 33

Vamos ahora a analizar lo distintos argumentos que componen las etiquetas de la tabla analizaacutendolos desde lo general (la definicioacuten de la tabla) hasta lo especiacutefico (la definicioacuten de las celdas)

1 Definicioacuten de la tabla ltTABLEgt

ltTABLE border=n cellpadding=n cellspacing=n width=n oacute height=n oacute bgcolor=rrggbb oacute nombre gt

Contenido ltTABLEgt

bull border=n Si especificamos este argumento se dibujaraacute un borde alrededor de la

tabla del ancho que le indiquemos como muestra la Tabla 34

Ejemplo Resultado

Mi primera tabla ltTABLE border=4gtltTRgtltTDgtMi primera tablaltTABLEgt

Tabla 34

bull cellpadding=n Indica el espacio en puntos que separa el contenido de la celda con

el borde de la misma siendo 1 por defecto

copy Grupo EIDOS 4 Elementos del lenguaje II

39

Ejemplo Resultado

ltTABLE border=4 cellpadding=8gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 35

bull cellspacing=n Indica el espacio en puntos que separa a las celdas contenidas dentro de la tabla siendo 2 por defecto

bull width=n oacute Indica la anchura de la tabla en puntos o en en funcioacuten del ancho de la ventana del visualizador Si no indicamos este argumento el ancho de la tabla se ajustaraacute al tamantildeo del contenido de las celdas Esto es lo que ha ocurrido en el uacuteltimo ejemplo que hemos realizado Veamos un ejemplo en el Coacutedigo fuente 11 El resultado se muestra en la Tabla 36

ltTABLE border=4 width=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 11

Mi primera tabla

Tabla 36

bull height=n oacute Nos permite definir la altura de la tabla en puntos o en de la

altura de la ventana del visualizador Si indicamos este argumento lo recomendable es darlo en puntos ya que es maacutes complicado adecuarnos a la altura de la ventana del visualizador Al igual que en el caso anterior si no especificamos este argumento la altura se adecuaraacute al contenido de las celdas El Coacutedigo fuente 12 muestra un ejemplo y la Tabla 37 nos muestra el resultado

ltTABLE border=4 width=50 height=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 12

Mi primera tabla

Tabla 37

bull bgcolor= rrggbb o nombre del color Nos permite definir un color

de fondo para todas las celdas de la tabla Maacutes adelante veremos como podemos definir colores especiacuteficos para cada una de las celdas por separado

Lenguaje HTML copy Grupo EIDOS

40

Ejemplo Resultado

ltTABLE border=4 bgcolor=yellowgtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 38

2 Definicioacuten de las filas de la tabla ltTRgt

ltTR align=leftrightcenter valign=topmiddlebottombgcolor=rrggbb oacute nombregt

Antes de empezar a descifrar el significado de cada uno de los argumentos de esta etiqueta vamos a ver un ejemplo en la Tabla 39 de coacutemo se construiriacutea una tabla con dos filas (2 filas X 1 columna = 2 celdas)

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR gtltTDgtPrimera filaltTRgtltTDgtSegunda filaltTABLEgt

Segunda fila

Tabla 39

bull align=leftrightcenter Con este argumento vamos a indicar la alineacioacuten

horizontal (leftizquierda rightderecha centercentrado) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado Veamos un ejemplo en el Coacutedigo fuente 13 y su correspondiente resultado en la Tabla 40

ltTABLE border=4 width=50 gt ltTRgtltTDgtPrimera filaltTRalign=rightgtltTDgtSegunda filaltTABLEgt

Coacutedigo fuente 13

Primera fila

Segunda fila

Tabla 40

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten

vertical (toparriba middlecentrado bottomabajo) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado

copy Grupo EIDOS 4 Elementos del lenguaje II

41

bull bgcolor= rrggbb o nombre del color En este caso este argumento nos permitiraacute definir un color de fondo para todas las celdas de una fila veamos un ejemplo en la

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR bgcolor=yellowgtltTDgtPrimera

filaltTR bgcolor=greengtltTDgtSegunda

filaltTABLEgt

Segunda fila

Tabla 41

3 Definicioacuten de las celdas de la tabla ltTHgt oacute ltTDgt

ltTH oacute TD align=leftrightcenterjustifyvalign=topmiddlebottom bgcolor=rrggbb oacute nombre width=nrowspan=n colspan=ngt

Como ya explicamos anteriormente la etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera y la etiqueta ltTDgt para la creacioacuten de celdas de datos Vamos a completar nuestro ejemplo inicial antildeadieacutendole tres filas de dos celdas cada una (3 filas X 2 columnas = 6 celdas) Tabla 42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTDgtCelda 21ltTDgtCelda 22

ltTABLEgt Celda 21 Celda 22

Tabla 42

bull align=leftrightcenterjustify Con este argumento vamos a indicar la

alineacioacuten horizontal (left izquierda right derecha center centrado justifyjustificado) del contenido de cada celda por separado Su significado es el mismo que en la etiqueta ltTRgt

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten vertical (toparriba middlecentrado bottomabajo) del contenido de cada celda

bull bgcolor= rrggbb o nombre del color En este caso podremos definir un color de fondo para cada una de las celdas de manera independiente

bull width=n oacute Indica el ancho de la celda en puntos o en en funcioacuten del tamantildeo de la tabla

Lenguaje HTML copy Grupo EIDOS

42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera

1ltTHgtCabecera 2ltTR gtltTD align=rightgtCelda

11ltTD bgcolor=redgtCelda 12ltTRgtltTD

bgcolor=yellowgtCelda 21ltTDalign=centergtCelda 22ltTABLEgt

Celda 21 Celda 22

Tabla 43

bull rowspan=n Con este argumento podemos lograr que una celda concreta abarque maacutes de una fila ya sabemos que por defecto una celda ocupa una sola fila

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTD rowspan=2gtCelda

11ltTDgtCelda 12ltTRgtltTDgtCelda 22

ltTABLEgt

Celda 11 Celda 22

Tabla 44

bull colspan=n Con este argumento podemos lograr que una celda se expanda a maacutes

de una columna

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTD colspan=2

align=centergtCelda 22ltTABLEgt

Celda 22

Tabla 45

Para finalizar este tema sobre la creacioacuten de tablas vamos a ver el ejemplo que aparece en el Coacutedigo fuente 14 y su resultado en la Tabla 46

ltTABLE border=4gtltTR gtltTH colspan=3 bgcolor=redgtTiacutetuloltTR bgcolor=yellowgtltTHgtCabecera 1ltTHgtCabecera 2ltTHgtCabecera 3

copy Grupo EIDOS 4 Elementos del lenguaje II

43

ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTDgtCelda 13ltTRgtltTD rowspan=2gtCelda 21ltTD bgcolor=greengtCelda 22ltTDgtCelda 23ltTRgtltTDgtCelda 32ltTDgtCelda 33

ltTABLEgt

Coacutedigo fuente 14

Tiacutetulo

Cabecera 1 Cabecera 2 Cabecera 3

Celda 11 Celda 12 Celda 13

Celda 22 Celda 23 Celda 21

Celda 32 Celda 33

Tabla 46

Formularios El formulario es el elemento de HTML que nos va a permitir interactuar con los visitantes de nuestras paacuteginas web de forma que podemos solicitarle informacioacuten al usuario y procesarla De esta forma podremos crear en nuestras paacuteginas encuestas para solicitar la opinioacuten del visitante sobre alguacuten tema e incluso sobre el contenido de nuestra propia paacutegina web cuestionarios para evaluar la asimilacioacuten de contenidos sobre un tema concreto que se trate en la paacutegina etc

El contenido de la informacioacuten introducida por medio del formulario seraacute enviado a la direccioacuten URL donde resida el programa que se encargaraacute de procesar los datos A este tipo de programas externos se les denomina programas CGI (Common Gateway Interface)

La etiqueta HTML que nos va a permitir la creacioacuten de formularios es ltFORMgt Su formato es el siguiente

ltFORM action=URL del programa que trata el formulariomethod=postgetgt Elementos del formulario ltFORMgt

bull action=URL del programa que trata el formulario A traveacutes de este

argumento indicaremos como ya hemos mencionado la direccioacuten del fichero de programa que va a tratar la informacioacuten suministrada por el formulario

Tambieacuten podriacuteamos incluir como URL que trata el formulario una direccioacuten de correo electroacutenico Por tanto el valor de este argumento podriacutea ser action =mailto direccioacuten de correo

Nota Esta opcioacuten soacutelo funciona adecuadamente con el navegador Netscape Con el Explorer este enviacuteo dariacutea como resultado un correo en blanco Para que esta opcioacuten funcione de manera independiente del navegador que se esteacute utilizando se ha de emplear un programa externo que realice este proceso

Lenguaje HTML copy Grupo EIDOS

44

bull method=postget A traveacutes de este argumento indicaremos el meacutetodo empleado para transferir la informacioacuten generada por el formulario

Si indicamos post se produciraacute la modificacioacuten del documento destino como es el caso de enviar la informacioacuten a una direccioacuten de correo electroacutenico Mediante el meacutetodo get no se produciraacuten cambios en el documento destino

Dentro de un formulario podremos incluir cualquier texto o instruccioacuten HTML de las vistas a lo largo de los capiacutetulos anteriores ademaacutes claro estaacute de los elementos tiacutepicos de un formulario cajas de texto botones de seleccioacuten menuacutes de opciones etc Vamos a ver coacutemo se incluiraacuten estos elementos en un formulario

Entrada baacutesica de datos Para definir los distintos tipos de campos baacutesicos de entrada de datos usaremos la etiqueta ltINPUTgt

El formato es el siguiente

ltINPUT type= text password checkbox radio hidden submit image reset name=Variable value=Valor inicialgt

bull El argumento type determinaraacute el tipo de campo de entrada que estamos insertando A

continuacioacuten describiremos cada uno de ellos

bull El argumento name especifica el nombre de la variable que tomaraacute el valor introducido en el campo

bull El argumento value especifica el valor por defecto que tendraacute el campo

Vamos a continuacioacuten a describir los distintos tipos campos de entrada que vendraacuten dados por los valores del argumento type

Texto corto type=text

Con este argumento vamos a indicar que el campo a introducir seraacute un texto El formato seriacutea

ltINPUT type= text name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los nuevos atributos es

bull size=Tamantildeo Indicaremos el tamantildeo en caracteres de la ventana de introduccioacuten de texto

bull maxlength=Longitud maacutexima Indicaremos el nuacutemero maacuteximo de caracteres a introducir en el campo

Vamos a ver un ejemplo en la Tabla 47

copy Grupo EIDOS 4 Elementos del lenguaje II

45

Ejemplo Resultado

NombreltINPUT type=text name=Var1Value=Texto por defecto size=20 maxlength=25gt

Tabla 47

Claves type=password

Con este argumento indicamos que el campo a introducir seraacute una palabra clave por lo que los caracteres que se introduzcan seraacuten sustituidos por asteriscos en la visualizacioacuten por pantalla El formato es

ltINPUT type= password name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los distintos argumentos es el mismo que en el caso anterior Veamos un ejemplo en la Tabla 48

Ejemplo Resultado

ClaveltINPUT type=password name=Var2Value=tutankamon size=11 maxlength=10gt

Tabla 48

Botones de seleccioacuten type=checkbox

El checkbox es un botoacuten que presenta dos estados marcado (1) y desmarcado (0) Podremos variar su estado simplemente pinchando con el ratoacuten El formato es

ltINPUT type= checkbox name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto

Si incluimos el argumento value cuando el botoacuten esteacute marcado su variable asociada adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 49

Ejemplo Resultado

ltINPUT type=checkbox name=Var3 value=Op1 checkedgtOpcioacuten1 ltbrgtltINPUT type=checkbox name=Var4 value=Op2gt Opcioacuten 2

Tabla 49

Lenguaje HTML copy Grupo EIDOS

46

Seleccioacuten entre varias opciones type=radio

Este argumento se usa cuando hay que hacer una seleccioacuten entre varias alternativas excluyentes pudieacutendose seleccionar uacutenicamente una de las alternativas Debemos incluir una etiqueta radio por cada una de las posibles alternativas El formato es

ltINPUT type= radio name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto En este caso uacutenicamente uno de los botones de radio podraacute aparecer marcado ya que se usa para el caso de opciones excluyentes

Cuando un botoacuten esteacute seleccionado la variable asociada a la lista de botones adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 50

Ejemplo Resultado

ltINPUT type=radio name=Var5 value=Op1gtOpcioacuten1 ltbrgtltINPUT type=radio name=Var5 value=Op2checkedgt Opcioacuten 2 ltbrgtltINPUT type=radio name=Var5 value=Op3 gtOpcioacuten 3

Tabla 50

En este ejemplo la variable Var5 tendraacute el valor Op2

Campos ocultos type=hidden

Este tipo de campos no son visibles para el usuario Su uso tiene sentido en el caso de enviar alguacuten tipo de informacioacuten que no deba ser visualizada o variada por el lector de nuestra paacutegina Web El formato es

ltINPUT type= hidden name=Variable value=Valor gt

Con esta etiqueta asignariacuteamos a la Variable referenciada por name el Valor de value y se mandariacutea junto con el formulario sin que el usuario de la paacutegina se entere de nada Veamos un ejemplo en el Coacutedigo fuente 15

ltINPUT type=hidden name=Var6 value=tutankamongt

Coacutedigo fuente 15

copy Grupo EIDOS 4 Elementos del lenguaje II

47

Botoacuten de enviacuteo de datos type=submit

Con este argumento especificamos un botoacuten en el que al pulsar los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario El formato es

ltINPUT type= submit value=Mensaje a mostrargt

En este caso el paraacutemetro value indica el mensaje que se mostraraacute en el botoacuten Veamos un ejemplo en la Tabla 51

Ejemplo Resultado

ltINPUT type=submit value=Enviar los Datosgt

Tabla 51

Botoacuten graacutefico de enviacuteo de datos type=image

Con este argumento especificamos un botoacuten de tipo imagen en el que al igual que con el botoacuten anterior si pulsamos en la imagen los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario Su formato es el siguiente

ltINPUT type= image src=URL de la imagen name=Variablegt

Con el paraacutemetro src especificamos la URL de la imagen que seraacute insertada en el botoacuten En este caso en la variable referenciada por name se almacenaraacuten las coordenadas del punto de la imagen donde se halla pinchado (de forma que estas coordenadas podriacutean ser procesadas por el programa que recibe los datos del formulario)

Botoacuten de borrado de datos type=reset

Con este argumento especificamos un botoacuten que al ser pulsado borraraacute el contenido actual de todos los campos dejaacutendolos con sus valores por defecto Su formato es

ltINPUT type= reset value=Texto del botoacutengt

Con el paraacutemetro value especificamos el texto que etiquetaraacute al botoacuten

Ejemplo Resultado

ltINPUT type=reset value=Borrar datosgt

Tabla 52

Lenguaje HTML copy Grupo EIDOS

48

Entrada datos en muacuteltiples liacuteneas En un formulario tambieacuten podremos introducir un campo de texto que abarque varias liacuteneas Para ello usaremos la etiqueta ltTEXTAREAgt ltTEXTAREAgt Su formato es el siguiente

ltTEXTAREA name=Variable rows=Filas cols=ColumnasgtContenido por defectoltTEXTAREAgt

Los argumentos rows y cols nos van a permitir especificar respectivamente el nuacutemero de filas de texto visibles y el nuacutemero de columnas de texto visibles en el campo

Ejemplo Resultado

ltTEXTAREA name=Var7 rows=5 cols=40gtContenido por defectoltTEXTAREAgt

Tabla 53

Entrada de datos a traveacutes de campos de seleccioacuten Con los campos de seleccioacuten podremos desplegar una lista de opciones entre las que podremos seleccionar una Para ello usaremos la etiqueta ltSELECTgt ltSELECTgt Su formato es el siguiente

ltSELECT name=Variable multiple size=ngtltOPTION selected value=Valor_1gtPrimera OpcioacutenltOPTION value=Valor_2gtSegunda Opcioacuten

ltOPTION value=Valor_ngtEneacutesima Opcioacuten

ltSELECTgt

Figura 1

bull La variable referenciada por name tomaraacute el valor(value) de la opcioacuten seleccionada

bull Si especificamos el argumento muacuteltiple se mostraraacuten todas la opciones en forma de tabla El nuacutemero de opciones visibles en la tabla vendraacute dado por el argumento size

copy Grupo EIDOS 4 Elementos del lenguaje II

49

bull Con la etiqueta ltOPTIONgt iremos definiendo cada una de las opciones de la lista

bull El argumento selected va a determinar cuaacutel es la opcioacuten por defecto

Para finalizar vamos a ver el Coacutedigo fuente 16 correspondiente a una encuesta realizada por la editorial ficticia EditoPc y en la Figura 2 observamos el resultado del formulario

ltP align=centergtltBgtEDITORIAL ltIgtEditoPcltIgtltBgtltPgtltFORM action=mailtodireccionejemplo method = postgtNombreltINPUT type=text size=30 name=nombregtltBRgtE_mail ltINPUT type=text size=30 name=e_mailgtltPgtDeseas recibir informacioacuten sobreltINPUT type=checkbox name=infor1 value=InternetgtInternetltINPUT type=checkbox name=infor2 value=ProgramacioacutengtProgramacioacutenltINPUT type=checkbox name=infor3 value=SistOperativogtSistOperativoltINPUT type=checkbox name=infor4 value=OfimaacuteticagtOfimaacuteticaltPgtiquestTe conectas a Internet desde casa ltbrgtltINPUT type=radio name=intercasa value=sigtSiacuteltINPUT type=radio name=intercasa value=nogtNoltPgtiquestQueacute uso le das a tu ordenador ltBRgtltSELECT name=uso multiple size=3gtltOPTION selectedgtProfesionalltOPTIONgtDomeacutesticoltOPTIONgtOcioJuegosltSELECTgtltPgtCaracteriacutesticas de tu PCltBRgtltTEXTAREA name=caract rows=5 cols=40gtltTEXTAREAgtltPgtltINPUT type=submit value=Enviar datosgt ltINPUT type=reset value=Borrardatosgt

Coacutedigo fuente 16

Figura 2

Elementos del lenguaje III

Frames Las frames son una utilidad del HTML que nos permite dividir la ventana del navegador en diferentes subventanas que podraacuten ser manipuladas de manera independiente Esto nos permitiraacute mostrar una paacutegina web diferente en cada una de la subventanas o frames

Estructura de un documento con frames Un documento con frames se estructura de manera diferente a un documento HTML normal Asiacute en este tipo de documentos no apareceraacute la etiqueta ltBODYgt En su lugar se incluiraacute la etiqueta ltFRAMESETgt ltFRAMESETgt dentro de la cual se definiraacuten las distintas frames que se incluyan en el documento

La estructura general de un documento de este tipo seriacutea por tanto

ltHTMLgtltHEADgtCabeceraltHEADgtltFRAMESETgt

Definicioacuten de la distintas framesltFRAMESETgtltNOFRAMESgt

Instrucciones HTMLltNOFRAMESgt

ltHTMLgt

Lenguaje HTML copy Grupo EIDOS

52

Puede darse el caso de que programemos nuestro documento con frames siguiendo la estructura anterior y que el navegador que se use para leer el documento no soporte la caracteriacutestica de frames con lo cual no se mostraraacute nada de lo indicado entre las etiquetas ltFRAMESETgt y ltFRAMESETgtPara solucionar este problema todas las instrucciones HTML incluidas entre las etiquetas ltNOFRAMESgt y ltNOFRAMESgt seraacuten ejecutadas por los navegadores que no soportan las frames

La sintaxis de la etiqueta ltFRAMESETgt es

ltFRAMESET rows=Lista de filas cols=Lista de columnasgtltFRAME src=URL de la frame 1 name=Nombre de la frame 1gtltFRAME src=URL de la frame 2 name=Nombre de la frame 2gt

ltFRAME src=URL de la frame n name=Nombre de la frame ngt

ltFRAMESETgt

Como vemos por cada una de la frames que incluyamos en nuestro documento debemos incluir una etiqueta ltFRAMEgt indicando mediante sus argumentos la direccioacuten URL del documento que se insertaraacute en la subventana (src) y el nombre de la frame (name) Posteriormente describiremos la etiqueta ltFRAMEgt con maacutes detalle

Los argumentos de ltFRAMESETgt son rows y cols definieacutendose uacutenicamente uno de los dos atributos en funcioacuten de si la divisioacuten de la pantalla se realizaraacute por filas (rows) o por columnas (cols)

Por cada una de las subventanas que creemos debemos especificar su tamantildeo en puntos o en porcentaje del tamantildeo de cada subventana Asiacute por ejemplo si especificamos rows= 50 2525 crearemos tres subventanas horizontales ocupando la primera el 50 de la ventana principal y las otras dos el resto Si especificamos cols=100150 crearemos tres subventanas verticales ocupando la primera 100 puntos de la ventana principal la segunda 150 puntos y tercera el espacio restante

Vamos a verlo maacutes claramente con un par de ejemplos praacutecticos que vemos en la Tabla 54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 502525gt ltFRAMEsrc=Pagweb1htm name=Pagweb1gtltFRAMEsrc=Pagweb2htm name=Pagweb2gtltFRAMEsrc=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 17: Programacion web   lenguaje html

Lenguaje HTML copy Grupo EIDOS

20

Ejemplo Resultado

Esta frase tiene aquiacuteltPgt un cambio de paacuterrafo Esta frase tiene aquiacute

un cambio de paacuterrafo

Tabla 9

La etiqueta de fin paacuterrafo ltPgt es opcional no siendo necesario incluirla Aunque siempre es recomendable delimitar claramente el inicio y final de un paacuterrafo Ademaacutes cuando usemos esta etiqueta como cerrada ltPgt ltPgt tenemos la posibilidad de incluirle el atributo align el cual indica al navegador la forma de justificar el texto incluido en el paacuterrafo El formato seriacutea el siguiente

ltP align= left right center justify gtTexto contenido en elpaacuterrafo ltPgt

Veamos algunos ejemplos en la Tabla 10

Ejemplo Resultado

ltP align=rightgtEste es un ejemplode paacuterrafo alineado a laderechaltPgt

Este es un ejemplo de paacuterrafo alineado a la derecha

ltP align=centergtEste es unejemplo de paacuterrafo centradoltPgt

Este es un ejemplo de paacuterrafo centrado

Tabla 10

Liacutenea Horizontal ltHRgt HR Horizontal Rule Nos permite insertar una liacutenea horizontal cuyo tamantildeo podremos determinar a traveacutes de sus atributos Si no especificamos ninguacuten atributo dibujaraacute una liacutenea que ocupe el ancho de la pantalla del navegador Su utilidad es la de permitirnos dividir nuestra paacutegina en distintas secciones No seraacute necesaria la etiqueta de fin ltHRgt

El formato de la etiqueta con sus posibles atributos es

ltHR align= left right center noshade size=n width=n gt

bull align= left right center Permite establecer la alineacioacuten de la liacutenea a la izquierda a la derecha o centrarla

bull noshade No muestra la sombra de la liacutenea evitando el efecto de tres dimensiones

bull size=n Indica el grosor de la liacutenea en pixels

bull width=n oacute n Especificaraacute el ancho de la liacutenea este se podraacute especificar en pixels (n) o en tanto por ciento del ancho de la ventana (n) Vamos a ver algunos ejemplos en la Tabla 11

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

21

Ejemplo Resultado

ltHRgt

ltHR size=3 noshadegt

ltHR size=5width=50align=rightgt

ltHR size=10width=50align=centergt

Tabla 11

Texto preformateado ltPREgt PRE Preformatted Nos permitiraacute visualizar el texto tal y como se ha escrito respetando los saltos de liacutenea las tabulaciones y espacios en blanco de todo el texto incluido entre las etiquetas ltPREgt y ltPREgt

El texto se mostraraacute con una fuente de espaciado fijo maacutes pequentildea que el texto normal No es recomendable su uso ya que presenta muchas limitaciones y no se obtiene una buena presentacioacuten

Ejemplo Resultado

ltPREgtEste texto estaacutepreformateadoltPREgt

Este texto estaacute preformateado

Tabla 12

Elementos del lenguaje I

Cabeceras y atributos de texto

Cabeceras ltH1gtltH6gt H Heading En un documento HTML podemos incluir seis tipos distintos de cabeceras que van a constituir normalmente el tiacutetulo y los distintos subapartados que forman el documento aunque podremos utilizarlas en el punto que queramos del documento para resaltar cualquier texto Estas cabeceras son definidas por las etiquetas ltH1gtltH2gtltH3gtltH4gtltH5gt y ltH6gt El texto que componga cada cabecera deberaacute estar incluido entre las etiquetas de inicio (ltHngt) y fin (Hn) correspondiente La cabecera ltH1gtseraacute la que muestre el texto de mayor tamantildeo este tamantildeo iraacute disminuyendo hasta llegar a la cabecera ltH6gt Como podemos ver en la Tabla 13 Para alinear las cabeceras utilizamos el atributo align El formato seriacutea ltHn align=centergt como muestra la Tabla 14

Ejemplo Resultado

ltH1gtCabecera 1ltH1gt Cabecera 1 ltH2gtCabecera 2ltH2gt Cabecera 2

Lenguaje HTML copy Grupo EIDOS

24

ltH3gtCabecera 3ltH3gt Cabecera 3

ltH4gtCabecera 4ltH4gt Cabecera 4

ltH5gtCabecera 5ltH5gtCabecera 5

ltH6gtCabecera 6ltH6gtCabecera 6

Tabla 13

Ejemplo Resultado

ltH5 align=centergtCabecera 5ltH5gtCabecera 5

Tabla 14

Atributos del texto Al texto de nuestro documento HTML le podemos aplicar distintos atributos (negrita cursiva subrayado etc) al igual que hacemos cuando trabajamos con el procesador de textos en la edicioacuten de nuestros documentos Para aplicar estos atributos disponemos de distintas etiquetas que aplicaraacuten su efecto al texto incluido entre sus indicadores de inicio y fin Las vemos en la Tabla 15

Atributo Etiqueta Ejemplo Resultado

Negrita ltBgtltBgtltBgtTexto ennegritaltBgt

Texto en negrita

Cursiva ltIgtltIgtltIgtTexto encursivaltIgt

Texto en cursiva

Teletype ltTTgtltTTgtltTTgtTexto en modoteletypeltTTgt

Texto en modoteletype

Subrayado ltUgtltUgt ltUgtTexto subrayadoltUgt Texto subrayado Tachado ltSgtltSgt ltSgtTexto tachadoltSgt Texto tachado

Parpadeo ltBLINKgtltBLINKgtltBLINKgtTextoparpadeandoltBLINKgt

Texto parpadeando

Superiacutendice ltSUPgtltSUPgt ltSUPgtTexto en modosuperiacutendiceltSUPgt

Texto en modo superiacutendice

Subiacutendice ltSUBgtltSUBgtltSUBgtTexto en modosubiacutendiceltSUBgt

Texto en modo subiacutendice

Centrado ltCENTERgtltCENTERgt

ltCENTERgtTextocentradoltCENTERgt

Texto centrado

B Bold I Italic TT Teletype U Underlined S Strike SUP Superscript SUB Subscript

Tabla 15

copy Grupo EIDOS 3 Elementos del lenguaje I

25

Alguna de estas etiquetas no es reconocida por determinados navegadores Asiacute por ejemplo la etiqueta ltBLINKgt (Parpadeo) no es implementada por el Explorer Por lo que seguacuten el explorador que estemos utilizando podremos ver el resultado correctamente o no

Existen otras etiquetas que nos van a servir para especificar de manera diferenciada unidades loacutegicas de nuestro documento HTML tales como citas direcciones de correo etc En algunos casos el formato obtenido con estas etiquetas de estilo loacutegico va a ser el mismo que con las anteriores a las que se les denomina tambieacuten etiquetas de estilo fiacutesico Algunas etiquetas de estilo loacutegico las vemos en la Tabla 16

Etiqueta Ejemplo Resultado

ltSTRONGgtltSTRONGgtltSTRONGgtEspecifica textoresaltado (igualltBgt)ltSTRONGgt

Especifica texto resaltado(igual ltBgt)

ltCITEgtltCITEgtltCITEgtIndica una cita otiacutetulo (igual ltIgt)ltCITEgt

Indica una cita o tiacutetulo (igualltIgt)

ltSTRIKEgtltSTRIKEgtltltSTRIKEgtTexto tachado(igual ltSgt)ltSTRIKEgt

Texto tachado (igual ltSgt)

Tabla 16

Si queremos aplicar efectos maacutes espectaculares a nuestro documento HTML debemos variar el tamantildeo el color y el tipo de letra del texto La etiqueta que nos permite todo esto es ltFONTgtltFONTgt por medio de sus atributos size color y face

ltFONT size=n oacute +- n color=rrggbb oacute name face=nombre defont gt

bull size=n oacute +- n El atributo size nos permite especificar un tamantildeo determinado

para la fuente del texto incluido entre las etiquetas de inicio y fin el cual puede estar entre 1 y 7 El texto de tamantildeo normal equivale a la fuente de tamantildeo 3 (fuente base) Por tanto si especificamos size=+2 el tamantildeo de la fuente seraacute 5 Y si especificamos size= -1 el tamantildeo seraacute 2

Ejemplo Resultado

ltFONT size=2gtTamantildeo 2ltFONTgtTamantildeo 2

ltFONT size=+2gtTamantildeo 5 (3+2)ltFONTgt Tamantildeo 5 (3+2)

ltFONT size=-1gtTamantildeo 2 (3-1)ltFONTgtTamantildeo 2 (3-1)

Tabla 17

bull color=rrggbb oacute name Nos va a permitir definir el color que tendraacute el texto

incluido entre las etiquetas Tabla 18

Lenguaje HTML copy Grupo EIDOS

26

Ejemplo Resultado

ltFONT color=redgtTexto de colorrojoltFONTgt

Texto de color rojo

ltFONT color=bluegtTexto de colorazulltFONTgt

Texto de color azul

ltFONT size=5 color=008000gtTextoverde y de tamantildeo 5ltFONTgt

Texto verde y detamantildeo 5

Tabla 18

bull face=nombre de font Nos va a permitir escribir texto con el tipo de letra que le

especifiquemos En el caso de que el tipo de letra que le hayamos especificado no esteacute cargada en el ordenador que lee la paacutegina se usaraacute el font por defecto del navegador

Ejemplo Resultado

ltFONT face=TahomagtTipo de letraTahomaltFONTgt

Tipo de letra Tahoma

ltFONT size=4 color=blueface=TahomagtTexto azul de tamantildeo4 y TahomaltFONTgt

Texto azul de tamantildeo 4 y Tahoma

Tabla 19

Listas Podemos representar elementos en forma de lista dentro de nuestros documentos de una forma muy sencilla y con una gran versatilidad Estas listas podraacuten incluir cualquiera de los elementos HTML e incluso podemos definir listas anidadas es decir listas dentro de listas HTML nos permite crear tres tipos distintos de listas

bull Listas no numeradas

bull Listas numeradas

bull Listas de definiciones

Listas no numeradas ltULgt UL Unordered List

Con este tipo de listas podemos especificar una serie de elementos sin un orden predeterminado precedidos de una marca o vintildeeta que nosotros mismos podemos definir Para la definicioacuten de los liacutemites de la lista utilizaremos la etiqueta ltULgt ltULgt y para determinar cada uno de los elementos que la componen usaremos la etiqueta ltLIgt El formato es el siguiente

ltUL type=disk oacute circle oacute squaregtltLHgtTiacutetulo de la listaltLHgt

copy Grupo EIDOS 3 Elementos del lenguaje I

27

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltULgtLH List Head LI List Item

Con el atributo type vamos a especificar el tipo de marca o vintildeeta que antecederaacute a cada uno de los elementos de la lista Estas marcas podraacuten ser un disco (disk) un ciacuterculo (circle) o un cuadrado (square) La etiqueta ltLHgt nos va a servir para especificar un posible tiacutetulo de la lista siendo esta opcional Vamos a ver algunos ejemplos en la Tabla 20

Ejemplo Resultado

ltUL type=circlegtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAfricaltLIgtAmeacutericaltLIgtOceaniacutea

ltULgt

Los cinco continentes

Europa

Asia

Aacutefrica

Ameacuterica

Oceaniacutea

ltUL type=squaregtltLIgtEuropaltLIgtAsialtLIgtAfricaltLIgtAmeacutericaltUL type=circle gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltULgtltLIgtOceaniacutea

ltULgt

Europa

Asia

Aacutefrica

Ameacuterica

Ameacuterica del Norte

Ameacuterica del Sur

Oceaniacutea

Tabla 20

Listas numeradas ltOLgt OL Ordered List

Con este tipo de listas podemos especificar una serie de elementos numerados seguacuten el lugar que ocupan en la lista Para la definicioacuten de los liacutemites de la lista utilizaremos la etiqueta ltOLgt ltOLgt y para determinar cada uno de los elementos que la componen usaremos la etiqueta ltLIgt El formato es el siguiente

ltOL start=n type=Tipo de listagtltLHgtTiacutetulo de la listaltLHgt

Lenguaje HTML copy Grupo EIDOS

28

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltOLgt

Con el atributo start vamos a especificar el nuacutemero por el que va a empezar la lista Si no indicamos este argumento la lista empezaraacute a numerarse a partir del 1 Con el atributo type vamos a especificar el tipo de lista numerada Sus posibles valores aparecen a continuacioacuten y veremos algunos ejemplos en la Tabla 21

A Letras mayuacutesculas (A B C )

a Letras minuacutesculas (a b c )

I Nuacutemeros romanos en mayuacutesculas (I II III IV )

i Nuacutemeros romanos en minuacutesculas (i ii iii iv )

1 Numeacutericamente (1 2 3 4 ) (es la numeracioacuten por defecto y por tanto no habriacutea que indicarla)

Ejemplo Resultado

ltOL type=AgtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltLIgtOceaniacutea

ltOLgt

Los cinco continentes

A Europa

B Asia

C Aacutefrica

D Ameacuterica

E Oceaniacutea

ltOL type=I start=2gtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltOL type=i gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltOLgtltLIgtOceaniacutea

ltOLgt

II Europa

III Asia

IV Aacutefrica

V Ameacuterica

i Ameacuterica del Norte

ii Ameacuterica del Sur

VI Oceaniacutea

Tabla 21

copy Grupo EIDOS 3 Elementos del lenguaje I

29

Listas de definiciones ltDLgt DL Definition List

Estas listas nos van a servir para especificar una serie de teacuterminos y sus definiciones correspondientes Para la definicioacuten de la lista usaremos la etiqueta ltDLgt ltDLgt para especificar los teacuterminos usaremos la etiqueta ltDTgt y para especificar la definicioacuten correspondiente a cada teacutermino usaremos la etiqueta ltDDgt El formato es el siguiente

ltDLgtltLHgtTiacutetulo de la listaltLHgtltDTgtTeacutermino 1ltDDgtDefinicioacuten 1ltDTgtTeacutermino 2ltDDgtDefinicioacuten 2

ltDTgtTeacutermino nltDDgtDefinicioacuten n

ltDLgtDT Definition Term DD Definition Description

Vamos a ver un ejemplo en la Tabla 22

Ejemplo Resultado

ltDLgtltDTgtPariacutesltDDgtCapital de FrancialtDTgtRomaltDDgtCapital de ItalialtDTgtMadridltDDgtCapital de Espantildea

ltDLgt

Pariacutes

Capital de Francia

Roma

Capital de Italia

Madrid

Capital de Espantildea

Tabla 22

Hiperenlaces Los hiperenlaces son enlaces de hipertexto que nos van a permitir acceder de manera directa a otros documentos HTML independientemente de su ubicacioacuten o a otras zonas dentro de nuestro propio documento

Enlaces a otras paacuteginas ltA href=gt Con este tipo de hiperenlaces vamos a poder acceder tanto a otras paacuteginas que esteacuten ubicadas dentro de nuestro propio sistema como a paacuteginas ubicadas en puntos muy distantes del globo El formato de este tipo de hiperenlaces es

ltA href=URL a la que se accedegtTexto del hiperenlaceltAgt

Lenguaje HTML copy Grupo EIDOS

30

Con el atributo href vamos a especificar la URL del documento al que se pretende acceder El texto contenido entre las etiquetas de comienzo y fin nos va a servir para definir el hiperenlace por lo que deberiacutea ser clarificador del contenido del documento con el que vamos a enlazar Esta definicioacuten apareceraacute resaltada normalmente en azul y subrayada En la mayoriacutea de los navegadores esta definicioacuten del hiperenlace es sensible por lo que cuando el cursor pasa por encima del mismo este cambia de aspecto indicaacutendolo

Veamos un ejemplo en la Tabla 23

Ejemplo Resultado

ltA href=httpwwweidosesgtPaacutegina inicialde Villa EidosltAgt

Paacutegina inicial de Villa Eidos

Tabla 23

Si situamos el ratoacuten encima del hiperenlace y pulsamos el navegador accederaacute a la paacutegina Web indicada por href es decir accederaacute a la paacutegina situada en httpwwweidoses

Igualmente podriacuteamos indicar el hiperenlace por medio de una imagen Si esta imagen tiene definido un borde este apareceraacute resaltado en color azul El formato correspondiente seriacutea

ltA href=URL a la que se accedegtltIMG src=Imagengt y tambieacutentextoltAgtIMG Image src Source

Veamos un ejemplo en la Tabla 24

Ejemplo Resultado

ltA href=httpwwweidosesgtltIMGsrc=IconogifgtltAgt Villa Eidos Villa Eidos

Tabla 24

Si pulsamos sobre la imagen el navegador accederaacute a la paacutegina Web inicial de Villa Eidos

Enlaces dentro de la misma paacutegina ltA name=gt Este tipo de hiperenlaces nos va a permitir marcar distintas zonas del documento activo con el objeto de tener un acceso directo a las mismas Una buena utilidad de este tipo de enlaces radica en la creacioacuten de iacutendices para documentos largos de forma que si pinchamos en el hiperenlace correspondiente al tiacutetulo de un capiacutetulo determinado el navegador saltaraacute automaacuteticamente hasta el comienzo de dicho capiacutetulo

Para la creacioacuten de estos hiperenlaces debemos seguir dos pasos

copy Grupo EIDOS 3 Elementos del lenguaje I

31

1 Marcar las distintas zonas o secciones del documento Esto lo haremos con el paraacutemetro name

ltA name=Identificador de seccioacutengtTexto de laseccioacutenltAgt

A cada seccioacuten le asignaremos un identificador distinto para poder referenciarlas posteriormente de manera inequiacutevoca

2 Especificar un enlace a cada una de las secciones que hayamos definido ltA href=Identificador de seccioacutengtTexto del enlace a laseccioacutenltAgt

Si pinchamos en este enlace el navegador saltaraacute automaacuteticamente a la seccioacuten correspondiente Veamos un ejemplo sencillito en la Tabla 25 pero demostrativo de todo lo que acabamos de explicar

Ejemplo Resultado

ltA href=Cap1gtCapiacutetulo1ltAgtltA name=Cap1gtCapiacutetulo 1ltAgt

Capiacutetulo 1

Capiacutetulo 1

Tabla 25

Si nos creamos una paacutegina HTML con distintos capiacutetulos podriacuteamos crear una seccioacuten para cada uno de ellos de forma que si pinchamos en el hiperenlace correspondiente al Capiacutetulo 1 el navegador saltariacutea directamente a la seccioacuten correspondiente al Capiacutetulo 1

Ademaacutes de los dos tipos de hiperenlaces vistos podemos crear hiperenlaces que nos permitan acceder a cualquiera de los servicios de Internet Es decir podriacuteamos indicar enlaces a servidores FTP GOPHER NEWS MAILTO etc Para ello tendriacuteamos que indicar la URL correspondiente al servicio al cual queremos acceder como ya vimos en el primer capiacutetulo de este manual

Imaacutegenes

Podremos dar un aspecto mucho maacutes vistoso a nuestros documentos HTML con la inclusioacuten de imaacutegenes Los formatos de imagen que todos los navegadores reconocen son gif y jpg Si queremos insertar una imagen en otro formato el visor deberiacutea disponer del programa externo que permita su visualizacioacuten De todas formas una buena solucioacuten es utilizar alguacuten programa de tratamiento de imaacutegenes que nos convierta la imagen a uno de los formatos mencionados anteriormente

El formato gif es maacutes recomendado para la inclusioacuten de iconos graacuteficas y el formato jpg para el caso de insertar fotografiacuteas en nuestras paacuteginas

Lenguaje HTML copy Grupo EIDOS

32

La etiqueta que nos va a permitir la insercioacuten de imaacutegenes es ltIMGgt La imagen se insertaraacute justo en el punto del documento donde coloquemos dicha etiqueta pudiendo insertar imaacutegenes dentro de listas tablas o formularios

El formato de la etiqueta con sus posibles argumentos es el siguiente

ltIMG src=URL de la imagen alt=Texto alternativoalign=topmiddlebottonleftrigth border=Tamantildeoheight=Tamantildeo width=Tamantildeo hspace=margen vspace=margengt

bull src=URL de la imagen El atributo src nos va servir para indicar la URL de la imagen que

queremos insertar es decir el servidor y camino hasta llegar al fichero de la imagen

No seraacute necesario que la imagen que queremos insertar en nuestro documento esteacute en el ordenador local aunque siacute es recomendable ya que el acceso a las mismas puede ser maacutes lento

Por tanto es una buena praacutectica copiar todas las imaacutegenes que vayamos a incluir en nuestro documento HTML al ordenador local

Tabla 26

bull alt=Texto alternativo Nos va a permitir mostrar un texto alternativo para el caso en que el

navegador no sea capaz de mostrar la imagen Su uso es muy recomendable ya que cuando publiquemos nuestras paacuteginas en la WWW no sabremos desde queacute tipo de navegadores accederaacuten los internautas a nuestras paacuteginas

En la Tabla 27 vamos a ver un ejemplo

Si usas un navegador que no tiene ninguacuten problema para la visualizacioacuten de imaacutegenes desactiva temporalmente la opcioacuten de mostrar imaacutegenes prueba el ejemplo que muestra la Tabla 27 y compaacuteralo con el anterior

Tabla 27

copy Grupo EIDOS 3 Elementos del lenguaje I

33

bull align=topmiddlebotton leftrigth Nos permite indicar coacutemo se alinearaacute el texto que siga a la imagen

top alinea el texto con la parte superior de la imagen

middle con la parte central

bottom con la parte inferior

left imagen alineada a la izquierda de la paacutegina

rigth imagen alineada a la derecha de la paacutegina

Tabla 28

En el caso de que el texto que acompantildea a la imagen tenga maacutes de una liacutenea tan soacutelo la primera seraacute la que se alinearaacute seguacuten alguna de las anteriores alineaciones el resto de liacuteneas se incluiraacuten debajo de la imagen quedando un efecto bastante feo

Para solventar esto estaacuten las alineaciones LEFT (imagen alineada a la izquierda de la paacutegina) y RIGHT (imagen alineada a la derecha de la paacutegina) Las cuales permiten que la imagen se inserte dentro del paacuterrafo que la rodea produciendo un resultado mucho maacutes profesional en la integracioacuten de texto e imaacutegenes

Estas dos alineaciones no se podraacuten usar en combinacioacuten con las anteriores Veamos algunos ejemplos en la Tabla 29

Vemos como en el primer ejemplo la segunda liacutenea de texto aparece debajo de la imagen produciendo un efecto menos vistoso que en los dos ejemplos siguientes

Lenguaje HTML copy Grupo EIDOS

34

Tabla 29

bull border=Tamantildeo Permite antildeadirle un borde a la imagen del tamantildeo que le

especifiquemos

Si la imagen forma parte de un hiperenlace esta apareceraacute con un borde del color del hiperenlace Si no deseaacuteramos que aparezca este borde tendriacuteamos que especificar border=0

Tabla 30

bull height=Tamantildeo Permite especificar el alto de la imagen en puntos de pantalla

(pixels) o en del tamantildeo del documento

bull width=Tamantildeo Con este argumento especificaremos el ancho al que mostraremos la imagen en puntos de pantalla (pixels) o en del tamantildeo del documento

En el segundo de los ejemplos de la Tabla 31 el ancho de la imagen se ha extendido al 50 del total del ancho de la celda donde estaacute contenida la imagen Si pruebas este ejemplo en tu documento HTML la imagen se extenderaacute horizontalmente hasta ocupar el 50 del ancho de la paacutegina

copy Grupo EIDOS 3 Elementos del lenguaje I

35

Tabla 31

bull hspace=Margen hspace Horizontal Space Permite especificar el nuacutemero de espacios

horizontales (en puntos) que separaraacuten a la imagen de cualquier elemento que le siga o le anteceda

bull vspace=Margen vspace Vertical Space Con este argumento especificaremos el margen vertical (en puntos) que habraacute entre la imagen y cualquier otro elemento de nuestro documento

Tabla 32

Elementos del lenguaje II

Tablas HTML nos va a permitir la inclusioacuten de cualquiera de los elementos de nuestra paacutegina (texto imaacutegenes hiperenlaces listas etc) dentro de una tabla Gracias a lo cual conseguiremos dar una mayor y mejor estructuracioacuten a los contenidos de nuestros documentos Ademaacutes la definicioacuten de las tablas en HTML es muy abierta pudiendo en cualquier momento redimensionar la tabla es decir cambiar su nuacutemero de filas o de columnas cambiar el tamantildeo de alguna de sus celdas etc

La etiqueta que nos va a permitir la definicioacuten de tablas es ltTABLEgt ltTABLEgt

El formato general de la etiqueta sin ninguacuten argumento es el siguiente

ltTABLEgtltTR gt

ltTHgtContenido de la celda ltTHgtltTDgtContenido de la celda ltTDgt

ltTRgtltTABLEgt

TR Table Row TH Table Header TD Table Data

Vamos a analizar cada una de estas etiquetas de forma separada

1 ltTABLEgt ltTABLEgt Definicioacuten general de la tabla Dentro de ella definiremos las filas y columnas que la constituyen pudiendo incluso definir tablas dentro de tablas es decir tablas anidadas

Lenguaje HTML copy Grupo EIDOS

38

2 ltTRgt ltTRgt Definicioacuten de las filas de la tabla Por cada etiqueta ltTRgt que incluyamos se crearaacute una fila en la tabla No seraacute necesario indicar la etiqueta de cierre

3 ltTHgtltTHgt oacute ltTDgtltTDgt Definicioacuten de cada una de las celdas de la tabla Vemos que estas etiquetas estaacuten contenidas dentro de otra etiqueta de definicioacuten de fila de forma que por cada etiqueta ltTHgt o ltTDgt que incluyamos se crearaacute una celda dentro de la fila correspondiente La etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera es decir celdas cuyo contenido estaacute resaltado en negrita dejando la etiqueta ltTDgt para definir celdas de datos En este caso tampoco es necesario indicar las etiquetas de cierre

Todas estas etiquetas tienen sus respectivos argumentos Pero antes de analizar cada uno de ellos vamos a ver un ejemplo muy sencillito en la Tabla 33 que nos crearaacute una tabla de una sola celda (1 fila X 1 columna = 1 celda) Para ello usaremos la etiqueta de creacioacuten de tabla ltTABLEgt con el argumento border=1 (nos dibuja un borde de tamantildeo 1 alrededor de la tabla)

Ejemplo Resultado

ltTABLE border=1gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 33

Vamos ahora a analizar lo distintos argumentos que componen las etiquetas de la tabla analizaacutendolos desde lo general (la definicioacuten de la tabla) hasta lo especiacutefico (la definicioacuten de las celdas)

1 Definicioacuten de la tabla ltTABLEgt

ltTABLE border=n cellpadding=n cellspacing=n width=n oacute height=n oacute bgcolor=rrggbb oacute nombre gt

Contenido ltTABLEgt

bull border=n Si especificamos este argumento se dibujaraacute un borde alrededor de la

tabla del ancho que le indiquemos como muestra la Tabla 34

Ejemplo Resultado

Mi primera tabla ltTABLE border=4gtltTRgtltTDgtMi primera tablaltTABLEgt

Tabla 34

bull cellpadding=n Indica el espacio en puntos que separa el contenido de la celda con

el borde de la misma siendo 1 por defecto

copy Grupo EIDOS 4 Elementos del lenguaje II

39

Ejemplo Resultado

ltTABLE border=4 cellpadding=8gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 35

bull cellspacing=n Indica el espacio en puntos que separa a las celdas contenidas dentro de la tabla siendo 2 por defecto

bull width=n oacute Indica la anchura de la tabla en puntos o en en funcioacuten del ancho de la ventana del visualizador Si no indicamos este argumento el ancho de la tabla se ajustaraacute al tamantildeo del contenido de las celdas Esto es lo que ha ocurrido en el uacuteltimo ejemplo que hemos realizado Veamos un ejemplo en el Coacutedigo fuente 11 El resultado se muestra en la Tabla 36

ltTABLE border=4 width=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 11

Mi primera tabla

Tabla 36

bull height=n oacute Nos permite definir la altura de la tabla en puntos o en de la

altura de la ventana del visualizador Si indicamos este argumento lo recomendable es darlo en puntos ya que es maacutes complicado adecuarnos a la altura de la ventana del visualizador Al igual que en el caso anterior si no especificamos este argumento la altura se adecuaraacute al contenido de las celdas El Coacutedigo fuente 12 muestra un ejemplo y la Tabla 37 nos muestra el resultado

ltTABLE border=4 width=50 height=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 12

Mi primera tabla

Tabla 37

bull bgcolor= rrggbb o nombre del color Nos permite definir un color

de fondo para todas las celdas de la tabla Maacutes adelante veremos como podemos definir colores especiacuteficos para cada una de las celdas por separado

Lenguaje HTML copy Grupo EIDOS

40

Ejemplo Resultado

ltTABLE border=4 bgcolor=yellowgtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 38

2 Definicioacuten de las filas de la tabla ltTRgt

ltTR align=leftrightcenter valign=topmiddlebottombgcolor=rrggbb oacute nombregt

Antes de empezar a descifrar el significado de cada uno de los argumentos de esta etiqueta vamos a ver un ejemplo en la Tabla 39 de coacutemo se construiriacutea una tabla con dos filas (2 filas X 1 columna = 2 celdas)

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR gtltTDgtPrimera filaltTRgtltTDgtSegunda filaltTABLEgt

Segunda fila

Tabla 39

bull align=leftrightcenter Con este argumento vamos a indicar la alineacioacuten

horizontal (leftizquierda rightderecha centercentrado) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado Veamos un ejemplo en el Coacutedigo fuente 13 y su correspondiente resultado en la Tabla 40

ltTABLE border=4 width=50 gt ltTRgtltTDgtPrimera filaltTRalign=rightgtltTDgtSegunda filaltTABLEgt

Coacutedigo fuente 13

Primera fila

Segunda fila

Tabla 40

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten

vertical (toparriba middlecentrado bottomabajo) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado

copy Grupo EIDOS 4 Elementos del lenguaje II

41

bull bgcolor= rrggbb o nombre del color En este caso este argumento nos permitiraacute definir un color de fondo para todas las celdas de una fila veamos un ejemplo en la

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR bgcolor=yellowgtltTDgtPrimera

filaltTR bgcolor=greengtltTDgtSegunda

filaltTABLEgt

Segunda fila

Tabla 41

3 Definicioacuten de las celdas de la tabla ltTHgt oacute ltTDgt

ltTH oacute TD align=leftrightcenterjustifyvalign=topmiddlebottom bgcolor=rrggbb oacute nombre width=nrowspan=n colspan=ngt

Como ya explicamos anteriormente la etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera y la etiqueta ltTDgt para la creacioacuten de celdas de datos Vamos a completar nuestro ejemplo inicial antildeadieacutendole tres filas de dos celdas cada una (3 filas X 2 columnas = 6 celdas) Tabla 42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTDgtCelda 21ltTDgtCelda 22

ltTABLEgt Celda 21 Celda 22

Tabla 42

bull align=leftrightcenterjustify Con este argumento vamos a indicar la

alineacioacuten horizontal (left izquierda right derecha center centrado justifyjustificado) del contenido de cada celda por separado Su significado es el mismo que en la etiqueta ltTRgt

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten vertical (toparriba middlecentrado bottomabajo) del contenido de cada celda

bull bgcolor= rrggbb o nombre del color En este caso podremos definir un color de fondo para cada una de las celdas de manera independiente

bull width=n oacute Indica el ancho de la celda en puntos o en en funcioacuten del tamantildeo de la tabla

Lenguaje HTML copy Grupo EIDOS

42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera

1ltTHgtCabecera 2ltTR gtltTD align=rightgtCelda

11ltTD bgcolor=redgtCelda 12ltTRgtltTD

bgcolor=yellowgtCelda 21ltTDalign=centergtCelda 22ltTABLEgt

Celda 21 Celda 22

Tabla 43

bull rowspan=n Con este argumento podemos lograr que una celda concreta abarque maacutes de una fila ya sabemos que por defecto una celda ocupa una sola fila

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTD rowspan=2gtCelda

11ltTDgtCelda 12ltTRgtltTDgtCelda 22

ltTABLEgt

Celda 11 Celda 22

Tabla 44

bull colspan=n Con este argumento podemos lograr que una celda se expanda a maacutes

de una columna

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTD colspan=2

align=centergtCelda 22ltTABLEgt

Celda 22

Tabla 45

Para finalizar este tema sobre la creacioacuten de tablas vamos a ver el ejemplo que aparece en el Coacutedigo fuente 14 y su resultado en la Tabla 46

ltTABLE border=4gtltTR gtltTH colspan=3 bgcolor=redgtTiacutetuloltTR bgcolor=yellowgtltTHgtCabecera 1ltTHgtCabecera 2ltTHgtCabecera 3

copy Grupo EIDOS 4 Elementos del lenguaje II

43

ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTDgtCelda 13ltTRgtltTD rowspan=2gtCelda 21ltTD bgcolor=greengtCelda 22ltTDgtCelda 23ltTRgtltTDgtCelda 32ltTDgtCelda 33

ltTABLEgt

Coacutedigo fuente 14

Tiacutetulo

Cabecera 1 Cabecera 2 Cabecera 3

Celda 11 Celda 12 Celda 13

Celda 22 Celda 23 Celda 21

Celda 32 Celda 33

Tabla 46

Formularios El formulario es el elemento de HTML que nos va a permitir interactuar con los visitantes de nuestras paacuteginas web de forma que podemos solicitarle informacioacuten al usuario y procesarla De esta forma podremos crear en nuestras paacuteginas encuestas para solicitar la opinioacuten del visitante sobre alguacuten tema e incluso sobre el contenido de nuestra propia paacutegina web cuestionarios para evaluar la asimilacioacuten de contenidos sobre un tema concreto que se trate en la paacutegina etc

El contenido de la informacioacuten introducida por medio del formulario seraacute enviado a la direccioacuten URL donde resida el programa que se encargaraacute de procesar los datos A este tipo de programas externos se les denomina programas CGI (Common Gateway Interface)

La etiqueta HTML que nos va a permitir la creacioacuten de formularios es ltFORMgt Su formato es el siguiente

ltFORM action=URL del programa que trata el formulariomethod=postgetgt Elementos del formulario ltFORMgt

bull action=URL del programa que trata el formulario A traveacutes de este

argumento indicaremos como ya hemos mencionado la direccioacuten del fichero de programa que va a tratar la informacioacuten suministrada por el formulario

Tambieacuten podriacuteamos incluir como URL que trata el formulario una direccioacuten de correo electroacutenico Por tanto el valor de este argumento podriacutea ser action =mailto direccioacuten de correo

Nota Esta opcioacuten soacutelo funciona adecuadamente con el navegador Netscape Con el Explorer este enviacuteo dariacutea como resultado un correo en blanco Para que esta opcioacuten funcione de manera independiente del navegador que se esteacute utilizando se ha de emplear un programa externo que realice este proceso

Lenguaje HTML copy Grupo EIDOS

44

bull method=postget A traveacutes de este argumento indicaremos el meacutetodo empleado para transferir la informacioacuten generada por el formulario

Si indicamos post se produciraacute la modificacioacuten del documento destino como es el caso de enviar la informacioacuten a una direccioacuten de correo electroacutenico Mediante el meacutetodo get no se produciraacuten cambios en el documento destino

Dentro de un formulario podremos incluir cualquier texto o instruccioacuten HTML de las vistas a lo largo de los capiacutetulos anteriores ademaacutes claro estaacute de los elementos tiacutepicos de un formulario cajas de texto botones de seleccioacuten menuacutes de opciones etc Vamos a ver coacutemo se incluiraacuten estos elementos en un formulario

Entrada baacutesica de datos Para definir los distintos tipos de campos baacutesicos de entrada de datos usaremos la etiqueta ltINPUTgt

El formato es el siguiente

ltINPUT type= text password checkbox radio hidden submit image reset name=Variable value=Valor inicialgt

bull El argumento type determinaraacute el tipo de campo de entrada que estamos insertando A

continuacioacuten describiremos cada uno de ellos

bull El argumento name especifica el nombre de la variable que tomaraacute el valor introducido en el campo

bull El argumento value especifica el valor por defecto que tendraacute el campo

Vamos a continuacioacuten a describir los distintos tipos campos de entrada que vendraacuten dados por los valores del argumento type

Texto corto type=text

Con este argumento vamos a indicar que el campo a introducir seraacute un texto El formato seriacutea

ltINPUT type= text name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los nuevos atributos es

bull size=Tamantildeo Indicaremos el tamantildeo en caracteres de la ventana de introduccioacuten de texto

bull maxlength=Longitud maacutexima Indicaremos el nuacutemero maacuteximo de caracteres a introducir en el campo

Vamos a ver un ejemplo en la Tabla 47

copy Grupo EIDOS 4 Elementos del lenguaje II

45

Ejemplo Resultado

NombreltINPUT type=text name=Var1Value=Texto por defecto size=20 maxlength=25gt

Tabla 47

Claves type=password

Con este argumento indicamos que el campo a introducir seraacute una palabra clave por lo que los caracteres que se introduzcan seraacuten sustituidos por asteriscos en la visualizacioacuten por pantalla El formato es

ltINPUT type= password name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los distintos argumentos es el mismo que en el caso anterior Veamos un ejemplo en la Tabla 48

Ejemplo Resultado

ClaveltINPUT type=password name=Var2Value=tutankamon size=11 maxlength=10gt

Tabla 48

Botones de seleccioacuten type=checkbox

El checkbox es un botoacuten que presenta dos estados marcado (1) y desmarcado (0) Podremos variar su estado simplemente pinchando con el ratoacuten El formato es

ltINPUT type= checkbox name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto

Si incluimos el argumento value cuando el botoacuten esteacute marcado su variable asociada adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 49

Ejemplo Resultado

ltINPUT type=checkbox name=Var3 value=Op1 checkedgtOpcioacuten1 ltbrgtltINPUT type=checkbox name=Var4 value=Op2gt Opcioacuten 2

Tabla 49

Lenguaje HTML copy Grupo EIDOS

46

Seleccioacuten entre varias opciones type=radio

Este argumento se usa cuando hay que hacer una seleccioacuten entre varias alternativas excluyentes pudieacutendose seleccionar uacutenicamente una de las alternativas Debemos incluir una etiqueta radio por cada una de las posibles alternativas El formato es

ltINPUT type= radio name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto En este caso uacutenicamente uno de los botones de radio podraacute aparecer marcado ya que se usa para el caso de opciones excluyentes

Cuando un botoacuten esteacute seleccionado la variable asociada a la lista de botones adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 50

Ejemplo Resultado

ltINPUT type=radio name=Var5 value=Op1gtOpcioacuten1 ltbrgtltINPUT type=radio name=Var5 value=Op2checkedgt Opcioacuten 2 ltbrgtltINPUT type=radio name=Var5 value=Op3 gtOpcioacuten 3

Tabla 50

En este ejemplo la variable Var5 tendraacute el valor Op2

Campos ocultos type=hidden

Este tipo de campos no son visibles para el usuario Su uso tiene sentido en el caso de enviar alguacuten tipo de informacioacuten que no deba ser visualizada o variada por el lector de nuestra paacutegina Web El formato es

ltINPUT type= hidden name=Variable value=Valor gt

Con esta etiqueta asignariacuteamos a la Variable referenciada por name el Valor de value y se mandariacutea junto con el formulario sin que el usuario de la paacutegina se entere de nada Veamos un ejemplo en el Coacutedigo fuente 15

ltINPUT type=hidden name=Var6 value=tutankamongt

Coacutedigo fuente 15

copy Grupo EIDOS 4 Elementos del lenguaje II

47

Botoacuten de enviacuteo de datos type=submit

Con este argumento especificamos un botoacuten en el que al pulsar los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario El formato es

ltINPUT type= submit value=Mensaje a mostrargt

En este caso el paraacutemetro value indica el mensaje que se mostraraacute en el botoacuten Veamos un ejemplo en la Tabla 51

Ejemplo Resultado

ltINPUT type=submit value=Enviar los Datosgt

Tabla 51

Botoacuten graacutefico de enviacuteo de datos type=image

Con este argumento especificamos un botoacuten de tipo imagen en el que al igual que con el botoacuten anterior si pulsamos en la imagen los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario Su formato es el siguiente

ltINPUT type= image src=URL de la imagen name=Variablegt

Con el paraacutemetro src especificamos la URL de la imagen que seraacute insertada en el botoacuten En este caso en la variable referenciada por name se almacenaraacuten las coordenadas del punto de la imagen donde se halla pinchado (de forma que estas coordenadas podriacutean ser procesadas por el programa que recibe los datos del formulario)

Botoacuten de borrado de datos type=reset

Con este argumento especificamos un botoacuten que al ser pulsado borraraacute el contenido actual de todos los campos dejaacutendolos con sus valores por defecto Su formato es

ltINPUT type= reset value=Texto del botoacutengt

Con el paraacutemetro value especificamos el texto que etiquetaraacute al botoacuten

Ejemplo Resultado

ltINPUT type=reset value=Borrar datosgt

Tabla 52

Lenguaje HTML copy Grupo EIDOS

48

Entrada datos en muacuteltiples liacuteneas En un formulario tambieacuten podremos introducir un campo de texto que abarque varias liacuteneas Para ello usaremos la etiqueta ltTEXTAREAgt ltTEXTAREAgt Su formato es el siguiente

ltTEXTAREA name=Variable rows=Filas cols=ColumnasgtContenido por defectoltTEXTAREAgt

Los argumentos rows y cols nos van a permitir especificar respectivamente el nuacutemero de filas de texto visibles y el nuacutemero de columnas de texto visibles en el campo

Ejemplo Resultado

ltTEXTAREA name=Var7 rows=5 cols=40gtContenido por defectoltTEXTAREAgt

Tabla 53

Entrada de datos a traveacutes de campos de seleccioacuten Con los campos de seleccioacuten podremos desplegar una lista de opciones entre las que podremos seleccionar una Para ello usaremos la etiqueta ltSELECTgt ltSELECTgt Su formato es el siguiente

ltSELECT name=Variable multiple size=ngtltOPTION selected value=Valor_1gtPrimera OpcioacutenltOPTION value=Valor_2gtSegunda Opcioacuten

ltOPTION value=Valor_ngtEneacutesima Opcioacuten

ltSELECTgt

Figura 1

bull La variable referenciada por name tomaraacute el valor(value) de la opcioacuten seleccionada

bull Si especificamos el argumento muacuteltiple se mostraraacuten todas la opciones en forma de tabla El nuacutemero de opciones visibles en la tabla vendraacute dado por el argumento size

copy Grupo EIDOS 4 Elementos del lenguaje II

49

bull Con la etiqueta ltOPTIONgt iremos definiendo cada una de las opciones de la lista

bull El argumento selected va a determinar cuaacutel es la opcioacuten por defecto

Para finalizar vamos a ver el Coacutedigo fuente 16 correspondiente a una encuesta realizada por la editorial ficticia EditoPc y en la Figura 2 observamos el resultado del formulario

ltP align=centergtltBgtEDITORIAL ltIgtEditoPcltIgtltBgtltPgtltFORM action=mailtodireccionejemplo method = postgtNombreltINPUT type=text size=30 name=nombregtltBRgtE_mail ltINPUT type=text size=30 name=e_mailgtltPgtDeseas recibir informacioacuten sobreltINPUT type=checkbox name=infor1 value=InternetgtInternetltINPUT type=checkbox name=infor2 value=ProgramacioacutengtProgramacioacutenltINPUT type=checkbox name=infor3 value=SistOperativogtSistOperativoltINPUT type=checkbox name=infor4 value=OfimaacuteticagtOfimaacuteticaltPgtiquestTe conectas a Internet desde casa ltbrgtltINPUT type=radio name=intercasa value=sigtSiacuteltINPUT type=radio name=intercasa value=nogtNoltPgtiquestQueacute uso le das a tu ordenador ltBRgtltSELECT name=uso multiple size=3gtltOPTION selectedgtProfesionalltOPTIONgtDomeacutesticoltOPTIONgtOcioJuegosltSELECTgtltPgtCaracteriacutesticas de tu PCltBRgtltTEXTAREA name=caract rows=5 cols=40gtltTEXTAREAgtltPgtltINPUT type=submit value=Enviar datosgt ltINPUT type=reset value=Borrardatosgt

Coacutedigo fuente 16

Figura 2

Elementos del lenguaje III

Frames Las frames son una utilidad del HTML que nos permite dividir la ventana del navegador en diferentes subventanas que podraacuten ser manipuladas de manera independiente Esto nos permitiraacute mostrar una paacutegina web diferente en cada una de la subventanas o frames

Estructura de un documento con frames Un documento con frames se estructura de manera diferente a un documento HTML normal Asiacute en este tipo de documentos no apareceraacute la etiqueta ltBODYgt En su lugar se incluiraacute la etiqueta ltFRAMESETgt ltFRAMESETgt dentro de la cual se definiraacuten las distintas frames que se incluyan en el documento

La estructura general de un documento de este tipo seriacutea por tanto

ltHTMLgtltHEADgtCabeceraltHEADgtltFRAMESETgt

Definicioacuten de la distintas framesltFRAMESETgtltNOFRAMESgt

Instrucciones HTMLltNOFRAMESgt

ltHTMLgt

Lenguaje HTML copy Grupo EIDOS

52

Puede darse el caso de que programemos nuestro documento con frames siguiendo la estructura anterior y que el navegador que se use para leer el documento no soporte la caracteriacutestica de frames con lo cual no se mostraraacute nada de lo indicado entre las etiquetas ltFRAMESETgt y ltFRAMESETgtPara solucionar este problema todas las instrucciones HTML incluidas entre las etiquetas ltNOFRAMESgt y ltNOFRAMESgt seraacuten ejecutadas por los navegadores que no soportan las frames

La sintaxis de la etiqueta ltFRAMESETgt es

ltFRAMESET rows=Lista de filas cols=Lista de columnasgtltFRAME src=URL de la frame 1 name=Nombre de la frame 1gtltFRAME src=URL de la frame 2 name=Nombre de la frame 2gt

ltFRAME src=URL de la frame n name=Nombre de la frame ngt

ltFRAMESETgt

Como vemos por cada una de la frames que incluyamos en nuestro documento debemos incluir una etiqueta ltFRAMEgt indicando mediante sus argumentos la direccioacuten URL del documento que se insertaraacute en la subventana (src) y el nombre de la frame (name) Posteriormente describiremos la etiqueta ltFRAMEgt con maacutes detalle

Los argumentos de ltFRAMESETgt son rows y cols definieacutendose uacutenicamente uno de los dos atributos en funcioacuten de si la divisioacuten de la pantalla se realizaraacute por filas (rows) o por columnas (cols)

Por cada una de las subventanas que creemos debemos especificar su tamantildeo en puntos o en porcentaje del tamantildeo de cada subventana Asiacute por ejemplo si especificamos rows= 50 2525 crearemos tres subventanas horizontales ocupando la primera el 50 de la ventana principal y las otras dos el resto Si especificamos cols=100150 crearemos tres subventanas verticales ocupando la primera 100 puntos de la ventana principal la segunda 150 puntos y tercera el espacio restante

Vamos a verlo maacutes claramente con un par de ejemplos praacutecticos que vemos en la Tabla 54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 502525gt ltFRAMEsrc=Pagweb1htm name=Pagweb1gtltFRAMEsrc=Pagweb2htm name=Pagweb2gtltFRAMEsrc=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 18: Programacion web   lenguaje html

copy Grupo EIDOS 2 Cabecera y cuerpo del documento HTML

21

Ejemplo Resultado

ltHRgt

ltHR size=3 noshadegt

ltHR size=5width=50align=rightgt

ltHR size=10width=50align=centergt

Tabla 11

Texto preformateado ltPREgt PRE Preformatted Nos permitiraacute visualizar el texto tal y como se ha escrito respetando los saltos de liacutenea las tabulaciones y espacios en blanco de todo el texto incluido entre las etiquetas ltPREgt y ltPREgt

El texto se mostraraacute con una fuente de espaciado fijo maacutes pequentildea que el texto normal No es recomendable su uso ya que presenta muchas limitaciones y no se obtiene una buena presentacioacuten

Ejemplo Resultado

ltPREgtEste texto estaacutepreformateadoltPREgt

Este texto estaacute preformateado

Tabla 12

Elementos del lenguaje I

Cabeceras y atributos de texto

Cabeceras ltH1gtltH6gt H Heading En un documento HTML podemos incluir seis tipos distintos de cabeceras que van a constituir normalmente el tiacutetulo y los distintos subapartados que forman el documento aunque podremos utilizarlas en el punto que queramos del documento para resaltar cualquier texto Estas cabeceras son definidas por las etiquetas ltH1gtltH2gtltH3gtltH4gtltH5gt y ltH6gt El texto que componga cada cabecera deberaacute estar incluido entre las etiquetas de inicio (ltHngt) y fin (Hn) correspondiente La cabecera ltH1gtseraacute la que muestre el texto de mayor tamantildeo este tamantildeo iraacute disminuyendo hasta llegar a la cabecera ltH6gt Como podemos ver en la Tabla 13 Para alinear las cabeceras utilizamos el atributo align El formato seriacutea ltHn align=centergt como muestra la Tabla 14

Ejemplo Resultado

ltH1gtCabecera 1ltH1gt Cabecera 1 ltH2gtCabecera 2ltH2gt Cabecera 2

Lenguaje HTML copy Grupo EIDOS

24

ltH3gtCabecera 3ltH3gt Cabecera 3

ltH4gtCabecera 4ltH4gt Cabecera 4

ltH5gtCabecera 5ltH5gtCabecera 5

ltH6gtCabecera 6ltH6gtCabecera 6

Tabla 13

Ejemplo Resultado

ltH5 align=centergtCabecera 5ltH5gtCabecera 5

Tabla 14

Atributos del texto Al texto de nuestro documento HTML le podemos aplicar distintos atributos (negrita cursiva subrayado etc) al igual que hacemos cuando trabajamos con el procesador de textos en la edicioacuten de nuestros documentos Para aplicar estos atributos disponemos de distintas etiquetas que aplicaraacuten su efecto al texto incluido entre sus indicadores de inicio y fin Las vemos en la Tabla 15

Atributo Etiqueta Ejemplo Resultado

Negrita ltBgtltBgtltBgtTexto ennegritaltBgt

Texto en negrita

Cursiva ltIgtltIgtltIgtTexto encursivaltIgt

Texto en cursiva

Teletype ltTTgtltTTgtltTTgtTexto en modoteletypeltTTgt

Texto en modoteletype

Subrayado ltUgtltUgt ltUgtTexto subrayadoltUgt Texto subrayado Tachado ltSgtltSgt ltSgtTexto tachadoltSgt Texto tachado

Parpadeo ltBLINKgtltBLINKgtltBLINKgtTextoparpadeandoltBLINKgt

Texto parpadeando

Superiacutendice ltSUPgtltSUPgt ltSUPgtTexto en modosuperiacutendiceltSUPgt

Texto en modo superiacutendice

Subiacutendice ltSUBgtltSUBgtltSUBgtTexto en modosubiacutendiceltSUBgt

Texto en modo subiacutendice

Centrado ltCENTERgtltCENTERgt

ltCENTERgtTextocentradoltCENTERgt

Texto centrado

B Bold I Italic TT Teletype U Underlined S Strike SUP Superscript SUB Subscript

Tabla 15

copy Grupo EIDOS 3 Elementos del lenguaje I

25

Alguna de estas etiquetas no es reconocida por determinados navegadores Asiacute por ejemplo la etiqueta ltBLINKgt (Parpadeo) no es implementada por el Explorer Por lo que seguacuten el explorador que estemos utilizando podremos ver el resultado correctamente o no

Existen otras etiquetas que nos van a servir para especificar de manera diferenciada unidades loacutegicas de nuestro documento HTML tales como citas direcciones de correo etc En algunos casos el formato obtenido con estas etiquetas de estilo loacutegico va a ser el mismo que con las anteriores a las que se les denomina tambieacuten etiquetas de estilo fiacutesico Algunas etiquetas de estilo loacutegico las vemos en la Tabla 16

Etiqueta Ejemplo Resultado

ltSTRONGgtltSTRONGgtltSTRONGgtEspecifica textoresaltado (igualltBgt)ltSTRONGgt

Especifica texto resaltado(igual ltBgt)

ltCITEgtltCITEgtltCITEgtIndica una cita otiacutetulo (igual ltIgt)ltCITEgt

Indica una cita o tiacutetulo (igualltIgt)

ltSTRIKEgtltSTRIKEgtltltSTRIKEgtTexto tachado(igual ltSgt)ltSTRIKEgt

Texto tachado (igual ltSgt)

Tabla 16

Si queremos aplicar efectos maacutes espectaculares a nuestro documento HTML debemos variar el tamantildeo el color y el tipo de letra del texto La etiqueta que nos permite todo esto es ltFONTgtltFONTgt por medio de sus atributos size color y face

ltFONT size=n oacute +- n color=rrggbb oacute name face=nombre defont gt

bull size=n oacute +- n El atributo size nos permite especificar un tamantildeo determinado

para la fuente del texto incluido entre las etiquetas de inicio y fin el cual puede estar entre 1 y 7 El texto de tamantildeo normal equivale a la fuente de tamantildeo 3 (fuente base) Por tanto si especificamos size=+2 el tamantildeo de la fuente seraacute 5 Y si especificamos size= -1 el tamantildeo seraacute 2

Ejemplo Resultado

ltFONT size=2gtTamantildeo 2ltFONTgtTamantildeo 2

ltFONT size=+2gtTamantildeo 5 (3+2)ltFONTgt Tamantildeo 5 (3+2)

ltFONT size=-1gtTamantildeo 2 (3-1)ltFONTgtTamantildeo 2 (3-1)

Tabla 17

bull color=rrggbb oacute name Nos va a permitir definir el color que tendraacute el texto

incluido entre las etiquetas Tabla 18

Lenguaje HTML copy Grupo EIDOS

26

Ejemplo Resultado

ltFONT color=redgtTexto de colorrojoltFONTgt

Texto de color rojo

ltFONT color=bluegtTexto de colorazulltFONTgt

Texto de color azul

ltFONT size=5 color=008000gtTextoverde y de tamantildeo 5ltFONTgt

Texto verde y detamantildeo 5

Tabla 18

bull face=nombre de font Nos va a permitir escribir texto con el tipo de letra que le

especifiquemos En el caso de que el tipo de letra que le hayamos especificado no esteacute cargada en el ordenador que lee la paacutegina se usaraacute el font por defecto del navegador

Ejemplo Resultado

ltFONT face=TahomagtTipo de letraTahomaltFONTgt

Tipo de letra Tahoma

ltFONT size=4 color=blueface=TahomagtTexto azul de tamantildeo4 y TahomaltFONTgt

Texto azul de tamantildeo 4 y Tahoma

Tabla 19

Listas Podemos representar elementos en forma de lista dentro de nuestros documentos de una forma muy sencilla y con una gran versatilidad Estas listas podraacuten incluir cualquiera de los elementos HTML e incluso podemos definir listas anidadas es decir listas dentro de listas HTML nos permite crear tres tipos distintos de listas

bull Listas no numeradas

bull Listas numeradas

bull Listas de definiciones

Listas no numeradas ltULgt UL Unordered List

Con este tipo de listas podemos especificar una serie de elementos sin un orden predeterminado precedidos de una marca o vintildeeta que nosotros mismos podemos definir Para la definicioacuten de los liacutemites de la lista utilizaremos la etiqueta ltULgt ltULgt y para determinar cada uno de los elementos que la componen usaremos la etiqueta ltLIgt El formato es el siguiente

ltUL type=disk oacute circle oacute squaregtltLHgtTiacutetulo de la listaltLHgt

copy Grupo EIDOS 3 Elementos del lenguaje I

27

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltULgtLH List Head LI List Item

Con el atributo type vamos a especificar el tipo de marca o vintildeeta que antecederaacute a cada uno de los elementos de la lista Estas marcas podraacuten ser un disco (disk) un ciacuterculo (circle) o un cuadrado (square) La etiqueta ltLHgt nos va a servir para especificar un posible tiacutetulo de la lista siendo esta opcional Vamos a ver algunos ejemplos en la Tabla 20

Ejemplo Resultado

ltUL type=circlegtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAfricaltLIgtAmeacutericaltLIgtOceaniacutea

ltULgt

Los cinco continentes

Europa

Asia

Aacutefrica

Ameacuterica

Oceaniacutea

ltUL type=squaregtltLIgtEuropaltLIgtAsialtLIgtAfricaltLIgtAmeacutericaltUL type=circle gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltULgtltLIgtOceaniacutea

ltULgt

Europa

Asia

Aacutefrica

Ameacuterica

Ameacuterica del Norte

Ameacuterica del Sur

Oceaniacutea

Tabla 20

Listas numeradas ltOLgt OL Ordered List

Con este tipo de listas podemos especificar una serie de elementos numerados seguacuten el lugar que ocupan en la lista Para la definicioacuten de los liacutemites de la lista utilizaremos la etiqueta ltOLgt ltOLgt y para determinar cada uno de los elementos que la componen usaremos la etiqueta ltLIgt El formato es el siguiente

ltOL start=n type=Tipo de listagtltLHgtTiacutetulo de la listaltLHgt

Lenguaje HTML copy Grupo EIDOS

28

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltOLgt

Con el atributo start vamos a especificar el nuacutemero por el que va a empezar la lista Si no indicamos este argumento la lista empezaraacute a numerarse a partir del 1 Con el atributo type vamos a especificar el tipo de lista numerada Sus posibles valores aparecen a continuacioacuten y veremos algunos ejemplos en la Tabla 21

A Letras mayuacutesculas (A B C )

a Letras minuacutesculas (a b c )

I Nuacutemeros romanos en mayuacutesculas (I II III IV )

i Nuacutemeros romanos en minuacutesculas (i ii iii iv )

1 Numeacutericamente (1 2 3 4 ) (es la numeracioacuten por defecto y por tanto no habriacutea que indicarla)

Ejemplo Resultado

ltOL type=AgtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltLIgtOceaniacutea

ltOLgt

Los cinco continentes

A Europa

B Asia

C Aacutefrica

D Ameacuterica

E Oceaniacutea

ltOL type=I start=2gtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltOL type=i gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltOLgtltLIgtOceaniacutea

ltOLgt

II Europa

III Asia

IV Aacutefrica

V Ameacuterica

i Ameacuterica del Norte

ii Ameacuterica del Sur

VI Oceaniacutea

Tabla 21

copy Grupo EIDOS 3 Elementos del lenguaje I

29

Listas de definiciones ltDLgt DL Definition List

Estas listas nos van a servir para especificar una serie de teacuterminos y sus definiciones correspondientes Para la definicioacuten de la lista usaremos la etiqueta ltDLgt ltDLgt para especificar los teacuterminos usaremos la etiqueta ltDTgt y para especificar la definicioacuten correspondiente a cada teacutermino usaremos la etiqueta ltDDgt El formato es el siguiente

ltDLgtltLHgtTiacutetulo de la listaltLHgtltDTgtTeacutermino 1ltDDgtDefinicioacuten 1ltDTgtTeacutermino 2ltDDgtDefinicioacuten 2

ltDTgtTeacutermino nltDDgtDefinicioacuten n

ltDLgtDT Definition Term DD Definition Description

Vamos a ver un ejemplo en la Tabla 22

Ejemplo Resultado

ltDLgtltDTgtPariacutesltDDgtCapital de FrancialtDTgtRomaltDDgtCapital de ItalialtDTgtMadridltDDgtCapital de Espantildea

ltDLgt

Pariacutes

Capital de Francia

Roma

Capital de Italia

Madrid

Capital de Espantildea

Tabla 22

Hiperenlaces Los hiperenlaces son enlaces de hipertexto que nos van a permitir acceder de manera directa a otros documentos HTML independientemente de su ubicacioacuten o a otras zonas dentro de nuestro propio documento

Enlaces a otras paacuteginas ltA href=gt Con este tipo de hiperenlaces vamos a poder acceder tanto a otras paacuteginas que esteacuten ubicadas dentro de nuestro propio sistema como a paacuteginas ubicadas en puntos muy distantes del globo El formato de este tipo de hiperenlaces es

ltA href=URL a la que se accedegtTexto del hiperenlaceltAgt

Lenguaje HTML copy Grupo EIDOS

30

Con el atributo href vamos a especificar la URL del documento al que se pretende acceder El texto contenido entre las etiquetas de comienzo y fin nos va a servir para definir el hiperenlace por lo que deberiacutea ser clarificador del contenido del documento con el que vamos a enlazar Esta definicioacuten apareceraacute resaltada normalmente en azul y subrayada En la mayoriacutea de los navegadores esta definicioacuten del hiperenlace es sensible por lo que cuando el cursor pasa por encima del mismo este cambia de aspecto indicaacutendolo

Veamos un ejemplo en la Tabla 23

Ejemplo Resultado

ltA href=httpwwweidosesgtPaacutegina inicialde Villa EidosltAgt

Paacutegina inicial de Villa Eidos

Tabla 23

Si situamos el ratoacuten encima del hiperenlace y pulsamos el navegador accederaacute a la paacutegina Web indicada por href es decir accederaacute a la paacutegina situada en httpwwweidoses

Igualmente podriacuteamos indicar el hiperenlace por medio de una imagen Si esta imagen tiene definido un borde este apareceraacute resaltado en color azul El formato correspondiente seriacutea

ltA href=URL a la que se accedegtltIMG src=Imagengt y tambieacutentextoltAgtIMG Image src Source

Veamos un ejemplo en la Tabla 24

Ejemplo Resultado

ltA href=httpwwweidosesgtltIMGsrc=IconogifgtltAgt Villa Eidos Villa Eidos

Tabla 24

Si pulsamos sobre la imagen el navegador accederaacute a la paacutegina Web inicial de Villa Eidos

Enlaces dentro de la misma paacutegina ltA name=gt Este tipo de hiperenlaces nos va a permitir marcar distintas zonas del documento activo con el objeto de tener un acceso directo a las mismas Una buena utilidad de este tipo de enlaces radica en la creacioacuten de iacutendices para documentos largos de forma que si pinchamos en el hiperenlace correspondiente al tiacutetulo de un capiacutetulo determinado el navegador saltaraacute automaacuteticamente hasta el comienzo de dicho capiacutetulo

Para la creacioacuten de estos hiperenlaces debemos seguir dos pasos

copy Grupo EIDOS 3 Elementos del lenguaje I

31

1 Marcar las distintas zonas o secciones del documento Esto lo haremos con el paraacutemetro name

ltA name=Identificador de seccioacutengtTexto de laseccioacutenltAgt

A cada seccioacuten le asignaremos un identificador distinto para poder referenciarlas posteriormente de manera inequiacutevoca

2 Especificar un enlace a cada una de las secciones que hayamos definido ltA href=Identificador de seccioacutengtTexto del enlace a laseccioacutenltAgt

Si pinchamos en este enlace el navegador saltaraacute automaacuteticamente a la seccioacuten correspondiente Veamos un ejemplo sencillito en la Tabla 25 pero demostrativo de todo lo que acabamos de explicar

Ejemplo Resultado

ltA href=Cap1gtCapiacutetulo1ltAgtltA name=Cap1gtCapiacutetulo 1ltAgt

Capiacutetulo 1

Capiacutetulo 1

Tabla 25

Si nos creamos una paacutegina HTML con distintos capiacutetulos podriacuteamos crear una seccioacuten para cada uno de ellos de forma que si pinchamos en el hiperenlace correspondiente al Capiacutetulo 1 el navegador saltariacutea directamente a la seccioacuten correspondiente al Capiacutetulo 1

Ademaacutes de los dos tipos de hiperenlaces vistos podemos crear hiperenlaces que nos permitan acceder a cualquiera de los servicios de Internet Es decir podriacuteamos indicar enlaces a servidores FTP GOPHER NEWS MAILTO etc Para ello tendriacuteamos que indicar la URL correspondiente al servicio al cual queremos acceder como ya vimos en el primer capiacutetulo de este manual

Imaacutegenes

Podremos dar un aspecto mucho maacutes vistoso a nuestros documentos HTML con la inclusioacuten de imaacutegenes Los formatos de imagen que todos los navegadores reconocen son gif y jpg Si queremos insertar una imagen en otro formato el visor deberiacutea disponer del programa externo que permita su visualizacioacuten De todas formas una buena solucioacuten es utilizar alguacuten programa de tratamiento de imaacutegenes que nos convierta la imagen a uno de los formatos mencionados anteriormente

El formato gif es maacutes recomendado para la inclusioacuten de iconos graacuteficas y el formato jpg para el caso de insertar fotografiacuteas en nuestras paacuteginas

Lenguaje HTML copy Grupo EIDOS

32

La etiqueta que nos va a permitir la insercioacuten de imaacutegenes es ltIMGgt La imagen se insertaraacute justo en el punto del documento donde coloquemos dicha etiqueta pudiendo insertar imaacutegenes dentro de listas tablas o formularios

El formato de la etiqueta con sus posibles argumentos es el siguiente

ltIMG src=URL de la imagen alt=Texto alternativoalign=topmiddlebottonleftrigth border=Tamantildeoheight=Tamantildeo width=Tamantildeo hspace=margen vspace=margengt

bull src=URL de la imagen El atributo src nos va servir para indicar la URL de la imagen que

queremos insertar es decir el servidor y camino hasta llegar al fichero de la imagen

No seraacute necesario que la imagen que queremos insertar en nuestro documento esteacute en el ordenador local aunque siacute es recomendable ya que el acceso a las mismas puede ser maacutes lento

Por tanto es una buena praacutectica copiar todas las imaacutegenes que vayamos a incluir en nuestro documento HTML al ordenador local

Tabla 26

bull alt=Texto alternativo Nos va a permitir mostrar un texto alternativo para el caso en que el

navegador no sea capaz de mostrar la imagen Su uso es muy recomendable ya que cuando publiquemos nuestras paacuteginas en la WWW no sabremos desde queacute tipo de navegadores accederaacuten los internautas a nuestras paacuteginas

En la Tabla 27 vamos a ver un ejemplo

Si usas un navegador que no tiene ninguacuten problema para la visualizacioacuten de imaacutegenes desactiva temporalmente la opcioacuten de mostrar imaacutegenes prueba el ejemplo que muestra la Tabla 27 y compaacuteralo con el anterior

Tabla 27

copy Grupo EIDOS 3 Elementos del lenguaje I

33

bull align=topmiddlebotton leftrigth Nos permite indicar coacutemo se alinearaacute el texto que siga a la imagen

top alinea el texto con la parte superior de la imagen

middle con la parte central

bottom con la parte inferior

left imagen alineada a la izquierda de la paacutegina

rigth imagen alineada a la derecha de la paacutegina

Tabla 28

En el caso de que el texto que acompantildea a la imagen tenga maacutes de una liacutenea tan soacutelo la primera seraacute la que se alinearaacute seguacuten alguna de las anteriores alineaciones el resto de liacuteneas se incluiraacuten debajo de la imagen quedando un efecto bastante feo

Para solventar esto estaacuten las alineaciones LEFT (imagen alineada a la izquierda de la paacutegina) y RIGHT (imagen alineada a la derecha de la paacutegina) Las cuales permiten que la imagen se inserte dentro del paacuterrafo que la rodea produciendo un resultado mucho maacutes profesional en la integracioacuten de texto e imaacutegenes

Estas dos alineaciones no se podraacuten usar en combinacioacuten con las anteriores Veamos algunos ejemplos en la Tabla 29

Vemos como en el primer ejemplo la segunda liacutenea de texto aparece debajo de la imagen produciendo un efecto menos vistoso que en los dos ejemplos siguientes

Lenguaje HTML copy Grupo EIDOS

34

Tabla 29

bull border=Tamantildeo Permite antildeadirle un borde a la imagen del tamantildeo que le

especifiquemos

Si la imagen forma parte de un hiperenlace esta apareceraacute con un borde del color del hiperenlace Si no deseaacuteramos que aparezca este borde tendriacuteamos que especificar border=0

Tabla 30

bull height=Tamantildeo Permite especificar el alto de la imagen en puntos de pantalla

(pixels) o en del tamantildeo del documento

bull width=Tamantildeo Con este argumento especificaremos el ancho al que mostraremos la imagen en puntos de pantalla (pixels) o en del tamantildeo del documento

En el segundo de los ejemplos de la Tabla 31 el ancho de la imagen se ha extendido al 50 del total del ancho de la celda donde estaacute contenida la imagen Si pruebas este ejemplo en tu documento HTML la imagen se extenderaacute horizontalmente hasta ocupar el 50 del ancho de la paacutegina

copy Grupo EIDOS 3 Elementos del lenguaje I

35

Tabla 31

bull hspace=Margen hspace Horizontal Space Permite especificar el nuacutemero de espacios

horizontales (en puntos) que separaraacuten a la imagen de cualquier elemento que le siga o le anteceda

bull vspace=Margen vspace Vertical Space Con este argumento especificaremos el margen vertical (en puntos) que habraacute entre la imagen y cualquier otro elemento de nuestro documento

Tabla 32

Elementos del lenguaje II

Tablas HTML nos va a permitir la inclusioacuten de cualquiera de los elementos de nuestra paacutegina (texto imaacutegenes hiperenlaces listas etc) dentro de una tabla Gracias a lo cual conseguiremos dar una mayor y mejor estructuracioacuten a los contenidos de nuestros documentos Ademaacutes la definicioacuten de las tablas en HTML es muy abierta pudiendo en cualquier momento redimensionar la tabla es decir cambiar su nuacutemero de filas o de columnas cambiar el tamantildeo de alguna de sus celdas etc

La etiqueta que nos va a permitir la definicioacuten de tablas es ltTABLEgt ltTABLEgt

El formato general de la etiqueta sin ninguacuten argumento es el siguiente

ltTABLEgtltTR gt

ltTHgtContenido de la celda ltTHgtltTDgtContenido de la celda ltTDgt

ltTRgtltTABLEgt

TR Table Row TH Table Header TD Table Data

Vamos a analizar cada una de estas etiquetas de forma separada

1 ltTABLEgt ltTABLEgt Definicioacuten general de la tabla Dentro de ella definiremos las filas y columnas que la constituyen pudiendo incluso definir tablas dentro de tablas es decir tablas anidadas

Lenguaje HTML copy Grupo EIDOS

38

2 ltTRgt ltTRgt Definicioacuten de las filas de la tabla Por cada etiqueta ltTRgt que incluyamos se crearaacute una fila en la tabla No seraacute necesario indicar la etiqueta de cierre

3 ltTHgtltTHgt oacute ltTDgtltTDgt Definicioacuten de cada una de las celdas de la tabla Vemos que estas etiquetas estaacuten contenidas dentro de otra etiqueta de definicioacuten de fila de forma que por cada etiqueta ltTHgt o ltTDgt que incluyamos se crearaacute una celda dentro de la fila correspondiente La etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera es decir celdas cuyo contenido estaacute resaltado en negrita dejando la etiqueta ltTDgt para definir celdas de datos En este caso tampoco es necesario indicar las etiquetas de cierre

Todas estas etiquetas tienen sus respectivos argumentos Pero antes de analizar cada uno de ellos vamos a ver un ejemplo muy sencillito en la Tabla 33 que nos crearaacute una tabla de una sola celda (1 fila X 1 columna = 1 celda) Para ello usaremos la etiqueta de creacioacuten de tabla ltTABLEgt con el argumento border=1 (nos dibuja un borde de tamantildeo 1 alrededor de la tabla)

Ejemplo Resultado

ltTABLE border=1gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 33

Vamos ahora a analizar lo distintos argumentos que componen las etiquetas de la tabla analizaacutendolos desde lo general (la definicioacuten de la tabla) hasta lo especiacutefico (la definicioacuten de las celdas)

1 Definicioacuten de la tabla ltTABLEgt

ltTABLE border=n cellpadding=n cellspacing=n width=n oacute height=n oacute bgcolor=rrggbb oacute nombre gt

Contenido ltTABLEgt

bull border=n Si especificamos este argumento se dibujaraacute un borde alrededor de la

tabla del ancho que le indiquemos como muestra la Tabla 34

Ejemplo Resultado

Mi primera tabla ltTABLE border=4gtltTRgtltTDgtMi primera tablaltTABLEgt

Tabla 34

bull cellpadding=n Indica el espacio en puntos que separa el contenido de la celda con

el borde de la misma siendo 1 por defecto

copy Grupo EIDOS 4 Elementos del lenguaje II

39

Ejemplo Resultado

ltTABLE border=4 cellpadding=8gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 35

bull cellspacing=n Indica el espacio en puntos que separa a las celdas contenidas dentro de la tabla siendo 2 por defecto

bull width=n oacute Indica la anchura de la tabla en puntos o en en funcioacuten del ancho de la ventana del visualizador Si no indicamos este argumento el ancho de la tabla se ajustaraacute al tamantildeo del contenido de las celdas Esto es lo que ha ocurrido en el uacuteltimo ejemplo que hemos realizado Veamos un ejemplo en el Coacutedigo fuente 11 El resultado se muestra en la Tabla 36

ltTABLE border=4 width=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 11

Mi primera tabla

Tabla 36

bull height=n oacute Nos permite definir la altura de la tabla en puntos o en de la

altura de la ventana del visualizador Si indicamos este argumento lo recomendable es darlo en puntos ya que es maacutes complicado adecuarnos a la altura de la ventana del visualizador Al igual que en el caso anterior si no especificamos este argumento la altura se adecuaraacute al contenido de las celdas El Coacutedigo fuente 12 muestra un ejemplo y la Tabla 37 nos muestra el resultado

ltTABLE border=4 width=50 height=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 12

Mi primera tabla

Tabla 37

bull bgcolor= rrggbb o nombre del color Nos permite definir un color

de fondo para todas las celdas de la tabla Maacutes adelante veremos como podemos definir colores especiacuteficos para cada una de las celdas por separado

Lenguaje HTML copy Grupo EIDOS

40

Ejemplo Resultado

ltTABLE border=4 bgcolor=yellowgtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 38

2 Definicioacuten de las filas de la tabla ltTRgt

ltTR align=leftrightcenter valign=topmiddlebottombgcolor=rrggbb oacute nombregt

Antes de empezar a descifrar el significado de cada uno de los argumentos de esta etiqueta vamos a ver un ejemplo en la Tabla 39 de coacutemo se construiriacutea una tabla con dos filas (2 filas X 1 columna = 2 celdas)

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR gtltTDgtPrimera filaltTRgtltTDgtSegunda filaltTABLEgt

Segunda fila

Tabla 39

bull align=leftrightcenter Con este argumento vamos a indicar la alineacioacuten

horizontal (leftizquierda rightderecha centercentrado) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado Veamos un ejemplo en el Coacutedigo fuente 13 y su correspondiente resultado en la Tabla 40

ltTABLE border=4 width=50 gt ltTRgtltTDgtPrimera filaltTRalign=rightgtltTDgtSegunda filaltTABLEgt

Coacutedigo fuente 13

Primera fila

Segunda fila

Tabla 40

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten

vertical (toparriba middlecentrado bottomabajo) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado

copy Grupo EIDOS 4 Elementos del lenguaje II

41

bull bgcolor= rrggbb o nombre del color En este caso este argumento nos permitiraacute definir un color de fondo para todas las celdas de una fila veamos un ejemplo en la

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR bgcolor=yellowgtltTDgtPrimera

filaltTR bgcolor=greengtltTDgtSegunda

filaltTABLEgt

Segunda fila

Tabla 41

3 Definicioacuten de las celdas de la tabla ltTHgt oacute ltTDgt

ltTH oacute TD align=leftrightcenterjustifyvalign=topmiddlebottom bgcolor=rrggbb oacute nombre width=nrowspan=n colspan=ngt

Como ya explicamos anteriormente la etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera y la etiqueta ltTDgt para la creacioacuten de celdas de datos Vamos a completar nuestro ejemplo inicial antildeadieacutendole tres filas de dos celdas cada una (3 filas X 2 columnas = 6 celdas) Tabla 42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTDgtCelda 21ltTDgtCelda 22

ltTABLEgt Celda 21 Celda 22

Tabla 42

bull align=leftrightcenterjustify Con este argumento vamos a indicar la

alineacioacuten horizontal (left izquierda right derecha center centrado justifyjustificado) del contenido de cada celda por separado Su significado es el mismo que en la etiqueta ltTRgt

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten vertical (toparriba middlecentrado bottomabajo) del contenido de cada celda

bull bgcolor= rrggbb o nombre del color En este caso podremos definir un color de fondo para cada una de las celdas de manera independiente

bull width=n oacute Indica el ancho de la celda en puntos o en en funcioacuten del tamantildeo de la tabla

Lenguaje HTML copy Grupo EIDOS

42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera

1ltTHgtCabecera 2ltTR gtltTD align=rightgtCelda

11ltTD bgcolor=redgtCelda 12ltTRgtltTD

bgcolor=yellowgtCelda 21ltTDalign=centergtCelda 22ltTABLEgt

Celda 21 Celda 22

Tabla 43

bull rowspan=n Con este argumento podemos lograr que una celda concreta abarque maacutes de una fila ya sabemos que por defecto una celda ocupa una sola fila

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTD rowspan=2gtCelda

11ltTDgtCelda 12ltTRgtltTDgtCelda 22

ltTABLEgt

Celda 11 Celda 22

Tabla 44

bull colspan=n Con este argumento podemos lograr que una celda se expanda a maacutes

de una columna

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTD colspan=2

align=centergtCelda 22ltTABLEgt

Celda 22

Tabla 45

Para finalizar este tema sobre la creacioacuten de tablas vamos a ver el ejemplo que aparece en el Coacutedigo fuente 14 y su resultado en la Tabla 46

ltTABLE border=4gtltTR gtltTH colspan=3 bgcolor=redgtTiacutetuloltTR bgcolor=yellowgtltTHgtCabecera 1ltTHgtCabecera 2ltTHgtCabecera 3

copy Grupo EIDOS 4 Elementos del lenguaje II

43

ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTDgtCelda 13ltTRgtltTD rowspan=2gtCelda 21ltTD bgcolor=greengtCelda 22ltTDgtCelda 23ltTRgtltTDgtCelda 32ltTDgtCelda 33

ltTABLEgt

Coacutedigo fuente 14

Tiacutetulo

Cabecera 1 Cabecera 2 Cabecera 3

Celda 11 Celda 12 Celda 13

Celda 22 Celda 23 Celda 21

Celda 32 Celda 33

Tabla 46

Formularios El formulario es el elemento de HTML que nos va a permitir interactuar con los visitantes de nuestras paacuteginas web de forma que podemos solicitarle informacioacuten al usuario y procesarla De esta forma podremos crear en nuestras paacuteginas encuestas para solicitar la opinioacuten del visitante sobre alguacuten tema e incluso sobre el contenido de nuestra propia paacutegina web cuestionarios para evaluar la asimilacioacuten de contenidos sobre un tema concreto que se trate en la paacutegina etc

El contenido de la informacioacuten introducida por medio del formulario seraacute enviado a la direccioacuten URL donde resida el programa que se encargaraacute de procesar los datos A este tipo de programas externos se les denomina programas CGI (Common Gateway Interface)

La etiqueta HTML que nos va a permitir la creacioacuten de formularios es ltFORMgt Su formato es el siguiente

ltFORM action=URL del programa que trata el formulariomethod=postgetgt Elementos del formulario ltFORMgt

bull action=URL del programa que trata el formulario A traveacutes de este

argumento indicaremos como ya hemos mencionado la direccioacuten del fichero de programa que va a tratar la informacioacuten suministrada por el formulario

Tambieacuten podriacuteamos incluir como URL que trata el formulario una direccioacuten de correo electroacutenico Por tanto el valor de este argumento podriacutea ser action =mailto direccioacuten de correo

Nota Esta opcioacuten soacutelo funciona adecuadamente con el navegador Netscape Con el Explorer este enviacuteo dariacutea como resultado un correo en blanco Para que esta opcioacuten funcione de manera independiente del navegador que se esteacute utilizando se ha de emplear un programa externo que realice este proceso

Lenguaje HTML copy Grupo EIDOS

44

bull method=postget A traveacutes de este argumento indicaremos el meacutetodo empleado para transferir la informacioacuten generada por el formulario

Si indicamos post se produciraacute la modificacioacuten del documento destino como es el caso de enviar la informacioacuten a una direccioacuten de correo electroacutenico Mediante el meacutetodo get no se produciraacuten cambios en el documento destino

Dentro de un formulario podremos incluir cualquier texto o instruccioacuten HTML de las vistas a lo largo de los capiacutetulos anteriores ademaacutes claro estaacute de los elementos tiacutepicos de un formulario cajas de texto botones de seleccioacuten menuacutes de opciones etc Vamos a ver coacutemo se incluiraacuten estos elementos en un formulario

Entrada baacutesica de datos Para definir los distintos tipos de campos baacutesicos de entrada de datos usaremos la etiqueta ltINPUTgt

El formato es el siguiente

ltINPUT type= text password checkbox radio hidden submit image reset name=Variable value=Valor inicialgt

bull El argumento type determinaraacute el tipo de campo de entrada que estamos insertando A

continuacioacuten describiremos cada uno de ellos

bull El argumento name especifica el nombre de la variable que tomaraacute el valor introducido en el campo

bull El argumento value especifica el valor por defecto que tendraacute el campo

Vamos a continuacioacuten a describir los distintos tipos campos de entrada que vendraacuten dados por los valores del argumento type

Texto corto type=text

Con este argumento vamos a indicar que el campo a introducir seraacute un texto El formato seriacutea

ltINPUT type= text name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los nuevos atributos es

bull size=Tamantildeo Indicaremos el tamantildeo en caracteres de la ventana de introduccioacuten de texto

bull maxlength=Longitud maacutexima Indicaremos el nuacutemero maacuteximo de caracteres a introducir en el campo

Vamos a ver un ejemplo en la Tabla 47

copy Grupo EIDOS 4 Elementos del lenguaje II

45

Ejemplo Resultado

NombreltINPUT type=text name=Var1Value=Texto por defecto size=20 maxlength=25gt

Tabla 47

Claves type=password

Con este argumento indicamos que el campo a introducir seraacute una palabra clave por lo que los caracteres que se introduzcan seraacuten sustituidos por asteriscos en la visualizacioacuten por pantalla El formato es

ltINPUT type= password name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los distintos argumentos es el mismo que en el caso anterior Veamos un ejemplo en la Tabla 48

Ejemplo Resultado

ClaveltINPUT type=password name=Var2Value=tutankamon size=11 maxlength=10gt

Tabla 48

Botones de seleccioacuten type=checkbox

El checkbox es un botoacuten que presenta dos estados marcado (1) y desmarcado (0) Podremos variar su estado simplemente pinchando con el ratoacuten El formato es

ltINPUT type= checkbox name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto

Si incluimos el argumento value cuando el botoacuten esteacute marcado su variable asociada adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 49

Ejemplo Resultado

ltINPUT type=checkbox name=Var3 value=Op1 checkedgtOpcioacuten1 ltbrgtltINPUT type=checkbox name=Var4 value=Op2gt Opcioacuten 2

Tabla 49

Lenguaje HTML copy Grupo EIDOS

46

Seleccioacuten entre varias opciones type=radio

Este argumento se usa cuando hay que hacer una seleccioacuten entre varias alternativas excluyentes pudieacutendose seleccionar uacutenicamente una de las alternativas Debemos incluir una etiqueta radio por cada una de las posibles alternativas El formato es

ltINPUT type= radio name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto En este caso uacutenicamente uno de los botones de radio podraacute aparecer marcado ya que se usa para el caso de opciones excluyentes

Cuando un botoacuten esteacute seleccionado la variable asociada a la lista de botones adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 50

Ejemplo Resultado

ltINPUT type=radio name=Var5 value=Op1gtOpcioacuten1 ltbrgtltINPUT type=radio name=Var5 value=Op2checkedgt Opcioacuten 2 ltbrgtltINPUT type=radio name=Var5 value=Op3 gtOpcioacuten 3

Tabla 50

En este ejemplo la variable Var5 tendraacute el valor Op2

Campos ocultos type=hidden

Este tipo de campos no son visibles para el usuario Su uso tiene sentido en el caso de enviar alguacuten tipo de informacioacuten que no deba ser visualizada o variada por el lector de nuestra paacutegina Web El formato es

ltINPUT type= hidden name=Variable value=Valor gt

Con esta etiqueta asignariacuteamos a la Variable referenciada por name el Valor de value y se mandariacutea junto con el formulario sin que el usuario de la paacutegina se entere de nada Veamos un ejemplo en el Coacutedigo fuente 15

ltINPUT type=hidden name=Var6 value=tutankamongt

Coacutedigo fuente 15

copy Grupo EIDOS 4 Elementos del lenguaje II

47

Botoacuten de enviacuteo de datos type=submit

Con este argumento especificamos un botoacuten en el que al pulsar los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario El formato es

ltINPUT type= submit value=Mensaje a mostrargt

En este caso el paraacutemetro value indica el mensaje que se mostraraacute en el botoacuten Veamos un ejemplo en la Tabla 51

Ejemplo Resultado

ltINPUT type=submit value=Enviar los Datosgt

Tabla 51

Botoacuten graacutefico de enviacuteo de datos type=image

Con este argumento especificamos un botoacuten de tipo imagen en el que al igual que con el botoacuten anterior si pulsamos en la imagen los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario Su formato es el siguiente

ltINPUT type= image src=URL de la imagen name=Variablegt

Con el paraacutemetro src especificamos la URL de la imagen que seraacute insertada en el botoacuten En este caso en la variable referenciada por name se almacenaraacuten las coordenadas del punto de la imagen donde se halla pinchado (de forma que estas coordenadas podriacutean ser procesadas por el programa que recibe los datos del formulario)

Botoacuten de borrado de datos type=reset

Con este argumento especificamos un botoacuten que al ser pulsado borraraacute el contenido actual de todos los campos dejaacutendolos con sus valores por defecto Su formato es

ltINPUT type= reset value=Texto del botoacutengt

Con el paraacutemetro value especificamos el texto que etiquetaraacute al botoacuten

Ejemplo Resultado

ltINPUT type=reset value=Borrar datosgt

Tabla 52

Lenguaje HTML copy Grupo EIDOS

48

Entrada datos en muacuteltiples liacuteneas En un formulario tambieacuten podremos introducir un campo de texto que abarque varias liacuteneas Para ello usaremos la etiqueta ltTEXTAREAgt ltTEXTAREAgt Su formato es el siguiente

ltTEXTAREA name=Variable rows=Filas cols=ColumnasgtContenido por defectoltTEXTAREAgt

Los argumentos rows y cols nos van a permitir especificar respectivamente el nuacutemero de filas de texto visibles y el nuacutemero de columnas de texto visibles en el campo

Ejemplo Resultado

ltTEXTAREA name=Var7 rows=5 cols=40gtContenido por defectoltTEXTAREAgt

Tabla 53

Entrada de datos a traveacutes de campos de seleccioacuten Con los campos de seleccioacuten podremos desplegar una lista de opciones entre las que podremos seleccionar una Para ello usaremos la etiqueta ltSELECTgt ltSELECTgt Su formato es el siguiente

ltSELECT name=Variable multiple size=ngtltOPTION selected value=Valor_1gtPrimera OpcioacutenltOPTION value=Valor_2gtSegunda Opcioacuten

ltOPTION value=Valor_ngtEneacutesima Opcioacuten

ltSELECTgt

Figura 1

bull La variable referenciada por name tomaraacute el valor(value) de la opcioacuten seleccionada

bull Si especificamos el argumento muacuteltiple se mostraraacuten todas la opciones en forma de tabla El nuacutemero de opciones visibles en la tabla vendraacute dado por el argumento size

copy Grupo EIDOS 4 Elementos del lenguaje II

49

bull Con la etiqueta ltOPTIONgt iremos definiendo cada una de las opciones de la lista

bull El argumento selected va a determinar cuaacutel es la opcioacuten por defecto

Para finalizar vamos a ver el Coacutedigo fuente 16 correspondiente a una encuesta realizada por la editorial ficticia EditoPc y en la Figura 2 observamos el resultado del formulario

ltP align=centergtltBgtEDITORIAL ltIgtEditoPcltIgtltBgtltPgtltFORM action=mailtodireccionejemplo method = postgtNombreltINPUT type=text size=30 name=nombregtltBRgtE_mail ltINPUT type=text size=30 name=e_mailgtltPgtDeseas recibir informacioacuten sobreltINPUT type=checkbox name=infor1 value=InternetgtInternetltINPUT type=checkbox name=infor2 value=ProgramacioacutengtProgramacioacutenltINPUT type=checkbox name=infor3 value=SistOperativogtSistOperativoltINPUT type=checkbox name=infor4 value=OfimaacuteticagtOfimaacuteticaltPgtiquestTe conectas a Internet desde casa ltbrgtltINPUT type=radio name=intercasa value=sigtSiacuteltINPUT type=radio name=intercasa value=nogtNoltPgtiquestQueacute uso le das a tu ordenador ltBRgtltSELECT name=uso multiple size=3gtltOPTION selectedgtProfesionalltOPTIONgtDomeacutesticoltOPTIONgtOcioJuegosltSELECTgtltPgtCaracteriacutesticas de tu PCltBRgtltTEXTAREA name=caract rows=5 cols=40gtltTEXTAREAgtltPgtltINPUT type=submit value=Enviar datosgt ltINPUT type=reset value=Borrardatosgt

Coacutedigo fuente 16

Figura 2

Elementos del lenguaje III

Frames Las frames son una utilidad del HTML que nos permite dividir la ventana del navegador en diferentes subventanas que podraacuten ser manipuladas de manera independiente Esto nos permitiraacute mostrar una paacutegina web diferente en cada una de la subventanas o frames

Estructura de un documento con frames Un documento con frames se estructura de manera diferente a un documento HTML normal Asiacute en este tipo de documentos no apareceraacute la etiqueta ltBODYgt En su lugar se incluiraacute la etiqueta ltFRAMESETgt ltFRAMESETgt dentro de la cual se definiraacuten las distintas frames que se incluyan en el documento

La estructura general de un documento de este tipo seriacutea por tanto

ltHTMLgtltHEADgtCabeceraltHEADgtltFRAMESETgt

Definicioacuten de la distintas framesltFRAMESETgtltNOFRAMESgt

Instrucciones HTMLltNOFRAMESgt

ltHTMLgt

Lenguaje HTML copy Grupo EIDOS

52

Puede darse el caso de que programemos nuestro documento con frames siguiendo la estructura anterior y que el navegador que se use para leer el documento no soporte la caracteriacutestica de frames con lo cual no se mostraraacute nada de lo indicado entre las etiquetas ltFRAMESETgt y ltFRAMESETgtPara solucionar este problema todas las instrucciones HTML incluidas entre las etiquetas ltNOFRAMESgt y ltNOFRAMESgt seraacuten ejecutadas por los navegadores que no soportan las frames

La sintaxis de la etiqueta ltFRAMESETgt es

ltFRAMESET rows=Lista de filas cols=Lista de columnasgtltFRAME src=URL de la frame 1 name=Nombre de la frame 1gtltFRAME src=URL de la frame 2 name=Nombre de la frame 2gt

ltFRAME src=URL de la frame n name=Nombre de la frame ngt

ltFRAMESETgt

Como vemos por cada una de la frames que incluyamos en nuestro documento debemos incluir una etiqueta ltFRAMEgt indicando mediante sus argumentos la direccioacuten URL del documento que se insertaraacute en la subventana (src) y el nombre de la frame (name) Posteriormente describiremos la etiqueta ltFRAMEgt con maacutes detalle

Los argumentos de ltFRAMESETgt son rows y cols definieacutendose uacutenicamente uno de los dos atributos en funcioacuten de si la divisioacuten de la pantalla se realizaraacute por filas (rows) o por columnas (cols)

Por cada una de las subventanas que creemos debemos especificar su tamantildeo en puntos o en porcentaje del tamantildeo de cada subventana Asiacute por ejemplo si especificamos rows= 50 2525 crearemos tres subventanas horizontales ocupando la primera el 50 de la ventana principal y las otras dos el resto Si especificamos cols=100150 crearemos tres subventanas verticales ocupando la primera 100 puntos de la ventana principal la segunda 150 puntos y tercera el espacio restante

Vamos a verlo maacutes claramente con un par de ejemplos praacutecticos que vemos en la Tabla 54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 502525gt ltFRAMEsrc=Pagweb1htm name=Pagweb1gtltFRAMEsrc=Pagweb2htm name=Pagweb2gtltFRAMEsrc=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 19: Programacion web   lenguaje html

Elementos del lenguaje I

Cabeceras y atributos de texto

Cabeceras ltH1gtltH6gt H Heading En un documento HTML podemos incluir seis tipos distintos de cabeceras que van a constituir normalmente el tiacutetulo y los distintos subapartados que forman el documento aunque podremos utilizarlas en el punto que queramos del documento para resaltar cualquier texto Estas cabeceras son definidas por las etiquetas ltH1gtltH2gtltH3gtltH4gtltH5gt y ltH6gt El texto que componga cada cabecera deberaacute estar incluido entre las etiquetas de inicio (ltHngt) y fin (Hn) correspondiente La cabecera ltH1gtseraacute la que muestre el texto de mayor tamantildeo este tamantildeo iraacute disminuyendo hasta llegar a la cabecera ltH6gt Como podemos ver en la Tabla 13 Para alinear las cabeceras utilizamos el atributo align El formato seriacutea ltHn align=centergt como muestra la Tabla 14

Ejemplo Resultado

ltH1gtCabecera 1ltH1gt Cabecera 1 ltH2gtCabecera 2ltH2gt Cabecera 2

Lenguaje HTML copy Grupo EIDOS

24

ltH3gtCabecera 3ltH3gt Cabecera 3

ltH4gtCabecera 4ltH4gt Cabecera 4

ltH5gtCabecera 5ltH5gtCabecera 5

ltH6gtCabecera 6ltH6gtCabecera 6

Tabla 13

Ejemplo Resultado

ltH5 align=centergtCabecera 5ltH5gtCabecera 5

Tabla 14

Atributos del texto Al texto de nuestro documento HTML le podemos aplicar distintos atributos (negrita cursiva subrayado etc) al igual que hacemos cuando trabajamos con el procesador de textos en la edicioacuten de nuestros documentos Para aplicar estos atributos disponemos de distintas etiquetas que aplicaraacuten su efecto al texto incluido entre sus indicadores de inicio y fin Las vemos en la Tabla 15

Atributo Etiqueta Ejemplo Resultado

Negrita ltBgtltBgtltBgtTexto ennegritaltBgt

Texto en negrita

Cursiva ltIgtltIgtltIgtTexto encursivaltIgt

Texto en cursiva

Teletype ltTTgtltTTgtltTTgtTexto en modoteletypeltTTgt

Texto en modoteletype

Subrayado ltUgtltUgt ltUgtTexto subrayadoltUgt Texto subrayado Tachado ltSgtltSgt ltSgtTexto tachadoltSgt Texto tachado

Parpadeo ltBLINKgtltBLINKgtltBLINKgtTextoparpadeandoltBLINKgt

Texto parpadeando

Superiacutendice ltSUPgtltSUPgt ltSUPgtTexto en modosuperiacutendiceltSUPgt

Texto en modo superiacutendice

Subiacutendice ltSUBgtltSUBgtltSUBgtTexto en modosubiacutendiceltSUBgt

Texto en modo subiacutendice

Centrado ltCENTERgtltCENTERgt

ltCENTERgtTextocentradoltCENTERgt

Texto centrado

B Bold I Italic TT Teletype U Underlined S Strike SUP Superscript SUB Subscript

Tabla 15

copy Grupo EIDOS 3 Elementos del lenguaje I

25

Alguna de estas etiquetas no es reconocida por determinados navegadores Asiacute por ejemplo la etiqueta ltBLINKgt (Parpadeo) no es implementada por el Explorer Por lo que seguacuten el explorador que estemos utilizando podremos ver el resultado correctamente o no

Existen otras etiquetas que nos van a servir para especificar de manera diferenciada unidades loacutegicas de nuestro documento HTML tales como citas direcciones de correo etc En algunos casos el formato obtenido con estas etiquetas de estilo loacutegico va a ser el mismo que con las anteriores a las que se les denomina tambieacuten etiquetas de estilo fiacutesico Algunas etiquetas de estilo loacutegico las vemos en la Tabla 16

Etiqueta Ejemplo Resultado

ltSTRONGgtltSTRONGgtltSTRONGgtEspecifica textoresaltado (igualltBgt)ltSTRONGgt

Especifica texto resaltado(igual ltBgt)

ltCITEgtltCITEgtltCITEgtIndica una cita otiacutetulo (igual ltIgt)ltCITEgt

Indica una cita o tiacutetulo (igualltIgt)

ltSTRIKEgtltSTRIKEgtltltSTRIKEgtTexto tachado(igual ltSgt)ltSTRIKEgt

Texto tachado (igual ltSgt)

Tabla 16

Si queremos aplicar efectos maacutes espectaculares a nuestro documento HTML debemos variar el tamantildeo el color y el tipo de letra del texto La etiqueta que nos permite todo esto es ltFONTgtltFONTgt por medio de sus atributos size color y face

ltFONT size=n oacute +- n color=rrggbb oacute name face=nombre defont gt

bull size=n oacute +- n El atributo size nos permite especificar un tamantildeo determinado

para la fuente del texto incluido entre las etiquetas de inicio y fin el cual puede estar entre 1 y 7 El texto de tamantildeo normal equivale a la fuente de tamantildeo 3 (fuente base) Por tanto si especificamos size=+2 el tamantildeo de la fuente seraacute 5 Y si especificamos size= -1 el tamantildeo seraacute 2

Ejemplo Resultado

ltFONT size=2gtTamantildeo 2ltFONTgtTamantildeo 2

ltFONT size=+2gtTamantildeo 5 (3+2)ltFONTgt Tamantildeo 5 (3+2)

ltFONT size=-1gtTamantildeo 2 (3-1)ltFONTgtTamantildeo 2 (3-1)

Tabla 17

bull color=rrggbb oacute name Nos va a permitir definir el color que tendraacute el texto

incluido entre las etiquetas Tabla 18

Lenguaje HTML copy Grupo EIDOS

26

Ejemplo Resultado

ltFONT color=redgtTexto de colorrojoltFONTgt

Texto de color rojo

ltFONT color=bluegtTexto de colorazulltFONTgt

Texto de color azul

ltFONT size=5 color=008000gtTextoverde y de tamantildeo 5ltFONTgt

Texto verde y detamantildeo 5

Tabla 18

bull face=nombre de font Nos va a permitir escribir texto con el tipo de letra que le

especifiquemos En el caso de que el tipo de letra que le hayamos especificado no esteacute cargada en el ordenador que lee la paacutegina se usaraacute el font por defecto del navegador

Ejemplo Resultado

ltFONT face=TahomagtTipo de letraTahomaltFONTgt

Tipo de letra Tahoma

ltFONT size=4 color=blueface=TahomagtTexto azul de tamantildeo4 y TahomaltFONTgt

Texto azul de tamantildeo 4 y Tahoma

Tabla 19

Listas Podemos representar elementos en forma de lista dentro de nuestros documentos de una forma muy sencilla y con una gran versatilidad Estas listas podraacuten incluir cualquiera de los elementos HTML e incluso podemos definir listas anidadas es decir listas dentro de listas HTML nos permite crear tres tipos distintos de listas

bull Listas no numeradas

bull Listas numeradas

bull Listas de definiciones

Listas no numeradas ltULgt UL Unordered List

Con este tipo de listas podemos especificar una serie de elementos sin un orden predeterminado precedidos de una marca o vintildeeta que nosotros mismos podemos definir Para la definicioacuten de los liacutemites de la lista utilizaremos la etiqueta ltULgt ltULgt y para determinar cada uno de los elementos que la componen usaremos la etiqueta ltLIgt El formato es el siguiente

ltUL type=disk oacute circle oacute squaregtltLHgtTiacutetulo de la listaltLHgt

copy Grupo EIDOS 3 Elementos del lenguaje I

27

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltULgtLH List Head LI List Item

Con el atributo type vamos a especificar el tipo de marca o vintildeeta que antecederaacute a cada uno de los elementos de la lista Estas marcas podraacuten ser un disco (disk) un ciacuterculo (circle) o un cuadrado (square) La etiqueta ltLHgt nos va a servir para especificar un posible tiacutetulo de la lista siendo esta opcional Vamos a ver algunos ejemplos en la Tabla 20

Ejemplo Resultado

ltUL type=circlegtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAfricaltLIgtAmeacutericaltLIgtOceaniacutea

ltULgt

Los cinco continentes

Europa

Asia

Aacutefrica

Ameacuterica

Oceaniacutea

ltUL type=squaregtltLIgtEuropaltLIgtAsialtLIgtAfricaltLIgtAmeacutericaltUL type=circle gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltULgtltLIgtOceaniacutea

ltULgt

Europa

Asia

Aacutefrica

Ameacuterica

Ameacuterica del Norte

Ameacuterica del Sur

Oceaniacutea

Tabla 20

Listas numeradas ltOLgt OL Ordered List

Con este tipo de listas podemos especificar una serie de elementos numerados seguacuten el lugar que ocupan en la lista Para la definicioacuten de los liacutemites de la lista utilizaremos la etiqueta ltOLgt ltOLgt y para determinar cada uno de los elementos que la componen usaremos la etiqueta ltLIgt El formato es el siguiente

ltOL start=n type=Tipo de listagtltLHgtTiacutetulo de la listaltLHgt

Lenguaje HTML copy Grupo EIDOS

28

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltOLgt

Con el atributo start vamos a especificar el nuacutemero por el que va a empezar la lista Si no indicamos este argumento la lista empezaraacute a numerarse a partir del 1 Con el atributo type vamos a especificar el tipo de lista numerada Sus posibles valores aparecen a continuacioacuten y veremos algunos ejemplos en la Tabla 21

A Letras mayuacutesculas (A B C )

a Letras minuacutesculas (a b c )

I Nuacutemeros romanos en mayuacutesculas (I II III IV )

i Nuacutemeros romanos en minuacutesculas (i ii iii iv )

1 Numeacutericamente (1 2 3 4 ) (es la numeracioacuten por defecto y por tanto no habriacutea que indicarla)

Ejemplo Resultado

ltOL type=AgtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltLIgtOceaniacutea

ltOLgt

Los cinco continentes

A Europa

B Asia

C Aacutefrica

D Ameacuterica

E Oceaniacutea

ltOL type=I start=2gtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltOL type=i gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltOLgtltLIgtOceaniacutea

ltOLgt

II Europa

III Asia

IV Aacutefrica

V Ameacuterica

i Ameacuterica del Norte

ii Ameacuterica del Sur

VI Oceaniacutea

Tabla 21

copy Grupo EIDOS 3 Elementos del lenguaje I

29

Listas de definiciones ltDLgt DL Definition List

Estas listas nos van a servir para especificar una serie de teacuterminos y sus definiciones correspondientes Para la definicioacuten de la lista usaremos la etiqueta ltDLgt ltDLgt para especificar los teacuterminos usaremos la etiqueta ltDTgt y para especificar la definicioacuten correspondiente a cada teacutermino usaremos la etiqueta ltDDgt El formato es el siguiente

ltDLgtltLHgtTiacutetulo de la listaltLHgtltDTgtTeacutermino 1ltDDgtDefinicioacuten 1ltDTgtTeacutermino 2ltDDgtDefinicioacuten 2

ltDTgtTeacutermino nltDDgtDefinicioacuten n

ltDLgtDT Definition Term DD Definition Description

Vamos a ver un ejemplo en la Tabla 22

Ejemplo Resultado

ltDLgtltDTgtPariacutesltDDgtCapital de FrancialtDTgtRomaltDDgtCapital de ItalialtDTgtMadridltDDgtCapital de Espantildea

ltDLgt

Pariacutes

Capital de Francia

Roma

Capital de Italia

Madrid

Capital de Espantildea

Tabla 22

Hiperenlaces Los hiperenlaces son enlaces de hipertexto que nos van a permitir acceder de manera directa a otros documentos HTML independientemente de su ubicacioacuten o a otras zonas dentro de nuestro propio documento

Enlaces a otras paacuteginas ltA href=gt Con este tipo de hiperenlaces vamos a poder acceder tanto a otras paacuteginas que esteacuten ubicadas dentro de nuestro propio sistema como a paacuteginas ubicadas en puntos muy distantes del globo El formato de este tipo de hiperenlaces es

ltA href=URL a la que se accedegtTexto del hiperenlaceltAgt

Lenguaje HTML copy Grupo EIDOS

30

Con el atributo href vamos a especificar la URL del documento al que se pretende acceder El texto contenido entre las etiquetas de comienzo y fin nos va a servir para definir el hiperenlace por lo que deberiacutea ser clarificador del contenido del documento con el que vamos a enlazar Esta definicioacuten apareceraacute resaltada normalmente en azul y subrayada En la mayoriacutea de los navegadores esta definicioacuten del hiperenlace es sensible por lo que cuando el cursor pasa por encima del mismo este cambia de aspecto indicaacutendolo

Veamos un ejemplo en la Tabla 23

Ejemplo Resultado

ltA href=httpwwweidosesgtPaacutegina inicialde Villa EidosltAgt

Paacutegina inicial de Villa Eidos

Tabla 23

Si situamos el ratoacuten encima del hiperenlace y pulsamos el navegador accederaacute a la paacutegina Web indicada por href es decir accederaacute a la paacutegina situada en httpwwweidoses

Igualmente podriacuteamos indicar el hiperenlace por medio de una imagen Si esta imagen tiene definido un borde este apareceraacute resaltado en color azul El formato correspondiente seriacutea

ltA href=URL a la que se accedegtltIMG src=Imagengt y tambieacutentextoltAgtIMG Image src Source

Veamos un ejemplo en la Tabla 24

Ejemplo Resultado

ltA href=httpwwweidosesgtltIMGsrc=IconogifgtltAgt Villa Eidos Villa Eidos

Tabla 24

Si pulsamos sobre la imagen el navegador accederaacute a la paacutegina Web inicial de Villa Eidos

Enlaces dentro de la misma paacutegina ltA name=gt Este tipo de hiperenlaces nos va a permitir marcar distintas zonas del documento activo con el objeto de tener un acceso directo a las mismas Una buena utilidad de este tipo de enlaces radica en la creacioacuten de iacutendices para documentos largos de forma que si pinchamos en el hiperenlace correspondiente al tiacutetulo de un capiacutetulo determinado el navegador saltaraacute automaacuteticamente hasta el comienzo de dicho capiacutetulo

Para la creacioacuten de estos hiperenlaces debemos seguir dos pasos

copy Grupo EIDOS 3 Elementos del lenguaje I

31

1 Marcar las distintas zonas o secciones del documento Esto lo haremos con el paraacutemetro name

ltA name=Identificador de seccioacutengtTexto de laseccioacutenltAgt

A cada seccioacuten le asignaremos un identificador distinto para poder referenciarlas posteriormente de manera inequiacutevoca

2 Especificar un enlace a cada una de las secciones que hayamos definido ltA href=Identificador de seccioacutengtTexto del enlace a laseccioacutenltAgt

Si pinchamos en este enlace el navegador saltaraacute automaacuteticamente a la seccioacuten correspondiente Veamos un ejemplo sencillito en la Tabla 25 pero demostrativo de todo lo que acabamos de explicar

Ejemplo Resultado

ltA href=Cap1gtCapiacutetulo1ltAgtltA name=Cap1gtCapiacutetulo 1ltAgt

Capiacutetulo 1

Capiacutetulo 1

Tabla 25

Si nos creamos una paacutegina HTML con distintos capiacutetulos podriacuteamos crear una seccioacuten para cada uno de ellos de forma que si pinchamos en el hiperenlace correspondiente al Capiacutetulo 1 el navegador saltariacutea directamente a la seccioacuten correspondiente al Capiacutetulo 1

Ademaacutes de los dos tipos de hiperenlaces vistos podemos crear hiperenlaces que nos permitan acceder a cualquiera de los servicios de Internet Es decir podriacuteamos indicar enlaces a servidores FTP GOPHER NEWS MAILTO etc Para ello tendriacuteamos que indicar la URL correspondiente al servicio al cual queremos acceder como ya vimos en el primer capiacutetulo de este manual

Imaacutegenes

Podremos dar un aspecto mucho maacutes vistoso a nuestros documentos HTML con la inclusioacuten de imaacutegenes Los formatos de imagen que todos los navegadores reconocen son gif y jpg Si queremos insertar una imagen en otro formato el visor deberiacutea disponer del programa externo que permita su visualizacioacuten De todas formas una buena solucioacuten es utilizar alguacuten programa de tratamiento de imaacutegenes que nos convierta la imagen a uno de los formatos mencionados anteriormente

El formato gif es maacutes recomendado para la inclusioacuten de iconos graacuteficas y el formato jpg para el caso de insertar fotografiacuteas en nuestras paacuteginas

Lenguaje HTML copy Grupo EIDOS

32

La etiqueta que nos va a permitir la insercioacuten de imaacutegenes es ltIMGgt La imagen se insertaraacute justo en el punto del documento donde coloquemos dicha etiqueta pudiendo insertar imaacutegenes dentro de listas tablas o formularios

El formato de la etiqueta con sus posibles argumentos es el siguiente

ltIMG src=URL de la imagen alt=Texto alternativoalign=topmiddlebottonleftrigth border=Tamantildeoheight=Tamantildeo width=Tamantildeo hspace=margen vspace=margengt

bull src=URL de la imagen El atributo src nos va servir para indicar la URL de la imagen que

queremos insertar es decir el servidor y camino hasta llegar al fichero de la imagen

No seraacute necesario que la imagen que queremos insertar en nuestro documento esteacute en el ordenador local aunque siacute es recomendable ya que el acceso a las mismas puede ser maacutes lento

Por tanto es una buena praacutectica copiar todas las imaacutegenes que vayamos a incluir en nuestro documento HTML al ordenador local

Tabla 26

bull alt=Texto alternativo Nos va a permitir mostrar un texto alternativo para el caso en que el

navegador no sea capaz de mostrar la imagen Su uso es muy recomendable ya que cuando publiquemos nuestras paacuteginas en la WWW no sabremos desde queacute tipo de navegadores accederaacuten los internautas a nuestras paacuteginas

En la Tabla 27 vamos a ver un ejemplo

Si usas un navegador que no tiene ninguacuten problema para la visualizacioacuten de imaacutegenes desactiva temporalmente la opcioacuten de mostrar imaacutegenes prueba el ejemplo que muestra la Tabla 27 y compaacuteralo con el anterior

Tabla 27

copy Grupo EIDOS 3 Elementos del lenguaje I

33

bull align=topmiddlebotton leftrigth Nos permite indicar coacutemo se alinearaacute el texto que siga a la imagen

top alinea el texto con la parte superior de la imagen

middle con la parte central

bottom con la parte inferior

left imagen alineada a la izquierda de la paacutegina

rigth imagen alineada a la derecha de la paacutegina

Tabla 28

En el caso de que el texto que acompantildea a la imagen tenga maacutes de una liacutenea tan soacutelo la primera seraacute la que se alinearaacute seguacuten alguna de las anteriores alineaciones el resto de liacuteneas se incluiraacuten debajo de la imagen quedando un efecto bastante feo

Para solventar esto estaacuten las alineaciones LEFT (imagen alineada a la izquierda de la paacutegina) y RIGHT (imagen alineada a la derecha de la paacutegina) Las cuales permiten que la imagen se inserte dentro del paacuterrafo que la rodea produciendo un resultado mucho maacutes profesional en la integracioacuten de texto e imaacutegenes

Estas dos alineaciones no se podraacuten usar en combinacioacuten con las anteriores Veamos algunos ejemplos en la Tabla 29

Vemos como en el primer ejemplo la segunda liacutenea de texto aparece debajo de la imagen produciendo un efecto menos vistoso que en los dos ejemplos siguientes

Lenguaje HTML copy Grupo EIDOS

34

Tabla 29

bull border=Tamantildeo Permite antildeadirle un borde a la imagen del tamantildeo que le

especifiquemos

Si la imagen forma parte de un hiperenlace esta apareceraacute con un borde del color del hiperenlace Si no deseaacuteramos que aparezca este borde tendriacuteamos que especificar border=0

Tabla 30

bull height=Tamantildeo Permite especificar el alto de la imagen en puntos de pantalla

(pixels) o en del tamantildeo del documento

bull width=Tamantildeo Con este argumento especificaremos el ancho al que mostraremos la imagen en puntos de pantalla (pixels) o en del tamantildeo del documento

En el segundo de los ejemplos de la Tabla 31 el ancho de la imagen se ha extendido al 50 del total del ancho de la celda donde estaacute contenida la imagen Si pruebas este ejemplo en tu documento HTML la imagen se extenderaacute horizontalmente hasta ocupar el 50 del ancho de la paacutegina

copy Grupo EIDOS 3 Elementos del lenguaje I

35

Tabla 31

bull hspace=Margen hspace Horizontal Space Permite especificar el nuacutemero de espacios

horizontales (en puntos) que separaraacuten a la imagen de cualquier elemento que le siga o le anteceda

bull vspace=Margen vspace Vertical Space Con este argumento especificaremos el margen vertical (en puntos) que habraacute entre la imagen y cualquier otro elemento de nuestro documento

Tabla 32

Elementos del lenguaje II

Tablas HTML nos va a permitir la inclusioacuten de cualquiera de los elementos de nuestra paacutegina (texto imaacutegenes hiperenlaces listas etc) dentro de una tabla Gracias a lo cual conseguiremos dar una mayor y mejor estructuracioacuten a los contenidos de nuestros documentos Ademaacutes la definicioacuten de las tablas en HTML es muy abierta pudiendo en cualquier momento redimensionar la tabla es decir cambiar su nuacutemero de filas o de columnas cambiar el tamantildeo de alguna de sus celdas etc

La etiqueta que nos va a permitir la definicioacuten de tablas es ltTABLEgt ltTABLEgt

El formato general de la etiqueta sin ninguacuten argumento es el siguiente

ltTABLEgtltTR gt

ltTHgtContenido de la celda ltTHgtltTDgtContenido de la celda ltTDgt

ltTRgtltTABLEgt

TR Table Row TH Table Header TD Table Data

Vamos a analizar cada una de estas etiquetas de forma separada

1 ltTABLEgt ltTABLEgt Definicioacuten general de la tabla Dentro de ella definiremos las filas y columnas que la constituyen pudiendo incluso definir tablas dentro de tablas es decir tablas anidadas

Lenguaje HTML copy Grupo EIDOS

38

2 ltTRgt ltTRgt Definicioacuten de las filas de la tabla Por cada etiqueta ltTRgt que incluyamos se crearaacute una fila en la tabla No seraacute necesario indicar la etiqueta de cierre

3 ltTHgtltTHgt oacute ltTDgtltTDgt Definicioacuten de cada una de las celdas de la tabla Vemos que estas etiquetas estaacuten contenidas dentro de otra etiqueta de definicioacuten de fila de forma que por cada etiqueta ltTHgt o ltTDgt que incluyamos se crearaacute una celda dentro de la fila correspondiente La etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera es decir celdas cuyo contenido estaacute resaltado en negrita dejando la etiqueta ltTDgt para definir celdas de datos En este caso tampoco es necesario indicar las etiquetas de cierre

Todas estas etiquetas tienen sus respectivos argumentos Pero antes de analizar cada uno de ellos vamos a ver un ejemplo muy sencillito en la Tabla 33 que nos crearaacute una tabla de una sola celda (1 fila X 1 columna = 1 celda) Para ello usaremos la etiqueta de creacioacuten de tabla ltTABLEgt con el argumento border=1 (nos dibuja un borde de tamantildeo 1 alrededor de la tabla)

Ejemplo Resultado

ltTABLE border=1gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 33

Vamos ahora a analizar lo distintos argumentos que componen las etiquetas de la tabla analizaacutendolos desde lo general (la definicioacuten de la tabla) hasta lo especiacutefico (la definicioacuten de las celdas)

1 Definicioacuten de la tabla ltTABLEgt

ltTABLE border=n cellpadding=n cellspacing=n width=n oacute height=n oacute bgcolor=rrggbb oacute nombre gt

Contenido ltTABLEgt

bull border=n Si especificamos este argumento se dibujaraacute un borde alrededor de la

tabla del ancho que le indiquemos como muestra la Tabla 34

Ejemplo Resultado

Mi primera tabla ltTABLE border=4gtltTRgtltTDgtMi primera tablaltTABLEgt

Tabla 34

bull cellpadding=n Indica el espacio en puntos que separa el contenido de la celda con

el borde de la misma siendo 1 por defecto

copy Grupo EIDOS 4 Elementos del lenguaje II

39

Ejemplo Resultado

ltTABLE border=4 cellpadding=8gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 35

bull cellspacing=n Indica el espacio en puntos que separa a las celdas contenidas dentro de la tabla siendo 2 por defecto

bull width=n oacute Indica la anchura de la tabla en puntos o en en funcioacuten del ancho de la ventana del visualizador Si no indicamos este argumento el ancho de la tabla se ajustaraacute al tamantildeo del contenido de las celdas Esto es lo que ha ocurrido en el uacuteltimo ejemplo que hemos realizado Veamos un ejemplo en el Coacutedigo fuente 11 El resultado se muestra en la Tabla 36

ltTABLE border=4 width=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 11

Mi primera tabla

Tabla 36

bull height=n oacute Nos permite definir la altura de la tabla en puntos o en de la

altura de la ventana del visualizador Si indicamos este argumento lo recomendable es darlo en puntos ya que es maacutes complicado adecuarnos a la altura de la ventana del visualizador Al igual que en el caso anterior si no especificamos este argumento la altura se adecuaraacute al contenido de las celdas El Coacutedigo fuente 12 muestra un ejemplo y la Tabla 37 nos muestra el resultado

ltTABLE border=4 width=50 height=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 12

Mi primera tabla

Tabla 37

bull bgcolor= rrggbb o nombre del color Nos permite definir un color

de fondo para todas las celdas de la tabla Maacutes adelante veremos como podemos definir colores especiacuteficos para cada una de las celdas por separado

Lenguaje HTML copy Grupo EIDOS

40

Ejemplo Resultado

ltTABLE border=4 bgcolor=yellowgtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 38

2 Definicioacuten de las filas de la tabla ltTRgt

ltTR align=leftrightcenter valign=topmiddlebottombgcolor=rrggbb oacute nombregt

Antes de empezar a descifrar el significado de cada uno de los argumentos de esta etiqueta vamos a ver un ejemplo en la Tabla 39 de coacutemo se construiriacutea una tabla con dos filas (2 filas X 1 columna = 2 celdas)

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR gtltTDgtPrimera filaltTRgtltTDgtSegunda filaltTABLEgt

Segunda fila

Tabla 39

bull align=leftrightcenter Con este argumento vamos a indicar la alineacioacuten

horizontal (leftizquierda rightderecha centercentrado) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado Veamos un ejemplo en el Coacutedigo fuente 13 y su correspondiente resultado en la Tabla 40

ltTABLE border=4 width=50 gt ltTRgtltTDgtPrimera filaltTRalign=rightgtltTDgtSegunda filaltTABLEgt

Coacutedigo fuente 13

Primera fila

Segunda fila

Tabla 40

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten

vertical (toparriba middlecentrado bottomabajo) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado

copy Grupo EIDOS 4 Elementos del lenguaje II

41

bull bgcolor= rrggbb o nombre del color En este caso este argumento nos permitiraacute definir un color de fondo para todas las celdas de una fila veamos un ejemplo en la

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR bgcolor=yellowgtltTDgtPrimera

filaltTR bgcolor=greengtltTDgtSegunda

filaltTABLEgt

Segunda fila

Tabla 41

3 Definicioacuten de las celdas de la tabla ltTHgt oacute ltTDgt

ltTH oacute TD align=leftrightcenterjustifyvalign=topmiddlebottom bgcolor=rrggbb oacute nombre width=nrowspan=n colspan=ngt

Como ya explicamos anteriormente la etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera y la etiqueta ltTDgt para la creacioacuten de celdas de datos Vamos a completar nuestro ejemplo inicial antildeadieacutendole tres filas de dos celdas cada una (3 filas X 2 columnas = 6 celdas) Tabla 42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTDgtCelda 21ltTDgtCelda 22

ltTABLEgt Celda 21 Celda 22

Tabla 42

bull align=leftrightcenterjustify Con este argumento vamos a indicar la

alineacioacuten horizontal (left izquierda right derecha center centrado justifyjustificado) del contenido de cada celda por separado Su significado es el mismo que en la etiqueta ltTRgt

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten vertical (toparriba middlecentrado bottomabajo) del contenido de cada celda

bull bgcolor= rrggbb o nombre del color En este caso podremos definir un color de fondo para cada una de las celdas de manera independiente

bull width=n oacute Indica el ancho de la celda en puntos o en en funcioacuten del tamantildeo de la tabla

Lenguaje HTML copy Grupo EIDOS

42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera

1ltTHgtCabecera 2ltTR gtltTD align=rightgtCelda

11ltTD bgcolor=redgtCelda 12ltTRgtltTD

bgcolor=yellowgtCelda 21ltTDalign=centergtCelda 22ltTABLEgt

Celda 21 Celda 22

Tabla 43

bull rowspan=n Con este argumento podemos lograr que una celda concreta abarque maacutes de una fila ya sabemos que por defecto una celda ocupa una sola fila

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTD rowspan=2gtCelda

11ltTDgtCelda 12ltTRgtltTDgtCelda 22

ltTABLEgt

Celda 11 Celda 22

Tabla 44

bull colspan=n Con este argumento podemos lograr que una celda se expanda a maacutes

de una columna

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTD colspan=2

align=centergtCelda 22ltTABLEgt

Celda 22

Tabla 45

Para finalizar este tema sobre la creacioacuten de tablas vamos a ver el ejemplo que aparece en el Coacutedigo fuente 14 y su resultado en la Tabla 46

ltTABLE border=4gtltTR gtltTH colspan=3 bgcolor=redgtTiacutetuloltTR bgcolor=yellowgtltTHgtCabecera 1ltTHgtCabecera 2ltTHgtCabecera 3

copy Grupo EIDOS 4 Elementos del lenguaje II

43

ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTDgtCelda 13ltTRgtltTD rowspan=2gtCelda 21ltTD bgcolor=greengtCelda 22ltTDgtCelda 23ltTRgtltTDgtCelda 32ltTDgtCelda 33

ltTABLEgt

Coacutedigo fuente 14

Tiacutetulo

Cabecera 1 Cabecera 2 Cabecera 3

Celda 11 Celda 12 Celda 13

Celda 22 Celda 23 Celda 21

Celda 32 Celda 33

Tabla 46

Formularios El formulario es el elemento de HTML que nos va a permitir interactuar con los visitantes de nuestras paacuteginas web de forma que podemos solicitarle informacioacuten al usuario y procesarla De esta forma podremos crear en nuestras paacuteginas encuestas para solicitar la opinioacuten del visitante sobre alguacuten tema e incluso sobre el contenido de nuestra propia paacutegina web cuestionarios para evaluar la asimilacioacuten de contenidos sobre un tema concreto que se trate en la paacutegina etc

El contenido de la informacioacuten introducida por medio del formulario seraacute enviado a la direccioacuten URL donde resida el programa que se encargaraacute de procesar los datos A este tipo de programas externos se les denomina programas CGI (Common Gateway Interface)

La etiqueta HTML que nos va a permitir la creacioacuten de formularios es ltFORMgt Su formato es el siguiente

ltFORM action=URL del programa que trata el formulariomethod=postgetgt Elementos del formulario ltFORMgt

bull action=URL del programa que trata el formulario A traveacutes de este

argumento indicaremos como ya hemos mencionado la direccioacuten del fichero de programa que va a tratar la informacioacuten suministrada por el formulario

Tambieacuten podriacuteamos incluir como URL que trata el formulario una direccioacuten de correo electroacutenico Por tanto el valor de este argumento podriacutea ser action =mailto direccioacuten de correo

Nota Esta opcioacuten soacutelo funciona adecuadamente con el navegador Netscape Con el Explorer este enviacuteo dariacutea como resultado un correo en blanco Para que esta opcioacuten funcione de manera independiente del navegador que se esteacute utilizando se ha de emplear un programa externo que realice este proceso

Lenguaje HTML copy Grupo EIDOS

44

bull method=postget A traveacutes de este argumento indicaremos el meacutetodo empleado para transferir la informacioacuten generada por el formulario

Si indicamos post se produciraacute la modificacioacuten del documento destino como es el caso de enviar la informacioacuten a una direccioacuten de correo electroacutenico Mediante el meacutetodo get no se produciraacuten cambios en el documento destino

Dentro de un formulario podremos incluir cualquier texto o instruccioacuten HTML de las vistas a lo largo de los capiacutetulos anteriores ademaacutes claro estaacute de los elementos tiacutepicos de un formulario cajas de texto botones de seleccioacuten menuacutes de opciones etc Vamos a ver coacutemo se incluiraacuten estos elementos en un formulario

Entrada baacutesica de datos Para definir los distintos tipos de campos baacutesicos de entrada de datos usaremos la etiqueta ltINPUTgt

El formato es el siguiente

ltINPUT type= text password checkbox radio hidden submit image reset name=Variable value=Valor inicialgt

bull El argumento type determinaraacute el tipo de campo de entrada que estamos insertando A

continuacioacuten describiremos cada uno de ellos

bull El argumento name especifica el nombre de la variable que tomaraacute el valor introducido en el campo

bull El argumento value especifica el valor por defecto que tendraacute el campo

Vamos a continuacioacuten a describir los distintos tipos campos de entrada que vendraacuten dados por los valores del argumento type

Texto corto type=text

Con este argumento vamos a indicar que el campo a introducir seraacute un texto El formato seriacutea

ltINPUT type= text name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los nuevos atributos es

bull size=Tamantildeo Indicaremos el tamantildeo en caracteres de la ventana de introduccioacuten de texto

bull maxlength=Longitud maacutexima Indicaremos el nuacutemero maacuteximo de caracteres a introducir en el campo

Vamos a ver un ejemplo en la Tabla 47

copy Grupo EIDOS 4 Elementos del lenguaje II

45

Ejemplo Resultado

NombreltINPUT type=text name=Var1Value=Texto por defecto size=20 maxlength=25gt

Tabla 47

Claves type=password

Con este argumento indicamos que el campo a introducir seraacute una palabra clave por lo que los caracteres que se introduzcan seraacuten sustituidos por asteriscos en la visualizacioacuten por pantalla El formato es

ltINPUT type= password name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los distintos argumentos es el mismo que en el caso anterior Veamos un ejemplo en la Tabla 48

Ejemplo Resultado

ClaveltINPUT type=password name=Var2Value=tutankamon size=11 maxlength=10gt

Tabla 48

Botones de seleccioacuten type=checkbox

El checkbox es un botoacuten que presenta dos estados marcado (1) y desmarcado (0) Podremos variar su estado simplemente pinchando con el ratoacuten El formato es

ltINPUT type= checkbox name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto

Si incluimos el argumento value cuando el botoacuten esteacute marcado su variable asociada adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 49

Ejemplo Resultado

ltINPUT type=checkbox name=Var3 value=Op1 checkedgtOpcioacuten1 ltbrgtltINPUT type=checkbox name=Var4 value=Op2gt Opcioacuten 2

Tabla 49

Lenguaje HTML copy Grupo EIDOS

46

Seleccioacuten entre varias opciones type=radio

Este argumento se usa cuando hay que hacer una seleccioacuten entre varias alternativas excluyentes pudieacutendose seleccionar uacutenicamente una de las alternativas Debemos incluir una etiqueta radio por cada una de las posibles alternativas El formato es

ltINPUT type= radio name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto En este caso uacutenicamente uno de los botones de radio podraacute aparecer marcado ya que se usa para el caso de opciones excluyentes

Cuando un botoacuten esteacute seleccionado la variable asociada a la lista de botones adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 50

Ejemplo Resultado

ltINPUT type=radio name=Var5 value=Op1gtOpcioacuten1 ltbrgtltINPUT type=radio name=Var5 value=Op2checkedgt Opcioacuten 2 ltbrgtltINPUT type=radio name=Var5 value=Op3 gtOpcioacuten 3

Tabla 50

En este ejemplo la variable Var5 tendraacute el valor Op2

Campos ocultos type=hidden

Este tipo de campos no son visibles para el usuario Su uso tiene sentido en el caso de enviar alguacuten tipo de informacioacuten que no deba ser visualizada o variada por el lector de nuestra paacutegina Web El formato es

ltINPUT type= hidden name=Variable value=Valor gt

Con esta etiqueta asignariacuteamos a la Variable referenciada por name el Valor de value y se mandariacutea junto con el formulario sin que el usuario de la paacutegina se entere de nada Veamos un ejemplo en el Coacutedigo fuente 15

ltINPUT type=hidden name=Var6 value=tutankamongt

Coacutedigo fuente 15

copy Grupo EIDOS 4 Elementos del lenguaje II

47

Botoacuten de enviacuteo de datos type=submit

Con este argumento especificamos un botoacuten en el que al pulsar los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario El formato es

ltINPUT type= submit value=Mensaje a mostrargt

En este caso el paraacutemetro value indica el mensaje que se mostraraacute en el botoacuten Veamos un ejemplo en la Tabla 51

Ejemplo Resultado

ltINPUT type=submit value=Enviar los Datosgt

Tabla 51

Botoacuten graacutefico de enviacuteo de datos type=image

Con este argumento especificamos un botoacuten de tipo imagen en el que al igual que con el botoacuten anterior si pulsamos en la imagen los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario Su formato es el siguiente

ltINPUT type= image src=URL de la imagen name=Variablegt

Con el paraacutemetro src especificamos la URL de la imagen que seraacute insertada en el botoacuten En este caso en la variable referenciada por name se almacenaraacuten las coordenadas del punto de la imagen donde se halla pinchado (de forma que estas coordenadas podriacutean ser procesadas por el programa que recibe los datos del formulario)

Botoacuten de borrado de datos type=reset

Con este argumento especificamos un botoacuten que al ser pulsado borraraacute el contenido actual de todos los campos dejaacutendolos con sus valores por defecto Su formato es

ltINPUT type= reset value=Texto del botoacutengt

Con el paraacutemetro value especificamos el texto que etiquetaraacute al botoacuten

Ejemplo Resultado

ltINPUT type=reset value=Borrar datosgt

Tabla 52

Lenguaje HTML copy Grupo EIDOS

48

Entrada datos en muacuteltiples liacuteneas En un formulario tambieacuten podremos introducir un campo de texto que abarque varias liacuteneas Para ello usaremos la etiqueta ltTEXTAREAgt ltTEXTAREAgt Su formato es el siguiente

ltTEXTAREA name=Variable rows=Filas cols=ColumnasgtContenido por defectoltTEXTAREAgt

Los argumentos rows y cols nos van a permitir especificar respectivamente el nuacutemero de filas de texto visibles y el nuacutemero de columnas de texto visibles en el campo

Ejemplo Resultado

ltTEXTAREA name=Var7 rows=5 cols=40gtContenido por defectoltTEXTAREAgt

Tabla 53

Entrada de datos a traveacutes de campos de seleccioacuten Con los campos de seleccioacuten podremos desplegar una lista de opciones entre las que podremos seleccionar una Para ello usaremos la etiqueta ltSELECTgt ltSELECTgt Su formato es el siguiente

ltSELECT name=Variable multiple size=ngtltOPTION selected value=Valor_1gtPrimera OpcioacutenltOPTION value=Valor_2gtSegunda Opcioacuten

ltOPTION value=Valor_ngtEneacutesima Opcioacuten

ltSELECTgt

Figura 1

bull La variable referenciada por name tomaraacute el valor(value) de la opcioacuten seleccionada

bull Si especificamos el argumento muacuteltiple se mostraraacuten todas la opciones en forma de tabla El nuacutemero de opciones visibles en la tabla vendraacute dado por el argumento size

copy Grupo EIDOS 4 Elementos del lenguaje II

49

bull Con la etiqueta ltOPTIONgt iremos definiendo cada una de las opciones de la lista

bull El argumento selected va a determinar cuaacutel es la opcioacuten por defecto

Para finalizar vamos a ver el Coacutedigo fuente 16 correspondiente a una encuesta realizada por la editorial ficticia EditoPc y en la Figura 2 observamos el resultado del formulario

ltP align=centergtltBgtEDITORIAL ltIgtEditoPcltIgtltBgtltPgtltFORM action=mailtodireccionejemplo method = postgtNombreltINPUT type=text size=30 name=nombregtltBRgtE_mail ltINPUT type=text size=30 name=e_mailgtltPgtDeseas recibir informacioacuten sobreltINPUT type=checkbox name=infor1 value=InternetgtInternetltINPUT type=checkbox name=infor2 value=ProgramacioacutengtProgramacioacutenltINPUT type=checkbox name=infor3 value=SistOperativogtSistOperativoltINPUT type=checkbox name=infor4 value=OfimaacuteticagtOfimaacuteticaltPgtiquestTe conectas a Internet desde casa ltbrgtltINPUT type=radio name=intercasa value=sigtSiacuteltINPUT type=radio name=intercasa value=nogtNoltPgtiquestQueacute uso le das a tu ordenador ltBRgtltSELECT name=uso multiple size=3gtltOPTION selectedgtProfesionalltOPTIONgtDomeacutesticoltOPTIONgtOcioJuegosltSELECTgtltPgtCaracteriacutesticas de tu PCltBRgtltTEXTAREA name=caract rows=5 cols=40gtltTEXTAREAgtltPgtltINPUT type=submit value=Enviar datosgt ltINPUT type=reset value=Borrardatosgt

Coacutedigo fuente 16

Figura 2

Elementos del lenguaje III

Frames Las frames son una utilidad del HTML que nos permite dividir la ventana del navegador en diferentes subventanas que podraacuten ser manipuladas de manera independiente Esto nos permitiraacute mostrar una paacutegina web diferente en cada una de la subventanas o frames

Estructura de un documento con frames Un documento con frames se estructura de manera diferente a un documento HTML normal Asiacute en este tipo de documentos no apareceraacute la etiqueta ltBODYgt En su lugar se incluiraacute la etiqueta ltFRAMESETgt ltFRAMESETgt dentro de la cual se definiraacuten las distintas frames que se incluyan en el documento

La estructura general de un documento de este tipo seriacutea por tanto

ltHTMLgtltHEADgtCabeceraltHEADgtltFRAMESETgt

Definicioacuten de la distintas framesltFRAMESETgtltNOFRAMESgt

Instrucciones HTMLltNOFRAMESgt

ltHTMLgt

Lenguaje HTML copy Grupo EIDOS

52

Puede darse el caso de que programemos nuestro documento con frames siguiendo la estructura anterior y que el navegador que se use para leer el documento no soporte la caracteriacutestica de frames con lo cual no se mostraraacute nada de lo indicado entre las etiquetas ltFRAMESETgt y ltFRAMESETgtPara solucionar este problema todas las instrucciones HTML incluidas entre las etiquetas ltNOFRAMESgt y ltNOFRAMESgt seraacuten ejecutadas por los navegadores que no soportan las frames

La sintaxis de la etiqueta ltFRAMESETgt es

ltFRAMESET rows=Lista de filas cols=Lista de columnasgtltFRAME src=URL de la frame 1 name=Nombre de la frame 1gtltFRAME src=URL de la frame 2 name=Nombre de la frame 2gt

ltFRAME src=URL de la frame n name=Nombre de la frame ngt

ltFRAMESETgt

Como vemos por cada una de la frames que incluyamos en nuestro documento debemos incluir una etiqueta ltFRAMEgt indicando mediante sus argumentos la direccioacuten URL del documento que se insertaraacute en la subventana (src) y el nombre de la frame (name) Posteriormente describiremos la etiqueta ltFRAMEgt con maacutes detalle

Los argumentos de ltFRAMESETgt son rows y cols definieacutendose uacutenicamente uno de los dos atributos en funcioacuten de si la divisioacuten de la pantalla se realizaraacute por filas (rows) o por columnas (cols)

Por cada una de las subventanas que creemos debemos especificar su tamantildeo en puntos o en porcentaje del tamantildeo de cada subventana Asiacute por ejemplo si especificamos rows= 50 2525 crearemos tres subventanas horizontales ocupando la primera el 50 de la ventana principal y las otras dos el resto Si especificamos cols=100150 crearemos tres subventanas verticales ocupando la primera 100 puntos de la ventana principal la segunda 150 puntos y tercera el espacio restante

Vamos a verlo maacutes claramente con un par de ejemplos praacutecticos que vemos en la Tabla 54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 502525gt ltFRAMEsrc=Pagweb1htm name=Pagweb1gtltFRAMEsrc=Pagweb2htm name=Pagweb2gtltFRAMEsrc=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 20: Programacion web   lenguaje html

Lenguaje HTML copy Grupo EIDOS

24

ltH3gtCabecera 3ltH3gt Cabecera 3

ltH4gtCabecera 4ltH4gt Cabecera 4

ltH5gtCabecera 5ltH5gtCabecera 5

ltH6gtCabecera 6ltH6gtCabecera 6

Tabla 13

Ejemplo Resultado

ltH5 align=centergtCabecera 5ltH5gtCabecera 5

Tabla 14

Atributos del texto Al texto de nuestro documento HTML le podemos aplicar distintos atributos (negrita cursiva subrayado etc) al igual que hacemos cuando trabajamos con el procesador de textos en la edicioacuten de nuestros documentos Para aplicar estos atributos disponemos de distintas etiquetas que aplicaraacuten su efecto al texto incluido entre sus indicadores de inicio y fin Las vemos en la Tabla 15

Atributo Etiqueta Ejemplo Resultado

Negrita ltBgtltBgtltBgtTexto ennegritaltBgt

Texto en negrita

Cursiva ltIgtltIgtltIgtTexto encursivaltIgt

Texto en cursiva

Teletype ltTTgtltTTgtltTTgtTexto en modoteletypeltTTgt

Texto en modoteletype

Subrayado ltUgtltUgt ltUgtTexto subrayadoltUgt Texto subrayado Tachado ltSgtltSgt ltSgtTexto tachadoltSgt Texto tachado

Parpadeo ltBLINKgtltBLINKgtltBLINKgtTextoparpadeandoltBLINKgt

Texto parpadeando

Superiacutendice ltSUPgtltSUPgt ltSUPgtTexto en modosuperiacutendiceltSUPgt

Texto en modo superiacutendice

Subiacutendice ltSUBgtltSUBgtltSUBgtTexto en modosubiacutendiceltSUBgt

Texto en modo subiacutendice

Centrado ltCENTERgtltCENTERgt

ltCENTERgtTextocentradoltCENTERgt

Texto centrado

B Bold I Italic TT Teletype U Underlined S Strike SUP Superscript SUB Subscript

Tabla 15

copy Grupo EIDOS 3 Elementos del lenguaje I

25

Alguna de estas etiquetas no es reconocida por determinados navegadores Asiacute por ejemplo la etiqueta ltBLINKgt (Parpadeo) no es implementada por el Explorer Por lo que seguacuten el explorador que estemos utilizando podremos ver el resultado correctamente o no

Existen otras etiquetas que nos van a servir para especificar de manera diferenciada unidades loacutegicas de nuestro documento HTML tales como citas direcciones de correo etc En algunos casos el formato obtenido con estas etiquetas de estilo loacutegico va a ser el mismo que con las anteriores a las que se les denomina tambieacuten etiquetas de estilo fiacutesico Algunas etiquetas de estilo loacutegico las vemos en la Tabla 16

Etiqueta Ejemplo Resultado

ltSTRONGgtltSTRONGgtltSTRONGgtEspecifica textoresaltado (igualltBgt)ltSTRONGgt

Especifica texto resaltado(igual ltBgt)

ltCITEgtltCITEgtltCITEgtIndica una cita otiacutetulo (igual ltIgt)ltCITEgt

Indica una cita o tiacutetulo (igualltIgt)

ltSTRIKEgtltSTRIKEgtltltSTRIKEgtTexto tachado(igual ltSgt)ltSTRIKEgt

Texto tachado (igual ltSgt)

Tabla 16

Si queremos aplicar efectos maacutes espectaculares a nuestro documento HTML debemos variar el tamantildeo el color y el tipo de letra del texto La etiqueta que nos permite todo esto es ltFONTgtltFONTgt por medio de sus atributos size color y face

ltFONT size=n oacute +- n color=rrggbb oacute name face=nombre defont gt

bull size=n oacute +- n El atributo size nos permite especificar un tamantildeo determinado

para la fuente del texto incluido entre las etiquetas de inicio y fin el cual puede estar entre 1 y 7 El texto de tamantildeo normal equivale a la fuente de tamantildeo 3 (fuente base) Por tanto si especificamos size=+2 el tamantildeo de la fuente seraacute 5 Y si especificamos size= -1 el tamantildeo seraacute 2

Ejemplo Resultado

ltFONT size=2gtTamantildeo 2ltFONTgtTamantildeo 2

ltFONT size=+2gtTamantildeo 5 (3+2)ltFONTgt Tamantildeo 5 (3+2)

ltFONT size=-1gtTamantildeo 2 (3-1)ltFONTgtTamantildeo 2 (3-1)

Tabla 17

bull color=rrggbb oacute name Nos va a permitir definir el color que tendraacute el texto

incluido entre las etiquetas Tabla 18

Lenguaje HTML copy Grupo EIDOS

26

Ejemplo Resultado

ltFONT color=redgtTexto de colorrojoltFONTgt

Texto de color rojo

ltFONT color=bluegtTexto de colorazulltFONTgt

Texto de color azul

ltFONT size=5 color=008000gtTextoverde y de tamantildeo 5ltFONTgt

Texto verde y detamantildeo 5

Tabla 18

bull face=nombre de font Nos va a permitir escribir texto con el tipo de letra que le

especifiquemos En el caso de que el tipo de letra que le hayamos especificado no esteacute cargada en el ordenador que lee la paacutegina se usaraacute el font por defecto del navegador

Ejemplo Resultado

ltFONT face=TahomagtTipo de letraTahomaltFONTgt

Tipo de letra Tahoma

ltFONT size=4 color=blueface=TahomagtTexto azul de tamantildeo4 y TahomaltFONTgt

Texto azul de tamantildeo 4 y Tahoma

Tabla 19

Listas Podemos representar elementos en forma de lista dentro de nuestros documentos de una forma muy sencilla y con una gran versatilidad Estas listas podraacuten incluir cualquiera de los elementos HTML e incluso podemos definir listas anidadas es decir listas dentro de listas HTML nos permite crear tres tipos distintos de listas

bull Listas no numeradas

bull Listas numeradas

bull Listas de definiciones

Listas no numeradas ltULgt UL Unordered List

Con este tipo de listas podemos especificar una serie de elementos sin un orden predeterminado precedidos de una marca o vintildeeta que nosotros mismos podemos definir Para la definicioacuten de los liacutemites de la lista utilizaremos la etiqueta ltULgt ltULgt y para determinar cada uno de los elementos que la componen usaremos la etiqueta ltLIgt El formato es el siguiente

ltUL type=disk oacute circle oacute squaregtltLHgtTiacutetulo de la listaltLHgt

copy Grupo EIDOS 3 Elementos del lenguaje I

27

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltULgtLH List Head LI List Item

Con el atributo type vamos a especificar el tipo de marca o vintildeeta que antecederaacute a cada uno de los elementos de la lista Estas marcas podraacuten ser un disco (disk) un ciacuterculo (circle) o un cuadrado (square) La etiqueta ltLHgt nos va a servir para especificar un posible tiacutetulo de la lista siendo esta opcional Vamos a ver algunos ejemplos en la Tabla 20

Ejemplo Resultado

ltUL type=circlegtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAfricaltLIgtAmeacutericaltLIgtOceaniacutea

ltULgt

Los cinco continentes

Europa

Asia

Aacutefrica

Ameacuterica

Oceaniacutea

ltUL type=squaregtltLIgtEuropaltLIgtAsialtLIgtAfricaltLIgtAmeacutericaltUL type=circle gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltULgtltLIgtOceaniacutea

ltULgt

Europa

Asia

Aacutefrica

Ameacuterica

Ameacuterica del Norte

Ameacuterica del Sur

Oceaniacutea

Tabla 20

Listas numeradas ltOLgt OL Ordered List

Con este tipo de listas podemos especificar una serie de elementos numerados seguacuten el lugar que ocupan en la lista Para la definicioacuten de los liacutemites de la lista utilizaremos la etiqueta ltOLgt ltOLgt y para determinar cada uno de los elementos que la componen usaremos la etiqueta ltLIgt El formato es el siguiente

ltOL start=n type=Tipo de listagtltLHgtTiacutetulo de la listaltLHgt

Lenguaje HTML copy Grupo EIDOS

28

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltOLgt

Con el atributo start vamos a especificar el nuacutemero por el que va a empezar la lista Si no indicamos este argumento la lista empezaraacute a numerarse a partir del 1 Con el atributo type vamos a especificar el tipo de lista numerada Sus posibles valores aparecen a continuacioacuten y veremos algunos ejemplos en la Tabla 21

A Letras mayuacutesculas (A B C )

a Letras minuacutesculas (a b c )

I Nuacutemeros romanos en mayuacutesculas (I II III IV )

i Nuacutemeros romanos en minuacutesculas (i ii iii iv )

1 Numeacutericamente (1 2 3 4 ) (es la numeracioacuten por defecto y por tanto no habriacutea que indicarla)

Ejemplo Resultado

ltOL type=AgtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltLIgtOceaniacutea

ltOLgt

Los cinco continentes

A Europa

B Asia

C Aacutefrica

D Ameacuterica

E Oceaniacutea

ltOL type=I start=2gtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltOL type=i gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltOLgtltLIgtOceaniacutea

ltOLgt

II Europa

III Asia

IV Aacutefrica

V Ameacuterica

i Ameacuterica del Norte

ii Ameacuterica del Sur

VI Oceaniacutea

Tabla 21

copy Grupo EIDOS 3 Elementos del lenguaje I

29

Listas de definiciones ltDLgt DL Definition List

Estas listas nos van a servir para especificar una serie de teacuterminos y sus definiciones correspondientes Para la definicioacuten de la lista usaremos la etiqueta ltDLgt ltDLgt para especificar los teacuterminos usaremos la etiqueta ltDTgt y para especificar la definicioacuten correspondiente a cada teacutermino usaremos la etiqueta ltDDgt El formato es el siguiente

ltDLgtltLHgtTiacutetulo de la listaltLHgtltDTgtTeacutermino 1ltDDgtDefinicioacuten 1ltDTgtTeacutermino 2ltDDgtDefinicioacuten 2

ltDTgtTeacutermino nltDDgtDefinicioacuten n

ltDLgtDT Definition Term DD Definition Description

Vamos a ver un ejemplo en la Tabla 22

Ejemplo Resultado

ltDLgtltDTgtPariacutesltDDgtCapital de FrancialtDTgtRomaltDDgtCapital de ItalialtDTgtMadridltDDgtCapital de Espantildea

ltDLgt

Pariacutes

Capital de Francia

Roma

Capital de Italia

Madrid

Capital de Espantildea

Tabla 22

Hiperenlaces Los hiperenlaces son enlaces de hipertexto que nos van a permitir acceder de manera directa a otros documentos HTML independientemente de su ubicacioacuten o a otras zonas dentro de nuestro propio documento

Enlaces a otras paacuteginas ltA href=gt Con este tipo de hiperenlaces vamos a poder acceder tanto a otras paacuteginas que esteacuten ubicadas dentro de nuestro propio sistema como a paacuteginas ubicadas en puntos muy distantes del globo El formato de este tipo de hiperenlaces es

ltA href=URL a la que se accedegtTexto del hiperenlaceltAgt

Lenguaje HTML copy Grupo EIDOS

30

Con el atributo href vamos a especificar la URL del documento al que se pretende acceder El texto contenido entre las etiquetas de comienzo y fin nos va a servir para definir el hiperenlace por lo que deberiacutea ser clarificador del contenido del documento con el que vamos a enlazar Esta definicioacuten apareceraacute resaltada normalmente en azul y subrayada En la mayoriacutea de los navegadores esta definicioacuten del hiperenlace es sensible por lo que cuando el cursor pasa por encima del mismo este cambia de aspecto indicaacutendolo

Veamos un ejemplo en la Tabla 23

Ejemplo Resultado

ltA href=httpwwweidosesgtPaacutegina inicialde Villa EidosltAgt

Paacutegina inicial de Villa Eidos

Tabla 23

Si situamos el ratoacuten encima del hiperenlace y pulsamos el navegador accederaacute a la paacutegina Web indicada por href es decir accederaacute a la paacutegina situada en httpwwweidoses

Igualmente podriacuteamos indicar el hiperenlace por medio de una imagen Si esta imagen tiene definido un borde este apareceraacute resaltado en color azul El formato correspondiente seriacutea

ltA href=URL a la que se accedegtltIMG src=Imagengt y tambieacutentextoltAgtIMG Image src Source

Veamos un ejemplo en la Tabla 24

Ejemplo Resultado

ltA href=httpwwweidosesgtltIMGsrc=IconogifgtltAgt Villa Eidos Villa Eidos

Tabla 24

Si pulsamos sobre la imagen el navegador accederaacute a la paacutegina Web inicial de Villa Eidos

Enlaces dentro de la misma paacutegina ltA name=gt Este tipo de hiperenlaces nos va a permitir marcar distintas zonas del documento activo con el objeto de tener un acceso directo a las mismas Una buena utilidad de este tipo de enlaces radica en la creacioacuten de iacutendices para documentos largos de forma que si pinchamos en el hiperenlace correspondiente al tiacutetulo de un capiacutetulo determinado el navegador saltaraacute automaacuteticamente hasta el comienzo de dicho capiacutetulo

Para la creacioacuten de estos hiperenlaces debemos seguir dos pasos

copy Grupo EIDOS 3 Elementos del lenguaje I

31

1 Marcar las distintas zonas o secciones del documento Esto lo haremos con el paraacutemetro name

ltA name=Identificador de seccioacutengtTexto de laseccioacutenltAgt

A cada seccioacuten le asignaremos un identificador distinto para poder referenciarlas posteriormente de manera inequiacutevoca

2 Especificar un enlace a cada una de las secciones que hayamos definido ltA href=Identificador de seccioacutengtTexto del enlace a laseccioacutenltAgt

Si pinchamos en este enlace el navegador saltaraacute automaacuteticamente a la seccioacuten correspondiente Veamos un ejemplo sencillito en la Tabla 25 pero demostrativo de todo lo que acabamos de explicar

Ejemplo Resultado

ltA href=Cap1gtCapiacutetulo1ltAgtltA name=Cap1gtCapiacutetulo 1ltAgt

Capiacutetulo 1

Capiacutetulo 1

Tabla 25

Si nos creamos una paacutegina HTML con distintos capiacutetulos podriacuteamos crear una seccioacuten para cada uno de ellos de forma que si pinchamos en el hiperenlace correspondiente al Capiacutetulo 1 el navegador saltariacutea directamente a la seccioacuten correspondiente al Capiacutetulo 1

Ademaacutes de los dos tipos de hiperenlaces vistos podemos crear hiperenlaces que nos permitan acceder a cualquiera de los servicios de Internet Es decir podriacuteamos indicar enlaces a servidores FTP GOPHER NEWS MAILTO etc Para ello tendriacuteamos que indicar la URL correspondiente al servicio al cual queremos acceder como ya vimos en el primer capiacutetulo de este manual

Imaacutegenes

Podremos dar un aspecto mucho maacutes vistoso a nuestros documentos HTML con la inclusioacuten de imaacutegenes Los formatos de imagen que todos los navegadores reconocen son gif y jpg Si queremos insertar una imagen en otro formato el visor deberiacutea disponer del programa externo que permita su visualizacioacuten De todas formas una buena solucioacuten es utilizar alguacuten programa de tratamiento de imaacutegenes que nos convierta la imagen a uno de los formatos mencionados anteriormente

El formato gif es maacutes recomendado para la inclusioacuten de iconos graacuteficas y el formato jpg para el caso de insertar fotografiacuteas en nuestras paacuteginas

Lenguaje HTML copy Grupo EIDOS

32

La etiqueta que nos va a permitir la insercioacuten de imaacutegenes es ltIMGgt La imagen se insertaraacute justo en el punto del documento donde coloquemos dicha etiqueta pudiendo insertar imaacutegenes dentro de listas tablas o formularios

El formato de la etiqueta con sus posibles argumentos es el siguiente

ltIMG src=URL de la imagen alt=Texto alternativoalign=topmiddlebottonleftrigth border=Tamantildeoheight=Tamantildeo width=Tamantildeo hspace=margen vspace=margengt

bull src=URL de la imagen El atributo src nos va servir para indicar la URL de la imagen que

queremos insertar es decir el servidor y camino hasta llegar al fichero de la imagen

No seraacute necesario que la imagen que queremos insertar en nuestro documento esteacute en el ordenador local aunque siacute es recomendable ya que el acceso a las mismas puede ser maacutes lento

Por tanto es una buena praacutectica copiar todas las imaacutegenes que vayamos a incluir en nuestro documento HTML al ordenador local

Tabla 26

bull alt=Texto alternativo Nos va a permitir mostrar un texto alternativo para el caso en que el

navegador no sea capaz de mostrar la imagen Su uso es muy recomendable ya que cuando publiquemos nuestras paacuteginas en la WWW no sabremos desde queacute tipo de navegadores accederaacuten los internautas a nuestras paacuteginas

En la Tabla 27 vamos a ver un ejemplo

Si usas un navegador que no tiene ninguacuten problema para la visualizacioacuten de imaacutegenes desactiva temporalmente la opcioacuten de mostrar imaacutegenes prueba el ejemplo que muestra la Tabla 27 y compaacuteralo con el anterior

Tabla 27

copy Grupo EIDOS 3 Elementos del lenguaje I

33

bull align=topmiddlebotton leftrigth Nos permite indicar coacutemo se alinearaacute el texto que siga a la imagen

top alinea el texto con la parte superior de la imagen

middle con la parte central

bottom con la parte inferior

left imagen alineada a la izquierda de la paacutegina

rigth imagen alineada a la derecha de la paacutegina

Tabla 28

En el caso de que el texto que acompantildea a la imagen tenga maacutes de una liacutenea tan soacutelo la primera seraacute la que se alinearaacute seguacuten alguna de las anteriores alineaciones el resto de liacuteneas se incluiraacuten debajo de la imagen quedando un efecto bastante feo

Para solventar esto estaacuten las alineaciones LEFT (imagen alineada a la izquierda de la paacutegina) y RIGHT (imagen alineada a la derecha de la paacutegina) Las cuales permiten que la imagen se inserte dentro del paacuterrafo que la rodea produciendo un resultado mucho maacutes profesional en la integracioacuten de texto e imaacutegenes

Estas dos alineaciones no se podraacuten usar en combinacioacuten con las anteriores Veamos algunos ejemplos en la Tabla 29

Vemos como en el primer ejemplo la segunda liacutenea de texto aparece debajo de la imagen produciendo un efecto menos vistoso que en los dos ejemplos siguientes

Lenguaje HTML copy Grupo EIDOS

34

Tabla 29

bull border=Tamantildeo Permite antildeadirle un borde a la imagen del tamantildeo que le

especifiquemos

Si la imagen forma parte de un hiperenlace esta apareceraacute con un borde del color del hiperenlace Si no deseaacuteramos que aparezca este borde tendriacuteamos que especificar border=0

Tabla 30

bull height=Tamantildeo Permite especificar el alto de la imagen en puntos de pantalla

(pixels) o en del tamantildeo del documento

bull width=Tamantildeo Con este argumento especificaremos el ancho al que mostraremos la imagen en puntos de pantalla (pixels) o en del tamantildeo del documento

En el segundo de los ejemplos de la Tabla 31 el ancho de la imagen se ha extendido al 50 del total del ancho de la celda donde estaacute contenida la imagen Si pruebas este ejemplo en tu documento HTML la imagen se extenderaacute horizontalmente hasta ocupar el 50 del ancho de la paacutegina

copy Grupo EIDOS 3 Elementos del lenguaje I

35

Tabla 31

bull hspace=Margen hspace Horizontal Space Permite especificar el nuacutemero de espacios

horizontales (en puntos) que separaraacuten a la imagen de cualquier elemento que le siga o le anteceda

bull vspace=Margen vspace Vertical Space Con este argumento especificaremos el margen vertical (en puntos) que habraacute entre la imagen y cualquier otro elemento de nuestro documento

Tabla 32

Elementos del lenguaje II

Tablas HTML nos va a permitir la inclusioacuten de cualquiera de los elementos de nuestra paacutegina (texto imaacutegenes hiperenlaces listas etc) dentro de una tabla Gracias a lo cual conseguiremos dar una mayor y mejor estructuracioacuten a los contenidos de nuestros documentos Ademaacutes la definicioacuten de las tablas en HTML es muy abierta pudiendo en cualquier momento redimensionar la tabla es decir cambiar su nuacutemero de filas o de columnas cambiar el tamantildeo de alguna de sus celdas etc

La etiqueta que nos va a permitir la definicioacuten de tablas es ltTABLEgt ltTABLEgt

El formato general de la etiqueta sin ninguacuten argumento es el siguiente

ltTABLEgtltTR gt

ltTHgtContenido de la celda ltTHgtltTDgtContenido de la celda ltTDgt

ltTRgtltTABLEgt

TR Table Row TH Table Header TD Table Data

Vamos a analizar cada una de estas etiquetas de forma separada

1 ltTABLEgt ltTABLEgt Definicioacuten general de la tabla Dentro de ella definiremos las filas y columnas que la constituyen pudiendo incluso definir tablas dentro de tablas es decir tablas anidadas

Lenguaje HTML copy Grupo EIDOS

38

2 ltTRgt ltTRgt Definicioacuten de las filas de la tabla Por cada etiqueta ltTRgt que incluyamos se crearaacute una fila en la tabla No seraacute necesario indicar la etiqueta de cierre

3 ltTHgtltTHgt oacute ltTDgtltTDgt Definicioacuten de cada una de las celdas de la tabla Vemos que estas etiquetas estaacuten contenidas dentro de otra etiqueta de definicioacuten de fila de forma que por cada etiqueta ltTHgt o ltTDgt que incluyamos se crearaacute una celda dentro de la fila correspondiente La etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera es decir celdas cuyo contenido estaacute resaltado en negrita dejando la etiqueta ltTDgt para definir celdas de datos En este caso tampoco es necesario indicar las etiquetas de cierre

Todas estas etiquetas tienen sus respectivos argumentos Pero antes de analizar cada uno de ellos vamos a ver un ejemplo muy sencillito en la Tabla 33 que nos crearaacute una tabla de una sola celda (1 fila X 1 columna = 1 celda) Para ello usaremos la etiqueta de creacioacuten de tabla ltTABLEgt con el argumento border=1 (nos dibuja un borde de tamantildeo 1 alrededor de la tabla)

Ejemplo Resultado

ltTABLE border=1gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 33

Vamos ahora a analizar lo distintos argumentos que componen las etiquetas de la tabla analizaacutendolos desde lo general (la definicioacuten de la tabla) hasta lo especiacutefico (la definicioacuten de las celdas)

1 Definicioacuten de la tabla ltTABLEgt

ltTABLE border=n cellpadding=n cellspacing=n width=n oacute height=n oacute bgcolor=rrggbb oacute nombre gt

Contenido ltTABLEgt

bull border=n Si especificamos este argumento se dibujaraacute un borde alrededor de la

tabla del ancho que le indiquemos como muestra la Tabla 34

Ejemplo Resultado

Mi primera tabla ltTABLE border=4gtltTRgtltTDgtMi primera tablaltTABLEgt

Tabla 34

bull cellpadding=n Indica el espacio en puntos que separa el contenido de la celda con

el borde de la misma siendo 1 por defecto

copy Grupo EIDOS 4 Elementos del lenguaje II

39

Ejemplo Resultado

ltTABLE border=4 cellpadding=8gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 35

bull cellspacing=n Indica el espacio en puntos que separa a las celdas contenidas dentro de la tabla siendo 2 por defecto

bull width=n oacute Indica la anchura de la tabla en puntos o en en funcioacuten del ancho de la ventana del visualizador Si no indicamos este argumento el ancho de la tabla se ajustaraacute al tamantildeo del contenido de las celdas Esto es lo que ha ocurrido en el uacuteltimo ejemplo que hemos realizado Veamos un ejemplo en el Coacutedigo fuente 11 El resultado se muestra en la Tabla 36

ltTABLE border=4 width=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 11

Mi primera tabla

Tabla 36

bull height=n oacute Nos permite definir la altura de la tabla en puntos o en de la

altura de la ventana del visualizador Si indicamos este argumento lo recomendable es darlo en puntos ya que es maacutes complicado adecuarnos a la altura de la ventana del visualizador Al igual que en el caso anterior si no especificamos este argumento la altura se adecuaraacute al contenido de las celdas El Coacutedigo fuente 12 muestra un ejemplo y la Tabla 37 nos muestra el resultado

ltTABLE border=4 width=50 height=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 12

Mi primera tabla

Tabla 37

bull bgcolor= rrggbb o nombre del color Nos permite definir un color

de fondo para todas las celdas de la tabla Maacutes adelante veremos como podemos definir colores especiacuteficos para cada una de las celdas por separado

Lenguaje HTML copy Grupo EIDOS

40

Ejemplo Resultado

ltTABLE border=4 bgcolor=yellowgtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 38

2 Definicioacuten de las filas de la tabla ltTRgt

ltTR align=leftrightcenter valign=topmiddlebottombgcolor=rrggbb oacute nombregt

Antes de empezar a descifrar el significado de cada uno de los argumentos de esta etiqueta vamos a ver un ejemplo en la Tabla 39 de coacutemo se construiriacutea una tabla con dos filas (2 filas X 1 columna = 2 celdas)

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR gtltTDgtPrimera filaltTRgtltTDgtSegunda filaltTABLEgt

Segunda fila

Tabla 39

bull align=leftrightcenter Con este argumento vamos a indicar la alineacioacuten

horizontal (leftizquierda rightderecha centercentrado) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado Veamos un ejemplo en el Coacutedigo fuente 13 y su correspondiente resultado en la Tabla 40

ltTABLE border=4 width=50 gt ltTRgtltTDgtPrimera filaltTRalign=rightgtltTDgtSegunda filaltTABLEgt

Coacutedigo fuente 13

Primera fila

Segunda fila

Tabla 40

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten

vertical (toparriba middlecentrado bottomabajo) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado

copy Grupo EIDOS 4 Elementos del lenguaje II

41

bull bgcolor= rrggbb o nombre del color En este caso este argumento nos permitiraacute definir un color de fondo para todas las celdas de una fila veamos un ejemplo en la

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR bgcolor=yellowgtltTDgtPrimera

filaltTR bgcolor=greengtltTDgtSegunda

filaltTABLEgt

Segunda fila

Tabla 41

3 Definicioacuten de las celdas de la tabla ltTHgt oacute ltTDgt

ltTH oacute TD align=leftrightcenterjustifyvalign=topmiddlebottom bgcolor=rrggbb oacute nombre width=nrowspan=n colspan=ngt

Como ya explicamos anteriormente la etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera y la etiqueta ltTDgt para la creacioacuten de celdas de datos Vamos a completar nuestro ejemplo inicial antildeadieacutendole tres filas de dos celdas cada una (3 filas X 2 columnas = 6 celdas) Tabla 42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTDgtCelda 21ltTDgtCelda 22

ltTABLEgt Celda 21 Celda 22

Tabla 42

bull align=leftrightcenterjustify Con este argumento vamos a indicar la

alineacioacuten horizontal (left izquierda right derecha center centrado justifyjustificado) del contenido de cada celda por separado Su significado es el mismo que en la etiqueta ltTRgt

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten vertical (toparriba middlecentrado bottomabajo) del contenido de cada celda

bull bgcolor= rrggbb o nombre del color En este caso podremos definir un color de fondo para cada una de las celdas de manera independiente

bull width=n oacute Indica el ancho de la celda en puntos o en en funcioacuten del tamantildeo de la tabla

Lenguaje HTML copy Grupo EIDOS

42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera

1ltTHgtCabecera 2ltTR gtltTD align=rightgtCelda

11ltTD bgcolor=redgtCelda 12ltTRgtltTD

bgcolor=yellowgtCelda 21ltTDalign=centergtCelda 22ltTABLEgt

Celda 21 Celda 22

Tabla 43

bull rowspan=n Con este argumento podemos lograr que una celda concreta abarque maacutes de una fila ya sabemos que por defecto una celda ocupa una sola fila

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTD rowspan=2gtCelda

11ltTDgtCelda 12ltTRgtltTDgtCelda 22

ltTABLEgt

Celda 11 Celda 22

Tabla 44

bull colspan=n Con este argumento podemos lograr que una celda se expanda a maacutes

de una columna

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTD colspan=2

align=centergtCelda 22ltTABLEgt

Celda 22

Tabla 45

Para finalizar este tema sobre la creacioacuten de tablas vamos a ver el ejemplo que aparece en el Coacutedigo fuente 14 y su resultado en la Tabla 46

ltTABLE border=4gtltTR gtltTH colspan=3 bgcolor=redgtTiacutetuloltTR bgcolor=yellowgtltTHgtCabecera 1ltTHgtCabecera 2ltTHgtCabecera 3

copy Grupo EIDOS 4 Elementos del lenguaje II

43

ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTDgtCelda 13ltTRgtltTD rowspan=2gtCelda 21ltTD bgcolor=greengtCelda 22ltTDgtCelda 23ltTRgtltTDgtCelda 32ltTDgtCelda 33

ltTABLEgt

Coacutedigo fuente 14

Tiacutetulo

Cabecera 1 Cabecera 2 Cabecera 3

Celda 11 Celda 12 Celda 13

Celda 22 Celda 23 Celda 21

Celda 32 Celda 33

Tabla 46

Formularios El formulario es el elemento de HTML que nos va a permitir interactuar con los visitantes de nuestras paacuteginas web de forma que podemos solicitarle informacioacuten al usuario y procesarla De esta forma podremos crear en nuestras paacuteginas encuestas para solicitar la opinioacuten del visitante sobre alguacuten tema e incluso sobre el contenido de nuestra propia paacutegina web cuestionarios para evaluar la asimilacioacuten de contenidos sobre un tema concreto que se trate en la paacutegina etc

El contenido de la informacioacuten introducida por medio del formulario seraacute enviado a la direccioacuten URL donde resida el programa que se encargaraacute de procesar los datos A este tipo de programas externos se les denomina programas CGI (Common Gateway Interface)

La etiqueta HTML que nos va a permitir la creacioacuten de formularios es ltFORMgt Su formato es el siguiente

ltFORM action=URL del programa que trata el formulariomethod=postgetgt Elementos del formulario ltFORMgt

bull action=URL del programa que trata el formulario A traveacutes de este

argumento indicaremos como ya hemos mencionado la direccioacuten del fichero de programa que va a tratar la informacioacuten suministrada por el formulario

Tambieacuten podriacuteamos incluir como URL que trata el formulario una direccioacuten de correo electroacutenico Por tanto el valor de este argumento podriacutea ser action =mailto direccioacuten de correo

Nota Esta opcioacuten soacutelo funciona adecuadamente con el navegador Netscape Con el Explorer este enviacuteo dariacutea como resultado un correo en blanco Para que esta opcioacuten funcione de manera independiente del navegador que se esteacute utilizando se ha de emplear un programa externo que realice este proceso

Lenguaje HTML copy Grupo EIDOS

44

bull method=postget A traveacutes de este argumento indicaremos el meacutetodo empleado para transferir la informacioacuten generada por el formulario

Si indicamos post se produciraacute la modificacioacuten del documento destino como es el caso de enviar la informacioacuten a una direccioacuten de correo electroacutenico Mediante el meacutetodo get no se produciraacuten cambios en el documento destino

Dentro de un formulario podremos incluir cualquier texto o instruccioacuten HTML de las vistas a lo largo de los capiacutetulos anteriores ademaacutes claro estaacute de los elementos tiacutepicos de un formulario cajas de texto botones de seleccioacuten menuacutes de opciones etc Vamos a ver coacutemo se incluiraacuten estos elementos en un formulario

Entrada baacutesica de datos Para definir los distintos tipos de campos baacutesicos de entrada de datos usaremos la etiqueta ltINPUTgt

El formato es el siguiente

ltINPUT type= text password checkbox radio hidden submit image reset name=Variable value=Valor inicialgt

bull El argumento type determinaraacute el tipo de campo de entrada que estamos insertando A

continuacioacuten describiremos cada uno de ellos

bull El argumento name especifica el nombre de la variable que tomaraacute el valor introducido en el campo

bull El argumento value especifica el valor por defecto que tendraacute el campo

Vamos a continuacioacuten a describir los distintos tipos campos de entrada que vendraacuten dados por los valores del argumento type

Texto corto type=text

Con este argumento vamos a indicar que el campo a introducir seraacute un texto El formato seriacutea

ltINPUT type= text name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los nuevos atributos es

bull size=Tamantildeo Indicaremos el tamantildeo en caracteres de la ventana de introduccioacuten de texto

bull maxlength=Longitud maacutexima Indicaremos el nuacutemero maacuteximo de caracteres a introducir en el campo

Vamos a ver un ejemplo en la Tabla 47

copy Grupo EIDOS 4 Elementos del lenguaje II

45

Ejemplo Resultado

NombreltINPUT type=text name=Var1Value=Texto por defecto size=20 maxlength=25gt

Tabla 47

Claves type=password

Con este argumento indicamos que el campo a introducir seraacute una palabra clave por lo que los caracteres que se introduzcan seraacuten sustituidos por asteriscos en la visualizacioacuten por pantalla El formato es

ltINPUT type= password name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los distintos argumentos es el mismo que en el caso anterior Veamos un ejemplo en la Tabla 48

Ejemplo Resultado

ClaveltINPUT type=password name=Var2Value=tutankamon size=11 maxlength=10gt

Tabla 48

Botones de seleccioacuten type=checkbox

El checkbox es un botoacuten que presenta dos estados marcado (1) y desmarcado (0) Podremos variar su estado simplemente pinchando con el ratoacuten El formato es

ltINPUT type= checkbox name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto

Si incluimos el argumento value cuando el botoacuten esteacute marcado su variable asociada adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 49

Ejemplo Resultado

ltINPUT type=checkbox name=Var3 value=Op1 checkedgtOpcioacuten1 ltbrgtltINPUT type=checkbox name=Var4 value=Op2gt Opcioacuten 2

Tabla 49

Lenguaje HTML copy Grupo EIDOS

46

Seleccioacuten entre varias opciones type=radio

Este argumento se usa cuando hay que hacer una seleccioacuten entre varias alternativas excluyentes pudieacutendose seleccionar uacutenicamente una de las alternativas Debemos incluir una etiqueta radio por cada una de las posibles alternativas El formato es

ltINPUT type= radio name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto En este caso uacutenicamente uno de los botones de radio podraacute aparecer marcado ya que se usa para el caso de opciones excluyentes

Cuando un botoacuten esteacute seleccionado la variable asociada a la lista de botones adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 50

Ejemplo Resultado

ltINPUT type=radio name=Var5 value=Op1gtOpcioacuten1 ltbrgtltINPUT type=radio name=Var5 value=Op2checkedgt Opcioacuten 2 ltbrgtltINPUT type=radio name=Var5 value=Op3 gtOpcioacuten 3

Tabla 50

En este ejemplo la variable Var5 tendraacute el valor Op2

Campos ocultos type=hidden

Este tipo de campos no son visibles para el usuario Su uso tiene sentido en el caso de enviar alguacuten tipo de informacioacuten que no deba ser visualizada o variada por el lector de nuestra paacutegina Web El formato es

ltINPUT type= hidden name=Variable value=Valor gt

Con esta etiqueta asignariacuteamos a la Variable referenciada por name el Valor de value y se mandariacutea junto con el formulario sin que el usuario de la paacutegina se entere de nada Veamos un ejemplo en el Coacutedigo fuente 15

ltINPUT type=hidden name=Var6 value=tutankamongt

Coacutedigo fuente 15

copy Grupo EIDOS 4 Elementos del lenguaje II

47

Botoacuten de enviacuteo de datos type=submit

Con este argumento especificamos un botoacuten en el que al pulsar los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario El formato es

ltINPUT type= submit value=Mensaje a mostrargt

En este caso el paraacutemetro value indica el mensaje que se mostraraacute en el botoacuten Veamos un ejemplo en la Tabla 51

Ejemplo Resultado

ltINPUT type=submit value=Enviar los Datosgt

Tabla 51

Botoacuten graacutefico de enviacuteo de datos type=image

Con este argumento especificamos un botoacuten de tipo imagen en el que al igual que con el botoacuten anterior si pulsamos en la imagen los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario Su formato es el siguiente

ltINPUT type= image src=URL de la imagen name=Variablegt

Con el paraacutemetro src especificamos la URL de la imagen que seraacute insertada en el botoacuten En este caso en la variable referenciada por name se almacenaraacuten las coordenadas del punto de la imagen donde se halla pinchado (de forma que estas coordenadas podriacutean ser procesadas por el programa que recibe los datos del formulario)

Botoacuten de borrado de datos type=reset

Con este argumento especificamos un botoacuten que al ser pulsado borraraacute el contenido actual de todos los campos dejaacutendolos con sus valores por defecto Su formato es

ltINPUT type= reset value=Texto del botoacutengt

Con el paraacutemetro value especificamos el texto que etiquetaraacute al botoacuten

Ejemplo Resultado

ltINPUT type=reset value=Borrar datosgt

Tabla 52

Lenguaje HTML copy Grupo EIDOS

48

Entrada datos en muacuteltiples liacuteneas En un formulario tambieacuten podremos introducir un campo de texto que abarque varias liacuteneas Para ello usaremos la etiqueta ltTEXTAREAgt ltTEXTAREAgt Su formato es el siguiente

ltTEXTAREA name=Variable rows=Filas cols=ColumnasgtContenido por defectoltTEXTAREAgt

Los argumentos rows y cols nos van a permitir especificar respectivamente el nuacutemero de filas de texto visibles y el nuacutemero de columnas de texto visibles en el campo

Ejemplo Resultado

ltTEXTAREA name=Var7 rows=5 cols=40gtContenido por defectoltTEXTAREAgt

Tabla 53

Entrada de datos a traveacutes de campos de seleccioacuten Con los campos de seleccioacuten podremos desplegar una lista de opciones entre las que podremos seleccionar una Para ello usaremos la etiqueta ltSELECTgt ltSELECTgt Su formato es el siguiente

ltSELECT name=Variable multiple size=ngtltOPTION selected value=Valor_1gtPrimera OpcioacutenltOPTION value=Valor_2gtSegunda Opcioacuten

ltOPTION value=Valor_ngtEneacutesima Opcioacuten

ltSELECTgt

Figura 1

bull La variable referenciada por name tomaraacute el valor(value) de la opcioacuten seleccionada

bull Si especificamos el argumento muacuteltiple se mostraraacuten todas la opciones en forma de tabla El nuacutemero de opciones visibles en la tabla vendraacute dado por el argumento size

copy Grupo EIDOS 4 Elementos del lenguaje II

49

bull Con la etiqueta ltOPTIONgt iremos definiendo cada una de las opciones de la lista

bull El argumento selected va a determinar cuaacutel es la opcioacuten por defecto

Para finalizar vamos a ver el Coacutedigo fuente 16 correspondiente a una encuesta realizada por la editorial ficticia EditoPc y en la Figura 2 observamos el resultado del formulario

ltP align=centergtltBgtEDITORIAL ltIgtEditoPcltIgtltBgtltPgtltFORM action=mailtodireccionejemplo method = postgtNombreltINPUT type=text size=30 name=nombregtltBRgtE_mail ltINPUT type=text size=30 name=e_mailgtltPgtDeseas recibir informacioacuten sobreltINPUT type=checkbox name=infor1 value=InternetgtInternetltINPUT type=checkbox name=infor2 value=ProgramacioacutengtProgramacioacutenltINPUT type=checkbox name=infor3 value=SistOperativogtSistOperativoltINPUT type=checkbox name=infor4 value=OfimaacuteticagtOfimaacuteticaltPgtiquestTe conectas a Internet desde casa ltbrgtltINPUT type=radio name=intercasa value=sigtSiacuteltINPUT type=radio name=intercasa value=nogtNoltPgtiquestQueacute uso le das a tu ordenador ltBRgtltSELECT name=uso multiple size=3gtltOPTION selectedgtProfesionalltOPTIONgtDomeacutesticoltOPTIONgtOcioJuegosltSELECTgtltPgtCaracteriacutesticas de tu PCltBRgtltTEXTAREA name=caract rows=5 cols=40gtltTEXTAREAgtltPgtltINPUT type=submit value=Enviar datosgt ltINPUT type=reset value=Borrardatosgt

Coacutedigo fuente 16

Figura 2

Elementos del lenguaje III

Frames Las frames son una utilidad del HTML que nos permite dividir la ventana del navegador en diferentes subventanas que podraacuten ser manipuladas de manera independiente Esto nos permitiraacute mostrar una paacutegina web diferente en cada una de la subventanas o frames

Estructura de un documento con frames Un documento con frames se estructura de manera diferente a un documento HTML normal Asiacute en este tipo de documentos no apareceraacute la etiqueta ltBODYgt En su lugar se incluiraacute la etiqueta ltFRAMESETgt ltFRAMESETgt dentro de la cual se definiraacuten las distintas frames que se incluyan en el documento

La estructura general de un documento de este tipo seriacutea por tanto

ltHTMLgtltHEADgtCabeceraltHEADgtltFRAMESETgt

Definicioacuten de la distintas framesltFRAMESETgtltNOFRAMESgt

Instrucciones HTMLltNOFRAMESgt

ltHTMLgt

Lenguaje HTML copy Grupo EIDOS

52

Puede darse el caso de que programemos nuestro documento con frames siguiendo la estructura anterior y que el navegador que se use para leer el documento no soporte la caracteriacutestica de frames con lo cual no se mostraraacute nada de lo indicado entre las etiquetas ltFRAMESETgt y ltFRAMESETgtPara solucionar este problema todas las instrucciones HTML incluidas entre las etiquetas ltNOFRAMESgt y ltNOFRAMESgt seraacuten ejecutadas por los navegadores que no soportan las frames

La sintaxis de la etiqueta ltFRAMESETgt es

ltFRAMESET rows=Lista de filas cols=Lista de columnasgtltFRAME src=URL de la frame 1 name=Nombre de la frame 1gtltFRAME src=URL de la frame 2 name=Nombre de la frame 2gt

ltFRAME src=URL de la frame n name=Nombre de la frame ngt

ltFRAMESETgt

Como vemos por cada una de la frames que incluyamos en nuestro documento debemos incluir una etiqueta ltFRAMEgt indicando mediante sus argumentos la direccioacuten URL del documento que se insertaraacute en la subventana (src) y el nombre de la frame (name) Posteriormente describiremos la etiqueta ltFRAMEgt con maacutes detalle

Los argumentos de ltFRAMESETgt son rows y cols definieacutendose uacutenicamente uno de los dos atributos en funcioacuten de si la divisioacuten de la pantalla se realizaraacute por filas (rows) o por columnas (cols)

Por cada una de las subventanas que creemos debemos especificar su tamantildeo en puntos o en porcentaje del tamantildeo de cada subventana Asiacute por ejemplo si especificamos rows= 50 2525 crearemos tres subventanas horizontales ocupando la primera el 50 de la ventana principal y las otras dos el resto Si especificamos cols=100150 crearemos tres subventanas verticales ocupando la primera 100 puntos de la ventana principal la segunda 150 puntos y tercera el espacio restante

Vamos a verlo maacutes claramente con un par de ejemplos praacutecticos que vemos en la Tabla 54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 502525gt ltFRAMEsrc=Pagweb1htm name=Pagweb1gtltFRAMEsrc=Pagweb2htm name=Pagweb2gtltFRAMEsrc=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 21: Programacion web   lenguaje html

copy Grupo EIDOS 3 Elementos del lenguaje I

25

Alguna de estas etiquetas no es reconocida por determinados navegadores Asiacute por ejemplo la etiqueta ltBLINKgt (Parpadeo) no es implementada por el Explorer Por lo que seguacuten el explorador que estemos utilizando podremos ver el resultado correctamente o no

Existen otras etiquetas que nos van a servir para especificar de manera diferenciada unidades loacutegicas de nuestro documento HTML tales como citas direcciones de correo etc En algunos casos el formato obtenido con estas etiquetas de estilo loacutegico va a ser el mismo que con las anteriores a las que se les denomina tambieacuten etiquetas de estilo fiacutesico Algunas etiquetas de estilo loacutegico las vemos en la Tabla 16

Etiqueta Ejemplo Resultado

ltSTRONGgtltSTRONGgtltSTRONGgtEspecifica textoresaltado (igualltBgt)ltSTRONGgt

Especifica texto resaltado(igual ltBgt)

ltCITEgtltCITEgtltCITEgtIndica una cita otiacutetulo (igual ltIgt)ltCITEgt

Indica una cita o tiacutetulo (igualltIgt)

ltSTRIKEgtltSTRIKEgtltltSTRIKEgtTexto tachado(igual ltSgt)ltSTRIKEgt

Texto tachado (igual ltSgt)

Tabla 16

Si queremos aplicar efectos maacutes espectaculares a nuestro documento HTML debemos variar el tamantildeo el color y el tipo de letra del texto La etiqueta que nos permite todo esto es ltFONTgtltFONTgt por medio de sus atributos size color y face

ltFONT size=n oacute +- n color=rrggbb oacute name face=nombre defont gt

bull size=n oacute +- n El atributo size nos permite especificar un tamantildeo determinado

para la fuente del texto incluido entre las etiquetas de inicio y fin el cual puede estar entre 1 y 7 El texto de tamantildeo normal equivale a la fuente de tamantildeo 3 (fuente base) Por tanto si especificamos size=+2 el tamantildeo de la fuente seraacute 5 Y si especificamos size= -1 el tamantildeo seraacute 2

Ejemplo Resultado

ltFONT size=2gtTamantildeo 2ltFONTgtTamantildeo 2

ltFONT size=+2gtTamantildeo 5 (3+2)ltFONTgt Tamantildeo 5 (3+2)

ltFONT size=-1gtTamantildeo 2 (3-1)ltFONTgtTamantildeo 2 (3-1)

Tabla 17

bull color=rrggbb oacute name Nos va a permitir definir el color que tendraacute el texto

incluido entre las etiquetas Tabla 18

Lenguaje HTML copy Grupo EIDOS

26

Ejemplo Resultado

ltFONT color=redgtTexto de colorrojoltFONTgt

Texto de color rojo

ltFONT color=bluegtTexto de colorazulltFONTgt

Texto de color azul

ltFONT size=5 color=008000gtTextoverde y de tamantildeo 5ltFONTgt

Texto verde y detamantildeo 5

Tabla 18

bull face=nombre de font Nos va a permitir escribir texto con el tipo de letra que le

especifiquemos En el caso de que el tipo de letra que le hayamos especificado no esteacute cargada en el ordenador que lee la paacutegina se usaraacute el font por defecto del navegador

Ejemplo Resultado

ltFONT face=TahomagtTipo de letraTahomaltFONTgt

Tipo de letra Tahoma

ltFONT size=4 color=blueface=TahomagtTexto azul de tamantildeo4 y TahomaltFONTgt

Texto azul de tamantildeo 4 y Tahoma

Tabla 19

Listas Podemos representar elementos en forma de lista dentro de nuestros documentos de una forma muy sencilla y con una gran versatilidad Estas listas podraacuten incluir cualquiera de los elementos HTML e incluso podemos definir listas anidadas es decir listas dentro de listas HTML nos permite crear tres tipos distintos de listas

bull Listas no numeradas

bull Listas numeradas

bull Listas de definiciones

Listas no numeradas ltULgt UL Unordered List

Con este tipo de listas podemos especificar una serie de elementos sin un orden predeterminado precedidos de una marca o vintildeeta que nosotros mismos podemos definir Para la definicioacuten de los liacutemites de la lista utilizaremos la etiqueta ltULgt ltULgt y para determinar cada uno de los elementos que la componen usaremos la etiqueta ltLIgt El formato es el siguiente

ltUL type=disk oacute circle oacute squaregtltLHgtTiacutetulo de la listaltLHgt

copy Grupo EIDOS 3 Elementos del lenguaje I

27

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltULgtLH List Head LI List Item

Con el atributo type vamos a especificar el tipo de marca o vintildeeta que antecederaacute a cada uno de los elementos de la lista Estas marcas podraacuten ser un disco (disk) un ciacuterculo (circle) o un cuadrado (square) La etiqueta ltLHgt nos va a servir para especificar un posible tiacutetulo de la lista siendo esta opcional Vamos a ver algunos ejemplos en la Tabla 20

Ejemplo Resultado

ltUL type=circlegtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAfricaltLIgtAmeacutericaltLIgtOceaniacutea

ltULgt

Los cinco continentes

Europa

Asia

Aacutefrica

Ameacuterica

Oceaniacutea

ltUL type=squaregtltLIgtEuropaltLIgtAsialtLIgtAfricaltLIgtAmeacutericaltUL type=circle gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltULgtltLIgtOceaniacutea

ltULgt

Europa

Asia

Aacutefrica

Ameacuterica

Ameacuterica del Norte

Ameacuterica del Sur

Oceaniacutea

Tabla 20

Listas numeradas ltOLgt OL Ordered List

Con este tipo de listas podemos especificar una serie de elementos numerados seguacuten el lugar que ocupan en la lista Para la definicioacuten de los liacutemites de la lista utilizaremos la etiqueta ltOLgt ltOLgt y para determinar cada uno de los elementos que la componen usaremos la etiqueta ltLIgt El formato es el siguiente

ltOL start=n type=Tipo de listagtltLHgtTiacutetulo de la listaltLHgt

Lenguaje HTML copy Grupo EIDOS

28

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltOLgt

Con el atributo start vamos a especificar el nuacutemero por el que va a empezar la lista Si no indicamos este argumento la lista empezaraacute a numerarse a partir del 1 Con el atributo type vamos a especificar el tipo de lista numerada Sus posibles valores aparecen a continuacioacuten y veremos algunos ejemplos en la Tabla 21

A Letras mayuacutesculas (A B C )

a Letras minuacutesculas (a b c )

I Nuacutemeros romanos en mayuacutesculas (I II III IV )

i Nuacutemeros romanos en minuacutesculas (i ii iii iv )

1 Numeacutericamente (1 2 3 4 ) (es la numeracioacuten por defecto y por tanto no habriacutea que indicarla)

Ejemplo Resultado

ltOL type=AgtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltLIgtOceaniacutea

ltOLgt

Los cinco continentes

A Europa

B Asia

C Aacutefrica

D Ameacuterica

E Oceaniacutea

ltOL type=I start=2gtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltOL type=i gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltOLgtltLIgtOceaniacutea

ltOLgt

II Europa

III Asia

IV Aacutefrica

V Ameacuterica

i Ameacuterica del Norte

ii Ameacuterica del Sur

VI Oceaniacutea

Tabla 21

copy Grupo EIDOS 3 Elementos del lenguaje I

29

Listas de definiciones ltDLgt DL Definition List

Estas listas nos van a servir para especificar una serie de teacuterminos y sus definiciones correspondientes Para la definicioacuten de la lista usaremos la etiqueta ltDLgt ltDLgt para especificar los teacuterminos usaremos la etiqueta ltDTgt y para especificar la definicioacuten correspondiente a cada teacutermino usaremos la etiqueta ltDDgt El formato es el siguiente

ltDLgtltLHgtTiacutetulo de la listaltLHgtltDTgtTeacutermino 1ltDDgtDefinicioacuten 1ltDTgtTeacutermino 2ltDDgtDefinicioacuten 2

ltDTgtTeacutermino nltDDgtDefinicioacuten n

ltDLgtDT Definition Term DD Definition Description

Vamos a ver un ejemplo en la Tabla 22

Ejemplo Resultado

ltDLgtltDTgtPariacutesltDDgtCapital de FrancialtDTgtRomaltDDgtCapital de ItalialtDTgtMadridltDDgtCapital de Espantildea

ltDLgt

Pariacutes

Capital de Francia

Roma

Capital de Italia

Madrid

Capital de Espantildea

Tabla 22

Hiperenlaces Los hiperenlaces son enlaces de hipertexto que nos van a permitir acceder de manera directa a otros documentos HTML independientemente de su ubicacioacuten o a otras zonas dentro de nuestro propio documento

Enlaces a otras paacuteginas ltA href=gt Con este tipo de hiperenlaces vamos a poder acceder tanto a otras paacuteginas que esteacuten ubicadas dentro de nuestro propio sistema como a paacuteginas ubicadas en puntos muy distantes del globo El formato de este tipo de hiperenlaces es

ltA href=URL a la que se accedegtTexto del hiperenlaceltAgt

Lenguaje HTML copy Grupo EIDOS

30

Con el atributo href vamos a especificar la URL del documento al que se pretende acceder El texto contenido entre las etiquetas de comienzo y fin nos va a servir para definir el hiperenlace por lo que deberiacutea ser clarificador del contenido del documento con el que vamos a enlazar Esta definicioacuten apareceraacute resaltada normalmente en azul y subrayada En la mayoriacutea de los navegadores esta definicioacuten del hiperenlace es sensible por lo que cuando el cursor pasa por encima del mismo este cambia de aspecto indicaacutendolo

Veamos un ejemplo en la Tabla 23

Ejemplo Resultado

ltA href=httpwwweidosesgtPaacutegina inicialde Villa EidosltAgt

Paacutegina inicial de Villa Eidos

Tabla 23

Si situamos el ratoacuten encima del hiperenlace y pulsamos el navegador accederaacute a la paacutegina Web indicada por href es decir accederaacute a la paacutegina situada en httpwwweidoses

Igualmente podriacuteamos indicar el hiperenlace por medio de una imagen Si esta imagen tiene definido un borde este apareceraacute resaltado en color azul El formato correspondiente seriacutea

ltA href=URL a la que se accedegtltIMG src=Imagengt y tambieacutentextoltAgtIMG Image src Source

Veamos un ejemplo en la Tabla 24

Ejemplo Resultado

ltA href=httpwwweidosesgtltIMGsrc=IconogifgtltAgt Villa Eidos Villa Eidos

Tabla 24

Si pulsamos sobre la imagen el navegador accederaacute a la paacutegina Web inicial de Villa Eidos

Enlaces dentro de la misma paacutegina ltA name=gt Este tipo de hiperenlaces nos va a permitir marcar distintas zonas del documento activo con el objeto de tener un acceso directo a las mismas Una buena utilidad de este tipo de enlaces radica en la creacioacuten de iacutendices para documentos largos de forma que si pinchamos en el hiperenlace correspondiente al tiacutetulo de un capiacutetulo determinado el navegador saltaraacute automaacuteticamente hasta el comienzo de dicho capiacutetulo

Para la creacioacuten de estos hiperenlaces debemos seguir dos pasos

copy Grupo EIDOS 3 Elementos del lenguaje I

31

1 Marcar las distintas zonas o secciones del documento Esto lo haremos con el paraacutemetro name

ltA name=Identificador de seccioacutengtTexto de laseccioacutenltAgt

A cada seccioacuten le asignaremos un identificador distinto para poder referenciarlas posteriormente de manera inequiacutevoca

2 Especificar un enlace a cada una de las secciones que hayamos definido ltA href=Identificador de seccioacutengtTexto del enlace a laseccioacutenltAgt

Si pinchamos en este enlace el navegador saltaraacute automaacuteticamente a la seccioacuten correspondiente Veamos un ejemplo sencillito en la Tabla 25 pero demostrativo de todo lo que acabamos de explicar

Ejemplo Resultado

ltA href=Cap1gtCapiacutetulo1ltAgtltA name=Cap1gtCapiacutetulo 1ltAgt

Capiacutetulo 1

Capiacutetulo 1

Tabla 25

Si nos creamos una paacutegina HTML con distintos capiacutetulos podriacuteamos crear una seccioacuten para cada uno de ellos de forma que si pinchamos en el hiperenlace correspondiente al Capiacutetulo 1 el navegador saltariacutea directamente a la seccioacuten correspondiente al Capiacutetulo 1

Ademaacutes de los dos tipos de hiperenlaces vistos podemos crear hiperenlaces que nos permitan acceder a cualquiera de los servicios de Internet Es decir podriacuteamos indicar enlaces a servidores FTP GOPHER NEWS MAILTO etc Para ello tendriacuteamos que indicar la URL correspondiente al servicio al cual queremos acceder como ya vimos en el primer capiacutetulo de este manual

Imaacutegenes

Podremos dar un aspecto mucho maacutes vistoso a nuestros documentos HTML con la inclusioacuten de imaacutegenes Los formatos de imagen que todos los navegadores reconocen son gif y jpg Si queremos insertar una imagen en otro formato el visor deberiacutea disponer del programa externo que permita su visualizacioacuten De todas formas una buena solucioacuten es utilizar alguacuten programa de tratamiento de imaacutegenes que nos convierta la imagen a uno de los formatos mencionados anteriormente

El formato gif es maacutes recomendado para la inclusioacuten de iconos graacuteficas y el formato jpg para el caso de insertar fotografiacuteas en nuestras paacuteginas

Lenguaje HTML copy Grupo EIDOS

32

La etiqueta que nos va a permitir la insercioacuten de imaacutegenes es ltIMGgt La imagen se insertaraacute justo en el punto del documento donde coloquemos dicha etiqueta pudiendo insertar imaacutegenes dentro de listas tablas o formularios

El formato de la etiqueta con sus posibles argumentos es el siguiente

ltIMG src=URL de la imagen alt=Texto alternativoalign=topmiddlebottonleftrigth border=Tamantildeoheight=Tamantildeo width=Tamantildeo hspace=margen vspace=margengt

bull src=URL de la imagen El atributo src nos va servir para indicar la URL de la imagen que

queremos insertar es decir el servidor y camino hasta llegar al fichero de la imagen

No seraacute necesario que la imagen que queremos insertar en nuestro documento esteacute en el ordenador local aunque siacute es recomendable ya que el acceso a las mismas puede ser maacutes lento

Por tanto es una buena praacutectica copiar todas las imaacutegenes que vayamos a incluir en nuestro documento HTML al ordenador local

Tabla 26

bull alt=Texto alternativo Nos va a permitir mostrar un texto alternativo para el caso en que el

navegador no sea capaz de mostrar la imagen Su uso es muy recomendable ya que cuando publiquemos nuestras paacuteginas en la WWW no sabremos desde queacute tipo de navegadores accederaacuten los internautas a nuestras paacuteginas

En la Tabla 27 vamos a ver un ejemplo

Si usas un navegador que no tiene ninguacuten problema para la visualizacioacuten de imaacutegenes desactiva temporalmente la opcioacuten de mostrar imaacutegenes prueba el ejemplo que muestra la Tabla 27 y compaacuteralo con el anterior

Tabla 27

copy Grupo EIDOS 3 Elementos del lenguaje I

33

bull align=topmiddlebotton leftrigth Nos permite indicar coacutemo se alinearaacute el texto que siga a la imagen

top alinea el texto con la parte superior de la imagen

middle con la parte central

bottom con la parte inferior

left imagen alineada a la izquierda de la paacutegina

rigth imagen alineada a la derecha de la paacutegina

Tabla 28

En el caso de que el texto que acompantildea a la imagen tenga maacutes de una liacutenea tan soacutelo la primera seraacute la que se alinearaacute seguacuten alguna de las anteriores alineaciones el resto de liacuteneas se incluiraacuten debajo de la imagen quedando un efecto bastante feo

Para solventar esto estaacuten las alineaciones LEFT (imagen alineada a la izquierda de la paacutegina) y RIGHT (imagen alineada a la derecha de la paacutegina) Las cuales permiten que la imagen se inserte dentro del paacuterrafo que la rodea produciendo un resultado mucho maacutes profesional en la integracioacuten de texto e imaacutegenes

Estas dos alineaciones no se podraacuten usar en combinacioacuten con las anteriores Veamos algunos ejemplos en la Tabla 29

Vemos como en el primer ejemplo la segunda liacutenea de texto aparece debajo de la imagen produciendo un efecto menos vistoso que en los dos ejemplos siguientes

Lenguaje HTML copy Grupo EIDOS

34

Tabla 29

bull border=Tamantildeo Permite antildeadirle un borde a la imagen del tamantildeo que le

especifiquemos

Si la imagen forma parte de un hiperenlace esta apareceraacute con un borde del color del hiperenlace Si no deseaacuteramos que aparezca este borde tendriacuteamos que especificar border=0

Tabla 30

bull height=Tamantildeo Permite especificar el alto de la imagen en puntos de pantalla

(pixels) o en del tamantildeo del documento

bull width=Tamantildeo Con este argumento especificaremos el ancho al que mostraremos la imagen en puntos de pantalla (pixels) o en del tamantildeo del documento

En el segundo de los ejemplos de la Tabla 31 el ancho de la imagen se ha extendido al 50 del total del ancho de la celda donde estaacute contenida la imagen Si pruebas este ejemplo en tu documento HTML la imagen se extenderaacute horizontalmente hasta ocupar el 50 del ancho de la paacutegina

copy Grupo EIDOS 3 Elementos del lenguaje I

35

Tabla 31

bull hspace=Margen hspace Horizontal Space Permite especificar el nuacutemero de espacios

horizontales (en puntos) que separaraacuten a la imagen de cualquier elemento que le siga o le anteceda

bull vspace=Margen vspace Vertical Space Con este argumento especificaremos el margen vertical (en puntos) que habraacute entre la imagen y cualquier otro elemento de nuestro documento

Tabla 32

Elementos del lenguaje II

Tablas HTML nos va a permitir la inclusioacuten de cualquiera de los elementos de nuestra paacutegina (texto imaacutegenes hiperenlaces listas etc) dentro de una tabla Gracias a lo cual conseguiremos dar una mayor y mejor estructuracioacuten a los contenidos de nuestros documentos Ademaacutes la definicioacuten de las tablas en HTML es muy abierta pudiendo en cualquier momento redimensionar la tabla es decir cambiar su nuacutemero de filas o de columnas cambiar el tamantildeo de alguna de sus celdas etc

La etiqueta que nos va a permitir la definicioacuten de tablas es ltTABLEgt ltTABLEgt

El formato general de la etiqueta sin ninguacuten argumento es el siguiente

ltTABLEgtltTR gt

ltTHgtContenido de la celda ltTHgtltTDgtContenido de la celda ltTDgt

ltTRgtltTABLEgt

TR Table Row TH Table Header TD Table Data

Vamos a analizar cada una de estas etiquetas de forma separada

1 ltTABLEgt ltTABLEgt Definicioacuten general de la tabla Dentro de ella definiremos las filas y columnas que la constituyen pudiendo incluso definir tablas dentro de tablas es decir tablas anidadas

Lenguaje HTML copy Grupo EIDOS

38

2 ltTRgt ltTRgt Definicioacuten de las filas de la tabla Por cada etiqueta ltTRgt que incluyamos se crearaacute una fila en la tabla No seraacute necesario indicar la etiqueta de cierre

3 ltTHgtltTHgt oacute ltTDgtltTDgt Definicioacuten de cada una de las celdas de la tabla Vemos que estas etiquetas estaacuten contenidas dentro de otra etiqueta de definicioacuten de fila de forma que por cada etiqueta ltTHgt o ltTDgt que incluyamos se crearaacute una celda dentro de la fila correspondiente La etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera es decir celdas cuyo contenido estaacute resaltado en negrita dejando la etiqueta ltTDgt para definir celdas de datos En este caso tampoco es necesario indicar las etiquetas de cierre

Todas estas etiquetas tienen sus respectivos argumentos Pero antes de analizar cada uno de ellos vamos a ver un ejemplo muy sencillito en la Tabla 33 que nos crearaacute una tabla de una sola celda (1 fila X 1 columna = 1 celda) Para ello usaremos la etiqueta de creacioacuten de tabla ltTABLEgt con el argumento border=1 (nos dibuja un borde de tamantildeo 1 alrededor de la tabla)

Ejemplo Resultado

ltTABLE border=1gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 33

Vamos ahora a analizar lo distintos argumentos que componen las etiquetas de la tabla analizaacutendolos desde lo general (la definicioacuten de la tabla) hasta lo especiacutefico (la definicioacuten de las celdas)

1 Definicioacuten de la tabla ltTABLEgt

ltTABLE border=n cellpadding=n cellspacing=n width=n oacute height=n oacute bgcolor=rrggbb oacute nombre gt

Contenido ltTABLEgt

bull border=n Si especificamos este argumento se dibujaraacute un borde alrededor de la

tabla del ancho que le indiquemos como muestra la Tabla 34

Ejemplo Resultado

Mi primera tabla ltTABLE border=4gtltTRgtltTDgtMi primera tablaltTABLEgt

Tabla 34

bull cellpadding=n Indica el espacio en puntos que separa el contenido de la celda con

el borde de la misma siendo 1 por defecto

copy Grupo EIDOS 4 Elementos del lenguaje II

39

Ejemplo Resultado

ltTABLE border=4 cellpadding=8gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 35

bull cellspacing=n Indica el espacio en puntos que separa a las celdas contenidas dentro de la tabla siendo 2 por defecto

bull width=n oacute Indica la anchura de la tabla en puntos o en en funcioacuten del ancho de la ventana del visualizador Si no indicamos este argumento el ancho de la tabla se ajustaraacute al tamantildeo del contenido de las celdas Esto es lo que ha ocurrido en el uacuteltimo ejemplo que hemos realizado Veamos un ejemplo en el Coacutedigo fuente 11 El resultado se muestra en la Tabla 36

ltTABLE border=4 width=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 11

Mi primera tabla

Tabla 36

bull height=n oacute Nos permite definir la altura de la tabla en puntos o en de la

altura de la ventana del visualizador Si indicamos este argumento lo recomendable es darlo en puntos ya que es maacutes complicado adecuarnos a la altura de la ventana del visualizador Al igual que en el caso anterior si no especificamos este argumento la altura se adecuaraacute al contenido de las celdas El Coacutedigo fuente 12 muestra un ejemplo y la Tabla 37 nos muestra el resultado

ltTABLE border=4 width=50 height=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 12

Mi primera tabla

Tabla 37

bull bgcolor= rrggbb o nombre del color Nos permite definir un color

de fondo para todas las celdas de la tabla Maacutes adelante veremos como podemos definir colores especiacuteficos para cada una de las celdas por separado

Lenguaje HTML copy Grupo EIDOS

40

Ejemplo Resultado

ltTABLE border=4 bgcolor=yellowgtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 38

2 Definicioacuten de las filas de la tabla ltTRgt

ltTR align=leftrightcenter valign=topmiddlebottombgcolor=rrggbb oacute nombregt

Antes de empezar a descifrar el significado de cada uno de los argumentos de esta etiqueta vamos a ver un ejemplo en la Tabla 39 de coacutemo se construiriacutea una tabla con dos filas (2 filas X 1 columna = 2 celdas)

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR gtltTDgtPrimera filaltTRgtltTDgtSegunda filaltTABLEgt

Segunda fila

Tabla 39

bull align=leftrightcenter Con este argumento vamos a indicar la alineacioacuten

horizontal (leftizquierda rightderecha centercentrado) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado Veamos un ejemplo en el Coacutedigo fuente 13 y su correspondiente resultado en la Tabla 40

ltTABLE border=4 width=50 gt ltTRgtltTDgtPrimera filaltTRalign=rightgtltTDgtSegunda filaltTABLEgt

Coacutedigo fuente 13

Primera fila

Segunda fila

Tabla 40

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten

vertical (toparriba middlecentrado bottomabajo) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado

copy Grupo EIDOS 4 Elementos del lenguaje II

41

bull bgcolor= rrggbb o nombre del color En este caso este argumento nos permitiraacute definir un color de fondo para todas las celdas de una fila veamos un ejemplo en la

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR bgcolor=yellowgtltTDgtPrimera

filaltTR bgcolor=greengtltTDgtSegunda

filaltTABLEgt

Segunda fila

Tabla 41

3 Definicioacuten de las celdas de la tabla ltTHgt oacute ltTDgt

ltTH oacute TD align=leftrightcenterjustifyvalign=topmiddlebottom bgcolor=rrggbb oacute nombre width=nrowspan=n colspan=ngt

Como ya explicamos anteriormente la etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera y la etiqueta ltTDgt para la creacioacuten de celdas de datos Vamos a completar nuestro ejemplo inicial antildeadieacutendole tres filas de dos celdas cada una (3 filas X 2 columnas = 6 celdas) Tabla 42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTDgtCelda 21ltTDgtCelda 22

ltTABLEgt Celda 21 Celda 22

Tabla 42

bull align=leftrightcenterjustify Con este argumento vamos a indicar la

alineacioacuten horizontal (left izquierda right derecha center centrado justifyjustificado) del contenido de cada celda por separado Su significado es el mismo que en la etiqueta ltTRgt

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten vertical (toparriba middlecentrado bottomabajo) del contenido de cada celda

bull bgcolor= rrggbb o nombre del color En este caso podremos definir un color de fondo para cada una de las celdas de manera independiente

bull width=n oacute Indica el ancho de la celda en puntos o en en funcioacuten del tamantildeo de la tabla

Lenguaje HTML copy Grupo EIDOS

42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera

1ltTHgtCabecera 2ltTR gtltTD align=rightgtCelda

11ltTD bgcolor=redgtCelda 12ltTRgtltTD

bgcolor=yellowgtCelda 21ltTDalign=centergtCelda 22ltTABLEgt

Celda 21 Celda 22

Tabla 43

bull rowspan=n Con este argumento podemos lograr que una celda concreta abarque maacutes de una fila ya sabemos que por defecto una celda ocupa una sola fila

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTD rowspan=2gtCelda

11ltTDgtCelda 12ltTRgtltTDgtCelda 22

ltTABLEgt

Celda 11 Celda 22

Tabla 44

bull colspan=n Con este argumento podemos lograr que una celda se expanda a maacutes

de una columna

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTD colspan=2

align=centergtCelda 22ltTABLEgt

Celda 22

Tabla 45

Para finalizar este tema sobre la creacioacuten de tablas vamos a ver el ejemplo que aparece en el Coacutedigo fuente 14 y su resultado en la Tabla 46

ltTABLE border=4gtltTR gtltTH colspan=3 bgcolor=redgtTiacutetuloltTR bgcolor=yellowgtltTHgtCabecera 1ltTHgtCabecera 2ltTHgtCabecera 3

copy Grupo EIDOS 4 Elementos del lenguaje II

43

ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTDgtCelda 13ltTRgtltTD rowspan=2gtCelda 21ltTD bgcolor=greengtCelda 22ltTDgtCelda 23ltTRgtltTDgtCelda 32ltTDgtCelda 33

ltTABLEgt

Coacutedigo fuente 14

Tiacutetulo

Cabecera 1 Cabecera 2 Cabecera 3

Celda 11 Celda 12 Celda 13

Celda 22 Celda 23 Celda 21

Celda 32 Celda 33

Tabla 46

Formularios El formulario es el elemento de HTML que nos va a permitir interactuar con los visitantes de nuestras paacuteginas web de forma que podemos solicitarle informacioacuten al usuario y procesarla De esta forma podremos crear en nuestras paacuteginas encuestas para solicitar la opinioacuten del visitante sobre alguacuten tema e incluso sobre el contenido de nuestra propia paacutegina web cuestionarios para evaluar la asimilacioacuten de contenidos sobre un tema concreto que se trate en la paacutegina etc

El contenido de la informacioacuten introducida por medio del formulario seraacute enviado a la direccioacuten URL donde resida el programa que se encargaraacute de procesar los datos A este tipo de programas externos se les denomina programas CGI (Common Gateway Interface)

La etiqueta HTML que nos va a permitir la creacioacuten de formularios es ltFORMgt Su formato es el siguiente

ltFORM action=URL del programa que trata el formulariomethod=postgetgt Elementos del formulario ltFORMgt

bull action=URL del programa que trata el formulario A traveacutes de este

argumento indicaremos como ya hemos mencionado la direccioacuten del fichero de programa que va a tratar la informacioacuten suministrada por el formulario

Tambieacuten podriacuteamos incluir como URL que trata el formulario una direccioacuten de correo electroacutenico Por tanto el valor de este argumento podriacutea ser action =mailto direccioacuten de correo

Nota Esta opcioacuten soacutelo funciona adecuadamente con el navegador Netscape Con el Explorer este enviacuteo dariacutea como resultado un correo en blanco Para que esta opcioacuten funcione de manera independiente del navegador que se esteacute utilizando se ha de emplear un programa externo que realice este proceso

Lenguaje HTML copy Grupo EIDOS

44

bull method=postget A traveacutes de este argumento indicaremos el meacutetodo empleado para transferir la informacioacuten generada por el formulario

Si indicamos post se produciraacute la modificacioacuten del documento destino como es el caso de enviar la informacioacuten a una direccioacuten de correo electroacutenico Mediante el meacutetodo get no se produciraacuten cambios en el documento destino

Dentro de un formulario podremos incluir cualquier texto o instruccioacuten HTML de las vistas a lo largo de los capiacutetulos anteriores ademaacutes claro estaacute de los elementos tiacutepicos de un formulario cajas de texto botones de seleccioacuten menuacutes de opciones etc Vamos a ver coacutemo se incluiraacuten estos elementos en un formulario

Entrada baacutesica de datos Para definir los distintos tipos de campos baacutesicos de entrada de datos usaremos la etiqueta ltINPUTgt

El formato es el siguiente

ltINPUT type= text password checkbox radio hidden submit image reset name=Variable value=Valor inicialgt

bull El argumento type determinaraacute el tipo de campo de entrada que estamos insertando A

continuacioacuten describiremos cada uno de ellos

bull El argumento name especifica el nombre de la variable que tomaraacute el valor introducido en el campo

bull El argumento value especifica el valor por defecto que tendraacute el campo

Vamos a continuacioacuten a describir los distintos tipos campos de entrada que vendraacuten dados por los valores del argumento type

Texto corto type=text

Con este argumento vamos a indicar que el campo a introducir seraacute un texto El formato seriacutea

ltINPUT type= text name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los nuevos atributos es

bull size=Tamantildeo Indicaremos el tamantildeo en caracteres de la ventana de introduccioacuten de texto

bull maxlength=Longitud maacutexima Indicaremos el nuacutemero maacuteximo de caracteres a introducir en el campo

Vamos a ver un ejemplo en la Tabla 47

copy Grupo EIDOS 4 Elementos del lenguaje II

45

Ejemplo Resultado

NombreltINPUT type=text name=Var1Value=Texto por defecto size=20 maxlength=25gt

Tabla 47

Claves type=password

Con este argumento indicamos que el campo a introducir seraacute una palabra clave por lo que los caracteres que se introduzcan seraacuten sustituidos por asteriscos en la visualizacioacuten por pantalla El formato es

ltINPUT type= password name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los distintos argumentos es el mismo que en el caso anterior Veamos un ejemplo en la Tabla 48

Ejemplo Resultado

ClaveltINPUT type=password name=Var2Value=tutankamon size=11 maxlength=10gt

Tabla 48

Botones de seleccioacuten type=checkbox

El checkbox es un botoacuten que presenta dos estados marcado (1) y desmarcado (0) Podremos variar su estado simplemente pinchando con el ratoacuten El formato es

ltINPUT type= checkbox name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto

Si incluimos el argumento value cuando el botoacuten esteacute marcado su variable asociada adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 49

Ejemplo Resultado

ltINPUT type=checkbox name=Var3 value=Op1 checkedgtOpcioacuten1 ltbrgtltINPUT type=checkbox name=Var4 value=Op2gt Opcioacuten 2

Tabla 49

Lenguaje HTML copy Grupo EIDOS

46

Seleccioacuten entre varias opciones type=radio

Este argumento se usa cuando hay que hacer una seleccioacuten entre varias alternativas excluyentes pudieacutendose seleccionar uacutenicamente una de las alternativas Debemos incluir una etiqueta radio por cada una de las posibles alternativas El formato es

ltINPUT type= radio name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto En este caso uacutenicamente uno de los botones de radio podraacute aparecer marcado ya que se usa para el caso de opciones excluyentes

Cuando un botoacuten esteacute seleccionado la variable asociada a la lista de botones adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 50

Ejemplo Resultado

ltINPUT type=radio name=Var5 value=Op1gtOpcioacuten1 ltbrgtltINPUT type=radio name=Var5 value=Op2checkedgt Opcioacuten 2 ltbrgtltINPUT type=radio name=Var5 value=Op3 gtOpcioacuten 3

Tabla 50

En este ejemplo la variable Var5 tendraacute el valor Op2

Campos ocultos type=hidden

Este tipo de campos no son visibles para el usuario Su uso tiene sentido en el caso de enviar alguacuten tipo de informacioacuten que no deba ser visualizada o variada por el lector de nuestra paacutegina Web El formato es

ltINPUT type= hidden name=Variable value=Valor gt

Con esta etiqueta asignariacuteamos a la Variable referenciada por name el Valor de value y se mandariacutea junto con el formulario sin que el usuario de la paacutegina se entere de nada Veamos un ejemplo en el Coacutedigo fuente 15

ltINPUT type=hidden name=Var6 value=tutankamongt

Coacutedigo fuente 15

copy Grupo EIDOS 4 Elementos del lenguaje II

47

Botoacuten de enviacuteo de datos type=submit

Con este argumento especificamos un botoacuten en el que al pulsar los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario El formato es

ltINPUT type= submit value=Mensaje a mostrargt

En este caso el paraacutemetro value indica el mensaje que se mostraraacute en el botoacuten Veamos un ejemplo en la Tabla 51

Ejemplo Resultado

ltINPUT type=submit value=Enviar los Datosgt

Tabla 51

Botoacuten graacutefico de enviacuteo de datos type=image

Con este argumento especificamos un botoacuten de tipo imagen en el que al igual que con el botoacuten anterior si pulsamos en la imagen los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario Su formato es el siguiente

ltINPUT type= image src=URL de la imagen name=Variablegt

Con el paraacutemetro src especificamos la URL de la imagen que seraacute insertada en el botoacuten En este caso en la variable referenciada por name se almacenaraacuten las coordenadas del punto de la imagen donde se halla pinchado (de forma que estas coordenadas podriacutean ser procesadas por el programa que recibe los datos del formulario)

Botoacuten de borrado de datos type=reset

Con este argumento especificamos un botoacuten que al ser pulsado borraraacute el contenido actual de todos los campos dejaacutendolos con sus valores por defecto Su formato es

ltINPUT type= reset value=Texto del botoacutengt

Con el paraacutemetro value especificamos el texto que etiquetaraacute al botoacuten

Ejemplo Resultado

ltINPUT type=reset value=Borrar datosgt

Tabla 52

Lenguaje HTML copy Grupo EIDOS

48

Entrada datos en muacuteltiples liacuteneas En un formulario tambieacuten podremos introducir un campo de texto que abarque varias liacuteneas Para ello usaremos la etiqueta ltTEXTAREAgt ltTEXTAREAgt Su formato es el siguiente

ltTEXTAREA name=Variable rows=Filas cols=ColumnasgtContenido por defectoltTEXTAREAgt

Los argumentos rows y cols nos van a permitir especificar respectivamente el nuacutemero de filas de texto visibles y el nuacutemero de columnas de texto visibles en el campo

Ejemplo Resultado

ltTEXTAREA name=Var7 rows=5 cols=40gtContenido por defectoltTEXTAREAgt

Tabla 53

Entrada de datos a traveacutes de campos de seleccioacuten Con los campos de seleccioacuten podremos desplegar una lista de opciones entre las que podremos seleccionar una Para ello usaremos la etiqueta ltSELECTgt ltSELECTgt Su formato es el siguiente

ltSELECT name=Variable multiple size=ngtltOPTION selected value=Valor_1gtPrimera OpcioacutenltOPTION value=Valor_2gtSegunda Opcioacuten

ltOPTION value=Valor_ngtEneacutesima Opcioacuten

ltSELECTgt

Figura 1

bull La variable referenciada por name tomaraacute el valor(value) de la opcioacuten seleccionada

bull Si especificamos el argumento muacuteltiple se mostraraacuten todas la opciones en forma de tabla El nuacutemero de opciones visibles en la tabla vendraacute dado por el argumento size

copy Grupo EIDOS 4 Elementos del lenguaje II

49

bull Con la etiqueta ltOPTIONgt iremos definiendo cada una de las opciones de la lista

bull El argumento selected va a determinar cuaacutel es la opcioacuten por defecto

Para finalizar vamos a ver el Coacutedigo fuente 16 correspondiente a una encuesta realizada por la editorial ficticia EditoPc y en la Figura 2 observamos el resultado del formulario

ltP align=centergtltBgtEDITORIAL ltIgtEditoPcltIgtltBgtltPgtltFORM action=mailtodireccionejemplo method = postgtNombreltINPUT type=text size=30 name=nombregtltBRgtE_mail ltINPUT type=text size=30 name=e_mailgtltPgtDeseas recibir informacioacuten sobreltINPUT type=checkbox name=infor1 value=InternetgtInternetltINPUT type=checkbox name=infor2 value=ProgramacioacutengtProgramacioacutenltINPUT type=checkbox name=infor3 value=SistOperativogtSistOperativoltINPUT type=checkbox name=infor4 value=OfimaacuteticagtOfimaacuteticaltPgtiquestTe conectas a Internet desde casa ltbrgtltINPUT type=radio name=intercasa value=sigtSiacuteltINPUT type=radio name=intercasa value=nogtNoltPgtiquestQueacute uso le das a tu ordenador ltBRgtltSELECT name=uso multiple size=3gtltOPTION selectedgtProfesionalltOPTIONgtDomeacutesticoltOPTIONgtOcioJuegosltSELECTgtltPgtCaracteriacutesticas de tu PCltBRgtltTEXTAREA name=caract rows=5 cols=40gtltTEXTAREAgtltPgtltINPUT type=submit value=Enviar datosgt ltINPUT type=reset value=Borrardatosgt

Coacutedigo fuente 16

Figura 2

Elementos del lenguaje III

Frames Las frames son una utilidad del HTML que nos permite dividir la ventana del navegador en diferentes subventanas que podraacuten ser manipuladas de manera independiente Esto nos permitiraacute mostrar una paacutegina web diferente en cada una de la subventanas o frames

Estructura de un documento con frames Un documento con frames se estructura de manera diferente a un documento HTML normal Asiacute en este tipo de documentos no apareceraacute la etiqueta ltBODYgt En su lugar se incluiraacute la etiqueta ltFRAMESETgt ltFRAMESETgt dentro de la cual se definiraacuten las distintas frames que se incluyan en el documento

La estructura general de un documento de este tipo seriacutea por tanto

ltHTMLgtltHEADgtCabeceraltHEADgtltFRAMESETgt

Definicioacuten de la distintas framesltFRAMESETgtltNOFRAMESgt

Instrucciones HTMLltNOFRAMESgt

ltHTMLgt

Lenguaje HTML copy Grupo EIDOS

52

Puede darse el caso de que programemos nuestro documento con frames siguiendo la estructura anterior y que el navegador que se use para leer el documento no soporte la caracteriacutestica de frames con lo cual no se mostraraacute nada de lo indicado entre las etiquetas ltFRAMESETgt y ltFRAMESETgtPara solucionar este problema todas las instrucciones HTML incluidas entre las etiquetas ltNOFRAMESgt y ltNOFRAMESgt seraacuten ejecutadas por los navegadores que no soportan las frames

La sintaxis de la etiqueta ltFRAMESETgt es

ltFRAMESET rows=Lista de filas cols=Lista de columnasgtltFRAME src=URL de la frame 1 name=Nombre de la frame 1gtltFRAME src=URL de la frame 2 name=Nombre de la frame 2gt

ltFRAME src=URL de la frame n name=Nombre de la frame ngt

ltFRAMESETgt

Como vemos por cada una de la frames que incluyamos en nuestro documento debemos incluir una etiqueta ltFRAMEgt indicando mediante sus argumentos la direccioacuten URL del documento que se insertaraacute en la subventana (src) y el nombre de la frame (name) Posteriormente describiremos la etiqueta ltFRAMEgt con maacutes detalle

Los argumentos de ltFRAMESETgt son rows y cols definieacutendose uacutenicamente uno de los dos atributos en funcioacuten de si la divisioacuten de la pantalla se realizaraacute por filas (rows) o por columnas (cols)

Por cada una de las subventanas que creemos debemos especificar su tamantildeo en puntos o en porcentaje del tamantildeo de cada subventana Asiacute por ejemplo si especificamos rows= 50 2525 crearemos tres subventanas horizontales ocupando la primera el 50 de la ventana principal y las otras dos el resto Si especificamos cols=100150 crearemos tres subventanas verticales ocupando la primera 100 puntos de la ventana principal la segunda 150 puntos y tercera el espacio restante

Vamos a verlo maacutes claramente con un par de ejemplos praacutecticos que vemos en la Tabla 54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 502525gt ltFRAMEsrc=Pagweb1htm name=Pagweb1gtltFRAMEsrc=Pagweb2htm name=Pagweb2gtltFRAMEsrc=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 22: Programacion web   lenguaje html

Lenguaje HTML copy Grupo EIDOS

26

Ejemplo Resultado

ltFONT color=redgtTexto de colorrojoltFONTgt

Texto de color rojo

ltFONT color=bluegtTexto de colorazulltFONTgt

Texto de color azul

ltFONT size=5 color=008000gtTextoverde y de tamantildeo 5ltFONTgt

Texto verde y detamantildeo 5

Tabla 18

bull face=nombre de font Nos va a permitir escribir texto con el tipo de letra que le

especifiquemos En el caso de que el tipo de letra que le hayamos especificado no esteacute cargada en el ordenador que lee la paacutegina se usaraacute el font por defecto del navegador

Ejemplo Resultado

ltFONT face=TahomagtTipo de letraTahomaltFONTgt

Tipo de letra Tahoma

ltFONT size=4 color=blueface=TahomagtTexto azul de tamantildeo4 y TahomaltFONTgt

Texto azul de tamantildeo 4 y Tahoma

Tabla 19

Listas Podemos representar elementos en forma de lista dentro de nuestros documentos de una forma muy sencilla y con una gran versatilidad Estas listas podraacuten incluir cualquiera de los elementos HTML e incluso podemos definir listas anidadas es decir listas dentro de listas HTML nos permite crear tres tipos distintos de listas

bull Listas no numeradas

bull Listas numeradas

bull Listas de definiciones

Listas no numeradas ltULgt UL Unordered List

Con este tipo de listas podemos especificar una serie de elementos sin un orden predeterminado precedidos de una marca o vintildeeta que nosotros mismos podemos definir Para la definicioacuten de los liacutemites de la lista utilizaremos la etiqueta ltULgt ltULgt y para determinar cada uno de los elementos que la componen usaremos la etiqueta ltLIgt El formato es el siguiente

ltUL type=disk oacute circle oacute squaregtltLHgtTiacutetulo de la listaltLHgt

copy Grupo EIDOS 3 Elementos del lenguaje I

27

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltULgtLH List Head LI List Item

Con el atributo type vamos a especificar el tipo de marca o vintildeeta que antecederaacute a cada uno de los elementos de la lista Estas marcas podraacuten ser un disco (disk) un ciacuterculo (circle) o un cuadrado (square) La etiqueta ltLHgt nos va a servir para especificar un posible tiacutetulo de la lista siendo esta opcional Vamos a ver algunos ejemplos en la Tabla 20

Ejemplo Resultado

ltUL type=circlegtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAfricaltLIgtAmeacutericaltLIgtOceaniacutea

ltULgt

Los cinco continentes

Europa

Asia

Aacutefrica

Ameacuterica

Oceaniacutea

ltUL type=squaregtltLIgtEuropaltLIgtAsialtLIgtAfricaltLIgtAmeacutericaltUL type=circle gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltULgtltLIgtOceaniacutea

ltULgt

Europa

Asia

Aacutefrica

Ameacuterica

Ameacuterica del Norte

Ameacuterica del Sur

Oceaniacutea

Tabla 20

Listas numeradas ltOLgt OL Ordered List

Con este tipo de listas podemos especificar una serie de elementos numerados seguacuten el lugar que ocupan en la lista Para la definicioacuten de los liacutemites de la lista utilizaremos la etiqueta ltOLgt ltOLgt y para determinar cada uno de los elementos que la componen usaremos la etiqueta ltLIgt El formato es el siguiente

ltOL start=n type=Tipo de listagtltLHgtTiacutetulo de la listaltLHgt

Lenguaje HTML copy Grupo EIDOS

28

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltOLgt

Con el atributo start vamos a especificar el nuacutemero por el que va a empezar la lista Si no indicamos este argumento la lista empezaraacute a numerarse a partir del 1 Con el atributo type vamos a especificar el tipo de lista numerada Sus posibles valores aparecen a continuacioacuten y veremos algunos ejemplos en la Tabla 21

A Letras mayuacutesculas (A B C )

a Letras minuacutesculas (a b c )

I Nuacutemeros romanos en mayuacutesculas (I II III IV )

i Nuacutemeros romanos en minuacutesculas (i ii iii iv )

1 Numeacutericamente (1 2 3 4 ) (es la numeracioacuten por defecto y por tanto no habriacutea que indicarla)

Ejemplo Resultado

ltOL type=AgtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltLIgtOceaniacutea

ltOLgt

Los cinco continentes

A Europa

B Asia

C Aacutefrica

D Ameacuterica

E Oceaniacutea

ltOL type=I start=2gtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltOL type=i gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltOLgtltLIgtOceaniacutea

ltOLgt

II Europa

III Asia

IV Aacutefrica

V Ameacuterica

i Ameacuterica del Norte

ii Ameacuterica del Sur

VI Oceaniacutea

Tabla 21

copy Grupo EIDOS 3 Elementos del lenguaje I

29

Listas de definiciones ltDLgt DL Definition List

Estas listas nos van a servir para especificar una serie de teacuterminos y sus definiciones correspondientes Para la definicioacuten de la lista usaremos la etiqueta ltDLgt ltDLgt para especificar los teacuterminos usaremos la etiqueta ltDTgt y para especificar la definicioacuten correspondiente a cada teacutermino usaremos la etiqueta ltDDgt El formato es el siguiente

ltDLgtltLHgtTiacutetulo de la listaltLHgtltDTgtTeacutermino 1ltDDgtDefinicioacuten 1ltDTgtTeacutermino 2ltDDgtDefinicioacuten 2

ltDTgtTeacutermino nltDDgtDefinicioacuten n

ltDLgtDT Definition Term DD Definition Description

Vamos a ver un ejemplo en la Tabla 22

Ejemplo Resultado

ltDLgtltDTgtPariacutesltDDgtCapital de FrancialtDTgtRomaltDDgtCapital de ItalialtDTgtMadridltDDgtCapital de Espantildea

ltDLgt

Pariacutes

Capital de Francia

Roma

Capital de Italia

Madrid

Capital de Espantildea

Tabla 22

Hiperenlaces Los hiperenlaces son enlaces de hipertexto que nos van a permitir acceder de manera directa a otros documentos HTML independientemente de su ubicacioacuten o a otras zonas dentro de nuestro propio documento

Enlaces a otras paacuteginas ltA href=gt Con este tipo de hiperenlaces vamos a poder acceder tanto a otras paacuteginas que esteacuten ubicadas dentro de nuestro propio sistema como a paacuteginas ubicadas en puntos muy distantes del globo El formato de este tipo de hiperenlaces es

ltA href=URL a la que se accedegtTexto del hiperenlaceltAgt

Lenguaje HTML copy Grupo EIDOS

30

Con el atributo href vamos a especificar la URL del documento al que se pretende acceder El texto contenido entre las etiquetas de comienzo y fin nos va a servir para definir el hiperenlace por lo que deberiacutea ser clarificador del contenido del documento con el que vamos a enlazar Esta definicioacuten apareceraacute resaltada normalmente en azul y subrayada En la mayoriacutea de los navegadores esta definicioacuten del hiperenlace es sensible por lo que cuando el cursor pasa por encima del mismo este cambia de aspecto indicaacutendolo

Veamos un ejemplo en la Tabla 23

Ejemplo Resultado

ltA href=httpwwweidosesgtPaacutegina inicialde Villa EidosltAgt

Paacutegina inicial de Villa Eidos

Tabla 23

Si situamos el ratoacuten encima del hiperenlace y pulsamos el navegador accederaacute a la paacutegina Web indicada por href es decir accederaacute a la paacutegina situada en httpwwweidoses

Igualmente podriacuteamos indicar el hiperenlace por medio de una imagen Si esta imagen tiene definido un borde este apareceraacute resaltado en color azul El formato correspondiente seriacutea

ltA href=URL a la que se accedegtltIMG src=Imagengt y tambieacutentextoltAgtIMG Image src Source

Veamos un ejemplo en la Tabla 24

Ejemplo Resultado

ltA href=httpwwweidosesgtltIMGsrc=IconogifgtltAgt Villa Eidos Villa Eidos

Tabla 24

Si pulsamos sobre la imagen el navegador accederaacute a la paacutegina Web inicial de Villa Eidos

Enlaces dentro de la misma paacutegina ltA name=gt Este tipo de hiperenlaces nos va a permitir marcar distintas zonas del documento activo con el objeto de tener un acceso directo a las mismas Una buena utilidad de este tipo de enlaces radica en la creacioacuten de iacutendices para documentos largos de forma que si pinchamos en el hiperenlace correspondiente al tiacutetulo de un capiacutetulo determinado el navegador saltaraacute automaacuteticamente hasta el comienzo de dicho capiacutetulo

Para la creacioacuten de estos hiperenlaces debemos seguir dos pasos

copy Grupo EIDOS 3 Elementos del lenguaje I

31

1 Marcar las distintas zonas o secciones del documento Esto lo haremos con el paraacutemetro name

ltA name=Identificador de seccioacutengtTexto de laseccioacutenltAgt

A cada seccioacuten le asignaremos un identificador distinto para poder referenciarlas posteriormente de manera inequiacutevoca

2 Especificar un enlace a cada una de las secciones que hayamos definido ltA href=Identificador de seccioacutengtTexto del enlace a laseccioacutenltAgt

Si pinchamos en este enlace el navegador saltaraacute automaacuteticamente a la seccioacuten correspondiente Veamos un ejemplo sencillito en la Tabla 25 pero demostrativo de todo lo que acabamos de explicar

Ejemplo Resultado

ltA href=Cap1gtCapiacutetulo1ltAgtltA name=Cap1gtCapiacutetulo 1ltAgt

Capiacutetulo 1

Capiacutetulo 1

Tabla 25

Si nos creamos una paacutegina HTML con distintos capiacutetulos podriacuteamos crear una seccioacuten para cada uno de ellos de forma que si pinchamos en el hiperenlace correspondiente al Capiacutetulo 1 el navegador saltariacutea directamente a la seccioacuten correspondiente al Capiacutetulo 1

Ademaacutes de los dos tipos de hiperenlaces vistos podemos crear hiperenlaces que nos permitan acceder a cualquiera de los servicios de Internet Es decir podriacuteamos indicar enlaces a servidores FTP GOPHER NEWS MAILTO etc Para ello tendriacuteamos que indicar la URL correspondiente al servicio al cual queremos acceder como ya vimos en el primer capiacutetulo de este manual

Imaacutegenes

Podremos dar un aspecto mucho maacutes vistoso a nuestros documentos HTML con la inclusioacuten de imaacutegenes Los formatos de imagen que todos los navegadores reconocen son gif y jpg Si queremos insertar una imagen en otro formato el visor deberiacutea disponer del programa externo que permita su visualizacioacuten De todas formas una buena solucioacuten es utilizar alguacuten programa de tratamiento de imaacutegenes que nos convierta la imagen a uno de los formatos mencionados anteriormente

El formato gif es maacutes recomendado para la inclusioacuten de iconos graacuteficas y el formato jpg para el caso de insertar fotografiacuteas en nuestras paacuteginas

Lenguaje HTML copy Grupo EIDOS

32

La etiqueta que nos va a permitir la insercioacuten de imaacutegenes es ltIMGgt La imagen se insertaraacute justo en el punto del documento donde coloquemos dicha etiqueta pudiendo insertar imaacutegenes dentro de listas tablas o formularios

El formato de la etiqueta con sus posibles argumentos es el siguiente

ltIMG src=URL de la imagen alt=Texto alternativoalign=topmiddlebottonleftrigth border=Tamantildeoheight=Tamantildeo width=Tamantildeo hspace=margen vspace=margengt

bull src=URL de la imagen El atributo src nos va servir para indicar la URL de la imagen que

queremos insertar es decir el servidor y camino hasta llegar al fichero de la imagen

No seraacute necesario que la imagen que queremos insertar en nuestro documento esteacute en el ordenador local aunque siacute es recomendable ya que el acceso a las mismas puede ser maacutes lento

Por tanto es una buena praacutectica copiar todas las imaacutegenes que vayamos a incluir en nuestro documento HTML al ordenador local

Tabla 26

bull alt=Texto alternativo Nos va a permitir mostrar un texto alternativo para el caso en que el

navegador no sea capaz de mostrar la imagen Su uso es muy recomendable ya que cuando publiquemos nuestras paacuteginas en la WWW no sabremos desde queacute tipo de navegadores accederaacuten los internautas a nuestras paacuteginas

En la Tabla 27 vamos a ver un ejemplo

Si usas un navegador que no tiene ninguacuten problema para la visualizacioacuten de imaacutegenes desactiva temporalmente la opcioacuten de mostrar imaacutegenes prueba el ejemplo que muestra la Tabla 27 y compaacuteralo con el anterior

Tabla 27

copy Grupo EIDOS 3 Elementos del lenguaje I

33

bull align=topmiddlebotton leftrigth Nos permite indicar coacutemo se alinearaacute el texto que siga a la imagen

top alinea el texto con la parte superior de la imagen

middle con la parte central

bottom con la parte inferior

left imagen alineada a la izquierda de la paacutegina

rigth imagen alineada a la derecha de la paacutegina

Tabla 28

En el caso de que el texto que acompantildea a la imagen tenga maacutes de una liacutenea tan soacutelo la primera seraacute la que se alinearaacute seguacuten alguna de las anteriores alineaciones el resto de liacuteneas se incluiraacuten debajo de la imagen quedando un efecto bastante feo

Para solventar esto estaacuten las alineaciones LEFT (imagen alineada a la izquierda de la paacutegina) y RIGHT (imagen alineada a la derecha de la paacutegina) Las cuales permiten que la imagen se inserte dentro del paacuterrafo que la rodea produciendo un resultado mucho maacutes profesional en la integracioacuten de texto e imaacutegenes

Estas dos alineaciones no se podraacuten usar en combinacioacuten con las anteriores Veamos algunos ejemplos en la Tabla 29

Vemos como en el primer ejemplo la segunda liacutenea de texto aparece debajo de la imagen produciendo un efecto menos vistoso que en los dos ejemplos siguientes

Lenguaje HTML copy Grupo EIDOS

34

Tabla 29

bull border=Tamantildeo Permite antildeadirle un borde a la imagen del tamantildeo que le

especifiquemos

Si la imagen forma parte de un hiperenlace esta apareceraacute con un borde del color del hiperenlace Si no deseaacuteramos que aparezca este borde tendriacuteamos que especificar border=0

Tabla 30

bull height=Tamantildeo Permite especificar el alto de la imagen en puntos de pantalla

(pixels) o en del tamantildeo del documento

bull width=Tamantildeo Con este argumento especificaremos el ancho al que mostraremos la imagen en puntos de pantalla (pixels) o en del tamantildeo del documento

En el segundo de los ejemplos de la Tabla 31 el ancho de la imagen se ha extendido al 50 del total del ancho de la celda donde estaacute contenida la imagen Si pruebas este ejemplo en tu documento HTML la imagen se extenderaacute horizontalmente hasta ocupar el 50 del ancho de la paacutegina

copy Grupo EIDOS 3 Elementos del lenguaje I

35

Tabla 31

bull hspace=Margen hspace Horizontal Space Permite especificar el nuacutemero de espacios

horizontales (en puntos) que separaraacuten a la imagen de cualquier elemento que le siga o le anteceda

bull vspace=Margen vspace Vertical Space Con este argumento especificaremos el margen vertical (en puntos) que habraacute entre la imagen y cualquier otro elemento de nuestro documento

Tabla 32

Elementos del lenguaje II

Tablas HTML nos va a permitir la inclusioacuten de cualquiera de los elementos de nuestra paacutegina (texto imaacutegenes hiperenlaces listas etc) dentro de una tabla Gracias a lo cual conseguiremos dar una mayor y mejor estructuracioacuten a los contenidos de nuestros documentos Ademaacutes la definicioacuten de las tablas en HTML es muy abierta pudiendo en cualquier momento redimensionar la tabla es decir cambiar su nuacutemero de filas o de columnas cambiar el tamantildeo de alguna de sus celdas etc

La etiqueta que nos va a permitir la definicioacuten de tablas es ltTABLEgt ltTABLEgt

El formato general de la etiqueta sin ninguacuten argumento es el siguiente

ltTABLEgtltTR gt

ltTHgtContenido de la celda ltTHgtltTDgtContenido de la celda ltTDgt

ltTRgtltTABLEgt

TR Table Row TH Table Header TD Table Data

Vamos a analizar cada una de estas etiquetas de forma separada

1 ltTABLEgt ltTABLEgt Definicioacuten general de la tabla Dentro de ella definiremos las filas y columnas que la constituyen pudiendo incluso definir tablas dentro de tablas es decir tablas anidadas

Lenguaje HTML copy Grupo EIDOS

38

2 ltTRgt ltTRgt Definicioacuten de las filas de la tabla Por cada etiqueta ltTRgt que incluyamos se crearaacute una fila en la tabla No seraacute necesario indicar la etiqueta de cierre

3 ltTHgtltTHgt oacute ltTDgtltTDgt Definicioacuten de cada una de las celdas de la tabla Vemos que estas etiquetas estaacuten contenidas dentro de otra etiqueta de definicioacuten de fila de forma que por cada etiqueta ltTHgt o ltTDgt que incluyamos se crearaacute una celda dentro de la fila correspondiente La etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera es decir celdas cuyo contenido estaacute resaltado en negrita dejando la etiqueta ltTDgt para definir celdas de datos En este caso tampoco es necesario indicar las etiquetas de cierre

Todas estas etiquetas tienen sus respectivos argumentos Pero antes de analizar cada uno de ellos vamos a ver un ejemplo muy sencillito en la Tabla 33 que nos crearaacute una tabla de una sola celda (1 fila X 1 columna = 1 celda) Para ello usaremos la etiqueta de creacioacuten de tabla ltTABLEgt con el argumento border=1 (nos dibuja un borde de tamantildeo 1 alrededor de la tabla)

Ejemplo Resultado

ltTABLE border=1gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 33

Vamos ahora a analizar lo distintos argumentos que componen las etiquetas de la tabla analizaacutendolos desde lo general (la definicioacuten de la tabla) hasta lo especiacutefico (la definicioacuten de las celdas)

1 Definicioacuten de la tabla ltTABLEgt

ltTABLE border=n cellpadding=n cellspacing=n width=n oacute height=n oacute bgcolor=rrggbb oacute nombre gt

Contenido ltTABLEgt

bull border=n Si especificamos este argumento se dibujaraacute un borde alrededor de la

tabla del ancho que le indiquemos como muestra la Tabla 34

Ejemplo Resultado

Mi primera tabla ltTABLE border=4gtltTRgtltTDgtMi primera tablaltTABLEgt

Tabla 34

bull cellpadding=n Indica el espacio en puntos que separa el contenido de la celda con

el borde de la misma siendo 1 por defecto

copy Grupo EIDOS 4 Elementos del lenguaje II

39

Ejemplo Resultado

ltTABLE border=4 cellpadding=8gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 35

bull cellspacing=n Indica el espacio en puntos que separa a las celdas contenidas dentro de la tabla siendo 2 por defecto

bull width=n oacute Indica la anchura de la tabla en puntos o en en funcioacuten del ancho de la ventana del visualizador Si no indicamos este argumento el ancho de la tabla se ajustaraacute al tamantildeo del contenido de las celdas Esto es lo que ha ocurrido en el uacuteltimo ejemplo que hemos realizado Veamos un ejemplo en el Coacutedigo fuente 11 El resultado se muestra en la Tabla 36

ltTABLE border=4 width=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 11

Mi primera tabla

Tabla 36

bull height=n oacute Nos permite definir la altura de la tabla en puntos o en de la

altura de la ventana del visualizador Si indicamos este argumento lo recomendable es darlo en puntos ya que es maacutes complicado adecuarnos a la altura de la ventana del visualizador Al igual que en el caso anterior si no especificamos este argumento la altura se adecuaraacute al contenido de las celdas El Coacutedigo fuente 12 muestra un ejemplo y la Tabla 37 nos muestra el resultado

ltTABLE border=4 width=50 height=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 12

Mi primera tabla

Tabla 37

bull bgcolor= rrggbb o nombre del color Nos permite definir un color

de fondo para todas las celdas de la tabla Maacutes adelante veremos como podemos definir colores especiacuteficos para cada una de las celdas por separado

Lenguaje HTML copy Grupo EIDOS

40

Ejemplo Resultado

ltTABLE border=4 bgcolor=yellowgtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 38

2 Definicioacuten de las filas de la tabla ltTRgt

ltTR align=leftrightcenter valign=topmiddlebottombgcolor=rrggbb oacute nombregt

Antes de empezar a descifrar el significado de cada uno de los argumentos de esta etiqueta vamos a ver un ejemplo en la Tabla 39 de coacutemo se construiriacutea una tabla con dos filas (2 filas X 1 columna = 2 celdas)

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR gtltTDgtPrimera filaltTRgtltTDgtSegunda filaltTABLEgt

Segunda fila

Tabla 39

bull align=leftrightcenter Con este argumento vamos a indicar la alineacioacuten

horizontal (leftizquierda rightderecha centercentrado) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado Veamos un ejemplo en el Coacutedigo fuente 13 y su correspondiente resultado en la Tabla 40

ltTABLE border=4 width=50 gt ltTRgtltTDgtPrimera filaltTRalign=rightgtltTDgtSegunda filaltTABLEgt

Coacutedigo fuente 13

Primera fila

Segunda fila

Tabla 40

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten

vertical (toparriba middlecentrado bottomabajo) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado

copy Grupo EIDOS 4 Elementos del lenguaje II

41

bull bgcolor= rrggbb o nombre del color En este caso este argumento nos permitiraacute definir un color de fondo para todas las celdas de una fila veamos un ejemplo en la

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR bgcolor=yellowgtltTDgtPrimera

filaltTR bgcolor=greengtltTDgtSegunda

filaltTABLEgt

Segunda fila

Tabla 41

3 Definicioacuten de las celdas de la tabla ltTHgt oacute ltTDgt

ltTH oacute TD align=leftrightcenterjustifyvalign=topmiddlebottom bgcolor=rrggbb oacute nombre width=nrowspan=n colspan=ngt

Como ya explicamos anteriormente la etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera y la etiqueta ltTDgt para la creacioacuten de celdas de datos Vamos a completar nuestro ejemplo inicial antildeadieacutendole tres filas de dos celdas cada una (3 filas X 2 columnas = 6 celdas) Tabla 42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTDgtCelda 21ltTDgtCelda 22

ltTABLEgt Celda 21 Celda 22

Tabla 42

bull align=leftrightcenterjustify Con este argumento vamos a indicar la

alineacioacuten horizontal (left izquierda right derecha center centrado justifyjustificado) del contenido de cada celda por separado Su significado es el mismo que en la etiqueta ltTRgt

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten vertical (toparriba middlecentrado bottomabajo) del contenido de cada celda

bull bgcolor= rrggbb o nombre del color En este caso podremos definir un color de fondo para cada una de las celdas de manera independiente

bull width=n oacute Indica el ancho de la celda en puntos o en en funcioacuten del tamantildeo de la tabla

Lenguaje HTML copy Grupo EIDOS

42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera

1ltTHgtCabecera 2ltTR gtltTD align=rightgtCelda

11ltTD bgcolor=redgtCelda 12ltTRgtltTD

bgcolor=yellowgtCelda 21ltTDalign=centergtCelda 22ltTABLEgt

Celda 21 Celda 22

Tabla 43

bull rowspan=n Con este argumento podemos lograr que una celda concreta abarque maacutes de una fila ya sabemos que por defecto una celda ocupa una sola fila

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTD rowspan=2gtCelda

11ltTDgtCelda 12ltTRgtltTDgtCelda 22

ltTABLEgt

Celda 11 Celda 22

Tabla 44

bull colspan=n Con este argumento podemos lograr que una celda se expanda a maacutes

de una columna

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTD colspan=2

align=centergtCelda 22ltTABLEgt

Celda 22

Tabla 45

Para finalizar este tema sobre la creacioacuten de tablas vamos a ver el ejemplo que aparece en el Coacutedigo fuente 14 y su resultado en la Tabla 46

ltTABLE border=4gtltTR gtltTH colspan=3 bgcolor=redgtTiacutetuloltTR bgcolor=yellowgtltTHgtCabecera 1ltTHgtCabecera 2ltTHgtCabecera 3

copy Grupo EIDOS 4 Elementos del lenguaje II

43

ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTDgtCelda 13ltTRgtltTD rowspan=2gtCelda 21ltTD bgcolor=greengtCelda 22ltTDgtCelda 23ltTRgtltTDgtCelda 32ltTDgtCelda 33

ltTABLEgt

Coacutedigo fuente 14

Tiacutetulo

Cabecera 1 Cabecera 2 Cabecera 3

Celda 11 Celda 12 Celda 13

Celda 22 Celda 23 Celda 21

Celda 32 Celda 33

Tabla 46

Formularios El formulario es el elemento de HTML que nos va a permitir interactuar con los visitantes de nuestras paacuteginas web de forma que podemos solicitarle informacioacuten al usuario y procesarla De esta forma podremos crear en nuestras paacuteginas encuestas para solicitar la opinioacuten del visitante sobre alguacuten tema e incluso sobre el contenido de nuestra propia paacutegina web cuestionarios para evaluar la asimilacioacuten de contenidos sobre un tema concreto que se trate en la paacutegina etc

El contenido de la informacioacuten introducida por medio del formulario seraacute enviado a la direccioacuten URL donde resida el programa que se encargaraacute de procesar los datos A este tipo de programas externos se les denomina programas CGI (Common Gateway Interface)

La etiqueta HTML que nos va a permitir la creacioacuten de formularios es ltFORMgt Su formato es el siguiente

ltFORM action=URL del programa que trata el formulariomethod=postgetgt Elementos del formulario ltFORMgt

bull action=URL del programa que trata el formulario A traveacutes de este

argumento indicaremos como ya hemos mencionado la direccioacuten del fichero de programa que va a tratar la informacioacuten suministrada por el formulario

Tambieacuten podriacuteamos incluir como URL que trata el formulario una direccioacuten de correo electroacutenico Por tanto el valor de este argumento podriacutea ser action =mailto direccioacuten de correo

Nota Esta opcioacuten soacutelo funciona adecuadamente con el navegador Netscape Con el Explorer este enviacuteo dariacutea como resultado un correo en blanco Para que esta opcioacuten funcione de manera independiente del navegador que se esteacute utilizando se ha de emplear un programa externo que realice este proceso

Lenguaje HTML copy Grupo EIDOS

44

bull method=postget A traveacutes de este argumento indicaremos el meacutetodo empleado para transferir la informacioacuten generada por el formulario

Si indicamos post se produciraacute la modificacioacuten del documento destino como es el caso de enviar la informacioacuten a una direccioacuten de correo electroacutenico Mediante el meacutetodo get no se produciraacuten cambios en el documento destino

Dentro de un formulario podremos incluir cualquier texto o instruccioacuten HTML de las vistas a lo largo de los capiacutetulos anteriores ademaacutes claro estaacute de los elementos tiacutepicos de un formulario cajas de texto botones de seleccioacuten menuacutes de opciones etc Vamos a ver coacutemo se incluiraacuten estos elementos en un formulario

Entrada baacutesica de datos Para definir los distintos tipos de campos baacutesicos de entrada de datos usaremos la etiqueta ltINPUTgt

El formato es el siguiente

ltINPUT type= text password checkbox radio hidden submit image reset name=Variable value=Valor inicialgt

bull El argumento type determinaraacute el tipo de campo de entrada que estamos insertando A

continuacioacuten describiremos cada uno de ellos

bull El argumento name especifica el nombre de la variable que tomaraacute el valor introducido en el campo

bull El argumento value especifica el valor por defecto que tendraacute el campo

Vamos a continuacioacuten a describir los distintos tipos campos de entrada que vendraacuten dados por los valores del argumento type

Texto corto type=text

Con este argumento vamos a indicar que el campo a introducir seraacute un texto El formato seriacutea

ltINPUT type= text name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los nuevos atributos es

bull size=Tamantildeo Indicaremos el tamantildeo en caracteres de la ventana de introduccioacuten de texto

bull maxlength=Longitud maacutexima Indicaremos el nuacutemero maacuteximo de caracteres a introducir en el campo

Vamos a ver un ejemplo en la Tabla 47

copy Grupo EIDOS 4 Elementos del lenguaje II

45

Ejemplo Resultado

NombreltINPUT type=text name=Var1Value=Texto por defecto size=20 maxlength=25gt

Tabla 47

Claves type=password

Con este argumento indicamos que el campo a introducir seraacute una palabra clave por lo que los caracteres que se introduzcan seraacuten sustituidos por asteriscos en la visualizacioacuten por pantalla El formato es

ltINPUT type= password name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los distintos argumentos es el mismo que en el caso anterior Veamos un ejemplo en la Tabla 48

Ejemplo Resultado

ClaveltINPUT type=password name=Var2Value=tutankamon size=11 maxlength=10gt

Tabla 48

Botones de seleccioacuten type=checkbox

El checkbox es un botoacuten que presenta dos estados marcado (1) y desmarcado (0) Podremos variar su estado simplemente pinchando con el ratoacuten El formato es

ltINPUT type= checkbox name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto

Si incluimos el argumento value cuando el botoacuten esteacute marcado su variable asociada adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 49

Ejemplo Resultado

ltINPUT type=checkbox name=Var3 value=Op1 checkedgtOpcioacuten1 ltbrgtltINPUT type=checkbox name=Var4 value=Op2gt Opcioacuten 2

Tabla 49

Lenguaje HTML copy Grupo EIDOS

46

Seleccioacuten entre varias opciones type=radio

Este argumento se usa cuando hay que hacer una seleccioacuten entre varias alternativas excluyentes pudieacutendose seleccionar uacutenicamente una de las alternativas Debemos incluir una etiqueta radio por cada una de las posibles alternativas El formato es

ltINPUT type= radio name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto En este caso uacutenicamente uno de los botones de radio podraacute aparecer marcado ya que se usa para el caso de opciones excluyentes

Cuando un botoacuten esteacute seleccionado la variable asociada a la lista de botones adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 50

Ejemplo Resultado

ltINPUT type=radio name=Var5 value=Op1gtOpcioacuten1 ltbrgtltINPUT type=radio name=Var5 value=Op2checkedgt Opcioacuten 2 ltbrgtltINPUT type=radio name=Var5 value=Op3 gtOpcioacuten 3

Tabla 50

En este ejemplo la variable Var5 tendraacute el valor Op2

Campos ocultos type=hidden

Este tipo de campos no son visibles para el usuario Su uso tiene sentido en el caso de enviar alguacuten tipo de informacioacuten que no deba ser visualizada o variada por el lector de nuestra paacutegina Web El formato es

ltINPUT type= hidden name=Variable value=Valor gt

Con esta etiqueta asignariacuteamos a la Variable referenciada por name el Valor de value y se mandariacutea junto con el formulario sin que el usuario de la paacutegina se entere de nada Veamos un ejemplo en el Coacutedigo fuente 15

ltINPUT type=hidden name=Var6 value=tutankamongt

Coacutedigo fuente 15

copy Grupo EIDOS 4 Elementos del lenguaje II

47

Botoacuten de enviacuteo de datos type=submit

Con este argumento especificamos un botoacuten en el que al pulsar los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario El formato es

ltINPUT type= submit value=Mensaje a mostrargt

En este caso el paraacutemetro value indica el mensaje que se mostraraacute en el botoacuten Veamos un ejemplo en la Tabla 51

Ejemplo Resultado

ltINPUT type=submit value=Enviar los Datosgt

Tabla 51

Botoacuten graacutefico de enviacuteo de datos type=image

Con este argumento especificamos un botoacuten de tipo imagen en el que al igual que con el botoacuten anterior si pulsamos en la imagen los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario Su formato es el siguiente

ltINPUT type= image src=URL de la imagen name=Variablegt

Con el paraacutemetro src especificamos la URL de la imagen que seraacute insertada en el botoacuten En este caso en la variable referenciada por name se almacenaraacuten las coordenadas del punto de la imagen donde se halla pinchado (de forma que estas coordenadas podriacutean ser procesadas por el programa que recibe los datos del formulario)

Botoacuten de borrado de datos type=reset

Con este argumento especificamos un botoacuten que al ser pulsado borraraacute el contenido actual de todos los campos dejaacutendolos con sus valores por defecto Su formato es

ltINPUT type= reset value=Texto del botoacutengt

Con el paraacutemetro value especificamos el texto que etiquetaraacute al botoacuten

Ejemplo Resultado

ltINPUT type=reset value=Borrar datosgt

Tabla 52

Lenguaje HTML copy Grupo EIDOS

48

Entrada datos en muacuteltiples liacuteneas En un formulario tambieacuten podremos introducir un campo de texto que abarque varias liacuteneas Para ello usaremos la etiqueta ltTEXTAREAgt ltTEXTAREAgt Su formato es el siguiente

ltTEXTAREA name=Variable rows=Filas cols=ColumnasgtContenido por defectoltTEXTAREAgt

Los argumentos rows y cols nos van a permitir especificar respectivamente el nuacutemero de filas de texto visibles y el nuacutemero de columnas de texto visibles en el campo

Ejemplo Resultado

ltTEXTAREA name=Var7 rows=5 cols=40gtContenido por defectoltTEXTAREAgt

Tabla 53

Entrada de datos a traveacutes de campos de seleccioacuten Con los campos de seleccioacuten podremos desplegar una lista de opciones entre las que podremos seleccionar una Para ello usaremos la etiqueta ltSELECTgt ltSELECTgt Su formato es el siguiente

ltSELECT name=Variable multiple size=ngtltOPTION selected value=Valor_1gtPrimera OpcioacutenltOPTION value=Valor_2gtSegunda Opcioacuten

ltOPTION value=Valor_ngtEneacutesima Opcioacuten

ltSELECTgt

Figura 1

bull La variable referenciada por name tomaraacute el valor(value) de la opcioacuten seleccionada

bull Si especificamos el argumento muacuteltiple se mostraraacuten todas la opciones en forma de tabla El nuacutemero de opciones visibles en la tabla vendraacute dado por el argumento size

copy Grupo EIDOS 4 Elementos del lenguaje II

49

bull Con la etiqueta ltOPTIONgt iremos definiendo cada una de las opciones de la lista

bull El argumento selected va a determinar cuaacutel es la opcioacuten por defecto

Para finalizar vamos a ver el Coacutedigo fuente 16 correspondiente a una encuesta realizada por la editorial ficticia EditoPc y en la Figura 2 observamos el resultado del formulario

ltP align=centergtltBgtEDITORIAL ltIgtEditoPcltIgtltBgtltPgtltFORM action=mailtodireccionejemplo method = postgtNombreltINPUT type=text size=30 name=nombregtltBRgtE_mail ltINPUT type=text size=30 name=e_mailgtltPgtDeseas recibir informacioacuten sobreltINPUT type=checkbox name=infor1 value=InternetgtInternetltINPUT type=checkbox name=infor2 value=ProgramacioacutengtProgramacioacutenltINPUT type=checkbox name=infor3 value=SistOperativogtSistOperativoltINPUT type=checkbox name=infor4 value=OfimaacuteticagtOfimaacuteticaltPgtiquestTe conectas a Internet desde casa ltbrgtltINPUT type=radio name=intercasa value=sigtSiacuteltINPUT type=radio name=intercasa value=nogtNoltPgtiquestQueacute uso le das a tu ordenador ltBRgtltSELECT name=uso multiple size=3gtltOPTION selectedgtProfesionalltOPTIONgtDomeacutesticoltOPTIONgtOcioJuegosltSELECTgtltPgtCaracteriacutesticas de tu PCltBRgtltTEXTAREA name=caract rows=5 cols=40gtltTEXTAREAgtltPgtltINPUT type=submit value=Enviar datosgt ltINPUT type=reset value=Borrardatosgt

Coacutedigo fuente 16

Figura 2

Elementos del lenguaje III

Frames Las frames son una utilidad del HTML que nos permite dividir la ventana del navegador en diferentes subventanas que podraacuten ser manipuladas de manera independiente Esto nos permitiraacute mostrar una paacutegina web diferente en cada una de la subventanas o frames

Estructura de un documento con frames Un documento con frames se estructura de manera diferente a un documento HTML normal Asiacute en este tipo de documentos no apareceraacute la etiqueta ltBODYgt En su lugar se incluiraacute la etiqueta ltFRAMESETgt ltFRAMESETgt dentro de la cual se definiraacuten las distintas frames que se incluyan en el documento

La estructura general de un documento de este tipo seriacutea por tanto

ltHTMLgtltHEADgtCabeceraltHEADgtltFRAMESETgt

Definicioacuten de la distintas framesltFRAMESETgtltNOFRAMESgt

Instrucciones HTMLltNOFRAMESgt

ltHTMLgt

Lenguaje HTML copy Grupo EIDOS

52

Puede darse el caso de que programemos nuestro documento con frames siguiendo la estructura anterior y que el navegador que se use para leer el documento no soporte la caracteriacutestica de frames con lo cual no se mostraraacute nada de lo indicado entre las etiquetas ltFRAMESETgt y ltFRAMESETgtPara solucionar este problema todas las instrucciones HTML incluidas entre las etiquetas ltNOFRAMESgt y ltNOFRAMESgt seraacuten ejecutadas por los navegadores que no soportan las frames

La sintaxis de la etiqueta ltFRAMESETgt es

ltFRAMESET rows=Lista de filas cols=Lista de columnasgtltFRAME src=URL de la frame 1 name=Nombre de la frame 1gtltFRAME src=URL de la frame 2 name=Nombre de la frame 2gt

ltFRAME src=URL de la frame n name=Nombre de la frame ngt

ltFRAMESETgt

Como vemos por cada una de la frames que incluyamos en nuestro documento debemos incluir una etiqueta ltFRAMEgt indicando mediante sus argumentos la direccioacuten URL del documento que se insertaraacute en la subventana (src) y el nombre de la frame (name) Posteriormente describiremos la etiqueta ltFRAMEgt con maacutes detalle

Los argumentos de ltFRAMESETgt son rows y cols definieacutendose uacutenicamente uno de los dos atributos en funcioacuten de si la divisioacuten de la pantalla se realizaraacute por filas (rows) o por columnas (cols)

Por cada una de las subventanas que creemos debemos especificar su tamantildeo en puntos o en porcentaje del tamantildeo de cada subventana Asiacute por ejemplo si especificamos rows= 50 2525 crearemos tres subventanas horizontales ocupando la primera el 50 de la ventana principal y las otras dos el resto Si especificamos cols=100150 crearemos tres subventanas verticales ocupando la primera 100 puntos de la ventana principal la segunda 150 puntos y tercera el espacio restante

Vamos a verlo maacutes claramente con un par de ejemplos praacutecticos que vemos en la Tabla 54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 502525gt ltFRAMEsrc=Pagweb1htm name=Pagweb1gtltFRAMEsrc=Pagweb2htm name=Pagweb2gtltFRAMEsrc=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 23: Programacion web   lenguaje html

copy Grupo EIDOS 3 Elementos del lenguaje I

27

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltULgtLH List Head LI List Item

Con el atributo type vamos a especificar el tipo de marca o vintildeeta que antecederaacute a cada uno de los elementos de la lista Estas marcas podraacuten ser un disco (disk) un ciacuterculo (circle) o un cuadrado (square) La etiqueta ltLHgt nos va a servir para especificar un posible tiacutetulo de la lista siendo esta opcional Vamos a ver algunos ejemplos en la Tabla 20

Ejemplo Resultado

ltUL type=circlegtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAfricaltLIgtAmeacutericaltLIgtOceaniacutea

ltULgt

Los cinco continentes

Europa

Asia

Aacutefrica

Ameacuterica

Oceaniacutea

ltUL type=squaregtltLIgtEuropaltLIgtAsialtLIgtAfricaltLIgtAmeacutericaltUL type=circle gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltULgtltLIgtOceaniacutea

ltULgt

Europa

Asia

Aacutefrica

Ameacuterica

Ameacuterica del Norte

Ameacuterica del Sur

Oceaniacutea

Tabla 20

Listas numeradas ltOLgt OL Ordered List

Con este tipo de listas podemos especificar una serie de elementos numerados seguacuten el lugar que ocupan en la lista Para la definicioacuten de los liacutemites de la lista utilizaremos la etiqueta ltOLgt ltOLgt y para determinar cada uno de los elementos que la componen usaremos la etiqueta ltLIgt El formato es el siguiente

ltOL start=n type=Tipo de listagtltLHgtTiacutetulo de la listaltLHgt

Lenguaje HTML copy Grupo EIDOS

28

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltOLgt

Con el atributo start vamos a especificar el nuacutemero por el que va a empezar la lista Si no indicamos este argumento la lista empezaraacute a numerarse a partir del 1 Con el atributo type vamos a especificar el tipo de lista numerada Sus posibles valores aparecen a continuacioacuten y veremos algunos ejemplos en la Tabla 21

A Letras mayuacutesculas (A B C )

a Letras minuacutesculas (a b c )

I Nuacutemeros romanos en mayuacutesculas (I II III IV )

i Nuacutemeros romanos en minuacutesculas (i ii iii iv )

1 Numeacutericamente (1 2 3 4 ) (es la numeracioacuten por defecto y por tanto no habriacutea que indicarla)

Ejemplo Resultado

ltOL type=AgtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltLIgtOceaniacutea

ltOLgt

Los cinco continentes

A Europa

B Asia

C Aacutefrica

D Ameacuterica

E Oceaniacutea

ltOL type=I start=2gtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltOL type=i gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltOLgtltLIgtOceaniacutea

ltOLgt

II Europa

III Asia

IV Aacutefrica

V Ameacuterica

i Ameacuterica del Norte

ii Ameacuterica del Sur

VI Oceaniacutea

Tabla 21

copy Grupo EIDOS 3 Elementos del lenguaje I

29

Listas de definiciones ltDLgt DL Definition List

Estas listas nos van a servir para especificar una serie de teacuterminos y sus definiciones correspondientes Para la definicioacuten de la lista usaremos la etiqueta ltDLgt ltDLgt para especificar los teacuterminos usaremos la etiqueta ltDTgt y para especificar la definicioacuten correspondiente a cada teacutermino usaremos la etiqueta ltDDgt El formato es el siguiente

ltDLgtltLHgtTiacutetulo de la listaltLHgtltDTgtTeacutermino 1ltDDgtDefinicioacuten 1ltDTgtTeacutermino 2ltDDgtDefinicioacuten 2

ltDTgtTeacutermino nltDDgtDefinicioacuten n

ltDLgtDT Definition Term DD Definition Description

Vamos a ver un ejemplo en la Tabla 22

Ejemplo Resultado

ltDLgtltDTgtPariacutesltDDgtCapital de FrancialtDTgtRomaltDDgtCapital de ItalialtDTgtMadridltDDgtCapital de Espantildea

ltDLgt

Pariacutes

Capital de Francia

Roma

Capital de Italia

Madrid

Capital de Espantildea

Tabla 22

Hiperenlaces Los hiperenlaces son enlaces de hipertexto que nos van a permitir acceder de manera directa a otros documentos HTML independientemente de su ubicacioacuten o a otras zonas dentro de nuestro propio documento

Enlaces a otras paacuteginas ltA href=gt Con este tipo de hiperenlaces vamos a poder acceder tanto a otras paacuteginas que esteacuten ubicadas dentro de nuestro propio sistema como a paacuteginas ubicadas en puntos muy distantes del globo El formato de este tipo de hiperenlaces es

ltA href=URL a la que se accedegtTexto del hiperenlaceltAgt

Lenguaje HTML copy Grupo EIDOS

30

Con el atributo href vamos a especificar la URL del documento al que se pretende acceder El texto contenido entre las etiquetas de comienzo y fin nos va a servir para definir el hiperenlace por lo que deberiacutea ser clarificador del contenido del documento con el que vamos a enlazar Esta definicioacuten apareceraacute resaltada normalmente en azul y subrayada En la mayoriacutea de los navegadores esta definicioacuten del hiperenlace es sensible por lo que cuando el cursor pasa por encima del mismo este cambia de aspecto indicaacutendolo

Veamos un ejemplo en la Tabla 23

Ejemplo Resultado

ltA href=httpwwweidosesgtPaacutegina inicialde Villa EidosltAgt

Paacutegina inicial de Villa Eidos

Tabla 23

Si situamos el ratoacuten encima del hiperenlace y pulsamos el navegador accederaacute a la paacutegina Web indicada por href es decir accederaacute a la paacutegina situada en httpwwweidoses

Igualmente podriacuteamos indicar el hiperenlace por medio de una imagen Si esta imagen tiene definido un borde este apareceraacute resaltado en color azul El formato correspondiente seriacutea

ltA href=URL a la que se accedegtltIMG src=Imagengt y tambieacutentextoltAgtIMG Image src Source

Veamos un ejemplo en la Tabla 24

Ejemplo Resultado

ltA href=httpwwweidosesgtltIMGsrc=IconogifgtltAgt Villa Eidos Villa Eidos

Tabla 24

Si pulsamos sobre la imagen el navegador accederaacute a la paacutegina Web inicial de Villa Eidos

Enlaces dentro de la misma paacutegina ltA name=gt Este tipo de hiperenlaces nos va a permitir marcar distintas zonas del documento activo con el objeto de tener un acceso directo a las mismas Una buena utilidad de este tipo de enlaces radica en la creacioacuten de iacutendices para documentos largos de forma que si pinchamos en el hiperenlace correspondiente al tiacutetulo de un capiacutetulo determinado el navegador saltaraacute automaacuteticamente hasta el comienzo de dicho capiacutetulo

Para la creacioacuten de estos hiperenlaces debemos seguir dos pasos

copy Grupo EIDOS 3 Elementos del lenguaje I

31

1 Marcar las distintas zonas o secciones del documento Esto lo haremos con el paraacutemetro name

ltA name=Identificador de seccioacutengtTexto de laseccioacutenltAgt

A cada seccioacuten le asignaremos un identificador distinto para poder referenciarlas posteriormente de manera inequiacutevoca

2 Especificar un enlace a cada una de las secciones que hayamos definido ltA href=Identificador de seccioacutengtTexto del enlace a laseccioacutenltAgt

Si pinchamos en este enlace el navegador saltaraacute automaacuteticamente a la seccioacuten correspondiente Veamos un ejemplo sencillito en la Tabla 25 pero demostrativo de todo lo que acabamos de explicar

Ejemplo Resultado

ltA href=Cap1gtCapiacutetulo1ltAgtltA name=Cap1gtCapiacutetulo 1ltAgt

Capiacutetulo 1

Capiacutetulo 1

Tabla 25

Si nos creamos una paacutegina HTML con distintos capiacutetulos podriacuteamos crear una seccioacuten para cada uno de ellos de forma que si pinchamos en el hiperenlace correspondiente al Capiacutetulo 1 el navegador saltariacutea directamente a la seccioacuten correspondiente al Capiacutetulo 1

Ademaacutes de los dos tipos de hiperenlaces vistos podemos crear hiperenlaces que nos permitan acceder a cualquiera de los servicios de Internet Es decir podriacuteamos indicar enlaces a servidores FTP GOPHER NEWS MAILTO etc Para ello tendriacuteamos que indicar la URL correspondiente al servicio al cual queremos acceder como ya vimos en el primer capiacutetulo de este manual

Imaacutegenes

Podremos dar un aspecto mucho maacutes vistoso a nuestros documentos HTML con la inclusioacuten de imaacutegenes Los formatos de imagen que todos los navegadores reconocen son gif y jpg Si queremos insertar una imagen en otro formato el visor deberiacutea disponer del programa externo que permita su visualizacioacuten De todas formas una buena solucioacuten es utilizar alguacuten programa de tratamiento de imaacutegenes que nos convierta la imagen a uno de los formatos mencionados anteriormente

El formato gif es maacutes recomendado para la inclusioacuten de iconos graacuteficas y el formato jpg para el caso de insertar fotografiacuteas en nuestras paacuteginas

Lenguaje HTML copy Grupo EIDOS

32

La etiqueta que nos va a permitir la insercioacuten de imaacutegenes es ltIMGgt La imagen se insertaraacute justo en el punto del documento donde coloquemos dicha etiqueta pudiendo insertar imaacutegenes dentro de listas tablas o formularios

El formato de la etiqueta con sus posibles argumentos es el siguiente

ltIMG src=URL de la imagen alt=Texto alternativoalign=topmiddlebottonleftrigth border=Tamantildeoheight=Tamantildeo width=Tamantildeo hspace=margen vspace=margengt

bull src=URL de la imagen El atributo src nos va servir para indicar la URL de la imagen que

queremos insertar es decir el servidor y camino hasta llegar al fichero de la imagen

No seraacute necesario que la imagen que queremos insertar en nuestro documento esteacute en el ordenador local aunque siacute es recomendable ya que el acceso a las mismas puede ser maacutes lento

Por tanto es una buena praacutectica copiar todas las imaacutegenes que vayamos a incluir en nuestro documento HTML al ordenador local

Tabla 26

bull alt=Texto alternativo Nos va a permitir mostrar un texto alternativo para el caso en que el

navegador no sea capaz de mostrar la imagen Su uso es muy recomendable ya que cuando publiquemos nuestras paacuteginas en la WWW no sabremos desde queacute tipo de navegadores accederaacuten los internautas a nuestras paacuteginas

En la Tabla 27 vamos a ver un ejemplo

Si usas un navegador que no tiene ninguacuten problema para la visualizacioacuten de imaacutegenes desactiva temporalmente la opcioacuten de mostrar imaacutegenes prueba el ejemplo que muestra la Tabla 27 y compaacuteralo con el anterior

Tabla 27

copy Grupo EIDOS 3 Elementos del lenguaje I

33

bull align=topmiddlebotton leftrigth Nos permite indicar coacutemo se alinearaacute el texto que siga a la imagen

top alinea el texto con la parte superior de la imagen

middle con la parte central

bottom con la parte inferior

left imagen alineada a la izquierda de la paacutegina

rigth imagen alineada a la derecha de la paacutegina

Tabla 28

En el caso de que el texto que acompantildea a la imagen tenga maacutes de una liacutenea tan soacutelo la primera seraacute la que se alinearaacute seguacuten alguna de las anteriores alineaciones el resto de liacuteneas se incluiraacuten debajo de la imagen quedando un efecto bastante feo

Para solventar esto estaacuten las alineaciones LEFT (imagen alineada a la izquierda de la paacutegina) y RIGHT (imagen alineada a la derecha de la paacutegina) Las cuales permiten que la imagen se inserte dentro del paacuterrafo que la rodea produciendo un resultado mucho maacutes profesional en la integracioacuten de texto e imaacutegenes

Estas dos alineaciones no se podraacuten usar en combinacioacuten con las anteriores Veamos algunos ejemplos en la Tabla 29

Vemos como en el primer ejemplo la segunda liacutenea de texto aparece debajo de la imagen produciendo un efecto menos vistoso que en los dos ejemplos siguientes

Lenguaje HTML copy Grupo EIDOS

34

Tabla 29

bull border=Tamantildeo Permite antildeadirle un borde a la imagen del tamantildeo que le

especifiquemos

Si la imagen forma parte de un hiperenlace esta apareceraacute con un borde del color del hiperenlace Si no deseaacuteramos que aparezca este borde tendriacuteamos que especificar border=0

Tabla 30

bull height=Tamantildeo Permite especificar el alto de la imagen en puntos de pantalla

(pixels) o en del tamantildeo del documento

bull width=Tamantildeo Con este argumento especificaremos el ancho al que mostraremos la imagen en puntos de pantalla (pixels) o en del tamantildeo del documento

En el segundo de los ejemplos de la Tabla 31 el ancho de la imagen se ha extendido al 50 del total del ancho de la celda donde estaacute contenida la imagen Si pruebas este ejemplo en tu documento HTML la imagen se extenderaacute horizontalmente hasta ocupar el 50 del ancho de la paacutegina

copy Grupo EIDOS 3 Elementos del lenguaje I

35

Tabla 31

bull hspace=Margen hspace Horizontal Space Permite especificar el nuacutemero de espacios

horizontales (en puntos) que separaraacuten a la imagen de cualquier elemento que le siga o le anteceda

bull vspace=Margen vspace Vertical Space Con este argumento especificaremos el margen vertical (en puntos) que habraacute entre la imagen y cualquier otro elemento de nuestro documento

Tabla 32

Elementos del lenguaje II

Tablas HTML nos va a permitir la inclusioacuten de cualquiera de los elementos de nuestra paacutegina (texto imaacutegenes hiperenlaces listas etc) dentro de una tabla Gracias a lo cual conseguiremos dar una mayor y mejor estructuracioacuten a los contenidos de nuestros documentos Ademaacutes la definicioacuten de las tablas en HTML es muy abierta pudiendo en cualquier momento redimensionar la tabla es decir cambiar su nuacutemero de filas o de columnas cambiar el tamantildeo de alguna de sus celdas etc

La etiqueta que nos va a permitir la definicioacuten de tablas es ltTABLEgt ltTABLEgt

El formato general de la etiqueta sin ninguacuten argumento es el siguiente

ltTABLEgtltTR gt

ltTHgtContenido de la celda ltTHgtltTDgtContenido de la celda ltTDgt

ltTRgtltTABLEgt

TR Table Row TH Table Header TD Table Data

Vamos a analizar cada una de estas etiquetas de forma separada

1 ltTABLEgt ltTABLEgt Definicioacuten general de la tabla Dentro de ella definiremos las filas y columnas que la constituyen pudiendo incluso definir tablas dentro de tablas es decir tablas anidadas

Lenguaje HTML copy Grupo EIDOS

38

2 ltTRgt ltTRgt Definicioacuten de las filas de la tabla Por cada etiqueta ltTRgt que incluyamos se crearaacute una fila en la tabla No seraacute necesario indicar la etiqueta de cierre

3 ltTHgtltTHgt oacute ltTDgtltTDgt Definicioacuten de cada una de las celdas de la tabla Vemos que estas etiquetas estaacuten contenidas dentro de otra etiqueta de definicioacuten de fila de forma que por cada etiqueta ltTHgt o ltTDgt que incluyamos se crearaacute una celda dentro de la fila correspondiente La etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera es decir celdas cuyo contenido estaacute resaltado en negrita dejando la etiqueta ltTDgt para definir celdas de datos En este caso tampoco es necesario indicar las etiquetas de cierre

Todas estas etiquetas tienen sus respectivos argumentos Pero antes de analizar cada uno de ellos vamos a ver un ejemplo muy sencillito en la Tabla 33 que nos crearaacute una tabla de una sola celda (1 fila X 1 columna = 1 celda) Para ello usaremos la etiqueta de creacioacuten de tabla ltTABLEgt con el argumento border=1 (nos dibuja un borde de tamantildeo 1 alrededor de la tabla)

Ejemplo Resultado

ltTABLE border=1gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 33

Vamos ahora a analizar lo distintos argumentos que componen las etiquetas de la tabla analizaacutendolos desde lo general (la definicioacuten de la tabla) hasta lo especiacutefico (la definicioacuten de las celdas)

1 Definicioacuten de la tabla ltTABLEgt

ltTABLE border=n cellpadding=n cellspacing=n width=n oacute height=n oacute bgcolor=rrggbb oacute nombre gt

Contenido ltTABLEgt

bull border=n Si especificamos este argumento se dibujaraacute un borde alrededor de la

tabla del ancho que le indiquemos como muestra la Tabla 34

Ejemplo Resultado

Mi primera tabla ltTABLE border=4gtltTRgtltTDgtMi primera tablaltTABLEgt

Tabla 34

bull cellpadding=n Indica el espacio en puntos que separa el contenido de la celda con

el borde de la misma siendo 1 por defecto

copy Grupo EIDOS 4 Elementos del lenguaje II

39

Ejemplo Resultado

ltTABLE border=4 cellpadding=8gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 35

bull cellspacing=n Indica el espacio en puntos que separa a las celdas contenidas dentro de la tabla siendo 2 por defecto

bull width=n oacute Indica la anchura de la tabla en puntos o en en funcioacuten del ancho de la ventana del visualizador Si no indicamos este argumento el ancho de la tabla se ajustaraacute al tamantildeo del contenido de las celdas Esto es lo que ha ocurrido en el uacuteltimo ejemplo que hemos realizado Veamos un ejemplo en el Coacutedigo fuente 11 El resultado se muestra en la Tabla 36

ltTABLE border=4 width=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 11

Mi primera tabla

Tabla 36

bull height=n oacute Nos permite definir la altura de la tabla en puntos o en de la

altura de la ventana del visualizador Si indicamos este argumento lo recomendable es darlo en puntos ya que es maacutes complicado adecuarnos a la altura de la ventana del visualizador Al igual que en el caso anterior si no especificamos este argumento la altura se adecuaraacute al contenido de las celdas El Coacutedigo fuente 12 muestra un ejemplo y la Tabla 37 nos muestra el resultado

ltTABLE border=4 width=50 height=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 12

Mi primera tabla

Tabla 37

bull bgcolor= rrggbb o nombre del color Nos permite definir un color

de fondo para todas las celdas de la tabla Maacutes adelante veremos como podemos definir colores especiacuteficos para cada una de las celdas por separado

Lenguaje HTML copy Grupo EIDOS

40

Ejemplo Resultado

ltTABLE border=4 bgcolor=yellowgtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 38

2 Definicioacuten de las filas de la tabla ltTRgt

ltTR align=leftrightcenter valign=topmiddlebottombgcolor=rrggbb oacute nombregt

Antes de empezar a descifrar el significado de cada uno de los argumentos de esta etiqueta vamos a ver un ejemplo en la Tabla 39 de coacutemo se construiriacutea una tabla con dos filas (2 filas X 1 columna = 2 celdas)

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR gtltTDgtPrimera filaltTRgtltTDgtSegunda filaltTABLEgt

Segunda fila

Tabla 39

bull align=leftrightcenter Con este argumento vamos a indicar la alineacioacuten

horizontal (leftizquierda rightderecha centercentrado) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado Veamos un ejemplo en el Coacutedigo fuente 13 y su correspondiente resultado en la Tabla 40

ltTABLE border=4 width=50 gt ltTRgtltTDgtPrimera filaltTRalign=rightgtltTDgtSegunda filaltTABLEgt

Coacutedigo fuente 13

Primera fila

Segunda fila

Tabla 40

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten

vertical (toparriba middlecentrado bottomabajo) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado

copy Grupo EIDOS 4 Elementos del lenguaje II

41

bull bgcolor= rrggbb o nombre del color En este caso este argumento nos permitiraacute definir un color de fondo para todas las celdas de una fila veamos un ejemplo en la

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR bgcolor=yellowgtltTDgtPrimera

filaltTR bgcolor=greengtltTDgtSegunda

filaltTABLEgt

Segunda fila

Tabla 41

3 Definicioacuten de las celdas de la tabla ltTHgt oacute ltTDgt

ltTH oacute TD align=leftrightcenterjustifyvalign=topmiddlebottom bgcolor=rrggbb oacute nombre width=nrowspan=n colspan=ngt

Como ya explicamos anteriormente la etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera y la etiqueta ltTDgt para la creacioacuten de celdas de datos Vamos a completar nuestro ejemplo inicial antildeadieacutendole tres filas de dos celdas cada una (3 filas X 2 columnas = 6 celdas) Tabla 42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTDgtCelda 21ltTDgtCelda 22

ltTABLEgt Celda 21 Celda 22

Tabla 42

bull align=leftrightcenterjustify Con este argumento vamos a indicar la

alineacioacuten horizontal (left izquierda right derecha center centrado justifyjustificado) del contenido de cada celda por separado Su significado es el mismo que en la etiqueta ltTRgt

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten vertical (toparriba middlecentrado bottomabajo) del contenido de cada celda

bull bgcolor= rrggbb o nombre del color En este caso podremos definir un color de fondo para cada una de las celdas de manera independiente

bull width=n oacute Indica el ancho de la celda en puntos o en en funcioacuten del tamantildeo de la tabla

Lenguaje HTML copy Grupo EIDOS

42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera

1ltTHgtCabecera 2ltTR gtltTD align=rightgtCelda

11ltTD bgcolor=redgtCelda 12ltTRgtltTD

bgcolor=yellowgtCelda 21ltTDalign=centergtCelda 22ltTABLEgt

Celda 21 Celda 22

Tabla 43

bull rowspan=n Con este argumento podemos lograr que una celda concreta abarque maacutes de una fila ya sabemos que por defecto una celda ocupa una sola fila

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTD rowspan=2gtCelda

11ltTDgtCelda 12ltTRgtltTDgtCelda 22

ltTABLEgt

Celda 11 Celda 22

Tabla 44

bull colspan=n Con este argumento podemos lograr que una celda se expanda a maacutes

de una columna

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTD colspan=2

align=centergtCelda 22ltTABLEgt

Celda 22

Tabla 45

Para finalizar este tema sobre la creacioacuten de tablas vamos a ver el ejemplo que aparece en el Coacutedigo fuente 14 y su resultado en la Tabla 46

ltTABLE border=4gtltTR gtltTH colspan=3 bgcolor=redgtTiacutetuloltTR bgcolor=yellowgtltTHgtCabecera 1ltTHgtCabecera 2ltTHgtCabecera 3

copy Grupo EIDOS 4 Elementos del lenguaje II

43

ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTDgtCelda 13ltTRgtltTD rowspan=2gtCelda 21ltTD bgcolor=greengtCelda 22ltTDgtCelda 23ltTRgtltTDgtCelda 32ltTDgtCelda 33

ltTABLEgt

Coacutedigo fuente 14

Tiacutetulo

Cabecera 1 Cabecera 2 Cabecera 3

Celda 11 Celda 12 Celda 13

Celda 22 Celda 23 Celda 21

Celda 32 Celda 33

Tabla 46

Formularios El formulario es el elemento de HTML que nos va a permitir interactuar con los visitantes de nuestras paacuteginas web de forma que podemos solicitarle informacioacuten al usuario y procesarla De esta forma podremos crear en nuestras paacuteginas encuestas para solicitar la opinioacuten del visitante sobre alguacuten tema e incluso sobre el contenido de nuestra propia paacutegina web cuestionarios para evaluar la asimilacioacuten de contenidos sobre un tema concreto que se trate en la paacutegina etc

El contenido de la informacioacuten introducida por medio del formulario seraacute enviado a la direccioacuten URL donde resida el programa que se encargaraacute de procesar los datos A este tipo de programas externos se les denomina programas CGI (Common Gateway Interface)

La etiqueta HTML que nos va a permitir la creacioacuten de formularios es ltFORMgt Su formato es el siguiente

ltFORM action=URL del programa que trata el formulariomethod=postgetgt Elementos del formulario ltFORMgt

bull action=URL del programa que trata el formulario A traveacutes de este

argumento indicaremos como ya hemos mencionado la direccioacuten del fichero de programa que va a tratar la informacioacuten suministrada por el formulario

Tambieacuten podriacuteamos incluir como URL que trata el formulario una direccioacuten de correo electroacutenico Por tanto el valor de este argumento podriacutea ser action =mailto direccioacuten de correo

Nota Esta opcioacuten soacutelo funciona adecuadamente con el navegador Netscape Con el Explorer este enviacuteo dariacutea como resultado un correo en blanco Para que esta opcioacuten funcione de manera independiente del navegador que se esteacute utilizando se ha de emplear un programa externo que realice este proceso

Lenguaje HTML copy Grupo EIDOS

44

bull method=postget A traveacutes de este argumento indicaremos el meacutetodo empleado para transferir la informacioacuten generada por el formulario

Si indicamos post se produciraacute la modificacioacuten del documento destino como es el caso de enviar la informacioacuten a una direccioacuten de correo electroacutenico Mediante el meacutetodo get no se produciraacuten cambios en el documento destino

Dentro de un formulario podremos incluir cualquier texto o instruccioacuten HTML de las vistas a lo largo de los capiacutetulos anteriores ademaacutes claro estaacute de los elementos tiacutepicos de un formulario cajas de texto botones de seleccioacuten menuacutes de opciones etc Vamos a ver coacutemo se incluiraacuten estos elementos en un formulario

Entrada baacutesica de datos Para definir los distintos tipos de campos baacutesicos de entrada de datos usaremos la etiqueta ltINPUTgt

El formato es el siguiente

ltINPUT type= text password checkbox radio hidden submit image reset name=Variable value=Valor inicialgt

bull El argumento type determinaraacute el tipo de campo de entrada que estamos insertando A

continuacioacuten describiremos cada uno de ellos

bull El argumento name especifica el nombre de la variable que tomaraacute el valor introducido en el campo

bull El argumento value especifica el valor por defecto que tendraacute el campo

Vamos a continuacioacuten a describir los distintos tipos campos de entrada que vendraacuten dados por los valores del argumento type

Texto corto type=text

Con este argumento vamos a indicar que el campo a introducir seraacute un texto El formato seriacutea

ltINPUT type= text name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los nuevos atributos es

bull size=Tamantildeo Indicaremos el tamantildeo en caracteres de la ventana de introduccioacuten de texto

bull maxlength=Longitud maacutexima Indicaremos el nuacutemero maacuteximo de caracteres a introducir en el campo

Vamos a ver un ejemplo en la Tabla 47

copy Grupo EIDOS 4 Elementos del lenguaje II

45

Ejemplo Resultado

NombreltINPUT type=text name=Var1Value=Texto por defecto size=20 maxlength=25gt

Tabla 47

Claves type=password

Con este argumento indicamos que el campo a introducir seraacute una palabra clave por lo que los caracteres que se introduzcan seraacuten sustituidos por asteriscos en la visualizacioacuten por pantalla El formato es

ltINPUT type= password name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los distintos argumentos es el mismo que en el caso anterior Veamos un ejemplo en la Tabla 48

Ejemplo Resultado

ClaveltINPUT type=password name=Var2Value=tutankamon size=11 maxlength=10gt

Tabla 48

Botones de seleccioacuten type=checkbox

El checkbox es un botoacuten que presenta dos estados marcado (1) y desmarcado (0) Podremos variar su estado simplemente pinchando con el ratoacuten El formato es

ltINPUT type= checkbox name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto

Si incluimos el argumento value cuando el botoacuten esteacute marcado su variable asociada adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 49

Ejemplo Resultado

ltINPUT type=checkbox name=Var3 value=Op1 checkedgtOpcioacuten1 ltbrgtltINPUT type=checkbox name=Var4 value=Op2gt Opcioacuten 2

Tabla 49

Lenguaje HTML copy Grupo EIDOS

46

Seleccioacuten entre varias opciones type=radio

Este argumento se usa cuando hay que hacer una seleccioacuten entre varias alternativas excluyentes pudieacutendose seleccionar uacutenicamente una de las alternativas Debemos incluir una etiqueta radio por cada una de las posibles alternativas El formato es

ltINPUT type= radio name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto En este caso uacutenicamente uno de los botones de radio podraacute aparecer marcado ya que se usa para el caso de opciones excluyentes

Cuando un botoacuten esteacute seleccionado la variable asociada a la lista de botones adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 50

Ejemplo Resultado

ltINPUT type=radio name=Var5 value=Op1gtOpcioacuten1 ltbrgtltINPUT type=radio name=Var5 value=Op2checkedgt Opcioacuten 2 ltbrgtltINPUT type=radio name=Var5 value=Op3 gtOpcioacuten 3

Tabla 50

En este ejemplo la variable Var5 tendraacute el valor Op2

Campos ocultos type=hidden

Este tipo de campos no son visibles para el usuario Su uso tiene sentido en el caso de enviar alguacuten tipo de informacioacuten que no deba ser visualizada o variada por el lector de nuestra paacutegina Web El formato es

ltINPUT type= hidden name=Variable value=Valor gt

Con esta etiqueta asignariacuteamos a la Variable referenciada por name el Valor de value y se mandariacutea junto con el formulario sin que el usuario de la paacutegina se entere de nada Veamos un ejemplo en el Coacutedigo fuente 15

ltINPUT type=hidden name=Var6 value=tutankamongt

Coacutedigo fuente 15

copy Grupo EIDOS 4 Elementos del lenguaje II

47

Botoacuten de enviacuteo de datos type=submit

Con este argumento especificamos un botoacuten en el que al pulsar los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario El formato es

ltINPUT type= submit value=Mensaje a mostrargt

En este caso el paraacutemetro value indica el mensaje que se mostraraacute en el botoacuten Veamos un ejemplo en la Tabla 51

Ejemplo Resultado

ltINPUT type=submit value=Enviar los Datosgt

Tabla 51

Botoacuten graacutefico de enviacuteo de datos type=image

Con este argumento especificamos un botoacuten de tipo imagen en el que al igual que con el botoacuten anterior si pulsamos en la imagen los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario Su formato es el siguiente

ltINPUT type= image src=URL de la imagen name=Variablegt

Con el paraacutemetro src especificamos la URL de la imagen que seraacute insertada en el botoacuten En este caso en la variable referenciada por name se almacenaraacuten las coordenadas del punto de la imagen donde se halla pinchado (de forma que estas coordenadas podriacutean ser procesadas por el programa que recibe los datos del formulario)

Botoacuten de borrado de datos type=reset

Con este argumento especificamos un botoacuten que al ser pulsado borraraacute el contenido actual de todos los campos dejaacutendolos con sus valores por defecto Su formato es

ltINPUT type= reset value=Texto del botoacutengt

Con el paraacutemetro value especificamos el texto que etiquetaraacute al botoacuten

Ejemplo Resultado

ltINPUT type=reset value=Borrar datosgt

Tabla 52

Lenguaje HTML copy Grupo EIDOS

48

Entrada datos en muacuteltiples liacuteneas En un formulario tambieacuten podremos introducir un campo de texto que abarque varias liacuteneas Para ello usaremos la etiqueta ltTEXTAREAgt ltTEXTAREAgt Su formato es el siguiente

ltTEXTAREA name=Variable rows=Filas cols=ColumnasgtContenido por defectoltTEXTAREAgt

Los argumentos rows y cols nos van a permitir especificar respectivamente el nuacutemero de filas de texto visibles y el nuacutemero de columnas de texto visibles en el campo

Ejemplo Resultado

ltTEXTAREA name=Var7 rows=5 cols=40gtContenido por defectoltTEXTAREAgt

Tabla 53

Entrada de datos a traveacutes de campos de seleccioacuten Con los campos de seleccioacuten podremos desplegar una lista de opciones entre las que podremos seleccionar una Para ello usaremos la etiqueta ltSELECTgt ltSELECTgt Su formato es el siguiente

ltSELECT name=Variable multiple size=ngtltOPTION selected value=Valor_1gtPrimera OpcioacutenltOPTION value=Valor_2gtSegunda Opcioacuten

ltOPTION value=Valor_ngtEneacutesima Opcioacuten

ltSELECTgt

Figura 1

bull La variable referenciada por name tomaraacute el valor(value) de la opcioacuten seleccionada

bull Si especificamos el argumento muacuteltiple se mostraraacuten todas la opciones en forma de tabla El nuacutemero de opciones visibles en la tabla vendraacute dado por el argumento size

copy Grupo EIDOS 4 Elementos del lenguaje II

49

bull Con la etiqueta ltOPTIONgt iremos definiendo cada una de las opciones de la lista

bull El argumento selected va a determinar cuaacutel es la opcioacuten por defecto

Para finalizar vamos a ver el Coacutedigo fuente 16 correspondiente a una encuesta realizada por la editorial ficticia EditoPc y en la Figura 2 observamos el resultado del formulario

ltP align=centergtltBgtEDITORIAL ltIgtEditoPcltIgtltBgtltPgtltFORM action=mailtodireccionejemplo method = postgtNombreltINPUT type=text size=30 name=nombregtltBRgtE_mail ltINPUT type=text size=30 name=e_mailgtltPgtDeseas recibir informacioacuten sobreltINPUT type=checkbox name=infor1 value=InternetgtInternetltINPUT type=checkbox name=infor2 value=ProgramacioacutengtProgramacioacutenltINPUT type=checkbox name=infor3 value=SistOperativogtSistOperativoltINPUT type=checkbox name=infor4 value=OfimaacuteticagtOfimaacuteticaltPgtiquestTe conectas a Internet desde casa ltbrgtltINPUT type=radio name=intercasa value=sigtSiacuteltINPUT type=radio name=intercasa value=nogtNoltPgtiquestQueacute uso le das a tu ordenador ltBRgtltSELECT name=uso multiple size=3gtltOPTION selectedgtProfesionalltOPTIONgtDomeacutesticoltOPTIONgtOcioJuegosltSELECTgtltPgtCaracteriacutesticas de tu PCltBRgtltTEXTAREA name=caract rows=5 cols=40gtltTEXTAREAgtltPgtltINPUT type=submit value=Enviar datosgt ltINPUT type=reset value=Borrardatosgt

Coacutedigo fuente 16

Figura 2

Elementos del lenguaje III

Frames Las frames son una utilidad del HTML que nos permite dividir la ventana del navegador en diferentes subventanas que podraacuten ser manipuladas de manera independiente Esto nos permitiraacute mostrar una paacutegina web diferente en cada una de la subventanas o frames

Estructura de un documento con frames Un documento con frames se estructura de manera diferente a un documento HTML normal Asiacute en este tipo de documentos no apareceraacute la etiqueta ltBODYgt En su lugar se incluiraacute la etiqueta ltFRAMESETgt ltFRAMESETgt dentro de la cual se definiraacuten las distintas frames que se incluyan en el documento

La estructura general de un documento de este tipo seriacutea por tanto

ltHTMLgtltHEADgtCabeceraltHEADgtltFRAMESETgt

Definicioacuten de la distintas framesltFRAMESETgtltNOFRAMESgt

Instrucciones HTMLltNOFRAMESgt

ltHTMLgt

Lenguaje HTML copy Grupo EIDOS

52

Puede darse el caso de que programemos nuestro documento con frames siguiendo la estructura anterior y que el navegador que se use para leer el documento no soporte la caracteriacutestica de frames con lo cual no se mostraraacute nada de lo indicado entre las etiquetas ltFRAMESETgt y ltFRAMESETgtPara solucionar este problema todas las instrucciones HTML incluidas entre las etiquetas ltNOFRAMESgt y ltNOFRAMESgt seraacuten ejecutadas por los navegadores que no soportan las frames

La sintaxis de la etiqueta ltFRAMESETgt es

ltFRAMESET rows=Lista de filas cols=Lista de columnasgtltFRAME src=URL de la frame 1 name=Nombre de la frame 1gtltFRAME src=URL de la frame 2 name=Nombre de la frame 2gt

ltFRAME src=URL de la frame n name=Nombre de la frame ngt

ltFRAMESETgt

Como vemos por cada una de la frames que incluyamos en nuestro documento debemos incluir una etiqueta ltFRAMEgt indicando mediante sus argumentos la direccioacuten URL del documento que se insertaraacute en la subventana (src) y el nombre de la frame (name) Posteriormente describiremos la etiqueta ltFRAMEgt con maacutes detalle

Los argumentos de ltFRAMESETgt son rows y cols definieacutendose uacutenicamente uno de los dos atributos en funcioacuten de si la divisioacuten de la pantalla se realizaraacute por filas (rows) o por columnas (cols)

Por cada una de las subventanas que creemos debemos especificar su tamantildeo en puntos o en porcentaje del tamantildeo de cada subventana Asiacute por ejemplo si especificamos rows= 50 2525 crearemos tres subventanas horizontales ocupando la primera el 50 de la ventana principal y las otras dos el resto Si especificamos cols=100150 crearemos tres subventanas verticales ocupando la primera 100 puntos de la ventana principal la segunda 150 puntos y tercera el espacio restante

Vamos a verlo maacutes claramente con un par de ejemplos praacutecticos que vemos en la Tabla 54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 502525gt ltFRAMEsrc=Pagweb1htm name=Pagweb1gtltFRAMEsrc=Pagweb2htm name=Pagweb2gtltFRAMEsrc=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 24: Programacion web   lenguaje html

Lenguaje HTML copy Grupo EIDOS

28

ltLIgtElemento 1ltLIgtElemento 2

ltLIgtElemento n

ltOLgt

Con el atributo start vamos a especificar el nuacutemero por el que va a empezar la lista Si no indicamos este argumento la lista empezaraacute a numerarse a partir del 1 Con el atributo type vamos a especificar el tipo de lista numerada Sus posibles valores aparecen a continuacioacuten y veremos algunos ejemplos en la Tabla 21

A Letras mayuacutesculas (A B C )

a Letras minuacutesculas (a b c )

I Nuacutemeros romanos en mayuacutesculas (I II III IV )

i Nuacutemeros romanos en minuacutesculas (i ii iii iv )

1 Numeacutericamente (1 2 3 4 ) (es la numeracioacuten por defecto y por tanto no habriacutea que indicarla)

Ejemplo Resultado

ltOL type=AgtltLHgtLos cinco continentesltLHgtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltLIgtOceaniacutea

ltOLgt

Los cinco continentes

A Europa

B Asia

C Aacutefrica

D Ameacuterica

E Oceaniacutea

ltOL type=I start=2gtltLIgtEuropaltLIgtAsialtLIgtAacutefricaltLIgtAmeacutericaltOL type=i gt

ltLIgtAmeacuterica del NorteltLIgtAmeacuterica del Sur

ltOLgtltLIgtOceaniacutea

ltOLgt

II Europa

III Asia

IV Aacutefrica

V Ameacuterica

i Ameacuterica del Norte

ii Ameacuterica del Sur

VI Oceaniacutea

Tabla 21

copy Grupo EIDOS 3 Elementos del lenguaje I

29

Listas de definiciones ltDLgt DL Definition List

Estas listas nos van a servir para especificar una serie de teacuterminos y sus definiciones correspondientes Para la definicioacuten de la lista usaremos la etiqueta ltDLgt ltDLgt para especificar los teacuterminos usaremos la etiqueta ltDTgt y para especificar la definicioacuten correspondiente a cada teacutermino usaremos la etiqueta ltDDgt El formato es el siguiente

ltDLgtltLHgtTiacutetulo de la listaltLHgtltDTgtTeacutermino 1ltDDgtDefinicioacuten 1ltDTgtTeacutermino 2ltDDgtDefinicioacuten 2

ltDTgtTeacutermino nltDDgtDefinicioacuten n

ltDLgtDT Definition Term DD Definition Description

Vamos a ver un ejemplo en la Tabla 22

Ejemplo Resultado

ltDLgtltDTgtPariacutesltDDgtCapital de FrancialtDTgtRomaltDDgtCapital de ItalialtDTgtMadridltDDgtCapital de Espantildea

ltDLgt

Pariacutes

Capital de Francia

Roma

Capital de Italia

Madrid

Capital de Espantildea

Tabla 22

Hiperenlaces Los hiperenlaces son enlaces de hipertexto que nos van a permitir acceder de manera directa a otros documentos HTML independientemente de su ubicacioacuten o a otras zonas dentro de nuestro propio documento

Enlaces a otras paacuteginas ltA href=gt Con este tipo de hiperenlaces vamos a poder acceder tanto a otras paacuteginas que esteacuten ubicadas dentro de nuestro propio sistema como a paacuteginas ubicadas en puntos muy distantes del globo El formato de este tipo de hiperenlaces es

ltA href=URL a la que se accedegtTexto del hiperenlaceltAgt

Lenguaje HTML copy Grupo EIDOS

30

Con el atributo href vamos a especificar la URL del documento al que se pretende acceder El texto contenido entre las etiquetas de comienzo y fin nos va a servir para definir el hiperenlace por lo que deberiacutea ser clarificador del contenido del documento con el que vamos a enlazar Esta definicioacuten apareceraacute resaltada normalmente en azul y subrayada En la mayoriacutea de los navegadores esta definicioacuten del hiperenlace es sensible por lo que cuando el cursor pasa por encima del mismo este cambia de aspecto indicaacutendolo

Veamos un ejemplo en la Tabla 23

Ejemplo Resultado

ltA href=httpwwweidosesgtPaacutegina inicialde Villa EidosltAgt

Paacutegina inicial de Villa Eidos

Tabla 23

Si situamos el ratoacuten encima del hiperenlace y pulsamos el navegador accederaacute a la paacutegina Web indicada por href es decir accederaacute a la paacutegina situada en httpwwweidoses

Igualmente podriacuteamos indicar el hiperenlace por medio de una imagen Si esta imagen tiene definido un borde este apareceraacute resaltado en color azul El formato correspondiente seriacutea

ltA href=URL a la que se accedegtltIMG src=Imagengt y tambieacutentextoltAgtIMG Image src Source

Veamos un ejemplo en la Tabla 24

Ejemplo Resultado

ltA href=httpwwweidosesgtltIMGsrc=IconogifgtltAgt Villa Eidos Villa Eidos

Tabla 24

Si pulsamos sobre la imagen el navegador accederaacute a la paacutegina Web inicial de Villa Eidos

Enlaces dentro de la misma paacutegina ltA name=gt Este tipo de hiperenlaces nos va a permitir marcar distintas zonas del documento activo con el objeto de tener un acceso directo a las mismas Una buena utilidad de este tipo de enlaces radica en la creacioacuten de iacutendices para documentos largos de forma que si pinchamos en el hiperenlace correspondiente al tiacutetulo de un capiacutetulo determinado el navegador saltaraacute automaacuteticamente hasta el comienzo de dicho capiacutetulo

Para la creacioacuten de estos hiperenlaces debemos seguir dos pasos

copy Grupo EIDOS 3 Elementos del lenguaje I

31

1 Marcar las distintas zonas o secciones del documento Esto lo haremos con el paraacutemetro name

ltA name=Identificador de seccioacutengtTexto de laseccioacutenltAgt

A cada seccioacuten le asignaremos un identificador distinto para poder referenciarlas posteriormente de manera inequiacutevoca

2 Especificar un enlace a cada una de las secciones que hayamos definido ltA href=Identificador de seccioacutengtTexto del enlace a laseccioacutenltAgt

Si pinchamos en este enlace el navegador saltaraacute automaacuteticamente a la seccioacuten correspondiente Veamos un ejemplo sencillito en la Tabla 25 pero demostrativo de todo lo que acabamos de explicar

Ejemplo Resultado

ltA href=Cap1gtCapiacutetulo1ltAgtltA name=Cap1gtCapiacutetulo 1ltAgt

Capiacutetulo 1

Capiacutetulo 1

Tabla 25

Si nos creamos una paacutegina HTML con distintos capiacutetulos podriacuteamos crear una seccioacuten para cada uno de ellos de forma que si pinchamos en el hiperenlace correspondiente al Capiacutetulo 1 el navegador saltariacutea directamente a la seccioacuten correspondiente al Capiacutetulo 1

Ademaacutes de los dos tipos de hiperenlaces vistos podemos crear hiperenlaces que nos permitan acceder a cualquiera de los servicios de Internet Es decir podriacuteamos indicar enlaces a servidores FTP GOPHER NEWS MAILTO etc Para ello tendriacuteamos que indicar la URL correspondiente al servicio al cual queremos acceder como ya vimos en el primer capiacutetulo de este manual

Imaacutegenes

Podremos dar un aspecto mucho maacutes vistoso a nuestros documentos HTML con la inclusioacuten de imaacutegenes Los formatos de imagen que todos los navegadores reconocen son gif y jpg Si queremos insertar una imagen en otro formato el visor deberiacutea disponer del programa externo que permita su visualizacioacuten De todas formas una buena solucioacuten es utilizar alguacuten programa de tratamiento de imaacutegenes que nos convierta la imagen a uno de los formatos mencionados anteriormente

El formato gif es maacutes recomendado para la inclusioacuten de iconos graacuteficas y el formato jpg para el caso de insertar fotografiacuteas en nuestras paacuteginas

Lenguaje HTML copy Grupo EIDOS

32

La etiqueta que nos va a permitir la insercioacuten de imaacutegenes es ltIMGgt La imagen se insertaraacute justo en el punto del documento donde coloquemos dicha etiqueta pudiendo insertar imaacutegenes dentro de listas tablas o formularios

El formato de la etiqueta con sus posibles argumentos es el siguiente

ltIMG src=URL de la imagen alt=Texto alternativoalign=topmiddlebottonleftrigth border=Tamantildeoheight=Tamantildeo width=Tamantildeo hspace=margen vspace=margengt

bull src=URL de la imagen El atributo src nos va servir para indicar la URL de la imagen que

queremos insertar es decir el servidor y camino hasta llegar al fichero de la imagen

No seraacute necesario que la imagen que queremos insertar en nuestro documento esteacute en el ordenador local aunque siacute es recomendable ya que el acceso a las mismas puede ser maacutes lento

Por tanto es una buena praacutectica copiar todas las imaacutegenes que vayamos a incluir en nuestro documento HTML al ordenador local

Tabla 26

bull alt=Texto alternativo Nos va a permitir mostrar un texto alternativo para el caso en que el

navegador no sea capaz de mostrar la imagen Su uso es muy recomendable ya que cuando publiquemos nuestras paacuteginas en la WWW no sabremos desde queacute tipo de navegadores accederaacuten los internautas a nuestras paacuteginas

En la Tabla 27 vamos a ver un ejemplo

Si usas un navegador que no tiene ninguacuten problema para la visualizacioacuten de imaacutegenes desactiva temporalmente la opcioacuten de mostrar imaacutegenes prueba el ejemplo que muestra la Tabla 27 y compaacuteralo con el anterior

Tabla 27

copy Grupo EIDOS 3 Elementos del lenguaje I

33

bull align=topmiddlebotton leftrigth Nos permite indicar coacutemo se alinearaacute el texto que siga a la imagen

top alinea el texto con la parte superior de la imagen

middle con la parte central

bottom con la parte inferior

left imagen alineada a la izquierda de la paacutegina

rigth imagen alineada a la derecha de la paacutegina

Tabla 28

En el caso de que el texto que acompantildea a la imagen tenga maacutes de una liacutenea tan soacutelo la primera seraacute la que se alinearaacute seguacuten alguna de las anteriores alineaciones el resto de liacuteneas se incluiraacuten debajo de la imagen quedando un efecto bastante feo

Para solventar esto estaacuten las alineaciones LEFT (imagen alineada a la izquierda de la paacutegina) y RIGHT (imagen alineada a la derecha de la paacutegina) Las cuales permiten que la imagen se inserte dentro del paacuterrafo que la rodea produciendo un resultado mucho maacutes profesional en la integracioacuten de texto e imaacutegenes

Estas dos alineaciones no se podraacuten usar en combinacioacuten con las anteriores Veamos algunos ejemplos en la Tabla 29

Vemos como en el primer ejemplo la segunda liacutenea de texto aparece debajo de la imagen produciendo un efecto menos vistoso que en los dos ejemplos siguientes

Lenguaje HTML copy Grupo EIDOS

34

Tabla 29

bull border=Tamantildeo Permite antildeadirle un borde a la imagen del tamantildeo que le

especifiquemos

Si la imagen forma parte de un hiperenlace esta apareceraacute con un borde del color del hiperenlace Si no deseaacuteramos que aparezca este borde tendriacuteamos que especificar border=0

Tabla 30

bull height=Tamantildeo Permite especificar el alto de la imagen en puntos de pantalla

(pixels) o en del tamantildeo del documento

bull width=Tamantildeo Con este argumento especificaremos el ancho al que mostraremos la imagen en puntos de pantalla (pixels) o en del tamantildeo del documento

En el segundo de los ejemplos de la Tabla 31 el ancho de la imagen se ha extendido al 50 del total del ancho de la celda donde estaacute contenida la imagen Si pruebas este ejemplo en tu documento HTML la imagen se extenderaacute horizontalmente hasta ocupar el 50 del ancho de la paacutegina

copy Grupo EIDOS 3 Elementos del lenguaje I

35

Tabla 31

bull hspace=Margen hspace Horizontal Space Permite especificar el nuacutemero de espacios

horizontales (en puntos) que separaraacuten a la imagen de cualquier elemento que le siga o le anteceda

bull vspace=Margen vspace Vertical Space Con este argumento especificaremos el margen vertical (en puntos) que habraacute entre la imagen y cualquier otro elemento de nuestro documento

Tabla 32

Elementos del lenguaje II

Tablas HTML nos va a permitir la inclusioacuten de cualquiera de los elementos de nuestra paacutegina (texto imaacutegenes hiperenlaces listas etc) dentro de una tabla Gracias a lo cual conseguiremos dar una mayor y mejor estructuracioacuten a los contenidos de nuestros documentos Ademaacutes la definicioacuten de las tablas en HTML es muy abierta pudiendo en cualquier momento redimensionar la tabla es decir cambiar su nuacutemero de filas o de columnas cambiar el tamantildeo de alguna de sus celdas etc

La etiqueta que nos va a permitir la definicioacuten de tablas es ltTABLEgt ltTABLEgt

El formato general de la etiqueta sin ninguacuten argumento es el siguiente

ltTABLEgtltTR gt

ltTHgtContenido de la celda ltTHgtltTDgtContenido de la celda ltTDgt

ltTRgtltTABLEgt

TR Table Row TH Table Header TD Table Data

Vamos a analizar cada una de estas etiquetas de forma separada

1 ltTABLEgt ltTABLEgt Definicioacuten general de la tabla Dentro de ella definiremos las filas y columnas que la constituyen pudiendo incluso definir tablas dentro de tablas es decir tablas anidadas

Lenguaje HTML copy Grupo EIDOS

38

2 ltTRgt ltTRgt Definicioacuten de las filas de la tabla Por cada etiqueta ltTRgt que incluyamos se crearaacute una fila en la tabla No seraacute necesario indicar la etiqueta de cierre

3 ltTHgtltTHgt oacute ltTDgtltTDgt Definicioacuten de cada una de las celdas de la tabla Vemos que estas etiquetas estaacuten contenidas dentro de otra etiqueta de definicioacuten de fila de forma que por cada etiqueta ltTHgt o ltTDgt que incluyamos se crearaacute una celda dentro de la fila correspondiente La etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera es decir celdas cuyo contenido estaacute resaltado en negrita dejando la etiqueta ltTDgt para definir celdas de datos En este caso tampoco es necesario indicar las etiquetas de cierre

Todas estas etiquetas tienen sus respectivos argumentos Pero antes de analizar cada uno de ellos vamos a ver un ejemplo muy sencillito en la Tabla 33 que nos crearaacute una tabla de una sola celda (1 fila X 1 columna = 1 celda) Para ello usaremos la etiqueta de creacioacuten de tabla ltTABLEgt con el argumento border=1 (nos dibuja un borde de tamantildeo 1 alrededor de la tabla)

Ejemplo Resultado

ltTABLE border=1gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 33

Vamos ahora a analizar lo distintos argumentos que componen las etiquetas de la tabla analizaacutendolos desde lo general (la definicioacuten de la tabla) hasta lo especiacutefico (la definicioacuten de las celdas)

1 Definicioacuten de la tabla ltTABLEgt

ltTABLE border=n cellpadding=n cellspacing=n width=n oacute height=n oacute bgcolor=rrggbb oacute nombre gt

Contenido ltTABLEgt

bull border=n Si especificamos este argumento se dibujaraacute un borde alrededor de la

tabla del ancho que le indiquemos como muestra la Tabla 34

Ejemplo Resultado

Mi primera tabla ltTABLE border=4gtltTRgtltTDgtMi primera tablaltTABLEgt

Tabla 34

bull cellpadding=n Indica el espacio en puntos que separa el contenido de la celda con

el borde de la misma siendo 1 por defecto

copy Grupo EIDOS 4 Elementos del lenguaje II

39

Ejemplo Resultado

ltTABLE border=4 cellpadding=8gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 35

bull cellspacing=n Indica el espacio en puntos que separa a las celdas contenidas dentro de la tabla siendo 2 por defecto

bull width=n oacute Indica la anchura de la tabla en puntos o en en funcioacuten del ancho de la ventana del visualizador Si no indicamos este argumento el ancho de la tabla se ajustaraacute al tamantildeo del contenido de las celdas Esto es lo que ha ocurrido en el uacuteltimo ejemplo que hemos realizado Veamos un ejemplo en el Coacutedigo fuente 11 El resultado se muestra en la Tabla 36

ltTABLE border=4 width=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 11

Mi primera tabla

Tabla 36

bull height=n oacute Nos permite definir la altura de la tabla en puntos o en de la

altura de la ventana del visualizador Si indicamos este argumento lo recomendable es darlo en puntos ya que es maacutes complicado adecuarnos a la altura de la ventana del visualizador Al igual que en el caso anterior si no especificamos este argumento la altura se adecuaraacute al contenido de las celdas El Coacutedigo fuente 12 muestra un ejemplo y la Tabla 37 nos muestra el resultado

ltTABLE border=4 width=50 height=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 12

Mi primera tabla

Tabla 37

bull bgcolor= rrggbb o nombre del color Nos permite definir un color

de fondo para todas las celdas de la tabla Maacutes adelante veremos como podemos definir colores especiacuteficos para cada una de las celdas por separado

Lenguaje HTML copy Grupo EIDOS

40

Ejemplo Resultado

ltTABLE border=4 bgcolor=yellowgtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 38

2 Definicioacuten de las filas de la tabla ltTRgt

ltTR align=leftrightcenter valign=topmiddlebottombgcolor=rrggbb oacute nombregt

Antes de empezar a descifrar el significado de cada uno de los argumentos de esta etiqueta vamos a ver un ejemplo en la Tabla 39 de coacutemo se construiriacutea una tabla con dos filas (2 filas X 1 columna = 2 celdas)

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR gtltTDgtPrimera filaltTRgtltTDgtSegunda filaltTABLEgt

Segunda fila

Tabla 39

bull align=leftrightcenter Con este argumento vamos a indicar la alineacioacuten

horizontal (leftizquierda rightderecha centercentrado) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado Veamos un ejemplo en el Coacutedigo fuente 13 y su correspondiente resultado en la Tabla 40

ltTABLE border=4 width=50 gt ltTRgtltTDgtPrimera filaltTRalign=rightgtltTDgtSegunda filaltTABLEgt

Coacutedigo fuente 13

Primera fila

Segunda fila

Tabla 40

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten

vertical (toparriba middlecentrado bottomabajo) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado

copy Grupo EIDOS 4 Elementos del lenguaje II

41

bull bgcolor= rrggbb o nombre del color En este caso este argumento nos permitiraacute definir un color de fondo para todas las celdas de una fila veamos un ejemplo en la

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR bgcolor=yellowgtltTDgtPrimera

filaltTR bgcolor=greengtltTDgtSegunda

filaltTABLEgt

Segunda fila

Tabla 41

3 Definicioacuten de las celdas de la tabla ltTHgt oacute ltTDgt

ltTH oacute TD align=leftrightcenterjustifyvalign=topmiddlebottom bgcolor=rrggbb oacute nombre width=nrowspan=n colspan=ngt

Como ya explicamos anteriormente la etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera y la etiqueta ltTDgt para la creacioacuten de celdas de datos Vamos a completar nuestro ejemplo inicial antildeadieacutendole tres filas de dos celdas cada una (3 filas X 2 columnas = 6 celdas) Tabla 42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTDgtCelda 21ltTDgtCelda 22

ltTABLEgt Celda 21 Celda 22

Tabla 42

bull align=leftrightcenterjustify Con este argumento vamos a indicar la

alineacioacuten horizontal (left izquierda right derecha center centrado justifyjustificado) del contenido de cada celda por separado Su significado es el mismo que en la etiqueta ltTRgt

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten vertical (toparriba middlecentrado bottomabajo) del contenido de cada celda

bull bgcolor= rrggbb o nombre del color En este caso podremos definir un color de fondo para cada una de las celdas de manera independiente

bull width=n oacute Indica el ancho de la celda en puntos o en en funcioacuten del tamantildeo de la tabla

Lenguaje HTML copy Grupo EIDOS

42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera

1ltTHgtCabecera 2ltTR gtltTD align=rightgtCelda

11ltTD bgcolor=redgtCelda 12ltTRgtltTD

bgcolor=yellowgtCelda 21ltTDalign=centergtCelda 22ltTABLEgt

Celda 21 Celda 22

Tabla 43

bull rowspan=n Con este argumento podemos lograr que una celda concreta abarque maacutes de una fila ya sabemos que por defecto una celda ocupa una sola fila

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTD rowspan=2gtCelda

11ltTDgtCelda 12ltTRgtltTDgtCelda 22

ltTABLEgt

Celda 11 Celda 22

Tabla 44

bull colspan=n Con este argumento podemos lograr que una celda se expanda a maacutes

de una columna

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTD colspan=2

align=centergtCelda 22ltTABLEgt

Celda 22

Tabla 45

Para finalizar este tema sobre la creacioacuten de tablas vamos a ver el ejemplo que aparece en el Coacutedigo fuente 14 y su resultado en la Tabla 46

ltTABLE border=4gtltTR gtltTH colspan=3 bgcolor=redgtTiacutetuloltTR bgcolor=yellowgtltTHgtCabecera 1ltTHgtCabecera 2ltTHgtCabecera 3

copy Grupo EIDOS 4 Elementos del lenguaje II

43

ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTDgtCelda 13ltTRgtltTD rowspan=2gtCelda 21ltTD bgcolor=greengtCelda 22ltTDgtCelda 23ltTRgtltTDgtCelda 32ltTDgtCelda 33

ltTABLEgt

Coacutedigo fuente 14

Tiacutetulo

Cabecera 1 Cabecera 2 Cabecera 3

Celda 11 Celda 12 Celda 13

Celda 22 Celda 23 Celda 21

Celda 32 Celda 33

Tabla 46

Formularios El formulario es el elemento de HTML que nos va a permitir interactuar con los visitantes de nuestras paacuteginas web de forma que podemos solicitarle informacioacuten al usuario y procesarla De esta forma podremos crear en nuestras paacuteginas encuestas para solicitar la opinioacuten del visitante sobre alguacuten tema e incluso sobre el contenido de nuestra propia paacutegina web cuestionarios para evaluar la asimilacioacuten de contenidos sobre un tema concreto que se trate en la paacutegina etc

El contenido de la informacioacuten introducida por medio del formulario seraacute enviado a la direccioacuten URL donde resida el programa que se encargaraacute de procesar los datos A este tipo de programas externos se les denomina programas CGI (Common Gateway Interface)

La etiqueta HTML que nos va a permitir la creacioacuten de formularios es ltFORMgt Su formato es el siguiente

ltFORM action=URL del programa que trata el formulariomethod=postgetgt Elementos del formulario ltFORMgt

bull action=URL del programa que trata el formulario A traveacutes de este

argumento indicaremos como ya hemos mencionado la direccioacuten del fichero de programa que va a tratar la informacioacuten suministrada por el formulario

Tambieacuten podriacuteamos incluir como URL que trata el formulario una direccioacuten de correo electroacutenico Por tanto el valor de este argumento podriacutea ser action =mailto direccioacuten de correo

Nota Esta opcioacuten soacutelo funciona adecuadamente con el navegador Netscape Con el Explorer este enviacuteo dariacutea como resultado un correo en blanco Para que esta opcioacuten funcione de manera independiente del navegador que se esteacute utilizando se ha de emplear un programa externo que realice este proceso

Lenguaje HTML copy Grupo EIDOS

44

bull method=postget A traveacutes de este argumento indicaremos el meacutetodo empleado para transferir la informacioacuten generada por el formulario

Si indicamos post se produciraacute la modificacioacuten del documento destino como es el caso de enviar la informacioacuten a una direccioacuten de correo electroacutenico Mediante el meacutetodo get no se produciraacuten cambios en el documento destino

Dentro de un formulario podremos incluir cualquier texto o instruccioacuten HTML de las vistas a lo largo de los capiacutetulos anteriores ademaacutes claro estaacute de los elementos tiacutepicos de un formulario cajas de texto botones de seleccioacuten menuacutes de opciones etc Vamos a ver coacutemo se incluiraacuten estos elementos en un formulario

Entrada baacutesica de datos Para definir los distintos tipos de campos baacutesicos de entrada de datos usaremos la etiqueta ltINPUTgt

El formato es el siguiente

ltINPUT type= text password checkbox radio hidden submit image reset name=Variable value=Valor inicialgt

bull El argumento type determinaraacute el tipo de campo de entrada que estamos insertando A

continuacioacuten describiremos cada uno de ellos

bull El argumento name especifica el nombre de la variable que tomaraacute el valor introducido en el campo

bull El argumento value especifica el valor por defecto que tendraacute el campo

Vamos a continuacioacuten a describir los distintos tipos campos de entrada que vendraacuten dados por los valores del argumento type

Texto corto type=text

Con este argumento vamos a indicar que el campo a introducir seraacute un texto El formato seriacutea

ltINPUT type= text name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los nuevos atributos es

bull size=Tamantildeo Indicaremos el tamantildeo en caracteres de la ventana de introduccioacuten de texto

bull maxlength=Longitud maacutexima Indicaremos el nuacutemero maacuteximo de caracteres a introducir en el campo

Vamos a ver un ejemplo en la Tabla 47

copy Grupo EIDOS 4 Elementos del lenguaje II

45

Ejemplo Resultado

NombreltINPUT type=text name=Var1Value=Texto por defecto size=20 maxlength=25gt

Tabla 47

Claves type=password

Con este argumento indicamos que el campo a introducir seraacute una palabra clave por lo que los caracteres que se introduzcan seraacuten sustituidos por asteriscos en la visualizacioacuten por pantalla El formato es

ltINPUT type= password name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los distintos argumentos es el mismo que en el caso anterior Veamos un ejemplo en la Tabla 48

Ejemplo Resultado

ClaveltINPUT type=password name=Var2Value=tutankamon size=11 maxlength=10gt

Tabla 48

Botones de seleccioacuten type=checkbox

El checkbox es un botoacuten que presenta dos estados marcado (1) y desmarcado (0) Podremos variar su estado simplemente pinchando con el ratoacuten El formato es

ltINPUT type= checkbox name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto

Si incluimos el argumento value cuando el botoacuten esteacute marcado su variable asociada adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 49

Ejemplo Resultado

ltINPUT type=checkbox name=Var3 value=Op1 checkedgtOpcioacuten1 ltbrgtltINPUT type=checkbox name=Var4 value=Op2gt Opcioacuten 2

Tabla 49

Lenguaje HTML copy Grupo EIDOS

46

Seleccioacuten entre varias opciones type=radio

Este argumento se usa cuando hay que hacer una seleccioacuten entre varias alternativas excluyentes pudieacutendose seleccionar uacutenicamente una de las alternativas Debemos incluir una etiqueta radio por cada una de las posibles alternativas El formato es

ltINPUT type= radio name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto En este caso uacutenicamente uno de los botones de radio podraacute aparecer marcado ya que se usa para el caso de opciones excluyentes

Cuando un botoacuten esteacute seleccionado la variable asociada a la lista de botones adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 50

Ejemplo Resultado

ltINPUT type=radio name=Var5 value=Op1gtOpcioacuten1 ltbrgtltINPUT type=radio name=Var5 value=Op2checkedgt Opcioacuten 2 ltbrgtltINPUT type=radio name=Var5 value=Op3 gtOpcioacuten 3

Tabla 50

En este ejemplo la variable Var5 tendraacute el valor Op2

Campos ocultos type=hidden

Este tipo de campos no son visibles para el usuario Su uso tiene sentido en el caso de enviar alguacuten tipo de informacioacuten que no deba ser visualizada o variada por el lector de nuestra paacutegina Web El formato es

ltINPUT type= hidden name=Variable value=Valor gt

Con esta etiqueta asignariacuteamos a la Variable referenciada por name el Valor de value y se mandariacutea junto con el formulario sin que el usuario de la paacutegina se entere de nada Veamos un ejemplo en el Coacutedigo fuente 15

ltINPUT type=hidden name=Var6 value=tutankamongt

Coacutedigo fuente 15

copy Grupo EIDOS 4 Elementos del lenguaje II

47

Botoacuten de enviacuteo de datos type=submit

Con este argumento especificamos un botoacuten en el que al pulsar los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario El formato es

ltINPUT type= submit value=Mensaje a mostrargt

En este caso el paraacutemetro value indica el mensaje que se mostraraacute en el botoacuten Veamos un ejemplo en la Tabla 51

Ejemplo Resultado

ltINPUT type=submit value=Enviar los Datosgt

Tabla 51

Botoacuten graacutefico de enviacuteo de datos type=image

Con este argumento especificamos un botoacuten de tipo imagen en el que al igual que con el botoacuten anterior si pulsamos en la imagen los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario Su formato es el siguiente

ltINPUT type= image src=URL de la imagen name=Variablegt

Con el paraacutemetro src especificamos la URL de la imagen que seraacute insertada en el botoacuten En este caso en la variable referenciada por name se almacenaraacuten las coordenadas del punto de la imagen donde se halla pinchado (de forma que estas coordenadas podriacutean ser procesadas por el programa que recibe los datos del formulario)

Botoacuten de borrado de datos type=reset

Con este argumento especificamos un botoacuten que al ser pulsado borraraacute el contenido actual de todos los campos dejaacutendolos con sus valores por defecto Su formato es

ltINPUT type= reset value=Texto del botoacutengt

Con el paraacutemetro value especificamos el texto que etiquetaraacute al botoacuten

Ejemplo Resultado

ltINPUT type=reset value=Borrar datosgt

Tabla 52

Lenguaje HTML copy Grupo EIDOS

48

Entrada datos en muacuteltiples liacuteneas En un formulario tambieacuten podremos introducir un campo de texto que abarque varias liacuteneas Para ello usaremos la etiqueta ltTEXTAREAgt ltTEXTAREAgt Su formato es el siguiente

ltTEXTAREA name=Variable rows=Filas cols=ColumnasgtContenido por defectoltTEXTAREAgt

Los argumentos rows y cols nos van a permitir especificar respectivamente el nuacutemero de filas de texto visibles y el nuacutemero de columnas de texto visibles en el campo

Ejemplo Resultado

ltTEXTAREA name=Var7 rows=5 cols=40gtContenido por defectoltTEXTAREAgt

Tabla 53

Entrada de datos a traveacutes de campos de seleccioacuten Con los campos de seleccioacuten podremos desplegar una lista de opciones entre las que podremos seleccionar una Para ello usaremos la etiqueta ltSELECTgt ltSELECTgt Su formato es el siguiente

ltSELECT name=Variable multiple size=ngtltOPTION selected value=Valor_1gtPrimera OpcioacutenltOPTION value=Valor_2gtSegunda Opcioacuten

ltOPTION value=Valor_ngtEneacutesima Opcioacuten

ltSELECTgt

Figura 1

bull La variable referenciada por name tomaraacute el valor(value) de la opcioacuten seleccionada

bull Si especificamos el argumento muacuteltiple se mostraraacuten todas la opciones en forma de tabla El nuacutemero de opciones visibles en la tabla vendraacute dado por el argumento size

copy Grupo EIDOS 4 Elementos del lenguaje II

49

bull Con la etiqueta ltOPTIONgt iremos definiendo cada una de las opciones de la lista

bull El argumento selected va a determinar cuaacutel es la opcioacuten por defecto

Para finalizar vamos a ver el Coacutedigo fuente 16 correspondiente a una encuesta realizada por la editorial ficticia EditoPc y en la Figura 2 observamos el resultado del formulario

ltP align=centergtltBgtEDITORIAL ltIgtEditoPcltIgtltBgtltPgtltFORM action=mailtodireccionejemplo method = postgtNombreltINPUT type=text size=30 name=nombregtltBRgtE_mail ltINPUT type=text size=30 name=e_mailgtltPgtDeseas recibir informacioacuten sobreltINPUT type=checkbox name=infor1 value=InternetgtInternetltINPUT type=checkbox name=infor2 value=ProgramacioacutengtProgramacioacutenltINPUT type=checkbox name=infor3 value=SistOperativogtSistOperativoltINPUT type=checkbox name=infor4 value=OfimaacuteticagtOfimaacuteticaltPgtiquestTe conectas a Internet desde casa ltbrgtltINPUT type=radio name=intercasa value=sigtSiacuteltINPUT type=radio name=intercasa value=nogtNoltPgtiquestQueacute uso le das a tu ordenador ltBRgtltSELECT name=uso multiple size=3gtltOPTION selectedgtProfesionalltOPTIONgtDomeacutesticoltOPTIONgtOcioJuegosltSELECTgtltPgtCaracteriacutesticas de tu PCltBRgtltTEXTAREA name=caract rows=5 cols=40gtltTEXTAREAgtltPgtltINPUT type=submit value=Enviar datosgt ltINPUT type=reset value=Borrardatosgt

Coacutedigo fuente 16

Figura 2

Elementos del lenguaje III

Frames Las frames son una utilidad del HTML que nos permite dividir la ventana del navegador en diferentes subventanas que podraacuten ser manipuladas de manera independiente Esto nos permitiraacute mostrar una paacutegina web diferente en cada una de la subventanas o frames

Estructura de un documento con frames Un documento con frames se estructura de manera diferente a un documento HTML normal Asiacute en este tipo de documentos no apareceraacute la etiqueta ltBODYgt En su lugar se incluiraacute la etiqueta ltFRAMESETgt ltFRAMESETgt dentro de la cual se definiraacuten las distintas frames que se incluyan en el documento

La estructura general de un documento de este tipo seriacutea por tanto

ltHTMLgtltHEADgtCabeceraltHEADgtltFRAMESETgt

Definicioacuten de la distintas framesltFRAMESETgtltNOFRAMESgt

Instrucciones HTMLltNOFRAMESgt

ltHTMLgt

Lenguaje HTML copy Grupo EIDOS

52

Puede darse el caso de que programemos nuestro documento con frames siguiendo la estructura anterior y que el navegador que se use para leer el documento no soporte la caracteriacutestica de frames con lo cual no se mostraraacute nada de lo indicado entre las etiquetas ltFRAMESETgt y ltFRAMESETgtPara solucionar este problema todas las instrucciones HTML incluidas entre las etiquetas ltNOFRAMESgt y ltNOFRAMESgt seraacuten ejecutadas por los navegadores que no soportan las frames

La sintaxis de la etiqueta ltFRAMESETgt es

ltFRAMESET rows=Lista de filas cols=Lista de columnasgtltFRAME src=URL de la frame 1 name=Nombre de la frame 1gtltFRAME src=URL de la frame 2 name=Nombre de la frame 2gt

ltFRAME src=URL de la frame n name=Nombre de la frame ngt

ltFRAMESETgt

Como vemos por cada una de la frames que incluyamos en nuestro documento debemos incluir una etiqueta ltFRAMEgt indicando mediante sus argumentos la direccioacuten URL del documento que se insertaraacute en la subventana (src) y el nombre de la frame (name) Posteriormente describiremos la etiqueta ltFRAMEgt con maacutes detalle

Los argumentos de ltFRAMESETgt son rows y cols definieacutendose uacutenicamente uno de los dos atributos en funcioacuten de si la divisioacuten de la pantalla se realizaraacute por filas (rows) o por columnas (cols)

Por cada una de las subventanas que creemos debemos especificar su tamantildeo en puntos o en porcentaje del tamantildeo de cada subventana Asiacute por ejemplo si especificamos rows= 50 2525 crearemos tres subventanas horizontales ocupando la primera el 50 de la ventana principal y las otras dos el resto Si especificamos cols=100150 crearemos tres subventanas verticales ocupando la primera 100 puntos de la ventana principal la segunda 150 puntos y tercera el espacio restante

Vamos a verlo maacutes claramente con un par de ejemplos praacutecticos que vemos en la Tabla 54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 502525gt ltFRAMEsrc=Pagweb1htm name=Pagweb1gtltFRAMEsrc=Pagweb2htm name=Pagweb2gtltFRAMEsrc=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 25: Programacion web   lenguaje html

copy Grupo EIDOS 3 Elementos del lenguaje I

29

Listas de definiciones ltDLgt DL Definition List

Estas listas nos van a servir para especificar una serie de teacuterminos y sus definiciones correspondientes Para la definicioacuten de la lista usaremos la etiqueta ltDLgt ltDLgt para especificar los teacuterminos usaremos la etiqueta ltDTgt y para especificar la definicioacuten correspondiente a cada teacutermino usaremos la etiqueta ltDDgt El formato es el siguiente

ltDLgtltLHgtTiacutetulo de la listaltLHgtltDTgtTeacutermino 1ltDDgtDefinicioacuten 1ltDTgtTeacutermino 2ltDDgtDefinicioacuten 2

ltDTgtTeacutermino nltDDgtDefinicioacuten n

ltDLgtDT Definition Term DD Definition Description

Vamos a ver un ejemplo en la Tabla 22

Ejemplo Resultado

ltDLgtltDTgtPariacutesltDDgtCapital de FrancialtDTgtRomaltDDgtCapital de ItalialtDTgtMadridltDDgtCapital de Espantildea

ltDLgt

Pariacutes

Capital de Francia

Roma

Capital de Italia

Madrid

Capital de Espantildea

Tabla 22

Hiperenlaces Los hiperenlaces son enlaces de hipertexto que nos van a permitir acceder de manera directa a otros documentos HTML independientemente de su ubicacioacuten o a otras zonas dentro de nuestro propio documento

Enlaces a otras paacuteginas ltA href=gt Con este tipo de hiperenlaces vamos a poder acceder tanto a otras paacuteginas que esteacuten ubicadas dentro de nuestro propio sistema como a paacuteginas ubicadas en puntos muy distantes del globo El formato de este tipo de hiperenlaces es

ltA href=URL a la que se accedegtTexto del hiperenlaceltAgt

Lenguaje HTML copy Grupo EIDOS

30

Con el atributo href vamos a especificar la URL del documento al que se pretende acceder El texto contenido entre las etiquetas de comienzo y fin nos va a servir para definir el hiperenlace por lo que deberiacutea ser clarificador del contenido del documento con el que vamos a enlazar Esta definicioacuten apareceraacute resaltada normalmente en azul y subrayada En la mayoriacutea de los navegadores esta definicioacuten del hiperenlace es sensible por lo que cuando el cursor pasa por encima del mismo este cambia de aspecto indicaacutendolo

Veamos un ejemplo en la Tabla 23

Ejemplo Resultado

ltA href=httpwwweidosesgtPaacutegina inicialde Villa EidosltAgt

Paacutegina inicial de Villa Eidos

Tabla 23

Si situamos el ratoacuten encima del hiperenlace y pulsamos el navegador accederaacute a la paacutegina Web indicada por href es decir accederaacute a la paacutegina situada en httpwwweidoses

Igualmente podriacuteamos indicar el hiperenlace por medio de una imagen Si esta imagen tiene definido un borde este apareceraacute resaltado en color azul El formato correspondiente seriacutea

ltA href=URL a la que se accedegtltIMG src=Imagengt y tambieacutentextoltAgtIMG Image src Source

Veamos un ejemplo en la Tabla 24

Ejemplo Resultado

ltA href=httpwwweidosesgtltIMGsrc=IconogifgtltAgt Villa Eidos Villa Eidos

Tabla 24

Si pulsamos sobre la imagen el navegador accederaacute a la paacutegina Web inicial de Villa Eidos

Enlaces dentro de la misma paacutegina ltA name=gt Este tipo de hiperenlaces nos va a permitir marcar distintas zonas del documento activo con el objeto de tener un acceso directo a las mismas Una buena utilidad de este tipo de enlaces radica en la creacioacuten de iacutendices para documentos largos de forma que si pinchamos en el hiperenlace correspondiente al tiacutetulo de un capiacutetulo determinado el navegador saltaraacute automaacuteticamente hasta el comienzo de dicho capiacutetulo

Para la creacioacuten de estos hiperenlaces debemos seguir dos pasos

copy Grupo EIDOS 3 Elementos del lenguaje I

31

1 Marcar las distintas zonas o secciones del documento Esto lo haremos con el paraacutemetro name

ltA name=Identificador de seccioacutengtTexto de laseccioacutenltAgt

A cada seccioacuten le asignaremos un identificador distinto para poder referenciarlas posteriormente de manera inequiacutevoca

2 Especificar un enlace a cada una de las secciones que hayamos definido ltA href=Identificador de seccioacutengtTexto del enlace a laseccioacutenltAgt

Si pinchamos en este enlace el navegador saltaraacute automaacuteticamente a la seccioacuten correspondiente Veamos un ejemplo sencillito en la Tabla 25 pero demostrativo de todo lo que acabamos de explicar

Ejemplo Resultado

ltA href=Cap1gtCapiacutetulo1ltAgtltA name=Cap1gtCapiacutetulo 1ltAgt

Capiacutetulo 1

Capiacutetulo 1

Tabla 25

Si nos creamos una paacutegina HTML con distintos capiacutetulos podriacuteamos crear una seccioacuten para cada uno de ellos de forma que si pinchamos en el hiperenlace correspondiente al Capiacutetulo 1 el navegador saltariacutea directamente a la seccioacuten correspondiente al Capiacutetulo 1

Ademaacutes de los dos tipos de hiperenlaces vistos podemos crear hiperenlaces que nos permitan acceder a cualquiera de los servicios de Internet Es decir podriacuteamos indicar enlaces a servidores FTP GOPHER NEWS MAILTO etc Para ello tendriacuteamos que indicar la URL correspondiente al servicio al cual queremos acceder como ya vimos en el primer capiacutetulo de este manual

Imaacutegenes

Podremos dar un aspecto mucho maacutes vistoso a nuestros documentos HTML con la inclusioacuten de imaacutegenes Los formatos de imagen que todos los navegadores reconocen son gif y jpg Si queremos insertar una imagen en otro formato el visor deberiacutea disponer del programa externo que permita su visualizacioacuten De todas formas una buena solucioacuten es utilizar alguacuten programa de tratamiento de imaacutegenes que nos convierta la imagen a uno de los formatos mencionados anteriormente

El formato gif es maacutes recomendado para la inclusioacuten de iconos graacuteficas y el formato jpg para el caso de insertar fotografiacuteas en nuestras paacuteginas

Lenguaje HTML copy Grupo EIDOS

32

La etiqueta que nos va a permitir la insercioacuten de imaacutegenes es ltIMGgt La imagen se insertaraacute justo en el punto del documento donde coloquemos dicha etiqueta pudiendo insertar imaacutegenes dentro de listas tablas o formularios

El formato de la etiqueta con sus posibles argumentos es el siguiente

ltIMG src=URL de la imagen alt=Texto alternativoalign=topmiddlebottonleftrigth border=Tamantildeoheight=Tamantildeo width=Tamantildeo hspace=margen vspace=margengt

bull src=URL de la imagen El atributo src nos va servir para indicar la URL de la imagen que

queremos insertar es decir el servidor y camino hasta llegar al fichero de la imagen

No seraacute necesario que la imagen que queremos insertar en nuestro documento esteacute en el ordenador local aunque siacute es recomendable ya que el acceso a las mismas puede ser maacutes lento

Por tanto es una buena praacutectica copiar todas las imaacutegenes que vayamos a incluir en nuestro documento HTML al ordenador local

Tabla 26

bull alt=Texto alternativo Nos va a permitir mostrar un texto alternativo para el caso en que el

navegador no sea capaz de mostrar la imagen Su uso es muy recomendable ya que cuando publiquemos nuestras paacuteginas en la WWW no sabremos desde queacute tipo de navegadores accederaacuten los internautas a nuestras paacuteginas

En la Tabla 27 vamos a ver un ejemplo

Si usas un navegador que no tiene ninguacuten problema para la visualizacioacuten de imaacutegenes desactiva temporalmente la opcioacuten de mostrar imaacutegenes prueba el ejemplo que muestra la Tabla 27 y compaacuteralo con el anterior

Tabla 27

copy Grupo EIDOS 3 Elementos del lenguaje I

33

bull align=topmiddlebotton leftrigth Nos permite indicar coacutemo se alinearaacute el texto que siga a la imagen

top alinea el texto con la parte superior de la imagen

middle con la parte central

bottom con la parte inferior

left imagen alineada a la izquierda de la paacutegina

rigth imagen alineada a la derecha de la paacutegina

Tabla 28

En el caso de que el texto que acompantildea a la imagen tenga maacutes de una liacutenea tan soacutelo la primera seraacute la que se alinearaacute seguacuten alguna de las anteriores alineaciones el resto de liacuteneas se incluiraacuten debajo de la imagen quedando un efecto bastante feo

Para solventar esto estaacuten las alineaciones LEFT (imagen alineada a la izquierda de la paacutegina) y RIGHT (imagen alineada a la derecha de la paacutegina) Las cuales permiten que la imagen se inserte dentro del paacuterrafo que la rodea produciendo un resultado mucho maacutes profesional en la integracioacuten de texto e imaacutegenes

Estas dos alineaciones no se podraacuten usar en combinacioacuten con las anteriores Veamos algunos ejemplos en la Tabla 29

Vemos como en el primer ejemplo la segunda liacutenea de texto aparece debajo de la imagen produciendo un efecto menos vistoso que en los dos ejemplos siguientes

Lenguaje HTML copy Grupo EIDOS

34

Tabla 29

bull border=Tamantildeo Permite antildeadirle un borde a la imagen del tamantildeo que le

especifiquemos

Si la imagen forma parte de un hiperenlace esta apareceraacute con un borde del color del hiperenlace Si no deseaacuteramos que aparezca este borde tendriacuteamos que especificar border=0

Tabla 30

bull height=Tamantildeo Permite especificar el alto de la imagen en puntos de pantalla

(pixels) o en del tamantildeo del documento

bull width=Tamantildeo Con este argumento especificaremos el ancho al que mostraremos la imagen en puntos de pantalla (pixels) o en del tamantildeo del documento

En el segundo de los ejemplos de la Tabla 31 el ancho de la imagen se ha extendido al 50 del total del ancho de la celda donde estaacute contenida la imagen Si pruebas este ejemplo en tu documento HTML la imagen se extenderaacute horizontalmente hasta ocupar el 50 del ancho de la paacutegina

copy Grupo EIDOS 3 Elementos del lenguaje I

35

Tabla 31

bull hspace=Margen hspace Horizontal Space Permite especificar el nuacutemero de espacios

horizontales (en puntos) que separaraacuten a la imagen de cualquier elemento que le siga o le anteceda

bull vspace=Margen vspace Vertical Space Con este argumento especificaremos el margen vertical (en puntos) que habraacute entre la imagen y cualquier otro elemento de nuestro documento

Tabla 32

Elementos del lenguaje II

Tablas HTML nos va a permitir la inclusioacuten de cualquiera de los elementos de nuestra paacutegina (texto imaacutegenes hiperenlaces listas etc) dentro de una tabla Gracias a lo cual conseguiremos dar una mayor y mejor estructuracioacuten a los contenidos de nuestros documentos Ademaacutes la definicioacuten de las tablas en HTML es muy abierta pudiendo en cualquier momento redimensionar la tabla es decir cambiar su nuacutemero de filas o de columnas cambiar el tamantildeo de alguna de sus celdas etc

La etiqueta que nos va a permitir la definicioacuten de tablas es ltTABLEgt ltTABLEgt

El formato general de la etiqueta sin ninguacuten argumento es el siguiente

ltTABLEgtltTR gt

ltTHgtContenido de la celda ltTHgtltTDgtContenido de la celda ltTDgt

ltTRgtltTABLEgt

TR Table Row TH Table Header TD Table Data

Vamos a analizar cada una de estas etiquetas de forma separada

1 ltTABLEgt ltTABLEgt Definicioacuten general de la tabla Dentro de ella definiremos las filas y columnas que la constituyen pudiendo incluso definir tablas dentro de tablas es decir tablas anidadas

Lenguaje HTML copy Grupo EIDOS

38

2 ltTRgt ltTRgt Definicioacuten de las filas de la tabla Por cada etiqueta ltTRgt que incluyamos se crearaacute una fila en la tabla No seraacute necesario indicar la etiqueta de cierre

3 ltTHgtltTHgt oacute ltTDgtltTDgt Definicioacuten de cada una de las celdas de la tabla Vemos que estas etiquetas estaacuten contenidas dentro de otra etiqueta de definicioacuten de fila de forma que por cada etiqueta ltTHgt o ltTDgt que incluyamos se crearaacute una celda dentro de la fila correspondiente La etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera es decir celdas cuyo contenido estaacute resaltado en negrita dejando la etiqueta ltTDgt para definir celdas de datos En este caso tampoco es necesario indicar las etiquetas de cierre

Todas estas etiquetas tienen sus respectivos argumentos Pero antes de analizar cada uno de ellos vamos a ver un ejemplo muy sencillito en la Tabla 33 que nos crearaacute una tabla de una sola celda (1 fila X 1 columna = 1 celda) Para ello usaremos la etiqueta de creacioacuten de tabla ltTABLEgt con el argumento border=1 (nos dibuja un borde de tamantildeo 1 alrededor de la tabla)

Ejemplo Resultado

ltTABLE border=1gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 33

Vamos ahora a analizar lo distintos argumentos que componen las etiquetas de la tabla analizaacutendolos desde lo general (la definicioacuten de la tabla) hasta lo especiacutefico (la definicioacuten de las celdas)

1 Definicioacuten de la tabla ltTABLEgt

ltTABLE border=n cellpadding=n cellspacing=n width=n oacute height=n oacute bgcolor=rrggbb oacute nombre gt

Contenido ltTABLEgt

bull border=n Si especificamos este argumento se dibujaraacute un borde alrededor de la

tabla del ancho que le indiquemos como muestra la Tabla 34

Ejemplo Resultado

Mi primera tabla ltTABLE border=4gtltTRgtltTDgtMi primera tablaltTABLEgt

Tabla 34

bull cellpadding=n Indica el espacio en puntos que separa el contenido de la celda con

el borde de la misma siendo 1 por defecto

copy Grupo EIDOS 4 Elementos del lenguaje II

39

Ejemplo Resultado

ltTABLE border=4 cellpadding=8gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 35

bull cellspacing=n Indica el espacio en puntos que separa a las celdas contenidas dentro de la tabla siendo 2 por defecto

bull width=n oacute Indica la anchura de la tabla en puntos o en en funcioacuten del ancho de la ventana del visualizador Si no indicamos este argumento el ancho de la tabla se ajustaraacute al tamantildeo del contenido de las celdas Esto es lo que ha ocurrido en el uacuteltimo ejemplo que hemos realizado Veamos un ejemplo en el Coacutedigo fuente 11 El resultado se muestra en la Tabla 36

ltTABLE border=4 width=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 11

Mi primera tabla

Tabla 36

bull height=n oacute Nos permite definir la altura de la tabla en puntos o en de la

altura de la ventana del visualizador Si indicamos este argumento lo recomendable es darlo en puntos ya que es maacutes complicado adecuarnos a la altura de la ventana del visualizador Al igual que en el caso anterior si no especificamos este argumento la altura se adecuaraacute al contenido de las celdas El Coacutedigo fuente 12 muestra un ejemplo y la Tabla 37 nos muestra el resultado

ltTABLE border=4 width=50 height=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 12

Mi primera tabla

Tabla 37

bull bgcolor= rrggbb o nombre del color Nos permite definir un color

de fondo para todas las celdas de la tabla Maacutes adelante veremos como podemos definir colores especiacuteficos para cada una de las celdas por separado

Lenguaje HTML copy Grupo EIDOS

40

Ejemplo Resultado

ltTABLE border=4 bgcolor=yellowgtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 38

2 Definicioacuten de las filas de la tabla ltTRgt

ltTR align=leftrightcenter valign=topmiddlebottombgcolor=rrggbb oacute nombregt

Antes de empezar a descifrar el significado de cada uno de los argumentos de esta etiqueta vamos a ver un ejemplo en la Tabla 39 de coacutemo se construiriacutea una tabla con dos filas (2 filas X 1 columna = 2 celdas)

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR gtltTDgtPrimera filaltTRgtltTDgtSegunda filaltTABLEgt

Segunda fila

Tabla 39

bull align=leftrightcenter Con este argumento vamos a indicar la alineacioacuten

horizontal (leftizquierda rightderecha centercentrado) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado Veamos un ejemplo en el Coacutedigo fuente 13 y su correspondiente resultado en la Tabla 40

ltTABLE border=4 width=50 gt ltTRgtltTDgtPrimera filaltTRalign=rightgtltTDgtSegunda filaltTABLEgt

Coacutedigo fuente 13

Primera fila

Segunda fila

Tabla 40

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten

vertical (toparriba middlecentrado bottomabajo) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado

copy Grupo EIDOS 4 Elementos del lenguaje II

41

bull bgcolor= rrggbb o nombre del color En este caso este argumento nos permitiraacute definir un color de fondo para todas las celdas de una fila veamos un ejemplo en la

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR bgcolor=yellowgtltTDgtPrimera

filaltTR bgcolor=greengtltTDgtSegunda

filaltTABLEgt

Segunda fila

Tabla 41

3 Definicioacuten de las celdas de la tabla ltTHgt oacute ltTDgt

ltTH oacute TD align=leftrightcenterjustifyvalign=topmiddlebottom bgcolor=rrggbb oacute nombre width=nrowspan=n colspan=ngt

Como ya explicamos anteriormente la etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera y la etiqueta ltTDgt para la creacioacuten de celdas de datos Vamos a completar nuestro ejemplo inicial antildeadieacutendole tres filas de dos celdas cada una (3 filas X 2 columnas = 6 celdas) Tabla 42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTDgtCelda 21ltTDgtCelda 22

ltTABLEgt Celda 21 Celda 22

Tabla 42

bull align=leftrightcenterjustify Con este argumento vamos a indicar la

alineacioacuten horizontal (left izquierda right derecha center centrado justifyjustificado) del contenido de cada celda por separado Su significado es el mismo que en la etiqueta ltTRgt

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten vertical (toparriba middlecentrado bottomabajo) del contenido de cada celda

bull bgcolor= rrggbb o nombre del color En este caso podremos definir un color de fondo para cada una de las celdas de manera independiente

bull width=n oacute Indica el ancho de la celda en puntos o en en funcioacuten del tamantildeo de la tabla

Lenguaje HTML copy Grupo EIDOS

42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera

1ltTHgtCabecera 2ltTR gtltTD align=rightgtCelda

11ltTD bgcolor=redgtCelda 12ltTRgtltTD

bgcolor=yellowgtCelda 21ltTDalign=centergtCelda 22ltTABLEgt

Celda 21 Celda 22

Tabla 43

bull rowspan=n Con este argumento podemos lograr que una celda concreta abarque maacutes de una fila ya sabemos que por defecto una celda ocupa una sola fila

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTD rowspan=2gtCelda

11ltTDgtCelda 12ltTRgtltTDgtCelda 22

ltTABLEgt

Celda 11 Celda 22

Tabla 44

bull colspan=n Con este argumento podemos lograr que una celda se expanda a maacutes

de una columna

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTD colspan=2

align=centergtCelda 22ltTABLEgt

Celda 22

Tabla 45

Para finalizar este tema sobre la creacioacuten de tablas vamos a ver el ejemplo que aparece en el Coacutedigo fuente 14 y su resultado en la Tabla 46

ltTABLE border=4gtltTR gtltTH colspan=3 bgcolor=redgtTiacutetuloltTR bgcolor=yellowgtltTHgtCabecera 1ltTHgtCabecera 2ltTHgtCabecera 3

copy Grupo EIDOS 4 Elementos del lenguaje II

43

ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTDgtCelda 13ltTRgtltTD rowspan=2gtCelda 21ltTD bgcolor=greengtCelda 22ltTDgtCelda 23ltTRgtltTDgtCelda 32ltTDgtCelda 33

ltTABLEgt

Coacutedigo fuente 14

Tiacutetulo

Cabecera 1 Cabecera 2 Cabecera 3

Celda 11 Celda 12 Celda 13

Celda 22 Celda 23 Celda 21

Celda 32 Celda 33

Tabla 46

Formularios El formulario es el elemento de HTML que nos va a permitir interactuar con los visitantes de nuestras paacuteginas web de forma que podemos solicitarle informacioacuten al usuario y procesarla De esta forma podremos crear en nuestras paacuteginas encuestas para solicitar la opinioacuten del visitante sobre alguacuten tema e incluso sobre el contenido de nuestra propia paacutegina web cuestionarios para evaluar la asimilacioacuten de contenidos sobre un tema concreto que se trate en la paacutegina etc

El contenido de la informacioacuten introducida por medio del formulario seraacute enviado a la direccioacuten URL donde resida el programa que se encargaraacute de procesar los datos A este tipo de programas externos se les denomina programas CGI (Common Gateway Interface)

La etiqueta HTML que nos va a permitir la creacioacuten de formularios es ltFORMgt Su formato es el siguiente

ltFORM action=URL del programa que trata el formulariomethod=postgetgt Elementos del formulario ltFORMgt

bull action=URL del programa que trata el formulario A traveacutes de este

argumento indicaremos como ya hemos mencionado la direccioacuten del fichero de programa que va a tratar la informacioacuten suministrada por el formulario

Tambieacuten podriacuteamos incluir como URL que trata el formulario una direccioacuten de correo electroacutenico Por tanto el valor de este argumento podriacutea ser action =mailto direccioacuten de correo

Nota Esta opcioacuten soacutelo funciona adecuadamente con el navegador Netscape Con el Explorer este enviacuteo dariacutea como resultado un correo en blanco Para que esta opcioacuten funcione de manera independiente del navegador que se esteacute utilizando se ha de emplear un programa externo que realice este proceso

Lenguaje HTML copy Grupo EIDOS

44

bull method=postget A traveacutes de este argumento indicaremos el meacutetodo empleado para transferir la informacioacuten generada por el formulario

Si indicamos post se produciraacute la modificacioacuten del documento destino como es el caso de enviar la informacioacuten a una direccioacuten de correo electroacutenico Mediante el meacutetodo get no se produciraacuten cambios en el documento destino

Dentro de un formulario podremos incluir cualquier texto o instruccioacuten HTML de las vistas a lo largo de los capiacutetulos anteriores ademaacutes claro estaacute de los elementos tiacutepicos de un formulario cajas de texto botones de seleccioacuten menuacutes de opciones etc Vamos a ver coacutemo se incluiraacuten estos elementos en un formulario

Entrada baacutesica de datos Para definir los distintos tipos de campos baacutesicos de entrada de datos usaremos la etiqueta ltINPUTgt

El formato es el siguiente

ltINPUT type= text password checkbox radio hidden submit image reset name=Variable value=Valor inicialgt

bull El argumento type determinaraacute el tipo de campo de entrada que estamos insertando A

continuacioacuten describiremos cada uno de ellos

bull El argumento name especifica el nombre de la variable que tomaraacute el valor introducido en el campo

bull El argumento value especifica el valor por defecto que tendraacute el campo

Vamos a continuacioacuten a describir los distintos tipos campos de entrada que vendraacuten dados por los valores del argumento type

Texto corto type=text

Con este argumento vamos a indicar que el campo a introducir seraacute un texto El formato seriacutea

ltINPUT type= text name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los nuevos atributos es

bull size=Tamantildeo Indicaremos el tamantildeo en caracteres de la ventana de introduccioacuten de texto

bull maxlength=Longitud maacutexima Indicaremos el nuacutemero maacuteximo de caracteres a introducir en el campo

Vamos a ver un ejemplo en la Tabla 47

copy Grupo EIDOS 4 Elementos del lenguaje II

45

Ejemplo Resultado

NombreltINPUT type=text name=Var1Value=Texto por defecto size=20 maxlength=25gt

Tabla 47

Claves type=password

Con este argumento indicamos que el campo a introducir seraacute una palabra clave por lo que los caracteres que se introduzcan seraacuten sustituidos por asteriscos en la visualizacioacuten por pantalla El formato es

ltINPUT type= password name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los distintos argumentos es el mismo que en el caso anterior Veamos un ejemplo en la Tabla 48

Ejemplo Resultado

ClaveltINPUT type=password name=Var2Value=tutankamon size=11 maxlength=10gt

Tabla 48

Botones de seleccioacuten type=checkbox

El checkbox es un botoacuten que presenta dos estados marcado (1) y desmarcado (0) Podremos variar su estado simplemente pinchando con el ratoacuten El formato es

ltINPUT type= checkbox name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto

Si incluimos el argumento value cuando el botoacuten esteacute marcado su variable asociada adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 49

Ejemplo Resultado

ltINPUT type=checkbox name=Var3 value=Op1 checkedgtOpcioacuten1 ltbrgtltINPUT type=checkbox name=Var4 value=Op2gt Opcioacuten 2

Tabla 49

Lenguaje HTML copy Grupo EIDOS

46

Seleccioacuten entre varias opciones type=radio

Este argumento se usa cuando hay que hacer una seleccioacuten entre varias alternativas excluyentes pudieacutendose seleccionar uacutenicamente una de las alternativas Debemos incluir una etiqueta radio por cada una de las posibles alternativas El formato es

ltINPUT type= radio name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto En este caso uacutenicamente uno de los botones de radio podraacute aparecer marcado ya que se usa para el caso de opciones excluyentes

Cuando un botoacuten esteacute seleccionado la variable asociada a la lista de botones adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 50

Ejemplo Resultado

ltINPUT type=radio name=Var5 value=Op1gtOpcioacuten1 ltbrgtltINPUT type=radio name=Var5 value=Op2checkedgt Opcioacuten 2 ltbrgtltINPUT type=radio name=Var5 value=Op3 gtOpcioacuten 3

Tabla 50

En este ejemplo la variable Var5 tendraacute el valor Op2

Campos ocultos type=hidden

Este tipo de campos no son visibles para el usuario Su uso tiene sentido en el caso de enviar alguacuten tipo de informacioacuten que no deba ser visualizada o variada por el lector de nuestra paacutegina Web El formato es

ltINPUT type= hidden name=Variable value=Valor gt

Con esta etiqueta asignariacuteamos a la Variable referenciada por name el Valor de value y se mandariacutea junto con el formulario sin que el usuario de la paacutegina se entere de nada Veamos un ejemplo en el Coacutedigo fuente 15

ltINPUT type=hidden name=Var6 value=tutankamongt

Coacutedigo fuente 15

copy Grupo EIDOS 4 Elementos del lenguaje II

47

Botoacuten de enviacuteo de datos type=submit

Con este argumento especificamos un botoacuten en el que al pulsar los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario El formato es

ltINPUT type= submit value=Mensaje a mostrargt

En este caso el paraacutemetro value indica el mensaje que se mostraraacute en el botoacuten Veamos un ejemplo en la Tabla 51

Ejemplo Resultado

ltINPUT type=submit value=Enviar los Datosgt

Tabla 51

Botoacuten graacutefico de enviacuteo de datos type=image

Con este argumento especificamos un botoacuten de tipo imagen en el que al igual que con el botoacuten anterior si pulsamos en la imagen los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario Su formato es el siguiente

ltINPUT type= image src=URL de la imagen name=Variablegt

Con el paraacutemetro src especificamos la URL de la imagen que seraacute insertada en el botoacuten En este caso en la variable referenciada por name se almacenaraacuten las coordenadas del punto de la imagen donde se halla pinchado (de forma que estas coordenadas podriacutean ser procesadas por el programa que recibe los datos del formulario)

Botoacuten de borrado de datos type=reset

Con este argumento especificamos un botoacuten que al ser pulsado borraraacute el contenido actual de todos los campos dejaacutendolos con sus valores por defecto Su formato es

ltINPUT type= reset value=Texto del botoacutengt

Con el paraacutemetro value especificamos el texto que etiquetaraacute al botoacuten

Ejemplo Resultado

ltINPUT type=reset value=Borrar datosgt

Tabla 52

Lenguaje HTML copy Grupo EIDOS

48

Entrada datos en muacuteltiples liacuteneas En un formulario tambieacuten podremos introducir un campo de texto que abarque varias liacuteneas Para ello usaremos la etiqueta ltTEXTAREAgt ltTEXTAREAgt Su formato es el siguiente

ltTEXTAREA name=Variable rows=Filas cols=ColumnasgtContenido por defectoltTEXTAREAgt

Los argumentos rows y cols nos van a permitir especificar respectivamente el nuacutemero de filas de texto visibles y el nuacutemero de columnas de texto visibles en el campo

Ejemplo Resultado

ltTEXTAREA name=Var7 rows=5 cols=40gtContenido por defectoltTEXTAREAgt

Tabla 53

Entrada de datos a traveacutes de campos de seleccioacuten Con los campos de seleccioacuten podremos desplegar una lista de opciones entre las que podremos seleccionar una Para ello usaremos la etiqueta ltSELECTgt ltSELECTgt Su formato es el siguiente

ltSELECT name=Variable multiple size=ngtltOPTION selected value=Valor_1gtPrimera OpcioacutenltOPTION value=Valor_2gtSegunda Opcioacuten

ltOPTION value=Valor_ngtEneacutesima Opcioacuten

ltSELECTgt

Figura 1

bull La variable referenciada por name tomaraacute el valor(value) de la opcioacuten seleccionada

bull Si especificamos el argumento muacuteltiple se mostraraacuten todas la opciones en forma de tabla El nuacutemero de opciones visibles en la tabla vendraacute dado por el argumento size

copy Grupo EIDOS 4 Elementos del lenguaje II

49

bull Con la etiqueta ltOPTIONgt iremos definiendo cada una de las opciones de la lista

bull El argumento selected va a determinar cuaacutel es la opcioacuten por defecto

Para finalizar vamos a ver el Coacutedigo fuente 16 correspondiente a una encuesta realizada por la editorial ficticia EditoPc y en la Figura 2 observamos el resultado del formulario

ltP align=centergtltBgtEDITORIAL ltIgtEditoPcltIgtltBgtltPgtltFORM action=mailtodireccionejemplo method = postgtNombreltINPUT type=text size=30 name=nombregtltBRgtE_mail ltINPUT type=text size=30 name=e_mailgtltPgtDeseas recibir informacioacuten sobreltINPUT type=checkbox name=infor1 value=InternetgtInternetltINPUT type=checkbox name=infor2 value=ProgramacioacutengtProgramacioacutenltINPUT type=checkbox name=infor3 value=SistOperativogtSistOperativoltINPUT type=checkbox name=infor4 value=OfimaacuteticagtOfimaacuteticaltPgtiquestTe conectas a Internet desde casa ltbrgtltINPUT type=radio name=intercasa value=sigtSiacuteltINPUT type=radio name=intercasa value=nogtNoltPgtiquestQueacute uso le das a tu ordenador ltBRgtltSELECT name=uso multiple size=3gtltOPTION selectedgtProfesionalltOPTIONgtDomeacutesticoltOPTIONgtOcioJuegosltSELECTgtltPgtCaracteriacutesticas de tu PCltBRgtltTEXTAREA name=caract rows=5 cols=40gtltTEXTAREAgtltPgtltINPUT type=submit value=Enviar datosgt ltINPUT type=reset value=Borrardatosgt

Coacutedigo fuente 16

Figura 2

Elementos del lenguaje III

Frames Las frames son una utilidad del HTML que nos permite dividir la ventana del navegador en diferentes subventanas que podraacuten ser manipuladas de manera independiente Esto nos permitiraacute mostrar una paacutegina web diferente en cada una de la subventanas o frames

Estructura de un documento con frames Un documento con frames se estructura de manera diferente a un documento HTML normal Asiacute en este tipo de documentos no apareceraacute la etiqueta ltBODYgt En su lugar se incluiraacute la etiqueta ltFRAMESETgt ltFRAMESETgt dentro de la cual se definiraacuten las distintas frames que se incluyan en el documento

La estructura general de un documento de este tipo seriacutea por tanto

ltHTMLgtltHEADgtCabeceraltHEADgtltFRAMESETgt

Definicioacuten de la distintas framesltFRAMESETgtltNOFRAMESgt

Instrucciones HTMLltNOFRAMESgt

ltHTMLgt

Lenguaje HTML copy Grupo EIDOS

52

Puede darse el caso de que programemos nuestro documento con frames siguiendo la estructura anterior y que el navegador que se use para leer el documento no soporte la caracteriacutestica de frames con lo cual no se mostraraacute nada de lo indicado entre las etiquetas ltFRAMESETgt y ltFRAMESETgtPara solucionar este problema todas las instrucciones HTML incluidas entre las etiquetas ltNOFRAMESgt y ltNOFRAMESgt seraacuten ejecutadas por los navegadores que no soportan las frames

La sintaxis de la etiqueta ltFRAMESETgt es

ltFRAMESET rows=Lista de filas cols=Lista de columnasgtltFRAME src=URL de la frame 1 name=Nombre de la frame 1gtltFRAME src=URL de la frame 2 name=Nombre de la frame 2gt

ltFRAME src=URL de la frame n name=Nombre de la frame ngt

ltFRAMESETgt

Como vemos por cada una de la frames que incluyamos en nuestro documento debemos incluir una etiqueta ltFRAMEgt indicando mediante sus argumentos la direccioacuten URL del documento que se insertaraacute en la subventana (src) y el nombre de la frame (name) Posteriormente describiremos la etiqueta ltFRAMEgt con maacutes detalle

Los argumentos de ltFRAMESETgt son rows y cols definieacutendose uacutenicamente uno de los dos atributos en funcioacuten de si la divisioacuten de la pantalla se realizaraacute por filas (rows) o por columnas (cols)

Por cada una de las subventanas que creemos debemos especificar su tamantildeo en puntos o en porcentaje del tamantildeo de cada subventana Asiacute por ejemplo si especificamos rows= 50 2525 crearemos tres subventanas horizontales ocupando la primera el 50 de la ventana principal y las otras dos el resto Si especificamos cols=100150 crearemos tres subventanas verticales ocupando la primera 100 puntos de la ventana principal la segunda 150 puntos y tercera el espacio restante

Vamos a verlo maacutes claramente con un par de ejemplos praacutecticos que vemos en la Tabla 54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 502525gt ltFRAMEsrc=Pagweb1htm name=Pagweb1gtltFRAMEsrc=Pagweb2htm name=Pagweb2gtltFRAMEsrc=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 26: Programacion web   lenguaje html

Lenguaje HTML copy Grupo EIDOS

30

Con el atributo href vamos a especificar la URL del documento al que se pretende acceder El texto contenido entre las etiquetas de comienzo y fin nos va a servir para definir el hiperenlace por lo que deberiacutea ser clarificador del contenido del documento con el que vamos a enlazar Esta definicioacuten apareceraacute resaltada normalmente en azul y subrayada En la mayoriacutea de los navegadores esta definicioacuten del hiperenlace es sensible por lo que cuando el cursor pasa por encima del mismo este cambia de aspecto indicaacutendolo

Veamos un ejemplo en la Tabla 23

Ejemplo Resultado

ltA href=httpwwweidosesgtPaacutegina inicialde Villa EidosltAgt

Paacutegina inicial de Villa Eidos

Tabla 23

Si situamos el ratoacuten encima del hiperenlace y pulsamos el navegador accederaacute a la paacutegina Web indicada por href es decir accederaacute a la paacutegina situada en httpwwweidoses

Igualmente podriacuteamos indicar el hiperenlace por medio de una imagen Si esta imagen tiene definido un borde este apareceraacute resaltado en color azul El formato correspondiente seriacutea

ltA href=URL a la que se accedegtltIMG src=Imagengt y tambieacutentextoltAgtIMG Image src Source

Veamos un ejemplo en la Tabla 24

Ejemplo Resultado

ltA href=httpwwweidosesgtltIMGsrc=IconogifgtltAgt Villa Eidos Villa Eidos

Tabla 24

Si pulsamos sobre la imagen el navegador accederaacute a la paacutegina Web inicial de Villa Eidos

Enlaces dentro de la misma paacutegina ltA name=gt Este tipo de hiperenlaces nos va a permitir marcar distintas zonas del documento activo con el objeto de tener un acceso directo a las mismas Una buena utilidad de este tipo de enlaces radica en la creacioacuten de iacutendices para documentos largos de forma que si pinchamos en el hiperenlace correspondiente al tiacutetulo de un capiacutetulo determinado el navegador saltaraacute automaacuteticamente hasta el comienzo de dicho capiacutetulo

Para la creacioacuten de estos hiperenlaces debemos seguir dos pasos

copy Grupo EIDOS 3 Elementos del lenguaje I

31

1 Marcar las distintas zonas o secciones del documento Esto lo haremos con el paraacutemetro name

ltA name=Identificador de seccioacutengtTexto de laseccioacutenltAgt

A cada seccioacuten le asignaremos un identificador distinto para poder referenciarlas posteriormente de manera inequiacutevoca

2 Especificar un enlace a cada una de las secciones que hayamos definido ltA href=Identificador de seccioacutengtTexto del enlace a laseccioacutenltAgt

Si pinchamos en este enlace el navegador saltaraacute automaacuteticamente a la seccioacuten correspondiente Veamos un ejemplo sencillito en la Tabla 25 pero demostrativo de todo lo que acabamos de explicar

Ejemplo Resultado

ltA href=Cap1gtCapiacutetulo1ltAgtltA name=Cap1gtCapiacutetulo 1ltAgt

Capiacutetulo 1

Capiacutetulo 1

Tabla 25

Si nos creamos una paacutegina HTML con distintos capiacutetulos podriacuteamos crear una seccioacuten para cada uno de ellos de forma que si pinchamos en el hiperenlace correspondiente al Capiacutetulo 1 el navegador saltariacutea directamente a la seccioacuten correspondiente al Capiacutetulo 1

Ademaacutes de los dos tipos de hiperenlaces vistos podemos crear hiperenlaces que nos permitan acceder a cualquiera de los servicios de Internet Es decir podriacuteamos indicar enlaces a servidores FTP GOPHER NEWS MAILTO etc Para ello tendriacuteamos que indicar la URL correspondiente al servicio al cual queremos acceder como ya vimos en el primer capiacutetulo de este manual

Imaacutegenes

Podremos dar un aspecto mucho maacutes vistoso a nuestros documentos HTML con la inclusioacuten de imaacutegenes Los formatos de imagen que todos los navegadores reconocen son gif y jpg Si queremos insertar una imagen en otro formato el visor deberiacutea disponer del programa externo que permita su visualizacioacuten De todas formas una buena solucioacuten es utilizar alguacuten programa de tratamiento de imaacutegenes que nos convierta la imagen a uno de los formatos mencionados anteriormente

El formato gif es maacutes recomendado para la inclusioacuten de iconos graacuteficas y el formato jpg para el caso de insertar fotografiacuteas en nuestras paacuteginas

Lenguaje HTML copy Grupo EIDOS

32

La etiqueta que nos va a permitir la insercioacuten de imaacutegenes es ltIMGgt La imagen se insertaraacute justo en el punto del documento donde coloquemos dicha etiqueta pudiendo insertar imaacutegenes dentro de listas tablas o formularios

El formato de la etiqueta con sus posibles argumentos es el siguiente

ltIMG src=URL de la imagen alt=Texto alternativoalign=topmiddlebottonleftrigth border=Tamantildeoheight=Tamantildeo width=Tamantildeo hspace=margen vspace=margengt

bull src=URL de la imagen El atributo src nos va servir para indicar la URL de la imagen que

queremos insertar es decir el servidor y camino hasta llegar al fichero de la imagen

No seraacute necesario que la imagen que queremos insertar en nuestro documento esteacute en el ordenador local aunque siacute es recomendable ya que el acceso a las mismas puede ser maacutes lento

Por tanto es una buena praacutectica copiar todas las imaacutegenes que vayamos a incluir en nuestro documento HTML al ordenador local

Tabla 26

bull alt=Texto alternativo Nos va a permitir mostrar un texto alternativo para el caso en que el

navegador no sea capaz de mostrar la imagen Su uso es muy recomendable ya que cuando publiquemos nuestras paacuteginas en la WWW no sabremos desde queacute tipo de navegadores accederaacuten los internautas a nuestras paacuteginas

En la Tabla 27 vamos a ver un ejemplo

Si usas un navegador que no tiene ninguacuten problema para la visualizacioacuten de imaacutegenes desactiva temporalmente la opcioacuten de mostrar imaacutegenes prueba el ejemplo que muestra la Tabla 27 y compaacuteralo con el anterior

Tabla 27

copy Grupo EIDOS 3 Elementos del lenguaje I

33

bull align=topmiddlebotton leftrigth Nos permite indicar coacutemo se alinearaacute el texto que siga a la imagen

top alinea el texto con la parte superior de la imagen

middle con la parte central

bottom con la parte inferior

left imagen alineada a la izquierda de la paacutegina

rigth imagen alineada a la derecha de la paacutegina

Tabla 28

En el caso de que el texto que acompantildea a la imagen tenga maacutes de una liacutenea tan soacutelo la primera seraacute la que se alinearaacute seguacuten alguna de las anteriores alineaciones el resto de liacuteneas se incluiraacuten debajo de la imagen quedando un efecto bastante feo

Para solventar esto estaacuten las alineaciones LEFT (imagen alineada a la izquierda de la paacutegina) y RIGHT (imagen alineada a la derecha de la paacutegina) Las cuales permiten que la imagen se inserte dentro del paacuterrafo que la rodea produciendo un resultado mucho maacutes profesional en la integracioacuten de texto e imaacutegenes

Estas dos alineaciones no se podraacuten usar en combinacioacuten con las anteriores Veamos algunos ejemplos en la Tabla 29

Vemos como en el primer ejemplo la segunda liacutenea de texto aparece debajo de la imagen produciendo un efecto menos vistoso que en los dos ejemplos siguientes

Lenguaje HTML copy Grupo EIDOS

34

Tabla 29

bull border=Tamantildeo Permite antildeadirle un borde a la imagen del tamantildeo que le

especifiquemos

Si la imagen forma parte de un hiperenlace esta apareceraacute con un borde del color del hiperenlace Si no deseaacuteramos que aparezca este borde tendriacuteamos que especificar border=0

Tabla 30

bull height=Tamantildeo Permite especificar el alto de la imagen en puntos de pantalla

(pixels) o en del tamantildeo del documento

bull width=Tamantildeo Con este argumento especificaremos el ancho al que mostraremos la imagen en puntos de pantalla (pixels) o en del tamantildeo del documento

En el segundo de los ejemplos de la Tabla 31 el ancho de la imagen se ha extendido al 50 del total del ancho de la celda donde estaacute contenida la imagen Si pruebas este ejemplo en tu documento HTML la imagen se extenderaacute horizontalmente hasta ocupar el 50 del ancho de la paacutegina

copy Grupo EIDOS 3 Elementos del lenguaje I

35

Tabla 31

bull hspace=Margen hspace Horizontal Space Permite especificar el nuacutemero de espacios

horizontales (en puntos) que separaraacuten a la imagen de cualquier elemento que le siga o le anteceda

bull vspace=Margen vspace Vertical Space Con este argumento especificaremos el margen vertical (en puntos) que habraacute entre la imagen y cualquier otro elemento de nuestro documento

Tabla 32

Elementos del lenguaje II

Tablas HTML nos va a permitir la inclusioacuten de cualquiera de los elementos de nuestra paacutegina (texto imaacutegenes hiperenlaces listas etc) dentro de una tabla Gracias a lo cual conseguiremos dar una mayor y mejor estructuracioacuten a los contenidos de nuestros documentos Ademaacutes la definicioacuten de las tablas en HTML es muy abierta pudiendo en cualquier momento redimensionar la tabla es decir cambiar su nuacutemero de filas o de columnas cambiar el tamantildeo de alguna de sus celdas etc

La etiqueta que nos va a permitir la definicioacuten de tablas es ltTABLEgt ltTABLEgt

El formato general de la etiqueta sin ninguacuten argumento es el siguiente

ltTABLEgtltTR gt

ltTHgtContenido de la celda ltTHgtltTDgtContenido de la celda ltTDgt

ltTRgtltTABLEgt

TR Table Row TH Table Header TD Table Data

Vamos a analizar cada una de estas etiquetas de forma separada

1 ltTABLEgt ltTABLEgt Definicioacuten general de la tabla Dentro de ella definiremos las filas y columnas que la constituyen pudiendo incluso definir tablas dentro de tablas es decir tablas anidadas

Lenguaje HTML copy Grupo EIDOS

38

2 ltTRgt ltTRgt Definicioacuten de las filas de la tabla Por cada etiqueta ltTRgt que incluyamos se crearaacute una fila en la tabla No seraacute necesario indicar la etiqueta de cierre

3 ltTHgtltTHgt oacute ltTDgtltTDgt Definicioacuten de cada una de las celdas de la tabla Vemos que estas etiquetas estaacuten contenidas dentro de otra etiqueta de definicioacuten de fila de forma que por cada etiqueta ltTHgt o ltTDgt que incluyamos se crearaacute una celda dentro de la fila correspondiente La etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera es decir celdas cuyo contenido estaacute resaltado en negrita dejando la etiqueta ltTDgt para definir celdas de datos En este caso tampoco es necesario indicar las etiquetas de cierre

Todas estas etiquetas tienen sus respectivos argumentos Pero antes de analizar cada uno de ellos vamos a ver un ejemplo muy sencillito en la Tabla 33 que nos crearaacute una tabla de una sola celda (1 fila X 1 columna = 1 celda) Para ello usaremos la etiqueta de creacioacuten de tabla ltTABLEgt con el argumento border=1 (nos dibuja un borde de tamantildeo 1 alrededor de la tabla)

Ejemplo Resultado

ltTABLE border=1gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 33

Vamos ahora a analizar lo distintos argumentos que componen las etiquetas de la tabla analizaacutendolos desde lo general (la definicioacuten de la tabla) hasta lo especiacutefico (la definicioacuten de las celdas)

1 Definicioacuten de la tabla ltTABLEgt

ltTABLE border=n cellpadding=n cellspacing=n width=n oacute height=n oacute bgcolor=rrggbb oacute nombre gt

Contenido ltTABLEgt

bull border=n Si especificamos este argumento se dibujaraacute un borde alrededor de la

tabla del ancho que le indiquemos como muestra la Tabla 34

Ejemplo Resultado

Mi primera tabla ltTABLE border=4gtltTRgtltTDgtMi primera tablaltTABLEgt

Tabla 34

bull cellpadding=n Indica el espacio en puntos que separa el contenido de la celda con

el borde de la misma siendo 1 por defecto

copy Grupo EIDOS 4 Elementos del lenguaje II

39

Ejemplo Resultado

ltTABLE border=4 cellpadding=8gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 35

bull cellspacing=n Indica el espacio en puntos que separa a las celdas contenidas dentro de la tabla siendo 2 por defecto

bull width=n oacute Indica la anchura de la tabla en puntos o en en funcioacuten del ancho de la ventana del visualizador Si no indicamos este argumento el ancho de la tabla se ajustaraacute al tamantildeo del contenido de las celdas Esto es lo que ha ocurrido en el uacuteltimo ejemplo que hemos realizado Veamos un ejemplo en el Coacutedigo fuente 11 El resultado se muestra en la Tabla 36

ltTABLE border=4 width=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 11

Mi primera tabla

Tabla 36

bull height=n oacute Nos permite definir la altura de la tabla en puntos o en de la

altura de la ventana del visualizador Si indicamos este argumento lo recomendable es darlo en puntos ya que es maacutes complicado adecuarnos a la altura de la ventana del visualizador Al igual que en el caso anterior si no especificamos este argumento la altura se adecuaraacute al contenido de las celdas El Coacutedigo fuente 12 muestra un ejemplo y la Tabla 37 nos muestra el resultado

ltTABLE border=4 width=50 height=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 12

Mi primera tabla

Tabla 37

bull bgcolor= rrggbb o nombre del color Nos permite definir un color

de fondo para todas las celdas de la tabla Maacutes adelante veremos como podemos definir colores especiacuteficos para cada una de las celdas por separado

Lenguaje HTML copy Grupo EIDOS

40

Ejemplo Resultado

ltTABLE border=4 bgcolor=yellowgtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 38

2 Definicioacuten de las filas de la tabla ltTRgt

ltTR align=leftrightcenter valign=topmiddlebottombgcolor=rrggbb oacute nombregt

Antes de empezar a descifrar el significado de cada uno de los argumentos de esta etiqueta vamos a ver un ejemplo en la Tabla 39 de coacutemo se construiriacutea una tabla con dos filas (2 filas X 1 columna = 2 celdas)

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR gtltTDgtPrimera filaltTRgtltTDgtSegunda filaltTABLEgt

Segunda fila

Tabla 39

bull align=leftrightcenter Con este argumento vamos a indicar la alineacioacuten

horizontal (leftizquierda rightderecha centercentrado) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado Veamos un ejemplo en el Coacutedigo fuente 13 y su correspondiente resultado en la Tabla 40

ltTABLE border=4 width=50 gt ltTRgtltTDgtPrimera filaltTRalign=rightgtltTDgtSegunda filaltTABLEgt

Coacutedigo fuente 13

Primera fila

Segunda fila

Tabla 40

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten

vertical (toparriba middlecentrado bottomabajo) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado

copy Grupo EIDOS 4 Elementos del lenguaje II

41

bull bgcolor= rrggbb o nombre del color En este caso este argumento nos permitiraacute definir un color de fondo para todas las celdas de una fila veamos un ejemplo en la

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR bgcolor=yellowgtltTDgtPrimera

filaltTR bgcolor=greengtltTDgtSegunda

filaltTABLEgt

Segunda fila

Tabla 41

3 Definicioacuten de las celdas de la tabla ltTHgt oacute ltTDgt

ltTH oacute TD align=leftrightcenterjustifyvalign=topmiddlebottom bgcolor=rrggbb oacute nombre width=nrowspan=n colspan=ngt

Como ya explicamos anteriormente la etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera y la etiqueta ltTDgt para la creacioacuten de celdas de datos Vamos a completar nuestro ejemplo inicial antildeadieacutendole tres filas de dos celdas cada una (3 filas X 2 columnas = 6 celdas) Tabla 42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTDgtCelda 21ltTDgtCelda 22

ltTABLEgt Celda 21 Celda 22

Tabla 42

bull align=leftrightcenterjustify Con este argumento vamos a indicar la

alineacioacuten horizontal (left izquierda right derecha center centrado justifyjustificado) del contenido de cada celda por separado Su significado es el mismo que en la etiqueta ltTRgt

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten vertical (toparriba middlecentrado bottomabajo) del contenido de cada celda

bull bgcolor= rrggbb o nombre del color En este caso podremos definir un color de fondo para cada una de las celdas de manera independiente

bull width=n oacute Indica el ancho de la celda en puntos o en en funcioacuten del tamantildeo de la tabla

Lenguaje HTML copy Grupo EIDOS

42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera

1ltTHgtCabecera 2ltTR gtltTD align=rightgtCelda

11ltTD bgcolor=redgtCelda 12ltTRgtltTD

bgcolor=yellowgtCelda 21ltTDalign=centergtCelda 22ltTABLEgt

Celda 21 Celda 22

Tabla 43

bull rowspan=n Con este argumento podemos lograr que una celda concreta abarque maacutes de una fila ya sabemos que por defecto una celda ocupa una sola fila

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTD rowspan=2gtCelda

11ltTDgtCelda 12ltTRgtltTDgtCelda 22

ltTABLEgt

Celda 11 Celda 22

Tabla 44

bull colspan=n Con este argumento podemos lograr que una celda se expanda a maacutes

de una columna

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTD colspan=2

align=centergtCelda 22ltTABLEgt

Celda 22

Tabla 45

Para finalizar este tema sobre la creacioacuten de tablas vamos a ver el ejemplo que aparece en el Coacutedigo fuente 14 y su resultado en la Tabla 46

ltTABLE border=4gtltTR gtltTH colspan=3 bgcolor=redgtTiacutetuloltTR bgcolor=yellowgtltTHgtCabecera 1ltTHgtCabecera 2ltTHgtCabecera 3

copy Grupo EIDOS 4 Elementos del lenguaje II

43

ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTDgtCelda 13ltTRgtltTD rowspan=2gtCelda 21ltTD bgcolor=greengtCelda 22ltTDgtCelda 23ltTRgtltTDgtCelda 32ltTDgtCelda 33

ltTABLEgt

Coacutedigo fuente 14

Tiacutetulo

Cabecera 1 Cabecera 2 Cabecera 3

Celda 11 Celda 12 Celda 13

Celda 22 Celda 23 Celda 21

Celda 32 Celda 33

Tabla 46

Formularios El formulario es el elemento de HTML que nos va a permitir interactuar con los visitantes de nuestras paacuteginas web de forma que podemos solicitarle informacioacuten al usuario y procesarla De esta forma podremos crear en nuestras paacuteginas encuestas para solicitar la opinioacuten del visitante sobre alguacuten tema e incluso sobre el contenido de nuestra propia paacutegina web cuestionarios para evaluar la asimilacioacuten de contenidos sobre un tema concreto que se trate en la paacutegina etc

El contenido de la informacioacuten introducida por medio del formulario seraacute enviado a la direccioacuten URL donde resida el programa que se encargaraacute de procesar los datos A este tipo de programas externos se les denomina programas CGI (Common Gateway Interface)

La etiqueta HTML que nos va a permitir la creacioacuten de formularios es ltFORMgt Su formato es el siguiente

ltFORM action=URL del programa que trata el formulariomethod=postgetgt Elementos del formulario ltFORMgt

bull action=URL del programa que trata el formulario A traveacutes de este

argumento indicaremos como ya hemos mencionado la direccioacuten del fichero de programa que va a tratar la informacioacuten suministrada por el formulario

Tambieacuten podriacuteamos incluir como URL que trata el formulario una direccioacuten de correo electroacutenico Por tanto el valor de este argumento podriacutea ser action =mailto direccioacuten de correo

Nota Esta opcioacuten soacutelo funciona adecuadamente con el navegador Netscape Con el Explorer este enviacuteo dariacutea como resultado un correo en blanco Para que esta opcioacuten funcione de manera independiente del navegador que se esteacute utilizando se ha de emplear un programa externo que realice este proceso

Lenguaje HTML copy Grupo EIDOS

44

bull method=postget A traveacutes de este argumento indicaremos el meacutetodo empleado para transferir la informacioacuten generada por el formulario

Si indicamos post se produciraacute la modificacioacuten del documento destino como es el caso de enviar la informacioacuten a una direccioacuten de correo electroacutenico Mediante el meacutetodo get no se produciraacuten cambios en el documento destino

Dentro de un formulario podremos incluir cualquier texto o instruccioacuten HTML de las vistas a lo largo de los capiacutetulos anteriores ademaacutes claro estaacute de los elementos tiacutepicos de un formulario cajas de texto botones de seleccioacuten menuacutes de opciones etc Vamos a ver coacutemo se incluiraacuten estos elementos en un formulario

Entrada baacutesica de datos Para definir los distintos tipos de campos baacutesicos de entrada de datos usaremos la etiqueta ltINPUTgt

El formato es el siguiente

ltINPUT type= text password checkbox radio hidden submit image reset name=Variable value=Valor inicialgt

bull El argumento type determinaraacute el tipo de campo de entrada que estamos insertando A

continuacioacuten describiremos cada uno de ellos

bull El argumento name especifica el nombre de la variable que tomaraacute el valor introducido en el campo

bull El argumento value especifica el valor por defecto que tendraacute el campo

Vamos a continuacioacuten a describir los distintos tipos campos de entrada que vendraacuten dados por los valores del argumento type

Texto corto type=text

Con este argumento vamos a indicar que el campo a introducir seraacute un texto El formato seriacutea

ltINPUT type= text name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los nuevos atributos es

bull size=Tamantildeo Indicaremos el tamantildeo en caracteres de la ventana de introduccioacuten de texto

bull maxlength=Longitud maacutexima Indicaremos el nuacutemero maacuteximo de caracteres a introducir en el campo

Vamos a ver un ejemplo en la Tabla 47

copy Grupo EIDOS 4 Elementos del lenguaje II

45

Ejemplo Resultado

NombreltINPUT type=text name=Var1Value=Texto por defecto size=20 maxlength=25gt

Tabla 47

Claves type=password

Con este argumento indicamos que el campo a introducir seraacute una palabra clave por lo que los caracteres que se introduzcan seraacuten sustituidos por asteriscos en la visualizacioacuten por pantalla El formato es

ltINPUT type= password name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los distintos argumentos es el mismo que en el caso anterior Veamos un ejemplo en la Tabla 48

Ejemplo Resultado

ClaveltINPUT type=password name=Var2Value=tutankamon size=11 maxlength=10gt

Tabla 48

Botones de seleccioacuten type=checkbox

El checkbox es un botoacuten que presenta dos estados marcado (1) y desmarcado (0) Podremos variar su estado simplemente pinchando con el ratoacuten El formato es

ltINPUT type= checkbox name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto

Si incluimos el argumento value cuando el botoacuten esteacute marcado su variable asociada adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 49

Ejemplo Resultado

ltINPUT type=checkbox name=Var3 value=Op1 checkedgtOpcioacuten1 ltbrgtltINPUT type=checkbox name=Var4 value=Op2gt Opcioacuten 2

Tabla 49

Lenguaje HTML copy Grupo EIDOS

46

Seleccioacuten entre varias opciones type=radio

Este argumento se usa cuando hay que hacer una seleccioacuten entre varias alternativas excluyentes pudieacutendose seleccionar uacutenicamente una de las alternativas Debemos incluir una etiqueta radio por cada una de las posibles alternativas El formato es

ltINPUT type= radio name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto En este caso uacutenicamente uno de los botones de radio podraacute aparecer marcado ya que se usa para el caso de opciones excluyentes

Cuando un botoacuten esteacute seleccionado la variable asociada a la lista de botones adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 50

Ejemplo Resultado

ltINPUT type=radio name=Var5 value=Op1gtOpcioacuten1 ltbrgtltINPUT type=radio name=Var5 value=Op2checkedgt Opcioacuten 2 ltbrgtltINPUT type=radio name=Var5 value=Op3 gtOpcioacuten 3

Tabla 50

En este ejemplo la variable Var5 tendraacute el valor Op2

Campos ocultos type=hidden

Este tipo de campos no son visibles para el usuario Su uso tiene sentido en el caso de enviar alguacuten tipo de informacioacuten que no deba ser visualizada o variada por el lector de nuestra paacutegina Web El formato es

ltINPUT type= hidden name=Variable value=Valor gt

Con esta etiqueta asignariacuteamos a la Variable referenciada por name el Valor de value y se mandariacutea junto con el formulario sin que el usuario de la paacutegina se entere de nada Veamos un ejemplo en el Coacutedigo fuente 15

ltINPUT type=hidden name=Var6 value=tutankamongt

Coacutedigo fuente 15

copy Grupo EIDOS 4 Elementos del lenguaje II

47

Botoacuten de enviacuteo de datos type=submit

Con este argumento especificamos un botoacuten en el que al pulsar los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario El formato es

ltINPUT type= submit value=Mensaje a mostrargt

En este caso el paraacutemetro value indica el mensaje que se mostraraacute en el botoacuten Veamos un ejemplo en la Tabla 51

Ejemplo Resultado

ltINPUT type=submit value=Enviar los Datosgt

Tabla 51

Botoacuten graacutefico de enviacuteo de datos type=image

Con este argumento especificamos un botoacuten de tipo imagen en el que al igual que con el botoacuten anterior si pulsamos en la imagen los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario Su formato es el siguiente

ltINPUT type= image src=URL de la imagen name=Variablegt

Con el paraacutemetro src especificamos la URL de la imagen que seraacute insertada en el botoacuten En este caso en la variable referenciada por name se almacenaraacuten las coordenadas del punto de la imagen donde se halla pinchado (de forma que estas coordenadas podriacutean ser procesadas por el programa que recibe los datos del formulario)

Botoacuten de borrado de datos type=reset

Con este argumento especificamos un botoacuten que al ser pulsado borraraacute el contenido actual de todos los campos dejaacutendolos con sus valores por defecto Su formato es

ltINPUT type= reset value=Texto del botoacutengt

Con el paraacutemetro value especificamos el texto que etiquetaraacute al botoacuten

Ejemplo Resultado

ltINPUT type=reset value=Borrar datosgt

Tabla 52

Lenguaje HTML copy Grupo EIDOS

48

Entrada datos en muacuteltiples liacuteneas En un formulario tambieacuten podremos introducir un campo de texto que abarque varias liacuteneas Para ello usaremos la etiqueta ltTEXTAREAgt ltTEXTAREAgt Su formato es el siguiente

ltTEXTAREA name=Variable rows=Filas cols=ColumnasgtContenido por defectoltTEXTAREAgt

Los argumentos rows y cols nos van a permitir especificar respectivamente el nuacutemero de filas de texto visibles y el nuacutemero de columnas de texto visibles en el campo

Ejemplo Resultado

ltTEXTAREA name=Var7 rows=5 cols=40gtContenido por defectoltTEXTAREAgt

Tabla 53

Entrada de datos a traveacutes de campos de seleccioacuten Con los campos de seleccioacuten podremos desplegar una lista de opciones entre las que podremos seleccionar una Para ello usaremos la etiqueta ltSELECTgt ltSELECTgt Su formato es el siguiente

ltSELECT name=Variable multiple size=ngtltOPTION selected value=Valor_1gtPrimera OpcioacutenltOPTION value=Valor_2gtSegunda Opcioacuten

ltOPTION value=Valor_ngtEneacutesima Opcioacuten

ltSELECTgt

Figura 1

bull La variable referenciada por name tomaraacute el valor(value) de la opcioacuten seleccionada

bull Si especificamos el argumento muacuteltiple se mostraraacuten todas la opciones en forma de tabla El nuacutemero de opciones visibles en la tabla vendraacute dado por el argumento size

copy Grupo EIDOS 4 Elementos del lenguaje II

49

bull Con la etiqueta ltOPTIONgt iremos definiendo cada una de las opciones de la lista

bull El argumento selected va a determinar cuaacutel es la opcioacuten por defecto

Para finalizar vamos a ver el Coacutedigo fuente 16 correspondiente a una encuesta realizada por la editorial ficticia EditoPc y en la Figura 2 observamos el resultado del formulario

ltP align=centergtltBgtEDITORIAL ltIgtEditoPcltIgtltBgtltPgtltFORM action=mailtodireccionejemplo method = postgtNombreltINPUT type=text size=30 name=nombregtltBRgtE_mail ltINPUT type=text size=30 name=e_mailgtltPgtDeseas recibir informacioacuten sobreltINPUT type=checkbox name=infor1 value=InternetgtInternetltINPUT type=checkbox name=infor2 value=ProgramacioacutengtProgramacioacutenltINPUT type=checkbox name=infor3 value=SistOperativogtSistOperativoltINPUT type=checkbox name=infor4 value=OfimaacuteticagtOfimaacuteticaltPgtiquestTe conectas a Internet desde casa ltbrgtltINPUT type=radio name=intercasa value=sigtSiacuteltINPUT type=radio name=intercasa value=nogtNoltPgtiquestQueacute uso le das a tu ordenador ltBRgtltSELECT name=uso multiple size=3gtltOPTION selectedgtProfesionalltOPTIONgtDomeacutesticoltOPTIONgtOcioJuegosltSELECTgtltPgtCaracteriacutesticas de tu PCltBRgtltTEXTAREA name=caract rows=5 cols=40gtltTEXTAREAgtltPgtltINPUT type=submit value=Enviar datosgt ltINPUT type=reset value=Borrardatosgt

Coacutedigo fuente 16

Figura 2

Elementos del lenguaje III

Frames Las frames son una utilidad del HTML que nos permite dividir la ventana del navegador en diferentes subventanas que podraacuten ser manipuladas de manera independiente Esto nos permitiraacute mostrar una paacutegina web diferente en cada una de la subventanas o frames

Estructura de un documento con frames Un documento con frames se estructura de manera diferente a un documento HTML normal Asiacute en este tipo de documentos no apareceraacute la etiqueta ltBODYgt En su lugar se incluiraacute la etiqueta ltFRAMESETgt ltFRAMESETgt dentro de la cual se definiraacuten las distintas frames que se incluyan en el documento

La estructura general de un documento de este tipo seriacutea por tanto

ltHTMLgtltHEADgtCabeceraltHEADgtltFRAMESETgt

Definicioacuten de la distintas framesltFRAMESETgtltNOFRAMESgt

Instrucciones HTMLltNOFRAMESgt

ltHTMLgt

Lenguaje HTML copy Grupo EIDOS

52

Puede darse el caso de que programemos nuestro documento con frames siguiendo la estructura anterior y que el navegador que se use para leer el documento no soporte la caracteriacutestica de frames con lo cual no se mostraraacute nada de lo indicado entre las etiquetas ltFRAMESETgt y ltFRAMESETgtPara solucionar este problema todas las instrucciones HTML incluidas entre las etiquetas ltNOFRAMESgt y ltNOFRAMESgt seraacuten ejecutadas por los navegadores que no soportan las frames

La sintaxis de la etiqueta ltFRAMESETgt es

ltFRAMESET rows=Lista de filas cols=Lista de columnasgtltFRAME src=URL de la frame 1 name=Nombre de la frame 1gtltFRAME src=URL de la frame 2 name=Nombre de la frame 2gt

ltFRAME src=URL de la frame n name=Nombre de la frame ngt

ltFRAMESETgt

Como vemos por cada una de la frames que incluyamos en nuestro documento debemos incluir una etiqueta ltFRAMEgt indicando mediante sus argumentos la direccioacuten URL del documento que se insertaraacute en la subventana (src) y el nombre de la frame (name) Posteriormente describiremos la etiqueta ltFRAMEgt con maacutes detalle

Los argumentos de ltFRAMESETgt son rows y cols definieacutendose uacutenicamente uno de los dos atributos en funcioacuten de si la divisioacuten de la pantalla se realizaraacute por filas (rows) o por columnas (cols)

Por cada una de las subventanas que creemos debemos especificar su tamantildeo en puntos o en porcentaje del tamantildeo de cada subventana Asiacute por ejemplo si especificamos rows= 50 2525 crearemos tres subventanas horizontales ocupando la primera el 50 de la ventana principal y las otras dos el resto Si especificamos cols=100150 crearemos tres subventanas verticales ocupando la primera 100 puntos de la ventana principal la segunda 150 puntos y tercera el espacio restante

Vamos a verlo maacutes claramente con un par de ejemplos praacutecticos que vemos en la Tabla 54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 502525gt ltFRAMEsrc=Pagweb1htm name=Pagweb1gtltFRAMEsrc=Pagweb2htm name=Pagweb2gtltFRAMEsrc=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 27: Programacion web   lenguaje html

copy Grupo EIDOS 3 Elementos del lenguaje I

31

1 Marcar las distintas zonas o secciones del documento Esto lo haremos con el paraacutemetro name

ltA name=Identificador de seccioacutengtTexto de laseccioacutenltAgt

A cada seccioacuten le asignaremos un identificador distinto para poder referenciarlas posteriormente de manera inequiacutevoca

2 Especificar un enlace a cada una de las secciones que hayamos definido ltA href=Identificador de seccioacutengtTexto del enlace a laseccioacutenltAgt

Si pinchamos en este enlace el navegador saltaraacute automaacuteticamente a la seccioacuten correspondiente Veamos un ejemplo sencillito en la Tabla 25 pero demostrativo de todo lo que acabamos de explicar

Ejemplo Resultado

ltA href=Cap1gtCapiacutetulo1ltAgtltA name=Cap1gtCapiacutetulo 1ltAgt

Capiacutetulo 1

Capiacutetulo 1

Tabla 25

Si nos creamos una paacutegina HTML con distintos capiacutetulos podriacuteamos crear una seccioacuten para cada uno de ellos de forma que si pinchamos en el hiperenlace correspondiente al Capiacutetulo 1 el navegador saltariacutea directamente a la seccioacuten correspondiente al Capiacutetulo 1

Ademaacutes de los dos tipos de hiperenlaces vistos podemos crear hiperenlaces que nos permitan acceder a cualquiera de los servicios de Internet Es decir podriacuteamos indicar enlaces a servidores FTP GOPHER NEWS MAILTO etc Para ello tendriacuteamos que indicar la URL correspondiente al servicio al cual queremos acceder como ya vimos en el primer capiacutetulo de este manual

Imaacutegenes

Podremos dar un aspecto mucho maacutes vistoso a nuestros documentos HTML con la inclusioacuten de imaacutegenes Los formatos de imagen que todos los navegadores reconocen son gif y jpg Si queremos insertar una imagen en otro formato el visor deberiacutea disponer del programa externo que permita su visualizacioacuten De todas formas una buena solucioacuten es utilizar alguacuten programa de tratamiento de imaacutegenes que nos convierta la imagen a uno de los formatos mencionados anteriormente

El formato gif es maacutes recomendado para la inclusioacuten de iconos graacuteficas y el formato jpg para el caso de insertar fotografiacuteas en nuestras paacuteginas

Lenguaje HTML copy Grupo EIDOS

32

La etiqueta que nos va a permitir la insercioacuten de imaacutegenes es ltIMGgt La imagen se insertaraacute justo en el punto del documento donde coloquemos dicha etiqueta pudiendo insertar imaacutegenes dentro de listas tablas o formularios

El formato de la etiqueta con sus posibles argumentos es el siguiente

ltIMG src=URL de la imagen alt=Texto alternativoalign=topmiddlebottonleftrigth border=Tamantildeoheight=Tamantildeo width=Tamantildeo hspace=margen vspace=margengt

bull src=URL de la imagen El atributo src nos va servir para indicar la URL de la imagen que

queremos insertar es decir el servidor y camino hasta llegar al fichero de la imagen

No seraacute necesario que la imagen que queremos insertar en nuestro documento esteacute en el ordenador local aunque siacute es recomendable ya que el acceso a las mismas puede ser maacutes lento

Por tanto es una buena praacutectica copiar todas las imaacutegenes que vayamos a incluir en nuestro documento HTML al ordenador local

Tabla 26

bull alt=Texto alternativo Nos va a permitir mostrar un texto alternativo para el caso en que el

navegador no sea capaz de mostrar la imagen Su uso es muy recomendable ya que cuando publiquemos nuestras paacuteginas en la WWW no sabremos desde queacute tipo de navegadores accederaacuten los internautas a nuestras paacuteginas

En la Tabla 27 vamos a ver un ejemplo

Si usas un navegador que no tiene ninguacuten problema para la visualizacioacuten de imaacutegenes desactiva temporalmente la opcioacuten de mostrar imaacutegenes prueba el ejemplo que muestra la Tabla 27 y compaacuteralo con el anterior

Tabla 27

copy Grupo EIDOS 3 Elementos del lenguaje I

33

bull align=topmiddlebotton leftrigth Nos permite indicar coacutemo se alinearaacute el texto que siga a la imagen

top alinea el texto con la parte superior de la imagen

middle con la parte central

bottom con la parte inferior

left imagen alineada a la izquierda de la paacutegina

rigth imagen alineada a la derecha de la paacutegina

Tabla 28

En el caso de que el texto que acompantildea a la imagen tenga maacutes de una liacutenea tan soacutelo la primera seraacute la que se alinearaacute seguacuten alguna de las anteriores alineaciones el resto de liacuteneas se incluiraacuten debajo de la imagen quedando un efecto bastante feo

Para solventar esto estaacuten las alineaciones LEFT (imagen alineada a la izquierda de la paacutegina) y RIGHT (imagen alineada a la derecha de la paacutegina) Las cuales permiten que la imagen se inserte dentro del paacuterrafo que la rodea produciendo un resultado mucho maacutes profesional en la integracioacuten de texto e imaacutegenes

Estas dos alineaciones no se podraacuten usar en combinacioacuten con las anteriores Veamos algunos ejemplos en la Tabla 29

Vemos como en el primer ejemplo la segunda liacutenea de texto aparece debajo de la imagen produciendo un efecto menos vistoso que en los dos ejemplos siguientes

Lenguaje HTML copy Grupo EIDOS

34

Tabla 29

bull border=Tamantildeo Permite antildeadirle un borde a la imagen del tamantildeo que le

especifiquemos

Si la imagen forma parte de un hiperenlace esta apareceraacute con un borde del color del hiperenlace Si no deseaacuteramos que aparezca este borde tendriacuteamos que especificar border=0

Tabla 30

bull height=Tamantildeo Permite especificar el alto de la imagen en puntos de pantalla

(pixels) o en del tamantildeo del documento

bull width=Tamantildeo Con este argumento especificaremos el ancho al que mostraremos la imagen en puntos de pantalla (pixels) o en del tamantildeo del documento

En el segundo de los ejemplos de la Tabla 31 el ancho de la imagen se ha extendido al 50 del total del ancho de la celda donde estaacute contenida la imagen Si pruebas este ejemplo en tu documento HTML la imagen se extenderaacute horizontalmente hasta ocupar el 50 del ancho de la paacutegina

copy Grupo EIDOS 3 Elementos del lenguaje I

35

Tabla 31

bull hspace=Margen hspace Horizontal Space Permite especificar el nuacutemero de espacios

horizontales (en puntos) que separaraacuten a la imagen de cualquier elemento que le siga o le anteceda

bull vspace=Margen vspace Vertical Space Con este argumento especificaremos el margen vertical (en puntos) que habraacute entre la imagen y cualquier otro elemento de nuestro documento

Tabla 32

Elementos del lenguaje II

Tablas HTML nos va a permitir la inclusioacuten de cualquiera de los elementos de nuestra paacutegina (texto imaacutegenes hiperenlaces listas etc) dentro de una tabla Gracias a lo cual conseguiremos dar una mayor y mejor estructuracioacuten a los contenidos de nuestros documentos Ademaacutes la definicioacuten de las tablas en HTML es muy abierta pudiendo en cualquier momento redimensionar la tabla es decir cambiar su nuacutemero de filas o de columnas cambiar el tamantildeo de alguna de sus celdas etc

La etiqueta que nos va a permitir la definicioacuten de tablas es ltTABLEgt ltTABLEgt

El formato general de la etiqueta sin ninguacuten argumento es el siguiente

ltTABLEgtltTR gt

ltTHgtContenido de la celda ltTHgtltTDgtContenido de la celda ltTDgt

ltTRgtltTABLEgt

TR Table Row TH Table Header TD Table Data

Vamos a analizar cada una de estas etiquetas de forma separada

1 ltTABLEgt ltTABLEgt Definicioacuten general de la tabla Dentro de ella definiremos las filas y columnas que la constituyen pudiendo incluso definir tablas dentro de tablas es decir tablas anidadas

Lenguaje HTML copy Grupo EIDOS

38

2 ltTRgt ltTRgt Definicioacuten de las filas de la tabla Por cada etiqueta ltTRgt que incluyamos se crearaacute una fila en la tabla No seraacute necesario indicar la etiqueta de cierre

3 ltTHgtltTHgt oacute ltTDgtltTDgt Definicioacuten de cada una de las celdas de la tabla Vemos que estas etiquetas estaacuten contenidas dentro de otra etiqueta de definicioacuten de fila de forma que por cada etiqueta ltTHgt o ltTDgt que incluyamos se crearaacute una celda dentro de la fila correspondiente La etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera es decir celdas cuyo contenido estaacute resaltado en negrita dejando la etiqueta ltTDgt para definir celdas de datos En este caso tampoco es necesario indicar las etiquetas de cierre

Todas estas etiquetas tienen sus respectivos argumentos Pero antes de analizar cada uno de ellos vamos a ver un ejemplo muy sencillito en la Tabla 33 que nos crearaacute una tabla de una sola celda (1 fila X 1 columna = 1 celda) Para ello usaremos la etiqueta de creacioacuten de tabla ltTABLEgt con el argumento border=1 (nos dibuja un borde de tamantildeo 1 alrededor de la tabla)

Ejemplo Resultado

ltTABLE border=1gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 33

Vamos ahora a analizar lo distintos argumentos que componen las etiquetas de la tabla analizaacutendolos desde lo general (la definicioacuten de la tabla) hasta lo especiacutefico (la definicioacuten de las celdas)

1 Definicioacuten de la tabla ltTABLEgt

ltTABLE border=n cellpadding=n cellspacing=n width=n oacute height=n oacute bgcolor=rrggbb oacute nombre gt

Contenido ltTABLEgt

bull border=n Si especificamos este argumento se dibujaraacute un borde alrededor de la

tabla del ancho que le indiquemos como muestra la Tabla 34

Ejemplo Resultado

Mi primera tabla ltTABLE border=4gtltTRgtltTDgtMi primera tablaltTABLEgt

Tabla 34

bull cellpadding=n Indica el espacio en puntos que separa el contenido de la celda con

el borde de la misma siendo 1 por defecto

copy Grupo EIDOS 4 Elementos del lenguaje II

39

Ejemplo Resultado

ltTABLE border=4 cellpadding=8gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 35

bull cellspacing=n Indica el espacio en puntos que separa a las celdas contenidas dentro de la tabla siendo 2 por defecto

bull width=n oacute Indica la anchura de la tabla en puntos o en en funcioacuten del ancho de la ventana del visualizador Si no indicamos este argumento el ancho de la tabla se ajustaraacute al tamantildeo del contenido de las celdas Esto es lo que ha ocurrido en el uacuteltimo ejemplo que hemos realizado Veamos un ejemplo en el Coacutedigo fuente 11 El resultado se muestra en la Tabla 36

ltTABLE border=4 width=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 11

Mi primera tabla

Tabla 36

bull height=n oacute Nos permite definir la altura de la tabla en puntos o en de la

altura de la ventana del visualizador Si indicamos este argumento lo recomendable es darlo en puntos ya que es maacutes complicado adecuarnos a la altura de la ventana del visualizador Al igual que en el caso anterior si no especificamos este argumento la altura se adecuaraacute al contenido de las celdas El Coacutedigo fuente 12 muestra un ejemplo y la Tabla 37 nos muestra el resultado

ltTABLE border=4 width=50 height=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 12

Mi primera tabla

Tabla 37

bull bgcolor= rrggbb o nombre del color Nos permite definir un color

de fondo para todas las celdas de la tabla Maacutes adelante veremos como podemos definir colores especiacuteficos para cada una de las celdas por separado

Lenguaje HTML copy Grupo EIDOS

40

Ejemplo Resultado

ltTABLE border=4 bgcolor=yellowgtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 38

2 Definicioacuten de las filas de la tabla ltTRgt

ltTR align=leftrightcenter valign=topmiddlebottombgcolor=rrggbb oacute nombregt

Antes de empezar a descifrar el significado de cada uno de los argumentos de esta etiqueta vamos a ver un ejemplo en la Tabla 39 de coacutemo se construiriacutea una tabla con dos filas (2 filas X 1 columna = 2 celdas)

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR gtltTDgtPrimera filaltTRgtltTDgtSegunda filaltTABLEgt

Segunda fila

Tabla 39

bull align=leftrightcenter Con este argumento vamos a indicar la alineacioacuten

horizontal (leftizquierda rightderecha centercentrado) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado Veamos un ejemplo en el Coacutedigo fuente 13 y su correspondiente resultado en la Tabla 40

ltTABLE border=4 width=50 gt ltTRgtltTDgtPrimera filaltTRalign=rightgtltTDgtSegunda filaltTABLEgt

Coacutedigo fuente 13

Primera fila

Segunda fila

Tabla 40

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten

vertical (toparriba middlecentrado bottomabajo) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado

copy Grupo EIDOS 4 Elementos del lenguaje II

41

bull bgcolor= rrggbb o nombre del color En este caso este argumento nos permitiraacute definir un color de fondo para todas las celdas de una fila veamos un ejemplo en la

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR bgcolor=yellowgtltTDgtPrimera

filaltTR bgcolor=greengtltTDgtSegunda

filaltTABLEgt

Segunda fila

Tabla 41

3 Definicioacuten de las celdas de la tabla ltTHgt oacute ltTDgt

ltTH oacute TD align=leftrightcenterjustifyvalign=topmiddlebottom bgcolor=rrggbb oacute nombre width=nrowspan=n colspan=ngt

Como ya explicamos anteriormente la etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera y la etiqueta ltTDgt para la creacioacuten de celdas de datos Vamos a completar nuestro ejemplo inicial antildeadieacutendole tres filas de dos celdas cada una (3 filas X 2 columnas = 6 celdas) Tabla 42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTDgtCelda 21ltTDgtCelda 22

ltTABLEgt Celda 21 Celda 22

Tabla 42

bull align=leftrightcenterjustify Con este argumento vamos a indicar la

alineacioacuten horizontal (left izquierda right derecha center centrado justifyjustificado) del contenido de cada celda por separado Su significado es el mismo que en la etiqueta ltTRgt

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten vertical (toparriba middlecentrado bottomabajo) del contenido de cada celda

bull bgcolor= rrggbb o nombre del color En este caso podremos definir un color de fondo para cada una de las celdas de manera independiente

bull width=n oacute Indica el ancho de la celda en puntos o en en funcioacuten del tamantildeo de la tabla

Lenguaje HTML copy Grupo EIDOS

42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera

1ltTHgtCabecera 2ltTR gtltTD align=rightgtCelda

11ltTD bgcolor=redgtCelda 12ltTRgtltTD

bgcolor=yellowgtCelda 21ltTDalign=centergtCelda 22ltTABLEgt

Celda 21 Celda 22

Tabla 43

bull rowspan=n Con este argumento podemos lograr que una celda concreta abarque maacutes de una fila ya sabemos que por defecto una celda ocupa una sola fila

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTD rowspan=2gtCelda

11ltTDgtCelda 12ltTRgtltTDgtCelda 22

ltTABLEgt

Celda 11 Celda 22

Tabla 44

bull colspan=n Con este argumento podemos lograr que una celda se expanda a maacutes

de una columna

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTD colspan=2

align=centergtCelda 22ltTABLEgt

Celda 22

Tabla 45

Para finalizar este tema sobre la creacioacuten de tablas vamos a ver el ejemplo que aparece en el Coacutedigo fuente 14 y su resultado en la Tabla 46

ltTABLE border=4gtltTR gtltTH colspan=3 bgcolor=redgtTiacutetuloltTR bgcolor=yellowgtltTHgtCabecera 1ltTHgtCabecera 2ltTHgtCabecera 3

copy Grupo EIDOS 4 Elementos del lenguaje II

43

ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTDgtCelda 13ltTRgtltTD rowspan=2gtCelda 21ltTD bgcolor=greengtCelda 22ltTDgtCelda 23ltTRgtltTDgtCelda 32ltTDgtCelda 33

ltTABLEgt

Coacutedigo fuente 14

Tiacutetulo

Cabecera 1 Cabecera 2 Cabecera 3

Celda 11 Celda 12 Celda 13

Celda 22 Celda 23 Celda 21

Celda 32 Celda 33

Tabla 46

Formularios El formulario es el elemento de HTML que nos va a permitir interactuar con los visitantes de nuestras paacuteginas web de forma que podemos solicitarle informacioacuten al usuario y procesarla De esta forma podremos crear en nuestras paacuteginas encuestas para solicitar la opinioacuten del visitante sobre alguacuten tema e incluso sobre el contenido de nuestra propia paacutegina web cuestionarios para evaluar la asimilacioacuten de contenidos sobre un tema concreto que se trate en la paacutegina etc

El contenido de la informacioacuten introducida por medio del formulario seraacute enviado a la direccioacuten URL donde resida el programa que se encargaraacute de procesar los datos A este tipo de programas externos se les denomina programas CGI (Common Gateway Interface)

La etiqueta HTML que nos va a permitir la creacioacuten de formularios es ltFORMgt Su formato es el siguiente

ltFORM action=URL del programa que trata el formulariomethod=postgetgt Elementos del formulario ltFORMgt

bull action=URL del programa que trata el formulario A traveacutes de este

argumento indicaremos como ya hemos mencionado la direccioacuten del fichero de programa que va a tratar la informacioacuten suministrada por el formulario

Tambieacuten podriacuteamos incluir como URL que trata el formulario una direccioacuten de correo electroacutenico Por tanto el valor de este argumento podriacutea ser action =mailto direccioacuten de correo

Nota Esta opcioacuten soacutelo funciona adecuadamente con el navegador Netscape Con el Explorer este enviacuteo dariacutea como resultado un correo en blanco Para que esta opcioacuten funcione de manera independiente del navegador que se esteacute utilizando se ha de emplear un programa externo que realice este proceso

Lenguaje HTML copy Grupo EIDOS

44

bull method=postget A traveacutes de este argumento indicaremos el meacutetodo empleado para transferir la informacioacuten generada por el formulario

Si indicamos post se produciraacute la modificacioacuten del documento destino como es el caso de enviar la informacioacuten a una direccioacuten de correo electroacutenico Mediante el meacutetodo get no se produciraacuten cambios en el documento destino

Dentro de un formulario podremos incluir cualquier texto o instruccioacuten HTML de las vistas a lo largo de los capiacutetulos anteriores ademaacutes claro estaacute de los elementos tiacutepicos de un formulario cajas de texto botones de seleccioacuten menuacutes de opciones etc Vamos a ver coacutemo se incluiraacuten estos elementos en un formulario

Entrada baacutesica de datos Para definir los distintos tipos de campos baacutesicos de entrada de datos usaremos la etiqueta ltINPUTgt

El formato es el siguiente

ltINPUT type= text password checkbox radio hidden submit image reset name=Variable value=Valor inicialgt

bull El argumento type determinaraacute el tipo de campo de entrada que estamos insertando A

continuacioacuten describiremos cada uno de ellos

bull El argumento name especifica el nombre de la variable que tomaraacute el valor introducido en el campo

bull El argumento value especifica el valor por defecto que tendraacute el campo

Vamos a continuacioacuten a describir los distintos tipos campos de entrada que vendraacuten dados por los valores del argumento type

Texto corto type=text

Con este argumento vamos a indicar que el campo a introducir seraacute un texto El formato seriacutea

ltINPUT type= text name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los nuevos atributos es

bull size=Tamantildeo Indicaremos el tamantildeo en caracteres de la ventana de introduccioacuten de texto

bull maxlength=Longitud maacutexima Indicaremos el nuacutemero maacuteximo de caracteres a introducir en el campo

Vamos a ver un ejemplo en la Tabla 47

copy Grupo EIDOS 4 Elementos del lenguaje II

45

Ejemplo Resultado

NombreltINPUT type=text name=Var1Value=Texto por defecto size=20 maxlength=25gt

Tabla 47

Claves type=password

Con este argumento indicamos que el campo a introducir seraacute una palabra clave por lo que los caracteres que se introduzcan seraacuten sustituidos por asteriscos en la visualizacioacuten por pantalla El formato es

ltINPUT type= password name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los distintos argumentos es el mismo que en el caso anterior Veamos un ejemplo en la Tabla 48

Ejemplo Resultado

ClaveltINPUT type=password name=Var2Value=tutankamon size=11 maxlength=10gt

Tabla 48

Botones de seleccioacuten type=checkbox

El checkbox es un botoacuten que presenta dos estados marcado (1) y desmarcado (0) Podremos variar su estado simplemente pinchando con el ratoacuten El formato es

ltINPUT type= checkbox name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto

Si incluimos el argumento value cuando el botoacuten esteacute marcado su variable asociada adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 49

Ejemplo Resultado

ltINPUT type=checkbox name=Var3 value=Op1 checkedgtOpcioacuten1 ltbrgtltINPUT type=checkbox name=Var4 value=Op2gt Opcioacuten 2

Tabla 49

Lenguaje HTML copy Grupo EIDOS

46

Seleccioacuten entre varias opciones type=radio

Este argumento se usa cuando hay que hacer una seleccioacuten entre varias alternativas excluyentes pudieacutendose seleccionar uacutenicamente una de las alternativas Debemos incluir una etiqueta radio por cada una de las posibles alternativas El formato es

ltINPUT type= radio name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto En este caso uacutenicamente uno de los botones de radio podraacute aparecer marcado ya que se usa para el caso de opciones excluyentes

Cuando un botoacuten esteacute seleccionado la variable asociada a la lista de botones adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 50

Ejemplo Resultado

ltINPUT type=radio name=Var5 value=Op1gtOpcioacuten1 ltbrgtltINPUT type=radio name=Var5 value=Op2checkedgt Opcioacuten 2 ltbrgtltINPUT type=radio name=Var5 value=Op3 gtOpcioacuten 3

Tabla 50

En este ejemplo la variable Var5 tendraacute el valor Op2

Campos ocultos type=hidden

Este tipo de campos no son visibles para el usuario Su uso tiene sentido en el caso de enviar alguacuten tipo de informacioacuten que no deba ser visualizada o variada por el lector de nuestra paacutegina Web El formato es

ltINPUT type= hidden name=Variable value=Valor gt

Con esta etiqueta asignariacuteamos a la Variable referenciada por name el Valor de value y se mandariacutea junto con el formulario sin que el usuario de la paacutegina se entere de nada Veamos un ejemplo en el Coacutedigo fuente 15

ltINPUT type=hidden name=Var6 value=tutankamongt

Coacutedigo fuente 15

copy Grupo EIDOS 4 Elementos del lenguaje II

47

Botoacuten de enviacuteo de datos type=submit

Con este argumento especificamos un botoacuten en el que al pulsar los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario El formato es

ltINPUT type= submit value=Mensaje a mostrargt

En este caso el paraacutemetro value indica el mensaje que se mostraraacute en el botoacuten Veamos un ejemplo en la Tabla 51

Ejemplo Resultado

ltINPUT type=submit value=Enviar los Datosgt

Tabla 51

Botoacuten graacutefico de enviacuteo de datos type=image

Con este argumento especificamos un botoacuten de tipo imagen en el que al igual que con el botoacuten anterior si pulsamos en la imagen los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario Su formato es el siguiente

ltINPUT type= image src=URL de la imagen name=Variablegt

Con el paraacutemetro src especificamos la URL de la imagen que seraacute insertada en el botoacuten En este caso en la variable referenciada por name se almacenaraacuten las coordenadas del punto de la imagen donde se halla pinchado (de forma que estas coordenadas podriacutean ser procesadas por el programa que recibe los datos del formulario)

Botoacuten de borrado de datos type=reset

Con este argumento especificamos un botoacuten que al ser pulsado borraraacute el contenido actual de todos los campos dejaacutendolos con sus valores por defecto Su formato es

ltINPUT type= reset value=Texto del botoacutengt

Con el paraacutemetro value especificamos el texto que etiquetaraacute al botoacuten

Ejemplo Resultado

ltINPUT type=reset value=Borrar datosgt

Tabla 52

Lenguaje HTML copy Grupo EIDOS

48

Entrada datos en muacuteltiples liacuteneas En un formulario tambieacuten podremos introducir un campo de texto que abarque varias liacuteneas Para ello usaremos la etiqueta ltTEXTAREAgt ltTEXTAREAgt Su formato es el siguiente

ltTEXTAREA name=Variable rows=Filas cols=ColumnasgtContenido por defectoltTEXTAREAgt

Los argumentos rows y cols nos van a permitir especificar respectivamente el nuacutemero de filas de texto visibles y el nuacutemero de columnas de texto visibles en el campo

Ejemplo Resultado

ltTEXTAREA name=Var7 rows=5 cols=40gtContenido por defectoltTEXTAREAgt

Tabla 53

Entrada de datos a traveacutes de campos de seleccioacuten Con los campos de seleccioacuten podremos desplegar una lista de opciones entre las que podremos seleccionar una Para ello usaremos la etiqueta ltSELECTgt ltSELECTgt Su formato es el siguiente

ltSELECT name=Variable multiple size=ngtltOPTION selected value=Valor_1gtPrimera OpcioacutenltOPTION value=Valor_2gtSegunda Opcioacuten

ltOPTION value=Valor_ngtEneacutesima Opcioacuten

ltSELECTgt

Figura 1

bull La variable referenciada por name tomaraacute el valor(value) de la opcioacuten seleccionada

bull Si especificamos el argumento muacuteltiple se mostraraacuten todas la opciones en forma de tabla El nuacutemero de opciones visibles en la tabla vendraacute dado por el argumento size

copy Grupo EIDOS 4 Elementos del lenguaje II

49

bull Con la etiqueta ltOPTIONgt iremos definiendo cada una de las opciones de la lista

bull El argumento selected va a determinar cuaacutel es la opcioacuten por defecto

Para finalizar vamos a ver el Coacutedigo fuente 16 correspondiente a una encuesta realizada por la editorial ficticia EditoPc y en la Figura 2 observamos el resultado del formulario

ltP align=centergtltBgtEDITORIAL ltIgtEditoPcltIgtltBgtltPgtltFORM action=mailtodireccionejemplo method = postgtNombreltINPUT type=text size=30 name=nombregtltBRgtE_mail ltINPUT type=text size=30 name=e_mailgtltPgtDeseas recibir informacioacuten sobreltINPUT type=checkbox name=infor1 value=InternetgtInternetltINPUT type=checkbox name=infor2 value=ProgramacioacutengtProgramacioacutenltINPUT type=checkbox name=infor3 value=SistOperativogtSistOperativoltINPUT type=checkbox name=infor4 value=OfimaacuteticagtOfimaacuteticaltPgtiquestTe conectas a Internet desde casa ltbrgtltINPUT type=radio name=intercasa value=sigtSiacuteltINPUT type=radio name=intercasa value=nogtNoltPgtiquestQueacute uso le das a tu ordenador ltBRgtltSELECT name=uso multiple size=3gtltOPTION selectedgtProfesionalltOPTIONgtDomeacutesticoltOPTIONgtOcioJuegosltSELECTgtltPgtCaracteriacutesticas de tu PCltBRgtltTEXTAREA name=caract rows=5 cols=40gtltTEXTAREAgtltPgtltINPUT type=submit value=Enviar datosgt ltINPUT type=reset value=Borrardatosgt

Coacutedigo fuente 16

Figura 2

Elementos del lenguaje III

Frames Las frames son una utilidad del HTML que nos permite dividir la ventana del navegador en diferentes subventanas que podraacuten ser manipuladas de manera independiente Esto nos permitiraacute mostrar una paacutegina web diferente en cada una de la subventanas o frames

Estructura de un documento con frames Un documento con frames se estructura de manera diferente a un documento HTML normal Asiacute en este tipo de documentos no apareceraacute la etiqueta ltBODYgt En su lugar se incluiraacute la etiqueta ltFRAMESETgt ltFRAMESETgt dentro de la cual se definiraacuten las distintas frames que se incluyan en el documento

La estructura general de un documento de este tipo seriacutea por tanto

ltHTMLgtltHEADgtCabeceraltHEADgtltFRAMESETgt

Definicioacuten de la distintas framesltFRAMESETgtltNOFRAMESgt

Instrucciones HTMLltNOFRAMESgt

ltHTMLgt

Lenguaje HTML copy Grupo EIDOS

52

Puede darse el caso de que programemos nuestro documento con frames siguiendo la estructura anterior y que el navegador que se use para leer el documento no soporte la caracteriacutestica de frames con lo cual no se mostraraacute nada de lo indicado entre las etiquetas ltFRAMESETgt y ltFRAMESETgtPara solucionar este problema todas las instrucciones HTML incluidas entre las etiquetas ltNOFRAMESgt y ltNOFRAMESgt seraacuten ejecutadas por los navegadores que no soportan las frames

La sintaxis de la etiqueta ltFRAMESETgt es

ltFRAMESET rows=Lista de filas cols=Lista de columnasgtltFRAME src=URL de la frame 1 name=Nombre de la frame 1gtltFRAME src=URL de la frame 2 name=Nombre de la frame 2gt

ltFRAME src=URL de la frame n name=Nombre de la frame ngt

ltFRAMESETgt

Como vemos por cada una de la frames que incluyamos en nuestro documento debemos incluir una etiqueta ltFRAMEgt indicando mediante sus argumentos la direccioacuten URL del documento que se insertaraacute en la subventana (src) y el nombre de la frame (name) Posteriormente describiremos la etiqueta ltFRAMEgt con maacutes detalle

Los argumentos de ltFRAMESETgt son rows y cols definieacutendose uacutenicamente uno de los dos atributos en funcioacuten de si la divisioacuten de la pantalla se realizaraacute por filas (rows) o por columnas (cols)

Por cada una de las subventanas que creemos debemos especificar su tamantildeo en puntos o en porcentaje del tamantildeo de cada subventana Asiacute por ejemplo si especificamos rows= 50 2525 crearemos tres subventanas horizontales ocupando la primera el 50 de la ventana principal y las otras dos el resto Si especificamos cols=100150 crearemos tres subventanas verticales ocupando la primera 100 puntos de la ventana principal la segunda 150 puntos y tercera el espacio restante

Vamos a verlo maacutes claramente con un par de ejemplos praacutecticos que vemos en la Tabla 54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 502525gt ltFRAMEsrc=Pagweb1htm name=Pagweb1gtltFRAMEsrc=Pagweb2htm name=Pagweb2gtltFRAMEsrc=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 28: Programacion web   lenguaje html

Lenguaje HTML copy Grupo EIDOS

32

La etiqueta que nos va a permitir la insercioacuten de imaacutegenes es ltIMGgt La imagen se insertaraacute justo en el punto del documento donde coloquemos dicha etiqueta pudiendo insertar imaacutegenes dentro de listas tablas o formularios

El formato de la etiqueta con sus posibles argumentos es el siguiente

ltIMG src=URL de la imagen alt=Texto alternativoalign=topmiddlebottonleftrigth border=Tamantildeoheight=Tamantildeo width=Tamantildeo hspace=margen vspace=margengt

bull src=URL de la imagen El atributo src nos va servir para indicar la URL de la imagen que

queremos insertar es decir el servidor y camino hasta llegar al fichero de la imagen

No seraacute necesario que la imagen que queremos insertar en nuestro documento esteacute en el ordenador local aunque siacute es recomendable ya que el acceso a las mismas puede ser maacutes lento

Por tanto es una buena praacutectica copiar todas las imaacutegenes que vayamos a incluir en nuestro documento HTML al ordenador local

Tabla 26

bull alt=Texto alternativo Nos va a permitir mostrar un texto alternativo para el caso en que el

navegador no sea capaz de mostrar la imagen Su uso es muy recomendable ya que cuando publiquemos nuestras paacuteginas en la WWW no sabremos desde queacute tipo de navegadores accederaacuten los internautas a nuestras paacuteginas

En la Tabla 27 vamos a ver un ejemplo

Si usas un navegador que no tiene ninguacuten problema para la visualizacioacuten de imaacutegenes desactiva temporalmente la opcioacuten de mostrar imaacutegenes prueba el ejemplo que muestra la Tabla 27 y compaacuteralo con el anterior

Tabla 27

copy Grupo EIDOS 3 Elementos del lenguaje I

33

bull align=topmiddlebotton leftrigth Nos permite indicar coacutemo se alinearaacute el texto que siga a la imagen

top alinea el texto con la parte superior de la imagen

middle con la parte central

bottom con la parte inferior

left imagen alineada a la izquierda de la paacutegina

rigth imagen alineada a la derecha de la paacutegina

Tabla 28

En el caso de que el texto que acompantildea a la imagen tenga maacutes de una liacutenea tan soacutelo la primera seraacute la que se alinearaacute seguacuten alguna de las anteriores alineaciones el resto de liacuteneas se incluiraacuten debajo de la imagen quedando un efecto bastante feo

Para solventar esto estaacuten las alineaciones LEFT (imagen alineada a la izquierda de la paacutegina) y RIGHT (imagen alineada a la derecha de la paacutegina) Las cuales permiten que la imagen se inserte dentro del paacuterrafo que la rodea produciendo un resultado mucho maacutes profesional en la integracioacuten de texto e imaacutegenes

Estas dos alineaciones no se podraacuten usar en combinacioacuten con las anteriores Veamos algunos ejemplos en la Tabla 29

Vemos como en el primer ejemplo la segunda liacutenea de texto aparece debajo de la imagen produciendo un efecto menos vistoso que en los dos ejemplos siguientes

Lenguaje HTML copy Grupo EIDOS

34

Tabla 29

bull border=Tamantildeo Permite antildeadirle un borde a la imagen del tamantildeo que le

especifiquemos

Si la imagen forma parte de un hiperenlace esta apareceraacute con un borde del color del hiperenlace Si no deseaacuteramos que aparezca este borde tendriacuteamos que especificar border=0

Tabla 30

bull height=Tamantildeo Permite especificar el alto de la imagen en puntos de pantalla

(pixels) o en del tamantildeo del documento

bull width=Tamantildeo Con este argumento especificaremos el ancho al que mostraremos la imagen en puntos de pantalla (pixels) o en del tamantildeo del documento

En el segundo de los ejemplos de la Tabla 31 el ancho de la imagen se ha extendido al 50 del total del ancho de la celda donde estaacute contenida la imagen Si pruebas este ejemplo en tu documento HTML la imagen se extenderaacute horizontalmente hasta ocupar el 50 del ancho de la paacutegina

copy Grupo EIDOS 3 Elementos del lenguaje I

35

Tabla 31

bull hspace=Margen hspace Horizontal Space Permite especificar el nuacutemero de espacios

horizontales (en puntos) que separaraacuten a la imagen de cualquier elemento que le siga o le anteceda

bull vspace=Margen vspace Vertical Space Con este argumento especificaremos el margen vertical (en puntos) que habraacute entre la imagen y cualquier otro elemento de nuestro documento

Tabla 32

Elementos del lenguaje II

Tablas HTML nos va a permitir la inclusioacuten de cualquiera de los elementos de nuestra paacutegina (texto imaacutegenes hiperenlaces listas etc) dentro de una tabla Gracias a lo cual conseguiremos dar una mayor y mejor estructuracioacuten a los contenidos de nuestros documentos Ademaacutes la definicioacuten de las tablas en HTML es muy abierta pudiendo en cualquier momento redimensionar la tabla es decir cambiar su nuacutemero de filas o de columnas cambiar el tamantildeo de alguna de sus celdas etc

La etiqueta que nos va a permitir la definicioacuten de tablas es ltTABLEgt ltTABLEgt

El formato general de la etiqueta sin ninguacuten argumento es el siguiente

ltTABLEgtltTR gt

ltTHgtContenido de la celda ltTHgtltTDgtContenido de la celda ltTDgt

ltTRgtltTABLEgt

TR Table Row TH Table Header TD Table Data

Vamos a analizar cada una de estas etiquetas de forma separada

1 ltTABLEgt ltTABLEgt Definicioacuten general de la tabla Dentro de ella definiremos las filas y columnas que la constituyen pudiendo incluso definir tablas dentro de tablas es decir tablas anidadas

Lenguaje HTML copy Grupo EIDOS

38

2 ltTRgt ltTRgt Definicioacuten de las filas de la tabla Por cada etiqueta ltTRgt que incluyamos se crearaacute una fila en la tabla No seraacute necesario indicar la etiqueta de cierre

3 ltTHgtltTHgt oacute ltTDgtltTDgt Definicioacuten de cada una de las celdas de la tabla Vemos que estas etiquetas estaacuten contenidas dentro de otra etiqueta de definicioacuten de fila de forma que por cada etiqueta ltTHgt o ltTDgt que incluyamos se crearaacute una celda dentro de la fila correspondiente La etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera es decir celdas cuyo contenido estaacute resaltado en negrita dejando la etiqueta ltTDgt para definir celdas de datos En este caso tampoco es necesario indicar las etiquetas de cierre

Todas estas etiquetas tienen sus respectivos argumentos Pero antes de analizar cada uno de ellos vamos a ver un ejemplo muy sencillito en la Tabla 33 que nos crearaacute una tabla de una sola celda (1 fila X 1 columna = 1 celda) Para ello usaremos la etiqueta de creacioacuten de tabla ltTABLEgt con el argumento border=1 (nos dibuja un borde de tamantildeo 1 alrededor de la tabla)

Ejemplo Resultado

ltTABLE border=1gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 33

Vamos ahora a analizar lo distintos argumentos que componen las etiquetas de la tabla analizaacutendolos desde lo general (la definicioacuten de la tabla) hasta lo especiacutefico (la definicioacuten de las celdas)

1 Definicioacuten de la tabla ltTABLEgt

ltTABLE border=n cellpadding=n cellspacing=n width=n oacute height=n oacute bgcolor=rrggbb oacute nombre gt

Contenido ltTABLEgt

bull border=n Si especificamos este argumento se dibujaraacute un borde alrededor de la

tabla del ancho que le indiquemos como muestra la Tabla 34

Ejemplo Resultado

Mi primera tabla ltTABLE border=4gtltTRgtltTDgtMi primera tablaltTABLEgt

Tabla 34

bull cellpadding=n Indica el espacio en puntos que separa el contenido de la celda con

el borde de la misma siendo 1 por defecto

copy Grupo EIDOS 4 Elementos del lenguaje II

39

Ejemplo Resultado

ltTABLE border=4 cellpadding=8gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 35

bull cellspacing=n Indica el espacio en puntos que separa a las celdas contenidas dentro de la tabla siendo 2 por defecto

bull width=n oacute Indica la anchura de la tabla en puntos o en en funcioacuten del ancho de la ventana del visualizador Si no indicamos este argumento el ancho de la tabla se ajustaraacute al tamantildeo del contenido de las celdas Esto es lo que ha ocurrido en el uacuteltimo ejemplo que hemos realizado Veamos un ejemplo en el Coacutedigo fuente 11 El resultado se muestra en la Tabla 36

ltTABLE border=4 width=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 11

Mi primera tabla

Tabla 36

bull height=n oacute Nos permite definir la altura de la tabla en puntos o en de la

altura de la ventana del visualizador Si indicamos este argumento lo recomendable es darlo en puntos ya que es maacutes complicado adecuarnos a la altura de la ventana del visualizador Al igual que en el caso anterior si no especificamos este argumento la altura se adecuaraacute al contenido de las celdas El Coacutedigo fuente 12 muestra un ejemplo y la Tabla 37 nos muestra el resultado

ltTABLE border=4 width=50 height=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 12

Mi primera tabla

Tabla 37

bull bgcolor= rrggbb o nombre del color Nos permite definir un color

de fondo para todas las celdas de la tabla Maacutes adelante veremos como podemos definir colores especiacuteficos para cada una de las celdas por separado

Lenguaje HTML copy Grupo EIDOS

40

Ejemplo Resultado

ltTABLE border=4 bgcolor=yellowgtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 38

2 Definicioacuten de las filas de la tabla ltTRgt

ltTR align=leftrightcenter valign=topmiddlebottombgcolor=rrggbb oacute nombregt

Antes de empezar a descifrar el significado de cada uno de los argumentos de esta etiqueta vamos a ver un ejemplo en la Tabla 39 de coacutemo se construiriacutea una tabla con dos filas (2 filas X 1 columna = 2 celdas)

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR gtltTDgtPrimera filaltTRgtltTDgtSegunda filaltTABLEgt

Segunda fila

Tabla 39

bull align=leftrightcenter Con este argumento vamos a indicar la alineacioacuten

horizontal (leftizquierda rightderecha centercentrado) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado Veamos un ejemplo en el Coacutedigo fuente 13 y su correspondiente resultado en la Tabla 40

ltTABLE border=4 width=50 gt ltTRgtltTDgtPrimera filaltTRalign=rightgtltTDgtSegunda filaltTABLEgt

Coacutedigo fuente 13

Primera fila

Segunda fila

Tabla 40

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten

vertical (toparriba middlecentrado bottomabajo) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado

copy Grupo EIDOS 4 Elementos del lenguaje II

41

bull bgcolor= rrggbb o nombre del color En este caso este argumento nos permitiraacute definir un color de fondo para todas las celdas de una fila veamos un ejemplo en la

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR bgcolor=yellowgtltTDgtPrimera

filaltTR bgcolor=greengtltTDgtSegunda

filaltTABLEgt

Segunda fila

Tabla 41

3 Definicioacuten de las celdas de la tabla ltTHgt oacute ltTDgt

ltTH oacute TD align=leftrightcenterjustifyvalign=topmiddlebottom bgcolor=rrggbb oacute nombre width=nrowspan=n colspan=ngt

Como ya explicamos anteriormente la etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera y la etiqueta ltTDgt para la creacioacuten de celdas de datos Vamos a completar nuestro ejemplo inicial antildeadieacutendole tres filas de dos celdas cada una (3 filas X 2 columnas = 6 celdas) Tabla 42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTDgtCelda 21ltTDgtCelda 22

ltTABLEgt Celda 21 Celda 22

Tabla 42

bull align=leftrightcenterjustify Con este argumento vamos a indicar la

alineacioacuten horizontal (left izquierda right derecha center centrado justifyjustificado) del contenido de cada celda por separado Su significado es el mismo que en la etiqueta ltTRgt

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten vertical (toparriba middlecentrado bottomabajo) del contenido de cada celda

bull bgcolor= rrggbb o nombre del color En este caso podremos definir un color de fondo para cada una de las celdas de manera independiente

bull width=n oacute Indica el ancho de la celda en puntos o en en funcioacuten del tamantildeo de la tabla

Lenguaje HTML copy Grupo EIDOS

42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera

1ltTHgtCabecera 2ltTR gtltTD align=rightgtCelda

11ltTD bgcolor=redgtCelda 12ltTRgtltTD

bgcolor=yellowgtCelda 21ltTDalign=centergtCelda 22ltTABLEgt

Celda 21 Celda 22

Tabla 43

bull rowspan=n Con este argumento podemos lograr que una celda concreta abarque maacutes de una fila ya sabemos que por defecto una celda ocupa una sola fila

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTD rowspan=2gtCelda

11ltTDgtCelda 12ltTRgtltTDgtCelda 22

ltTABLEgt

Celda 11 Celda 22

Tabla 44

bull colspan=n Con este argumento podemos lograr que una celda se expanda a maacutes

de una columna

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTD colspan=2

align=centergtCelda 22ltTABLEgt

Celda 22

Tabla 45

Para finalizar este tema sobre la creacioacuten de tablas vamos a ver el ejemplo que aparece en el Coacutedigo fuente 14 y su resultado en la Tabla 46

ltTABLE border=4gtltTR gtltTH colspan=3 bgcolor=redgtTiacutetuloltTR bgcolor=yellowgtltTHgtCabecera 1ltTHgtCabecera 2ltTHgtCabecera 3

copy Grupo EIDOS 4 Elementos del lenguaje II

43

ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTDgtCelda 13ltTRgtltTD rowspan=2gtCelda 21ltTD bgcolor=greengtCelda 22ltTDgtCelda 23ltTRgtltTDgtCelda 32ltTDgtCelda 33

ltTABLEgt

Coacutedigo fuente 14

Tiacutetulo

Cabecera 1 Cabecera 2 Cabecera 3

Celda 11 Celda 12 Celda 13

Celda 22 Celda 23 Celda 21

Celda 32 Celda 33

Tabla 46

Formularios El formulario es el elemento de HTML que nos va a permitir interactuar con los visitantes de nuestras paacuteginas web de forma que podemos solicitarle informacioacuten al usuario y procesarla De esta forma podremos crear en nuestras paacuteginas encuestas para solicitar la opinioacuten del visitante sobre alguacuten tema e incluso sobre el contenido de nuestra propia paacutegina web cuestionarios para evaluar la asimilacioacuten de contenidos sobre un tema concreto que se trate en la paacutegina etc

El contenido de la informacioacuten introducida por medio del formulario seraacute enviado a la direccioacuten URL donde resida el programa que se encargaraacute de procesar los datos A este tipo de programas externos se les denomina programas CGI (Common Gateway Interface)

La etiqueta HTML que nos va a permitir la creacioacuten de formularios es ltFORMgt Su formato es el siguiente

ltFORM action=URL del programa que trata el formulariomethod=postgetgt Elementos del formulario ltFORMgt

bull action=URL del programa que trata el formulario A traveacutes de este

argumento indicaremos como ya hemos mencionado la direccioacuten del fichero de programa que va a tratar la informacioacuten suministrada por el formulario

Tambieacuten podriacuteamos incluir como URL que trata el formulario una direccioacuten de correo electroacutenico Por tanto el valor de este argumento podriacutea ser action =mailto direccioacuten de correo

Nota Esta opcioacuten soacutelo funciona adecuadamente con el navegador Netscape Con el Explorer este enviacuteo dariacutea como resultado un correo en blanco Para que esta opcioacuten funcione de manera independiente del navegador que se esteacute utilizando se ha de emplear un programa externo que realice este proceso

Lenguaje HTML copy Grupo EIDOS

44

bull method=postget A traveacutes de este argumento indicaremos el meacutetodo empleado para transferir la informacioacuten generada por el formulario

Si indicamos post se produciraacute la modificacioacuten del documento destino como es el caso de enviar la informacioacuten a una direccioacuten de correo electroacutenico Mediante el meacutetodo get no se produciraacuten cambios en el documento destino

Dentro de un formulario podremos incluir cualquier texto o instruccioacuten HTML de las vistas a lo largo de los capiacutetulos anteriores ademaacutes claro estaacute de los elementos tiacutepicos de un formulario cajas de texto botones de seleccioacuten menuacutes de opciones etc Vamos a ver coacutemo se incluiraacuten estos elementos en un formulario

Entrada baacutesica de datos Para definir los distintos tipos de campos baacutesicos de entrada de datos usaremos la etiqueta ltINPUTgt

El formato es el siguiente

ltINPUT type= text password checkbox radio hidden submit image reset name=Variable value=Valor inicialgt

bull El argumento type determinaraacute el tipo de campo de entrada que estamos insertando A

continuacioacuten describiremos cada uno de ellos

bull El argumento name especifica el nombre de la variable que tomaraacute el valor introducido en el campo

bull El argumento value especifica el valor por defecto que tendraacute el campo

Vamos a continuacioacuten a describir los distintos tipos campos de entrada que vendraacuten dados por los valores del argumento type

Texto corto type=text

Con este argumento vamos a indicar que el campo a introducir seraacute un texto El formato seriacutea

ltINPUT type= text name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los nuevos atributos es

bull size=Tamantildeo Indicaremos el tamantildeo en caracteres de la ventana de introduccioacuten de texto

bull maxlength=Longitud maacutexima Indicaremos el nuacutemero maacuteximo de caracteres a introducir en el campo

Vamos a ver un ejemplo en la Tabla 47

copy Grupo EIDOS 4 Elementos del lenguaje II

45

Ejemplo Resultado

NombreltINPUT type=text name=Var1Value=Texto por defecto size=20 maxlength=25gt

Tabla 47

Claves type=password

Con este argumento indicamos que el campo a introducir seraacute una palabra clave por lo que los caracteres que se introduzcan seraacuten sustituidos por asteriscos en la visualizacioacuten por pantalla El formato es

ltINPUT type= password name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los distintos argumentos es el mismo que en el caso anterior Veamos un ejemplo en la Tabla 48

Ejemplo Resultado

ClaveltINPUT type=password name=Var2Value=tutankamon size=11 maxlength=10gt

Tabla 48

Botones de seleccioacuten type=checkbox

El checkbox es un botoacuten que presenta dos estados marcado (1) y desmarcado (0) Podremos variar su estado simplemente pinchando con el ratoacuten El formato es

ltINPUT type= checkbox name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto

Si incluimos el argumento value cuando el botoacuten esteacute marcado su variable asociada adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 49

Ejemplo Resultado

ltINPUT type=checkbox name=Var3 value=Op1 checkedgtOpcioacuten1 ltbrgtltINPUT type=checkbox name=Var4 value=Op2gt Opcioacuten 2

Tabla 49

Lenguaje HTML copy Grupo EIDOS

46

Seleccioacuten entre varias opciones type=radio

Este argumento se usa cuando hay que hacer una seleccioacuten entre varias alternativas excluyentes pudieacutendose seleccionar uacutenicamente una de las alternativas Debemos incluir una etiqueta radio por cada una de las posibles alternativas El formato es

ltINPUT type= radio name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto En este caso uacutenicamente uno de los botones de radio podraacute aparecer marcado ya que se usa para el caso de opciones excluyentes

Cuando un botoacuten esteacute seleccionado la variable asociada a la lista de botones adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 50

Ejemplo Resultado

ltINPUT type=radio name=Var5 value=Op1gtOpcioacuten1 ltbrgtltINPUT type=radio name=Var5 value=Op2checkedgt Opcioacuten 2 ltbrgtltINPUT type=radio name=Var5 value=Op3 gtOpcioacuten 3

Tabla 50

En este ejemplo la variable Var5 tendraacute el valor Op2

Campos ocultos type=hidden

Este tipo de campos no son visibles para el usuario Su uso tiene sentido en el caso de enviar alguacuten tipo de informacioacuten que no deba ser visualizada o variada por el lector de nuestra paacutegina Web El formato es

ltINPUT type= hidden name=Variable value=Valor gt

Con esta etiqueta asignariacuteamos a la Variable referenciada por name el Valor de value y se mandariacutea junto con el formulario sin que el usuario de la paacutegina se entere de nada Veamos un ejemplo en el Coacutedigo fuente 15

ltINPUT type=hidden name=Var6 value=tutankamongt

Coacutedigo fuente 15

copy Grupo EIDOS 4 Elementos del lenguaje II

47

Botoacuten de enviacuteo de datos type=submit

Con este argumento especificamos un botoacuten en el que al pulsar los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario El formato es

ltINPUT type= submit value=Mensaje a mostrargt

En este caso el paraacutemetro value indica el mensaje que se mostraraacute en el botoacuten Veamos un ejemplo en la Tabla 51

Ejemplo Resultado

ltINPUT type=submit value=Enviar los Datosgt

Tabla 51

Botoacuten graacutefico de enviacuteo de datos type=image

Con este argumento especificamos un botoacuten de tipo imagen en el que al igual que con el botoacuten anterior si pulsamos en la imagen los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario Su formato es el siguiente

ltINPUT type= image src=URL de la imagen name=Variablegt

Con el paraacutemetro src especificamos la URL de la imagen que seraacute insertada en el botoacuten En este caso en la variable referenciada por name se almacenaraacuten las coordenadas del punto de la imagen donde se halla pinchado (de forma que estas coordenadas podriacutean ser procesadas por el programa que recibe los datos del formulario)

Botoacuten de borrado de datos type=reset

Con este argumento especificamos un botoacuten que al ser pulsado borraraacute el contenido actual de todos los campos dejaacutendolos con sus valores por defecto Su formato es

ltINPUT type= reset value=Texto del botoacutengt

Con el paraacutemetro value especificamos el texto que etiquetaraacute al botoacuten

Ejemplo Resultado

ltINPUT type=reset value=Borrar datosgt

Tabla 52

Lenguaje HTML copy Grupo EIDOS

48

Entrada datos en muacuteltiples liacuteneas En un formulario tambieacuten podremos introducir un campo de texto que abarque varias liacuteneas Para ello usaremos la etiqueta ltTEXTAREAgt ltTEXTAREAgt Su formato es el siguiente

ltTEXTAREA name=Variable rows=Filas cols=ColumnasgtContenido por defectoltTEXTAREAgt

Los argumentos rows y cols nos van a permitir especificar respectivamente el nuacutemero de filas de texto visibles y el nuacutemero de columnas de texto visibles en el campo

Ejemplo Resultado

ltTEXTAREA name=Var7 rows=5 cols=40gtContenido por defectoltTEXTAREAgt

Tabla 53

Entrada de datos a traveacutes de campos de seleccioacuten Con los campos de seleccioacuten podremos desplegar una lista de opciones entre las que podremos seleccionar una Para ello usaremos la etiqueta ltSELECTgt ltSELECTgt Su formato es el siguiente

ltSELECT name=Variable multiple size=ngtltOPTION selected value=Valor_1gtPrimera OpcioacutenltOPTION value=Valor_2gtSegunda Opcioacuten

ltOPTION value=Valor_ngtEneacutesima Opcioacuten

ltSELECTgt

Figura 1

bull La variable referenciada por name tomaraacute el valor(value) de la opcioacuten seleccionada

bull Si especificamos el argumento muacuteltiple se mostraraacuten todas la opciones en forma de tabla El nuacutemero de opciones visibles en la tabla vendraacute dado por el argumento size

copy Grupo EIDOS 4 Elementos del lenguaje II

49

bull Con la etiqueta ltOPTIONgt iremos definiendo cada una de las opciones de la lista

bull El argumento selected va a determinar cuaacutel es la opcioacuten por defecto

Para finalizar vamos a ver el Coacutedigo fuente 16 correspondiente a una encuesta realizada por la editorial ficticia EditoPc y en la Figura 2 observamos el resultado del formulario

ltP align=centergtltBgtEDITORIAL ltIgtEditoPcltIgtltBgtltPgtltFORM action=mailtodireccionejemplo method = postgtNombreltINPUT type=text size=30 name=nombregtltBRgtE_mail ltINPUT type=text size=30 name=e_mailgtltPgtDeseas recibir informacioacuten sobreltINPUT type=checkbox name=infor1 value=InternetgtInternetltINPUT type=checkbox name=infor2 value=ProgramacioacutengtProgramacioacutenltINPUT type=checkbox name=infor3 value=SistOperativogtSistOperativoltINPUT type=checkbox name=infor4 value=OfimaacuteticagtOfimaacuteticaltPgtiquestTe conectas a Internet desde casa ltbrgtltINPUT type=radio name=intercasa value=sigtSiacuteltINPUT type=radio name=intercasa value=nogtNoltPgtiquestQueacute uso le das a tu ordenador ltBRgtltSELECT name=uso multiple size=3gtltOPTION selectedgtProfesionalltOPTIONgtDomeacutesticoltOPTIONgtOcioJuegosltSELECTgtltPgtCaracteriacutesticas de tu PCltBRgtltTEXTAREA name=caract rows=5 cols=40gtltTEXTAREAgtltPgtltINPUT type=submit value=Enviar datosgt ltINPUT type=reset value=Borrardatosgt

Coacutedigo fuente 16

Figura 2

Elementos del lenguaje III

Frames Las frames son una utilidad del HTML que nos permite dividir la ventana del navegador en diferentes subventanas que podraacuten ser manipuladas de manera independiente Esto nos permitiraacute mostrar una paacutegina web diferente en cada una de la subventanas o frames

Estructura de un documento con frames Un documento con frames se estructura de manera diferente a un documento HTML normal Asiacute en este tipo de documentos no apareceraacute la etiqueta ltBODYgt En su lugar se incluiraacute la etiqueta ltFRAMESETgt ltFRAMESETgt dentro de la cual se definiraacuten las distintas frames que se incluyan en el documento

La estructura general de un documento de este tipo seriacutea por tanto

ltHTMLgtltHEADgtCabeceraltHEADgtltFRAMESETgt

Definicioacuten de la distintas framesltFRAMESETgtltNOFRAMESgt

Instrucciones HTMLltNOFRAMESgt

ltHTMLgt

Lenguaje HTML copy Grupo EIDOS

52

Puede darse el caso de que programemos nuestro documento con frames siguiendo la estructura anterior y que el navegador que se use para leer el documento no soporte la caracteriacutestica de frames con lo cual no se mostraraacute nada de lo indicado entre las etiquetas ltFRAMESETgt y ltFRAMESETgtPara solucionar este problema todas las instrucciones HTML incluidas entre las etiquetas ltNOFRAMESgt y ltNOFRAMESgt seraacuten ejecutadas por los navegadores que no soportan las frames

La sintaxis de la etiqueta ltFRAMESETgt es

ltFRAMESET rows=Lista de filas cols=Lista de columnasgtltFRAME src=URL de la frame 1 name=Nombre de la frame 1gtltFRAME src=URL de la frame 2 name=Nombre de la frame 2gt

ltFRAME src=URL de la frame n name=Nombre de la frame ngt

ltFRAMESETgt

Como vemos por cada una de la frames que incluyamos en nuestro documento debemos incluir una etiqueta ltFRAMEgt indicando mediante sus argumentos la direccioacuten URL del documento que se insertaraacute en la subventana (src) y el nombre de la frame (name) Posteriormente describiremos la etiqueta ltFRAMEgt con maacutes detalle

Los argumentos de ltFRAMESETgt son rows y cols definieacutendose uacutenicamente uno de los dos atributos en funcioacuten de si la divisioacuten de la pantalla se realizaraacute por filas (rows) o por columnas (cols)

Por cada una de las subventanas que creemos debemos especificar su tamantildeo en puntos o en porcentaje del tamantildeo de cada subventana Asiacute por ejemplo si especificamos rows= 50 2525 crearemos tres subventanas horizontales ocupando la primera el 50 de la ventana principal y las otras dos el resto Si especificamos cols=100150 crearemos tres subventanas verticales ocupando la primera 100 puntos de la ventana principal la segunda 150 puntos y tercera el espacio restante

Vamos a verlo maacutes claramente con un par de ejemplos praacutecticos que vemos en la Tabla 54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 502525gt ltFRAMEsrc=Pagweb1htm name=Pagweb1gtltFRAMEsrc=Pagweb2htm name=Pagweb2gtltFRAMEsrc=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 29: Programacion web   lenguaje html

copy Grupo EIDOS 3 Elementos del lenguaje I

33

bull align=topmiddlebotton leftrigth Nos permite indicar coacutemo se alinearaacute el texto que siga a la imagen

top alinea el texto con la parte superior de la imagen

middle con la parte central

bottom con la parte inferior

left imagen alineada a la izquierda de la paacutegina

rigth imagen alineada a la derecha de la paacutegina

Tabla 28

En el caso de que el texto que acompantildea a la imagen tenga maacutes de una liacutenea tan soacutelo la primera seraacute la que se alinearaacute seguacuten alguna de las anteriores alineaciones el resto de liacuteneas se incluiraacuten debajo de la imagen quedando un efecto bastante feo

Para solventar esto estaacuten las alineaciones LEFT (imagen alineada a la izquierda de la paacutegina) y RIGHT (imagen alineada a la derecha de la paacutegina) Las cuales permiten que la imagen se inserte dentro del paacuterrafo que la rodea produciendo un resultado mucho maacutes profesional en la integracioacuten de texto e imaacutegenes

Estas dos alineaciones no se podraacuten usar en combinacioacuten con las anteriores Veamos algunos ejemplos en la Tabla 29

Vemos como en el primer ejemplo la segunda liacutenea de texto aparece debajo de la imagen produciendo un efecto menos vistoso que en los dos ejemplos siguientes

Lenguaje HTML copy Grupo EIDOS

34

Tabla 29

bull border=Tamantildeo Permite antildeadirle un borde a la imagen del tamantildeo que le

especifiquemos

Si la imagen forma parte de un hiperenlace esta apareceraacute con un borde del color del hiperenlace Si no deseaacuteramos que aparezca este borde tendriacuteamos que especificar border=0

Tabla 30

bull height=Tamantildeo Permite especificar el alto de la imagen en puntos de pantalla

(pixels) o en del tamantildeo del documento

bull width=Tamantildeo Con este argumento especificaremos el ancho al que mostraremos la imagen en puntos de pantalla (pixels) o en del tamantildeo del documento

En el segundo de los ejemplos de la Tabla 31 el ancho de la imagen se ha extendido al 50 del total del ancho de la celda donde estaacute contenida la imagen Si pruebas este ejemplo en tu documento HTML la imagen se extenderaacute horizontalmente hasta ocupar el 50 del ancho de la paacutegina

copy Grupo EIDOS 3 Elementos del lenguaje I

35

Tabla 31

bull hspace=Margen hspace Horizontal Space Permite especificar el nuacutemero de espacios

horizontales (en puntos) que separaraacuten a la imagen de cualquier elemento que le siga o le anteceda

bull vspace=Margen vspace Vertical Space Con este argumento especificaremos el margen vertical (en puntos) que habraacute entre la imagen y cualquier otro elemento de nuestro documento

Tabla 32

Elementos del lenguaje II

Tablas HTML nos va a permitir la inclusioacuten de cualquiera de los elementos de nuestra paacutegina (texto imaacutegenes hiperenlaces listas etc) dentro de una tabla Gracias a lo cual conseguiremos dar una mayor y mejor estructuracioacuten a los contenidos de nuestros documentos Ademaacutes la definicioacuten de las tablas en HTML es muy abierta pudiendo en cualquier momento redimensionar la tabla es decir cambiar su nuacutemero de filas o de columnas cambiar el tamantildeo de alguna de sus celdas etc

La etiqueta que nos va a permitir la definicioacuten de tablas es ltTABLEgt ltTABLEgt

El formato general de la etiqueta sin ninguacuten argumento es el siguiente

ltTABLEgtltTR gt

ltTHgtContenido de la celda ltTHgtltTDgtContenido de la celda ltTDgt

ltTRgtltTABLEgt

TR Table Row TH Table Header TD Table Data

Vamos a analizar cada una de estas etiquetas de forma separada

1 ltTABLEgt ltTABLEgt Definicioacuten general de la tabla Dentro de ella definiremos las filas y columnas que la constituyen pudiendo incluso definir tablas dentro de tablas es decir tablas anidadas

Lenguaje HTML copy Grupo EIDOS

38

2 ltTRgt ltTRgt Definicioacuten de las filas de la tabla Por cada etiqueta ltTRgt que incluyamos se crearaacute una fila en la tabla No seraacute necesario indicar la etiqueta de cierre

3 ltTHgtltTHgt oacute ltTDgtltTDgt Definicioacuten de cada una de las celdas de la tabla Vemos que estas etiquetas estaacuten contenidas dentro de otra etiqueta de definicioacuten de fila de forma que por cada etiqueta ltTHgt o ltTDgt que incluyamos se crearaacute una celda dentro de la fila correspondiente La etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera es decir celdas cuyo contenido estaacute resaltado en negrita dejando la etiqueta ltTDgt para definir celdas de datos En este caso tampoco es necesario indicar las etiquetas de cierre

Todas estas etiquetas tienen sus respectivos argumentos Pero antes de analizar cada uno de ellos vamos a ver un ejemplo muy sencillito en la Tabla 33 que nos crearaacute una tabla de una sola celda (1 fila X 1 columna = 1 celda) Para ello usaremos la etiqueta de creacioacuten de tabla ltTABLEgt con el argumento border=1 (nos dibuja un borde de tamantildeo 1 alrededor de la tabla)

Ejemplo Resultado

ltTABLE border=1gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 33

Vamos ahora a analizar lo distintos argumentos que componen las etiquetas de la tabla analizaacutendolos desde lo general (la definicioacuten de la tabla) hasta lo especiacutefico (la definicioacuten de las celdas)

1 Definicioacuten de la tabla ltTABLEgt

ltTABLE border=n cellpadding=n cellspacing=n width=n oacute height=n oacute bgcolor=rrggbb oacute nombre gt

Contenido ltTABLEgt

bull border=n Si especificamos este argumento se dibujaraacute un borde alrededor de la

tabla del ancho que le indiquemos como muestra la Tabla 34

Ejemplo Resultado

Mi primera tabla ltTABLE border=4gtltTRgtltTDgtMi primera tablaltTABLEgt

Tabla 34

bull cellpadding=n Indica el espacio en puntos que separa el contenido de la celda con

el borde de la misma siendo 1 por defecto

copy Grupo EIDOS 4 Elementos del lenguaje II

39

Ejemplo Resultado

ltTABLE border=4 cellpadding=8gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 35

bull cellspacing=n Indica el espacio en puntos que separa a las celdas contenidas dentro de la tabla siendo 2 por defecto

bull width=n oacute Indica la anchura de la tabla en puntos o en en funcioacuten del ancho de la ventana del visualizador Si no indicamos este argumento el ancho de la tabla se ajustaraacute al tamantildeo del contenido de las celdas Esto es lo que ha ocurrido en el uacuteltimo ejemplo que hemos realizado Veamos un ejemplo en el Coacutedigo fuente 11 El resultado se muestra en la Tabla 36

ltTABLE border=4 width=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 11

Mi primera tabla

Tabla 36

bull height=n oacute Nos permite definir la altura de la tabla en puntos o en de la

altura de la ventana del visualizador Si indicamos este argumento lo recomendable es darlo en puntos ya que es maacutes complicado adecuarnos a la altura de la ventana del visualizador Al igual que en el caso anterior si no especificamos este argumento la altura se adecuaraacute al contenido de las celdas El Coacutedigo fuente 12 muestra un ejemplo y la Tabla 37 nos muestra el resultado

ltTABLE border=4 width=50 height=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 12

Mi primera tabla

Tabla 37

bull bgcolor= rrggbb o nombre del color Nos permite definir un color

de fondo para todas las celdas de la tabla Maacutes adelante veremos como podemos definir colores especiacuteficos para cada una de las celdas por separado

Lenguaje HTML copy Grupo EIDOS

40

Ejemplo Resultado

ltTABLE border=4 bgcolor=yellowgtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 38

2 Definicioacuten de las filas de la tabla ltTRgt

ltTR align=leftrightcenter valign=topmiddlebottombgcolor=rrggbb oacute nombregt

Antes de empezar a descifrar el significado de cada uno de los argumentos de esta etiqueta vamos a ver un ejemplo en la Tabla 39 de coacutemo se construiriacutea una tabla con dos filas (2 filas X 1 columna = 2 celdas)

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR gtltTDgtPrimera filaltTRgtltTDgtSegunda filaltTABLEgt

Segunda fila

Tabla 39

bull align=leftrightcenter Con este argumento vamos a indicar la alineacioacuten

horizontal (leftizquierda rightderecha centercentrado) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado Veamos un ejemplo en el Coacutedigo fuente 13 y su correspondiente resultado en la Tabla 40

ltTABLE border=4 width=50 gt ltTRgtltTDgtPrimera filaltTRalign=rightgtltTDgtSegunda filaltTABLEgt

Coacutedigo fuente 13

Primera fila

Segunda fila

Tabla 40

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten

vertical (toparriba middlecentrado bottomabajo) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado

copy Grupo EIDOS 4 Elementos del lenguaje II

41

bull bgcolor= rrggbb o nombre del color En este caso este argumento nos permitiraacute definir un color de fondo para todas las celdas de una fila veamos un ejemplo en la

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR bgcolor=yellowgtltTDgtPrimera

filaltTR bgcolor=greengtltTDgtSegunda

filaltTABLEgt

Segunda fila

Tabla 41

3 Definicioacuten de las celdas de la tabla ltTHgt oacute ltTDgt

ltTH oacute TD align=leftrightcenterjustifyvalign=topmiddlebottom bgcolor=rrggbb oacute nombre width=nrowspan=n colspan=ngt

Como ya explicamos anteriormente la etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera y la etiqueta ltTDgt para la creacioacuten de celdas de datos Vamos a completar nuestro ejemplo inicial antildeadieacutendole tres filas de dos celdas cada una (3 filas X 2 columnas = 6 celdas) Tabla 42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTDgtCelda 21ltTDgtCelda 22

ltTABLEgt Celda 21 Celda 22

Tabla 42

bull align=leftrightcenterjustify Con este argumento vamos a indicar la

alineacioacuten horizontal (left izquierda right derecha center centrado justifyjustificado) del contenido de cada celda por separado Su significado es el mismo que en la etiqueta ltTRgt

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten vertical (toparriba middlecentrado bottomabajo) del contenido de cada celda

bull bgcolor= rrggbb o nombre del color En este caso podremos definir un color de fondo para cada una de las celdas de manera independiente

bull width=n oacute Indica el ancho de la celda en puntos o en en funcioacuten del tamantildeo de la tabla

Lenguaje HTML copy Grupo EIDOS

42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera

1ltTHgtCabecera 2ltTR gtltTD align=rightgtCelda

11ltTD bgcolor=redgtCelda 12ltTRgtltTD

bgcolor=yellowgtCelda 21ltTDalign=centergtCelda 22ltTABLEgt

Celda 21 Celda 22

Tabla 43

bull rowspan=n Con este argumento podemos lograr que una celda concreta abarque maacutes de una fila ya sabemos que por defecto una celda ocupa una sola fila

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTD rowspan=2gtCelda

11ltTDgtCelda 12ltTRgtltTDgtCelda 22

ltTABLEgt

Celda 11 Celda 22

Tabla 44

bull colspan=n Con este argumento podemos lograr que una celda se expanda a maacutes

de una columna

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTD colspan=2

align=centergtCelda 22ltTABLEgt

Celda 22

Tabla 45

Para finalizar este tema sobre la creacioacuten de tablas vamos a ver el ejemplo que aparece en el Coacutedigo fuente 14 y su resultado en la Tabla 46

ltTABLE border=4gtltTR gtltTH colspan=3 bgcolor=redgtTiacutetuloltTR bgcolor=yellowgtltTHgtCabecera 1ltTHgtCabecera 2ltTHgtCabecera 3

copy Grupo EIDOS 4 Elementos del lenguaje II

43

ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTDgtCelda 13ltTRgtltTD rowspan=2gtCelda 21ltTD bgcolor=greengtCelda 22ltTDgtCelda 23ltTRgtltTDgtCelda 32ltTDgtCelda 33

ltTABLEgt

Coacutedigo fuente 14

Tiacutetulo

Cabecera 1 Cabecera 2 Cabecera 3

Celda 11 Celda 12 Celda 13

Celda 22 Celda 23 Celda 21

Celda 32 Celda 33

Tabla 46

Formularios El formulario es el elemento de HTML que nos va a permitir interactuar con los visitantes de nuestras paacuteginas web de forma que podemos solicitarle informacioacuten al usuario y procesarla De esta forma podremos crear en nuestras paacuteginas encuestas para solicitar la opinioacuten del visitante sobre alguacuten tema e incluso sobre el contenido de nuestra propia paacutegina web cuestionarios para evaluar la asimilacioacuten de contenidos sobre un tema concreto que se trate en la paacutegina etc

El contenido de la informacioacuten introducida por medio del formulario seraacute enviado a la direccioacuten URL donde resida el programa que se encargaraacute de procesar los datos A este tipo de programas externos se les denomina programas CGI (Common Gateway Interface)

La etiqueta HTML que nos va a permitir la creacioacuten de formularios es ltFORMgt Su formato es el siguiente

ltFORM action=URL del programa que trata el formulariomethod=postgetgt Elementos del formulario ltFORMgt

bull action=URL del programa que trata el formulario A traveacutes de este

argumento indicaremos como ya hemos mencionado la direccioacuten del fichero de programa que va a tratar la informacioacuten suministrada por el formulario

Tambieacuten podriacuteamos incluir como URL que trata el formulario una direccioacuten de correo electroacutenico Por tanto el valor de este argumento podriacutea ser action =mailto direccioacuten de correo

Nota Esta opcioacuten soacutelo funciona adecuadamente con el navegador Netscape Con el Explorer este enviacuteo dariacutea como resultado un correo en blanco Para que esta opcioacuten funcione de manera independiente del navegador que se esteacute utilizando se ha de emplear un programa externo que realice este proceso

Lenguaje HTML copy Grupo EIDOS

44

bull method=postget A traveacutes de este argumento indicaremos el meacutetodo empleado para transferir la informacioacuten generada por el formulario

Si indicamos post se produciraacute la modificacioacuten del documento destino como es el caso de enviar la informacioacuten a una direccioacuten de correo electroacutenico Mediante el meacutetodo get no se produciraacuten cambios en el documento destino

Dentro de un formulario podremos incluir cualquier texto o instruccioacuten HTML de las vistas a lo largo de los capiacutetulos anteriores ademaacutes claro estaacute de los elementos tiacutepicos de un formulario cajas de texto botones de seleccioacuten menuacutes de opciones etc Vamos a ver coacutemo se incluiraacuten estos elementos en un formulario

Entrada baacutesica de datos Para definir los distintos tipos de campos baacutesicos de entrada de datos usaremos la etiqueta ltINPUTgt

El formato es el siguiente

ltINPUT type= text password checkbox radio hidden submit image reset name=Variable value=Valor inicialgt

bull El argumento type determinaraacute el tipo de campo de entrada que estamos insertando A

continuacioacuten describiremos cada uno de ellos

bull El argumento name especifica el nombre de la variable que tomaraacute el valor introducido en el campo

bull El argumento value especifica el valor por defecto que tendraacute el campo

Vamos a continuacioacuten a describir los distintos tipos campos de entrada que vendraacuten dados por los valores del argumento type

Texto corto type=text

Con este argumento vamos a indicar que el campo a introducir seraacute un texto El formato seriacutea

ltINPUT type= text name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los nuevos atributos es

bull size=Tamantildeo Indicaremos el tamantildeo en caracteres de la ventana de introduccioacuten de texto

bull maxlength=Longitud maacutexima Indicaremos el nuacutemero maacuteximo de caracteres a introducir en el campo

Vamos a ver un ejemplo en la Tabla 47

copy Grupo EIDOS 4 Elementos del lenguaje II

45

Ejemplo Resultado

NombreltINPUT type=text name=Var1Value=Texto por defecto size=20 maxlength=25gt

Tabla 47

Claves type=password

Con este argumento indicamos que el campo a introducir seraacute una palabra clave por lo que los caracteres que se introduzcan seraacuten sustituidos por asteriscos en la visualizacioacuten por pantalla El formato es

ltINPUT type= password name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los distintos argumentos es el mismo que en el caso anterior Veamos un ejemplo en la Tabla 48

Ejemplo Resultado

ClaveltINPUT type=password name=Var2Value=tutankamon size=11 maxlength=10gt

Tabla 48

Botones de seleccioacuten type=checkbox

El checkbox es un botoacuten que presenta dos estados marcado (1) y desmarcado (0) Podremos variar su estado simplemente pinchando con el ratoacuten El formato es

ltINPUT type= checkbox name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto

Si incluimos el argumento value cuando el botoacuten esteacute marcado su variable asociada adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 49

Ejemplo Resultado

ltINPUT type=checkbox name=Var3 value=Op1 checkedgtOpcioacuten1 ltbrgtltINPUT type=checkbox name=Var4 value=Op2gt Opcioacuten 2

Tabla 49

Lenguaje HTML copy Grupo EIDOS

46

Seleccioacuten entre varias opciones type=radio

Este argumento se usa cuando hay que hacer una seleccioacuten entre varias alternativas excluyentes pudieacutendose seleccionar uacutenicamente una de las alternativas Debemos incluir una etiqueta radio por cada una de las posibles alternativas El formato es

ltINPUT type= radio name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto En este caso uacutenicamente uno de los botones de radio podraacute aparecer marcado ya que se usa para el caso de opciones excluyentes

Cuando un botoacuten esteacute seleccionado la variable asociada a la lista de botones adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 50

Ejemplo Resultado

ltINPUT type=radio name=Var5 value=Op1gtOpcioacuten1 ltbrgtltINPUT type=radio name=Var5 value=Op2checkedgt Opcioacuten 2 ltbrgtltINPUT type=radio name=Var5 value=Op3 gtOpcioacuten 3

Tabla 50

En este ejemplo la variable Var5 tendraacute el valor Op2

Campos ocultos type=hidden

Este tipo de campos no son visibles para el usuario Su uso tiene sentido en el caso de enviar alguacuten tipo de informacioacuten que no deba ser visualizada o variada por el lector de nuestra paacutegina Web El formato es

ltINPUT type= hidden name=Variable value=Valor gt

Con esta etiqueta asignariacuteamos a la Variable referenciada por name el Valor de value y se mandariacutea junto con el formulario sin que el usuario de la paacutegina se entere de nada Veamos un ejemplo en el Coacutedigo fuente 15

ltINPUT type=hidden name=Var6 value=tutankamongt

Coacutedigo fuente 15

copy Grupo EIDOS 4 Elementos del lenguaje II

47

Botoacuten de enviacuteo de datos type=submit

Con este argumento especificamos un botoacuten en el que al pulsar los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario El formato es

ltINPUT type= submit value=Mensaje a mostrargt

En este caso el paraacutemetro value indica el mensaje que se mostraraacute en el botoacuten Veamos un ejemplo en la Tabla 51

Ejemplo Resultado

ltINPUT type=submit value=Enviar los Datosgt

Tabla 51

Botoacuten graacutefico de enviacuteo de datos type=image

Con este argumento especificamos un botoacuten de tipo imagen en el que al igual que con el botoacuten anterior si pulsamos en la imagen los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario Su formato es el siguiente

ltINPUT type= image src=URL de la imagen name=Variablegt

Con el paraacutemetro src especificamos la URL de la imagen que seraacute insertada en el botoacuten En este caso en la variable referenciada por name se almacenaraacuten las coordenadas del punto de la imagen donde se halla pinchado (de forma que estas coordenadas podriacutean ser procesadas por el programa que recibe los datos del formulario)

Botoacuten de borrado de datos type=reset

Con este argumento especificamos un botoacuten que al ser pulsado borraraacute el contenido actual de todos los campos dejaacutendolos con sus valores por defecto Su formato es

ltINPUT type= reset value=Texto del botoacutengt

Con el paraacutemetro value especificamos el texto que etiquetaraacute al botoacuten

Ejemplo Resultado

ltINPUT type=reset value=Borrar datosgt

Tabla 52

Lenguaje HTML copy Grupo EIDOS

48

Entrada datos en muacuteltiples liacuteneas En un formulario tambieacuten podremos introducir un campo de texto que abarque varias liacuteneas Para ello usaremos la etiqueta ltTEXTAREAgt ltTEXTAREAgt Su formato es el siguiente

ltTEXTAREA name=Variable rows=Filas cols=ColumnasgtContenido por defectoltTEXTAREAgt

Los argumentos rows y cols nos van a permitir especificar respectivamente el nuacutemero de filas de texto visibles y el nuacutemero de columnas de texto visibles en el campo

Ejemplo Resultado

ltTEXTAREA name=Var7 rows=5 cols=40gtContenido por defectoltTEXTAREAgt

Tabla 53

Entrada de datos a traveacutes de campos de seleccioacuten Con los campos de seleccioacuten podremos desplegar una lista de opciones entre las que podremos seleccionar una Para ello usaremos la etiqueta ltSELECTgt ltSELECTgt Su formato es el siguiente

ltSELECT name=Variable multiple size=ngtltOPTION selected value=Valor_1gtPrimera OpcioacutenltOPTION value=Valor_2gtSegunda Opcioacuten

ltOPTION value=Valor_ngtEneacutesima Opcioacuten

ltSELECTgt

Figura 1

bull La variable referenciada por name tomaraacute el valor(value) de la opcioacuten seleccionada

bull Si especificamos el argumento muacuteltiple se mostraraacuten todas la opciones en forma de tabla El nuacutemero de opciones visibles en la tabla vendraacute dado por el argumento size

copy Grupo EIDOS 4 Elementos del lenguaje II

49

bull Con la etiqueta ltOPTIONgt iremos definiendo cada una de las opciones de la lista

bull El argumento selected va a determinar cuaacutel es la opcioacuten por defecto

Para finalizar vamos a ver el Coacutedigo fuente 16 correspondiente a una encuesta realizada por la editorial ficticia EditoPc y en la Figura 2 observamos el resultado del formulario

ltP align=centergtltBgtEDITORIAL ltIgtEditoPcltIgtltBgtltPgtltFORM action=mailtodireccionejemplo method = postgtNombreltINPUT type=text size=30 name=nombregtltBRgtE_mail ltINPUT type=text size=30 name=e_mailgtltPgtDeseas recibir informacioacuten sobreltINPUT type=checkbox name=infor1 value=InternetgtInternetltINPUT type=checkbox name=infor2 value=ProgramacioacutengtProgramacioacutenltINPUT type=checkbox name=infor3 value=SistOperativogtSistOperativoltINPUT type=checkbox name=infor4 value=OfimaacuteticagtOfimaacuteticaltPgtiquestTe conectas a Internet desde casa ltbrgtltINPUT type=radio name=intercasa value=sigtSiacuteltINPUT type=radio name=intercasa value=nogtNoltPgtiquestQueacute uso le das a tu ordenador ltBRgtltSELECT name=uso multiple size=3gtltOPTION selectedgtProfesionalltOPTIONgtDomeacutesticoltOPTIONgtOcioJuegosltSELECTgtltPgtCaracteriacutesticas de tu PCltBRgtltTEXTAREA name=caract rows=5 cols=40gtltTEXTAREAgtltPgtltINPUT type=submit value=Enviar datosgt ltINPUT type=reset value=Borrardatosgt

Coacutedigo fuente 16

Figura 2

Elementos del lenguaje III

Frames Las frames son una utilidad del HTML que nos permite dividir la ventana del navegador en diferentes subventanas que podraacuten ser manipuladas de manera independiente Esto nos permitiraacute mostrar una paacutegina web diferente en cada una de la subventanas o frames

Estructura de un documento con frames Un documento con frames se estructura de manera diferente a un documento HTML normal Asiacute en este tipo de documentos no apareceraacute la etiqueta ltBODYgt En su lugar se incluiraacute la etiqueta ltFRAMESETgt ltFRAMESETgt dentro de la cual se definiraacuten las distintas frames que se incluyan en el documento

La estructura general de un documento de este tipo seriacutea por tanto

ltHTMLgtltHEADgtCabeceraltHEADgtltFRAMESETgt

Definicioacuten de la distintas framesltFRAMESETgtltNOFRAMESgt

Instrucciones HTMLltNOFRAMESgt

ltHTMLgt

Lenguaje HTML copy Grupo EIDOS

52

Puede darse el caso de que programemos nuestro documento con frames siguiendo la estructura anterior y que el navegador que se use para leer el documento no soporte la caracteriacutestica de frames con lo cual no se mostraraacute nada de lo indicado entre las etiquetas ltFRAMESETgt y ltFRAMESETgtPara solucionar este problema todas las instrucciones HTML incluidas entre las etiquetas ltNOFRAMESgt y ltNOFRAMESgt seraacuten ejecutadas por los navegadores que no soportan las frames

La sintaxis de la etiqueta ltFRAMESETgt es

ltFRAMESET rows=Lista de filas cols=Lista de columnasgtltFRAME src=URL de la frame 1 name=Nombre de la frame 1gtltFRAME src=URL de la frame 2 name=Nombre de la frame 2gt

ltFRAME src=URL de la frame n name=Nombre de la frame ngt

ltFRAMESETgt

Como vemos por cada una de la frames que incluyamos en nuestro documento debemos incluir una etiqueta ltFRAMEgt indicando mediante sus argumentos la direccioacuten URL del documento que se insertaraacute en la subventana (src) y el nombre de la frame (name) Posteriormente describiremos la etiqueta ltFRAMEgt con maacutes detalle

Los argumentos de ltFRAMESETgt son rows y cols definieacutendose uacutenicamente uno de los dos atributos en funcioacuten de si la divisioacuten de la pantalla se realizaraacute por filas (rows) o por columnas (cols)

Por cada una de las subventanas que creemos debemos especificar su tamantildeo en puntos o en porcentaje del tamantildeo de cada subventana Asiacute por ejemplo si especificamos rows= 50 2525 crearemos tres subventanas horizontales ocupando la primera el 50 de la ventana principal y las otras dos el resto Si especificamos cols=100150 crearemos tres subventanas verticales ocupando la primera 100 puntos de la ventana principal la segunda 150 puntos y tercera el espacio restante

Vamos a verlo maacutes claramente con un par de ejemplos praacutecticos que vemos en la Tabla 54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 502525gt ltFRAMEsrc=Pagweb1htm name=Pagweb1gtltFRAMEsrc=Pagweb2htm name=Pagweb2gtltFRAMEsrc=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 30: Programacion web   lenguaje html

Lenguaje HTML copy Grupo EIDOS

34

Tabla 29

bull border=Tamantildeo Permite antildeadirle un borde a la imagen del tamantildeo que le

especifiquemos

Si la imagen forma parte de un hiperenlace esta apareceraacute con un borde del color del hiperenlace Si no deseaacuteramos que aparezca este borde tendriacuteamos que especificar border=0

Tabla 30

bull height=Tamantildeo Permite especificar el alto de la imagen en puntos de pantalla

(pixels) o en del tamantildeo del documento

bull width=Tamantildeo Con este argumento especificaremos el ancho al que mostraremos la imagen en puntos de pantalla (pixels) o en del tamantildeo del documento

En el segundo de los ejemplos de la Tabla 31 el ancho de la imagen se ha extendido al 50 del total del ancho de la celda donde estaacute contenida la imagen Si pruebas este ejemplo en tu documento HTML la imagen se extenderaacute horizontalmente hasta ocupar el 50 del ancho de la paacutegina

copy Grupo EIDOS 3 Elementos del lenguaje I

35

Tabla 31

bull hspace=Margen hspace Horizontal Space Permite especificar el nuacutemero de espacios

horizontales (en puntos) que separaraacuten a la imagen de cualquier elemento que le siga o le anteceda

bull vspace=Margen vspace Vertical Space Con este argumento especificaremos el margen vertical (en puntos) que habraacute entre la imagen y cualquier otro elemento de nuestro documento

Tabla 32

Elementos del lenguaje II

Tablas HTML nos va a permitir la inclusioacuten de cualquiera de los elementos de nuestra paacutegina (texto imaacutegenes hiperenlaces listas etc) dentro de una tabla Gracias a lo cual conseguiremos dar una mayor y mejor estructuracioacuten a los contenidos de nuestros documentos Ademaacutes la definicioacuten de las tablas en HTML es muy abierta pudiendo en cualquier momento redimensionar la tabla es decir cambiar su nuacutemero de filas o de columnas cambiar el tamantildeo de alguna de sus celdas etc

La etiqueta que nos va a permitir la definicioacuten de tablas es ltTABLEgt ltTABLEgt

El formato general de la etiqueta sin ninguacuten argumento es el siguiente

ltTABLEgtltTR gt

ltTHgtContenido de la celda ltTHgtltTDgtContenido de la celda ltTDgt

ltTRgtltTABLEgt

TR Table Row TH Table Header TD Table Data

Vamos a analizar cada una de estas etiquetas de forma separada

1 ltTABLEgt ltTABLEgt Definicioacuten general de la tabla Dentro de ella definiremos las filas y columnas que la constituyen pudiendo incluso definir tablas dentro de tablas es decir tablas anidadas

Lenguaje HTML copy Grupo EIDOS

38

2 ltTRgt ltTRgt Definicioacuten de las filas de la tabla Por cada etiqueta ltTRgt que incluyamos se crearaacute una fila en la tabla No seraacute necesario indicar la etiqueta de cierre

3 ltTHgtltTHgt oacute ltTDgtltTDgt Definicioacuten de cada una de las celdas de la tabla Vemos que estas etiquetas estaacuten contenidas dentro de otra etiqueta de definicioacuten de fila de forma que por cada etiqueta ltTHgt o ltTDgt que incluyamos se crearaacute una celda dentro de la fila correspondiente La etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera es decir celdas cuyo contenido estaacute resaltado en negrita dejando la etiqueta ltTDgt para definir celdas de datos En este caso tampoco es necesario indicar las etiquetas de cierre

Todas estas etiquetas tienen sus respectivos argumentos Pero antes de analizar cada uno de ellos vamos a ver un ejemplo muy sencillito en la Tabla 33 que nos crearaacute una tabla de una sola celda (1 fila X 1 columna = 1 celda) Para ello usaremos la etiqueta de creacioacuten de tabla ltTABLEgt con el argumento border=1 (nos dibuja un borde de tamantildeo 1 alrededor de la tabla)

Ejemplo Resultado

ltTABLE border=1gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 33

Vamos ahora a analizar lo distintos argumentos que componen las etiquetas de la tabla analizaacutendolos desde lo general (la definicioacuten de la tabla) hasta lo especiacutefico (la definicioacuten de las celdas)

1 Definicioacuten de la tabla ltTABLEgt

ltTABLE border=n cellpadding=n cellspacing=n width=n oacute height=n oacute bgcolor=rrggbb oacute nombre gt

Contenido ltTABLEgt

bull border=n Si especificamos este argumento se dibujaraacute un borde alrededor de la

tabla del ancho que le indiquemos como muestra la Tabla 34

Ejemplo Resultado

Mi primera tabla ltTABLE border=4gtltTRgtltTDgtMi primera tablaltTABLEgt

Tabla 34

bull cellpadding=n Indica el espacio en puntos que separa el contenido de la celda con

el borde de la misma siendo 1 por defecto

copy Grupo EIDOS 4 Elementos del lenguaje II

39

Ejemplo Resultado

ltTABLE border=4 cellpadding=8gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 35

bull cellspacing=n Indica el espacio en puntos que separa a las celdas contenidas dentro de la tabla siendo 2 por defecto

bull width=n oacute Indica la anchura de la tabla en puntos o en en funcioacuten del ancho de la ventana del visualizador Si no indicamos este argumento el ancho de la tabla se ajustaraacute al tamantildeo del contenido de las celdas Esto es lo que ha ocurrido en el uacuteltimo ejemplo que hemos realizado Veamos un ejemplo en el Coacutedigo fuente 11 El resultado se muestra en la Tabla 36

ltTABLE border=4 width=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 11

Mi primera tabla

Tabla 36

bull height=n oacute Nos permite definir la altura de la tabla en puntos o en de la

altura de la ventana del visualizador Si indicamos este argumento lo recomendable es darlo en puntos ya que es maacutes complicado adecuarnos a la altura de la ventana del visualizador Al igual que en el caso anterior si no especificamos este argumento la altura se adecuaraacute al contenido de las celdas El Coacutedigo fuente 12 muestra un ejemplo y la Tabla 37 nos muestra el resultado

ltTABLE border=4 width=50 height=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 12

Mi primera tabla

Tabla 37

bull bgcolor= rrggbb o nombre del color Nos permite definir un color

de fondo para todas las celdas de la tabla Maacutes adelante veremos como podemos definir colores especiacuteficos para cada una de las celdas por separado

Lenguaje HTML copy Grupo EIDOS

40

Ejemplo Resultado

ltTABLE border=4 bgcolor=yellowgtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 38

2 Definicioacuten de las filas de la tabla ltTRgt

ltTR align=leftrightcenter valign=topmiddlebottombgcolor=rrggbb oacute nombregt

Antes de empezar a descifrar el significado de cada uno de los argumentos de esta etiqueta vamos a ver un ejemplo en la Tabla 39 de coacutemo se construiriacutea una tabla con dos filas (2 filas X 1 columna = 2 celdas)

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR gtltTDgtPrimera filaltTRgtltTDgtSegunda filaltTABLEgt

Segunda fila

Tabla 39

bull align=leftrightcenter Con este argumento vamos a indicar la alineacioacuten

horizontal (leftizquierda rightderecha centercentrado) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado Veamos un ejemplo en el Coacutedigo fuente 13 y su correspondiente resultado en la Tabla 40

ltTABLE border=4 width=50 gt ltTRgtltTDgtPrimera filaltTRalign=rightgtltTDgtSegunda filaltTABLEgt

Coacutedigo fuente 13

Primera fila

Segunda fila

Tabla 40

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten

vertical (toparriba middlecentrado bottomabajo) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado

copy Grupo EIDOS 4 Elementos del lenguaje II

41

bull bgcolor= rrggbb o nombre del color En este caso este argumento nos permitiraacute definir un color de fondo para todas las celdas de una fila veamos un ejemplo en la

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR bgcolor=yellowgtltTDgtPrimera

filaltTR bgcolor=greengtltTDgtSegunda

filaltTABLEgt

Segunda fila

Tabla 41

3 Definicioacuten de las celdas de la tabla ltTHgt oacute ltTDgt

ltTH oacute TD align=leftrightcenterjustifyvalign=topmiddlebottom bgcolor=rrggbb oacute nombre width=nrowspan=n colspan=ngt

Como ya explicamos anteriormente la etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera y la etiqueta ltTDgt para la creacioacuten de celdas de datos Vamos a completar nuestro ejemplo inicial antildeadieacutendole tres filas de dos celdas cada una (3 filas X 2 columnas = 6 celdas) Tabla 42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTDgtCelda 21ltTDgtCelda 22

ltTABLEgt Celda 21 Celda 22

Tabla 42

bull align=leftrightcenterjustify Con este argumento vamos a indicar la

alineacioacuten horizontal (left izquierda right derecha center centrado justifyjustificado) del contenido de cada celda por separado Su significado es el mismo que en la etiqueta ltTRgt

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten vertical (toparriba middlecentrado bottomabajo) del contenido de cada celda

bull bgcolor= rrggbb o nombre del color En este caso podremos definir un color de fondo para cada una de las celdas de manera independiente

bull width=n oacute Indica el ancho de la celda en puntos o en en funcioacuten del tamantildeo de la tabla

Lenguaje HTML copy Grupo EIDOS

42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera

1ltTHgtCabecera 2ltTR gtltTD align=rightgtCelda

11ltTD bgcolor=redgtCelda 12ltTRgtltTD

bgcolor=yellowgtCelda 21ltTDalign=centergtCelda 22ltTABLEgt

Celda 21 Celda 22

Tabla 43

bull rowspan=n Con este argumento podemos lograr que una celda concreta abarque maacutes de una fila ya sabemos que por defecto una celda ocupa una sola fila

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTD rowspan=2gtCelda

11ltTDgtCelda 12ltTRgtltTDgtCelda 22

ltTABLEgt

Celda 11 Celda 22

Tabla 44

bull colspan=n Con este argumento podemos lograr que una celda se expanda a maacutes

de una columna

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTD colspan=2

align=centergtCelda 22ltTABLEgt

Celda 22

Tabla 45

Para finalizar este tema sobre la creacioacuten de tablas vamos a ver el ejemplo que aparece en el Coacutedigo fuente 14 y su resultado en la Tabla 46

ltTABLE border=4gtltTR gtltTH colspan=3 bgcolor=redgtTiacutetuloltTR bgcolor=yellowgtltTHgtCabecera 1ltTHgtCabecera 2ltTHgtCabecera 3

copy Grupo EIDOS 4 Elementos del lenguaje II

43

ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTDgtCelda 13ltTRgtltTD rowspan=2gtCelda 21ltTD bgcolor=greengtCelda 22ltTDgtCelda 23ltTRgtltTDgtCelda 32ltTDgtCelda 33

ltTABLEgt

Coacutedigo fuente 14

Tiacutetulo

Cabecera 1 Cabecera 2 Cabecera 3

Celda 11 Celda 12 Celda 13

Celda 22 Celda 23 Celda 21

Celda 32 Celda 33

Tabla 46

Formularios El formulario es el elemento de HTML que nos va a permitir interactuar con los visitantes de nuestras paacuteginas web de forma que podemos solicitarle informacioacuten al usuario y procesarla De esta forma podremos crear en nuestras paacuteginas encuestas para solicitar la opinioacuten del visitante sobre alguacuten tema e incluso sobre el contenido de nuestra propia paacutegina web cuestionarios para evaluar la asimilacioacuten de contenidos sobre un tema concreto que se trate en la paacutegina etc

El contenido de la informacioacuten introducida por medio del formulario seraacute enviado a la direccioacuten URL donde resida el programa que se encargaraacute de procesar los datos A este tipo de programas externos se les denomina programas CGI (Common Gateway Interface)

La etiqueta HTML que nos va a permitir la creacioacuten de formularios es ltFORMgt Su formato es el siguiente

ltFORM action=URL del programa que trata el formulariomethod=postgetgt Elementos del formulario ltFORMgt

bull action=URL del programa que trata el formulario A traveacutes de este

argumento indicaremos como ya hemos mencionado la direccioacuten del fichero de programa que va a tratar la informacioacuten suministrada por el formulario

Tambieacuten podriacuteamos incluir como URL que trata el formulario una direccioacuten de correo electroacutenico Por tanto el valor de este argumento podriacutea ser action =mailto direccioacuten de correo

Nota Esta opcioacuten soacutelo funciona adecuadamente con el navegador Netscape Con el Explorer este enviacuteo dariacutea como resultado un correo en blanco Para que esta opcioacuten funcione de manera independiente del navegador que se esteacute utilizando se ha de emplear un programa externo que realice este proceso

Lenguaje HTML copy Grupo EIDOS

44

bull method=postget A traveacutes de este argumento indicaremos el meacutetodo empleado para transferir la informacioacuten generada por el formulario

Si indicamos post se produciraacute la modificacioacuten del documento destino como es el caso de enviar la informacioacuten a una direccioacuten de correo electroacutenico Mediante el meacutetodo get no se produciraacuten cambios en el documento destino

Dentro de un formulario podremos incluir cualquier texto o instruccioacuten HTML de las vistas a lo largo de los capiacutetulos anteriores ademaacutes claro estaacute de los elementos tiacutepicos de un formulario cajas de texto botones de seleccioacuten menuacutes de opciones etc Vamos a ver coacutemo se incluiraacuten estos elementos en un formulario

Entrada baacutesica de datos Para definir los distintos tipos de campos baacutesicos de entrada de datos usaremos la etiqueta ltINPUTgt

El formato es el siguiente

ltINPUT type= text password checkbox radio hidden submit image reset name=Variable value=Valor inicialgt

bull El argumento type determinaraacute el tipo de campo de entrada que estamos insertando A

continuacioacuten describiremos cada uno de ellos

bull El argumento name especifica el nombre de la variable que tomaraacute el valor introducido en el campo

bull El argumento value especifica el valor por defecto que tendraacute el campo

Vamos a continuacioacuten a describir los distintos tipos campos de entrada que vendraacuten dados por los valores del argumento type

Texto corto type=text

Con este argumento vamos a indicar que el campo a introducir seraacute un texto El formato seriacutea

ltINPUT type= text name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los nuevos atributos es

bull size=Tamantildeo Indicaremos el tamantildeo en caracteres de la ventana de introduccioacuten de texto

bull maxlength=Longitud maacutexima Indicaremos el nuacutemero maacuteximo de caracteres a introducir en el campo

Vamos a ver un ejemplo en la Tabla 47

copy Grupo EIDOS 4 Elementos del lenguaje II

45

Ejemplo Resultado

NombreltINPUT type=text name=Var1Value=Texto por defecto size=20 maxlength=25gt

Tabla 47

Claves type=password

Con este argumento indicamos que el campo a introducir seraacute una palabra clave por lo que los caracteres que se introduzcan seraacuten sustituidos por asteriscos en la visualizacioacuten por pantalla El formato es

ltINPUT type= password name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los distintos argumentos es el mismo que en el caso anterior Veamos un ejemplo en la Tabla 48

Ejemplo Resultado

ClaveltINPUT type=password name=Var2Value=tutankamon size=11 maxlength=10gt

Tabla 48

Botones de seleccioacuten type=checkbox

El checkbox es un botoacuten que presenta dos estados marcado (1) y desmarcado (0) Podremos variar su estado simplemente pinchando con el ratoacuten El formato es

ltINPUT type= checkbox name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto

Si incluimos el argumento value cuando el botoacuten esteacute marcado su variable asociada adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 49

Ejemplo Resultado

ltINPUT type=checkbox name=Var3 value=Op1 checkedgtOpcioacuten1 ltbrgtltINPUT type=checkbox name=Var4 value=Op2gt Opcioacuten 2

Tabla 49

Lenguaje HTML copy Grupo EIDOS

46

Seleccioacuten entre varias opciones type=radio

Este argumento se usa cuando hay que hacer una seleccioacuten entre varias alternativas excluyentes pudieacutendose seleccionar uacutenicamente una de las alternativas Debemos incluir una etiqueta radio por cada una de las posibles alternativas El formato es

ltINPUT type= radio name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto En este caso uacutenicamente uno de los botones de radio podraacute aparecer marcado ya que se usa para el caso de opciones excluyentes

Cuando un botoacuten esteacute seleccionado la variable asociada a la lista de botones adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 50

Ejemplo Resultado

ltINPUT type=radio name=Var5 value=Op1gtOpcioacuten1 ltbrgtltINPUT type=radio name=Var5 value=Op2checkedgt Opcioacuten 2 ltbrgtltINPUT type=radio name=Var5 value=Op3 gtOpcioacuten 3

Tabla 50

En este ejemplo la variable Var5 tendraacute el valor Op2

Campos ocultos type=hidden

Este tipo de campos no son visibles para el usuario Su uso tiene sentido en el caso de enviar alguacuten tipo de informacioacuten que no deba ser visualizada o variada por el lector de nuestra paacutegina Web El formato es

ltINPUT type= hidden name=Variable value=Valor gt

Con esta etiqueta asignariacuteamos a la Variable referenciada por name el Valor de value y se mandariacutea junto con el formulario sin que el usuario de la paacutegina se entere de nada Veamos un ejemplo en el Coacutedigo fuente 15

ltINPUT type=hidden name=Var6 value=tutankamongt

Coacutedigo fuente 15

copy Grupo EIDOS 4 Elementos del lenguaje II

47

Botoacuten de enviacuteo de datos type=submit

Con este argumento especificamos un botoacuten en el que al pulsar los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario El formato es

ltINPUT type= submit value=Mensaje a mostrargt

En este caso el paraacutemetro value indica el mensaje que se mostraraacute en el botoacuten Veamos un ejemplo en la Tabla 51

Ejemplo Resultado

ltINPUT type=submit value=Enviar los Datosgt

Tabla 51

Botoacuten graacutefico de enviacuteo de datos type=image

Con este argumento especificamos un botoacuten de tipo imagen en el que al igual que con el botoacuten anterior si pulsamos en la imagen los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario Su formato es el siguiente

ltINPUT type= image src=URL de la imagen name=Variablegt

Con el paraacutemetro src especificamos la URL de la imagen que seraacute insertada en el botoacuten En este caso en la variable referenciada por name se almacenaraacuten las coordenadas del punto de la imagen donde se halla pinchado (de forma que estas coordenadas podriacutean ser procesadas por el programa que recibe los datos del formulario)

Botoacuten de borrado de datos type=reset

Con este argumento especificamos un botoacuten que al ser pulsado borraraacute el contenido actual de todos los campos dejaacutendolos con sus valores por defecto Su formato es

ltINPUT type= reset value=Texto del botoacutengt

Con el paraacutemetro value especificamos el texto que etiquetaraacute al botoacuten

Ejemplo Resultado

ltINPUT type=reset value=Borrar datosgt

Tabla 52

Lenguaje HTML copy Grupo EIDOS

48

Entrada datos en muacuteltiples liacuteneas En un formulario tambieacuten podremos introducir un campo de texto que abarque varias liacuteneas Para ello usaremos la etiqueta ltTEXTAREAgt ltTEXTAREAgt Su formato es el siguiente

ltTEXTAREA name=Variable rows=Filas cols=ColumnasgtContenido por defectoltTEXTAREAgt

Los argumentos rows y cols nos van a permitir especificar respectivamente el nuacutemero de filas de texto visibles y el nuacutemero de columnas de texto visibles en el campo

Ejemplo Resultado

ltTEXTAREA name=Var7 rows=5 cols=40gtContenido por defectoltTEXTAREAgt

Tabla 53

Entrada de datos a traveacutes de campos de seleccioacuten Con los campos de seleccioacuten podremos desplegar una lista de opciones entre las que podremos seleccionar una Para ello usaremos la etiqueta ltSELECTgt ltSELECTgt Su formato es el siguiente

ltSELECT name=Variable multiple size=ngtltOPTION selected value=Valor_1gtPrimera OpcioacutenltOPTION value=Valor_2gtSegunda Opcioacuten

ltOPTION value=Valor_ngtEneacutesima Opcioacuten

ltSELECTgt

Figura 1

bull La variable referenciada por name tomaraacute el valor(value) de la opcioacuten seleccionada

bull Si especificamos el argumento muacuteltiple se mostraraacuten todas la opciones en forma de tabla El nuacutemero de opciones visibles en la tabla vendraacute dado por el argumento size

copy Grupo EIDOS 4 Elementos del lenguaje II

49

bull Con la etiqueta ltOPTIONgt iremos definiendo cada una de las opciones de la lista

bull El argumento selected va a determinar cuaacutel es la opcioacuten por defecto

Para finalizar vamos a ver el Coacutedigo fuente 16 correspondiente a una encuesta realizada por la editorial ficticia EditoPc y en la Figura 2 observamos el resultado del formulario

ltP align=centergtltBgtEDITORIAL ltIgtEditoPcltIgtltBgtltPgtltFORM action=mailtodireccionejemplo method = postgtNombreltINPUT type=text size=30 name=nombregtltBRgtE_mail ltINPUT type=text size=30 name=e_mailgtltPgtDeseas recibir informacioacuten sobreltINPUT type=checkbox name=infor1 value=InternetgtInternetltINPUT type=checkbox name=infor2 value=ProgramacioacutengtProgramacioacutenltINPUT type=checkbox name=infor3 value=SistOperativogtSistOperativoltINPUT type=checkbox name=infor4 value=OfimaacuteticagtOfimaacuteticaltPgtiquestTe conectas a Internet desde casa ltbrgtltINPUT type=radio name=intercasa value=sigtSiacuteltINPUT type=radio name=intercasa value=nogtNoltPgtiquestQueacute uso le das a tu ordenador ltBRgtltSELECT name=uso multiple size=3gtltOPTION selectedgtProfesionalltOPTIONgtDomeacutesticoltOPTIONgtOcioJuegosltSELECTgtltPgtCaracteriacutesticas de tu PCltBRgtltTEXTAREA name=caract rows=5 cols=40gtltTEXTAREAgtltPgtltINPUT type=submit value=Enviar datosgt ltINPUT type=reset value=Borrardatosgt

Coacutedigo fuente 16

Figura 2

Elementos del lenguaje III

Frames Las frames son una utilidad del HTML que nos permite dividir la ventana del navegador en diferentes subventanas que podraacuten ser manipuladas de manera independiente Esto nos permitiraacute mostrar una paacutegina web diferente en cada una de la subventanas o frames

Estructura de un documento con frames Un documento con frames se estructura de manera diferente a un documento HTML normal Asiacute en este tipo de documentos no apareceraacute la etiqueta ltBODYgt En su lugar se incluiraacute la etiqueta ltFRAMESETgt ltFRAMESETgt dentro de la cual se definiraacuten las distintas frames que se incluyan en el documento

La estructura general de un documento de este tipo seriacutea por tanto

ltHTMLgtltHEADgtCabeceraltHEADgtltFRAMESETgt

Definicioacuten de la distintas framesltFRAMESETgtltNOFRAMESgt

Instrucciones HTMLltNOFRAMESgt

ltHTMLgt

Lenguaje HTML copy Grupo EIDOS

52

Puede darse el caso de que programemos nuestro documento con frames siguiendo la estructura anterior y que el navegador que se use para leer el documento no soporte la caracteriacutestica de frames con lo cual no se mostraraacute nada de lo indicado entre las etiquetas ltFRAMESETgt y ltFRAMESETgtPara solucionar este problema todas las instrucciones HTML incluidas entre las etiquetas ltNOFRAMESgt y ltNOFRAMESgt seraacuten ejecutadas por los navegadores que no soportan las frames

La sintaxis de la etiqueta ltFRAMESETgt es

ltFRAMESET rows=Lista de filas cols=Lista de columnasgtltFRAME src=URL de la frame 1 name=Nombre de la frame 1gtltFRAME src=URL de la frame 2 name=Nombre de la frame 2gt

ltFRAME src=URL de la frame n name=Nombre de la frame ngt

ltFRAMESETgt

Como vemos por cada una de la frames que incluyamos en nuestro documento debemos incluir una etiqueta ltFRAMEgt indicando mediante sus argumentos la direccioacuten URL del documento que se insertaraacute en la subventana (src) y el nombre de la frame (name) Posteriormente describiremos la etiqueta ltFRAMEgt con maacutes detalle

Los argumentos de ltFRAMESETgt son rows y cols definieacutendose uacutenicamente uno de los dos atributos en funcioacuten de si la divisioacuten de la pantalla se realizaraacute por filas (rows) o por columnas (cols)

Por cada una de las subventanas que creemos debemos especificar su tamantildeo en puntos o en porcentaje del tamantildeo de cada subventana Asiacute por ejemplo si especificamos rows= 50 2525 crearemos tres subventanas horizontales ocupando la primera el 50 de la ventana principal y las otras dos el resto Si especificamos cols=100150 crearemos tres subventanas verticales ocupando la primera 100 puntos de la ventana principal la segunda 150 puntos y tercera el espacio restante

Vamos a verlo maacutes claramente con un par de ejemplos praacutecticos que vemos en la Tabla 54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 502525gt ltFRAMEsrc=Pagweb1htm name=Pagweb1gtltFRAMEsrc=Pagweb2htm name=Pagweb2gtltFRAMEsrc=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 31: Programacion web   lenguaje html

copy Grupo EIDOS 3 Elementos del lenguaje I

35

Tabla 31

bull hspace=Margen hspace Horizontal Space Permite especificar el nuacutemero de espacios

horizontales (en puntos) que separaraacuten a la imagen de cualquier elemento que le siga o le anteceda

bull vspace=Margen vspace Vertical Space Con este argumento especificaremos el margen vertical (en puntos) que habraacute entre la imagen y cualquier otro elemento de nuestro documento

Tabla 32

Elementos del lenguaje II

Tablas HTML nos va a permitir la inclusioacuten de cualquiera de los elementos de nuestra paacutegina (texto imaacutegenes hiperenlaces listas etc) dentro de una tabla Gracias a lo cual conseguiremos dar una mayor y mejor estructuracioacuten a los contenidos de nuestros documentos Ademaacutes la definicioacuten de las tablas en HTML es muy abierta pudiendo en cualquier momento redimensionar la tabla es decir cambiar su nuacutemero de filas o de columnas cambiar el tamantildeo de alguna de sus celdas etc

La etiqueta que nos va a permitir la definicioacuten de tablas es ltTABLEgt ltTABLEgt

El formato general de la etiqueta sin ninguacuten argumento es el siguiente

ltTABLEgtltTR gt

ltTHgtContenido de la celda ltTHgtltTDgtContenido de la celda ltTDgt

ltTRgtltTABLEgt

TR Table Row TH Table Header TD Table Data

Vamos a analizar cada una de estas etiquetas de forma separada

1 ltTABLEgt ltTABLEgt Definicioacuten general de la tabla Dentro de ella definiremos las filas y columnas que la constituyen pudiendo incluso definir tablas dentro de tablas es decir tablas anidadas

Lenguaje HTML copy Grupo EIDOS

38

2 ltTRgt ltTRgt Definicioacuten de las filas de la tabla Por cada etiqueta ltTRgt que incluyamos se crearaacute una fila en la tabla No seraacute necesario indicar la etiqueta de cierre

3 ltTHgtltTHgt oacute ltTDgtltTDgt Definicioacuten de cada una de las celdas de la tabla Vemos que estas etiquetas estaacuten contenidas dentro de otra etiqueta de definicioacuten de fila de forma que por cada etiqueta ltTHgt o ltTDgt que incluyamos se crearaacute una celda dentro de la fila correspondiente La etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera es decir celdas cuyo contenido estaacute resaltado en negrita dejando la etiqueta ltTDgt para definir celdas de datos En este caso tampoco es necesario indicar las etiquetas de cierre

Todas estas etiquetas tienen sus respectivos argumentos Pero antes de analizar cada uno de ellos vamos a ver un ejemplo muy sencillito en la Tabla 33 que nos crearaacute una tabla de una sola celda (1 fila X 1 columna = 1 celda) Para ello usaremos la etiqueta de creacioacuten de tabla ltTABLEgt con el argumento border=1 (nos dibuja un borde de tamantildeo 1 alrededor de la tabla)

Ejemplo Resultado

ltTABLE border=1gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 33

Vamos ahora a analizar lo distintos argumentos que componen las etiquetas de la tabla analizaacutendolos desde lo general (la definicioacuten de la tabla) hasta lo especiacutefico (la definicioacuten de las celdas)

1 Definicioacuten de la tabla ltTABLEgt

ltTABLE border=n cellpadding=n cellspacing=n width=n oacute height=n oacute bgcolor=rrggbb oacute nombre gt

Contenido ltTABLEgt

bull border=n Si especificamos este argumento se dibujaraacute un borde alrededor de la

tabla del ancho que le indiquemos como muestra la Tabla 34

Ejemplo Resultado

Mi primera tabla ltTABLE border=4gtltTRgtltTDgtMi primera tablaltTABLEgt

Tabla 34

bull cellpadding=n Indica el espacio en puntos que separa el contenido de la celda con

el borde de la misma siendo 1 por defecto

copy Grupo EIDOS 4 Elementos del lenguaje II

39

Ejemplo Resultado

ltTABLE border=4 cellpadding=8gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 35

bull cellspacing=n Indica el espacio en puntos que separa a las celdas contenidas dentro de la tabla siendo 2 por defecto

bull width=n oacute Indica la anchura de la tabla en puntos o en en funcioacuten del ancho de la ventana del visualizador Si no indicamos este argumento el ancho de la tabla se ajustaraacute al tamantildeo del contenido de las celdas Esto es lo que ha ocurrido en el uacuteltimo ejemplo que hemos realizado Veamos un ejemplo en el Coacutedigo fuente 11 El resultado se muestra en la Tabla 36

ltTABLE border=4 width=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 11

Mi primera tabla

Tabla 36

bull height=n oacute Nos permite definir la altura de la tabla en puntos o en de la

altura de la ventana del visualizador Si indicamos este argumento lo recomendable es darlo en puntos ya que es maacutes complicado adecuarnos a la altura de la ventana del visualizador Al igual que en el caso anterior si no especificamos este argumento la altura se adecuaraacute al contenido de las celdas El Coacutedigo fuente 12 muestra un ejemplo y la Tabla 37 nos muestra el resultado

ltTABLE border=4 width=50 height=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 12

Mi primera tabla

Tabla 37

bull bgcolor= rrggbb o nombre del color Nos permite definir un color

de fondo para todas las celdas de la tabla Maacutes adelante veremos como podemos definir colores especiacuteficos para cada una de las celdas por separado

Lenguaje HTML copy Grupo EIDOS

40

Ejemplo Resultado

ltTABLE border=4 bgcolor=yellowgtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 38

2 Definicioacuten de las filas de la tabla ltTRgt

ltTR align=leftrightcenter valign=topmiddlebottombgcolor=rrggbb oacute nombregt

Antes de empezar a descifrar el significado de cada uno de los argumentos de esta etiqueta vamos a ver un ejemplo en la Tabla 39 de coacutemo se construiriacutea una tabla con dos filas (2 filas X 1 columna = 2 celdas)

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR gtltTDgtPrimera filaltTRgtltTDgtSegunda filaltTABLEgt

Segunda fila

Tabla 39

bull align=leftrightcenter Con este argumento vamos a indicar la alineacioacuten

horizontal (leftizquierda rightderecha centercentrado) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado Veamos un ejemplo en el Coacutedigo fuente 13 y su correspondiente resultado en la Tabla 40

ltTABLE border=4 width=50 gt ltTRgtltTDgtPrimera filaltTRalign=rightgtltTDgtSegunda filaltTABLEgt

Coacutedigo fuente 13

Primera fila

Segunda fila

Tabla 40

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten

vertical (toparriba middlecentrado bottomabajo) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado

copy Grupo EIDOS 4 Elementos del lenguaje II

41

bull bgcolor= rrggbb o nombre del color En este caso este argumento nos permitiraacute definir un color de fondo para todas las celdas de una fila veamos un ejemplo en la

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR bgcolor=yellowgtltTDgtPrimera

filaltTR bgcolor=greengtltTDgtSegunda

filaltTABLEgt

Segunda fila

Tabla 41

3 Definicioacuten de las celdas de la tabla ltTHgt oacute ltTDgt

ltTH oacute TD align=leftrightcenterjustifyvalign=topmiddlebottom bgcolor=rrggbb oacute nombre width=nrowspan=n colspan=ngt

Como ya explicamos anteriormente la etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera y la etiqueta ltTDgt para la creacioacuten de celdas de datos Vamos a completar nuestro ejemplo inicial antildeadieacutendole tres filas de dos celdas cada una (3 filas X 2 columnas = 6 celdas) Tabla 42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTDgtCelda 21ltTDgtCelda 22

ltTABLEgt Celda 21 Celda 22

Tabla 42

bull align=leftrightcenterjustify Con este argumento vamos a indicar la

alineacioacuten horizontal (left izquierda right derecha center centrado justifyjustificado) del contenido de cada celda por separado Su significado es el mismo que en la etiqueta ltTRgt

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten vertical (toparriba middlecentrado bottomabajo) del contenido de cada celda

bull bgcolor= rrggbb o nombre del color En este caso podremos definir un color de fondo para cada una de las celdas de manera independiente

bull width=n oacute Indica el ancho de la celda en puntos o en en funcioacuten del tamantildeo de la tabla

Lenguaje HTML copy Grupo EIDOS

42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera

1ltTHgtCabecera 2ltTR gtltTD align=rightgtCelda

11ltTD bgcolor=redgtCelda 12ltTRgtltTD

bgcolor=yellowgtCelda 21ltTDalign=centergtCelda 22ltTABLEgt

Celda 21 Celda 22

Tabla 43

bull rowspan=n Con este argumento podemos lograr que una celda concreta abarque maacutes de una fila ya sabemos que por defecto una celda ocupa una sola fila

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTD rowspan=2gtCelda

11ltTDgtCelda 12ltTRgtltTDgtCelda 22

ltTABLEgt

Celda 11 Celda 22

Tabla 44

bull colspan=n Con este argumento podemos lograr que una celda se expanda a maacutes

de una columna

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTD colspan=2

align=centergtCelda 22ltTABLEgt

Celda 22

Tabla 45

Para finalizar este tema sobre la creacioacuten de tablas vamos a ver el ejemplo que aparece en el Coacutedigo fuente 14 y su resultado en la Tabla 46

ltTABLE border=4gtltTR gtltTH colspan=3 bgcolor=redgtTiacutetuloltTR bgcolor=yellowgtltTHgtCabecera 1ltTHgtCabecera 2ltTHgtCabecera 3

copy Grupo EIDOS 4 Elementos del lenguaje II

43

ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTDgtCelda 13ltTRgtltTD rowspan=2gtCelda 21ltTD bgcolor=greengtCelda 22ltTDgtCelda 23ltTRgtltTDgtCelda 32ltTDgtCelda 33

ltTABLEgt

Coacutedigo fuente 14

Tiacutetulo

Cabecera 1 Cabecera 2 Cabecera 3

Celda 11 Celda 12 Celda 13

Celda 22 Celda 23 Celda 21

Celda 32 Celda 33

Tabla 46

Formularios El formulario es el elemento de HTML que nos va a permitir interactuar con los visitantes de nuestras paacuteginas web de forma que podemos solicitarle informacioacuten al usuario y procesarla De esta forma podremos crear en nuestras paacuteginas encuestas para solicitar la opinioacuten del visitante sobre alguacuten tema e incluso sobre el contenido de nuestra propia paacutegina web cuestionarios para evaluar la asimilacioacuten de contenidos sobre un tema concreto que se trate en la paacutegina etc

El contenido de la informacioacuten introducida por medio del formulario seraacute enviado a la direccioacuten URL donde resida el programa que se encargaraacute de procesar los datos A este tipo de programas externos se les denomina programas CGI (Common Gateway Interface)

La etiqueta HTML que nos va a permitir la creacioacuten de formularios es ltFORMgt Su formato es el siguiente

ltFORM action=URL del programa que trata el formulariomethod=postgetgt Elementos del formulario ltFORMgt

bull action=URL del programa que trata el formulario A traveacutes de este

argumento indicaremos como ya hemos mencionado la direccioacuten del fichero de programa que va a tratar la informacioacuten suministrada por el formulario

Tambieacuten podriacuteamos incluir como URL que trata el formulario una direccioacuten de correo electroacutenico Por tanto el valor de este argumento podriacutea ser action =mailto direccioacuten de correo

Nota Esta opcioacuten soacutelo funciona adecuadamente con el navegador Netscape Con el Explorer este enviacuteo dariacutea como resultado un correo en blanco Para que esta opcioacuten funcione de manera independiente del navegador que se esteacute utilizando se ha de emplear un programa externo que realice este proceso

Lenguaje HTML copy Grupo EIDOS

44

bull method=postget A traveacutes de este argumento indicaremos el meacutetodo empleado para transferir la informacioacuten generada por el formulario

Si indicamos post se produciraacute la modificacioacuten del documento destino como es el caso de enviar la informacioacuten a una direccioacuten de correo electroacutenico Mediante el meacutetodo get no se produciraacuten cambios en el documento destino

Dentro de un formulario podremos incluir cualquier texto o instruccioacuten HTML de las vistas a lo largo de los capiacutetulos anteriores ademaacutes claro estaacute de los elementos tiacutepicos de un formulario cajas de texto botones de seleccioacuten menuacutes de opciones etc Vamos a ver coacutemo se incluiraacuten estos elementos en un formulario

Entrada baacutesica de datos Para definir los distintos tipos de campos baacutesicos de entrada de datos usaremos la etiqueta ltINPUTgt

El formato es el siguiente

ltINPUT type= text password checkbox radio hidden submit image reset name=Variable value=Valor inicialgt

bull El argumento type determinaraacute el tipo de campo de entrada que estamos insertando A

continuacioacuten describiremos cada uno de ellos

bull El argumento name especifica el nombre de la variable que tomaraacute el valor introducido en el campo

bull El argumento value especifica el valor por defecto que tendraacute el campo

Vamos a continuacioacuten a describir los distintos tipos campos de entrada que vendraacuten dados por los valores del argumento type

Texto corto type=text

Con este argumento vamos a indicar que el campo a introducir seraacute un texto El formato seriacutea

ltINPUT type= text name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los nuevos atributos es

bull size=Tamantildeo Indicaremos el tamantildeo en caracteres de la ventana de introduccioacuten de texto

bull maxlength=Longitud maacutexima Indicaremos el nuacutemero maacuteximo de caracteres a introducir en el campo

Vamos a ver un ejemplo en la Tabla 47

copy Grupo EIDOS 4 Elementos del lenguaje II

45

Ejemplo Resultado

NombreltINPUT type=text name=Var1Value=Texto por defecto size=20 maxlength=25gt

Tabla 47

Claves type=password

Con este argumento indicamos que el campo a introducir seraacute una palabra clave por lo que los caracteres que se introduzcan seraacuten sustituidos por asteriscos en la visualizacioacuten por pantalla El formato es

ltINPUT type= password name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los distintos argumentos es el mismo que en el caso anterior Veamos un ejemplo en la Tabla 48

Ejemplo Resultado

ClaveltINPUT type=password name=Var2Value=tutankamon size=11 maxlength=10gt

Tabla 48

Botones de seleccioacuten type=checkbox

El checkbox es un botoacuten que presenta dos estados marcado (1) y desmarcado (0) Podremos variar su estado simplemente pinchando con el ratoacuten El formato es

ltINPUT type= checkbox name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto

Si incluimos el argumento value cuando el botoacuten esteacute marcado su variable asociada adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 49

Ejemplo Resultado

ltINPUT type=checkbox name=Var3 value=Op1 checkedgtOpcioacuten1 ltbrgtltINPUT type=checkbox name=Var4 value=Op2gt Opcioacuten 2

Tabla 49

Lenguaje HTML copy Grupo EIDOS

46

Seleccioacuten entre varias opciones type=radio

Este argumento se usa cuando hay que hacer una seleccioacuten entre varias alternativas excluyentes pudieacutendose seleccionar uacutenicamente una de las alternativas Debemos incluir una etiqueta radio por cada una de las posibles alternativas El formato es

ltINPUT type= radio name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto En este caso uacutenicamente uno de los botones de radio podraacute aparecer marcado ya que se usa para el caso de opciones excluyentes

Cuando un botoacuten esteacute seleccionado la variable asociada a la lista de botones adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 50

Ejemplo Resultado

ltINPUT type=radio name=Var5 value=Op1gtOpcioacuten1 ltbrgtltINPUT type=radio name=Var5 value=Op2checkedgt Opcioacuten 2 ltbrgtltINPUT type=radio name=Var5 value=Op3 gtOpcioacuten 3

Tabla 50

En este ejemplo la variable Var5 tendraacute el valor Op2

Campos ocultos type=hidden

Este tipo de campos no son visibles para el usuario Su uso tiene sentido en el caso de enviar alguacuten tipo de informacioacuten que no deba ser visualizada o variada por el lector de nuestra paacutegina Web El formato es

ltINPUT type= hidden name=Variable value=Valor gt

Con esta etiqueta asignariacuteamos a la Variable referenciada por name el Valor de value y se mandariacutea junto con el formulario sin que el usuario de la paacutegina se entere de nada Veamos un ejemplo en el Coacutedigo fuente 15

ltINPUT type=hidden name=Var6 value=tutankamongt

Coacutedigo fuente 15

copy Grupo EIDOS 4 Elementos del lenguaje II

47

Botoacuten de enviacuteo de datos type=submit

Con este argumento especificamos un botoacuten en el que al pulsar los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario El formato es

ltINPUT type= submit value=Mensaje a mostrargt

En este caso el paraacutemetro value indica el mensaje que se mostraraacute en el botoacuten Veamos un ejemplo en la Tabla 51

Ejemplo Resultado

ltINPUT type=submit value=Enviar los Datosgt

Tabla 51

Botoacuten graacutefico de enviacuteo de datos type=image

Con este argumento especificamos un botoacuten de tipo imagen en el que al igual que con el botoacuten anterior si pulsamos en la imagen los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario Su formato es el siguiente

ltINPUT type= image src=URL de la imagen name=Variablegt

Con el paraacutemetro src especificamos la URL de la imagen que seraacute insertada en el botoacuten En este caso en la variable referenciada por name se almacenaraacuten las coordenadas del punto de la imagen donde se halla pinchado (de forma que estas coordenadas podriacutean ser procesadas por el programa que recibe los datos del formulario)

Botoacuten de borrado de datos type=reset

Con este argumento especificamos un botoacuten que al ser pulsado borraraacute el contenido actual de todos los campos dejaacutendolos con sus valores por defecto Su formato es

ltINPUT type= reset value=Texto del botoacutengt

Con el paraacutemetro value especificamos el texto que etiquetaraacute al botoacuten

Ejemplo Resultado

ltINPUT type=reset value=Borrar datosgt

Tabla 52

Lenguaje HTML copy Grupo EIDOS

48

Entrada datos en muacuteltiples liacuteneas En un formulario tambieacuten podremos introducir un campo de texto que abarque varias liacuteneas Para ello usaremos la etiqueta ltTEXTAREAgt ltTEXTAREAgt Su formato es el siguiente

ltTEXTAREA name=Variable rows=Filas cols=ColumnasgtContenido por defectoltTEXTAREAgt

Los argumentos rows y cols nos van a permitir especificar respectivamente el nuacutemero de filas de texto visibles y el nuacutemero de columnas de texto visibles en el campo

Ejemplo Resultado

ltTEXTAREA name=Var7 rows=5 cols=40gtContenido por defectoltTEXTAREAgt

Tabla 53

Entrada de datos a traveacutes de campos de seleccioacuten Con los campos de seleccioacuten podremos desplegar una lista de opciones entre las que podremos seleccionar una Para ello usaremos la etiqueta ltSELECTgt ltSELECTgt Su formato es el siguiente

ltSELECT name=Variable multiple size=ngtltOPTION selected value=Valor_1gtPrimera OpcioacutenltOPTION value=Valor_2gtSegunda Opcioacuten

ltOPTION value=Valor_ngtEneacutesima Opcioacuten

ltSELECTgt

Figura 1

bull La variable referenciada por name tomaraacute el valor(value) de la opcioacuten seleccionada

bull Si especificamos el argumento muacuteltiple se mostraraacuten todas la opciones en forma de tabla El nuacutemero de opciones visibles en la tabla vendraacute dado por el argumento size

copy Grupo EIDOS 4 Elementos del lenguaje II

49

bull Con la etiqueta ltOPTIONgt iremos definiendo cada una de las opciones de la lista

bull El argumento selected va a determinar cuaacutel es la opcioacuten por defecto

Para finalizar vamos a ver el Coacutedigo fuente 16 correspondiente a una encuesta realizada por la editorial ficticia EditoPc y en la Figura 2 observamos el resultado del formulario

ltP align=centergtltBgtEDITORIAL ltIgtEditoPcltIgtltBgtltPgtltFORM action=mailtodireccionejemplo method = postgtNombreltINPUT type=text size=30 name=nombregtltBRgtE_mail ltINPUT type=text size=30 name=e_mailgtltPgtDeseas recibir informacioacuten sobreltINPUT type=checkbox name=infor1 value=InternetgtInternetltINPUT type=checkbox name=infor2 value=ProgramacioacutengtProgramacioacutenltINPUT type=checkbox name=infor3 value=SistOperativogtSistOperativoltINPUT type=checkbox name=infor4 value=OfimaacuteticagtOfimaacuteticaltPgtiquestTe conectas a Internet desde casa ltbrgtltINPUT type=radio name=intercasa value=sigtSiacuteltINPUT type=radio name=intercasa value=nogtNoltPgtiquestQueacute uso le das a tu ordenador ltBRgtltSELECT name=uso multiple size=3gtltOPTION selectedgtProfesionalltOPTIONgtDomeacutesticoltOPTIONgtOcioJuegosltSELECTgtltPgtCaracteriacutesticas de tu PCltBRgtltTEXTAREA name=caract rows=5 cols=40gtltTEXTAREAgtltPgtltINPUT type=submit value=Enviar datosgt ltINPUT type=reset value=Borrardatosgt

Coacutedigo fuente 16

Figura 2

Elementos del lenguaje III

Frames Las frames son una utilidad del HTML que nos permite dividir la ventana del navegador en diferentes subventanas que podraacuten ser manipuladas de manera independiente Esto nos permitiraacute mostrar una paacutegina web diferente en cada una de la subventanas o frames

Estructura de un documento con frames Un documento con frames se estructura de manera diferente a un documento HTML normal Asiacute en este tipo de documentos no apareceraacute la etiqueta ltBODYgt En su lugar se incluiraacute la etiqueta ltFRAMESETgt ltFRAMESETgt dentro de la cual se definiraacuten las distintas frames que se incluyan en el documento

La estructura general de un documento de este tipo seriacutea por tanto

ltHTMLgtltHEADgtCabeceraltHEADgtltFRAMESETgt

Definicioacuten de la distintas framesltFRAMESETgtltNOFRAMESgt

Instrucciones HTMLltNOFRAMESgt

ltHTMLgt

Lenguaje HTML copy Grupo EIDOS

52

Puede darse el caso de que programemos nuestro documento con frames siguiendo la estructura anterior y que el navegador que se use para leer el documento no soporte la caracteriacutestica de frames con lo cual no se mostraraacute nada de lo indicado entre las etiquetas ltFRAMESETgt y ltFRAMESETgtPara solucionar este problema todas las instrucciones HTML incluidas entre las etiquetas ltNOFRAMESgt y ltNOFRAMESgt seraacuten ejecutadas por los navegadores que no soportan las frames

La sintaxis de la etiqueta ltFRAMESETgt es

ltFRAMESET rows=Lista de filas cols=Lista de columnasgtltFRAME src=URL de la frame 1 name=Nombre de la frame 1gtltFRAME src=URL de la frame 2 name=Nombre de la frame 2gt

ltFRAME src=URL de la frame n name=Nombre de la frame ngt

ltFRAMESETgt

Como vemos por cada una de la frames que incluyamos en nuestro documento debemos incluir una etiqueta ltFRAMEgt indicando mediante sus argumentos la direccioacuten URL del documento que se insertaraacute en la subventana (src) y el nombre de la frame (name) Posteriormente describiremos la etiqueta ltFRAMEgt con maacutes detalle

Los argumentos de ltFRAMESETgt son rows y cols definieacutendose uacutenicamente uno de los dos atributos en funcioacuten de si la divisioacuten de la pantalla se realizaraacute por filas (rows) o por columnas (cols)

Por cada una de las subventanas que creemos debemos especificar su tamantildeo en puntos o en porcentaje del tamantildeo de cada subventana Asiacute por ejemplo si especificamos rows= 50 2525 crearemos tres subventanas horizontales ocupando la primera el 50 de la ventana principal y las otras dos el resto Si especificamos cols=100150 crearemos tres subventanas verticales ocupando la primera 100 puntos de la ventana principal la segunda 150 puntos y tercera el espacio restante

Vamos a verlo maacutes claramente con un par de ejemplos praacutecticos que vemos en la Tabla 54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 502525gt ltFRAMEsrc=Pagweb1htm name=Pagweb1gtltFRAMEsrc=Pagweb2htm name=Pagweb2gtltFRAMEsrc=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 32: Programacion web   lenguaje html

Elementos del lenguaje II

Tablas HTML nos va a permitir la inclusioacuten de cualquiera de los elementos de nuestra paacutegina (texto imaacutegenes hiperenlaces listas etc) dentro de una tabla Gracias a lo cual conseguiremos dar una mayor y mejor estructuracioacuten a los contenidos de nuestros documentos Ademaacutes la definicioacuten de las tablas en HTML es muy abierta pudiendo en cualquier momento redimensionar la tabla es decir cambiar su nuacutemero de filas o de columnas cambiar el tamantildeo de alguna de sus celdas etc

La etiqueta que nos va a permitir la definicioacuten de tablas es ltTABLEgt ltTABLEgt

El formato general de la etiqueta sin ninguacuten argumento es el siguiente

ltTABLEgtltTR gt

ltTHgtContenido de la celda ltTHgtltTDgtContenido de la celda ltTDgt

ltTRgtltTABLEgt

TR Table Row TH Table Header TD Table Data

Vamos a analizar cada una de estas etiquetas de forma separada

1 ltTABLEgt ltTABLEgt Definicioacuten general de la tabla Dentro de ella definiremos las filas y columnas que la constituyen pudiendo incluso definir tablas dentro de tablas es decir tablas anidadas

Lenguaje HTML copy Grupo EIDOS

38

2 ltTRgt ltTRgt Definicioacuten de las filas de la tabla Por cada etiqueta ltTRgt que incluyamos se crearaacute una fila en la tabla No seraacute necesario indicar la etiqueta de cierre

3 ltTHgtltTHgt oacute ltTDgtltTDgt Definicioacuten de cada una de las celdas de la tabla Vemos que estas etiquetas estaacuten contenidas dentro de otra etiqueta de definicioacuten de fila de forma que por cada etiqueta ltTHgt o ltTDgt que incluyamos se crearaacute una celda dentro de la fila correspondiente La etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera es decir celdas cuyo contenido estaacute resaltado en negrita dejando la etiqueta ltTDgt para definir celdas de datos En este caso tampoco es necesario indicar las etiquetas de cierre

Todas estas etiquetas tienen sus respectivos argumentos Pero antes de analizar cada uno de ellos vamos a ver un ejemplo muy sencillito en la Tabla 33 que nos crearaacute una tabla de una sola celda (1 fila X 1 columna = 1 celda) Para ello usaremos la etiqueta de creacioacuten de tabla ltTABLEgt con el argumento border=1 (nos dibuja un borde de tamantildeo 1 alrededor de la tabla)

Ejemplo Resultado

ltTABLE border=1gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 33

Vamos ahora a analizar lo distintos argumentos que componen las etiquetas de la tabla analizaacutendolos desde lo general (la definicioacuten de la tabla) hasta lo especiacutefico (la definicioacuten de las celdas)

1 Definicioacuten de la tabla ltTABLEgt

ltTABLE border=n cellpadding=n cellspacing=n width=n oacute height=n oacute bgcolor=rrggbb oacute nombre gt

Contenido ltTABLEgt

bull border=n Si especificamos este argumento se dibujaraacute un borde alrededor de la

tabla del ancho que le indiquemos como muestra la Tabla 34

Ejemplo Resultado

Mi primera tabla ltTABLE border=4gtltTRgtltTDgtMi primera tablaltTABLEgt

Tabla 34

bull cellpadding=n Indica el espacio en puntos que separa el contenido de la celda con

el borde de la misma siendo 1 por defecto

copy Grupo EIDOS 4 Elementos del lenguaje II

39

Ejemplo Resultado

ltTABLE border=4 cellpadding=8gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 35

bull cellspacing=n Indica el espacio en puntos que separa a las celdas contenidas dentro de la tabla siendo 2 por defecto

bull width=n oacute Indica la anchura de la tabla en puntos o en en funcioacuten del ancho de la ventana del visualizador Si no indicamos este argumento el ancho de la tabla se ajustaraacute al tamantildeo del contenido de las celdas Esto es lo que ha ocurrido en el uacuteltimo ejemplo que hemos realizado Veamos un ejemplo en el Coacutedigo fuente 11 El resultado se muestra en la Tabla 36

ltTABLE border=4 width=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 11

Mi primera tabla

Tabla 36

bull height=n oacute Nos permite definir la altura de la tabla en puntos o en de la

altura de la ventana del visualizador Si indicamos este argumento lo recomendable es darlo en puntos ya que es maacutes complicado adecuarnos a la altura de la ventana del visualizador Al igual que en el caso anterior si no especificamos este argumento la altura se adecuaraacute al contenido de las celdas El Coacutedigo fuente 12 muestra un ejemplo y la Tabla 37 nos muestra el resultado

ltTABLE border=4 width=50 height=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 12

Mi primera tabla

Tabla 37

bull bgcolor= rrggbb o nombre del color Nos permite definir un color

de fondo para todas las celdas de la tabla Maacutes adelante veremos como podemos definir colores especiacuteficos para cada una de las celdas por separado

Lenguaje HTML copy Grupo EIDOS

40

Ejemplo Resultado

ltTABLE border=4 bgcolor=yellowgtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 38

2 Definicioacuten de las filas de la tabla ltTRgt

ltTR align=leftrightcenter valign=topmiddlebottombgcolor=rrggbb oacute nombregt

Antes de empezar a descifrar el significado de cada uno de los argumentos de esta etiqueta vamos a ver un ejemplo en la Tabla 39 de coacutemo se construiriacutea una tabla con dos filas (2 filas X 1 columna = 2 celdas)

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR gtltTDgtPrimera filaltTRgtltTDgtSegunda filaltTABLEgt

Segunda fila

Tabla 39

bull align=leftrightcenter Con este argumento vamos a indicar la alineacioacuten

horizontal (leftizquierda rightderecha centercentrado) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado Veamos un ejemplo en el Coacutedigo fuente 13 y su correspondiente resultado en la Tabla 40

ltTABLE border=4 width=50 gt ltTRgtltTDgtPrimera filaltTRalign=rightgtltTDgtSegunda filaltTABLEgt

Coacutedigo fuente 13

Primera fila

Segunda fila

Tabla 40

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten

vertical (toparriba middlecentrado bottomabajo) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado

copy Grupo EIDOS 4 Elementos del lenguaje II

41

bull bgcolor= rrggbb o nombre del color En este caso este argumento nos permitiraacute definir un color de fondo para todas las celdas de una fila veamos un ejemplo en la

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR bgcolor=yellowgtltTDgtPrimera

filaltTR bgcolor=greengtltTDgtSegunda

filaltTABLEgt

Segunda fila

Tabla 41

3 Definicioacuten de las celdas de la tabla ltTHgt oacute ltTDgt

ltTH oacute TD align=leftrightcenterjustifyvalign=topmiddlebottom bgcolor=rrggbb oacute nombre width=nrowspan=n colspan=ngt

Como ya explicamos anteriormente la etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera y la etiqueta ltTDgt para la creacioacuten de celdas de datos Vamos a completar nuestro ejemplo inicial antildeadieacutendole tres filas de dos celdas cada una (3 filas X 2 columnas = 6 celdas) Tabla 42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTDgtCelda 21ltTDgtCelda 22

ltTABLEgt Celda 21 Celda 22

Tabla 42

bull align=leftrightcenterjustify Con este argumento vamos a indicar la

alineacioacuten horizontal (left izquierda right derecha center centrado justifyjustificado) del contenido de cada celda por separado Su significado es el mismo que en la etiqueta ltTRgt

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten vertical (toparriba middlecentrado bottomabajo) del contenido de cada celda

bull bgcolor= rrggbb o nombre del color En este caso podremos definir un color de fondo para cada una de las celdas de manera independiente

bull width=n oacute Indica el ancho de la celda en puntos o en en funcioacuten del tamantildeo de la tabla

Lenguaje HTML copy Grupo EIDOS

42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera

1ltTHgtCabecera 2ltTR gtltTD align=rightgtCelda

11ltTD bgcolor=redgtCelda 12ltTRgtltTD

bgcolor=yellowgtCelda 21ltTDalign=centergtCelda 22ltTABLEgt

Celda 21 Celda 22

Tabla 43

bull rowspan=n Con este argumento podemos lograr que una celda concreta abarque maacutes de una fila ya sabemos que por defecto una celda ocupa una sola fila

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTD rowspan=2gtCelda

11ltTDgtCelda 12ltTRgtltTDgtCelda 22

ltTABLEgt

Celda 11 Celda 22

Tabla 44

bull colspan=n Con este argumento podemos lograr que una celda se expanda a maacutes

de una columna

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTD colspan=2

align=centergtCelda 22ltTABLEgt

Celda 22

Tabla 45

Para finalizar este tema sobre la creacioacuten de tablas vamos a ver el ejemplo que aparece en el Coacutedigo fuente 14 y su resultado en la Tabla 46

ltTABLE border=4gtltTR gtltTH colspan=3 bgcolor=redgtTiacutetuloltTR bgcolor=yellowgtltTHgtCabecera 1ltTHgtCabecera 2ltTHgtCabecera 3

copy Grupo EIDOS 4 Elementos del lenguaje II

43

ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTDgtCelda 13ltTRgtltTD rowspan=2gtCelda 21ltTD bgcolor=greengtCelda 22ltTDgtCelda 23ltTRgtltTDgtCelda 32ltTDgtCelda 33

ltTABLEgt

Coacutedigo fuente 14

Tiacutetulo

Cabecera 1 Cabecera 2 Cabecera 3

Celda 11 Celda 12 Celda 13

Celda 22 Celda 23 Celda 21

Celda 32 Celda 33

Tabla 46

Formularios El formulario es el elemento de HTML que nos va a permitir interactuar con los visitantes de nuestras paacuteginas web de forma que podemos solicitarle informacioacuten al usuario y procesarla De esta forma podremos crear en nuestras paacuteginas encuestas para solicitar la opinioacuten del visitante sobre alguacuten tema e incluso sobre el contenido de nuestra propia paacutegina web cuestionarios para evaluar la asimilacioacuten de contenidos sobre un tema concreto que se trate en la paacutegina etc

El contenido de la informacioacuten introducida por medio del formulario seraacute enviado a la direccioacuten URL donde resida el programa que se encargaraacute de procesar los datos A este tipo de programas externos se les denomina programas CGI (Common Gateway Interface)

La etiqueta HTML que nos va a permitir la creacioacuten de formularios es ltFORMgt Su formato es el siguiente

ltFORM action=URL del programa que trata el formulariomethod=postgetgt Elementos del formulario ltFORMgt

bull action=URL del programa que trata el formulario A traveacutes de este

argumento indicaremos como ya hemos mencionado la direccioacuten del fichero de programa que va a tratar la informacioacuten suministrada por el formulario

Tambieacuten podriacuteamos incluir como URL que trata el formulario una direccioacuten de correo electroacutenico Por tanto el valor de este argumento podriacutea ser action =mailto direccioacuten de correo

Nota Esta opcioacuten soacutelo funciona adecuadamente con el navegador Netscape Con el Explorer este enviacuteo dariacutea como resultado un correo en blanco Para que esta opcioacuten funcione de manera independiente del navegador que se esteacute utilizando se ha de emplear un programa externo que realice este proceso

Lenguaje HTML copy Grupo EIDOS

44

bull method=postget A traveacutes de este argumento indicaremos el meacutetodo empleado para transferir la informacioacuten generada por el formulario

Si indicamos post se produciraacute la modificacioacuten del documento destino como es el caso de enviar la informacioacuten a una direccioacuten de correo electroacutenico Mediante el meacutetodo get no se produciraacuten cambios en el documento destino

Dentro de un formulario podremos incluir cualquier texto o instruccioacuten HTML de las vistas a lo largo de los capiacutetulos anteriores ademaacutes claro estaacute de los elementos tiacutepicos de un formulario cajas de texto botones de seleccioacuten menuacutes de opciones etc Vamos a ver coacutemo se incluiraacuten estos elementos en un formulario

Entrada baacutesica de datos Para definir los distintos tipos de campos baacutesicos de entrada de datos usaremos la etiqueta ltINPUTgt

El formato es el siguiente

ltINPUT type= text password checkbox radio hidden submit image reset name=Variable value=Valor inicialgt

bull El argumento type determinaraacute el tipo de campo de entrada que estamos insertando A

continuacioacuten describiremos cada uno de ellos

bull El argumento name especifica el nombre de la variable que tomaraacute el valor introducido en el campo

bull El argumento value especifica el valor por defecto que tendraacute el campo

Vamos a continuacioacuten a describir los distintos tipos campos de entrada que vendraacuten dados por los valores del argumento type

Texto corto type=text

Con este argumento vamos a indicar que el campo a introducir seraacute un texto El formato seriacutea

ltINPUT type= text name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los nuevos atributos es

bull size=Tamantildeo Indicaremos el tamantildeo en caracteres de la ventana de introduccioacuten de texto

bull maxlength=Longitud maacutexima Indicaremos el nuacutemero maacuteximo de caracteres a introducir en el campo

Vamos a ver un ejemplo en la Tabla 47

copy Grupo EIDOS 4 Elementos del lenguaje II

45

Ejemplo Resultado

NombreltINPUT type=text name=Var1Value=Texto por defecto size=20 maxlength=25gt

Tabla 47

Claves type=password

Con este argumento indicamos que el campo a introducir seraacute una palabra clave por lo que los caracteres que se introduzcan seraacuten sustituidos por asteriscos en la visualizacioacuten por pantalla El formato es

ltINPUT type= password name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los distintos argumentos es el mismo que en el caso anterior Veamos un ejemplo en la Tabla 48

Ejemplo Resultado

ClaveltINPUT type=password name=Var2Value=tutankamon size=11 maxlength=10gt

Tabla 48

Botones de seleccioacuten type=checkbox

El checkbox es un botoacuten que presenta dos estados marcado (1) y desmarcado (0) Podremos variar su estado simplemente pinchando con el ratoacuten El formato es

ltINPUT type= checkbox name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto

Si incluimos el argumento value cuando el botoacuten esteacute marcado su variable asociada adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 49

Ejemplo Resultado

ltINPUT type=checkbox name=Var3 value=Op1 checkedgtOpcioacuten1 ltbrgtltINPUT type=checkbox name=Var4 value=Op2gt Opcioacuten 2

Tabla 49

Lenguaje HTML copy Grupo EIDOS

46

Seleccioacuten entre varias opciones type=radio

Este argumento se usa cuando hay que hacer una seleccioacuten entre varias alternativas excluyentes pudieacutendose seleccionar uacutenicamente una de las alternativas Debemos incluir una etiqueta radio por cada una de las posibles alternativas El formato es

ltINPUT type= radio name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto En este caso uacutenicamente uno de los botones de radio podraacute aparecer marcado ya que se usa para el caso de opciones excluyentes

Cuando un botoacuten esteacute seleccionado la variable asociada a la lista de botones adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 50

Ejemplo Resultado

ltINPUT type=radio name=Var5 value=Op1gtOpcioacuten1 ltbrgtltINPUT type=radio name=Var5 value=Op2checkedgt Opcioacuten 2 ltbrgtltINPUT type=radio name=Var5 value=Op3 gtOpcioacuten 3

Tabla 50

En este ejemplo la variable Var5 tendraacute el valor Op2

Campos ocultos type=hidden

Este tipo de campos no son visibles para el usuario Su uso tiene sentido en el caso de enviar alguacuten tipo de informacioacuten que no deba ser visualizada o variada por el lector de nuestra paacutegina Web El formato es

ltINPUT type= hidden name=Variable value=Valor gt

Con esta etiqueta asignariacuteamos a la Variable referenciada por name el Valor de value y se mandariacutea junto con el formulario sin que el usuario de la paacutegina se entere de nada Veamos un ejemplo en el Coacutedigo fuente 15

ltINPUT type=hidden name=Var6 value=tutankamongt

Coacutedigo fuente 15

copy Grupo EIDOS 4 Elementos del lenguaje II

47

Botoacuten de enviacuteo de datos type=submit

Con este argumento especificamos un botoacuten en el que al pulsar los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario El formato es

ltINPUT type= submit value=Mensaje a mostrargt

En este caso el paraacutemetro value indica el mensaje que se mostraraacute en el botoacuten Veamos un ejemplo en la Tabla 51

Ejemplo Resultado

ltINPUT type=submit value=Enviar los Datosgt

Tabla 51

Botoacuten graacutefico de enviacuteo de datos type=image

Con este argumento especificamos un botoacuten de tipo imagen en el que al igual que con el botoacuten anterior si pulsamos en la imagen los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario Su formato es el siguiente

ltINPUT type= image src=URL de la imagen name=Variablegt

Con el paraacutemetro src especificamos la URL de la imagen que seraacute insertada en el botoacuten En este caso en la variable referenciada por name se almacenaraacuten las coordenadas del punto de la imagen donde se halla pinchado (de forma que estas coordenadas podriacutean ser procesadas por el programa que recibe los datos del formulario)

Botoacuten de borrado de datos type=reset

Con este argumento especificamos un botoacuten que al ser pulsado borraraacute el contenido actual de todos los campos dejaacutendolos con sus valores por defecto Su formato es

ltINPUT type= reset value=Texto del botoacutengt

Con el paraacutemetro value especificamos el texto que etiquetaraacute al botoacuten

Ejemplo Resultado

ltINPUT type=reset value=Borrar datosgt

Tabla 52

Lenguaje HTML copy Grupo EIDOS

48

Entrada datos en muacuteltiples liacuteneas En un formulario tambieacuten podremos introducir un campo de texto que abarque varias liacuteneas Para ello usaremos la etiqueta ltTEXTAREAgt ltTEXTAREAgt Su formato es el siguiente

ltTEXTAREA name=Variable rows=Filas cols=ColumnasgtContenido por defectoltTEXTAREAgt

Los argumentos rows y cols nos van a permitir especificar respectivamente el nuacutemero de filas de texto visibles y el nuacutemero de columnas de texto visibles en el campo

Ejemplo Resultado

ltTEXTAREA name=Var7 rows=5 cols=40gtContenido por defectoltTEXTAREAgt

Tabla 53

Entrada de datos a traveacutes de campos de seleccioacuten Con los campos de seleccioacuten podremos desplegar una lista de opciones entre las que podremos seleccionar una Para ello usaremos la etiqueta ltSELECTgt ltSELECTgt Su formato es el siguiente

ltSELECT name=Variable multiple size=ngtltOPTION selected value=Valor_1gtPrimera OpcioacutenltOPTION value=Valor_2gtSegunda Opcioacuten

ltOPTION value=Valor_ngtEneacutesima Opcioacuten

ltSELECTgt

Figura 1

bull La variable referenciada por name tomaraacute el valor(value) de la opcioacuten seleccionada

bull Si especificamos el argumento muacuteltiple se mostraraacuten todas la opciones en forma de tabla El nuacutemero de opciones visibles en la tabla vendraacute dado por el argumento size

copy Grupo EIDOS 4 Elementos del lenguaje II

49

bull Con la etiqueta ltOPTIONgt iremos definiendo cada una de las opciones de la lista

bull El argumento selected va a determinar cuaacutel es la opcioacuten por defecto

Para finalizar vamos a ver el Coacutedigo fuente 16 correspondiente a una encuesta realizada por la editorial ficticia EditoPc y en la Figura 2 observamos el resultado del formulario

ltP align=centergtltBgtEDITORIAL ltIgtEditoPcltIgtltBgtltPgtltFORM action=mailtodireccionejemplo method = postgtNombreltINPUT type=text size=30 name=nombregtltBRgtE_mail ltINPUT type=text size=30 name=e_mailgtltPgtDeseas recibir informacioacuten sobreltINPUT type=checkbox name=infor1 value=InternetgtInternetltINPUT type=checkbox name=infor2 value=ProgramacioacutengtProgramacioacutenltINPUT type=checkbox name=infor3 value=SistOperativogtSistOperativoltINPUT type=checkbox name=infor4 value=OfimaacuteticagtOfimaacuteticaltPgtiquestTe conectas a Internet desde casa ltbrgtltINPUT type=radio name=intercasa value=sigtSiacuteltINPUT type=radio name=intercasa value=nogtNoltPgtiquestQueacute uso le das a tu ordenador ltBRgtltSELECT name=uso multiple size=3gtltOPTION selectedgtProfesionalltOPTIONgtDomeacutesticoltOPTIONgtOcioJuegosltSELECTgtltPgtCaracteriacutesticas de tu PCltBRgtltTEXTAREA name=caract rows=5 cols=40gtltTEXTAREAgtltPgtltINPUT type=submit value=Enviar datosgt ltINPUT type=reset value=Borrardatosgt

Coacutedigo fuente 16

Figura 2

Elementos del lenguaje III

Frames Las frames son una utilidad del HTML que nos permite dividir la ventana del navegador en diferentes subventanas que podraacuten ser manipuladas de manera independiente Esto nos permitiraacute mostrar una paacutegina web diferente en cada una de la subventanas o frames

Estructura de un documento con frames Un documento con frames se estructura de manera diferente a un documento HTML normal Asiacute en este tipo de documentos no apareceraacute la etiqueta ltBODYgt En su lugar se incluiraacute la etiqueta ltFRAMESETgt ltFRAMESETgt dentro de la cual se definiraacuten las distintas frames que se incluyan en el documento

La estructura general de un documento de este tipo seriacutea por tanto

ltHTMLgtltHEADgtCabeceraltHEADgtltFRAMESETgt

Definicioacuten de la distintas framesltFRAMESETgtltNOFRAMESgt

Instrucciones HTMLltNOFRAMESgt

ltHTMLgt

Lenguaje HTML copy Grupo EIDOS

52

Puede darse el caso de que programemos nuestro documento con frames siguiendo la estructura anterior y que el navegador que se use para leer el documento no soporte la caracteriacutestica de frames con lo cual no se mostraraacute nada de lo indicado entre las etiquetas ltFRAMESETgt y ltFRAMESETgtPara solucionar este problema todas las instrucciones HTML incluidas entre las etiquetas ltNOFRAMESgt y ltNOFRAMESgt seraacuten ejecutadas por los navegadores que no soportan las frames

La sintaxis de la etiqueta ltFRAMESETgt es

ltFRAMESET rows=Lista de filas cols=Lista de columnasgtltFRAME src=URL de la frame 1 name=Nombre de la frame 1gtltFRAME src=URL de la frame 2 name=Nombre de la frame 2gt

ltFRAME src=URL de la frame n name=Nombre de la frame ngt

ltFRAMESETgt

Como vemos por cada una de la frames que incluyamos en nuestro documento debemos incluir una etiqueta ltFRAMEgt indicando mediante sus argumentos la direccioacuten URL del documento que se insertaraacute en la subventana (src) y el nombre de la frame (name) Posteriormente describiremos la etiqueta ltFRAMEgt con maacutes detalle

Los argumentos de ltFRAMESETgt son rows y cols definieacutendose uacutenicamente uno de los dos atributos en funcioacuten de si la divisioacuten de la pantalla se realizaraacute por filas (rows) o por columnas (cols)

Por cada una de las subventanas que creemos debemos especificar su tamantildeo en puntos o en porcentaje del tamantildeo de cada subventana Asiacute por ejemplo si especificamos rows= 50 2525 crearemos tres subventanas horizontales ocupando la primera el 50 de la ventana principal y las otras dos el resto Si especificamos cols=100150 crearemos tres subventanas verticales ocupando la primera 100 puntos de la ventana principal la segunda 150 puntos y tercera el espacio restante

Vamos a verlo maacutes claramente con un par de ejemplos praacutecticos que vemos en la Tabla 54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 502525gt ltFRAMEsrc=Pagweb1htm name=Pagweb1gtltFRAMEsrc=Pagweb2htm name=Pagweb2gtltFRAMEsrc=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 33: Programacion web   lenguaje html

Lenguaje HTML copy Grupo EIDOS

38

2 ltTRgt ltTRgt Definicioacuten de las filas de la tabla Por cada etiqueta ltTRgt que incluyamos se crearaacute una fila en la tabla No seraacute necesario indicar la etiqueta de cierre

3 ltTHgtltTHgt oacute ltTDgtltTDgt Definicioacuten de cada una de las celdas de la tabla Vemos que estas etiquetas estaacuten contenidas dentro de otra etiqueta de definicioacuten de fila de forma que por cada etiqueta ltTHgt o ltTDgt que incluyamos se crearaacute una celda dentro de la fila correspondiente La etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera es decir celdas cuyo contenido estaacute resaltado en negrita dejando la etiqueta ltTDgt para definir celdas de datos En este caso tampoco es necesario indicar las etiquetas de cierre

Todas estas etiquetas tienen sus respectivos argumentos Pero antes de analizar cada uno de ellos vamos a ver un ejemplo muy sencillito en la Tabla 33 que nos crearaacute una tabla de una sola celda (1 fila X 1 columna = 1 celda) Para ello usaremos la etiqueta de creacioacuten de tabla ltTABLEgt con el argumento border=1 (nos dibuja un borde de tamantildeo 1 alrededor de la tabla)

Ejemplo Resultado

ltTABLE border=1gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 33

Vamos ahora a analizar lo distintos argumentos que componen las etiquetas de la tabla analizaacutendolos desde lo general (la definicioacuten de la tabla) hasta lo especiacutefico (la definicioacuten de las celdas)

1 Definicioacuten de la tabla ltTABLEgt

ltTABLE border=n cellpadding=n cellspacing=n width=n oacute height=n oacute bgcolor=rrggbb oacute nombre gt

Contenido ltTABLEgt

bull border=n Si especificamos este argumento se dibujaraacute un borde alrededor de la

tabla del ancho que le indiquemos como muestra la Tabla 34

Ejemplo Resultado

Mi primera tabla ltTABLE border=4gtltTRgtltTDgtMi primera tablaltTABLEgt

Tabla 34

bull cellpadding=n Indica el espacio en puntos que separa el contenido de la celda con

el borde de la misma siendo 1 por defecto

copy Grupo EIDOS 4 Elementos del lenguaje II

39

Ejemplo Resultado

ltTABLE border=4 cellpadding=8gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 35

bull cellspacing=n Indica el espacio en puntos que separa a las celdas contenidas dentro de la tabla siendo 2 por defecto

bull width=n oacute Indica la anchura de la tabla en puntos o en en funcioacuten del ancho de la ventana del visualizador Si no indicamos este argumento el ancho de la tabla se ajustaraacute al tamantildeo del contenido de las celdas Esto es lo que ha ocurrido en el uacuteltimo ejemplo que hemos realizado Veamos un ejemplo en el Coacutedigo fuente 11 El resultado se muestra en la Tabla 36

ltTABLE border=4 width=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 11

Mi primera tabla

Tabla 36

bull height=n oacute Nos permite definir la altura de la tabla en puntos o en de la

altura de la ventana del visualizador Si indicamos este argumento lo recomendable es darlo en puntos ya que es maacutes complicado adecuarnos a la altura de la ventana del visualizador Al igual que en el caso anterior si no especificamos este argumento la altura se adecuaraacute al contenido de las celdas El Coacutedigo fuente 12 muestra un ejemplo y la Tabla 37 nos muestra el resultado

ltTABLE border=4 width=50 height=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 12

Mi primera tabla

Tabla 37

bull bgcolor= rrggbb o nombre del color Nos permite definir un color

de fondo para todas las celdas de la tabla Maacutes adelante veremos como podemos definir colores especiacuteficos para cada una de las celdas por separado

Lenguaje HTML copy Grupo EIDOS

40

Ejemplo Resultado

ltTABLE border=4 bgcolor=yellowgtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 38

2 Definicioacuten de las filas de la tabla ltTRgt

ltTR align=leftrightcenter valign=topmiddlebottombgcolor=rrggbb oacute nombregt

Antes de empezar a descifrar el significado de cada uno de los argumentos de esta etiqueta vamos a ver un ejemplo en la Tabla 39 de coacutemo se construiriacutea una tabla con dos filas (2 filas X 1 columna = 2 celdas)

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR gtltTDgtPrimera filaltTRgtltTDgtSegunda filaltTABLEgt

Segunda fila

Tabla 39

bull align=leftrightcenter Con este argumento vamos a indicar la alineacioacuten

horizontal (leftizquierda rightderecha centercentrado) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado Veamos un ejemplo en el Coacutedigo fuente 13 y su correspondiente resultado en la Tabla 40

ltTABLE border=4 width=50 gt ltTRgtltTDgtPrimera filaltTRalign=rightgtltTDgtSegunda filaltTABLEgt

Coacutedigo fuente 13

Primera fila

Segunda fila

Tabla 40

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten

vertical (toparriba middlecentrado bottomabajo) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado

copy Grupo EIDOS 4 Elementos del lenguaje II

41

bull bgcolor= rrggbb o nombre del color En este caso este argumento nos permitiraacute definir un color de fondo para todas las celdas de una fila veamos un ejemplo en la

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR bgcolor=yellowgtltTDgtPrimera

filaltTR bgcolor=greengtltTDgtSegunda

filaltTABLEgt

Segunda fila

Tabla 41

3 Definicioacuten de las celdas de la tabla ltTHgt oacute ltTDgt

ltTH oacute TD align=leftrightcenterjustifyvalign=topmiddlebottom bgcolor=rrggbb oacute nombre width=nrowspan=n colspan=ngt

Como ya explicamos anteriormente la etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera y la etiqueta ltTDgt para la creacioacuten de celdas de datos Vamos a completar nuestro ejemplo inicial antildeadieacutendole tres filas de dos celdas cada una (3 filas X 2 columnas = 6 celdas) Tabla 42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTDgtCelda 21ltTDgtCelda 22

ltTABLEgt Celda 21 Celda 22

Tabla 42

bull align=leftrightcenterjustify Con este argumento vamos a indicar la

alineacioacuten horizontal (left izquierda right derecha center centrado justifyjustificado) del contenido de cada celda por separado Su significado es el mismo que en la etiqueta ltTRgt

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten vertical (toparriba middlecentrado bottomabajo) del contenido de cada celda

bull bgcolor= rrggbb o nombre del color En este caso podremos definir un color de fondo para cada una de las celdas de manera independiente

bull width=n oacute Indica el ancho de la celda en puntos o en en funcioacuten del tamantildeo de la tabla

Lenguaje HTML copy Grupo EIDOS

42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera

1ltTHgtCabecera 2ltTR gtltTD align=rightgtCelda

11ltTD bgcolor=redgtCelda 12ltTRgtltTD

bgcolor=yellowgtCelda 21ltTDalign=centergtCelda 22ltTABLEgt

Celda 21 Celda 22

Tabla 43

bull rowspan=n Con este argumento podemos lograr que una celda concreta abarque maacutes de una fila ya sabemos que por defecto una celda ocupa una sola fila

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTD rowspan=2gtCelda

11ltTDgtCelda 12ltTRgtltTDgtCelda 22

ltTABLEgt

Celda 11 Celda 22

Tabla 44

bull colspan=n Con este argumento podemos lograr que una celda se expanda a maacutes

de una columna

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTD colspan=2

align=centergtCelda 22ltTABLEgt

Celda 22

Tabla 45

Para finalizar este tema sobre la creacioacuten de tablas vamos a ver el ejemplo que aparece en el Coacutedigo fuente 14 y su resultado en la Tabla 46

ltTABLE border=4gtltTR gtltTH colspan=3 bgcolor=redgtTiacutetuloltTR bgcolor=yellowgtltTHgtCabecera 1ltTHgtCabecera 2ltTHgtCabecera 3

copy Grupo EIDOS 4 Elementos del lenguaje II

43

ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTDgtCelda 13ltTRgtltTD rowspan=2gtCelda 21ltTD bgcolor=greengtCelda 22ltTDgtCelda 23ltTRgtltTDgtCelda 32ltTDgtCelda 33

ltTABLEgt

Coacutedigo fuente 14

Tiacutetulo

Cabecera 1 Cabecera 2 Cabecera 3

Celda 11 Celda 12 Celda 13

Celda 22 Celda 23 Celda 21

Celda 32 Celda 33

Tabla 46

Formularios El formulario es el elemento de HTML que nos va a permitir interactuar con los visitantes de nuestras paacuteginas web de forma que podemos solicitarle informacioacuten al usuario y procesarla De esta forma podremos crear en nuestras paacuteginas encuestas para solicitar la opinioacuten del visitante sobre alguacuten tema e incluso sobre el contenido de nuestra propia paacutegina web cuestionarios para evaluar la asimilacioacuten de contenidos sobre un tema concreto que se trate en la paacutegina etc

El contenido de la informacioacuten introducida por medio del formulario seraacute enviado a la direccioacuten URL donde resida el programa que se encargaraacute de procesar los datos A este tipo de programas externos se les denomina programas CGI (Common Gateway Interface)

La etiqueta HTML que nos va a permitir la creacioacuten de formularios es ltFORMgt Su formato es el siguiente

ltFORM action=URL del programa que trata el formulariomethod=postgetgt Elementos del formulario ltFORMgt

bull action=URL del programa que trata el formulario A traveacutes de este

argumento indicaremos como ya hemos mencionado la direccioacuten del fichero de programa que va a tratar la informacioacuten suministrada por el formulario

Tambieacuten podriacuteamos incluir como URL que trata el formulario una direccioacuten de correo electroacutenico Por tanto el valor de este argumento podriacutea ser action =mailto direccioacuten de correo

Nota Esta opcioacuten soacutelo funciona adecuadamente con el navegador Netscape Con el Explorer este enviacuteo dariacutea como resultado un correo en blanco Para que esta opcioacuten funcione de manera independiente del navegador que se esteacute utilizando se ha de emplear un programa externo que realice este proceso

Lenguaje HTML copy Grupo EIDOS

44

bull method=postget A traveacutes de este argumento indicaremos el meacutetodo empleado para transferir la informacioacuten generada por el formulario

Si indicamos post se produciraacute la modificacioacuten del documento destino como es el caso de enviar la informacioacuten a una direccioacuten de correo electroacutenico Mediante el meacutetodo get no se produciraacuten cambios en el documento destino

Dentro de un formulario podremos incluir cualquier texto o instruccioacuten HTML de las vistas a lo largo de los capiacutetulos anteriores ademaacutes claro estaacute de los elementos tiacutepicos de un formulario cajas de texto botones de seleccioacuten menuacutes de opciones etc Vamos a ver coacutemo se incluiraacuten estos elementos en un formulario

Entrada baacutesica de datos Para definir los distintos tipos de campos baacutesicos de entrada de datos usaremos la etiqueta ltINPUTgt

El formato es el siguiente

ltINPUT type= text password checkbox radio hidden submit image reset name=Variable value=Valor inicialgt

bull El argumento type determinaraacute el tipo de campo de entrada que estamos insertando A

continuacioacuten describiremos cada uno de ellos

bull El argumento name especifica el nombre de la variable que tomaraacute el valor introducido en el campo

bull El argumento value especifica el valor por defecto que tendraacute el campo

Vamos a continuacioacuten a describir los distintos tipos campos de entrada que vendraacuten dados por los valores del argumento type

Texto corto type=text

Con este argumento vamos a indicar que el campo a introducir seraacute un texto El formato seriacutea

ltINPUT type= text name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los nuevos atributos es

bull size=Tamantildeo Indicaremos el tamantildeo en caracteres de la ventana de introduccioacuten de texto

bull maxlength=Longitud maacutexima Indicaremos el nuacutemero maacuteximo de caracteres a introducir en el campo

Vamos a ver un ejemplo en la Tabla 47

copy Grupo EIDOS 4 Elementos del lenguaje II

45

Ejemplo Resultado

NombreltINPUT type=text name=Var1Value=Texto por defecto size=20 maxlength=25gt

Tabla 47

Claves type=password

Con este argumento indicamos que el campo a introducir seraacute una palabra clave por lo que los caracteres que se introduzcan seraacuten sustituidos por asteriscos en la visualizacioacuten por pantalla El formato es

ltINPUT type= password name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los distintos argumentos es el mismo que en el caso anterior Veamos un ejemplo en la Tabla 48

Ejemplo Resultado

ClaveltINPUT type=password name=Var2Value=tutankamon size=11 maxlength=10gt

Tabla 48

Botones de seleccioacuten type=checkbox

El checkbox es un botoacuten que presenta dos estados marcado (1) y desmarcado (0) Podremos variar su estado simplemente pinchando con el ratoacuten El formato es

ltINPUT type= checkbox name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto

Si incluimos el argumento value cuando el botoacuten esteacute marcado su variable asociada adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 49

Ejemplo Resultado

ltINPUT type=checkbox name=Var3 value=Op1 checkedgtOpcioacuten1 ltbrgtltINPUT type=checkbox name=Var4 value=Op2gt Opcioacuten 2

Tabla 49

Lenguaje HTML copy Grupo EIDOS

46

Seleccioacuten entre varias opciones type=radio

Este argumento se usa cuando hay que hacer una seleccioacuten entre varias alternativas excluyentes pudieacutendose seleccionar uacutenicamente una de las alternativas Debemos incluir una etiqueta radio por cada una de las posibles alternativas El formato es

ltINPUT type= radio name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto En este caso uacutenicamente uno de los botones de radio podraacute aparecer marcado ya que se usa para el caso de opciones excluyentes

Cuando un botoacuten esteacute seleccionado la variable asociada a la lista de botones adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 50

Ejemplo Resultado

ltINPUT type=radio name=Var5 value=Op1gtOpcioacuten1 ltbrgtltINPUT type=radio name=Var5 value=Op2checkedgt Opcioacuten 2 ltbrgtltINPUT type=radio name=Var5 value=Op3 gtOpcioacuten 3

Tabla 50

En este ejemplo la variable Var5 tendraacute el valor Op2

Campos ocultos type=hidden

Este tipo de campos no son visibles para el usuario Su uso tiene sentido en el caso de enviar alguacuten tipo de informacioacuten que no deba ser visualizada o variada por el lector de nuestra paacutegina Web El formato es

ltINPUT type= hidden name=Variable value=Valor gt

Con esta etiqueta asignariacuteamos a la Variable referenciada por name el Valor de value y se mandariacutea junto con el formulario sin que el usuario de la paacutegina se entere de nada Veamos un ejemplo en el Coacutedigo fuente 15

ltINPUT type=hidden name=Var6 value=tutankamongt

Coacutedigo fuente 15

copy Grupo EIDOS 4 Elementos del lenguaje II

47

Botoacuten de enviacuteo de datos type=submit

Con este argumento especificamos un botoacuten en el que al pulsar los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario El formato es

ltINPUT type= submit value=Mensaje a mostrargt

En este caso el paraacutemetro value indica el mensaje que se mostraraacute en el botoacuten Veamos un ejemplo en la Tabla 51

Ejemplo Resultado

ltINPUT type=submit value=Enviar los Datosgt

Tabla 51

Botoacuten graacutefico de enviacuteo de datos type=image

Con este argumento especificamos un botoacuten de tipo imagen en el que al igual que con el botoacuten anterior si pulsamos en la imagen los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario Su formato es el siguiente

ltINPUT type= image src=URL de la imagen name=Variablegt

Con el paraacutemetro src especificamos la URL de la imagen que seraacute insertada en el botoacuten En este caso en la variable referenciada por name se almacenaraacuten las coordenadas del punto de la imagen donde se halla pinchado (de forma que estas coordenadas podriacutean ser procesadas por el programa que recibe los datos del formulario)

Botoacuten de borrado de datos type=reset

Con este argumento especificamos un botoacuten que al ser pulsado borraraacute el contenido actual de todos los campos dejaacutendolos con sus valores por defecto Su formato es

ltINPUT type= reset value=Texto del botoacutengt

Con el paraacutemetro value especificamos el texto que etiquetaraacute al botoacuten

Ejemplo Resultado

ltINPUT type=reset value=Borrar datosgt

Tabla 52

Lenguaje HTML copy Grupo EIDOS

48

Entrada datos en muacuteltiples liacuteneas En un formulario tambieacuten podremos introducir un campo de texto que abarque varias liacuteneas Para ello usaremos la etiqueta ltTEXTAREAgt ltTEXTAREAgt Su formato es el siguiente

ltTEXTAREA name=Variable rows=Filas cols=ColumnasgtContenido por defectoltTEXTAREAgt

Los argumentos rows y cols nos van a permitir especificar respectivamente el nuacutemero de filas de texto visibles y el nuacutemero de columnas de texto visibles en el campo

Ejemplo Resultado

ltTEXTAREA name=Var7 rows=5 cols=40gtContenido por defectoltTEXTAREAgt

Tabla 53

Entrada de datos a traveacutes de campos de seleccioacuten Con los campos de seleccioacuten podremos desplegar una lista de opciones entre las que podremos seleccionar una Para ello usaremos la etiqueta ltSELECTgt ltSELECTgt Su formato es el siguiente

ltSELECT name=Variable multiple size=ngtltOPTION selected value=Valor_1gtPrimera OpcioacutenltOPTION value=Valor_2gtSegunda Opcioacuten

ltOPTION value=Valor_ngtEneacutesima Opcioacuten

ltSELECTgt

Figura 1

bull La variable referenciada por name tomaraacute el valor(value) de la opcioacuten seleccionada

bull Si especificamos el argumento muacuteltiple se mostraraacuten todas la opciones en forma de tabla El nuacutemero de opciones visibles en la tabla vendraacute dado por el argumento size

copy Grupo EIDOS 4 Elementos del lenguaje II

49

bull Con la etiqueta ltOPTIONgt iremos definiendo cada una de las opciones de la lista

bull El argumento selected va a determinar cuaacutel es la opcioacuten por defecto

Para finalizar vamos a ver el Coacutedigo fuente 16 correspondiente a una encuesta realizada por la editorial ficticia EditoPc y en la Figura 2 observamos el resultado del formulario

ltP align=centergtltBgtEDITORIAL ltIgtEditoPcltIgtltBgtltPgtltFORM action=mailtodireccionejemplo method = postgtNombreltINPUT type=text size=30 name=nombregtltBRgtE_mail ltINPUT type=text size=30 name=e_mailgtltPgtDeseas recibir informacioacuten sobreltINPUT type=checkbox name=infor1 value=InternetgtInternetltINPUT type=checkbox name=infor2 value=ProgramacioacutengtProgramacioacutenltINPUT type=checkbox name=infor3 value=SistOperativogtSistOperativoltINPUT type=checkbox name=infor4 value=OfimaacuteticagtOfimaacuteticaltPgtiquestTe conectas a Internet desde casa ltbrgtltINPUT type=radio name=intercasa value=sigtSiacuteltINPUT type=radio name=intercasa value=nogtNoltPgtiquestQueacute uso le das a tu ordenador ltBRgtltSELECT name=uso multiple size=3gtltOPTION selectedgtProfesionalltOPTIONgtDomeacutesticoltOPTIONgtOcioJuegosltSELECTgtltPgtCaracteriacutesticas de tu PCltBRgtltTEXTAREA name=caract rows=5 cols=40gtltTEXTAREAgtltPgtltINPUT type=submit value=Enviar datosgt ltINPUT type=reset value=Borrardatosgt

Coacutedigo fuente 16

Figura 2

Elementos del lenguaje III

Frames Las frames son una utilidad del HTML que nos permite dividir la ventana del navegador en diferentes subventanas que podraacuten ser manipuladas de manera independiente Esto nos permitiraacute mostrar una paacutegina web diferente en cada una de la subventanas o frames

Estructura de un documento con frames Un documento con frames se estructura de manera diferente a un documento HTML normal Asiacute en este tipo de documentos no apareceraacute la etiqueta ltBODYgt En su lugar se incluiraacute la etiqueta ltFRAMESETgt ltFRAMESETgt dentro de la cual se definiraacuten las distintas frames que se incluyan en el documento

La estructura general de un documento de este tipo seriacutea por tanto

ltHTMLgtltHEADgtCabeceraltHEADgtltFRAMESETgt

Definicioacuten de la distintas framesltFRAMESETgtltNOFRAMESgt

Instrucciones HTMLltNOFRAMESgt

ltHTMLgt

Lenguaje HTML copy Grupo EIDOS

52

Puede darse el caso de que programemos nuestro documento con frames siguiendo la estructura anterior y que el navegador que se use para leer el documento no soporte la caracteriacutestica de frames con lo cual no se mostraraacute nada de lo indicado entre las etiquetas ltFRAMESETgt y ltFRAMESETgtPara solucionar este problema todas las instrucciones HTML incluidas entre las etiquetas ltNOFRAMESgt y ltNOFRAMESgt seraacuten ejecutadas por los navegadores que no soportan las frames

La sintaxis de la etiqueta ltFRAMESETgt es

ltFRAMESET rows=Lista de filas cols=Lista de columnasgtltFRAME src=URL de la frame 1 name=Nombre de la frame 1gtltFRAME src=URL de la frame 2 name=Nombre de la frame 2gt

ltFRAME src=URL de la frame n name=Nombre de la frame ngt

ltFRAMESETgt

Como vemos por cada una de la frames que incluyamos en nuestro documento debemos incluir una etiqueta ltFRAMEgt indicando mediante sus argumentos la direccioacuten URL del documento que se insertaraacute en la subventana (src) y el nombre de la frame (name) Posteriormente describiremos la etiqueta ltFRAMEgt con maacutes detalle

Los argumentos de ltFRAMESETgt son rows y cols definieacutendose uacutenicamente uno de los dos atributos en funcioacuten de si la divisioacuten de la pantalla se realizaraacute por filas (rows) o por columnas (cols)

Por cada una de las subventanas que creemos debemos especificar su tamantildeo en puntos o en porcentaje del tamantildeo de cada subventana Asiacute por ejemplo si especificamos rows= 50 2525 crearemos tres subventanas horizontales ocupando la primera el 50 de la ventana principal y las otras dos el resto Si especificamos cols=100150 crearemos tres subventanas verticales ocupando la primera 100 puntos de la ventana principal la segunda 150 puntos y tercera el espacio restante

Vamos a verlo maacutes claramente con un par de ejemplos praacutecticos que vemos en la Tabla 54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 502525gt ltFRAMEsrc=Pagweb1htm name=Pagweb1gtltFRAMEsrc=Pagweb2htm name=Pagweb2gtltFRAMEsrc=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 34: Programacion web   lenguaje html

copy Grupo EIDOS 4 Elementos del lenguaje II

39

Ejemplo Resultado

ltTABLE border=4 cellpadding=8gtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 35

bull cellspacing=n Indica el espacio en puntos que separa a las celdas contenidas dentro de la tabla siendo 2 por defecto

bull width=n oacute Indica la anchura de la tabla en puntos o en en funcioacuten del ancho de la ventana del visualizador Si no indicamos este argumento el ancho de la tabla se ajustaraacute al tamantildeo del contenido de las celdas Esto es lo que ha ocurrido en el uacuteltimo ejemplo que hemos realizado Veamos un ejemplo en el Coacutedigo fuente 11 El resultado se muestra en la Tabla 36

ltTABLE border=4 width=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 11

Mi primera tabla

Tabla 36

bull height=n oacute Nos permite definir la altura de la tabla en puntos o en de la

altura de la ventana del visualizador Si indicamos este argumento lo recomendable es darlo en puntos ya que es maacutes complicado adecuarnos a la altura de la ventana del visualizador Al igual que en el caso anterior si no especificamos este argumento la altura se adecuaraacute al contenido de las celdas El Coacutedigo fuente 12 muestra un ejemplo y la Tabla 37 nos muestra el resultado

ltTABLE border=4 width=50 height=50gtltTRgtltTDgtMi primera tablaltTABLEgt

Coacutedigo fuente 12

Mi primera tabla

Tabla 37

bull bgcolor= rrggbb o nombre del color Nos permite definir un color

de fondo para todas las celdas de la tabla Maacutes adelante veremos como podemos definir colores especiacuteficos para cada una de las celdas por separado

Lenguaje HTML copy Grupo EIDOS

40

Ejemplo Resultado

ltTABLE border=4 bgcolor=yellowgtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 38

2 Definicioacuten de las filas de la tabla ltTRgt

ltTR align=leftrightcenter valign=topmiddlebottombgcolor=rrggbb oacute nombregt

Antes de empezar a descifrar el significado de cada uno de los argumentos de esta etiqueta vamos a ver un ejemplo en la Tabla 39 de coacutemo se construiriacutea una tabla con dos filas (2 filas X 1 columna = 2 celdas)

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR gtltTDgtPrimera filaltTRgtltTDgtSegunda filaltTABLEgt

Segunda fila

Tabla 39

bull align=leftrightcenter Con este argumento vamos a indicar la alineacioacuten

horizontal (leftizquierda rightderecha centercentrado) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado Veamos un ejemplo en el Coacutedigo fuente 13 y su correspondiente resultado en la Tabla 40

ltTABLE border=4 width=50 gt ltTRgtltTDgtPrimera filaltTRalign=rightgtltTDgtSegunda filaltTABLEgt

Coacutedigo fuente 13

Primera fila

Segunda fila

Tabla 40

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten

vertical (toparriba middlecentrado bottomabajo) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado

copy Grupo EIDOS 4 Elementos del lenguaje II

41

bull bgcolor= rrggbb o nombre del color En este caso este argumento nos permitiraacute definir un color de fondo para todas las celdas de una fila veamos un ejemplo en la

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR bgcolor=yellowgtltTDgtPrimera

filaltTR bgcolor=greengtltTDgtSegunda

filaltTABLEgt

Segunda fila

Tabla 41

3 Definicioacuten de las celdas de la tabla ltTHgt oacute ltTDgt

ltTH oacute TD align=leftrightcenterjustifyvalign=topmiddlebottom bgcolor=rrggbb oacute nombre width=nrowspan=n colspan=ngt

Como ya explicamos anteriormente la etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera y la etiqueta ltTDgt para la creacioacuten de celdas de datos Vamos a completar nuestro ejemplo inicial antildeadieacutendole tres filas de dos celdas cada una (3 filas X 2 columnas = 6 celdas) Tabla 42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTDgtCelda 21ltTDgtCelda 22

ltTABLEgt Celda 21 Celda 22

Tabla 42

bull align=leftrightcenterjustify Con este argumento vamos a indicar la

alineacioacuten horizontal (left izquierda right derecha center centrado justifyjustificado) del contenido de cada celda por separado Su significado es el mismo que en la etiqueta ltTRgt

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten vertical (toparriba middlecentrado bottomabajo) del contenido de cada celda

bull bgcolor= rrggbb o nombre del color En este caso podremos definir un color de fondo para cada una de las celdas de manera independiente

bull width=n oacute Indica el ancho de la celda en puntos o en en funcioacuten del tamantildeo de la tabla

Lenguaje HTML copy Grupo EIDOS

42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera

1ltTHgtCabecera 2ltTR gtltTD align=rightgtCelda

11ltTD bgcolor=redgtCelda 12ltTRgtltTD

bgcolor=yellowgtCelda 21ltTDalign=centergtCelda 22ltTABLEgt

Celda 21 Celda 22

Tabla 43

bull rowspan=n Con este argumento podemos lograr que una celda concreta abarque maacutes de una fila ya sabemos que por defecto una celda ocupa una sola fila

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTD rowspan=2gtCelda

11ltTDgtCelda 12ltTRgtltTDgtCelda 22

ltTABLEgt

Celda 11 Celda 22

Tabla 44

bull colspan=n Con este argumento podemos lograr que una celda se expanda a maacutes

de una columna

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTD colspan=2

align=centergtCelda 22ltTABLEgt

Celda 22

Tabla 45

Para finalizar este tema sobre la creacioacuten de tablas vamos a ver el ejemplo que aparece en el Coacutedigo fuente 14 y su resultado en la Tabla 46

ltTABLE border=4gtltTR gtltTH colspan=3 bgcolor=redgtTiacutetuloltTR bgcolor=yellowgtltTHgtCabecera 1ltTHgtCabecera 2ltTHgtCabecera 3

copy Grupo EIDOS 4 Elementos del lenguaje II

43

ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTDgtCelda 13ltTRgtltTD rowspan=2gtCelda 21ltTD bgcolor=greengtCelda 22ltTDgtCelda 23ltTRgtltTDgtCelda 32ltTDgtCelda 33

ltTABLEgt

Coacutedigo fuente 14

Tiacutetulo

Cabecera 1 Cabecera 2 Cabecera 3

Celda 11 Celda 12 Celda 13

Celda 22 Celda 23 Celda 21

Celda 32 Celda 33

Tabla 46

Formularios El formulario es el elemento de HTML que nos va a permitir interactuar con los visitantes de nuestras paacuteginas web de forma que podemos solicitarle informacioacuten al usuario y procesarla De esta forma podremos crear en nuestras paacuteginas encuestas para solicitar la opinioacuten del visitante sobre alguacuten tema e incluso sobre el contenido de nuestra propia paacutegina web cuestionarios para evaluar la asimilacioacuten de contenidos sobre un tema concreto que se trate en la paacutegina etc

El contenido de la informacioacuten introducida por medio del formulario seraacute enviado a la direccioacuten URL donde resida el programa que se encargaraacute de procesar los datos A este tipo de programas externos se les denomina programas CGI (Common Gateway Interface)

La etiqueta HTML que nos va a permitir la creacioacuten de formularios es ltFORMgt Su formato es el siguiente

ltFORM action=URL del programa que trata el formulariomethod=postgetgt Elementos del formulario ltFORMgt

bull action=URL del programa que trata el formulario A traveacutes de este

argumento indicaremos como ya hemos mencionado la direccioacuten del fichero de programa que va a tratar la informacioacuten suministrada por el formulario

Tambieacuten podriacuteamos incluir como URL que trata el formulario una direccioacuten de correo electroacutenico Por tanto el valor de este argumento podriacutea ser action =mailto direccioacuten de correo

Nota Esta opcioacuten soacutelo funciona adecuadamente con el navegador Netscape Con el Explorer este enviacuteo dariacutea como resultado un correo en blanco Para que esta opcioacuten funcione de manera independiente del navegador que se esteacute utilizando se ha de emplear un programa externo que realice este proceso

Lenguaje HTML copy Grupo EIDOS

44

bull method=postget A traveacutes de este argumento indicaremos el meacutetodo empleado para transferir la informacioacuten generada por el formulario

Si indicamos post se produciraacute la modificacioacuten del documento destino como es el caso de enviar la informacioacuten a una direccioacuten de correo electroacutenico Mediante el meacutetodo get no se produciraacuten cambios en el documento destino

Dentro de un formulario podremos incluir cualquier texto o instruccioacuten HTML de las vistas a lo largo de los capiacutetulos anteriores ademaacutes claro estaacute de los elementos tiacutepicos de un formulario cajas de texto botones de seleccioacuten menuacutes de opciones etc Vamos a ver coacutemo se incluiraacuten estos elementos en un formulario

Entrada baacutesica de datos Para definir los distintos tipos de campos baacutesicos de entrada de datos usaremos la etiqueta ltINPUTgt

El formato es el siguiente

ltINPUT type= text password checkbox radio hidden submit image reset name=Variable value=Valor inicialgt

bull El argumento type determinaraacute el tipo de campo de entrada que estamos insertando A

continuacioacuten describiremos cada uno de ellos

bull El argumento name especifica el nombre de la variable que tomaraacute el valor introducido en el campo

bull El argumento value especifica el valor por defecto que tendraacute el campo

Vamos a continuacioacuten a describir los distintos tipos campos de entrada que vendraacuten dados por los valores del argumento type

Texto corto type=text

Con este argumento vamos a indicar que el campo a introducir seraacute un texto El formato seriacutea

ltINPUT type= text name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los nuevos atributos es

bull size=Tamantildeo Indicaremos el tamantildeo en caracteres de la ventana de introduccioacuten de texto

bull maxlength=Longitud maacutexima Indicaremos el nuacutemero maacuteximo de caracteres a introducir en el campo

Vamos a ver un ejemplo en la Tabla 47

copy Grupo EIDOS 4 Elementos del lenguaje II

45

Ejemplo Resultado

NombreltINPUT type=text name=Var1Value=Texto por defecto size=20 maxlength=25gt

Tabla 47

Claves type=password

Con este argumento indicamos que el campo a introducir seraacute una palabra clave por lo que los caracteres que se introduzcan seraacuten sustituidos por asteriscos en la visualizacioacuten por pantalla El formato es

ltINPUT type= password name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los distintos argumentos es el mismo que en el caso anterior Veamos un ejemplo en la Tabla 48

Ejemplo Resultado

ClaveltINPUT type=password name=Var2Value=tutankamon size=11 maxlength=10gt

Tabla 48

Botones de seleccioacuten type=checkbox

El checkbox es un botoacuten que presenta dos estados marcado (1) y desmarcado (0) Podremos variar su estado simplemente pinchando con el ratoacuten El formato es

ltINPUT type= checkbox name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto

Si incluimos el argumento value cuando el botoacuten esteacute marcado su variable asociada adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 49

Ejemplo Resultado

ltINPUT type=checkbox name=Var3 value=Op1 checkedgtOpcioacuten1 ltbrgtltINPUT type=checkbox name=Var4 value=Op2gt Opcioacuten 2

Tabla 49

Lenguaje HTML copy Grupo EIDOS

46

Seleccioacuten entre varias opciones type=radio

Este argumento se usa cuando hay que hacer una seleccioacuten entre varias alternativas excluyentes pudieacutendose seleccionar uacutenicamente una de las alternativas Debemos incluir una etiqueta radio por cada una de las posibles alternativas El formato es

ltINPUT type= radio name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto En este caso uacutenicamente uno de los botones de radio podraacute aparecer marcado ya que se usa para el caso de opciones excluyentes

Cuando un botoacuten esteacute seleccionado la variable asociada a la lista de botones adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 50

Ejemplo Resultado

ltINPUT type=radio name=Var5 value=Op1gtOpcioacuten1 ltbrgtltINPUT type=radio name=Var5 value=Op2checkedgt Opcioacuten 2 ltbrgtltINPUT type=radio name=Var5 value=Op3 gtOpcioacuten 3

Tabla 50

En este ejemplo la variable Var5 tendraacute el valor Op2

Campos ocultos type=hidden

Este tipo de campos no son visibles para el usuario Su uso tiene sentido en el caso de enviar alguacuten tipo de informacioacuten que no deba ser visualizada o variada por el lector de nuestra paacutegina Web El formato es

ltINPUT type= hidden name=Variable value=Valor gt

Con esta etiqueta asignariacuteamos a la Variable referenciada por name el Valor de value y se mandariacutea junto con el formulario sin que el usuario de la paacutegina se entere de nada Veamos un ejemplo en el Coacutedigo fuente 15

ltINPUT type=hidden name=Var6 value=tutankamongt

Coacutedigo fuente 15

copy Grupo EIDOS 4 Elementos del lenguaje II

47

Botoacuten de enviacuteo de datos type=submit

Con este argumento especificamos un botoacuten en el que al pulsar los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario El formato es

ltINPUT type= submit value=Mensaje a mostrargt

En este caso el paraacutemetro value indica el mensaje que se mostraraacute en el botoacuten Veamos un ejemplo en la Tabla 51

Ejemplo Resultado

ltINPUT type=submit value=Enviar los Datosgt

Tabla 51

Botoacuten graacutefico de enviacuteo de datos type=image

Con este argumento especificamos un botoacuten de tipo imagen en el que al igual que con el botoacuten anterior si pulsamos en la imagen los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario Su formato es el siguiente

ltINPUT type= image src=URL de la imagen name=Variablegt

Con el paraacutemetro src especificamos la URL de la imagen que seraacute insertada en el botoacuten En este caso en la variable referenciada por name se almacenaraacuten las coordenadas del punto de la imagen donde se halla pinchado (de forma que estas coordenadas podriacutean ser procesadas por el programa que recibe los datos del formulario)

Botoacuten de borrado de datos type=reset

Con este argumento especificamos un botoacuten que al ser pulsado borraraacute el contenido actual de todos los campos dejaacutendolos con sus valores por defecto Su formato es

ltINPUT type= reset value=Texto del botoacutengt

Con el paraacutemetro value especificamos el texto que etiquetaraacute al botoacuten

Ejemplo Resultado

ltINPUT type=reset value=Borrar datosgt

Tabla 52

Lenguaje HTML copy Grupo EIDOS

48

Entrada datos en muacuteltiples liacuteneas En un formulario tambieacuten podremos introducir un campo de texto que abarque varias liacuteneas Para ello usaremos la etiqueta ltTEXTAREAgt ltTEXTAREAgt Su formato es el siguiente

ltTEXTAREA name=Variable rows=Filas cols=ColumnasgtContenido por defectoltTEXTAREAgt

Los argumentos rows y cols nos van a permitir especificar respectivamente el nuacutemero de filas de texto visibles y el nuacutemero de columnas de texto visibles en el campo

Ejemplo Resultado

ltTEXTAREA name=Var7 rows=5 cols=40gtContenido por defectoltTEXTAREAgt

Tabla 53

Entrada de datos a traveacutes de campos de seleccioacuten Con los campos de seleccioacuten podremos desplegar una lista de opciones entre las que podremos seleccionar una Para ello usaremos la etiqueta ltSELECTgt ltSELECTgt Su formato es el siguiente

ltSELECT name=Variable multiple size=ngtltOPTION selected value=Valor_1gtPrimera OpcioacutenltOPTION value=Valor_2gtSegunda Opcioacuten

ltOPTION value=Valor_ngtEneacutesima Opcioacuten

ltSELECTgt

Figura 1

bull La variable referenciada por name tomaraacute el valor(value) de la opcioacuten seleccionada

bull Si especificamos el argumento muacuteltiple se mostraraacuten todas la opciones en forma de tabla El nuacutemero de opciones visibles en la tabla vendraacute dado por el argumento size

copy Grupo EIDOS 4 Elementos del lenguaje II

49

bull Con la etiqueta ltOPTIONgt iremos definiendo cada una de las opciones de la lista

bull El argumento selected va a determinar cuaacutel es la opcioacuten por defecto

Para finalizar vamos a ver el Coacutedigo fuente 16 correspondiente a una encuesta realizada por la editorial ficticia EditoPc y en la Figura 2 observamos el resultado del formulario

ltP align=centergtltBgtEDITORIAL ltIgtEditoPcltIgtltBgtltPgtltFORM action=mailtodireccionejemplo method = postgtNombreltINPUT type=text size=30 name=nombregtltBRgtE_mail ltINPUT type=text size=30 name=e_mailgtltPgtDeseas recibir informacioacuten sobreltINPUT type=checkbox name=infor1 value=InternetgtInternetltINPUT type=checkbox name=infor2 value=ProgramacioacutengtProgramacioacutenltINPUT type=checkbox name=infor3 value=SistOperativogtSistOperativoltINPUT type=checkbox name=infor4 value=OfimaacuteticagtOfimaacuteticaltPgtiquestTe conectas a Internet desde casa ltbrgtltINPUT type=radio name=intercasa value=sigtSiacuteltINPUT type=radio name=intercasa value=nogtNoltPgtiquestQueacute uso le das a tu ordenador ltBRgtltSELECT name=uso multiple size=3gtltOPTION selectedgtProfesionalltOPTIONgtDomeacutesticoltOPTIONgtOcioJuegosltSELECTgtltPgtCaracteriacutesticas de tu PCltBRgtltTEXTAREA name=caract rows=5 cols=40gtltTEXTAREAgtltPgtltINPUT type=submit value=Enviar datosgt ltINPUT type=reset value=Borrardatosgt

Coacutedigo fuente 16

Figura 2

Elementos del lenguaje III

Frames Las frames son una utilidad del HTML que nos permite dividir la ventana del navegador en diferentes subventanas que podraacuten ser manipuladas de manera independiente Esto nos permitiraacute mostrar una paacutegina web diferente en cada una de la subventanas o frames

Estructura de un documento con frames Un documento con frames se estructura de manera diferente a un documento HTML normal Asiacute en este tipo de documentos no apareceraacute la etiqueta ltBODYgt En su lugar se incluiraacute la etiqueta ltFRAMESETgt ltFRAMESETgt dentro de la cual se definiraacuten las distintas frames que se incluyan en el documento

La estructura general de un documento de este tipo seriacutea por tanto

ltHTMLgtltHEADgtCabeceraltHEADgtltFRAMESETgt

Definicioacuten de la distintas framesltFRAMESETgtltNOFRAMESgt

Instrucciones HTMLltNOFRAMESgt

ltHTMLgt

Lenguaje HTML copy Grupo EIDOS

52

Puede darse el caso de que programemos nuestro documento con frames siguiendo la estructura anterior y que el navegador que se use para leer el documento no soporte la caracteriacutestica de frames con lo cual no se mostraraacute nada de lo indicado entre las etiquetas ltFRAMESETgt y ltFRAMESETgtPara solucionar este problema todas las instrucciones HTML incluidas entre las etiquetas ltNOFRAMESgt y ltNOFRAMESgt seraacuten ejecutadas por los navegadores que no soportan las frames

La sintaxis de la etiqueta ltFRAMESETgt es

ltFRAMESET rows=Lista de filas cols=Lista de columnasgtltFRAME src=URL de la frame 1 name=Nombre de la frame 1gtltFRAME src=URL de la frame 2 name=Nombre de la frame 2gt

ltFRAME src=URL de la frame n name=Nombre de la frame ngt

ltFRAMESETgt

Como vemos por cada una de la frames que incluyamos en nuestro documento debemos incluir una etiqueta ltFRAMEgt indicando mediante sus argumentos la direccioacuten URL del documento que se insertaraacute en la subventana (src) y el nombre de la frame (name) Posteriormente describiremos la etiqueta ltFRAMEgt con maacutes detalle

Los argumentos de ltFRAMESETgt son rows y cols definieacutendose uacutenicamente uno de los dos atributos en funcioacuten de si la divisioacuten de la pantalla se realizaraacute por filas (rows) o por columnas (cols)

Por cada una de las subventanas que creemos debemos especificar su tamantildeo en puntos o en porcentaje del tamantildeo de cada subventana Asiacute por ejemplo si especificamos rows= 50 2525 crearemos tres subventanas horizontales ocupando la primera el 50 de la ventana principal y las otras dos el resto Si especificamos cols=100150 crearemos tres subventanas verticales ocupando la primera 100 puntos de la ventana principal la segunda 150 puntos y tercera el espacio restante

Vamos a verlo maacutes claramente con un par de ejemplos praacutecticos que vemos en la Tabla 54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 502525gt ltFRAMEsrc=Pagweb1htm name=Pagweb1gtltFRAMEsrc=Pagweb2htm name=Pagweb2gtltFRAMEsrc=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 35: Programacion web   lenguaje html

Lenguaje HTML copy Grupo EIDOS

40

Ejemplo Resultado

ltTABLE border=4 bgcolor=yellowgtltTRgtltTDgtMi primera tablaltTABLEgt

Mi primera tabla

Tabla 38

2 Definicioacuten de las filas de la tabla ltTRgt

ltTR align=leftrightcenter valign=topmiddlebottombgcolor=rrggbb oacute nombregt

Antes de empezar a descifrar el significado de cada uno de los argumentos de esta etiqueta vamos a ver un ejemplo en la Tabla 39 de coacutemo se construiriacutea una tabla con dos filas (2 filas X 1 columna = 2 celdas)

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR gtltTDgtPrimera filaltTRgtltTDgtSegunda filaltTABLEgt

Segunda fila

Tabla 39

bull align=leftrightcenter Con este argumento vamos a indicar la alineacioacuten

horizontal (leftizquierda rightderecha centercentrado) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado Veamos un ejemplo en el Coacutedigo fuente 13 y su correspondiente resultado en la Tabla 40

ltTABLE border=4 width=50 gt ltTRgtltTDgtPrimera filaltTRalign=rightgtltTDgtSegunda filaltTABLEgt

Coacutedigo fuente 13

Primera fila

Segunda fila

Tabla 40

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten

vertical (toparriba middlecentrado bottomabajo) del contenido de todas las celdas de la fila correspondiente Posteriormente veremos como podremos especificar la alineacioacuten del contenido de cada celda de la fila por separado

copy Grupo EIDOS 4 Elementos del lenguaje II

41

bull bgcolor= rrggbb o nombre del color En este caso este argumento nos permitiraacute definir un color de fondo para todas las celdas de una fila veamos un ejemplo en la

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR bgcolor=yellowgtltTDgtPrimera

filaltTR bgcolor=greengtltTDgtSegunda

filaltTABLEgt

Segunda fila

Tabla 41

3 Definicioacuten de las celdas de la tabla ltTHgt oacute ltTDgt

ltTH oacute TD align=leftrightcenterjustifyvalign=topmiddlebottom bgcolor=rrggbb oacute nombre width=nrowspan=n colspan=ngt

Como ya explicamos anteriormente la etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera y la etiqueta ltTDgt para la creacioacuten de celdas de datos Vamos a completar nuestro ejemplo inicial antildeadieacutendole tres filas de dos celdas cada una (3 filas X 2 columnas = 6 celdas) Tabla 42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTDgtCelda 21ltTDgtCelda 22

ltTABLEgt Celda 21 Celda 22

Tabla 42

bull align=leftrightcenterjustify Con este argumento vamos a indicar la

alineacioacuten horizontal (left izquierda right derecha center centrado justifyjustificado) del contenido de cada celda por separado Su significado es el mismo que en la etiqueta ltTRgt

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten vertical (toparriba middlecentrado bottomabajo) del contenido de cada celda

bull bgcolor= rrggbb o nombre del color En este caso podremos definir un color de fondo para cada una de las celdas de manera independiente

bull width=n oacute Indica el ancho de la celda en puntos o en en funcioacuten del tamantildeo de la tabla

Lenguaje HTML copy Grupo EIDOS

42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera

1ltTHgtCabecera 2ltTR gtltTD align=rightgtCelda

11ltTD bgcolor=redgtCelda 12ltTRgtltTD

bgcolor=yellowgtCelda 21ltTDalign=centergtCelda 22ltTABLEgt

Celda 21 Celda 22

Tabla 43

bull rowspan=n Con este argumento podemos lograr que una celda concreta abarque maacutes de una fila ya sabemos que por defecto una celda ocupa una sola fila

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTD rowspan=2gtCelda

11ltTDgtCelda 12ltTRgtltTDgtCelda 22

ltTABLEgt

Celda 11 Celda 22

Tabla 44

bull colspan=n Con este argumento podemos lograr que una celda se expanda a maacutes

de una columna

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTD colspan=2

align=centergtCelda 22ltTABLEgt

Celda 22

Tabla 45

Para finalizar este tema sobre la creacioacuten de tablas vamos a ver el ejemplo que aparece en el Coacutedigo fuente 14 y su resultado en la Tabla 46

ltTABLE border=4gtltTR gtltTH colspan=3 bgcolor=redgtTiacutetuloltTR bgcolor=yellowgtltTHgtCabecera 1ltTHgtCabecera 2ltTHgtCabecera 3

copy Grupo EIDOS 4 Elementos del lenguaje II

43

ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTDgtCelda 13ltTRgtltTD rowspan=2gtCelda 21ltTD bgcolor=greengtCelda 22ltTDgtCelda 23ltTRgtltTDgtCelda 32ltTDgtCelda 33

ltTABLEgt

Coacutedigo fuente 14

Tiacutetulo

Cabecera 1 Cabecera 2 Cabecera 3

Celda 11 Celda 12 Celda 13

Celda 22 Celda 23 Celda 21

Celda 32 Celda 33

Tabla 46

Formularios El formulario es el elemento de HTML que nos va a permitir interactuar con los visitantes de nuestras paacuteginas web de forma que podemos solicitarle informacioacuten al usuario y procesarla De esta forma podremos crear en nuestras paacuteginas encuestas para solicitar la opinioacuten del visitante sobre alguacuten tema e incluso sobre el contenido de nuestra propia paacutegina web cuestionarios para evaluar la asimilacioacuten de contenidos sobre un tema concreto que se trate en la paacutegina etc

El contenido de la informacioacuten introducida por medio del formulario seraacute enviado a la direccioacuten URL donde resida el programa que se encargaraacute de procesar los datos A este tipo de programas externos se les denomina programas CGI (Common Gateway Interface)

La etiqueta HTML que nos va a permitir la creacioacuten de formularios es ltFORMgt Su formato es el siguiente

ltFORM action=URL del programa que trata el formulariomethod=postgetgt Elementos del formulario ltFORMgt

bull action=URL del programa que trata el formulario A traveacutes de este

argumento indicaremos como ya hemos mencionado la direccioacuten del fichero de programa que va a tratar la informacioacuten suministrada por el formulario

Tambieacuten podriacuteamos incluir como URL que trata el formulario una direccioacuten de correo electroacutenico Por tanto el valor de este argumento podriacutea ser action =mailto direccioacuten de correo

Nota Esta opcioacuten soacutelo funciona adecuadamente con el navegador Netscape Con el Explorer este enviacuteo dariacutea como resultado un correo en blanco Para que esta opcioacuten funcione de manera independiente del navegador que se esteacute utilizando se ha de emplear un programa externo que realice este proceso

Lenguaje HTML copy Grupo EIDOS

44

bull method=postget A traveacutes de este argumento indicaremos el meacutetodo empleado para transferir la informacioacuten generada por el formulario

Si indicamos post se produciraacute la modificacioacuten del documento destino como es el caso de enviar la informacioacuten a una direccioacuten de correo electroacutenico Mediante el meacutetodo get no se produciraacuten cambios en el documento destino

Dentro de un formulario podremos incluir cualquier texto o instruccioacuten HTML de las vistas a lo largo de los capiacutetulos anteriores ademaacutes claro estaacute de los elementos tiacutepicos de un formulario cajas de texto botones de seleccioacuten menuacutes de opciones etc Vamos a ver coacutemo se incluiraacuten estos elementos en un formulario

Entrada baacutesica de datos Para definir los distintos tipos de campos baacutesicos de entrada de datos usaremos la etiqueta ltINPUTgt

El formato es el siguiente

ltINPUT type= text password checkbox radio hidden submit image reset name=Variable value=Valor inicialgt

bull El argumento type determinaraacute el tipo de campo de entrada que estamos insertando A

continuacioacuten describiremos cada uno de ellos

bull El argumento name especifica el nombre de la variable que tomaraacute el valor introducido en el campo

bull El argumento value especifica el valor por defecto que tendraacute el campo

Vamos a continuacioacuten a describir los distintos tipos campos de entrada que vendraacuten dados por los valores del argumento type

Texto corto type=text

Con este argumento vamos a indicar que el campo a introducir seraacute un texto El formato seriacutea

ltINPUT type= text name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los nuevos atributos es

bull size=Tamantildeo Indicaremos el tamantildeo en caracteres de la ventana de introduccioacuten de texto

bull maxlength=Longitud maacutexima Indicaremos el nuacutemero maacuteximo de caracteres a introducir en el campo

Vamos a ver un ejemplo en la Tabla 47

copy Grupo EIDOS 4 Elementos del lenguaje II

45

Ejemplo Resultado

NombreltINPUT type=text name=Var1Value=Texto por defecto size=20 maxlength=25gt

Tabla 47

Claves type=password

Con este argumento indicamos que el campo a introducir seraacute una palabra clave por lo que los caracteres que se introduzcan seraacuten sustituidos por asteriscos en la visualizacioacuten por pantalla El formato es

ltINPUT type= password name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los distintos argumentos es el mismo que en el caso anterior Veamos un ejemplo en la Tabla 48

Ejemplo Resultado

ClaveltINPUT type=password name=Var2Value=tutankamon size=11 maxlength=10gt

Tabla 48

Botones de seleccioacuten type=checkbox

El checkbox es un botoacuten que presenta dos estados marcado (1) y desmarcado (0) Podremos variar su estado simplemente pinchando con el ratoacuten El formato es

ltINPUT type= checkbox name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto

Si incluimos el argumento value cuando el botoacuten esteacute marcado su variable asociada adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 49

Ejemplo Resultado

ltINPUT type=checkbox name=Var3 value=Op1 checkedgtOpcioacuten1 ltbrgtltINPUT type=checkbox name=Var4 value=Op2gt Opcioacuten 2

Tabla 49

Lenguaje HTML copy Grupo EIDOS

46

Seleccioacuten entre varias opciones type=radio

Este argumento se usa cuando hay que hacer una seleccioacuten entre varias alternativas excluyentes pudieacutendose seleccionar uacutenicamente una de las alternativas Debemos incluir una etiqueta radio por cada una de las posibles alternativas El formato es

ltINPUT type= radio name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto En este caso uacutenicamente uno de los botones de radio podraacute aparecer marcado ya que se usa para el caso de opciones excluyentes

Cuando un botoacuten esteacute seleccionado la variable asociada a la lista de botones adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 50

Ejemplo Resultado

ltINPUT type=radio name=Var5 value=Op1gtOpcioacuten1 ltbrgtltINPUT type=radio name=Var5 value=Op2checkedgt Opcioacuten 2 ltbrgtltINPUT type=radio name=Var5 value=Op3 gtOpcioacuten 3

Tabla 50

En este ejemplo la variable Var5 tendraacute el valor Op2

Campos ocultos type=hidden

Este tipo de campos no son visibles para el usuario Su uso tiene sentido en el caso de enviar alguacuten tipo de informacioacuten que no deba ser visualizada o variada por el lector de nuestra paacutegina Web El formato es

ltINPUT type= hidden name=Variable value=Valor gt

Con esta etiqueta asignariacuteamos a la Variable referenciada por name el Valor de value y se mandariacutea junto con el formulario sin que el usuario de la paacutegina se entere de nada Veamos un ejemplo en el Coacutedigo fuente 15

ltINPUT type=hidden name=Var6 value=tutankamongt

Coacutedigo fuente 15

copy Grupo EIDOS 4 Elementos del lenguaje II

47

Botoacuten de enviacuteo de datos type=submit

Con este argumento especificamos un botoacuten en el que al pulsar los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario El formato es

ltINPUT type= submit value=Mensaje a mostrargt

En este caso el paraacutemetro value indica el mensaje que se mostraraacute en el botoacuten Veamos un ejemplo en la Tabla 51

Ejemplo Resultado

ltINPUT type=submit value=Enviar los Datosgt

Tabla 51

Botoacuten graacutefico de enviacuteo de datos type=image

Con este argumento especificamos un botoacuten de tipo imagen en el que al igual que con el botoacuten anterior si pulsamos en la imagen los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario Su formato es el siguiente

ltINPUT type= image src=URL de la imagen name=Variablegt

Con el paraacutemetro src especificamos la URL de la imagen que seraacute insertada en el botoacuten En este caso en la variable referenciada por name se almacenaraacuten las coordenadas del punto de la imagen donde se halla pinchado (de forma que estas coordenadas podriacutean ser procesadas por el programa que recibe los datos del formulario)

Botoacuten de borrado de datos type=reset

Con este argumento especificamos un botoacuten que al ser pulsado borraraacute el contenido actual de todos los campos dejaacutendolos con sus valores por defecto Su formato es

ltINPUT type= reset value=Texto del botoacutengt

Con el paraacutemetro value especificamos el texto que etiquetaraacute al botoacuten

Ejemplo Resultado

ltINPUT type=reset value=Borrar datosgt

Tabla 52

Lenguaje HTML copy Grupo EIDOS

48

Entrada datos en muacuteltiples liacuteneas En un formulario tambieacuten podremos introducir un campo de texto que abarque varias liacuteneas Para ello usaremos la etiqueta ltTEXTAREAgt ltTEXTAREAgt Su formato es el siguiente

ltTEXTAREA name=Variable rows=Filas cols=ColumnasgtContenido por defectoltTEXTAREAgt

Los argumentos rows y cols nos van a permitir especificar respectivamente el nuacutemero de filas de texto visibles y el nuacutemero de columnas de texto visibles en el campo

Ejemplo Resultado

ltTEXTAREA name=Var7 rows=5 cols=40gtContenido por defectoltTEXTAREAgt

Tabla 53

Entrada de datos a traveacutes de campos de seleccioacuten Con los campos de seleccioacuten podremos desplegar una lista de opciones entre las que podremos seleccionar una Para ello usaremos la etiqueta ltSELECTgt ltSELECTgt Su formato es el siguiente

ltSELECT name=Variable multiple size=ngtltOPTION selected value=Valor_1gtPrimera OpcioacutenltOPTION value=Valor_2gtSegunda Opcioacuten

ltOPTION value=Valor_ngtEneacutesima Opcioacuten

ltSELECTgt

Figura 1

bull La variable referenciada por name tomaraacute el valor(value) de la opcioacuten seleccionada

bull Si especificamos el argumento muacuteltiple se mostraraacuten todas la opciones en forma de tabla El nuacutemero de opciones visibles en la tabla vendraacute dado por el argumento size

copy Grupo EIDOS 4 Elementos del lenguaje II

49

bull Con la etiqueta ltOPTIONgt iremos definiendo cada una de las opciones de la lista

bull El argumento selected va a determinar cuaacutel es la opcioacuten por defecto

Para finalizar vamos a ver el Coacutedigo fuente 16 correspondiente a una encuesta realizada por la editorial ficticia EditoPc y en la Figura 2 observamos el resultado del formulario

ltP align=centergtltBgtEDITORIAL ltIgtEditoPcltIgtltBgtltPgtltFORM action=mailtodireccionejemplo method = postgtNombreltINPUT type=text size=30 name=nombregtltBRgtE_mail ltINPUT type=text size=30 name=e_mailgtltPgtDeseas recibir informacioacuten sobreltINPUT type=checkbox name=infor1 value=InternetgtInternetltINPUT type=checkbox name=infor2 value=ProgramacioacutengtProgramacioacutenltINPUT type=checkbox name=infor3 value=SistOperativogtSistOperativoltINPUT type=checkbox name=infor4 value=OfimaacuteticagtOfimaacuteticaltPgtiquestTe conectas a Internet desde casa ltbrgtltINPUT type=radio name=intercasa value=sigtSiacuteltINPUT type=radio name=intercasa value=nogtNoltPgtiquestQueacute uso le das a tu ordenador ltBRgtltSELECT name=uso multiple size=3gtltOPTION selectedgtProfesionalltOPTIONgtDomeacutesticoltOPTIONgtOcioJuegosltSELECTgtltPgtCaracteriacutesticas de tu PCltBRgtltTEXTAREA name=caract rows=5 cols=40gtltTEXTAREAgtltPgtltINPUT type=submit value=Enviar datosgt ltINPUT type=reset value=Borrardatosgt

Coacutedigo fuente 16

Figura 2

Elementos del lenguaje III

Frames Las frames son una utilidad del HTML que nos permite dividir la ventana del navegador en diferentes subventanas que podraacuten ser manipuladas de manera independiente Esto nos permitiraacute mostrar una paacutegina web diferente en cada una de la subventanas o frames

Estructura de un documento con frames Un documento con frames se estructura de manera diferente a un documento HTML normal Asiacute en este tipo de documentos no apareceraacute la etiqueta ltBODYgt En su lugar se incluiraacute la etiqueta ltFRAMESETgt ltFRAMESETgt dentro de la cual se definiraacuten las distintas frames que se incluyan en el documento

La estructura general de un documento de este tipo seriacutea por tanto

ltHTMLgtltHEADgtCabeceraltHEADgtltFRAMESETgt

Definicioacuten de la distintas framesltFRAMESETgtltNOFRAMESgt

Instrucciones HTMLltNOFRAMESgt

ltHTMLgt

Lenguaje HTML copy Grupo EIDOS

52

Puede darse el caso de que programemos nuestro documento con frames siguiendo la estructura anterior y que el navegador que se use para leer el documento no soporte la caracteriacutestica de frames con lo cual no se mostraraacute nada de lo indicado entre las etiquetas ltFRAMESETgt y ltFRAMESETgtPara solucionar este problema todas las instrucciones HTML incluidas entre las etiquetas ltNOFRAMESgt y ltNOFRAMESgt seraacuten ejecutadas por los navegadores que no soportan las frames

La sintaxis de la etiqueta ltFRAMESETgt es

ltFRAMESET rows=Lista de filas cols=Lista de columnasgtltFRAME src=URL de la frame 1 name=Nombre de la frame 1gtltFRAME src=URL de la frame 2 name=Nombre de la frame 2gt

ltFRAME src=URL de la frame n name=Nombre de la frame ngt

ltFRAMESETgt

Como vemos por cada una de la frames que incluyamos en nuestro documento debemos incluir una etiqueta ltFRAMEgt indicando mediante sus argumentos la direccioacuten URL del documento que se insertaraacute en la subventana (src) y el nombre de la frame (name) Posteriormente describiremos la etiqueta ltFRAMEgt con maacutes detalle

Los argumentos de ltFRAMESETgt son rows y cols definieacutendose uacutenicamente uno de los dos atributos en funcioacuten de si la divisioacuten de la pantalla se realizaraacute por filas (rows) o por columnas (cols)

Por cada una de las subventanas que creemos debemos especificar su tamantildeo en puntos o en porcentaje del tamantildeo de cada subventana Asiacute por ejemplo si especificamos rows= 50 2525 crearemos tres subventanas horizontales ocupando la primera el 50 de la ventana principal y las otras dos el resto Si especificamos cols=100150 crearemos tres subventanas verticales ocupando la primera 100 puntos de la ventana principal la segunda 150 puntos y tercera el espacio restante

Vamos a verlo maacutes claramente con un par de ejemplos praacutecticos que vemos en la Tabla 54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 502525gt ltFRAMEsrc=Pagweb1htm name=Pagweb1gtltFRAMEsrc=Pagweb2htm name=Pagweb2gtltFRAMEsrc=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 36: Programacion web   lenguaje html

copy Grupo EIDOS 4 Elementos del lenguaje II

41

bull bgcolor= rrggbb o nombre del color En este caso este argumento nos permitiraacute definir un color de fondo para todas las celdas de una fila veamos un ejemplo en la

Ejemplo Resultado

Primera fila ltTABLE border=4gtltTR bgcolor=yellowgtltTDgtPrimera

filaltTR bgcolor=greengtltTDgtSegunda

filaltTABLEgt

Segunda fila

Tabla 41

3 Definicioacuten de las celdas de la tabla ltTHgt oacute ltTDgt

ltTH oacute TD align=leftrightcenterjustifyvalign=topmiddlebottom bgcolor=rrggbb oacute nombre width=nrowspan=n colspan=ngt

Como ya explicamos anteriormente la etiqueta ltTHgt la usaremos para crear celdas de tipo cabecera y la etiqueta ltTDgt para la creacioacuten de celdas de datos Vamos a completar nuestro ejemplo inicial antildeadieacutendole tres filas de dos celdas cada una (3 filas X 2 columnas = 6 celdas) Tabla 42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTDgtCelda 21ltTDgtCelda 22

ltTABLEgt Celda 21 Celda 22

Tabla 42

bull align=leftrightcenterjustify Con este argumento vamos a indicar la

alineacioacuten horizontal (left izquierda right derecha center centrado justifyjustificado) del contenido de cada celda por separado Su significado es el mismo que en la etiqueta ltTRgt

bull valign=topmiddlebottom Con este argumento vamos a indicar la alineacioacuten vertical (toparriba middlecentrado bottomabajo) del contenido de cada celda

bull bgcolor= rrggbb o nombre del color En este caso podremos definir un color de fondo para cada una de las celdas de manera independiente

bull width=n oacute Indica el ancho de la celda en puntos o en en funcioacuten del tamantildeo de la tabla

Lenguaje HTML copy Grupo EIDOS

42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera

1ltTHgtCabecera 2ltTR gtltTD align=rightgtCelda

11ltTD bgcolor=redgtCelda 12ltTRgtltTD

bgcolor=yellowgtCelda 21ltTDalign=centergtCelda 22ltTABLEgt

Celda 21 Celda 22

Tabla 43

bull rowspan=n Con este argumento podemos lograr que una celda concreta abarque maacutes de una fila ya sabemos que por defecto una celda ocupa una sola fila

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTD rowspan=2gtCelda

11ltTDgtCelda 12ltTRgtltTDgtCelda 22

ltTABLEgt

Celda 11 Celda 22

Tabla 44

bull colspan=n Con este argumento podemos lograr que una celda se expanda a maacutes

de una columna

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTD colspan=2

align=centergtCelda 22ltTABLEgt

Celda 22

Tabla 45

Para finalizar este tema sobre la creacioacuten de tablas vamos a ver el ejemplo que aparece en el Coacutedigo fuente 14 y su resultado en la Tabla 46

ltTABLE border=4gtltTR gtltTH colspan=3 bgcolor=redgtTiacutetuloltTR bgcolor=yellowgtltTHgtCabecera 1ltTHgtCabecera 2ltTHgtCabecera 3

copy Grupo EIDOS 4 Elementos del lenguaje II

43

ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTDgtCelda 13ltTRgtltTD rowspan=2gtCelda 21ltTD bgcolor=greengtCelda 22ltTDgtCelda 23ltTRgtltTDgtCelda 32ltTDgtCelda 33

ltTABLEgt

Coacutedigo fuente 14

Tiacutetulo

Cabecera 1 Cabecera 2 Cabecera 3

Celda 11 Celda 12 Celda 13

Celda 22 Celda 23 Celda 21

Celda 32 Celda 33

Tabla 46

Formularios El formulario es el elemento de HTML que nos va a permitir interactuar con los visitantes de nuestras paacuteginas web de forma que podemos solicitarle informacioacuten al usuario y procesarla De esta forma podremos crear en nuestras paacuteginas encuestas para solicitar la opinioacuten del visitante sobre alguacuten tema e incluso sobre el contenido de nuestra propia paacutegina web cuestionarios para evaluar la asimilacioacuten de contenidos sobre un tema concreto que se trate en la paacutegina etc

El contenido de la informacioacuten introducida por medio del formulario seraacute enviado a la direccioacuten URL donde resida el programa que se encargaraacute de procesar los datos A este tipo de programas externos se les denomina programas CGI (Common Gateway Interface)

La etiqueta HTML que nos va a permitir la creacioacuten de formularios es ltFORMgt Su formato es el siguiente

ltFORM action=URL del programa que trata el formulariomethod=postgetgt Elementos del formulario ltFORMgt

bull action=URL del programa que trata el formulario A traveacutes de este

argumento indicaremos como ya hemos mencionado la direccioacuten del fichero de programa que va a tratar la informacioacuten suministrada por el formulario

Tambieacuten podriacuteamos incluir como URL que trata el formulario una direccioacuten de correo electroacutenico Por tanto el valor de este argumento podriacutea ser action =mailto direccioacuten de correo

Nota Esta opcioacuten soacutelo funciona adecuadamente con el navegador Netscape Con el Explorer este enviacuteo dariacutea como resultado un correo en blanco Para que esta opcioacuten funcione de manera independiente del navegador que se esteacute utilizando se ha de emplear un programa externo que realice este proceso

Lenguaje HTML copy Grupo EIDOS

44

bull method=postget A traveacutes de este argumento indicaremos el meacutetodo empleado para transferir la informacioacuten generada por el formulario

Si indicamos post se produciraacute la modificacioacuten del documento destino como es el caso de enviar la informacioacuten a una direccioacuten de correo electroacutenico Mediante el meacutetodo get no se produciraacuten cambios en el documento destino

Dentro de un formulario podremos incluir cualquier texto o instruccioacuten HTML de las vistas a lo largo de los capiacutetulos anteriores ademaacutes claro estaacute de los elementos tiacutepicos de un formulario cajas de texto botones de seleccioacuten menuacutes de opciones etc Vamos a ver coacutemo se incluiraacuten estos elementos en un formulario

Entrada baacutesica de datos Para definir los distintos tipos de campos baacutesicos de entrada de datos usaremos la etiqueta ltINPUTgt

El formato es el siguiente

ltINPUT type= text password checkbox radio hidden submit image reset name=Variable value=Valor inicialgt

bull El argumento type determinaraacute el tipo de campo de entrada que estamos insertando A

continuacioacuten describiremos cada uno de ellos

bull El argumento name especifica el nombre de la variable que tomaraacute el valor introducido en el campo

bull El argumento value especifica el valor por defecto que tendraacute el campo

Vamos a continuacioacuten a describir los distintos tipos campos de entrada que vendraacuten dados por los valores del argumento type

Texto corto type=text

Con este argumento vamos a indicar que el campo a introducir seraacute un texto El formato seriacutea

ltINPUT type= text name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los nuevos atributos es

bull size=Tamantildeo Indicaremos el tamantildeo en caracteres de la ventana de introduccioacuten de texto

bull maxlength=Longitud maacutexima Indicaremos el nuacutemero maacuteximo de caracteres a introducir en el campo

Vamos a ver un ejemplo en la Tabla 47

copy Grupo EIDOS 4 Elementos del lenguaje II

45

Ejemplo Resultado

NombreltINPUT type=text name=Var1Value=Texto por defecto size=20 maxlength=25gt

Tabla 47

Claves type=password

Con este argumento indicamos que el campo a introducir seraacute una palabra clave por lo que los caracteres que se introduzcan seraacuten sustituidos por asteriscos en la visualizacioacuten por pantalla El formato es

ltINPUT type= password name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los distintos argumentos es el mismo que en el caso anterior Veamos un ejemplo en la Tabla 48

Ejemplo Resultado

ClaveltINPUT type=password name=Var2Value=tutankamon size=11 maxlength=10gt

Tabla 48

Botones de seleccioacuten type=checkbox

El checkbox es un botoacuten que presenta dos estados marcado (1) y desmarcado (0) Podremos variar su estado simplemente pinchando con el ratoacuten El formato es

ltINPUT type= checkbox name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto

Si incluimos el argumento value cuando el botoacuten esteacute marcado su variable asociada adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 49

Ejemplo Resultado

ltINPUT type=checkbox name=Var3 value=Op1 checkedgtOpcioacuten1 ltbrgtltINPUT type=checkbox name=Var4 value=Op2gt Opcioacuten 2

Tabla 49

Lenguaje HTML copy Grupo EIDOS

46

Seleccioacuten entre varias opciones type=radio

Este argumento se usa cuando hay que hacer una seleccioacuten entre varias alternativas excluyentes pudieacutendose seleccionar uacutenicamente una de las alternativas Debemos incluir una etiqueta radio por cada una de las posibles alternativas El formato es

ltINPUT type= radio name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto En este caso uacutenicamente uno de los botones de radio podraacute aparecer marcado ya que se usa para el caso de opciones excluyentes

Cuando un botoacuten esteacute seleccionado la variable asociada a la lista de botones adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 50

Ejemplo Resultado

ltINPUT type=radio name=Var5 value=Op1gtOpcioacuten1 ltbrgtltINPUT type=radio name=Var5 value=Op2checkedgt Opcioacuten 2 ltbrgtltINPUT type=radio name=Var5 value=Op3 gtOpcioacuten 3

Tabla 50

En este ejemplo la variable Var5 tendraacute el valor Op2

Campos ocultos type=hidden

Este tipo de campos no son visibles para el usuario Su uso tiene sentido en el caso de enviar alguacuten tipo de informacioacuten que no deba ser visualizada o variada por el lector de nuestra paacutegina Web El formato es

ltINPUT type= hidden name=Variable value=Valor gt

Con esta etiqueta asignariacuteamos a la Variable referenciada por name el Valor de value y se mandariacutea junto con el formulario sin que el usuario de la paacutegina se entere de nada Veamos un ejemplo en el Coacutedigo fuente 15

ltINPUT type=hidden name=Var6 value=tutankamongt

Coacutedigo fuente 15

copy Grupo EIDOS 4 Elementos del lenguaje II

47

Botoacuten de enviacuteo de datos type=submit

Con este argumento especificamos un botoacuten en el que al pulsar los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario El formato es

ltINPUT type= submit value=Mensaje a mostrargt

En este caso el paraacutemetro value indica el mensaje que se mostraraacute en el botoacuten Veamos un ejemplo en la Tabla 51

Ejemplo Resultado

ltINPUT type=submit value=Enviar los Datosgt

Tabla 51

Botoacuten graacutefico de enviacuteo de datos type=image

Con este argumento especificamos un botoacuten de tipo imagen en el que al igual que con el botoacuten anterior si pulsamos en la imagen los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario Su formato es el siguiente

ltINPUT type= image src=URL de la imagen name=Variablegt

Con el paraacutemetro src especificamos la URL de la imagen que seraacute insertada en el botoacuten En este caso en la variable referenciada por name se almacenaraacuten las coordenadas del punto de la imagen donde se halla pinchado (de forma que estas coordenadas podriacutean ser procesadas por el programa que recibe los datos del formulario)

Botoacuten de borrado de datos type=reset

Con este argumento especificamos un botoacuten que al ser pulsado borraraacute el contenido actual de todos los campos dejaacutendolos con sus valores por defecto Su formato es

ltINPUT type= reset value=Texto del botoacutengt

Con el paraacutemetro value especificamos el texto que etiquetaraacute al botoacuten

Ejemplo Resultado

ltINPUT type=reset value=Borrar datosgt

Tabla 52

Lenguaje HTML copy Grupo EIDOS

48

Entrada datos en muacuteltiples liacuteneas En un formulario tambieacuten podremos introducir un campo de texto que abarque varias liacuteneas Para ello usaremos la etiqueta ltTEXTAREAgt ltTEXTAREAgt Su formato es el siguiente

ltTEXTAREA name=Variable rows=Filas cols=ColumnasgtContenido por defectoltTEXTAREAgt

Los argumentos rows y cols nos van a permitir especificar respectivamente el nuacutemero de filas de texto visibles y el nuacutemero de columnas de texto visibles en el campo

Ejemplo Resultado

ltTEXTAREA name=Var7 rows=5 cols=40gtContenido por defectoltTEXTAREAgt

Tabla 53

Entrada de datos a traveacutes de campos de seleccioacuten Con los campos de seleccioacuten podremos desplegar una lista de opciones entre las que podremos seleccionar una Para ello usaremos la etiqueta ltSELECTgt ltSELECTgt Su formato es el siguiente

ltSELECT name=Variable multiple size=ngtltOPTION selected value=Valor_1gtPrimera OpcioacutenltOPTION value=Valor_2gtSegunda Opcioacuten

ltOPTION value=Valor_ngtEneacutesima Opcioacuten

ltSELECTgt

Figura 1

bull La variable referenciada por name tomaraacute el valor(value) de la opcioacuten seleccionada

bull Si especificamos el argumento muacuteltiple se mostraraacuten todas la opciones en forma de tabla El nuacutemero de opciones visibles en la tabla vendraacute dado por el argumento size

copy Grupo EIDOS 4 Elementos del lenguaje II

49

bull Con la etiqueta ltOPTIONgt iremos definiendo cada una de las opciones de la lista

bull El argumento selected va a determinar cuaacutel es la opcioacuten por defecto

Para finalizar vamos a ver el Coacutedigo fuente 16 correspondiente a una encuesta realizada por la editorial ficticia EditoPc y en la Figura 2 observamos el resultado del formulario

ltP align=centergtltBgtEDITORIAL ltIgtEditoPcltIgtltBgtltPgtltFORM action=mailtodireccionejemplo method = postgtNombreltINPUT type=text size=30 name=nombregtltBRgtE_mail ltINPUT type=text size=30 name=e_mailgtltPgtDeseas recibir informacioacuten sobreltINPUT type=checkbox name=infor1 value=InternetgtInternetltINPUT type=checkbox name=infor2 value=ProgramacioacutengtProgramacioacutenltINPUT type=checkbox name=infor3 value=SistOperativogtSistOperativoltINPUT type=checkbox name=infor4 value=OfimaacuteticagtOfimaacuteticaltPgtiquestTe conectas a Internet desde casa ltbrgtltINPUT type=radio name=intercasa value=sigtSiacuteltINPUT type=radio name=intercasa value=nogtNoltPgtiquestQueacute uso le das a tu ordenador ltBRgtltSELECT name=uso multiple size=3gtltOPTION selectedgtProfesionalltOPTIONgtDomeacutesticoltOPTIONgtOcioJuegosltSELECTgtltPgtCaracteriacutesticas de tu PCltBRgtltTEXTAREA name=caract rows=5 cols=40gtltTEXTAREAgtltPgtltINPUT type=submit value=Enviar datosgt ltINPUT type=reset value=Borrardatosgt

Coacutedigo fuente 16

Figura 2

Elementos del lenguaje III

Frames Las frames son una utilidad del HTML que nos permite dividir la ventana del navegador en diferentes subventanas que podraacuten ser manipuladas de manera independiente Esto nos permitiraacute mostrar una paacutegina web diferente en cada una de la subventanas o frames

Estructura de un documento con frames Un documento con frames se estructura de manera diferente a un documento HTML normal Asiacute en este tipo de documentos no apareceraacute la etiqueta ltBODYgt En su lugar se incluiraacute la etiqueta ltFRAMESETgt ltFRAMESETgt dentro de la cual se definiraacuten las distintas frames que se incluyan en el documento

La estructura general de un documento de este tipo seriacutea por tanto

ltHTMLgtltHEADgtCabeceraltHEADgtltFRAMESETgt

Definicioacuten de la distintas framesltFRAMESETgtltNOFRAMESgt

Instrucciones HTMLltNOFRAMESgt

ltHTMLgt

Lenguaje HTML copy Grupo EIDOS

52

Puede darse el caso de que programemos nuestro documento con frames siguiendo la estructura anterior y que el navegador que se use para leer el documento no soporte la caracteriacutestica de frames con lo cual no se mostraraacute nada de lo indicado entre las etiquetas ltFRAMESETgt y ltFRAMESETgtPara solucionar este problema todas las instrucciones HTML incluidas entre las etiquetas ltNOFRAMESgt y ltNOFRAMESgt seraacuten ejecutadas por los navegadores que no soportan las frames

La sintaxis de la etiqueta ltFRAMESETgt es

ltFRAMESET rows=Lista de filas cols=Lista de columnasgtltFRAME src=URL de la frame 1 name=Nombre de la frame 1gtltFRAME src=URL de la frame 2 name=Nombre de la frame 2gt

ltFRAME src=URL de la frame n name=Nombre de la frame ngt

ltFRAMESETgt

Como vemos por cada una de la frames que incluyamos en nuestro documento debemos incluir una etiqueta ltFRAMEgt indicando mediante sus argumentos la direccioacuten URL del documento que se insertaraacute en la subventana (src) y el nombre de la frame (name) Posteriormente describiremos la etiqueta ltFRAMEgt con maacutes detalle

Los argumentos de ltFRAMESETgt son rows y cols definieacutendose uacutenicamente uno de los dos atributos en funcioacuten de si la divisioacuten de la pantalla se realizaraacute por filas (rows) o por columnas (cols)

Por cada una de las subventanas que creemos debemos especificar su tamantildeo en puntos o en porcentaje del tamantildeo de cada subventana Asiacute por ejemplo si especificamos rows= 50 2525 crearemos tres subventanas horizontales ocupando la primera el 50 de la ventana principal y las otras dos el resto Si especificamos cols=100150 crearemos tres subventanas verticales ocupando la primera 100 puntos de la ventana principal la segunda 150 puntos y tercera el espacio restante

Vamos a verlo maacutes claramente con un par de ejemplos praacutecticos que vemos en la Tabla 54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 502525gt ltFRAMEsrc=Pagweb1htm name=Pagweb1gtltFRAMEsrc=Pagweb2htm name=Pagweb2gtltFRAMEsrc=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 37: Programacion web   lenguaje html

Lenguaje HTML copy Grupo EIDOS

42

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera

1ltTHgtCabecera 2ltTR gtltTD align=rightgtCelda

11ltTD bgcolor=redgtCelda 12ltTRgtltTD

bgcolor=yellowgtCelda 21ltTDalign=centergtCelda 22ltTABLEgt

Celda 21 Celda 22

Tabla 43

bull rowspan=n Con este argumento podemos lograr que una celda concreta abarque maacutes de una fila ya sabemos que por defecto una celda ocupa una sola fila

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTD rowspan=2gtCelda

11ltTDgtCelda 12ltTRgtltTDgtCelda 22

ltTABLEgt

Celda 11 Celda 22

Tabla 44

bull colspan=n Con este argumento podemos lograr que una celda se expanda a maacutes

de una columna

Ejemplo Resultado

Cabecera 1 Cabecera 2

Celda 11 Celda 12

ltTABLE border=4gtltTR gtltTHgtCabecera 1ltTHgtCabecera 2ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTRgtltTD colspan=2

align=centergtCelda 22ltTABLEgt

Celda 22

Tabla 45

Para finalizar este tema sobre la creacioacuten de tablas vamos a ver el ejemplo que aparece en el Coacutedigo fuente 14 y su resultado en la Tabla 46

ltTABLE border=4gtltTR gtltTH colspan=3 bgcolor=redgtTiacutetuloltTR bgcolor=yellowgtltTHgtCabecera 1ltTHgtCabecera 2ltTHgtCabecera 3

copy Grupo EIDOS 4 Elementos del lenguaje II

43

ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTDgtCelda 13ltTRgtltTD rowspan=2gtCelda 21ltTD bgcolor=greengtCelda 22ltTDgtCelda 23ltTRgtltTDgtCelda 32ltTDgtCelda 33

ltTABLEgt

Coacutedigo fuente 14

Tiacutetulo

Cabecera 1 Cabecera 2 Cabecera 3

Celda 11 Celda 12 Celda 13

Celda 22 Celda 23 Celda 21

Celda 32 Celda 33

Tabla 46

Formularios El formulario es el elemento de HTML que nos va a permitir interactuar con los visitantes de nuestras paacuteginas web de forma que podemos solicitarle informacioacuten al usuario y procesarla De esta forma podremos crear en nuestras paacuteginas encuestas para solicitar la opinioacuten del visitante sobre alguacuten tema e incluso sobre el contenido de nuestra propia paacutegina web cuestionarios para evaluar la asimilacioacuten de contenidos sobre un tema concreto que se trate en la paacutegina etc

El contenido de la informacioacuten introducida por medio del formulario seraacute enviado a la direccioacuten URL donde resida el programa que se encargaraacute de procesar los datos A este tipo de programas externos se les denomina programas CGI (Common Gateway Interface)

La etiqueta HTML que nos va a permitir la creacioacuten de formularios es ltFORMgt Su formato es el siguiente

ltFORM action=URL del programa que trata el formulariomethod=postgetgt Elementos del formulario ltFORMgt

bull action=URL del programa que trata el formulario A traveacutes de este

argumento indicaremos como ya hemos mencionado la direccioacuten del fichero de programa que va a tratar la informacioacuten suministrada por el formulario

Tambieacuten podriacuteamos incluir como URL que trata el formulario una direccioacuten de correo electroacutenico Por tanto el valor de este argumento podriacutea ser action =mailto direccioacuten de correo

Nota Esta opcioacuten soacutelo funciona adecuadamente con el navegador Netscape Con el Explorer este enviacuteo dariacutea como resultado un correo en blanco Para que esta opcioacuten funcione de manera independiente del navegador que se esteacute utilizando se ha de emplear un programa externo que realice este proceso

Lenguaje HTML copy Grupo EIDOS

44

bull method=postget A traveacutes de este argumento indicaremos el meacutetodo empleado para transferir la informacioacuten generada por el formulario

Si indicamos post se produciraacute la modificacioacuten del documento destino como es el caso de enviar la informacioacuten a una direccioacuten de correo electroacutenico Mediante el meacutetodo get no se produciraacuten cambios en el documento destino

Dentro de un formulario podremos incluir cualquier texto o instruccioacuten HTML de las vistas a lo largo de los capiacutetulos anteriores ademaacutes claro estaacute de los elementos tiacutepicos de un formulario cajas de texto botones de seleccioacuten menuacutes de opciones etc Vamos a ver coacutemo se incluiraacuten estos elementos en un formulario

Entrada baacutesica de datos Para definir los distintos tipos de campos baacutesicos de entrada de datos usaremos la etiqueta ltINPUTgt

El formato es el siguiente

ltINPUT type= text password checkbox radio hidden submit image reset name=Variable value=Valor inicialgt

bull El argumento type determinaraacute el tipo de campo de entrada que estamos insertando A

continuacioacuten describiremos cada uno de ellos

bull El argumento name especifica el nombre de la variable que tomaraacute el valor introducido en el campo

bull El argumento value especifica el valor por defecto que tendraacute el campo

Vamos a continuacioacuten a describir los distintos tipos campos de entrada que vendraacuten dados por los valores del argumento type

Texto corto type=text

Con este argumento vamos a indicar que el campo a introducir seraacute un texto El formato seriacutea

ltINPUT type= text name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los nuevos atributos es

bull size=Tamantildeo Indicaremos el tamantildeo en caracteres de la ventana de introduccioacuten de texto

bull maxlength=Longitud maacutexima Indicaremos el nuacutemero maacuteximo de caracteres a introducir en el campo

Vamos a ver un ejemplo en la Tabla 47

copy Grupo EIDOS 4 Elementos del lenguaje II

45

Ejemplo Resultado

NombreltINPUT type=text name=Var1Value=Texto por defecto size=20 maxlength=25gt

Tabla 47

Claves type=password

Con este argumento indicamos que el campo a introducir seraacute una palabra clave por lo que los caracteres que se introduzcan seraacuten sustituidos por asteriscos en la visualizacioacuten por pantalla El formato es

ltINPUT type= password name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los distintos argumentos es el mismo que en el caso anterior Veamos un ejemplo en la Tabla 48

Ejemplo Resultado

ClaveltINPUT type=password name=Var2Value=tutankamon size=11 maxlength=10gt

Tabla 48

Botones de seleccioacuten type=checkbox

El checkbox es un botoacuten que presenta dos estados marcado (1) y desmarcado (0) Podremos variar su estado simplemente pinchando con el ratoacuten El formato es

ltINPUT type= checkbox name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto

Si incluimos el argumento value cuando el botoacuten esteacute marcado su variable asociada adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 49

Ejemplo Resultado

ltINPUT type=checkbox name=Var3 value=Op1 checkedgtOpcioacuten1 ltbrgtltINPUT type=checkbox name=Var4 value=Op2gt Opcioacuten 2

Tabla 49

Lenguaje HTML copy Grupo EIDOS

46

Seleccioacuten entre varias opciones type=radio

Este argumento se usa cuando hay que hacer una seleccioacuten entre varias alternativas excluyentes pudieacutendose seleccionar uacutenicamente una de las alternativas Debemos incluir una etiqueta radio por cada una de las posibles alternativas El formato es

ltINPUT type= radio name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto En este caso uacutenicamente uno de los botones de radio podraacute aparecer marcado ya que se usa para el caso de opciones excluyentes

Cuando un botoacuten esteacute seleccionado la variable asociada a la lista de botones adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 50

Ejemplo Resultado

ltINPUT type=radio name=Var5 value=Op1gtOpcioacuten1 ltbrgtltINPUT type=radio name=Var5 value=Op2checkedgt Opcioacuten 2 ltbrgtltINPUT type=radio name=Var5 value=Op3 gtOpcioacuten 3

Tabla 50

En este ejemplo la variable Var5 tendraacute el valor Op2

Campos ocultos type=hidden

Este tipo de campos no son visibles para el usuario Su uso tiene sentido en el caso de enviar alguacuten tipo de informacioacuten que no deba ser visualizada o variada por el lector de nuestra paacutegina Web El formato es

ltINPUT type= hidden name=Variable value=Valor gt

Con esta etiqueta asignariacuteamos a la Variable referenciada por name el Valor de value y se mandariacutea junto con el formulario sin que el usuario de la paacutegina se entere de nada Veamos un ejemplo en el Coacutedigo fuente 15

ltINPUT type=hidden name=Var6 value=tutankamongt

Coacutedigo fuente 15

copy Grupo EIDOS 4 Elementos del lenguaje II

47

Botoacuten de enviacuteo de datos type=submit

Con este argumento especificamos un botoacuten en el que al pulsar los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario El formato es

ltINPUT type= submit value=Mensaje a mostrargt

En este caso el paraacutemetro value indica el mensaje que se mostraraacute en el botoacuten Veamos un ejemplo en la Tabla 51

Ejemplo Resultado

ltINPUT type=submit value=Enviar los Datosgt

Tabla 51

Botoacuten graacutefico de enviacuteo de datos type=image

Con este argumento especificamos un botoacuten de tipo imagen en el que al igual que con el botoacuten anterior si pulsamos en la imagen los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario Su formato es el siguiente

ltINPUT type= image src=URL de la imagen name=Variablegt

Con el paraacutemetro src especificamos la URL de la imagen que seraacute insertada en el botoacuten En este caso en la variable referenciada por name se almacenaraacuten las coordenadas del punto de la imagen donde se halla pinchado (de forma que estas coordenadas podriacutean ser procesadas por el programa que recibe los datos del formulario)

Botoacuten de borrado de datos type=reset

Con este argumento especificamos un botoacuten que al ser pulsado borraraacute el contenido actual de todos los campos dejaacutendolos con sus valores por defecto Su formato es

ltINPUT type= reset value=Texto del botoacutengt

Con el paraacutemetro value especificamos el texto que etiquetaraacute al botoacuten

Ejemplo Resultado

ltINPUT type=reset value=Borrar datosgt

Tabla 52

Lenguaje HTML copy Grupo EIDOS

48

Entrada datos en muacuteltiples liacuteneas En un formulario tambieacuten podremos introducir un campo de texto que abarque varias liacuteneas Para ello usaremos la etiqueta ltTEXTAREAgt ltTEXTAREAgt Su formato es el siguiente

ltTEXTAREA name=Variable rows=Filas cols=ColumnasgtContenido por defectoltTEXTAREAgt

Los argumentos rows y cols nos van a permitir especificar respectivamente el nuacutemero de filas de texto visibles y el nuacutemero de columnas de texto visibles en el campo

Ejemplo Resultado

ltTEXTAREA name=Var7 rows=5 cols=40gtContenido por defectoltTEXTAREAgt

Tabla 53

Entrada de datos a traveacutes de campos de seleccioacuten Con los campos de seleccioacuten podremos desplegar una lista de opciones entre las que podremos seleccionar una Para ello usaremos la etiqueta ltSELECTgt ltSELECTgt Su formato es el siguiente

ltSELECT name=Variable multiple size=ngtltOPTION selected value=Valor_1gtPrimera OpcioacutenltOPTION value=Valor_2gtSegunda Opcioacuten

ltOPTION value=Valor_ngtEneacutesima Opcioacuten

ltSELECTgt

Figura 1

bull La variable referenciada por name tomaraacute el valor(value) de la opcioacuten seleccionada

bull Si especificamos el argumento muacuteltiple se mostraraacuten todas la opciones en forma de tabla El nuacutemero de opciones visibles en la tabla vendraacute dado por el argumento size

copy Grupo EIDOS 4 Elementos del lenguaje II

49

bull Con la etiqueta ltOPTIONgt iremos definiendo cada una de las opciones de la lista

bull El argumento selected va a determinar cuaacutel es la opcioacuten por defecto

Para finalizar vamos a ver el Coacutedigo fuente 16 correspondiente a una encuesta realizada por la editorial ficticia EditoPc y en la Figura 2 observamos el resultado del formulario

ltP align=centergtltBgtEDITORIAL ltIgtEditoPcltIgtltBgtltPgtltFORM action=mailtodireccionejemplo method = postgtNombreltINPUT type=text size=30 name=nombregtltBRgtE_mail ltINPUT type=text size=30 name=e_mailgtltPgtDeseas recibir informacioacuten sobreltINPUT type=checkbox name=infor1 value=InternetgtInternetltINPUT type=checkbox name=infor2 value=ProgramacioacutengtProgramacioacutenltINPUT type=checkbox name=infor3 value=SistOperativogtSistOperativoltINPUT type=checkbox name=infor4 value=OfimaacuteticagtOfimaacuteticaltPgtiquestTe conectas a Internet desde casa ltbrgtltINPUT type=radio name=intercasa value=sigtSiacuteltINPUT type=radio name=intercasa value=nogtNoltPgtiquestQueacute uso le das a tu ordenador ltBRgtltSELECT name=uso multiple size=3gtltOPTION selectedgtProfesionalltOPTIONgtDomeacutesticoltOPTIONgtOcioJuegosltSELECTgtltPgtCaracteriacutesticas de tu PCltBRgtltTEXTAREA name=caract rows=5 cols=40gtltTEXTAREAgtltPgtltINPUT type=submit value=Enviar datosgt ltINPUT type=reset value=Borrardatosgt

Coacutedigo fuente 16

Figura 2

Elementos del lenguaje III

Frames Las frames son una utilidad del HTML que nos permite dividir la ventana del navegador en diferentes subventanas que podraacuten ser manipuladas de manera independiente Esto nos permitiraacute mostrar una paacutegina web diferente en cada una de la subventanas o frames

Estructura de un documento con frames Un documento con frames se estructura de manera diferente a un documento HTML normal Asiacute en este tipo de documentos no apareceraacute la etiqueta ltBODYgt En su lugar se incluiraacute la etiqueta ltFRAMESETgt ltFRAMESETgt dentro de la cual se definiraacuten las distintas frames que se incluyan en el documento

La estructura general de un documento de este tipo seriacutea por tanto

ltHTMLgtltHEADgtCabeceraltHEADgtltFRAMESETgt

Definicioacuten de la distintas framesltFRAMESETgtltNOFRAMESgt

Instrucciones HTMLltNOFRAMESgt

ltHTMLgt

Lenguaje HTML copy Grupo EIDOS

52

Puede darse el caso de que programemos nuestro documento con frames siguiendo la estructura anterior y que el navegador que se use para leer el documento no soporte la caracteriacutestica de frames con lo cual no se mostraraacute nada de lo indicado entre las etiquetas ltFRAMESETgt y ltFRAMESETgtPara solucionar este problema todas las instrucciones HTML incluidas entre las etiquetas ltNOFRAMESgt y ltNOFRAMESgt seraacuten ejecutadas por los navegadores que no soportan las frames

La sintaxis de la etiqueta ltFRAMESETgt es

ltFRAMESET rows=Lista de filas cols=Lista de columnasgtltFRAME src=URL de la frame 1 name=Nombre de la frame 1gtltFRAME src=URL de la frame 2 name=Nombre de la frame 2gt

ltFRAME src=URL de la frame n name=Nombre de la frame ngt

ltFRAMESETgt

Como vemos por cada una de la frames que incluyamos en nuestro documento debemos incluir una etiqueta ltFRAMEgt indicando mediante sus argumentos la direccioacuten URL del documento que se insertaraacute en la subventana (src) y el nombre de la frame (name) Posteriormente describiremos la etiqueta ltFRAMEgt con maacutes detalle

Los argumentos de ltFRAMESETgt son rows y cols definieacutendose uacutenicamente uno de los dos atributos en funcioacuten de si la divisioacuten de la pantalla se realizaraacute por filas (rows) o por columnas (cols)

Por cada una de las subventanas que creemos debemos especificar su tamantildeo en puntos o en porcentaje del tamantildeo de cada subventana Asiacute por ejemplo si especificamos rows= 50 2525 crearemos tres subventanas horizontales ocupando la primera el 50 de la ventana principal y las otras dos el resto Si especificamos cols=100150 crearemos tres subventanas verticales ocupando la primera 100 puntos de la ventana principal la segunda 150 puntos y tercera el espacio restante

Vamos a verlo maacutes claramente con un par de ejemplos praacutecticos que vemos en la Tabla 54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 502525gt ltFRAMEsrc=Pagweb1htm name=Pagweb1gtltFRAMEsrc=Pagweb2htm name=Pagweb2gtltFRAMEsrc=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 38: Programacion web   lenguaje html

copy Grupo EIDOS 4 Elementos del lenguaje II

43

ltTR gtltTDgtCelda 11ltTDgtCelda 12ltTDgtCelda 13ltTRgtltTD rowspan=2gtCelda 21ltTD bgcolor=greengtCelda 22ltTDgtCelda 23ltTRgtltTDgtCelda 32ltTDgtCelda 33

ltTABLEgt

Coacutedigo fuente 14

Tiacutetulo

Cabecera 1 Cabecera 2 Cabecera 3

Celda 11 Celda 12 Celda 13

Celda 22 Celda 23 Celda 21

Celda 32 Celda 33

Tabla 46

Formularios El formulario es el elemento de HTML que nos va a permitir interactuar con los visitantes de nuestras paacuteginas web de forma que podemos solicitarle informacioacuten al usuario y procesarla De esta forma podremos crear en nuestras paacuteginas encuestas para solicitar la opinioacuten del visitante sobre alguacuten tema e incluso sobre el contenido de nuestra propia paacutegina web cuestionarios para evaluar la asimilacioacuten de contenidos sobre un tema concreto que se trate en la paacutegina etc

El contenido de la informacioacuten introducida por medio del formulario seraacute enviado a la direccioacuten URL donde resida el programa que se encargaraacute de procesar los datos A este tipo de programas externos se les denomina programas CGI (Common Gateway Interface)

La etiqueta HTML que nos va a permitir la creacioacuten de formularios es ltFORMgt Su formato es el siguiente

ltFORM action=URL del programa que trata el formulariomethod=postgetgt Elementos del formulario ltFORMgt

bull action=URL del programa que trata el formulario A traveacutes de este

argumento indicaremos como ya hemos mencionado la direccioacuten del fichero de programa que va a tratar la informacioacuten suministrada por el formulario

Tambieacuten podriacuteamos incluir como URL que trata el formulario una direccioacuten de correo electroacutenico Por tanto el valor de este argumento podriacutea ser action =mailto direccioacuten de correo

Nota Esta opcioacuten soacutelo funciona adecuadamente con el navegador Netscape Con el Explorer este enviacuteo dariacutea como resultado un correo en blanco Para que esta opcioacuten funcione de manera independiente del navegador que se esteacute utilizando se ha de emplear un programa externo que realice este proceso

Lenguaje HTML copy Grupo EIDOS

44

bull method=postget A traveacutes de este argumento indicaremos el meacutetodo empleado para transferir la informacioacuten generada por el formulario

Si indicamos post se produciraacute la modificacioacuten del documento destino como es el caso de enviar la informacioacuten a una direccioacuten de correo electroacutenico Mediante el meacutetodo get no se produciraacuten cambios en el documento destino

Dentro de un formulario podremos incluir cualquier texto o instruccioacuten HTML de las vistas a lo largo de los capiacutetulos anteriores ademaacutes claro estaacute de los elementos tiacutepicos de un formulario cajas de texto botones de seleccioacuten menuacutes de opciones etc Vamos a ver coacutemo se incluiraacuten estos elementos en un formulario

Entrada baacutesica de datos Para definir los distintos tipos de campos baacutesicos de entrada de datos usaremos la etiqueta ltINPUTgt

El formato es el siguiente

ltINPUT type= text password checkbox radio hidden submit image reset name=Variable value=Valor inicialgt

bull El argumento type determinaraacute el tipo de campo de entrada que estamos insertando A

continuacioacuten describiremos cada uno de ellos

bull El argumento name especifica el nombre de la variable que tomaraacute el valor introducido en el campo

bull El argumento value especifica el valor por defecto que tendraacute el campo

Vamos a continuacioacuten a describir los distintos tipos campos de entrada que vendraacuten dados por los valores del argumento type

Texto corto type=text

Con este argumento vamos a indicar que el campo a introducir seraacute un texto El formato seriacutea

ltINPUT type= text name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los nuevos atributos es

bull size=Tamantildeo Indicaremos el tamantildeo en caracteres de la ventana de introduccioacuten de texto

bull maxlength=Longitud maacutexima Indicaremos el nuacutemero maacuteximo de caracteres a introducir en el campo

Vamos a ver un ejemplo en la Tabla 47

copy Grupo EIDOS 4 Elementos del lenguaje II

45

Ejemplo Resultado

NombreltINPUT type=text name=Var1Value=Texto por defecto size=20 maxlength=25gt

Tabla 47

Claves type=password

Con este argumento indicamos que el campo a introducir seraacute una palabra clave por lo que los caracteres que se introduzcan seraacuten sustituidos por asteriscos en la visualizacioacuten por pantalla El formato es

ltINPUT type= password name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los distintos argumentos es el mismo que en el caso anterior Veamos un ejemplo en la Tabla 48

Ejemplo Resultado

ClaveltINPUT type=password name=Var2Value=tutankamon size=11 maxlength=10gt

Tabla 48

Botones de seleccioacuten type=checkbox

El checkbox es un botoacuten que presenta dos estados marcado (1) y desmarcado (0) Podremos variar su estado simplemente pinchando con el ratoacuten El formato es

ltINPUT type= checkbox name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto

Si incluimos el argumento value cuando el botoacuten esteacute marcado su variable asociada adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 49

Ejemplo Resultado

ltINPUT type=checkbox name=Var3 value=Op1 checkedgtOpcioacuten1 ltbrgtltINPUT type=checkbox name=Var4 value=Op2gt Opcioacuten 2

Tabla 49

Lenguaje HTML copy Grupo EIDOS

46

Seleccioacuten entre varias opciones type=radio

Este argumento se usa cuando hay que hacer una seleccioacuten entre varias alternativas excluyentes pudieacutendose seleccionar uacutenicamente una de las alternativas Debemos incluir una etiqueta radio por cada una de las posibles alternativas El formato es

ltINPUT type= radio name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto En este caso uacutenicamente uno de los botones de radio podraacute aparecer marcado ya que se usa para el caso de opciones excluyentes

Cuando un botoacuten esteacute seleccionado la variable asociada a la lista de botones adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 50

Ejemplo Resultado

ltINPUT type=radio name=Var5 value=Op1gtOpcioacuten1 ltbrgtltINPUT type=radio name=Var5 value=Op2checkedgt Opcioacuten 2 ltbrgtltINPUT type=radio name=Var5 value=Op3 gtOpcioacuten 3

Tabla 50

En este ejemplo la variable Var5 tendraacute el valor Op2

Campos ocultos type=hidden

Este tipo de campos no son visibles para el usuario Su uso tiene sentido en el caso de enviar alguacuten tipo de informacioacuten que no deba ser visualizada o variada por el lector de nuestra paacutegina Web El formato es

ltINPUT type= hidden name=Variable value=Valor gt

Con esta etiqueta asignariacuteamos a la Variable referenciada por name el Valor de value y se mandariacutea junto con el formulario sin que el usuario de la paacutegina se entere de nada Veamos un ejemplo en el Coacutedigo fuente 15

ltINPUT type=hidden name=Var6 value=tutankamongt

Coacutedigo fuente 15

copy Grupo EIDOS 4 Elementos del lenguaje II

47

Botoacuten de enviacuteo de datos type=submit

Con este argumento especificamos un botoacuten en el que al pulsar los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario El formato es

ltINPUT type= submit value=Mensaje a mostrargt

En este caso el paraacutemetro value indica el mensaje que se mostraraacute en el botoacuten Veamos un ejemplo en la Tabla 51

Ejemplo Resultado

ltINPUT type=submit value=Enviar los Datosgt

Tabla 51

Botoacuten graacutefico de enviacuteo de datos type=image

Con este argumento especificamos un botoacuten de tipo imagen en el que al igual que con el botoacuten anterior si pulsamos en la imagen los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario Su formato es el siguiente

ltINPUT type= image src=URL de la imagen name=Variablegt

Con el paraacutemetro src especificamos la URL de la imagen que seraacute insertada en el botoacuten En este caso en la variable referenciada por name se almacenaraacuten las coordenadas del punto de la imagen donde se halla pinchado (de forma que estas coordenadas podriacutean ser procesadas por el programa que recibe los datos del formulario)

Botoacuten de borrado de datos type=reset

Con este argumento especificamos un botoacuten que al ser pulsado borraraacute el contenido actual de todos los campos dejaacutendolos con sus valores por defecto Su formato es

ltINPUT type= reset value=Texto del botoacutengt

Con el paraacutemetro value especificamos el texto que etiquetaraacute al botoacuten

Ejemplo Resultado

ltINPUT type=reset value=Borrar datosgt

Tabla 52

Lenguaje HTML copy Grupo EIDOS

48

Entrada datos en muacuteltiples liacuteneas En un formulario tambieacuten podremos introducir un campo de texto que abarque varias liacuteneas Para ello usaremos la etiqueta ltTEXTAREAgt ltTEXTAREAgt Su formato es el siguiente

ltTEXTAREA name=Variable rows=Filas cols=ColumnasgtContenido por defectoltTEXTAREAgt

Los argumentos rows y cols nos van a permitir especificar respectivamente el nuacutemero de filas de texto visibles y el nuacutemero de columnas de texto visibles en el campo

Ejemplo Resultado

ltTEXTAREA name=Var7 rows=5 cols=40gtContenido por defectoltTEXTAREAgt

Tabla 53

Entrada de datos a traveacutes de campos de seleccioacuten Con los campos de seleccioacuten podremos desplegar una lista de opciones entre las que podremos seleccionar una Para ello usaremos la etiqueta ltSELECTgt ltSELECTgt Su formato es el siguiente

ltSELECT name=Variable multiple size=ngtltOPTION selected value=Valor_1gtPrimera OpcioacutenltOPTION value=Valor_2gtSegunda Opcioacuten

ltOPTION value=Valor_ngtEneacutesima Opcioacuten

ltSELECTgt

Figura 1

bull La variable referenciada por name tomaraacute el valor(value) de la opcioacuten seleccionada

bull Si especificamos el argumento muacuteltiple se mostraraacuten todas la opciones en forma de tabla El nuacutemero de opciones visibles en la tabla vendraacute dado por el argumento size

copy Grupo EIDOS 4 Elementos del lenguaje II

49

bull Con la etiqueta ltOPTIONgt iremos definiendo cada una de las opciones de la lista

bull El argumento selected va a determinar cuaacutel es la opcioacuten por defecto

Para finalizar vamos a ver el Coacutedigo fuente 16 correspondiente a una encuesta realizada por la editorial ficticia EditoPc y en la Figura 2 observamos el resultado del formulario

ltP align=centergtltBgtEDITORIAL ltIgtEditoPcltIgtltBgtltPgtltFORM action=mailtodireccionejemplo method = postgtNombreltINPUT type=text size=30 name=nombregtltBRgtE_mail ltINPUT type=text size=30 name=e_mailgtltPgtDeseas recibir informacioacuten sobreltINPUT type=checkbox name=infor1 value=InternetgtInternetltINPUT type=checkbox name=infor2 value=ProgramacioacutengtProgramacioacutenltINPUT type=checkbox name=infor3 value=SistOperativogtSistOperativoltINPUT type=checkbox name=infor4 value=OfimaacuteticagtOfimaacuteticaltPgtiquestTe conectas a Internet desde casa ltbrgtltINPUT type=radio name=intercasa value=sigtSiacuteltINPUT type=radio name=intercasa value=nogtNoltPgtiquestQueacute uso le das a tu ordenador ltBRgtltSELECT name=uso multiple size=3gtltOPTION selectedgtProfesionalltOPTIONgtDomeacutesticoltOPTIONgtOcioJuegosltSELECTgtltPgtCaracteriacutesticas de tu PCltBRgtltTEXTAREA name=caract rows=5 cols=40gtltTEXTAREAgtltPgtltINPUT type=submit value=Enviar datosgt ltINPUT type=reset value=Borrardatosgt

Coacutedigo fuente 16

Figura 2

Elementos del lenguaje III

Frames Las frames son una utilidad del HTML que nos permite dividir la ventana del navegador en diferentes subventanas que podraacuten ser manipuladas de manera independiente Esto nos permitiraacute mostrar una paacutegina web diferente en cada una de la subventanas o frames

Estructura de un documento con frames Un documento con frames se estructura de manera diferente a un documento HTML normal Asiacute en este tipo de documentos no apareceraacute la etiqueta ltBODYgt En su lugar se incluiraacute la etiqueta ltFRAMESETgt ltFRAMESETgt dentro de la cual se definiraacuten las distintas frames que se incluyan en el documento

La estructura general de un documento de este tipo seriacutea por tanto

ltHTMLgtltHEADgtCabeceraltHEADgtltFRAMESETgt

Definicioacuten de la distintas framesltFRAMESETgtltNOFRAMESgt

Instrucciones HTMLltNOFRAMESgt

ltHTMLgt

Lenguaje HTML copy Grupo EIDOS

52

Puede darse el caso de que programemos nuestro documento con frames siguiendo la estructura anterior y que el navegador que se use para leer el documento no soporte la caracteriacutestica de frames con lo cual no se mostraraacute nada de lo indicado entre las etiquetas ltFRAMESETgt y ltFRAMESETgtPara solucionar este problema todas las instrucciones HTML incluidas entre las etiquetas ltNOFRAMESgt y ltNOFRAMESgt seraacuten ejecutadas por los navegadores que no soportan las frames

La sintaxis de la etiqueta ltFRAMESETgt es

ltFRAMESET rows=Lista de filas cols=Lista de columnasgtltFRAME src=URL de la frame 1 name=Nombre de la frame 1gtltFRAME src=URL de la frame 2 name=Nombre de la frame 2gt

ltFRAME src=URL de la frame n name=Nombre de la frame ngt

ltFRAMESETgt

Como vemos por cada una de la frames que incluyamos en nuestro documento debemos incluir una etiqueta ltFRAMEgt indicando mediante sus argumentos la direccioacuten URL del documento que se insertaraacute en la subventana (src) y el nombre de la frame (name) Posteriormente describiremos la etiqueta ltFRAMEgt con maacutes detalle

Los argumentos de ltFRAMESETgt son rows y cols definieacutendose uacutenicamente uno de los dos atributos en funcioacuten de si la divisioacuten de la pantalla se realizaraacute por filas (rows) o por columnas (cols)

Por cada una de las subventanas que creemos debemos especificar su tamantildeo en puntos o en porcentaje del tamantildeo de cada subventana Asiacute por ejemplo si especificamos rows= 50 2525 crearemos tres subventanas horizontales ocupando la primera el 50 de la ventana principal y las otras dos el resto Si especificamos cols=100150 crearemos tres subventanas verticales ocupando la primera 100 puntos de la ventana principal la segunda 150 puntos y tercera el espacio restante

Vamos a verlo maacutes claramente con un par de ejemplos praacutecticos que vemos en la Tabla 54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 502525gt ltFRAMEsrc=Pagweb1htm name=Pagweb1gtltFRAMEsrc=Pagweb2htm name=Pagweb2gtltFRAMEsrc=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 39: Programacion web   lenguaje html

Lenguaje HTML copy Grupo EIDOS

44

bull method=postget A traveacutes de este argumento indicaremos el meacutetodo empleado para transferir la informacioacuten generada por el formulario

Si indicamos post se produciraacute la modificacioacuten del documento destino como es el caso de enviar la informacioacuten a una direccioacuten de correo electroacutenico Mediante el meacutetodo get no se produciraacuten cambios en el documento destino

Dentro de un formulario podremos incluir cualquier texto o instruccioacuten HTML de las vistas a lo largo de los capiacutetulos anteriores ademaacutes claro estaacute de los elementos tiacutepicos de un formulario cajas de texto botones de seleccioacuten menuacutes de opciones etc Vamos a ver coacutemo se incluiraacuten estos elementos en un formulario

Entrada baacutesica de datos Para definir los distintos tipos de campos baacutesicos de entrada de datos usaremos la etiqueta ltINPUTgt

El formato es el siguiente

ltINPUT type= text password checkbox radio hidden submit image reset name=Variable value=Valor inicialgt

bull El argumento type determinaraacute el tipo de campo de entrada que estamos insertando A

continuacioacuten describiremos cada uno de ellos

bull El argumento name especifica el nombre de la variable que tomaraacute el valor introducido en el campo

bull El argumento value especifica el valor por defecto que tendraacute el campo

Vamos a continuacioacuten a describir los distintos tipos campos de entrada que vendraacuten dados por los valores del argumento type

Texto corto type=text

Con este argumento vamos a indicar que el campo a introducir seraacute un texto El formato seriacutea

ltINPUT type= text name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los nuevos atributos es

bull size=Tamantildeo Indicaremos el tamantildeo en caracteres de la ventana de introduccioacuten de texto

bull maxlength=Longitud maacutexima Indicaremos el nuacutemero maacuteximo de caracteres a introducir en el campo

Vamos a ver un ejemplo en la Tabla 47

copy Grupo EIDOS 4 Elementos del lenguaje II

45

Ejemplo Resultado

NombreltINPUT type=text name=Var1Value=Texto por defecto size=20 maxlength=25gt

Tabla 47

Claves type=password

Con este argumento indicamos que el campo a introducir seraacute una palabra clave por lo que los caracteres que se introduzcan seraacuten sustituidos por asteriscos en la visualizacioacuten por pantalla El formato es

ltINPUT type= password name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los distintos argumentos es el mismo que en el caso anterior Veamos un ejemplo en la Tabla 48

Ejemplo Resultado

ClaveltINPUT type=password name=Var2Value=tutankamon size=11 maxlength=10gt

Tabla 48

Botones de seleccioacuten type=checkbox

El checkbox es un botoacuten que presenta dos estados marcado (1) y desmarcado (0) Podremos variar su estado simplemente pinchando con el ratoacuten El formato es

ltINPUT type= checkbox name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto

Si incluimos el argumento value cuando el botoacuten esteacute marcado su variable asociada adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 49

Ejemplo Resultado

ltINPUT type=checkbox name=Var3 value=Op1 checkedgtOpcioacuten1 ltbrgtltINPUT type=checkbox name=Var4 value=Op2gt Opcioacuten 2

Tabla 49

Lenguaje HTML copy Grupo EIDOS

46

Seleccioacuten entre varias opciones type=radio

Este argumento se usa cuando hay que hacer una seleccioacuten entre varias alternativas excluyentes pudieacutendose seleccionar uacutenicamente una de las alternativas Debemos incluir una etiqueta radio por cada una de las posibles alternativas El formato es

ltINPUT type= radio name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto En este caso uacutenicamente uno de los botones de radio podraacute aparecer marcado ya que se usa para el caso de opciones excluyentes

Cuando un botoacuten esteacute seleccionado la variable asociada a la lista de botones adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 50

Ejemplo Resultado

ltINPUT type=radio name=Var5 value=Op1gtOpcioacuten1 ltbrgtltINPUT type=radio name=Var5 value=Op2checkedgt Opcioacuten 2 ltbrgtltINPUT type=radio name=Var5 value=Op3 gtOpcioacuten 3

Tabla 50

En este ejemplo la variable Var5 tendraacute el valor Op2

Campos ocultos type=hidden

Este tipo de campos no son visibles para el usuario Su uso tiene sentido en el caso de enviar alguacuten tipo de informacioacuten que no deba ser visualizada o variada por el lector de nuestra paacutegina Web El formato es

ltINPUT type= hidden name=Variable value=Valor gt

Con esta etiqueta asignariacuteamos a la Variable referenciada por name el Valor de value y se mandariacutea junto con el formulario sin que el usuario de la paacutegina se entere de nada Veamos un ejemplo en el Coacutedigo fuente 15

ltINPUT type=hidden name=Var6 value=tutankamongt

Coacutedigo fuente 15

copy Grupo EIDOS 4 Elementos del lenguaje II

47

Botoacuten de enviacuteo de datos type=submit

Con este argumento especificamos un botoacuten en el que al pulsar los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario El formato es

ltINPUT type= submit value=Mensaje a mostrargt

En este caso el paraacutemetro value indica el mensaje que se mostraraacute en el botoacuten Veamos un ejemplo en la Tabla 51

Ejemplo Resultado

ltINPUT type=submit value=Enviar los Datosgt

Tabla 51

Botoacuten graacutefico de enviacuteo de datos type=image

Con este argumento especificamos un botoacuten de tipo imagen en el que al igual que con el botoacuten anterior si pulsamos en la imagen los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario Su formato es el siguiente

ltINPUT type= image src=URL de la imagen name=Variablegt

Con el paraacutemetro src especificamos la URL de la imagen que seraacute insertada en el botoacuten En este caso en la variable referenciada por name se almacenaraacuten las coordenadas del punto de la imagen donde se halla pinchado (de forma que estas coordenadas podriacutean ser procesadas por el programa que recibe los datos del formulario)

Botoacuten de borrado de datos type=reset

Con este argumento especificamos un botoacuten que al ser pulsado borraraacute el contenido actual de todos los campos dejaacutendolos con sus valores por defecto Su formato es

ltINPUT type= reset value=Texto del botoacutengt

Con el paraacutemetro value especificamos el texto que etiquetaraacute al botoacuten

Ejemplo Resultado

ltINPUT type=reset value=Borrar datosgt

Tabla 52

Lenguaje HTML copy Grupo EIDOS

48

Entrada datos en muacuteltiples liacuteneas En un formulario tambieacuten podremos introducir un campo de texto que abarque varias liacuteneas Para ello usaremos la etiqueta ltTEXTAREAgt ltTEXTAREAgt Su formato es el siguiente

ltTEXTAREA name=Variable rows=Filas cols=ColumnasgtContenido por defectoltTEXTAREAgt

Los argumentos rows y cols nos van a permitir especificar respectivamente el nuacutemero de filas de texto visibles y el nuacutemero de columnas de texto visibles en el campo

Ejemplo Resultado

ltTEXTAREA name=Var7 rows=5 cols=40gtContenido por defectoltTEXTAREAgt

Tabla 53

Entrada de datos a traveacutes de campos de seleccioacuten Con los campos de seleccioacuten podremos desplegar una lista de opciones entre las que podremos seleccionar una Para ello usaremos la etiqueta ltSELECTgt ltSELECTgt Su formato es el siguiente

ltSELECT name=Variable multiple size=ngtltOPTION selected value=Valor_1gtPrimera OpcioacutenltOPTION value=Valor_2gtSegunda Opcioacuten

ltOPTION value=Valor_ngtEneacutesima Opcioacuten

ltSELECTgt

Figura 1

bull La variable referenciada por name tomaraacute el valor(value) de la opcioacuten seleccionada

bull Si especificamos el argumento muacuteltiple se mostraraacuten todas la opciones en forma de tabla El nuacutemero de opciones visibles en la tabla vendraacute dado por el argumento size

copy Grupo EIDOS 4 Elementos del lenguaje II

49

bull Con la etiqueta ltOPTIONgt iremos definiendo cada una de las opciones de la lista

bull El argumento selected va a determinar cuaacutel es la opcioacuten por defecto

Para finalizar vamos a ver el Coacutedigo fuente 16 correspondiente a una encuesta realizada por la editorial ficticia EditoPc y en la Figura 2 observamos el resultado del formulario

ltP align=centergtltBgtEDITORIAL ltIgtEditoPcltIgtltBgtltPgtltFORM action=mailtodireccionejemplo method = postgtNombreltINPUT type=text size=30 name=nombregtltBRgtE_mail ltINPUT type=text size=30 name=e_mailgtltPgtDeseas recibir informacioacuten sobreltINPUT type=checkbox name=infor1 value=InternetgtInternetltINPUT type=checkbox name=infor2 value=ProgramacioacutengtProgramacioacutenltINPUT type=checkbox name=infor3 value=SistOperativogtSistOperativoltINPUT type=checkbox name=infor4 value=OfimaacuteticagtOfimaacuteticaltPgtiquestTe conectas a Internet desde casa ltbrgtltINPUT type=radio name=intercasa value=sigtSiacuteltINPUT type=radio name=intercasa value=nogtNoltPgtiquestQueacute uso le das a tu ordenador ltBRgtltSELECT name=uso multiple size=3gtltOPTION selectedgtProfesionalltOPTIONgtDomeacutesticoltOPTIONgtOcioJuegosltSELECTgtltPgtCaracteriacutesticas de tu PCltBRgtltTEXTAREA name=caract rows=5 cols=40gtltTEXTAREAgtltPgtltINPUT type=submit value=Enviar datosgt ltINPUT type=reset value=Borrardatosgt

Coacutedigo fuente 16

Figura 2

Elementos del lenguaje III

Frames Las frames son una utilidad del HTML que nos permite dividir la ventana del navegador en diferentes subventanas que podraacuten ser manipuladas de manera independiente Esto nos permitiraacute mostrar una paacutegina web diferente en cada una de la subventanas o frames

Estructura de un documento con frames Un documento con frames se estructura de manera diferente a un documento HTML normal Asiacute en este tipo de documentos no apareceraacute la etiqueta ltBODYgt En su lugar se incluiraacute la etiqueta ltFRAMESETgt ltFRAMESETgt dentro de la cual se definiraacuten las distintas frames que se incluyan en el documento

La estructura general de un documento de este tipo seriacutea por tanto

ltHTMLgtltHEADgtCabeceraltHEADgtltFRAMESETgt

Definicioacuten de la distintas framesltFRAMESETgtltNOFRAMESgt

Instrucciones HTMLltNOFRAMESgt

ltHTMLgt

Lenguaje HTML copy Grupo EIDOS

52

Puede darse el caso de que programemos nuestro documento con frames siguiendo la estructura anterior y que el navegador que se use para leer el documento no soporte la caracteriacutestica de frames con lo cual no se mostraraacute nada de lo indicado entre las etiquetas ltFRAMESETgt y ltFRAMESETgtPara solucionar este problema todas las instrucciones HTML incluidas entre las etiquetas ltNOFRAMESgt y ltNOFRAMESgt seraacuten ejecutadas por los navegadores que no soportan las frames

La sintaxis de la etiqueta ltFRAMESETgt es

ltFRAMESET rows=Lista de filas cols=Lista de columnasgtltFRAME src=URL de la frame 1 name=Nombre de la frame 1gtltFRAME src=URL de la frame 2 name=Nombre de la frame 2gt

ltFRAME src=URL de la frame n name=Nombre de la frame ngt

ltFRAMESETgt

Como vemos por cada una de la frames que incluyamos en nuestro documento debemos incluir una etiqueta ltFRAMEgt indicando mediante sus argumentos la direccioacuten URL del documento que se insertaraacute en la subventana (src) y el nombre de la frame (name) Posteriormente describiremos la etiqueta ltFRAMEgt con maacutes detalle

Los argumentos de ltFRAMESETgt son rows y cols definieacutendose uacutenicamente uno de los dos atributos en funcioacuten de si la divisioacuten de la pantalla se realizaraacute por filas (rows) o por columnas (cols)

Por cada una de las subventanas que creemos debemos especificar su tamantildeo en puntos o en porcentaje del tamantildeo de cada subventana Asiacute por ejemplo si especificamos rows= 50 2525 crearemos tres subventanas horizontales ocupando la primera el 50 de la ventana principal y las otras dos el resto Si especificamos cols=100150 crearemos tres subventanas verticales ocupando la primera 100 puntos de la ventana principal la segunda 150 puntos y tercera el espacio restante

Vamos a verlo maacutes claramente con un par de ejemplos praacutecticos que vemos en la Tabla 54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 502525gt ltFRAMEsrc=Pagweb1htm name=Pagweb1gtltFRAMEsrc=Pagweb2htm name=Pagweb2gtltFRAMEsrc=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 40: Programacion web   lenguaje html

copy Grupo EIDOS 4 Elementos del lenguaje II

45

Ejemplo Resultado

NombreltINPUT type=text name=Var1Value=Texto por defecto size=20 maxlength=25gt

Tabla 47

Claves type=password

Con este argumento indicamos que el campo a introducir seraacute una palabra clave por lo que los caracteres que se introduzcan seraacuten sustituidos por asteriscos en la visualizacioacuten por pantalla El formato es

ltINPUT type= password name=Variable value=Valor inicializacioacutensize=Tamantildeo maxlength=Longitud maacuteximagt

El significado de los distintos argumentos es el mismo que en el caso anterior Veamos un ejemplo en la Tabla 48

Ejemplo Resultado

ClaveltINPUT type=password name=Var2Value=tutankamon size=11 maxlength=10gt

Tabla 48

Botones de seleccioacuten type=checkbox

El checkbox es un botoacuten que presenta dos estados marcado (1) y desmarcado (0) Podremos variar su estado simplemente pinchando con el ratoacuten El formato es

ltINPUT type= checkbox name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto

Si incluimos el argumento value cuando el botoacuten esteacute marcado su variable asociada adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 49

Ejemplo Resultado

ltINPUT type=checkbox name=Var3 value=Op1 checkedgtOpcioacuten1 ltbrgtltINPUT type=checkbox name=Var4 value=Op2gt Opcioacuten 2

Tabla 49

Lenguaje HTML copy Grupo EIDOS

46

Seleccioacuten entre varias opciones type=radio

Este argumento se usa cuando hay que hacer una seleccioacuten entre varias alternativas excluyentes pudieacutendose seleccionar uacutenicamente una de las alternativas Debemos incluir una etiqueta radio por cada una de las posibles alternativas El formato es

ltINPUT type= radio name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto En este caso uacutenicamente uno de los botones de radio podraacute aparecer marcado ya que se usa para el caso de opciones excluyentes

Cuando un botoacuten esteacute seleccionado la variable asociada a la lista de botones adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 50

Ejemplo Resultado

ltINPUT type=radio name=Var5 value=Op1gtOpcioacuten1 ltbrgtltINPUT type=radio name=Var5 value=Op2checkedgt Opcioacuten 2 ltbrgtltINPUT type=radio name=Var5 value=Op3 gtOpcioacuten 3

Tabla 50

En este ejemplo la variable Var5 tendraacute el valor Op2

Campos ocultos type=hidden

Este tipo de campos no son visibles para el usuario Su uso tiene sentido en el caso de enviar alguacuten tipo de informacioacuten que no deba ser visualizada o variada por el lector de nuestra paacutegina Web El formato es

ltINPUT type= hidden name=Variable value=Valor gt

Con esta etiqueta asignariacuteamos a la Variable referenciada por name el Valor de value y se mandariacutea junto con el formulario sin que el usuario de la paacutegina se entere de nada Veamos un ejemplo en el Coacutedigo fuente 15

ltINPUT type=hidden name=Var6 value=tutankamongt

Coacutedigo fuente 15

copy Grupo EIDOS 4 Elementos del lenguaje II

47

Botoacuten de enviacuteo de datos type=submit

Con este argumento especificamos un botoacuten en el que al pulsar los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario El formato es

ltINPUT type= submit value=Mensaje a mostrargt

En este caso el paraacutemetro value indica el mensaje que se mostraraacute en el botoacuten Veamos un ejemplo en la Tabla 51

Ejemplo Resultado

ltINPUT type=submit value=Enviar los Datosgt

Tabla 51

Botoacuten graacutefico de enviacuteo de datos type=image

Con este argumento especificamos un botoacuten de tipo imagen en el que al igual que con el botoacuten anterior si pulsamos en la imagen los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario Su formato es el siguiente

ltINPUT type= image src=URL de la imagen name=Variablegt

Con el paraacutemetro src especificamos la URL de la imagen que seraacute insertada en el botoacuten En este caso en la variable referenciada por name se almacenaraacuten las coordenadas del punto de la imagen donde se halla pinchado (de forma que estas coordenadas podriacutean ser procesadas por el programa que recibe los datos del formulario)

Botoacuten de borrado de datos type=reset

Con este argumento especificamos un botoacuten que al ser pulsado borraraacute el contenido actual de todos los campos dejaacutendolos con sus valores por defecto Su formato es

ltINPUT type= reset value=Texto del botoacutengt

Con el paraacutemetro value especificamos el texto que etiquetaraacute al botoacuten

Ejemplo Resultado

ltINPUT type=reset value=Borrar datosgt

Tabla 52

Lenguaje HTML copy Grupo EIDOS

48

Entrada datos en muacuteltiples liacuteneas En un formulario tambieacuten podremos introducir un campo de texto que abarque varias liacuteneas Para ello usaremos la etiqueta ltTEXTAREAgt ltTEXTAREAgt Su formato es el siguiente

ltTEXTAREA name=Variable rows=Filas cols=ColumnasgtContenido por defectoltTEXTAREAgt

Los argumentos rows y cols nos van a permitir especificar respectivamente el nuacutemero de filas de texto visibles y el nuacutemero de columnas de texto visibles en el campo

Ejemplo Resultado

ltTEXTAREA name=Var7 rows=5 cols=40gtContenido por defectoltTEXTAREAgt

Tabla 53

Entrada de datos a traveacutes de campos de seleccioacuten Con los campos de seleccioacuten podremos desplegar una lista de opciones entre las que podremos seleccionar una Para ello usaremos la etiqueta ltSELECTgt ltSELECTgt Su formato es el siguiente

ltSELECT name=Variable multiple size=ngtltOPTION selected value=Valor_1gtPrimera OpcioacutenltOPTION value=Valor_2gtSegunda Opcioacuten

ltOPTION value=Valor_ngtEneacutesima Opcioacuten

ltSELECTgt

Figura 1

bull La variable referenciada por name tomaraacute el valor(value) de la opcioacuten seleccionada

bull Si especificamos el argumento muacuteltiple se mostraraacuten todas la opciones en forma de tabla El nuacutemero de opciones visibles en la tabla vendraacute dado por el argumento size

copy Grupo EIDOS 4 Elementos del lenguaje II

49

bull Con la etiqueta ltOPTIONgt iremos definiendo cada una de las opciones de la lista

bull El argumento selected va a determinar cuaacutel es la opcioacuten por defecto

Para finalizar vamos a ver el Coacutedigo fuente 16 correspondiente a una encuesta realizada por la editorial ficticia EditoPc y en la Figura 2 observamos el resultado del formulario

ltP align=centergtltBgtEDITORIAL ltIgtEditoPcltIgtltBgtltPgtltFORM action=mailtodireccionejemplo method = postgtNombreltINPUT type=text size=30 name=nombregtltBRgtE_mail ltINPUT type=text size=30 name=e_mailgtltPgtDeseas recibir informacioacuten sobreltINPUT type=checkbox name=infor1 value=InternetgtInternetltINPUT type=checkbox name=infor2 value=ProgramacioacutengtProgramacioacutenltINPUT type=checkbox name=infor3 value=SistOperativogtSistOperativoltINPUT type=checkbox name=infor4 value=OfimaacuteticagtOfimaacuteticaltPgtiquestTe conectas a Internet desde casa ltbrgtltINPUT type=radio name=intercasa value=sigtSiacuteltINPUT type=radio name=intercasa value=nogtNoltPgtiquestQueacute uso le das a tu ordenador ltBRgtltSELECT name=uso multiple size=3gtltOPTION selectedgtProfesionalltOPTIONgtDomeacutesticoltOPTIONgtOcioJuegosltSELECTgtltPgtCaracteriacutesticas de tu PCltBRgtltTEXTAREA name=caract rows=5 cols=40gtltTEXTAREAgtltPgtltINPUT type=submit value=Enviar datosgt ltINPUT type=reset value=Borrardatosgt

Coacutedigo fuente 16

Figura 2

Elementos del lenguaje III

Frames Las frames son una utilidad del HTML que nos permite dividir la ventana del navegador en diferentes subventanas que podraacuten ser manipuladas de manera independiente Esto nos permitiraacute mostrar una paacutegina web diferente en cada una de la subventanas o frames

Estructura de un documento con frames Un documento con frames se estructura de manera diferente a un documento HTML normal Asiacute en este tipo de documentos no apareceraacute la etiqueta ltBODYgt En su lugar se incluiraacute la etiqueta ltFRAMESETgt ltFRAMESETgt dentro de la cual se definiraacuten las distintas frames que se incluyan en el documento

La estructura general de un documento de este tipo seriacutea por tanto

ltHTMLgtltHEADgtCabeceraltHEADgtltFRAMESETgt

Definicioacuten de la distintas framesltFRAMESETgtltNOFRAMESgt

Instrucciones HTMLltNOFRAMESgt

ltHTMLgt

Lenguaje HTML copy Grupo EIDOS

52

Puede darse el caso de que programemos nuestro documento con frames siguiendo la estructura anterior y que el navegador que se use para leer el documento no soporte la caracteriacutestica de frames con lo cual no se mostraraacute nada de lo indicado entre las etiquetas ltFRAMESETgt y ltFRAMESETgtPara solucionar este problema todas las instrucciones HTML incluidas entre las etiquetas ltNOFRAMESgt y ltNOFRAMESgt seraacuten ejecutadas por los navegadores que no soportan las frames

La sintaxis de la etiqueta ltFRAMESETgt es

ltFRAMESET rows=Lista de filas cols=Lista de columnasgtltFRAME src=URL de la frame 1 name=Nombre de la frame 1gtltFRAME src=URL de la frame 2 name=Nombre de la frame 2gt

ltFRAME src=URL de la frame n name=Nombre de la frame ngt

ltFRAMESETgt

Como vemos por cada una de la frames que incluyamos en nuestro documento debemos incluir una etiqueta ltFRAMEgt indicando mediante sus argumentos la direccioacuten URL del documento que se insertaraacute en la subventana (src) y el nombre de la frame (name) Posteriormente describiremos la etiqueta ltFRAMEgt con maacutes detalle

Los argumentos de ltFRAMESETgt son rows y cols definieacutendose uacutenicamente uno de los dos atributos en funcioacuten de si la divisioacuten de la pantalla se realizaraacute por filas (rows) o por columnas (cols)

Por cada una de las subventanas que creemos debemos especificar su tamantildeo en puntos o en porcentaje del tamantildeo de cada subventana Asiacute por ejemplo si especificamos rows= 50 2525 crearemos tres subventanas horizontales ocupando la primera el 50 de la ventana principal y las otras dos el resto Si especificamos cols=100150 crearemos tres subventanas verticales ocupando la primera 100 puntos de la ventana principal la segunda 150 puntos y tercera el espacio restante

Vamos a verlo maacutes claramente con un par de ejemplos praacutecticos que vemos en la Tabla 54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 502525gt ltFRAMEsrc=Pagweb1htm name=Pagweb1gtltFRAMEsrc=Pagweb2htm name=Pagweb2gtltFRAMEsrc=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 41: Programacion web   lenguaje html

Lenguaje HTML copy Grupo EIDOS

46

Seleccioacuten entre varias opciones type=radio

Este argumento se usa cuando hay que hacer una seleccioacuten entre varias alternativas excluyentes pudieacutendose seleccionar uacutenicamente una de las alternativas Debemos incluir una etiqueta radio por cada una de las posibles alternativas El formato es

ltINPUT type= radio name=Variable value=Valor checkedgt

Si especificamos el argumento checked el botoacuten apareceraacute marcado por defecto En este caso uacutenicamente uno de los botones de radio podraacute aparecer marcado ya que se usa para el caso de opciones excluyentes

Cuando un botoacuten esteacute seleccionado la variable asociada a la lista de botones adquiriraacute el valor dado por value

Veamos un ejemplo en la Tabla 50

Ejemplo Resultado

ltINPUT type=radio name=Var5 value=Op1gtOpcioacuten1 ltbrgtltINPUT type=radio name=Var5 value=Op2checkedgt Opcioacuten 2 ltbrgtltINPUT type=radio name=Var5 value=Op3 gtOpcioacuten 3

Tabla 50

En este ejemplo la variable Var5 tendraacute el valor Op2

Campos ocultos type=hidden

Este tipo de campos no son visibles para el usuario Su uso tiene sentido en el caso de enviar alguacuten tipo de informacioacuten que no deba ser visualizada o variada por el lector de nuestra paacutegina Web El formato es

ltINPUT type= hidden name=Variable value=Valor gt

Con esta etiqueta asignariacuteamos a la Variable referenciada por name el Valor de value y se mandariacutea junto con el formulario sin que el usuario de la paacutegina se entere de nada Veamos un ejemplo en el Coacutedigo fuente 15

ltINPUT type=hidden name=Var6 value=tutankamongt

Coacutedigo fuente 15

copy Grupo EIDOS 4 Elementos del lenguaje II

47

Botoacuten de enviacuteo de datos type=submit

Con este argumento especificamos un botoacuten en el que al pulsar los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario El formato es

ltINPUT type= submit value=Mensaje a mostrargt

En este caso el paraacutemetro value indica el mensaje que se mostraraacute en el botoacuten Veamos un ejemplo en la Tabla 51

Ejemplo Resultado

ltINPUT type=submit value=Enviar los Datosgt

Tabla 51

Botoacuten graacutefico de enviacuteo de datos type=image

Con este argumento especificamos un botoacuten de tipo imagen en el que al igual que con el botoacuten anterior si pulsamos en la imagen los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario Su formato es el siguiente

ltINPUT type= image src=URL de la imagen name=Variablegt

Con el paraacutemetro src especificamos la URL de la imagen que seraacute insertada en el botoacuten En este caso en la variable referenciada por name se almacenaraacuten las coordenadas del punto de la imagen donde se halla pinchado (de forma que estas coordenadas podriacutean ser procesadas por el programa que recibe los datos del formulario)

Botoacuten de borrado de datos type=reset

Con este argumento especificamos un botoacuten que al ser pulsado borraraacute el contenido actual de todos los campos dejaacutendolos con sus valores por defecto Su formato es

ltINPUT type= reset value=Texto del botoacutengt

Con el paraacutemetro value especificamos el texto que etiquetaraacute al botoacuten

Ejemplo Resultado

ltINPUT type=reset value=Borrar datosgt

Tabla 52

Lenguaje HTML copy Grupo EIDOS

48

Entrada datos en muacuteltiples liacuteneas En un formulario tambieacuten podremos introducir un campo de texto que abarque varias liacuteneas Para ello usaremos la etiqueta ltTEXTAREAgt ltTEXTAREAgt Su formato es el siguiente

ltTEXTAREA name=Variable rows=Filas cols=ColumnasgtContenido por defectoltTEXTAREAgt

Los argumentos rows y cols nos van a permitir especificar respectivamente el nuacutemero de filas de texto visibles y el nuacutemero de columnas de texto visibles en el campo

Ejemplo Resultado

ltTEXTAREA name=Var7 rows=5 cols=40gtContenido por defectoltTEXTAREAgt

Tabla 53

Entrada de datos a traveacutes de campos de seleccioacuten Con los campos de seleccioacuten podremos desplegar una lista de opciones entre las que podremos seleccionar una Para ello usaremos la etiqueta ltSELECTgt ltSELECTgt Su formato es el siguiente

ltSELECT name=Variable multiple size=ngtltOPTION selected value=Valor_1gtPrimera OpcioacutenltOPTION value=Valor_2gtSegunda Opcioacuten

ltOPTION value=Valor_ngtEneacutesima Opcioacuten

ltSELECTgt

Figura 1

bull La variable referenciada por name tomaraacute el valor(value) de la opcioacuten seleccionada

bull Si especificamos el argumento muacuteltiple se mostraraacuten todas la opciones en forma de tabla El nuacutemero de opciones visibles en la tabla vendraacute dado por el argumento size

copy Grupo EIDOS 4 Elementos del lenguaje II

49

bull Con la etiqueta ltOPTIONgt iremos definiendo cada una de las opciones de la lista

bull El argumento selected va a determinar cuaacutel es la opcioacuten por defecto

Para finalizar vamos a ver el Coacutedigo fuente 16 correspondiente a una encuesta realizada por la editorial ficticia EditoPc y en la Figura 2 observamos el resultado del formulario

ltP align=centergtltBgtEDITORIAL ltIgtEditoPcltIgtltBgtltPgtltFORM action=mailtodireccionejemplo method = postgtNombreltINPUT type=text size=30 name=nombregtltBRgtE_mail ltINPUT type=text size=30 name=e_mailgtltPgtDeseas recibir informacioacuten sobreltINPUT type=checkbox name=infor1 value=InternetgtInternetltINPUT type=checkbox name=infor2 value=ProgramacioacutengtProgramacioacutenltINPUT type=checkbox name=infor3 value=SistOperativogtSistOperativoltINPUT type=checkbox name=infor4 value=OfimaacuteticagtOfimaacuteticaltPgtiquestTe conectas a Internet desde casa ltbrgtltINPUT type=radio name=intercasa value=sigtSiacuteltINPUT type=radio name=intercasa value=nogtNoltPgtiquestQueacute uso le das a tu ordenador ltBRgtltSELECT name=uso multiple size=3gtltOPTION selectedgtProfesionalltOPTIONgtDomeacutesticoltOPTIONgtOcioJuegosltSELECTgtltPgtCaracteriacutesticas de tu PCltBRgtltTEXTAREA name=caract rows=5 cols=40gtltTEXTAREAgtltPgtltINPUT type=submit value=Enviar datosgt ltINPUT type=reset value=Borrardatosgt

Coacutedigo fuente 16

Figura 2

Elementos del lenguaje III

Frames Las frames son una utilidad del HTML que nos permite dividir la ventana del navegador en diferentes subventanas que podraacuten ser manipuladas de manera independiente Esto nos permitiraacute mostrar una paacutegina web diferente en cada una de la subventanas o frames

Estructura de un documento con frames Un documento con frames se estructura de manera diferente a un documento HTML normal Asiacute en este tipo de documentos no apareceraacute la etiqueta ltBODYgt En su lugar se incluiraacute la etiqueta ltFRAMESETgt ltFRAMESETgt dentro de la cual se definiraacuten las distintas frames que se incluyan en el documento

La estructura general de un documento de este tipo seriacutea por tanto

ltHTMLgtltHEADgtCabeceraltHEADgtltFRAMESETgt

Definicioacuten de la distintas framesltFRAMESETgtltNOFRAMESgt

Instrucciones HTMLltNOFRAMESgt

ltHTMLgt

Lenguaje HTML copy Grupo EIDOS

52

Puede darse el caso de que programemos nuestro documento con frames siguiendo la estructura anterior y que el navegador que se use para leer el documento no soporte la caracteriacutestica de frames con lo cual no se mostraraacute nada de lo indicado entre las etiquetas ltFRAMESETgt y ltFRAMESETgtPara solucionar este problema todas las instrucciones HTML incluidas entre las etiquetas ltNOFRAMESgt y ltNOFRAMESgt seraacuten ejecutadas por los navegadores que no soportan las frames

La sintaxis de la etiqueta ltFRAMESETgt es

ltFRAMESET rows=Lista de filas cols=Lista de columnasgtltFRAME src=URL de la frame 1 name=Nombre de la frame 1gtltFRAME src=URL de la frame 2 name=Nombre de la frame 2gt

ltFRAME src=URL de la frame n name=Nombre de la frame ngt

ltFRAMESETgt

Como vemos por cada una de la frames que incluyamos en nuestro documento debemos incluir una etiqueta ltFRAMEgt indicando mediante sus argumentos la direccioacuten URL del documento que se insertaraacute en la subventana (src) y el nombre de la frame (name) Posteriormente describiremos la etiqueta ltFRAMEgt con maacutes detalle

Los argumentos de ltFRAMESETgt son rows y cols definieacutendose uacutenicamente uno de los dos atributos en funcioacuten de si la divisioacuten de la pantalla se realizaraacute por filas (rows) o por columnas (cols)

Por cada una de las subventanas que creemos debemos especificar su tamantildeo en puntos o en porcentaje del tamantildeo de cada subventana Asiacute por ejemplo si especificamos rows= 50 2525 crearemos tres subventanas horizontales ocupando la primera el 50 de la ventana principal y las otras dos el resto Si especificamos cols=100150 crearemos tres subventanas verticales ocupando la primera 100 puntos de la ventana principal la segunda 150 puntos y tercera el espacio restante

Vamos a verlo maacutes claramente con un par de ejemplos praacutecticos que vemos en la Tabla 54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 502525gt ltFRAMEsrc=Pagweb1htm name=Pagweb1gtltFRAMEsrc=Pagweb2htm name=Pagweb2gtltFRAMEsrc=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 42: Programacion web   lenguaje html

copy Grupo EIDOS 4 Elementos del lenguaje II

47

Botoacuten de enviacuteo de datos type=submit

Con este argumento especificamos un botoacuten en el que al pulsar los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario El formato es

ltINPUT type= submit value=Mensaje a mostrargt

En este caso el paraacutemetro value indica el mensaje que se mostraraacute en el botoacuten Veamos un ejemplo en la Tabla 51

Ejemplo Resultado

ltINPUT type=submit value=Enviar los Datosgt

Tabla 51

Botoacuten graacutefico de enviacuteo de datos type=image

Con este argumento especificamos un botoacuten de tipo imagen en el que al igual que con el botoacuten anterior si pulsamos en la imagen los datos seraacuten enviados al programa o direccioacuten de correo encargada de procesar la informacioacuten recogida por el formulario Su formato es el siguiente

ltINPUT type= image src=URL de la imagen name=Variablegt

Con el paraacutemetro src especificamos la URL de la imagen que seraacute insertada en el botoacuten En este caso en la variable referenciada por name se almacenaraacuten las coordenadas del punto de la imagen donde se halla pinchado (de forma que estas coordenadas podriacutean ser procesadas por el programa que recibe los datos del formulario)

Botoacuten de borrado de datos type=reset

Con este argumento especificamos un botoacuten que al ser pulsado borraraacute el contenido actual de todos los campos dejaacutendolos con sus valores por defecto Su formato es

ltINPUT type= reset value=Texto del botoacutengt

Con el paraacutemetro value especificamos el texto que etiquetaraacute al botoacuten

Ejemplo Resultado

ltINPUT type=reset value=Borrar datosgt

Tabla 52

Lenguaje HTML copy Grupo EIDOS

48

Entrada datos en muacuteltiples liacuteneas En un formulario tambieacuten podremos introducir un campo de texto que abarque varias liacuteneas Para ello usaremos la etiqueta ltTEXTAREAgt ltTEXTAREAgt Su formato es el siguiente

ltTEXTAREA name=Variable rows=Filas cols=ColumnasgtContenido por defectoltTEXTAREAgt

Los argumentos rows y cols nos van a permitir especificar respectivamente el nuacutemero de filas de texto visibles y el nuacutemero de columnas de texto visibles en el campo

Ejemplo Resultado

ltTEXTAREA name=Var7 rows=5 cols=40gtContenido por defectoltTEXTAREAgt

Tabla 53

Entrada de datos a traveacutes de campos de seleccioacuten Con los campos de seleccioacuten podremos desplegar una lista de opciones entre las que podremos seleccionar una Para ello usaremos la etiqueta ltSELECTgt ltSELECTgt Su formato es el siguiente

ltSELECT name=Variable multiple size=ngtltOPTION selected value=Valor_1gtPrimera OpcioacutenltOPTION value=Valor_2gtSegunda Opcioacuten

ltOPTION value=Valor_ngtEneacutesima Opcioacuten

ltSELECTgt

Figura 1

bull La variable referenciada por name tomaraacute el valor(value) de la opcioacuten seleccionada

bull Si especificamos el argumento muacuteltiple se mostraraacuten todas la opciones en forma de tabla El nuacutemero de opciones visibles en la tabla vendraacute dado por el argumento size

copy Grupo EIDOS 4 Elementos del lenguaje II

49

bull Con la etiqueta ltOPTIONgt iremos definiendo cada una de las opciones de la lista

bull El argumento selected va a determinar cuaacutel es la opcioacuten por defecto

Para finalizar vamos a ver el Coacutedigo fuente 16 correspondiente a una encuesta realizada por la editorial ficticia EditoPc y en la Figura 2 observamos el resultado del formulario

ltP align=centergtltBgtEDITORIAL ltIgtEditoPcltIgtltBgtltPgtltFORM action=mailtodireccionejemplo method = postgtNombreltINPUT type=text size=30 name=nombregtltBRgtE_mail ltINPUT type=text size=30 name=e_mailgtltPgtDeseas recibir informacioacuten sobreltINPUT type=checkbox name=infor1 value=InternetgtInternetltINPUT type=checkbox name=infor2 value=ProgramacioacutengtProgramacioacutenltINPUT type=checkbox name=infor3 value=SistOperativogtSistOperativoltINPUT type=checkbox name=infor4 value=OfimaacuteticagtOfimaacuteticaltPgtiquestTe conectas a Internet desde casa ltbrgtltINPUT type=radio name=intercasa value=sigtSiacuteltINPUT type=radio name=intercasa value=nogtNoltPgtiquestQueacute uso le das a tu ordenador ltBRgtltSELECT name=uso multiple size=3gtltOPTION selectedgtProfesionalltOPTIONgtDomeacutesticoltOPTIONgtOcioJuegosltSELECTgtltPgtCaracteriacutesticas de tu PCltBRgtltTEXTAREA name=caract rows=5 cols=40gtltTEXTAREAgtltPgtltINPUT type=submit value=Enviar datosgt ltINPUT type=reset value=Borrardatosgt

Coacutedigo fuente 16

Figura 2

Elementos del lenguaje III

Frames Las frames son una utilidad del HTML que nos permite dividir la ventana del navegador en diferentes subventanas que podraacuten ser manipuladas de manera independiente Esto nos permitiraacute mostrar una paacutegina web diferente en cada una de la subventanas o frames

Estructura de un documento con frames Un documento con frames se estructura de manera diferente a un documento HTML normal Asiacute en este tipo de documentos no apareceraacute la etiqueta ltBODYgt En su lugar se incluiraacute la etiqueta ltFRAMESETgt ltFRAMESETgt dentro de la cual se definiraacuten las distintas frames que se incluyan en el documento

La estructura general de un documento de este tipo seriacutea por tanto

ltHTMLgtltHEADgtCabeceraltHEADgtltFRAMESETgt

Definicioacuten de la distintas framesltFRAMESETgtltNOFRAMESgt

Instrucciones HTMLltNOFRAMESgt

ltHTMLgt

Lenguaje HTML copy Grupo EIDOS

52

Puede darse el caso de que programemos nuestro documento con frames siguiendo la estructura anterior y que el navegador que se use para leer el documento no soporte la caracteriacutestica de frames con lo cual no se mostraraacute nada de lo indicado entre las etiquetas ltFRAMESETgt y ltFRAMESETgtPara solucionar este problema todas las instrucciones HTML incluidas entre las etiquetas ltNOFRAMESgt y ltNOFRAMESgt seraacuten ejecutadas por los navegadores que no soportan las frames

La sintaxis de la etiqueta ltFRAMESETgt es

ltFRAMESET rows=Lista de filas cols=Lista de columnasgtltFRAME src=URL de la frame 1 name=Nombre de la frame 1gtltFRAME src=URL de la frame 2 name=Nombre de la frame 2gt

ltFRAME src=URL de la frame n name=Nombre de la frame ngt

ltFRAMESETgt

Como vemos por cada una de la frames que incluyamos en nuestro documento debemos incluir una etiqueta ltFRAMEgt indicando mediante sus argumentos la direccioacuten URL del documento que se insertaraacute en la subventana (src) y el nombre de la frame (name) Posteriormente describiremos la etiqueta ltFRAMEgt con maacutes detalle

Los argumentos de ltFRAMESETgt son rows y cols definieacutendose uacutenicamente uno de los dos atributos en funcioacuten de si la divisioacuten de la pantalla se realizaraacute por filas (rows) o por columnas (cols)

Por cada una de las subventanas que creemos debemos especificar su tamantildeo en puntos o en porcentaje del tamantildeo de cada subventana Asiacute por ejemplo si especificamos rows= 50 2525 crearemos tres subventanas horizontales ocupando la primera el 50 de la ventana principal y las otras dos el resto Si especificamos cols=100150 crearemos tres subventanas verticales ocupando la primera 100 puntos de la ventana principal la segunda 150 puntos y tercera el espacio restante

Vamos a verlo maacutes claramente con un par de ejemplos praacutecticos que vemos en la Tabla 54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 502525gt ltFRAMEsrc=Pagweb1htm name=Pagweb1gtltFRAMEsrc=Pagweb2htm name=Pagweb2gtltFRAMEsrc=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 43: Programacion web   lenguaje html

Lenguaje HTML copy Grupo EIDOS

48

Entrada datos en muacuteltiples liacuteneas En un formulario tambieacuten podremos introducir un campo de texto que abarque varias liacuteneas Para ello usaremos la etiqueta ltTEXTAREAgt ltTEXTAREAgt Su formato es el siguiente

ltTEXTAREA name=Variable rows=Filas cols=ColumnasgtContenido por defectoltTEXTAREAgt

Los argumentos rows y cols nos van a permitir especificar respectivamente el nuacutemero de filas de texto visibles y el nuacutemero de columnas de texto visibles en el campo

Ejemplo Resultado

ltTEXTAREA name=Var7 rows=5 cols=40gtContenido por defectoltTEXTAREAgt

Tabla 53

Entrada de datos a traveacutes de campos de seleccioacuten Con los campos de seleccioacuten podremos desplegar una lista de opciones entre las que podremos seleccionar una Para ello usaremos la etiqueta ltSELECTgt ltSELECTgt Su formato es el siguiente

ltSELECT name=Variable multiple size=ngtltOPTION selected value=Valor_1gtPrimera OpcioacutenltOPTION value=Valor_2gtSegunda Opcioacuten

ltOPTION value=Valor_ngtEneacutesima Opcioacuten

ltSELECTgt

Figura 1

bull La variable referenciada por name tomaraacute el valor(value) de la opcioacuten seleccionada

bull Si especificamos el argumento muacuteltiple se mostraraacuten todas la opciones en forma de tabla El nuacutemero de opciones visibles en la tabla vendraacute dado por el argumento size

copy Grupo EIDOS 4 Elementos del lenguaje II

49

bull Con la etiqueta ltOPTIONgt iremos definiendo cada una de las opciones de la lista

bull El argumento selected va a determinar cuaacutel es la opcioacuten por defecto

Para finalizar vamos a ver el Coacutedigo fuente 16 correspondiente a una encuesta realizada por la editorial ficticia EditoPc y en la Figura 2 observamos el resultado del formulario

ltP align=centergtltBgtEDITORIAL ltIgtEditoPcltIgtltBgtltPgtltFORM action=mailtodireccionejemplo method = postgtNombreltINPUT type=text size=30 name=nombregtltBRgtE_mail ltINPUT type=text size=30 name=e_mailgtltPgtDeseas recibir informacioacuten sobreltINPUT type=checkbox name=infor1 value=InternetgtInternetltINPUT type=checkbox name=infor2 value=ProgramacioacutengtProgramacioacutenltINPUT type=checkbox name=infor3 value=SistOperativogtSistOperativoltINPUT type=checkbox name=infor4 value=OfimaacuteticagtOfimaacuteticaltPgtiquestTe conectas a Internet desde casa ltbrgtltINPUT type=radio name=intercasa value=sigtSiacuteltINPUT type=radio name=intercasa value=nogtNoltPgtiquestQueacute uso le das a tu ordenador ltBRgtltSELECT name=uso multiple size=3gtltOPTION selectedgtProfesionalltOPTIONgtDomeacutesticoltOPTIONgtOcioJuegosltSELECTgtltPgtCaracteriacutesticas de tu PCltBRgtltTEXTAREA name=caract rows=5 cols=40gtltTEXTAREAgtltPgtltINPUT type=submit value=Enviar datosgt ltINPUT type=reset value=Borrardatosgt

Coacutedigo fuente 16

Figura 2

Elementos del lenguaje III

Frames Las frames son una utilidad del HTML que nos permite dividir la ventana del navegador en diferentes subventanas que podraacuten ser manipuladas de manera independiente Esto nos permitiraacute mostrar una paacutegina web diferente en cada una de la subventanas o frames

Estructura de un documento con frames Un documento con frames se estructura de manera diferente a un documento HTML normal Asiacute en este tipo de documentos no apareceraacute la etiqueta ltBODYgt En su lugar se incluiraacute la etiqueta ltFRAMESETgt ltFRAMESETgt dentro de la cual se definiraacuten las distintas frames que se incluyan en el documento

La estructura general de un documento de este tipo seriacutea por tanto

ltHTMLgtltHEADgtCabeceraltHEADgtltFRAMESETgt

Definicioacuten de la distintas framesltFRAMESETgtltNOFRAMESgt

Instrucciones HTMLltNOFRAMESgt

ltHTMLgt

Lenguaje HTML copy Grupo EIDOS

52

Puede darse el caso de que programemos nuestro documento con frames siguiendo la estructura anterior y que el navegador que se use para leer el documento no soporte la caracteriacutestica de frames con lo cual no se mostraraacute nada de lo indicado entre las etiquetas ltFRAMESETgt y ltFRAMESETgtPara solucionar este problema todas las instrucciones HTML incluidas entre las etiquetas ltNOFRAMESgt y ltNOFRAMESgt seraacuten ejecutadas por los navegadores que no soportan las frames

La sintaxis de la etiqueta ltFRAMESETgt es

ltFRAMESET rows=Lista de filas cols=Lista de columnasgtltFRAME src=URL de la frame 1 name=Nombre de la frame 1gtltFRAME src=URL de la frame 2 name=Nombre de la frame 2gt

ltFRAME src=URL de la frame n name=Nombre de la frame ngt

ltFRAMESETgt

Como vemos por cada una de la frames que incluyamos en nuestro documento debemos incluir una etiqueta ltFRAMEgt indicando mediante sus argumentos la direccioacuten URL del documento que se insertaraacute en la subventana (src) y el nombre de la frame (name) Posteriormente describiremos la etiqueta ltFRAMEgt con maacutes detalle

Los argumentos de ltFRAMESETgt son rows y cols definieacutendose uacutenicamente uno de los dos atributos en funcioacuten de si la divisioacuten de la pantalla se realizaraacute por filas (rows) o por columnas (cols)

Por cada una de las subventanas que creemos debemos especificar su tamantildeo en puntos o en porcentaje del tamantildeo de cada subventana Asiacute por ejemplo si especificamos rows= 50 2525 crearemos tres subventanas horizontales ocupando la primera el 50 de la ventana principal y las otras dos el resto Si especificamos cols=100150 crearemos tres subventanas verticales ocupando la primera 100 puntos de la ventana principal la segunda 150 puntos y tercera el espacio restante

Vamos a verlo maacutes claramente con un par de ejemplos praacutecticos que vemos en la Tabla 54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 502525gt ltFRAMEsrc=Pagweb1htm name=Pagweb1gtltFRAMEsrc=Pagweb2htm name=Pagweb2gtltFRAMEsrc=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 44: Programacion web   lenguaje html

copy Grupo EIDOS 4 Elementos del lenguaje II

49

bull Con la etiqueta ltOPTIONgt iremos definiendo cada una de las opciones de la lista

bull El argumento selected va a determinar cuaacutel es la opcioacuten por defecto

Para finalizar vamos a ver el Coacutedigo fuente 16 correspondiente a una encuesta realizada por la editorial ficticia EditoPc y en la Figura 2 observamos el resultado del formulario

ltP align=centergtltBgtEDITORIAL ltIgtEditoPcltIgtltBgtltPgtltFORM action=mailtodireccionejemplo method = postgtNombreltINPUT type=text size=30 name=nombregtltBRgtE_mail ltINPUT type=text size=30 name=e_mailgtltPgtDeseas recibir informacioacuten sobreltINPUT type=checkbox name=infor1 value=InternetgtInternetltINPUT type=checkbox name=infor2 value=ProgramacioacutengtProgramacioacutenltINPUT type=checkbox name=infor3 value=SistOperativogtSistOperativoltINPUT type=checkbox name=infor4 value=OfimaacuteticagtOfimaacuteticaltPgtiquestTe conectas a Internet desde casa ltbrgtltINPUT type=radio name=intercasa value=sigtSiacuteltINPUT type=radio name=intercasa value=nogtNoltPgtiquestQueacute uso le das a tu ordenador ltBRgtltSELECT name=uso multiple size=3gtltOPTION selectedgtProfesionalltOPTIONgtDomeacutesticoltOPTIONgtOcioJuegosltSELECTgtltPgtCaracteriacutesticas de tu PCltBRgtltTEXTAREA name=caract rows=5 cols=40gtltTEXTAREAgtltPgtltINPUT type=submit value=Enviar datosgt ltINPUT type=reset value=Borrardatosgt

Coacutedigo fuente 16

Figura 2

Elementos del lenguaje III

Frames Las frames son una utilidad del HTML que nos permite dividir la ventana del navegador en diferentes subventanas que podraacuten ser manipuladas de manera independiente Esto nos permitiraacute mostrar una paacutegina web diferente en cada una de la subventanas o frames

Estructura de un documento con frames Un documento con frames se estructura de manera diferente a un documento HTML normal Asiacute en este tipo de documentos no apareceraacute la etiqueta ltBODYgt En su lugar se incluiraacute la etiqueta ltFRAMESETgt ltFRAMESETgt dentro de la cual se definiraacuten las distintas frames que se incluyan en el documento

La estructura general de un documento de este tipo seriacutea por tanto

ltHTMLgtltHEADgtCabeceraltHEADgtltFRAMESETgt

Definicioacuten de la distintas framesltFRAMESETgtltNOFRAMESgt

Instrucciones HTMLltNOFRAMESgt

ltHTMLgt

Lenguaje HTML copy Grupo EIDOS

52

Puede darse el caso de que programemos nuestro documento con frames siguiendo la estructura anterior y que el navegador que se use para leer el documento no soporte la caracteriacutestica de frames con lo cual no se mostraraacute nada de lo indicado entre las etiquetas ltFRAMESETgt y ltFRAMESETgtPara solucionar este problema todas las instrucciones HTML incluidas entre las etiquetas ltNOFRAMESgt y ltNOFRAMESgt seraacuten ejecutadas por los navegadores que no soportan las frames

La sintaxis de la etiqueta ltFRAMESETgt es

ltFRAMESET rows=Lista de filas cols=Lista de columnasgtltFRAME src=URL de la frame 1 name=Nombre de la frame 1gtltFRAME src=URL de la frame 2 name=Nombre de la frame 2gt

ltFRAME src=URL de la frame n name=Nombre de la frame ngt

ltFRAMESETgt

Como vemos por cada una de la frames que incluyamos en nuestro documento debemos incluir una etiqueta ltFRAMEgt indicando mediante sus argumentos la direccioacuten URL del documento que se insertaraacute en la subventana (src) y el nombre de la frame (name) Posteriormente describiremos la etiqueta ltFRAMEgt con maacutes detalle

Los argumentos de ltFRAMESETgt son rows y cols definieacutendose uacutenicamente uno de los dos atributos en funcioacuten de si la divisioacuten de la pantalla se realizaraacute por filas (rows) o por columnas (cols)

Por cada una de las subventanas que creemos debemos especificar su tamantildeo en puntos o en porcentaje del tamantildeo de cada subventana Asiacute por ejemplo si especificamos rows= 50 2525 crearemos tres subventanas horizontales ocupando la primera el 50 de la ventana principal y las otras dos el resto Si especificamos cols=100150 crearemos tres subventanas verticales ocupando la primera 100 puntos de la ventana principal la segunda 150 puntos y tercera el espacio restante

Vamos a verlo maacutes claramente con un par de ejemplos praacutecticos que vemos en la Tabla 54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 502525gt ltFRAMEsrc=Pagweb1htm name=Pagweb1gtltFRAMEsrc=Pagweb2htm name=Pagweb2gtltFRAMEsrc=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 45: Programacion web   lenguaje html

Elementos del lenguaje III

Frames Las frames son una utilidad del HTML que nos permite dividir la ventana del navegador en diferentes subventanas que podraacuten ser manipuladas de manera independiente Esto nos permitiraacute mostrar una paacutegina web diferente en cada una de la subventanas o frames

Estructura de un documento con frames Un documento con frames se estructura de manera diferente a un documento HTML normal Asiacute en este tipo de documentos no apareceraacute la etiqueta ltBODYgt En su lugar se incluiraacute la etiqueta ltFRAMESETgt ltFRAMESETgt dentro de la cual se definiraacuten las distintas frames que se incluyan en el documento

La estructura general de un documento de este tipo seriacutea por tanto

ltHTMLgtltHEADgtCabeceraltHEADgtltFRAMESETgt

Definicioacuten de la distintas framesltFRAMESETgtltNOFRAMESgt

Instrucciones HTMLltNOFRAMESgt

ltHTMLgt

Lenguaje HTML copy Grupo EIDOS

52

Puede darse el caso de que programemos nuestro documento con frames siguiendo la estructura anterior y que el navegador que se use para leer el documento no soporte la caracteriacutestica de frames con lo cual no se mostraraacute nada de lo indicado entre las etiquetas ltFRAMESETgt y ltFRAMESETgtPara solucionar este problema todas las instrucciones HTML incluidas entre las etiquetas ltNOFRAMESgt y ltNOFRAMESgt seraacuten ejecutadas por los navegadores que no soportan las frames

La sintaxis de la etiqueta ltFRAMESETgt es

ltFRAMESET rows=Lista de filas cols=Lista de columnasgtltFRAME src=URL de la frame 1 name=Nombre de la frame 1gtltFRAME src=URL de la frame 2 name=Nombre de la frame 2gt

ltFRAME src=URL de la frame n name=Nombre de la frame ngt

ltFRAMESETgt

Como vemos por cada una de la frames que incluyamos en nuestro documento debemos incluir una etiqueta ltFRAMEgt indicando mediante sus argumentos la direccioacuten URL del documento que se insertaraacute en la subventana (src) y el nombre de la frame (name) Posteriormente describiremos la etiqueta ltFRAMEgt con maacutes detalle

Los argumentos de ltFRAMESETgt son rows y cols definieacutendose uacutenicamente uno de los dos atributos en funcioacuten de si la divisioacuten de la pantalla se realizaraacute por filas (rows) o por columnas (cols)

Por cada una de las subventanas que creemos debemos especificar su tamantildeo en puntos o en porcentaje del tamantildeo de cada subventana Asiacute por ejemplo si especificamos rows= 50 2525 crearemos tres subventanas horizontales ocupando la primera el 50 de la ventana principal y las otras dos el resto Si especificamos cols=100150 crearemos tres subventanas verticales ocupando la primera 100 puntos de la ventana principal la segunda 150 puntos y tercera el espacio restante

Vamos a verlo maacutes claramente con un par de ejemplos praacutecticos que vemos en la Tabla 54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 502525gt ltFRAMEsrc=Pagweb1htm name=Pagweb1gtltFRAMEsrc=Pagweb2htm name=Pagweb2gtltFRAMEsrc=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 46: Programacion web   lenguaje html

Lenguaje HTML copy Grupo EIDOS

52

Puede darse el caso de que programemos nuestro documento con frames siguiendo la estructura anterior y que el navegador que se use para leer el documento no soporte la caracteriacutestica de frames con lo cual no se mostraraacute nada de lo indicado entre las etiquetas ltFRAMESETgt y ltFRAMESETgtPara solucionar este problema todas las instrucciones HTML incluidas entre las etiquetas ltNOFRAMESgt y ltNOFRAMESgt seraacuten ejecutadas por los navegadores que no soportan las frames

La sintaxis de la etiqueta ltFRAMESETgt es

ltFRAMESET rows=Lista de filas cols=Lista de columnasgtltFRAME src=URL de la frame 1 name=Nombre de la frame 1gtltFRAME src=URL de la frame 2 name=Nombre de la frame 2gt

ltFRAME src=URL de la frame n name=Nombre de la frame ngt

ltFRAMESETgt

Como vemos por cada una de la frames que incluyamos en nuestro documento debemos incluir una etiqueta ltFRAMEgt indicando mediante sus argumentos la direccioacuten URL del documento que se insertaraacute en la subventana (src) y el nombre de la frame (name) Posteriormente describiremos la etiqueta ltFRAMEgt con maacutes detalle

Los argumentos de ltFRAMESETgt son rows y cols definieacutendose uacutenicamente uno de los dos atributos en funcioacuten de si la divisioacuten de la pantalla se realizaraacute por filas (rows) o por columnas (cols)

Por cada una de las subventanas que creemos debemos especificar su tamantildeo en puntos o en porcentaje del tamantildeo de cada subventana Asiacute por ejemplo si especificamos rows= 50 2525 crearemos tres subventanas horizontales ocupando la primera el 50 de la ventana principal y las otras dos el resto Si especificamos cols=100150 crearemos tres subventanas verticales ocupando la primera 100 puntos de la ventana principal la segunda 150 puntos y tercera el espacio restante

Vamos a verlo maacutes claramente con un par de ejemplos praacutecticos que vemos en la Tabla 54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 502525gt ltFRAMEsrc=Pagweb1htm name=Pagweb1gtltFRAMEsrc=Pagweb2htm name=Pagweb2gtltFRAMEsrc=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 47: Programacion web   lenguaje html

copy Grupo EIDOS 5 Elementos del lenguaje III

53

ltHTMLgtltFRAMESET cols = 100150gtltFRAME src=Pagweb1htmname=Pagweb1gtltFRAME src=Pagweb2htmname=Pagweb2gtltFRAME src=Pagweb3htmname=Pagweb3gtltFRAMESETgtltHTMLgt

Tabla 54

Definicioacuten de cada una de las frames Como ya sabemos cada una de las frames que incluyamos en nuestro documento vendraacute definida por la etiqueta ltFRAMEgt correspondiente Su formato es el siguiente

ltFRAME src=URL name=Nombre marginwidth=n marginheight=nscrolling=yesnoauto noresizegt

bull Src = URL La subventana mostraraacute el contenido del documento HTML que se indique

con dicha URL

bull Name = Nombre Indica el nombre por el que nos referiremos a esa subventana

bull marginwidth = n Establecemos los maacutergenes izquierdo y derecho del contenido de la frame en puntos por pantalla

bull marginheight = n Establecemos los maacutergenes superior e inferior del contenido de la frame en puntos por pantalla

bull scrolling = yes no auto Indicaremos si se aplica una barra de desplazamiento a la subventana El valor yes muestra siempre la barra de desplazamiento no no la muestra nunca y auto la muestra solo en caso de que sea necesario para poder ver la paacutegina

bull Noresize Cuando el usuario visualiza nuestra paacutegina con frames en su navegador podraacute redimensionar las subventanas seleccionando un borde con el cursor del ratoacuten y desplazaacutendolo Si se indica este argumento el usuario no podraacute variar el tamantildeo de las subventanas al visualizarlas con el navegador

Antes de finalizar con el tema de las frames vamos a hacer referencia a un problema con el que nos vamos a encontrar cuando incluyamos en nuestro documento con frames un hiperenlace

Supongamos que en nuestro documento tenemos dos subventanas o frames llamadas frame1 y frame2 Hemos incluido un hiperenlace a otra paacutegina web en la frame1 pero queremos que el resultado del hiperenlace se visualice en la frame2 (ya que por defecto el resultado se mostrariacutea en la frame donde se incluyoacute el hiperenlace (frame1) Esto lo podriacuteamos resolver incluyendo en la definicioacuten del hiperenlace el atributo target=frame indicando con esto la frame de destino donde se mostraraacute el hiperenlace ltA HREF=URL target=framegt

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 48: Programacion web   lenguaje html

Lenguaje HTML copy Grupo EIDOS

54

Ejemplo Resultado

ltHTMLgtltFRAMESET rows = 50gtltFRAMEsrc=Pagweb1htm name=Pagweb1marginwidth = 50 scrolling=yesgtltFRAME src=Pagweb2htmname=Pagweb2 marginheight = 50scrolling=yesgtltFRAMESETgtltHTMLgt

Tabla 55

Elementos multimedia La inclusioacuten de elementos multimedia en nuestros documentos HTML dependeraacute de la capacidad del navegador para soportar estas caracteriacutesticas como son la posibilidad de mostrar viacutedeo o sonidos de fondo en nuestras paacuteginas web

El Explorer de Microsoft incluye etiquetas que permitiraacuten explotar su posibilidades multimedia pero hay que tener en cuenta que eacutestas no son estaacutendar

Sonido de fondo ltBGSOUND src=fichero de sonido loop= n infinitegtBGSOUND Background Sound

Si insertamos esta etiqueta en nuestro documento ser reproduciraacute el sonido especificado como sonido de fondo de nuestra paacutegina web

Con el argumento src especificaremos el fichero de sonido que se va a reproducir (waw mid)

Con el argumento loop indicaremos el nuacutemero de veces (n) que se reproduciraacute el sonido Si indicamos loop=infinite el sonido se reproduciraacute de manera indefinida hasta abandonar la paacutegina Vemos un ejemplo en el Coacutedigo fuente 17

ltBGSOUND src=macarenamid loop=infinitegt

Coacutedigo fuente 17

Reproduccioacuten de viacutedeo ltIMG dynsrc=fichero de video loop= n infinite start=fileopen mouseover controlsgt

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 49: Programacion web   lenguaje html

copy Grupo EIDOS 5 Elementos del lenguaje III

55

En este caso podemos reproducir un viacutedeo en formato avi dentro de nuestro documento HTML

Con el argumento dynsrc especificaremos el fichero avi a reproducir El argumento loop indica el nuacutemero de veces que se reproduciraacute el video Con argumento start indicaremos si la secuencia de video empezaraacute al abrir el fichero (fileopen) o cuando el cursor del ratoacuten esteacute encima (mouseover) Si especificamos el argumento controls apareceraacuten los botones de control de viacutedeo Veamos el Coacutedigo fuente 18

ltIMG dynsrc=macarenaavi loop=infinite start=fileopen controlsgt

Coacutedigo fuente 18

Insercioacuten de cualquier tipo de fichero ltEMBED src=URL del fichero width= n oacute n height= n oacute ngt

Con esta etiqueta podremos insertar cualquier tipo de fichero en nuestro documento fichero de sonido de video graacuteficoetc Como es loacutegico el navegador deberaacute tener la capacidad de leer el tipo de fichero especificado o ayudarse de alguacuten otro programa externo que le permita visualizar el fichero En caso contrario daraacute un mensaje de error informaacutendonos de que no puede leer el fichero especificado

Con el argumento src indicamos la URL del fichero a mostrar Con los argumentos width y height indicaremos el tamantildeo del objeto insertado estos argumentos son opcionales

Veamos un ejemplo en el Coacutedigo fuente 19

ltEMBED src=macarenaavi width=100 height=100gt

Coacutedigo fuente 19

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten
Page 50: Programacion web   lenguaje html

Si quiere ver maacutes textos en este formato visiacutetenos en httpwwwlalibreriadigitalcom Este libro tiene soporte de formacioacuten virtual a traveacutes de Internet con un profesor a su disposicioacuten tutoriacuteas exaacutemenes y un completo plan formativo con otros textos Si desea inscribirse en alguno de nuestros cursos o maacutes informacioacuten visite nuestro campus virtual en httpwwwalmagestocom Si quiere informacioacuten maacutes precisa de las nuevas teacutecnicas de programacioacuten puede suscribirse gratuitamente a nuestra revista Algoritmo en httpwwwalgoritmodigitalcom No deje de visitar nuestra reviata Alquimia en httpwwweidosesalquimia donde podraacute encontrar artiacuteculos sobre tecnologiacuteas de la sociedad del conocimiento Si quiere hacer alguacuten comentario sugerencia o tiene cualquier tipo de problema enviacuteelo a la direccioacuten de correo electroacutenico lalibreriadigitaleidoses copy Grupo EIDOS httpwwweidoses

  • Portada
  • Creacuteditos
  • Iacutendice
  • Introduccioacuten al HTML
    • iquestQueacute es HTML
    • Reglas de formato
    • Estructura de un documento HTML
    • Nuestra primera paacutegina HTML
    • Forma del URL
      • Localizando un documento hypertexto (http)
      • Localizacioacuten de un fichero por el servicio FTP (ftpFile Transfer Protocol)
      • Accediendo a un grupo de noticias (news)
      • Accediendo a una direccioacuten e-mail (mailto)
      • Localizacioacuten de un archivo cualquiera (file)
          • Cabecera y cuerpo del documento HTML
            • Cabecera
            • Tiacutetulo del documento
            • Indicador de refresco del documento
            • Indicador de la URL base del documento
            • Cuerpo
            • Caracteres especiales
            • Espaciado y saltos de liacutenea
              • Inclusioacuten de espacios en blanco ampnbsp
              • Salto de liacutenea ltBRgt BR Break
              • Cambio de paacuterrafo ltPgt P Paragraph
              • Liacutenea Horizontal ltHRgt HR Horizontal Rule
              • Texto preformateado ltPREgt PRE Preformatted
                  • Elementos del lenguaje I
                    • Cabeceras y atributos de texto
                      • Cabeceras ltH1gtltH6gt H Heading
                      • Atributos del texto
                        • Listas
                          • Listas no numeradas ltULgt UL Unordered List
                          • Listas numeradas ltOLgt OL Ordered List
                          • Listas de definiciones ltDLgt DL Definition List
                            • Hiperenlaces
                              • Enlaces a otras paacuteginas ltA href=gt
                              • Enlaces dentro de la misma paacutegina ltA name=gt
                                • Imaacutegenes
                                  • Elementos del lenguaje II
                                    • Tablas
                                    • Formularios
                                      • Entrada baacutesica de datos
                                        • Texto corto type=text
                                        • Claves type=password
                                        • Botones de seleccioacuten type=checkbox
                                        • Seleccioacuten entre varias opciones type=radio
                                        • Campos ocultos type=hidden
                                        • Botoacuten de enviacuteo de datos type=submit
                                        • Botoacuten graacutefico de enviacuteo de datos type=image
                                        • Botoacuten de borrado de datos type=reset
                                          • Entrada datos en muacuteltiples liacuteneas
                                          • Entrada de datos a traveacutes de campos de seleccioacuten
                                              • Elementos del lenguaje III
                                                • Frames
                                                  • Estructura de un documento con frames
                                                  • Definicioacuten de cada una de las frames
                                                    • Elementos multimedia
                                                      • Sonido de fondo
                                                      • Reproduccioacuten de viacutedeo
                                                      • Insercioacuten de cualquier tipo de fichero
                                                          • Grupo EIDOS en la Red
                                                            • LaLibreriaDigitalcom
                                                            • Almagesto campus virtual
                                                              • Cursos disponibles
                                                                • Revistas
                                                                  • Algoritmo
                                                                  • Alquimia
                                                                    • Desarrollo de controles y aplicaciones
                                                                    • Buzoacuten