html doc. descargado (reparado)
DESCRIPTION
html manualTRANSCRIPT
w Mi primera página
El código
Lo mejor para aprender a hacer algo es ... ¡hacerlo!. Así que vamos a la primera página
mipagina.htm
<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, </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 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
arriba
arriba
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 .
arriba
arriba
El cuerpo
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.
BGPROPERTIESCuando 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.
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 Alineación izquierda
arriba
izquierda (ALIGN=LEFT), derecha (RIGHT), al centro (CENTER) o a ambos márgenes (JUSTIFY html4 )
Texto centradoAlineación derecha
Texto 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.
arriba
arriba
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> TecladoEl 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
arriba
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í.
arriba
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á).
SCROLLINGColoca 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
arriba
arriba
SCROLLINGColoca 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.
arriba
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>.
arriba
arriba
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 CSSLos 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, border-bottom-width, border-left-width,<br/> border-width: top right bottom left
Anchura del borde de un bloque.
numérico
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.
clearPermiso 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 valoresfont- Tipo de letra (que puede ser lista de tipos, ya sean genéricos o no, separados
arriba
arriba
family genérico) que vamos a usar. 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.
arriba
arriba
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-styleEstilo 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-space
Decide 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
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...
arriba
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>
arriba
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.
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.
arriba
arriba
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.
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.
arriba
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.
Trucos HTMLAquí pretendemos ofrecerte soluciones para problemas que suelen presentarse a la hora de crear una página web. Conocer todas las etiquetas del lenguaje HTML no siempre garantiza un uso óptimo. Esta es la razón de este apartado.
Flash al fondo de la página Los objetos flash en las páginas web se empeñan en colocarse en primer plano con lo que ocultan menús desplegables y otros elementos de la página. Para evitar esto basta con añadir al objeto flash el argumento:<param name="WMODE" value="TRANSPARENT">
El objeto flash no ocultará los elementos dinámicos.
Esconder tu email
arriba
arriba
arriba
Existen robots que se dedican a recorrer las páginas web extrayendo las direcciones de correo, a las que luego inundarán con mensajes spam. Existe un truco muy sencillo para evitar esto sin dejar de mostrar nuestra dirección en la página: crear una imagen gif o jpg con nuestra dirección email. Quien desee enviarnos un email deberá leer nuestra dirección y escribirla a mano en el mensaje creado con su programa de correo.
Celda como enlace
Una celda de una tabla puede convertirse en un enlace activo de la manera más simple, basta con colocarla dentro de <a href> </a>. Ejemplo
<table><tr><a href="sitio"><td>enlace</td></a><td>otra celda</td>
Así de fácil, ahora la celda completa es un enlace.
Dimensiones exactas
Para lograr que una fila o una columda tenga una altura o anchura exacta, o para separar dos elementos una distancia fija, utiliza una imagen gif transparente de un sólo pixel. Luego asignale la anchura o altura que desees. Por ejemplo
<table><tr><td><img src="punto.gif" height="5"></td></tr>
Esa celda poseerá una altura exacta de 5 pixels.
Caja de esquinas curvas
Puedes crear una caja de esquinas curvas usando el elemento fieldset de los formularios. Ejemplo
<fieldset>contenido de la caja con esquinas curvas sin tablas!!!</fieldset>
Y no es necesario usar tablas.
Sonido de fondo
arriba
arriba
arriba
arriba
Se puede hacer que suene una música mientras los visitantes visitan la Web, o bien colocar una melodía a modo de presentación. Guarda el sonido en el directorio raíz de tu servidor. el código HTML es el que sigue:
<BGSOUND SRC="sonido.mid" LOOP=none> <WIDTH=200 HEIGHT=55 AUTOSTART="true" LOOP="false" HIDDEN="true">
Los sonidos en formato "midi" ocupan menos espacio y por tanto se cargan antes.
Archivos para descargar
Si queremos que los visitantes puedan descargar algún archivo solo debemos subir ese archivo a nuestro servidor e insertar en nuestra Web un enlace al mismo:
<a href="archivo.exe">Descripción del enlace </a>
Ahora cuando el visitante pulse sobre ese enlace el navegador abre el diálogo de abrir o guardar el archivo. Lo habitual es usar arvhivos comprimidos en formato zip, de esta manera la descarga es más rápida y se puede bajar cualquier tipo de archivo (previamente comprimido).
arriba