Manual HTML Final

Fuente: www.aulaclic.com Fuente: www.aulaclic.
com
n d i c e d e t a l l a d o
Unidad 1 . Introduccin a HTML
Qu es HTML
Versiones de HTML
Los navegadores. Compatibilidad
Editores
ntroduccin al Bloc de notas
Compaginar dos sesiones
Etiquetas
Mi primera pgina
Unidad 2 . Estructura de una pgina
dentificador del tipo de documento <html>
Cabecera de la pgina <head>
Ttulo de la pgina <title>
La etiqueta <meta>
Cuerpo del documento <body>
Colores en hexadecimal
Unidad 3 . El texto
Caracteres especiales y espacios en blanco
Comentarios Saltos de lnea <br>
Texto preformateado <pre>
Separadores <hr>
Sangrado de texto <blockquote>
Formatear el texto <font>
Resaltado del texto <b> ...
Prrafos <p> ...
Encabezados <h1> ...
Marquesinas <marquee>
Las listas <li> ...
Unidad 4 . Hiperenlaces
Hiperenlace <a>
Tipos de referencias
Destino del enlace
Formato de los enlaces
Puntos de fijacin. Anclas
Otros tipos de enlaces
Lic. Mario Jess Garnica Ortiz
175
Fuente: www.aulaclic.com Fuente: www.aulaclic.com
Unidad . I!genes
magen <img>
Formatos de imagen
Texto alternativo
Borde de una imagen
Tamao de una imagen
Alineacin de una imagen
Unidad " . Ta#las
Tabla <table>
Fila <tr>
Columna o celda <td>
Formato de la tabla
Formato de las celdas
Encabezado de columna <th>
Titulo de tabla <caption>
Combinar celdas
Unidad $ . Marcos
Conjunto de marcos <frameset>
Marco <frame>
Sin marcos <noframes>
Destino del enlace
Unidad % . &or!ularios
Formulario <form>
reas de texto <textarea>
Elementos de entrada <input>
Campos de seleccin <select> ...
Unidad ' . Multi!edia
Sonido de fondo <bgsound>
Vdeo y audio <embed>
Pelculas Flash <object>
Unidad 1(. )apas
Capa <div> ...
175
Unidad 11 . *a+a,cript
Lenguajes de script
Java Script <script>
Unidad 12 . Ho-as de estilo
ntroduccin
Vincular una hoja de estilo
Sintaxis de las hojas de estilo
Las propiedades
Unidad 13 . .ginas /e# din!icas
HTML dinmico
Programacin web
XML
175
E-ercicios paso a paso
Crear una pgina bsica
nsertar texto con diferentes propiedades
nsertar un hiperenlace
nsertar una imagen
Trabajar con tablas
Crear conjunto de marcos
nsertar elementos de formulario
nsertar sonido de fondo
Modificar las propiedades de una capa
Llamadas a javascript
Crear hoja de estilos
E-ercicios propuestos
Modificar las propiedades del documento
Modificar las propiedades del texto
nsertar hiperenlaces
nsertar imgenes
Trabajar con tablas
Configurar marcos
nsertar elementos de formulario
nsertar elementos multimedia
Modificar las propiedades de una capa
Llamadas a java script
Aplicar estilos
.rue#as e+aluati+as
ntroduccin a HTML
Estructura de una pgina
El texto
Hiperenlaces
mgenes
Tablas
Marcos
Formularios
Multimedia
Capas
Java Script
Hojas de estilo
Pginas web dinmicas
175
Unidad 1. Introduccin a HTML 0I1
A lo largo de este tema vamos a conocer los conceptos bsicos sobre HTML, y cmo se utiliza para
crear pginas web.
2u3 es HTML
El HTML 0H4per Text Mar5up Language1 es el lenguaje con el que se escriben las pginas /e#. Es un
lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada, y que est
compuesto por eti6uetas7 que marcan el inicio y el fin de cada elemento del documento.
Un documento hipertexto no slo se compone de texto, puede contener imgenes, sonido, vdeos, etc.,
por lo que el resultado puede considerarse como un documento multimedia.
Los documentos HTML deben tener la extensin 8t!l o 8t!7 para que puedan ser visualizados en los
navegadores (programas que permiten visualizar las pginas web).
Los navegadores se encargan de interpretar el cdigo HTML de los documentos, y de mostrar a los
usuarios las pginas web resultantes del cdigo interpretado.
9ersiones de HTML
En noviembre de 1995 se aprob el estndar HTML 2.0. para la creacin de pginas web. Se cre con
objetivos divulgativos, orientado a la actividad acadmica, en el que el contenido de las pginas era ms
importante que el diseo.
Pero esta versin del HTML careca de muchas herramientas que permitieran controlar el diseo de las
pginas y aadir contenido multimedia, por lo que Netscape (cuyos navegadores eran los ms utilizados
por aquellos aos) comenz a incluir nuevas etiquetas que no existan en el estndar.
El comit encargado de establecer los estndares dentro de nternet, comenz a trabajar en el borrador
de una nueva versin de HTML, el borrador de HTML 3.0.
Pero este borrador result demasiado extenso, al intentar incluir numerosos nuevos atributos para
etiquetas ya existentes, y la creacin de otras muchas etiquetas nuevas. Por ello, no fue bien aceptado
por el mercado y varias compaas se unieron para formar un nuevo comit encargado de establecer los
estndares del HTML. Este comit pas a llamarse W3C.
En enero de 1997 se aprob el estndar HTML 3.2. Este nuevo estndar inclua las mejoras
proporcionadas por los navegadores nternet Explorer y Netscape Navigator, que ya haban realizado
extensiones sobre el estndar HTML 2.0.
En diciembre de 1997 se aprob el estndar HTML 4.0, creado para estandarizar los marcos (frames), las
hojas de estilo y los scripts.
En septiembre de 2001 se aprob el estndar HTML 4.01.
Unidad 1. Introduccin a HTML 0II1
175
Los na+egadores. )o!pati#ilidad
Como hemos dicho, el navegador instalado en el ordenador del usuario es el que interpreta el cdigo
HTML de la pgina que visita por lo que a veces puede ocurrir que dos usuarios visualicen la misma
pgina de forma distinta porque tienen instalados navegadores distintos o incluso versiones distintas del
mismo navegador.
Los navegadores de hoy en da pretenden ser compatibles con la ltima versin de HTML. Es necesario
realizar extensiones de los navegadores para que puedan ser compatibles con esta ltima versin.
Dos de los navegadores que continuamente estn realizando extensiones son Internet Explorer 4
:etscape :a+igator7 que realizan extensiones incluso antes de que se establezcan los estndares,
intentando incluir las nuevas funciones incluidas en los borradores.
Los navegadores tienen que ser compatibles con la ltima versin HTML para poder interpretar el mayor
nmero posible de etiquetas. Si un navegador no reconoce una etiqueta, la ignora y el efecto que pretenda
la etiqueta no queda reflejado en la pgina.
Para realizar las extensiones de estos navegadores se aaden nuevos atributos a las etiquetas ya
existentes, o se aaden nuevas etiquetas.
Como resultado a estas extensiones, habr pginas cuyo cdigo podr ser interpretado completamente
por todos los navegadores, mientras que otras, al incluir nuevos atributos o etiquetas del borrador de la
ltima versin de HTML, solo podrn ser interpretadas en su totalidad en los navegadores ms
actualizados.
En este ltimo caso tambin puede ocurrir que alguna etiqueta de la pgina solamente pueda ser
interpretada por un navegador concreto, y otra etiqueta por un navegador diferente al anterior, por lo que
nunca sera visualizada en su totalidad por ningn navegador.
Uno de los retos de los diseadores de pginas web es hacer las pginas ms atractivas utilizando toda
la potencia del lenguaje HTML pero teniendo en cuentas estos problemas de compatibilidades para que
el mayor nmero de internautas vean sus pginas tal como las ha diseado.
Editores
175
Un editor es un programa que nos permiten redactar documentos. Hoy en da existen un gran nmero de
editores que permiten crear pginas web sin la necesidad de escribir ni una sola lnea de cdigo HTML.
Estos editores disponen de un entorno visual, y generan automticamente el cdigo de las pginas. Al
poder ver en todo momento cmo quedar la pgina en el navegador, se facilita la creacin de las
pginas, y el uso de mens permite ganar rapidez.
Estos editores visuales pueden generar en ocasiones cdigo basura, es decir, cdigo que no sirve para
nada, en otras ocasiones puede ser ms efectivo corregir directamente el cdigo por lo que resulta
necesario saber HTML para poder depurar el cdigo de nuestra pginas.
Algunos de los editores visuales con los que podrs crear tus pginas web son Macromedia
Dreamweaver, Microsoft Frontpage, Adobe Pagemill, NetObjects Fusion, CutePage, HotDog Proffesional,
Netscape Composer y Arachnophilia, de los cuales algunos tienen la ventaja de ser gratuitos.
En aulaClic puedes
encontrar los cursos de
Macromedia Dreamweaver y Microsoft Frontpage, dos de los editores ms usados hoy en da.
Es aconsejable comenzar utilizando una herramienta lo ms sencilla posible, para tener que insertar
nosotros mismos el cdigo HTML. Esto permite familiarizarse con el lenguaje, para poder utilizar algn
editor visual posteriormente, y depurar el cdigo cuando fuera necesario.
Para crear pginas web escribiendo directamente el cdigo HTML puedes utilizar la herramienta
Wordpad o el Bloc de notas que proporciona Windows.
A lo largo de este curso vamos a trabajar con el Bloc de notas para crear nuestras pginas, ya que se
trata de un editor de textos muy sencillo de manejar, que nos permitir crear pginas a travs del cdigo
HTML.
Si no sabes cmo trabajar con el Bloc de notas, te lo explicamos aqu.
Cuando realices los ejercicios puedes compaginar dos sesiones de la forma que te explicamos aqu.
175
Eti6uetas
Las etiquetas o marcas delimitan cada uno de los elementos que componen un documento HTML.
Existen dos tipos de etiquetas, la de comienzo de elemento y la de fin o cierre de elemento.
La etiqueta de comienzo est delimitada por los caracteres ; y <. Est compuesta por el identificador o
nombre de la etiqueta, y puede contener una serie de atributos opcionales que permiten aadir ciertas
propiedades. Su sintaxis es: ;identi=icador atri#uto1 atri#uto2 ...<
Los atributos de la etiqueta de comienzo siguen una sintaxis predefinida y pueden tomar cualquier valor
propio del usuario, o +alores HTML prede=inidos.
La etiqueta de final est delimitada por los caracteres ;> y <. Est compuesta por el identificador o nombre
de la etiqueta, y no contiene atributos. Su sintaxis es: ; >identi=icador <
Cada uno de los elementos de la pgina se encontrar entre una etiqueta de comienzo y su
correspondiente etiqueta de cierre, a excepcin de algunos elementos que no necesitan etiqueta de
cierre. Tambin es posible anidar etiquetas, es decir, insertar etiquetas entre otras etiquetas de comienzo
y de cierre.
A continuacin tenemos un ejemplo en el que tenemos la etiqueta ; &ont < anidada dentro de la etiqueta
; p <.:
;p align?@center@< ;=ont color?"#993366" siAe?"4" =ace?"Comic Sans MS, Arial, MS Sans Serif"<
Bienvenidos a www.aulaclic.com ;>=ont< ;>p<
Este cdigo dara como resultado el siguiente texto:
Bienvenidos a www.aulaclic.com
Es importante anidar bien las etiquetas, las etiquetas no se pueden 'cruzar', en nuestro ejemplo hemos
empezado por la etiqueta ;p<, antes de cerrar esta etiqueta hemos puesto la ;=ont< Por lo que antes de
cerrar la etiqueta ;p< debemos cerrar la etiqueta ;=ont<.
175
Introduccin al Bloc de notas
Crrancar 4 cerrar el Bloc de notas
Veamos las dos formas bsicas de arrancar el Bloc de notas.
Desde el #otn Inicio situado, normalmente, en la esquina inferior izquierda de la
pantalla. Colocar el cursor y hacer clic sobre el botn Inicio, se despliega un men; al colocar el cursor
sobre .rogra!as aparece otra lista con los programas que hay instalados en tu ordenador, buscar
Cccesorios, seguidamente Bloc de notas, hacer clic sobre l, y se arrancar el programa.
Desde el icono del Bloc de notas del escritorio .
Para cerrar el Bloc de notas, puedes utilizar cualquiera de las siguientes operaciones:
Hacer clic en el botn cerrar
Pulsar la combinacin de teclas CLTE&4.
Hacer clic sobre el men Crc8i+o y elegir la opcin ,alir.
Si el documento ha sido modificado y no ha sido guardado antes de cerrar, se te pedir confirmacin para
guardarlo antes de cerrar el programa.
Escri#ir en el Bloc de notas
Siempre que se abre el bloc de notas aparece un documento en blanco. A la hora de escribir en l,
funciona como cualquier otro editor de texto, basta con situar el cursor en el documento y escribir.
Es recomendable insertar una nueva lnea para cada nueva etiqueta HTML, ya que resulta ms fcil
trabajar de este modo. Si escribiramos todo el cdigo seguido nos resultara difcil interpretarlo, por ello
es preferible programar insertando las etiquetas por separado, en diferentes lneas. A travs del men
Formato, opcin Fuente, puedes cambiar la fuente de todo el documento. Si lo deseas, puedes hacer la
letra algo ms grande o pequea.
175
C#rir 4 guardar docu!entos
Para a#rir un documento, puedes utilizar cualquiera de las siguientes operaciones una vez abierto el Bloc
de notas.
Pulsar la combinacin de teclas )trlEC.
Hacer clic sobre el men Crc8i+o y elegir la opcin C#rir.
:otaF Como el Bloc de notas sirve originalmente para escribir documentos de texto, cuando le decimos
Abrir, por defecto nos muestra los documentos con extensin .txt, nuestras pginas tienen la extensin
.htm o html, por lo que debemos cambiar en el cuadro de dilogo abrir el tipo de archivo para visualizarlos
todos y poder ver as nuestras pginas.
Para abrir un documento nue+o, puedes utilizar cualquiera de las siguientes operaciones.
Pulsar la combinacin de teclas )trlE:.
Hacer clic sobre el men Crc8i+o y elegir la opcin :ue+o.
Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones.
Pulsar la combinacin de teclas )trlEG.
Hacer clic sobre el men Crc8i+o y elegir la opcin Guardar.
A la hora de guardar un documento no debes olvidar guardarlo con la extensin 8t! o 8t!l. Por ejemplo,
puedes guardar un documento con el nombre !ipagina.8t!.
175
)o!paginar dos sesiones
Aqu te explicaremos cmo conseguir tener la pantalla dividida en dos partes, una con el curso y otra con
el Bloc de notas.
1 Se supone que la sesin con el curso est abierta.
2 Abrir la sesin del Bloc de notas.
3 Pulsar con el botn derecho sobre cualquier parte vaca de la barra de tareas, en la parte inferior de la
pantalla. Es la barra en la que se encuentra el botn nicio.
4 Elegir la opcin Mosaico +ertical.
Observa como la pantalla ha quedado dividida en dos partes, como en la figura:
Una vez tenemos las dos sesiones con el tamao adecuado, basta hacer clic con el ratn para pasar de
la una a la otra. Para volver a dejar las ventanas con su tamao normal, hacer clic en el botn Maximizar
.
Esto va bien con monitores grandes (de 17" o ms), con monitores pequeos quizs prefieras dejar las
ventanas con su tamao normal e ir pasando de una a otra presionando las teclas Clt E ta#ulador
(manteniendo pulsada Clt, presionar la tecla tabulador) o pulsando el botn correspondiente a la sesin
en la barra de tareas en la ltima lnea de la pantalla.
Compaginar dos sesiones puede resultarte muy til al realizar los ejercicios. Puedes cargar un
docu!ento en el Bloc de notas 4 en un na+egador al !is!o tie!po. Cada vez que realices algn
ca!#io en el cdigo del Bloc de notas y guardes los cambios, puedes actualiAar la pgina cargada en
el navegador para ver los cambios que ha sufrido por las modificaciones en el cdigo.
Para actualizar una pgina en Internet Explorer puedes pulsar sobre el botn .
175
Unidad 1. Introduccin a HTML 0III1
Para que te vayas haciendo una idea de cmo crear una pgina html a travs del Bloc de notas, vamos a
crear una pgina /e# sencilla, con una lnea de texto.
Mi pri!era pgina
Lo primero que tienes que hacer es abrir el Bloc de notas. Para abrirlo, puedes dirigirte al men Inicio,
.rogra!as, Cccesorios, opcin Bloc de notas.
Seguidamente introduce, en el documento en blanco, el texto siguiente:
html>
<head>
<title>M PRMERA PAGNA</title>
<body bgcolor="#FFCC99">
<font color="#CC3300" size="5">Hola, estoy haciendo pruebas.</font>
</body>
</html>
Guarda el documento con la extensin 8t!, con el nombre !ipri!pag.8t!. Puedes guardarlo a travs del
men Crc8i+o, opcin Guardar.
Pulsando dos veces sobre el icono del archivo !ipri!pag.8t!, ste debera abrirse automticamente en
el navegador que tengas instalado en tu ordenador.
El navegador deber mostrar una pgina como la de abajo.
Como puedes ver, la pgina resultante es una pgina que solamente tiene una lnea de texto.
Si observas la barra de ttulo del navegador, vers que el ttulo de la pgina es MI .HIMEHC .CGI:C. Este
ttulo ha sido establecido por la lnea ;title< MI !IM"!A A#I$A ;>title<.
El color de fondo de la pgina ha sido establecido por la lnea ;#od4 #gcolor?"#%%CC99"<.
El texto Hola7 esto4 8aciendo prue#as. Se ha insertado a travs de lnea ;=ont color?"#CC33&&"
siAe?"'">(ola, es)o* +aciendo prue,as.;>=ont<.
175
.rue#a e+aluati+a del Te!a 1.
.rue#a e+aluati+a de la unidad 1. Introduccin a HTML
Solo una respuesta es vlida por pregunta.
Haz clic en la respuesta que consideres correcta. Contesta todas las preguntas y haz clic en el botn
Resultados para ver la solucin.
1. Un documento de hipertexto solo se compone de texto.
a) Verdadero
b) Falso
2. Los navegadores se encargan de interpretar el cdigo HTML de los documentos.
a) Verdadero
a) Falso
3. El nuevo comit encargado de estalecer los est!ndares del HTML es el "3#.
a) Verdadero
a) Falso
$. Los navegadores tienen %ue ser compatiles con la &ltima versin HTML para poder insertar
im!genes.
a) Verdadero
a) Falso
'. (iempre %ue escriimos una eti%ueta deemos escriir su correspondiente eti%ueta de
cierre.
a) Verdadero
a) Falso
). (i un navegador no reconoce una eti%ueta.
175
a) la cabia por otra
b) la ignora
c) uestra una iagen en su lugar
*. +ara reali,ar las extensiones de los navegadores ...
a) se a!aden nuevos atributos y etiquetas
b) se crean nuevos editores visuales
c) se utilizan editores de te"to
-. Existen dos tipos de eti%uetas.
a) #a de coienzo de eleento y la de $in de pgina
b) #a de coienzo de eleento y la de atributo
c) #a de coienzo de eleento y la de $in o cierre de eleento
/. El cdigo de todas las p!ginas.
a) %uede ser interpretado copletaente por todos los navegadores.
b) &o puede ser interpretado copletaente por todos los navegadores.
c) Cualquiera de las dos prieras opciones.
d) &inguna de las opciones anteriores.
175
10. Los editores visuales
a) %ueden generar cdigo basura.
b) %eriten crear pginas 'eb sin la necesidad de escribir ni una sola l(nea de cdigo H)*#.
c) Cualquiera de las dos prieras opciones.
d) &inguna de las opciones anteriores.
RESULTADOS
175
Unidad 2. Estructura de una pgina 0I1
A lo largo de este tema vamos a aprender a crear una pgina #sica.
La estructura bsica de una pgina es:
;8t!l<
;8ead<
...............
;>8ead<
;#od4<
III....
;>#od4<
;>8t!l<
Ahora veamos cmo funcionan estas etiquetas.
Identi=icador del tipo de docu!ento ;8t!l<
Todas las pginas web escritas en HTML tienen que tener la extensin 8t!l o 8t!. Al mismo tiempo,
tienen que tener las etiquetas ;8t!l< y ;>8t!l<.
Entre las etiquetas ;8t!l< y ;>8t!l< estar comprendido el resto del cdigo HTML de la pgina.
Por ejemplo:
;8t!l<
...........
;>8t!l<
)a#ecera de la pgina ;8ead<
La cabecera de la pgina se utiliza para agrupar informacin sobre ella, como puede ser el ttulo. Est
formada por las etiquetas ;8ead< y ;>8ead<. La etiqueta ;8ead< va justo debajo de la etiqueta ;8t!l<.
Por ejemplo:
;8t!l<
;8ead<
...
;>8ead<
...
;>8t!l<
Entre las etiquetas ;8ead< y ;>8ead<, las etiquetas que podemos encontrar y ms se utilizan son:
;lin5<, ;st4le<, ;script< (estas etiquetas las veremos ms adelante), ;!eta< (si deseas saber para qu
sirve y cmo utilizar esta etiqueta, consltalo aqu ) y la etiqueta ;title< que te explicamos a
continuacin.
175
TJtulo de la pgina ;title<
El ttulo de la pgina es el que aparecer en la parte superior de la ventana del navegador, cuando la
pgina est cargada en l.
Para asignar un ttulo a una pgina es necesario escribir el texto deseado entre las etiquetas ;title< y
;>title<.
Estas etiquetas han de estar dentro de la cabecera, es decir, entre las etiquetas ;8ead< y ;>8ead<.
Por ejemplo:
;8t!l<
;8ead<
;title<
Curso de (-M.
;>title<
;>8ead<
...
;>8t!l<
175
La eti6ueta ;!eta<
La etiqueta ;!eta< se utiliza para aadir informacin sobre la pgina. Esta informacin puede ser
utilizada por los buscadores.
Los buscadores consultan la informacin de la etiqueta ;!eta< de las pginas, buscando coincidencias
con lo que el usuario pretende encontrar.
A travs de esta etiqueta pueden especificarse los atributos na!e y content. El atributo na!e indica el tipo
de informacin, y el atributo content indica el +alor de dicha informacin.
Para indicar el tipo de informacin podemos utilizar cualquier palabra que deseemos, como puede ser
"Autor", "Palabras clave", "Descripcin", etc. Pero debido a que la mayora de buscadores estn en
ingls, es preferible que el tipo de informacin se especifique en ingls.
Los tipos de informacin ms utilizados son los siguientes:
Tipo ,igni=icado
au)+or Autor de la pgina
classifica)ion Palabras para clasificar la pgina en los buscadores
descrip)ion Descripcin del contenido de la pgina
/enera)or Programa utilizado para crear la pgina
0e*words Palabras clave
La etiqueta ;!eta< no necesita etiqueta de cierre. Para cada etiqueta ;!eta< solo es posible indicar un
tipo de informacin y su valor, pero es posible insertar varias etiquetas ;!eta< en un mismo documento.
La etiqueta ;!eta< ha de estar entre las etiquetas ;8ead< y ;>8ead<.
Por ejemplo, el siguiente cdigo indica que el autor de la pgina es aulaclic, que la pgina trata sobre un
curso de HTML gratuito, y especifica algunas palabras clave a ser consultadas por los buscadores:
;8t!l<
;8ead<
...
;!eta na!e?"au)+or" content?"aulaclic"<
;!eta na!e?"descrip)ion" content?"Curso de (-M. /ra)ui)o"<
;!eta na!e?"0e*words" content?"c1di/o (-M. e)i2ue)a p3/ina we, /ra)is curso"<
;>8ead<
...
175
La etiqueta ;!eta< tambin se utiliza para indicarle al navegador alguna informacin o alguna accin que
debe realizar. En este caso se utiliza el atributo 8ttpKe6ui+, en lugar del atributo na!e.
Por ejemplo, imaginemos que por algn motivo queremos que nuestra pgina se actualice
automticamente cada 3& segundos. En ese caso, deberamos utilizar la accin He=res8 (actualizar).
Podramos utilizar el siguiente cdigo:
;8t!l<
;8ead<
...
;!eta 8ttpKe6ui+?@He=res8@ content?"3&"<
;>8ead<
...
Ahora imaginemos que hemos cambiado la direccin en la que se encuentra nuestra pgina web, y
queremos que cuando algn usuario visite la pgina en la direccin antigua, a los ' segundos el
navegador lo redirija automticamente a la direccin nueva. En ese caso podramos insertar el siguiente
cdigo en la pgina que se encuentra en la direccin antigua:
;8t!l<
;8ead<
...
;!eta 8ttpKe6ui+?@He=res8@ content?"'4 5!.6+))p788www.aulaclic.com8inde9.+)m"<
;>8ead<
...
De este modo, el navegador realizara la funcin de actualizar la pgina, pero cargando la que se
encontrara en la nueva direccin (5!.6+))p788www.aulaclic.com8inde9.+)m).
175
Unidad 2. Estructura de una pgina 0II1
)uerpo del docu!ento ;#od4<
El cuerpo del documento contiene la informacin propia del documento, es decir lo que queremos que se
visualice, el texto de la pgina, las imgenes, los formularios, etc.
Todos estos elementos tienen que encontrarse entre las etiquetas ;#od4< y ;>#od4<, que van justo
debajo de la cabecera.
Por ejemplo:
;8t!l<
;8ead<
;title<
Curso de (-M.
;>title<
;>8ead<
;#od4<
...
;>#od4<
;>8t!l<
A travs de la etiqueta ;#od4< es posible establecer el color o la imagen de fondo de la pgina.
El color de fondo puede establecerse a travs del atributo #gcolor7 al que es posible asignarle un color
representado en hexadecimal o por un nombre predefinido.
Si no sabes cmo representar los colores en hexadecimal, o a qu nmero o nombre se corresponde
cada uno de ellos, puedes consultarlo aqu.
Por ejemplo, para hacer que el color de fondo de una pgina sea de color azul, tendremos que escribir:
...
;#od4 #gcolor?"#&&&&%%"<
...
;>#od4<
;>8t!l<
Sera equivalente a poner:
...
175
;#od4 #gcolor? @#lue@<
...
;>#od4<
;>8t!l<
La imagen de fondo puede establecerse a travs del atributo #ac5ground, indicando la ruta en la que se
encuentra la imagen.
Por ejemplo, para hacer que la imagen de fondo de una pgina sea la imagen fondo./if, que se encuentra
en el mismo directorio en el que se encuentra guardada la pgina, tendremos que escribir:
...
;#od4 #ac5ground?"fondo./if"<
...
;>#od4<
;>8t!l<
En el caso de que la imagen no se encuentre en el mismo directorio que la pgina, y se encuentre dentro
de la carpeta im3/enes, que s se encuentra en el mismo directorio que la pgina, tendremos que escribir:
...
;#od4 #ac5ground?"ima/enes8fondo./if"<
...
;>#od4<
;>8t!l<
A travs de la etiqueta ;#od4< tambin es posible establecer el color del texto de la pgina a travs del
atributo text.
Por ejemplo, para hacer que el color del texto de una pgina sea de color rojo, tendremos que escribir:
...
;#od4 text?"#%%&&&&"<
...
;>#od4<
;>8t!l<
Entre el borde de la ventana y el contenido de la pgina existe un margen, cuyo tamao en pxeles puede
modificarse mediante los atributos le=t!argin (margen izquierdo) y top!argin (margen superior). Estos
atributos no funcionan para el navegador Netscape, pero s los atributos !argin/idt8 (anchura del
margen) y !argin8eig8t (altura del margen).
Estos atributos suelen utilizarse para eliminar el margen, para lo cual deben valer cero.
Por ejemplo, para hacer que una pgina no tenga margen superior, y tenga un margen izquierdo de 20
pxeles, tendremos que escribir:
...
;#od4 le=t!argin?":&" top!argin?"&" !argin/idt8?":&" !argin8eig8t?"&" <
175
...
;>#od4<
;>8t!l<
.ara practicar los distintos aspectos explicados en el te!a puedes realiAar el E-ercicio paso a
paso )rear una pgina #sica.
E-ercicio paso a paso. )rear una pgina #sica
.racticar las operaciones que hay que realizar para crear una pgina #sica.
Si es la primera vez que realizas el ejercicio, haz clic a6uJ para descargarte la carpeta de ejercicios,
debers extraer los archivos en la carpeta Mis docu!entos de tu disco duro, ah se crear una carpeta
e-erciciosL8t!l.
A lo largo del curso vamos a crear tres sitios web, cada sitio lo guardaremos en una carpeta dentro de
ejercicios_html.
En esa carpeta tenemos:
La carpeta ani!ales, donde guardaremos los archivos de un sitio web de una asociacin ficticia de
veterinarios que iremos creando a lo largo de los ejercicios paso a paso.
La carpeta deportes, donde guardaremos los archivos de un sitio web de una cadena de centros
deportivos que iremos creando a lo largo de los ejercicios propuestos.
La carpeta =lores, donde guardaremos los archivos de un sitio web de una floristera que iremos creando
a lo largo de los ejercicios propuestos.
Cada carpeta contiene a su vez una carpeta i!genes y una carpeta +arios donde iremos guardando las
imgenes y ficheros varios respectivamente.
Una vez tenemos nuestros sitios organizados, podemos empezar a practicar.
1 Si no tienes abierto el Bloc de notas, brelo para realizar el primer ejercicio.
2 Escribe el cdigo que aparece a continuacin:
;8t!l<
;8ead<
;title<Inicio;>title<
;>8ead<
;#od4 #gcolor?"#99CC99"<
175
;>#od4<
;>8t!l<
Con este cdigo estars creando un documento con el ttulo "Inicio", y con el color de fondo verde
(#99CC99).
3 Haz clic sobre el men Crc8i+o.
4 Haz clic sobre la opcin Guardar co!o. Se abrir el cuadro de dilogo Guardar como.
En el recuadro TipoF elige Todos los arc8i+os.
" Guarda el documento con el nombre inicio.8t!, dentro de la carpeta Mis
docu!entos>e-erciciosL8t!l>ani!ales de tu disco duro.
$ Abre el documento que acabas de crear en un navegador, y comprueba que obtienes una pgina como
la que a6uJ. Fjate en el color de fondo de la pgina y en la barra de ttulo.
175
E-ercicios del Te!a 2. .rue#a e+aluati+a del Te!a 2.
E-ercicios Unidad 2. Estructura de una pgina
Si no tienes abierto el Bloc de notas, brelo para realizar los ejercicios planteados a continuacin.
E-ercicio 1F Deportes.
1 Abrir el documento 6uienes.8t!, de la carpeta originales>deportes del curso.
2 Guardar la pgina con el mismo nombre en tu directorio de ejercicios Mis
docu!entos>e-erciciosL8t!l>deportes.
3 Establecer M(('')) como color de fondo y 4( como tamao de los mrgenes.
4 Guardar los cambios y comprobar el funcionamiento con tu navegador, no te preocupes por el formato
del texto, lo arreglars en el tema siguiente.
E-ercicio 2F &lores.
1 Copiar la imagen =ondo.gi= que encontrars en la carpeta originales>=lores>i!agenes a tu carpeta Mis
docu!entos>e-erciciosL8t!l>=lores>i!agenes
2 Copiar el documento inicio.8t!, de la carpeta originales>=lores a tu carpeta Mis
docu!entos>e-erciciosL8t!l>=lores.
3 Abrir el documento Mis docu!entos>e-erciciosL8t!l>=lores/inicio.8t! con el Bloc de notas.
4 Establecer como imagen de fondo la imagen =ondo.gi= de la carpeta e-erciciosL8t!l>=lores>i!agenes.
Guardar los cambios y comprobar el funcionamiento en tu navegador.
175
.rue#a e+aluati+a de la unidad 2. Estructura de una pgina
(olo una respuesta es v!lida por pregunta.
1. Las p!ginas 1e escritas en HTML tienen %ue tener la extensin html o htm.
a) Verdadero
b) Falso
2. El cdigo de las p!ginas estar! comprendido entre las eti%uetas 2head3 4 25head3.
a) Verdadero
b) Falso
3. El t6tulo de una p!gina se estalece dentro de la caecera.
a) Verdadero
b) Falso
$. El margen %ue ha4 entre el orde de la ventana 4 el contenido de la p!gina no puede
modi7icarse.
a) Verdadero
b) Falso
'. +uede estalecerse una imagen de 7ondo a travs del atriuto ac8ground.
a) Verdadero
b) Falso
175
). Las eti%uetas 2od43 4 25od43 van.
a) +usto encia de la cabecera.
b) ,entro de la cabecera.
c) +usto deba-o de la cabecera.
*. Es posile de7inir el color de la 7uente del documento mediante.
a) la etiqueta 2html3.
b) el atributo gcolor.
c) el atributo text.
-. Los atriutos le7tmargin 4 topmargin.
a) no $uncionan en .nternet /"plorer.
b) no $uncionan en &etscape.
c) $uncionan en todos los navegadores.
/. El color de 7ondo de una p!gina.
a) se especi$ica en la etiqueta 2od43.
b) puede establecerse a trav0s del atributo gcolor.
c) las dos a$iraciones anteriores son verdaderas.
d) las tres a$iraciones anteriores son $alsas.
10. Los colores se representan en.
a) binario.
b) decial.
c) las dos a$iraciones anteriores son verdaderas.
d) las tres a$iraciones anteriores son $alsas.
HE,ULTCDN,
175
C4uda E-ercicios Unidad 2. )rear sitio local 4 !odi=icar las
propiedades de la pgina
E-ercicio 1F Deportes
Cpartado 1 Hacer clic sobre el men Crc8i+o, y elegir la opcin C#rir.
En la nueva ventana, elegir Todos los arc8i+os en TipoF.
Seleccionar el documento 6uienes.8t!, de la carpeta deportes.
Pulsar sobre el botn C#rir.
Cpartado 2 Hacer clic sobre el men Crc8i+o, y elegir la opcin Guardar co!o.
En la nueva ventana, elegir la carpeta e-erciciosL8t!l>deportes.
Dejar el mismo nombre de documento 6uienes.8t!.
Pulsar sobre el botn Guardar.
Cpartado 3 Buscar la etiqueta ;#od4<.
Sustituirla por ;#od4 #gcolor?"#&&99CC" le=t!argin?"4&" top!argin?"4&" !argin/idt8?"4&"
!argin8eig8t?"4&"<.
Cpartado 4 Hacer clic sobre la opcin Guardar, del men Crc8i+o.
Abrir el documento 6uienes.8t! en un navegador y comprobar que el fondo de la pgina es de color
azul.
E-ercicio 2F &lores
En la nueva ventana, elegir Todos los arc8i+os en TipoF
Seleccionar el documento inicio.8t!, de la carpeta e-erciciosL8t!l>=lores.
Cpartado 4 Buscar la lnea en la que aparezca ;#od4.
175
Aadir #ac5ground?"ima/enes8fondo./if" delante del smbolo < de cierre de la etiqueta #od4.
Cpartado Hacer clic sobre la opcin Guardar, del men Crc8i+o.
Abrir el documento inicio.8t! en un navegador, y comprobar el fondo de la pgina es de color rosa, con
flores.
)olores en 8exadeci!al
Los colores en HTML se representan mediante un nmero hexadecimal.
Un nmero hexadecimal se diferencia de un nmero decimal en que no slo puede tomar valores del 0 al
9, sino que puede tomar hasta diecisis valores distintos, que van del ( al ', y de la C a la &.
Cada color estar representado por un grupo de seis dgitos en hexadecimal, precedidos por una
almohadilla, como por ejemplo M&&&&&&.
Existen 216 colores seguros para web. stos son los colores que se muestran de la misma forma en
Microsoft nternet Explorer y en Netscape Navigator, tanto en Windows como en Macintosh.
Tambin podemos personalizar nuestros propios colores, modificando los valores de cada uno de los
dgitos que forman parte del nmero hexadecimal.
A continuacin se muestran los 216 colores seguros para web, para que puedas consultarlos cuando lo
necesites.
#000000 #000033 #000066 #000099 #0000CC #0000FF
#003300 #003333 #003366 #003399 #0033CC #0033FF
#006600 #006633 #006666 #006699 #0066CC #0066FF
#009900 #009933 #009966 #009999 #0099CC #0099FF
#00CC00 #00CC33 #00CC66 #00CC99 #00CCCC #00CCFF
#00FF00 #00FF33 #00FF66 #00FF99 #00FFCC #00FFFF
#330000 #330033 #330066 #330099 #3300CC #3300FF
#333300 #333333 #333366 #333399 #3333CC #3333FF
#336600 #336633 #336666 #336699 #3366CC #3366FF
#339900 #339933 #339966 #339999 #3399CC #3399FF
#660000 #660033 #660066 #660099 #6600CC #6600FF
#660033 #663333 #663366 #663399 #6633CC #6633FF
#666600 #666633 #666666 #666699 #6666CC #6666FF
#669900 #669933 #669966 #669999 #6699CC #6699FF
#990000 #990033 #990066 #990099 #9900CC #9900FF
#993300 #993333 #993366 #993399 #9933CC #9933FF
#996600 #996633 #996666 #996699 #9966CC #9966FF
#999900 #999933 #999966 #999999 #9999CC #9999FF
175
#CC0000 #CC0033 #CC0066 #CC0099 #CC00CC #CC00FF
#CCCC00 #CCCC33 #CCCC66 #CCCC99 #CCCCCC #CCCCFF
#CCFF00 #CCFF33 #CCFF66 #CCFF99 #CCFFCC #CCFFFF
#FF0000 #FF0033 #FF0066 #FF0099 #FF00CC #FF00FF
#FFCC00 #FFCC33 #FFCC66 #FFCC99 #FFCCCC #FFCCFF
#FFFF00 #FFFF33 #FFFF66 #FFFF99 #FFFFCC #FFFFFF
Existe otra forma de representar algunos colores, sin la necesidad de utilizar nmeros en hexadecimal.
Estos colores pueden representarse por su nombre, y son los siguientes:
)olor Hexadeci!al :o!#re
#FFFFFF white
#000000 black
#000080 navy
#0000FF blue
#008000 green
#008080 teal
#00FF00 lime
#00FFFF aqua
#800000 maroon
#800080 purple
#808000 olive
#808080 gray
#C0C0C0 silver
#FF0000 red
#FF00FF fuchsia
#FFFF00 yellow
175
Unidad 3. El texto 0I1
A lo largo de este tema vamos a aprender a cambiar las propiedades del texto, as como a insertar
caracteres especiales o separadores.
)aracteres especiales 4 espacios en #lanco
Los caracteres ; y < son dos caracteres especiales que indican inicio y fin de etiqueta. Si se desea
insertar estos caracteres como texto hay que escribir el nombre que los representa:
; Se representa con OltP
< Se representa con OgtP
Existen otra serie de caracteres que no se visualizan correctamente en algunos navegadores, como es el
caso de la Q y las letras acentuadas, por lo que al igual que ocurre con los caracteres especiales ; y <,
para insertarlos como texto habra que escribir el nombre que los representa.
A continuacin se muestra una lista con algunos caracteres y el nombre con el que han de ser
representados:
)arcter Hepresentacin
; OltP
< OgtP
OaacuteP
R OCacuteP
3 OeacuteP
S OEacuteP
J OiacuteP
OIacuteP
OoacuteP
T ONacuteP
U OuacuteP
V OUacuteP
Q OntildeP
W O:tildeP
OM13P
175
Siempre que se inserta texto en HTML hay que tener en cuenta que si se escriben varios espacios en
blanco seguidos solamente se mostrar uno en el navegador. Para conseguir que se muestren varios
espacios en blanco seguidos puede sustituirse cada uno de ellos por On#spP.
Por ejemplo, para insertar el texto:
Bienvenidos, esta es mi 1 pgina!
Habra que escribir:
;ie9cl4Bienvenidos, es)a es mi;n,sp4;n,sp4;n,sp4<;ordf4;n,sp4;n,sp4;n,sp4p;aacu)e4/ina=
)o!entarios
En ocasiones podemos desear aadir comentarios aclaratorios dentro del cdigo, de manera que no
sean visualizados en el navegador, pero s a la hora de editar el documento.
Para insertar comentarios dentro del cdigo, basta con insertar el texto entre ;XKK y >>KK<.
Todo el cdigo que se inserte entre estos smbolos no ser visualizado en los navegadores.
Por ejemplo, para insertar el texto siguiente con un comentario:
Bienvenidos, esta es mi 1 pgina!
Habra que escribir:

;ie9cl4Bienvenidos, es)a es mi <;ordf4 p;aacu)e4/ina=
)arcter Hepresentacin
Y OeuroP
Z OccedilP
[ O)cedilP
\ Ouu!lP
] OUu!lP
O Oa!pP
^ Oi6uestP
_ OiexclP
@ O6uotP
` O!iddotP
a Oord!P
b Oord=P
c OnotP
d Ocop4P
e OregP
175
,altos de lJnea ;#r<
En general, cuando trabajamos con un editor de texto se produce un salto de lnea al pulsar la tecla
I:THN.
Si pulsamos I:THN en un documento HTML, el salto de lnea se producir en el cdigo, pero no se
mostrar en el navegador. Para que se produzca el salto de lnea en el navegador, en lugar de pulsar
la tecla I:THN hay que insertar la etiqueta ;#r< donde se desee que se produzca el salto.
La etiqueta ;#r< no precisa ninguna etiqueta de cierre. No hay que insertar la etiqueta ;>#r< despus
de ella, ya que dicha etiqueta no existe.
2ueridos usuarios7
tengo el placer de co!unicaros 6ue 8a4 una nue+a seccin.
Habra que escribir:
?ueridos usuarios, ;#r<)en/o el placer de comunicaros 2ue +a* una nueva secci;oacu)en.
Unidad 3. El texto 0II1
Texto pre=or!ateado ;pre<
Una forma de asegurarnos de que el texto aparezca en el navegador tal cual ha sido insertado dentro
del cdigo, es utilizando las etiquetas ;pre< y ;>pre<.
Utilizando estas etiquetas podemos tener la seguridad de que en el navegador se mostrarn todos los
espacios en blanco que se inserten en el texto, as como todos los saltos de lnea resultantes de
pulsar la tecla I:THN, sin la necesidad de utilizar la etiqueta ;#r<.
Hola, BIENVENIDOS
esta ES MI PGINA WEB
y esto un texto preformateao
Habra que escribir:
;pre< (ola, BI"$@"$IABS
es)a "S MI C#I$A D"B
* es)o un )e9)o preforma)eado ;>pre<
El inconveniente de esta etiqueta es que entre las etiquetas ;pre< y ;>pre< no se pueden incluir las
etiquetas ;i!g< (para incluir imgenes), ;o#-ect< (para incluir objetos como animaciones), ;#ig<,
;s!all<, ;su#< ni ;sup< (las veremos en este tema).
,eparadores ;8r<
175
El elemento que suele utilizarse para separar secciones dentro de una misma pgina es la regla
8oriAontal. Para insertar una regla horizontal hay que insertar la etiqueta ;8r<. Dicha etiqueta no
precisa ninguna etiqueta de cierre.
Es posible especificar algunos atributos de la regla horizontal:
Ctri#uto ,igni=icado .osi#les +alores
align
alineacin de la regla dentro
de la pgina
le=t (izquierda)
rig8t (derecha)
center (centro)
/idt8 ancho de la regla
un nmero, acompaado de % cuando se desee
que sea en porcentaje
siAe alto de la regla un nmero
nos8ade
eliminar el sombreado de la
regla
no puede tomar valores
Por ejemplo, para insertar el texto y la regla horizontal siguientes:
Inicio
Bien+enidos a !i pgina.
Habra que escribir:
Inicio;8r align?@le=t@ /idt8?"3&&E" siAe?"'" nos8ade<Bienvenidos a mi p;aacu)e4/ina.
,angrado de texto ;#loc56uote<
La sangra es una especie de margen que se establece a ambos lados del texto. Para que un texto
aparezca sangrado, se inserta entre las etiquetas ;#loc56uote< y ;>#loc56uote<.
Esta etiqueta en un principio se defini para delimitar citas pero que como la mayora de los
navegadores resuelven la cita incluyendo un sangrado del texto, su uso para sangrar texto se ha
generalizado.
El uso de la etiqueta ;#loc56uote< obliga a que el texto aparezca en una nueva lnea.
nsertando el texto entre varias etiquetas ;#loc56uote< y ;>#loc56uote< se consigue que los mrgenes
sean mayores.
175
2ueridos usuarios7
tengo el placer de co!unicaros 6ue 8a4 una nue+a seccin.
Habra que escribir:
?ueridos usuario
;#loc56uote<
;#loc56uote<
)en/o el placer de comunicaros 2ue +a* una nueva secci;oacu)en.
;>#loc56uote<
;>#loc56uote<
Unidad 3. El texto 0III1
&or!atear el texto ;=ont<...
Las propiedades del texto pueden modificarse a travs de la etiqueta ;=ont<. Para ello, podemos
insertar el texto entre las etiquetas ;=ont< y ;>=ont<, especificando algunos de los atributos de la
etiqueta:
=ace fuente nombre de la fuente, o fuentes
color color del texto nmero hexadecimal o texto predefinido
siAe tamao del texto
valores del 1 al 7, siendo por defecto el 3,
o desplazamiento respecto al tamao por defecto,
aadiendo E o K delante del valor
Bienvenidos a www.aulaclic.com
Habra que escribir:
;=ont color?"#993366" siAe?"4" =ace?"Comic Sans MS, Arial, MS Sans Serif"<Bienvenidos a
www.aulaclic.com ;>=ont<
Tambin es posible definir una fuente para todo el documento. Para ello, hay que insertar la etiqueta
;#ase=ont< despus de la etiqueta ;#od4<.
175
La etiqueta ;#ase=ont< no necesita una etiqueta de cierre, y permite modificar los mismos atributos
del texto que la etiqueta ;=ont<.
Por ejemplo:
;#od4<
;#ase=ont color?"#&&6699" siAe?"4" =ace?"Arial"<
...
Este cdigo hara que la fuente del documento fuera por defecto de color azul, de tamao 4 y Arial. Si
despus de indicar la etiqueta ;#ase=ont< o ;=ont<, el navegador encuentra otra etiqueta ;=ont<, la
que prevalece es siempre la ltima que se encuentra.
Hesaltado del texto ;#< ...
Este cdigo hara que la fuente del documento fuera por defecto de color azul, de tamao 4 y Arial. Si
despus de indicar la etiqueta ;#ase=ont< o ;=ont<, el navegador encuentra otra etiqueta ;=ont<, la
que prevalece es siempre la ltima que se encuentra.
A continuacin se muestran algunas etiquetas asociadas al tipo de letra:
Eti6ueta ,igni=icado E-e!plo
;#< negrita curso HTML aulaclic
;i< cursiva curso HTML aulaclic
;u< subrayado curso HTML aulaclic
;s< tachado curso HTML aulaclic
;tt< teletipo (mquina de escribir) curso HTML aulaclic
;#ig< aumenta el tamao de la fuente curso HTML aulaclic
;s!all< disminuye el tamao de la fuente curso HTML aulaclic
A continuacin se muestran algunas etiquetas asociadas al tipo de informacin:
Eti6ueta ,igni=icado E-e!plo
;cite< cita curso HTML aulaclic
;code< ejemplo de cdigo curso HTML aulaclic
;d=n< definicin curso HTML aulaclic
;del< eliminado curso HTML aulaclic
;e!< nfasis curso HTML aulaclic
175
;ins< insertado curso HTML aulaclic
;5#d< teclado curso HTML aulaclic
;sa!p< muestra curso HTML aulaclic
;strong< destacado curso HTML aulaclic
;su#< subndice curso HTML aulaclic
;sup< superndice curso
HTML
aulaclic
;+ar< variable curso HTML aulaclic
Las etiquetas ms utilizadas son las asociadas al tipo de letra, ya que son ms fciles de recordar, y
en muchos casos los resultados son los mismos que los de aplicar una etiqueta diferente. Por
ejemplo, el resultado de aplicar las etiquetas ;#< y ;strong< es el mismo. ncluso a veces algunos
estilos asociados al tipo de informacin pueden representarse de forma distinta segn el navegador.
Bienvenidos a !!!"aula#l$#"#om
Habra que escribir:
;=ont color?"#993366" siAe?"4" =ace?"Comic Sans MS, Arial, MS Sans Serif"<Bienvenidos a
;#<;u<;tt<www.aulaclic.com;>tt<;>u<;>#<;>=ont<
175
Unidad 3. El texto 0I91
.rra=os ;p< ...
El texto de una pgina puede agruparse en prrafos. Para ello, el texto de cada uno de los prrafos
debe insertarse entre las etiquetas ;p< y ;>p<.
No es necesario insertar la etiqueta ;#r< para que un nuevo prrafo aparezca debajo del anterior, ya
que las etiquetas ;p< y ;>p< hacen que se cambie de lnea automticamente.
Tambin es posible cambiar la alineacin del texto de cada prrafo. Para ello se modifica el valor del
atributo align, cuyos valores pueden ser le=t (izquierda), rig8t (derecha), center (centrado) o -usti=4
(justificado).
C6uJ encontrar3is cursos de =or!acin !u4 interesantes.
Habra que escribir:
;p align?@center@<Bienvenidos a mi p;aacu)e/ina.;>p<
;p<A2u;iacu)e encon)rar;eacu)eis cursos de formaci;oacu)en mu* in)eresan)es.;>p<
Otra forma de cambiar la alineacin del texto es mediante las etiquetas ;di+< y ;>di+<, para las que
tambin existe el atributo align. La etiqueta ;di+<, al igual que la etiqueta ;p<, se utiliza para agrupar
bloques de texto, pero con la diferencia de que la separacin entre ellos es menor.
175
C6uJ encontrar3is cursos de =or!acin !u4 interesantes.
Habra que escribir:
;di+ align?@center@<Bienvenidos a mi p;aacu)e/ina.;>di+<
;di+<A2u;iacu)e encon)rar;eacu)eis cursos de formaci;oacu)en mu* in)eresan)es.;>di+<
Tambin es posible insertar el texto entre las etiquetas ;center< y ;>center< para que aparezca
centrado.
Habra que escribir:
;center<Bienvenidos a mi p;aacu)e/ina.;>center<
Otro par de etiquetas que permiten agrupar bloques de texto, pero que no implican el cambio de lnea
(como en el caso de ;p< y ;di+<), son las etiquetas ;span< y ;>span< volveremos a hablar de estas
etiquetas cuando veamos las hojas de estilo.
Enca#eAados ;81< ...
Existen una serie de encabezados que suelen utilizarse para establecer tJtulos dentro de una pgina.
La diferencia entre los distintos tipos de encabezado es el tamao de la letra, el tipo de resaltado, y la
separacin existente entre el texto y los elementos que tiene encima y debajo de l. Hay que tener en
cuenta que el navegador del usuario es el que aplicar el estilo del encabezado por lo que el mismo
ttulo se puede visualizar de forma diferente segn el navegador.
Existen seis etiquetas que representan seis tipos de cabeceras distintas. Todas estas etiquetas
precisan una etiqueta de cierre.
A continuacin se muestran los distintos encabezados existentes:
Eti6ueta E-e!plo
;H1<
TJtulo 1F HTML
;H2<
TJtulo 2F HTML
;H3<
TJtulo 3F HTML
;H4< TJtulo 4F HTML
175
;H< TJtulo F HTML
;H"<
TJtulo "F HTML
Para todas estas etiquetas es posible especificar el valor del atributo align.
El lengua-e HTML
Cpartado 1F Las eti6uetas
Habra que escribir:
;H2 align?@center@<"l len/uaFe (-M.;>H2<;H4<Apar)ado <7 .as e)i2ue)as;>H4<
Mar6uesinas ;!ar6uee<
Las !ar6uesinas son lneas de texto que pueden desplazarse de un lado a otro de la ventana en
forma de lnea.
Para insertar una marquesina, es necesario insertar el texto entre las etiquetas ;!ar6uee< y
;>!ar6uee<.
La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si lo deseas
puedes hacer que estas propiedades varen.
A travs del atributo #e8a+ior puede modificarse el tipo de movimiento. Puede tomar los valores
alternate (de lado a lado de la ventana, como si rebotara en los extremos), scroll (de un lado a otro,
continuamente) o slide (de un lado a otro, pero una sola vez).
A travs del atributo direction puede modificarse la direccin en la que se mover el texto. Puede
tomar los valores do/n (de arriba a abajo), up (de abajo a arriba), le=t (de derecha a izquierda) o le=t
(de izquierda a derecha).
Tambin es posible establecer un color de fondo, a travs del atributo #gcolor.
Por ejemplo, para insertar la siguiente marquesina:
175
Habra que escribir:
;!ar6uee #gcolor?"#&&6699" #e8a+ior?@alternate@ direction?@rig8t@<
;#<;=ont color?"#%%%%CC" siAe?"'"<"s)o es una mar2uesina ;>=ont<;>#<
;>!ar6uee<
Tambin es posible insertar imgenes, tablas y otros elementos entre las etiquetas ;!ar6uee< y
;>!ar6uee<, no solamente texto.
Si quieres saber cmo crear listas, consltalo aqu .
Las listas ;li< ...
Ele!ento de lista ;li<
Cada uno de los elementos de una lista ha de insertarse entre las etiquetas ;li< y ;>li<.
Por ejemplo, para insertar en una lista los siguientes elementos:
.erro
Gato
.eri6uito
Habra que escribir:
...
;li<erro;>li<
;li<#a)o;>li<
;li<eri2ui)o;>li<
...
Todos los elementos de la lista debern encontrarse entre las etiquetas que indiquen si la lista es
desordenada (con vietas) u ordenada (numerada) como veremos a continuacin.
Lista desordenada ;ul<
175
Para que una lista sea desordenada, sus elementos debern encontrarse entre las etiquetas ;ul< y
;>ul<.
A travs del atributo t4pe es posible elegir el tipo de vieta, que puede ser circle (crculo), disc (disco)
o s6uare (cuadrado).
Por ejemplo, para insertar la siguiente lista:
o.erro
oGato
o.eri6uito
Habra que escribir:
;ul t4pe?@circle@<
;li<#a)o;>li<
;li<eri2ui)o;>li<
;>ul<
Lista ordenada ;ol<
Para que una lista sea ordenada, sus elementos debern encontrarse entre las etiquetas ;ol< y ;>ol<.
A travs del atributo t4pe es posible elegir el tipo de numeracin, que puede ser 1 (nmeros), a (letras
minsculas), C (letras maysculas), i (nmeros romanos en minsculas) o I (nmeros romanos en
maysculas).
i. Perro
ii. Gato
iii. Periquito
iv. Habra que escribir:
;ol t4pe?@i@<
;li<erro;>li<
;li<#a)o;>li<
;li<eri2ui)o;>li<
;>ol<
175
Cnidar listas
Es posible anidar listas dentro de otras. Estas listas pueden ser tanto desordenadas como ordenadas.
1. Lunes
ngles
Francs
2. Martes
3. ngles
A. Correccin de ejercicios
B. Proponer ejercicios
Habra que escribir:
;ol<
;li<.unes
;ul t4pe?@s6uare@<
;li<In/les;>li<
;li<%rances;>li<
;>ul<
;>li<
;li<Mar)es
;ol<
;li<In/les;>li<
;ol t4pe?@C@<
;li<Correccion de eFercicios;>li<
175
;li<roponer eFercicios ;>li<
;>ol<
;>li<
;>ol<
;>li<
;>ol<
Empezamos por la lista ordenada (la ms externa) ;ol<, esta lista tiene dos elementos ;li<.unes y
;li<Mar)es.
El elemento .unes contiene una lista desordenada con tipo cuadrado ;ul t4pe?@s6uare@< que tiene
dos elementos ;li<In/les;>li< y ;li<%rances;>li<.
El elemento Mar)es contiene una lista ordenada de un slo elemento ;li<In/les;>li< elemento que
contiene a su vez una lista desordenada de tipo letras maysculas ;ol t4pe?@C@< con los dos
elementos ;li<Correccion de eFercicios;>li< y ;li<roponer eFercicios ;>li<
.ara practicar los distintos aspectos explicados en el te!a puedes realiAar el E-ercicio
paso a paso Insertar texto con di=erentes propiedades.
E-ercicio pas a paso. Insertar texto con di=erentes propiedades
N#-eti+o.
.racticar las operaciones que hay que realizar para insertar texto especi=icando sus propiedades.
E-ercicio 1.
1 Si no tienes abierto el Bloc de notas, brelo para realizar el ejercicio.
2 Abre el archivo inicio.8t!, que creaste en el tema anterior y que se encuentra en la carpeta
e-erciciosL8t!l>ani!ales.
3 nserta una lnea en blanco debajo de la etiqueta ;#od4<, y escribe el siguiente cdigo en ella:
;#ase=ont color?@red@ siAe?"< "<
Con este cdigo estars estableciendo el color rojo (#%%&&&&) y tamao < para el texto del
documento.
Si guardas ahora los cambios y visualizas la pgina, no vers ningn cambio ya que la pgina no
tiene texto.
4 Detrs de la etiqueta ;#ase=ont< inserta una lnea en blanco, y escribe el siguiente texto: Inicio
175
Guarda el archivo y visualzalo en tu navegador, el texto debe aparecer en rojo y pequeo.
Dejaremos la pgina un poco ms discreta y cambiaremos el color del texto a verde oscuro
(#&&3333) y subiremos el tamao de las letras.
" Rectifica la etiqueta ;#ase=ont< para que quede as:
;#ase=ont color?"#&&3333" siAe?"4"<
Con este cdigo estars estableciendo el color verde oscuro (#&&3333) y tamao 4 para el texto del
documento.
7 Guarda el archivo y visualzalo en tu navegador, observa los cambios.
8 Encierra el texto nicio entre etiquetas <H1> de la siguiente forma:
;81<Inicio;>81<
Con este cdigo estars convirtiendo el texto en un encabezado de primer nivel.
' Guarda el archivo y visualzalo en tu navegador, observa los cambios, el texto aparece destacado y
ms grande.
1( nserta una lnea en blanco debajo del cdigo anterior, y escribe la etiqueta ;8r<.
Con esta etiqueta estars insertando una regla horizontal.
11 Guarda el archivo y visualzalo en tu navegador, observa la regla
12 nserta una lnea en blanco debajo de la etiqueta anterior, y escribe el siguiente cdigo en ella:
;#loc56uote<
;#loc56uote<
;p align?@le=t@<
;e!<
Somos una asociaci;oacu)e4n de ve)erinarios, es)udian)es de ve)erinaria, o simplemen)e aman)es de los
animales.
;#r<
Aesde es)a p;aacu)e4/ina we, in)en)aremos resolver )us dudas acerca de c;oacu)e4mo cuidar a )us
masco)as.
;>e!<
;>p<
;>#loc56uote<
;>#loc56uote<
Con este cdigo estars insertando un prrafo (;p<) dividido en dos lneas (;#r<).
175
Este prrafo estar alineado a la izquierda (align?@le=t@), aparecer en cursiva (;e!<) y tendr
doble sangrado (;#loc56uote<).
13 Guarda el archivo y visualzalo
en tu navegador, comprueba que
obtienes una pgina como la que
aparece si a6uJ. Para apreciar
mejor el efecto del prrafo ves
cambiando el tamao de la
ventana de tu navegador y vers
cmo el texto se va escribiendo en
ms lneas pero siempre alineado
a la izquierda y saltando de lnea
despus de la primera frase.
E-ercicio 2.
1 Abre el documento gatos.8t!, de la carpeta originales>ani!ales del curso.
2 Guarda la pgina con el mismo nombre en tu directorio de ejercicios Mis
docu!entos>e-erciciosL8t!l>ani!ales
Vamos a modificar la pgina para que tenga el siguiente aspecto:
1 Empezamos por darle a la palabra #a)os un estilo de encabezado 1: ;81<#a)os;>81<
175
Si quieres puedes ir observando los cambios segn los vayas introduciendo, guardando sin cerrar el
bloc de notas y visualizando la pgina cada vez (la primera vez abres el explorador con la pgina
gatos.htm y despus de ver el efecto, en vez de cerrar la ventana del explorador la dejas abierta, as
cuando hayas hecho el siguiente cambio en la pgina podrs volver a la sesin del explorador con la
pgina gatos.htm y despus de hacer clic en el botn Actualizar de tu navegador vers mejor el
efecto producido por el cambio que has incorporado a la pgina).
2 Detrs aadimos una regla con la etiqueta ;8r<.
3 Aadimos una lnea en blanco con ;#r<
4 La pregunta queda sangrada con respecto al resto del texto, la colocamos dentro de una etiqueta
;#loc56uote< y adems le asignamos un estilo de encabezado 3:
;#loc56uote<
;83<¿COMO PREVENR LOS PROBLEMAS DENTALES?;>83<
;>#loc56uote<
Slo nos queda definir la lista intercalando las siguientes etiquetas:
;ul<
;li< Alimentar al gato con comida seca de buena calidad o darle algo duro para que lo mastique ;>li<
;ul<
;li< Preferiblemente que coma pienso ;>li<
;>ul<
;li< Cepillarle los dientes una vez a la semana ;>li<
;li< Que el veterinario examine la boca del gato por lo menos cada seis meses ;>li<
;>ul<
" Guarda el archivo y visualzalo en tu navegador.
175
E-ercicios Unidad 3. Modi=icar las propiedades del texto
1 Abrir el documento 6uienes, de tu carpeta e-erciciosL8t!l>deportes.
2 Aadir el cdigo necesario para que la pgina quede de la siguiente forma:
175
3 Guardar los cambios y comprobar el funcionamiento en un navegador.
1 Abrir el documento donde.8t!, de la carpeta originales>deportes del curso.
docu!entos>e-erciciosL8t!l>deportes
3 Convertir la ltima frase en una marquesina.
1 Abrir el documento intalaciones.8t!, de la carpeta originales>deportes del curso.
3 Convertir la lista de actividades que aparece antes de la frase Puedes apuntarte... en una lista con
vietas.
1 Abrir el documento inicio.8t!, de la carpeta e-ercicioL8t!l>=lores.
2 Aadir el cdigo necesario para que la pgina quede de la siguiente forma:
175
Establecer M''((33 como color del texto del documento, y 4 como el tamao normal.
Si no tienes muy claro las operaciones a realizar en los ejercicios anteriores, En las siguientes 8o-as te
lo explica!os.
C4uda E-ercicios Unidad 3. Modi=icar las propiedades del texto
Cpartado 2 Rectificar el cdigo dejndolo de la siguiente manera:
;#ase=ont siAe?"4"<
;81< ;u<;i2ues)4?5I"$"S SBMBSG ;>u< ;>81<
;#r<
;p align?@-usti=4@<Somos una cadena de cen)ros depor)ivos dispues)os a ofrecer)e
nues)ras ins)alaciones a ,uen precio, con la posi,ilidad de reservarlas con
an)elaci;oacu)e4n a )rav;eacu)e4s de es)a we,.
;>p<
;#r<
;p align?@center@<"s)e m;eacu)e4s, podr;aacu)e4s +acer)e socio de forma )o)almen)e
/ra)ui)a. ;#r<
Ac;eacu)e4rca)e a uno de nues)ros cen)ros * no pierdas es)a opor)unidad.;>p<
La primera lnea aparece subrayada ( ;u<), como un encabezado (;81<).
Luego tenemos dos prrafos ya que tiene una alineacin diferente, el primero est justificado (;p
align?@-usti=4@ todas las lneas acaban sobre la misma vertical derecha), el segundo est alineado
al centro (;p align?@center@<1.
Entre los dos prrafos tenemos una lnea en blanco (;#r<)
175
Cpartado 2 Buscar la lnea en la que aparezca el texto ara m;aacu)e4s informaci;oacu)e4n so,re
d;oacu)e4nde se encuen)ran nues)ros cen)ros, puedes llamar al7 ''' &' &' '&.
El prrafo es ;p<;e!<;#<ara m;aacu)e4s informaci;oacu)e4n so,re d;oacu)e4nde se
encuen)ran nues)ros cen)ros, puedes llamar al7 ''' &' &' '&;>#<;>e!<;>p<.
nsertar dicho prrafo entre las etiquetas ;!ar6uee< y ;>!ar6uee<.
Cpartado 4 Abrir el documento donde.8t! en un navegador y comprobar que el texto .ara !s
in=or!acin so#re dnde se encuentran nuestros centros7 puedes lla!ar alF ( ( ( est en
movimiento.
Cpartado 3 Sustituir las etiquetas ;p< que aparecen delante de cada actividad por la etiqueta ;li< y
encerrar la lista entre etiquetas ;ul< (lista con vietas), el cdigo quedar as:
;ul<
;li<Pista fútbol sala y baloncesto;>li<
;li<Sala aeróbic;>li<
;li<Pistas de tenis;>li<
;li<Sala de musculación;>li<
;li<Sauna</li>
;li<Duchas</li>
;>ul<
Cpartado 4 Abrir el documento instalaciones.8t! en un navegador y comprobar que el texto ahora
aparece una lista de actividades.
E-ercicio 4F &lores
Cpartado 2 Rectificar el cdigo dejndolo de la siguiente manera:
;#ase=ont color?"#99&&33" siAe?"4"<
;81 align?@center@<;e!<;=ont siAe?"H"<- nicio -;>=ont<;>e!<;>81<
175
;p<Desde esta página web podrás comprar regalos para aquellas personas que son especiales
para ti.;>p<
;p<Nosotros nos encargaremos de hacérselos llegar, y darles esa sorpresa
que no se esperan.;>p<
;#r<;#r<
;82<;center< aulaClic;>center<;>82<
Abrir el documento inicio.8t! en un navegador, y comprobar que el texto de la pgina es de color
rojo.
.rue#a e+aluati+a de la unidad 3. El texto
1. Existen algunos caracteres %ue no se visuali,an correctamente en algunos navegadores.
a) Verdadero
b) Falso
2. Los caracteres 2 4 3 son dos caracteres especiales %ue indican inicio 4 7in de eti%ueta.
a) Verdadero
b) Falso
3. Los comentarios se insertan entre 29:: 4 55::3.
a) Verdadero
b) Falso
$. (i se escrien varios espacios en lanco seguidos solamente se mostrar! uno en el
navegador.
a) Verdadero
b) Falso
175
'. La eti%ueta 23 hace %ue el texto se muestre en cursiva.
a) Verdadero.
b) Falso.
6. El texto equivale a un espacio en blanco.
a) Verdadero
b) Falso
7. Los encabea!os...
a) Sirven para establecer el color de fondo del texto.
b) Se utilizan para establecer ttulos dentro de la pgina.
c) No existen en !"#.
-. Las eti%uetas 2center3 4 25center3...
a) periten cabiar el taa!o del te"to.
b) periten insertar un te"to coo t(tulo.
c) periten centrar el te"to.
/. +ara agrupar lo%ues de texto...
1) %odeos utilizar las etiquetas 2p3 y 2div3.
2) %odeos utilizar la etiqueta 2span3.
C) Cualquiera de las dos prieras opciones.
,) &inguna de las opciones anteriores.
10. Las mar%uesinas...
1) %ueden contener te"to.
2) %ueden contener igenes.
C) Cualquiera de las dos prieras opciones.
,) &inguna de las opciones anteriores.
HE,ULTCDN,
175
Unidad 4. Hiperenlaces 0I1
Vamos a +er qu son los 8iperenlaces, para qu sirven y cmo crearlos, ya que son un elemento
esencial para cualquier pgina web.
Hiperenlace ;a<
Un hiperenlace, hipervnculo, o vnculo, no es ms que un enlace, que al ser pulsado lleva de una
pgina o archivo.
Aquellos elementos (texto, imgenes, etc.) sobre los que se desee insertar un enlace han de
encontrarse entre las etiquetas ;a< y ;>a<.
A travs del atributo 8re= se especifica la pgina a la que est asociado el enlace, la pgina que se
visualizar cuando el usuario haga clic en el enlace.
Por ejemplo, para insertar el enlace:
9isita ///.aulaclic.co!
Habra que escribir:
;a 8re=?"+))p788www.aulaclic.com"<@isi)a www.aulaclic.com;>a<
Tipos de re=erencias
Existen diferentes formas de expresar una referencia a una pgina a travs del atributo 8re=.
175
He=erencia a#solutaF
Conduce a una ubicacin externa al sitio en el que se encuentra el documento. La ubicacin es en
nternet, en este caso hay que empezar la referencia por http:// , el nombre del dominio y algunas
veces el nombre de la pgina. Si no se escribe el nombre de la pgina se cargar la pgina de inicio
asociada al dominio.
Por ejemplo, "8ttpF>>///.aulaclic.co!" tendr el mismo efecto que "8ttpF>>///.aulaclic.co!>index.8t!"
Para insertar el enlace:
Visita www.aulaclic.com
Habra que escribir:
;a 8re=?"+))p788www.aulaclic.com"<@isi)a www.aulaclic.com </a <
He=erencia relati+a al sitioF
Conduce a un documento situado dentro del mismo sitio que el documento actual. Un sitio web es un
con-unto de arc8i+os 4 carpetas, relacionados entre s, con un diseo similar o un objetivo comn,
estando todos ellos dentro de una misma carpeta, conocida como carpeta raJA del sitio.
Por ejemplo, teniendo en cuenta que el documento tL4L1.8t! se encuentra directamente dentro de la
carpeta raz del sitio, para insertar el enlace:
Enlace a Te!a 4F Hiperenlaces
Habra que escribir:
;a 8re=?"8)I4I<.+)m"<"nlace a -ema 47 (iperenlaces;>a<
Observa como aparece el smbolo ">" delante del nombre del documento. Esta barra inclinada indica
la carpeta raz del sitio. Si el documento tL4L1.8t! se encontrara, por ejemplo, dentro de una carpeta
llamada te!a4, y esta estuviera dentro de la carpeta raz del sitio, habra que escribir:
;a 8re=?"8)ema48)I4I<.+)m"<"nlace a -ema 47 (iperenlaces;>a<
He=erencia relati+a al docu!entoF
Conduce a un documento situado dentro del mismo sitio que el documento actual, pero partiendo del
directorio en el que se encuentra el actual.
Por ejemplo, teniendo en cuenta que el documento tL4L1.8t! se encuentra dentro de la misma
carpeta que el documento actual, para insertar el enlace:
Enlace a Te!a 4F Hiperenlaces
175
Habra que escribir:
;a 8re=?")I4I<.+)m"<"nlace a -ema 47 (iperenlaces;>a<
Observa que en este caso no aparece el smbolo ">" delante del nombre del documento. Si el
documento tL4L1.8t! se encontrara, por ejemplo, dentro de una carpeta llamada te!a4, y esta
estuviera dentro de la misma carpeta que el documento actual, habra que escribir:
;a 8re=?")ema48)I4I<.+)m"<"nlace a -ema 47 (iperenlaces;>a<
.unto de =i-acinF
Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello el
vnculo debe ser "no!#reLdeLdocu!entoMno!#reLdeLpunto".
Por ejemplo, para insertar el enlace:
Punto de fijacion Tipos de enlaces
Habra que escribir:
;a 8re=?")I4I<.+)m#)ipos"<un)o de fiFacion -ipos de enlaces;>a<
Teniendo en cuenta que el documento se llama tL4L1.8t! y el punto de fijacin se llama tipos.
Al final de este tema vers cmo definir el punto de fijacin.
175
Unidad 4. Hiperenlaces 0II1
Destino del enlace
El destino del enlace determina en qu ventana va a ser abierta la pgina vinculada, se especifica a
travs del atributo target al que se le puede asignar los siguientes valores:
L#lan5F
Abre el documento vinculado en una ventana nueva del navegador.
LparentF
Abre el documento vinculado en la ventana del marco que contiene el vnculo o en el conjunto de
marcos padre.
Lsel=F
Es la opcin predeterminada. Abre el documento vinculado en el mismo marco o ventana que el
vnculo.
LtopF
Abre el documento vinculado en la ventana completa del navegador.
No te preocupes si no te queda del todo claro para qu sirve cada una de estas opciones de destino,
ya que se volvern a ver en el tema de Marcos. De momento slo te interesa retener la opcin L#lan5
y Lsel=.
Para insertar el enlace:
175
9isita ///.aulaclic.co! en una +entana nue+a
Habra que escribir:
;a 8re=?"+))p788www.aulaclic.com" target ?@L#lan5@<@isi)a www.aulaclic.com en una ven)ana nueva;>a<
Es interesante utilizar esta opcin cuando la pgina de destino est fuera de nuestro sitio para que
cuando el usuario cierre la ventana del explorador, se encuentre automticamente en la pgina desde
la que haba salido (que vuelva a nuestro sitio).
&or!ato de los enlaces
En general, un texto que tiene un vnculo asociado suele aparecer subrayado.
Cuando el vnculo est definido sobre una imagen, en el borde aparecen una serie de puntitos al
pulsar sobre ella. Cuando el vnculo est definido sobre una zona de una imagen (un mapa), aparece
el contorno de esa zona.
Aqui tienes dos vnculos similares de ejemplo:
Como puedes ver, la segunda imagen que hace de vnculo contiene un recuadro alrededor. Esto
ocurre debido a que se ha establecido un borde para la imagen, como veremos ms adelante.
Tanto si el vnculo se asigna a un texto como a una imagen, el cursor cambia de forma al situarse
encima del vnculo. Suele adquirir la apariencia de una mano sealando.
Normalmente los vnculos de texto cambian de color cuando el enlace ha sido ya pulsado o cuando el
puntero del ratn se posiciona sobre l, estos cambios estn predefinidos en cada navegador, pero
nosotros podemos cambiar esos colores.
Los colores de los vnculos pueden especificarse a travs de las propiedades de la pgina, en la
etiqueta ;#od4<. Estos colores se asignan a travs de los atributos lin5 (vnculo), alin5 (vnculo
activo), y +lin5 (vnculo visitado).
lin5 permite determinar el color de los enlaces sin visitar (enlace que no ha sido pulsado ninguna vez).
175
alin5 permite determinar el color del enlace activo (enlace que acaba de ser pulsado).
+lin5 permite determinar el color de los enlaces visitados (enlaces que ya han sido pulsados).
Por ejemplo, al insertar el siguiente cdigo:
...
;#od4 lin5?"#%%&&&&" +lin5?"#%%&&99" alin5?"#%%99&&"<
...
;a 8re=?"+))p788www.aulaclic.com" target ?@L#lan5@<www.aulaclic.com </a <
...
Mientras no se visite la pgina www.aulaclic.com, el enlace ser de color rojo (#FF0000):
///.aulaclic.co!
Mientras la pgina www.aulaclic.com sea la ltima visitada, el enlace ser de color fucsia (#FF0099):
///.aulaclic.co!
Cuando se haya visitado la pgina www.aulaclic.com, el enlace ser de color naranja (#FF9900):
///.aulaclic.co!
175
Unidad 4. Hiperenlaces 0III1
.untos de =i-acin. Cnclas
Cuando se tienen documentos extensos, divididos en varios apartados, es preferible poder ir
directamente al apartado deseado, en lugar de ir al comienzo del documento.
Para ello se utilizan las anclas, o puntos de fijacin, muy tiles a la hora de crear ndices.
Un ancla necesita que se inserten las ;a< y ;>a<, con el atributo na!e, que puede tomar cualquier
valor inventado por el usuario, se recomienda no utilizar caracteres especiales.
Por ejemplo, para insertar un punto de fijacin delante del siguiente texto:
Texto con ancla
Habra que escribir:
;a na!e?"miancla"<;>a<-e9)o con ancla
Como puedes ver, no es necesario insertar nada entre las etiquetas ;a< y ;>a<, y que sin mirar el
cdigo no hay nada que indique que delante del texto haya un ancla.
Teniendo en cuenta que el documento actual se llama tL4L3.8t!, y que el ancla anterior se llama
!iancla, podramos crear un enlace que nos llevara directamente a la lnea de texto en la que se
encuentra el ancla. Por ejemplo:
Enlace al ancla
Habra que escribir:
;a 8re=?")I4I3.+)m#miancla"<"nlace al ancla;>a<
175
Si pulsas sobre el enlace vers cmo se vuelve a cargar el documento actual, pero en lugar de
cargarse desde el principio, la primera lnea de texto ser la lnea en la que hemos insertado el ancla.
Cuando el ancla se encuentra en el mismo documento que el enlace, como ocurre en este caso,
podemos prescindir de poner el nombre de la pgina en el atributo 8re=.
En el ejemplo anterior podramos haber escrito:
;a 8re=?"#miancla"<"nlace al ancla;>a<
Ntros tipos de enlaces
Existen otros tipos de enlaces que no conducen a otra pgina web, los veremos a continuacin:
)orreo electrnicoF
Abre la aplicacin Outlook Express para escribir un correo electrnico, cuyo destinatario ser el
especificado en el enlace. Para ello la referencia del vnculo debe ser @!ailtoFdirecciondecorreo@.
Por ejemplo, para insertar un enlace que permita enviar un correo electrnico a aulaClic, tal como
este:
eK!ail para aulaclic
Habra que escribir:
;a 8re=?"!ailtoFwe,mas)erJaulaclic.com"<eKmail para aulaclic;>a<
Despus de hacer clic en el enlace se abrir el Outlook Express (si el usuario lo tiene instalado) con
la pantalla para redactar un nuevo mensaje y con el campo destinatario rellenado con la direccin de
correo. Podemos hacer que est rellenado algn campo ms como es el asunto. En este caso habra
que escribir:
;a 8re=?"!ailtoFwe,mas)erJaulaclic.comfsu#-ect?el asun)o del mensaFe"<eKmail para aulaclic;>a<
9Jnculo a =ic8eros para descargaF
El valor del atributo 8re= normalmente ser una pgina web (con extensin htm, html, asp, php...) pero
tambin puede ser un fichero comprimido, una hoja de Excel, un documento Word, un documento con
extensin pdf. Cuando el enlace no es a una pgina Web nos aparecer el cuadro de dilogo que
seguro habrs visto alguna vez en el que el navegador le pide al usuario permiso para descargar el
fichero en su ordenador.
175
El navegador reconoce algunas extensiones como asociadas a un determinado programa (por
ejemplo la extensin .doc est asociada al programa Word, .pdf al programa Acrobat Reader, .xls al
programa Excel...) en este caso en el cuadro de dilogo aparece una nueva opcin, la de abrir el
fichero sin descargarlo en el disco duro del usuario.
Para nombrar el fichero podemos utilizar segn el caso, una referencia externa, una referencia
relativa al sitio o una referencia relativa al documento.
Por ejemplo, en la carpeta donde se encuentra esta pgina tenemos el fichero Word carta.doc y
queremos que nuestros visitantes puedan visualizar e incluso descargar el fichero en su disco duro,
en este caso definiremos el enlace:
8aA clic a6uJ para descargarte el =ic8ero
De la siguiente forma:
;a 8re=?"car)a.doc" tar-et?L#lan5 <+aL clic a2u;iacu)e4 para descar/ar)e el fic+ero ;>a<
En este caso hemos utilizado una referencia relativa al documento ya que la carta se encuentra en la
misma carpeta que nuestra pgina.
9Jnculo +acJoF
Al pulsar sobre un enlace vaco no se abre ninguna pgina ni archivo, pero el formato es el mismo
que el de cualquier otro enlace. El vnculo debe ser el smbolo almohadilla @M@.
Por ejemplo, para insertar el enlace vaco:
+inculo +acio
Habra que escribir:
;a 8re=?"#"<vinculo vacio ;>a<
Este tipo de enlace resulta til para trabajar con comportamientos javascript.
175
.ara practicar los distintos aspectos explicados en el te!a puedes realiAar el E-ercicio
paso a paso Insertar un 8iperenlace.
E-ercicio paso a paso. Insertar un 8iperenlace
N#-eti+o.
.racticar las operaciones que hay que realizar para insertar un 8iperenlace.
2 Abre el archivo inicio.8t!, que debes tener en la carpeta e-erciciosL8t!l>ani!ales.
Vamos a aadir un enlace a la pgina en nternet de aulaClic.
1 Escribe el siguiente cdigo delante de la etiqueta ;>#od4<:
;p align?@center@<
;a 8re=?"+))p788www.aulaclic.com" target?@L#lan5@<
;#<
visi)a aulaClic
;>#<
;>a<
;>p<
Con este cdigo estars insertando un hiperenlace a www.aulaclic.com, que ser abierto en una
nueva ventana (target?@L#lan5@). En este caso hemos utilizado una referencia absoluta.
3 Haz clic sobre la opcin Guardar.
175
4 Abre con tu navegador el documento inicio.8t! que acabas de guardar, y comprueba que si te
posicionas sobre el texto visi)a aulaClic el puntero del ratn se convierte en una mano y si haces clic
(y ests conectado a nternet) se abrir una nueva ventana con la pgina de aulaClic.
Vamos a cambiar ahora el color de los enlaces.
1 Si cerraste el archivo inicio.8t!, abrelo para seguir con el ejericio:
2 Rectifica la etiqueta ;#od4< para que quede as:
;#od4 #gcolor?"#99CC99" lin5?"#CC&&&&" +lin5?"#CC&&&&" alin5?"#CC&&&&" <
Con este cdigo estars indicando que la pgina tiene el color de fondo verde (#99CC99), y el color
de los enlaces rojo (#CC0000).
4 Haz clic sobre la opcin Guardar.
Abre con tu navegador el documento inicio.8t! que acabas de guardar, y comprueba que obtienes
una pgina como la que aparece si pulsas a6uJ. Fjate que ahora el texto del enlace aparece en rojo.
175
E-ercicios Unidad 4. Insertar 8iperenlaces
1 Abrir el documento !enu.8t!, de la carpeta originales>deportes del curso.
3 Rectificar la pgina para que la palabra E-MAL sea un enlace de correo electrnico a tu direccin
de correo.
1 Abrir el documento instalaciones.8t!, de la carpeta e-erciciosL8t!l>deportes.
2 Aadir al texto de cada actividad un enlace al prrafo correspondiente a esa actividad para que el
navegante pueda ver directamente la descripcin de la actividad sin tener que moverse por toda la
pgina.
1 Abrir el documento !enu.8t!, de la carpeta originales>=lores del curso.
docu!entos>e-erciciosL8t!l>=lores
3 Asociar a la palabra Inicio un enlace a la pgina inicio.8t!, a la palabra Productos un enlace a la
pgina productos.8t! y a la palabra Pedidos un enlace a la pgina pedidos.8t!, las pginas
inicio.8t!, productos.8t! y pedidos.8t! se encontrarn en el mismo directorio que la pgina
menu.htm. Las pginas se abrirn en la misma ventana.
4 Guardar los cambios y comprobar el funcionamiento del enlace a la pgina nicio.htm en un
navegador (las pginas productos.htm y pedidos.htm se incorporarn ms adelante) .
Si no tienes muy claro las operaciones a realizar en los ejercicios anteriores, C6uJ te lo explicamos.
C4uda E-ercicios Unidad 4. Insertar 8iperenlaces
175
En la nueva ventana, elegir Todos los arc8i+os en TipoF
Seleccionar el documento !enu.8t!, de la carpeta originales>deportes.
Cpartado 2 Hacer clic sobre el men Crc8i+o, y elegir la opcin Guardar co!o.
Buscar y abrir la carpeta Mis docu!entos>e-erciciosL8t!l>deportes.
Pulsar sobre el botn Guardar.
Cpartado 3 Aadir delante de la palabra E-MAL la etiqueta: <a
href="mail)o7direccionJaulaclic.com"<.
Sustituye direccionJaulaclic.com por tu direccin de correo.
Escribe detrs de la palabra E-MAL la etiqueta de cierre ;>a<
Abrir el documento !enu.8t! en un navegador, pulsar sobre la palabra E-MAL, y comprobar que se
abre algn programa de envio de correo electrnico, como puede ser Outlook Express con tu
direccin como destinatario del mensaje.
Cpartado 2 Para que el enlace vaya directamente a un lugar concreto de la pgina debemos definir
anclas delante de la descripcin de cada actividad, y aadir el enlace a esa ancla en cada actividad
de la lista. El cdigo quedar de la siguiente forma:
;ul<
;li<;a 8re=?"#fu),ol"<Pista fútbol sala y baloncesto;>a<;>li<
;li<;a 8re=?"#aero,ic"<Sala aeróbic;>a<;>li<
;li<;a 8re=?"#)enis"<Pistas de tenis;>a<;>li<
;li<;a 8re=?"#musculacion"<Sala de musculación;>a<;>li<
;li<Sauna;>li<
;li<Duchas;>li<
;>ul<
...
;83<;a na!e?"fu),ol"<;>a<Pista de fútbol sala y baloncesto;>83<
;p<Disponemos de una pista de fútbol sala y una de baloncesto, estas se
deben reservar con una semana con mínimo de antelación. También
175
ofrecemos el servicio de alquiler de pelotas.;>p<
;p<On#spP;>p<
;83<;a na!e?"aero,ic"<;>a<Sala aeróbic;>83<
;p<Las sesiones de aeróbic se realizan con monitores titulados para más
información pregunta en recepción por los horarios disponibles.;>p<
;p< ;>p<
;83<;a na!e?")enis"<;>a<Pistas de tenis
....
;83<;a na!e?"musculaci1n"<;>a<Salas de musculación...
....
Abrir el documento instalaciones.8t! en un navegador, pulsar sobre la palabra aero,ic de la lista de
actividades y la pgina se desplazar automticamente al prrafo con la descripcin de la actividad.
E-ercicio 3F &lores
Cpartado 3 Encerrar la palabra nicio entre las etiquetas ;a 8re=?"inicio.+)m"< y ;>a< de la
siguiente forma: ;a 8re=?"inicio.+)m"<Inicio;>a< repetir lo mismo con las palabras Productos y
Pedidos:
;a 8re=?"produc)os.+)m"<roduc)os;>a< ;a 8re=?"pedidos.+)m"<edidos;>a< .
En este caso hemos empleado una direccin relativa al documento el navegador buscar la pgina
inicio.8t! en el directorio donde se encuentra !enu.8t!.
No hemos empleado el atributo Tarjet ya que queremos que se visualicen las pginas en la misma
ventana (valor por defecto).
Abrir el documento !enu.8t! en un navegador, pulsar sobre la palabra Inicio y comprueba que
ahora aparece la pgina Inicio.8t! en la misma ventana, para volver al men haz clic en el botn
Atrs de tu navegador.
.rue#a e+aluati+a de la unidad 4. Hiperenlaces
175
1. Un hiperenlace es lo mismo %ue un hiperv6nculo; un v6nculo; o un enlace.
a) Verdadero
b) Falso
2. Los v6nculos vac6os no existen.
a) Verdadero
b) Falso
3. Es posile arir el documento vinculado en una ventana nueva del navegador.
a) Verdadero
b) Falso
$. Un enlace a un punto de 7i<acin conduce a un punto dentro de un documento.
a) Verdadero
b) Falso
'. La ruta de acceso se especi7ica a travs del atriuto hre7.
a) Verdadero.
b) Falso.
). El cursor camia de 7orma al situarse encima del v6nculo en el navegador.
a) Verdadero
b) Falso
3. Cuando el v(nculo est de$inido sobre una iagen
a) Siepre aparece el borde azul alrededor de ella
b) 4sta adquiere un tono azulado
c) 1parecen una serie de puntitos en el borde al pulsar sobre ella
5. /l destino del enlace se especi$ica ediante el atributo...
a) target.
b) hre7.
c) lin8.
/. El tipo enlace puede ser...
1) 1 una pgina e"terna
175
2) 1 una direccin de correo electrnico
C) Cualquiera de las dos prieras opciones
,) &inguna de las opciones anteriores
67. /s posible especi$icar el color de...
1) #os v(nculos
2) #os v(nculos activos
C) #os v(nculos visitados
,) Cualquiera de las opciones anteriores
RESULTADOS
Unidad . I!genes 0I1
Vamos a +er cmo insertar i!genes, y cmo modificar algunas de sus propiedades.
175
I!agen ;i!g<
Todas las pginas web acostumbran a tener un cierto nmero de imgenes, que permiten mejorar su
apariencia, o dotarla de una mayor informacin visual.
Para insertar una imagen es necesario insertar la etiqueta ;i!g<. Dicha etiqueta no necesita etiqueta
de cierre.
El nombre de la imagen ha de especificarse a travs del atributo src.
Por ejemplo, para insertar la siguiente imagen:
Habra que escribir:
;i!g src?"ima/enes8lo/oIanimales./if"<
Teniendo en cuenta que la imagen se llama logoLani!ales.gi= y que est dentro de la carpeta
i!agenes, que se encuentra en el mismo directorio que el documento actual (referencia relativa al
documento).
Para trabajar de una forma ms sencilla y ordenada, es recomendable que todos los documentos html
se encuentren en un mismo directorio, y que dentro de este directorio existan diferentes carpetas para
agrupar otros objetos, como puede ser una carpeta destinada a almacenar imgenes, o una carpeta
destinada a almacenar archivos de audio, etc.
Existen una serie de formatos de imagen ms recomendables que otros para ser introducidos en una
pgina web. Esta informacin puedes consultarla aqu .
Texto alternati+o
Cuando una imagen no puede ser visualizada en el navegador, cosa que puede ocurrir al especificar
mal el valor del atributo src, aparece un recuadro blanco con una g roja en su lugar, junto con el
nombre de la imagen.
Podemos hacer que en lugar de mostrarse el nombre de la imagen aparezca el texto que nosotros
deseemos, gracias al atributo alt.
Por ejemplo, imagina que deseamos mostrar una imagen llamada gatito.gi=, con el texto alternativo
I!agen gato, para ello insertamos el siguiente cdigo:
<img src?"/a)i)o./if" alt?"Ima/en /a)o" <
Pero hemos cometido un error, ya que dicha imagen no se encuentra en el mismo directorio que el
documento actual, sino que se encuentra dentro de la carpeta i!genes. En lugar de la imagen se
mostrar lo siguiente:
175
Si en lugar del cdigo anterior hubiramos insertado el siguiente cdigo:
<img src?"ima/enes8/a)i)o./if" alt?"Ima/en /a)o" <
La imagen habra mostrado correctamente:
El texto alternativo se muestra tambin al situar el puntero sobre la imagen. Si sitas el puntero sobre
la imagen durante unos segundos, vers como aparece el texto I!agen gato.
El texto alternativo es muy til a la hora de disear pginas ms asequibles a los invidentes ya que
los programas lectores son capaces de leer el texto alternativo.
&or!atos de i!agen
Las imgenes pueden ser de muchos formatos diferentes: bmp, gif, jpg, etc. Pero no todos estos
formatos son adecuados para una web, debido a que pueden ocupar mucha memoria o a que no son
compatibles con algunos navegadores.
175
Los formatos ms utilizados son el GF y el JPG, que a pesar de ser imgenes de menor calidad que
las imgenes BMP, son ms recomendables debido a que ocupan menos memoria. Vamos a ver un
poco ms sobre estos formatos:
&or!ato GI&F
Utilizan un mximo de 256 colores, y son recomendables para imgenes con grandes reas de un
mismo color o de tonos no continuos. Suelen utilizarse con gran frecuencia, ya que permiten definir
transparencias y animacin.
&or!ato *.GF
Las imgenes son de mayor calidad que las GF, al poder contener millones de colores, pero el
tamao de la imagen es mayor y tarda ms en descargarse se utilizan ms para fotos.
Puedes incluir imgenes en otros formatos, que podrn ser visualizadas en algunos navegadores.
Este es el caso de las imgenes BMP y PNG.
Puedes cambiar el formato de las imgenes mediante la utilizacin de algn programa de tratamiento
de imgenes, como pueden ser Fireworks, Photoshop, Corel Draw, etc. Por ejemplo el Fireworks de
Macromedia tiene una opcin, exportar a tipo gif que reduce considerablemente la ocupacin de la
imagen sin perder en calidad (siempre que la imagen se adecue al formato).
Dependiendo del programa utilizado existir una mayor o menor cantidad de opciones a la hora de
modificar las imgenes. Para realizar modificaciones sencillas, como la de recortar las imgenes y
cambiar los colores, puedes utilizar incluso el programa Paint de Windows.
Unidad . I!genes 0II1
Borde de una i!agen
En general, al visualizar una pgina en un navegador las imgenes aparecen sin ningn borde
alrededor, pero es posible establecer uno a travs del atributo #order.
175
El atributo #order puede tomar valores numricos, que indican el grosor en pxeles del borde.
Por ejemplo, para insertar la siguiente imagen con borde:
Habra que escribir:
;i!g src?"ima/enes8lo/oIanimales./if" #order?"4" <
Hay que tener en cuenta que el borde de la imagen siempre ser de color negro, a no ser que la
imagen contenga un enlace, en cuyo caso el color del borde ser el color establecido para los
vnculos.
Por ejemplo, para insertar la siguiente imagen con borde y con un enlace:
Habra que escribir:
;a 8re=?"+))p788www.aulaclic.com" target ?@L#lan5@ <;i!g src?"ima/enes8lo/oIanimales./if" #order?"4"
<;>a<
Si se desea establecer un vnculo sobre una imagen y no se desea que se muestre el borde (que por
su color indica que existe dicho vnculo), es necesario establecer #order?"&".
Ta!aQo de una i!agen
Cuando insertamos una imagen, esta se muestra en los navegadores con su tamao original, pero
por diversos motivos puede interesarnos modificar dicho tamao.
A travs de los atributos /idt8 (anchura) y 8eig8t (altura) puede modificarse el tamao de la imagen.
Dicho cambio de tamao no se aplica directamente sobre el archivo de imagen, sino que lo que vara
es la visualizacin de la imagen en el navegador.
175
El valor que pueden tomar los atributos /idt8 y 8eig8t ha de ser un nmero, acompaado de %
cuando se desee que sea en porcentaje con respecto a la pgina.
Por ejemplo, para insertar la siguiente imagen (cuyo tamao original era de 122 pxeles de anchura y
71 pxeles de altura) con 200 pxeles de anchura y 80 pxeles de altura:
Habra que escribir:
;i!g src?"ima/enes8lo/oIanimales./if" /idt8?":&&" 8eig8t?"M&"<
Al modificar el tamao de la imagen a travs de estos atributos es muy probable que la imagen
resultante no sea de buena calidad, en comparacin de cmo podra quedar modificndola desde un
editor externo, como Fireworks.
Unidad . I!genes 0III1
Clineacin de una i!agen
La alineacin de las imgenes se establece a travs del atributo align. Este atributo indica la
alineacin de las imgenes con respecto a la lnea de texto en la que se encuentran.
Los valores del atributo align pueden ser los siguientes:
175
9alor ,igni=icado E-e!plo
a#s#otto! inferior absoluta
magen con texto
a#s!iddle medio absoluta
magen con texto
#aseline lnea de base
magen con texto
#otto! inferior
magen con texto
le=t izquierda
magen con
texto
!iddle medio
magen con texto
rig8t derecha
magen con texto
texttop texto superior
magen con texto
top superior
magen con texto
El resultado de aplicar uno u otro valor puede tener el mismo resultado, como ocurre con los valores
#aseline y #otto!, o con los valores texttop y top.
Para insertar el texto y la imagen siguientes:
.errosGatos Una /e# de ani!ales
Habra que escribir:
175
erros#a)os;i!g scr?"ima/enes8lo/oIanimales./if" align?@!iddle@<5na we, de animales
Este tipo de alineacin la recomendamos cuando es una imagen pequea que queremos fundir con la
lnea de texto sin que por ello cree una separacin demasiado grande entre la lnea donde se
encuentra la imagen y las lneas superior y inferior. Por ejemplo para la imagen de un icono de
cualquier programa, de un botn, etc...
Si la imagen es muy grande, conviene dejarla aislada del texto (no ajustarla a la derecha ni a la
izquierda sino colocarla en un bloque aparte).
Para practicar los distintos aspectos explicados en el tema puedes realizar el E-ercicio paso a
paso Insertar una i!agen.
E-ercicio pas a paso. Insertar una i!agen
N#-eti+o.
.racticar las operaciones que hay que realizar para insertar una i!agen.
Si no tienes abierto el Bloc de notas, brelo para realizar el ejercicio.
175
E-ercicio 1.
1 Abre el archivo inicio.8t!, que se encuentra en la carpeta e-erciciosL8t!l>ani!ales.
2 Sustituye la lnea
;#< visi)a aulaclic ;>#<
Que est incluida dentro de un hiperenlace, por la lnea
;i!g src?"ima/enes8aulaclic.Fp/" alt?"visi)a aulaclic" /idt8?"9&" 8eig8t?"3:" #order?"4"<
Con este cdigo estars asociando el enlace con la imagen aulaclic.Fp/ que se encuentra en la
directorio i!genes dentro de la carpeta ani!ales (la carpeta donde se encuentra el archivo
inicio.8t!.
La imagen medir 9& pxeles de ancho, y 3: pxeles de alto (atributos /idt8 y 8eig8t).
Tendr un borde de 4 pxeles (atributo #order), que aparecer de color rojo, al ser este color el
definido para los enlaces de esta pgina.
En el caso de que la imagen no pueda ser visualizada, o se situe el puntero sobre ella, se mostrar el
texto visi)a aulaclic (atributo alt).
3 Haz clic sobre la opcin Guardar del men Crc8i+o.
4 Abre el documento inicio.8t!, que acabas de guardar, en un navegador, y comprueba que
obtienes una pgina como la que aparece a6uJ abajo.
E-ercicio 2.
1 Abre el documento !enu.8t!, de la carpeta originales>ani!ales del curso.
2 Aade delante de la primera etiqueta <p> ... la siguiente lnea:
;p align?"cen)er"<;i!g src?"ima/enes8lo/oIanimales./if" /idt8?"<::" 8eig8t?"M'"< ;>p<
El prrafo se aade para centrar la imagen.
175
4 Abre el documento !enu.8t!, que acabas de guardar, en un navegador, y comprueba que
obtienes una pgina como la que aparece si a6uJ.
E-ercicio 3.
1 Abre el archivo gatos.8t!, que se encuentra en la carpeta ani!ales.
2 Aade detrs de la etiqueta </ul> la lnea:
;i!g src?"ima/enes8/a)i)o./if" alt?"/a)i)o" #order?"&"<
175
No te preocupes por la disposicin de la imagen, en el tema de tablas lo arreglaremos.
E-ercicios del Te!a . .rue#a e+aluati+a del Te!a .
E-ercicios Unidad . Insertar i!genes
1 Abrir el documento !enu.8t!, de la carpeta e-erciciosL8t!l>deportes.
2 Sustituir la palabra DEPORTES por la imagen logodeportes.gi= que se encuentra en la carpeta
i!agenes de la carpeta e-erciciosL8t!l>deportes, la imagen deber tener deportes como texto
alternativo.
3 Sustituir la palabra E-MAL por la imagen e!ail.gi=, sin texto alternativo.
1 Abrir el documento instalaciones.8t!, de la carpeta e-erciciosL8t!l>deportes.
2 Sustituir la palabra DEPORTES que aparece al final de la pgina por la misma imagen
logodeportes.gi= que en el ejercicio anterior, la imagen deber tener deportes como texto
alternativo.
175
1 Abrir el documento !enu.8t!, de la carpeta =lores.
2 Sustituir la palabra FLORES por la imagen logoL=lores.gi= que se encuentra en la carpeta
i!agenes de la carpeta =lores, la imagen deber tener =lores como texto alternativo y el texto que
hay a su derecha debe quedar a media altura de la imagen.
C4uda E-ercicios Unidad . Insertar i!genes
Cpartado 2 Sustituir la palabra DEPORTES por la referencia a la imagen:
;i!g src?"ima/enes8lo/odepor)es./if" alt?"depor)es" <.
Con el atributo src indicamos qu imagen se tiene que visualizar y dnde se encuentra (en el
directorio imgenes), con el atributo alt indicamos el texto alternativo.
Cpartado 3 Sustituir la palabra E-MAL por la referencia a la imagen:
;i!g src?"ima/enes8email./if" #order?"&" <.
Con el atributo #order indicamos que la imagen no tiene borde para que no salga el borde ya que la
imagen est dentro de un hiperenlace.
Abrir el documento !enu.8t! en un navegador, y situar el cursor sobre la imagen con el logotipo
para ver si aparece el texto alternativo depor)es, situar el cursor sobre la imagen E-MAil y comprobar
que no aparece texto alternativo.
Cpartado 2 Sustituir la palabra DEPORTES por la referencia a la imagen:
;i!g src?"ima/enes8lo/odepor)es./if" alt?"depor)es" <.
175
Con el atributo src indicamos qu imagen se tiene que visualizar y dnde se encuentra (en el
directorio imagenes), con el atributo alt indicamos el texto alternativo.
Abrir el documento instalaciones.8t! en un navegador, y situar el cursor sobre la imagen con el
logotipo para ver si aparece el texto alternativo depor)es, situar el cursor sobre la imagen E-MAil y
comprobar que no aparece texto alternativo.
E-ercicio 3F &lores
Cpartado 2 Sustituir la palabra FLORES por la referencia a la imagen:
;i!g src?"ima/enes8lo/oIflores./if" alt?"flores" align?@a#s!iddle@ <.
Con el atributo alt indicamos el texto alternativo y con el atributo align y el valor a#s!iddle indicamos
que la imagen tendr la alineacin media absoluta por lo que el texto que se encuentra a su derecha
quedar a media altura de la imagen
Abrir el documento !enu.8t! en un navegador, y situar el cursor sobre la imagen con el logotipo
para ver si aparece el texto flores.
.rue#a e+aluati+a de la unidad . I!genes
1. +ara insertar una imagen es necesario insertar la eti%ueta 2imagen3.
a) Verdadero
b) Falso
2. Existen una serie de 7ormatos de imagen m!s recomendales %ue otros para ser
introducidos en una p!gina 1e.
a) Verdadero
b) Falso
3. #uando una imagen no puede ser visuali,ada en el navegador aparece un recuadro
lanco con una = ro<a en su lugar.
a) Verdadero
b) Falso
$. El texto alternativo no aparece al situar el puntero sore la imagen.
a) Verdadero
175
b) Falso
'. Es pre7erile modi7icar el tama>o de las im!genes desde un editor de im!genes.
a) Verdadero.
b) Falso.
). La alineacin de las im!genes se estalece a travs del atriuto align.
a) Verdadero
b) Falso
*. El atriuto 1idth...
a) Va $uera de la etiqueta 2img3
b) Sirve para especi$icar la altura de la iagen
c) Sirve para especi$icar la anchura de la iagen
-. (i escriiramos align?@middle@...
a) #a iagen aparecer(a centrada en la ventana
b) /l edio de la iagen aparecer(a a la isa altura que la l(nea de te"to que la acopa!ara
c) #a iagen ser(a s peque!a
/. Las im!genes...
1) %ueden rediensionarse a trav0s de los atributos 1idth y height
2) Siepre tienen un borde alrededor
10. El orde de la imagen ...
1) Suele ser de color negro
2) 1dquiere el color de los v(nculos cuando contiene alguno
C) %uede desaparecer si escribios order?"0"
,) Cualquiera de las opciones anteriores
175
RESULTADOS
Unidad ". Ta#las 0I1
En este tema vamos a +er cmo trabajar con ta#las. Podremos insertar tablas, filas y columnas, y
modificar sus propiedades.
Hoy en da, la mayora de las pginas web se basan en tablas, ya que resultan de gran utilidad al
mejorar notablemente las opciones de diseo.
Todos los objetos se alinean por defecto a la izquierda de las pginas web, pero gracias a las tablas
es posible distribuir el texto en columnas, colocar imgenes al lado de un bloque de texto, y otra serie
de cosas que sin las tablas seran imposibles de realizarse.
Ta#la ;ta#le<
Las tablas estn formadas por celdas, que son los recuadros que se obtienen como resultado de la
interseccin entre una fila y una columna.

imagen y texto

)NLUM:C
175

Texto dentro de una celda

&ILC )ELDC
Para crear una tabla hay que insertar las etiquetas ;ta#le< y ;>ta#le<. Entre dichas etiquetas habr
que especificar las filas y columnas que formarn la tabla.
&ila ;tr<
Es necesario insertar las etiquetas ;tr< y ;>tr< por cada una de las filas de la tabla. Estas etiquetas
debern insertarse entre las etiqetas ;ta#le< y ;>ta#le<.
Por ejemplo, para crear una tabla con cinco filas escribiramos:
;ta#le<
;tr<...;>tr<
;tr<...;>tr<
;tr<...;>tr<
;tr<...;>tr<
;tr<...;>tr<
;>ta#le<
)olu!na o celda ;td<
Para crear una tabla no basta con especificar el nmero de filas, es necesario tambin especificar el
nmero de columnas.
Una celda es el resultado de la interseccin entre una fila y una columna, por lo que podremos
especificar el nmero de celdas por fila, que equivale a especificar el nmero de columnas por fila.
Es necesario insertar las etiquetas ;td< y ;>td< por cada una de las celdas que compongan cada una
de las filas de la tabla. Por lo tanto, habr que insertar esas etiquetas entre las etiquetas ;tr< y ;>tr<.
Entre las etiquetas ;td< y ;>td< se podr especificar el contenido de cada una de las celdas. Por
ejemplo, para insertar la siguiente tabla:
Sabado Domingo
Curso HTML Curso Dreamweaver
Curso FrontpageCurso Flash
Habra que escribir:
<table #order?"<"<
<tr>
<td>Sa,ado;>td<
175
<td>Aomin/o;>td<
</tr>
<tr>
<td>Curso (-M.;>td<
<td>Curso Areamweaver;>td<
</tr>
<tr>
<td>Curso %ron)pa/e;>td<
<td>Curso %las+;>td<
</tr>
</table>
Unidad ". Ta#las 0II1
&or!ato de la ta#la
Es posible modificar los siguientes atributos de una tabla:
/idt8 ancho de la tabla
8eig8t altura de la tabla
cellpadding
espacio entre el contenido de las
celdas y el borde
un nmero
cellspacing espacio entre celdas un nmero
#order grosor del borde un nmero
align
alineacin de la tabla dentro de la
pgina
le=t (izquierda)
rig8t (derecha)
center (centro)
#gcolor color de fondo nmero hexadecimal
#ac5ground imagen de fondo nmero hexadecimal
#ordercolor color del borde nmero hexadecimal
175
Por ejemplo, para modificar la tabla de la pgina anterior para que quedase como la siguiente:
Sabado Domingo
Curso Frontpage Curso Flash
Habra que escribir:
;ta#le /idt8?"'&E" #order?":" align?@center@ cellspacing?"&" #ordercolor?"#&&&&&&"
#gcolor?"#%%CC99"<
...
;>ta#le<
Con esto indicamos que el ancho (width) de la tabla debe ocupar el 50% del ancho de la ventana (lo
puedes comprobar cambiando el ancho de la ventana de tu navegador y vers que el ancho de la
tabla vara para ocupar siempre la mitad de la ventana), que el borde (border) tiene un grosor de dos
pxeles (es ms ancho que las separaciones internas de la tabla que tienen grosor 1), que la tabla
est alineada al centro (center) de la ventana, que no hay espacio entre las celdas (cellspacing="0"),
que el borde la tabla es negro (#000000) y el fondo naranja (#FFCC99).
&or!ato de las celdas
Es posible modificar los siguientes atributos de una celda:
/idt8 ancho de la tabla
un nmero, acompaado de % cuando se desee que
sea en porcentaje
8eig8t altura de la tabla
sea en porcentaje
align
alineacin horizontal del contenido
de la celda
le=t (izquierda)
rig8t (derecha)
center (centro)
+align
alineacin vertical del contenido de
la celda
#aseline (lnea de base)
#otto! (inferior)
!iddle (medio)
top (superior)
#gcolor color de fondo nmero hexadecimal
#ac5ground imagen de fondo nmero hexadecimal
#ordercolor color del borde nmero hexadecimal
Tambin es posible modificar estos atributos de toda una fila, especificndolos en la etiqueta ;tr<, en
lugar de en la etiqueta ;td<.
175
Hay que tener en cuenta que los atributos tienen ms prioridad cuando son establecidos para una
celda que cuando son establecidos para una fila completa. Al mismo tiempo, tienen ms prioridad los
atributos establecidos para una fila que los establecidos para toda la tabla. Por ejemplo, si
escribiramos el siguiente cdigo:
;ta#le /idt8?"'&E" #order?":" align?@center@ cellspacing?"&" #ordercolor?"#&&&&&&"
#gcolor?"#%%CC99"<
;tr align?@center@ #gcolor?"#&&99CC"<
;td<Sa,ado;>td<
;td #gcolor?"#66CC99"<Aomin/o;>td<
;>tr< ;tr<
;td<Curso (-M.;>td<
;td<Curso Areamweaver;>td<
;>tr< ;tr<
;td<Curso %ron)pa/e;>td<
;td<Curso %las+;>td<
;>tr< ;>ta#le<
Obtendramos la siguiente tabla:
Sabado Domingo
Se ha establecido el color naranja como fondo de toda la tabla, pero con la lnea de cdigo ;tr
align?@center@ #gcolor?"#&&99CC"< se ha establecido el color azul como color de fondo de la primera
fila, por lo que dicha fila se mostrar de color azul, y no de color naranja. Al mismo tiempo, se ha
cambiado el color de la segunda celda de la primera fila por el color verde, a travs de la lnea ;td
#gcolor?"#66CC99"<Aomin/o;>td< por lo que esta fila en vez de ser azul ser verde, los atributos de
celda tienen prioridad sobre los de la fila.
Existe otro atributo que puede establecerse sobre las celdas. Se trata del atributo no/rap, que hace
que el contenido de la celda no se ajuste de manera automtica al ancho de la columna sino que el
ancho de la celda se adapta al ancho del contenido para que el contenido ocupe una slo fila. Este
atributo no toma ningn valor, simplemente se aade o no a las etiqueta ;td<.
175
Unidad ". Ta#las 0III1
Enca#eAado de colu!na ;t8<
Las etiquetas ;td< y ;>td< se utilizan para definir las celdas de cada una de las filas, pero podemos
poner en su lugar las etiquetas ;t8< y ;>t8<.
Para la etiqueta ;t8< es posible especificar los mismos atributos que para la etiqueta ;td<, pero esta
nueva etiqueta hace que el texto de la celda aparezca centrado y en negrita, por lo que se utiliza para
definir los encabezados o ttulos de las columnas.
Por ejemplo, si escribiramos el siguiente cdigo:
;ta#le /idt8?"'&E" #order?"<" align?@center@<
;tr<
;t8<Sa,ado;>td<
;t8<Aomin/o;>td<
;>tr<
;tr<
;td<Curso (-M.;>td<
;td<Curso Areamweaver;>td<
;>tr<
;tr<
;td<Curso %ron)pa/e;>td<
;td<Curso %las+;>td<
;>tr<
;>ta#le<
Obtendramos la siguiente tabla:
175
,#ado Do!ingo
TJtulo de ta#la ;caption<
No solamente es posible establecer ttulos para las columnas, tambin es posible establecer un ttulo
para la tabla mediante las etiquetas ;caption< y ;>caption<.
Estas etiquetas han de ir despus de la etiqueta ;ta#le<, y puede especificarse el valor de los
atributos align (con los valores #otto!, center, le=t, rig8t y top) y +align (con los valores #otto! y
top).
;ta#le /idt8?"'&E" #order?"<" align?@center@<
;caption align?@rig8t@ +align?@top@<-i)ulo de la )a,la;tr<
;tr<
;t8<Sa,ado;>td<
...
;>tr<
;>ta#le<
Obtendramos la siguiente tabla con ttulo:
Titulo de la tabla
,#ado Do!ingo
175
El ttulo aparece ajustado a la margen derecho de la tabla (align?@rig8t@) y encima de la tabla
(+align?@top@).
Unidad ". Ta#las 0I91
)o!#inar celdas
Para las etiquetas ;td< y ;t8< existen los atributos colspan y ro/span, que se utilizan para combinar
celdas.
A travs del atributo colspan se especifica el nmero de columnas por las que se extender la celda,
y a travs del atributo ro/span se especifica el nmero de filas por las que se extender la celda.
Para que quede ms claro, vamos a ver un ejemplo de su uso. Por ejemplo, para insertar la siguiente
tabla:
DI&EHE:)IC, E:THE EL .EHHN h EL HNMBHE
DI&EHE:)IC,
.EHHN
HNMBHE
.E2UEWN GHC:DE
Duracin crecimiento 10 meses 18 a 24 meses 16 aos
Tiempo de gestacin 58 a 63 das 9 meses
Duracin de vida del pelo/cabello 1 ao 2 a 7 aos
Habra que escribir el siguiente cdigo:
;ta#le /idt8?"'H'" #order?":" cellspacing?":"<
;tr align?@center@ +align?@!iddle@<
175
;t8 colspan?"4"<AI%"!"$CIAS "$-!" ". "!!B N ". (BMB!";>t8<
;>tr<
;t8 ro/span?":"<AI%"!"$CIAS;>t8<
;t8 colspan?":"<"!!B;>t8<
;t8 ro/span?":"<(BMB!";>t8<
;>tr<
;t8<"?5";$)ilde4B;>t8<
;t8<#!A$A";>t8<
;>tr<
;td<Auraci;oacu)e4n crecimien)o;>td<
;td<<& meses;>td<
;td<<M a :4 meses;>td<
;td<<6 a;n)ilde4os;>td<
;>tr<
;td<-iempo de /es)aci;oacu)e4n;>td<
;td colspan?":"<'M a 63 d;iacu)e4as;>td<
;td<9 meses;>td<
;>tr<
;td<Auraci;oacu)e4n de vida del pelo8ca,ello;>td<
;td colspan?":"<< a;n)ilde4o;>td<
;td<: a H a;n)ilde4os;>td<
;>tr<
175
;>ta#le<
Vamos a explicar un poco cmo funciona dicho cdigo, aunque sera conveniente que primero
intentaras entender el cdigo comparndolo con la tabla que de l se obtiene.
En primer lugar, tenemos que ver el nmero mximo de columnas que ha de tener la tabla. En este
caso seran cuatro columnas. Para saber el nmero de columnas total de la tabla, tenemos que
fijarnos en el nmero total de celdas que podemos obtener por fila al trazar las lneas verticales que
separan las columnas entre s.
En la primera fila, la lnea ;t8 colspan?"4"<AI%"!"$CIAS "$-!" ". "!!B N ".
(BMB!";>t8< indica que la celda ocupar cuatro columnas de la tabla (la columna actual y las 3
siguientes). Como la tabla tiene como mucho cuatro columnas y el atributo colspan de la celda vale
cuatro, no hay que definir ms celdas para esa misma fila.
En la segunda fila, la lnea ;t8 ro/span?":"<AI%"!"$CIAS;>t8< indica que la celda ocupar dos
filas de la tabla (la actual y la siguiente). Lo mismo ocurre con la lnea ;t8
ro/span?":"<(BMB!";>t8<.
Ya hemos definido dos celdas de la segunda fila. Sabemos que la tabla tiene como mucho cuatro
columnas, por lo que como en la lnea ;t8 colspan?":"<"!!B;>t8< el atributo colspan vale dos,
ya tenemos las cuatro celdas.
En la segunda fila hemos definido dos celdas que se expanden por dos filas, por lo que en la tercera
fila habr que definir solamente dos celdas, y no cuatro, ya que dos de sus celdas se corresponden
con las definidas en la fila anterior.
Las dos nuevas celdas son ;t8<"?5";$)ilde4B;>t8< y ;t8<#!A$A";>t8<.El uso de los
atributos colspan y ro/span puede resultar algo complicado al principio. Es cuestin de prctica.
.ara practicar los distintos aspectos explicados en el te!a puedes realiAar el E-ercicio paso
a paso Tra#a-ar con ta#las.
E-ercicio paso a paso. Tra#a-ar con ta#las
N#-eti+o.
.racticar las operaciones que hay que realizar para !odi=icar las propiedades de la ta#la.
E-ercicio 1.
Vamos a insertar en la pgina gatos.8t! una tabla para colocar la imagen del gatito a la izquierda de
la lista. Para eso crearemos una tabla de una fila y dos columnas, en la columna de la izquierda
colocaremos el texto y en la columna de la derecha la imagen.
3 Haz clic sobre la opcin C#rir. Se abrir una nueva ventana.
4 En TipoF, elige Todos los arc8i+os.
175
Selecciona el archivo gatos.8t!, que se encuentra en la carpeta ani!ales, y pulsa sobre el botn
Cceptar.
" Detrs de la etiqueta ;8r< aade el siguiente cdigo para aadir una lnea en blanco, definir la tabla,
empezar la definicin de la primera fila y primera columna de la tabla. Hacemos la tabla invisible
(#order?"0") y que ocupe todo los ancho de la ventana (/idt8?"<&&E"), la primera columna ocupar
el 70% de la ventana (/idt8?"H&E") :
;#r<
;ta#le /idt8?"<&&E" #order?"0"<
;tr<
;td /idt8?"H&E"<
$ Detrs de la ltima etiqueta ;>ul< aade el siguiente cdigo para cerrar la columna y empezar la
otra, ahora la segunda columna ocupar el 30% de la ventana (/idt8?"3&E"):
;>td<
;td /idt8?"3&E"<
% Detrs de la etiqueta ;i!g< aade el siguiente cdigo para cerrar la columna y cerrar la fila y la
tabla:
;>td<
;>tr<
;>ta#le<
' Guarda el archivo y cierra el bloc de notas.
1( Abre con tu navegador el archivo gatos.8t!, comprueba que ahora la imagen est a la derecha
del texto y si haces la ventana ms pequea, el ancho de las columnas cambia.
E-ercicio 2.
1 Abre el documento perros.8t!, de la carpeta originales>ani!ales del curso.
En el documento que has abierto vamos a crear la siguiente tabla:
DFERENCAS ENTRE EL PERRO Y EL HOMBRE
DFERENCAS
PERRO
HOMBRE
PEQUEO GRANDE
Duracin crecimiento 10 meses 18 a 24 meses 16 aos
Tiempo de gestacin 58 a 63 das 9 meses
Duracin de vida del pelo/cabello 1 ao 2 a 7 aos
Empezamos por definir la etiqueta de la tabla:
175
3 Escribe delante de la etiqueta ;>#od4<:
;ta#le /idt8?"'H'" #order?":" align?@center@ cellspacing?":" #ordercolor?"#&&&&&&" <
El atributo /idt8 nos permite definir la tabla de un tamao fijo para que ese tamao no cambie segn
el tamao de la ventana abierta.
Con el valor : del atributo #order hacemos que el borde externo de la tabla aparezca ms grueso.
El atributo align con el valor center nos permite indicar que la tabla estar centrada con respecto a la
ventana.
Con el valor : del atributo cellspacing hacemos que aparezca un hueco entre las celdas de la tabla.
El atributo #ordercolor nos permite definir el color del borde la tabla.
Para que no se nos olvide cerrar etiquetas es mejor aadir la etiqueta de cierre y despus entre la
dos etiquetas aadir las otras.
4 Escribe:
;>ta#le<
La tabla tiene seis filas (contamos el nmero mayor de filas) y el texto contenido en ellas est
centrado tanto en horizontal como en vertical:
Escribe seis veces:
;>tr<
Ya hemos definido las filas, ahora las vamos a rellenar con las columnas. Miramos cul es la fila con
mayor nmero de columnas, tiene cuatro columnas.
Rellenamos la primera fila, en esta fila aparece una sola columna por lo que hay que indicar que esta
se expande sobre cuatro columnas:
" Escribe despus de la primera etiqueta ;tr<:
;td colspan?"4"<DFERENCAS ENTRE EL PERRO Y EL HOMBRE;>td<
Vamos a rellenar ahora la segunda fila.
En esta fila la primera columna se expande sobre dos filas:
$ Escribe despus de la segunda etiqueta ;tr<:
;td ro/span?":"<DFERENCAS;>td<
La segunda columna se expande sobre dos columnas:
% Escribe a continuacin:
175
;td colspan?":"<PERRO;>td<
La tercera columna se expande sobre dos filas:
' Escribe a continuacin:
;td ro/span?":"<HOMBRE;>td<
Vamos a rellenar ahora la tercera fila.
En esta fila slo tenemos que definir dos columnas ya que la primera y la ltima estn incluidas en el
rowspan de la fila anterior.
1( Escribe despus de la tercera etiqueta ;tr<:
;td<PEQUEÑO;>td<
;td<GRANDE;>td<
Vamos a rellenar ahora la cuarta fila.
En esta fila tenemos que definir las cuatro columnas normales
11 Escribe despus de la cuarta etiqueta ;tr<:
;td<10 meses;>td<
;td<18 a 24 meses;>td<
;td<16 años;>td<
Vamos a rellenar ahora la quinta fila.
En esta fila tenemos que indicar que la segunda columna se expande sobre dos columnas.
;td<Tiempo de gestación;>td<
;td colspan?":"<58 a 63 días;>td<
;td<9 meses;>td<
Por ltimo rellenamos la sexta fila.
En esta fila tenemos que indicar tambin que la segunda columna se expande sobre dos columnas.
13 Escribe despus de la sexta etiqueta ;tr<:
;td<Duración de vida del pelo/cabello;>td<
175
;td colspan?":"<1 año;>td<
;td<2 a 7 años;>td<
Veamos el resultado.
14 Guarda los cambios y abre la pgina con tu navegador.
Ahora aadiremos los colores de fondo. Si quieres puedes ir observando los cambios segn los
vayas introduciendo, guardando sin cerrar el bloc de notas y cada vez actualizando la pgina en tu
navegador (como hiciste en el ejercicio paso a paso del tema 3).
1 Aade #ac5ground?"ima/enes8fondopa)as./if" dentro de la etiqueta ;ta#le<. De este modo, la
imagen fondopa)as./if pasar a ser la imagen de fondo de la tabla.
1" Aade #gcolor?"#669966" dentro de la primera etiqueta ;tr<. De este modo, la primera fila de la
tabla ser de color verde oscuro.
1$ Aade #gcolor?"#%%CC99" dentro de la segunda etiqueta ;tr<. De este modo, la segunda fila de
la tabla ser de color naranja.
1% Aade #gcolor?"#%%%%99" dentro de la tercera etiqueta ;tr<. De este modo, las celdas de esa fila,
que contienen el texto PEQUEO y GRANDE, sern de color amarillo.
Por ltimo cambiaremos las tres primeras filas para que el texto contenido en ellas tenga formato
de cabecera de columna.
1' Sustituye td por t8 en las lneas que se encuentran entre los tres primeros pares de etiquetas ;tr<
y ;>tr<. De este modo, las celdas de las tres primeras filas pasarn a ser ttulos de columna, por lo
que el texto aparecer centrado y en negrita.
2( Comprueba que obtienes una pgina como la que aparece si a6uJ.
175
E-ercicios del Te!a ". .rue#a e+aluati+a del Te!a ".
E-ercicios Unidad ". Tra#a-ar con ta#las
175
1 Abrir el documento donde.8t!, de la carpeta deportes.
2 Modificar la pgina para colocar la lista de centros en una tabla como esta:
3 Rectificar la tabla para que las celdas de la primera fila sean ttulos de columna.
Ejercicio 2: Deportes.
1 Abrir el documento instalaciones.8t!, de la carpeta deportes.
2 Modificar la tabla que aparece para dejarla as:
1 Abrir el documento productos.8t!, de la carpeta originales>=lores del curso.
175
3 Modificar la tabla para que la celda que contiene el texto " Y se combine con la celda que se
encuentra debajo de ella.
2 Aadir una tabla para que cada palabra y la imagen ocupen el ancho de la ventana y estn
equidistantes.
C4uda E-ercicios Unidad ". Tra#a-ar con ta#las
175
Cpartado 2 Tenemos que dejar dentro de una tabla texto que ya tenemos escrito, lo podemos hacer
de dos formas, o bien crear la tabla con sus filas y sus columnas y despus cortar y pegar el texto
entre las etiquetas <td> de la tabla o bien intercalar las etiquetas de la tabla dentro del texto ya
escrito. De cualquiera de las formas debemos definir una tabla de cuatro filas y cuatro columnas. El
cdigo deber quedar as:
;ta#le /idt8?"''&" #order?"4" align?"cen)er"<
;tr #gcolor?"#&&3333"<
;td<;=ont color?"#CC%%CC" siAe?"4"<$BMB!";>=ont<;>td<
;td<;=ont color?"#CC%%CC" siAe?"4"<CA..";>=ont<;>td<
;td<;=ont color?"#CC%%CC" siAe?"4"<BB.ACI;Bacu)e4$;>=ont<;>td<
;td<;=ont color?"#CC%%CC" siAe?"4"<!B@I$CIA;>=ont<;>td<
;>tr<
;tr #gcolor?"#CC%%CC"<
;td<;=ont siAe?"4"<A"B!-"S <;>=ont<;>td<
;td<;=ont siAe?"4"<C8Avenida M;>=ont<;>td<
;td<;=ont siAe?"4"<Aon Beni)o;>=ont<;>td<
;td<;=ont siAe?"4"<BadaFoL;>=ont<;>td<
;>tr<
;tr #gcolor?"#99CC99"<
;td<;=ont siAe?"4"<A"B!-"S :;>=ont<;>td<
;td<;=ont siAe?"4"<C8%ernando ';>=ont<;>td<
;td<;=ont siAe?"4"<Madrid;>=ont<;>td<
;td<;=ont siAe?"4"<Madrid;>=ont<;>td<
;>tr<
;td<;=ont siAe?"4"<A"B!-"S 3 ;>=ont<;>td<
175
;td<;=ont siAe?"4"<C8Aepor)iva 3<;>=ont<;>td<
;td<;=ont siAe?"4"<Silla;>=ont<;>td<
;td<;=ont siAe?"4"<@alencia;>=ont<;>td<
;>tr<
;>ta#le<
Cpartado 3 Buscar la primera lnea en la que aparezca ;tr<.
Cambiar td por t8 en todas las etiquetas que se encuentren entre el primer par de etiquetas ;tr< y
;>tr<.
Cpartado 2 Aadir a la segunda etiqueta ;td< de la segunda fila de la tabla el atributo ro/span para
que la columna se expanda sobre dos filas y quitar la segunda etiqueta ;td< de la tercera fila ya que
ahora esta tercera fila slo tiene una columna. El cdigo deber quedar as:
;td<;=ont siAe?"4"<A"!BBIC;>=ont<;>td<
;td ro/span?":"<;di+ align?"cen)er"<;=ont siAe?"4"<3 ;euro4;>=ont<;>di+<;>td<
;>tr<
;td<;=ont siAe?"4"<S-";>=ont<;>td<
;>tr<
E-ercicio 3F &lores
175
Cpartado 2 Hacemos lo mismo que en el ejercicio anterior, buscar la lnea en la que aparezca el
texto 6 ;euro4.
La lnea es ;td<;di+ align?@center@<;=ont siAe?"4"<6 ;euro4;>=ont<;>di+<;>td<
Cambiar ;td< por ;td ro/span?":"<, para que la celda ocupe dos filas.
Como estamos ocupando una celda de la fila de abajo, tendremos que eliminar la declaracin de la
celda corespondiente en la fila siguiente.
La fila siguiente quedar definida por el siguiente cdigo:
;tr<
;td<;=ont siAe?"4"<CaFa de /olosinas;>=ont<;>td<
;>tr<
E-ercicio 4F &lores
Cpartado 2 Para repartir nuestras opciones a lo ancho de la ventana lo mejor es colocar cada opcin
en una celda de una tabla. Tenemos que definir una tabla de una fila y cinco columnas y colocar cada
palabra en una columna. El cdigo deber quedar as:
;ta#le /idt8?"<&&E" #order?"&"<
;tr<
;td /idt8?":&E"<;i!g src?"ima/enes8lo/oIflores./if" alt?"flores" align?@a#s!iddle@ <;>td<
;td /idt8?":&E"<;a 8re=?"inicio.+)m"<I$ICIB;>a<;>td<
;td /idt8?":&E"<;a 8re=?"produc)os.+)m"<!BA5C-BS;>a<;>td<
;td /idt8?":&E"<;a 8re=?"pedidos.+)m"<"AIABS;>a<;>td<
;td /idt8?":&E"<B%"!-A;>td<
;>tr<
;>ta#le<
Con el atributo /idt8?"<&&E" de la etiqueta ;ta#le< hacemos que la tabla se expanda a lo ancho de
la ventana y con el valor "&" del atributo #order? hacemos que la tabla quede invisible.
Para que las columnas se repartan a lo ancho de la ventana les asignamos a cada una un ancho del
:&E.
.rue#a e+aluati+a de la unidad ". Ta#las
175
Haz clic en la respuesta que consideres correcta. Contesta todas las preguntas y haz clic
en el botn Resultados para ver la solucin.
1. Las celdas se otienen como resultado de la interseccin entre una 7ila 4 una columna.
a) Verdadero
b) Falso
2. +ara crear una tala ha4 %ue insertar las eti%uetas 2tale3 4 25tale3.
a) Verdadero
b) Falso
3. Es necesario insertar las eti%uetas 2td3 4 25td3 por cada una de las 7ilas de la tala.
a) Verdadero
b) Falso
$. El atriuto ordercolor tiene %ue especi7icarse mediante un n&mero hexadecimal.
a) Verdadero
b) Falso
'. El atriuto no1rap hace %ue el contenido de la celda no se a<uste de manera
autom!tica.
a) Verdadero.
b) Falso.
6. El atributo colspan sire para especi!icar el n"mero de !ilas por las #ue se e$tender% la celda.
a) Verdadero
b) Falso
&. A tra's del atributo bac(ground..
a) Se establece el grosor del borde de la tabla
b) Se establece una imagen de fondo
c) Ese atributo no existe para las tablas
-. Los atriutos...
a) )ienen s prioridad cuando son establecidos para una celda
175
b) )ienen s prioridad cuando son establecidos para una $ila copleta
c) &inguna de las dos anteriores opciones
/. La eti%ueta 2th3...
1) Hace que el te"to de la celda aparezca centrado y en negrita
2) Se utiliza para insertar reglas horizontales
10. El atriuto valign indica...
1) #a alineacin horizontal del contenido de la celda
2) #a alineacin vertical del contenido de la celda
HE,ULTCDN,
Unidad $. Marcos 0I1
175
En este tema vamos a +er qu son los !arcos, para qu se utilizan, y cmo insertarlos.
)on-unto de !arcos ;=ra!eset<
Los marcos o frames sirven para
distribuir mejor los datos de las
pginas, ya que permiten mantener
fijas algunas partes, como pueden
ser el logotipo y la barra de
navegacin, mientras que otras s
pueden cambiar. Adems de
mejorar la funcionalidad, pueden
mejorar tambin la apariencia.
Cada uno de los marcos de una
pgina, contiene un documento
HTML individual. Por ejemplo, en la
imagen de la derecha puedes ver
una pgina con dos marcos. El
marco izquierdo contiene el
documento !enu.8t! y el derecho
el documento perros.8t!. Para poder visualizar la pgina de este modo, hemos tenido que abrir en
el navegador el documento !arcos.8t!, que es el que en este caso contiene el grupo de marcos.
El trabajar con marcos puede resultar una tarea algo complicada, sobretodo al principio, por lo que
vemos solamente algunos conceptos bsicos y ejemplos sencillos.
Como hemos visto si queremos utilizar marcos debemos crear una pgina con la definicin del
conjunto de marcos (en el ejemplo anterior la pgina marcos.htm).
Los conjuntos de marcos se definen a travs de las etiquetas ;=ra!eset< y ;>=ra!eset<, que van despus de
la etiqueta ;8ead<. A travs de estas etiquetas se indica el nmero de marcos en que se dividir la ventana, cada
uno de los cuales ser una especie de subventana.
Cuando se insertan las etiquetas ;=ra!eset< y ;>=ra!eset< no hay que insertar las etiquetas ;#od4< y
;>#od4<, ya que el cuerpo del documento ser el cuerpo de las pginas que se carguen en cada uno de los
marcos del conjunto de marcos.
Los atributos que pueden especificarse sobre la etiqueta ;=ra!eset< son los siguientes:
Atributo Significado Posibles valores
175
cols
tamao de cada una de las
columnas en que se divide el
documento
un nmero (acompaado de % cuando se desee que
sea en porcentaje) por cada columna, separados por
comas.
rows
tamao de cada una de las
columnas en que se divide el
documento
un nmero (acompaado de % cuando se desee que
sea en porcentaje) por cada fila, separados por comas.
frameborder
aparece o no el borde de los
marcos
yes
no
framespacing separacin entre los marcos un nmero
border grosor del borde
sea en porcentaje
bordercolor color del borde nmero hexadecimal
Tambin es posible incluir asteriscos como valores para los atributos cols y ro/s. Este valor indica
que dicha fila o columna ocupar todo lo que quede de ventana o subventana. Cuando existan varias
columnas o filas con este valor, se repartirn de forma equitativa lo que quede de ventana.
Por ejemplo, si insertramos la siguiente lnea de cdigo:
;=ra!eset ro/s?"O" cols?"<4:,O,:'E"<...;>=ra!eset<
Como el atributo ro/s tiene el valor asterisco, solo habra una fila, que ocupara todo el alto de la
ventana. En este caso concreto no hara falta poner el atributo ro/s.
Como el atributo cols tiene tres valores, estaramos dividiendo el documento en tres columnas. La
primera columna sera de <4: pxeles de ancho, la tercer del :'E de la ventana, y la segunda
columna ocupara lo que quedar de ventana (el 75% de la ventana menos 142 pxeles).
Tambin es posible anidar marcos. Es decir, es posible dividir marcos en otros marcos.
Por ejemplo, si insertramos el siguiente cdigo:
;=ra!eset cols?"<4:,O"<
;=ra!eset ro/s?"M&,O"<...;>=ra!eset<
;=ra!eset cols?":'E,O,O"<...;>=ra!eset<
;>=ra!eset<
Estaramos dividiendo el documento en dos columnas. La primera sera de <4: pxeles, y la otra abarcara el
resto de la ventana.
Al mismo tiempo, la primera columna o subventana estara dividida en dos filas o subventanas horizontales, la
primera de ellas de M& pxeles.
La segunda columna o subventana de la ventana principal se dividira a su vez en tres columnas, la primera de
ellas del :'E de la subventana, y las otras dos se repartiran el resto a partes iguales (se repartiran el 75% de
la subventana).
175
Por ltimo debemos saber que entre las etiquetas ;=ra!eset< y ;>=ra!eset< slo se pueden encontrar la
etiquetas ;8ead< ;no=ra!e< ;=ra!eset< ;=ra!e< y sus correspondientes etiquetas de cierre.
Unidad $. Marcos 0II1
Marco ;=ra!e<
Ya hemos visto cmo dividir un documento en varias subventanas o marcos, pero no hemos visto
cmo hacer que se carguen las distintas pginas en cada uno de los marcos.
Para indicar qu documento se cargar en cada uno de los marcos habr que insertar la etiqueta
;=ra!e< por cada uno de los marcos de la ventana. Estas etiquetas estarn entre las etiquetas
;=ra!eset< y ;>=ra!eset<, y no necesitan etiqueta de cierre.
Es posible modificar los siguientes atributos de un marco:
=ra!e#order aparece o no el borde del marco
4es o 1
no o (
na!e nombre del marco cualquier valor
noresiAe
si aparece, el usuario no podr redimensionar el
tamao de este marco
no puede tomar valores
!argin/idt8
anchura del margen con respecto a los bordes
del marco
un nmero, acompaado de %
cuando se desee que sea en
porcentaje
!argin8eig8t
altura del margen con respecto a los bordes del
marco
un nmero, acompaado de %
cuando se desee que sea en
porcentaje
scrolling
se mostrar o no la barra de desplazamiento
cuando la pgina del marco no se pueda
visualizar completamente en l
4es
no
auto
src documento que se cargar en el marco ruta y nombre del documento
Por ejemplo, para crear el conjunto de marcos de la pgina que aparece si pulsas a6uJ7
175
tendramos que escribir:
;=ra!eset cols?"<'&,O" =ra!e#order?@4es@ =ra!espacing?"3" #order?"3"
#ordercolor?"#%%99&&"<
;=ra!e src?"iL2uierdo.+)m" na!e?"marcoiL2uierdo" =ra!e#order?@no@ scrolling?@no@ noresiAe<
;=ra!e src?"derec+o.+)m" na!e?"marcoderec+o" =ra!e#order?@no@ scrolling?@auto@<
;>=ra!eset<
Y para crear el conjunto de marcos de la pgina que aparece si pulsas a6uJ7
Tendramos que escribir:
;=ra!eset ro/s?"9&,O" =ra!espacing?"3" =ra!e#order?@4es@ #order?"3"
;=ra!e src?"superior.+)m" na!e?"marcosuperior" =ra!e#order?@4es@ scrolling?@:N@ noresiAe<
;=ra!eset cols?"<'&,O" =ra!espacing?"3" =ra!e#order?@4es@ #order?"3"
;=ra!e src?"iL2uierdo.+)m" na!e?"marcoiL2uierdo" scrolling?@:N@ noresiAe<
;=ra!e src?"derec+o.+)m" na!e?"marcoderec+o"<
;>=ra!eset<
;>=ra!eset<
175
Esta ltima pgina est dividida en dos marcos horizontales (ro/s?"9&,O"), estando el inferior de
ellos dividido en dos marcos verticales (cols?"<'&,O").
,in !arcos ;no=ra!es<
Siempre que creamos una pgina queremos que pueda ser visitada por el mayor nmero de usuarios,
por lo que el hecho de que hayan usuarios cuyos navegadores no soportan los marcos puede resultar
un problema.
Las etiquetas ;no=ra!es< y ;>no=ra!es< se utilizan para que su contenido sea visualizado en aquellos
navegadores que no soportan los marcos.
Si un navegador no soporta los marcos, no cargar ningn documento en ningn marco, por lo que
tendremos que mostrar el cuerpo del documento actual de algn modo. Por ello, han de introducirse
las etiquetas ;#od4< y ;>#od4< entre las etiquetas ;no=ra!es< y ;>no=ra!es<.
;8t!l<
;8ead<
...
;>8ead<
;=ra!eset cols?"<'&,O"<
;=ra!e src?"iL2uierdo.+)m" na!e?"marcoiL2uierdo"<
;=ra!e src?"derec+o.+)m" na!e?"marcoderec+o"<
;>=ra!eset<
;no=ra!es<
;#od4<
"s)e documen)o )iene marcos * )u nave/ador no los sopor)a.
;>#od4<
;>no=ra!es<
;>8t!l<
Obtendramos una pgina con dos marcos, que en el caso de intentar ser visualizada en un
navegador que no soportase marcos, mostrara una pgina con el texto "s)e documen)o )iene
marcos * )u nave/ador no los sopor)a.
175
Una buena solucin para que el mayor nmero de usuarios pueda visitar nuestra pgina, es crear
nuevas pginas con el contenido de los documentos que deberan mostrarse en los marcos, pero que
permitan pasar de unos a otros dentro de la misma ventana.
De este modo, en el caso de que el navegador no soporte los marcos, podemos incluir un enlace a
una de estas pginas. Por ejemplo, si escribiramos el siguiente cdigo:
...
;no=ra!es<
;#od4<
"s)e documen)o )iene marcos * )u nave/ador no los sopor)a.
;a 8re=?"sinmarcos.+)m"<ulsa a2ui para visualiLar la p3/ina sin marcos.;>a<
;>#od4<
;>no=ra!es<
;>8t!l<
Cuando la pgina intentara ser visualizada en un navegador que no soportase los marcos, aparecera
el enlace .ulsa a6ui para +isualiAar la pgina sin !arcos. a una ventana sin marcos.
175
Unidad $. Marcos 0III1
Destino del enlace
Como recordars, en el tema de hipervnculos vimos los posibles destinos de los enlaces. Estos
destinos podan ser L#lan5, Lparent, Lsel=, y Ltop. Vamos a recordar para qu serva cada uno de
ellos, ya que ahora que sabes trabajar con marcos te sern ms fciles de entender.
L#lan5:
Abre el documento vinculado en una ventana nueva del navegador.
Lparent:
Abre el documento vinculado en la ventana del marco que contiene el vnculo o en el conjunto de
marcos padre.
Lsel=:
Es la opcin predeterminada. Abre el documento vinculado en el mismo marco o ventana que el
vnculo.
Ltop:
Abre el documento vinculado en la ventana completa del navegador, lo cual quiere decir que los
marcos de la ventana desaparecern al abrir el vnculo en ella.
Adems de estos destinos para los enlaces, tambin podrs utilizar los nombres de los distintos
marcos de la pgina. Por ejemplo, si tuvieramos un marco con el nombre marcoderec+o, podramos
insertar el enlace:
;a 8re=?"+))p788www.aulaclic.com" target?"marcoderec+o"<Aulaclic en el marco derec+o;>a<
Este enlace cargara la pgina de aulaclic en el marco llamado marcoderec+o.
Podemos aadir todos estos nuevos
destinos a cualquier elemento de la pgina
que contenga algn enlace, ya sea texto,
una imagen, un mapa de imagen, un
elemento Flash, etc.
Gracias a todo esto podremos hacer que
las barras de navegacin y el resto de
enlaces funcionen a nuestro antojo,
175
cargando unas u otras pginas en alguno de los marcos, en una ventana nueva, en toda la ventana,
etc.
Esta tarea puede resultar algo pesada, y al principio complicada, pero da muy buenos resultados
finales.
a paso )rear con-unto de !arcos.
E-ercicio paso a paso. )rear con-unto de !arcos
N#-eti+o.
.racticar las operaciones que hay que realizar para crear un con-unto de !arcos.
2 Abre el documento !arcos.8t!, de la carpeta originales>ani!ales del curso.
4 nserta una lnea en blanco debajo de la etiqueta ;>8ead<, y escribe el siguiente cdigo en ella:
;=ra!eset ro/s?"O" cols?"<4:,O" =ra!espacing?"&" =ra!e#order?@:N@ #order?"&"<
;=ra!e src?"menu.+)m" na!e?"marcoiL2uierdo" =ra!e#order?@no@ scrolling?@:N@ noresiAe<
;=ra!e src?"inicio.+)m" na!e?"marcoderec+o" =ra!e#order?@no@<
;>=ra!eset<
Con la primera lnea, estars creando dos marcos en la pgina. El primero ser de <4: pxeles, y el
otro ocupar el resto de la ventana del navegador. Los marcos se distribuirn en forma de columna
(cols?"<4:,O"). No habr espacio entre los marcos (=ra!espacing?"&"), ni se mostrarn sus bordes
(=ra!e#order?@:N@ #order?"&").
Con la segunda lnea, estars especificando las propiedades del primer marco. Este marco se llamar
marcoiL2uierdo, no se mostrarn sus bordes (=ra!e#order?@no@), y el usuario no podr modifciar
su tamao (noresiAe). En este marco se cargar el documento menu.+)m, y cuando ste no pueda
ser mostrado en su totalidad, no aparecern las barras de desplazamiento (scrolling?@:N@).
Con la tercera lnea, estars especificando las propiedades del segundo marco. Este marco se
llamar marcoderec+o, y no se mostrarn sus bordes (=ra!e#order?@no@). En este marco se
cargar el documento inicio.+)m.
nserta una lnea en blanco debajo de la etiqueta ;>=ra!eset<, y escribe el siguiente cdigo en ella:
;no=ra!es<
;#od4 #gcolor?"#99CC99"<
"s)a p;aacu)e4/ina )iene marcos, * )u nave/ador no los sopor)a
175
;>#od4<
;>no=ra!es<
Este cdigo ser el utilizado por los navegadores que no soportan los marcos. Cuando un navegador
no soporte los marcos, mostrar una pgina de color verde (;#od4 #gcolor?"#99CC99"<), con el
texto "s)a p3/ina )iene marcos, * )u nave/ador no los sopor)a.
" Haz clic sobre el men Crc8i+o.
$ Haz clic sobre la opcin Guardar.
% Abre el documento !arcos.8t!, que acabas de guardar, en un navegador, y comprueba que
175
Ejercicios del Tema 7. Prueba evaluativa del Tema 7.
E-ercicios Unidad $. )on=igurar !arcos
1 Abrir el documento !arcos.8t!, de la carpeta originales>deportes del curso.
3 Modificar el conjunto de marcos para que se muestre un borde de 2 pxeles de color M))&&''.
1 Crear el documento !arcos.8t! en la carpeta Mis docu!entos>e-erciciosL8t!l>=lores. Esta
pgina contendr un conjunto de marcos para que en la parte superior de la ventana se visualice la
pgina !enu.8t! y en el resto de la ventana se visualice la pgina inicio.8t!. El marco superior
tendr un alto de 1(( pxeles.
175
C4uda E-ercicios Unidad $. )on=igurar !arcos
Cpartado 3 Buscar la lnea en la que aparezca ;=ra!eset<.
Cambiar =ra!e#order?@no@ por =ra!e#order?@4es@.
Aadir #order?":" y #ordercolor?"#CC%%99" dentro de esa etiqueta ;=ra!eset<.
Abrir el documento !arcos.8t! en un navegador, y comprobar que aparece una lnea vertical de
color verde que divide la pgina en dos marcos.
Si en lugar de eso te aparece el texto Esta pgina tiene !arcos7 4 tu na+egador no los soporta,
sera conveniente que probaras con otro navegador diferente, que s soportara los marcos.
E-ercicio 2F &lores
Cpartado 1 Abrir en el bloc de notas un documento en blanco y escribir el siguiente cdigo:
;8t!l<
;8ead<
;title<Marcos;>title<
;>8ead<
;=ra!eset ro/s?"<&&,O" cols?"O" =ra!espacing?"&" =ra!e#order?@no@ #order?"&"<
;=ra!e src?"menu.+)m" na!e?"marcopadre" =ra!e#order?@no@ scrolling?@no@ noresiAe
id?"marcopadre"<
;=ra!e src?"inicio.+)m" na!e?"marcoinferior" =ra!e#order?@no@ scrolling?@auto@
id?"marcoinferior"<
;>=ra!eset<
;no=ra!es<
;#od4<
"s)a p;aacu)e4/ina )iene marcos, * )u nave/ador no los sopor)a
;>#od4<
;>no=ra!es<
;>8t!l<
Guardar el documento en la carpeta Mis docu!entos>e-erciciosL8t!l>=lores con el nombre
marcos.htm
175
.rue#a e+aluati+a de la unidad $. Marcos
1. Los marcos o 7rames sirven para distriuir me<or los datos de las p!ginas.
a) Verdadero
b) Falso
2. Los marcos no permiten me<orar la 7uncionalidad ni la apariencia de las p!ginas.
a) Verdadero
b) Falso
3. #ada uno de los marcos de una p!gina contiene un documento HTML individual.
a) Verdadero
b) Falso
$. Los con<untos de marcos se insertan a travs de las eti%uetas 27rameset3 4
257rameset3.
a) Verdadero
b) Falso
'. Las eti%uetas 2od43 4 25od43 tienen %ue ir entre las eti%uetas 2no7rames3 4
25no7rames3.
a) Verdadero.
b) Falso.
6. Todos los naegadores soportan los marcos.
a) Verdadero
b) Falso
&. Los nombres de los marcos...
a) Pueden utilizarse como destinos de los enlaces
b) Se establecen automticamente en el navegador
175
c) Se especifican a travs del atributo src
). El atributo noresi*e...
a) Se utiliza para insertar un nombre para el marco
b) Impide que el usuario modifique el tamao del marco
c) !ualquiera de las dos anteriores opciones
/. La eti%ueta 27rame3...
1) Se utiliza para indicar qu0 docuento se cargar en el arco
2) Se utiliza para indicar si aparecer la barra de desplazaiento para ese arco
10. +ara cada uno de los marcos ...
1) %uede indicarse si aparecern o no las barras de desplazaiento cuando el docuento del
arco no pueda visualizarse copletaente
2) %uede indicarse un color de borde di$erente
HE,ULTCDN,
175
Unidad %. &or!ularios 0I1
En este tema vamos a +er qu son los =or!ularios, para qu se utilizan, y qu elementos pueden
contener.
&or!ulario ;=or!<
Un formulario es un elemento que permite recoger datos introducidos por el usuario.
Los formularios se utilizan para conocer las
opiniones, dudas, y otra serie de datos sobre
los usuarios, para introducir pedidos a travs
de la red, tienen multitud de aplicaciones.
Un formulario est formado, entre otras
cosas, por etiquetas, campos de texto,
mens desplegables, y botones.
Es muy recomendable utilizar tablas para
organizar los elementos de los formularios.
Utilizando tablas se consigue una mejor
distribucin de los elementos del formulario,
lo que facilita su comprensin y mejora su
apariencia.
Los formularios se insertan a travs de las etiquetas ;=or!< y ;>=or!<. Entre dichas etiquetas habr
que insertar los diferentes objetos que formarn el formulario. la etiqueta ;=or!< tiene los siguientes
atributos:
El atributo action indica una direccin de correo electrnico a la que mandar el formulario, o la
direccin del programa que se encargar de procesar el contenido del formulario.
El atributo enct4pe indica el modo en que ser cifrada la informacin para su envo. Por defecto tiene
el valor application>xK///K=or!Kurlencoded.
El atributo !et8od indica el metodo mediante el que se transferirn las variables del formulario. Su
valor puede ser get o post.
El valor get se utiliza cuando no se van a producir cambios en ningn documento o programa que no
sea el navegador del usuario que pretende mandar el formulario, como ocurre cuando se realizan
consultas sobre una base de datos.
El valor post se utiliza cuando s se van a producir cambios, como ocurre cuando el usuario manda
datos que deben ser almacenados en una base de datos.
Se recomienda utilizar el valor post.
Por ejemplo, podramos insertar un formulario escribiendo el siguiente cdigo:
;=or! action?"mail)o7formulariosJaulaclic.com" !et8od?@post@ enct4pe?")e9)8plain" <
175
...
;>=or!<
A continuacin veamos los distintos elementos que se pueden incluir en un formulario.
Rreas de texto ;textarea<
Las reas de texto permiten a los usuarios insertar varias lneas de texto. Por ello, suelen utilizarse
para que incluyan comentarios.
Para insertar un rea de texto es necesario incluir las etiquetas ;textarea< y ;>textarea< entre las
etiquetas ;=or!< y ;>=or!< del formulario.
Para que el rea de texto tenga algn +alor inicial, habr que insertarlo entre las etiquetas ;textarea<
y ;>textarea<.
El atributo na!e indica el nombre del rea de texto. Es necesario dar nombres diferentes a cada uno
de los elementos de un formulario, para poder identificarlos a la hora de procesarlos.
El atributo ro/s indica el nmero de lneas que podrn ser visualizadas en el rea de texto por lo que
determina al alto del rea de texto.
El atributo cols indica el nmero de caracteres por lnea que podrn ser visualizados en el rea de
texto por lo que determina al ancho del rea de texto.
Gracias a las barras de desplazamiento, es posible insertar ms lneas de las especificadas en el
atributo ro/s, y ms caracteres por lnea de los especificados en el atributo cols.
Por ejemplo, para insertar el rea de texto:
Habra que escribir:
;textarea na!e?"eFemploarea" cols?"3&" ro/s?"3"<"scri,e el )e9)o 2ue 2uieras;>textarea<
175
Unidad %. &or!ularios 0II1
Ele!entos de entrada ;input<
Para insertar un elemento de entrada es necesario incluir la etiqueta ;input< entre las etiquetas
;=or!< y ;>=or!< del formulario.
El atributo na!e indica el nombre que se desea dar al elemento de entrada, mediante el cual ser
evaluado, y el atributo t4pe indica el tipo de elemento de entrada.
Vamos a ver los diferentes tipos de elementos de entrada, y el resto de atributos que pueden definirse
para cada uno de ellos.
)a!po de textoF
Para insertar un campo de texto, el atributo t4pe debe tener el valor text.
El atributo siAe indica el nmero de caracteres que podrn ser visualizados en el campo de texto,
determina el ancho de la caja.
El atributo !axleng8t indica el nmero de caracteres que podrn ser insertados en el campo de texto.
El atributo +alue indica el valor inicial del campo de texto.
Por ejemplo, para insertar el campo de texto:
Campo de texto
Habra que escribir:
;input na!e?"campo" t4pe?@text@ +alue?"Campo de )e9)o" siAe?":&" !axlengt8?"<'"<
)a!po de contraseQaF
Para insertar un campo de contrasea, el atributo t4pe debe tener el valor pass/ord.
El resto de atributos son los mismos que para un campo de texto normal. La nica diferencia es que
todas las letras escritas en el campo de contrasea sern visualizadas como asteriscos.
Por ejemplo, para insertar el campo de contrasea:
*********
Habra que escribir:
;input na!e?"con)ra" t4pe?@pass/ord@ +alue?"con)rasePa" siAe?":&" !axlengt8?"<'"<
175
BotnF
Para insertar un botn, el atributo t4pe debe tener el valor su#!it, restore o #utton.
Si el valor es su#!it, al pulsar sobre el botn se enviar el formulario.
Si el valor es restore, al pulsar sobre el botn se restablecer el formulario, borrndose todos los
campos del formulario que hayan sido modificados y adquiriendo su valor inicial.
Si el valor es #utton, al pulsar sobre el botn no se realizar ninguna accin.
El atributo +alue indica el texto que mostrar el botn.
Por ejemplo, para insertar el botn:
Habra que escribir.
;input na!e?",o)on" t4pe?@su#!it@ +alue?""nviar"<
)asilla de +eri=icacinF
Para insertar una casilla de verificacin, el atributo t4pe debe tener el valor c8ec5#ox.
El atributo +alue indica el valor asociado a la casilla de verificacin. Es necesario poner este atributo,
aunque el usuario no pueda ver su valor. Es el valor a enviar.
La aparicin del atributo c8ec5ed indica que la casilla aparecer activada inicialmente. Este atributo
no toma valores.
Por ejemplo, para insertar la casilla:
Habra que escribir:
;input na!e?"casilla" t4pe?@c8ec5#ox@ +alue?"acep)o" c8ec5ed<
Botn de opcinF
Para insertar un botn de opcin, el atributo t4pe debe tener el valor radio.
El atributo +alue indica el valor asociado al botn de opcin. Es necesario poner este atributo, aunque
el usuario no pueda ver su valor. Es el valor a enviar.
La aparicin del atributo c8ec5ed indica que el botn aparecer activado inicialmente. Este atributo no
toma valores.
175
$NV%&'
Los botones de opcin se utilizan cuando se desea que una variable del formulario pueda tomar un
solo valor de entre varios posibles. Para ello, se insertan varios botones de opcin con el mismo
nombre (que indica la variable) y con distintos valores. Solamente uno de estos botones podr estar
activado, el que est activado cuando se envia el formulario, su valor ser el que tendr la variable.
Por ejemplo, para insertar los botones de opcin:
Habra que escribir:
;input na!e?"prefiere" t4pe?@radio@ +alue?"es)udiar" c8ec5ed<
;input na!e?"prefiere" t4pe?@radio@ +alue?")ra,aFar"<
Cuando se enve el formulario, si el primer botn est activado la variable prefiere ser igual a
es)udiar, si es el segundo el activado, la variable prefiere valdr )ra,aFar. Observa que lo que ponemos
como valor no aparece escrito en la pgina es un datos interno.
;input na!e?"prefiere" t4pe?@radio@ +alue?"es)udiar" c8ec5ed<
;input na!e?"prefiere" t4pe?@radio@ +alue?")ra,aFar"<
Cuando se enve el formulario, si el primer botn est activado la variable prefiere ser igual a
es)udiar, si es el segundo el activado, la variable prefiere valdr )ra,aFar. Observa que lo que ponemos
como valor no aparece escrito en la pgina es un datos interno.
Existen otros tipos como el tipo 8idden que sirve para definir un campo oculto, campo que no ve el
usuario, en este caso habra que incluir el atributo +alue para que el formulario pase ese valor al
programa que recoge los datos del formulario.
Para que el usuario envi un fichero suyo a travs del formulario tenemos el tipo =ile, este tipo hay
que utilizarlo con mucho cuidado ya que si permitimos que cualquier internauta nos envi cualquier
tipo de fichero nos podramos encontrar con sorpresas no siempre agradables.
175
Unidad %. &or!ularios 0III1
)a!pos de seleccin ;select< ...
Los campos de seleccin se utilizan para insertar mens y listas desplegables.
Para insertar uno de estos mens o listas es necesario insertar las etiquetas ;select< y ;>select< en
un formulario.
El atributo na!e indica el nombre del men o lista ser el nombre de la variable que contendr el
valor seleccionado.
El atributo siAe indica el nmero de elementos de la lista que pueden ser visualizados al mismo
tiempo, determina el alto de la lista.
La aparicin del atributo !ultiple indica que el usuario podr seleccionar varios elementos de la lista
al mismo tiempo, ayudndose de la tecla )trl. Este atributo no toma valores.
La aparicin del atributo disa#led indica que la lista estar desactivada, por lo que el usuario no podr
seleccionar sus elementos. Este atributo tampoco toma valores.
Cada uno de los elementos de la lista ha de insertarse entre las etiquetas ;option< y ;>option<.
El atributo +alue indica el valor a enviar si se selecciona el elemento. Si no se especifica este atributo,
se enviar el texto de la opcin, que se encuentra entre las etiquetas ;option< y ;>option<.
La aparicin del atributo selected indica que el elemento aparecer seleccionado. Este atributo no
toma valores.
Por ejemplo, para insertar el men:
Habra que escribir:
;select na!e?"masco)a"<
;option selected<KKK "li/e animal KKK;>option<
;option<erro;>option<
;option<#a)o;>option<
;>select<
175
Y para insertar la lista:
Habra que escribir:
;select na!e?"animal" siAe?"3" !ultiple<
;option selected<KKK"li/e animalesKKK;>option<
;option +alue?"ave"<.oro;>option<
;option<eL;>option<
;>select<
175
a paso Insertar ele!entos de =or!ulario.
E-ercicio paso a paso. Insertar o#-etos de =or!ulario
N#-eti+o.
.racticar las operaciones que hay que realizar para insertar algunos o#-etos de =or!ulario.
2 Abre el documento consultas.8t!, de la carpeta originales>ani!ales del curso.
4 Busca la lnea ;td<Campo de seleccion;>td<, y borra el texto Campo de seleccion. En su
lugar, escribe el siguiente cdigo:
;select na!e?"animal"<
;option selected<KKK "li/e opci;oacu)e4n KKK;>option<
;option<B)ros;>option<
;>select<
Con este cdigo estars insertando un men, llamado animal, que tendr cuatro opciones (KKK "li/e
opci1n KKK, erro, #a)o, B)ros).
La opcin seleccionada inicialmente ser la primera (selected).
nserta una lnea en blanco debajo de la lnea ;input na!e?"res)a,lecer" t4pe?@reset@
+alue?"!es)a,lecer"<, y escribe el siguiente cdigo en ella:
;input na!e?"enviar" t4pe?@su#!it@ +alue?""nviar"<
Con este cdigo, estars insertando un botn para enviar el formulario (t4pe?@su#!it@), cuyo
nombre ser enviar, y que tendr el texto "nviar.
$ Haz clic sobre la opcin Guardar.
175
% Abre el documento consultas.8t!, que acabas de guardar, en un navegador, y comprueba que
obtienes una pgina como la que aparece si pulsas aqu.
175
Ejercicios del Tema 8. Prueba evaluativa del Tema 8.
E-ercicios Unidad %. Insertar ele!entos de =or!ulario
1 Abrir el documento reser+as.8t!, de la carpeta originales>deportes del curso.
En dicho documento hay dos botones de opcin.
3 Modificar el primer botn de opcin para que tenga el valor si, y est activado inicialmente.
4 Modificar el segundo botn de opcin para que tenga el valor no.
Guardar los cambios y comprobar el funcionamiento en un navegador.
1 Abrir el documento pedidos.8t!, de la carpeta originales>=lores del curso.
3 Aadir el formulario que aparece a continuacin. El elemento de entrada llamado cuenta debe ser
un campo de contrasea, que permita escribir y mostrar a la vez 2( caracteres.
175
C4uda E-ercicios Unidad %. Insertar ele!entos de =or!ulario
Cpartado 3 Buscar la primera lnea en la que aparezca ;input t4pe?@radio@.
Aadir +alue?"si" y c8ec5ed dentro de esa etiqueta ;input<.
Cpartado 4 Buscar la segunda lnea en la que aparezca ;input t4pe?@radio@.
Aadir +alue?"no".
Cpartado Hacer clic sobre la opcin Guardar, del men Crc8i+o.
Abrir el documento reser+as.8t! en un navegador, y comprobar que el primer botn de opcin
aparece activado inicialmente.
E-ercicio 2F &lores
Cpartado 3 Aadir delante de la etiqueta ;>#od4< el siguiente cdigo:
;=or! action?"" !et8od?@post@<
;ta#le /idt8?"6&&" #order?"&" align?@center@ cellspacing?":"<
;tr<
;td /idt8?"<&&"<;di+ align?@rig8t@<;=ont color?"#99&&33" siAe?"4"<$om,re7;>=ont<;>di+<;>td<
;td<;input na!e?"nom,re" t4pe?@text@ siAe?"'&" !axlengt8?"'&"<
;=ont color?"#99&&33" siAe?"4"< A$I7;>=ont<
;input na!e?"dni" t4pe?@pass/ord@ siAe?"9" !axlengt8?"9"<;>td<
;>tr<
;tr<
;td<;di+ align?@rig8t@<;=ont color?"#99&&33" siAe?"4"<$;ordm4 de cuen)a7;>=ont<;>di+<;>td<
;td<;input na!e?"cuen)a" t4pe?@pass/ord@ siAe?":&" !axlengt8?":&"<
;=ont color?"#99&&33" siAe?"4"<$;ordm4 de )el;eacu)e4fono7 ;>=ont<
;input na!e?")elefono" t4pe?@text@ siAe?"9" !axlengt8?"9"<;>td<
;>tr<
;tr<
;td<;di+ align?@rig8t@<;=ont color?"#99&&33" siAe?"4"<Airecci;oacu)e4n7;>=ont<;>di+<;>td<
;td<;input na!e?"direccion" t4pe?@text@ siAe?"'&" !axlengt8?"'&"<;>td<
175
;>tr<
;tr<
;td +align?@top@<;di+ align?@rig8t@<;=ont color?"#99&&33" siAe?"4"< Aes)ina)ario7;>=ont<;>di+<;>td<
;td +align?@top@<;textarea na!e?"des)ina)ario" cols?"6&" ro/s?":" <;>textarea<;>td<
;>tr<
;tr<
;td 8eig8t?"'6" +align?@top@<;di+ align?@rig8t@<;=ont color?"#99&&33"
siAe?"4"<edido7;>=ont<;>di+<;>td<
;td +align?@top@<;textarea na!e?"pedido" cols?"6&" ro/s?":" <;>textarea<;>td<
;>tr<
;>ta#le<
;di+ align?@center@<
;input na!e?"res)a,lecer" t4pe?@reset@ +alue?"!es)a,lecer"<
;input na!e?"enviar" t4pe?@su#!it@ +alue?""nviar"<
;>di+<
;>=or!<
Abrir el documento pedidos.8t! en un navegador, y comprobar que al escribir en el campo que
aparece junto al texto :a de cuenta, el texto se muestra codificado con asteriscos.
175
.rue#a e+aluati+a de la unidad %. &or!ularios
1. Los 7ormularios no pueden utili,arse para conocer las opiniones; dudas; 4 otra serie de
datos sore los usuarios.
a) Verdadero
b) Falso
2. Ao es recomendale utili,ar talas para organi,ar los elementos de los 7ormularios.
a) Verdadero
b) Falso
3. El atriuto method indica el metodo mediante el %ue se trans7erir!n las variales del
7ormulario.
a) Verdadero
b) Falso
$. El valor de method puede ser get o post.
a) Verdadero
b) Falso
'. Las !reas de texto permiten a los usuarios insertar una sola l6nea de texto.
a) Verdadero.
b) Falso.
6. El atributo cols indica el n"mero de caracteres por l+nea #ue podr%n ser isuali*ados.
a) Verdadero
b) Falso
&. El atributo t,pe...
a) Indica el tamao del elemento de entrada
b) Indica el nombre del elemento de entrada
175
c) Indica el tipo de elemento de entrada
). Si se insertan arios botones de opci-n con el mismo nombre ...
a) "odos tendrn el mismo valor
b) Solamente uno de estos botones podr estar activado
c) #o es posible que $a%an botones de opci&n con el mismo nombre
.. La aparici-n del atributo disabled indica ...
') (ue el usuario podr seleccionar varios elementos de la lista al mismo tiempo
)) (ue la lista estar desactivada
!) !ualquiera de las dos primeras opciones
*) #inguna de las opciones anteriores
/0. Las eti#uetas 1option2 , 13option2...
') Sirven para insertar cada uno de los elementos de una lista
)) Permiten insertar botones de opci&n
!) !ualquiera de las dos primeras opciones
*) #inguna de las opciones anteriores
RESULTADOS
175
Unidad '. Multi!edia 0I1
En este tema vamos a +er cmo insertar ele!entos !ulti!edia.
,onido de =ondo ;#gsound<
Aadir una msica de fondo a una pgina tiene pros y contras, si el sonido es apropiado al contenido
de la pgina, puede hacerla ms atractiva en contrapartida la descarga del archivo de sonido supone
una carga que puede ralentizar la visualizacin de la pgina y adems muchos usuarios suelen estar
escuchando otro tipo de msica cuando navega en nternet, por lo que el escuchar tambin sonido en
cada pgina que visita puede resultar algo molesto.
Los formatos de sonido ms habituales en nternet son el iC9, el M.3 y en algunas ocasiones el
MIDI, aunque existen otros formatos diferentes que tambin pueden utilizarse. Lo ideal es incluir
algn archivo de audio que no ocupe mucho espacio, y que no por ello sea de mala calidad.
El navegador Internet Explorer puede reconocer la etiqueta ;#gsound<, que se utiliza para incluir
sonido de fondo. Esta nueva etiqueta no necesita etiqueta de cierre.
A travs del atributo src hay que especificar la ruta y el nombre del archivo de audio.
Con el atributo loop indicamos el nmero de veces que se tienen que reproducir el sonido. Si se
desea que el archivo de audio se reproduzca continuamente en un bucle, habr que asignarle el valor
in=inite o K1.
Por ejemplo, podramos insertar un sonido de fondo escribiendo el siguiente cdigo:
;#gsound src?"varios8audio.mid" loop?@K1@<
La etiqueta ;#gsound< puede situarse en cualquier parte del documento, pero es preferible que la
situemos siempre en un sitio fcil de encontrar, por si deseamos hacerle alguna modificacin.
Podramos, por ejemplo, incluirla justo debajo de la etiqueta ;#od4<.
9Jdeo 4 audio ;e!#ed<
En ocasiones puede interesar incluir algn vdeo en una pgina web, pero hay que tener en cuenta
que los vdeos suelen ocupar mucho espacio en disco, y por lo tanto, precisan de mucho tiempo para
descargarse.
Los formatos de vdeo que suelen utilizarse en nternet son el C9I, el M.EG y el MN9.
La etiqueta ;e!#ed< es la que se utiliza para insertar archivos de vdeo. Puede incluirse la etiqueta
de cierre, pero en realidad no es necesaria, ya que entre las etiquetas ;e!#ed< y ;>e!#ed< no hay
que insertar nada.
A travs del atributo src hay que especificar la ruta y el nombre del archivo de vdeo.
175
Los videos insertados a travs de esta etiqueta se reproducen automticamente al cargarse la
pgina, y se reproducen solamente una vez. Esto puede cambiarse a travs de los atributos
autostart y loop.
El atributo autostart indica si el archivo se reproducir automticamente al cargarse la pgina, y
puede tomar los valores true o =alse.
El atributo loop indica si el archivo se reproducir continuamente en un bucle, y tambin puede tomar
los valores true o =alse.
Los atributos /idt8 (anchura) y 8eig8t (altura)
sirven para especificar el tamao de la consola de
control de vdeo. Estos atributos pueden tomar
como valor un nmero, que indica el tamao en
pxeles. Si no se especifican estos atributos, la
consola de control de vdeo se mostrar con el
tamao ms adecuado al tamao del vdeo.
A la derecha tienes un ejemplo de un archivo de
video, para el que se muestran los controles de
video. Puedes reproducirlo pulsando sobre los
controles.
Para insertar el vdeo anterior, se podra escribir:
;e!#ed src?"varios8co)orra.avi" autostart?@=alse@ loop?@true@<
Existen algunos navegadores que no reconocen la etiqueta ;#gsound<, por lo que no es posible
utilizar esta etiqueta para incluir un sonido de fondo. En su lugar, se utiliza la etiqueta ;e!#ed<, que
funciona del mismo modo para los archivos de audio y de vdeo.
No hay que olvidar que para los archivos de audio tambin se
mostrarn los controles de reproduccin.
A la derecha tienes un ejemplo de un archivo de sonido, para el
que se muestran los controles de audio. Si lo deseas, puedes
reproducirlo pulsando sobre los controles.
Para insertar el archivo de audio anterior, se podra escribir:
;e!#ed src?"varios8audio.mid" autostart?@=alse@
loop?@true@<
Si no se desea que se muestren los controles de un archivo de audio, porque va a ser utilizado como
sonido de fondo, puede hacerse que los atributos /idt8 (anchura) y 8eig8t (altura) valgan cero.
Tambin puede utilizarse el atributo 8idden, con los valores true o =alse. Cuando su valor estrue, se
ocultan los controles de reproduccin.
Por ejemplo, para insertar sonido de fondo se podra escribir:
;e!#ed src?"varios8audio.mid" autostart?@true@ loop?@true@ 8idden?@true@ <
175
O tambin:
;e!#ed src?"varios8audio.mid" autostart?@true@ loop?@true@ /idt8?"&" 8eig8t?"&" <
Unidad '. Multi!edia 0II1
.elJculas &las8 ;o#-ect< ...
Las pelJculas &las8 son animaciones con la extensin ,i&. Suelen incluirse en las pginas iniciales
de los sitios web, y se utilizan a modo de presentacin hacia los usuarios. Tambin pueden utilizarse
como botones de las barras de navegacin.
Estas pelculas pueden crearse mediante el programa &las8 de Macro!edia, y necesitan que el
usuario tenga instalado el plug-in para poder ser visualizadas.
La etiqueta ;o#-ect< puede utilizarse para insertar diferentes objetos dentro de la pgina, como
pueden ser archivos de audio, archivos de vdeo, imgenes, etc.
El objetivo del uso de la etiqueta ;o#-ect< es la de que no se produzcan incompatibilidades por las
distintas etiquetas soportadas por unos u otros navegadores.
Las animaciones Flash se insertan del mismo modo que los archivos de audio y de vdeo, a travs de
la etiqueta ;e!#ed<, pero debido a que tiene ms posibilidades de que se produzcan
incompatibilidades entre los distintos navegadores, necesita tambin de la etiqueta ;o#-ect<.
Como el uso de la etiqueta ;o#-ect< puede resultar bastante
complicado, vamos a ver solamente un caso concreto para la
insercin de un archivo SWF.
Por ejemplo, vamos a analizar el cdigo que habra que escribir para
insertar la animacin Flash de la derecha.
El cdigo a escribir sera el siguiente:
;o#-ect classid?"clsid7A:HCAB6"KA"6AK<<cfK96BMK444''3'4&&&&"
code#ase?"+))p788download.macromedia.com8pu,8s+oc0wave8ca,s8flas+8swflas+.ca,#versi
on66,&,:9,&Q /idt8??":&& 8eig8t?"<&&"<
;para! na!e?@!o+ie@ +alue?"/raficos8pelicula.swf"<
;para! na!e?@6ualit4@ +alue?@8ig8@<
;e!#ed src?"/raficos8pelicula.swf" /idt8?":&&" 8eig8t?"<&&" 6ualit4?@8ig8@
pluginspage?"+))p788www.macromedia.com8/o8/e)flas+pla*er"
t4pe?"applica)ion89Ks+oc0waveKflas+"<;>e!#ed<
;>o#-ect<
175
En primer lugar vamos a analizar la etiqueta ;e!#ed<. En ella aparecen tres atributos que no
conocamos.
A travs del atributo 6ualit4 se especifica la calidad con la que se reproducir la animacin Flash.
Puede valer 8ig8 (alta), autolo/ (baja automtica), o lo/ (baja). Si no se incluye este atributo, se
considera que la calidad ser automticamente alta.
A travs del atributo pluginspage se especifica la pgina desde la que se podr descargar el plug-in
necesario para reproducir la animacin Flash, para que si algn usuario no lo tiene an instalado en
su ordenador pueda descargarlo.
A travs del atributo t4pe se especifica el tipo de fichero, para que el navegador pueda saber qu tipo
de programa necesita ejecutar para reproducir la animacin.
Ahora vamos a analizar la etiqueta ;o#-ect<.
A travs del atributo classid se identifica al objeto. Cuando el objeto es una animacin Flash, el
atributo classid debe valer clsid7A:HCAB6"KA"6AK<<cfK96BMK444''3'4&&&&.
A travs del atributo code#ase se especifica la direccin en la que se encuentran los componentes
externos necesarios para reproducir la animacin.
Los atributos /idt8 y 8eig8t se utilizan del mismo modo, y deben tener el mismo valor, que en la
etiqueta ;e!#ed<.
Por ltimo, vamos a analizar la etiqueta ;para!<. Esta etiqueta se utiliza para especificar los valores
necesarios para la inicializacin de un objeto.
La etiqueta ;para!< no necesita etiqueta de cierre, y ha de contener los atributos na!e y +alue. El
atributo na!e indica el nombre de la caracterstica que va a ser definida, y +alue indica su valor.
Por ejemplo, para indicar la ruta del archivo, que en la etiqueta ;e!#ed< aparece especificado por el
atributo src, es necesario incluir tambin una etiqueta ;para!<, en la que na!e tenga el valor
!o+ie.
Por eso aparece la lnea ;para! na!e?@!o+ie@ +alue?"/raficos8pelicula.swf"<.
Para indicar la calidad de reproduccin, que en la etiqueta ;e!#ed< aparece especificado por el
atributo 6ualit4, es necesario incluir tambin una etiqueta ;para!<, en la que na!e tenga el valor
6ualit4.
Por eso aparece la lnea ;para! na!e?@6ualit4@ +alue?@8ig8@<.
Las animaciones Flash se reproducen de forma automtica al cargarse la pgina, y su reproduccin
es continua.
Para hacer que una animacin no se reproduzca automticamente, habr que indicarlo mediante el
atributo pla4, que debe incluirse dentro de la etiqueta ;e!#ed<.
El atributo pla4 puede valer true o =alse. Para que la animacin no se reproduzca automticamente,
el valor de pla4 debe ser =alse.
Tambin habr que insertar la lnea ;para! na!e?@pla4@ +alue?@=alse@<.
175
Lo mismo ocurre para hacer que la reproduccin no sea continua. Habr que insertar el atributo loop
en la etiqueta ;e!#ed<. El atributo loop puede valer true o =alse. Para que la animacin no se
reproduzca continuamente, el valor de loop debe ser =alse. De este modo, solo se reproducir una
vez. Tambin habr que insertar la lnea ;para! na!e?@loop@ +alue?@=alse@<.
a paso Insertar sonido de =ondo 4 #otones &las8.
E-ercicio paso a paso. Insertar sonido de =ondo
N#-eti+o.
.racticar las operaciones que hay que realizar para insertar sonido de =ondo.
Primero aadiremos una msica de fondo a una pgina.
1 Abre el archivo !enu.8t!, que se encuentra en la carpeta ani!ales.
2 nserta una lnea en blanco debajo de la etiqueta ;#ase=ont<, y escribe el siguiente cdigo en ella:
;#gsound src?"varios8audioanimales.MIA" loop?@K1@<
Con este cdigo estars estableciendo el archivo audioanimales.MIA como sonido de fondo de la
pgina, que se reproducir continuamente en un bucle infinito (loop?@K1@).
obtienes una pgina como la que aparece si aqu. No olvides encender unos altavoces que estn
conectados a tu ordenador, para comprobar que el archivo de audio se reproduce correctamente.
175
Ahora vamos a sustituir las palabras NCO PERROS GATOS y CONSULTAS por botones Flash.
1 Abre otra vez el archivo !enu.8t!, que se encuentra en la carpeta ani!ales.
2 Sustituye la palabra NCO por el siguiente cdigo:
;o#-ect classid?@clsidFD2$)DB"EKCE"DK11c=K'"B%K44434((((@
code#ase?@8ttpF>>do/nload.!acro!edia.co!>pu#>s8oc5/a+e>ca#s>=las8>s/=las8.ca#M+ersi
on?"7(72'7(@ /idt8?"<&&" 8eig8t?":3"<
;para! na!e?@!o+ie@ +alue?",inicio.swf"<
;e!#ed src?",inicio.swf" /idt8?"<&&" 8eig8t?":3" 6ualit4?@8ig8@
pluginspage?@8ttpF>>///.!acro!edia.co!>go>get=las8pla4er@ t4pe?@application>xK
s8oc5/a+eK=las8@ <
;>e!#ed<
;>o#-ect<
Nota: se ha escrito en el color de los valores del usuario nicamente los valores que cambian al
insertar un botn Flash.
3 Sustituye la palabra PERROS por el siguiente cdigo:
code#ase?@8ttpF>>do/nload.!acro!edia.co!>pu#>s8oc5/a+e>ca#s>=las8>s/=las8.ca#M+ersion?"7(72'7(@
/idt8?"<&&" 8eig8t?":3"<
;para! na!e?@!o+ie@ +alue?",perros.swf"<
;e!#ed src?",perros.swf" /idt8?"<&&" 8eig8t?":3" 6ualit4?@8ig8@
s8oc5/a+eK=las8@ <
;>e!#ed<
;>o#-ect<
4 Sustituye la palabra GATOS por el siguiente cdigo:
/idt8?"<&&" 8eig8t?":3"<
;para! na!e?@!o+ie@ +alue?",/a)os.swf"<
;e!#ed src?",/a)os.swf" /idt8?"<&&" 8eig8t?":3" 6ualit4?@8ig8@
175
s8oc5/a+eK=las8@ #ase?"."<
;>e!#ed< ;>o#-ect<
Sustituye la palabra CONSULTAS por el siguiente cdigo:
/idt8?"<&&" 8eig8t?":3"<
;para! na!e?@!o+ie@ +alue?",consul)as.swf"<
;e!#ed src?",consul)as.swf" /idt8?"<&&" 8eig8t?":3" 6ualit4?@8ig8@
s8oc5/a+eK=las8@ #ase?"."<
;>e!#ed<
;>o#-ect<
" Haz clic sobre la opcin Guardar del men Crc8i+o.
$ Abre el documento !enu.8t!, que acabas de guardar, en un navegador, y comprueba que
obtienes una pgina como la que aparece si pulsas aqu.
175
E-ercicios del Te!a '. .rue#a e+aluati+a del Te!a '.
E-ercicios Unidad '. Insertar ele!entos !ulti!edia
1 Abrir el documento 6uienes.8t!, de la carpeta deportes.
2 Despus del prrafo Somos una cadena... insertar la animacin Flash deportes.s/= que se
encuentra en la carpeta i!agenes de la carpeta deportes, con calidad alta.
1 Abrir el documento !enu.8t!, de la carpeta deportes.
2 Sustituye las palabras QUENES SOMOS, DONDE ESTAMOS, NSTALACONES y RESERVAS
por los botones respectivos #6uienes.s/=, #donde.s/=, #instalaciones.s/=, #reser+as.s/= con
calidad alta, los botones tienen 116 y 32 pixeles de ancho y alto respectivamente. Los botones los
tenemos en la carpeta i!agenes de la carpeta deportes.
2 nsertar el archivo audio=lores.!id, que se encuentra dentro de la carpeta +arios, para que sea
sonido de fondo del documento, y se reproduzca automticamente una sola vez.
3 Sustituye las palabras NCO, PRODUCTOS y PEDDOS por los botones respectivos inicio.s/=,
productos.s/=, pedidos.s/= con calidad alta, los botones tienen 100 y 23 pixeles de ancho y alto
respectivamente y se encuentran en la carpeta imagenes.
Si no tienes muy claro las operaciones a realizar en los ejercicios anteriores, Aqu te lo explicamos.
175
C4uda E-ercicios Unidad '. Insertar ele!entos !ulti!edia
Cpartado 2 Despus del cierre del prrafo Somos una... aade el siguiente cdigo:
;#r<
;di+ align?"cen)er"<
/idt8?"34:" 8eig8t?"'H"<
;para! na!e?@!o+ie@ +alue?"ima/enes8depor)es.swf"<
;e!#ed src?"ima/enes8depor)es.swf" /idt8?"34:" 8eig8t?"'H" 6ualit4?@8ig8@
s8oc5/a+eK=las8@ <
;>e!#ed<
;>o#-ect<
;>di+<
;#r<
Abrir el documento 6uienes.8t! en un navegador, y comprobar que la animacin flash se reproduce
correctamente.
Cpartado 2 Sustituye la palabra QUENES SOMOS por el siguiente cdigo:
/idt8?"<<6" 8eig8t?"3:"<
;para! na!e?@BG)NLNH@ +alue?"#&&99CC"<
;para! na!e?@!o+ie@ +alue?"ima/enes8,2uienes.swf"<
;e!#ed src?"ima/enes8,2uienes.swf" /idt8?"<<6" 8eig8t?"3:" 6ualit4?@8ig8@
pluginspage?@8ttpF>>///.!acro!edia.co!>go>get=las8pla4er@t4pe?@application>xK
s8oc5/a+eK=las8@<
175
;>e!#ed<
;>o#-ect<
,ustitu4e la pala#ra DN:DE E,TCMN, por el siguiente cdigoF
/idt8?"<<6" 8eig8t?"3:"<
;para! na!e?@!o+ie@ +alue?"ima/enes8,donde.swf"<
;e!#ed src?"ima/enes8,donde.swf" /idt8?"<<6" 8eig8t?"3:" 6ualit4?@8ig8@
s8oc5/a+eK=las8@ <
;>e!#ed<
;>o#-ect<
,ustitu4e la pala#ra DN:DE E,TCMN, por el siguiente cdigoF
/idt8?"<<6" 8eig8t?"3:"<
;para! na!e?@!o+ie@ +alue?"ima/enes8,donde.swf"<
;e!#ed src?"ima/enes8,donde.swf" /idt8?"<<6" 8eig8t?"3:" 6ualit4?@8ig8@
s8oc5/a+eK=las8@ <
;>e!#ed<
;>o#-ect<
175
,ustitu4e la pala#ra HE,EH9C, por el siguiente cdigoF
code#ase?@8ttpF>>do/nload.!acro!edia.co!>pu#>s8oc5/a+e>ca#s>=las8>s/=las8.ca#M+ersion
?"7(72'7(@ /idt8?"<<6" 8eig8t?"3:"<
;para! na!e?@!o+ie@ +alue?"ima/enes8,reservas.swf"<
;e!#ed src?"ima/enes8,reservas.swf" /idt8?"<<6" 8eig8t?"3:" 6ualit4?@8ig8@
s8oc5/a+eK=las8@ <
;>e!#ed<
;>o#-ect<
Hemos aadido las etiquetas ;para! na!e?@BG)NLNH@ +alue?"#&&99CC"< con el mismo color
que el color de fondo de la pgina para que el botn quede integrado dentro de la pgina. Puedes
hacer la prueba de quitar una de estas etiquetas y vers la diferencia.
Abrir el documento !enu.8t! en un navegador, y comprobar que las palabras se han sustituido por
botones flash tal como puedes ver aqu.
175
E-ercicio 3F &lores
Cpartado 2 nsertar la lnea ;e!#ed src?"varios8audioflores.MIA" autostart?@true@
loop?@=alse@ /idt8?"&" 8eig8t?"&"<;>e!#ed< debajo de la etiqueta;#od4<. Para que se ejecute
una sola vez hemos puesto el atributo loop?@=alse@
Cpartado 3 Sustituye la palabra NCO por el siguiente cdigo:
/idt8?"<&&" 8eig8t?":3"<
;para! na!e?@BG)NLNH@ +alue?"#%%"A"A"<
;para! na!e?@!o+ie@ +alue?"ima/enes8inicio.swf"<
;e!#ed src?"ima/enes8inicio.swf" /idt8?"<&&" 8eig8t?":3" 6ualit4?@8ig8@
s8oc5/a+eK=las8@ #gcolor?"#%%"A"A"<
;>e!#ed<
;>o#-ect<
,ustitu4e la pala#ra .HNDU)TN, por el siguiente cdigoF
/idt8?"<&&" 8eig8t?":3"<
175
;para! na!e?@!o+ie@ +alue?"ima/enes8produc)os.swf"<
;e!#ed src?"ima/enes8produc)os.swf" /idt8?"<&&" 8eig8t?":3" 6ualit4?@8ig8@
s8oc5/a+eK=las8@ #gcolor?"#%%"A"A" <
;>e!#ed<
;>o#-ect<
,ustitu4e la pala#ra .EDIDN, por el siguiente cdigoF
/idt8?"<&&" 8eig8t?":3"<
;para! na!e?@!o+ie@ +alue?"ima/enes8pedidos.swf"<
;e!#ed src?"ima/enes8pedidos.swf" /idt8?"<&&" 8eig8t?":3" 6ualit4?@8ig8@
s8oc5/a+eK=las8@ #gcolor?"#%%"A"A"<
;>e!#ed<
;>o#-ect<
Abrir el documento !enu.8t! en un navegador, y comprobar que no aparecen los controles de
audio. No olvidar encender unos altavoces que estn conectados al ordenador, para comprobar que
el archivo de audio se reproduce correctamente.
175
.rue#a e+aluati+a de la unidad '. Multi!edia
1. La eti%ueta 2gsound3 se utili,a para incluir sonido de 7ondo.
a) Verdadero
b) Falso
2. Bl incluir un archivo de audio; es pre7erile %ue no ocupe mucho espacio; aun%ue esto
impli%ue una prdida de calidad.
a) Verdadero
b) Falso
3. La eti%ueta 2gsound3 puede situarse en cual%uier parte del documento.
a) Verdadero
b) Falso
$. Los 7ormatos de v6deo %ue no deen utili,arse en Cnternet son el BDC; el M+EE 4 el MFD.
a) Verdadero
175
b) Falso
'. Los videos se reproducen autom!ticamente al cargarse la p!gina; 4 se reproducen
solamente una ve,.
a) Verdadero.
b) Falso.
6. La etiqueta <e"be!> ta"bi#n pue!e utiliarse para insertar arc$ivos !e au!io.
a) Verdadero
b) Falso
7. El atributo $i!!en...
a) (er)ite reproducir un vdeo de for)a infinita
b) (uede valer true o %alse.
c) *ual+uiera de las dos opciones anteriores
-. La eti%ueta 2o<ect3...
a) %uede utilizarse para insertar di$erentes ob-etos dentro de la pgina
b) .ntenta que no se produzcan incopatibilidades por las distintas etiquetas soportadas por
unos u otros navegadores
c) Cualquiera de las dos anteriores
opciones
/. La eti%ueta 2param3...
1) Se utiliza para especi$icar los
valores necesarios para la inicializacin de
un ob-eto
2) &ecesita etiqueta de cierre
C) Cualquiera de las dos prieras
opciones
,) &inguna de las opciones
anteriores
RESULTADOS
175
Unidad 1(. )apas
Vamos a +er algunas de las caractersticas bsicas sobre las capas, para poder insertarlas en
nuestras pginas.
)apa ;di+< ...
Las capas no son ms que unos recuadros, que pueden situarse en cualquier parte de la pgina, en
los que podemos insertar contenido HTML. Dichas capas pueden ocultarse y solaparse entre s, lo
que proporciona grandes posibilidades de diseo.
Podemos insertar una capa a travs de las etiquetas ;di+< y ;>di+<, que como ya vimos, sirven para
agrupar bloques de texto.
A travs del atributo id se le da un nombre a la capa, y a travs del atributo st4le se establecen el
resto de propiedades de la capa.
175
A travs de las propiedades le=t (izquierda) y top (superior) se establece la posicin de la capa
respecto a los mrgenes izquierdo y superior de la pgina. Pueden tomar un nmero como valor,
acompaado de px cuando haga referencia a pxeles, y acompaado de j cuando haga referencia a
un porcentaje.
Para que la capa aparezca en la posicin establecida, es necesario incluir tambin la propiedad
position con el valor a#solute. Si no se estableciera este valor, la capa se mostrara pegada al
margen izquierdo, en la posicin en la que hubiera sido insertada dentro del cdigo.
A travs de las propiedades /idt8 (anchura) y 8eig8t (altura) se establece el tamao de la capa.
Pueden tomar un nmero como valor, acompaado de px cuando haga referencia a pxeles, y
acompaado de j cuando haga referencia a un porcentaje.
A travs de la propiedad AKindex puede establecerse el ndice de la capa dentro de la pgina. Una
capa podr ser solapada por aquellas capas cuyo ndice sea mayor. Siempre es un valor numrico.
A travs de la propiedad +isi#ilit4 puede establecerse la visibilidad de la capa. Puede tomar los
valores in8erit (se muestra la capa mientras la capa a la que pertenece tambin se est mostrando),
+isi#le (muestra la capa, aunque la capa a la que pertenece no se est viendo) y 8idden (la capa
est oculta).
A travs de las propiedades la4erK#ac5groundKi!age y #ac5groundKi!age se puede establecer
una imagen de fondo para la capa. La ruta y el nombre de la imagen han de aparecer entre
parntesis, despus de la palabra url.
A travs de las propiedades la4erK#ac5groundKcolor y #ac5groundKcolor se puede establecer un
color de fondo para la capa. Ha de ser un nmero hexadecimal.
A travs de la propiedad o+er=lo/ puede establecerse si se mostrar o no el contenido de la capa
cuando no pueda ser visualizado en su totalidad, por ser la capa demasiado pequea. Puede tomar
los valores +isi#le (se muestra todo el contenido de la capa, aunque esto implique hacer que la capa
sea ms grande), 8idden (no es posible visualizar el contenido de la capa que no quepa en ella),
scroll (se muestra la barra de desplazamiento, aunque el contenido de la capa pueda ser visualizado
totalmente) y auto (se muestra la barra de desplazamiento cuando sea necesario).
A travs de la propiedad clip puede establecerse el rea de la capa que podr ser visualizado. Lo
que hace es recortar la capa, haciendo que partes de ella no sean visibles. Ha de especificarse la
distancia de los mrgenes de la capa entre parntesis, despus de la palabra url.
El primer valor ha de ser la distancia (se asume que est en pxeles) del !argen superior, hasta la
que no se +isualiAar el contenido de la capa.
El segundo valor ha de ser la distancia del !argen iA6uierdo, hasta la que no se +isualiAar el
contenido de la capa.
El tercer valor ha de ser la distancia del !argen superior, hasta la que se +isualiAar el contenido
de la capa.
El cuarto valor ha de ser la distancia del !argen iA6uierdo, hasta la que se +isualiAar el contenido
de la capa.
Tambin es posible incluir auto como valor de alguna de estas distancias, lo que indica que la
distancia se corresponder con los bordes de la capa.
175
Todas estas propiedades se especifican a travs del atributo st4le, y deben aparecer entre comillas
dobles, con un punto y coma detrs de cada una. Para asignar los valores a las propiedades no se
utiliza el smbolo ? (igual), sino que se utiliza el smbolo F (dos puntos).
Por ejemplo, podramos insertar una capa escribiendo el siguiente cdigo:
;di+ id?"capa" st4le?@positionFa#soluteP /idt8F:&&p94 8eig8tF<<'p94 AKindexF34
+isi#ilit4F +isi#leP #ac5groundKcolorF #&&99CC4 la4erK#ac5groundKcolorF #&&99CC4 #ac5groundKi!ageF url
Rima/enes8fondocapa./ifS4 la4erK#ac5groundKi!ageF
urlRima/enes8fondocapa./ifS4 clipF rec)R< au)o au)o 3S4@<
"s)e )e9)o es);aacu)e4 den)ro de una capa.
;>di+<
Otra forma de insertar capas es utilizando las etiquetas ;span< y ;>span<, en lugar de las etiquetas
;di+< y ;>di+<.
La etiqueta ;span< se utiliza del mismo modo que la etiqueta ;di+<, y es compatible con un mayor
nmero de navegadores.
Tambin existen las etiquetas ;la4er< y ;>la4er<, pero solamente son reconocidas por el navegador
Netscape.
La principal diferencia de la etiqueta ;la4er<, en lo que se refiere a las otras dos, es que las
propiedades de la capa se especifican como atributos independientes, y no como valores dentro del
atributo st4le. Por ejemplo, podramos insertar una capa escribiendo el siguiente cdigo:
;la4er na!e?"capa" /idt8?":&&p9" 8eig8t?"<<'p9" AKindex?"3"
+isi#ilit4?@s8o/@ #gcolor?"#&&99CC" #ac5ground?"ima/enes8fondocapa./if"<
"s)e )e9)o es);aacu)e4 den)ro de una capa. ;>la4er<
Unidad 11. *a+a,cript 0I1
En este tema vamos a +er qu son los lenguajes de script y cmo hacer llamadas a *a+a,cript. No
se pretende ensear Javascript ya que esto necesitara un curso entero.
Lengua-es de script
Los lenguajes de script, tambin conocidos como lenguajes de macros, son lenguajes que slo
funcionan en las aplicaciones para las que han sido creados.
Son lenguajes para ser interpretados, no para ser compilados, por lo que no generan ningn archivo
ejecutable.
Las aplicaciones se encargan de ejecutar los programas mientras van interpretando el cdigo, por lo
que la ejecucin puede resultar ms lenta que en el caso de estar ejecutando un archivo ejecutable.
175
Los lenguajes de script, al igual que el resto de lenguajes de programacin, disponen de variables,
mtodos y objetos predefinidos, pero un menor control sobre los tipos de variables (enteros, cadenas
de caracteres, etc.), por lo que es posible asignar valores de distintos tipos a una misma variable, lo
que puede producir errores y dificultar la depuracin de los programas.
Los lenguajes de script pretenden ser sencillos a la hora de programar. Al mismo tiempo, lo normal es
que los programas no sean muy extensos, ni tampoco muy complicados.
Dos de los lenguajes de script ms utilizados hoy en da son *a+a,cript y 9B,cript.
El lenguaje VBScript fue creado por Microsoft, por lo que puede ser interpretado por todas sus
aplicaciones. Pero no es recomendable utilizar este lenguaje de script en nuestras pginas, ya que
solamente podra ser interpretado por el navegador nternet Explorer, y hay muchos usuarios que
utilizan navegadores diferentes.
Es ms recomendable utilizar el lenguaje JavaScript, creado por Netscape, ya que puede ser
reconocido por un mayor nmero de navegadores.
La utilizacin de JavaScript permite variar dinmicamente el contenido del documento, validar
formularios, etc.
Por ejemplo, podemos crear funciones que permitan mostrar y ocultar capas. Situa el puntero sobre la
imagen del gato para ver lo que ocurre.
Si utilizramos un editor visual, como Dreamweaver, podramos insertar algunos comportamientos de
este tipo sin la necesidad de escribir ni una sola lnea de cdigo JavaScript. Esta aplicacin permite
insertar comportamientos a travs de mens y paneles, generando automticamente el cdigo
JavaScript necesario.
Unidad 11. *a+a,cript 0II1
*a+a,cript ;script<
Para insertar funciones JavaScript en un documento, es necesario insertar las etiquetas ;script< y
;>script< dentro de la cabecera (entre las etiquetas ;8ead< y ;>8ead<) o dentro del cuerpo de la
pgina. A travs del atributo language hay que especificar el lenguaje de script, que en este caso
ser *a+a,cript.
Entre las etiquetas ;script< y ;>script< habr que insertar las funciones JavaScript. Si un
navegador no reconoce la etiqueta ;script<, mostrar el cdigo de las funciones que sta contenga.
Para que esto no ocurra, las funciones se insertan como comentarios, entre ;XKK y >>KK<. En las
funciones no hay que insertar caracteres especiales, debido a un fallo de Netscape corremos el
riesgo de que al ejecutarse la funcin en un ordenador con un juego de caracteres distinto se
produzcan fallos.
175
Por ejemplo, podramos insertar el siguiente cdigo:
;script<
;Xk
=unction Muestra!ensa-e01
l
alert0@Esto es un !ensa-e7 acti+ado por una =uncin -a+ascript@1P
m
>>KK<
;>script<
La funcin que hemos insertado es una funcin muy sencilla, que muestra un mensaje de alerta.
Si dentro del documento insertramos el siguiente cdigo:
;i!g src?"ima/enes8lo/oIanimales./if" on)lic5?"Mues)ramensaFe"<
Obtendramos una imagen como la que aparece a continuacin, que al ser pulsada llama a la funcin.
Pulsa sobre la imagen para ver lo que ocurre:
A travs del atributo on)lic5 hemos definido la funcin que ser llamada al pulsarse sobre el objeto. Podemos
utilizar muchos otros atributos para llamar a funciones, como pueden ser onD#l)lic5 (al hacer doble clic),
onMouseN+er (mientras el cursor este encima) o onMouseNut (cuando el cursor deje de estar encima).
a paso Lla!adas a -a+ascript.
E-ercicio paso a paso. Lla!adas a -a+ascript
N#-eti+o.
.racticar las operaciones que hay que realizar para 8acer lla!adas a =unciones -a+ascript.
2 Abre el archivo gatos.8t!, que se encuentra en la carpeta ani!ales.
3 Copia el siguiente cdigo delante la etiqueta ;>8ead<:
<script language="JavaScript" type="text/JavaScript">
175
<!
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parsent(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementByd) x=d.getElementByd(n); return x;
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
4 Busca la lnea ;a 8re=?"#"<;i!g src?"ima/enes8/a)i)o./if" alt?"/a)i)o" #order?"&"<;>a<.
Este cdigo hace referencia a la imagen /a)i)o./if, que tiene borde & y el texto alternativo /a)i)o.
Al mismo tiempo, la imagen tiene asociado un vnculo vaco (;a 8re=?"#"<).
Aade on)lic5?"MMIs+ow(ide.a*ersRT/a)osemanaT,TT,Ts+owTS" despus de #order?"&".
Con este cdigo, estars llamando a la funcin javascript MMIs+ow(ide.a*ers, que se encuentra
al principio del documento. Esta funcin se encarga de cambiar la visibilidad de las capas. En este
caso, le ests pasando como parmetros el nombre de la capa que tiene que mostrar /a)osemana y
lo que tiene que hacer s+ow (mostrar) , por lo que la funcin cambiar la visibilidad de la capa
/a)osemana por el valor s+ow (mostrar).
La llamada a la funcin se realizar cuando hagas clic sobre la imagen (on)lic5).
175
Aade antes de la etiqueta ;>td< el siguiente cdigo ;p align?"cen)er"<;=ont siAe?":"<ulsa
so,re la ima/en para ver el /a)o de la semana;>=ont<;>p< para que el texto aparezca debajo
de la imagen.
" Busca la lnea ;p align?@center@<;a 8re=?"#"<;=ont color?"#&&&&&&" siAe?"4"<
Cerrar;>=ont<;>a<;>p<, que se encuentra casi al final del documento.
Este cdigo hace referencia a un vnculo vaco (;a 8re=?"#"<) con el texto Cerrar.
Aade on)lic5?"MMIs+ow(ide.a*ersRT/a)osemanaT,TT,T+ideTS" despus de siAe?"4" dentro de la
etiqueta ;=ont.
Al igual que en el punto anterior, con este cdigo, estars llamando a la funcin javascript
MMIs+ow(ide.a*ers, pero para cambiar la visibilidad de la capa /a)osemana por el valor
(ide (ocultar).
La llamada a la funcin se realizar cuando hagas clic sobre el texto ( on)lic5). De esta manera
cuando hagas clic sobre el texto cerrar se esconder la capa.
$ Haz clic sobre el men Crc8i+o.
% Haz clic sobre la opcin Guardar.
175
' Abre el documento gatos.8t!, que acabas de guardar, en un navegador, y comprueba que
obtienes una pgina como la que aparece si aqu. Comprueba cmo al pulsar sobre la imagen del
gato se muestra la capa, y cmo al pulsar sobre el texto )errar, que se encuentra en la capa, sta
vuelve a ocultarse.
175
E-ercicios Unidad 11. Lla!adas a -a+ascript
1 Abrir el documento !enu.8t!, de la carpeta deportes.
2 Establecer una llamada a la funcin !ensa-e, para que cuando se pulse sobre la imagen e!ail.gi=
se ejecute dicha funcin. La funcin tiene el siguiente cdigo:
function mensaje() { //v1.0
alert('No olvides mandarnos tus sugerencias.');
}
La llamada a la funcin se deber escribir en la etiqueta ;i!g de la imagen.
1 Abrir el documento pedidos.8t!, de la carpeta =lores.
2 Establecer una llamada a la funcin !ensa-e, para que cuando se pulse sobre el botn En+iar se
ejecute dicha funcin y aparezca el mensaje Heci#irs un a+iso cuando se 8a4a realiAado la
entrega del pedido.
175
C4uda E-ercicios Unidad 11. Lla!adas a -a+ascript
Cpartado 2 Buscar la lnea donde aparezca ;i!g src?"ima/enes8email./if".
Escribir on)lic5?"mensaFeRS" delante del smbolo < de cierre de la etiqueta i!g con esto se llamar
a la funcin cada vez que el usuario haga clic sobre la imagen.
Slo nos falta incluir el cdigo de la funcin delante de la etiqueta ;>8ead< y encerrado entre
etiquetas ;script de la siguiente forma:
<!
alert('No olvides mandarnos tus sugerencias.');
}
//-->
</script>
Abrir el documento !enu.8t! en un navegador, y pulsar sobre la imagen eK!ail para comprobar que
se realiza correctamente la llamada a la funcin y aparece el mensaje.
175
E-ercicio 2F &lores
Cpartado 2 Buscar la lnea donde aparezca ;input t4pe?@su#!it@.
Escribir on)lic5?"mensaFeRS" delante del smbolo < de cierre de la etiqueta input.
Slo nos falta incluir el cdigo de la funcin delante de la etiqueta ;>8ead< y encerrado entre
etiquetas ;script de la siguiente forma:
<!
alert('Recibirs un aviso cuando se haya realizado la entrega del pedido.');
}
//-->
</script>
Abrir el documento pedidos.8t! en un navegador, y pulsar sobre el botn En+iar para comprobar
que se realiza correctamente la llamada a la funcin.
175
.rue#a e+aluati+a de la unidad 11. *a+a,cript
1. Los lengua<es de script tamin se conocen como lengua<es de macros.
a) Verdadero
b) Falso
2. Los lengua<es de script disponen de variales; mtodos 4 o<etos prede7inidos.
a) Verdadero
b) Falso
3. Los lengua<es de script son compilados; no interpretados.
a) Verdadero
b) Falso
$. El lengua<e Gava(cript puede ser reconocido por un ma4or n&mero de navegadores %ue
DH(cript.
a) Verdadero
b) Falso
'. La utili,acin de Gava(cript permite variar din!micamente el contenido del documento.
a) Verdadero.
b) Falso.
). Existen editores visuales %ue permiten generar autom!ticamente cierto cdigo
Gava(cript.
a) Verdadero
b) Falso
*. Las eti%uetas 2script3 4 25script3 van dentro ...
175
a) ,el t(tulo del docuento
b) ,el cuerpo del docuento
c) ,e la cabecera
-. Las 7unciones se insertan como comentarios; entre 29:: 4 55::3; ....
a) %ara encontrarlas s $cilente a la hora de prograar
b) %ara que los navegadores que no reconozcan la etiqueta 2script38 no uestren el cdigo
de dichas $unciones
c) %or un $allo de &etscape
/. B travs del atriuto on#lic8...
1) Se de$ine la $uncin que ser llaada al pulsarse sobre el ob-eto
2) Se de$ine la $uncin que ser llaada al hacer doble clic sobre el ob-eto
RESULTADOS
175
Unidad 12. Ho-as de estilo 0I1
En este tema vamos a +er qu son las 8o-as de estilo, y cmo trabajar con ellas.
Introduccin
Los estilos ),, (Cascading Style Sheets) son hojas de estilo de actualizacin automtica.
Se usan principalmente para definir estilos que luego se aplicarn a las pginas de nuestro sitio,
incluso a veces permiten definir caractersticas que no permiten definir los estilos HTML, como el
color de fondo para el texto por ejemplo.
Al estar la definicin de los estilos en un archivo externo a las pginas y comn a todas las pginas
del sitio (es recomendable) el aspecto de nuestras pginas ser ms homogneo y adems
podremos cambiar ese aspecto de manera segura e inmediata cambiando nicamente la hoja de
estilos.
Se pueden definir estilos independientes o estilos asociados a determinadas etiquetas por ejmplo a la
etiqueta ;a< (que corresponde a los hiperenlaces). De este modo, todos los hiperenlaces de la
pgina o del sitio adquiriran la apariencia definida en ese estilo y con un slo cambio en la hoja de
estilos podemos cambiar de golpe el estilo de todos los enlaces en todas las pginas vinculadas a
este estilo.
El inconveniente que tiene trabajar con hojas de estilos es que algunos navegadores no las soportan
y las ignoran, aunque estos navegadores suelen ser versiones antiguas, por lo que ocurrir en pocos
casos.
Las hojas de estilo pueden crearse con cualquier editor de texto, como puede ser el Bloc de notas, y
pueden guardarse con la extensin TXT.
9incular una 8o-a de estilo
Para poder incluir las propiedades de una hoja de estilo en un documento, hay que vincularla a l. Un
documento puede tener varias hojas de estilo vinculadas.
175
Para vincular una hoja de estilo a un documento es necesario insertar la etiqueta ;lin5< en el
documento, entre las etiquetas ;8ead< y ;>8ead<. Esta etiqueta no necesita etiqueta de cierre.
A travs del atributo 8re= se especifica la hoja de estilo que se va a vincular al documento.
A travs del atributo rel se tiene que especificar que se est vinculando una hoja de estilo, por lo que
su valor ha de ser st4les8eet.
A travs del atributo t4pe se tiene que especificar que el archivo es de texto, con sintaxis CSS, por lo
que su valor ha de ser text>css.
Por ejemplo, podramos vincular una hoja de estilo escribiendo el siguiente cdigo.
<link 8re=?"mises)ilos.)9)" rel?@st4les8eet@ t4pe?@text>css@ <
,intaxis de las 8o-as de estilo
Como recordars, para especificar las propiedades de una capa no se utilizan etiquetas normales de
HTML. Todas las propiedades se especifican a travs del atributo st4le, y aparecen entre comillas
dobles, con un punto y coma detrs de cada una. Para asignar los valores a las propiedades no se
utiliza el smbolo ? (igual), sino que se utiliza el smbolo F (dos puntos).
Esto es debido a que se est especificando un estilo, pero sin vincular ninguna hoja de estilo a la
pgina.
Para especificar las propiedades dentro de una hoja de estilo, la sintaxis es muy similar.
En primer lugar se pone el nombre del estilo, y entre llaves se especifica la lista de propiedades (en
minsculas) que se corresponden con dicho estilo. Cada una de estas propiedades tiene que tener un
punto y coma detrs, y los valores se asignan con el smbolo F (dos puntos).
El nombre del estilo puede ser un nombre inventado por nosotros, o el nombre de una etiqueta HTML.
Para poder utilizar un nombre inventado, tiene que estar precedido por un punto, o por el nombre de
una etiqueta seguida de un punto.
Por ejemplo, en una hoja de estilo podramos tener lo siguiente:
#od4 l#ac5groundKcolorF #&&66994 =ontK=a!il4F Arial,(elve)ica4m
.!itexto l=ontK=a!il4F Arial,(elve)ica4 =ontKsiAeF<Mp94m
Si vinculramos esta hoja de estilo a un documento, se aplicaran directamente las propiedades
especificadas para la etiqueta ;#od4<.
En cambio, no existe ninguna etiqueta ;!itexto<, por lo que para aplicar este estilo a algn
elemento de la pgina habra que indicarlo de algn modo.
Para aplicar este estilo a un elemento, habra que insertar el atributo class en su etiqueta.
Por ejemplo, para aplicar ese estilo al siguiente prrafo del documento:
175
;p<)e9)o con es)ilo;>p<
Habra que escribir:
;p class?"mi)e9)o"<)e9)o con es)ilo;>p<
Pero para aplicar el estilo nicamente a una parte del contenido de la etiqueta, como podra ser en
este caso una palabra del prrafo, sera necesario incluir la etiqueta ;span< (que agrupa bloques, sin
producir un cambio de lnea). Por ejemplo, para aplicar el estilo nicamente a la palabra es)ilo,
habra que escribir:
;p<)e9)o con ;span class?"mi)e9)o"<es)ilo;>span<;>p<
Unidad 12. Ho-as de estilo 0II1
Las propiedades
Vamos a ver algunas propiedades que pueden especificarse en los estilos, as como los valores que
pueden tomar.
&a!ilia de la =uenteF
La propiedad es =ontK=a!il4.
Puede tomar como valor varios nombres de fuentes, separados por comas, como pueden ser arial,
8el+etica, etc. La ventana de definir una familia de fuentes es que si el ordenador del visitante no
tiene instalada la primera fuente, entonces se aplicar la segunda, as sucesivamente hasta encontrar
una de las fuentes.
Grosor del textoF
La propiedad es =ontK/eig8t.
Sus valores pueden ser: #old (negrita), #older (mas negrita), lig8ter (ligera) o
un nmero del <&& al 9&&.
Ta!aQo de la =uenteF
La propiedad es =ontKsiAe.
Puede tomar como valor un nmero.
Espacio entre lJneasF
La propiedad es lineK8eig8t.
175
Espacio entre caracteresF
La propiedad es letterKspacing.
Estilo de la =uenteF
La propiedad es =ontKst4le.
Puede tomar como valor italic, cuando se desee que el texto aparezca en cursiva.
Decoracin de la =uenteF
La propiedad es textKdecoration.
Puede tomar como valor none (ninguno), underline (subrayado), lineKt8roug8 (una lnea encima),
o+erline (tachado) o #lin5 (parpadeo).
Si se aplica none a los hiperenlaces, puede evitarse que aparezcan subrayados.
Trans=or!ar el textoF
La propiedad es textKtrans=or!.
Puede tomar como valor capitaliAe (la inicial de cada palabra aparecer en maysculas),
uppercase (todo en maysculas) o lo/ercase (todo en minsculas).
Clineacin del textoF
La propiedad es textKalign.
Puede tomar como valor center (centrado), le=t (izquierda), rig8t (derecha) o -usti=4 (justificado).
,angrado del textoF
La propiedad es textKindent.
)olorF
La propiedad es color.
Puede tomar como valor un nmero en hexadecimal.
175
Si se aplica esta propiedad a los hiperenlaces, sern de este color, en lugar de los indicados por los
atributos lin5 (vnculo), +lin5 (vnculo activo), y alin5 (vnculo visitado) de la etiqueta ;#od4<.
)olor de =ondoF
La propiedad es #ac5groundKcolor.
I!agen de =ondoF
La propiedad es #ac5groundKi!age.
La ruta y el nombre de la imagen han de aparecer entre parntesis, despus de la palabra url.
MrgenesF
Las propiedades son !arginKtop (margen superior), !arginKrig8t (margen derecho), !arginK
#otto! (margen inferior), !arginKle=t (margen izquierdo), o !argin (los valores de los mrgenes
superior, derecho, inferior e izquierdo, separados por espacios).
Pueden tomar como valor un nmero (cuatro nmeros separados por espacios en el caso de
!argin).
Cnc8o de #ordesF
La propiedad es #orderK/idt8.
)olor del #ordeF
La propiedad es #orderKcolor.
No hay que olvidar, en el caso de los valores numricos, especificar la unidad de medida a utilizar:
c! (centmetros), pt (puntos), px (pxeles), o j (porcentaje).
Existen muchas otras propiedades adems de stas. En el tema de capas puedes consultar las
propiedades que se pueden definir sobre ellas en las hojas de estilo (AKindex, +isi#ilit4, etc.).
175
a paso )rear 8o-a de estilos.
E-ercicio paso a paso. )rear 8o-a de estilos
N#-eti+o.
.racticar las operaciones que hay que realizar para crear una 8o-a de estilos.
1 Abre el documento conestilos.8t!, de la carpeta originales>ani!ales del curso.
3 Abre el documento conestilos.8t! en un navegador.
Comprueba que la pgina solo muestra una lnea de texto, y que el fondo de la pgina es blanco.
Cierra el navegador.
4 Abre el Bloc de notas si no lo tienes abierto o sino, abre un nuevo documento en blanco.
nserta el siguiente cdigo en el documento en blanco:
#od4 l #ac5groundKcolorF #%%CC&&4 m
.!itexto l textKtrans=or!F uppercaseP colorF #%%&&&&4 m
Con este texto se define que el color del documento ser #%%CC&& (calabaza) al estar especificado
para la etiqueta #od4.
175
El estilo !itexto no se corresponde con ninguna etiqueta en concreto. Lo que hace es convertir el
texto en maysculas (uppercase) y que sea de color #%%&&&& (rojo).
$ Haz clic sobre la opcin Guardar. Guarda el documento con el nombre estilosa.txt, dentro de la
carpeta Mis docu!entos>e-erciciosL8t!l>ani!ales.
% Abre de nuevo el documento conestilos.8t! en un navegador, y comprueba que obtienes una
pgina como la que aparece si aqu.
175
E-ercicios Unidad 12. Cplicar estilos
1 Abrir el documento estilosd.txt, de la carpeta originales>deportes del curso.
3 Abrir el documento conestilos.8t!, de la carpeta originales>deportes del curso.
Aplicar el estilo llamado !itexto al primer prrafo, y el estilo otrotexto al segundo prrafo, los
estilos estn definidos en la hoja de estilos estilosd.txt.
" Guardar los cambios y comprobar el funcionamiento en un navegador.
1 Abrir el documento estilos=.txt, de la carpeta originales>=lores del curso.
175
3 Abrir el documento conestilos.8t!, de la carpeta originales>=lores del curso.
Aplicar el estilo pala#ra a la palabra =ondo, (el estilo se encuentra definido en la hoja de estilos
estilos=.txt).
" Guardar los cambios y comprobar el funcionamiento en un navegador.
C4uda E-ercicios Unidad 12. Cplicar estilos
Cpartado Para que se reconozcan los estilos debemos relacionar la pgina con la hoja de estilos:
nsertar la lnea ;lin5 8re=?@estilosd.txt@ rel?@st4les8eet@ t4pe?@text>css@< entre las etiquetas
;8ead< y ;>8ead<.
Ahora nos queda asignar a cada prrafo el estilo correspondiente:
nsertar class?"mi)e9)o" dentro de la primera etiqueta ;p<.
nsertar class?"o)ro)e9)o" dentro de la segunda etiqueta ;p<.
Cpartado " Hacer clic sobre la opcin Guardar, del men Crc8i+o.
Abrir el documento conestilos.8t! en un navegador, y comprobar que se obtiene una pgina como
la que aparece si aqu.
175
E-ercicio 2F &lores
Cpartado nsertar la lnea ;lin5 8re=?@estilos=.txt@ rel?@st4les8eet@ t4pe?@text>css@< entre las
etiquetas ;8ead< y ;>8ead<.
En este caso como no queremos aplicar el estilo a todo el prrafo, aadiremos una etiqueta ;,pan<:
Sustituir la lnea
;p<"s)ilo en una sola pala,ra * en el fondo de la p;aacu)e4/ina;>p<
Por la lnea
;p<"s)ilo en una sola pala,ra * en el ;span class?"pala,ra"<fondo;>span< de la
p;aacu)e4/ina;>p<
Cpartado " Hacer clic sobre la opcin Guardar, del men Crc8i+o.
175
Abrir el documento conestilos.8t! en un navegador, y comprobar que se obtiene una pgina como
la que aparece aqu.
.rue#a e+aluati+a de la unidad 12. Ho-as de estilo
1. Los estilos #(( I#ascading (t4le (heetsJ son ho<as de estilo de actuali,acin
autom!tica.
a) Verdadero
b) Falso
2. Las ho<as de estilo permiten aplicar un estilo sore todas las eti%uetas de un mismo
tipo.
a) Verdadero
b) Falso
3. Todos los navegadores soportan las ho<as de estilo.
a) Verdadero
b) Falso
$. +ara vincular una ho<a de estilo a un documento es necesario insertar la eti%ueta
2lin83.
175
a) Verdadero
b) Falso
'. La eti%ueta 2lin83 necesita eti%ueta de cierre.
a) Verdadero.
b) Falso.
). La eti%ueta 2lin83 dee insertarse entre las eti%uetas 2head3 4 25head3.
a) Verdadero
b) Falso
*. El nomre de un estilo...
a) %uede ser un nobre inventado por nosotros
b) %uede ser el nobre de una etiqueta H)*#
c) Cualquiera de las dos anteriores opciones
-. +ara aplicar un estilo...
a) Hay que insertar el atributo mitexto
b) Hay que insertar el atributo class
c) Hay que insertar el atributo span
/. La propiedad text:
decoration...
1) Hace re$erencia al color del
te"to
2) Hace re$erencia a la
decoracin del te"to
C) Cualquiera de las dos
prieras opciones
,) &inguna de las opciones
anteriores
RESULTADOS
175
Unidad 13. .ginas /e# din!icas 0I1
En este tema vamos a +er qu son las pginas web dinmicas, y qu lenguajes nos permitirn
crearlas.
HTML din!ico
Una pgina dinmica es una pgina que permite al usuario interactuar con ella, y que contiene
efectos especiales.
Para crear una pgina de este tipo no basta con programar en HTML, ya que este lenguaje es muy
limitado. Es necesario combinar HTML con otros lenguajes, como JavaScript, VBScript, Java, ASP,
PHP, etc.
Tambin puede hacerse uso de capas, de animaciones Flash, de applets java y de hojas de estilo
CSS.
175
A la combinacin de estos elementos se le conoce como DHTML (HTML dinmico).
Existe una ancdota muy curiosa sobre DHTML :
Una conocida marca, poseedora de un programa que permite "dar vida" a las pginas web, pidi
explicaciones a un webmaster tras visitar su pgina web. Pensaron que el webmaster estaba
utilizando su programa y haban comprobado que no figuraba como comprador en sus archivos.
El webmaster respondi que no estaba utilizando el programa en cuestin, sino HTML dinmico, por
lo que la empresa tuvo que disculparse por la acusacin.
Esto demuestra lo que se puede llegar a hacer con HTML dinmico.
.rogra!acin /e#
En el tema anterior hablamos de *a+a,cript y 9B,cript, dos lenguajes de programacin web.
Estos lenguajes son interpretados y ejecutados directamente por el navegador del usuario que
visualiza la pgina, pero existen otros lenguajes que son interpretados por el servidor, como es el
caso de C,., .H. o *,. (Java).
Cuando un usuario pretende visualizar una pgina, el servidor ejecuta los scripts y genera otra pgina
como resultado. Esta nueva pgina slamente contiene HTML, y es la que visualiza el navegador del
usuario.
Esto evita que se puedan producir errores al interpretar el cdigo, como ocurre con VBScript si intenta
ser interpretado por un navegador que no sea nternet Explorer.
Otras ventajas que proporciona programar con lenguajes interpretados por el servidor, es que los
usuarios no tienen acceso al cdigo original, por lo que los programas estarn protegidos ante
plagios.
Al mismo tiempo, se puede acceder a mayor nmero de recursos almacenados en el servidor, como
pueden ser bases de datos.
Los lenguajes de este tipo ms utilizados hoy en da son C,. y .H..
El lenguaje C,. (Active Server Pages), al igual que 9B,cript, fue creado por Microsoft. Consiste en
incluir instrucciones Visual Basic Script o Jscript dentro del documento HTML.
Actualmente se ha presentado, con algunas diferencias en la sintaxis, una nueva versin llamada
C,..:ET, que ofrece bastantes mejoras en lo que se refiere a posibilidades y rapidez de ejecucin.
ASP tiene un gran inconveniente, ya que precisa que el servidor funcione sobre Windows NT o 2000.
El lenguaje .H. (Hipertext Preprocesor) permite realizar muchos tipos de aplicaciones web gracias
su gran librera de funciones y documentacin. Ofrece muchas ventajas frente a ASP, entre ellas, que
es ms rpido, que es ms seguro, y que es gratuito.
175
Unidad 13. .ginas /e# din!icas 0II1
gML
El lenguaje HTML ha ido evolucionando rpidamente, gracias, entre otras cosas, a su sencillez. Pero
este lenguaje es bastante rgido, y no nos permite hacer en nuestras pginas todo lo que nos
gustara, al no existir las etiquetas necesarias para ello.
El comit W3C comenz a desarrollar nuevas versiones de HTML para permitir nuevas posibilidades
a la hora de programar, y cre el lenguaje gML 0Extensi#le Mar5up Language1.
Aunque los navegadores an no soportan toda la potencia de XML, cada vez est siendo ms
utilizado, ya que aporta muchas ventajas.
175
XML es un lenguaje comprensible para las personas. Los documentos escritos en este lenguaje
pueden leerse, crearse y modificarse de forma sencilla, utilizando cualquier editor de texto.
Es capaz de expresar estructuras complejas de datos. ncluso estructuras de datos tan complicadas
como grficos pueden representarse en forma de rbol.
Con XML lo que se pretende es etiquetar e identificar el contenido de las pginas, y no pensar
directamente en cmo se mostrarn los datos. Puede utilizarse para definir muchas ms
caractersticas referentes al contenido de los documentos de las que permite la etiqueta ;!eta< de
HTML, y estos datos resultan muy tiles para realizar bsquedas o filtrar informacin.
XML tambin ofrece la posibilidad de gestionar cualquier conjunto de caracteres internacional. Esta
es una caracterstica muy til, ya que permite incluir cualquier carcter que se est utilizando hoy en
da, como pueden ser caracteres en chino o en rabe, lo que facilita el comercio internacional a travs
de nternet.
En realidad, XML y HTML son lenguajes distintos, basados en el ,GML 0,tandard GeneraliAed
Mar5up Language1.
SGML es el estndar internacional para la definicin de la estructura y el contenido de diferentes tipos
de documentos electrnicos.
Mediante una DTD (Definicin de Tipo de Documento), el SGML define la estructura y el contenido de
cada tipo de documento. Por ejemplo, existe una DTD que define cmo han de ser los documentos
HTML.Pero no existe ninguna DTD que defina la estructura y el contenido de un documento XML.
En realidad, XML es una versin resumida del SGML, que descarta aquellas partes del SGML que
raramente se utilizan. Por ello, XML es ms sencillo que SGML, y permite definir nuestros propios
tipos de documentos, con nuestras propias etiquetas.
Por ejemplo, para insertar esto en una pgina web:
:N DNUBT Tragic ningdo!
u,licado en "spaPa en <99'
C la +enta por solo 1" Y 0con un descuento del 1(j de su precio original1
.uedes consultar el tJtulo de las canciones 6ue inclu4e
En HTML habra que escribir:
;=ont color?"#&&6699" siAe?"4"<;#<$B AB5B- ;>#<;>=ont<
;#<;a 8re=?")ra/ic0in/dom.+)m"<;=ont siAe?":"<-ra/ic Uin/dom;>=ont<;>a<;>#<
175
;#r<
;e!<;=ont color?"#CC3366" siAe?":"<;#<u,licado en "spa;n)ilde4a en <99';>#<;>=ont<;>e!<
;#loc56uote<
;=ont siAe?":"<;#<A la ven)a por solo <6 ;euro4 Rcon un descuen)o del <&E de su precio
ori/inalS;>#<;>=ont<
;>#loc56uote<
;=ont siAe?":"<;a 8re=?")ra/ic0in/dom.+)m"<;#<uedes consul)ar el );iacu)e4)ulo de las
canciones 2ue inclu*e;>#<;>a<;>=ont<
Mientras que en XML podramos escribir:
;fx!l +ersion?"<.&"f<
;cdaudio<
;grupo<$o Aou,);>grupo<
;titulo<-ra/ic Uin/dom;>titulo<
;pu#licacion<<99';>pu#licacion<
;precio cantidad?"<6" !oneda?"euro"><
;descuento porcenta-e?":&"><
;enlacecanciones 8re=?")ra/ic0in/dom.+)m"><
;>cdaudio<
A simple vista, es ms sencilla la programacin con XML. Cualquier programa podr trabajar de
forma ms eficiente con XML.
.rue#a e+aluati+a del Te!a 13.
.rue#a e+aluati+a de la unidad 13. .ginas /e# din!icas
1. Una p!gina din!mica es una p!gina %ue permite al usuario interactuar con ella.
a) Verdadero
175
b) Falso
2. El lengua<e B(+ IBctive (erver +agesJ; al igual %ue DH(cript; 7ue creado por Microso7t.
a) Verdadero
b) Falso
3. +H+ tiene muchas desventa<as 7rente a B(+.
a) Verdadero
b) Falso
$. +H+ tiene una gran lirer6a de 7unciones 4 documentacin.
a) Verdadero
b) Falso
'. B(+...
a) %recisa que el servidor $uncione sobre #inu"
b) %recisa que el servidor $uncione sobre 9ni"
c) %recisa que el servidor $uncione sobre :indo's &) o ;777
). =ML 4 HTML ...
a) Son versiones de 1S%
b) Son lengua-es distintos8 basados en S<*#
c) Son el iso lengua-e8 pero en dos idioas distintos
*. B(+ 4 +H+...
a) Son copilados por el servidor
b) Son interpretados por el navegador del usuario
c) Son interpretados por el servidor
-. KHTML...
a) Signi$ica H)*# dinico
b) /s la cobinacin de capas8 aniaciones Flash8 applets -ava8 ho-as de estilo CSS y otros
lengua-es de prograacin
c) Cualquiera de las dos prieras opciones
d) &inguna de las opciones anteriores
/. =ML...
a) /s una versin resuida del S<*#
175
b) %erite de$inir nuestros propios tipos de docuentos
c) Cualquiera de las dos prieras opciones
d) &inguna de las opciones anteriores
HE,ULTCDN,
175

Manual HTML Final

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Manual HTML Final

Hochgeladen von

Copyright:

Verfügbare Formate

Fuente: www.aulaclic.com Fuente: www.aulaclic.

Das könnte Ihnen auch gefallen