Manual de HTML

Comunicacin
Digital e Internet
Introduccin al HTML
Lic. en Periodismo
ndice
El Lenguaje HTML 4
4.0
0
Formatos de texto y prrafo
Listas
Enlaces e imgenes
Tablas
Marcos y formularios
Extensiones de Microsoft y multimedia
1. El lenguaje HTML 4.01

1.1. INTRODUCCIN
El lenguaje HTML (HyperText Markup Language) es un
lenguaje muy sencillo para dar formato al texto y dems
elementos de una pgina web: imgenes, tablas,
enlaces, etc.
Hipertexto: texto con enlaces, vnculos o links que
permiten al usuario saltar a otra pgina web
Hipermedia: pginas de hipertexto con elementos
multimedia (audio, video, etc.)
La presentacin final de la pgina web de hipertexto o
hipermedia la realizar un visualizador o browser; los
ms usados son: Explorer y Firefox.
3
El lenguaje HTML es una aplicacin
del SGML (Standard Generalized Markup Language), un

estndar para definir lenguajes de directivas, y
del DTD (Document Type Definition), un estndar para definir
tipos de documentos estructurados para representar esos
mismos documentos.
El trmino HTML se suele referir a ambas cosas, tanto al

tipo de documento como al lenguaje de directivas.
El lenguaje HTML est definido por el organismo World Wide Web

Consortium (W3C, http://www.w3c.org) a travs de distintas
especificaciones desde su fundacin en 1994.
La ltima revisin es la especificacin HTML 4.01 publicada el 24
de diciembre de 1999, que es una subversin del HTML 4 que fue
publicada el 18 de diciembre de 1997 y revisada el 24 de abril de
1998.
El HTML 2.0 (Nov-1995) y HTML 3.2 (Ene-1997), ya presentaban
las caractersticas tpicas del lenguaje como texto, multimedia e
hiperenlaces.
En HTML 4.0 y 4.01, soportan ms opciones multimedia, lenguajes
de script, hojas de estilo, facilidades de impresin y documentos
ms accesibles a las personas con discapacidades.

1.1.1. PARTES DE UN DOCUMENTO HTML
Un documento HTML es un fichero ASCII de extensin .html o .htm
Cualquier editor sirve
Elemento: componente fundamental de la estructura de un
documento de texto. P.e. cabecera, prrafo, listas o tablas.
Un elemento puede contener texto, otros elementos o ambos.

Usaremos marcas o directivas HTML para indicarle los elementos de un
fichero a nuestro visualizador.
Marca o directiva HTML = <+ nom_ directiva + >
Normalmente van emparejadas: <h1> </h1>

Tambin hay directivas nicas: <br>
Atributo: informacin adicional incluida dentro de

algunas directivas de inicio.
HTML no distingue maysculas de minsculas,
P.e., <P ALIGN=right>
salvo las secuencias de escape que deben ir en minsculas.
No todas las directivas son aceptadas por todos los

navegadores web.
Si un navegador no soporta un directiva, simplemente la ignora.

Sin embargo, se mostrar cualquier texto situado entre un par
de directivas desconocidas.
1.1. El documento HTML mnimo

Ejemplo1.html
<HTML>
<HEAD>
<TITLE>Mi primer documento HTML</TITLE>
</HEAD>
<BODY>
<P>Hola mundo!
</BODY>
</HTML>
1.1. El documento HTML mnimo
Tambin podemos encontrarnos con documentos HTML

que no siguen esta estructura, sino que son simples
ficheros de texto con extensin .html.
Ejemplo2.html
ejemplo de documento HTML sin directivas HTML de inicio y fin.<BR><B> Tambin
admite formato de negritas </B>
1.2. Cabecera: <HEAD>
Contiene informacin sobre el propio documento.
Las directivas de este rea sirven para almacenar datos que ayuden a
interpretar y mantener el cuerpo del documento.
<TITLE>... </TITLE>
Atributo TITLE:
Todo documento HTML debera tener un TITLE

Puede aparecer en casi cualquier directiva
Permite mostrar informacin adicional sobre el elemento en cuestin
(ToolTip o audio dictado)
... texto ...

Una foto del
<A HREF="http://www.miservidor.es/alacant.gif" TITLE="Port dAlacant">
Puerto de Alicante
</A>
...ms texto ...
10
<BASE>
Para especificar un directorio de base distinto del actual.

../dibujo.gif
http://www.miservidor.es/presentacion/index.html
<IMG src="dibujos/flecha.gif">
http://www.miservidor.es/presentacion/dibujos/flecha.gif
Si cambiamos a:
http://www.miservidor.es/desarrollo/pruebas/presentacion/prbl.ht
ml
Se solucionara con:
<BASE
HREF="http://www.miservidor.es/presentacion/index.html">
11
<META>
Para incluir meta-informacin sobre el documento en lugar de sobre el

contenido del documento.
Se usan pares NOMBRE/VALOR:
P.e.
A) Proporcionar datos al servidor de HTTP para que genere campos de

cabecera en la respuesta HTTP (p.e. fecha de caducidad documento se
actualiza peridicamente)
B) Para que un usuario incluya informacin adicional sobre el documento,
como palabras clave o el nombre del autor.
A) HTTP-EQUIV CONTENT
B) NAME - CONTENT
<META HTTP-EQUIV ="Expires" CONTENT="Fri, 31 Dec 2010 14:30:00
GMT">
Genera cabecera HTTP:
Expires: Fri, 31 Dec 2010 14:30:00 GMT
12
El atributo NAME se refiere a nombres elegidos al azar por el

usuario, mientras que HTTP-EQUIV significa que el valor tiene
una cabecera equivalente real en el protocolo HTTP.
META y la informacin por defecto
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-88591">
Codificaciones de caracteres :
ISO-8859-1 (o Latin-1): idiomas de Europa Occidental

ISO-8859-5: soporta el Cirlico
SHIFT_JIS o EUC-JP : codificaciones Japonesas
UTF-8 (Unicode): codificacin de ISO 10646 usando un nmero
diferente de bytes para distintos caracteres.
13
META y los motores de bsqueda
para especificar las palabras clave que los motores de

bsqueda usan para mejorar la calidad de sus resultados.
el atributo LANG permite al motor filtrar los resultados para
ajustarse a las preferencias de lenguaje de los usuarios.


<META name="keywords" lang="en-us" content="vacation, Greece,
sunshine">

<META name="keywords" lang="en" content="holiday, Greece, sunshine">

<META name="keywords" lang="fr" content="vacances, Grèce,
soleil">
14
META y los robots
permite que los autores HTML le digan a los robots visitantes si

un documento est indexado o si se usa para recoger ms
enlaces. No se necesita ninguna accin del administrador del
servidor Web.
<META NAME="robots" CONTENT="noindex, nofollow">
En CONTENT podemos usar:
ALL,
INDEX,
NOFOLLOW,
NOINDEX.
15
META y el refresco de pginas
para refrescar el contenido de la pgina actual tras un

determinado nmero de segundos, con la opcin de reemplazar
la pgina actual por otra pgina distinta.
<META HTTP-EQUIV="refresh" CONTENT="3; URL=http://www.umh.es">
Client pull: el navegador solicita nueva pgina a travs del

protocolo HTTP mediante META.
Server push: el servidor enva los componentes del documento
al cliente, basndose en dos tipos MIME especiales:
multipart/mixed y multipart/x-mixed-replace, los cuales dejan
abierta la conexin mientras el navegador recibe los
componentes.
En multipart/x-mixed-replace: cada componente del objeto
enviado sustituya al anterior GIFs animados
16
<LINK>
Permite
definir relaciones con otros documentos y

recursos.
Se usa para:
A) documentar mens o barras de herramientas especificas

de navegacin
b) controlar como se imprimirn un conjunto de ficheros
HTML
c) proporcionar formatos alternativos del documento (por
ejemplo, distintos idiomas, hojas de estilo, etc.)
17
1.3. Cuerpo: <BODY></BODY>
El cuerpo contiene el texto de la pgina que se va a presentar al

usuario.
Visual
Dictado
Atributos de BODY (mejor con .CSS)
BACKGROUND
BGCOLOR
TEXT
LINK
VLINK
ALINK
<BODY TEXT="#000000" BGCOLOR="#FFFFFF" LINK="#0000EE

VLINK="#551A8B" ALINK="#FF0000" BACKGROUND="imagenl.gif">
18
Ejemplo desaconsejado:
<HTML>
<HEAD>
<TITLE>Ejemplo BODY</TITLE>
</HEAD>
<BODY bgcolor="white" text="black"
link="red" alink="fuchsia"
vlink="maroon">
...
</BODY>
</HTML>
Ejemplo usando hojas de

estilo:
<HTML>
<HEAD>
<TITLE> Ejemplo BODY </TITLE>
<STYLE type="text/css">
BODY { background: white; color: black}
A:link { color: red }
A:visited { color: maroon }
A:active { color: fuchsia }
</STYLE>
</HEAD>
<BODY>
...
</BODY>
</HTML>
19
Atributo BGPROPERTIES (MS IExplorer):
Fija la imagen de fondo del documento

Valores = fixed
Ejemplo 3
Comentarios


20
10
Identificadores de elementos
El atributo ID=nombre asigna un identificador a un elemento,

que debe ser nico en todo el documento.
Se usa:
Como un selector en la hojas de estilo

Como un destino en un hiperenlace.
Para referenciar un elemento particular de un script.
Como nombre de un objeto declarado con OBJECT.
El atributo CLASS=nom_clase asigna uno o ms nombres de

clases a un elemento, y as podemos decir que el elemento
pertenece a esas clases. Un nombre de una clase puede ser
compartido por varias instancias del elemento.
21
El
atributo CLASS=nom_clase asigna uno o ms

nombres de clases a un elemento, y as podemos
decir que el elemento pertenece a esas clases. Un
nombre de una clase puede ser compartido por
varias instancias del elemento.
Se usa:
Como un selector de una hoja de estilos (cuando el autor

desea asignar informacin de estilo a un conjunto de
elementos)
Para propsitos generales de los navegadores.
22
11
Ejemplo
de CLASS:
<HEAD>
<TITLE>... titulo del documento ...</TITLE>
PRE.ejemplo { background : green }
</STYLE>
</HEAD>
<BODY>
<PRE class="ejemplo" id="ejemplo-1">
...cdigo de ejemplo ...
</PRE>
</BODY>
23
Agrupacin de elementos
SPAN: define el contenido del documento en-lnea.

DIV: define el contenido a nivel de bloque.
Ejemplo4: base datos clientes
Los navegadores suelen poner un salto de lnea antes y
despus de DIV.
Ejemplo5
24
12
Informacin del lenguaje
Atributo LANG: Especifica el lenguaje con que se escribe el

texto que delimita una directiva. El valor por defecto de este
atributo es unknown.
Se usa como:
Ayuda a los motores de bsqueda

Ayuda a los sintetizadores de voz
Ayuda a los navegadores para establecer la tipografa
Ayuda al navegador para tomar decisiones sobre el guionado, y
espaciado
Ayuda a los correctores ortogrficos y gramaticales.
Cdigos: es(Espaol), en(ingles), en-US(Ingles USA), fr

(Francs), de(Alemn), it (Italiano), ...
25
Direccin del texto

DIR: define la direccin del texto y la
direccin de las tablas (direccin de columnas).
Atributo
LTR: left-to-right = de izquierda a derecha, y

RTL: right-to-left = de derecha a izquierda.
Solo
la directiva TABLE acepta el atributo DIR. No

podemos cambiar la direccin de una sola fila (TR) o
de un grupo de columnas (COLGROUP).
Ejemplo6
26
13
2. Formatos de texto
En el BODY de un documento HTML se mostrar el

contenido de la pgina web formateado.
En una pgina web no tienen efecto los espacios,

tabulaciones y retornos de carro
Ejemplo7
27
2.2. Encabezados
Describen el tema de la seccin que introducen.

Hay 6 niveles de encabezados:
<H1> ... </H1> Texto muy grande (Titulares)

<H2> ... </H2> Texto grande
<H3> ... </H3> Texto normal
<H4> ... </H4> Texto pequeo
<H5> ... </H5> Texto muy pequeo (notas a pie)
<H6> ... </H6> Texto muy pequeo
Ejemplo 8
28
14
2.3. Direcciones:<ADDRESS>
Se puede implementar de varias formas

Se suele finalizar las pginas con un texto con
ADDRESS que incluya
Fecha de la ltima modificacin

Nombre del autor
Direccin de correo electrnico
Se visualiza como fuente peq + cursiva
<ADDRESS>
Departament dEstadstica, Matemtica i Informtica<BR>
rea de Llenguatges i Sistemes Informtics
Edifici Torretamarit<BR>
Avda Universitat, s/n<BR>
Tel: +34 96 665 87 77 <BR>
ltima modificaci: Octubre 2006
</ADDRESS>
29
2.4. Alineacin de texto: ALIGN
El atributo ALIGN permite definir la alineacin de texto

(encabezados, prrafos, etc.) o de algunos elementos (tablas,
imgenes, etc.)
Por defecto, ALIGN=LEFT;
tambin, CENTER, RIGHT, JUSTIFY
<H2 ALIGN=CENTER> Encabezado de nivel 2 y centrado </H2>
Con hojas de estilo:
<HEAD>
<TITLE>Ejemplo alineacion</TITLE>
H2 { text-align: center}
</STYLE>
<BODY>
<H2> Encabezado de nivel 2 y centrado </H2>
</BODY>
30
15
2.5. Estilos de carcter y de

frases
Estilo de carcter: se usan para aplicar formatos como N,K,S,T,

incluso a un solo carcter
Estilos de frase: aaden informacin estructural a un fragmento de
texto como citas, abreviaturas, cdigo, etc.
Estilos de carcter:
TT: teletipo o texto igualmente espaciado.

I: Estilo de texto en cursiva.
B: Estilo de texto en negrita.
BIG: Texto escrito con fuente grande.
SMALL: Texto escrito con fuente pequea.
STRIKE S: Estilo de texto tachado.
U: Texto subrayado.
Ejemplo9
31
2.5. Estilos de carcter y de

frases
Se pueden encadenar: p.e. N+K (Ejemplo10)

Estilos de frase:
EM: Indica nfasis

STRONG: Indica nfasis ms fuerte.
CITE: Contiene una cita o una referencia a otras fuentes.
DFN: Indica una definicin.
CODE: Designa un fragmento de cdigo de programa de ordenador.
SAMP: Designa un ejemplo (de programas, scripts, etc.)
KBD: Indica texto a ser introducido por el usuario.
VAR: Indica una instancia de una variable o un argumento del programa.
ABBR: Indica una forma abreviada (p.e., FTP, SMTP, UMH, etc.).
ACRONYM: Indica una sigla (ejemplo, WAC, radar, etc.).
Ejemplo11
Se recomienda el uso de hojas de estilo.

32
16
2.6. <FONT></FONT>
Cambia el tamao, color y tipo de fuente del texto

Desaconsejada: usar hojas de estilo. Siguen usndola editores.
7 niveles:
<FONT SIZE="7"></FONT> Texto extra grande

<FONT SIZE="6"></FONT> Texto muy grande
<FONT SIZE="5"></FONT> Texto grande
<FONT SIZE="4"></FONT> Texto medio grande
<FONT SIZE="3"></FONT> Texto normal
<FONT SIZE="2">...</FONT> Texto pequeo
<FONT SIZE="1">...</FONT> Texto muy pequeo
Tambin podemos usar incrementos relativos a la fuente base:

+1..+7 -1..-7
<BASEFONT>: indica tamao texto predet. Por defecto, es 3.
Ejemplo12
33
2.6. <FONT></FONT>
COLOR = RGB o nom_color

FACE = tipo de letra
Ejemplo13
Combinaciones:
Admite varios tipos letra separados por comas
Arial, Helvetica, sans-serif

Times New Roman, Times, serif
Courier New, Courier, mono
Georgia, Times New Roman, Times, serif
Verdana, Arial, Helvetica, sans-serif
Geneva, Arial, Helvetica, sans-serif
34
17
2.7. Caracteres especiales
En HTML solo caracteres alfabeto ingles.

Secuencias escape: permiten escribir ,,?,etc.
Siempre en minsculas.
< (Menor que): <
> (Mayor que): >
& (smbolo de and, o ampersand): &
" (comillas dobles): "
Tambin podemos usar valores numricos del cdigo Latin-1
: ¡
: ¿
0..9: 0 a 9
A..Z: A a Z
espacio blanco forzado, p.e. en <P> o en tablas.
35
3. Formatos de prrafo
<P>..</P>: define un prrafo

Podemos usar solo <P> para salto de lnea (mejor
<BR>)
<P></P> crea una linea blanco adicional
ALIGN=[RIGHT, CENTER, LEFT].
36
18
3.2. Texto preformateado
<PRE></PRE>
Presenta espacios en blanco, tabuladores y CR del texto
fuente.
Usa carcter teletipo, de espacio fijo
Ejemplo14
37
3.3. Citas
Para representar texto citado de otra fuente podemos

usar:
<BLOCKQUOTE>: tabula a izqda. y dcha. salto de lnea tras

bloque.
<CITE>: cursiva
Permite sangrado del texto
Ejemplo15
38
19
3.4. Subndices
<SUB>...</SUB>: subndices
<SUP>...</SUP>: superndices
Ejemplo16
39
3.5. Centrado
<CENTER>...</CENTER>: centra elementos contenidos

como texto, tablas, imgenes,
Desaconsejado por W3C:
usar hojas de estilo con text-align:center
Tambin podemos usar
<DIV ALIGN=center>
<P ALIGN=center>
40
20
3.6. Lneas de separacin
<HR>: crea una lnea horizontal para separar secciones

del documento.
Slo directiva inicio, no cierre.
ALIGN = [RIGHT, CENTER, LEFT]
WIDTH=n o m% (ancho)
SIZE=n (alto)
NOSHADE
COLOR
Ejemplo17
41
4. Listas
4.1. Listas no numeradas
<UL>
<LI></LI>
</UL>
Dentro de <LI> podemos insertar varios prrafos
Atributos:
Para UL o LI.
TYPE=[DISK | CIRCLE | SQUARE]
42
21
4.2. Listas numeradas

<OL>
<LI></LI>
</OL>
Atributos OL:
Atributos LI:
START=n
TYPE=valor (1,a,A,i,I)
VALUE=n (renumerar)
Ejemplo18
43
4.3. Listas de definiciones
Glosarios: cada elemento se compone de trmino y

definicin en siguiente lnea:
<DL>
<DT>Termino 1<dd>Definicin del termino 1.
<DT>Termino 2<dd>Definicin del termino 2.
</DL>
Ejemplo19
44
22
4.4. Listas anidadas
Se pueden anidar listas del mismo o distinto tipo
<UL>
<LI> ... Nivel 1, Numero1 ...
<OL>
<LI> ... Nivel 2, Numero 1...
<LI> ... Nivel 2, Numero 2 ...
<OL start="10" type="I">
</OL>
</OL>
<LI> ... Nivel 1, Numero 2 ...
</UL>
Ejemplo20
45
5. Enlaces
Enlace o hiperenlace: texto que permite al usuario saltar a otro

documento HTML.
Enlace = conexin de un recurso web a otro recurso web.
<A HREF=nom_fich.html>Texto del hiperenlace</A>
URI (Identificador de Recursos Uniforme): permite identificar de

manera uniforme el recurso al que apunta nuestro enlace.
esquema://host.dominio [:puerto] /ruta /nom_fich
<A HREF=http://www.miservidor.es/minombre/index.html>Mi pagina

web</A>
<A HREF=mailto:federico@umh.es>Escrbeme </A>
46
23
5. Enlaces
Ruta relativa: enlace a otro documento del mismo servidor ubicado

en otro directorio.
<A HREF=Datos/data1.html>Datos 1</A>
Ruta absoluta: enlace a otro documento en el mismo o distinto

servidor indicando el URI completo.
<A HREF=http://www.servidor.es/directorio/mipagina.html> Visita mi web</A>
Barra inclinada / tipo UNIX.
En general, usar enlaces relativos
Usaremos enlaces absolutos cuando sea necesario
Mantenimiento y conexin al servidor
47
5. Enlaces
Organizacin de ficheros en un servidor web:
Home page: index.html, indice.html o default.htm

Es la pgina ms importante de cualquier sitio web.
Debe mostrar qu es el sitio web.
Subdirectorios
Ficheros
48
24
5.3. Enlaces a secciones
Anclas: punto de referencia donde podemos saltar

desde un enlace del mismo documento.
Se usan para crear Tablas de Contenidos (TOCs)
Primero se define el ancla:

<A NAME=nom_salto> ... texto ... </A>
Luego definimos el enlace:
<A HREF=#nom_salto> ... texto ... </A>
<A HREF=pagina2.html#nom_salto> ... texto ... </A>
49
5.4. Enlaces a recursos

FTP:
<A HREF=ftp://ftp.rediris.es/> Enlace a FTP Rediris </A>
MAIL:
<A HREF=mailto:webmaster@servidor.es>Enviar correo al Webmaster</A>
Ejemplo21
NEWS:
<A HREF=news:macromedia.dreamweaver>News Macromedia</A>
TELNET:
<A HREF=telnet://maquina>Telnet a maquina</A>
50
25
5.5. Enlaces con ID
El atributo ID permite definir anclas sin usar <A>.
Puedes leer mas sobre el tema en la <A HREF="#seccion2">Seccin Dos</A>.

...mas adelante en el documento
<H2 ID="seccion2">Seccin Dos</H2>
...mas adelante
<P>Consultar la <A HREF="#seccion2">Seccin Dos</A> para mas detalles.
Dentro de una misma pgina los identificadores usados para ID o

NAME deben ser nicos. Ejemplo ilegal:
<A HREF="#ancla1">...</A>
...
<H1 ID="ancla1">
... ms texto...
<A NAME="ancla1">...</A>
51
6. Imgenes
Las imgenes ayudan a presentar la informacin en pginas web y

hacerlas ms atractivas.
6.1. Formatos de imgenes
Las imgenes se almacenan en ficheros binarios especiales.

Formatos de ficheros:
GIF (Graphics Interchange Format),
JPG (Joint Photographic Experts Group (http://www.jpeg.org))
y sus variantes (JPEG, JFIF)
BMP( Windows Bitmap)
TIFF (Tagged Image File Format),

EPS (Encapsulated PostScript),
PNG (Portable Network Graphic)
y sus variantes (XBP -X bitmap-, XPM -X pixmap-),
52
26
6. Imgenes
Los navegadores solo soportan: GIF, JPG y PNG.

GIF: formato LZW-comprimido para grficos e imgenes
con colores indexados. Soporta transparencia.
JPG: formato para fotografas e imgenes.
PNG: formato sin patente como GIF para imgenes en
la Web.
No soportado por todos los navegadores
BMP: formato estndar para imgenes en DOS y

Windows.
No soportado por todos los navegadores
53
6. Imgenes
6.2. Directiva <IMG>
<IMG SRC=nom_fich ALT=texto_alternativo>
6.3. Alineacin imgenes
ALIGN (solo la primera lnea)
BOTTOM
TOP
MIDDLE
ALIGN= RIGHT | LEFT

<BR CLEAR=[LEFT | RIGHT | ALL ]>
Ejemplo22
54
27
6. Imgenes
6.3. Alineacin imgenes
ALIGN (desde HTML 4.0)
ABSMIDDLE
ABSBOTTOM
TEXTTOP
BASELINE
6.4. Espacio entre imgenes
HSPACE
VSPACE
Ejemplo23
Espacio en pxeles
55
6. Imgenes
6.5. Dimensiones de la imagen
WIDTH
HEIGHT
Es conveniente definir siempre las dimensiones de una
imagen para cargar el doc sin interrupciones
6.5.1. Cambiar ancho y alto original
El navegador muestra la imagen deformada o escalada.
Ejemplo24
56
28
6. Imgenes
6.6. Thumbnails
Miniaturas para agilizar las pginas con muchas imgenes.

Ejemplo 25
6.7. Imgenes baja resolucin (LOWSRC)
<IMG SRC="altacalidad.gif LOWSRC="bajaresolucion.jpg">

Los navegadores que soportan LOWSRC, cargan primero sta y luego
SRC.
La imagen LOWSRC debe ser de iguales dimensiones que SRC.
57
6. Imgenes
6.8. Imgenes como enlaces. Bordes.
<A HREF="doc1.html"><IMG SRC="imagen1.gif"></A>

Para que no aparezca el borde del enlace:
<A HREF="doc1.html"><IMG SRC="imagen1.gif BORDER=0></A>
BORDER=pxeles.
6.9. Barras e iconos.
Hay imgenes de tamao predefinido que nos permiten insertar barras,

iconos o banners.
58
29
6. Imgenes
6.10. Compresin de imgenes
GIF: ideal para imgenes de hasta 256 colores (clipart, grficos)

JPG: para imgenes hasta 16.7M colores (fotografas); mejor compresin
que GIF.
PNG: permite guardar imgenes con pocas prdidas, incluso con
profundidades high-color; aunque suelen ser de mayor tamao que JPG,
pero admiten transparencia.
6.11. Imgenes transparentes.
Solo GIF y PNG permiten hacer transparente un color que no se ver en la

pgina web.
Debe ser imgenes con fondo de color uniforme.
Solo GIF89a permite transparencia y animacin (no GIF87a).
59
6. Imgenes
6.12. GIF entrelazado y no entrelazado.
GIF no entrelazado: imagen aparece lnea a lnea

GIF entrelazado: imagen aparece cada N lneas y va ganando calidad.
6.13. GIF animado
En 1989 se defini el formato GIF89a que permite contener mltiples

imgenes para conformar una imagen animada.
Solo se pueden ver en un navegador o programa adecuado.
El navegador pone en marcha multipart/x-mixed-replace.
GIF Construction Set, Paint Shop Pro, Fireworks.

Cuidado con el Copyrigh de las imgenes.
60
30
7. Tablas
7.1. Introduccin
Permiten componer una pgina web para ubicar sus elementos

(imgenes, enlaces, textos, tablas, etc.)
Cdigo HTML mnimo:
<TABLE>
<TR>
<TD>1-1</TD>
<TD>1-2</TD>
</TR>
<TR>
<TD>2-1</TD>
<TD>2-2</TD>
</TR>
</TABLE>
Ejemplo 26
61
7. Tablas
7.2. Bordes de una tabla
<TABLE BORDER=n>
<TABLE> == <TABLE BORDER=0>
Ejemplo 27
7.3. Ttulo de la tabla.
<CAPTION ALIGN = [TOP|BOTTOM|LEFT|RIGHT]></CAPTION>
Ejemplo 28
Ejemplo 28A
62
31
7. Tablas
7.4. Encabezados
<TH> </TH>
Colocar ttulos en negrita para columnas y filas.
Ejemplo 29
7.5. Alineacin
ALIGN = LEFT, RIGHT, CENTER, JUSTIFY

VALIGN = TOP, MIDDLE, BOTTOM
Se aplican a TR, TD, TH
Ejemplo 29A
63
7. Tablas
7.6. Dimensiones de tablas y celdas.
Por defecto las tablas se dimensionan segn su

contenido. Tambin podemos forzar con:
WIDTH= n o %
HEIGHT
Se aplica a TABLE, TE, TD, TH.
Ejemplo 30
64
32
7. Tablas
7.7. Expansin de tablas
Podemos expandir una celda a lo largo de su fila o de su columna

COLSPAN = n
ROWSPAN = n
Se aplican a TD y TH.
Ejemplo 30a
65
7. Tablas
7.8. Espacios entre celdas
Espacio en blanco entre celdas o entre celda y su borde

CELLSPACING
CELLPADDING
Ejemplo 30b
Combinando CELLSPACING y CELLPADDING podemos obtener
efectos especiales:
Ejemplo 30c
66
33
7. Tablas
7.9. Colores en las tablas
Podemos dar colores de fondo con BGCOLOR

Se aplica a TABLE o TD
Ejemplo 30d
BORDERCOLOR
Ejemplo 30e
MS IE tambin admite:
BORDERCOLORDARK (sombras: dch-inf)
BORDERCOLORLIGHT (luces: sup-izq)
67
7. Tablas
7.10. Imgenes de fondo
BACKGROUND = imagen
Se aplica a TABLE, TD, TH
Ejemplo 30f
68
34
7. Tablas
7.11. Grupos de columnas
<COLGROUP> agrupa columnas para definir las propiedades de

alineacin
ALIGN = center| right| left| justify
VALIGN = baseline| bottom| middle| top
SPAN = n
WIDTH = n
Ejemplo 31
<COL>: indica alineacin de texto dentro de columnas de tabla
Mismos atributos que COLGROUP
Ejemplo 32
69
7. Tablas
7.12. Grupos de filas
Las filas de una tabla pueden agruparse en cabecera, pie y una

o ms secciones de cuerpo: THEAD, TFOOT, TBODY
As los navegadores avanzan el cuerpo de una tabla indep. De
cabecera y pies.
Al imprimir tablas largas, las cabeceras y pies se repiten en
cada pgina (solo Netscape 6.2 y sup).
TFOOT debe definirse antes de TBODY.
ALIGN = center| right| left
BGCOLOR = #RRGGBB o color
VALING = baseline| bottom| middle| top
Cada THEAD, TFOOT, y TBODY define un grupo de filas, y
cada uno debe contener al menos una fila definida por TR.
Ejemplo33
70
35
7. Tablas
7.13. Bordes y lneas
FRAME: modifica el marco exterior de una tabla

RULES: modifica las lneas internas de una tabla
Debemos definir BORDER para que tengan efecto.
FRAME = void| above| below| hsides| lhs| rhs| vsides| box|
border
RULES = none| groups| rows| cols| all
Ejemplo 34
Notar que:
BORDER=0 FRAME=void, y salvo indiquemos lo contrario,

RULES=none
BORDER0 FRAME=border, y salvo indiquemos lo contrario,
RULES=all
71
8. Marcos
Marco: divisin de la pgina en distintas ventanas donde
presentamos documentos distintos.
8.1. Documento de definicin de marcos
<HTML>
<HEAD>
<TITLE>Ejemplo de pagina con frames</TITLE>
</HEAD>
<FRAMESET COLS="20%, 80%">
<FRAME SRC="indice.html">
<FRAME SRC="pag_ini.html" NAME="principal">
</FRAMESET>
<NOFRAMES><BODY>
Su explorador no soporta marcos.
</BODY></NOFRAMES>
</HTML>
Ejemplo 35
72
36
8. Marcos
8.2. Atributo NAME
Es opcional. Debemos dar nombre a todos los marcos destino
8.3. Atributo TARGET
TARGET = _self | _blank | _top | _parent | nombre_NAME
8.4. Atributos de FRAME
MARGINWIDTH = n
MARGINHEIGHT = n
SCROLLING = yes | no | auto
NORESIZE
Ejemplo 36
73
8. Marcos
8.5. Atributos de FRAMESET
BORDER = n
BORDERCOLOR = color
FRAMEBORDER = no
8.6. FRAMES anidados
No se recomienda anidar ms de dos niveles.
Ejemplo 37
8.7. Imgenes dentro de Frames
Podemos insertar imgenes dentro de marcos. Cuidado con los

tamaos
74
37
9. Formularios
Permiten a los usuarios enviar informacin al servidor web para

procesar por CGI, ASP, JSP, etc.
Contiene controles como en cualquier entorno visual.
Podemos programar una aplicacin visual
9.1 Directiva FORM
Podemos definir cuantos formularios queramos en una pgina

web
ACTION: pgina o mailto:
METHOD: GET (enva datos junto con ACTION) | POST (enva
los datos mediante HTTP). GET est desaconsejado en HTML
4.0
ENCTYPE: define el tipo MIME para enviar los datos
application/x-www-formurlencoded, text/plain
75
9. Formularios
<FORM ACTION=mailto:direccin@email METHOD=POST
ENCTYPE=text/plain>
... controles del formulario ...
</FORM>
9.2. Directiva INPUT
<INPUT TYPE=tipo NAME=nombre VALUE=valor SIZE=s

MAXLENGTH=m>
TYPE = text, password, hidden, checkbox, radio,

submit, reset, button, image, file
NAME
VALUE
SIZE
MAXLENGTH
76
38
9. Formularios
Elija un color: <BR>
<INPUT type=checkbox name=rojo value=1 checked> rojo.<BR>
<INPUT type=checkbox name=azul value=2> azul. <BR>
<INPUT type=checkbox name=verde value=3> verde. <BR>
Elija un color: <BR>
<INPUT type=checkbox name=color value=1 checked> rojo.<BR>
<INPUT type=checkbox name=color value=2> azul. <BR>
<INPUT type=checkbox name=color value=3> verde. <BR>
Indique su Sistema Operativo: <BR>

<INPUT type="radio" name="SO" value="pc" checked> PC <BR>
<INPUT type="radio" name="SO" value="mac"> Mac <BR>
<INPUT type="radio" name="SO" value="Unix"> Unix <BR>
77
9. Formularios
9.3. Directiva TEXTAREA
<TEXTAREA name="Texto" rows="20" cols="80">
Primera lnea de texto inicial.
Segunda lnea de texto inicial
</TEXTAREA>
9.4. Directiva SELECT

<SELECT name="nombre" size=n multiple>
<OPTION value=op1 selected> Opcin 1
...
<OPTION value=opn> Opcin n
</SELECT>
9.5. Uso de formularios
Se aconseja uso de tablas para posicionar elementos

Ejemplo 38
78
39
10. Mapas interactivos
Es una imagen donde definimos reas activas que se asocian a

enlaces.
Mapas en el cliente
Se implementan en el cdigo HTML del navegador

USEMAP
<IMG SRC=images/mimapa.gif USEMAP=#mapa >
Tambin podemos definir el mapa en otro documento:

pag1.html#mapa
<MAP NAME=nombre>
<AREA [SHAPE=tipo] COORDS=x,y,... [HREF=referencia]
[NOHREF]>
</MAP>
79
SHAPE = default|rect|circle|poly
COORDS = coordenadas definidas segn forma:
rect: izq-x, arriba-y, dcha-x, abajo-y.

circle: centro-x, centro-y, radio.
poly: x1, y1, x2, y2, ..., xN, yN.
NOHREF: no enlace definido.
<MAP NAME="mi_mapa">
<AREA SHAPE="RECT" COORDS="46,40,250,75" HREF="mipag2.html">
<AREA SHAPE="RECT" COORDS="46,100,250,135
HREF="mipag3.html">
</MAP>
<IMG SRC="mimapa1.gif" USEMAP="#mi_mapa">
80
40
La nueva definicin del HTML 4.0 recomienda el uso de mapas

as:
<HTML>
<HEAD>
<TITLE>Practicando con mapas</TITLE>
</HEAD>
<BODY>
<P><IMG src="barnav1.gif" usemap="#map1" alt="barra navegacion">
<MAP name="map1">
<P>Navegando por este sitio:
<A href="guia.html" shape="rect" coords="0,0,120,30">Guia </a>
<A href="ir.html" shape="rect" coords="120,0,190,40">Ir</A>
<A href="buscar.html" shape="circle" coords="136,199,50>Buscar/A>
<A href="resumen.html" shape="poly
coords="136,0,373,28,45,56,110,150">Resumen</A>
</MAP>
</BODY>
</HTML>
81
11. Extensiones Microsoft

BGSOUND
<BGSOUND SRC=... LOOP=n>
MARQUEE
<MARQUEE > ... texto ... </MARQUEE>
Atributos de IMG
DYNSRC: video o mundo VRML

START
CONTROLS
LOOP
LOOPDELAY
<IMG DYNSRC=cup.avi LOOP=-1 START=fileopen>
82
41
11. Extensiones Microsoft

Mrgenes de pginas
LEFTMARGIN
RIGHTMARGIN
TOPMARGIN
BOTTOMMARGIN
Ejemplo 39
83
12. Multimedia en la web
Sonido
WAV, AIFF, MIDI, AU o SND, MPEG, RealAudio

Resolucin
Canales
Frec muestreo
Audio en tiempo real:
Tipo de aplicacin: RealAudio

Extensin: RA o RAM
Tipo MIME: audio/x-pn-realaudio
Manipulado por: RVPLAYER
http://www.realaudio.com
84
42
12. Multimedia en la web
Video en la web
AVI, MPEG, QuickTime
http://www.mpeg.org
http://www.apple.com/quicktime/
Video en tiempo real:

RealSystem IQ.
http://service.real.com/help/library/guides/realone/
ProductionGuide/HTML/realpgd.htm
Objetos multimedia
Java,
Macromedia Flash, Director, Authorware.

85
43

Manual de HTML

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Manual de HTML

Cargado por

Copyright:

Formatos disponibles

Comunicacin

1. El lenguaje HTML 4.01

1. El lenguaje HTML 4.01

El lenguaje HTML es una aplicacin

del SGML (Standard Generalized Markup Language), un

El trmino HTML se suele referir a ambas cosas, tanto al

1. El lenguaje HTML 4.01

El lenguaje HTML est definido por el organismo World Wide Web

1. El lenguaje HTML 4.01

Un elemento puede contener texto, otros elementos o ambos.

Marca o directiva HTML = <+ nom_ directiva + >

Normalmente van emparejadas: <h1> </h1>

1. El lenguaje HTML 4.01

Atributo: informacin adicional incluida dentro de

HTML no distingue maysculas de minsculas,

P.e., <P ALIGN=right>

salvo las secuencias de escape que deben ir en minsculas.

No todas las directivas son aceptadas por todos los

Si un navegador no soporta un directiva, simplemente la ignora.

1.1. El documento HTML mnimo

1.1. El documento HTML mnimo

Tambin podemos encontrarnos con documentos HTML

1.2. Cabecera: <HEAD>

Contiene informacin sobre el propio documento.

Todo documento HTML debera tener un TITLE

... texto ...

1.2. Cabecera: <HEAD>

Para especificar un directorio de base distinto del actual.

1.2. Cabecera: <HEAD>

Para incluir meta-informacin sobre el documento en lugar de sobre el

A) Proporcionar datos al servidor de HTTP para que genere campos de

Genera cabecera HTTP:

Expires: Fri, 31 Dec 2010 14:30:00 GMT

1.2. Cabecera: <HEAD>

El atributo NAME se refiere a nombres elegidos al azar por el

META y la informacin por defecto

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-88591">

ISO-8859-1 (o Latin-1): idiomas de Europa Occidental

1.2. Cabecera: <HEAD>

META y los motores de bsqueda

para especificar las palabras clave que los motores de

1.2. Cabecera: <HEAD>

META y los robots

permite que los autores HTML le digan a los robots visitantes si

<META NAME="robots" CONTENT="noindex, nofollow">

En CONTENT podemos usar:

1.2. Cabecera: <HEAD>

META y el refresco de pginas

para refrescar el contenido de la pgina actual tras un

<META HTTP-EQUIV="refresh" CONTENT="3; URL=http://www.umh.es">

Client pull: el navegador solicita nueva pgina a travs del

1.2. Cabecera: <HEAD>

definir relaciones con otros documentos y

A) documentar mens o barras de herramientas especificas

1.3. Cuerpo: <BODY></BODY>

El cuerpo contiene el texto de la pgina que se va a presentar al

Atributos de BODY (mejor con .CSS)

<BODY TEXT="#000000" BGCOLOR="#FFFFFF" LINK="#0000EE

1.3. Cuerpo: <BODY></BODY>

Ejemplo usando hojas de

1.3. Cuerpo: <BODY></BODY>

Atributo BGPROPERTIES (MS IExplorer):

Fija la imagen de fondo del documento