Professional Documents
Culture Documents
Curso:
Desarrollo y Diseo de Pginas Web EV 3070
Mdulo:
Lenguaje HTML
Tutor:
Ing. Ricardo Martn Espeche
Antecedentes profesionales:
Administrador del DEPARTAMENTO DE DESARROLLO WEB, a cargo del desarrollo y
administracin del sitio Web del Instituto Universitario Aeronutico
Administrador de Servidores Web.
Instalador de redes de computadoras.
Programador de aplicaciones para Internet.
Desarrollador de aplicaciones relacionales con Visual Basic.
Antecedentes acadmicos:
Profesor de cursos de Visual Basic 6 en el Instituto Adminnet.
Profesor de cursos de Sitios Web-ASP-SQL en el Instituto Adminnet.
Carta al Alumno
Estimado alumno
INDICE
1.10.2- Opciones
1.10.3- Botones del formulario
1.10.4- Otros elementos
1.11 Controles avanzados para formularios
1.11.1- Botones
1.11.2- Etiquetas
1.11.3- Agrupacin de elementos
1.11.4- Controles deshabilitados y de solo lectura
1.11.5- Dirigir el foco hacia un elemento
1.12 Mapas
1.12.1- Mapas gestionados por el cliente
1.12.2- Cmo usar un mapa
1.13 Tablas
1.13.1- Definir las filas
1.13.2- Definir las celdas
1.13.3- Ttulo de la tabla
1.14 Marcos
1.14.1- Etiqueta <FRAMESET>
1.14.2- Etiqueta <FRAME>
1.14.3- Acceso a otros marcos
1.15 Hojas de estilo
1.15.1- Clases
1.15.2- Etiquetas <SPAN> y <DIV>
1.16 Atributos de CSS
1.16.1- Propiedades de bloque
1.16.2- Propiedades del tipo de letra
1.16.3- Propiedades de formato del texto
1.16.4- Propiedades de color y fondo
1.16.5- Propiedades de clasificacin
1.17 Lenguajes de script
1.17.1- Javascript
1.17.2- Programa Applet
1.17.3- La etiqueta <NOSCRIPT>
1.18 Capas
1.18.1- Definicin
1.18.2- Propiedades
1.19 Sonido
1.19.1- Sonido activado por el usuario
1.19.2- Sonido de fondo
1.1 INTRODUCCIN
Disear una pgina Web es bastante fcil si contamos con editores grficos que nos
permite realizar pginas con diseo profesional y con una buena interaccin con el
usuario. Pero una vez que desarrollamos una pgina sabemos cmo se estructura la
misma a nivel de cdigo fuente? Si nos ponemos a pensar, diramos: para que nos
sirve saber del cdigo, si el programa de diseo lo crea el mismo. Bueno, no siempre
necesitaremos ir al cdigo fuente y modificarlo, pero es de gran ayuda saber lo que
estamos haciendo y cmo se hace, ya que los programas, aunque son muy eficientes a
la hora de disear una pgina, no poseen gran flexibilidad cuando trabajamos con
diseos muy elaborados.
1.1.1- Qu es Internet?
Ciertamente en nuestros das somos testigos de una revolucin en las comunicaciones;
un evento tan importante que est cambiando nuestras costumbres en la forma de
comunicarnos, as como est derrumbando las barreras que antes nos imponan las
distancias. Veamos unos ejemplos:
En la biblioteca de alguna universidad, un alumno revisa los catlogos de la
biblioteca del congreso norteamericano para poder desarrollar su investigacin.
Un grupo de investigadores dispersos por el mundo llevan a cabo una tarea
conjunta, mantenindose en permanente contacto a travs del correo
electrnico.
Reuniones virtuales de ejecutivos, ahorran una enorme cantidad de tiempo y
dinero.
Desde la pantalla de su computador, un agente de bolsa puede tener
informacin actualizada de los movimientos de las otras bolsas en el mundo.
Estos ejemplos, y muchos ms tienen un factor en comn: Internet, esta red de
computadores de alcance mundial, le afectar, tarde o temprano, si es que ya no lo
hizo.
Los ms populares servicios que Internet nos ofrece son el correo electrnico y el
World Wide Web (tambin conocido simplemente como "el Web"). El correo electrnico
es el equivalente de una casilla postal comn, donde usted recibe su correspondencia y
a la vez puede despachar sus cartas hacia todo el mundo. El Web es el equivalente a
una oficina de una empresa, donde puede poner a disposicin pblica productos,
servicios, reas de soporte al cliente, y en general cualquier informacin de la
empresa. La informacin que las empresas y personas ponen a disposicin pblica a
travs del Web, est en un lenguaje especialmente diseado para esto, llamado
universalmente HTML (HyperText Markup Languaje). El mismo est siendo adoptado
como el estndar universal para la creacin y distribucin de informacin no slo en
ambientes pblicos, sino tambin en los entornos privados al interior de las compaas
y las corporaciones.
1.1.2- Qu es HTML?
Para publicar informacin y distribuirla globalmente, se necesita un lenguaje entendido
universalmente, una especie de lengua franca de publicacin que todas las
computadoras puedan comprender potencialmente. El lenguaje de publicacin usado
por la World Wide Web es el HTML (acrnimo de HyperText Markup Language,
Lenguaje para el Formato de Documentos de Hipertexto).
El HTML da a los autores las herramientas para:
Publicar documentos en lnea con encabezados, textos, tablas, listas, fotos, etc.
Obtener informacin en lnea a travs de vnculos de hipertexto, haciendo clic
con el botn de un ratn.
Disear formularios para realizar transacciones con servicios remotos, para
buscar informacin, hacer reservas, pedir productos, etc.
Incluir hojas de clculo, video clips, sonidos, y otras aplicaciones directamente
en sus documentos.
1.1.5- Estndares
Los estndares son reglas formales que deben pasar un examen riguroso por un
comit. En caso del HTML, dicho comit se refiere al World Wide Web Consortium
(W3C). Este grupo, es el cuerpo gubernamental de expertos acadmicos, profesionales
e industriales que estudian, comentan, y finalmente determinan lo que debe ser
publicado como un estndar.
Los estndares son importantes, son las guas con las cuales los navegadores as como
codificadores de HTML deberan estar trabajando. De todas formas, hay una mala
interpretacin con el HTML, donde algunos estndares no podran mantener los
cambios, as que se han excedido con ellos. Esto significa que las codificaciones,
usando el HTML para hacer diseos en todas las plataformas y todos los navegadores,
deberan de trabajar alrededor de un estndar que les asegurara y usara mtodos
convencionales para crear sitios Web efectivos.
Una convencin es simplemente una forma comn de hacer una tarea en particular. A
diferencia de un estndar, el cual formaliza la forma en que el grupo de la comunidad
responde a la informacin dentro del estndar, una convencin es el reflejo de las
prcticas de esa comunicad.
Un desarrollo interesante de este tipo de evolucin y las reglas formalizadas del comit
es que mientras la W3C ha sido el lder creciente en ofrecer sistemas de informacin
de Internet, la Web ha sido, tal como describimos antes, la popularidad del formato.
Algunos temas del consorcio han sido dejados de lado para centrarse ms en las
necesidades de satisfacer a los entusiastas del Web y animar a los desarrolladores para
una mayor flexibilidad. Algunos de los cambios propuestos incluyen mejores en los
protocolos. El HTTP: el mtodo de obtencin del HTML, est siendo tratado para
importantes cambios. Los nuevos cambios propuestos hablan de tecnologas que
mejorarn el diseo y funcionalidad de los sitios Web.
En principio cualquier navegador debera ser capaz de interpretar el HTML 4.0, pero
por si necesitas saber por alguna razn el estndar al que pertenece una etiqueta o
parmetro en particular, se incluir a lo largo de este curso uno de los siguientes
indicadores:
Para fomentar una slida compresin del HTML, miraremos la estructura del lenguaje
propiamente dicho. El funcionamiento de la sintaxis del HTML es anlogo a la sintaxis
de la gramtica espaola, pero, por supuesto, mucho ms sencillo.
Para comprender el concepto de sintaxis, piense en una frase, esta tiene un sujeto y
un verbo. Los adjetivos y los adverbios se aaden para aportar cualidades y
comportamiento, haciendo la frase ms comprensiva. El HTML es, en el fondo,
parecido a una simple frase. De hecho, los componentes del HTML siguen el mismo
concepto de sujeto, verbo y adjetivos/adverbios.
1.2.1- Etiquetas
Lo primero que hay que saber es el funcionamiento de los documentos HTML, que
significa Hyper Text Markup Language. Son lneas de texto modificadas con unas
marcas, llamadas etiquetas o tags.
Las etiquetas que encierran el texto son la de apertura <xxx> y la de cierre </xxx>.
Fjate cmo no hay espacios entre los signos de mayor y menor, y el lugar y la
orientacin de la barra diagonal en la etiqueta de cierre. Hay etiquetas que requieren
la de cierre (como <A> y </A>, otras que pueden tener etiqueta de cierre o no (como
<P>, que no siempre requiere </P>) y otras que no llevan nunca etiqueta de cierre
(como <IMG>, la cual jams lleva </IMG>). Para saber cundo se quiere etiqueta de
cierre, necesitars conocer todas y cada una de ellas, lo irs aprendiendo con la
experiencia.
1.2.2- Atributos
Los atributos modifican las acciones de las etiquetas. Muchas etiquetas pueden
permanecer solas, mientras que otras necesitan un atributo para darles funcionalidad.
Por ejemplo, <HTML> nunca lleva atributos, mientras que <BODY> puede llevarlos o no
(por ejemplo, <BODY BGCOLOR...>).
Ten en cuenta que los atributos siempre van en la etiqueta de apertura, nunca en la de
cierre. Es absurdo poner algo del estilo de </BODY BGCOLOR...>.
1.2.3- Valores
Definen el atributo al que se lo hemos aplicado. El valor puede ser una palabra (por
ejemplo <P ALIGN="center">...</P>) o un nmero de pixels o porcentaje (como en
<TABLE WIDTH="40%" HEIGHT="500">...</TABLE>). A veces un nmero no define un
nmero de pixels concreto, por ejemplo, al cambiar el tamao de las fuentes (<FONT
SIZE="5">...</FONT>) el nmero es simplemente orientativo, no tiene ninguna
relacin con el tamao final, y a veces puede ser en formato hexadecimal (16
nmeros, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F...), como en <FONT
COLOR="#FF0000">...</FONT>. Podrs conocer el funcionamiento de estos nmeros
ms adelante, cuando expliquemos los atributos que los requieren.
<HTML>
<HEAD>
<TITLE>Mi primera pagina</TITLE>
</HEAD>
<BODY>
<CENTER><H1>Mi Primera pagina</H1></CENTER>
<HR>
<P>Esta es mi primera pagina (chispas). Por el
momento no se que tendra, pero dentro de poco
pondre aqui muchas cosas interesantes.
</BODY>
</HTML>
Un documento HTML tiene una estructura que lo separa en dos partes: cuerpo y
cabecera. La parte contenida entre las etiquetas <HEAD> y </HEAD> o cabecera, que es
donde se introduce el ttulo de la pgina (dentro de <TITLE> y </TITLE>, que se
mostrar en la barra de ttulo de la ventana del explorador), las etiquetas <META> (que
nos servirn principalmente para dar de alta nuestra pgina en los buscadores de una
forma eficiente), los Scripts (para dar un funcionamiento dinmico a la pgina) y las
Hojas de estilo (un mtodo avanzado de formateado).:
<HEAD>
<TITLE>Mi primera pagina</TITLE>
</HEAD>
En este ejemplo slo incluimos el ttulo de la pgina. Es lo que veremos como ttulo de
la ventana en los navegadores que lo permitan y como se conocer nuestra pgina en
algunos buscadores y en la agenda de direcciones (bookmarks) de los usuarios.
Ahora vamos a indicar el contenido que se encuentra entre las etiquetas <BODY> y
</BODY> o cuerpo, que es donde se introducen los dems elementos que se ven en
pantalla, como texto, imgenes, tablas, enlaces, formularios..., as como el color del
fondo o de los diferentes tipos de texto. Lo primero ser indicar que estamos en el
cuerpo del documento:
<HR>
<HTML>
<HEAD>
..
</HEAD>
<BODY>
..
</BODY>
</HTML>
1.2.5- Simetra
Poner las etiquetas en el orden correcto nos permitir una edicin del documento ms
rpida y efectiva
<I><B>Hola</B></I>
Habrs observado en el ejemplo anterior, que en los textos de los mismos no hay
acentos, ni ees, ni smbolos de abrir interrogacin o exclamacin. Esto es debido a los
distintos juegos de caracteres que manejan los ordenadores.
Las mquinas manejan la informacin en formato binario (es decir, en unos y ceros).
Estos, a su vez, forman nmeros, los cuales se traducen en letras. Cmo? Mediante
tablas. Podemos asignar el valor 64 a la letra a, el 65 a la b, etc
El HTML 2.0 eligi como tabla estndar la ISO-Latin-1, que comparte con la ASCII los
127 caracteres e incluye unos cuantos ms hasta el nmero 255.
La manera de incluir los caracteres extendidos (cuyo nmero est ms all del 127)
consiste en encerrar el cdigo entre los caracteres &# y ;. As pues, lo siguiente:
½
nos debera dar un medio (). Tambin existe una serie de sinnimos para poder
recordar con ms facilidad estos caracteres. As, por ejemplo, ½ tambin se
puede escribir como ½. Vamos a ver algunos de estos cdigos, los ms tiles a
la hora de escribir en espaol:
Cdigo Resultado
á, Á, é,
, , , , , , , , y
É,...
y y
¿
¡
º
ª
™ o ™ o
©
®
(espacio en blanco que no puede ser usado para
saltar de lnea)
Este apartado puedes saltearlo si quieres, basta que sepas que todos los visores de
pginas Web actuales soportan todos los caracteres grficos de la especificacin ISO
8859-1, que permiten escribir textos en la mayora de los pases occidentales. Si tienes
que insertar en tu pgina Web algn carcter fuera de lo normal, lee este apartado.
Carcter Cdigo Entidad Carcter Cdigo Entidad Carcter Cdigo Entidad Carcter Cdigo Entidad
! ! -- " " -- # # -- $ $ --
% % -- & & -- ' ' -- ( ( --
) ) -- * * -- + + -- , --
- - -- . . -- / / -- : : --
; ; -- < < -- = = -- > > --
? ? -- @ @ -- [ [ -- \ \ --
] ] -- ^ ^ -- _ _ -- ` ` --
{ { -- | | -- } } -- ~ --
&   nbsp ¡ iexcl ¢ cent £ pound
¤ curren ¥ yen ¦ brvbar § Sect
¨ uml (c) © copy ª ordf « laquo
¬ not ­ shy (r) ® reg ¯ macr
° deg ± plusm ² sup2 ³ sup3
´ acute µ micro ¶ para · middot
¸ cedil ¹ sup1 º ordm » raquo
1/4 ¼ frac14 1/2 ½ frac12 3/4 ¾ frac34 ¿ iquest
À Agrave Á Aacute  Acirc à Atilde
Ä Auml Å Aring Æ AEling Ç Ccedil
È Egrave É Eacute Ê Ecirc Ë Euml
Ì Igrave Í Iacute Î Icirc Ï Iuml
Ð Eth Ñ Ntilde Ò Ograve Ó Oacute
Ô Ocirc Õ Otilde Ö Ouml × times
Ø Oslash Ù Ugrave Ú Uacute Û Ucirc
Ü Uuml Ý Yacute Þ Thorn ß szlig
à agrave á aacute â acirc ã atilde
ä auml å aring æ aeling ç ccedil
è egrave é eacute ê ecirc ë euml
ì igrave í iacute î icirc ï iuml
ð eth ñ ntilde ò ograve ó oacute
ô ocirc õ otilde ö ouml ÷ divide
ø oslash ù ugrave ú uacute û ucirc
ü uuml ý yacute þ thorn ÿ yuml
En el HTML existen cuatro caracteres de control, que se usan para formar etiquetas,
establecer parmetros, etc... Para poder emplearlos sin riesgo deberamos escribir los
siguientes cdigos:
Cdigo Resultado
< <
> >
& &
" "
Si se quiere poner el carcter < en el texto deberan usar < (ASCII decimal 60)
para evitar la posible confusin con el comienzo de una etiqueta (delimitador de
apertura de etiqueta inicial). Anlogamente, se debera usar > (ASCII decimal 62)
en el texto en lugar de > para evitar problemas con agentes de usuario antiguos que
lo interpretan incorrectamente como el final de una etiqueta (delimitador de cierre de
una etiqueta) cuando aparece dentro de valores de atributos entrecomillados.
Se debe usar & (ASCII decimal 38) en lugar de & para evitar la confusin con el
comienzo de una referencia de caracteres (delimitador de apertura de una referencia a
entidades). Se debera usar tambin & en valores de atributos, ya que las
referencias de caracteres estn permitidas dentro de valores de atributos CDATA.
Algunas veces se usa la referencia a entidades de caracteres " para codificar las
comillas dobles ("), ya que este carcter puede utilizarse para delimitar los valores de
los atributos.
<IMG SRC="hola.gif">
El uso de los espacios de esta manera < IMG SRC = " hola.gif " > o de esta otra
<IMGSRC="hola.gif"> es totalmente incorrecto. El nico espacio debe estar situado
entre etiqueta/atributo y atributo_con_valor/atributo_con_valor. Por ejemplo:
Si queremos poner lo segundo, con cuatro espacios en blanco entre medio habr que
poner:
Y, para finalizar:
Se pueden establecer varias categoras dentro de las etiquetas usadas para brindarle
formato el texto. Nosotros las dividiremos entre aquellas que sirven para cambiar
prrafos enteros y las que son capaces de formatear lneas de caracteres dentro del
prrafo.
Las etiquetas de prrafo <P> nos servirn para iniciar un nuevo prrafo de texto. No
necesita la etiqueta </P> al final si no estn alineados de ninguna manera. Los
prrafos pueden alinearse. En este caso s que necesitan su correspondiente etiqueta
de cierre </P>. Son las siguientes:
<P ALIGN="JUSTIFY"> Para alinear el texto a los dos mrgenes. Es ignorado por
muchos navegadores, pero algunos no, como el Explorer 4.0.
Si se quiere hacer un salto de lnea o retorno de carro, habr que usar la etiqueta
<BR>. Por ejemplo:
<P>Esto<BR>es un prrafo
Se vera as:
Esto
es un prrafo
Dos <BR> equivalen a un <P>. Estos dos ejemplos retornan el mismo resultado:
1) <P>Esto es un prrafo
<P>Esto es otro
2) <P>Esto es un prrafo<BR><BR>
Esto es otro
1.4.2- Cabeceras
Sirven para poner ttulos en nuestras pginas. Van entre las etiquetas <Hx> y </Hx>,
donde x en un nmero del 1 al 6. El 1 es la fuente de mayor tamao y 6 la de menor.
El que corresponde al tamao estndar del texto es 3. Estos nmeros no tienen nada
que ver con el nmero de pxeles ni con los nmeros de la etiqueta <FONT> que
veremos posteriormente.
Etiqueta Resultado
Estas etiquetas se pueden definir como de formato de prrafo pero por su importancia
he preferido tratarlas aparte. No resulta recomendable utilizarlas para aumentar o
disminuir el tamao del tipo de letra, ya que cada navegador los muestra de manera
diferente. Se usan para dividir correctamente en secciones nuestra pgina, tal y como
se hace en un documento de texto normal.
Todas estas etiquetas nos permiten cambiar de una manera u otra el aspecto del tipo
de letra que estemos utilizando y se pueden utilizar con tiras de caracteres dentro de
un prrafo.
En estos elementos indicas el tipo de informacin que encierran las etiquetas, pero no
como se representan:
<KBD> ... </KBD> Indica texto que debe ser El usuario debe teclear
introducido por el usuario. Multivac es el mejor.
Indica que el texto es una
La variable x, definida
<VAR> ... </VAR> variable o un argumento
anteriormente...
de un programa.
Para representar una serie
<SAMP> ... </SAMP> de caracteres Estoy en un literal
literalmente.
Indica una forma
La WWW usa el protocolo http
<ABBR> ... </ABBR> abreviada.
EM y STRONG se usan para indicar nfasis. Los dems elementos de frase tienen
significados particulares en documentos tcnicos.
Estos elementos no son muy utilizados, ya que no permiten tener un control exacto de
la manera en que la pgina se representar finalmente.
Por ltimo, debemos estudiar algunas cosas que no son texto y que podemos
incorporar a nuestra pgina.
La instruccin <HR> muestra una lnea horizontal de tamao determinable. Utilizada sin
ningn parmetro mostrara una lnea horizontal que ocupara todo el ancho de la
pgina. Tiene los siguientes parmetros opcionales:
1.5 ENLACES
Las siglas HTML significan HyperText Markup Language, lo que para nosotros quiere
decir que es un lenguaje para hipertexto. Existen mltiples formatos de hipertexto (por
ejemplo, los ficheros de ayuda de Windows) y lo que tienen en comn es que todos
poseen enlaces.
Un enlace es una zona de texto o grficos que si son seleccionados nos trasladan a
otro documento de hipertexto o a otra posicin dentro del documento actual. Siendo
HTML el lenguaje de Internet, la diferencia que posee con respecto a otros tipos de
hipertexto es que ese otro documento puede estar fsicamente en la otra punta del
planeta. Son los enlaces lo que hacen de la telaraa o World Wide Web lo que es.
Los enlaces son la esencia del Web. Sin ellos, el concepto se vera reducido a una
publicacin de documentos de texto en Internet. Los enlaces te llevan ms all del
trabajo encasillado de un nico documento, para trabajar en varios documentos
relacionados.
Un vnculo tiene dos extremos (llamados en ingls anchors, anclas) y una direccin. El
vnculo comienza en el "ancla de origen" (origen del vnculo) y apunta al "ancla
destino" (destino del vnculo), que puede ser cualquier recurso de la Web (p.ej., una
imagen, un video clip, un archivo de sonido, un programa, un documento HTML, un
elemento dentro de un documento HTML, etc.).
Para incorporar un enlace hay que utilizar esta etiqueta. Todo lo que encerremos entre
<A> y </A>, ya sea texto o imgenes, ser considerado como enlace y sufrir dos
modificaciones:
Para que el enlace sirva para algo debemos especificarle una direccin. Lo haremos de
la siguiente manera:
CUIDADO
Puedes poner enlaces a otros sitios WEBs siempre que conozcas la direccin correcta. La inmensa
mayora de gente agradecer que les pongas enlaces. De todas formas, hay algunos sitios que quieren
saber quines les enlazan y porqu. En caso de duda, pide permiso antes de hacer el enlace.
Para ello debemos marcar en nuestra pgina las diferentes secciones en las que se
divide, insertando para ello los llamados Marcadores. Lo haremos con el parmetro
name:
<A name="seccin1"></A>
Esta instruccin marca el inicio de una seccin dentro de nuestra pgina. La seccin se
llamar seccin1. Para hacer un enlace que salte al marcador de esta seccin dentro
de nuestra pgina lo haramos de la siguiente forma:
CUIDADO
Mientras que el uso de marcadores es muy recomendable y a veces imprescindible para organizar el
contenido dentro de una pgina, es importante mantener la longitud de las pginas en un tamao
razonable. Seguramente habrs visto pginas en Internet que se desplazan varias pantallas hacia abajo,
en ese caso, la solucin no es poner marcadores, sino fragmentar la pgina larga en pginas ms cortas.
Procura que tus pginas no excedan de los 30 kb de tamao. Esto har felices a tus navegantes.
Tambin un enlace puede hacerse a cualquier tipo de archivo. Hemos visto cmo hacer
enlaces a pginas Web o secciones dentro de una pgina Web, pero podramos hacer
un enlace a un grupo de noticias:
Una forma muy conveniente de que los navegantes contacten contigo es ofreciendo un
enlace a tu direccin de e-mail. Puede hacerse con la etiqueta anchor y una referencia
conocida como naukti.
Tambin es posible decidir el "asunto" del mensaje, de forma que nos manden siempre
mensajes con el mismo asunto (puede ser muy til si se reciben muchos e-mails al da,
por ejemplo:
TRUCO
Hay otras formas de conseguir que los navegantes contacten contigo a travs de la pgina. Los
formularios es una forma muy popular de hacer esto. Para ms informacin acerca de ellos, mira el captulo
"Formularios" y el captulo "Scripting y preprocesamiento CGI".
Con el siguiente ejemplo puedes permitir a tus visitantes que descarguen archivos a su
ordenador pues el navegador intentar ejecutar el archivo y, si no puede hacerlo,
como sera el caso de un archivo comprimido, preguntar al visitante si desea grabarlo
en su ordenador.
Una URL nos indica tanto una direccin de Internet como el servicio que esperamos
nos ofrezca el servidor al que corresponde la direccin. Tiene el siguiente formato:
servicio://mquina:puerto/ruta/fichero@usuario
http
Es el servicio invocado para transmitir pginas web y el que usaremos
normalmente en los enlaces.
https
La direccin de la mquina puede ser, o bien una serie de cuatro nmeros entre 0 y
255 (123.3.5.65) o bien algo ms fcil de recordar como es una serie de palabras
separadas por puntos (www.programacion.net). El puerto generalmente no se indica,
ya que el servicio predetermina uno que es el 80.
ruta_relativa/archivo
En la ruta relativa podremos utilizar los dos puntos (..) para acceder al directorio padre
o comenzar con la barra diagonal (/) para acceder a una ruta absoluta dentro de
nuestro ordenador, como veremos en el siguiente punto.
Al escribir la URL completa, se refiere a un enlace absoluto. Esto significa que se utiliza
la ruta completa del enlace destino, no slo una parte de l. Debe incluir la palabra
inicial http:// seguida del nombre del dominio. Si no especificamos ningn nombre de
archivo, nos llevar a la pgina inicial por defecto del sitio Web.
http://www.yahoo.com/
Los enlaces absolutos son importantes cuando se enlazan Webs que no son de nuestra
propiedad, en otras palabras, sitios que estn hospedados en otros servidores. Por
ejemplo, si se quiere poner un enlace al Web de AMD, sera:
Ir al <A HREF="http://www.amd.com">AMD</A>
Este enlace lleva a la pgina de inicio por defecto de AMD. En cambio, si hay una
pgina especfica dentro del sitio Web a la que queremos acceder, se puede agregar el
nombre del archivo de dicha pgina:
CUIDADO
Los enlaces relativos nos permiten enlazar pginas situadas en un mismo servidor.
Estos archivos pueden estar en el mismo directorio o cada uno de ellos en un directorio
distinto.
Si ests pensando enlazar una pgina con otra dentro de un sitio Web y ambas residen
en un mismo directorio, debes especificar en HREF solamente el nombre del archivo:
../ Directorio/
Todos los ejemplos de enlace hasta aqu han sido mediante texto. En otras palabras, lo
que est "activo" es el texto. Pero esto no es slo as, tal como comentamos antes,
puede enlazarse cualquier tipo de objeto, particularmente las imgenes.
Te dars cuenta de que hay un borde alrededor de la imagen, indicando que est
enlazada. Esto es casi siempre poco esttico, para quitarlo o modificar su grosor
tendrs que aadir el atributo BORDER dentro de la etiqueta IMG. (Mira el punto
"Trabajando con imgenes"). Para eliminarlo el valor de BORDER debe ser 0.
1.6 LISTAS
HTML ofrece varios mecanismos para especificar listas de informacin. Todas las listas
deben contener uno o ms objetos de lista. Las listas pueden contener:
Informacin no ordenada.
Informacin ordenada.
Definiciones.
<tipo_lista>
<LI>Primer elemento
<LI>Segundo elemento
</tipo_lista>
La etiqueta <UL> nos permite presentar listas de elementos sin orden alguno. Cada
elemento de la lista ir normalmente precedido por un crculo. Por ejemplo,
<UL>
<LI>Primer elemento
<LI>Segundo elemento
</UL>
se ver como
Primer elemento
Segundo elemento
Tipo disc
TYPE="disc", Indica al navegador el dibujo que preceder
o Tipo circle
"circle", a cada elemento de la lista. Para mayor
Tipo
flexibilidad se admite tambin como
"square" square
parmetro de <LI>.
Tambin son listas desordenadas aquellas que utilizan las etiquetas <DIR> y <MENU>.
En principio tenan como propsito representar una lista estilo directorio
(multicolumna) o tipo men (una sola columna). En la prctica los navegadores lo han
implementado como sinnimos de <UL>, por lo que no los estudiaremos aqu.
<OL>
<LI>Primer elemento
<LI>Segundo elemento
</OL>
se ver como
1. Primer elemento
2. Segundo elemento
1. Tipo 1
Indica al navegador el tipo de numeracin b. Tipo a
TYPE="1", "a",
que preceder a cada elemento de la lista. C. Tipo A
Para mayor flexibilidad se admite tambin iv. Tipo i
"A", "i", "I"
como parmetro de <LI>. V. Tipo I
3. Primer
elemento
Indica al navegador el nmero por el que se
4. Segundo
START="num" empezar a contar los elementos de la lista.
elemento
1. Primer
elemento
Este es el nico tipo de lista que no utiliza la etiqueta <LI>. Al tener como objetivo
presentar una lista de definiciones, de modo que tiene que representar de manera
distinta el objeto definido y la definicin. Esto se hace por medio de las etiquetas <DT>
y <DD>:
<DL>
<DT>Primer elemento<DD>Es un elemento muy bonito.
<DT>Segundo elemento<DD>Este, en cambio, es peor.
</DL>
se ver como
Primer elemento
Es un elemento muy bonito.
Segundo elemento
Este, en cambio, es peor.
La etiqueta <DL> slo admite como parmetro el ya conocido COMPACT, que tiene el
mismo comportamiento que los otros dos tipos de lista anteriores.
Existen dos tipos de listas menos comunes. Las listas de Men o Directorio, las que se
comportan igual que las listas sin numerar. La lista de Men utiliza la etiqueta <MENU>
... </MENU> y los elementos se anteceden de <LI>, el resultado es una lista sin
numerar ms "compacta" es decir, con menos espacio interlineal entre los elementos.
La lista de Directorio utiliza la etiqueta <DIR> ... </DIR> y los elementos se
anteceden de <LI>, los elementos tienen un lmite de 20 caracteres.
1.7 IMGENES
<IMG>
de esta manera:
El parmetro SRC especifica el nombre del fichero que contiene el grfico. Los
formatos estndar en la red son el GIF y el JPG. Las ltimas versiones de Netscape y
Explorer aceptan tambin el formato PNG.
El parmetro ALT especifica el texto que se mostrar en lugar del grfico en aquellos
navegadores que no sean capaces de mostrarlos (como el Lynx) y en el supuesto de
que el usuario los haya desactivado. Algunos navegadores lo muestran cuando
pasamos el ratn por encima de la imagen. Es por eso que, aunque algunos usuarios
no lo lleguen a ver nunca, conviene ponerlo siempre. De hecho, el estndar HTML 4.0
obliga a hacerlo.
Existen dos atributos que, aunque opcionales, conviene indicar siempre: la altura y el
amcho del grfico en pixels. De este modo, el navegador puede mostrar un recuadro
del tamao de la imagen mientras la va leyendo de la red y as poder mostrar el resto
de la pgina correctamente mientras tanto.
Se ve as:
Para poder modelar conjuntamente texto y grficos, el HTML proporciona, por medio
del parmetro ALIGN, las siguientes maneras de alinear una imagen respecto del texto
que la acompaa:
Hay que aclarar que la base del texto es la lnea donde descansan casi todas las letras
del alfabeto excepto algunas como la p, la g o la j.
El tamao de los archivos grficos en una pgina Web debe ser pequeo para
optimizar el tiempo de descarga de la pgina. Si ustedes abren la imagen en algn
editor como PhotoShop o el Microsoft Opto Editor, debern elegir ver la imagen al
100% para saber cual es el tamao real de la imagen que se ver en la pgina. Con
esto lograrn un mayor control de la misma.
Otro punto importante es que nunca es conveniente insertar una imagen grande y
luego achicarla mediante los manejadores de la misma (los pequeos cuadraditos que
aparecen en los bordes para cambiar el tamao), ya que si hacemos esto, se achica la
imagen que se ve en pantalla pero no el tamao del archivo.
Una imagen puede valer ms que mil palabras, pero vale 10 segundos de tiempo de
descarga? Hgase esta pregunta antes de aadir una imagen al sitio Web. Los grficos
Web de hoy en da son casi todos archivos .jpg o .gif. La eleccin del tipo de archivo
influir mucho en el tamao del grfico.
Foto original (200 x 161 pxeles) 10 KB, 12 segundos Al 20% de compresin 8 KB, 5 segundos
Como puede ver, a una compresin del 20%, el archivo se reduce a menos de la mitad
del original y el tiempo de descarga tambin es menos de la mitad. Con una
compresin del 70%, sigue sin haber una degradacin considerable de la imagen y el
tiempo de descarga se reduce en gran medida. A una compresin del 90%, las bandas
de color son visibles y, aunque el archivo ocupa la mitad que uno comprimido al 70%,
el tiempo de descarga es slo 1 segundo menos. La compresin al 90% no presenta
ninguna ventaja.
El formato de archivo GIF funciona mejor con grficos que contienen un nmero
limitado de colores y constan de lneas o texto. Los archivos en formato GIF suelen
descargarse rpidamente, ya que normalmente contienen 256 colores, el mismo
nmero de colores que muestran muchos equipos. Si convierte una imagen de formato
JPEG a formato GIF, perder la informacin de color.
En el formato GIF, los colores se guardan en filas horizontales. Las reas que
contienen colores slidos se comprimen a la proporcin mxima. Los colores
organizados horizontalmente producen archivos ms pequeos y descargas ms
rpidas. Por ejemplo, un archivo que contiene dos listas de colores horizontales ocupa
menos de la mitad de un archivo que contiene dos listas de colores verticales.
Realice siempre una copia del original antes de llevar a cabo ninguna accin.
No comprima nunca un archivo que ya se haya comprimido. Por ejemplo, si
desea comprimir una imagen de 100 KB a 20 KB, obtendr mejores resultados
comprimiendo directamente de 100 KB a 20 KB que comprimiendo primero de
100 KB a 50 KB y, a continuacin, a 20 KB.
Si desea utilizar un grfico de gran tamao, plantese la creacin de una
miniatura que lleve mediante un enlace, al grfico del tamao completo.
Utilice slo tantos colores como puedan ver los usuarios. Si los equipos de los
usuarios pueden mostrar slo color de 8 bits, no utilice ms de 256 colores.
Lo ideal cuando trabajamos con texto es poder cambiarle el tamao para adecuarlo
con el diseo general del sitio, cambiarle los colores y la fuente de la misma. Todo esto
puedes hacerlo gracias a la etiqueta <FONT>.
El parmetro utilizado para indicar el tamao es SIZE. Puede utilizarse para indicar
tamaos absolutos:
<FONT COLOR="#FF0000">D</FONT>
<FONT COLOR="#EF0000">E</FONT>
<FONT COLOR="#DF0000">G</FONT>
<FONT COLOR="#CF0000">R</FONT>
<FONT COLOR="#BF0000">A</FONT>
<FONT COLOR="#AF0000">D</FONT>
<FONT COLOR="#9F0000">A</FONT>
<FONT COLOR="#8F0000">D</FONT>
<FONT COLOR="#7F0000">O</FONT>
Por ltimo, podemos especificar el nombre del tipo de letra que queremos utilizar
gracias al parmetro FACE. Como en principio no tenemos manera de saber que tipo
de letra tiene instalado el ordenador del usuario que est viendo nuestras pginas,
podemos indicar ms de uno separado por comas. Si el navegador no encuentra
ninguno seguir utilizando el que tiene por defecto:
tipo de documento
<HTML>
<HEAD>
<TITLE>titulo de la pgina</TITLE>
cosas que afectan a la pgina pero no a su contenido
</HEAD>
<BODY parmetros>
contenido de la pgina
</BODY>
</HTML>
1.9.1- La cabecera
Suele ser el lugar ms indicado para colocar aquellos elementos de la pgina que no
alteren el contenido de la misma, aunque si la forma de presentarlo y su
comportamiento. Es por eso que es el lugar ms recomendable para colocar los scripts
y las hojas de estilo, como veremos ms adelante.
Adems del ttulo de la pgina, uno de los elementos que se pueden incluir aqu es el
META (Metadatos). Entre otras cosas, sirven para indicar propiedades de la pgina
como pueda ser el nombre de su autor. Por ejemplo,
nos indicara la herramienta con que hemos creado la pgina (en este caso la versin
4.03 en espaol para Windows 95 del Composer de Netscape). Estas son las
propiedades ms comunes:
Propiedad Utilidad
AUTHOR Autor de la pgina.
GENERATOR Herramienta utilizada para hacer la pgina.
Palabras que permite clasificar la pgina dentro de un buscador
CLASSIFICATION
jerrquico (como Yahoo).
KEYWORDS Palabras clave por las que encontrarn la pgina en los buscadores.
DESCRIPTION Descripcin del contenido de la pgina.
Un uso comn de META es especificar palabras claves que pueden usar los motores de
bsqueda para mejorar la calidad de los resultados de una bsqueda. Cuando se
proporcionen varios elementos META con informacin para varios idiomas, los motores
de bsqueda pueden utilizar el atributo LANG como filtro para mostrar los resultados
de la bsqueda usando las preferencias de idioma del usuario. Por ejemplo,
Hay tambin otro elemento interesante que podremos incluir en nuestras cabeceras.
Cuando especificamos una URL relativa en un enlace, en principio es para acceder a
una pgina situada en nuestro mismo servidor. Sin embargo, si especificamos:
<BASE HREF="http://www.hornet.org/music">
Ahora todas nuestras URLs relativas se referirn al directorio /music dentro del
servidor http://www.hornet.org.
1.9.2- El cuerpo
Obviamente no voy a explicar lo que va dentro del cuerpo (prcticamente todo este
captulo intenta hacerlo) sino los parmetros que admite la etiqueta <BODY>:
No resulta recomendable cambiar los colores del texto y enlaces a no ser que exista
alguna dificultad al leerlos por haber cambiado el fondo, ya que en muchas ocasiones
el usuario ha podido cambiarlos en las opciones de su navegador y estarn ya a su
gusto.
1.10 FORMULARIOS
Una de las mayores ventajas de la Web es que resulta tremendamente interactiva. Los
usuarios de una pgina pueden escribirle al autor de la misma para comentarle
cualquier cosa. Sin embargo, si deseamos que nos digan slo unas cosas concretas
(responder a alguna pregunta, seleccionar entre varias opciones, etc...) deberemos
utilizar formularios. Por ejemplo,
se ver as:
Nombre:
Hay dos formas de realizar y/o recibir los formularios: mediante un programa CGI del
servidor o generado por el navegador. Qu son ambas cosas? El programa CGI es uno
que se almacena en el servidor; mediante el formulario enviaremos la informacin al
programa CGI y ste generar el mensaje e-mail que nos llegar. La otra manera es
mediante el navegador, el cual es quien genera el correo.
Todos los elementos de un formulario deben estar encerrados entre <FORM> y </FORM>.
Como parmetros cabe destacar tres. ACTION define el URL que deber gestionar el
formulario. Puede ser una direccin de correo (precedida del inevitable mailto, en
cuyo caso deberemos aadir el parmetro ENCTYPE="text/plain" para que lo que
recibamos resulte legible. Por otro lado, tenemos el parmetro METHOD que define la
manera en que se mandar el formulario. Es recomendable utilizar POST. En el caso de
que estemos mandando el formulario a nuestra direccin de correo electrnico es
obligado usarlo.
get: Con el mtodo HTTP "get", el conjunto de datos del formulario se agrega
al URI especificado por el atributo ACTION (con un signo de interrogacin ("?")
como separador) y este nuevo URI se enva al agente procesador.
post: Con el mtodo HTTP "post", el conjunto de datos del formulario se incluye
en el cuerpo del formulario y se enva al agente procesador.
El mtodo "get" debera usarse cuando el formulario es idempotente (es decir, cuando
no tiene efectos secundarios). Muchas bsquedas en bases de datos no tienen efectos
secundarios visibles y constituyen aplicaciones ideales del mtodo "get". Si el servicio
asociado con el procesamiento de un formulario causa efectos secundario (por
ejemplo, si el formulario modifica una base de datos o la subscripcin a un servicio),
debera usarse el mtodo "post".
NOTA
El mtodo "get" restringe los valores del conjunto de datos del formulario a caracteres ASCII. Slo el
mtodo "post" (con enctype="multipart/form-data") cubre el conjunto de caracteres [ISO10646]
completo.
Ahora vamos a ver uno a uno todos los elementos que podemos incluir en un
formulario. Veremos que todos ellos tienen algo en comn. Como el resultado de
cualquier formulario es una lista de variables y valores asignados a las mismas, todos
ellos tendrn un atributo en comn: el nombre de su variable (NAME).
<INPUT TYPE=TEXT>
El primero nos dibujar una caja donde escribir un texto (de una sola lnea). El
segundo es equivalente, pero no veremos lo que tecleemos en l, solo veremos un *
(asterisco) como carcter. Estos son los atributos para modificarlos:
Parmetro Utilidad
SIZE Tamao de la caja de texto (en caracteres).
MAXLENGTH Nmero mximo de caracteres que puede introducir el usuario.
VALUE Texto por defecto que contendr la caja.
WRAP Justifica el texto automticamente en el interior de la caja. El
valor (phisical) enva las lneas de texto separadas en lneas
fsicas. El valor (virtual) enva todo el texto seguido.
Por otro lado, puede que necesitemos que el usuario pueda introducir ms de una
lnea. En ese caso se utilizar la siguiente etiqueta:
Por defecto
<TEXTAREA>
Por defecto
</TEXTAREA>
Lo que incluyamos entre las dos etiquetas ser lo que se muestre por defecto dentro
de la caja. Admite estos parmetros:
Parmetro Utilidad
ROWS Filas que ocupar la caja de texto.
COLS Columnas que ocupar la caja de texto.
1.10.2- Opciones
Si lo que deseamos es que el usuario decida entre varias opciones podremos hacerlo
de dos modos. El primero es el que vimos en el ejemplo inicial, poniendo el valor
RADIO en el atributo TYPE:
Para asociar varios botones de radio a una misma variable le tenemos que poner a
todos ellos el mismo nombre (NAME). Aparte de esto acepta los siguientes parmetros:
Parmetro Utilidad
VALUE Este es el valor que se le asignar a la opcin.
CHECKED Si lo indicamos en una de las opciones esta ser la que est activada por
defecto.
Pero tambin tenemos una posibilidad que ocupa bastante menos espacio en la
pgina: las listas desplegables. Para emplearlas debemos utilizar dos etiquetas,
<SELECT> y <OPTION>:
<SELECT NAME="Navegador">
<OPTION>Netscape Netscape
<OPTION>Explorer
<OPTION>Opera
<OPTION>Lynx
<OPTION>Otros
</SELECT>
Parmetro Utilidad
SIZE El nmero de opciones que podremos ver. Si es mayor que 1 veremos una
lista de seleccin y, sino, veremos una lista desplegable.
MULTIPLE Si lo indicamos podremos elegir ms de una opcin.
Parmetro Utilidad
VALUE Este es el valor que asignar a la opcin de la lista.
Si lo indicamos en una de las opciones esta ser la seleccionada por
SELECTED
defecto.
Existen dos: uno que se utiliza para mandar el formulario y otro que sirve para
restablecer los objetos a todos los valores iniciales.
Podemos cambiar el texto que el navegador pone por defecto en esos botones
utilizando el parmetro VALUE.
Puede que necesitemos que el usuario sencillamente nos confirme o niegue algo. Lo
podremos conseguir por medio de controles de confirmacin:
Este objeto no es visible para el usuario. De este modo puedo saber de qu formulario
me estn enviando los datos.
El estndar HTML 4.0 ha trado varias mejoras a los formularios, que acercan los
mismos a las caractersticas que tienen en lenguajes como Java o Visual Basic.
Desafortunadamente, el Netscape 4, lanzado al mercado antes de la aprobacin del
HTML 4.0, no implementa ninguna de estas mejoras, por lo que los ejemplos de este
apartado slo sern contemplados correctamente por los usuarios de Explorer 4 y 5 y
los del nuevo Netscape 6.
1.11.1- Botones
Una de las cosas que ms han mejorado son los botones. Ahora disponen de una
etiqueta propia, de modo que se pueda encerrar con ella todo tipo de elementos HTML,
como grficos o, incluso, tablas enteras.
<BUTTON TYPE="button">
<table border="1">
<tr><BR/>
<th>Soy una</th><BR/>
<th>tabla</th> Soy una tabla
</tr>
<tr> que est en un botn
<td>que est</td>
<td>en un botn</td>
</tr>
</table>
</BUTTON>
Los parmetros de dicha etiqueta son los normales, TYPE, que podrn tomar los
valores SUBMIT (por defecto), RESET y BUTTON, NAME y VALUE.
Por otro lado, ahora podemos declarar un grfico como un elemento ms de entrada,
como un nuevo tipo dentro del elemento INPUT:
Este elemento se comportar de mismo modo que un botn de tipo SUBMIT, pero
aadir como informacin en el formulario las coordenadas x e y donde el usuario lo
puls. Esto no se puede hacer con el botn de tipo RESET (botn que limpia todos los
objetos del formulario).
1.11.2- Etiquetas
Hasta hora, el texto que acompaaba a los campos de entrada no estaba asociado a
los mismos de ninguna manera. As, por ejemplo, si pulsbamos en el texto que
acompaaba a un control de confirmacin, no suceda nada. Ahora, en cambio, si
utilizamos la etiqueta LABEL, el control cambiar de estado (slo disponible en
Netscape 5):
<LABEL>
<INPUT NAME="Trabajo" TYPE=CHECKBOX>
Estoy en relacin de dependencia
Estoy en relacin de dependencia
</LABEL>
Lo bueno que tiene es que se puede usar sin peligro, ya que no afectar a los usuarios
de navegadores antiguos.
<FIELDSET>
<LEGEND>Mi hermoso formulario</LEGEND><BR>
<LABEL> Mi hermoso formulario
Mi texto:
<INPUT TYPE="text"> Mi texto:
</LABEL>
</FIELDSET>
LEGEND admite como parmetro ALIGN, que indicar en qu lugar se coloca el ttulo.
Por defecto es TOP (arriba), pudiendo estar tambin abajo (BOTTOM), a la izquierda
(LEFT) o a la derecha (RIGHT).
<LABEL DISABLED>Texto:
<INPUT TYPE=TEXT DISABLED> Texto:
</LABEL>
Cuando deseamos que el control sea de solo lectura, el atributo readonly especfica si
el control puede ser modificado por el usuario.
Cuando est establecido, el atributo readonly tiene los siguientes efectos sobre un
elemento:
El foco puede dirigirse hacia elementos de slo lectura, pero stos no pueden
ser modificados por el usuario.
Los elementos de slo lectura estn incluidos en la navegacin con tabulador.
Los elementos de slo lectura pueden tener xito.
NOTA
La nica manera de modificar dinmicamente el valor del atributo readonly es mediante un script.
En un documento HTML, el usuario debe dirigir el foco hacia un elemento para que ste
se active y realice sus funciones. Por ejemplo, los usuarios deben activar un vnculo
especificado con el elemento <A> para seguir el vnculo especificado. Anlogamente,
los usuarios deben dirigir el foco hacia un TEXTAREA para poder introducir texto en su
interior.
tabindex es el que define el orden en que el foco se dirige hacia los elementos cuando
se navega por medio del teclado. El orden de tabulacin puede incluir diferentes
elementos anidados.
Los agentes de usuario deberan navegar por los elementos a los que puede dirigirse el
foco de acuerdo con las siguientes reglas:
Este valor debe ser un nmero entre 0 y 32767. Los agentes de usuario no deberan
tener en cuenta los ceros a la izquierda.
accesskey le asigna una tecla a un elemento, cuando se presiona dicha tecla el foco se
dirige hacia el elemento. La accin que tiene lugar cuando el foco se dirige hacia un
elemento depende del elemento. Por ejemplo, cuando un usuario activa un vnculo
definido por el elemento <A>, el agente de usuario (dispositivo que interpreta los
documentos HTML) normalmente sigue el vnculo. Cuando un usuario activa un
radiobotn, el agente de usuario cambia el valor del radiobotn. Cuando el usuario
activa un campo de texto, ste permite la entrada de texto, etc.
que se aplique la tecla de acceso. Los agentes de usuario deberan representar las
teclas de acceso de tal modo que se enfatice su papel y se distinga de otros caracteres
(p.ej., subrayndola).
1.12 MAPAS
Hemos visto que podemos hacer enlaces de texto y de grficos. Pero tambin existe
otra posibilidad: que dentro de una sola imagen podamos acceder a varios enlaces. Se
hace declarando zonas dentro de la imagen (rectngulos, crculos, etc...), siendo cada
una de ellas un enlace distinto. Tradicionalmente, siempre han existido dos maneras
de hacerlo:
Los segundos fueron los primeros en desarrollarse y estaban incluidos dentro del
estndar HTML 2.0. Sin embargo, nunca hubo una manera comn de gestionar esos
mapas. Debido a ello, Netscape elabor un sistema propio que fue incluido en el
estndar 3.2: los mapas gestionados por el navegador.
Para utilizarlos necesitaremos dos cosas: declarar el mapa y asignarlo a una imagen.
Vamos primero a declarar nuestro mapa:
<MAP NAME="mi_mapa">
<AREA SHAPE=... COORDS=... ALT="Enlace a..">
...
</MAP>
Dentro de la etiqueta MAP slo definiremos el nombre del mapa (algo imprescindible,
por otra parte). Es dentro de cada elemento AREA donde podremos definir cosas ms
interesantes:
Parmetro Utilidad
SHAPE Define la forma de la zona, que podr ser rectangular, circular o poligonal.
Coordenadas (separadas por comas) que definen la zona. El nmero y
COORDS
significado de esas coordenadas depender de la zona.
HREF URL a donde ir el usuario si pulsa sobre esa zona.
NOHREF Especifica que esa zona no tiene asignado enlace alguno.
Como vemos, para declarar correctamente una zona necesitamos conocer cmo se
definen exactamente las formas y coordenadas:
Ahora que hemos definido un mapa, slo queda asignarlo a una imagen. Esto se hace
del siguiente modo:
Siempre tenemos que aadir al comienzo del nombre de nuestro mapa una almohadilla
(#). Vamos a ver un ejemplo:
<MAP NAME="navegadores">
<AREA SHAPE=RECT COORDS="0,0,24,31"
HREF="http://www.netscape.com" ALT="Netscape">
<AREA SHAPE=RECT COORDS="26,0,53,31"
HREF="http://www.microsoft.com" ALT="Microsoft">
<AREA SHAPE=DEFAULT NOHREF ALT="Nada">
</MAP>
<IMG SRC="nav.gif" WIDTH=53 HEIGHT=31 BORDER=0 USEMAP="#navegadores">
Se ve as:
Hay que tener en cuenta que, cuando dos zonas se solapan, la que est declarada
primero es la que tiene preferencia. Por eso declaramos al final una zona que no
conduce a ningn URL por si el usuario pulsa con el ratn donde no debe.
1.13 TABLAS
<TABLE>
<TR>
<TD>1,1</TD>
<TD>1,2</TD>
<TD>1,3</TD>
</TR> 1,1 1,2 1,3
<TR> 2,1 2,2 2,3
<TD>2,1</TD>
<TD>2,2</TD>
<TD>2,3</TD>
</TR>
</TABLE>
Como se puede observar, la tabla no tiene mucho aspecto de tabla. Quedara mejor
con unos bordes, no? Puede que tampoco le fuera mal otorgarle mayor espacio entre
celdas o mayor ancho. Estas son las cosas que podremos cambiar con los atributos que
posee una tabla:
Si ahora, por ejemplo definimos la tabla anterior como <TABLE BORDER=1 WIDTH="50%"
ALIGN=CENTER> veremos lo siguiente:
Ahora que hemos definido la tabla nos toca hacer lo mismo con las filas. Cada fila se
define con una etiqueta TR, que tiene los siguientes atributos:
Por ltimo, nos queda definir cada celda gracias a la etiquetas TD y TH. Estas etiquetas
son equivalentes, pero la ltima se utiliza para encabezados, de modo que todo lo que
se escriba dentro de esta celda por defecto estar en negrita y centrado. Estos son los
atributos de ambas:
Posiblemente los dos ltimos parmetros no puedan quedar claros sin ejemplos. De
hecho, an entendiendo perfectamente su funcin es habitual que confundamos a uno
con otro. Pero bueno, vamos a ver una tabla de 3x3 con una celda que se une a una
de la derecha y otra que se une a otra de debajo:
<TABLE BORDER=1>
<TR>
<TD COLSPAN=2>1,1 y 1,2</TD>
<TD>1,3</TD>
</TR>
<TR>
<TD ROWSPAN=2>2,1 y 3,1</TD>
1,1 y 1,2 1,3
<TD>2,2</TD> 2,2 2,3
<TD>2,3</TD> 2,1 y 3,1
</TR> 3,2 3,3
<TR>
<TD>3,2</TD>
<TD>3,3</TD>
</TR>
</TABLE>
Como vemos, cuando declaramos una celda con ROWSPAN o COLSPAN, no deberemos
declarar las celdas "absorbidas" o la creacin de la tabla se nos complicar de horrible
manera.
Por ltimo, veremos como definir un ttulo para la tabla. Esto se hace por medio de la
etiqueta CAPTION. Para ver cmo funciona, vamos a incluirlo en la declaracin de la
tabla anterior:
Esta etiqueta admite slo un parmetro: ALIGN, que es por defecto TOP, ubicando el
texto en la parte superior de la tabla. Si lo definimos como BOTTOM el ttulo se colocar
al final de la tabla en lugar del comienzo.
1.14 MARCOS
<HTML>
<HEAD>
<TITLE>Mi primera pgina con marcos</TITLE>
</HEAD>
<FRAMESET COLS="20%,80%">
<FRAME NAME="indice" SRC="indice.html">
<FRAME NAME="principal" SRC="introduccion.html">
<NOFRAMES>
<P>Lo siento, pero slo podrs ver esta pgina
si tu navegador tiene la capacidad de visualizar
marcos.</P>
</NOFRAMES>
</FRAMESET>
</HTML>
Dentro del <FRAMESET> se hacen dos cosas. Primero, definir cada uno de los marcos
ponindoles un nombre y especificando qu archivo HTML (puede ser ASP, PHP, y
otros) le corresponde mediante la etiqueta <FRAME>. Por ltimo, especificamos lo que
ver el usuario en el supuesto (cada vez ms raro) de que su navegador no soporte
FRAMES dentro de la etiqueta <NOFRAMES>. Ahora veremos todos estos elementos en
mayor detalle.
Segn el estndar, esta etiqueta slo debera contener el nmero y tamao de cada
marco, pero las extensiones de Netscape y Explorer al estndar obligan a estudiar un
par de parmetros ms.
Cuando se elimina ese borde, podrs ver cmo el navegador deja an un espacio entre
los marcos. Este se hace aadiendo los parmetros FRAMESPACING=0 BORDER=0.
Vamos a examinar por ltimo los parmetros COLS y ROWS. Deberemos asignarles una
lista de tamaos separada por comas. Se admiten los siguientes formatos de tamao:
Con porcentajes: Al igual que con las tablas, podemos definir el tamao de un
marco como un porcentaje del espacio total disponible.
Absolutos: Si le asignamos un nmero a secas, el marco correspondiente
tendr el tamao especificado en pxels.
Sobre el espacio sobrante: Si colocamos un asterisco (*) estaremos
indicando que queremos todo el espacio sobrante para ese marco. Podemos
poner este smbolo en varios marcos, que se repartirn el espacio
equitativamente como buenos hermanos. Si queremos que uno tenga ms
deberemos ponerle al asterisco un nmero delante. As, un marco con un
espacio de 3* ser tres veces ms grande que su compaero, que tiene un
asterisco slo.
Por ejemplo, el siguiente cdigo es una muestra de cmo combinar los tres mtodos:
<FRAMESET COLS="10%,*,200,2*">
Supongamos que el ancho total de la ventana son 640 pxels. El primer marco ocupar
el 10%, es decir, 64 pixels. El tercero necesita 200, luego nos quedan 476 para los
otros dos. Como el cuarto debe tener el doble de espacio que el segundo, tenemos
aproximadamente 158 pixels para este ltimo y 316 para el cuarto marco.
Hay que tener cuidado cuando usamos valores absolutos en la definicin de marcos;
debemos asegurarnos de tener al menos un marco con un tamao relativo si queremos
estar seguro del aspecto final de la pgina.
Por ltimo, nos queda indicar que las etiquetas <FRAMESET> se pueden anidar,
poniendo otro <FRAMESET> donde normalmente colocamos las etiquetas <FRAME> tal
que quedar de la siguiente manera:
<FRAMESET COLS="20%,80%">
<FRAME NAME="indice" SRC="indice.html">
<FRAMESET ROWS="*,80">
<FRAME NAME="principal" SRC="introduccion.html">
<FRAME NAME="ejemplos" SRC="ejemplo.html">
</FRAMESET>
</FRAMESET>
Por defecto, cuando pulsamos sobre un enlace situado dentro de un marco, la nueva
pgina a la que queremos acceder la veremos encerrada en ese mismo marco. Es
posible que deseemos que esto no ocurra. Por ejemplo, si tenemos un marco que nos
sirve de ndice y otro donde mostramos los contenidos sera deseable que los enlaces
del marco ndice se abrieran en el otro marco. Esto es posible hacerlo gracias al
parmetro TARGET.
Este parmetro se puede colocar en tres etiquetas: <A>, <AREA> y <BASE>. En las dos
primeras sirve para indicar el marco en el que abriremos ese enlace en particular y en
el ltimo modificaremos el marco en el que por defecto se nos muestran todos los
enlaces.
Pero para que un parmetro funcione, es habitual que le asignemos un valor, y TARGET
no es una excepcin. Para indicarle el marco que deseamos le asignaremos el nombre
del mismo. As, en los ejemplos anteriores, si en el marco llamado indice tenemos un
enlace que queremos se abra en el marco principal pondremos:
_top
Elimina todos los marcos existentes y muestra la nueva pgina en la ventana
original sin marcos.
_blank
Muestra la nueva pgina en una ventana nueva y sin nombre del navegador.
_self
Muestra la nueva pgina en el marco donde est declarado el enlace.
_parent
Muestra la nueva pgina en el <FRAMESET> que contiene al marco donde se
declara el enlace. En el ejemplo que pusimos de <FRAMESET> anidados, un
enlace situado en el marco ejemplo cuyo parmetro TARGET fuese igual a
_parent eliminara la separacin entre los marcos ejemplo y principal y
mostrara en ese nuevo marco la nueva pgina.
Las hojas de estilo representan un avance importante para los diseadores de pginas
Web, al darles un mayor rango de posibilidades para mejorar la apariencia de sus
pginas. En los entornos cientficos en que la Web fue concebida, la gente estaba ms
preocupada por el contenido de sus pginas que por su presentacin. A medida que la
Web era descubierta por un espectro mayor de personas de distintas procedencias, las
limitaciones del HTML se convirtieron en fuente de continua frustracin, y los autores
se vieron forzados a superar las limitaciones estilsticas del HTML. Aunque las
intenciones han sido buenas (mejorar la presentacin de las pginas Web), las tcnicas
para conseguirlo han tenido efectos secundarios negativos. Entre estas tcnicas, que
dan buenos resultados para algunas personas (algunas veces, no siempre) y para otras
no, se incluyen:
Las hojas de estilo resuelven estos problemas al mismo tiempo que reemplazan el
limitado rango de mecanismos de presentacin del HTML. Con las hojas de estilo es
ms fcil especificar la cantidad de espacio entre lneas, el sangrado de las lneas, los
colores a utilizar para el texto y el fondo, el tamao y estilo de las fuentes, y otros
muchos detalles. Miremos el siguiente ejemplo:
<STYLE TYPE="text/css">
P {color: green; margin-left: 30;}
</STYLE>
Nos detendremos en todos los elementos. Para empezar, la etiqueta HTML con la que
englobaremos las hojas de estilo ser <STYLE>, que slo podr estar situada en la
cabecera de la pgina (dentro de las etiquetas <HEAD>). Su parmetro TYPE indica la
sintaxis que utilizaremos para definirlas. En el caso de las hojas en cascada deber ser
text/css.
El HTML 4.0 permite declarar fuera de la pgina las hojas de estilo, llevando de este
modo al extremo su filosofa de separar estructura y contenido. Si colocamos nuestras
hojas de estilo en un archivo llamado estilos.css (solo las hojas, no la etiqueta
<STYLE>, o sea, el contenido de la etiqueta), podemos vincular la misma con el
documento HTML mediante la etiqueta <LINK>:
Cascada
Se llama as a la capacidad que proporcionan algunos lenguajes de hojas de
estilo tales como CSS que permiten que las informaciones de estilo
provenientes de varias fuentes puedan combinarse. stas podran ser, por
ejemplo, las guas de estilo de una empresa, los estilos comunes a un grupo de
documentos, y los estilos especficos de un documento en particular. Al
almacenarse independientemente, las hojas de estilo pueden reutilizarse, lo
cual simplifica las tareas de diseo y hace ms efectiva la utilizacin de la
memoria cach de la red. La cascada define una secuencia ordenada de hojas
de estilo en la que las reglas de las ltimas hojas tienen una prioridad mayor
que las de las primeras. No todos los lenguajes de hojas de estilo soportan la
cascada.
Estilos alternativos
Los diseadores pueden querer ofrecer a los lectores varias maneras diferentes
de ver un documento. Por ejemplo, una hoja de estilo para representar
documentos compactos con fuentes pequeas, o una que especifique fuentes
ms grandes para una lectura ms fcil. Esto permite a los autores especificar
una hoja de estilo preferente as como hojas alternativas que se dirijan a
medios o usuarios especficos. Los agentes de usuario deberan dar a los
usuarios la oportunidad de seleccionar una de las hojas de estilo alternativas o
incluso de desactivarlas completamente.
Consideraciones de rendimiento
Algunas personas han expresado su preocupacin acerca de los posibles
problemas de rendimiento relacionados con las hojas de estilo. Por ejemplo, la
obtencin de una hoja de estilo externa puede retrasar la presentacin del
documento al usuario. Algo parecido sucede si la cabecera del documento
contiene un conjunto muy grande de reglas de estilo.
1.15.1- Clases
Hasta ahora habamos definido estilos para una etiqueta determinada. Pero tambin
podemos hacerlo para una clase determinada. Esto que significa? Que si, por ejemplo,
definimos la hoja de estilo de la clase verde de la siguiente manera:
slo estarn verdes y con un margen izquierdo de 30 pixels aquellos prrafos definidos
con <P CLASS="verde">. As de sencillo.
Ahora todos los prrafos de clase verde seran, obviamente, verdes y con un margen
de 10 pxels. Sin embargo el prrafo definido por <P CLASS="verde" ID="ej1"> ser
azul:
Y este tambin...
La siguiente declaracin STYLE pone un borde alrededor de todos los elementos H1 del
documento y los centra en la pgina.
<HEAD>
<STYLE type="text/css">
H1 {border-width: 1px; border: solid; text-align: center}
</STYLE>
</HEAD>
Para especificar que esta informacin de estilo slo debera aplicarse a los elementos
H1 de una clase especfica, la modificamos como sigue:
<HEAD>
<STYLE type="text/css">
H1.miclase {border-width: 1px; border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1 class="miclase"> Este H1 est afectado por nuestro estilo </H1>
<H1> Este no est afectado por nuestro estilo </H1>
</BODY>
<HEAD>
<STYLE type="text/css">
#miid {border-width: 1px; border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1 class="miclase"> Este H1 no est afectado </H1>
<H1 id="miid"> Este H1 est afectado por el estilo </H1>
<H1> Este H1 no est afectado </H1>
</BODY>
Los elementos DIV y SPAN, ofrecen un mecanismo genrico para aadir estructura a
los documentos. Estos elementos especifican si su contenido es en lnea (SPAN) o en
bloque (DIV) pero no imponen ningn otro estilo de presentacin al contenido. As, los
autores pueden usar estos elementos junto con hojas de estilo, para adaptar el HTML a
sus propios gustos y necesidades.
El mtodo es simple. Definimos una clase rojo que simplemente modifique el color
(que ser rojo). Ahora, si queremos que una seccin de texto est en rojo lo
encerraremos entre las etiquetas <SPAN CLASS="rojo"> y </SPAN> o entre <DIV
CLASS="rojo"> y </DIV>. La diferencia entre ambas es que, mientras SPAN realmente
no hace nada por s misma, DIV convierte a todo lo que encierra en un bloque aparte
(poniendo un salto de lnea tanto al comienzo como al final). Veremos en el siguiente
apartado que a las etiquetas que se comportan como bloques (<P>, <H1>, las que
dijimos modifican un prrafo entero) se les pueden definir atributos propios desde las
hojas de estilo. Por ejemplo, si definimos las siguientes hojas:
all.titulo {
margin-top: -24px;
color: blue;
font-size: 20px;
}
all.sombra {
margin-top: 2px;
margin-left: 2px;
color: black;
font-size: 20px;
}
En este punto veremos todas o casi todas las propiedades que se pueden alterar por
medio de las hojas de estilo. Hay que indicar que algunos de ellos no los soporta el
Explorer y en cambio otros no los entiende el Netscape. As que es recomendable
probarlos en ambos exploradores antes de incorporarlos a nuestras pginas.
Vamos a empezar con las propiedades de bloque, que definen parte del diseo como
los mrgenes o la colocacin de bloques de contenido HTML:
Ahora vamos a examinar las propiedades del tipo de letra que el usuario va a ver, que
son las siguientes:
Cabe recordar que los tipos genricos son serif, sans-serif, cursive, fantasy y
monospace. Cada uno de estos tipos ser equivalente a alguno que pueda tener
instalado el ordenador del usuario. As, por ejemplo, en una PC con Windows si
encuentra instalado serif puede equivaler a Times New Roman y el monospace a
Courier.
Nuestro siguiente objetivo va a ser usar las propiedades de formato del texto, que
cualquier procesador de textos nos permite utilizar.
Hay que decir que, en la sintaxis en cascada, las direcciones se expresan del siguiente
modo:
background: url(fondobonito.gif);
El primer lenguaje de script que vi la luz fue el JavaScript de Netscape. Nacido con la
versin 2.0 de este navegador y basado en la sintaxis de Java, su utilidad y el casi
absoluto monopolio que entonces ejerca Netscape en el mercado de navegadores
permitieron que se popularizara y extendiera su uso.
1.17.1- Javascript
Como este curso est orientado al desarrollo de sitios Web, ms adelante abordaremos
el lenguaje VBScript en el diseo de las pginas ASP. Pero ahora, interesa realizar una
pequea introduccin al Javascript que ms adelante abordaremos por completo.
Realizaremos nuestro primer "programa" en JavaScript. Para ello haremos surgir una
ventana que nos muestre el famoso mensaje "hola, mundo". As podremos ver los
elementos principales del lenguaje. El siguiente cdigo es una pgina Web completa
con un botn que, al pulsarlo, muestra el mensaje.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!---
function HolaMundo() {
alert("Hola, mundo!");
}
// --->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" NAME="Boton" VALUE="Pulsame"
onClick="HolaMundo()">
</FORM>
</BODY>
</HTML>
Ahora veremos, paso por paso, qu significa cada uno de los elementos extraos que
tiene la pgina anterior:
<SCRIPT LANGUAGE="JavaScript">
</SCRIPT>
function HolaMundo()
{
alert("Hola, mundo!");
}
<FORM>
<INPUT TYPE="button" NAME="Boton" VALUE="Pulsame"
onClick="HolaMundo()">
</FORM>
Dentro del elemento que usamos para mostrar un botn vemos una cosa nueva: el
evento onClick. Cuando el usuario pulsa el botn, el evento onClick se dispara y
ejecuta el cdigo que tenga entre comillas, en este caso la llamada a la funcin
HolaMundo(), que tendremos que haber definido con anterioridad.
Este ejemplo muestra una pequea parte de las funcionalidades del JavaScript. De
hecho, su utilidad es ms bien escasa, pero no te preocupes, porque ms adelante
veremos con ms profundidad este tema.
Los agentes de usuario que no soporten scripts del lado del cliente deben representar
los contenidos de este elemento.
<SCRIPT type="text/tcl">
...scripts para insertar datos...
</SCRIPT>
<NOSCRIPT>
<P>Acceder a los <A href="http://algunsitio.com/datos">datos.</A>
</NOSCRIPT>
1.18 CAPAS
Las capas pueden definirse como pginas que se pueden incrustar dentro de otras. Los
atributos de una capa (posicin, visibilidad, etc.), como los de cualquier otro elemento
HTML, pueden definirse dentro de una hoja de estilo. Su contenido, en cambio,
siempre deber ser especificado dentro de la parte principal de la pgina. Como se
puede ver, de nuevo estamos siguiendo la filosofa de separar el contenido y la forma
de representarlo.
1.18.1- Definicin
La definicin de una capa, sigue la misma estructura, que la que usbamos para
decidir las caractersticas de una etiqueta con el parmetro ID:
<STYLE TYPE="text/css">
#micapa {position:absolute; top:100px; left:20px;}
</STYLE>
<DIV ID="micapa">
<H1>El ttulo de la capa</H1>
<P>Aqu es donde ira el texto.
...
</DIV>
Las capas que hemos definido hasta ahora se colocan en una posicin determinada de
la pgina. Pero existe otro tipo de capas llamadas flotantes cuya colocacin depende,
en cambio, de la posicin dentro del cdigo fuente de la pgina donde las hayamos
colocado. Se definen as:
<STYLE TYPE="text/css">
#flotante {position: relative; left:20px; top:100px;}
</STYLE>
1.18.2- Propiedades
Existen varias propiedades de las capas que podemos modificar, como son la posicin,
la visibilidad, el orden en que se ponen en pantalla, etc... Son estos:
layer-background-
color (Netscape)
1.19 SONIDO
Los formatos que seguramente pueden reproducir los navegadores, son los archivos
WAV y MID. Para poder reproducir otros necesitarn el plug-in o aadido necesario,
como puede ser el Real Audio para los archivos RA o el ModPlug para los MOD y otros.
<BGSOUND SRC="musica.mid">
El parmetro SRC indicar el archivo a reproducir. Esta etiqueta admite tambin otro
parmetro, LOOP, que indica el nmero de veces consecutivas que sonar el archivo. Si
se indica LOOP="infinite", el archivo se reproducir indefinidamente, mientras
estemos en la pgina.
Netscape utiliza su etiqueta <EMBED>. Tericamente, esta etiqueta debera servir para
unir objetos de varios tipos a la pgina Web, pero en la prctica slo se utiliza para
esto. Esta etiqueta tiene los siguientes parmetros:
Parmetro Utilidad
SRC Contiene el nombre de archivo de sonido a reproducir
En Netscape aparece un pequeo reproductor, estos parmetros
WIDTH y HEIGHT
especifican su tamao.
AUTOSTART="true" Arranca automticamente la reproduccin.
Reproduce ininterrumpidamente el archivo hasta que salimos de la
LOOP="true"
pgina.
HIDDEN="true" Oculta el reproductor.
Sin embargo, y debido a algunos bugs (errores del software, que pueden ocasionar el
mal funcionamiento del mismo), si queremos reproducir infinitamente un archivo con
el reproductor oculto, deberemos incluir todos los parmetros, an WIDTH y HEIGHT.
Adems, si el usuario tiene algn plug-in de un tercero, en lugar del que viene con
Netscape, es posible que deje de funcionar correctamente.
Dado que ambas etiquetas son incompatibles entre s, basta con incluir las dos... o,
mejor dicho, bastaba. Ahora el Explorer es capaz de interpretar <EMBED>, pero no
exactamente de la misma manera, lo que provoca que aparezca una ventana aparte
con el reproductor. En definitiva, la mejor manera de mostrar una msica de fondo es
usando un pequeo script que averige en qu navegador se encuentra y discrimine la
porcin de cdigo.
Actividades de autoevaluacin
3.- Cuales son las principales partes en la que se divide un documento HTML y que es
lo que contienen cada una de ellas?
4.- Qu son los ANCHORS y cul es la funcin de cada uno de los atributos del
mismo?
7.- Enumere y explique brevemente cual es la funcin de cada uno de los elementos
que puede contener un formulario para la entrada y salida de datos.
8.- Escriba el cdigo para representar la siguiente tabla (tenga en cuenta la alineacin
del contenido de cada una de las celdas y el tamao de ellas):
2
1
3
5 6 7
4 8
Claves de respuesta
1.- Los estndares son las guas con las cuales los navegadores as como codificadores
de HTML deberan estar trabajando. Esto asegura que el cdigo fuente desarrollado en
una pgina, funcione de igual manera en todos los exploradores disponibles en el
mercado. Crea un estndar para el lenguaje HTML.
2.- Las etiquetas son funciones que interpreta el lenguaje HTML para darle formato a
una pgina. Estas acciones se llevan a cabo por los atributos propios de una etiqueta,
que a su vez, son configurados por valores que pueden ser palabras o nmeros
expresados en pxel o porcentajes.
4.- Una etiqueta ANCHOR representa un enlace de una zona de texto o grficos que si
son seleccionados nos trasladan a otro documento de hipertexto o a otra posicin
dentro del documento actual.
Los principales atributos de esta etiqueta son los siguientes:
- href: define la direccin destino donde nos queremos dirigir. Esta direccin puede ser
una URL, una direccin de mail, un archivo a descargar o una seccin que se encuentra
dentro de la misma pgina.
- name: si queremos movernos a una seccin determinada en la misma pgina, este
atributo define el nombre de la seccin, para despus invocarla mediante el atributo
href.
- target: determina el marco (frames) o ventana donde se abrir la direccin
especificada en el atributo href.
5.- Una direccin absoluta utiliza la ruta completa del enlace destino, no slo una parte
de l, sino, que debe incluir la palabra inicial http:// seguida del nombre del dominio.
Este tipo de enlace se utiliza cuando queremos dirigirnos a otro sitio hospedado en otro
servidor.
En cambio los enlaces relativos nos permiten enlazar pginas situadas en un mismo
servidor. Estos archivos pueden estar en el mismo directorio o cada uno de ellos en un
directorio distinto.
7.-
Etiqueta: INPUT
Atributo type:
Text: caja de texto visible para el usuario, de entrada y salida de texto. D
Hidden: caja de texto invisible usada para almacenar valores.
Password: se lo utiliza cuando queremos ingresar una contrasea o palabra
secreta que no queremos que sea visualizado por pantalla para que otro usuario
lo lea.
Submit: botn de confirmacin de datos de un formulario.
Reset: Le devuelve a todos los objetos del formulario el valor especificado en el
atributo value de cada uno de ellos.
Button: es un botn comn para fines determinados.
Checkbox: es una cajita que puede ser tildada devolvindonos un valor true o
false por el nombre del objeto.
Button: Conjunto de opciones que pueden ser seleccionadas mediante un botn
circular.
Etiqueta: TEXTAREA
Es una caja de texto que tiene la particularidad de ingresar el texto en muchas lneas
horizontales, desplazndose por el mismo mediante una barra.
Etiqueta: SELECT
Lista desplegables o de varias filas, que permite almacenar varias opciones pero
ocupando menor espacio en la pgina.
8.-
<p align="center">6</td>
<td width="154" height="40" valign="top">
<p align="right">7</td>
</tr>
<tr>
<td width="154" height="36" valign="bottom">
<p align="center">8</td>
</tr>
</table>
9.- Sirven para darles un mayor rango de posibilidades para mejorar la apariencia de
las pginas. Es ms fcil especificar la cantidad de espacio entre lneas, el sangrado de
las lneas, los colores a utilizar para el texto y el fondo, el tamao y estilo de las
fuentes, y otros muchos detalles. Permite tambin separar la estructura de la pgina
del contenido de la misma.
a)
P {
font-family: Verdana, Arial;
font-size: 8pt;
color: #000000;
font-style: italic;
font-weight: bold;
}
b) solo se debe ingresar el cdigo anterior dentro de la etiqueta HEAD con la siguiente
estructura:
<STYLE TYPE="text/css">
P {
font-family: Verdana, Arial;
font-size: 8pt;
color: #000000;
font-style: italic;
font-weight: bold;
}
</STYLE>
10.- Las capas pueden definirse como pginas que se pueden incrustar dentro de
otras. Lo ms importante de las mismas es la posibilidad que presentan de ser
movidas y modificadas desde un lenguaje de script.