Los documentos HTML están en un sencillo formato de texto y pueden ser creados usando cualquier editor de textos (ejemplo editor vi en máquinas UNIX).
Si buscas información sobre algo específico, la búqueda puede ser más rápido mirando el índice .
Este es un ejemplo de HTML:
<TITLE>el ejemplo más simple en HTML</TITLE>
<H1>Este es el título</H1>
Bienvenido al mundo de HTML.
Este es un párrafo.<P>
Y este es otro párrafo.<P>
¿ Estás interesado en ver cómo queda esa página ? 
HTML utiliza etiquetas para indicar al visualizador de Web cómo mostrar el texto.El ejemplo anterior usa:
Las etiquetas en HTML aparecen encerradas entre los símbolos < (al inicio) y > (al final). La mayoría de las etiquetas aparecen emparejadas, ejemplo: <H1> y </H1> para indicar al visualizador de Web donde empieza y termina el encabezamiento.
Pero hay excepciones para la anterior regla de emparejamiento, ejemplo la etiqueta <P> que no necesita un </P> pues indica un salto de párrafo que no necesita final de la acción.
NOTE: HTML no es sensible a mayúsculas y minúsculas. <title> es equivalente a <TITLE> o <TiTlE>.
No todas las etiquetas son aceptadas por todos los visualizadores World Wide Web. Si una etiqueta no es aceptada, el visualizador la ignora.
Todos los documentos HTML deberían tener un título.Los títulos generalmente aparecen separados del documento y son usados principalmente para la identificación de dicho documento en otros contextos (ejemplo, WAIS) ya que sirve para describir en pocas palabras el contenido del documento.
En los sistemas X Window y versiones de Microsoft Windows del Mosaic NCSA el campo para el Título del documento aparece en la parte superior de la ventana, justo debajo del menú como Document Title.
HTML tiene seis niveles de encabezamientos, numerados del 1 al 6, y se utiliza uno u otro dependiendo del énfasis que se quiera dar,siendo el 1 el que más resalta . Aparecen con letra más grande que el texto normal y en negrita. El primer encabezamiento en cada documento debería ir etiquetado con <H1>.La sintaxis de las etiquetas de encabezamiento son:
<Hy>Texto de encabezamiento </Hy >
donde y es un número entre el 1 y el 6 que especifican el nivel del encabezamiento.
Por ejemplo, el código para "Encabezamientos" que inicia este tema está realizado con la instrucción:
<H3>Encabezamiento</H3>
En algunos procesadores de texto la tecla returns en HTML no significa nada. Cuando escribes un texto en HTML y dejas espacios muy grandes entre palabras en tu fichero, esto normalmente aparece convertido en un sólo espacio con el visualizador Web. Por ello, cuando se desea separar un párrafo de otro es necesario utilizar la etiqueta <P> Mira el siguiente ejemplo:
Bienvenido a HTML.
Este es el primer párrafo. <P>
El visualizador Web ignora el salto dado tras el primer punto y sólo empieza un nuevo párrafo cuando encuentra la etiqueta <P>.
El resultado es el siguiente:
Bienvenido a HTML. Este es el primer párrafo.
Lo que hace más poderoso a HTML es su habilidad para enlazar texto o imágenes con otros documentos. El visualizador realza esas regiones con otro color o lo subraya para indicar esa caracterítica. La sintaxis para una referencia de hipertexto es la siguiente:
<A HREF="Bienvenido.html">Bienvenido a DISAM </A>
Luego como se ha indicado, los pasos a seguir son:
A.)
El World Wide Web usa Uniform Resource Locators (URLs) para especificar la localización de ficheros que se encuentran en otros servidores. Un URL incluye el tipo de recurso que está siendo utilizado (e.g., gopher, WAIS), la dirección del servidor y la localización del fichero. La sintaxis es:
protocolo://host.domain[:port]/path/filename
donde protocolo es uno de
El número port generalmente puede ser omitido.
Por ejemplo para conectarte desde fuera con la página de personal de DISAM debes usar:
<A HREF = "http://www.disam.upm.es/es/personal/personal.html"> DISAM</A>
Debería aparecer resaltado el texto " DISAM " en tu documento como un hiperlink a este documento
Para obtener más información sobre direcciones URLs mira en:
Los anchors pueden ser usados también para moverse a una sección particular en un documento.Supón que quieres enlazar desde un documento A a una sección de un documento B.(llama este documento como documentoB.html)).Lo primero que necesitas es instalar un nombre de anchor a tu documento B. Por ejemplo, instalar un anchor llamado "probando" para el documento B, escribe:
Aquí está <A NAME = "probando">algún texto </a>
Ahora cuando tu hagas un enlace al documento A, debes incluir además del nombre del fichero, el nombre del anchor que has generado, separados por el símbolo(#).
Este es mi <A HREF = "documentoB.html#probando">link</A> a el documento B.
Ahora haciendo click sobre la palabra link en el documento A, te envía directamente a la palabra algún texto en el documento B
La técnica es exactamente la misma pero el nombre del fichero es omitido.
Por ejemplo, para enlazar a el anchor probandodesde el fichero B usa:
Este es mi enlace <A HREF = "#probando">probando enlace</A> dentro del documento B
Todo lo dicho anteriormente es suficiente para producir un simple documento HTML. Para crear documentos más complejos hay otras etiquetas para hacer listas de varios tipos, secciones con formato definido...
HTML soporta lista numeradas, no numeradas y listas de definiciones.
Para hacer una lista no numerada,
Un ejemplo de una lista no numerada es el siguiente:
<UL>
<LI> peras
<LI> manzanas
</UL>
La salida es:
Una lista numerada (también llamada lista ordenada) es igual a una lista no numerada,escepto que se usa<OL> en vez de <UL>. Los elementos de la lista deben ir precedidos por la etiqueta<LI> . El siguiente ejemplo en código HTML
<OL>
<LI> naranjas
<LI> peras
<LI> manzanas
</OL>
produce la siguiente salida:
Una lista de definición normalmente consiste en alternar un título (abreviado como DT) y una definición (abreviada como DD)el visualizador de Web generalmente sitúa la definición en una nueva línea.
Ejemplo:
<DL>
<DT> DISAM
<DD> DISAM es la División de Ingenería de Sistemas y Automática
del Departamento de Automática, Ingeniería Electrónica
e Informática Industrial.
<DT> ETSII
<DD> La Escuela de Ingenieros Industriales de Madrid imparte Enseñanza Técnica Civil de Grado Superior.
</DL>
La salida que aparece es:
Las entradas <DT> y <DD>pueden contener múltiples párrafos(separados por la etiqueta<P> ), listas u otro tipo de información.
Las listas pueden ser arbitrariamente anidadas, pero es aconsejable limitarlo a 3 niveles.Puedes tener además un número de párrafos, cada uno conteniendo una lista anidada, en una simple lista de elementos.
Un ejemplo de lista anidada:
<UL>
<LI> Algunas ciudades españolas:
<UL>
<LI> Madrid
<LI> Barcelona
</UL>
<LI> Una ciudad andaluza:
<UL>
<LI> Sevilla
</UL>
</UL>
El anterior ejemplo aparecerá como:
Usa la etiqueta <PRE> para generar texto en un formato fijo donde se respetarán los espacios, las nuevas líneas, y los tabuladores.(Es decir, múltiples espacios son vistos como múltiples espacios, saltos de líneas tienen igual aspecto que en el fichero origen HTML).Es útil para listas de instrucciones de programas, ejemplo:
<PRE>
#!/bin/csh
cd $SCR
cfs get mysrc.f:mycfsdir/mysrc.f
cfs get myinfile:mycfsdir/myinfile
fc -02 -o mya.out mysrc.f
mya.out
cfs save myoutfile:mycfsdir/myoutfile
rm *
</PRE>
aparece como:
#!/bin/csh
cd $SCR
cfs get mysrc.f:mycfsdir/mysrc.f
cfs get myinfile:mycfsdir/myinfile
fc -02 -o mya.out mysrc.f
mya.out
cfs save myoutfile:mycfsdir/myoutfile
rm *
Debes evitar usar otro tipo de etiqueta dentro de la sección <PRE>.
Comoo hay símbolos como <, >, and & que tienen un significado especial en HTML hay que utilizar los formatos que entiende HTML (<, >, and &, respectivamente) para introducir estos caracteres.Mira la sección caracteres espacialespara más información.
Usa la etiqueta <BLOCKQUOTE> para incluir citas en un bloque separado del resto de información.Muchos visualizadores generalmente cambian el tipo de letra para realzarlo.
Ejemplo:
<BLOCKQUOTE>
I still have a dream. It is a dream deeply rooted in the
American dream. <P>
I have a dream that one day this nation will rise up and
live out the true meaning of its creed. We hold these truths
to be self-evident that all men are created equal. <P>
</BLOCKQUOTE>
The result is:
I still have a dream. It is a dream deeply rooted in the American dream.I have a dream that one day this nation will rise up and live out the true meaning of its creed. We hold these truths to be self-evident that all men are created equal.
La etiqueta <ADDRESS> es normalmente usada para especificar el autor de un documento y significa la dirección con la que puedes contactar con el autor (ejemplo, una dirección email). Es normalmente la última línea de un fichero.
Por ejemplo, la última línea de este fichero es:
<ADDRESS>
Como crear ficheros HTML / asanz@disam.upm.es </ADDRESS>
El resultado es
Como crear ficheros HTML / asanz@disam.upm.esNOTE: <ADDRESS> no es usado para direcciones postales .
Puedes poner dentro de un texto palabras u oraciones con un estilo especial. Hay 2 tipos de estilos: lógicos y físicos.Las de estilo lógicos marcan el texto de acuerdo con su significao, mientras que las de estilo físico indican la apariencia específica de la sección. Por ejemplo, enla anterior oración las palabras ``estilos lógicos'' fue marcado como una ``definición.'' El mismo efecto(formatear esas palabras con italics), podría haber sido alcanzado utilizando otra etiqueta que indica "pon esas palabras en italics".
Si un estilo físico y Lógico producen el mismo resultado ¿Cuál utilizo?
En el universo de SGML el contenido es separado de la presentación. De ese modo las etiquetas que indican un nivel uno de encabezamiento son interpretadas como un nivel uno de encabezamiento pero no especifica cómo es ese encabezamiento. Por ejemplo, letra tipo Times, negrita, de tamaño 24 puntos, centrado en la parte superior de la página. La ventaja de esto es que tú decides la presentación de la cabecera en el dispositivo de presentación (ejemplo tu visualizador World Wide Web)
Otra ventaja de las etiquetas Lógicas es para reforzar la consistencia de tu documento. Es más sencillo marcar algo como<H1> que recordar que eso significa:letra tipo Times, negrita, de tamaño 24 puntos, centrado en la parte superior de la página. Lo mismo ocurre con los estilos de caracteres. Por ejemplo, la etiqueta <STRONG> hace aparecer el texto en negrita. Es probable que alguien prefiera que eso aparezca marcado en rojo, el estilo lógico ofrece esa flexibilidad.
Para dar un determinado estilo a un carácter,
Los siguientes caracteres tienen un significado especial en HTML :(<), (>), (&) y (")
Para usar alguno de ellos en documentos HTML debes utilizar su secuencia de escape:
Hay otras secuencias de escape para caracteres acentuados. Por ejemplo:
NOTE: las secuencias de escape son sensibles a mayúsculas o minúsculas.No se puede usar ejemplo < en vez de <.
La etiqueta <BR> fuerza a cambiar de línea sin que haya espacios extras entre líneas. (Al contrario que la etiqueta <P> que produce salto de línea pero introduciendo una línea en blanco entre ambos párrafos.)
Es útil usar <BR> por ejemplo con las direcciones:
National Center for Supercomputing Applications<BR>
605 East Springfield Avenue<BR>
Champaign, Illinois 61820-5518<BR>
La etiqueta <HR> escribe una línea horizontal del ancho de la ventana.
Muchos visualizadores Web pueden mostrar imágenes junto con texto (in-line). Son ficheros que están en X Bitmap (XBM) o con formato GIF. Las imágenes requieren más tiempo en poder verse y aumentan la lentitud con que se visualiza el fichero completo, por eso normalmente no se deberín incluir demasiadas imágenes o imágenes muy grandes.
Para incluir una imagen se usa:
<IMG SRC=image_URL>
donde image_URL es el URL de el fichero imagen. La sintaxis para IMG SRC URLs es idéntica a la que se usa en un anchor HREF. Si el fichero imagen es un fichero .GIF, entonces el nombre del fichero que se escribirá en image_URL debe finalizar con .gif. Los nombres de los ficheros X Bitmap deben finalizar con .xbm.
Por defecto la parte inferior de una imagen es alineada con el texto como muestra este ejemplo.
Si se añde la opción ALIGN=TOP
el texto se alineará con la parte superior de la imagen. Para este caso la sintaxis que debes usar es:
<IMG ALIGN=top SRC=image_URL>
ALIGN=MIDDLE
alinea el texto en el centro de la imagen.
Algunos visualizadores World Wide Web,como aquellos que se ejecutan en terminales VT100, no pueden mostrar imágenes. la opción ALTpermite especificar texto que será mostrado cuando una imagen no puede aparecer. Por ejemplo.
<IMG SRC = "flecha_arriba.gif" ALT = "Up">
donde flecha_arriba.gif es el dibujo de una flecha señalando hacia arriba. Con NCSA Mosaic y otros visualizadores que permiten gráficos, el usuario ve la imagen de la flecha hacia arriba. Con visualizadores VT100, el usuario ve la palabra "Up".
Se puedes querer tener una imagen abierta en un documento separado y cuando el usuario active una palabra o un dibujo más pequeño en la versión in-line del documento,se enlace con ella. Esto se considera una imagen externa y es útil si se quiere disminuir el tiempo de carga del documento principal quitando imágenes muy grandes.
Para incluir una referencia a una imagen externa, usa
<A HREF = image_URL>anchor de enlace </A>
donde anchor de enlace es la palabra que te servirá de enlace con dicha imagen.
Para animaciones externas y sonidos se utiliza la misma sintaxis. Lo único que varía es la extensión del fichero. Por ejemplo,
<A HREF = " QuickTime movies.mov"> anchor de enlace</A>
especifica un enlace al fichero QuickTime movies. Algunas extensiones típicas de ficheros son:
Asegúrate que tu audiencia tiene los visualizadores necesarios para poder ver los tipos de ficheros que incluyas. Muchas estaciones de trabajo UNIX,por ejemplo, no pueden ver QuickTime movies.
