0% encontró este documento útil (0 votos)

326 vistas66 páginas

Introduccion Al HTML

Cargado por

Marco Antonio Mojica Campos

Derechos de autor

Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.

Formatos disponibles

Descarga como PDF, TXT o lee en línea desde Scribd

0% encontró este documento útil (0 votos)

326 vistas66 páginas

Introduccion Al HTML

Cargado por

Marco Antonio Mojica Campos

Derechos de autor

Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.

Formatos disponibles

Descarga como PDF, TXT o lee en línea desde Scribd

Está en la página 1/ 66

Aprender Gratis no es el autor de este documento.

Aprender Gratis
simplemente se encarga de buscar manuales, cursos y tutoriales en Internet,
categorizarlos y ponerlos a disposición de la comunidad a través de la web,
hospedándolos en nuestros servidores. Se ha incluido esta portada para evi-
tar el “leeching” desde otras Webs, dejando bien claro quienes se encargan
del coste del hospedaje de este documento.
Introducción al HTML

INTRODUCCIÓN AL HTML

ESCUELA DE INFORMÁTICA
UNIVERSIDAD EUROPEA DE MADRID

Luis de Salvador Página: 1

Introducción al HTML

INDICE

1. INTRODUCCIÓN AL HTML........................................................................................................................5

2. EL DOCUMENTO HTML.............................................................................................................................6
2.1 ¿QUÉ SON LAS ETIQUETAS HTML?.................................................................................................................6
2.2 ERRORES EN UNA PÁGINA HTML...................................................................................................................6
2.3 ESTRUCTURA DE UNA PÁGINA WEB ................................................................................................................6
2.4 INCLUYENDO TEXTO .....................................................................................................................................8
2.5 VISUALIZANDO LA PÁGINA HTML .................................................................................................................9
3. ETIQUETAS BÁSICAS EN HTML.............................................................................................................10
3.1 ETIQUETAS BÁSICOS DE FORMATO DE TEXTO ................................................................................................10
3.2 COMENTARIOS ............................................................................................................................................10
3.3 ENCABEZADOS HTML ................................................................................................................................10
3.4 PÁRRAFOS EN HTML ..................................................................................................................................10
3.5 DIFERENCIAS ENTRE BR Y P ........................................................................................................................11
3.6 INCLUYENDO ESTILO ..................................................................................................................................12
3.7 PARPADEO ..................................................................................................................................................12
3.8 PREFORMATO .............................................................................................................................................12
3.9 TABULACIONES Y ALINEAMIENTO ................................................................................................................13
3.9.1 Tabulaciones ........................................................................................................................................13
3.9.2 Alineación del Texto.............................................................................................................................14
3.9.3 Justificación/Alineamiento del Texto ....................................................................................................14
3.10 COLOR A LAS PÁGINAS.................................................................................................................................15
3.11 TEXTURAS DE FONDO ..................................................................................................................................15
3.12 FUENTES DE TEXTO .....................................................................................................................................16
3.13 COLOR DE LETRA ........................................................................................................................................17
3.14 SUPERÍNDICES Y SUBÍNDICES .......................................................................................................................17
3.15 TIPO DE LETRA BASE...................................................................................................................................17
3.16 SEPARADORES ............................................................................................................................................17
3.17 PIES DE PÁGINA ...........................................................................................................................................18
4. INCLUYENDO IMÁGENES........................................................................................................................20
4.1 JPEG VS GIF..............................................................................................................................................20
4.2 COMANDO IMG SRC..................................................................................................................................20
4.3 EL ATRIBUTO ALT="..." ...............................................................................................................................21
5. INTRODUCIENDO ENLACES (LINKS)....................................................................................................23
5.1 ¿QUÉ ES UNA URL?.....................................................................................................................................23
5.2 COMANDO LINK ..........................................................................................................................................23
5.3 CREANDO UN ENLACE A UN GRÁFICO ...........................................................................................................24
5.4 ENLACE A OTROS DIRECTORIOS....................................................................................................................24
5.5 LINKS A PARTES DE UNA MISMA PÁGINA ........................................................................................................24
5.6 ENLACES HIPERGRÁFICOS ............................................................................................................................25
5.7 MARCO DE LA IMAGEN ................................................................................................................................25
5.8 IMÁGENES SELLO ........................................................................................................................................26
5.9 IMÁGENES CON VARIOS LINKS ......................................................................................................................26
6. LISTAS Y TABLAS......................................................................................................................................27
6.1 LISTAS DESORDENADAS ...............................................................................................................................27
6.2 LISTAS ORDENADAS ....................................................................................................................................27
6.3 LISTAS DESCRIPTIVAS ..................................................................................................................................28

Luis de Salvador Página: 2

Introducción al HTML

6.4 TABLAS EN HTML......................................................................................................................................28

6.5 TABLAS FANTASMA.....................................................................................................................................30
6.6 COLOREANDO TABLAS ................................................................................................................................30
7. FRAMES .......................................................................................................................................................31
7.1 CREANDO FRAMES ......................................................................................................................................31
7.2 PARÁMETRO TARGET ...............................................................................................................................31
7.3 TARGET ESPECIALES O MÁGICOS ...............................................................................................................32
7.4 FRAMES INVISIBLES..................................................................................................................................33
8. GIFS ANIMADOS ........................................................................................................................................34
8.1 ¿QUÉ ES UN GIF ANIMADO?.........................................................................................................................34
8.2 CREANDO UN GIF ANIMADO ........................................................................................................................34
9. FORMULARIOS ..........................................................................................................................................35
9.1 INTRODUCCIÓN ...........................................................................................................................................35
9.2 ETIQUETA FORM .......................................................................................................................................35
9.3 ETIQUETA INPUT.......................................................................................................................................35
9.4 OTRAS ETIQUETAS DE FORMULARIO: SELECT Y TEXTAREA ............................................................................36
10. HOJAS DE ESTILO .....................................................................................................................................37
10.1 ESTILOS EN ARCHIVOS EXTERNOS ................................................................................................................37
10.2 CLASES EN LOS ESTILOS...............................................................................................................................38
10.3 CRITERIO DE SELECCIÓN CONTEXTUAL .........................................................................................................38
11. GUÍA DE ESTILOS......................................................................................................................................38
11.1 TIPO DE FUENTE ..........................................................................................................................................38
11.1.1 Tamaño de fuente............................................................................................................................38
11.1.2 Tipo de fuente .................................................................................................................................39
11.1.3 Oscuridad de la fuente ....................................................................................................................39
11.1.4 Estilo de la fuente ...........................................................................................................................40
11.2 PROPIEDADES DEL TEXTO ............................................................................................................................40
11.2.1 Ancho de línea ................................................................................................................................40
11.2.2 Decoración del texto .......................................................................................................................41
11.2.3 Transformación del texto.................................................................................................................41
11.2.4 Alineación de texto .........................................................................................................................41
11.2.5 Indentación .....................................................................................................................................42
12. PROPIEDADES DE ETIQUETAS DE BLOQUE.......................................................................................42
12.1.1 Margenes ........................................................................................................................................42
12.1.2 Padding ..........................................................................................................................................43
12.1.3 Ancho de bordes..............................................................................................................................43
12.1.4 Estilo del borde...............................................................................................................................43
12.1.5 Color del borde...............................................................................................................................43
12.1.6 Ancho..............................................................................................................................................44
12.1.7 Alineamiento...................................................................................................................................44
12.1.8 Elimina flotantes.............................................................................................................................45
12.2 COLOR Y FONDO .........................................................................................................................................45
12.2.1 Color ..............................................................................................................................................45
12.2.2 Imagen de fondo..............................................................................................................................46
12.2.3 Color de fondo ................................................................................................................................47
12.3 UNIDADES ..................................................................................................................................................47
12.3.1 Unidades de medida........................................................................................................................47
12.3.2 Unidades de color ...........................................................................................................................47
13. ANEXO: RESUMEN DE HTML .................................................................................................................48

14. ANEXO: CODIGOS DE CARACTERES....................................................................................................52

Luis de Salvador Página: 3

Introducción al HTML

15. ANEXO: MÁS SOBRE URL........................................................................................................................58

16. ANEXO: COLORES EN HTML..................................................................................................................60

17. ANEXO: RECURSOS HTML......................................................................................................................64

17.1 INFORMACIÓN SOBRE EL ESTÁNDAR .............................................................................................................64
17.2 MANUALES Y GUIAS DE ESTILO (INGLÉS).......................................................................................................64
17.3 MANUALES Y GUIAS DE ESTILO (CASTELLANO)..............................................................................................64
17.4 DOCUMENTACIÓN SOBRE MICROSOFT Y NETSCAPE .......................................................................................65

Luis de Salvador Página: 4

Introducción al HTML

1. INTRODUCCIÓN AL HTML
HTML significa HyperText Markup Language. Es el lenguaje en que se escriben los millones de
documentos que hoy existen en el World Wide Web. Cuando accedemos a uno de estos documentos
a través de un navegador (Netscape, IE, Mosaic, Lynx, IBrowse), este los interpreta y los despliega.
Existen clientes gráficos como Netscape, y otros como el Lynx que sólo despliegan texto. Un
navegador en modo textos actualmente parece un extremo, pero es muy importante no olvidar que
no todos los navegadores tienen las mismas capacidades (ni siquiera la misma configuración) cuando
se diseña una página web.
Crear una buena página tiene dos aspectos:
• Por un lado el conocimiento técnico para crear código HTML correcto.
• Por otro lado el claro diseño para presentar la información.
Para realizar un página de forma técnicamente correcta lo más adecuado es utilizar alguna
herramienta de edición o generación de automática. ¿Por qué conocer entonces HTML? Porque
alguien tiene que realizar estas herramientas y esta es una de las tareas que nos corresponde.
La comunicación de ficheros HTML se basa en la existencia de un protocolo denominado HTTP
HyperText Transmission Protocol. De esta forma, para que haya comunicación en HTML entre dos
máquinas debe de aparecer al menos la siguiente configuración:

HTTP HTTP
Cliente Servidor
TCP TCP

Un cliente HTTP puede ser un navegador de web, como los que se van a emplear aquí, mientras
que un servidor HTTP puede ser un web server.
Lo que vamos a cubrir en este documento se centra en producir documentos que cumplan lo
estándares del HTML. Usando "HTML estándar" su trabajo será más "compaginable" con el rápido
crecimiento de la Web. Los estándares actuales se conocen como HTML 4.0 o DHTML y son
soportados por la inmensa mayoría de navegadores. Recordar que una página bien hecha no es la que
utiliza los elementos más esotéricos del HTML, sino los más comunes que harán que la página sea
ejecutable en un mayor número de plataformas.
Más allá de estándar, cada navegador y cada servidor soporta algunas extensiones diferentes. Es
conveniente conocer estos recursos y utilizarlos, pero siempre teniendo presente que podemos
encontrar navegantes que no sean capaces de verlos.

Luis de Salvador Página: 5

Introducción al HTML

2. EL DOCUMENTO HTML
Un documento HTML está formado fundamentalmente por el texto que se quiere mostrar en
pantalla y el formato que se quiere dar a dicho texto. El formato al texto, así como la inclusión de
cabecera y códigos, se realiza insertando etiquetas que en vez de ser mostradas en pantalla por el
navegador, van a ser interpretadas por éste como comandos de formato y carga.
Es importante recalcar que el HTML es siempre interpretado por el navegador, sin existir ninguna
etapa de compilación, como sucede en otros lenguajes para la Web, como Java.

2.1 ¿Qué son las etiquetas HTML?

Cuando un navegador muestra una página, lo que hace es leer de un archivo de texto puro y duro,
y busca códigos especiales o "etiquetas" (en inglés, "tags") que vienen marcadas por los signos “<” y
“>”. El formato general de una etiqueta HTML es el siguiente:
<NOMBRE_ETIQUETA>cadena de texto</NOMBRE_ETIQUETA>

Como ejemplo, el título de esta sección podría usar una etiqueta de encabezado del tipo:
<H3>¿Qué son las etiquetas HTML?</H3>

Esta etiqueta le dice a su navegador que muestre en pantalla el texto "¿Qué son las etiquetas
HTML?" en un estilo de encabezado de nivel 3. Las etiquetas HTML pueden decirle al navegador
que ponga un texto en negrita, en cursiva, incluirlo en un encabezado o convertirlo en un hiperlink a
otra página web. Es importante hacer hincapié en que la "etiqueta de finalización",

</NOMBRE_ETIQUETA>

contiene el caracter "/", barra invertida o "backslash". Esta barra, "/", indica al navegador que
termine de dar ese tipo de formato al texto. Muchas etiquetas HTML están pensadas para funcionar
por pares, "inicio" y "final". Si olvida colocar la barra invertida, el navegador continuará con dicha
etiqueta con el restante texto del documento, produciendo resultados desagradables (como
experimento, puede intentar esto más adelante).
Importante: Los navegadores no distinguen si las etiquetas van escritas en mayúsculas o
minúsculas. Por ejemplo, Por ejemplo, <h3>...</h3> no es diferente de <H3>...</H3>.

2.2 Errores en una página HTML

A diferencia de la programación de ordenadores, si comete un error tipográfico en HTML no
tendrá una "bomba" o un "crash" del sistema; su página web aparecerá, simplemente..., fea. Es
bastante fácil ir al código fuente del archivo HTML, de hecho un archivo de texto, y retocarlo.
Un aspecto interesante del HTML es que si el navegador no sabe qué hacer con una etiqueta dada
simplemente la ignorará. Esto permite que los navegadores no envejezcan rápidamente. El
inconveniente es que debemos estar atentos a la hora de depurar nuestras páginas.

2.3 Estructura de una página Web

Una página web es un archivo de texto, se puede crear con cualquier editor de texto como el Bloc
de Notas de Windows. En la actualidad se emplean editores más avanzados, que introducen
automáticamente las etiquetas de formato sin que tengamos que teclearlas automáticamente (al igual
que un editor de textos tradicional). Algunos también visualizan on-line el resultado de nuestras
páginas, sin tener que grabar el trabajo e ir a un navegador cada vez que hacemos un cambio.
Todas las páginas web tienen la siguiente estructura:

Luis de Salvador Página: 6

Introducción al HTML

<HTML>
<HEAD>
<TITLE>primera página</TITLE>
</HEAD>
<BODY>
...
...
...
</BODY>
</HTML>

Una excepción a la estructura anterior van a ser las páginas compuestas por varios frames o zonas
independientes de pantalla, que se verán más adelante.
Se recomienda que use el editor de textos más simple que encuentre. Es mejor que aprenda
primero los conceptos a mano y que después se utilice mejores herramientas, los editores de HTML
que se encuentran presentes en los navegadores.
Para usuarios de Windows, recuerde también que debe salvar sus documentos HTML con un
nombre y una extensión que tiene que ser .HTM o .HTML, así, en este caso de ejemplo su archivo
debería denominarse “mi_arch.htm”. El navegador es lo suficientemente listo como para saber que si
un archivo acaba en .HTM es que es un archivo HTML. Recordar que en el caso del nombre del
fichero, no es lo mismo que se empleen mayúsculas o minúculas si la página se encuentra en un
servidor UNIX.
Vamos a comentar el listado anterior. En la primer línea encontramos el comando <HTML>. Esto
le indica al cliente (ej: Netscape) que comienza un documento HTML.
Por encima de esta línea se puede añadir la siguiente indicación:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

Técnicamente, no se requiere, pero es código que le dice al navegador con qué versión de HTML
se ha escrito dicha página, y de esta manera saber qué recursos va a necesitar para visualizarla.
A continuación viene <HEAD>, la primera parte de un documento HTML. Dentro de HEAD
puede ir el titulo <TITLE> del documento (Netscape lo muestra en la barra superior de la ventana) y
otros comandos mas avanzados que luego veremos. Después de HEAD aparece la entrada
<BODY>, que es donde se coloca la información que queremos mostrar en la ventana del
navegador.
El comando BODY acepta varios parámetros muy interesantes:
• BACKGROUND="imagen.GIF"
Permite incluir una imagen de fondo. No poner una imágen muy 'pesada' de fondo, no mas de
15k. No olvidar verificar que no dificulte la lectura del texto.
• BGCOLOR="#xxxxxx"
Cambia el color de fondo de una página. Cada x representa un dígito hexadecimal, del 0 a la F.
Las dos primeras xx corresponden al rojo, las 2 siguientes al verde y las restantes al azul. Ej:
para un fondo blanco poner todos los valores al máximo: FFFFFF. Para un fondo rojo:
FF0000.
• TEXT="#xxxxxx"
Cambia el color del texto de toda una página. La selección de color funciona igual para todos
los casos.

Luis de Salvador Página: 7

Introducción al HTML

• LINK="#xxxxxx"
Cambia el color de todas las conexiones (links) de toda una página.
• VLINK="#xxxxxx"
Cambia el color de todas las conexiones visitadas (links) de toda una página.
La forma de introducir estos parámetros es colocarlos en cualquier número y orden dentro de los
símbolos < y >. Aquellos valores de color, fondo, etc, que no se señalen, el navegador los tomará
por defecto a partir de las preferencias determinadas por el navegador.
En la última linea del código del ejemplo esta </HTML>. Esto le indica al cliente (Netscape) que
terminó el documento HTML.
Noten que: <HEAD> tiene su correspondiente llave de cierre </HEAD>, y <BODY> tiene
</BODY>. Esto es fundamental incluirlo en la página para tener un documento HTML correcto.
Esta estructura de cabezal (HEAD) y cuerpo (BODY) siempre debe ser mantenida. Envolviendo
estas dos secciones va el par <HTML> y </HTML>.
Realmente, sus páginas Web podrían ser correctamente visibles en la mayoría de los ordenadores
sin estas etiquetas. Sin embargo, usándolas, sus páginas serán totalmente compatibles con los
estándares HTML y con los navegadores actuales y futuros.

2.4 Incluyendo texto

Si cargamos el código del primer ejemplo veremos que no aparece nada. (¡sólo el titulo!).
Tenemos la estructura, ahora hace falta agregarle la información. Lo primero que debemos tener
claro es que al cliente web no le importa los espacios, tabulaciones, o fin de líneas que tenga un texto
creado con el editor que se utilice. Como ejemplo, veamos la siguiente página:

<HTML>
<HEAD>
<TITLE>primera página</TITLE>
</HEAD>
<BODY>
<H1>Bienvenido a mi página</H1>
Esta página se encuentra en <STRONG>FUNDACIONCONFEMETAL
</STRONG>,<BR>
en el <EM>servidor web</EM> de mi maquina.
<HR>
Hasta luego!
</BODY>
</HTML>

Este código de esta página HTML se ve así:

Bienvenido a mi página

Esta página se encuentra en LA FUNDACION,

en el servidor web de mi maquina.

Hasta luego!

Aquí aparecen varios comandos nuevos. <H1> es para indicar el que texto es un título. Cuando
esta página es cargada ese texto aparece en un tipo de letra más grande. <H1> es un comando

Luis de Salvador Página: 8

Introducción al HTML

'contenedor', significa que necesita una llave de cierre que es </H1>. Esta llave indica que hasta ahi
llega el título, sino toda la página aparecería con letras gigantes.

<STRONG> le indica al cliente que muestre “FUNDACIONCONFEMETAL” en tipo negrita.

<EM> indica que le tipo énfasis a los caracteres. Generalmente todos los clientes muestran al texto
<STRONG> como bold, y <EM> como italic.
<BR> no es un comando contenedor. Cuando se introduce un <BR>, se está indicando un corte
de linea (CR). <HR> tampoco es contenedor, indica incluir un separador.

2.5 Visualizando la página HTML

Para visualizar una página HTML hay dos opciones. La primera opción es la más sencilla y la que
sigue:

1) Ejecute el navegador.
2) Elija Abrir fichero... (Open File... o Open File in Brower) en el menú Archivo (File).
3) Use la caja de diálogo para encontrar y abrir el archivo que ha creado.
4) Ahora debería ver en la barra de título de la ventana de trabajo y el texto “Bienvenido…etc”

La segunda opción requiere de un servidor de páginas WEB en la máquina de trabajo o alguna

otra accesible. Consiste en poner la página en el directorio de páginas del servidor de Web (aparece
cuando miramos las propiedades). Entonces, acceder a nuestra propia página poniendo bien el
nombre de nuestra máquina, o bien accediendo a la dirección: 127.0.0.1 si el servidor está en la
máquina local, o la dirección de la máquina servidora en otro caso. Utilizaremos este segundo
método más adelante en el curso, por asemejarse más al mundo real.
Cuando se modifica una página HTML, para ver el efecto de dichos cambios, se pulsa el botón de
Reload (Actualizar) o el menú de su navegador que indique la misma acción. Esto le indica a su
navegador que lea el mismo fichero y lo muestre otra vez con cualquier cambio que haya habido.
Recordar que el cliente web tiene una memoria caché (configurable por el usuario) en la que se
almacenan las últimas páginas accedidas. Por lo tanto, si solicitamos una misma página puede que el
cliente nos proporcione la que tiene almacenada en su memoria y no la versión actualizada.
Puntualizar, por un lado, que existen recursos para obligar a consultar la actualización de una
página, y por otro que si se está accediendo a una página a través de un servidor proxy, este añadirá
un nivel de caché adicional.

Luis de Salvador Página: 9

Introducción al HTML

3. ETIQUETAS BÁSICAS EN HTML

3.1 Etiquetas básicos de formato de texto

Son los siguientes:
• <H1> </H1> Indica que el texto en un título. El mas importante (grande) es H1, luego H2 y
asi hasta H7. Los más usados son hasta H3.
• <STRONG> </STRONG> Muestra en texto seleccionado más fuerte. Casi todos lo
muestran como bold.
• <EM> </EM> Muestra en texto seleccionado con énfasis. Casi todos lo muestran como italic.
• <BR> Indica un corte de linea. (CR)
• <HR> Inserta un separador, se emplea para separar las grandes secciones de una página
utilice la línea (hard rule).

3.2 Comentarios
Se pueden introducir en los documentos HTML etiquetas comentario, denotadas por:

El texto entre estas etiquetas no será mostrado en la página web, pero se usan para incluir
información que pueda ser de utilidad para usted o cualqueir otro que mire el código HTML de su
página. Cuando sus páginas Web se compliquen poco a poco, los comentarios serán útiles si necesita
actualizar una página que puede que haya creado tiempo atrás.

3.3 Encabezados HTML

Poner encabezados se realiza identificando determinadas partes del texto con las correspondientes
etiquetas. El formato para una etiqueta de encabezado es el siguiente:

<HN>Texto a aparecer en el encabezado</HN>

donde N es un número de 1 a 6 identificando el tamaño del encabezado. Vea a continuación

diferentes ejemplos de tamaños de encabezados:

Encabezado Nivel 1
Encabezado Nivel 2
Encabezado Nivel 3
Encabezado Nivel 4
Encabezado Nivel 5
Encabezado Nivel 6

El rango de los encabezados varía desde 1 (más importante) a 6 (menos importante). Como en un
esquema, los encabezados deberían conllevar cierto orden lógico, consistente y ser paralelos.

3.4 Párrafos en HTML

Ya habíamos visto anteriormente que el navegador ignorará todos los retornos de carro tal y
como los introducimos en el texto. Pero, no obstante, allí donde el navegador vea una etiqueta de

Luis de Salvador Página: 10

Introducción al HTML

párrafo insertará una línea en blanco y comenzará un nuevo párrafo. El código HTML para forzar
una "ruptura" de párrafo es:

<P>

Note que lo especial de esta etiqueta es que no requiere otra etiqueta de "finalización. Note
también que las etiquetas <HN> llevan incorporadas una ruptura de párrafo, con lo que se hace
innecesario poner una etiqueta <P> antes de un código de encabezado:

<P>
<H2> Mi encabezado </H2>

Un ejemplo de uso es el siguiente:

<H2>Introducción</H2>
Un volcán es un lugar donde el magma,
o roca caliente y derretida del interior del planeta,
alcanza la superficie. Puede suceder violentamente,
en una explosión supersónica y masica, o más
tranquilamente, como un flujo de lava lenta y largo.
<P>
Los volcanes han sido parte de la historia de la Tierra
desde mucho antes de los hombres. Compare la historia
de los seres humanos, unos pocos millones de años, con
la de la Tierra, más de cuatro billones de años.

Esta parte se representará como una cabecera con dos párrafos separados. Para determinar el
inicio y final de un parrafo se emplea: <P> </P>. Tiene como opciones ALIGN (center, left y right) y
otras más que luego veremos. Util para centrar o alinear a la derecha texto. Cada comienzo de
párrafo deja un espacio separador. Por ejemplo, para centrar un texto: <P ALIGN=CENTER>.

3.5 Diferencias entre BR y P

Sólo emplenado la etiqueta <P>:

Luis de Salvador Página: 11

Introducción al HTML

Y finalmente, pudimos ver

el brillante propósito Y finalmente, pudimos ver el brillante
de la etiqueta de párrafo. propósito de la etiqueta de párrafo.
<P>
Más adelante... Más adelante...
<P>
Cuantas más etiquetas... ¿mejor se Cuantas más etiquetas... ¿mejor se
siente? siente?

Empleando etiquetas de párrafo y líneas de ruptura:

Y finalmente, pudimos ver<BR> Y finalmente, pudimos ver

el brillante propósito<BR> el brillante propósito
de la etiqueta de párrafo. de la etiqueta de párrafo.
<P>
Más adelante... Más adelante...
<BR> Cuantas más etiquetas...
Cuantas más etiquetas... <BR> ¿mejor se siente?
¿mejor se siente?

La etiqueta <BR> puede ser utilizada para diferentes propósitos de estilo en diferentes
encabezados. Si se da cuenta, las etiquetas de encabezado <H1>, <H2>, ... insertan automáticamente
espacios en blanco antes y después del texto del encabezado. Algunos autores de páginas Web
prefieren un estilo que controle estos espacios en blanco.

3.6 Incluyendo Estilo

Los estilos básicos que se pueden incluir son:
<B>Esto es negrita...</B> Esto es negrita...
<I>Esto es cursiva...</I> Esto es cursiva...
<TT>Esto es terminal...</TT> Esto es terminal...

Se puede combinar estas etiquetas de estilo siempre que estén correctamente enlazadas; esto es,
las etiquetas de cursiva deben estar siempre dentro de las etiquetas de negrita. Note también que el
orden no influye. Otra opción más es que puede añadir estilo al texto que aparece en los
encabezados.

3.7 Parpadeo
Para hacer parpadear textos:

Atención, esta etiqueta no es estándar y algunos navegadores la ignoran.

3.8 Preformato
Anteriormente se había visto que un navegador ignoraría caracteres de espacio extraños,
tabulaciones y retornos de carro en sus archivos HTML. No obstante, hay momento en los que es

Luis de Salvador Página: 12

Introducción al HTML

importante mantener dichos caracteres en el diseño de su página. En esta lección el ejemplo será que
queramos insertar una tabla de texto con columnas alineadas.
La etiqueta de preformato le dice a su navegador que muestre el texto exactamente tal y como
está puesto en el documento HTML, incluyendo espacios, tabulaciones y retornos de carro. Un
ejemplo de la etiqueta preformato es:

<PRE>
Hemos indentado con 5 caracteres de espacio.
Y usamos el retorno de carro para saltar
a
una
nueva
línea.
</PRE>

Sin las etiquetas <PRE> y </PRE> el mismo HTML produciría lo siguiente:

Hemos indentado con 5 caracteres de espacio. Y usamos el retorno de carro para saltar a una
nueva línea.

La etiqueta de preformato es útil si su navegador puede utilizar un tipo de letra monoespaciada

(como "Courier" o "Mónaco"); si no, deberá contar espacios cuando alinee texto en columnas.
Puede utilizar etiquetas de HTML dentro de un texto marcado como preformateado. Por ejemplo,
podemos añadir un link hipertexto y algunas etiquetas de estilo dentro de las etiquetas
<PRE>...</PRE>.

3.9 Tabulaciones y alineamiento

3.9.1 Tabulaciones
Tradicionalmente, la separación de tres o más líneas de texto (o las citas) se efectúa como una
indentación del bloque entero. El HTML también incluye esta posibilidad utilizando la etiqueta

<BLOCKQUOTE>....</<BLOCKQUOTE>:

<BLOCKQUOTE>
"Esta es una larga cita de una persona muy famosa. Ya que es tan larga
e interesante debería situarse destacada del resto del texto.
Esto indica claramente que la cita es de alguien distinto del escritor."
</BLOCKQUOTE>

Algunos diseñadores utilizan 2 (o más) etiquetas <blockquote> anidadas para crear efectos de
retoque de margenes. Por ejemplo:

<BLOCKQUOTE>
<BLOCKQUOTE>
<BLOCKQUOTE>"¡Oh, más etiquetas!", se lamentó.
<p> "Recuerda, que mientras que el HTML pueda
estar limitado en términos de control
sobre el diseño de las páginas hay un gran

Luis de Salvador Página: 13

Introducción al HTML

potencial en el uso del número de etiquetas."

</BLOCKQUOTE>
/BLOCKQUOTE>
</BLOCKQUOTE>

3.9.2 Alineación del Texto

A medida que el web crece, crece y crece aumenta la demanda sobre el control del aspecto de las
páginas. Uno de esos deseos era formatear el texto para que pudiera alinearse en el centro de las
páginas, en vez de sólo a la izquierda.
Esto nos lleva a una de esas curiosas situaciones de Netscape vs. HTML estándar. Netscape
introdujo una extensión HTML -la etiqueta <CENTER>...</CENTER>- que alineaba todo lo que
contuviera en el centro de la página. Un código más general para centrar texto es una variación de la
etiqueta <P>:

Note que ahora hay una etiqueta </P> al final. También, si centra diversos párrafos, cada uno
deberá ser marcado con un <P ALIGN=center>...</P> por separado.
La mayoría de los navegadores y el HTML 3.2 estándar soportan la etiqueta de Netscape
<CENTER>...</CENTER>. Recuerde que si un navegador no soporta una etiqueta simplemente la
ignorará.
Con el atributo ALIGN de la etiqueta <IMG> ahora se puede especificar que la imagen se alinee
en el margen derecho o izquierdo de la página. Pero hay más, se puede colocar cualquier HTML de
modo que rellene el espacio vacío. Para ello se hace:

<IMG SRC="nombre_de_archivo.GIF" ALIGN=right>

Habrá veces que el texto u otros elementos que se alineen con la imagen sea más bien cortos y
quiera forzar que el texto vaya debajo de la imagen. Hay un atributo para la etiqueta <BR> para
restaurar la alineación:

Lo cual "limpiará" cualquier alineación establecida precedentemente en etiquetas <IMG>.

3.9.3 Justificación/Alineamiento del Texto

Ahora añadiremos una etiqueta más de alineamiento, la etiqueta de "divisiones" <DIV>...</DIV>,
introducida como parte del HTML 3.0. Todo el texto dentro de esta etiqueta se justificará de
acuerdo con el atributo align:

Luis de Salvador Página: 14

Introducción al HTML

Note que el atributo CENTER actúa igual que la etiqueta de Netscape

<CENTER>...</CENTER>.

3.10 Color a las páginas

El fondo de sus páginas debería quedarse justamente ahí, en el fondo. A medida que añadamos
diferentes colores o tramas tenga presente que no debe interferir con la buena legibilidad del texto.
Con algunas modificaciones a la etiqueta <BODY> (ya introducida) es posible añadir un color sólido
de fondo a sus páginas.
En un navegador tiene a su disposición 256 colores del sistema para usarlos con sus textos y
fondos. Cada color está identificado por sus valores Red (Rojo)- Green (Verde)- Blue (Azul)
(RGB), tres números entre 0 y 255, que representan cada uno la intensidad de los componentes Red
(Rojo), Green (Verde) y Blue (Azul) de un color específico. Los valores máximos de los tres
(R=255, G=255, B=255) producen el color white (blanco) y los mínimos (R=0, G=0, B=0) producen
el black (negro). Todos los colores vienen dados por diferentes tripletas RGB.
Mejor que identificar un color como algo parecido a "102,153,255" cada número se convierte de
su representación en base 10 (los números de cada día, los dígitos 0, 1, 2, 3, 4, 5, 6, 7, 8, 9) a
hexadecimal, base 16 (los "dígitos" 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). Así, el color del
ejemplo anterior lo escribiríamos en hexadecimal como "6699FF". En este ejemplo "66" es el valor
del Rojo, "99" el del Verde y "FF" el del Azul.
El código para añadir un fondo de color implica modificar la etiqueta <BODY> y que quede así:

donde XXXXXX es la representación hexadecimal (indicada por el signo # al principio) del color
deseado. Como se veía anteriormente se dispone de otras opciones para usar con la etiqueta BODY,
por ejemplo colorear el texto o los links:

<BODY BGCOLOR=#XXXXXX TEXT=#XXXXXX LINK=#XXXXXX

VLINK=#XXXXXX>

3.11 Texturas de Fondo

Los colores añaden variedad a sus páginas; pero puede ir un poco más allá si les añade una
textura de fondo. Use una imagen pequeña (GIF o JPEG) y el navegador la colocará de fondo de su
página reiterando la imagen varias veces. Algunas cosas a tener en cuenta son:
• Tamaño del archivo: Añadir una textura de fondo requerirá bajarse un archivo más. Le
sugerimos que estos archivos tengan menos de 10 KBytes de tamaño.
• Legibilidad: ¡Sea selectivo! Muchos archivos de textura distraen más que para lo que están,
permitir leer correctamente el texto. Intente usar aquellos que sean claros (con textos oscuros)
u oscuros (con textos claros); esto es, realce el contraste con el texto.
• Efecto: En los primeros navegadores que usaban fondos la página no aparecía hasta que el
archivo había bajado. Si se dispone de una conexión de baja velocidad sus visitantes pueden
tener que esperar mucho para bajarse la imagen de fondo antes siquiera de ver el contenido de
la página. No obstante, los navegadores más modernos bajan el archivo de fondo al final de
modo que al principio la página es gris, aparece el texto, las imágenes y finalmente la textura
del fondo.

Luis de Salvador Página: 15

Introducción al HTML

El formato HTML para añadir una imagen de fondo es:

donde fichero.GIF es el nombre del archivo con la imagen deseada como fondo.

3.12 Fuentes de texto

Con el HTML que presentó Netscape se dispone de algunas opciones más para dar forma al
texto. Específicamente puede tener texto de distinto tamaño tanto como coloreado. Si lo usa
juiciosamente el formateo del texto puede mejorar el aspecto de una página web. Si lo usa
arbitrariamente puede que resulten páginas de difícil lectura.
También puede crear superíndices y subíndices en expresiones matemáticas, fórmulas químicas o
marcas de pie de página.
La etiqueta <FONT>..</FONT> introducida por Netscape puede ser usada para establecer el
tamaño de letra entre 1 (más pequeño) y 7 (más grande), siendo el tamaño 3 el tamaño normal del
texto.
Recuerde que el tamaño normal dependerá de la fuente que el usuario haya elegido para su
navegador; usted está ajustando el tamaño en relación con dicha fuente.
Si un navegador no soporta las etiquetas <FONT> quizás puede utilizar las etiquetas del HTML
3.0:

El formato de la etiqueta de tamaño de letra es:

<FONT SIZE=N>bla bla bla</FONT>

donde N=1 to 7. La etiqueta FONT puede ser usada en combinación con otras etiquetas de estilo
o dentro de etiquetas de encabezados. También se puede usar la etiqueta font para efectuar un
cambio relativo de tamaño de letra:

<FONT SIZE=+1>bla bla bla</FONT>

P.ej. donde el valor +N o -N provee el desplazamiento con respecto al tamaño de letra actual.
Para fijar el tamaño de letra actual se emplea esta otra etiqueta:

Que cambia el tipo de letra base desde su valor por defecto de 3 a otro distinto. Podría utilizarlo
en una página web que se desee tenga texto más pequeño o más grande de lo habitual. De este
modo, si necesita cambiar el tamaño del texto de algunas partes del documento puede usar etiquetas
tipo "font size".
El poder de usar etiquetas de tamaño de letra relativas (p.ej. size=+2) en vez de absolutas (p.ej.
size=5) es que podemos fácilmente cambiar el tamaño de todo el texto en una página sin más que
cambiar el valor de la etiqueta <BASEFONT>. La etiqueta <BASEFONT> carece de etiqueta de
cierre; a partir de ella, el tamaño base seguirá hasta que haya otra etiqueta <BASEFONT>.

Luis de Salvador Página: 16

Introducción al HTML

3.13 Color de letra

También puede añadir un atributo a la etiqueta <FONT> para dar color a una parte del texto
usando códigos hexadecimales o los 16 reconocidos por sus nombres:

<FONT COLOR=red> ... </FONT>

3.14 Superíndices y Subíndices

Hasta la llegada del HTML 3.0 no había forma de escribir expresiones matemáticas, fórmulas
químicas u otras expresiones con sub o superíndices. Estas nuevas etiquetas suben/bajan el texto
deseado media línea y le dan un tamaño un punto menor.
El formato HTML de estas etiquetas es:

3.15 Tipo de Letra Base

Los estándares HTML 3.2 incluyen ahora una opción para la etiqueta <FONT> que permite
especificar una fuente de letra particular en pantalla. Esto puede no funcionar en todos los
navegadores. El HTML para específicar un tipo de letra concreto es:

<FONT FACE="font1,font2"> algún texto

Si el navegador del usuario soporta el atributo FACE y dispone de una de las fuentes listadas en
su ordenador entonces se mostrará el texto con la fuente escogida. De otro modo se usará la misma
fuente que para el resto de la página.
Si elige trabajar con un tipo de letra debería escoger una de las estándares o asegurarse de que los
ordenadores que puedan ver sus páginas disponen de cualquier fuente instalada.

3.16 Separadores
Las primeras extensiones HTML de Netscape ofrecían más opciones de formato para la etiqueta
<HR> (Hard Rule). El navegador de NetScape muestra por defecto un separador como línea sólida
con una apariencia tridimensional en vez de la línea sólida implementada en previos navegadores.
Una primera opción es la de anchura de la línea. Esta permite dar diferentes alturas a una línea
mediante la opción:

donde N es el tamaño de la línea en pixeles.

Otra opción de formato de la etiqueta <HR> permite ajustar la anchura de la línea; no necesita
ajustarse al ancho de la página. Se usa el siguiente código:

Luis de Salvador Página: 17

Introducción al HTML

Donde X es un número para la anchura y Z es el porcentaje del ancho de la página web. En

general recomendamos usar el porcentaje ya que se ajustará él solo a la anchura de la ventana del
navegador de quien esté viendo sus páginas (algunos por ahí fuera usan monitores de alta de
resolución y gran tamaño frente a otros que emplean pantallas de 14"). Por ejemplo:

<HR WIDTH=80 SIZE=10>

<HR WIDTH=80% SIZE=10>
Finalmente podría haber casos en que no desee tener efectos 3D en su etiqueta <HR>. Eso es tan
simple como poner:

<HR WIDTH=80% SIZE=6 NOSHADE> :

3.17 Pies de página

Una característica que siempre vale la pena en las páginas web es el pie de página al final de la
misma, y que ofrece información acerca del autor y del documento, la fecha de última actualización y
la posibilidad de enviarle al autor un comentario vía e-mail.
Este es el lugar de la etiqueta ADDRESS que precisamente le da un estilo propio a un bloque de
texto mediante cursivas y desplazando el bloque a una nueva línea.
Es una buena idea incorporar pies de página breves, informativos y consistentes entre páginas
diferentes.
Alguna información útil a incluir podría ser:
• Título o sujeto de la página actual
• Fecha de creación/actualización
• Copyright si fuera necesario
• Nombre y e-mail del autor de la página
• Nombre y link a alguna organización

El código HTML para las etiquetas address es:

<ADDRESS>
texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto
</ADDRESS>

Note que todo el código HTML dentro de la etiqueta ADDRESS es normal, así que deberíamos
modificarlo usando etiquetas de negrita, linea y link.
Ahora, suponga que alquien está leyendo su página y desea enviarle un comentario. Tendría que
escribirse su dirección, abrir otro programa y mandarle el mensaje vía e-mail. Pero se puede hacer
directamente. La manera de hacer esto es crear un link hipertexto con el tipo mailto en la URL. Cree
un link hipertexto de correo como este:

<A HREF="mailto:[email protected]">envíe un e-mail a Alan</A>

<A HREF="mailto:[email protected]">envíe un e-mail a Arturo</A>

Cuando se hace click sobre el texto envíe un e-mail a Alan o sobre envíe un e-mail a Arturo el
navegador abrirá una ventana donde componer un mensaje y mandarselo al personaje oportuno.
Además, incluso puede añadir una línea para el campo "Subject:" del e-mail:

Luis de Salvador Página: 18

Introducción al HTML

<A HREF="mailto:[email protected],
SUBJECT=Saludos desde la lección 12">envíe un e-mail a alan</A>

También es interesante incluir en el pie de página la URL de la misma, como referencia:

URL (original): http://www.mcli.dist.maricopa.edu/tut/

Luis de Salvador Página: 19

Introducción al HTML

4. INCLUYENDO IMÁGENES
Existen numerosos formatos de archivos gráficos para los ordenadores, PICT, TIFF, GIF, por
ejemplo, así como EPS, BMP, PCX, JPEG.
El modo en que un navegador muestra un gráfico es a través de un código HTML que indica
dónde encontrar el fichero en un formato simple y que puede ser interpretado por diferentes tipos de
ordenadores. Por ejemplo, cuando la información en un formato es recibida por un Macintosh el
navegador sabe cómo visualizarlo cono un formato gráfico para Mac. No obstante, cuando la misma
información la recibe un Windows PC, se muestra como un gráfico Windows.
En jerga técnica podríamos decir que el formato de imagen es independiente de la plataforma. El
HTML mismo es independiente de la plataforma, ya que el texto normal puede ser comprendido por
cualquier ordenador.
El formato estándar que se usa en los navegadores es el GIF, o Graphics Interchange Format
(Formato de Intercambio Gráfico). El formato GIF comprime la información (reduce el tamaño del
archivo) y lo traduce a código binario que puede ser enviado por la red. La compresión GIF es más
efectiva en gráficos que tengan áreas contiguas de un mismo color, e incluso es mayor cuando el
color es continuo en dirección horizontal.
El otro formato gráfico usado en el Web es el JPEG (Joint Photographic Engineering Group,
quienes diseñaron este formato). Inicialmente las imágenes JPEG no se visualizaban previamente en
la página sino en una ventana distinta, utilizando una aplicacion externa. Pero hoy día, la mayoría de
navegadores soportan imágenes JPEG, y las muestran correctamente en la misma página Web
también.
La compresión JPEG es muy efectiva para imágenes fotográficas donde los colores pueden variar
mucho en cortas distancias ("imágenes granuladas"). JPEG ofrece buena compresión también en el
tamaño del archivo, a veces hasta de un factor 10 (por ejemplo, pasando de 1500 KBytes a 150
KBytes), lo cual hace que la calidad sufra un poco.

4.1 JPEG vs GIF

Emplear sólo JPEG cuando la imagen sea una foto. Cuando sea un logo, letras, o un dibujo es
mejor utilizar GIF. Existen excepciones, pero esta es una buena regla general. Lo principal es que la
imagen ocupe lo mínimo posible y que tenga una calidad aceptable. Una página muy bonita llena de
fotos queda muy bien cuando se accede a ella de forma local, pero el usuario que acceda a través de
la red no esperará a que se termine de cargar. Esto es muy importante sobre todo si esa imagen
contenía publicidad o una información determinante de nuestra página.
Todo vale, un GIF de 256 colores generalmente en un desperdicio, con 64 colores casi no hay
diferencia y puede ocupar bastante menos. Una foto en GIF de 256 colores, en JPG puede quedar a
menos de la mitad. No olvidar que a nadie (a muy pocos) les sobra ancho de banda, y menos en
nuestro país. Como regla general, si una sola imagen ocupa más de 50k hay que hacerla adelgazar.
Si quieren poner una imagen grande (hay casos que no hay otra opción), es importante no obligar
al cliente a bajarla poniéndola directamente en la página. Es más interesante introducir una versión
mínima de digamos 150 x 100 pixels con un enlace (links como se verán más adelante) a la imagen
de gran tamaño avisando de cuanto ocupa esta antes de obligar a bajarla. Esto se conoce como
imágenes sello. Existen otras consideraciones sobre la paleta de colores, pero transcienden el alcance
de esta introducción.

4.2 Comando IMG SRC

Para incluir una imágen se utiliza el comando <IMG>. IMG acepta una gran variedad de atributos
y es muy flexible. Veamos algunos:

Luis de Salvador Página: 20

Introducción al HTML

• SRC
Indica el nombre de archivo de la imágen a incluir.
• HEIGHT
Indica la altura de la imágen. En Netscape, si la altura no coincide con la original de la imágen,
esta es estirada o comprimida para llegar a la altura especificada en este parámetro.
• WIDTH
Indica el ancho de la imágen.
• BORDER
Si la imágen tiene una conexión, especificando BORDER=0 desaparece el borde caracteristico
de una imágen con conexión. Si no deseamos que se vea el borde, este es el comando a
utilizar.
• ALIGN
Permite alinear una imagen. Acepta LEFT, RIGHT, BOTTOM, TOP, MIDDLE, etc.
• LOWSRC
Indica el nombre de archivo de la versión de carga rápida de una imagen. Muy útil para
agilizar el despliegue de una página pesada.
Ejemplo del comando con atributos es:

<IMG ALT="Una Lección Sobre:" SRC="lava.GIF" WIDTH=300 HEIGHT=259>

El orden de los atributos no tiene importancia. Se puede alterar el tamaño de la imagen insertando
números distintos de las dimensiones reales de la misma. Pero los resultados pueden no ser los
deseados. Si se introducen números muy grandes (para hacer la imagen más grande) el resultado será
un bloque. Con números pequeños, para hacer la imagen más pequeña, la imagen saldrá
distorsionada.
Atención: siempre escribid el nombre del archivo entre comillas. Asegurarse que la opción de
cargar imágenes esté activada en el navegador empleado.
Nota importante: Algunos sistemas informáticos (por ejemplo, UNIX) distinguen entre
mayúsculas y minúsculas (del inglés, "case sensitive") para los nombres de los ficheros, queriendo
esto decir que el archivo "lava.GIF" NO ES el mismo que "lava.GIF". Otros ordenadores (como el
Macintosh) los consideran un mismo archivo. Pero, incluso si su ordenador no diferencia entre
caracteres recomendamos encarecidamente que sea lo más consistente posible con estos pequeños
detalles. Incluso haciendo la distinción entre mayúsculas y minúsculas. (Muchos servidores de
WWW corren sobre UNIX).

4.3 El atributo alt="..."

Si sus páginas web van a ser vistas por gente que utilizan navegador sin capacidad gráfica (por
ejemplo, el Lynx) no podrán ver las imágenes. A veces, los usuarios desactivarán la opción para
cargar las imágenes y ahorrarse tiempo de conexión o evitar ir lentos. Un atributo de la etiqueta
<IMG ...> permite sustituir la imagen por un texto descriptivo que aparece en el lugar de la imagen.

<IMG ALT="Una Lección Sobre:" SRC="lava.GIF">

El atributo ALT="..." remplazará el icono gráfico con una cadena de texto en los navegadores de
sólo-texto (o navegador gráfico con la carga de imágenes desactivada). En algunos navegadores,

Luis de Salvador Página: 21

Introducción al HTML

cuando se utiliza la opción de navegar sin cargar imágenes, se muestra el texto ALT en un bocadillo
o letrero cuando movemos el ratón por encima del icono estándar de imagen.

Luis de Salvador Página: 22

Introducción al HTML

5. INTRODUCIENDO ENLACES (LINKS)

5.1 ¿Qué es una URL?

El poder real del Web es su habilidad para crear links hypertexto a otras informaciones. Esa "otra
información" puede estar en otras páginas web, ser gráficos, sonidos, animaciones digitales, vídeos,
programas, tablas de contenidos de un server de Gopher, una sesión remota en otro ordenador, un
archivo de software o un server de "ftp".
El World Wide Web usa un sistema de direccionamiento conocido como URLs, o Uniform
Resource Locators (a veces también conocido como "Universal Resource Locators"), para indicar la
ubicación correcta de tales elementos. Estos links hipertexto, los que vienen generalmente aparecen
subrayados en azul, son conocidos como anchors o links. En teoría las conexiones podrían ser
infinitas, navegando entre diferentes temas con solo seleccionarlos.
Imaginen una hyper-enciclopedia, donde cada tema puede ir profundizándose y ramificándose
hacia todas las áreas del conocimiento.
En la realidad es bastante complicado lograrlo ya que un sistema con bastantes enlaces tiene
graves problemas de mantenimiento que no son evidentes hasta que la red se encuentra funcionando.

5.2 Comando Link

En un documento HTML, se especifica una conexión mediante el comando <A>(Anchor).
Por ejemplo, para realizar una conexión sería: <AHREF="index.html"> </A>. Para verlo mas
claro, veamos como agregarle una conexión a nuestra 'primer página'.

Este código resulta de la siguiente forma:

Bienvenido a mi página

Esta página se encuentra en FUNDACIONCONFEMETAL,

en el servidor web de mi maquina.

Mi otra página es: INTA Hasta luego!

Luis de Salvador Página: 23

Introducción al HTML

En este caso, la dirección completa es especificada. Al seleccionar INTA saltamos a la página

principal de la empresa INTA. Cuando hacemos referencia a una página dentro del mismo directorio
donde se encuentra la página actual sólo es necesario incluir su nombre, no toda la ruta URL.
Por ejemplo, si estamos en index.html y queremos hacer una conexión a servicios.html que esta
en el mismo directorio, tan sólo es necesario incluir:
<A HREF="servicios.html">texto</A>.

5.3 Creando un enlace a un Gráfico

Anteriormete se aprendió a ver un gráfico que aparecía en una página web. Este tipo de gráfico se
denomina “in-line”. Con la etiqueta de enlace podemos incluso crear un link al archivo gráfico.
Cuando se hace click en el enlace se abrirá el archivo de la imagen y se mostrará en una página vacía
o bien su navegador automáticamente lanzará una aplicación externa de "ayuda" que muestre la
imagen.
El enlace más simple es a un fichero que se encuentre en el mismo directorio o carpeta que el
documento que lo llama. El código para crear un link hipertexto a un gráfico es el mismo que el de
antes para crear un enlace a otro documento HTML:

<A HREF="nombre_de_fichero.GIF">texto que se corresponda con el link</a>

donde nombre_de_fichero.GIF es el nombre del archivo de la imagen GIF.

5.4 Enlace a otros directorios

Las etiquetas link pueden también enlazar con un documento HTML, un gráfico en otro
directorio o una carpeta en relación con el documento que contiene el enlace.
Con HTML puede conseguir que su navegador abra cualquier documento o gráfico a un nivel de
directorios inferior del nivel actual usando el caracter "/" que indica el cambio a un nivel de
directorio más profundo, por ejemplo, "pictures".

Los sobresalientes pinos de esta, una vez, tranquila montaña fueron <A
HREF="pictures/msh.GIF">derribados como juguetes</A>.

Se puede incluso construir un link que conecte a un nivel de directorio superior usando este
código HTML:

<A HREF="../../home.htm">return to home</A>

Cada aparición del código "../" se consigue que el URL del link indique al navegador que vaya a
un nivel superior de directorio o carpeta, relativo al nivel actual; en el ejemplo, que "suba" dos
niveles de directorios o carpetas y que busque un archivo llamado home.htm.

5.5 Links a partes de una misma página

Un enlace con nombre es una marca de referencia oculta a una sección particular de su archivo
HTML. Esto se puede usar para enlazar con una sección diferente de la misma página si es larga, o ir
a una sección de otra página.
El formato HTML para crear un enlace con nombre es:

<A NAME="NAME">Texto con el que conectar a</A>

Luis de Salvador Página: 24

Introducción al HTML

Cuando usted quiera crear un link hipertexto a un enlace con nombre, use el siguiente código
HTML:

<A HREF="#xxxxx">texto que actúa como hipertexto</A>

Por ejemplo:

Vaya a <A HREF="#check">Compruebe Su Trabajo</A>

……………. 
<A NAME="check">Compruebe Su Trabajo</A>

También puede crear un link que salte a una sección de otro documento HTML que disponga de
un enlace con nombre. El HTML para construir un link a un enlace con nombre de otro documento
HTML local la forma de hacerlo es:

<A HREF=fichero.htm#NAME>Texto para activar el link</A>

y si el documento existe en otro sitio web:

<A HREF="http://www.cheese.org/pub/recipe.htm#colby"> Quesos Colby </A>

5.6 Enlaces hipergráficos

Se puede añadir imágenes para actuar de enlaces. La manera de hacer esto es poner la etiqueta
HTML para las imágenes dentro de la parte de hipertexto de la etiqueta anchor:

<A HREF="archivoX.htm"><IMG SRC="grafico.GIF"> Ir al Documento X</A>

En la página Web, este HTML mostrará una imagen y el texto Ir al Documento X. Ambos
actuarán como hiperlinks; haciendo click bien en el texto, bien en la imagen, el navegador irá al
archivo HTML archivoX.htm. La imagen sola también podría ser un hiperlink. En el World Wide
Web un "hipergráfico" generalmente viene rodeado por un recuadro del color de un hipertexto
normal, e indicará que está activo.
NOTA: Muchos navegadores permiten alterar el color del hipertexto y algunas páginas han
suprimido el recuadro alrededor de los hipergráficos. Generalmente se puede identificar un área
hiperlink en una página web comprobando si el cursor cambia al pasar por encima de una zona
activa. Generalmente, el cursor pasa de ser una flecha a ser una mano.
Desde el punto de vista del diseño, recomendamos que si usa imágenes como hiperlinks, incluya
también un texto como link o que use el atributo ALT= en la etiqueta <IMG...> por si el internáuta
ha desactivado la carga de imágenes.

5.7 Marco de la imagen

Se puede eliminar el recuadro que incluyen los navegadores en las imágenes, especialmente si
tenemos una imagen sin bordes rectangulares. El usuario puede ver con facilidad si una imagen hace
de enlace o no simplemente colocando el ratón encima de ella.
Se puede quitar el marco añadiendo un atributo a la etiqueta <img...>:
<A HREF="bigpict.GIF"><IMG SRC="lilpict.GIF" BORDER=0>

Luis de Salvador Página: 25

Introducción al HTML

5.8 Imágenes Sello

Anteriormente le previnimos contra el uso de grandes imágenes en sus página web porque los
usuarios podrían tener que esperar mucho tiempo a que bajen. Un método para evitar esto es crear
copias en miniatura de las imágenes (sellos o Thumbnails) que aparecerán como gráficos in-line.
Después, usando los mismos pasos anteriores, puede hacer que el sello actúe como un hiperlink que
enlace con la imagen real, a tamaño real. De este modo, las imágenes de gran tamaño sólo se bajarán
si el usuario decide verlas.

5.9 Imágenes con varios links

A veces resulta interesante poder tener diferentes enlaces seleccionando las distintas partes de una
misma imagen. El HTML necesario para tener un mapa de imagen desde el cliente es:

<IMG SRC="imagen.GIF" USEMAP="#map_name">

Donde imagen.GIF es el nombre del archivo de la imagen y map_name es un anchor link en algún
lugar en el mismo archivo HTML:

Cada línea en la etiqueta <MAP>...</MAP> identifica una región activa diferente, especificada
por las coordenadas COORDs=.
X1,y1 son las localizaciones horizontal y vertical en pixeles de la esquina superior izqueirda (en
relación con la esquina superior izquierda de toda la imagen), mientras que x2,y2 son las
localizaciones horizontal y vertical (en pixeles) de la esquina inferior derecha. URL1, URL2,... son
las URLs (o nombres de archivo si son archivos locales) con los que se corresponderá la región dada
cuando se haga click sobre ella.
Existen programas que permiten contruir mapas sobre imágenes de una manera gráfica e
interactiva. Uno de los más conocidos es MAPEDIT.

Luis de Salvador Página: 26

Introducción al HTML

6. LISTAS Y TABLAS
Las listas son simplemente eso: listas. Exactamente igual que cuando hacemos una lista de
compras para el supermercado. Las listas son muy simples. Hay diferentes tipos: listas desordenadas,
ordenadas y de definiciones.

6.1 Listas desordenadas

Este es un ejemplo de lista desordenada:

<UL>
<LI>primer elemento
<LI>segundo elemento
</UL>

La imágen que muestra es:

• primer elemento
• segundo elemento

Confeccionar una lista es muy simple. Primero especificamos el tipo de lista, en este caso UL
(unordered list) de lista desordenada. Luego cada item de la lista se indica con LI (list item). Verán
también que hay un parámetro en UL, el TYPE="disc". Eso significa que el puntito que aparece a la
izquierda de cada item de la lista sea un disco. También existen CIRCLE y SQUARE.

<UL TYPE="square">
<LI>primer elemento
<LI>segundo elemento
</UL>

Se pueden mezclar tipos de items en el ejemplo anterior. Es util para diferenciar items. No todos
los navegadores soportan esto.

6.2 Listas ordenadas

Se definen exactamente igual a las desordenadas, salvo que se utiliza el comando OL (ordered
list). Veamos un ejemplo:

<OL>
<LI>primer elemento
<LI>segundo elemento
</OL>

En las listas ordenadas la marca pasa a ser un numeral que indica el orden de cada item. Muy útil
para numerar listas automáticamente, ya que no hay que ingresar en número de cada item a mano. Al
igual que en las listas desordenadas, se puede elegir mediante el parámetro TYPE el tipo. Existen A,
a, I, i, y por defecto 1. Veamos como quedan:

<OL TYPE=A>
<LI>primer elemento

Luis de Salvador Página: 27

Introducción al HTML

<LI>segundo elemento
</OL>

Se pueden incluir listas dentro de listas de una forma muy sencilla:

<OL TYPE=A>
<LI>primer elemento
<LI>segundo elemento
<UL TYPE="square">
<LI>entrada en el segundo
<LI>otra entrada en el segundo
</UL>
<LI>tercer elemento
</OL>

6.3 Listas descriptivas

A diferencia de las listas ya estudiadas, las listas descriptivas marcan sus entradas no con una
marca tipográfica (o topo) sino con su propia secuencia de indentación. El formato para una lista
descriptiva es:

<dl>
<dt> descripción título1
<dd> descripción descripción1
<dt> descripción título2
<dd> descripción descripción2
<dt> descripción títuloN
<dd> descripción descripciónN
</dl>

Las etiquetas <DL> .... </DL>; incluyen pares alternativos de títulos descriptivos, <DT>, y
descripciones <DD>. Un navegador generará la lista con cada descripción indentada para separarla
del título.
Visto en un navegador, el ejemplo anterior sería:

descripción título1
descripción descripción1
descripción título2
descripción descripción2
descripción títuloN
descripción descripciónN

La lista descriptiva podría ser usada como un glosario de definiciones.

6.4 Tablas en HTML

Las tablas son uno de los elementos mas versátiles del HTML. Sirven para todo. No siempre
existieron las tablas. En la primera versión de HTML, el HTML V1.0, no había tablas. Aparecen en
la versión 2.0. Hoy casi todos los navegadores soportan las tablas, aunque existen algunos que no lo
hacen.

Luis de Salvador Página: 28

Introducción al HTML

Una tabla se define con el comando <TABLE> y debe finalizar siempre con </TABLE>. Cerrar
una tabla es muy importante, sino la página puede aparecer totalmente diferente si nos olvidamos de
un simple </TABLE>. Generalmente no aparecerá la tabla.
Imaginen una hoja cuadriculada. Una tabla es eso, con sus filas (TR) y columnas (TD). Primero
veamos una tabla simple:

<TABLE>
<TR>
<TH>Año
<TH>Ingresos
<TH>Gastos
<TR>
<TD>1997
<TD>100
<TD>200
<TR>
<TD>1998
<TD>200
<TD>100
</TABLE>

Esa tabla esta compuesta de la siguiente forma: Primero comienza la tabla con <TABLE>. Luego
viene <TR>, indica que comienza una nueva fila (horizontal) de la tabla. Una tabla por lo menos
debe tener una fila. Luego viene <TH>, que indica que comienza una columna. A continuación de
este tag se coloca la información. Ven que en la segunda fila usa <TD> en vez de <TH>. TH, que
significa TABLE HEADING, se emplea cuando la información contenida es el nombre de una
categoría. Simplemente lo que hace es resaltar la información. TD significa TABLE DATA y no
resalta la información. TD y TH aceptan los siguiente parámetros:
• HEIGHT
Indica la altura de la celda. Para especificar el tamaño en pixels solo ingresar la contidad, ej:
HEIGHT=340 ; también se puede ingresar el tamaño en porcentajes, ej: HEIGHT=30%
• WIDTH
Indica el ancho de la celda.
• ALIGN
Permite alinear el texto dentro de una celda. Acepta LEFT, RIGHT, CENTER.
• VALIGN
Permite alinear el texto verticalmente dentro de una celda. Acepta TOP, BOTTOM, CENTER.
• BGCOLOR
Permite especificar el color de fondo de una celda. (sólo se ve en Netscape 3.0)
• ROWSPAN=n
Indica que esa celda se extiende n filas.
• COLSPAN=n
Indica que esa celda se extiende n columnas.
A continuación se muestra un ejemplo de cómo emplear estos comandos:

<TABLE BORDER=1 WIDTH=400 HEIGHT=100>

Luis de Salvador Página: 29

Introducción al HTML

<TR>
<TH COLSPAN=3>BALANCE DE LA EMPRESA
<TR>
<TH>Año
<TH>Ingresos
<TH>Gastos
<TR>
<TD>1997
<TD BGCOLOR="#553366" ALIGN=CENTER>100
<TD ALIGN=CENTER>200
<TR>
<TD>1998
<TD ALIGN=CENTER>200
<TD ALIGN=CENTER>100
</TABLE>

Hoy en día, casi todo esta hecho de tablas. Netscape 3.0 tiene extensiones para hacer texto de
multicolumnas automáticamente, pero no son estándar. Como regla general, aléjense de lo que no es
estándar todavía.

6.5 Tablas Fantasma

Las tabla con bordes son útiles pero otras veces querremos crear diseños estilo tabla pero sin
bordes. Les llamamos tablas "fantasmas" porque para el lector puede que no sea obvio que esté
viendo una tabla. Tienen mucha utilidad cuando se quiere crear en la página la ilusión de que
disponen de frames o la división de una página en zonas distinguidas.
Una tabla fantasma se construye igual que una tabla excepto que la etiqueta <TABLE> es así:

En algunos navegadores basta con omitir el atributo "border" para no mostrar las líneas que
delimitan las celdas. En otros navegadores es preciso establecer el borde a 0 pixeles para obtener
dicho efecto.

6.6 Coloreando Tablas

Algunos navegadores soportan HTML para colorear tablas, filas y celdas individuales. Usaremos
los códigos de color hexadecimales para dar color al fondo de nuestras páginas y en la lección 18
para dar color al texto. Es tan simple como insertar BGCOLOR=#FF0000 como atributo a las
diferentes etiquetas <TABLE>:
• Da color al área definida por la tabla <TABLE BGCOLOR=#880000>
• Da color al área definida por una única fila <TR BGCOLOR=#880000>
• Da color al área definida por una única celda <TD BGCOLOR=#880000>

Luis de Salvador Página: 30

Introducción al HTML

7. FRAMES
Los Frames fueron introducidos por Netscape hace ya varios años. Los principales navegadores
que soportan frames son Netscape Navigator 2.0 y posteriores, e Internet Explorer 3.0 y posteriores.
Los Frames, que traducido sería algo asi como cuadros o marcos, son áreas definidas dentro de una
misma ventana, cada cual como una página independiente, con su propio código, colores, titulo, etc.
Recientemente se implementó la posibilidad de utilizar Frames invisibles, y asi no 'cortar' visualmente
una página.
En muchas ocasiones, se puede sustituir el empleo de los frame por el empleo de tablas. Si nos
encontramos en ese caso, es mejor emplear tablas y así nuestra página será más portable.

7.1 Creando Frames

Un documento con Frames tiene la estructura basica como un documento normal de HTML, solo
que el elemento <BODY> es remplazado por <FRAMESET>, que describe los sub-documentos que
contendrá cada FRAME.
FRAMESET acepta dos atributos, ROWS (filas) y COLS (columnas). Dentro de este elemento,
colocamos el comando FRAME. FRAME, al igual que el comando IMG (imágen) acepta el
parámetro SRC. Si queremos que en un frameset se cargue una página llamada menu.htm sería:
<FRAME SRC="menu.htm">.
Por ejemplo. Supongamos que queremos dividir una página en dos, de un lado el menú, y de otro
lado donde se despliega la información solicitada en el menú. El código para esto sería asi:

Como ven, el tamaño se puede especificar en porcentajes poniendo el símbolo de porcentaje '%' al
final del número, en pixels poniendo solo el número, y un valor especial es asterisco '*' que significa
utilizar todo el espacio que queda. Esto es útil para asegurarnos que un frame siempre tenga un
espacio mínimo disponible. Por ejemplo, si especificamos un menú de 200 pixels y el resto con '*',
esto aseguraría que el menú nunca fuera menos de 200 pixels. Notaron que a cada frame se le da un
nombre, esto es muy importante, ya que es la manera de especificar en que frame queremos
desplegar la información.

7.2 Parámetro TARGET

Supongamos que tenemos creadas las dos frames del ejemplo anterior, un menú del 30% y la
información en el 70%. Si seleccionamos una conexión (link) en el menú veremos la información
desplegada en el 30% del menú y no en el área de la información. Esto se soluciona empleando el
parámetro TARGET.
Supongamos que en el menú tenemos 3 opciones
1. Volver a página principal
2. Ver lista de hoteles
3. Ver lista de restaurantes

Luis de Salvador Página: 31

Introducción al HTML

Estas tres opciones están en el menú, ahora ¿como hacemos para que cuando selecionamos lista
de restaurantes la información aparezca en el otro frame, el mas grande?

<HTML>
<HEAD>
</HEAD>
<BODY>
<OL>
<LI>
<A HREF="principal.htm" TARGET="_top">
Volver a página principal</A>
<LI>
<A HREF="hoteles.htm" TARGET="z2">
Lista de hoteles</A>
<LI>
<A HREF="restaur.htm" TARGET="z2">
Lista de restaurantes</A>
</OL>
</BODY>
</HTML>

Adviertan que el enlace utiliza un nuevo parámetro: TARGET.

<A HREF="hoteles.htm" TARGET="z2">Lista de hoteles</A>

El parámetro TARGET especifica en que FRAME desplegamos la información seleccionada. En

este caso es z2, que es el nombre que le di al FRAME. Cuando define el FRAME, utilicé el
parámetro NAME="z2". Esto le da un nombre lógico al FRAME al cual hacemos referencia con el
parámetro TARGET en una conexión. TARGET también se puede usar con el elemento BASE. Ej:
<BASE TARGET="z2">.
Esto se utiliza cuando por ejemplo tenemos muchos enlaces, las cuales todas se despliegan en un
mismo FRAME, por ejemplo si tuviéramos 30 selecciones en el menú. En vez de poner en cada
enlace:
<A HREF="hoteles.htm" TARGET="z2">Lista de hoteles</A>,
Se introduce principio:
<BASE TARGET="z2">
y todas las conexiones automaticamente se desplegarian en el FRAME z2.
La primer conexión del ejemplo,
<A HREF="principal.htm" TARGER="_top">Volver a página principal</A>
tiene un TARGET especial.

7.3 TARGET especiales o mágicos

• TARGET="_blank"
Este TARGET hace que el enlace se cargue siempre en una nueva VENTANA. Esta nueva
ventana no tendra nombre.
• TARGET="_self"
Este TARGET hace que el enlace se cargue siempre en el mismo FRAME de la página actual. Es
la opción por defecto.
• TARGET="_parent"

Luis de Salvador Página: 32

Introducción al HTML

Este TARGET hace que el enlace se cargue siempre en el FRAMESET que contiene al FRAME
actual.
• TARGET="_top"
Este TARGET hace que el enlace se cargue siempre en la ventana del documento actual sin
FRAMES.

7.4 FRAMES invisibles.

Crear FRAMES invisibles es muy sencillo. Tengan en cuenta que sólo quienes utilizan Netscape
Navigator 3.x o MS Internet Explorer 3.x podrán ver FRAMES invisibles. Los navegadores de
Netscape y Microsoft, incorporaron a partir de las versiones 3.x, la posibilidad de controlar el borde
de un FRAME. Se puede hacer disminuir, agrandar, se puede poner a valor cero, y ahi tenemos el
FRAME invisible. El siguiente codigo muestra un ejemplo de FRAMES invisibles:

<FRAMESET FRAMEBORDER="0" FRAMESPACING="0" BORDER="0" COLS="200,*">

Como se ve, se crean dos FRAMES. El '1' llamado 'menú' de 200 pixels de ancho, el '2' llamado
'texto' de tamaño el resto de ventana que queda. Noten que en la declaración del FRAMESET hay
dos parámetros:

FRAMEBORDER=0
FRAMESPACING=0

A pesar de que ambos hacen lo mismo, en necesario poner ambos para que se vea correctamente
con Netscape y Explorer. Esperemos que en un futuro cercano se haga estándar.

Luis de Salvador Página: 33

Introducción al HTML

8. GIFS ANIMADOS
Los GIFs animados son muy simples de crear y le agregan un toque de movimiento a una página,
que realza su impacto visual. Los mejores usos que se han visto son logos animados, un ojo que hace
una guiñada, luces de autos que se apagan y encienden, etc. Por ejemplo, imaginen la página de un
informativo de TV en Internet. Junto a la opción de noticias de último momento una luz roja (como
un LED) que se apaga y se enciende. El GIF animado, de sólo 2 cuadros, crea la ilusión de que esa
opción en constantemente activa, siempre alerta.

8.1 ¿Qué es un GIF animado?

Un GIF animado es una GIF como cualquier otro, solo que contiene varios cuadros dentro de sí.
El formato GIF hace años que soporta esto, pero nunca fue muy utilizado. Pero ahora, parece esta
extraña opción de el formato GIF encontró su destino. Un GIF animado en realidad esta compuesto
por varios cuadros, siendo cada cuadro un GIF creado por separado anteriormente. Cuando
juntamos estos cuadros en un GIF, el GIF muestra cada cuadro cierto tiempo, creando la ilusión de
una animación. Podemos especificar el tiempo que cada cuadro sea mostrado, efectivamente
acelerando y enlenteciendo la animación.

8.2 Creando un GIF animado

Crear un GIF animado consta de dos etapas:
1. Crear cada GIF por separado
2. Unir los GIFs sueltos en un GIF animado
Un GIF animado nace de varios GIFs separados. Primero hay que crear cada GIF con un progama
permita salvar la imágen con formato GIF. Conviene no usar GIFs de mas de 64 colores, ya que no
olviden que el GIF final ocupará aproximadamente la suma de todos los GIFs que usemos.
Se proporciona un editor de GIF a los alumnos que lo deseen. Este editor es muy sencillo y
autoexplicativo.
Sugerencias: eligir loop infinito, Netscape parece que no le gustan los GIFs animados con un
número específico de loops. Si el GIF es grande pero sólo hay movimiento en una área pequeña,
carguen como primer cuadro el GIF entero, y los cuadros siguientes recórtenlos para que solo sea la
parte animada.

Luis de Salvador Página: 34

Introducción al HTML

9. FORMULARIOS

9.1 Introducción
Los formularios se emplean para capturar datos de una ventana HTML. Estos datos se pueden
utilizar más tarde con distintos propósitos: comunicarse con el servidor invocando un programa CGI
o ejecutando aplicaciones locales utilizando, por ejemplo, JavaScript.

9.2 Etiqueta FORM

Un formulario se encuentra siempre encerrado entre las etiquetas:

<FORM> …….. </FORM>

Se pueden incluir varios formularios en una misma página pero nunca se han de proporcionar
anidados.
La etiqueta <FORM> tiene tres atributos que en ningún caso son obligatorios:
• ACTION: especifica la dirección URL del programa CGI al que deben enviarse los datos del
formulario para su procesamiento; si este atributo se omite, se interpreta que debe ser usada la
dirección URL del documento que contiene el formulario que está siendo contestado.
• METHOD: estable el método de transferencia de los datos a la aplicación CGI. En la práctica
se emplean dos valores:
• GET: los parámetros se pasan al programa CGI como parámetro de entrada. Se
encuentran formando parte de la dirección URL. Para delimitarlos, tras la dirección URL
se coloca el símbolo “?” y entre cada pareja nombre valor el símbolo “&”. La URL tiene
una cadena de datos máxima permitida, fuera de la cuál los parámetros se pierden. El
programa CGI recibirá la entrada en la variable de entorno QUERY_STRING.
• POST: hace que los datos del formulario sean enviados como parte de la entrada estándar,
en lugar de como parte del URL. Como el servidor no enviará un EOF, se puede consultar
el tamaño de la misma en la variable de entorno CONTENT_LENGTH.
• Enctype: tipo de encriptado. Actualmente sólo se admite un valor que además se encuentra
activado por defecto.
Ejemplos de formularios son los siguientes:
<FORM ACTION=http://www.servidor.com/cgi-bin/programa.cgi METHOD=”Get”>
……
</FORM>
<FORM ACTION=aplicacion.cgi METHOD=”Post”> …… </FORM>

9.3 Etiqueta INPUT

La etiqueta INPUT se emplea para especificar un elemento de entrada dentro de un formulario.
Tiene los siguientes atributos:
• Name: indica el nombre simbólico de la variable en la que se introducen los datos. Por ejemplo:

<INPUT name = “variable”>

• Value: indica un valor inicial para la variable correspondiente:

<INPUT name=”variable” value=”25”>

Luis de Salvador Página: 35

Introducción al HTML

• Size: indica el tamaño físico del campo de entrada de caractéres. Si se omite, toma el valor por
defecto de 20. Permite definir varias líneas de entrada para un campo, de la forma: size=
ancho,alto. Se emplea generalmente en entradas de texto.
• MaxLength: establece el número máximo de caracteres que son admitidos como entrada. Se
emplea fundamentalmente en entradas de texto.
• Type: define el tipo de entrada a pedir, pudiendo tomar los siguientes valores:
• Text: es el valor por defecto, indica que la entrada es tipo texto.
• Password: igual que el anterior pero muestra en pantalla asteriscos cuando se introducen
datos.
• Hidden: es un almacén interno de datos. No se muestra el valor dado por defecto pero sí
se envía al CGI.
• Checkbox: es un botón de selección que se puede encontrar activado o desactivado.
<INPUT TYPE=”checkbox” NAME=”var” VALUE=1> Pregunta <BR>
• Radio: es similar al anterior, pero está asociada a varios elementos Input de forma que
cuando uno se encuentre activado, los demás se desactiven. Por ejemplo:

<INPUT TYPE=”radio” NAME=”var” VALUE=1> Opción 1 <BR>

<INPUT TYPE=”radio” NAME=”var” VALUE=2 CHECKED> Opción 2 <BR>
<INPUT TYPE=”radio” NAME=”var” VALUE=3> Opción 1 <BR>

• Reset: provoca que todos los campos del formulario retornen a su valor inicial.
• Submit: fuerza el envío de datos a un programa CGI.
• Image: su función
• Checked: se usa únicamente para las entradas tipo Radio o Checkbox, indicando que
indicialmente la casilla se encuentra activada.

9.4 Otras etiquetas de formulario: Select y Textarea

La etiqueta SELECT se emplea para construir una lista en la que el usuario pueda seleccionar
entre varias opciones. Según los parámetros que se propocionen, el usuario podrá seleccionar una
opción o más de una. Sus atributos son:
• Name: nombre de la variable.
• Size: forma que toma el elemento SELECT. Si toma como valor 1 aparecerá como una lista
desplegable. Si toma valor 2 o mayor aparecerá una lista de selección con una barra de
desplazamiento.
• Multiple: si se incluye, indica que se pueden seleccionar varios elementos simultáneamente de
la lista. No toma ningún valor
Cada uno de los elementos de la lista viene indicado por el atributo OPTION. Este tiene los
siguientes atributos:
• Value: el valor que se asigna a la variable cuando se selecciona una opción.
• Selected: indica que la opción señalada es la que se toma por defecto.
Un ejemplo de la etiqueta selected es el siguiente:
<SELECT MULTIPLE SIZE=2 NAME=”Titulo”>
<OPTION VALUE=”1”>Técnico
<OPTION VALUE=”2”>Diplomado
<OPTION VALUE=”3”>Licenciado
</SELECT>

Luis de Salvador Página: 36

Introducción al HTML

La etiqueta TEXTAREA se emplea para introducir un texto de varias líneas. Con esta etiqueta se
colocan de forma automática barra de desplazamiento en los laterales. Los atributos son los
siguientes:
• Name: nombre de la variable que almacena el texto.
• Rows: número de filas de la ventana de texto.
• Cols: número de columnas.
La etiqueta TEXTAREA se emplea para apertura y fin (comando contenedor). El texto entre
ambas etiquetas se considera como texto inicial y que tiene preformato. Un ejemplo de esta etiqueta
es:

<TEXTAREA NAME=”texto” COLS=50 ROWS=10>Introduzca aquí

la información que considere necesaria
</TEXTAREA>

10. HOJAS DE ESTILO

Las hojas de estilo (CSS) permiten añadir o modificar el estilo de la presentación de las páginas y
las etiquetas HTML, permitiendo un mayor control de la presentación de la página en el cliente.
Naturalmente, la inclusion de hojas de estilo hace la página menos portable.
Los estilos se encierran entre llaves y separados por comas. En el siguiente ejemplo se incluyen
dos definiciones de estilo para las etiquetas P y H.
<HTML><BODY>
<STYLE TYPE="text/css">

</STYLE>

<H1>ESTILO DE H1</H1>

ESTILO ANTES DEL PARRAFO<BR>

<P>
ESTILO DESPUES DEL PARRAFO<BR>
</BODY>
</HTML>

Como se puede ver en el ejemplo, cada estilo está formado por un par: "atributo:valor;". Es muy
importante utilizar una correcta sintaxis. Si es necesario incluir un string, este ha de encerrarse entre
comillas simples. Los estilos se pueden especificar directamente en CSS o en JavaScript. A
continuación los veremos en CSS.

10.1 Estilos en archivos externos

Se pueden especificar los estilos desde un archivo externo. En ese caso, en el archivo no hace
falta incluier las etiquetas STYLE. Para incluir el estilo en el documento HTML es necesario
referenciarlo como un link de la siguiente forma:

<LINK REL=STYLESHEET TYPE="text/css" HREF="http://ruta/mihojadeestilo.htm">

Luis de Salvador Página: 37

Introducción al HTML

Esto tiene una importancia capital, pues permite con una única definición de estilo establecer la
apariencia de todas las páginas y cambiarlas de apariencia simultáneamente.

10.2 Clases en los estilos

Se utilizan para matizar el comportamiento de una etiqueta. Por ejemplo, si se quiere que ciertos
párrafos de nuestro documento sean rojos y otros verdes. Para ello se puede utilizar la etiqueta <P>
con un atributo CLASS que permita distinguir entre dos tipos de párrafo.
Por ejemplo:
<STYLE TYPE="text/css">
all.GREENBOLD {color:#44CC22; font-weight:bold;}
</STYLE>
La página de estilo anterior permite definir para todas las etiquetas (all) un clase GREENBOLD.
Puedo entonces distinguir las etiquetas en función de la clase de la siguiente forma:
<H1 CLASS=GREENBOLD>Cabecera en verde</H1>
<P CLASS = GREENBOLD>Parrafo en verde</P>
<BLOCKQUOTE CLASS = GREENBOLD>
Blockquote en verde.
</BLOCKQUOTE>

10.3 Criterio de selección contextual

Permite definir un estilo que se aplica a una etiqueta cuando se encuentra anidada dentro de otra.
Por ejemplo, definir un estilo para cuando se encuentre EM dentro de H1:
<STYLE TYPE="text/css">
H1 EM {color:green;}
</STYLE>
Su uso sería el siguiente:
<H1>No esta en verde <EM> si esta en verde </EM> </H1>
<EM>No esta en verde</EM>

11. GUÍA DE ESTILOS

A continuación se mostrarán los distintos estilos que se pueden incluir.

11.1 Tipo de fuente

11.1.1 Tamaño de fuente

Sintaxis CSS: font-size
Sintaxis JavaScript: fontSize
En valor absoluto se puede expresar como:
xx-small
x-small
small
medium
large
x-large
Valor inicial: medium
Se aplica a: todos los elementos.
Herencia: si

Luis de Salvador Página: 38

Introducción al HTML

Valores en porcentaje: relativa a la fuente del elemento padre

xx-large
Se puede expresar como tamaño relativo a elemento padre.
Valores posibles son:
larger
smaller
Se puede expresar como medidas en puntos: 24pt. O como porcentaje:
Sintaxis CSS
P {font-size:12pt;}
EM {font-size:120%};
BLOCKQUOTE {font-size:medium;}
B {font-size:larger;}
Sintaxis JavaScript
tags.P.fontSize = "12pt";
tags.EM.fontSize = 120%;
tags.BLOCKQUOTE.fontSize = "medium";
tags.B.fontSize="larger";

11.1.2 Tipo de fuente

Sintaxis CSS: font-family
Sintaxis JavaScript: fontFamily
Se puede expresar un lista de fuentes y se seleccionará aquella que este presente en el sistema. En
caso contrario, se utilizará la fuente por defecto. Las cinco fuentes genericas son:
•serif
• sans-serif
• cursive
• monospace
•fantasy
CSS Ejemplo de sintaxis
<STYLE TYPE="text/css">
H1 {fontFamily:Helvetica, Arial, sans-serif;}
</STYLE>
Valores posibles: fontFamily
Valor inicial: fuente por defecto definida por el usario.
Se aplica a: todos los elementos
Herencia: si
Valores en porcentaje: NA
JavaScript Ejemplo de sintaxis
<STYLE TYPE="text/javascript">
tags.H1.fontFamily="Helvetica, Arial, sans-serif";
</STYLE>

11.1.3 Oscuridad de la fuente

Sintaxis CSS: font-weight
Sintaxis JavaScript: fontWeight
CSS Ejemplo de sintaxis
<STYLE>
BLOCKQUOTE {font-weight: bold;}
</STYLE>

Luis de Salvador Página: 39

Introducción al HTML

JavaScript Ejemplo de sintaxis

<STYLE>
tags.BLOCKQUOTE.fontWeight="bold";
</STYLE>
Se puede especificar como un valor numerico de 100 a 900, donde 100 es el más claro.
Valores posibles: normal, bold, bolder, lighter, 100 - 900
Valor inicial: normal
Se aplica a: todos los elementos
Herencia: si
Valores en porcentaje: N/A

11.1.4 Estilo de la fuente

Sintaxis CSS: font-style
Sintaxis JavaScript: fontStyle
En el siguiente ejempo, el texto enfatizado dentro de H1 aparece en itálica.
CSS Ejemplo de sintaxis
<STYLE>
H1 EM {font-style: italic;}
</STYLE>
JavaScript Ejemplo de sintaxis
<STYLE>
contextual(tags.H1, tags.EM).fontStyle = "italic";
</STYLE>

11.2 Propiedades del texto

Permite establecer propiedades de texto como ancho de línea o decoración del texto.

11.2.1 Ancho de línea

Sintaxis CSS: line-height
Sintaxis JavaScript: lineHeight
Establece la distancia entre dos líneas de texto. Solo se aplica a elementos de bloque. Si se
especica un valor numerico sin unidades la distancia se determina multiplicando dicho valor por el
tamaño de la fuente.
Por ejemplo:
fontSize:10pt;
line-height:1.2; /* line height is now 120%, ie 12pt */
font-size:20pt; /* line height is now 24 pt, */
Ejemplo empleando unidades:
line-height:0.4in;
line-height:18pt;
Porcentajes
line-height:150%;
Valores posibles number, length, percentage, normal
Valor inicial: normal for the font
Se aplica a: etiquetas de bloque
Herencia: si
Valores en porcentaje: se refiere al tamaño de la fuente

Luis de Salvador Página: 40

Introducción al HTML

11.2.2 Decoración del texto

Sintaxis CSS: text-decoration
Sintaxis JavaScript: textDecoration
Si el elemento sobre el que se aplica no tiene decoración (por ejemplo <IMG> o es un elemento
vacío) no tiene efecto. Por ejemplo:
BLOCKQUOTE {text-decoration: underline;}
Las opciones no incluyen el color, ya que este se deriva de la propiedad color.

11.2.3 Transformación del texto.

Sintaxis CSS: text-transform
Sintaxis JavaScript: textTransform
Valores posibles: none, underline, line-through, blink
Valor inicial: none
Se aplica a: todos los elementos
Herencia: no
Valores en porcentaje: N/A
Propiedades sobre mayúsculas/minúsculas
• capitalize: primer caracter de cada palabra en mayúsculas.
• uppercase: todas en mayúsculas
• lowercase: todas en minúsculas
• none: se neutraliza la herencia.
Por ejemplo:
CSS Ejemplo de sintaxis
<STYLE TYPE="text/css">
H1 {text-transform:capitalize;}
H1.CAPH1 {text-transform: uppercase;}
</STYLE>
JavaScript Ejemplo de sintaxis
<STYLE>
tags.H1.textTransform = "capitalize";
classes.CAPH1.H1.textTransform = "uppercase";
</STYLE>

11.2.4 Alineación de texto

Sintaxis CSS: text-align
Sintaxis JavaScript: textAlign
Ejemplo:
tags.P.textAlign = "center"
CSS Ejemplo de sintaxis
<STYLE TYPE="text/css">
all.RIGHTHEAD {text-align:right; color:blue;}
P.LEFTP {text-align:left; color:red;}
</STYLE>
Sintaxis JavaScript
<STYLE TYPE="text/javascript">
classes.RIGHTHEAD.all.textAlign="right";
classes.LEFTP.P.textAlign="left";
classes.RIGHTHEAD.all.color="blue";

Luis de Salvador Página: 41

Introducción al HTML

classes.JUSTP.P.color="red";
Valores posibles: left, right, center, justify
Valor inicial: left
Se aplica a: etiquetas de bloque
Herencia: si
Valores en porcentaje: N/A

11.2.5 Indentación
Sintaxis CSS: text-indent
Sintaxis JavaScript: textIndent
Puede ser un valor numerico o en porcentaje
P {text-indent:3em;}
Valores posibles: length, percentage
Valor inicial: 0
Se aplica a: etiquetas de bloque
Herencia: si
Valores en porcentaje: refer to parent element's width
CSS Ejemplo de sintaxis
<STYLE TYPE="text/css">
P.INDENTED {text-indent:25%;}
</STYLE>
JavaScript Ejemplo de sintaxis
<STYLE TYPE="text/css">
classes.INDENTED.P.textIndent="25%";
</STYLE>

12. PROPIEDADES DE ETIQUETAS DE BLOQUE

Se entiende por tales la que comienzan siempre en una nueva línea y son tratadas por CSS como
si el texto estubiese rodeado por una caja. Por ejemplo, <H1> and <P> son etiquetas de bloque, pero
<EM> no.

12.1.1 Margenes
Expresan la distancia mínima entre los bordes de dos elementos adyacentes.
Sintaxis CSSs: margin-left, margin-right, margin-top, margin-bottom, margin
Sintaxis JavaScripts: marginLeft, marginRight, marginTop, marginBottom and margins()
En CSS se pueden establecer todos los margenes con el mismo valor empleando la propiedad
"margin" con el orden: arriba, derecha, abajo izquierda.
Sintaxis CSS
/* top=10pt, right=20pt, bottom=30pt, left=40pt */
P {margin:10pt 20pt 30pt 40pt;}
Se puede expresar como una longitud o un porcentaje.
Valor inicial: 0
Se aplica a: todos los elementos
Herencia: no
Sintaxis JavaScript
/* top=10pt, right=20pt, bottom=30pt, left=40pt */
tags.BODY.margins("10pt", "20pt", "30pt", "40pt");
/* Todos los márgenes a 40 pt */
tags.P.margins("40pt");

Luis de Salvador Página: 42

Introducción al HTML

12.1.2 Padding
Espacio entre el borde de un elemento y su contenido.
Sintaxis CSSs: padding-top, padding-right, padding-bottom, padding-left, paddings
Sintaxis JavaScripts: paddingTop, paddingRight, paddingBottom, paddingLeft, and paddings()
Valores posibles en longitud y porcentaje.
Valor inicial: 0
Se aplica a: todos los elementos
Herencia: no
Se puede utilizar solamente padding en CSS de la misma forma que margin.
Sintaxis CSS
/* top=10pt, right=20pt, bottom=30pt, left=40pt */
P {padding:10pt 20pt 30pt 40pt;}
/* set the padding on all sides of P to 40 pt */
P {padding:40pt;}
Sintaxis JavaScript
/* top=10pt, right=20pt, bottom=30pt, left=40pt */
tags.P.paddings("10pt", "20pt", "30pt", "40pt")
/* set the padding on all sides of P to 40 pt */
tags.P.paddings("40pt");

12.1.3 Ancho de bordes

Establece el ancho del borde alrededor del elemento.
Sintaxis CSSs: border-top-width, border-bottom-width, border-left-width, border-right-width,
border-width
Sintaxis JavaScripts: borderTopWidth, borderBottomWidth, borderLeftWidth, borderRightWidth,
and borderWidths()
Se puede emplear en CSS border-width para especificar los cuatro simultáneamente.
/* top=1pt, right=2pt, bottom=3pt, left=4pt */
P {border-width:1pt 2pt 3pt 4pt;} /* CSS */
tags.P.borderWidths("1pt", "2pt", "3pt", "4pt"); /* Sintaxis JavaScript */
/* set the border width to 2 pt on all sides */
P {border-width:40pt;} /* CSS */
tags.P.borderWidths("40pt"); /* Sintaxis JavaScript */
No se puede utilizar valores en porcentaje

12.1.4 Estilo del borde

Sintaxis CSS: border-style
Sintaxis JavaScript: borderStyle

12.1.5 Color del borde

CSS name: border-color
Sintaxis JavaScript:borderColor
Valores posibles:, none, solid, double, inset, outset, groove, ridge
Valor inicial: none
Se aplica a: todos los elementos
Herencia: no
Valores en porcentaje: N/A
Sintaxis CSS
P {border-color:blue;}

Luis de Salvador Página: 43

Introducción al HTML

BLOCKQUOTE {border-color:#0000FF;}
H1 {border-color:rgb(0%, 0%, 100%);}
Sintaxis JavaScript
tags.P.borderColor="blue";
tags.BLOCKQUOTE.borderColor="#0000FF";
tags.H1.borderColor="rgb(0%, 0%, 100%);

12.1.6 Ancho
Determina la anchura de un elemento.
Sintaxis CSS: width
Sintaxis JavaScript: width
Puede ser en unidades o en porcentaje
Se aplica a: etiquetas de bloque
Herencia: no
CSS Ejemplo de sintaxis
all.NARROW {width:50%;}
all.INDENTEDNARROW {margin-left:20%; width:60%;}
JavaScript Ejemplo de sintaxis
classes.NARROW.all.width = "50%";
classes.INDENTEDNARROW.all.width = "60%";
classes.INDENTEDNARROW.all.marginLeft = "20%";

12.1.7 Alineamiento
Sintaxis CSS: float
Sintaxis JavaScript: align
Valores posibles: left, right, none
Valor inicials: none
Se aplica a: todos los elementos
Herencia: no
Valores en porcentaje: N/A
CSS Ejemplo de sintaxis
<STYLE TYPE="text/css">
H4 {
width:70%;
border-style:outset;
border-width:2pt;
border-color:green;
background-color:rgb(70%, 90%, 80%);
padding:5%;
font-weight:bold;
}
H4.TEXTRIGHT {text-align:right; margin-right:30%;}
H4.TEXTRIGHT_FLOATLEFT {text-align:right; float:left;}
H4.FLOATRIGHT {float:right;}
H4.FIXED_RIGHT_MARGIN {float:right; margin-right:30%;}
<STYLE TYPE="text/javascript">
with (tags.H4) {
width="70%";
borderStyle="outset";

Luis de Salvador Página: 44

Introducción al HTML

borderWidth="2pt";
borderColor="green";
backgroundColor = "rgb(70%, 90%, 80%)";
paddings("5%");
fontWeight="bold";
}
classes.TEXTRIGHT.H4.textAlign="right";
classes.TEXTRIGHT.H4.marginRight="30%;"
classes.TEXTRIGHT_FLOATLEFT.H4.textAlign="right";
classes.TEXTRIGHT_FLOATLEFT.H4.align="left";}
classes.FLOATRIGHT.H4.align="right";
classes.FIXED_RIGHT_MARGIN.H4.align="right";
classes.FIXED_RIGHT_MARGIN.H4.marginRight="30%";
</STYLE>

12.1.8 Elimina flotantes

Permite activar los elementos flotantes y en que lado.
Sintaxis CSS: clear
Sintaxis JavaScript: clear
Valores posibles: none, left, right, both
Valor inicial: none
Se aplica a: todos los elementos
Herencia: no
Valores en porcentaje: N/A
Si toma valor none, todos son permitidos. Si toma valor todos se moveran a la izquierda.
Example:
P {clear:left;}
tags.H1.clear = "left";

12.2 Color y fondo

Se aplica sobre etiquetas de bloque

12.2.1 Color
Color de primer plano
Sintaxis CSS: color
Sintaxis JavaScript: color
CSS Ejemplo de sintaxis
<STYLE TYPE="text/css">
EM {color:red;}
B {color:rgb(255, 0, 0);}
I {color:rgb(100%, 0%, 0%);}
CODE {color:#FF0000;}
</STYLE>
JavaScript Ejemplo de sintaxis
<STYLE TYPE="text/javascript">
tags.EM.color="red";
tags.B.color="rgb(255, 0, 0)";
tags.I.color="rgb(100%, 0%, 0%)";
tags.CODE.color="#FF0000";

Luis de Salvador Página: 45

Introducción al HTML

</STYLE>

12.2.2 Imagen de fondo

Especifica la imagen de fondo para un atributo de bloque.
Sintaxis CSS: background-image
Valores posibles: color
Valor inicial: black
Se aplica a: todos los elementos
Herencia: si
Valores en porcentaje: N/A
Las URL no absolutas son relativas a la fuente del CSS, no del documento.
CSS Ejemplo de sintaxis
<STYLE TYPE="text/css">
H1.SPECIAL {
background-image:url(images/glass2.gif);
padding:20pt;
color:yellow;
}
H2.SPECIAL {
padding:20pt;
background-color:#FFFF33;
border-style:solid;
border-width:1pt;
border-color:black;
}
P.SPECIAL B {background-image:url(images/tile1a.gif); }
P.SPECIAL I {background-color:cyan;}
</STYLE>
JavaScript Ejemplo de sintaxis
Valores posibles: url
Valor inicial: ninguno
Se aplica a: todos los elementos
Herencia: no
Valores en porcentaje: N/A
<STYLE TYPE="text/javascript">
classes.SPECIAL.H1.backgroundImage = "images/glass2.gif";
classes.SPECIAL.H1.paddings("20pt");
classes.SPECIAL.H1.color="yellow";
classes.SPECIAL.H2.paddings("20pt");
classes.SPECIAL.H2.backgroundColor="FFFF33";
classes.SPECIAL.H2.borderStyle="solid";
classes.SPECIAL.H2.borderWidth="1pt";
classes.SPECIAL.H2.borderColor="black";
contextual(classes.SPECIAL.P, tags.B).backgroundImage=
"images/tile1a.gif";
contextual(classes.SPECIAL.P, tags.I).backgroundColor="cyan";
</STYLE>

Luis de Salvador Página: 46

Introducción al HTML

12.2.3 Color de fondo

Sintaxis CSS: background-color
Sintaxis JavaScript: backgroundColor
Se comporta de igual forma que la anterior.
Valores posibles: color
Valor inicial: empty
Se aplica a: todos los elementos
Herencia: no
Valores en porcentaje: N/A

12.3 Unidades

12.3.1 Unidades de medida

Pueden tener signo y se seguidas por un unidad de medida
• em -- Relativo a la altura de la fuente (de la letra M).
• ex -- Relativo a la mitad de la altura de la fuente (de la letra x).
• px -- pixels
• pt -- points
• pc -- picas
• in -- inches
• mm -- millimeters
• cm -- centimeters

12.3.2 Unidades de color

Puede ser un nombre o una especificación numérica RGB. Los nombres sugeridos son: aqua,
black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and
yellow.
tags.BODY.color = "black";
tags.backgroundColor = "white";
tags.H1.color = "maroon";
tags.H2.color = "olive";
Se puede especificar un color RGB mediante seis dígitos hexadecimales.
BODY {color: #FF0000}; /* red */
BODY {background-color:#333333";} /* gray */
Se puede emplear la función RGB rgb() que toma tres argumentos para rojo verde y azul entre 0
y 255 o un porcentaje:
P {color: rgb(200, 20, 240);) /* bright purple */
BLOCKQUOTE {background-color: rgb(100%, 100%, 20%); /* bright yellow */

Luis de Salvador Página: 47

Introducción al HTML

13. ANEXO: RESUMEN DE HTML

Incluimos la famosa BARE BONES GUIDE TO HTML, para servir de referencia rápida a la hora
de hacer los ejercicios. Aunque gran parte de la información está un tanto obsoleta sigue siendo la
guía de referencia más popular.
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

T H E B A R E B O N E S G U I D E T O H T M L

by Kevin Werbach
<[email protected]>

Version 1.01 -- April 11, 1995

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

After seeing several pleas in the comp.infosystems.www.providers newsgroup

for a quick-and-dirty description of all the HTML tags, I decided to
update the cheat sheet I had created for my own use to serve this purpose.

This document is designed to be as concise as possible, and therefore it

doesn't go into any detail about how to use the various tags. There are
numerous step-by-step HTML guides on the Web; a good place to find many of
them is at <http://union.ncsa.uiuc.edu:80/HyperNews/get/www/html.html>.

I have included virtually all of the HTML 2.0 tags (the current
generally-accepted specification), as well as the popular -- but not
standard -- Netscape extensions. Excluded for now are: some tags
considered archaic, Netscape 1.1b's dynamic document tags, and a few
tags that require more complex server interaction. There is a shorter
version of this document available that only lists the most common tags.

Comments and suggestions are welcome; I hope to make this list as

accurate and comprehensive as possible. You can Email me at
<[email protected]>. The latest version can be retreived from
my home page at <http://www.access.digex.net/~werbach/home.html>.

Thanks to the following people for sending comments on earlier versions:

Jutta Degener <[email protected]>
Henry Churchyard <[email protected]>
Larry Katz <[email protected]>

FORMATTING OF THIS DOCUMENT

------------------------------------------------------------------------
This document looks best displayed in a monospaced font.

For clarity, I have separated out different attributes that can be

applied to the same tag onto separate lines. Generally, multiple
attributes can be combined in the same tag.

SYMBOLS USED
------------------------------------------------------------------------
URL URL of an external file (or just file name if in the same directory)
? Arbitrary number (i.e. <H?> means <H1>, <H2>, <H3>, etc.)
% Arbitrary percentage (i.e. <HR WIDTH=%> means <HR WIDTH=50%>, etc.)
*** Arbitrary text (i.e. ALT="***" means fill in with text)
$$$ Arbitrary hex (i.e. BGCOLOR="#$$$" means BGCOLOR="#00FF1C", etc.)
| Alternatives (i.e. ALIGN=LEFT|RIGHT|CENTER means pick one of the three)

COMPATIBILITY (As of 3/29/95; remember that HTML is constantly evolving)

------------------------------------------------------------------------
(no notation) In the HTML 2.0 spec; should work on all navegadores
N1.0 Probably works only in Netscape 1.0N and later versions
N1.1 Probably works only in Netscape 1.1b1 and later versions
3.0 Proposed HTML 3.0 tag; may work in some navegadores

========================================================================
========================================================================

GENERAL (all HTML documents should have these)

Luis de Salvador Página: 48

Introducción al HTML

------------------------------------------------------------------------
Document type <HTML></HTML> (beginning and end of file)
Title <TITLE></TITLE> (document name; must be in header)
Header <HEAD></HEAD> (descriptive info, such as title)
Body <BODY></BODY> (bulk of the page)

HARD FORMATTING (author specifies text appearance)

------------------------------------------------------------------------
Bold <B></B>
Italic <I></I>
3.0 Underline <U></U> (not widely implemented yet)
3.0 Strikeout <S></S> (not widely implemented yet)
Typewriter <TT></TT> (display in a monospaced font)
N1.0 Blinking <BLINK></BLINK> (the most derided tag ever)

SOFT FORMATTING (controlled by the navegador's style definitions)

------------------------------------------------------------------------
Headings <H?></H?> (the spec. defines 6 levels)
Emphasis <EM></EM> (usually displayed as italic)
Strong Emphasis <STRONG></STRONG> (usually displayed as bold)
Preformatted <PRE></PRE> (display text as-is)
Width <PRE WIDTH=?></PRE> (in characters)
Pre/No Tags <XMP></XMP> (like PRE but no embedded tags)
Citation <CITE></CITE> (usually italics)
Code <CODE></CODE> (for source code listings)
Sample Output <SAMP></SAMP>
Keyboard Input <KBD></KBD>
Variable <VAR></VAR>
Definition <DFN></DFN> (not widely implemented)
N1.0 Font Size <FONT SIZE=?></FONT> (ranges from 1-7)
N1.0 Base Font Size <BASEFONT SIZE=?> (from 1-7; default is 3)

ALIGNMENT
------------------------------------------------------------------------
Block indent <BLOCKQUOTE></BLOCKQUOTE>
N1.0 Center <CENTER></CENTER> (for both text and images)
3.0 Align text <P ALIGN=LEFT|CENTER|RIGHT></P>
3.0 Align heading <H? ALIGN=LEFT|CENTER|RIGHT></H?>

LINKS AND GRAPHICS

------------------------------------------------------------------------
Link something <A HREF="URL"></A>
Link to target <A HREF="URL#***"></A> (If in another document)
<A HREF="#***"></A> (If in current document)
Define target <A NAME="***"></A>
Display Image <IMG SRC="URL">
Alignment <IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE>
N1.0 Alignment <IMG SRC="URL" ALIGN=LEFT|RIGHT|TEXTTOP|ABSMIDDLE|
BASELINE|ABSBOTTOM>
Alternate <IMG SRC="URL" ALT="***"> (if image not displayed)
Imagemap <IMG SRC="URL" ISMAP> (requires a script)
N1.0 Dimensions <IMG SRC="URL" WIDTH="?" HEIGHT="?"> (in pixels)
N1.0 Border <IMG SRC="URL" BORDER=?> (in pixels)
N1.0 Runaround Space <IMG SRC="URL" HSPACE=? VSPACE=?> (in pixels)
N1.0 Low-Res Proxy <IMG SRC="URL" LOWSRC="URL">

DIVIDERS
------------------------------------------------------------------------
Paragraph <P> (a double return)
Line Break <BR> (a single carriage return)
N1.0 Clear textwrap <BR CLEAR=LEFT|RIGHT|ALL
Horizontal Rule <HR>
N1.0 Alignment <HR ALIGN=LEFT|RIGHT|CENTER>
N1.0 Thickness <HR SIZE=?> (in pixels)
N1.0 Width <HR WIDTH=?> (in pixels)
N1.0 Width Percent <HR WIDTH=%> (as a percentage of page width)
N1.0 Solid Line <HR NOSHADE> (without the 3D cutout look)
N1.0 No Break <NOBR> (prevents line breaks)
N1.0 Word Break <WBR> (where to break a line if needed)

LISTS (lists can be nested)

-------------------------------------------------------------------------
Unordered List <UL><LI></UL> (<LI> before each list item)
N1.0 Bullet Type <UL TYPE=DISC|CIRCLE|SQUARE> (for the whole list)
<LI TYPE=DISC|CIRCLE|SQUARE> (this & subsequent)

Luis de Salvador Página: 49

Introducción al HTML

Ordered List <OL><LI></OL> (<LI> before each list item)

N1.0 Outline Type <OL TYPE=A|a|I|i|1> (for the whole list)
<LI TYPE=A|a|I|i|1> (this & subsequent)
N1.0 Starting number <OL VALUE=?> (for the whole list)
<LI VALUE=?> (this & subsequent)
Definition List <DL><DT><DD></DL> (<DT>=term, <DD>=definition)
Menu List <MENU><LI></MENU> (<LI> before each list item)
Directory List <DIR><LI></DIR> (<LI> before each list item)

BACKGROUNDS AND COLORS

------------------------------------------------------------------------
N1.1 Bkground Color <BODY BGCOLOR="#$$$"> (order is red/green/blue)
N1.1 Texture <BODY BACKGROUND="URL">
N1.1 Text Color <BODY TEXT="#$$$">
N1.1 Link Color <BODY LINK="#$$$">
N1.1 Visited Link <BODY VLINK="#$$$">
N1.1 Active Link <BODY ALINK="#$$$">

SPECIAL CHARACTERS (these must all be in lower case)

------------------------------------------------------------------------
ASCII code &#?; (where ? is the ASCII code)
< <
> >
& &
" "
N1.0 Registered TM ®
N1.0 Copyright ©
(Complete list at http://www.w3.org/hypertext/WWW/MarkUp/Entities.html)

FORMS (generally require a script on your server)

------------------------------------------------------------------------
Define Form <FORM ACTION="URL" METHOD=GET|POST></FORM>
Input field <INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO|
SUBMIT|RESET">
Field name <INPUT NAME="***">
Checked? <INPUT CHECKED> (checkboxes and radio boxes)
Field size <INPUT SIZE=?> (in characters)
Max Length <INPUT MAXLENGTH=?> (in characters)
Selection List <SELECT></SELECT>
Name of List <SELECT NAME="***"></SELECT>
# of Options <SELECT SIZE=?></SELECT>
Multiple Choice <SELECT MULTIPLE> (can select more than one)
Option <OPTION> (items that can be selected)
Default Option <OPTION SELECTED>
Input box size <TEXTAREA ROWS=? COLS=?></TEXTAREA>
Name of box <TEXTAREA NAME="***"></TEXTAREA>

TABLES
------------------------------------------------------------------------
3.0 Define Table <TABLE></TABLE>
3.0 Table Border <TABLE BORDER></TABLE> (either on or off)
N1.1 Table Border <TABLE BORDER=?></TABLE> (you can set the value)
N1.1 Cell Spacing <TABLE CELLSPACING=?>
N1.1 Cell Padding <TABLE CELLPADDING=?>
N1.1 Desired width <TABLE WIDTH=?> (in pixels)
N1.1 Width percent <TABLE WIDTH=%> (percentage of page)
3.0 Table Row <TR></TR>
3.0 Alignment <TR ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>
3.0 Table Cell <TD></TD> (must appear within table rows)
3.0 Alignment <TD ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>
3.0 No linebreaks <TD NOWRAP>
3.0 Columns to span <TD COLSPAN=?>
3.0 Rows to span <TD ROWSPAN=?>
N1.1 Desired width <TD WIDTH=?> (in pixels)
N1.1 Width percent <TD WIDTH=%> (percentage of table)
3.0 Table Header <TH></TH> (same as data, except bold centered)
3.0 Alignment <TH ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>
3.0 No linebreaks <TH NOWRAP>
3.0 Columns to span <TH COLSPAN=?>
3.0 Rows to span <TH ROWSPAN=?>
N1.1 Desired width <TH WIDTH=?> (in pixels)
N1.1 Width percent <TH WIDTH=%> (percentage of table)
3.0 Table Caption <CAPTION></CAPTION>
3.0 Alignment <CAPTION ALIGN=TOP|BOTTOM> (above or below table)

MISCELLANEOUS (generally not necessary for basic page design)

Luis de Salvador Página: 50

Introducción al HTML

------------------------------------------------------------------------
Comment  (not displayed by the navegador)
Author's address <ADDRESS></ADDRESS>
Searchable <ISINDEX> (indicates a searchable index)
N1.0 Prompt <ISINDEX PROMPT="***"> (text to prompt input)
Send search <A HREF="URL?***"></a> (use a real question mark)
URL of this file <BASE HREF="URL"> (must be in header)
Relationship <LINK REV="***" REL="***" HREF="URL"> (in header)
Meta information <META> (must be in header)
Identifier <NEXTID> (must be in header)

----- (c) 1995 Kevin Werbach. Noncommercial redistribution permitted --

Luis de Salvador Página: 51

Introducción al HTML

14. ANEXO: CODIGOS DE CARACTERES

A continuación se incluye como anexo el código de los caracteres que pueden necesitarse para
construir páginas de HTML. Está tomado del estándar HTML 3.0

-----------------------------------------------------------------
Numeric and Special Graphic Entities

The following table lists each of the supported characters specified in

the Numeric and Special Graphic entity set, along with its name, syntax for use,
and description.

This list is derived from "ISO 8879:1986//ENTITIES Numeric and

Special Graphic//EN" however HTML does not provide support for the entire
entity set. Only the entities listed below are supported.

Name Syntax Description

lt < Less than sign
gt > Greater than sign
amp & Ampersand
quot " Double quote sign

-----------------------------------------------------------------
ISO Latin 1 Character Entities

The following table lists each of the characters specified in the

Added Latin 1 entity set, along with its name, syntax for use, and
description.

This list is derived from "ISO 8879:1986//ENTITIES Added Latin

1//EN", and HTML does provide support for the entire entity set.

Name Syntax Description

Aacute Á Capital A, acute accent
Agrave À Capital A, grave accent
Acirc Â Capital A, circumflex accent
Atilde Ã Capital A, tilde
Aring Å Capital A, ring
Auml Ä Capital A, dieresis or umlaut mark
AElig Æ Capital AE dipthong (ligature)
Ccedil Ç Capital C, cedilla
Eacute É Capital E, acute accent
Egrave È Capital E, grave accent
Ecirc Ê Capital E, circumflex accent
Euml Ë Capital E, dieresis or umlaut mark
Iacute Í Capital I, acute accent
Igrave Ì Capital I, grave accent
Icirc Î Capital I, circumflex accent
Iuml Ï Capital I, dieresis or umlaut mark
ETH Ð Capital Eth, Icelandic
Ntilde Ñ Capital N, tilde
Oacute Ó Capital O, acute accent
Ograve Ò Capital O, grave accent
Ocirc Ô Capital O, circumflex accent
Otilde Õ Capital O, tilde
Ouml Ö Capital O, dieresis or umlaut mark
Oslash Ø Capital O, slash
Uacute Ú Capital U, acute accent
Ugrave Ù Capital U, grave accent
Ucirc Û Capital U, circumflex accent

Luis de Salvador Página: 52

Introducción al HTML

Uuml Ü Capital U, dieresis or umlaut mark

Yacute Ý Capital Y, acute accent

THORN Þ Capital THORN, Icelandic

szlig ß Small sharp s, German (sz ligature)

aacute á Small a, acute accent

agrave à Small a, grave accent
acirc â Small a, circumflex accent
atilde ã Small a, tilde
atilde ã Small a, tilde
auml ä Small a, dieresis or umlaut mark
aelig æ Small ae dipthong (ligature)
ccedil ç Small c, cedilla
eacute é Small e, acute accent•
egrave è Small e, grave accent
ecirc ê Small e, circumflex accent
euml ë Small e, dieresis or umlaut mark
iacute í Small i, acute accent
igrave ì Small i, grave accent
icirc î Small i, circumflex accent
iuml ï Small i, dieresis or umlaut mark
eth ð Small eth, Icelandic
ntilde ñ Small n, tilde
oacute ó Small o, acute accent
ograve ò Small o, grave accent
ocirc ô Small o, circumflex accent
otilde õ Small o, tilde
ouml ö Small o, dieresis or umlaut mark
oslash ø Small o, slash
uacute ú Small u, acute accent
ugrave ù Small u, grave accent
ucirc û Small u, circumflex accent
uuml ü Small u, dieresis or umlaut mark
yacute ý Small y, acute accent
thorn þ Small thorn, Icelandic
yuml ÿ Small y, dieresis or umlaut mark

-----------------------------------------------------------------
Numerical Character References

This list, sorted numerically, is derived from the ISO 8859/1 8-bit
single-byte coded graphic character set:

Reference Description
- Unused
	 Horizontal tab

 Line feed
- Unused

&32; Space
&33; Exclamation mark
&34; Quotation mark
&35; Number sign
&36; Dollar sign
&37; Percent sign
&38; Ampersand
&39; Apostrophe
&40; Left parenthesis
&41; Right parenthesis
&42; Asterisk
&43; Plus sign

Luis de Salvador Página: 53

Introducción al HTML

&44; Comma
&45; Hyphen
&46; Period (fullstop)
&47; Solidus (slash)

0 - 9 Digits 0-9

&58; Colon
&59; Semi-colon
&60; Less than
&61; Equals aign
&62; Greater than
&63; Question mark
&64; Commercial at

A-Z Letters A-Z

&91; Left square bracket

&92; Reverse solidus (backslash)
&93; Right square bracket
&95; Horizontal bar
&96; Acute accent

a-z Letters a-z

&123; Left curly brace

&124; Vertical bar
&125; Right curly brace
&126; Tilde

-   Unused

&161; Inverted exclamation

&162; Cent sign
&163; Pound sterling
&164; General currency sign
&165; Yen sign
&166; Broken vertical bar
&167; Section sign
&168; Umlaut (dieresis)
&169; Copyright
&170; Feminine ordinal
&171; Left angle quote, guillemotleft
&172; Not sign
&173; Soft hyphen
&174; Registered trademark
&175; Macron accent
&176; Degree sign
&177; Plus or minus
&178; Superscript two
&179; Superscript three
&180; Acute accent
&181; Micro sign
&182; Paragraph sign
&183; Middle dot
&184; Cedilla
&185; Superscript one•
&186; Masculine ordinal
&187; Right angle quote, guillemotright
&188; Fraction one-fourth
&189; Fraction one-half
&190; Fraction three-fourths
&191; Inverted question mark

Luis de Salvador Página: 54

Introducción al HTML

&192; Capital A, acute accent

&193; Capital A, grave accent
&194; Capital A, circumflex accent
&195; Capital A, tilde
&196; Capital A, ring
&197; Capital A, dieresis or umlaut mark
&198; Capital AE dipthong (ligature)
&199; Capital C, cedilla
&200; Capital E, acute accent
&201; Capital E, grave accent•
&202; Capital E, circumflex accent

&203; Capital E, dieresis or umlaut mark

&204; Capital I, acute accent
&205; Capital I, grave accent
&206; Capital I, circumflex accent
&207; Capital I, dieresis or umlaut mark
&208; Capital Eth, Icelandic
&209; Capital N, tilde
&210; Capital O, acute accent
&211; Capital O, grave accent
&212; Capital O, circumflex accent
&213; Capital O, tilde
&214; Capital O, dieresis or umlaut mark

&215; Multiply sign

&216; Capital O, slash

&217; Capital U, acute accent
&218; Capital U, grave accent
&219; Capital U, circumflex accent
&220; Capital U, dieresis or umlaut mark
&221; Capital Y, acute accent

&222; Capital THORN, Icelandic

&223; Small sharp s, German (sz ligature)

&224; Small a, acute accent

&225; Small a, grave accent
&226; Small a, circumflex accent
&227; Small a, tilde
&228; Small a, tilde
&229; Small a, dieresis or umlaut mark
&230; Small ae dipthong (ligature)
&231; Small c, cedilla
&232; Small e, acute accent
&233; Small e, grave accent
&234; Small e, circumflex accent
&235; Small e, dieresis or umlaut mark
&236; Small i, acute accent
&237; Small i, grave accent
&238; Small i, circumflex accent
&239; Small i, dieresis or umlaut mark
&240; Small eth, Icelandic
&241; Small n, tilde
&242; Small o, acute accent
&243; Small o, grave accent
&244; Small o, circumflex accent
&245; Small o, tilde
&246; Small o, dieresis or umlaut mark

&247; Division sign

Luis de Salvador Página: 55

Introducción al HTML

&248; Small o, slash

&249; Small u, acute accent

&250; Small u, grave accent

&251; Small u, circumflex accent
&252; Small u, dieresis or umlaut mark
&253; Small y, acute accent
&254; Small thorn, Icelandic
&255; Small y, dieresis or umlaut mark

Math Entities

This list is in a very preliminary stage ...

--I hope to use ISO names where practical, and want to ensure that names
are meaningful, rather than cryptic. The character codes for common fonts will
be included, although which fonts to include is still under review.--

The following sets out the range of math symbols supported by HTML math,
giving the HTML entity name, the corresponding LaTeX command name and a short
description. Character codes are given in hexadecimal when available for the
Postscript symbol set and HP's math-8 symbol set.

Continuation dots - ellipsis

&ldots; \ldots three dots on the baseline

&cdots; \cdots three dots on same level as a minus sign
&vdots; \vdots three vertical dots
&ddots; \ddots diagonal dots (top left to bottom right)
&dotfill; \dotfill like cdots but fills column in an array

Added Spacing

  \, thin space

&sp; \: medium space
&emsp; \; thick space
&quad; \quad huge space

Lower case Greek Letters

PS-Symbol Math-8
α \alpha alpha 61 61
β \beta beta 62 62
γ \gamma gamma 67 63
δ \delta delta 64 64
ε \epsilon epsilon -- 65
&vepsilon; \varepsilon var epsilon 65 3B
ζ \zeta zeta 7A 66
η \eta eta 68 67
θ \theta theta 71 68
&vtheta; \vartheta var theta -- 79
ι \iota iota 69 69
κ \kappa kappa 6B 6A
λ \lambda lambda 6C 6B
μ \mu mu 6D 6C
ν \nu nu 6E 6D
ξ \xi xi 78 6E

ο .... omicron 6F 6F

Luis de Salvador Página: 56

Introducción al HTML

π \pi pi 70 70
ϖ \varpi var pi 76 7B
ρ \rho rho 72 71
ϱ \varrho var rho -- --
σ \sigma sigma 73 72
&vsigma; \varsigma var sigma 56 5B
τ \tau tau 74 73
υ \upsilon upsilon 75 74
φ \phi phi 66 75
ϕ \varphi var phi 6A 7A
χ \chi chi 63 76
ψ \psi psi 79 77
ω \omega omega 77 78

Luis de Salvador Página: 57

Introducción al HTML

15. ANEXO: MÁS SOBRE URL

Anteriormente se han introducido las URLs. La Uniform Resource Locator (URL) es lo que el
WWW usa para encontrar la ubicación de archivos y documentos de otros ordenadores de la red.
Típicamente en su navegador la URL de cada documento se muestra en la parte superior de su
ventana. La URL incluye:
• un identificador del tipo de servicio Internet;
• una dirección Internet, y
• una ruta de archivo al elemento de su interés.
La URL es lo que se necesita para construir un link desde una página web que cree y que contacte
con otra parte de información disponible en internet.
La estructura de una URL es la siguiente:
tipo://maquina:puerto/path

El TIPO indica el tipo de servicio Internet al cual se accede:

• Http: un servicio World Wide Web. "HTTP" viene de HyperText Transfer Protocol.
• Gopher: un servicio Gopher Internet, visor de directorios de archivos e información.
• Ftp: un servicio de File Transfer Protocol (FTP) anónimo, montañas de archivos.
• telnet: arranca una sesión Telnet para conectarse remotamente a otro ordenador. Cuando se
selecciona el navegador arrancará un programa externo de Telnet y conectará con el host
(ordenador) especificado.
• WAIS: Wide Area Indexed Server - Un servicio de búsqueda en una colección de
documentos ordenados por claves.
• File: Un archivo en su ordenador local (disco duro, disquette, servidor interno...)
Al tipo le siguen siempre los caracteres "://" y la dirección internet del ordenador remoto.
La MAQUINA se puede direccionar mediante su dirección IP o adoptar la siguiente estructura:

host.domain.domain.domain

Por ejemplo:

machine.department.college.edu
123.45.6.78
office.company.com
www.geocities.com
www.altavista.digital.com

El PUERTO es un valor numerico de 0 a 65535 que indica el puerto por el cual se proporciona el
servicio. Por ejemplo, para acceder a un servidor web generalmente se emplea el puerto 80.
Generalmente, el tipo de servicio implica un puerto, por lo que este no se indica a menos que se esté
proporcionando el servicio por un puerto especial, como sucede en el caso del acceso a través de
proxy.
A continuación se incluye el PATH en el que se encuentra el fichero dentro de la propia máquina
(realmente es un un subpath).
Si la URL está al nivel superior o máximo del ordenador (su "home page"), entonces la URL
acaba con una barra "/". Si se crea un link a un subdirectorio o un archivo entonces hay que incluir la
ruta exacta a dicho elemento usando el carácter barra "/" para indicar la ruta completa.

Luis de Salvador Página: 58

Introducción al HTML

Nota: En la mayoría de los servidores se distingue entre mayúsculas y minúsculas. Los nombres
de archivo y directorios en sistemas UNIX distinguen entre ellas haciendo que, por ejemplo, un
archivo llamado: SpiffyText.htm; sea diferente de otro con nombre: spiffytext.htm
Advierta que las URLs pueden enlazar con cualquier ordenador, directorio o fichero, imagen,
animación o archivo de sonido de cualquier punto de la red que sea de acceso público. La mejor
manera de ver diferentes URLs es simplemente mover el ratón y hacer click en cualquiera de los links
en cualquier página Web. Si mira en la parte inferior de la ventana de su navegador podrá ver la URL
a la que conectaría si hiciera click sobre el link.
Si el servicio al que se desea acceder requiere usuario y password, entonces el esquema que es
necesario emplear es el siguiente:

tipo://usuario:password@maquina:port/path

Luis de Salvador Página: 59

Introducción al HTML

16. ANEXO: COLORES EN HTML

Para indicar un color se puede emplear un código de color expresado como un palabra o un
conjunto de valores hexadecimales. La correspondencia entre ambos se indica en la siguiente tabla.

Color Red Green Blue

aliceblue F0 F8 FF
antiquewhite FA EB D7
aqua 00 FF FF
aquamarine 7F FF D4
azure F0 FF FF
beige F5 F5 DC
bisque FF E4 C4
black 00 00 00
blanchedalmond FF EB CD
blue 00 00 FF
blueviolet 8A 2B E2
brown A5 2A 2A
burlywood DE B8 87
cadetblue 5F 9E A0
chartreuse 7F FF 00
chocolate D2 69 1E
coral FF 7F 50
cornflowerblue 64 95 ED
cornsilk FF F8 DC
crimson DC 14 3C
cyan 00 FF FF
darkblue 00 00 8B
darkcyan 00 8B 8B
darkgoldenrod B8 86 0B
darkgray A9 A9 A9
darkgreen 00 64 00
darkkhaki BD B7 6B
darkmagenta 8B 00 8B
darkolivegreen 55 6B 2F
darkorange FF 8C 00
darkorchid 99 32 CC
darkred 8B 00 00
darksalmon E9 96 7A
darkseagreen 8F BC 8F
darkslateblue 48 3D 8B
darkslategray 2F 4F 4F

Luis de Salvador Página: 60

Introducción al HTML

darkturquoise 00 CE D1
darkviolet 94 00 D3
deeppink FF 14 93
deepskyblue 00 BF FF
dimgray 69 69 69
dodgerblue 1E 90 FF
firebrick B2 22 22
floralwhite FF FA F0
forestgreen 22 8B 22
fuchsia FF 00 FF
gainsboro DC DC DC
ghostwhite F8 F8 FF
gold FF D7 00
goldenrod DA A5 20
gray 80 80 80
green 00 80 00
greenyellow AD FF 2F
honeydew F0 FF F0
hotpink FF 69 B4
indianred CD 5C 5C
indigo 4B 00 82
ivory FF FF F0
khaki F0 E6 8C
lavender E6 E6 FA
lavenderblush FF F0 F5
lawngreen 7C FC 00
lemonchiffon FF FA CD
lightblue AD D8 E6
lightcoral F0 80 80
lightcyan E0 FF FF
lightgoldenrodyellow FA FA D2
lightgreen 90 EE 90
lightgrey D3 D3 D3
lightpink FF B6 C1
lightsalmon FF A0 7A
lightseagreen 20 B2 AA
lightskyblue 87 CE FA
lightslategray 77 88 99
lightsteelblue B0 C4 DE
lightyellow FF FF E0
lime 00 FF 00
limegreen 32 CD 32

Luis de Salvador Página: 61

Introducción al HTML

linen FA F0 E6
magenta FF 00 FF
maroon 80 00 00
mediumaquamarine 66 CD AA
mediumblue 00 00 CD
mediumorchid BA 55 D3
mediumpurple 93 70 DB
mediumseagreen 3C B3 71
mediumslateblue 7B 68 EE
mediumspringgreen 00 FA 9A
mediumturquoise 48 D1 CC
mediumvioletred C7 15 85
midnightblue 19 19 70
mintcream F5 FF FA
mistyrose FF E4 E1
moccasin FF E4 B5
navajowhite FF DE AD
navy 00 00 80
oldlace FD F5 E6
olive 80 80 00
olivedrab 6B 8E 23
orange FF A5 00
orangered FF 45 00
orchid DA 70 D6
palegoldenrod EE E8 AA
palegreen 98 FB 98
paleturquoise AF EE EE
palevioletred DB 70 93
papayawhip FF EF D5
peachpuff FF DA B9
peru CD 85 3F
pink FF C0 CB
plum DD A0 DD
powderblue B0 E0 E6
purple 80 00 80
red FF 00 00
rosybrown BC 8F 8F
royalblue 41 69 E1
saddlebrown 8B 45 13
salmon FA 80 72
sandybrown F4 A4 60
seagreen 2E 8B 57

Luis de Salvador Página: 62

Introducción al HTML

seashell FF F5 EE
sienna A0 52 2D
silver C0 C0 C0
skyblue 87 CE EB
slateblue 6A 5A CD
slategray 70 80 90
snow FF FA FA
springgreen 00 FF 7F
steelblue 46 82 B4
tan D2 B4 8C
teal 00 80 80
thistle D8 BF D8
tomato FF 63 47
turquoise 40 E0 D0
violet EE 82 EE
wheat F5 DE B3
white FF FF FF
whitesmoke F5 F5 F5
yellow FF FF 00
yellowgreen 9A CD 32

Luis de Salvador Página: 63

Introducción al HTML

17. ANEXO: RECURSOS HTML

En esta sección se muestran algunos enlaces interesantes relacionados con el HTML.

17.1 Información sobre el estándar

http://www.w3.org/hypertext/WWW/MarkUp/MarkUp.html
Información sobre el HTML en la W3 Organization

http://www.ics.uci.edu/pub/ietf/html/
Información sobre el HTML del HTML Working Group (IETF)

http://www.ivia.es/links/rfc1866.txt
Propuesta de estándar para el HTML 2.0 (RFC 1866, copia local)

http://www.hpl.hp.co.uk/people/dsr/html3/CoverPage.html
Borrador del HTML 3.0

17.2 Manuales y guias de estilo (inglés)

http://www.ncsa.uiuc.edu/demoweb/html-primer.html
A Beginner's Guide to HTML (Marc Andreessen)

http://www-phys.rrz.uni-hamburg.de/Software/ HTMLdocs/NewHTML/intro.html"
Introduction to HTML documentation (Ian Graham, U of Toronto)

http://www.ucc.ie/info/net/htmldoc.html
How to write HTML files (Peter Flynn, UCC Ireland)

http://www.sandia.gov/sci_compute/html_ref.html
HTML Reference Manual (Sandia National Laboratories)

http://kuhttp.cc.ukans.edu/lynx_help/HTML_quick.html
HTML Quick Reference (Michael Grobe, U of Kansas)

http://www.cs.cmu.edu/~tilt/cgh/
Composing Good HTML (James "Eric" Tilton, Willamette U)

http://www.w3.org/hypertext/WWW/Provider/Style/Overview.html
Style Guide for Online Hypertext (Tim Berners-Lee, CERN)

http://guinan.gsfc.nasa.gov/Style.html
Style Guide for Online Hypertext (Alan Richmond, NASA GSFC)

17.3 Manuales y guias de estilo (castellano)

http://www.ivia.es/htmlref/
Manual de Referencia. Sergio Talens Oliag

Luis de Salvador Página: 64

Introducción al HTML

http://www.etsit.upm.es/~alvaro/manual/manual.html
Manual Práctico de HTML (Alvaro Martínez Echevarría, U. Politécnica de Madrid)

http://voltio.ujaen.es/html
Curso de HTML (Pedro J. Casanova Pelaez, U. Jaen)

17.4 Documentación sobre Microsoft y Netscape

http://home.netscape.com/assist/net_sites/html_extensions.html
Extensiones del HTML 2.0 de Netscape

http://home.netscape.com/assist/net_sites/html_extensions_3.html
Extensiones del HTML 3.0 de Netscape

Luis de Salvador Página: 65

También podría gustarte

Programa 2c2b0cuatrimestre 2016
Aún no hay calificaciones
Programa 2c2b0cuatrimestre 2016
8 páginas
Fundamentos de Up1
Aún no hay calificaciones
Fundamentos de Up1
674 páginas
Orientación en Prevención de Riesgos Fix
Aún no hay calificaciones
Orientación en Prevención de Riesgos Fix
29 páginas
Ejemplo de Denuncia
Aún no hay calificaciones
Ejemplo de Denuncia
3 páginas
Derecho Tributario Ii
Aún no hay calificaciones
Derecho Tributario Ii
6 páginas
Calculo 1-21
Aún no hay calificaciones
Calculo 1-21
22 páginas
I Unidad 2º EPT
Aún no hay calificaciones
I Unidad 2º EPT
4 páginas
Matemáticas Financieras (PDFDrive) - 2
Aún no hay calificaciones
Matemáticas Financieras (PDFDrive) - 2
30 páginas
Mi Vida Es Química by Nguyen Kim Mai Thi PDF Núcleo Atómico Protón
Aún no hay calificaciones
Mi Vida Es Química by Nguyen Kim Mai Thi PDF Núcleo Atómico Protón
214 páginas
CGT - Adm de Negocios y Marketing 2021 - Malla
Aún no hay calificaciones
CGT - Adm de Negocios y Marketing 2021 - Malla
1 página
Hoja de Ruta No Deforestación Mesa Técnica Del Cacao Del VRAEM - Final OK
Aún no hay calificaciones
Hoja de Ruta No Deforestación Mesa Técnica Del Cacao Del VRAEM - Final OK
6 páginas
Matf85 Srcalumperiodogrid
Aún no hay calificaciones
Matf85 Srcalumperiodogrid
14 páginas
Examen Final. - Revisión Del Intento
Aún no hay calificaciones
Examen Final. - Revisión Del Intento
9 páginas
Manual de HTML
Aún no hay calificaciones
Manual de HTML
29 páginas
Procedimiento Uso MXP-414 Color Triptico Vers. Imprimir
Aún no hay calificaciones
Procedimiento Uso MXP-414 Color Triptico Vers. Imprimir
2 páginas
Introduccion Al HTML
Aún no hay calificaciones
Introduccion Al HTML
154 páginas
Introduccion A HTML
Aún no hay calificaciones
Introduccion A HTML
6 páginas
Act. 2 Competencias TIC para El Desarrollo Profesional Docente
Aún no hay calificaciones
Act. 2 Competencias TIC para El Desarrollo Profesional Docente
7 páginas
02 CC Cambios en El Crecimiento Facial Logrados A Través de La Ortopedia Maxilofacial. Caso Clínico
Aún no hay calificaciones
02 CC Cambios en El Crecimiento Facial Logrados A Través de La Ortopedia Maxilofacial. Caso Clínico
9 páginas
Semana 7 3
Aún no hay calificaciones
Semana 7 3
4 páginas
Trabajo Final Fundamentos PDF
Aún no hay calificaciones
Trabajo Final Fundamentos PDF
112 páginas
Manual de HTML - Parte 1
Aún no hay calificaciones
Manual de HTML - Parte 1
14 páginas
15985.informe Final Gestion Direccion CCM 2012 Alo
Aún no hay calificaciones
15985.informe Final Gestion Direccion CCM 2012 Alo
41 páginas
Plan General De Contabilidad. Uf0515.
De Everand
Plan General De Contabilidad. Uf0515.
Carmen Arenal Laza
Aún no hay calificaciones
Ing R I Pena
Aún no hay calificaciones
Ing R I Pena
2 páginas
Manual Sistema de Cobertura (Siscob)
Aún no hay calificaciones
Manual Sistema de Cobertura (Siscob)
9 páginas
C/C++. Curso de programación. 5ª Edición
De Everand
C/C++. Curso de programación. 5ª Edición
Fco. Javier Ceballos Sierra
Aún no hay calificaciones
Como Hackear Samsung y LG Smart TV
Aún no hay calificaciones
Como Hackear Samsung y LG Smart TV
1 página
Barrido de Los Motores de Combustion Interna
Aún no hay calificaciones
Barrido de Los Motores de Combustion Interna
5 páginas
Estudio Jurídico de Títulos
100% (1)
Estudio Jurídico de Títulos
5 páginas
Introducción HTML
Aún no hay calificaciones
Introducción HTML
7 páginas
PRACTICA X TERMINAR-comprimido
Aún no hay calificaciones
PRACTICA X TERMINAR-comprimido
7 páginas
Iit Guia de Trabajo Computacion 3ro Basico 2024 - 9nzlo9qq
Aún no hay calificaciones
Iit Guia de Trabajo Computacion 3ro Basico 2024 - 9nzlo9qq
2 páginas
Modelo de Inventario de Equipos de Computo
Aún no hay calificaciones
Modelo de Inventario de Equipos de Computo
2 páginas
Módulo 2-2
Aún no hay calificaciones
Módulo 2-2
39 páginas
Conceptos Basicos de HTML
Aún no hay calificaciones
Conceptos Basicos de HTML
7 páginas
Módulo 2-1
Aún no hay calificaciones
Módulo 2-1
30 páginas
Iniciación a Access 2016
De Everand
Iniciación a Access 2016
Carlos Casas Antúnez
Aún no hay calificaciones
Programación orientada a objetos con C++ (5ª edición)
De Everand
Programación orientada a objetos con C++ (5ª edición)
Fco. Javier Ceballos
Aún no hay calificaciones
HTML Básico - I
Aún no hay calificaciones
HTML Básico - I
1 página
HTML5, CSS3 y JQuery: Gráficos y diseño web
De Everand
HTML5, CSS3 y JQuery: Gráficos y diseño web
Juan Antonio Recio Garcia
5/5 (2)
Enciclopedia del lenguaje C++. 2ª edición
De Everand
Enciclopedia del lenguaje C++. 2ª edición
Fco. Javier Ceballos Sierra
1/5 (1)
JAVA. Interfaces gráficas y aplicaciones para Internet (4ª Edición)
De Everand
JAVA. Interfaces gráficas y aplicaciones para Internet (4ª Edición)
Fco. Javier Ceballos
Aún no hay calificaciones
Modelo de Resolución para Sustituir A Los Titulares y Suplentes de
Aún no hay calificaciones
Modelo de Resolución para Sustituir A Los Titulares y Suplentes de
2 páginas
Manual de HTML
Aún no hay calificaciones
Manual de HTML
9 páginas
Manual Basico HTML
Aún no hay calificaciones
Manual Basico HTML
11 páginas
Msds - Tellus s2 M 100
Aún no hay calificaciones
Msds - Tellus s2 M 100
8 páginas
CULTIVODECEDROLIMON
Aún no hay calificaciones
CULTIVODECEDROLIMON
18 páginas
Modulo 1 - HTML
Aún no hay calificaciones
Modulo 1 - HTML
97 páginas
UT2 - HTML - BÁSICOrevisado
Aún no hay calificaciones
UT2 - HTML - BÁSICOrevisado
49 páginas
Manual HTML
100% (1)
Manual HTML
29 páginas
A.Fundamentos de HTML5
Aún no hay calificaciones
A.Fundamentos de HTML5
17 páginas
Programacion Web (HTML y CSS) - Modulo I
Aún no hay calificaciones
Programacion Web (HTML y CSS) - Modulo I
24 páginas
Plan de Trabajo
Aún no hay calificaciones
Plan de Trabajo
8 páginas
HTML
Aún no hay calificaciones
HTML
40 páginas
Tutorial Básico de HTML
Aún no hay calificaciones
Tutorial Básico de HTML
20 páginas
HTML - Básico
Aún no hay calificaciones
HTML - Básico
51 páginas
Manual de HTML (4to Bachillerato)
Aún no hay calificaciones
Manual de HTML (4to Bachillerato)
44 páginas
Apuntes HTML
Aún no hay calificaciones
Apuntes HTML
28 páginas
Curso de HTML
Aún no hay calificaciones
Curso de HTML
156 páginas
HTML Básico - I
Aún no hay calificaciones
HTML Básico - I
16 páginas
Unidad 1 - Estructura HTML
Aún no hay calificaciones
Unidad 1 - Estructura HTML
8 páginas
LAB 1 Estructura de Un Documento HTML
Aún no hay calificaciones
LAB 1 Estructura de Un Documento HTML
26 páginas
Manual de HTML
100% (1)
Manual de HTML
131 páginas
Manual de Introducción Al Lenguaje HTML. Formación para El Emple-1 PDF
Aún no hay calificaciones
Manual de Introducción Al Lenguaje HTML. Formación para El Emple-1 PDF
165 páginas
Guia 1 de Aprendizaje Tecnologia 11
Aún no hay calificaciones
Guia 1 de Aprendizaje Tecnologia 11
6 páginas
Curso de HTML
Aún no hay calificaciones
Curso de HTML
156 páginas
Guia Decimo Grado - Jose Paulo PDF
Aún no hay calificaciones
Guia Decimo Grado - Jose Paulo PDF
5 páginas
Manual Usuario HTML
Aún no hay calificaciones
Manual Usuario HTML
20 páginas
Alonso Cornejo - Manual de HTML
100% (1)
Alonso Cornejo - Manual de HTML
89 páginas
Introduccion Al HTML
Aún no hay calificaciones
Introduccion Al HTML
20 páginas
Resumen Sobre HTML 5
Aún no hay calificaciones
Resumen Sobre HTML 5
6 páginas
Guia HTML 2017-1-11
Aún no hay calificaciones
Guia HTML 2017-1-11
11 páginas
Manual de HTML de Alonso Cornejo
100% (2)
Manual de HTML de Alonso Cornejo
97 páginas
Guía de Diseño Web
Aún no hay calificaciones
Guía de Diseño Web
110 páginas
Manual de HTML
Aún no hay calificaciones
Manual de HTML
38 páginas
Tutorial HTML
Aún no hay calificaciones
Tutorial HTML
48 páginas
Curso HTML Css y Javascript
100% (1)
Curso HTML Css y Javascript
60 páginas
Manual HTML PDF
100% (1)
Manual HTML PDF
30 páginas
Curso HTML
100% (3)
Curso HTML
61 páginas
Manual HTML
Aún no hay calificaciones
Manual HTML
177 páginas
Tutorial HTML Basico
Aún no hay calificaciones
Tutorial HTML Basico
68 páginas
HTML Juan Jose Lopez
Aún no hay calificaciones
HTML Juan Jose Lopez
37 páginas
Manual de HTML - Manual Completo
Aún no hay calificaciones
Manual de HTML - Manual Completo
81 páginas
Prólogo Al Manual de HTML
Aún no hay calificaciones
Prólogo Al Manual de HTML
57 páginas
HTML
Aún no hay calificaciones
HTML
21 páginas
Taller HTML Basico
100% (1)
Taller HTML Basico
21 páginas
Curso de HTML Desde 0
Aún no hay calificaciones
Curso de HTML Desde 0
113 páginas
Introducción Al HTML
Aún no hay calificaciones
Introducción Al HTML
5 páginas
Manual de HTML - Manual Completo
Aún no hay calificaciones
Manual de HTML - Manual Completo
82 páginas