UD2 HTML(2)

UD 2:HTML

Lenguajes de marcas y sistemas de gestin de la informacin 1 CIFP Rodolfo Ucha Pieiro - Ferrol

HTML

Un sitio web est localizado fsicamente en un directorio de un servidor. En dicho directorio es donde se encuentran las pginas HTML que conforman nuestro sitio web, as como todos los recursos necesarios (imgenes, CSS, rutinas de Script....)

Para que un sitio web funcione ser necesario la existencia de un servidor Web (IIS, Apache,....) el cual, al ser invocado, cargar alguna de las pginas solicitadas.

Desde el punto de vista del usuario, ser necesario disponer de un navegador o browser que permita visualizar las pginas que componente nuestro sitio web. Ejemplos de dichos navegadores son Internet Explorer, Google Chrome, Firefox.....

Al cargar una pgina, lo que hace el servidor Web es mandarla a travs de Internet al navegador del usuario.

Existe una diferencia entre cargar la pgina directamente en nuestro navegador y cargarla por medio de un servidor web.

Si cargamos una pgina en nuestro navegador de la forma C:\directorio\pagina.html, no estamos yendo a Internet. La pgina slo puede tener cdigo HTML y JavaScript o VbasicScript, ya que cualquier otro lenguaje (PHP, ASP o JSP) no se pondr ejecutar.

Si solicitamos una pgina que se encuentra en otro ordenador (Servidor), de la forma www.google.es, por ejemplo. Dicha direccin (denominada direccin DNS) es traducida por un equipo (servidor DNS) a una direccin IP. Esa direccin IP identifica al equipo que posee la pgina solicitada. El navegador se dirige al servidor en el cual se estar ejecutando un servidor web que encuentra la pgina solicitada, ejecuta el cdigo que contenga (PHP, ASP o JSP) y la enva al cliente de vuelta.

Lenguaje HTML

HTML es la abreviatura de HyperText Markup Language, y es el lenguaje que todos los programas navegadores usan para presentar informacin en la World Wide Web (WWW).

Este es un lenguaje muy sencillo que se basa en el uso de etiquetas, consistentes en un texto ASCII encerrado dentro de ellas: El texto incluido dentro de < > nos dar una explicacin de la utilidad de la etiqueta. As como por ejemplo la etiqueta nos permitir definir una tabla.

Las etiquetas podrn incluir una serie de atributos o parmetros, en su mayora opcionales, que nos permitirn definir diferentes posibilidades o caractersticas de la misma. Estos atributos quedarn definidos por su nombre (que ser explicativo de su utilidad) y el valor que toman separados por un signo de igual. En caso de que el valor que tome el atributo tenga ms de una palabra deber expresarse entre comillas, en caso contrario no ser necesario. As como por ejemplo la etiqueta nos permitir definir una tabla con borde de tamao 2.

UD 2:HTML


Entre otras cosas, el manejo de estas etiquetas nos permitir:

Definir la estructura lgica del documento HTML. Aplicar distintos estilos al texto (negrita, cursiva, ...). La inclusin de hiperenlaces, que nos permitirn acceder a otros documentos

relacionados con el actual. La inclusin de imgenes y ficheros multimedia (grficos, vdeo, audio).

Qu vamos a necesitar para crear un documento HTML?

Un procesador de textos para escribir y editar el cdigo HTML. Este podr ser cualquier que no formatee el texto, ya que el lenguaje HTML est basado en el cdigo ASCII. Si usamos un procesador como Word, tendremos que guardar el documento como "slo texto".

Un navegador Web como el IExplorer, Chrome, Firefox, etc., el cual se encargar del interpretar el cdigo HTML de nuestro documento.

La secuencia de trabajo para crear nuestro documento es:

1. Con el procesador de texto crearemos el documento HTML y lo guardaremos con el nombre que deseemos, fuera de la extensin, que deber ser necesariamente .htm o .html.

2. Para visualizar nuestro documento HTML abriremos el documento con el programa navegador.

Reglas de formato

Todos los navegadores usan unas reglas bsicas para poder mostrar una pgina web con un bueno formato:

El espacio en blanco es ignorado. Ya que un documento HTML puede estar en cualquier tipo de fuente y adems la ventana del navegador pode ser de cualquiera tamao.

Las etiquetas pueden ser escritas en maysculas o en minsculas. En todo caso se aconseja su escritura en minsculas para que cumplan el estndar XHTML (se ver posteriormente)

Existe normalmente una etiqueta de inicio y otra de fin. La etiqueta de fin contendr el mismo texto que la de inicio aadindole al principio una barra inclinada. La etiqueta afectar por tanto a todo lo que est incluido entre las etiquetas de inicio y fin. No obstante, existen algunas que no necesitan cierre, ya que en estas etiquetas se presupone su final, como por ejemplo: : salto de lnea o inclusin de una imagen. De todas formas si queremos cumplir el estndar XHTML ser necesario poner un fin de etiqueta de la forma: :

UD 2:HTML


La estructura bsica de un documento HTML es la siguiente:

Indica el inicio del documento Indica el inicio de la cabecera Inicio del ttulo del documento Final del ttulo del documento Final de la cabecera Inicio del cuerpo del documento Instrucciones HTML Final del cuerpo del documento Final del documento

NOTAS

Ninguno de estos elementos es obligatorio, pudiendo crear documentos HTML sin incluir estas etiquetas de identificacin. No obstante es altamente recomendable la construccin de pginas HTML siguiendo esta estructura, para una buena estructuracin y legibilidad del cdigo.

En algunos atributos aparecer la palabra Deprecated. Esta significa que dicho atributo no es recomendable utilizarlo, ya que no cumple con un determinado estndar. Ser visto ms adelante.

Etiquetas bsicas.

Comentarios: Para poner comentarios haremos uso de la siguiente combinacin de etiquetas:

Formato:

Permite delimitar un prrafo de otro, produciendo entre ellos normalmente dos lneas en blanco. Tiene un atributo que es ALIGN (deprecated), que nos permite alinear el prrafo.

Formato: Texto del prrafo

Para que cumpla el estndar XHTML ser necesario cerrar la etiqueta de la forma por cada prrafo.

Es de utilidad parecida al mandato . Realiza un salto de lnea, sin dejar lneas en blanco entre texto y texto. Es una etiqueta sin cierre en HTML. Se puede utilizar de la forma: o tambin

Es un elemento que se comporta de forma parecida a pero que admite los mismos atributos que .


UD 2:HTML


Es un elemento que sirve para presentar prrafos adentrados (como si estuviesen tabulados). Empieza dejando una lnea en blanco.


Si se anidan estas etiquetas se ir produciendo un adentramiento sucesivo de los prrafos.

Define una lnea horizontal que puede tener cmo uso la divisin de secciones de texto. Por defecto, realizar una lnea que cruzar de extremo a extremo la pantalla, aadiendo un salto de lnea como la separacin de prrafo.

Formato: HTML:

Atributos:

ALIGN: Indicar la posicin donde se situar la lnea, si esta no ocupa el ancho completo. Deprecated.

NOSHADE: Elimina el efecto de sombra de la lnea. Por defecto la mostrar. Deprecated

SIZE: Indica el ancho de la lnea. Por defecto es un pixel. Deprecated.

WIDTH: Definimos la longitud de la lnea, ya sea por puntos o por un clculo de tanto por ciento si ponemos n%. Deprecated.

COLOR. Permite cambiar el color de la lnea.

Permite rodear un texto con una lnea, y opcionalmente ponerle una etiqueta.

Formato: Texto dentro del cuadro

Se puede poner un ttulo al cuadro mediante la etiqueta

Como por ejemplo: Este es el ttulo del cuadro Este es el texto que ir dentro del cuadro

NOTA: es importante sealar que es posible tener varias etiquetas anidadas, de tal forma que se van sumando los efectos de las mismas. Como regla, debemos poner el cierre de las etiquetas en el orden inverso a cmo las abrimos. Veremos que existen etiquetas que son de tipo bloque las cuales pueden tener anidadas otras etiquetas de tipo individual, las cules no deben tener etiquetas anidadas para que cumplan el estndar XHTML.

UD 2:HTML


ESTADOS FSICOS Y LGICOS

Los estados fsicos son aquellos que nos permiten modificar el texto de forma determinada (negrita, cursiva..), mientras que los estados lgicos son aquellos que son asignados a un determinado texto por sus caractersticas.

ESTADOS FSICOS ESTADOS LGICOS

Comando Accin Comando Representa

B Negrita (blank) ADDRESS MAIL

I Cursiva (Italic) CODE Cdigo de un lenguaje

BLINK Parpadeo STRIKE Texto tachado

SUB Subndice STRONG Texto resaltado

SUP Superndice VAR Variable

BIG Mayor tamao fuente EM Enfasis

SMALL Menor tamao fuente DFN Definicin

S Texto tachado CITE Cita

U Subrayado (Underline)

Alguna de estas etiquetas no es reconocida por determinados navegadores. As como por ejemplo, la etiqueta BLINK (Parpadeo) no es implementada por el Explorer. Por lo que segn el explorador que estemos a utilizar, podremos ver el resultado correctamente o no.

Adems, las etiquetas lgicas pueden tener el mismo efecto que las fsicas. As, STRONG es igual a B, CITE es igual a I, STRIKE es iguala S. En algunos casos se recomienda el uso de las etiquetas lgicas, como STRONG ya que para personas invidentes les da mayor informacin.

Directiva que permite mostrar un texto con el formato propio del cdigo fuente. Por tanto esta directiva hace que se respeten los espacios en blanco, as como los retornos de lnea. Existe un problema en cuanto a los retornos de carro, y es que si no se incluyen estos especficamente en el documento fuente, no se harn efectivos en el documento final, produciendo as una lnea ms larga de la esperada.

Formato: TEXTO PREFORMATEADO

El texto se mostrar con una fuente de espaciado fijo ms pequea que el texto normal. No es recomendable su uso ya que presenta muchas limitaciones y no se obtiene una buena presentacin.

UD 2:HTML


Todo elemento que se encuentre entre las etiquetas de apertura y cierre aparecer centrado en el documento final. Cuando nos referimos la todo elemento, nos referimos a texto, imgenes, tablas, listas... etc. Deprecated.

Formato: TEXTO CENTRADO

CARACTERES ESPECIALES

Bajo este nombre se incluirn caracteres que se tratarn de forma especial para su correcta interpretacin. La especificacin de estos caracteres va precedida del signo ampersan(&)cdigo del carcter, finalizado con un punto y coma.

A modo de ejemplo, el carcter es

Uno de los casos en que necesitamos estos caracteres especiales es cuando hacemos referencia a elementos del HTML, debido a que si se introdujeran de forma habitual seran interpretados por secuencias de control y no como caracteres normales. Esta situacin es muy til a la hora de tener que especificar ejemplos de comandos.

Como por ejemplo, queremos mostrar en el navegador , pondramos: Otro caso se corresponde con la especificacin de caracteres que no conforman parte del vocabulario de la lengua inglesa, se entiende por estos los caracteres acentuados, la y todos los caracteres que excedan del cdigo ASCII 127 (ASCII 7 BITS). Todo esto tambin se ver influenciado por el navegador a utilizar, ya que si es especfico de un lenguaje, leer los caracteres de dicho lenguaje sin tener que especificarlos con un cdigo de escape, pero al leerse ese documento con otro navegador no sern visualizados correctamente si no se introduce de esta forma especial. Como caso especial tomamos el cdigo de escape del espacio en blanco, ya que si se introduce de esta forma ser respetado por el intrprete y no lo eliminara. Secuencia Escape Cdigos Espacio en blanco < < > > & & &vocalacute;

UD 2:HTML


Cabeceras: H1...H6

En un documento HTML podemos incluir seis tipos distintos de cabeceras, que van a constituir normalmente el ttulo y los distintos subapartados que forman el documento, aunque podremos utilizarlas en el punto que queramos del documento para resaltar cualquier texto. Estas cabeceras son definidas por las etiquetas H1, H2, H3, H4, H5 y H6. El texto que componga cada cabecera deber estar incluido entre las etiquetas de inicio y fin correspondiente La cabecera H1ser la que muestre el texto de mayor tamao, este tamao ir disminuyendo hasta llegar a la cabecera H6

Formato: TEXTO

Atributo: ALIGN=Especifica la colocacin del texto de la cabecera, ya sea centrado, izquierda o derecha. Deprecated

FONT (Deprecated)

Etiqueta que tendr tres funciones dependiendo de los atributos que le asignemos, ya sea SIZE, FACE o COLOR. Antes de comenzar con la especificacin de dichos atributos haremos referencia a un elemento a tener en cuenta en relacin a las fuentes.

BASEFONT

Este elemento es utilizado para variar el tamao base de las fuentes relativas. No cambia el tamao de la fuente por defecto como se puede pensar intuitivamente!. El atributo SIZE de FONT detallado posteriormente har uso de su valor para realizar el clculo del tamao de las fuentes. Por defecto tiene el valor 3, siendo el rango vlido de 1 a 7, ambos inclusive.

Formato:

Atributo: - SIZE=n: Donde n es el nmero de clculo base, es decir, a partir de n se sumar el valor especificado en los comandos fuente.

Permite modificar el tamao de la fuente mediante un nmero asignado al atributo SIZE, dndose el caso de tener dos formas de llevarlo a cabo, bien sea directamente, es decir, indicndolo con un valor de 1-7; o bien haciendo uso del concepto de tamao relativo indicado en BASEFONT y que se realizara mediante la indicacin del signo matemtico ms o menos antepuesto al dgito en cuestin.

Formato: Texto

Texto

UD 2:HTML


Su funcin es variar el color del texto que abarque su radio de accin, teniendo cmo excepcin los enlaces, a los cuales no se le variar el color.

Texto

Nos va a permitir escribir texto con el tipo de letra que le especifiquemos. En caso de que el tipo de letra que le especificamos no est cargada en el ordenador que lee la pgina, se usar el font por defecto del navegador.

LISTAS

Podemos representar elementos en forma de lista dentro de nuestros documentos de una forma muy sencilla y con una gran versatilidad. Estas listas podrn incluir cualquiera de los elementos HTML e incluso podemos definir listas anidadas, es decir, listas dentro de listas. HTML nos permiten crear tres tipos distintos de listas:

Listas no numeradas Listas numeradas Listas de definiciones

Listas no numeradas: UL === Unorderer List Con este tipo de listas podemos especificar una serie de elementos sin una orden predeterminado, precedidos de una marca o vieta que nosotros mismos podemos definir. Para la definicin de los lmites de la lista utilizaremos la etiqueta . , y para determinar cada uno de los elementos que la componen usaremos la etiqueta

Formato:

Ttulo lista Elemento 1

..............

Elemento n

Con el atributo type (Deprecated) vamos a especificar el tipo de marca o vieta que anteceder a cada uno de los elementos de la lista. Estas marcas podrn ser: un disco (disc), un crculo (circle) o un cuadrado (square). Es importante que dicho atributo est en letras minsculas. La etiqueta LH nos va a servir para especificar un posible ttulo de la lista, siendo esta opcional.

Como por ejemplo, podemos tener listas anidadas con diferentes tipos:

Europa Asia frica Amrica

UD 2:HTML


Amrica do Norte Amrica do Sur

Oceana

Listas numeradas: OL ==== Orderer List

Con este tipo de listas podemos especificar una serie de elementos numerados segn el lugar que ocupan en la lista. Para la definicin de los lmites de la lista utilizaremos la etiqueta , y para determinar cada uno de los elementos que la componen usaremos la etiqueta

Atributos:

TYPE = Define el atributo para realizar la numeracin de la lista teniendo las posibilidades (Deprecated):

A: Letras en Maysculas.

a: Letras en Minsculas. I: Nmeros Romanos en Maysculas.

i: Nmeros Romanos en Minsculas.

1: Nmeros convencionales.

START= Representa el nmero con el cual comenzaremos la numeracin (Deprecated)

El formato es el siguiente:

Ttulo lista Elemento 1

..............

Elemento n

Listas de definiciones: DL ==== Definition List

Estas listas nos van a servir para especificar una serie de trminos y sus definiciones correspondientes.

Para la definicin de la lista usaremos la etiqueta ..., para especificar los trminos usaremos la etiqueta y para especificar la definicin correspondiente a cada trmino usaremos la etiqueta El formato es el siguiente:

UD 2:HTML


Como por ejemplo: Termo 1 Definicin 1 Trmino 2 Definicin 2 ....

Trmino n Definicin n

Por ejemplo:

ESPAAMADRID ITALIAROMA

UD 2:HTML


Finalmente especificaremos el nombre del archivo en que est guardado el documento en cuestin. Si no indicamos un archivo, accederemos al archivo por defecto del directorio al que estemos referenciando. (En el caso del servicio http este archivo por defecto suele ser index.html o default.html).

Tipos de servicio:

Localizando un documento hypertexto (http):

Sintaxis: http://maquina.dominio:puerto/camino/archivo Ejemplo: http://www.google.es:1020/archivo.htm

En este ejemplo estamos indicado el servicio al que estamos accediendo (http), la mquina y el dominio (www.google.es), el puerto (1020) y finalmente el fichero (archivo.htm), en este caso, del directorio raz del servidor.

Localizacin de un fichero por el servicio FTP (ftp:File Transfer Protocol)

Sintaxis: ftp://maquina.dominio:puerto/camino/archivo Ejemplo: ftp://ftp.rediris.es:21/debian/

En este caso, estamos accediendo al servicio ftp (protocolo de transferencia de archivos), al servidor ftp.rediris.es. Ahora no estamos indicando ningn archivo, con lo que se referenciar un ndice con los contenidos del directorio: debian.

Localizacin de un archivo cualquiera (file):

Sintaxis: file://maquina.dominio:puerto/camino/archivo Ejemplo: file://c:windows

En este caso estamos accediendo a la carpeta Windows de la unidad C: de nuestro ordenador local.

Accediendo a un grupo de noticias (news):

Sintaxis: news:GRUPO Ejemplo: news:jet.es

En este ejemplo estamos accediendo al grupo de noticias del servidor de news jet.es.

Accediendo a una direccin e-mail (mailto):

UD 2:HTML


Sintaxis: mailto:Destinatario_1,Destinatario_2,...,Destinatario_n Exemplo: mailto:pruebamixmial.com

Enviar un mail a la direccin de correo electrnico indicada.

Cmo crear los hiperenlaces

Los hiperenlaces son enlaces de hipertexto que nos van a permitir acceder de manera directa a otros documentos HTML independientemente de su localizacin, o la otras zonas dentro de nuestro propio documento. Esto lo conseguiremos mediante la etiqueta (del ingls anchor=ancla).

Formato:

Con este tipo de hiperenlaces vamos a poder acceder tanto a otras pginas que estn situadas dentro de nuestro propio sistema como a las pginas ubicadas en puntos muy distantes del globo. El formato de este tipo de hiperenlaces es:

Texto del hiperenlace

Con el atributo HREF vamos a especificar la URL del documento al que se pretende acceder. El texto contenido entre las etiquetas de comienzo y fin nos va a servir para definir el hiperenlace, por lo que debera ser clarificador del contenido del documento con el que vamos a enlazar. Esta definicin aparecer resaltada normalmente en azul y subrayada. En la mayora de los navegadores esta definicin del hiperenlace es sensible, por lo que cuando el cursor pasa por encima del incluso este cambia de aspecto indicndolo.

Ejemplo: Enlace la Google

Cualquier elemento que est dentro de la etiqueta se convertir en un enlace, incluidas imgenes.

Cuando se quiere saltar a otra pgina distinta de la actual debemos hacer referencia al documento html correspondiente, de la forma:

Texto Pero si la pgina se encuentra en un directorio distinto del directorio del documento actual habr que especificar la ruta a ella bien de manera relativa o bien absoluta.

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.

UD 2:HTML


Ruta relativa: Texto

Ruta absoluta: Texto

Enlaces a distintas posiciones de una pgina.

Este tipo de hiperenlaces nos va a permitir marcar distintas zonas del documento activo con el objeto de tener un acceso directo a las mismas. Una buena utilidad de este tipo de enlaces radica en la creacin de ndices para documentos largos, de forma que si picamos en el hiperenlace correspondiente al ttulo de un captulo determinado, el navegador saltar automticamente hasta lo comienzo de dicho captulo.

Para eso debemos de hacer uso de la etiqueta A con el atributo NAME de la forma:

:

La cul nos va a servir de marca para situarnos desde el enlace. Se pueden poner tantas marcas como se deseen, cada una con un nombre diferente.

Para saltar la dicha localizacin debemos poner:

- En el caso de la misma pgina: Texto

- En el caso de otra pgina: Texto

Enlaces a diferentes ventanas.

Podemos provocar que al pulsar el enlace, se abra una ventana diferente a la actual. Para eso se utiliza el atributo target.

Enlace Siendo:

_bank: el enlace se abre en una nueva ventana. _self: el enlace se abre en la misma ventana. _parent: el enlace se abre en la ventana padre de la actual. _top: el enlace se abre en la ventana principal.

Ejemplo: Texto del enlace Las dos ltimas ya se explicarn con detalle cuando veamos el uso de las frames. Otro atributo interesante para la etiqueta es title. Con este atributo podremos escribir un ttulo o una descripcin breve del enlace. Los navegadores mostrarn esta

UD 2:HTML


informacin al usuario normalmente mediante una caja de texto o bocadillo que aparecer cuando se site el ratn encima de la zona activa del link.

Nota: El valor de los atributos hay que escribirlos exactamente como corresponda segn el sistema operativo usado, es decir, si un nombre de fichero est en minsculas debemos referenciarlo de esa forma. Esto es aplicable a todos los parmetros: servicio (http://), servidor (www.miservidor.es) y el fichero (mifichero.html). Estas precauciones son ineludibles en el caso de servidores montados en mquinas con sistema operativo UNIX. En el caso de que el servidor resida en una mquina con sistema operativo Windows, es indiferente. Si no se sabe el sistema que tiene la mquina, es mejor atenerse a la forma UNIX.

IMGENES Podremos dar un aspecto mucho ms vistoso a nuestros documentos HTML con la inclusin de imgenes. Podemos insertar una imagen en medio de una frase, como si fuese una palabra ms de ella y ser mostrada por el navegador a continuacin del texto, o podemos insertarla en cualquier posicin de la pgina dndole el tamao deseado.

Existen multitud de formatos para almacenar una imagen en un archivo: bmp, gif, jpeg, png, tiff, etc. cada uno de los cuales tiene unas caractersticas. Los formatos de imagen que todos los navegadores reconocen son: gif y jpg. Las ltimas versiones de los navegadores aceptan tambin el formato png. Si queremos insertar una imagen en otro formato, el visor debera disponer del programa externo que permita su visualizacin. De todas formas, una buena solucin es utilizar algn programa de tratamiento de imgenes que nos convierta la imagen a uno de los formatos mencionados anteriormente.

El formato gif es ms recomendado para la inclusin de iconos, grficos,.. y el formato jpg para el caso de insertar fotografas en nuestras pginas.

La etiqueta es:

Atributos:

SRC= Especifica la direccin donde est ubicada la imagen, es decir, tendr la URL.

ALT= Indica un texto alternativo que se mostrar en caso que la imagen no sea cargada en la pgina, bien porque no se encontr o por especificacin en el navegador.

TITLE=Con este atributo podremos escribir un ttulo o una descripcin breve de la imagen. Los navegadores mostrarn esta informacin al usuario normalmente mediante una caja de texto o bocadillo que aparecer cuando se site el ratn encima de ella.

ALIGN= Alinea el texto que sigue a la imagen. Si tomamos el valor TOP, la primera lnea de texto se visualizar en la parte superior del dibujo, en caso de elegir MIDDLE lo har en la mitad del dibujo, se elegimos BOTTOM lo situar en la parte inferior. (Deprecated)

UD 2:HTML


En caso de que el texto que acompaa a la imagen tenga ms de una lnea, tan slo la primera ser la que se alinear segn alguna de las anteriores alineaciones, el resto de lneas se incluirn debajo de la imagen quedando un efecto bastante feo.

Otros valores de posicionamiento seran LEFT y RIGHT que dejaran la imagen a la izquierda y derecha del texto respectivamente, haciendo que la imagen se inserte dentro del prrafo que la rodea.

Estas dos alineaciones no se podrn usar en combinacin con las anteriores.

BORDER= Permite la posibilidad de aadir un borde a la imagen, especificando su grosor. Por defecto no se visualizar.

HEIGHT= Determina el alto de la imagen a mostrar, ya sea una dimensin total o parcial que dependa del tamao de ventana. Puede ser indicada en puntos o tanto por cien.

WIDTH= De definicin similar a la anterior, pero especificando el ancho de la imagen. Puede ser indicado en puntos o tanto por cien.

HSPACE= Indica la separacin horizontal que debe haber entre una imagen y otro elemento que est junto a ella.

VSPACE= Variacin de la anterior para la separacin vertical

No ser necesario que la imagen que queremos insertar en nuestro documento est en el ordenador local, aunque s es recomendable ya que el acceso a las mismas puede ser ms lento. Por tanto, es una buena prctica copiar todas las imgenes, que vayamos a incluir en nuestro documento HTML, al ordenador local.

Anotaciones importantes: las imgenes suelen ser los elementos que hacen que el tiempo de carga de una pgina sea alto. Nuestro objetivo es el contrario. Eso no significa renunciar al uso de imgenes, pero siguiendo las siguientes normas:

- Si estamos utilizando imgenes en miniatura, debemos de tener dos versiones de la misma. Una en pequeo y otra, el original, en grande, de tal forma que al pulsar sobre la pequea, tendremos un enlace a la versin mayor. - Debemos de utilizar el formato correcto de imagen. Como norma general, si la imagen es una foto, con gran variedad de colores, utilizaremos el formato jpeg, con una compresin lo mayor posible sin prdida excesiva de calidad. Si nuestro grfico tiene una cantidad de colores reducidos, y el dibujo es lineal, debemos de utilizar el formato GIF (pode almacenar hasta 256 colores). Dicho formato tambin puede comprimirse, determinando los colores que queramos que tenga la imagen.

UD 2:HTML


TABLAS La etiqueta que nos va a permitir la definicin de tablas es . El formato general de la etiqueta sin ningn argumento, es el siguiente:

Contenido de la cabecera | Contenido de la celda

Esta es la forma ms sencilla de definir una tabla.

: Indican el comienzo y fin de la definicin de la tabla. : Es de la definicin de cada una de las filas.

Por cada FILA tendremos varias columnas indicadas por:

: Cabecera de la columna. Aparece en negrilla. : Columna

Ejemplo: Nombre Edad Angel F. 30 Juan Luis 35

NombreEdad Angel F.30 Juan Luis35

Tambin podemos aadir justo despus de la definicin de tabla (etiqueta table) el ttulo de la tabla de la forma:

Ttulo de la tabla cuyo texto aparecer fuera del cuerpo de la tabla.

La etiqueta TABLE puede tener los siguientes atributos:

BORDER=Valor. Define el grosor de la lnea que sirve de separacin de los distintos campos. Por defecto su valor es cero y por tanto no habr lnea a mostrar aunque seguirn los espacios entre las celdas.

ALIGN=center | left | right. Alineacin de la tabla. (Deprecated) CELLSPACING=Valor. Indica el espacio a dejar entre las celdas que conforman la

tabla. Su valor por defecto es dos. En caso de que el valor sea cero, no habr separacin.

UD 2:HTML


CELLPADDING=Valor. Definen la separacin entre el borde de la celda y el contenido, siendo por defecto 1 y si el valor es cero no habr la correspondiente separacin.

WIDTH=Valor | Valor%. Representa el ancho de la tabla, ya sea cmo valor relativo (%) al tamao de la ventana del visualizador o al ancho total en puntos.

HEIGHT=Valor | Valor%. Funciona de forma semejante a WIDTH, pero se diferencia a la anterior en que sta se refiere a la altura de la ventana y no a su ancho. No reconocido en el estndar.

BGCOLOR=Color|#rrggbb? Color de fondo de la tabla. (Deprecated) Ejemplo: modificando el anterior, para que haya una separacin de 10px entre celdas y de 20px dentro de la celda.

NombreEdad

Angel Fernndez30

Juan Luis Hernndez35

Las filas, es decir, las etiquetas pueden tener los siguientes atributos.

align= Presenta la alineacin de los elementos que conforman las celdas. Los posibles valores son: left, right y center. Por defecto ser left.

valign= De forma similar a la alineacin anterior, sta especifica la alineacin vertical. Sus valores son: top, middle y bottom.

bgcolor= Indica el color que tendrn las celdas de la misma lnea. (Deprecated)

Las columnas, es decir, las etiquetas y tendrn los siguientes atributos: align: Alineacin horizontal del dato en la celda, pero de forma individual a cada celda.

valign: Alineacin vertical del dato que forma parte de la celda. Definicin local a cada celda.

width: Ancho de la celda. (Deprecated)

height: Alto de la celda. (Deprecated)

bgcolor: Color del fondo de la celda. (Deprecated)

Angel (20px)

30 10px

UD 2:HTML


rowspan: Indica el nmero de celdas que ocupar la celda en esa fila, es decir, una celda se podr expandir ocupando tantas celdas como se especifique.

colspan: Utilidad semejante a la anterior, pero basada en el nmero de columnas. nowarp: No permite que se divida el texto que forma parte de la celda, obligando as a

que la celda ser tan grande como sea el texto.

TABLE TR TD TH CAPTION

BORDER X - - - -

ROWSPAN - - X X -

COLSPAN - - X X -

ALIGN X X X X X

VALIGN - X X - -

WIDTH X - X - -

HEIGTH X - X - -

CELLPADDING X - - - -

CELLSPACING X - - - -

BGCOLOR X X X X

Resumen de tablas

Ejemplo: Crea la siguiente tabla: Clase Alumnos

AULA 1 Juan Fernndez

Luis Fregues

AULA 2 Luisa Ternaz

Solucin : ClaseAlumnos Aula 1 Juan Fernndez

Luis Fregues

UD 2:HTML


Aula 2 Luisa Ternaz

NOTA: Otro atributo de la etiqueta que est desaprobado es BORDERCOLOR =nombre | #cdigo que nos permitir cambiar el color del borde de toda la tabla.

El navegador IExplorer permite modificar el color de una fila o celda individual si utilizamos bordercolor dentro de las etiquetas o / respectivamente, sin embargo otros navegadores, como por ejemplo Firefox slo lo interpretan si est en .

Adems, existen dos atributos de color de borde que slo se ven en Iexplorer: - bordercolordark, que establece los colores exteriores del borde derecho y del borde inferior y los interiores del borde izquierdo y del borde superior. - bordercolorlight, que los establece al contrario.

MAPAS Es bastante habitual encontrarnos alguna pgina en la que haba alguna imagen en la que se poda pulsar en diferentes partes para acceder a diferentes destinos. Estas son la llamadas imgenes mapa y podemos encontrar una en la mayora de pginas Web. En un principio, para realizar la imgenes mapa, era necesario usar determinados programas especiales que deban estar en el servidor Web. Sin embargo, con el estndar HTML 3.2, se incluyeron algunas etiquetas que nos permitirn realizar mapas con mayor facilidad.

Es posible que dentro de una sola imagen podamos acceder a varios enlaces. Se hace declarando zonas dentro de la imagen (rectngulos, crculos, etc..), siendo cada una de ellas un enlace distinto. Tradicionalmente, siempre existieron dos maneras de hacerlo:

Mapas gestionados por el cliente (el navegador). Mapas gestionados por el servidor.

Los segundos fueron los primeros en desarrollarse y estaban incluidos dentro del estndar HTML 2.0. Con todo, nunca hubo una manera comn de gestionar esos mapas. Debido a eso, Netscape elabor un sistema propio que fue incluido en el estndar 3.2: los mapas gestionados por el navegador.

Mapas gestionados por el cliente En este tipo de imgenes ser el navegador del cada usuario(cada cliente) el que se encargar de leer el cdigo cuando se pulsa sobre la imagen y averiguar la direccin de destino. No es necesario ningn programa especial en el servidor Web. Para utilizarlos necesitaremos dos cosas: declarar el mapa y asignarlo a una imagen.

UD 2:HTML


Vamos primero a declarar nuestro mapa: Para ello usaremos la etiqueta , entre las cuales definiremos las diferentes partes del mapa. El nico atributo de esta etiqueta es NAME que se usar para darle un nombre al mapa.

...

Dentro de la etiqueta MAP slo podremos definir el nombre del mapa, que es obligatorio. Ser entre las etiquetas de apertura y cierre del mapa donde se definirn las diferentes zonas activas mediante la etiqueta AREA que consta a su vez de los siguientes atributos:

SHAPE: Define la forma de la zona, que podr ser rectangular (rect), circular (circle) o poligonal (poly).

COORDS: Coordenadas (separadas por comas) que definen la zona. El nmero y significado de esas coordenadas depender de la forma.

HREF: URL a la que ir el usuario se pulsa sobre esa zona activa. NOHREF: Este atributo no toma valor alguno y se usa en lugar de HREF para indicar que

una determinada zona no debe conducir a ningn sitio al pulsar sobre ella ALT: Texto que se presentar en lugar de la imagen para acceder al enlace.

Como podemos ver, para declarar correctamente una zona necesitamos conocer cmo se definen exactamente las formas y coordenadas:

SHAPE y COORDS Forma Rectangular

SHAPE=RECT COORDS= "x1,y1,x2,y2" siendo (x1,y1) la esquina superior izquierda y (x2,y2) la inferior derecha.

Forma Circular SHAPE=CIRC COORDS=x,y,r siendo (x,y) el centro del crculo y r el radio.

Polgono irregular SHAPE=POLY COORDS=x1,y1,x2,y2,x3,y3,... definiendo cada pareja (x,y) una esquina del polgono. La ltima pareja de coordenadas se unir a la primera para cerrar el polgono.

UD 2:HTML


Toda la imagen DEFAULT No se indican.

Como usar un mapa

Ahora que definimos un mapa, slo queda asignarlo a una imagen. Esto se hace del siguiente modo:

HTML:

Siempre tenemos que aadir al inicio del nombre de nuestro mapa una almohadilla (#).

Un ejemplo: Supongamos una imagen de 300x100, vamos a crear un mapa que la divida en dos:

UD 2:HTML


FORMULARIOS. El formulario es el elemento de HTML que nos va a permitir interactuar con los visitantes de nuestras pginas web, de forma que podemos solicitarle informacin al usuario y procesarla. El contenido de la informacin introducida por medio del formulario ser enviado a la direccin URL indicada en el formulario, que ser donde se procesarn los datos. Antiguamente, dichos datos eran procesados con programas denominados CGI (Common Gateway Interface), pero consuman muchos recursos. Actualmente, utilizando tecnologa generacin de pginas dinmicas en el servidor, tipo ASP (Active Server Page), ASP.NET, JSP (Java Server Page) o PHP (Hypertext Preprocessor) , la gestin de los datos enviados por un formulario es mucho ms sencilla. Entre los elementos grficos que vamos a poder manejar en un formulario estn:

Cajas de texto: De una lnea De varias lneas

Botones de seleccin De radio De verificacin

Campos ocultos

Botones De envo de los datos del formulario De borrado de los datos del formulario Genrico

Campos de seleccin

Dentro del formulario puede ir cualquiera de los elementos HTML vistos hasta ahora como tablas, imgenes,...pero la informacin que es procesada slo ser la aadida a los elementos del formulario, como cajas de texto,...

Nota: recordar que para que cumpla el estndar XHTML las etiquetas deben estar en minsculas y cerradas. Aqu las ponemos en maysculas slo en la definicin.

La etiqueta que define a un formulario es El formato es:

..... Elementos del formulario .....

UD 2:HTML


Atributos: - action: indica la URL que va a procesar los datos del formulario. En la actualidad,

normalmente ser una pgina con extensin ASP, PHP, JSP o ASPX. - method: indica la forma cmo se manda la informacin almacenada en los campos del

formulario a la pgina indicada en action. Puede tener dos valores. post: la informacin es enviada en el cuerpo de la pgina, de forma oculta para

el usuario. No tiene limitacin en el tamao de los campos a enviar. get: la informacin se enva junto a la URL indicada en action , separando los

campos con su valor de la forma siguiente: URL?campo1=valor1&campo2=valor2......

Esta forma tiene varias desventajas como que el tamao mximo de la cadena que conforma el URL no debe de exceder de 1024 bytes y adems son visibles los valores de los datos introducidos. Esta es la opcin por defecto.

Elementos de un formulario.

Cajas de texto:

HTML:

XHTML:

Atributos: - type: en este caso lleva de valor text para indicar que es una caja de texto. - name: nombre de la caja de texto. Lo utilizaremos para JavaScript/php/ASPNET. - value: valor inicial al cargar el formulario o pulsar el botn de reset (lo veremos ms

adelante). - size: tamao en caracteres de la caja de texto. - maxlength: nmero mximo de caracteres a introducir en la caja de texto. - readonly: atributo nuevo en html4.0, hace que el campo sea de slo lectura, pero es

enviado junto al resto de datos. - disabled: deshabilita el campo, el foco no puede situarse en dicho elemento y no es

enviado con el resto de campos del formulario.

NOTA: en una aplicacin que trabaje contra una base de datos, el maxlength debera de corresponderse con el tamao del campo de la base de datos. NOTA: los atributos name, readonly y disabled se repiten, por lo que no sern explicados.

UD 2:HTML


Ejemplo: HTML:

XHTML:

Cajas de texto tipo password. Son cajas de texto cuyo contenido no es visible por el usuario a la hora de introducir el dato. Se utiliza, tpicamente, para introducir una contrasea.

HTML:

El resto de atributos son iguales a los anteriores. Ejemplo:

Cajas de texto en mltiples lneas.

HTML:

Contenido por defecto.

Atributos: - name: nombre de la caja - rows: n de filas de texto visible. - cols: n de columnas de texto visible.

Campos ocultos: Este tipo de campos no son visibles para el usuario. Su uso tiene sentido en el caso de enviar algn tipo de informacin que no deba ser visualizada o variada por el lector de nuestra pgina Web. Se emplean, por ejemplo, en el desarrollo de servicios de informacin interactivos, en los que es necesario conocer la secuencia de pasos que un usuario sigui hasta llegar una determinada situacin. Como el protocolo HTTP entre los clientes y servidores WWW no guarda ninguna informacin sobre el estado previo, la inclusin de variables ocultas dentro de un formulario es un posible sistema para conservarlo.

El formato es: HTML:

UD 2:HTML


Estos valores se mandaran en el formulario sin que el usuario se enterara, ya que para l no estn visibles, aunque podra enterarse visualizando el cdigo fuente de la pgina.

Botones de seleccin: verificacin.

HTML:

Atributos: - value: valor que tendr el botn cuando se enve el formulario en caso de que est

seleccionado. Si no est seleccionado, no se enviar dato alguno. - checked: inicialmente, al cargar el formulario, seleccionado.

Ejemplo: HTML:

XHTML:

Botones de seleccin: radio. Son botones en los que se realiza una seleccin entre varias alternativas excluyentes, pudindose seleccionar nicamente una de las alternativas. Debemos incluir una etiqueta radio por cada una de las posibles alternativas.

HTML:

Atributos: - checked: como con el caso de las casillas de verificacin, indica que opcin est

seleccionada por defecto, pero tiene como diferencia en que slo una de ellas puede estarlo a la vez.

Para formar un grupo de opciones, se debe dar a todas el mismo nombre, de tal forma que el elemento seleccionado ser lo que dar el valor al nombre.

Ejemplo: (XHTML) Mayor que 18

Menor o igual que 18

En el ejemplo, la variable rbtnEdad tendra el valor mayor.

UD 2:HTML


Botones de envo de datos. Son botones que al ser pulsados provocan la ejecucin de laaction del formulario.

HTML: Atributos:

- value: es el texto que se encuentra dentro del botn.

Ejemplo xhtml:

Botn grfico de envo de datos Con este argumento especificamos un botn de tipo imagen en el que, al igual que con el botn anterior, si pulsamos en la imagen los datos sern enviados al programa o direccin de correo encargada de procesar la informacin recogida por el formulario.

HTML:

Atributos: - src: url de la imagen a cargar. - alt: texto que aparecera en caso de que no se cargara la imagen.

Ejemplo xhtml:

Botn de borrado de datos Con este botn inicializamos todos los campos del formulario a sus valores iniciales.

HTML:

Atributos: - value: texto que se encuentra dentro del botn

Botones generales. Es posible indicar un tipo button de tal forma que la accin del botn ser necesario programarla haciendo uso de javascript. El valor del botn ser lo que se procese en el formulario en caso de hacer que dicho botn realice un submit.

HTML:

UD 2:HTML


Ejemplo: INPUT type=button value="Salir" onclick ="window.close();">

Botones. Ahora existe la posibilidad (HTML 4.0) de utilizar una etiqueta propia para los botones, de tal forma que dentro de dicha etiqueta podremos encerrar imgenes, tablas y otros elementos HTML. Tendremos por tanto una forma equivalente de hacer lo indicado en los tipos anteriores y ms cosas. En la actualidad es mejor utilizar la forma anterior porque nos garantiza una mayor compatibilidad con los navegadores, siempre que podamos. El formato es:

HTML:

Entre y podemos poner imgenes, tablas,....adems, al ser pulsado se mandar el valor del botn con el resto de campos del formulario. Por tanto, si disponemos de varios botones podremos saber por cual de ellos enviamos los datos del formulario.

Entrada de datos a travs de campos de seleccin (listas desplegables). Con los campos de seleccin podremos desplegar una lista de opciones, entre las que podremos seleccionar una. Para eso usaremos la etiqueta

HTML:

Primera Opcin

Segunda Opcin

..........

Ensima Opcin

Atributos: - multiple: si se pone indica que podremos seleccionar varios elementos a la vez. - size: indica el nmero de elementos de seleccin que sern visibles. - En OPTION:

selected: el elemento est seleccionado por defecto value: valor que tendr la variable que identifica al SELECT al mandar el

formulario. Si no se pone nada, se mandar el texto que acompaa al option.

Ejemplo xhtml:

audi

ford

UD 2:HTML


Por otra parte, las listas desplegables permiten agrupar sus opciones de forma que el usuario pueda encontrar fcilmente las opciones cuando la lista es muy larga. La etiqueta permite agrupar opciones relacionadas dentro de una lista desplegable.

HTML:

...

Atributos: - label: Texto que se muestra como ttulo de la agrupacin de opciones.

Ejemplo:

Programa seleccionado

Windows Mac Linux Otro Internet Explorer Firefox Safari Opera Otro

Agrupacin de elementos Hasta ahora, no disponamos ni por asomo de agrupar visualmente varios controles, si no hacamos uso de elementos que no son del formulario, como tablas o imgenes. Ahora, si encerramos una parte de un formulario dentro de la etiqueta FIELDSET se mostrar un rectngulo alrededor de los mismos. Adems, le podemos indicar un ttulo por medio de la etiqueta LEGEND.

Ejemplo: Notas

- LEGEND admite el atributo align (deprecated), para determinar dnde ir el ttulo de la leyenda. Valores posibles son top, bottom, left y right.

NOTA: normalmente, los formularios se usarn conjuntamente con las tablas para especificar un posicionamiento correcto de los elementos que conforman el formulario.

UD 2:HTML


NOTA: podemos establecer la orden de tabulacin de los elementos del formulario con la propiedad tabindex=n donde n es un nmero que indica la orden de tabulacin (el menor va antes que el mayor).

Labels Relacionado con los formularios tenemos la etiqueta labels la cual nos permite relacionar el texto que va junto a un elemento de un formulario de tipo (normalmente cajas de texto).

No aporta nada nuevo a la visualizacin, aumenta la usabilidad de los formularios, ya que si pulsamos sobre la etiqueta con el ratn, es como si pulssemos el control asociado. El atributo for debe corresponderse con el id del campo asociado.

Ejemplo:

Hombre

Mujer

Adjuntar ficheros

Los formularios tambin permiten adjuntar archivos para subirlos al servidor. Aunque desde el punto de vista de HTML y del navegador no existe ninguna limitacin sobre el nmero, tipo o tamao total de los archivos que se pueden adjuntar, todos los servidores aaden restricciones por motivos de seguridad.

El valor del atributo type para este control de formulario es file. El navegador se encarga de mostrar un cuadro de texto donde aparece el nombre del archivo seleccionado y un botn que permite navegar por los directorios y archivos del ordenador del usuario.

Si se incluye un control para adjuntar archivos, es obligatorio aadir el atributo enctype en la etiqueta del formulario. El valor del atributo enctype debe ser multipart/form-data, por lo que la etiqueta de los formularios que permiten adjuntar archivos siempre es:

...

UD 2:HTML


FRAMES O MARCOS

Las frames son una utilidad del HTML que nos permite dividir la ventana del navegador en diferentes subventanas, que podrn ser manipuladas de manera independiente. Esto nos permitir mostrar una pgina web diferente en cada una de la subventanas o frames.

Estructura de un documento con frames:

Un documento con frames se estructura de manera diferente a un documento HTML normal. As, en este tipo de documentos no aparecer la etiqueta BODY. En su lugar se incluir la etiqueta dentro de la cual se definirn las distintas frames que se incluyan en el documento. A este documento se le denomina documento de definicin de marcos:

Cabecera

Definicin de la distintas frames

Instrucciones HTML

Las frames fueron introducidas en el estndar 4.0 por lo que se ponen las etiquetas y entre ellas el cdigo HTML que ser ejecutado en caso de que el navegador no entienda dicha etiqueta.

Dentro de la seccin especificaremos las diferentes partes en las que dividimos la pantalla:

......

UD 2:HTML


La forma de indicar el nmero de columna o filas es igual: - Las filas o columnas sern separadas por comas. - Por cada fila o columna, podremos asignar:

- un nmero: indica el nmero de pixeles. - un porcentaje: indica el % que va a ocupar del que quede libre. - *: indica lo que queda de espacio

Dentro de un elemento se pueden anidar otros elementos .

NOTA: el tipo de documento que debemos de indicar para que cumpla el estndar 4.01 es:

Como vemos existe el problema de indicarle al link que cargue la pgina en la parte de la derecha. Para eso debemos de hacer uso de la propiedad target de la etiqueta .

Su sintaxis es:

-----

donde target=nombre hace referencia a la frame donde queremos que carge la pgina indicada por el atributo href.

Existen unos valores predeterminados que podemos utilizar como valores para target:

TARGET="_blank" Fuerza que el documento referenciado por el enlace sea mostrado en una nueva ventana del navegador.

TARGET="_self" Usando este valor el documento enlazado ser mostrado en el mismo frame o ventana donde est el enlace. Este valor es especialmente til cuando se us la etiqueta BASE para especificar un frame destino por defecto distinto del actual.

TARGET="_parent" Este valor provoca que el documento sea mostrado en el FRAMESET padre del frame actual.

TARGET="_top" Fuerza que el enlace sea mostrado usando todo el espacio de la ventana del navegador destruyendo toda estructura de frames. Este valor debe ser usado siempre que creemos un enlace a una pgina externa a nuestro sitio web.

UD 2:HTML


Otros atributos que posee la etiqueta FRAME son:

HTML:

UD 2:HTML


IFRAME

Outra posibilidad de incorporar marcos a una pgina es haciendo uso de la etiqueta IFRAME. Esta etiqueta hace que una parte de la pantalla sea reservada para cargar una pgina diferente.Es equivalente a FRAME vista anteriormente, pero sin necesidad de crear ninguna pgina especial en la que definan las frames como pas en el caso anterior.

Aunque su uso no es muy comn, la etiqueta puede ser muy til en determinadas ocasiones, ya que permite insertar un documento HTML dentro de otro documento HTML. Un iframe puede considerarse como un agujero que se abre en una pgina web y a travs del cual se muestra otra pgina web. En ocasiones se utiliza para mostrar contenidos externos al sitio web como si fueran parte del mismo sitio. Otra veces se emplea para incluir una aplicacin comn a varios sitios web de una misma empresa.

Formato:

Elementos HTML en caso de non soportar IFRAME

Los atributos son los mismos que los de la etiqueta FRAME.

Ejemplo:

Esta pgina contiene una IFRAME

Tu navegador no soporta IFRAME

Una alternativa al uso de IFRAME es la etiqueta OBJECT, introducida en el HTML 4.0.

Las versiones anteriores de HTML permitan a los autores incluir imgenes (por medio de IMG) y aplicaciones (por medio de HYPERLINK APPLET). Estos elementos tienen varias limitaciones:

- No sirven para resolver el problema ms general de cmo incluir tipos de medios nuevos y futuros.

- El elemento APPLET slo funciona con aplicaciones basadas en Java. Este elemento est desaprobado en favor de OBJECT.

- Exponen problemas de accesibilidad.

Para solucionar estos problemas, HTML 4 introduce el elemento, que ofrece una solucin universal para la inclusin de objetos genricos. El elemento permite a los autores HTML especificar todo lo que necesita un agente de usuario para la representacin de un objeto: cdigo fuente, valores iniciales y datos en tempo de ejecucin. En esta especificacin, el trmino "objeto" se utiliza para describir las cosas que la gente quiere colocar en los documentos HTML; otros trminos usados habitualmente son: applets, plug-ins, controladores de medios, etc.

UD 2:HTML


Ejemplo: Texto alternativo

OBJETOS

Adems de las imgenes, HTML permite incluir en las pginas web otros elementos mucho ms complejos, como applets de Java y vdeos en formato QuickTime o Flash. La mayora de este tipo de contenidos no los interpreta el navegador directamente, sino que hace uso de pequeos programas llamados plugins y que se encargan de tratar con este tipo de elementos complejos. La etiqueta es la que permite "embeber" o incluir en las pginas HTML cualquier tipo de contenido complejo:

Atributos:

- data = "url" - Indica la URL de los datos que utiliza el objeto. - classid, codebase, codetype - Informacin especfica que depende del tipo de objeto. - type - Indica el tipo de contenido de los datos. - height = "unidad_de_medida" - Indica la altura con la que se debe mostrar el objeto. - width = "unidad_de_medida" - Indica la anchura con la que se debe mostrar el objeto.

El atributo data se emplea para indicar la URL del recurso que se va a incluir.

El atributo type Se utiliza para notificar al navegador sobre el tipo de contenido que se enlaza. Los posibles valores de type estn estandarizados y los ms utilizados son los siguientes: "text/html" (pginas HTML), "image/png" (imgenes con formato PNG), "image/gif" (imgenes con formato GIF), "text/css" (hojas de estilo CSS), "application/rss+xml" (archivos RSS).

El propio estndar de HTML incluye ejemplos de uso de esta etiqueta. Incluir un vdeo en formato MPEG:

Tambin se pueden incluir varias versiones alternativas de un mismo contenido. As, si el navegador no es capaz de interpretar el formato por defecto, puede optar por cualquiera de los otros formatos alternativos:

La Tierra vista desde el espacio.

UD 2:HTML


A los objetos tambin se les puede pasar informacin adicional en forma de parmetros mediante la etiqueta vaca :

Atributos:

- name = "texto" - Indica el nombre del parmetro - value = "texto" - Indica el valor del parmetro

Descripcin: Se emplea para indicar el valor de los parmetros del objeto

Las etiquetas siempre se incluyen en el interior de las etiquetas :

Uno de los principales inconvenientes de es la forma de incluir vdeos en formato Flash en las pginas HTML. Si se utiliza el siguiente cdigo:

El elemento anterior es correcto desde el punto de vista tcnico, pero provoca que algunos navegadores como Internet Explorer no visualicen el vdeo hasta que se ha descargado completamente. Si se trata de un vdeo largo, esta solucin no es vlida para el usuario. Por este motivo, se utiliza una solucin alternativa para incluir vdeos Flash en las pginas HTML: el uso de la etiqueta . Aunque esta solucin funciona correctamente, no se trata de una solucin vlida desde el punto de vista del estndar de XHTML, por lo que las pginas que incluyan esta solucin no pasarn correctamente el proceso de validacin.

Atributos - src = "url" - Indica la URL del archivo u objeto que se incluye en la pgina - type = "tipo_de_contenido" - Indica el tipo de contenido del objeto (flash, quicktime, java, etc.) - height = "unidad_de_medida" - Indica la altura con la que se debe mostrar el objeto - width = "unidad_de_medida" - Indica la anchura con la que se debe mostrar el objeto

Descripcin Se emplea para embeber (incluir) objetos en los documentos

Este es el motivo por el que los sitios web ms populares de vdeos en formato Flash proporcionan un cdigo similar al siguiente para incluir sus vdeos en las pginas HTML:

UD 2:HTML


Una vez ms, se debe tener en cuenta que la solucin anterior de utilizar la etiqueta es correcta desde el punto de vista del usuario (no tiene que esperar a que el vdeo se descargue completamente para poder verlo) pero no es una solucin tcnicamente vlida, ya que la etiqueta no es parte del estndar XHTML.

UD 2: HTML


ESTRUCTURA DETALLADA DE UN DOCUMENTO HTML

Vamos a realizar un parntesis en el uso de las etiquetas para el formateo del texto y explicaremos algunas secciones en las que se usan etiquetas para otro objetivo diferente al del formateo del texto

Como ya se coment al principio de este texto, le estructura bsica de un documento HTML es:

Ttulo de la pgina web Elementos opcionales de la cabecera

Contenido del cuerpo

Veremos a continuacin con ms detalle el comienzo de las pginas web, el contenido de la cabecera y algunos atributos adicionales del cuerpo de los documentos HTML.

El comienzo de la pgina web

Ser en esta posicin donde definimos el tipo de documento, en el que debemos especificar a qu estndar del HTML responde nuestra pgina entre una de las siguientes opciones:

Cumple el estndar HTML 2.0

Cumple el estndar HTML 3.2

Cumple el estndar HTML 4.0, y adems de incluir los elementos y atributos del HTML 4.0 aade elementos de presentacin y elementos desaprobados por el Consorcio para este estndar. Con l damos apoyo a navegadores que soportan mal las Hojas de Estilos en Cascadas (CSS) y disponemos de ms flexibilidad a la hora de escribir el cdigo de nuestra pgina, a costa de no entrar de lleno en el estndar y de perder un poco de accesibilidad.

Cumple el estndar HTML 4.0 y no contiene adems elementos desaconsejables Prima la estructura del mismo, incluso sobre su presentacin, es decir, que el documento debe estar conformado de acuerdo con las reglas del estndar HTML 4.0 de una forma estricta, sin desviarse de l en el ms mnimo. Por eso, no se permite en el documento la presencia de elementos o atributos desaprobados por el estndar HTML 4.0 (etiquetas IMG

UD 2: HTML


sin el atributo ALT, definiciones de mrgenes del BODY mediante atributos TOPMARGIN, etc.), y para lograr esto hace falta la declaracin de estilos mediante Hojas de Estilos en Cascada (CSS) y una perfecta definicin de todos los atributos establecidos cmo necesarios para cada etiqueta. Como ventaja presenta el que con un documento de esta forma tenemos garantizada la accesibilidad y compatibilidad de nuestra pgina, y como defectos lo que navegadores antiguos no lo soportan y que la construccin del documento no es flexible en absoluto (no se admiten errores en el cdigo).

.Es una definicin de marcos que cumple el estndar HTML 4.0. Variacin del HTML 4.0 Transitional para aquellos documentos que empleen frames. En estos documentos el elemento FRAMESET sustituye al BODY.

Cumple el estndar HTML 4.01 pero sin incluir los elementos deprecated y sin framset.

Cumple el estndar HTML4.01 con los elementos deprecated y sin framset.

Igual que HTML 4.01 Transational pero permite el uso de frameset.

: Cumple el estndar HTML5. Como no est basado en el SGML no necesita DTD, sin embargo, requiere de esta declaracin para que los navegadores se comporten como deben.

La URL incluida en cada declaracin permitir a los navegadores descargar el DTD y cualquier juego de entidades que se necesitase para interpretar el documento.

El HTML 4.0 considera desaconsejables aquellos elementos que, aun siendo soportados, fueron sustituidos por otros ms potentes y, por eso, es posible que sean eliminados del estndar HTML en el futuro.

Cada estndar incorpora mejoras y uso de nuevas etiquetas.

HTML 2.0 Mediados del 94 HTML 3.2 Principios del 96 HTML 4.0 A finales del 97 HTML 4.01 A finales del 99 HTML 5 En desarrollo

.

Actualmente se est utilizando un nuevo lenguaje basado en XML (extensible markup language) de nombre XHTML en su versin 1.0, que bsicamente es la versin de HTML 4.01 reescrito en XML. Sin entrar en especificar en las diferencias entre ellos (HTML y XHTML), el uso de dicho lenguaje va a permitir que las pginas sean visualizables en navegadores compatibles con HTML y XML, adems de que al estar basado en HTML, su curva de aprendizaje es plana.

La versin 1.0 del lenguaje XML es una recomendacin del W3C desde Febrero de

UD 2: HTML


1998, pero se trabaj en ella desde un par de aos antes. Est basado en el anterior estndar SGML (Standard Generalized Markup Language, ISO 8879), que data de 1986, pero que empez a gestarse desde principios de los aos 70, y a su vez basado en el GML creado por IBM en 1969. Esto significa que aunque XML pueda parecer moderno, sus conceptos estn ms que asentados y aceptados de forma amplia. Est adems asociado a la recomendacin del W3C DOM (Document Object Model), aprobado tambin en 1998. ste no es ms que un modelo de objetos (en forma de API) que permite acceder a las diferentes partes que pueden componer un documento XML o HTML.

SGML proporciona un modo consistente y preciso de aplicar etiquetas para describir las partes que componen un documento, permitiendo adems el intercambio de documentos entre diferentes plataformas. Con todo, el problema que se atribuye a SGML es su excesiva dificultad, baste con pensar que la recomendacin ocupa unas 400 pginas. As que, manteniendo su misma filosofa, de l se deriv XML como subconjunto simplificado, eliminando las partes ms complicadas y menos tiles. Como su padre, y este es un aspecto importante sobre lo que se incidir despus, XML es una metalenguaje: es un lenguaje para definir lenguajes. Los elementos que lo componen pueden dar informacin sobre lo que contienen, no necesariamente sobre su estructura fsica o presentacin, como ocurre en HTML. Usando SGML, por otro lado, se defini precisamente el HTML, el lenguaje que nos es tan conocido. Entonces, cul es la diferencia entre ambos?

En una primera aproximacin se puede decir que mediante XML tambin podramos definir el HTML, con lo que podramos considerar los siguientes conjuntos:

XHTML es idntico a HTML 4.01, es como el HTML definido como una aplicacin XML. Es una recomendacin de W3C desde 26 de Enero del 2000.

Para que cumpla el estndar XHTML debe cumplir las siguientes reglas:

- Los documentos deben ser gramaticalmente correctos. La gramaticalidad de los documentos es un nuevo concepto introducido por XML Esencialmente

UD 2: HTML


significa que todos los elementos o bien deben tener etiquetas de cierre o bien deben ser escritos de manera especial (tal y como se describe abajo), y que todos los elementos deben estar anidados. Aunque el solapamiento de elementos no est permitido en SGML, era tolerado en los navegadores existentes.

Correcto: elementos anidados. aqu ponemos un prrafo destacado.

Incorrecto: elementos solapados. aqu ponemos un prrafo destacado.

- Los nombres de elementos y atributos deben escribirse en minscula. Los documentos XHTML deben usar minsculas para los nombres de todos los elementos y atributos HTML. Esta diferencia es necesaria porque XML es sensible a minsculas y maysculas. Ej.: y son etiquetas diferentes.

- Los elementos no vacos requieren etiquetas de cierre. Con HTML 4.01, basado en SGML, en algunos elementos poda omitirse la etiqueta de cierre, de tal manera que la apertura de los elementos que les sucedan implicaba dicho cierre. Esta omisin no est permitida en XHTML, basado en XML. Correcto: elementos cerrados. aqu ponemos un prrafo y aqu otro

Incorrecto: elementos no cerrados. aqu ponemos un prrafo y aqu otro

- Los valores de los atributos deben ir entre comillas. Todos los valores de atributos deben ir entrecomillados, incluso aquellos que son numricos.

- Todos los atributos deben tener un valor asignado.

Correcto:

- Elementos vacos. Los elementos vacos deben o bien tener una etiqueta de cierre o bien terminar su etiqueta de apertura con /> . Por ejemplo, o

Correcto:

Incorrecto:

- Debe existir un nico elemento root () en el documento. ...

UD 2: HTML


...

- Si se hace uso del atributo lang en un elemento, debemos usar el atributo xml:lang como el siguiente ejemplo:

Ciao bella!

- Es necesario adems indicar el tipo de documento con la etiqueta DOCTYPE como hacamos en el estndar HTML 4.0. Las diferentes opciones son:

: Usado junto con CSS. No se usan etiquetas o atributos que modifiquen la presentacin de los contenidos de las pginas.

- Se debe incluir una instruccin de procesamiento XML para indicar la versin de XML y la codificacin de caracteres usada.

El organismo encargado de desarrollar estos estndares es el W3C (Consorcio World Wide Web).

Existe en la Web un lugar donde validar las pginas desarrolladas para verificar que cumplan con el estndar http://validator.w3.org/ (mirar apartado de validacin, ms adelante en esta unidad).

La cabecera

Suele ser el lugar ms indicado para colocar aquellos elementos de la pgina que no alteren el contenido de la misma, aunque s la forma de presentarlo y su comportamiento. Es por eso que es el lugar ms recomendable para colocar los scripts y las hojas de estilo. Adems del ttulo de la pgina, uno de los elementos que se pueden incluir aqu son la META. Entre otras cosas, sirven para indicar propiedades de la pgina como pueda ser el nombre de su autor.

Una informacin Meta se pone en una etiqueta solitaria llamada meta. Cada etiqueta tiene por lo general dos atributos. Un atributo se llama name= o http-equiv=, y el otro se llama siempre content=. Con ayuda de ambos atributos se crean tpicos "datos de configuracin" de tipo "cualidad=valor".

La diferencia entre name= y http-equiv= consiste en que name= puede denominar cualidades generales, no especificadas detalladamente, mientras que http-equiv= denomina cualidades que un servidor web puede registrar. Cualidades que son definidas con name=, se dirigen pues a programas de registro o lectura, o sea al

UD 2: HTML


navegador, pero tambin a los buscadores, que leen pginas web para alimentar sus bancos de datos. Cualidades que se definen con http-equiv= son al contrario para los servidores web. La idea que se esconde aqu, es que el servidor web, - cuando l recibe la orden del navegador web - de transmitir el archivo HTML, primero lea las etiquetas Meta y las informaciones definidas con http-equiv= y l monte la cabecera HTTP, que l enva al navegador que hace la peticin.

Por ejemplo:

META NAME="GENERATOR" CONTENT="Mozilla4.03\'e9(Win95;I) Netscape nos indicara la herramienta con que creamos la pgina (en este caso la versin 4.03 en espaol para Windows 95 del Composer de Netscape).

Estas son las propiedades ms comunes:

Propiedad Utilidad

AUTHOR Autor de la pgina.

GENERATOR Herramienta utilizada para hacer la pgina.

CLASSIFICATION Palabras que permiten clasificar la pgina dentro de un buscador jerrquico (como Yahoo).

KEYWORDS Palabras clave por las que encontrarn la pgina en los buscadores.

DESCRIPTION Descripcin del contenido de la pgina.

Hay tambin otro elemento interesante que podremos incluir en nuestras cabeceras. Cuando especificamos una URL relativa en un enlace, en principio es para acceder a una pgina ubicada en nuestro mismo servidor. Con todo, si especificamos:

Ahora todas nuestras URLs relativas se referirn al directorio music dentro del servidor http://www.hornet.org.

Si no incluimos esta etiqueta el navegador entender que dichos ficheros se encuentran en el mismo lugar donde reside nuestra pgina Web.

Otro elemento interesante es el indicador de refresco del documento

Esta etiqueta sirve para indicar un documento que deber sustituir al actual transcurrido un nmero determinado de segundos. Una posible utilidad de esta etiqueta podra ser para visualizar documentos de forma secuencial, de forma que se empieza por un documento y se pasa al siguiente transcurrido un perodo de tiempo sin necesidad de que la persona que lee el documento realice ninguna accin.

UD 2: HTML


Otra opcin es forzar la expiracin inmediata en la cach del navegador de la pgina recibida, lo que provoca que la pgina sea solicitada de nuevo al servidor cada vez, en lugar de cargar la copia que ya existe en la mquina cliente. Sera as:

UD 2: HTML


Cuerpo

Cuerpo del documento HTML:

......

En el cuerpo de un documento HTML es donde incluiremos las distintas instrucciones del lenguaje junto con el contenido en s de nuestra pgina Web: textos, imgenes, enlaces a otras pginas, etc..

Las etiquetas y son las que van a delimitar el cuerpo de nuestro documento.

La etiqueta presenta una serie de atributos que van a afectar a todo el documento en su conjunto. Estos atributos nos van a permitir definir los colores del texto, del fondo, y de los hiperenlaces del documento. Incluso nos permitirn insertar una imagen de fondo en nuestra pgina.

- background="URL". Nos va a permitir mostrar una imagen como fondo de nuestro documento HTML. La ruta a esta imagen vendr especificado por la URL que definamos. Si la imagen no rellena todo el fondo del documento, esta ser reproducida tantas veces como sea necesario hasta completar todo el fondo.DEPRECATED.

- bgcolor=#rrggbb | name. Nos va a permitir definir un color para el fondo de nuestro documento. Este atributo ser ignorado si previamente utilizamos el atributo background. DEPRECATED.

- text=#rrggbb | name. Nos permitirn definir un color para el texto de nuestro documento. Por defecto es negro. DEPRECATED.

- link=#rrggbb | name. Indica el color que tendrn los hiperenlaces que no fueron accedidos. Por defecto es azul. DEPRECATED.

- vlink=#rrggbb | name. Indica el color de los hiperenlaces que ya fueron accedidos. Por defecto es prpura. DEPRECATED.

- alink=#rrggbb | name. Cambia el color que toma un enlace mientras lo estamos pulsando (por defecto rojo). DEPRECATED.

UD 2: HTML


VALIDACIN

La validacin es el proceso que asegura que un documento escrito en un determinado lenguaje (por ejemplo XHTML) cumple con las normas y restricciones de ese lenguaje. Las normas y restricciones de los documentos escritos en XML (y en sus lenguajes derivados, como XHTML) se definen en el DTD o Document Type Definition ("Definicin del Tipo de Documento").

El concepto de validacin es objeto de controversia en el mbito del diseo web. Por una parte, la validacin no es obligatoria y las pginas web se pueden ver bien sin que sean vlidas. Por otra parte, una pgina vlida es ms correcta que otra pgina que no lo sea, ya que cumple con las normas y restricciones impuestas por XHTML.

Debido a esta controversia, algunos diseadores consideran que se da demasiada importancia a la validacin de las pginas y a la creacin de pginas vlidas. El resto de diseadores argumentan que si la especificacin de XHTML impone una serie de normas y restricciones, lo ms correcto es que las pginas web las cumplan, aunque no sea obligatorio.

En cualquier caso, el proceso de validacin consiste en probar pgina a pgina si su cdigo HTML pasa la prueba de validacin. Los validadores son las herramientas que se utilizan para validar cada pgina. Algunos editores de pginas web incluyen sus propios validadores y el organismo W3C ha creado una herramienta gratuita para la validacin de las pginas.

La validacin de las pginas web no requiere el uso de editores avanzados como Dreamweaver, ya que el organismo W3C ha creado una herramienta que se puede utilizar gratuitamente a travs de Internet: http://validator.w3.org/

Aunque la herramienta slo est disponible en ingls, su uso es muy intuitivo:

UD 2: HTML


Validate by URI, permite escribir la URL de la pgina que se quiere validar. Esta opcin es la ms sencilla para validar las pginas que ya estn publicadas en Internet.

Validate by File Upload, muestra un formulario mediante el que se puede subir el archivo HTML correspondiente a la pgina que se quiere validar. Esta opcin es la mejor para validar las pginas web que has desarrollado y que an no has publicado en Internet.

Validate by Direct Input, permite validar cdigo HTML de forma directa. Se trata de la opcin ms rpida para validar trozos o pginas HTML completas. Esta opcin es la mejor cuando ests desarrollando las pginas y quieres asegurarte que el cdigo sea vlido.

La siguiente imagen muestra el resultado de la validacin de la pgina principal de Google realizada mediante la opcin Validate by URI:

Si la pgina no pasa correctamente la prueba de validacin, se muestra el listado completo de fallos junto con la ayuda necesaria para resolver cada uno de los errores.

Como se observa en la imagen anterior, incluso una pgina tan sencilla como la portada de Google contiene decenas de errores que impiden considerarla vlida. Por lo tanto, la pgina principal de Google no es una pgina vlida, aunque eso no impide que se vea bien en todos los navegadores y que los usuarios la consideren correcta.

Otros validadores

Adems de los validadores disponibles en herramientas como Dreamweaver y de los validadores gratuitos disponibles en Internet, existe otro mtodo de validacin sencillo, gratuito y muy rpido. La nica limitacin de este validador es que necesariamente se debe utilizar el navegador Firefox. Si ya dispones del navegador Firefox, puedes instalar el validador mediante un complemento llamado HTML Validator (https://addons.mozilla.org/es-ES/firefox/addon/249). La instalacin se realiza como cualquier otro complemento, aunque en este caso la descarga dura un poco ms de lo normal porque ocupa ms de 2 MB. Tras su instalacin, la primera vez que se reinicia Firefox se muestra la siguiente ventana:

UD 2: HTML


En la ventana que se muestra se solicita al usuario que configure el tipo de validacin que se va a realizar. Las opciones para elegir son: HTML Tidy (que ofrece ayuda para resolver los errores y es mejor para HTML), SGML Parser (ofrece menos ayuda, pero es el mismo que el validador del W3C) o Serial (que realiza las dos validaciones de forma seguida). Si no sabes cual elegir, la opcin Serial es una buena alternativa, ya que primero realiza la validacin SGML Parser y a continuacin, si no se han producido errores, realiza la validacin HTML Tidy. Una vez configurado el validador, abre cualquier pgina web y vers cmo en la esquina inferior derecha de Firefox se muestra un pequeo icono que indica si la pgina es vlida o no. Cuando la pgina no es vlida, aparece un icono correspondiente a un error. Si colocas el puntero del ratn sobre el icono, se muestra la informacin especfica sobre los errores encontrados:

Informacin de error proporcionada por el validador Html Validator

Si pulsas dos veces sobre el icono, aparece una nueva ventana en la que se muestra la lista completa de errores, el lugar exacto en el que se han producido y las posibles soluciones para corregirlos. Para ver directamente el nmero de errores de la pgina, puedes pulsar el botn derecho del ratn sobre el icono del validador y seleccionar la opcin Show y despus Icon and Text. Despus de activar esta opcin, cada vez que cargues una pgina web se muestra toda la informacin de validacin. Aunque existen muchos otros validadores, el uso de Firefox junto con Html Validator es la nica alternativa que permite validar las pginas web sin esfuerzo. Abriendo cualquier pgina en el navegador Firefox, es posible visualizar al instante si la pgina es vlida o no y el nmero de errores que se han encontrado.

UD 2: HTML


Validacin con Dreamweaver

Si utilizas Dreamweaver para crear las pginas web, el validador se encuentra integrado en la propia herramienta. En primer lugar, accede a la configuracin de la herramienta de validacin desde la opcin Edicin > Preferencias > Validador:

Configuracin del validador de Dreamweaver

En esta ventana de configuracin se puede elegir el DTD que se utiliza en caso de que la pgina web no indique el DTD que utiliza. Las pginas declaran el DTD que utilizan mediante el doctype, tal y como se explic en captulos anteriores. Una vez seleccionado el DTD por defecto (en la imagen anterior, se ha elegido el DTD de XHTML 1.0 de transicin), se puede acceder a la herramienta de validacin de Dreamweaver desde el icono que se muestra en la siguiente imagen:

Si no se han producido errores al validar la pgina, Dreamweaver lo indica mediante un mensaje que declara a la pgina como vlida. Si se produce algn error, la pgina no es vlida y Dreamweaver muestra la lista de todos los errores encontrados junto con sus posibles soluciones:

UD 2: HTML


Despus de corregir todos los errores, se puede pasar otra vez la prueba de validacin para comprobar que la pgina cumple con todas las restricciones que impone el tipo de doctype que utiliza.

UD2 HTML(2)

Documents

Transcript of UD2 HTML(2)