mi primera página - ticromaval.files.wordpress.com€¦ · web viewen base a esto existen muchos...
TRANSCRIPT
TUTOR DE HTML
Mi primera página El código La explicación El cuerpo del documento
El código
Lo mejor para aprender a hacer algo es ... ¡hacerlo!. Así que vamos a la primera página
mipagina.html
<HTML><HEAD><TITLE>Mi primera pagina web </TITLE></HEAD><BODY><H1 align="center" >Mi Primera pagina web </H1><HR><P>Esto tan sencillo es una verdadera página web, aunque le falta el contenido, pero todo llegará.</P></BODY></HTML>
Si quieres ver como queda esto en el explorador solo tienes que pulsar aquí, y tranquilo que se abrirá en otra ventana
La explicación
Si te fijas en la página que ves con el explorador solo se ve parte de lo que has escrito, concretamente todo lo que no está encerrado entre los símbolos < y >. Eso es el contenido de la página, pero ¿y lo que está entre esos paréntesis angulares? pues esas son las etiquetas que le dicen al explorador como mostrar el contenido: en grande, con colores, centrado, el título de la página, etc. Si te fijas cada etiqueta tiene un comienzo y un fin:
<ETIQUETA parámetros> ... </ETIQUETA>
Como ves una apertura y un cierre. Algunaas etiquetas (como <BR> cambio de línea o <HR> linea horizontal) no llevan cierre. Fijaros que lo primero que tenemos es la etiqueta <HTML> cerrda al final del documento con </HTML>, eso quiere decir que estamos ante un HTML:
<HTML> ... </HTML>
Dentro de ese documento vemos una parte llamada cabecera, que la reconocerás porque está limitada con la etiqueta <HEAD> </HEAD>. Él contenido de esta parte no siempre es visible, y si lo es nunca se muestra en la página en si. Contiene por ejemplo el título que se ve en la ventana del explorador, arriba a la izquierda. La cabecera queda por tanto:
<HEAD> <TITLE>Mi página web</TITLE></HEAD>
Puede contener muchas otras cosas, pero eso lo dejamos para más adelante.
El cuerpo del documento
La otra parte es el cuerpo o <BODY> </BODY>, es el contenido de la página web. Tiene una etiqueta con cierre:
<BODY> ... </BODY>
Y ahora el contenido:
<H1 align="center"> Mi primera página web</H1>
Con esto colocaremos el texto en formato <H1> (o cabecera 1) y centrado (align="center"), o sea, en tamaño grande y centrado en la página, una forma de resaltar la frase. Ahora separamos esa frase por medio de una línea horizontal:
<HR>
Como ves este es un ejemplo de etiqueta sin cierre. Y por último colocamos un texto escplicativo en un párrafo (<P></P>), o sea, un bloque de texto con un espacio por delante y otro por detrás :
<P>Esto tan sencillo es una verdadera página web, aunque le falta el contenido, pero todo llegará.</P>
Para empezar no está mal, por supuesto existen muchas más etiquetas con misiones diferentes a la de mostrar texto, pero eso lo iremos viendo poquito a poco.
Estructura del documento La cabecera Meta Name Meta Http-Equiv El cuerpo
Estructura del documento
La estructura de un documento HTML se puede resumir así:
tipo de documento<HTML><HEAD> <TITLE>titulo de la página</TITLE> cosas que afectan a la página pero no a su contenido</HEAD><BODY parámetros> contenido de la página</BODY></HTML>
En el tipo de documento deberemos especificar a que estándar del HTML responde nuestra página entre una de las siguientes opciones:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">Cumple el estándar HTML 2.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">Cumple el estándar HTML 3.2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://w3.org/TR/REC-html40/loose.dtd">
Cumple el estándar HTML 4.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://w3.org/TR/REC-html40/strict.dtd">
Cumple el estándar HTML 4.0 y no contiene además elementos desaconsejables <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://w3.org/TR/REC-html40/frameset.dtd">
Es una definición de marcos que cumple el estándar HTML 4.0
El HTML 4.0 considera desaconsejables aquellos elementos que, aún siendo soportados, han sido sustituidos por otros más potentes y, por ello, es posible que sean eliminados del estándar HTML en el futuro.
La cabecera
Suele ser el lugar más indicado para colocar aquellos elementos de la página que no alteren el contenido de la misma, aunque si la forma de presentarlo y su comportamiento. Es por eso que es el lugar más recomendable para colocar los scripts y las hojas de estilo, como veremos en los capítulos correspondientes.
Hay también otro elemento interesante que podremos incluir en nuestras cabeceras. Cuando especificamos una URL relativa en un enlace, en principio es para acceder a una página situada en nuestro mismo servidor. Sin embargo, si especificamos:
<BASE HREF="http://www.misitio.com/">
Ahora todas nuestras URLs relativas se encontrarán dentro del servidor http://www.misitio.com
Meta Name
Además del título de la página, uno de los elementos que se pueden incluir aquí son los META. Entre otras cosas, sirven para indicar propiedades de la página como pueda ser el nombre de su autor. Por ejemplo,
<META NAME="GENERATOR" CONTENT="Mozilla/4.03 [es] (Win95; I) [Netscape]">
nos indicaría la herramienta con que hemos creado la página (en este caso la versión 4.03 en español para Windows 95 del Composer de Netscape). Como veréis el uso es muy simple, en NAME colocamos el nombre de la etiqueta y en CONTENT colocamos su valor, ambos entre comillas y con el signo igual por delante.Estas son las propiedades más comunes:
Name ContentAUTHOR Autor de la página.CLASSIFICATION Palabras que permite clasificar la página dentro de un buscador jerárquico (como Yahoo).
KEYWORDS Palabras clave por las que encontrarán la página en los buscadores. Google no le hace mucho caso.
GENERATOR Herramienta utilizada para hacer la página.DESCRIPTION Descripción del contenido de la página. Google le hace algún caso.
Meta http-equiv
Son etiquetas usadas también para dar información al navegador y complementan las etiquetas Meta vistas en el apartado anterior. En algunos casos existen etiquetas Meta Name y http-equiv similares. Su uso es similar a las etiquetas Meta Name, por ejemplo:
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
La única diferencia está en que en lugar de NAME usamos HTTP-EUIV, el resto es igual. Cuando el contenido conste de más de varios valores, estos se separan con ; (punto y coma). Veamos algunos tipos:
HTTP-EQUIV CONTENTexpires Fecha desde la que la página debe ser recargada por los navegadores pragma El contenido debe ser no-cache y sirve para que el navegador no guarde la página en el
ordenador del internauta. Content-Language Idioma en el que está escrita la página. Se usan las iniciales como: es_ES: español
España, en_US: ingles americano... Refresh Indica al navegador el tiempo (en segundos) que debe esperar para recargar la página
automáticamente y la página a la que debe ir. Ambos datos se separan con un punto y coma.
Content-Type Tipo de documento y juego de caracteres usado. Lo habitual es colocar el valor:text/html; charset=iso-8859-1Si n o se usa los caracteres especiales (letras acentuadas, ñ) pueden quedar ilegibles .
El cuerpo
arriba
El cuerpo es el contenido de la página propiamente dicho, o sea, lo que se ve, en el es donde colocarán prácticamente todos los elementos que vamos a ir viendo por este manual. Los atributos que admite esta etiqueta <BODY>:
BACKGROUND Coloca una imagen como fondo de la página.BGCOLOR Define el color de fondo de la página.
BGPROPERTIES Cuando es igual a FIXED el gráfico definido como fondo de la página permanecerá inmóvil aunque utilicemos las barras de desplazamiento.
TEXT Color del texto.LINK Color de un enlace no visitado (por defecto azul).VLINK Color de un enlace ya visitado (por defecto púrpura).ALINK Color que toma un enlace mientras lo estamos pulsando (por defecto rojo).LEFTMARGIN y TOPMARGIN
Número de pixels que dejará de margen entre el borde de la ventana y el contenido de la página.
MARGINWIDTH y MARGINHEIGHT Equivalentes a los anteriores, pero éstos funcionan en Netscape.
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 estarán ya a su gusto.
Formato a nivel de bloques Dando formato Estilos de párrafo Encabezados Estilos de texto Tipo de letra Otros elementos
Dando formato
Evidentemente en las páginas no todo el contenido es igual y por tanto no todo se ha de mostrar en la misma forma, por eso HTML nos permite modificar el aspecto del texto: podemos darle diferentes formatos, modificando desdel el aspecto de los caracteres (tipo de letra) hasta el color. Podemos formatear desde las letras una por una hasta bloques completos de texto.
Estilos de párrafoEstos estilos o formatos actúan a nivel de párrafo
Etiqueta Significado Resultado
<P> Sirve para delimitar un párrafo. Inserta una línea en blanco antes del texto. Soy un párrafo: fíjate en los
espacios de antes y de después.
<p ALIGN=x> ... </p>Justificar el texto del párrafo a la izquierda (ALIGN=LEFT), derecha (RIGHT), al centro (CENTER) o a ambos márgenes (JUSTIFY html4 )
Alineación izquierda Texto centrado
Alineación derechaTexto justificado o sea, alineado a ambos lados sin dejar, escalones en el margen derecho.
<CENTER> ... </CENTER> Permite centrar todo el bloque de texto encerrado. Alineación por defecto
Texto centrado
<PRE WIDTH=x> ... </PRE>
Representa el texto encerrado en ella con un tipo de letra de paso fijo. El parámetro WIDTH especifica el número máximo de caracteres en una línea.
Estoy en paso fijo
<BLOCKQUOTE> ... </BLOCKQUOTE>
Mete sangrías de párrafo tanto a derecha como a izquierda. Suele usarse como tabulador
Si quieres ver el texto indentado por ambos márgenes usa el Blockquote.
Los encabezados
El HTML nos ofrece seis etiquetas distintas para mostrar cabeceras o títulos.
Etiqueta Resultado
<H1> ... </H1> Cabecera de nivel 1
<H2> ... </H2> Cabecera de nivel 2
<H3> ... </H3> Cabecera de nivel 3
<H4> ... </H4> Cabecera de nivel 4
<H5> ... </H5> Cabecera de nivel 5
<H6> ... </H6> Cabecera de nivel 6
Actúan a nivel de párrafo, es decir, el texto encerrado en <h1></h1> lleva una linea enblanco por delante y por detrás. Habitualmente se utilizan para destacar títulos de los diferentes apartados o secciones de un texto.
Cambiando el tipo de letra
Todas estas etiquetas nos permiten cambiar de una manera u otra el aspecto del tipo de letra que estemos utilizando y se pueden utilizar dentro de un párrafo.
Etiqueta Utilidad Resultado<B> ... </B> Pone el texto en negrita. Soy un texto negro como el tizón<I> ... </I> Representa el texto en cursiva. Estoy ladeado
<U> ... </U> Para subrayar algo. Como soy muy importante estoy subrayado
<S> ... </S> Para tachar. A mí, en cambio, nadie me quiere
<TT> ... </TT> Permite representar el texto en un tipo de letra de paso fijo. No soy variable
<SUP> ... </SUP> Letra superíndice. E=mc2
<SUB> ... </SUB> Letra subíndice. ai,j=bi,j+1
<BIG> ... </BIG> Incrementa el tamaño del tipo de letra. Soy GRANDE
<SMALL> ... </SMALL>Disminuye el tamaño del tipo de letra. Creí ver un lindo gatito
Estilos de texto
Son formatos predefinidos aplicables a caracteres individuales (y a grupos por supuesto). Realmente no se usan demasiado salvo que se controlen mediante los estilos CSS.
Etiqueta Significado Efectos<CITE> ... </CITE> Cita, por ejemplo de un texto Esta frase no es mía<CODE> ... </CODE> Código int x=0;<STRONG> ... </STRONG> Fuerte, negrita. Hay cosas importantes.
<EM> ... </EM> Enfasis. Para poner énfasis
<KBD> ... </KBD> Teclado El usuario debe teclear Multivac es el mejor.
<VAR> ... </VAR> Representar variables de un código. La variable x, definida anteriormente...
<SAMP> ... </SAMP> Para representar una serie de caracteres literalmente. Estoy en un literal
<ABBR> ... </ABBR>Abreviaturas. La WWW usa el protocolo http
Otros elementos
Estas etiquetas realmente no son formato ni de párrafo ni de texto, pero hay que ponerlas en algún sitio:
Etiqueta Significado Resultado<BR> Cambio de línea. Simple salto de linea <HR> Barra horizontal.<!-- ... --> Comentarios. No se ve el contenido
Formateando caracteres Formateo de caracteres El color Tamaño del texto Tipo de letra
Formateo de caracteres Cuando hablamos del formato en un tema anterior te adelantábamos que podrías dar formato al texto a nivel de carácter, y que la cosa no se iba a quedar solo en poner subrayados o negritas y cursivas. HTML nos permite un gran control sobre el formato del texto mediante la etiqueta <FONT>.
El color
Podemos cambiar el color de cualquier carácter mediant el uso del parámetro COLOR. La manera de especificarle el color es común a todas las etiquetas HTML: o bien indicando el nombre, si es un color normal, o bien especificando los componentes de rojo, verde y azul (código RGB) del mismo. Los colores reconocidos son los siguientes:
Black Silver Gray White Maroon Red Purple FuchsiaGreen Lime Olive Yellow Navy Blue Teal Aqua
<FONT color="blue">Soy azul como el mar</FONT>
El modo de indicar el color RGB es el mediante los componentes RGB para lo que se usa un código de seis dígitos hexadecimales: 00 a FF. Por ejemplo:
<FONT COLOR="#FF0000">Código para rojo es #FF0000D</FONT>
Código para rojo es #FF0000
<FONT COLOR="#00FF00">Código para verde es #00FF00</FONT>
Código para verde es #00FF00
<FONT COLOR="#0000FF">Código para Azul es #0000FF</FONT>
Código para azul es #0000FF
<FONT COLOR="#0000FF">Y ahora mezclemos colores con #10A2FF</FONT>
Y ahora mezclemos colores con #10A2FF
Tamaño del texto
El parámetro utilizado para indicar el tamaño es SIZE. Puede utilizarse para indicar tamaños absolutos:
SIZE=1 SIZE=2 SIZE=3 SIZE=4 SIZE=5 SIZE=6
SIZE=7
El tamaño por defecto es 3. También se puede utilizar los modificadores + y - para indicar un incremento (o decremento) relativo del tamaño del tipo de letra. Así, por ejemplo, si indicamos que queremos un tamaño de -2 estaremos pidiendo al navegador que nos muestre el tipo de letra dos veces más pequeño.
<FONT SIZE=2><font size="2">Tamaño 2</font><FONT SIZE="+3"><font size="2"><font size="+3">Tamaño 6</font></font></FONT></FONT>
Tipo de letra
Por último, podemos especificar el nombre del tipo de letra que queremos utilizar gracias al parámetro FACE. Pero ojo esto no es realmente muy utilizable. El navegador usará el tipo de letra indicado en este atributo si tiene esa fuente instalada. Si sales de la Times New Roman, Arial, Helvética, Verdana o Courier corres el riesgo de que el usuario no llegue a ver la página como tu la has diseñado, sino de una manera que puede llegar a ser desastrosa para el diseño. Si el navegador no encuentra ninguno de las fuentes indicada en este parámetro utilizará la fuente por defecto:
<FONT FACE="Helvetica,Arial,Times"><font face="Helvetica,Arial,Times">No sé como voy a salir exactamente</font></FONT>Caracteres especiales
Caracteres especiales Caracteres extendidos en HTML Caracteres reservados
Caracteres especiales
Si habéis estudiado o leído algo acerca del modo de funcionamiento de los ordenadores y la informática, casi seguro que sabéis que la información que introduces en el ordenador está codificadaes decir, escrita de alguna manera que sea entendible para la máquina. En relación con esto habréis topado con unas siglas algo extrañas código ASCII, que no es más que una forma de codificar los caracteres asignando a cada uno un valor numérico. Sin entrar en más detalles resulta que el código ASCII solo tiene 128 símbolos, pero existe una extensión del código que llega a los 256 símbolos, aunque sólo están normalizados los 128 primeros, los restantes se usan para caracteres extraños como nuestra ñ o la ç o el €, o las letras acentuadas.
Es decir que todo lo que no sean caracteres ingleses quedan codificados con códigos ASCII por encima de 127, como caracteres especiales o extendidos. En base a esto existen muchos juegos de caracteres para mostrar las páginas, juegos que se adaptan a las particularidades de cada idioma.
Caracteres extendidos en HTML
Cualquier caracter, especial o no, puede mostrarse en una página usando su código ASCII, es decir, el número que tiene asignado, encerrado entre &# y ;. Por ejemplo el símbolo @ tiene como código ASCII el 64, así podemos representarlo como:
@
Si usasemos el número 127 obtendremos nuestra tilde ~ . No obstante muchos caracteres especiales tienen sinónimos que nos facilitan su inserción en las páginas web:
Código Resultadoá, Á, é, É,... á, Á, é, É, í, Í, ó, Ó, ú y Úñ y Ñ ñ y ñ¿ ¿¡ ¡º ºª ª™ ™ o ™© ©® ® Espacio en blanco
Caracteres reservados
En el HTML existen cuatro caracteres de control, que se usan para formar etiquetas, establecer parámetros, etc.. Para poder emplearlos sin riesgo deberemos escribir los siguiente códigos:
Código Resultado< <> >& &" "
Aquí tienes una tabla completa de caracteres especiales
Enlaces web Enlaces o vínculos La etiqueta <A> Las URLs Ancla
Enlaces
Las páginas web no son más que un caso particular de documentos de hipertexto, es decir, documentos cuyo contenido no es solo el texto simple que podemos leer sino también el contenido de otras fuentes a las que accedemos desde el documento. En el caso de las páginas web estas otras fuentes pueden estar situadas en cualquier parte de la red, y a ellos se accede mediante los enlaces o links: unos elementos interactivos del documento que aparentemente son solo eso una palabra o un gráfico que habitualmente destacan por su color o su forma. Es prácticamente imposible que una página web no posea uno de estos enlaces.
Los enlaces que nos encontramos en cualquier página pueden ser de dos tipos: internos a la propia página o externos a otra página. La forma de construir unos y otros es muy similar como verás a continuación.
La etiqueta <A>
La etiqueta <A></A> nos sirve para delimitar la zona de la página que constituye el enlace. Lo que esté encerrado en esta etiqueta será mostrado por el navegador de forma resaltada, bien sea por el color si es texto o por un borde si es una imagen (a menos que modifiquemos el formato), y si pulsamos con el cursor del ratón sobre esa zona el navegador se dirigirá al lugar apuntado por ese enlace. El formato completo de esta etiqueta es el que sigue:
<A HREF="dirección de destino" target="destino">Pulsar para saltar</A>
La dirección de destino será la página web especificada mediante una URL, en formato absoluto o relativo. En ambos casos el destino puede incluso ser un elemento concreto dentro de la página. En este caso se ha usado un texto pero igualmente podríamos colocar una imagen.
El atributo target es una manera de decirle al navegador en que ventana debe abrir esa nueva página. Por ahora veremos dos de sus valores posibles:
_blank Muestra la nueva página en una ventana nueva y sin nombre del navegador.
_self Muestra la nueva página en el marco donde está declarado el enlace. Este es el destino por defecto de cualqueir enlace dentro de una página
En el apartado dedicado a los frames veremos algo más de este parámetro.
Las URLs
Cualquier elemento conectado a la red internet se identifica por un conjunto de cuatro números entre 0 y 255, algo así como 84.234.12.122, cualquier sitio de internetestá identificado por esta dirección. Pero como quiera que recordar esos números no es nada fácil existen unos servidores de nombre que transforman esas direcciones
en nombres más humanos como www.espaciolatino.com. A estas direcciones se les llama Universal Resource Locator, o URL, es la forma de localizar cualquier página en internet. En general tiene el siguiente formato:
protocolo://máquina:puerto/ruta/fichero@usuario
donde protocolo puede ser uno de los siguientes:
http Es el protocolo para la transmisión de documentos HTML, es decir, el que habitualmente usamos para ver las páginas en nuestro navegador.
https Es similar al anterior pero con la particularidad de que la información viaja codificada mediante técnicas de encriptación.
ftp Es un protocolo para la transmisión de ficheros (File Transfer Protocol). Permite intercambiar ficheros con sitios en los que se ejecuten servidores ftp. Los navegadores actuales permiten acceder a estos servidores FTP, pero lo más normal es usasr unos programas al efecto denominados clientes de FTP.
mailto Otro protocolo para la transmisión de datos, pero en este caso a través de servidores de correo.
news Mediante este protocolo accedemos a los denominados grupos de noticias, listas de distribución de mensajes relativos a temas concretos. Habitualmente se accede a estos servidores mediante el cliente de correo.
telnet Es un terminal de acceso remoto en modo texto. Es un sistema bastante inseguro por lo que no es habitual en servidores donde la seguridad esté bien pensada.
Lo más normal en nuestras páginas será acceder a elementos de otros páginas y por tanto lo habitual será usar URL del estilo http://servidor.dom/página.htm o similar.
En un enlace podremos usar la URL como hemos escrito más arriba, URL absoluta, pero también podremos usar formatos como /pagina.htm, parece que faltara la primera parte de la dirección ¿verdad? Pues no, en estos casos el navegador completa esa parte con la correspondiente de la página en la que esté el enlace, son las URL relativas. Por ejemplo si miras la URL de esta página verás que es
http://www.espaciolatino.com/tutorhtml/tema6.html
Pues bien si en esta página colocara un enlace en la forma
<A href="tema3.htm">Tema 3</A>
Esta dirección realmente apuntaría a
http://www.espaciolatino.com/tutorhtml/tema3.html
Como último detalle a tener en cuenta es el uso de la / como forma de referirse a la raiz del sitio. Así este enlace
<A href="/index.htm">Portada</A>
estaría apuntando a http://www.espaciolatino.com/index.htm.
Anclas
Como dijimos, es posible acceder a una posición dentro del documento HTML. Para ello lo primero que tenemos que hacer es colocar marcas de destino en el documento al que queremos acceder:
<A NAME="ancla">
A estos elementos se les llama anclas. Su uso es muy simple: en una etiqueta de enlace colocamos el símbolo # seguido del nombre del ancla de esta manera:
<A HREF="#ancla">Ancla en esta página</A>
Al pulsar sobre este enlace se mostrará en la ventana la parte de la página actual que contiene el ancla. Si queremos acceder a un ancla en otra página basta indicarlo al final de su URL. Como en este ekemplo:
<A HREF="enlaces.html#ancla">Ancla en la página enlaces.html</A>Listas
El formato listas Listas desordenadas Listas ordenadas Listas de definiciones
El formato listas
El lenguaje HTML nos permite crear listas en las páginas web de una manera casi tan simple y efectiva como en un procesador de textos, para ello utiliza las etiquetas de listas, de las que existen varios tipos. Todas ellas se pueden anidar (meter unas dentro de otras) formando árboles más o menos complejos. Todos los tipos siguen el mismo formato:
<tipo_lista> <LI>Primer elemento <LI>Segundo elemento</tipo_lista>
tipo_lista puede ser una de las siguientes: UL, OL, DL.
Listas desordenadas
La etiqueta <UL> significa unordered list, lista desordenada, y se corresponde con las viñetas en los procesadores de texto: son listas donde cada elemento está precedido de un símbolo como un putno o un disco. EL formato es el qeu sigue:
<UL> <LI>Juan Pedro <LI>Luisa</UL>
se verá como
Juan Pedro Luisa
A partir del HTML 3.2 la etiqueta <UL> admite estos parámetros:
Parámetro Significado Resultado
COMPACT Indica al navegador que debe representar la lista de la manera más compacta posible.
Primer elemento
Segundo elemento
TYPE="disc", "circle", "square"
Indica al navegador el dibujo que precederá a cada elemento de la lista. Para mayor flexibilidad se admite también como parámetro de <LI>.
Tipo disc
o Tipo circle
Tipo square
Listas ordenadas
La etiqueta <OL> responde a Ordered List, lista ordenada, y nos permite presentar listas como esquemas numerados de un solo nivel, o sea, que cada elemento de la lsita lleva un número de orden. Por ejemplo,
<OL> <LI>Primer elemento <LI>Segundo elemento
</OL>
se verá como
1. Primer elemento 2. Segundo elemento
El HTML 3.2 admite estos parámetros para la etiqueta <OL> :
Parámetro Significado Resultado
COMPACT Indica al navegador que debe representar la lista de la manera más compacta posible.
1. Primer elemento
2. Segundo elemento
TYPE="1", "a", "A", "i", "I"
Indica al navegador el tipo de numeración que precederá a cada elemento de la lista. Para mayor flexibilidad se admite también como parámetro de <LI>.
1. Tipo 1
a. Tipo a
A. Tipo A
i. Tipo i
I. Tipo I
START="num" Indica al navegador el número por el que se empezará a contar los elementos de la lista.
3. Primer elemento
4. Segundo elemento
VALUE="num" Atributo de <LI>, actúa como START pero a partir de un elemento predeterminado.
1. Primer elemento
4. Segundo elemento
5. Tercer elemento
Listas de definiciones
Este tipo de lista utiliza las etiquetas <DT>y <DD> en lugar de <LI>. En estas lista cada elemento tiene una entrada de texto indentada respecto a dicho elemento. Es como si tuvieramos una lista de conceptos y sus definiciones (el texto indentado). Para entenderlo lo mejor es verlas en marcha:
<DL> <DT>HTML<DD>Es un lenguaje de definición de páginas web. <DT>Java<DD>Es un lenguaje de programación.</DL>
se verá como
HTML Es un lenguaje de definición de páginas web.
Java Es un lenguaje de programación.
La etiqueta <DL> sólo admite como parámetro el ya conocido COMPACT, que tiene el mismo comportamiento que con los otros dos tipos de lista anteriores. Un elemento <DT> puede contener varios elementos <DD>.
Imágenes Insertar imágenes Imágenes y enlaces
Alineación respecto al texto
Insertar imágenes
Una página web sin alguna imagen es como el mar sin sal. Para incluir gráficos e imágenes en nuestras páginas utilizaremos la etiqueta
<IMG SRC="fichero_grafico" ALT="descripcion" WIDTH=88 HEIGHT=31 BORDER=0>
El parámetro SRC especifica la URL del fichero que contiene el gráfico. Los formatos estándar en la red son el GIF, PNG y JPG.
El parámetro ALT especifica el texto que se mostrará en lugar del gráfico 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 ratón por encima de la imagen. Es por eso que, aunque algunos usuarios no lo lleguen a ver nunca, conviene ponerlo siempre. De hecho, el estádar HTML 4.0 obliga a hacerlo. Su uso es además muy interesante cara a los robots buscadores que de este atributo pueden sacar información del tema tratado en la página.
Los atributos WIDTH y HEIGHT indican el ancho y alto del gráfico en pixels. Su uso no es obligatorio pero si muy aconsejable para mejorar el tiempo de carga de la iamgen: el navegador sabe el espacio que ocupará la imagen y puede seguir colocando los otros elementos de la página mientras se termina de descargar la imagen.
Por último vemos el atributo BORDER que como podrás adivinar tan solo coloca el ancho del borde que rodea la imagen. Por defecto su valor es cero, salvo el caso que vemops en el siguiente apartado.
Por ejemplo
<img src="/imgs/im_crear/pubcorreo.gif" width="30" height="32" alt="correo">
Imágenes y enlaces
Recordarás que al hablar de los enalces decíamos que en el contenido de la etiqueta <A> podía ir texto o una imagen. En este caso el navegador destaca la imagen colocandole un borde del color que use para señalar los enlaces de texto. Algo bastante lógico pero que en la mayoría de los casos queda poco estético, afortunadamente podemos eliminar ese borde poniendo a 0 el atributo BORDER.
<a href="tema1.htm"><img src="/imgs/im_crear/indice2.png" alt="Tema 1" width="45" height="30"></a>
Se ve así:
Sin embargo,
<a href="tema1.htm"><img src="/imgs/im_crear/indice2.png" alt="Tema 1" width="45" height="30" BORDER="0"></a>
Se ve así:
Alineación respecto al texto
HTML nos permite controlar la disposición de las imágenes en la página con relación al texto, para ello usamos el parámetro ALIGN :
ALIGN= Significado Muestra
TOP Coloca el punto más alto de la imagen coincidiendo con más alto de la línea de texto actual.
Este es el texto
MIDDLE Alinea el punto medio (en altura) de la imagen con la base del texto.Este es el texto
BOTTOM Alinea el punto más bajo de la imagen con la base del texto.Este es el texto
LEFT Coloca la imagen a la izquierda del texto.Este es el texto y esta es otra línea
RIGHT Coloca la imagen a la derecha del texto.Este es el texto y esta es otra línea
Hay que aclarar que la base del texto es la línea donde descansan casi todas las letras del alfabeto excepto algunas como la p, la g o la j.
Los formularios Formularios Campos de texto Opciones Botones del formulario Marcas de verificación Campos ocultos
Formularios
Las páginas webs no son solo permiten presentar documentos de forma más o menos atractiva al destinatario final, sino que también proporcionan elementos para interactuar con él. De esta manera el usuario final puede enviar su opinión de la página al autor, o realizar una compra en línea. Estos elementos se conocen como formularios y seguro que todos los habéis visto y utilizado alguna vez. Por ejemplo este sencillo formulario
Tu nombre:
¿Estás registrado?
Si
No
<FORM ACTION="" METHOD="POST" name="formul">Tu nombre:<BR><INPUT NAME="nombre" TYPE="TEXT" SIZE="32"/><BR>¿Estás registrado?<br><label><input type="radio" name="Si" value="1">Si</label><br><label><input type="radio" name="Si" value="0">No</label><br><BR><INPUT TYPE="Submit" VALUE="Enviar"><input name="Reset" type="reset" id="Reset" value="Borrar"></FORM>
El formulario está formado por una serie de elementos (cajas de texto, casillas de verificación, botones...) encerrados entre las etiquetas <FORM> </FORM>. Como verás en esta etiqueta existen varios parámetros como son:
ACTION la acción que se ejecutará al pulsar el botón de enviar. Habitualmente será una URL a un programa CGI encargado de procesar los datos del formulario. Puede ser también mailto: seguido de una dirección de correo electrónico, en este caso el formulario se enviará por correo, en cuyo es recomendable añadir el parámetro ENCTYPE="text/plain" para que el mensaje sea fácil de leer.
METHOD indica como se enviarán losa datos del formulario al programa que los procese: POST de forma interna (oculta) y GET añadido a la dirección URL del programa. Si usas el formulario para un mailto: debes usr el método POST
NAME es el nombre que identifica al formulario, útil si se usan scripts dentro de la página.
Cajas de texto
Los controles o cajas de texto permiten al usuario escribir texto en el formulario. Pueden ser cajas de una solo línea o cuadros de texto con varias líneas. Las primeras usan la etiqueta <INPUT> y pueden ser de texto simple (se ve lo que escribimos) o de tipo password (lo que escribimos es visto como una serie de asteriscos).
<INPUT TYPE=TEXT>
<INPUT TYPE=PASSWORD>
Ojo, el dato escrito en el segundo campo no se ve pero eso no quiere decir que esté codificado en ninguna manera. Ambos tipos comparten todos sus atributos que son:
Parámetro SignificadoSIZE Tamaño en columnas de la caja de texto.MAXLENGTH Número máximo de caracteres que se pueden teclear.VALUE Texto por defecto que aparecerá en el campo.
Pero si necesitamos que el usuario escriba más llineas de texto pues usamos la etiqueta <TEXTAREA></TEXTAREA>:
<TEXTAREA>Comienza a escribir </TEXTAREA>
Si escribimos algun texto dentro de esta etiqueta, ese texto aparecerá por defecto en ese area de texto. Admite estos parámetros:
Parámetro UtilidadROWS Filas que ocupará la caja de texto.COLS Columnas que ocupará la caja de texto.
Opciones
Para que el usuario pueda marcar una de entre varias opciones podemos usar un campo INPUT de tipo RADIO. En nuestro ejemplo lo hemos usado:
Si<INPUT NAME="Registrado" TYPE=RADIO VALUE="1"><BR>No<INPUT NAME="Registrado" TYPE=RADIO VALUE="0"><BR>
Si
No
Fíjate que ambos INPUT usan el mismo atribuyto NAME, de esa manera el navegador los reconoce como un juego de respuestas alternativas.
Parámetro SignificadoVALUE Este es el valor que asignará a la variable.CHECKED Si lo indicamos en una de las opciones esta será la que esté activada por defecto.
Listas de opciones
Hay una alternativa al control de selección de alternativas: las listas desplegables. Mediante este control el usuasrio puede seleccionar una opción de entre un grupo que aparece en una lista desplegable. La lista se encierra en etiquetas <SELECT></SELECT>, y las opciones se poenen en etiquetas <OPTION></OPTION>:
<SELECT NAME="Idioma"> <OPTION>Español</OPTION> <OPTION>Inglés</OPTION> <OPTION>Francés</OPTION> <OPTION>Alemán</OPTION></SELECT>
Los parámetros que admite SELECT son las siguientes:
Parámetro SignificadoSIZE El número de opciones que podremos ver. Si es mayor que 1 veremos una lista de selección con un
scroll y, si no, veremos una lista desplegable.MULTIPLE Si lo indicamos podremos elegir más de una opción, para ello el usuario utilizará la tecla CTRL y el
botón activo del ratón.
Y OPTION estos:
Parámetro SignificadoVALUE Este es el valor que asignará a la variable.SELECTED La opción con esta propiedad será la que aparezca seleccionada por defecto.
Botones del formulario
Existen dos clases e botones: uno que se utiliza para poner en marcha la operación indicada por ACTION (botones submit) y otro que sirve para resetear el formulario borrando el contenido de todos los controles:
<INPUT TYPE=SUBMIT><INPUT TYPE=RESET>
En ambos casos su puede usar el parámetro VALUE para el texto que aparece dentro del botón. El botón de submit puede ser una imagen, por ejemplo
<input name="imageField" type="image" src="imgs/botonel.gif" width="85" height="46" border="0">
Que se vería
Este botón actua como un botón tipo SUBMIT, pero envía con los datos del formulario las coordenadas X Y del punto de la imagen donde pulsó el usuario.
Marcas de verificación
Son controles parecidos a los campos de opciones pero que no van agrupados, o sea no son excluyentes, Sirven para que el usuario coloque una marca de si o no (verdadero o falso, marcado o no marcado). Lo podremos conseguir por medio de controles de confirmación:
<INPUT NAME="Opina" TYPE=CHECKBOX>¿Te gusta el curso? ¿Te gusta el curso?
Si queremos que el control esté activado por defecto le añadiremos el parámetro CHECKED.
Campos ocultos
Mediante un formulario podemos también enviar datos al programa encargado de procesarlo. Esto se realiza mediante los llamados campos ocultos, que son campos INPUT de tipo HIDDEN, y se llaman así porque no se ven en la página web, o sea, el usuario no los ve a menos que se mete en la vista de código de la página, digo esto poruqe no vayamos a pensar que con estos campos podemos pasar información privada mediante los formularios. El código para este tipo de campos es algo como esto:
<INPUT TYPE=HIDDEN NAME="Curso" VALUE="Javascript">
De esta manera si en un sitio tengo muchos formularios sabré que estos datos en concreto vienen de la página de Javascript. Su uso realmente no lo verás hasta que no escribas o utilices programas para gestionar los formularios.
Formularios avanzados Controles avanzados para formularios Botones Etiquetas Agrupación de elementos Desactivación de elementos
Controles avanzados en formularios Con lo que has visto en la sección anterior de formularios podrás perfectamente incoiporar estos elementos de interaccón a tu página web, pero los navegadores modernos (MSIE 5+ y Netscape 6+) permiten el uso de algunas características extras añladidas por el estandard HTML 4.0, características que básicamente mejoran la estética y facilitan el uso de estos elementos.
Botones
Una importante mejora en el HTML 4 es el nuevo control <BUTTON> que permite enriquecer la etiqueta de texto que hasta ahora tenían los botones de formulario. Ahora estos elementos pueden tener cualquier contenido HTML, como por ejemplo imagen con un texto. POr ejemplo el siguiente código
<BUTTON TYPE="button">Inicio <img src="imgs/im_crear/bolamas.gif" width="10" height="10"></BUTTON>
Ínicio
Los parámetros de dicha etiqueta son TYPE, que podrá tomar los valores SUBMIT (por defecto), RESET y BUTTON, NAME y VALUE.
Etiquetas
Los controles tipo LABEL permiten asociar etiquetas a los controles de formulario. Es decir ahora el texto que suele acompañar a los campos que debe rellenar el usuario son solo eso texto, pero con esta etiqueta ese texto se convierte en un elemento activo que forma parte del campo y podemos seleccionar éste pulsando sobre la
etiqueta. Observa el uso del atributo for usado para asociar la etiqueta al campo cuyo ID tenga el mismo valro que este for
<INPUT ID="Curso" TYPE=CHECKBOX><LABEL for="Curso"> Me gusta este curso</LABEL>
Me gusta este curso
Compara con este otro ejemplo aparentemente igual al anterior.
<INPUT NAME="Curso" TYPE=CHECKBOX> Me gusta este curso/a Me gusta este curso
En el primer caso el click sobre la etiqueta actua igual que sobre el control.
Agrupando elementos
HTML 4 nos presenta una forma sencilla de estructurar los formularios sin necesidad de acudir a las socorridas tablas. Ahora podemos agrupar visualmente varios controles encerrándolos dentro de la etiqueta FIELDSET, veremos que alrededor de ellos se ve un rectángulo con el título que le demos mediante la etiqueta LEGEND.
<FIELDSET> <LEGEND>Tus datos</LEGEND> <LABEL> Nombre: <INPUT TYPE="text" name="nombre"> <br>Edad: <INPUT TYPE="text" name="edad"> </LABEL></FIELDSET>
Tus datosNombre:
Edad:
La posición del título (LEGEND) puede controlarse usando el parámetro ALIGN, que por defecto es TOP (arriba), pero puede ser BOTTOM (abajo) a la LEFT (Izquierda) o RIGHT (derecha) .
Desactivando elementos
Todos los controles de un formulario se pueden desactivar, impidiendo así al usuario que los sobreescriba. Se seguirán mostrando en pantalla, aunque con un aspecto distinto para indicar que no son editables. Para ello sólo tenemos que indicarle el parámetro DISABLED:
<LABEL DISABLED>Origen: <INPUT TYPE=TEXT DISABLED></LABEL>
Origen:
Mapas de imágenes Mapas de imágenes Mapas lado cliente Usando los mapas
Mapas
Recordemos que los enlaces en las páginas web podían escribirse con un texto o con una imagen. Es decir podíamos tener una imagen que al ser pulsada con el ratón nos llevaba a otra página. Pues bien un mapa de imagen es algo parecido pero en el que l imagen no tienen asociado un solo enlace sino varios: depende de que parte de la imagen pises para ir a uno u otro destino. Esto se puede hacer de dos maneras:
Gestionando el mapa en el navegador. Gestionando el mapa en el servidor.
Los más utilizados sin duda actualmente son los primeros, los mapas del lado del cliente, pues no exigen ningún apoyo del servidor y por tanto los puede usar cualuier webmaster en su propia página.
Mapas lado cliente
Un mapa no es más que una imagen en la que se definen zonas activas, o sea, zonas que al ser pulsadas con el ratón actúan como un enlace y nos llevan a otras páginas. Su creación tienen dos partes: una definir el mapa y otra asociar el mapa con una imagen:
<MAP NAME="mapa_enlaces"> <AREA SHAPE=... COORDS=... ALT="Enlace a.."> ...</MAP>
La descripción del mapa es de lo más simple: le damos nombre (para luego poderle asociar la imagen) y definimos las zonas activas (formas geométricas como verás a continuación):
Parámetro SignificadoSHAPE Define la forma de la zona: rectangular, circular o poligonal.
COORDS Coordenadas (separadas por comas) que definen la zona. El número y significado de esas coordenadas dependerá de la forma.
HREF URL del enlace corespondiente a esta zona.NOHREF Zona inactiva ALT Texto alternativo, etiqueta idéntica al ALT de IMG
Como podemos ver, para declarar correctamente una zona necesitamos conocer cómo se definen exactamente las formas y coordenadas:
SHAPE COORDENADAS
Rectangular RECT "x1,y1,x2,y2" siendo (x1,y1) la esquina superior izquierda y (x2,y2) la inferior derecha.
Circular CIRC "x,y,r" siendo (x,y) el centro del círculo y r el radio.Polígono irregular POLY "x1,y1,x2,y2,x3,y3,..." definiendo cada pareja (x,y) una esquina del polígono. La
última pareja de coordenadas se unirá a la primera para cerrar el polígono.Toda la imagen DEFAULT No se necesitan
Usando los mapas
Una vez definido como es el mapa lo aisgnamos a una imagen:
<IMG SRC=... USEMAP="#mapa_enlaces">
Siempre tenemos que añadir 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.apache.org" ALT="Servidor Apache"> <AREA SHAPE=RECT COORDS="26,0,53,31" HREF="http://www.w3c.org" ALT="la W3C"> <AREA SHAPE=DEFAULT NOHREF ALT="por defecto"></MAP><IMG SRC="mapa.gif" WIDTH=198 HEIGHT=51 BORDER=0 USEMAP="#deinteres">
Se ve tal que 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 ningún URL por si el usuario pulsa fuera de las zonas activas.
Las tablas Tablas Definición Definir las filas Definir las celdas Títulares
Tablas
La organización del texto en una página es posible gracias a las tablas. Muchas páginas web son como páginas de revistas, y la forma más simple de emular las funciones de maquetación son las tablas. Una tabla no es más que una colección de listas y columnas a cuyas interseccinoes le vamos a llamar celdas, y es en esas celdas donde podmeos colocar textos o imágenes. Las tablas se pueden incluso anidar y las celdas se pueden agrupar unas con otras para lograr disposiciones de texto e imagen prácitcamente similares a las que se podrían conseguir en páginas de revistas gracias a los programas de maquetación.
Definir tablas
Para definir una tabla tan solo debemos definar las filas que la componen. Y dentro de estas las características de las celdas. Por ejemplo la siguiente tabla posee 2 filas (2 <TR></TR>) y 3 columnas (3 pares <TD></TD> en cada fila) así:
<TABLE> <TR> <TD>1,1</TD> <TD>1,2</TD> <TD>1,3</TD> </TR> <TR> <TD>2,1</TD> <TD>2,2</TD> <TD>2,3</TD> </TR></TABLE>
1,1 1,2 1,32,1 2,2 2,3
Pero la definición va más allá, podemos poner bordes, colores de fondo a las celdas, definir márgenes en las celdas, aumentar o disminuir el espaciado entre celdas. Resumimos todo esto en la siguiente tabla de atributos:
WIDTH Anchura de la tabla. Puede ir en pixels o en porcentaje de la anchura total disponible.ALIGN Alinea la tabla a izquierda (LEFT), derecha (RIGHT) o centro (CENTER).BORDER Especifica el grosor del borde que se dibujará alrededor de las tabla y celdas. CELLSPACING Espacio entre celdas, en pixels.CELLPADDING Borde interior de las celdas, en pixels.
Si ahora, por ejemplo definimos ahora la tabla anterior como <TABLE BORDER=1 WIDTH="50%" ALIGN=CENTER> veremos lo siguiente:
1,1 1,2 1,32,1 2,2 2,3
El contenido escrito son las coordenadas de la celda, así 1,2 indica que esa celda es la correspondiente a la fila 1 y la columna 2.
Definiendo las filas
La definición de cada fila se inicia con la etiquete <TR> y finaliza con </TR>, entre ellas colocaremos las celdas. Cada etiqueta TR tiene los siguientes atributos:
ALIGN Alinea el contenido de las celdas de la fila horizontalmente a izquierda (LEFT), derecha (RIGHT) o centro (CENTER).
VALIGN Alinea el contenido de las celdas de la fila verticalmente arriba (TOP), abajo (BOTTOM) o centro (MIDDLE).
Defiminiendo las celdas
Ya sólo nos queda definir cada celda para lo que disponemos de las TD y TH. Esta última es una celda especial que se verá destacada, como un título para la columna: en negrita y centrado. Ambas etiquetas admiten los siguientes atributos:
ALIGN Alinea el contenido de la celda horizontalmente a izquierda (LEFT), derecha (RIGHT) o centro (CENTER).
VALIGN Alinea el contenido de la celda verticalmente arriba (TOP), abajo (BOTTOM) o centro (MIDDLE).WIDTH Especifica la anchura de la celda. También se puede especificar tanto en pixels como en porcentaje,
teniendo en cuenta que, en este último caso, será un porcentaje respecto al ancho total de la tabla (no de la ventana del navegador).
NOWRAP Impide que, en el interior de la celda, se rompa la línea en varias lineas.COLSPAN Número de celdas de una fila agrupadas.ROWSPAN Número de celdas de la columna agrupadas.
Los dos últimos parámetros se usan para fundir celdas de una misma fila o de una misma columna. Por ejemplo veamos 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> <TD>2,2</TD> <TD>2,3</TD> </TR> <TR> <TD>3,2</TD> <TD>3,3</TD> </TR></TABLE>
1,1 y 1,2 1,3
2,1 y 3,12,2 2,33,2 3,3
Si te fijas cuando una celda con un colspan = 2 equivale a dos celdas a la hora de calcular el número de celdas de la fila. Algo similar ocurre con el rowspan pero referido a celdas unidas en vertical.
Titulares
Ya hemos dicho que hay un tipo de celdas utilizable como encabezamiento o titular, pero la tabla al completo puede llevar un título, que irá en una zona fuera de cualquier celda o fila. Esta es la etiqueta CAPTION. Su uso es muy simple como puedes ver en este ejemplo:
<TABLE BORDER=1> <CAPTION> Números</CAPTION>...</TABLE>
Números 1,1 y 1,2 1,3
2,1 y 3,12,2 2,33,2 3,3
Con el parámetro ALIGN, podemos controlar que el título aparezca arriba (por defecto TOP) o abajo de la tabla , con el valor BOTTOM.
Marcos o frames Marcos Etiqueta <FRAMESET> Etiqueta <FRAME> Marcos flotantes <IFRAME> Acceso a los marcos
Marcos
Denodados por unos y adorados por otros los marcos o frames son una forma de insertar varias páginas web en una sola. Mal utilizados pueden arruinar la mejor página web, pues no hemos de olvidar que la pantalla del monitor está físicamente limitada. Cada marco que compone la página poseerá sus propios bordes y barras de scroll, comportándose como ventanas independientes. Su situación en la página es rígida, no podemos colocarlos en las posiciones que deseemos, si tenemos cuatro marcos se situarán en cada uno de los cuatro cuadrantes de la pantalla. Si tenemos dos la pantalla se dividiré en dos filas o en dos columnas para alojarlos. Pueden ser útiles para compartir un cierto contenido por todo el sitio web, por ejemplo para una barra de navegación.
Su uso puede parecer algo compeljo pero es muy simple. Básicamente se trata de definir una página contenedora de los marcos y de colocar en cada uno de ellos la página cuyo contenido mostrarán. Por supuesto también concretaremos el tamaño y posición y otros atributos de cada marco. Pueden existir navegadores que no puedan manejar los marcos, por ello colocamos un texto alternativoa explicando la situación. Mira el siguietne código y ve los resultados en este ejemplo.
<HTML><HEAD> <TITLE>Los frames: páginas multiventana</TITLE></HEAD><FRAMESET COLS="20%,80%"> <FRAME NAME="indice" SRC="indice.htm"> <FRAME NAME="principal" SRC="principal.htm"> <NOFRAMES> <P align="center">Al parecer tu navegador no soporta marcos, actualízate.</P> </NOFRAMES></FRAMESET></HTML>
Fíjate las diferencias y coincidencias con una página HTML habitual: en lugar de BODY ahora tenemos una etiqueta FRAMESET. Cada una de estas FRAMESET son una página o ventana dentro de la página contenedora que estará compuesta por varias zonas definidas con los parámetro COLS o ROWS. En el ejemplo se trata de dos marcos uno junto al otro: uno ocupa el 20% de la ventana del explorador y el otro el 80% restante.
Dentro del <FRAMESET> definimos los marcos que componen el conjunto y la acción alternativa para navegadores que no soporten marcos. A cada uno de los marcos le ponemos un nombre y especificamos qué página HTML se mostrará en él (etiqueta <FRAME>). Sólo queda definir lo que verá el usuario en el supuesto de que su navegador no soporte frames (etiqueta <NOFRAMES>).
Etiqueta FRAMESET
Los parámetros COLS y ROWS nos permiten controlar el tamaño de los marcos presentados en la ventana del navegador. Existen tres formas de establecer estos tamaños:
Porcentajes: podemos definir el tamaño de un marco como un porcentaje del espacio total disponible (el ancho o alto de la ventana del navegador)
Absolutos: Podemos especificar el ancho o alto del marco en pixels. Calculado: Podemos colocar el ancho o alto de un marco y dejar que el tamaño del otro lo calcule el
navegador, usando apra ello un asterisco en lugar de un valor o porcentaje. Por ejemplo si tenemos tres marcos y colocamos cols=" 10%, 30%, *", el último ocupará el 60% (el espacio sobrante 100 - 10 -30). Si colcoamos el * varios marcos se repartirán el espacio equitativamente, pero podemos también hacer
que un marco sea doble o triple de otro. Así, un marco con un espacio de 3* será tres veces más grande que el que contenga un asterisco.
Se pueden combinar los tres métodos. Por ejemplo:
<FRAMESET COLS="10%,*,300,3*">
Supongamos que el ancho total de la ventana son 800 pixels. El primer marco ocupará el 10%, es decir, 84 pixels. El tercero necesita 300, en total tenemos 384 ocupados luego quedan 800-384, 416 pixels libres. Los otros se repartirán este espacio en función de los asteriscos: 416/4 = 104 pixels para el de un asterisco y 312 para el otro. En total tenemos ocupados los 800 pixels. Lo más recomendable es dejar un marco con tamaño calculado, o sea, con el asterisco para.
Y bueno si queremos que los marcos se distribuyan de una forma algo más irregular podemos aprovechar la posibilidad de anidarlos, en otras paralbras: un marco puede contener una página que a su vez ontenga otros marcos. Esto se hace poniendo otro <FRAMESET> donde normalmente colocamos las etiquetas <FRAME> tal que así:
<FRAMESET COLS="20%,80%"> <FRAME NAME="indice" SRC="indice.htm"> <FRAMESET ROWS="*,80"> <FRAME NAME="principal" SRC="superior.htm"> <FRAME NAME="ejemplos" SRC="principal.htm"> </FRAMESET></FRAMESET>
El resultado del anidamiento lo podréis contemplar aquí.
Frameset tiene aún dos parámetros extras: frameborder y framespacing, el primero permite eliminar los bordes que separan a todos los marcos, mientras que el segundo permite controlar el ancho del espacio que separa los marcos
Etiqueta FRAME
Esta es la etiqueta que nos permite describir como debe ser cada marco Los parámetros que soporta son:
NAME Asigna un nombre a un marco, de esta manera luego podemos usarlo como destino de un enlace.
SRC Indica la URL del documento HTML que ocupará el marco.NORESIZE Evita que el usuario pueda cambiar el tamaño del marco.
FRAMEBORDER Ssi lo igualamos a cero el borde de este marco desaparece (pero ojo si los contiguos tienen borde éste se verá).
SCROLLING Coloca o no las barras de scroll. Su valor es por defecto AUTO, aparecerán si son necesarias. Las otras opciones que tenemos son YES o colocarlas y NO, no ponerlas.
MARGINWIDTH Permite cambiar los márgenes horizontales dentro de un marco. Se representa en pixels.MARGINHEIGHT Igual al anterior pero con márgenes verticales.
Marcos flotantes <IFRAME>
Una excelente alternativa a los marcos fijos son los marcos flotantes, actualmente soportados por todos los navegadores. La idea de este elemento ideado por Explorer, sigue siendo la misma: incluir una página externa dentro de otra, pero en este caso el marco puede quedar totalmente integrado en la página contenedora. Es como un include. La descripción de este elemento es muy parecida a los frames: es necesario decir de donde viene la página y como se ha de ver el marco (bordes, márgenes scroil...) Esto se hace mediante los parámetros ya vistos:
NAME Asigna un nombre a un marco, de esta manera luego podemos usarlo como destino de un enlace.
ALIGN Alineación del marco respecto al texto que lo rodea (botton, right, left, middle)
SRC Indica la URL del documento HTML que ocupará el marco.HEIGHT Altura del marco WIDTH Anchura del marco FRAMEBORDER Ssi lo igualamos a cero el borde de este marco desaparece
SCROLLING Coloca o no las barras de scroll. Su valor es por defecto AUTO, aparecerán si son necesarias. Las otras opciones que tenemos son YES o colocarlas y NO, no ponerlas.
MARGINWIDTH Permite cambiar los márgenes horizontales dentro de un marco. Se representa en pixels.MARGINHEIGHT Igual al anterior pero con márgenes verticales.allowtransparency Si es true La página origen puede tener como color de fondo transparent.
Acceso a otros marcos
Si leístes la sección dedicada a los enlaces recordarás que cuando pulsas un enlace en la ventanda del navegador aparecerá otra página, pero podíamos colocar el atributo target para hacer que la nueva página se abriera en otra ventana. Pues bien esta otra ventana puede ser otro marco. Así en un marco puedo colocar un enalce que abra la página en otro marco de la misma página.
Este parámetro 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 el último modificaremos el marco en el que por defecto se nos muestran todos los enlaces.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:
<A HREF="pagina.html" TARGET="principal">
También existen cuatro nombres reservados que podremos utilizar en el parámetro TARGET:
_top Elimina todos los marcos existente y muestra la nueva página en la ventana original sin marcos.
_blank Muestra la nueva página en una ventana nueva y sin nombre del navegador.
_self Muestra la nueva página en el marco donde está declarado el enlace.
_parent Muestra la nueva página en el <FRAMESET> que contiene al marco donde se declara el enlace. En el ejemplo que pusimos de <FRAMESET> anidados, una enlace situado en el marco ejemplo cuyo parámetro TARGET fuese igual a _parent eliminaría la separación entre los marcos ejemplo y principal y mostraría en ese nuevo marco la nueva página.
Los Estilos CSS Hojas de estilo Clases Bloques <SPAN> y <DIV>
Hojas de estilo
Las hojas de estilo intentan separar el contenido de un página de la forma de presentarlo en pantalla. Esto lo hacen personificando los cambios que las etiquetas de formato HTML realizan en nuestro texto. Por ejemplo, sabemos que usando <P> tendremos una párrafo nuevo con una separación del anterior determinada, etc.. Con las hojas de estilo también podremos decirle a un párrafo que todo su texto sea verde y que además va a tener un margen izquierdo de 30 pixels. Por ejemplo.
El primer navegador en soportar hojas de estilo fue el Explorer 3.0. Utiliza la llamada sintaxis en cascada. El Communicator acepta esa sintaxis e introduce una nueva basada en JavaScript. Sin embargo, como el estándar más comunmente aceptado de sintaxis de hojas de estilo es el de cascada, será este el único que veamos. Vamos a empezar con un ejemplo:
<STYLE TYPE="text/css"> P {color: green; margin-left: 30;}</STYLE>
Vamos a detenernos en todos los elementos. Para empezar, la etiqueta HTML con la que deberemos englobar las hojas de estilo será <STYLE>, que sólo podrá estar situada en la cabecera de la página. Su parámetro TYPE indica la sintaxis que utilizaremos para definirlas. En el caso de las hojas en cascada deberá ser text/css.
Ahora examinemos la hoja de estilo propiamente dicha. Indicaremos primero la etiqueta que deseamos personalizar. Será <P>. Después, entre llaves, pondremos una lista de las cosas que queremos modificar. En nuestro caso son dos, el color (en el formato habitual) y el margen, que se define en pixels.
Hay que destacar que, aunque muchas veces los navegadores tengan una cierta manga ancha, la sintaxis CSS (Cascading Style Sheet) es sensible a la diferencia entre mayásculas y minúsculas. Conviene tener cuidado.
El HTML 4.0 permite declarar fuera de la página las hojas de estilo, llevando de este modo al extremos su filosofía de separar forma y contenido. Si colocamos nuestras hojas de estilo en un fichero llamado estilos.css (solo las hojas, no la etiqueta <STYLE>) no tendremos más que incluir la siguiente línea en la cabecera de nuestro documento HTML para incluirlas en nuestras páginas:
<LINK REL="stylesheet" HREF="estilos.css" TYPE="text/css">
Vamos a ver cómo quedaría un párrafo que siguiese la hoja de estilo anterior
Si la cosa va bien, este párrafo estará escrito en verde y con un margen izquierdo de 30 pixels. Precioso, ¿no? embargo, estoy convencido de que los más avispados se habrán dado cuenta de que les estoy ocultando algo. Por lo que he dicho hasta ahora la personalización de una etiqueta debería ser general y en esta página sólo este párrafo está modificado. No os preocupéis demasiado, ahora os cuento como se hace.
Clases
Hasta ahora habíamos definido estilos para una etiqueta determinada. Pero también podemos hacerlo para una clase determinada. ¿Esto que significa? Pues que si, por ejemplo, definimos la hoja de estilo de la clase verde de la siguiente manera:
P.verde {color: green; margin-left: 30px;}
sólo estarán verdes y con un margen izquierdo de 30 pixels aquellos párrafos definidos con <P CLASS="verde">. Así de sencillo.
Ampliando un poco más las posibilidades de las clases, se pueden realizar excepciones. Supongamos que tenemos unos párrafos que queremos que tengan unos márgenes determinados y color verde. Y deseamos que uno solo de esos párrafos, con los mismo márgenes, sea azul. Podríamos definir dos clases distintas, pero hay un método mejor: usar el parámetro ID. Por ejemplo:
all.verde {color: green; margin-left: 10px;}#ej1 { color: blue;}
Ahora todos los párrafos de clase verde serían, obviamente, verdes y con un margen de 10 pixels. Sin embargo el párrafo definido por <P CLASS="verde" ID="ej1"> será azul:
Este párrafo es muy verde.
Y anda que este...
Sin embargo, este no, fíjate que curioso.
Bloques SPAN y DIV
Puede que, a veces, no queramos modificar el comportamiento de un elemento sino que creemos un estilo que queremos actúe sólo, un estilo completo creado de la nada. Una etiqueta nueva y propia. Entonces, ¿qué hacemos? Utilizar las etiqueta <SPAN> y <DIV>.
El método es simple. Definimos una clase rojo que simplemente modifique el color (que será rojo). Ahora, si queremos que una sección 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 línea tanto al comienzo como al final). Veremos en el siguiente capítulo que a las etiquetas que se comportan como bloques (<P>, <H1>, las que dijimos modifican un párrafo 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;}
cuyos atributos explicaremos en la referencia de las hojas de estilo, y ponemos el siguiente código HTML:
<DIV ALIGN="CENTER" CLASS="sombra">El maravilloso curso de HTML</DIV><DIV ALIGN="CENTER" CLASS="titulo">El maravilloso curso de HTML</DIV>
obtendremos este típico efecto sombra:
El maravilloso curso de HTMLEl maravilloso curso de HTML
En el siguiente capítulo tenéis una guía de referencia con todos (o casi todos) los atributos que se pueden modificar con CSS.
Estilos CSS: referencia Estilos CSS Propiedades de bloque Propiedades de tipo de letra Propiedades de formato del texto Propiedades de color y fondo Otros
Estilos CSS Los estilos CSS son una forma de separar el contenido de la página web de su formato. Es decir por un lado nos preocupamos de dar contenido a la página y por otro de definir como se deberá ver. Es una idea magnífica que nos permite, por ejemplo, cambiar el estilo de diseño de todo un sitio web sin necesidad de reeditar todas sus páginas: solo modificaríamos el archivo donde se desribe el formato de las páginas, como esquemas de color, imágenes de fondo, etc. Pero no todo es perfecto: los navegadores Explorer y Netscape no entienden los estilos exactamente igual por lo que es conveniente probar las cosas en ambos para asegurarnos que todo se verá como nosotros queremos.
Propiedades de bloque
Cuando hablabamos del formato en las páginas HTML diferenciamos entre elementos de bloque y elementos en linea, Los bloques eran elementos como el <p> (párrafo) o las <div> (capas). Entonces de entrada veamos que propiedades se les puede aplicar a este tipo de elementos:
Propiedad Significado Valores
margin-top, margin-right, margin-bottom, margin-left, margin: top right bottom left
Márgenes dntro del bloque. Tanto margin como margins() se utilizan para cambiar todos estos atributos a la vez.
tamaño, porcentaje o auto. Por defecto es cero.
padding-top, padding-right, padding-bottom, padding-left,<br/> padding: top right bottom left
Distancia entre el borde y el contenido del bloque.
tamaño, porcentaje o auto. Por defecto es cero.
border-top-width, border-right-width, Anchura del borde de un bloque. numérico
border-bottom-width, border-left-width,<br/> border-width: top right bottom left
border-style Tipo de borde de un bloque.none, ruged, solid, 3D,... por defecto ninguno (none).
border-color Color del borde de un bloque. Código o nombre de color
width, height Ancho y alto del bloque. tamaño, porcentaje o auto, automático por defecto.
float Justificación del contenido de un bloque. left, right o none, por defecto ninguna.
clear Permiso para que otro elemento se pueda colocar a su izquierda o derecha.
left, right, both o none, por defecto ninguno.
Propiedades de tipo de letra
Ahora vamos a examinar las propiedades del tipo de letra que el usuario va a ver. Son las siguientes:
Propiedad Descripción Posibles valores
font-family Tipo de letra (que puede ser genérico) que vamos a usar. lista de tipos, ya sean genéricos o no, separados por comas.
font-size Tamaño del tipo de letra. xx-small, x-small, small, medium, large, x-large, xx-large, tamaño relativo o tamaño absoluto. Por defecto medium.
font-weight Grosor del tipo de letra (negrita). normal, bold, bolder, lighter o 100-900 (donde 900 es la negrita más gruesa). Por defecto normal.
font-style Estilo del tipo de letra (cursiva). normal, italic, italic small-caps, oblique, oblique small-caps o small-caps. Por defecto normal.
Recordemos lo dicho al hablar del tipo de letras: no todos tus tipos tienen que estar en los ordenadores de tus visitantes.
Propiedades de formato de texto
Nuesto siguiente objetivo van a ser las propiedades de formato del texto que cualquier procesador de textos nos permite cambiar.
Propiedad Descripción Posibles valoresline-height Interlineado. número o porcentaje.
text-decoration
Efectos variados sobre el texto.
none, underline (subrayado), overline (como subrayado, pero por encima), line-through (tachado) o blink (parpadeante); por defecto ninguno.
vertical-align Posición vertical del texto. baseline (normal), sub (subíndice), super (superíndice), top, text-top, middle, bottom, text-bottom o un porcentaje. Por defecto baseline
text-transform
Transforma el texto a mayúsculas o minúsculas.
capitalize (pone la primera letra en mayúsculas), uppercase (convierte todo a mayúsculas), lowecase (a minúsculas) o none, por defecto no hace nada.
text-align Justificación del texto. left, right, center o justify
text-indent Tabulación con que aparece la primera línea del texto. tamaño o porcentaje, por defecto cero.
Propiedades de color y fondo
También es posible cambiar el color o la imagen de fondo de cualqueir elemento.
Propiedad Descripción Posibles valorescolor Color del texto. un color (en el formato habitual).
background Modifica tanto el gráfico el color de fondo. dirección del fichero que contiene la imagen o un color.
Las direcciones URL (para la imagen de fondo por ejemplo) se expresan del siguiente modo:
background: url(fondobonito.gif);
Otros
Propiedad Descripción Posibles valores
displayDecide si un elemento es interior (como <I>), un bloque (<P>) o un elemento de una lista (<LI>).
inline, block, list y none (que 'apaga' el elemento)
list-style Estilo de un elemento de una lista, pudiendo incluir un gráfico al comienzo del mismo.
disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none o la dirección de un gráfico
white-spaceDecide como se manejan los espacios, si de manera normal o como sucede dentro de la etiqueta <PRE>.
normal y pre
Y ahora... ya no hay más... ¡por fín acabamos! Dejadme que respire un poco y ahora continuamos.
Los scripts Los scripts Javascript
Los scripts
Un script es un programa insertado dentro del documento HTML y que es interpretado y ejcutado por el navegador del usuario. Por tanto estos programas se ejecutan en el ordenador del usuario bien sea directamente (al leer la página) o cuando se produce un suceso o evento particular, como puede ser el pulsar sobre un enlace o mover el ratón o cargar una imagen...
Estos scripts permiten crear páginas dinámicas, modificar el comportamiento normal del navegador, validar formularios, realizar pequeños efectos visuales, etc... Sin embargo, conviene recordar que se ejecutan en el navegador del usuario y no en la máquina donde estén alojadas, por lo que no podrán realizar cosas como manejar bases de datos. Esto hace que los contadores (por ejemplo) se deban realizar de otra manera, utilizando programas CGI (escritos en lenguajes como Perl o PHP).
El primer lenguaje usado para crear scripts fue el JavaScript de Netscape. Nacido con la versión 2.0 de este navegador y basado lejanamente en la sintaxis de Java, su utilidad y el casi absoluto monopolio que entonces ejercía Netscape en el mercado de navegadores permitieron que se popularizara y extendiera su uso.
Internet Explorer de Microsoft, comenzó a soportar este lenguaje en su versión 3.0, pero al mismo tiempo introdujo otro lenguaje con las mismas funciones: el VBScript, una derivación de BASIC. Pero este intento no llegó muy lejos, y el VBScript ha quedado para otras aplicaciones de Microsoft, como Access o Word.
Javascript
Aunque este curso está enfocado a aprender HTML, vamos a detenernos un poco para mostrar la utilidad de los lenguajes de script. Para ello vamos a realizar una pequeña introducción al Javascript. Si te sientes interesado, visita Javascript Desde Cero donde ecnontrarás bastante material para aprender este lenguaje.
Vamos a realizar nuestro primer "programa" en JavaScript. Haremos surgir una ventana que nos muestre el tradicional mensaje "hola, mundo". Así podremos ver los elementos principales del lenguaje. El siguiente código es una página Web completa con un botón que, al pulsarlo, muestra el mensaje.
holamundo.html<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>
Y aquí está nuestro ejemplo funcionando:
Ahora vamos a ver, paso por paso, que significa cada uno de los elementos extraños que tiene la página anterior:
<SCRIPT LANGUAGE="JavaScript"></SCRIPT>
Dentro de estos elementos será donde se puedan poner funciones en JavaScript. Puedes poner cuantos quieras a lo largo del documento y en el lugar que más te guste. Si un navegador no entiende la etiqueta <SCRIPT> escribirá lo que hay entre medias de estos elementos, así que lo encerramos entre comentarios por si las moscas.
function HolaMundo() { alert("¡Hola, mundo!"); }
Esta es nuestra primera función en JavaScript. En el código de la misma vemos una llamada al método alert (que pertenece al objeto window) que es la que se encarga de mostrar el mensaje en pantalla. Por un fallo del Netscape no se pueden poner las etiquetas HTML de caracteres especiales en una función: no los reconoce. Así que pondremos directamente "¡" arriesgándonos a que salga de otra manera en ordenadores con un juego de caracteres distinto al del nuestro.
<FORM> <INPUT TYPE="button" NAME="Boton" VALUE="Pulsame" onClick="HolaMundo()"></FORM>
Dentro del elemento que usamos para mostrar un botón vemos una cosa nueva: onClick. Es un evento. Cuando el usuario pulsa el botón, el evento onClick se dispara y ejecuta el código que tenga entre comillas, en este caso la llamada a la función HolaMundo(), que tendremos que haber definido con anterioridad.
Este ejemplo muestra una pequeña parte de las funcionalidades del JavaScript. De hecho, su utilidad es más bien escasa, por eso te recomiendo de nuevo que eches un vistazo a Javascript Desde Cero.
Las capas o layers Capas Definición Propiedades
Capas
Las capas son bloques con contenido HTML que ppueden posicionarse de manera dinámica y organizables en 3D. Realmente tienen sentido dentro de los estilos CSS, de hecho sus ventajas solo se pueden aprovechar al cien por cien utilizando estilos CSS. Es la mejor ilustración de lo que significa separar contenido de presentación.
En realidad, el nombre de capas proviene de Netscape, que estos elementos los implementaba como <layers>, en castellano capas. Las versiones modernas de Netscape (de la 6 en adelante) ya no usan esta etiqueta si no que se han decantado por la más standard <div>
No obstante la manipulación de estos elementos por parte de Micorsoft y Netscape son diferentes, ambos usan algunas extensiones propias, auqnue ambos admiten los standares de la W3C con lo que el uso de estos elementos es bastante universalizable.
Definición
En realidad las capas no se difinen completamente mediante el lenguaje HTML, sino necesitan del lenguaje de definición de estilos CSS. Entre ambos podemos colocar en nuestras páginas estos elementos movibles, ocultables y en general manipulables de forma dinámica. Por ejemplo:
<STYLE TYPE="text/css"> .la_capa {position:absolute; top:100px; left:20px; width:300; heigth: 200}</STYLE>
Con esto hemos definido un tipo de capa, denominda la_capa, cuya altura es de 200 px y anchura 300 px. Además está situada a 100 px de la parte superior y a 20 px del margen izquierdo de la página. Repito que hemos definido una clase capa, pero no hemos contruido la capa. Para construirla usamos la etiqueta <DIV> y el atributo ID
<DIV ID="micapa"> <H1>Esto es contenido</H1> <P>Aquí sigue más contenido HTML </p> ...</DIV>
Cualquier bloque <DIV> con ID="mi_capa" estará en esa posición y con ese tamaño.
Esta capa puede colocarse en cualquier parte de la ventana, su posición es absoluta (absolute). Pero también podemos definir capas de posicionamiento relativo, es decir, que más que definir las coordenadas de suposición respecto a la ventana, describimos su posición respecto al lugar donde aparezca en el texto. En otras palabras: describimos desplazamiento de la capa respecto de donde la ponemos. Se definen así:
<STYLE TYPE="text/css"> .relativa {position: relative; left: 20px; top: 100px;}</STYLE>
Este ejemplo te muestra dos capas, una absoluta y otra relativa, esta última está construida con una etiqueta <span>, para evitar el salto de línea propio de los bloques.
Propiedades
Existen varias propiedades de las capas que podemos modificar, como son la posición, la visibilidad, el orden en que se ponen en pantalla, etc... Son estos:
Propiedad Significado Valores
left y top
Sitúan la esquina superior izquierda de la capa respecto a la esquina superior izquierda de la capa donde esté metida. Hay que tener en cuenta que el documento completo también se considera una capa.
distancia en pixels, por defecto cero.
width y height Determinan la anchura y altura de la capa. un tamaño en pixels.
clip
Nos permite definir el área que se podrá ver dentro de la capa. Por ejemplo, clip:rect(20px 30px 40px 10px); recortará la capa creando un cuadro visible cuya esquina superior izquierda está a 10 pixels por la izquierda y 20 por arriba de la de la capa y cuyo tamaño sería de 30-10 de ancho y 40-20 de alto.
un área.
z-index
Las capas con un mayor z-index se colocarán más arriba (se dibujarán al final, encima de las otras). Debe ser un valor positivo y único: dos capas no pueden tener el mismo z-index.
número positivo, por defecto las capas definidas en el código HTML más tarde están más arriba.
visibility Especifican si la capa debe verse o estar oculta.
visible, hidden (oculta) o inherit (hereda la
visibilidad de la capa padre). En aquellas capas que simplemente estén dentro de la página principal, este valor es equivalente a visible.
background-image Gráfico de fondo de la capa. una dirección.background-color<imagenenlinea direccion="graficos/explorer.gif" descripcion="explorer"/> y layer-background-color<imagenenlinea direccion="graficos/netscape.gif" descripcion="Netscape"/>
Color de fondo de la capa. un color.
Sonido Esta página me suena Sonido manual Sonido de fondo
Esta página me suena
Siempre hemos oido que las páginas web y que internet se aprovecha de la tecnología multimedia, que si puedes oir música y ver vídeos. Pues bien el elnguaje HTML, repetimos, es un lenguaje par definir documentos de hipertexto y soporta por tanto elementos multimedia como puede ser sonido. Los navegadores mayoritarios son capaces de ejecutar piezas musicales desde una página web, algo de lo que algunos webmaster abusan despiadadamente. Hasta hace no mucho tiempo el colcoar una pieza de música en una página se pagaba con tiempos de carga muy elevados (el navegador no solo tenía que subir la página con sus imágnes y texto, sino también el archivo de sonido). Pero actualmente la extensión de las redes de alta velocidad ha casi eliminado este problema. Aunque si decides colocar música en tu página piensa en que el visitante quizás no quiera oir música o prefiera escuchar la radio o sus propios CD,s, por tanto dale siempre la oportunidad de hacer callar a la página.
Los formatos de sonido que serán reproducidos por cualquier navegador son los WAV y MID. Aunque otros formatos también serán reproducidos previa carga del correspoindiente plugin, como Real Audio o Quicktime.
Sonido manual
Una forma muy simple de ejecutar un sonido es mediante un enlace que llame alk archivo de sonido, el sistema operativo llamará a la aplicación asociada y ese sonido se escuchará. Pero se lanzará la aplicación asociada. Por ejemplo:
<A HREF="ringin.wav">¿El teléfono?<A>
No está mal, al menos el asunto suena. Pero claro con una aplicación asociada de por medio.
Sonido de fondo
Pero hay otra manera: el sonido de fondo, un sonido que suena al cargar la página. El navegador de Microsoft, desde la versión 2.0, utilizaba la etiquea BGSOUND:
<BGSOUND SRC="musica.mid">
Su parámetro SRC indicará el archivo a reproducir. También podemos permitir que se repita un cierto número de veces mediante el parámetro. Si se indica LOOP="infinite", el archivo se reproducirá indefinidamente, mientras estemos en la página. Para detener la música o cambiar de melodia debíamos hacer uso de Javascript.
Los exploradores actuales usan la etiqueta <EMBED>, que tiene los siguiente parámetros:
Parámetro UtilidadSRC Contiene el nombre de archivo de sonido a reproducirWIDTH y HEIGHT Tamaño de los controles del reproductor que aparece en la página.AUTOSTART="true" Arranca automáticamente la reproducción.LOOP="true" Reproduce ininterrumpidamente el fichero hasta que salimos de la página.
HIDDEN="true" Oculta el reproductor.
Pero el problema del plugin vuelve a aparecer también con este método, puede ocurrir que el ordenador cliente lance su aplicación para hacer sonar el fichero cargado. ¿Y como suena esto? pues este ejemplo os lo muestra.
Guia de estilo El sitio web Contenido Navegación Estructura de las páginas Accesibilidad Diseño Mantenimiento
El sitio web
La elaboración de sitios web es una tarea bastante personal, es casi un arte, y al final cada webmaster se desarrollará su propio estilo, una especie de firma intangible que baña todas sus páginas. Existen en la red multitud nde guías de estilo que ayudan al principiante, y al no tan principiante, a evitar errores comunes y a lograr páginas de cierta calidad.
Por eso no quiero cerrar este cursillo sin un capítulo dedicado a la forma de hacer buenos sitios web. Al menos desde el punto de vista de un webmaster que lleva algún tiempo en esto. Ojo, no es un capítulo de recetas para resolver problemas concretos, es más bien un resumen, que pretende servir para que quien las lea se plantee las cosas antes de lanzarse alegremente sobre su editor para crear su magnífico sitio web. En Creatuweb existe toda una sección dedicada este tema, mucho más detallada y completa, por tanto esto os debe servir tan solo de aperitivo antes de visitar esas otras páginas.
Contenido
Todos hemos visto páginas horribles en cuanto a diseño y estructura, pero cuyo contenido nos ha sido lo bastante útil como para obligarnos a detenernos en ellas. Aunque luego apenas hallamos vuelto a visitarla. Quiero decir que el contenido de una página es básico para que alguien la visite. No esperemos que por publicar las fotos del botellón del viernes vamos a atraer a millones de visitas. Cualquier página será visitada si su contenido es interesante. Así que lo primero es pensar que tenemos que decir, si es que tenemos algo que decir. A la mejor a mi me gusta coleccionar rabillos de boina, pero ¿crees que eso puede interesar a mucha gente? Sin embargo si he peleado con Linux desde su nacimiento y lo conozco como el padre que lo parió, seguro que mi página con el tiempo llegará a tener una gran difusión... y puedo sacarle provecho. El Linux hoy en día es un producto muy en alza.
Ahora si que podrías usar esa plataforma para colocar tu página personal, en la que podrías publicar, por ejemplo, tu curriculum, algo que por si sólo no atraería a demasiados visitantes.
Y claro ya que el visitante ha llegado a tu página no dejes que se vaya para siempre. Haz que tu sitio sea un referente, por ejemplo con una página de enlaces a sitios que traten del mismo tema que la han traído hasta aquí. Para muchos visitantes tu página sería una lista de favoritos. O sea, ser útil al visitante.
Ah, y nunca, nunca coloques páginas vacías. Eso de página en construcción suele ser bastante irritante. Ponte en el lugar del visitante, llega a tu sitio convencido de haber encontrado lo que buscaba y se encuentra con una página con el cartelito de En Construcción. Lo normal es que no regrese.
Navegación
Si quieres que los visitantes recorran tu sitio y descubran lo bueno que es facilítales la navegación, procura que lleguen a donde quieran ir en un par de clicks. No le hagas volver a la página principal cada vez que quiera ir a una u otra sección. Esto lo puedes logar con una buena barra de navegación, un menú sencillo e intuitivo al que pueda acceder esté donde esté.
Una barra o menú de navegación debe contener como mínimo un enlace a la página principal, y uno a cada sección o subsección del sitio. La barra la puedes construir mediante javascript, mediante un frame índice o colocando en todas las páginas el código HTML de esa barra. Tampoco está de más disponer de un enlace a una página con el mapa del sitio.
Lo ideal es ver como la gente se mueve por tus páginas, mira como se distribuyen las visitas por tu sitio y facilita el acceso a las menos visitadas. Si ves que aún así no aumentan las visitas examínalas por que a lo mejor no interesan. En cuanto a las más visitadas, coloca sus enlaces de forma muy accesible.
Ah, y ojo con los enlaces rotos. Procura repararlos cuanto antes, es como una casa descuidada.
Estructura
Dale una estructura lógica a tu sitio. Un sitio web no es tan solo la suma de todas sus páginas, es también el como se relacionan entre sí. Una serie de temas secuenciales como este cursillo puede tener una estructura secuencial: está pensada para que las páginas sean vistas una tras otra, sin saltos. No está de más un botón de página adelante y página atrás en cada tema, pero sin quitarle al usuario la posibilidad de saltar a un tema específico en un momento dado.
Ojo con las páginas excesivamente largas. Aunque el aumento de la velocidad en internet ha permitido superar con creces los hasta hace no mucho recomendados 20 Kb por páginas, si un usuario tiene que desplazar el botón de scroll hasta el suelo es fácil que se vaya a un sitio más cómodo. Si lo que ve en la parte superior de la página no le atrae es probable que no pulse en el scroll vertical, y si este es largo... Procura que en la primera parte de tu página haya información suficiente sobre el contenido de la misma.
Recuerda que, salvo excepciones, a casi nadie le apetece leer en el monitor. Procura dividir tu sitio en secciones o zonas con un número suficiente de páginas, no intentes meter una sección completa en una página.
Ah, y ojo con esas splash pages, esas páginas de acceso que solo contienen un botón de entrar y una bonita imagen. Puede que en algún caso sea necesaria, pero quien llega a un sitio buscando una solución quiere ir directo al grano. En muchas ocasiones estas pantallas de presentación se construyen con Flash y enlentecen innecesariamente la carga, en estos casos siempre se agradece el botón de saltar la presentación (skip intro).
Accesibilidad
No hagas demasiadas presunciones sobre los medios de acceso a tu página. Puedes presuponer que usarán un monitor en color, pero poco más. Así que procura que tus páginas puedan verse bien en cualquier navegador y con cualquier resolución. Además si tu tienes una magnífica ADSL de 8 Mb/s puede que muchos de tus visitantes se conecten con un modem de 56 Kb/. Lógicamente acertar con esto es más difícil cuanto más amplia sea tu audiencia.
Puede que para mejorar el acceso algunos visitantes desactiven la presentación de gráficos, prevve esta situación colocando en todas tus imágenes lel parámetro ALT .
No abuses de los plugins, muchos usuarios puede que anden con ordenadores limitados en recursos y no quieran esperar a la carga de un pesado applet en Java o una presentación en Flash, si puedes hacerlo con HTML y alo sumo con Javascript, hazlo.
Diseño
Al principio decíamos que una página con un buen contenido era imprescindible par atraer visitas. Pero no cabe duda de que estas visitas estarán más tiempo y regresarán si encuentran un lugar, no solo cómodo como hemos visto, sino agradable a la vista. Algunos gráficos bien situados, sin abusar, junto a unos colores nada agresivos pueden hacer que elijan tu página antes que la del vecino en la lista de enlaces de un buscador. Si usas una imagen de fondo procura que no moleste la lectura y que no distraiga. Cuidado también con los colores de texto y de fondo, busca el máximo contraste.
Si tienes que destacar algo puedes usar algún gráfico animado discreto, visualmete pesan mucho y distraen. Claro que si estas diseñando una página infantil estos elementos son fundamentales.
Evita en lo posible los bordes en las tablas, una página muy fragmentada se ve mal. Si usas bordes intenta que sean discretos y solo los imprescindibles.
En cuanto a los frames, si no tienes más remedio usalos pero recuerda que las pantallas de los monitores tienen una superficie limitada. Procura no colocarles bordes ni las barras de scroll.
Mantenimiento
Si has programado alguna vez sabe que el trabajo no termina cuando el programa está en marcha. Y si no has programado nunca también deberías saberlo, basta con que te fijes en la versión actual de tu navegador y la versión del mismo aue corría el año pasado. Cualquier producto informático acaba realmente en un continuo proceso de mantenimiento, comprobar que todo funciona y mejorar todo lo mejorable y como no hay nada perfecto ... todo es mejorable. Comprobar porqué una sección no es demasiado visitada, o actualizar la lista de enlaces o tantos detalles son algunas de las tareas que el webmaster no puede olvidar.
En este sentido una buena costumbre es colocar encuestas que permiotan a tus visitanes opinar o calificar algunos aspectos de tu sitio. El visitante siente que cuenta para el autor de las páginas y te puede ayudar a ver ese error en el que tu no habías caído.
Tampoco está de más mostar la fecha de la última modificación que hicistes a tu página, el usuario sabe si la información de tu sitio es actual o ya está superada.
Deja alguna zona de tu portada para publicar las novedades que vayas incorporando a tu sitio o para publicar las secciones más interesantes, las que quieras difundir más.
Y recuerda que en el area principal de Creatuweb tienes una guia bastante más completa que este pequeño resumen.
Enlaces de interés
Más HTML Más JavaScript Más CSS Otras tecnologías
Más HTMLW3C Comité que dicta las normas para un HTML estándard Lo Sublime Otro sencillo manual sobre HTML Metatags Un interesante artículo sobre las Metatags
Más Javascript
JavascriptDesdeCero Un interesante manual repleto de scripts, trucos y soluciones
MundoJavascript Otro excelente lugar para obtener scripts DynamicDrive Excelente lugar para HTML dinámico (inglés)
Más CSS ASP tutor: CSS Por si quieres saber más sobre las CSS Tejedores:CSS Más sobre CSS esta vez en Tejedores del Web
Otras tecnologías PHP El sitio oficial de PHP Programación PHP Programación PHP en castellano