El lenguaje HTML está basado en el uso de etiquetas · respetando el formato con el que fue...

HTML Página 1

Mª Isabel Torres Carazo IES ABDERA - CURSO 2009-2010

HTML

El HTML, acrónimo inglés de HyperText Markup Language (lenguaje de marcas hipertextuales), lenguaje de marcación diseñado para estructurar textos y presentarlos en forma de hipertexto, que es el formato estándar de las páginas web. Gracias a Internet y a los navegadores del tipo Internet Explorer, Opera, Firefox o Netscape, el HTML se ha convertido en uno de los formatos más populares que existen para la construcción de documentos y también de los más fáciles de aprender.

ESTRUCTURA DE UNA PÁGINA WEB

El lenguaje HTML está basado en el uso de etiquetas:

<ETIQUETA parámetros> ... </ETIQUETA>

Hay ocasiones en que no es necesario cerrar la etiqueta de fin.

Lo primero que debemos indicar es que el texto que estamos componiendo es un documento HTML, lo indicamos así: <HTML> ... </HTML>

Un documento HTML tiene una estructura que lo separa en dos partes: cabecera y cuerpo.

El resultado es el siguiente:

<HTML>

</HTML>

<HEAD> <TITLE>Mi primera página</TITLE> </HEAD>

<BODY> Esta es mi primera página. Por el momento no se que tendrá, pero dentro de poco pondré aquí muchas cosas interesantes. </BODY>

HTML Página 2


En la cabecera incluiremos cosas que no se ven al principio pero que pueden llegar a ser muy importantes. Es lo primero que debemos incluir en el código.

<HEAD>

<TITLE>IES FERNANDO QUIÑONES, LA CUCARELA, CHICLANA</TITLE>

</HEAD>

Dentro de la cabecera sólo hay otra etiqueta. Es la única imprescindible: el título de la página. Es lo que veremos como título de la ventana en los navegadores que lo permitan. Es como se conocerá nuestra página en algunos buscadores y en la agenda de direcciones (bookmarks) de los usuarios. Por tanto, parece importante pensarnos bien como llamarla.

En el cuerpo estará la página en sí, es decir, lo que queremos que se vea en la página y se indica con las etiquetas:

<BODY> ... </BODY>

Los parámetros que podemos usar en la etiqueta BODY son:

Parámetro Utilidad

BGCOLOR

Permite definir el color de fondo de la página.

Sintaxis: <BODY BGCOLOR=#0000FF> o <BODY BGCOLOR=blue>

Una buena ayuda para la selección de colores con #rrggbb la puedes encontrar en: http://platea.pntic.mec.es/~abercian/guiahtml/colores.htm

BACKGROUND

Permite definir un gráfico de fondo para la página.

Sintaxis: <BODY BACKGROUND="ruta/archivo.gif">

TÍTULO

BOOKMARKS CUERPO

HTML Página 3


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 Cambia el color del texto. El formato es el mismo que BGCOLOR. Por defecto es negro.

LINK Cambia el color de un enlace no visitado (por defecto azul).

VLINK Cambia el color de un enlace ya visitado (por defecto púrpura).

ALINK Cambia el color que toma un enlace mientras lo estamos pulsando (por defecto rojo).

LEFTMARGIN y TOPMARGIN

Especifican el número de pixels que dejará de margen entre el borde de la ventana y el contenido de la página. Se suelen utilizar para dejarlos a cero.

MARGINWIDTH y MARGINHEIGHT

Más o menos equivalentes a los anteriores, pero éstos funcionan en Netscape.

STYLE

Permite modificar la posición y el modo de repetición de la imagen de fondo de la página

Background-position: Center / Top / Left / Right

Background-repeat: no-repeat / repeat / repeat-x / repeat-y

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.

FORMATEO BÁSICO

Se pueden establecer varias categorías dentro de las etiquetas usadas para formatear el texto. Nosotros las dividiremos entre aquellas que sirven para cambiar párrafos enteros y las que son capaces de formatear tiras de caracteres dentro del párrafo.

CABECERAS o TÍTULOS

El HTML nos ofrece seis etiquetas distintas para mostrar cabeceras. Son éstas:

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



Estas etiquetas se pueden definir como de formato de párrafo. No resulta recomendable utilizarlas para aumentar o disminuir el tamaño del tipo de letra, ya que cada navegador los muestra de manera diferente. Se usan para dividir correctamente en secciones nuestra página, tal y como se hace en un documento de texto normal.

HTML Página 4


ESTILOS DE FUENTES

Todas estas etiquetas nos permiten cambiar de una manera u otra el aspecto del tipo de letra que estemos utilizando y se pueden utilizar con tiras de caracteres dentro de un 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

<B> <I> ... </I> </B> Negrita y cursiva Negrita y en cursiva

<U> ... </U> Para subrayar algo. Como soy muy importante estoy subrayado

<EM> ... </EM> Para dar énfasis. Hay que poner énfasis en algunas cosas.

<STRONG>... </STRONG>

La cosa es importante. Hay cosas importantes.

<CODE> …</CODE> Modo código Code Texto

<CITE>…</CITE> Citar textualmente Citation Text

<KBD>…</KBD> Texto del teclado Keyboard Text

<SAMP>…</SAMP> Ejemplos Sample Text

<TT> ... </TT> Permite representar el texto en un tipo de letra de paso fijo.

No soy variable

<VAR>…</VAR> Permite representar el texto en un tipo de letra de paso variable.

Variable Element Text

<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

<SUP> ... </SUP> Letra superíndice. E=mc2

<SUB> ... </SUB> Letra subíndice. ai,j=bi,j+1

<BLINK>... </BLINK> Hace parpadear el texto. Resulta algo irritante.

¿Molesto?

<S> ... </S> Para tachar. A mí, en cambio, nadie me quiere

TAMAÑOS DE FUENTE

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=6SIZE=7

HTML Página 5


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”>Tamaño 2</FONT><FONT SIZE="+3">Tamaño 6</FONT>

TIPO DE FUENTE

Por último, podemos especificar el nombre del tipo de letra que queremos utilizar gracias al parámetro FACE. Como en principio no tenemos manera de saber que tipo de letra tiene instalado el ordenador del usuario que está viendo nuestras páginas, podemos indicar más de uno separado por comas. Si el navegador no encuentra ninguno seguirá utilizando el que tiene por defecto:

<FONT FACE="tipo_de_letra ">No sé como voy a salir exactamente</FONT>

Algunos tipos de letras más conocidos, son:

Helvetica, Arial, Times, Courier, MS Sans Serif…

De todos modos es recomendable no utilizar con fe ciega este atributo en Internet, ya que impide que todos puedan ver nuestras páginas como nosotros. E Internet, siempre que nos lo permitan Microsoft y Netscape, debe ser lo más estándar posible.

COLOR DE FUENTE

Para hacerlo vamos a utilizar el 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 el porcentaje de rojo, verde y azul (código RGB) del mismo. Los colores reconocidos son los siguientes:

Black Silver Gray White Maroon Red Purple Fuchsia

Green Lime Olive Yellow Navy Blue Teal Aqua

<FONT color="red">Estoy en rojo</FONT> Estoy en rojo

El modo de indicar el color RGB es el siguiente:

<FONT COLOR="#FF0000">D</FONT>

<FONT COLOR="#EF0000">E</FONT>

<FONT COLOR="#DF0000">G</FONT>

<FONT COLOR="#CF0000">R</FONT>

<FONT COLOR="#BF0000">A</FONT>

<FONT COLOR="#AF0000">D</FONT>

<FONT COLOR="#9F0000">A</FONT>

<FONT COLOR="#8F0000">D</FONT>

<FONT COLOR="#7F0000">O</FONT>

HTML Página 6


Lo que nos mostraría lo siguiente:

DEGRADADO

La primera componente en hexadecimal es el rojo, la segunda el azul y la tercera el verde (Red Green, Blue, RGB).

PÁRRAFOS Y BLOQUES

Para definir y separar bloques de texto se emplean una serie de etiquetas que definen los párrafos, texto preformateado o bloques con significado especial como direcciones o citas. Etiquetas de bloques:

<CENTER> Permite centrar todo el texto del párrafo.

<P> Se utiliza para que los párrafos queden separados por una línea en blanco. Si solo quieres escribir un punto y aparte debes usar <BR>. Las marcas inicial y final son <P> y </P>. La etiqueta <P> admite los atributos:

<ALIGN="left">, ALIGN="right", ALIGN="center" y ALIGN="justify" para alinearlo a la izquierda, a la derecha, centrarlo o justificarlo totalmente. Por defecto está alineado a la izquierda.

<PRE> El texto insertado entre las marcas <PRE> y </PRE> será visualizado por el navegador respetando el formato con el que fue escrito en el fichero fuente HTML. Esta etiqueta es muy útil para escribir más de un espacio o para hacer pequeñas tablas

<ADDRESS> empleada para indicar que un texto representa una dirección o una firma. Generalmente se presenta en cursiva y tabulado.

<BLOCKQUOTE> Se representa con tabulaciones a la izquierda y derecha. Toda los párrafos de esta página están entre las etiquetas <BLOCKQUOTE> y </BLOCKQUOTE>, de ese modo se consigue que el texto se presente con márgenes a ambos lados.

OTROS ELEMENTOS

Por último, debemos estudiar algunas cosas que no son texto y que podemos incorporar a nuestra página.

Etiqueta Utilidad Resultado

<HR> Inserta una barra horizontal. No tiene etiqueta de fin

<BR>

Salto de línea. No tiene etiqueta de fin. Se pueden emplear los atributos: ALIGN="left", ALIGN="right", para alinearla a la izquierda o a la derecha. Por defecto aparece centrada WIDTH="66%" SIZE="3", para especificar el ancho en % y el alto en píxels. COLOR="#0000FF", para especificar el color

Hay un antes y un después de saltar a otra línea

 Comentarios. Esto se escribe y

HTML Página 7


CARACTERES ESPECIALES

Vamos a ver algunos de estos códigos, los más útiles a la hora de escribir en español:

Código Resultado

á Á é É,... á, Á, é, É, í, Í, ó, Ó, ú y Ú

ñ y Ñ ñ y Ñ

¿ ¿

¡ ¡

º º

ª ª

™ o ™ o ™

© ©

® ®

espacio en blanco que no puede ser usado para saltar de línea

CARACTERES DE CONTROL

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 siguientes códigos:

Código Resultado

< <

> >

& &

" "

LISTAS

Existen varios tipos de listas en HTML. Todas ellas se pueden meter unas dentro de otras formando árboles. Todos los tipos siguen el siguiente formato:

<tipo_lista>

<LI>Primer elemento</LI>

<LI>Segundo elemento</LI>

</tipo_lista>

tipo_lista puede ser una de las siguientes: UL, OL y DL.

HTML Página 8


LISTAS DESORDENADAS

La etiqueta <UL> nos permite presentar listas de elementos sin orden alguno. Cada elemento de la lista irá normalmente precedido por un círculo. Por ejemplo,

<UL>



</UL>

La etiqueta <UL> admite estos parámetros:

Parámetro Utilidad 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

Tipo circle

Tipo square

LISTAS ORDENADAS

La etiqueta <OL> nos permite presentar listas de elementos ordenados de menor a mayor. Normalmente cada elemento de la lista irá precedido por su número en el orden. Por ejemplo,

<OL>



</OL>

La etiqueta <OL> admite estos parámetros:

Parámetro Utilidad 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

b. Tipo a

C. Tipo A

iv. Tipo i

V. 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

1. Primer elemento

2. Segundo elemento

Primer elemento

Segundo elemento

HTML Página 9


LISTAS DE DEFINICIÓN

Este es el único tipo de lista que no utiliza la etiqueta <LI>. Al tener como objetivo presentar una lista de definiciones, de modo que tiene que representar de manera distinta el objeto definido y la definición. Esto se hace por medio de las etiquetas <DT> y <DD>:

<DL>

<DT>Primer elemento<DD>Es un elemento muy bonito.</DT>

<DT>Segundo elemento<DD>Este, en cambio, es peor.</DT>

</DL>

se verá como

Primer elemento

Es un elemento muy bonito.

Segundo elemento

Este, en cambio, es peor.

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.

LAS URLs

Una URL nos indica tanto una dirección de Internet como el servicio que esperamos nos ofrezca el servidor al que corresponde la dirección. Tiene el siguiente formato:

servicio://máquina:puerto/ruta/fichero@usuario

donde el servicio podrá ser uno de los siguientes:

http: Es el servicio invocado para transmitir páginas web y el que usaremos normalmente en los enlaces.

mailto: Para poder mandar un mensaje. Por ejemplo, la URL mailto:[email protected] enviaría un correo electrónico al IES.

La dirección de la máquina puede ser, o bien una serie de cuatro números entre 0 y 255 (123.3.5.65) o bien algo más fácil de recordar como es una serie de palabras separadas por puntos (www.programacion.net). El puerto generalmente no se indica, ya que el servicio predetermina uno.

La ruta es una serie de directorios separados por el símbolo /, que es el utilizado en UNIX (el sistema operativo más extendido en los servidores de Internet).

Existe otro formato de URL. Cuando queremos acceder a un fichero situado en la misma máquina que la página Web que estamos creando podemos utilizar este formato:

ruta_relativa/fichero

En la ruta relativa podremos utilizar los dos puntos (..) para acceder al directorio padre o comenzar con la barra diagonal (/) para acceder a una ruta absoluta dentro de nuestro ordenador.

HTML Página 10


ENLACES

Un enlace es una zona de texto o gráficos que si son seleccionados nos trasladan a otro documento de hipertexto o a otra posición dentro del documento actual. Siendo HTML el lenguaje de Internet, la diferencia que posee con respecto a otros tipos de hipertexto es que ese otro documento puede estar físicamente en la otra punta del planeta. Son los enlaces lo que hacen de la telaraña o World Wide Web lo que es.

LA ETIQUETA <A>

Para incorporar un enlace hay que utilizar esta etiqueta. Todo lo que encerremos entre <A> y </A>, ya sea texto o imágenes, será considerado como enlace y sufrirá dos modificaciones:

- Se visualizará de manera distinta en el navegador. El texto aparecerá subrayado y de un color distinto al habitual, y las imágenes estarán rodeadas por un borde del mismo color que el del texto del enlace.

- Al pulsar sobre el enlace, seremos enviados al documento que apuntaba el enlace.

Para que el enlace sirva para algo debemos especificarle una dirección. Lo haremos de la siguiente manera:

<A HREF="direccion">Texto del enlace</A>

La dirección estará en formato URL (Uniform Resource Locator).

Para saltar de una página local (pagina1.html) a otra (pagina2.html), habría que escribir en la primera de ellas lo siguiente:

<A HREF="pagina2.html">Ir a página 2</A>

Para enlazar con una página de Internet (externa a nuestras páginas), deberemos hacer:

<A HREF="http://www.google.es">Ir a Google</A>

Para enlazar con un grupo de noticias (externa a nuestras páginas), deberemos hacer:

<A HREF="news://news.ptnic.es">Ir al Grupo de Noticias</A>

Para enviar un correo electrónico, deberemos hacer:

<A HREF="mailto:[email protected]">Enviar correo a Juan</A>

Para descargar un fichero almacenado, deberemos hacer:

<A HREF="fichero.zip">Descargar Fichero.ZIP</A>

Si lo que queremos es que el enlace se abra en una nueva ventana, utilizaremos en parámetro TARGET del siguiente modo:

<A HREF=http://www.google.es” target=”blank”>Ir a Google</A>

HTML Página 11


ANCLAS

Es posible acceder a una posición determinada dentro del mismo documento HTML que estemos creando. Para hacerlo, primero debemos especificar el lugar del documento al que queremos acceder:

<A NAME="ancla">

Para poder acceder al ancla incluimos el enlace de esta manera:

<A HREF="#ancla">Vamos a donde antes</A>

También podemos acceder a anclas situadas en otras páginas web. Para ello añadiremos el nombre del ancla al URL así:

<A HREF="pagina.html#ancla">Otra vez</A>

IMÁGENES

Formatos de imágenes

Existen muchos formatos para guardar imágenes que tienen diferentes extensiones bmp, tiff, dib, wmf, etc. En internet se usan básicamente dos: GIF y JPG. Ambos formatos comprimen las imágenes para reducir su tamaño, de este modo se asegura una transferencia más rápida por la red. Esto es importante, ya que si la imagen se tarda en cargar, es posible que el visitante de nuestra página la abandone por ello. En los casos en que es necesario poner una imagen con una resolución elevada para ver los detalles, es mejor colocar una imagen pequeña y usarla como enlace que nos conduzca a la imagen final. De ese modo el visitante ya sabe la imagen que va a cargar y puede ser más paciente.

Formato GIF

El formato GIF usa 256 colores y se emplea sobretodo con imágenes pequeñas como iconos. No se suele usar con fotos porque da más calidad el formato JPG. Aunque el formato GIF no tiene pérdidas de calidad en la compresión, es decir muestra la imagen tal como es en formato bmp por ejemplo, pero reduciendo su tamaño considerablemente. Tiene dos características que lo hacen muy atractivo para el diseño de las páginas Web.

Una de ellas, es que uno de sus colores se puede hacer transparente (en el subformato Gif89a), no mostrándose en la pantalla. Si se elige el color que bordea el motivo principal da la sensación de que la imagen tiene la forma de ese motivo (en realidad todas las imágenes son rectangulares). Puedes ver ese efecto en las pequeñas imágenes que adornan este manual. Para hacer transparente un color hay que usar editores de imágenes

Otra característica, es que se pueden ensamblar varias imágenes, que se muestran como si fuera una sola, de modo que da la sensación de movimiento. Estas imágenes se llaman Gifs animados y como ves también se pueden hacer transparentes. Hay programas específicos para hacer Gifs animados.

../Chtml/enlaces.html#2

HTML Página 12


Formato JPG

El formato JPG usa 16.7 millones de colores, por lo que se emplea con imágenes de alta resolución. Con este formato se obtiene un grado de compresión más alto que con el GIF y además ésta se puede regular: Cuanto mayor sea la compresión, más pérdida de calidad, respecto de la imagen original. De hecho cada vez que abrimos y guardamos de nuevo una imagen en formato JPG, distorsionamos un poco la imagen. Todas las fotos de buena calidad usan este formato.

Para incluir gráficos e imágenes en nuestras páginas utilizaremos la etiqueta <IMG> de esta manera:

<IMG SRC="fichero_grafico">

El parámetro SRC especifica el nombre del fichero que contiene el gráfico. Los formatos estándar en la red son el GIF y el JPG.

Los atributos de la imagen pueden ser los siguientes:

ALT="Texto que aparece al situar el cursor sobre la imagen" El parámetro ALT especifica el texto que se mostrará en lugar del gráfico en aquellos navegadores que no sean capaces de mostrarlos 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.

ALIGN=

Nos indica la posición de la imagen respecto del texto. Después del signo igual, pueden ir los valores: TOP si queremos que el texto esté alineado con la parte superior de la imagen MIDDLE alinea el texto con la parte central de la imagen BOTTOM alinea el texto con la parte inferior de la imagen LEFT alinea la imagen a la izquierda de la página forzando la colocación del texto en la parte derecha y arriba RIGHT alinea la imagen en la derecha de la página forzando la colocación del texto en la parte izquierda y arriba. Si se quiere interrumpir el proceso de rellenado del texto a los lados de la imagen, para que salte hasta debajo de ella, es decir, dejar un espacio en blanco parcialmente, se pueden emplear las siguientes extensiones de la etiqueta <br>: <br clear =left > Busca el primer margen libre (clear) a la izquierda. <br clear = right> Busca el primer margen libre a la derecha. <br clear =all > Busca el primer margen libre a ambos lados.

WIDTH=80, HEIGTH=100 Indican la anchura y altura de la imagen en píxels, en este caso 80x100 píxels. Si especificamos las dimensiones de las imágenes, las páginas se cargan más rápido, debido a que el navegador reserva el espacio para ellas y sigue cargando el texto

BORDER=2 Añade un borde, a modo de marco, a la imagen. En este caso de 2 píxels.

HSPACE=10, VSPACE=15 Especifican el espacio horizontal y vertical que separa la imagen del texto que la rodea, en este caso 10 píxels horizontales y 15 verticales

HTML Página 13


IMÁGENES Y ENLACES

Suele ser común incluir enlaces dentro de un gráfico. En ese caso, por defecto, los navegadores le pondrán un borde al gráfico para indicar que efectivamente es un enlace. Práctico, pero la mayoría de las veces bastante poco estético. Por medio del parámetro BORDER podremos alterar el grosor de ese borde o incluso eliminarlo poniéndolo a cero.

<A HREF="http://www.netscape.com">

<IMG SRC="imagenes/foto1.gif" ALT="Netscape 4.0" WIDTH=”88” HEIGHT=”31”>

</A>

Se ve así:

Sin embargo,

<A HREF="http://www.netscape.com">

<IMG SRC="images/foto.gif" ALT="Netscape 4.0" WIDTH=”88” HEIGHT=”31” BORDER=”0”>

</A>

Se ve así:

Podemos utilizar imágenes para desplazarnos a un ancla previamente situado en la página web:

<A HREF="#ancla">

<IMG SRC="imagenes/flecha.gif" ALT="Ir arriba" WIDTH=”88” HEIGHT=”31”>

</A>

También podemos utiliza imágenes para enlazar con otra imagen:

<A HREF="foto1.jpg">

<IMG SRC="imagenes/foto2.gif" ALT="ver foto" WIDTH=”88” HEIGHT=”31”>

</A>

HTML Página 14


ALINEACIÓN RESPECTO AL TEXTO

Para poder maquetar conjuntamente texto y gráficos, el HTML proporciona, por medio del parámetro ALIGN, las siguientes maneras de alinear una imagen respecto del texto que la acompaña:

Valor de ALIGN

Utilidad Resultado

TOP Coloca el punto más alto de la imagen coincidiendo con el más alto de la línea de texto actual.

MIDDLE Alinea el punto medio (en altura) de la imagen con la base del texto.

BOTTOM

Por defecto

Alinea el punto más bajo de la imagen con la base del texto.

LEFT Coloca la imagen a la izquierda del texto.

RIGHT Coloca la imagen a la derecha del texto.

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.

TABLAS

Las tablas son posiblemente la manera más clara de organizar la información. También es el modo más adecuado de maquetar texto y gráficos de una manera algo más controlada que con los parámetros ALIGN.

Las tablas se definen de la siguiente manera. Primero, las características de la tabla, luego las de cada fila y dentro de ésta, cada celda. Así pues, una tabla con 2 filas y 3 columnas se declarará así:

Código Resultado

<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,3

2,1 2,2 2,3

HTML Página 15


Como podéis ver la tabla no tiene mucho aspecto de tabla. Quedaría mejor con unos bordes, ¿no? Puede que tampoco le viniese mal mayor espacio entre celdas o mayor anchura.

Estas son las cosas que podremos cambiar con los atributos de TABLE:

Parámetro Utilidad

BORDER Especifica el grosor del borde que se dibujará alrededor de las celdas. Por defecto es cero, lo que significa que no dibujará borde alguno.

CELLSPACING Define el número de pixels que separarán las celdas.

CELLPADDING Especifica el número de pixels que habrá entre el borde de una celda y su contenido.

WIDTH Especifica la anchura de la tabla. Puede estar tanto en pixels como en porcentaje de la anchura total disponible para él (pondremos "100%" si queremos que ocupe todo el ancho de la ventana del navegador).

ALIGN Alinea la tabla a izquierda (LEFT), derecha (RIGHT) o centro (CENTER).

Si ahora, por ejemplo definimos la tabla anterior como <TABLE BORDER=1 WIDTH="50%" ALIGN=CENTER> veremos lo siguiente:

1,1 1,2 1,3

2,1 2,2 2,3

DEFINIR LAS FILAS

Ahora que hemos definido la tabla nos toca hacer lo mismo con las filas. Cada fila se define con una etiqueta TR, que tiene los siguientes atributos:

Parámetro Utilidad

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).

DEFINIR LAS CELDAS

Por último, nos queda definir cada celda gracias a la etiquetas TD y TH. Estas etiquetas son equivalentes, pero la última se utiliza para encabezados, de modo que su interior se escribirá por defecto en negrita y centrado. Estos son los atributos de ambas:

Parámetro Utilidad

ALIGN Alinea el contenido de la celda horizontalmente a izquierda (LEFT), derecha (RIGHT) o centro (CENTER).

HTML Página 16


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).

COLSPAN

Especifica el número de celdas de la fila situadas a la derecha de la actual que se unen a ésta (incluyendo la celda en que se declara este parámetro). Es por defecto uno. Si se pone igual a cero, se unirán todas las celdas que queden a la derecha.

ROWSPAN Especifica el número de celdas de la columna situadas debajo de la actual que se unen a ésta.

Posiblemente los dos últimos parámetros no puedan quedar claros sin ejemplos. De hecho, aún entendiendo perfectamente su función es habitual que confundamos a uno con otro. Pero bueno, vamos a ver una tabla de 3x3 con una celda que se une a una de la derecha y otra que se une a otra de debajo:

Código Resultado

<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,1 2,2 2,3

3,2 3,3

Como podemos ver, cuando declaramos un celda con ROWSPAN o COLSPAN, no deberemos declarar las celdas "absorbidas" o la creación de la tabla se nos complicará de horrible manera.

TÍTULO DE LA TABLA

Por último, vamos a ver como definir un título a la tabla. Esto se hace por medio de la etiqueta CAPTION. Para ver cómo funciona, vamos a incluirlo en la declaración de la tabla anterior:

Código Resultado

<TABLE BORDER=1>

<CAPTION>

Ejemplo de tablas

</CAPTION>

...

</TABLE>

Ejemplo de tablas

1,1 y 1,2 1,3

2,1 y 3,1 2,2 2,3

3,2 3,3

HTML Página 17


Esta etiqueta admite sólo un parámetro: ALIGN, que es por defecto TOP. Si lo definimos como BOTTOM el título se colocará al final de la tabla en lugar del comienzo.

Otra opción es utilizar la etiqueta <TH> y </TH> para definir la fila de la cabecera, por ejemplo:

Escribimos: Visualizamos

<TABLE BORDER="3" CELLSPACING="5" WIDTH="200"> <TH COLSPAN=”2” BGCOLOR="#6D8FFF> Título</TH> <TR align="center"> <TD>Esta es la celda de la 1ª fila y de la 1ª columna</TD> <TD> Esta es de la 1ª fila y de la 2ª columna</TD> </TR> <TR BGCOLOR="#6D8FFF> <TD>Esto está con un fondo azul</TD> <TD align="right" valign="bottom">Y esto también</TD> </TR> </TABLE>

Título

Esta es la celda de la 1ª fila y de la 1ª

columna

Esta es de la 1ª fila y de la 2ª columna

Esto está con un fondo azul

Y esto también

Vamos a ver un código de anidación de tablas. Veamos primero el resultado y luego el código, así conseguiremos entenderlo mejor.

Celda de la tabla principal Tabla anidada, celda 1 Tabla anidada, celda 2

Tabla anidada, celda 3 Tabla anidada, celda 4

Este sería el código: <table cellspacing="10" cellpadding="10" border="3">

<tr>

<td align="center">

Celda de la tabla principal

</td>

<td align="center">

<table cellspacing="2" cellpadding="2" border="1">

<tr>

<td>Tabla anidada, celda 1</td>


</tr>

<tr>



</tr>

</table>

</td>

</tr>

</table>

HTML Página 18


Ejemplos prácticos

Animales en peligro de extinción

Nombre Cabezas Previsión 2010 Previsión 2020

Ballena 6000 4000 1500

Oso Pardo 50 0

Lince 10

Tigre 300 210

<table align="center" cellspacing="2" cellpadding="2"

border="1"bgcolor=dddddd>

<tr>

<td colspan="4" align="center" bgcolor="666666">

<font color="#FFFFFF"><strong>Animales en peligro de

extinción</strong></font>

</td>

</tr>

<tr bgcolor="aaaaaa">

<td>Nombre</td>

<td align="center">Cabezas</td>

<td align="center">Previsión 2010</td>

<td align="center">Previsión 2020</td>

</tr>

<tr>

<td>Ballena</td>

<td align="center">6000</td>



</tr>

<tr>

<td>Oso Pardo</td>


<td rowspan="2" colspan="2" align="center" bgcolor="red">0</td>

</tr>

<tr>

<td>Lince</td>


</tr>

<tr>

<td>Tigre</td>


<td colspan="2" align="center">210</td>

</tr>

</table>

HTML Página 19


Otro ejemplo:

Guía de contenidos de la asignatura

Teóricos Prácticos

Tema Contenidos Tema Contenidos

1 Introducción general de la

asignatura 2 Prácticas de observación

2 Metodología de observación 3 Prácticas de metodología de encuesta

3 Metodología de encuesta 4 Prácticas de metodología

experimental

Tipo de Contenidos Créditos

Teóricos 4

Prácticos 2

<TABLE BORDER=4>

<TR><TH COLSPAN="4">Guía de contenidos de la asignatura

<TR>

<TH COLSPAN="2">Teóricos

<TH COLSPAN="2">Prácticos <TR>

<TH>Tema

<TH>Contenidos

<TH>Tema

<TH>Contenidos <TR>

<TD>1

<TD>Introducción general de la asignatura

<TD>2

<TD>Prácticas de observación <TR>

<TD>2

<TD>Metodología de observación

<TD>3

<TD>Prácticas de metodología de encuesta <TR>

<TD ALIGN="center">3

<TD>Metodología de encuesta

<TD>4

<TD>Prácticas de metodología experimental <TR>

<TH COLSPAN="3" ALIGN="left">Tipo de Contenidos

<TH>Créditos <TR>

<TD COLSPAN="3">Teóricos

<TD ALIGN="center">4 <TR>

<TD COLSPAN="3">Prácticos

<TD ALIGN="center">2 </TABLE>

Un último ejemplo:

HTML Página 20


Secciones del tutorial

Comandos básicos Imágenes Enlaces

Tablas Funciones especiales Recomendaciones

Introducción de imágenes en una tabla

Icono de página por defecto

Acceso a otros recursos

WWW de la Universidad de Murcia http://www.um.es

<CENTER> <TABLE BORDER=9>

<TR><TH COLSPAN="2">Secciones del tutorial<TR>

<TD>

<UL>

<LI>Comandos básicos <LI>Imágenes <LI>Enlaces

</UL> <TD>

<UL> <LI>Tablas <LI>Funciones especiales <LI>Recomendaciones

</UL> <TR><TH COLSPAN="2">Introducción de imagenes en una tabla

<TR>

<TD>Icono de página por defecto

<TD><IMG SRC="home.gif">

<TR><TH COLSPAN="2">Acceso a otros recursos

<TR>

<TD>WWW de la Universidad de Murcia

<TD><A HREF="http://www.um.es">http://www.um.es</A> </TABLE>

EJERCICIO

Trata de hacer la siguiente tabla en HTML:

Climas de América del Sur

Parte de arriba de América del Sur. Países como:

Venezuela

Colombia

Ecuador

Perú

Parte de abajo de América del Sur. Países como:

Argentina

Chile

Uruguay

Paraguay

Bosque tropical, clima de sabana, clima marítimo con inviernos secos.

Climas marítimos con veranos secos, con inviernos secos, climas fríos, clima de estepa, clima desértico.

http://www.um.es/

HTML Página 21


MULTIMEDIA

De un modo similar a como se inserta una imagen se puede insertar un fichero de sonido o de vídeo.

SONIDO DE FONDO AL CARGAR LA PÁGINA

En este caso la etiqueta depende del navegador, ya que se implementa de forma diferente en el Explorer y el Netscape. Los formatos más usados son mid (para temas musicales sin voces), wav y au.

Netscape

La etiqueta básica para que se cargue el fichero de música con la página, sin intervención del usuario, es en Netscape (siendo obligatorio especificar el tamaño):

<EMBED SRC="gifs/derroche.mid" WIDTH=144 HEIGHT=30>

En Netscape se verá para WIDTH=160 HEIGHT=70 como:

La etiqueta EMBED tiene multitud de atributos, he aquí algunos.

AUTOSTART= FALSE (por defecto) y TRUE. Este último hace que suene inmediatamente después de cargar la página sin necesidad de pulsar el botón. HIDDEN=TRUE, oculta la consola y sólo tiene este valor. Como no se podría activar el sonido pulsando el botón, suene al cargar la página LOOP=FALSE, TRUE (por defecto),N para oír el fichero una vez, infinitas o el número que especifiquemos en N

CONTROLS=SMALLCONSOLE, aparece una consola pequeñita

Si pones esta etiqueta, las versiones más recientes del Explorer (desde la 4.0) también la interpretan correctamente, salvo LOOP. El Explorer lee el fichero una vez para LOOP=0 y lo repite indefinidamente para N igual a otro valor cualquiera.

Explorer

El Explorer ofrece menos posibilidades para manejar estos ficheros. La etiqueta básica para que se cargue la música con la página es:

<BGSOUND SRC="fichero de sonido" LOOP= n ó INFINITE>

donde n es el número de veces que se oye el fichero: 1, 2, 3 ... o infinitas

Sonido de fondo en los dos navegadores

Si deseas que suene la música al cargar la página con los dos navegadores debes escribir las etiquetas para ambos. Es decir debes poner:

<bgsound src="../gifs/houston.mid"> <embed src="../gifs/houston.mid" Hidden="true" >

para que suene una vez, o bien:

HTML Página 22


<BGSOUND SRC="../gifs/cantina.wav" LOOP=”infinite”> <EMBED SRC="../gifs/cantina.wav" WIDTH=”200” HEIGHT=”55” AUTOSTART="true" LOOP="true" HIDDEN="true">

para que se ejecute indefinidamente.

Si no quieres que se cargue la música con la página, algo que llega a resultar bastante pesado a veces, debes poner un enlace al fichero de sonido, lo que funciona con ambos navegadores: Netscape y Explorer. También puedes poner cualquier otro tipo de ficheros de sonido, como mp3, que comprime hasta 12 veces la música, sin pérdida apreciable de calidad.

VÍDEO

El gran problema de los ficheros de vídeo es su tamaño, ya que unos pocos segundos pueden representar varios Mb (mega bytes) de tamaño. Probablemente en el futuro se irá generalizando su uso, ya que aumentará la velocidad en la Red. Los formatos que se emplean son variados: avi, mpeg, ram, mov, etc, que pueden reproducir a la vez sonido y vídeo. Los ficheros avi y mpeg se reproducen con el Reproductor Multimedia de Windows, pero los demás necesitan visores propios que se deben instalar previamente. Por ejemplo los ficheros ram se visualizan con Real Player, los mov con Quick Time, etc. Son los llamados plug-in

En Netscape, la etiqueta es muy parecida a la de sonido, siendo obligatorio especificar también las dimensiones:

<EMBED SRC="video.avi" HEIGHT=”300” WIDTH=”400” AUTOSTART=”false” LOOP=”false”>

En Explorer debes llamar al fichero con un enlace

<A HREF="gifs/jordan.avi">Mira el vídeo de Jordan</A>

lo que abrirá el programa asociado al tipo de vídeo elegido cuando lo pulses. En el Netscape también puedes hacer esto mismo.

MAPAS SENSIBLES

Los mapas sensibles son imágenes que presentan múltiples enlaces según la zona donde se sitúe el cursor. Para conseguir esto se divide la imagen en zonas mediante las coordenadas de las mismas.

Procedimiento

Primero conseguimos una imagen y la declaramos como mapa, en este caso con el nombre de directorio

<IMG SRC="gifs/mapa.gif USEMAP="#directorio">

HTML Página 23


Abrimos el mapa recién creado

<MAP NAME="directorio">

Definimos las zonas del mapa y los enlaces que le asignamos a cada una.

<AREA SHAPE="forma de la zona" COORDS="coordenadas" HREF="URL asignada" ALT="comentario">

Cerramos el mapa

</MAP>

Valores de SHAPE y COORDS

Los valores que pueden tomar la forma y las coordenadas son:

RECT. Rectángulo o cuadrado

COORDS="x,y,u,v" donde x,y son las coordenadas del vértice superior izquierdo del rectángulo y u,v es el vértice inferior derecho. El origen de coordenadas 0,0 es el vértice superior izquierdo

CIRCLE. Círculo

COORDS="x,y,z", donde x,y es el cetro de la circunferencia y z el radio

POLY. Línea poligonal cerrada

COORDS="X,x, Y,y, Z,z...,X,x", donde los pares X,x, Y,y, etc representan los vértices del polígono. El primero coincidirá con el último.

DEFAULT. La zona no referenciada anteriormente

Para hallar las coordenadas necesitarás un editor de imágenes. También puedes hacerlo a ojo, siempre que la imagen no sea muy complicada, ya que cuando pulsas la zona en el navegador aparece definida un instante.

Ejemplo

Vamos a crear un mapa sensible con una imagen capturada del explorador de Windows95. Para hacerlo pulsa la tecla Imprimir Pantalla (Print Screen SysRq) y luego pega la imagen capturada con cualquier editor de imágenes. El Paint que viene con Windows 95 y 98 no vale ya que, aunque captua la pantalla, luego no puedes guardar la imagen en formato gif o jpg. Usa el Adobe Photoshop, el Paint Shop Pro o el Corel.

Vamos a crear un mapa que nos podría servir como menú en la página principal.

HTML Página 24


Para conseguir el mapa de la izquierda hemos escrito

<IMG SRC="gifs/mapa.gif" USEMAP="#directorio" ALIGN="left" HSPACE=20> <MAP NAME="directorio"> <AREA SHAPE="RECT" COORDS="0,0,94,22" HREF="colores.htm"> <AREA SHAPE="RECT" COORDS="0,22,94,39" HREF="comienzo.htm"> <AREA SHAPE="RECT" COORDS="0,39,94,56" HREF="enlaces.htm"> <AREA SHAPE="RECT" COORDS="0,56,94,73" HREF="estructura.htm"> <AREA SHAPE="RECT" COORDS="0,73,94,90" HREF="formatos.htm"> <AREA SHAPE="RECT" COORDS="0,90,94,107" HREF="imagenes.htm"> <AREA SHAPE="RECT" COORDS="0,107,94,124" HREF="index.htm"> <AREA SHAPE="RECT" COORDS="0,124,94,141" HREF="listas.htm"> <AREA SHAPE="RECT" COORDS="0,141,94,158" HREF="mapas.htm"> <AREA SHAPE="RECT" COORDS="0,158,94,175" HREF="publicar.htm"> <AREA SHAPE="RECT" COORDS="0,175,94,192" HREF="tablas.htm"> <AREA SHAPE="RECT" COORDS="0,175,94,214" HREF="frames.htm"> </MAP>

No te asustes con tanto número, fíjate en las regularidades que presentan. La 1ª columna y la 3ª indican donde empieza y donde acaba horizontalmente. La 2ª y la 4ª lo hacen en sentido vertical. Cualquiera de los programas citados anteriormente te indican las coordenadas de cualquier punto de una imagen.

Fíjate también que la etiqueta inicial <IMG SRC...> es una etiqueta de imagen y como tal acepta todos sus atributos.

FORMULARIOS

Una de las mayores ventajas de la Web es que resulta tremendamente interactiva. Los usuarios de una página no tienen más que escribir al autor de la misma para comentarle cualquier cosa. Sin embargo, si deseamos que nos digan sólo unas cosas concretas (responder a alguna pregunta, seleccionar entre varias opciones, etc...) deberemos utilizar formularios.

Por ejemplo:

<FORM ACTION="[email protected]" METHOD=”POST”>

Nombre:<BR><INPUT NAME="nombre" TYPE=TEXT SIZE=32>

<BR>¿Cuantos son dos y dos?<BR>

<INPUT NAME="Respuesta" TYPE=RADIO VALUE="mal">3<BR>

<INPUT NAME="Respuesta" TYPE=RADIO VALUE="bien">4<BR>

<INPUT NAME="Respuesta" TYPE=RADIO VALUE="mal">5<BR>

<INPUT TYPE="Submit" VALUE="Comprobar">

</FORM>

se verá así:

Nombre:

HTML Página 25


¿Cuantos son dos y dos?

3

4

5

Comprobar

Todos los elementos de un formulario deben estar encerrados entre <FORM> y </FORM>. Como parámetros cabe destacar dos. ACTION define el URL que deberá gestionar el formulario. Puede ser una dirección de correo pero es poco recomendable, ya que el formato en el que llega es bastante incómodo de leer. Por ello existen muchos programas que traducen de ese formato a otro más legible.

Por otro lado, tenemos el parámetro METHOD define la manera en que se mandará el formulario. Es recomendable utilizar POST.

Ahora vamos a ver uno a uno todos los elementos que podemos incluir en un formulario. Veremos que todos ellos tienen algo en común. Como el resultado de cualquier formulario es una lista de variables y valores asignados a las mismas, todos ellos tendrán un atributo en común: el nombre de su variable. El parámetro también será común a todos: NAME.

CAJAS DE TEXTO

Existen tres maneras de conseguir que el usuario introduzca texto en nuestro formulario. Las dos primeras se obtienen por medio de la etiqueta <INPUT>:

<INPUT TYPE=TEXT>

<INPUT TYPE=PASSWORD>

El primero nos dibujará una caja donde escribir un texto (de una sola línea). El segundo es equivalente, pero no veremos lo que tecleemos en él. Estos son los atributos para modificarlos:

Parámetro Utilidad

SIZE Tamaño de la caja de texto.

MAXLENGTH Número máximo de caracteres que puede introducir el usuario.

VALUE Texto por defecto que contendrá la caja.

Por otro lado, puede que necesitemos que el usuario pueda introducir más de una línea. En ese caso se utilizará la siguiente etiqueta:

HTML Página 26


<TEXTAREA> Por defecto </TEXTAREA>

Por defecto

Lo que incluyamos entre las dos etiquetas será lo que se muestre por defecto dentro de la caja. Admite estos parámetros:

Parámetro Utilidad

ROWS Filas que ocupará la caja de texto.

COLS Columnas que ocupará la caja de texto.

OPCIONES

Si lo que deseamos es que el usuario decida entre varias opciones podremos hacerlo de dos modos. El primero es el que vimos en el ejemplo inicial:

3<INPUT NAME="Respuesta" TYPE=RADIO VALUE="mal"><BR>

4<INPUT NAME="Respuesta" TYPE=RADIO VALUE="bien"><BR>

5<INPUT NAME="Respuesta" TYPE=RADIO VALUE="mal"><BR>

3

4

5

Para asociar varios botones de radio a una misma variable les pondremos a todos ellos el mismo NAME. Aparte de esto acepta los siguientes parámetros:

Parámetro Utilidad

VALUE 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.

Pero también tenemos una posibilidad que ocupa bastante menos: las listas desplegables. Para emplearlas deberemos utilizar dos etiquetas, SELECT y OPTION:

<SELECT NAME="Navegador"> <OPTION>Netscape <OPTION>Explorer <OPTION>Opera <OPTION>Lynx <OPTION>Otros </SELECT>

Los parámetros que admite SELECT son las siguientes:

Parámetro Utilidad

SIZE El número de opciones que podremos ver. Si es mayor que 1 veremos una lista de selección y, si no, veremos una lista desplegable.

MULTIPLE Si lo indicamos podremos elegir más de una opción.

HTML Página 27


Y OPTION estos:

Parámetro Utilidad

VALUE Este es el valor que asignará a la variable.

SELECTED Si lo indicamos en una de las opciones esta será la seleccionada por defecto.

BOTONES DE FORMULARIO

Existen dos: uno que se utiliza para mandar el formulario y otro que sirve para limpiar todo lo que haya rellenado el usuario:

<INPUT TYPE=SUBMIT><BR>

<INPUT TYPE=RESET>

Enviar

Restablecer

Podemos cambiar el texto que el navegador pone por defecto en esos botones utilizando el parámetro VALUE.

OTROS ELEMENTOS

Puede que necesites que el usuario sencillamente nos confirme o niegue algo. Lo podremos conseguir por medio de controles de confirmación:

<INPUT NAME="Belleza" TYPE=CHECKBOX>

Me considero guapo/a Me considero guapo/a

Si queremos que el control esté activado por defecto le añadiremos el parámetro CHECKED. El formulario asignará a la variable NAME el valor on u off.

Por último, existe la posibilidad de que necesitemos que, en el formulario, tengamos alguna variable con un valor previamente asignado. Por ejemplo, en todos los cursos que tengo el formulario es el mismo. Y de alguna manera tendré que distinguirlos cuando me lleguen, digo yo. Así que incluyo algo como esto:

<INPUT TYPE=HIDDEN NAME="Curso" VALUE="HTML 4.0">

De este modo ya sé de qué curso me están hablando.

Ahora, si encerramos una parte de un formulario dentro de la etiqueta FIELDSET se mostrará un rectángulo alrededor de los mismos. Si además, le indicamos un título por medio de la etiqueta LEGEND nuestros formularios quedarán hechos un verdadero primor:

<FIELDSET> <LEGEND>Mi hermoso formulario</LEGEND> <LABEL> Mi texto: <INPUT TYPE="text"> </LABEL> </FIELDSET>

HTML Página 28


LEGEND admite como parámetro ALIGN, que indicará en qué lugar se coloca el título. Por defecto es TOP (arriba), pudiendo estar también abajo (BOTTOM), a la izquierda (LEFT) o a la derecha (RIGHT).

Todos los controles de un formulario se pueden desactivar, impidiendo así al usuario que los utilice. Se seguirán mostrando en pantalla, aunque con un aspecto distinto para indicar su triste estado. Para ello sólo tenemos que indicarle el parámetro DISABLED:

<LABEL DISABLED>Texto: <INPUT TYPE=TEXT DISABLED> </LABEL>

Ejemplo

Sustituye los campos necesarios para colocarlo en tu página

<form action="mailto:[email protected]" method="post" enctype="text/plain"> <center> <table bgcolor="#cccccc" border="0" cellpadding="6" cellspacing="0" width="400">

<tr> <td align="right" valign="top"><b>Nombre</b></td> <td><input type="text" size="25" name="Nombre"> </td>

</tr> <tr>

<td align="right" valign="top"><b>E-mail</b></td> <td><input type="text" size="25" name="e-mail"> </td>

</tr> <tr>

<td align="right" valign="top"><b>Especialidad</b></td> <td><input type="text" size="25" name="Especialidad"> </td>

</tr> <tr>

<td align="right" valign="top"><b>Centro de destino</b></td> <td><input type="text" size="25" name="Centro"> </td>

</tr> <tr>

<td align="right" valign="top"><b>Provincia</b></td> <td><input type="text" size="25" name="Provincia"> </td>

</tr> <tr>

<td align="right" valign="top"><b>Pulsa una vez</b> <b>></b></td> <td align="center">

<input type="submit" name="Enviar datos" value=" Enviar "> <input type="reset" value="Borrar" name="B1">

</td> </tr>

</table> </center> </form>

HTML Página 29


FRAMES

Los frames (marcos o cuadros) permiten dividir la ventana en varias más pequeñas, de modo que en cada una de ellas se cargua una página html distinta. Las versiones más antiguas de los navegadores no tienen implementada esta característica, por lo que no podrán verlos.

Sintaxis

Los frames se declaran con la etiqueta <FRAMESET>, que debe ser colocada antes de la etiqueta <BODY>. Si no se cumple este requisito, la etiqueta se ignorará. Un ejmplo sencillo es el siguiente: (puedes ver el ejemplo real pulsando aquí)

<HTML> <HEAD><TITLE> Título de la página </TITLE></HEAD> <FRAMESET ROWS=75,*> <FRAME SRC="frames1.htm" > <FRAME SRC="frames2.htm" > </FRAMESET> <NOFRAMES> <BODY> Lo siento,su navegador no soporta frames. Pulse <a href="frames1.htm>aquí </A> para acceder a los contenidos de estas páginas. </BODY> </NOFRAMES> </HTML>

EL atributo ROWS (filas) es el que define el número y el tamaño de los frames, en este caso dos filas, de 75 píxels la primera y el resto de la ventana la segunda. También se puede dividir en columnas mediante COLS

El tamaño de los frames se puede especificar de más formas: COLS=*,5* dos columnas, la segunda cinco veces mayor que la primera COLS=150,*,150 tres colunmas, la primera y tercera de 150 píxels, la segunda ocupa el resto. ROWS=20%,80% dos filas que ocupan el 20 % y el 80 % del espacio respectivamente.

http://platea.pntic.mec.es/~abercian/guiahtml/ejemplos/indexframe1.htm

HTML Página 30


Las etiquetas NOFRAMES y BODY solamente se usan por cortesía, de hecho se pueden suprimir.

Las etiquetas FRAME SRC="frames.htm" cargan las página indicadas en el frame correspondiente.

También es posible anidar frames, llamando a una página que tenga de nuevo frames o bien declarándolo explicitamente. Un ejemplo de esto último es el que aparece abajo (el real aquí )

<FRAMESET COLS=20%,*> <FRAME SRC="frames1.htm"> <FRAMESET ROWS=20%,*> <FRAME SRC="frames2.htm"> <FRAME SRC="frames3.htm"> </FRAMESET> </FRAMESET>

Este código divide la ventana en dos columnas, la primera del 20 % del ancho total, y la segunda queda dividida a su vez en dos filas, siendo la primera de ellas un 20 % del total

El atributo TARGET

Lo más interesante de los frames es la posibilidad que tienen de interactuar entre si, es decir pulsar un enlace en el frame 1 y cargar el contenido en el frame 2. Para conseguir esto hay que darle un nombre a los frames y luego indicar en el enlace donde se va a cargar mediante el atributo TARGET. Veamos un ejemplo

<HTML> <HEAD><TITLE> Frames --Ejemplo 3--</TITLE></HEAD> <FRAMESET COLS=150,*> <FRAME SRC="frames4.htm" NAME=margen> <FRAME SRC="frames5.htm" NAME=principal> </FRAMESET> </HTML>

Los enlaces de la página frames4.htm , que es la que se carga en el margen izquierdo,se escriben de la forma: <A HREF="frames1.htm" TARGET=principal>Frame 1 </A>

Hay ciertos valores reservados para TARGET, estos son

TARGET=_top, hace que la página se cargue en la ventana completa del navegador. TARGET=_self, hace que la página se cargue en la misma ventana del frame actual. TARGET=_parent, hace que la página se cargue en el frame "padre", del que desciende el

actual TARGET=_blank, hace que la página se cargue en una nueva ventana. TARGET=nombre, hace que la página se cargue en el frame llamado nombre. Si no existe se

carga en una ventana nueva



HTML Página 31


Atributos de FRAME

En los frames se pueden modificar algunas de sus características por medio de las etiquetas que siguen:

SCROLLING= yes, no , auto . Indica si el frame llevará siempre, nunca o cuando lo necesite, barra de deslizamiento vertical

BORDERCOLOR="color" . Indica el color del borde

MARGINWIDTH=n . Indica el margen horizontal, tanto derecho como izquierdo, en píxels

MARGINHEIGHT=n . Indica el margen vertical, tanto superior como inferior, en píxels

NORESIZE. Indica que el frame no se puede redimensionar. Si no se pone este atributo colocando el cursor en el borde del frame, permitiría su deslizamiento

Atributo de FRAMESET

FRAMEBORDER=yes, no. Indica si los frames tendrán bordes o no.

HTML Página 32


MAQUETAR CON TABLAS

En HTML tradicional se utilizan las tablas, aparte de mostrar información tabulada como hemos visto en este artículo, para maquetar páginas web. Con las tablas podemos generar una serie de espacios donde podemos mostrar contenidos estructurados en columnas y filas, como la maquetación de una revista o un portal.

Para crear la estructura de columnas utilizaremos tablas HTML y explicaremos algunos de los trucos típicos utilizados para la maquetación con tablas.

Maquetación por tablas paso a paso

Las tablas en realidad están pensadas para presentar información tabulada, es decir, usando filas y columnas. Sin embargo, este uso lo podemos extender a toda la página web y crear una macrotabla que englobe todos los contenidos que se van a mostrar en la página entera. Como las tablas tienen filas y columnas, nos servirán para crear varias áreas donde se mostrarán los contenidos maquetados como si fuera una revista o un portal.

En este artículo vamos a crear un ejemplo medianamente sencillo de maquetación usando tablas. Lo podemos ver a continuación para hacernos una idea del objetivo buscado.

Como hemos visto, esta página está compuesta por una cabecera y un cuerpo de página. Para crear la cabecera y el cuerpo utilizaremos tablas independientes. Esto lo hacemos porque con dos tablas separadas para simplificar el ejemplo, es decir, por

HTML Página 33


comodidad y porque se hace más fácil de diseñar. No obstante, como la distribución de columnas y filas en la cabecera y cuerpo en este ejemplo es distinta, necesitamos utilizar tablas independientes. Pero la razón más importante de poner cabecera y cuerpo en tablas distintas es que en algunos navegadores, cuando hay diseño con tablas, hasta que no se carga el código de la tabla entera no se muestra nada. Si tuviéramos toda la página metida en la misma tabla, el usuario no vería nada hasta que no se terminase de cargar toda la página en su navegador. Si separamos las tablas de cabecera y cuerpo conseguimos que la cabecera de la página se cargue y se muestre rápidamente y luego, aunque tarde bastante en cargarse el resto de la página con todo el cuerpo, por lo menos el usuario ve la cabecera y puede saber que la página está por cargar del todo.

En este caso la cabecera es bastante típica, con el logotipo, un banner y una barra de navegación horizontal. El código puede ser como el siguiente.

<table width="778" cellspacing="1" cellpadding="3" border="0"

bgcolor="#000000" align="center">

<tr>

<td width=180 align=center bgcolor="#ffffff"><img src="logo.gif"

width="154" height="72" alt="Todo Clásico" border="0"></td>

<td bgcolor="#ffffff" align=center><img src="banner.gif" width="468"

height="60" border="0"></td>

</tr>

<tr>

<td colspan=2 bgcolor="#ffffff" background="fondohorizontal.gif">

<font face="Garamond">Portada | Noticias | Agenda | Artistas | Buscador |

Comunidad | Tienda</font>

</td>

</tr>

</table>

Si nos fijamos, la cabecera tenía un contorno negro. Simplemente ponemos un color de fondo negro a la tabla, luego hacemos que las casillas estén separadas (cellspacing) de un píxel y definimos en blanco el color de todas las casillas. Así, la separación entre casillas aparecerá en negro y las casillas en blanco. En este caso hemos definido un margen entre el borde de la casilla y el contenido (cellpadding) de tres pixels, para que el contenido de las casillas no se pegue con el borde.

La barra de navegación horizontal ocupa todo el ancho de la cabecera, por eso tiene un colspan=2. Le hemos puesto un fondo degradado para mejorar el diseño un poco.

Otra cosa destacable es el ancho de la tabla, que lo hemos hecho de 778 píxeles. Podríamos haber hecho un diseño que ocupase todo el ancho de la página, pero he creado un diseño no fluido con ancho fijo. Este tipo de diseños, en mi opinión, son más sencillos de que queden bien. El tamaño de 778 píxeles es porque es lo máximo que se puede poner que quepa en definiciones de pantalla de 800 x 600.

Por su parte, el cuerpo tiene una distribución de tres columnas. El código de la tabla que englobaría todo el cuerpo es el siguiente:

<table width="778" cellspacing="0" cellpadding="0" border="0" align="center">

<tr>

<td width=150 valign="top">



</td>

<td width=10></td>

<td width=484 valign="top">

HTML Página 34


</td>

<td width=10></td>

<td width=124 align=center valign="top">



</td>

</tr>

</table>

La técnica para hacer esta tabla es distinta que la tabla de la cabecera. Esta tabla no tiene reborde negro, para no recargar demasiado el diseño de la página. Pero lo más importante es que los márgenes y espacio entre celdas (cellspacing y cellpadding) los hemos eliminado o puesto a cero. Entonces, los espacios que tiene que haber entre celdas los hemos puesto con celdas vacías de 10 pixel. Esto lo hago así porque de este modo me resulta más sencillo calcular los espacios de la tabla y porque así podemos definir márgenes que no afectan a todas las celdas de la tabla, sino sólo a las que los necesitan.

La tabla tiene tres celdas donde se meterán contenidos y dos celdas con espacio o márgenes para separar las tres casillas donde están los contenidos. Dentro de cada celda colocamos los contenidos necesarios. En la primera irá la barra de navegación de la izquierda, en la celda del centro el cuerpo principal y en la tercera casilla irá el lateral derecho, que hemos utilizado para colocar publicidad.

Los anchos de cada celda, definidos por el atributo width, son bastante típicos en este tipo de estructuras de tres columnas. Además, podemos ver que todas las celdas tienen el atributo valign="top" para que los contenidos se sitúen en la parte de arriba de la tabla.

El contenido de cada una de las celdas del cuerpo incluye más código HTML, incluso otras tablas anidadas. En general, podemos poner en cada columna el código HTML que necesitemos, con cualquier etiqueta, teniendo en cuenta que el ancho disponible está limitado al ancho de la celda.

El lenguaje HTML está basado en el uso de etiquetas · respetando el formato con el que fue...

Documents

Transcript of El lenguaje HTML está basado en el uso de etiquetas · respetando el formato con el que fue...