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 evitar 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. 2. 2.1 2.2 2.3 2.4 2.5 3. 3.1 3.2 3.3 3.4 3.5 3.6 3.7 3.8 3.9 INTRODUCCIÓN AL HTML........................................................................................................................5 EL DOCUMENTO HTML.............................................................................................................................6 ¿QUÉ SON LAS ETIQUETAS HTML?.................................................................................................................6 ERRORES EN UNA PÁGINA HTML...................................................................................................................6 ESTRUCTURA DE UNA PÁGINA WEB ................................................................................................................6 INCLUYENDO TEXTO .....................................................................................................................................8 VISUALIZANDO LA PÁGINA HTML .................................................................................................................9 ETIQUETAS BÁSICAS EN HTML.............................................................................................................10 ETIQUETAS BÁSICOS DE FORMATO DE TEXTO ................................................................................................10 COMENTARIOS ............................................................................................................................................10 ENCABEZADOS HTML ................................................................................................................................10 PÁRRAFOS EN HTML ..................................................................................................................................10 DIFERENCIAS ENTRE BR Y P ........................................................................................................................11 INCLUYENDO ESTILO ..................................................................................................................................12 PARPADEO ..................................................................................................................................................12 PREFORMATO .............................................................................................................................................12 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 INCLUYENDO IMÁGENES........................................................................................................................20 4.1 4.2 4.3 5. 5.1 5.2 5.3 5.4 5.5 5.6 5.7 5.8 5.9 6. 6.1 6.2 6.3 JPEG VS GIF..............................................................................................................................................20 COMANDO IMG SRC..................................................................................................................................20 EL ATRIBUTO ALT="..." ...............................................................................................................................21 INTRODUCIENDO ENLACES (LINKS)....................................................................................................23 ¿QUÉ ES UNA URL?.....................................................................................................................................23 COMANDO LINK ..........................................................................................................................................23 CREANDO UN ENLACE A UN GRÁFICO ...........................................................................................................24 ENLACE A OTROS DIRECTORIOS....................................................................................................................24 LINKS A PARTES DE UNA MISMA PÁGINA ........................................................................................................24 ENLACES HIPERGRÁFICOS ............................................................................................................................25 MARCO DE LA IMAGEN ................................................................................................................................25 IMÁGENES SELLO ........................................................................................................................................26 IMÁGENES CON VARIOS LINKS ......................................................................................................................26 LISTAS Y TABLAS......................................................................................................................................27 LISTAS DESORDENADAS ...............................................................................................................................27 LISTAS ORDENADAS ....................................................................................................................................27 LISTAS DESCRIPTIVAS ..................................................................................................................................28

4.

Luis de Salvador

Página: 2

Introducción al HTML
6.4 6.5 6.6 7. 7.1 7.2 7.3 7.4 8. 8.1 8.2 9. 9.1 9.2 9.3 9.4 10. TABLAS EN HTML......................................................................................................................................28 TABLAS FANTASMA.....................................................................................................................................30 COLOREANDO TABLAS ................................................................................................................................30 FRAMES .......................................................................................................................................................31 CREANDO FRAMES ......................................................................................................................................31 PARÁMETRO TARGET ...............................................................................................................................31 TARGET ESPECIALES O MÁGICOS ...............................................................................................................32 FRAMES INVISIBLES..................................................................................................................................33 GIFS ANIMADOS ........................................................................................................................................34 ¿QUÉ ES UN GIF ANIMADO?.........................................................................................................................34 CREANDO UN GIF ANIMADO ........................................................................................................................34 FORMULARIOS ..........................................................................................................................................35 INTRODUCCIÓN ...........................................................................................................................................35 ETIQUETA FORM .......................................................................................................................................35 ETIQUETA INPUT.......................................................................................................................................35 OTRAS ETIQUETAS DE FORMULARIO: SELECT Y TEXTAREA ............................................................................36 HOJAS DE ESTILO .....................................................................................................................................37 10.1 10.2 10.3 11. ESTILOS EN ARCHIVOS EXTERNOS ................................................................................................................37 CLASES EN LOS ESTILOS...............................................................................................................................38 CRITERIO DE SELECCIÓN CONTEXTUAL .........................................................................................................38

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

ANEXO: RESUMEN DE HTML .................................................................................................................48 ANEXO: CODIGOS DE CARACTERES....................................................................................................52

Luis de Salvador

Página: 3

Introducción al HTML
15. 16. 17. ANEXO: MÁS SOBRE URL........................................................................................................................58 ANEXO: COLORES EN HTML..................................................................................................................60 ANEXO: RECURSOS HTML......................................................................................................................64 17.1 17.2 17.3 17.4 INFORMACIÓN SOBRE EL ESTÁNDAR .............................................................................................................64 MANUALES Y GUIAS DE ESTILO (INGLÉS).......................................................................................................64 MANUALES Y GUIAS DE ESTILO (CASTELLANO)..............................................................................................64 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 Cliente TCP

HTTP Servidor 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) 2) 3) 4) Ejecute el navegador. Elija Abrir fichero... (Open File... o Open File in Brower) en el menú Archivo (File). Use la caja de diálogo para encontrar y abrir el archivo que ha creado. 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: <!-- esto es un comentario --> 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 de la etiqueta de párrafo. <P> Más adelante... <P> Cuantas más etiquetas... ¿mejor se siente?

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

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

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

Y finalmente, pudimos ver el brillante propósito de la etiqueta de párrafo. Más adelante... Cuantas más etiquetas... ¿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: <BLINK>Wow</BLINK> 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>: <P> bla bla bla <IMG SRC="archivo.GIF"><BR> bla bla </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> <IMG SRC="nombre_de_archivo.GIF" ALIGN=left> 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: <BR CLEAR=left> <BR CLEAR=right> <BR CLEAR=all> 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: <DIV ALIGN=left>...</DIV> Luis de Salvador Página: 14

Introducción al HTML <DIV ALIGN=right>...</DIV> <DIV ALIGN=center>...</DIV> Note que el atributo <CENTER>...</CENTER>. CENTER actúa igual que la etiqueta de Netscape

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í: <BODY BGCOLOR=#XXXXXX> 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: <BODY BACKGROUND="fichero.GIF"> 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: <BIG>...</BIG> <SMALL>...</SMALL> 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> <FONT SIZE=-2>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: <BASEFONT SIZE=5> 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 COLOR=#993459> <FONT COLOR=lime> <FONT COLOR=#002200> ... ... ... ... </FONT> </FONT> </FONT> </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: <SUP>...</SUP> <SUB>...</SUB> 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: <HR SIZE=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: <HR WIDTH=X> <HR WIDTH=Z%>

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:levine@ucla.edu">envíe un e-mail a Alan</A> <A HREF="mailto:agma@usa.net">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:levine@maricopa.edu, 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'. <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> Mi otra página es: <A HREF="http://www.inta.es">INTA</A> Hasta luego! </BODY> </HTML> 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> ……………. <!-- varias lineas --> <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: <MAP NAME="map_name"> <AREA SHAPE="rect" COORDS="x1,y1,x2,y2" HREF=URL1> <AREA SHAPE="rect" COORDS="x1,y1,x2,y2" HREF=URL2> </MAP> 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í: <TABLE> o <TABLE BORDER=0> 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: <HTML> <HEAD> </HEAD> <FRAMESET COLS="30%,70%"> <FRAME SRC="menu.htm" NAME="z1"> <FRAME SRC="info.htm" NAME="z2"> </FRAMESET> </HTML> 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,*"> <FRAME MARGINWIDTH="5" MARGINHEIGHT="10" SRC="1.htm" NAME="menu" NORESIZE> <FRAME MARGINWIDTH="10" MARGINHEIGHT="10" SRC="2.htm" NAME="texto"> </FRAMESET> 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"> <!-P {font-size:18pt; margin-left:20pt;} H1 {color:blue;} --> </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 <werbach@access.digex.net> 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 <werbach@access.digex.net>. 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 <jutta@cs.tu-berlin.de> Henry Churchyard <churchh@uts.cc.utexas.edu> Larry Katz <lhk@blackstone.com>

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 Outline Type <OL><LI></OL> (<LI> before each list item) <OL TYPE=A|a|I|i|1> (for the whole list) <LI TYPE=A|a|I|i|1> (this & subsequent) 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)

N1.0 N1.0

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) < &lt; > &gt; & &amp; " &quot; N1.0 Registered TM &reg; N1.0 Copyright &copy; (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 lt gt amp quot Syntax &lt; &gt; &amp; &quot; Description Less than sign Greater than sign Ampersand 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, 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 Aacute Agrave Acirc Atilde Aring Auml AElig Ccedil Eacute Egrave Ecirc Euml Iacute Igrave Icirc Iuml ETH Ntilde Oacute Ograve Ocirc Otilde Ouml Oslash Uacute Ugrave Ucirc Syntax &Aacute; &Agrave; &Acirc; &Atilde; &Aring; &Auml; &AElig; &Ccedil; &Eacute; &Egrave; &Ecirc; &Euml; &Iacute; &Igrave; &Icirc; &Iuml; &ETH; &Ntilde; &Oacute; &Ograve; &Ocirc; &Otilde; &Ouml; &Oslash; &Uacute; &Ugrave; &Ucirc; Description Capital A, acute accent Capital A, grave accent Capital A, circumflex accent Capital A, tilde Capital A, ring Capital A, dieresis or umlaut mark Capital AE dipthong (ligature) Capital C, cedilla Capital E, acute accent Capital E, grave accent Capital E, circumflex accent Capital E, dieresis or umlaut mark Capital I, acute accent Capital I, grave accent Capital I, circumflex accent Capital I, dieresis or umlaut mark Capital Eth, Icelandic Capital N, tilde Capital O, acute accent Capital O, grave accent Capital O, circumflex accent Capital O, tilde Capital O, dieresis or umlaut mark Capital O, slash Capital U, acute accent Capital U, grave accent Capital U, circumflex accent and

Luis de Salvador

Página: 52

Introducción al HTML
Uuml Yacute THORN szlig aacute agrave acirc atilde atilde auml aelig ccedil eacute egrave ecirc euml iacute igrave icirc iuml eth ntilde oacute ograve ocirc otilde ouml oslash uacute ugrave ucirc uuml yacute thorn yuml &Uuml; &Yacute; &THORN; &szlig; &aacute; &agrave; &acirc; &atilde; &atilde; &auml; &aelig; &ccedil; &eacute; &egrave; &ecirc; &euml; &iacute; &igrave; &icirc; &iuml; &eth; &ntilde; &oacute; &ograve; &ocirc; &otilde; &ouml; &oslash; &uacute; &ugrave; &ucirc; &uuml; &yacute; &thorn; &yuml; Capital U, dieresis or umlaut mark Capital Y, acute accent Capital THORN, Icelandic Small sharp s, German (sz ligature) Small Small Small Small Small Small Small Small Small Small Small Small Small Small Small Small Small Small Small Small Small Small Small Small Small Small Small Small Small Small Small a, acute accent a, grave accent a, circumflex accent a, tilde a, tilde a, dieresis or umlaut mark ae dipthong (ligature) c, cedilla e, acute accent• e, grave accent e, circumflex accent e, dieresis or umlaut mark i, acute accent i, grave accent i, circumflex accent i, dieresis or umlaut mark eth, Icelandic n, tilde o, acute accent o, grave accent o, circumflex accent o, tilde o, dieresis or umlaut mark o, slash u, acute accent u, grave accent u, circumflex accent u, dieresis or umlaut mark y, acute accent thorn, Icelandic y, dieresis or umlaut mark

----------------------------------------------------------------Numerical Character References This list, sorted numerically, is single-byte coded graphic character set: Reference &#00;-&#08; &#09; &#10; &#11;-&#31; &32; &33; &34; &35; &36; &37; &38; &39; &40; &41; &42; &43; Description Unused Horizontal tab Line feed Unused Space Exclamation mark Quotation mark Number sign Dollar sign Percent sign Ampersand Apostrophe Left parenthesis Right parenthesis Asterisk Plus sign derived from the ISO 8859/1 8-bit

Luis de Salvador

Página: 53

Introducción al HTML
&44; &45; &46; &47; &#48; - &#57; &58; &59; &60; &61; &62; &63; &64; &#65;-&#90; &91; &92; &93; &95; &96; &#97;-&#122; &123; &124; &125; &126; &#127;- &#160; &161; &162; &163; &164; &165; &166; &167; &168; &169; &170; &171; &172; &173; &174; &175; &176; &177; &178; &179; &180; &181; &182; &183; &184; &185; &186; &187; &188; &189; &190; &191; Comma Hyphen Period (fullstop) Solidus (slash) Digits 0-9 Colon Semi-colon Less than Equals aign Greater than Question mark Commercial at Letters A-Z Left square bracket Reverse solidus (backslash) Right square bracket Horizontal bar Acute accent Letters a-z Left curly brace Vertical bar Right curly brace Tilde Unused Inverted exclamation Cent sign Pound sterling General currency sign Yen sign Broken vertical bar Section sign Umlaut (dieresis) Copyright Feminine ordinal Left angle quote, guillemotleft Not sign Soft hyphen Registered trademark Macron accent Degree sign Plus or minus Superscript two Superscript three Acute accent Micro sign Paragraph sign Middle dot Cedilla Superscript one• Masculine ordinal Right angle quote, guillemotright Fraction one-fourth Fraction one-half Fraction three-fourths Inverted question mark

Luis de Salvador

Página: 54

Introducción al HTML

&192; &193; &194; &195; &196; &197; &198; &199; &200; &201; &202; &203; &204; &205; &206; &207; &208; &209; &210; &211; &212; &213; &214; &215; &216; &217; &218; &219; &220; &221; &222; &223; &224; &225; &226; &227; &228; &229; &230; &231; &232; &233; &234; &235; &236; &237; &238; &239; &240; &241; &242; &243; &244; &245; &246; &247;

Capital Capital Capital Capital Capital Capital Capital Capital Capital Capital Capital Capital Capital Capital Capital Capital Capital Capital Capital Capital Capital Capital Capital

A, A, A, A, A, A, AE C, E, E, E,

acute accent grave accent circumflex accent tilde ring dieresis or umlaut mark dipthong (ligature) cedilla acute accent grave accent• circumflex accent

E, dieresis or umlaut mark I, acute accent I, grave accent I, circumflex accent I, dieresis or umlaut mark Eth, Icelandic N, tilde O, acute accent O, grave accent O, circumflex accent O, tilde O, dieresis or umlaut mark

Multiply sign Capital Capital Capital Capital Capital Capital O, U, U, U, U, Y, slash acute accent grave accent circumflex accent dieresis or umlaut mark acute accent

Capital THORN, Icelandic Small sharp s, German (sz ligature) Small Small Small Small Small Small Small Small Small Small Small Small Small Small Small Small Small Small Small Small Small Small Small a, acute accent a, grave accent a, circumflex accent a, tilde a, tilde a, dieresis or umlaut mark ae dipthong (ligature) c, cedilla e, acute accent e, grave accent e, circumflex accent e, dieresis or umlaut mark i, acute accent i, grave accent i, circumflex accent i, dieresis or umlaut mark eth, Icelandic n, tilde o, acute accent o, grave accent o, circumflex accent o, tilde o, dieresis or umlaut mark

Division sign

Luis de Salvador

Página: 55

Introducción al HTML
&248; &249; &250; &251; &252; &253; &254; &255; 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; &cdots; &vdots; &ddots; &dotfill; Added Spacing &thinsp; &sp; &emsp; &quad; \, \: \; \quad thin space medium space thick space huge space \ldots \cdots \vdots \ddots \dotfill three dots on the baseline three dots on same level as a minus sign three vertical dots diagonal dots (top left to bottom right) like cdots but fills column in an array Small o, slash Small u, acute accent Small Small Small Small Small Small u, grave accent u, circumflex accent u, dieresis or umlaut mark y, acute accent thorn, Icelandic y, dieresis or umlaut mark

Lower case Greek Letters &alpha; &beta; &gamma; &delta; &epsilon; &vepsilon; &zeta; &eta; &theta; &vtheta; &iota; &kappa; &lambda; &mu; &nu; &xi; &omicron; \alpha \beta \gamma \delta \epsilon \varepsilon \zeta \eta \theta \vartheta \iota \kappa \lambda \mu \nu \xi .... alpha beta gamma delta epsilon var epsilon zeta eta theta var theta iota kappa lambda mu nu xi omicron PS-Symbol Math-8 61 61 62 62 67 63 64 64 -65 65 3B 7A 66 68 67 71 68 -79 69 69 6B 6A 6C 6B 6D 6C 6E 6D 78 6E 6F 6F

Luis de Salvador

Página: 56

Introducción al HTML
&pi; &varpi; &rho; &varrho; &sigma; &vsigma; &tau; &upsilon; &phi; &varphi; &chi; &psi; &omega; \pi \varpi \rho \varrho \sigma \varsigma \tau \upsilon \phi \varphi \chi \psi \omega pi var pi rho var rho sigma var sigma tau upsilon phi var phi chi psi omega 70 76 72 -73 56 74 75 66 6A 63 79 77 70 7B 71 -72 5B 73 74 75 7A 76 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 aliceblue antiquewhite aqua aquamarine azure beige bisque black blanchedalmond blue blueviolet brown burlywood cadetblue chartreuse chocolate coral cornflowerblue cornsilk crimson cyan darkblue darkcyan darkgoldenrod darkgray darkgreen darkkhaki darkmagenta darkolivegreen darkorange darkorchid darkred darksalmon darkseagreen darkslateblue darkslategray Red F0 FA 00 7F F0 F5 FF 00 FF 00 8A A5 DE 5F 7F D2 FF 64 FF DC 00 00 00 B8 A9 00 BD 8B 55 FF 99 8B E9 8F 48 2F Green F8 EB FF FF FF F5 E4 00 EB 00 2B 2A B8 9E FF 69 7F 95 F8 14 FF 00 8B 86 A9 64 B7 00 6B 8C 32 00 96 BC 3D 4F Blue FF D7 FF D4 FF DC C4 00 CD FF E2 2A 87 A0 00 1E 50 ED DC 3C FF 8B 8B 0B A9 00 6B 8B 2F 00 CC 00 7A 8F 8B 4F

Luis de Salvador

Página: 60

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

Luis de Salvador

Página: 61

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

Luis de Salvador

Página: 62

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

Sign up to vote on this title
UsefulNot useful