Manual de HTML

ESTRUCTURA BASICA DE UN DOCUMENTO HTML


Un documento escrito en HTML contendría básicamente las siguientes etiquetas :


Indica el inicio del documento.
Inicio de la cabecera.
Final del título del documento.
Final de la cabecera del documento.
Inicio del cuerpo del documento.
Final del cuerpo del documento.
Final del documento.

El documento se hallará situado en algún ordenador al que se pueda acceder a traves de Internet. Para indicar la situación del documento en Internet se utiliza la URL (Uniform Resource Locator). La URL es el camino que ha de seguir nuestro navegador a traves de Internet para acceder a un determinado recurso, bien sea una página Web, un fichero, un grupo de noticias, etc. Es decir, lo que el navegador de páginas Web hace es acceder a un fichero situado en un ordenador que está conectado a la red Internet. La estructura de una URL para una página Web suele ser del tipo http://dominio/directorio/fichero. El dominio indica el nombre del ordenador al que accedemos, el directorio es el nombre del directorio de ese ordenador y fichero el nombre del fichero que contiene la página Web escrita en HTML. Por ejemplo :


http://www.webtaller.com/manual-html/index.hml


Donde ....
http:// es el indicador de pagina Web
www.webtaller.com es el Dominio (nombre) del ordenador
/manual-html/ es el Directorio dentro del ordenador

index.html es el Fichero que contiene la página Web

CUERPO DEL DOCUMENTO

La etiqueta indica el inicio y final de nuestra pagina Web. Será entre el inicio y el final de esta etiqueta donde pongamos los contenidos de nuestra página, textos, gráficos, enlaces, etc.... Esta etiqueta tiene una serie de parámetros opcionales que nos permiten indicar la "apariencia" global del documento :


background= "nombre de fichero gráfico"
Indica el nombre de un fichero gráfico que servirá como "fondo" de nuestra página. Si la imagen no rellena todo el fondo del documento, esta será reproducida tantas veces como sea necesario.

bgcolor = "código de color"
Indica un color para el fondo de nuestro documento. Se ignora si se ha usado el parámetro background.

text = "código de color"
Indica un color para el texto que incluyamos en nuestro documento. Por defecto es negro.

link = "código de color"
Indica el color de los textos que dan acceso a un Hiperenlace. Por defecto es azul.

vlink = "código de color"
Indica el color de los textos que dan acceso a un Hiperenlace que ya hemos visitado con nuestro navegador. Por defecto es purpura.

El código de color es un numero compuesto por tres pares de cifras hexadecimales que indican la proporcion de los colores "primarios", rojo, verde y azul. El codigo de color se antecede del símbolo #.


Ejemplos:
#000000 - Negro
#FF0000 - Rojo
#00FF00 - Verde
#0000FF - Azul
#FFFFFF - Blanco

El primer par de cifras indican la proporción de color Rojo, el segundo par de cifras la proporcion de color Verde y las dos ultimas la proporcion de color Azul. Cada par de cifras hexadecimales nos permiten un rango de 0 a 255. Combinando las proporciones de cada color primario obtendremos diferentes colores.
ATRIBUTOS DEL TEXTO

Para indicar atributos del texto (negrilla, subrayado, etc...) tenemos varias etiquetas. Algunas de ellas no son reconocidas por determinados navegadores de Internet, es por ello que segun el navegador que este vd. utilizando, verá el resultado correctamente o no.

Atributo Etiqueta Ejemplo Resultado
Negrita Texto de prueba Texto de prueba
Cursiva Texto de prueba Texto de prueba
Teletype Texto de prueba Texto de prueba
Subrayado Texto de prueba Texto de prueba
Tachado Texto de prueba Texto de prueba
Parpadeo Texto de prueba Texto de prueba
Superindice ^{Texto de prueba} Texto de prueba
Subindice _{Texto de prueba} Texto de prueba

Por otro lado la etiqueta nos permite variar el tamaño, el color, y el tipo de letra de un texto determinado. Utiliza para ello los parámetros size , bgcolor y face .

size = valor Da al texto un tamaño en puntos determinado. size = + / - valor Da al texto un tamaño tantas veces superior (+) o inferior (-) como indique el valor. color = "codigo de color" Escribe el texto en el color cuyo codigo se especifica. face = "nombre de font" Escribe el texto en el tipo de letra especificado. Si este tipo de letra no existe en el ordenador que "lee" la pagina se usara el font predeterminado del navegador. Ejemplo Se veria como
Texto de prueba Texto de prueba

Existen otras etiquetas que realizan las mismas operaciones que las antes vistas en los atributos del texto.

Ejemplo Se veria como
Texto de prueba Texto de prueba

Para incluir comentarios en la página Web se utiliza la etiqueta .

IMAGENES

Hasta el momento hemos visto como se puede escribir texto en una pagina Web, así como sus posibles formatos. Para incluir una imagen en nuestra página Web utilizaremos la etiqueta . Hay dos formatos de imagenes que todos los navegadores modernos reconocen. Son las imágenes GIF y JPG . Cualquier otro tipo de fichero gráfico o de imagen (BMP, PCX, CDR, etc...) no será mostrado por el navegador, a no ser que disponga de un programa externo que permita su visualización.

La etiqueta tiene varios parámetros :

src = "imagen" Indica el nombre del fichero gráfico a mostrar.

alt = "Texto" Mostrara el texto indicado en el caso de que el navegador utilizado para ver la página no sea capaz de visualizar la imagen.

lowsrc = "imagen" Muestra una segunda imagen "superpuesta" sobre la primera una vez se carga la pagina. Este parametro no es reconocido por la totalidad de los navegadores ya que esta en estudio su aplicacion, asi que en la mayoria de los casos sera ignorado mostrandose solo la primera imagen ( src ). En Netscape muestra la imagen indicada por lowsrc en primer lugar, y posteriormente muestra la imagen indicada por src . Si las imagenes son iguales pero tienen distinta "resolucion" se conseguirá un efecto tipo "Fade". Si las imagenes son de distinto tamaño la imagen indicada en src se redimensionara al tamaño indicado por la imagen indicada enlowsrc

align = TOP / MIDDLE / BOTTOM Indica como se alineará el texto que siga a la imagen. TOP alinea el texto con la parte superior de la imagen, MIDDLE con la parte central, y BOTTOM con la parte inferior.

border = tamaño Indica el tamaño del "borde" de la imagen. A toda imagen se le asigna un borde que será visible cuando la imagen forme parte de un Hyperenlace.

height = tamaño Indica el alto de la imagen en puntos o en porcentaje. Se usa para variar el tamaño de la imagen original.

width = tamaño Indica el ancho de la imagen en puntos o en porcentaje. Se usa para variar el tamaño de la imagen original.

hspace = margen Indica el numero de espacios horizontales, en puntos, que separarán la imagen del texto que la siga y la anteceda.

vspace = margen Indica el número de puntos verticales que separaran la imagen del texto que le siga y la anteceda.

ismap / usemap Indica que la imagen es un MAPA. Veremos estos parametros mas adelante en este manual.

Ejemplo Se vería como

Si el navegador no pudiese visualizar el gráfico.....

ENLACES

La característica principal de una página Web es que podemos incluir Hiperenlaces. Un Hiperenlace es un elemento de la página que hace que el navegador acceda a otro recurso, otra página Web, un archivo, etc...

Para incluir un Hyperenlace se utiliza la etiqueta . El texto o imagen que se encuentre dentro de los límites de esta etiqueta será sensible, esto quiere decir que si pulsamos con el raton sobre él, se realzará la funcion de hiperenlace indicada por la etiqueta . Si el Hiperenlace está indicado por un texto, este aparecerá subrayado y en distinto color, si se trata de una imagen, esta aparecerá con un borde rodeándola. Esta etiqueta tiene el parámetro href que indica el lugar a donde nos llevará el Hiperenlace si lo pulsamos.

Ejemplo Se vería como
Pulse para ir a la página de Microsoft

Si situamos el ratón encima de la frase y pulsamos, el navegador accederá a la página Web indicada por el parámetro href , es decir, accederá a la página situada en http://www.microsoft.com/

Lo mismo podríamos hacer con un gráfico.

Ejemplo Se veria como
Para buscar en Internet :

Para buscar en Internet :

Se accedería a la pagina situada en http://www.yahoo.com/.

Un Hiperenlace también puede llevarnos a una zona de nuestra página. Para ello debemos marcar en nuestra pagina las diferentes secciones en las que se divide. Lo haremos con el parametro name .

Ejemplo:


Esta instrucción marca el inicio de una sección dentro de nuestra página. La seccion se llamará seccion1 . Para hacer un enlace a esta sección dentro de nuestra página lo haríamos de la siguiente forma :

Primera Parte
O también : Primera Parte

Un Hiperenlace puede hacerse a cualquier tipo de fichero. Con las etiquetas anteriores hemos visto como hacer enlaces a páginas Web o secciones dentro de una página web, pero podríamos hacer un Hiperenlace a un grupo de noticias, o a otro servicio de Internet.

Ejemplo:
Noticias de actualidad

Asimismo podemos hacer que el Hiperenlace de como resultado el envío de un correo electrónico a una dirección de correo determinada.

Ejemplo:
Envíame tus sugerencias

También podemos realizar un Hiperenlace a un fichero cualquiera. En este caso el navegador intentará "ejecutar" el fichero, y si no puede hacerlo nos preguntará si deseamos grabarlo en nuestro ordenador. Esta es una forma sencilla de permitir a los visitantes de nuestra página copiar ficheros a su ordenador.

Pulsa aqui para llevarte una copia del manual.

La imagen a mostrar puede encontrase en el mismo lugar (URL) que la pagina Web. Si este no fuera el caso, el nombre de la imagen ha de contener la URL donde se encuentre la imagen.


TABLAS

Las tablas nos permiten representar cualquier elemento de nuestra página (texto, listas, imágenes, etc...) en diferentes filas y columnas separadas entre si. Es una herramienta muy util para "ordenar" contenidos de distintas partes de nuestra página. La tabla se define mediante la etiqueta

Los parámetros opcionales de esta etiqueta son :

border = num. Indica el ancho del borde de la tabla en puntos.

cellspacing = num Indica el espacio en puntos que separa las celdas que estan dentro de la tabla.

cellpadding = num Indica el espacio en puntos que separa el borde de cada celda y el contenido de esta.

width = num ó % Indica la anchura de la tabla en puntos o en porcentaje en función del ancho de la ventana del navegador. Si no se indica este parámetro, el ancho se adecuará al tamaño de los contenidos de las celdas.

height = num ó % Indica la altura de la tabla en puntos o en porcentaje en función del alto de la ventana del navegador. Si no se indica este parámetro, la altura se adecuará a la altura de los contenidos de las celdas.

bgcolor = codigo de color Especifica el color de fondo de toda la Tabla.

Para definir las celdas que componen la tabla se utilizan las etiquetas y . indica una celda normal, y indica una celda de "cabecera", es decir, el contenido será resaltado en negrita y en un tamaño ligeramente superior al normal. Los parámetros opcionales de ambas etiquetas son :

align = LEFT / CENTER / RIGHT / JUSTIFY Indica como se debe alinear el contenido de la celda, a la izquierda (LEFT), a la derecha (RIGHT), centrado (CENTER) o justificado (JUSTIFY).

valign = TOP / MIDDLE / BOTTOM Indica la alineación vertical del contenido de la celda, en la parte superior (TOP), en la inferior (BOTTOM), o en el centro (MIDDLE).

rowspan = num Indica el número de filas que ocupará la celda. Por defecto ocupa una sola fila.

colspan = num Indica el número de columnas que ocupará la celda. Por defecto ocupa una sola columna.

width = num ó % Indica la anchura de la columna en puntos o en porcentaje en función del ancho de la ventana del navegador. Si no se indica este parámetro, el ancho se adecuará al tamaño de los contenidos. Este parametro solo funciona en los navegadores modernos.

bgcolor = codigo de color Especifica el color de fondo del elemento de la Tabla. Para indicar que acaba una fila de celdas se utiliza la etiqueta . A continuación mostraremos un ejemplo de una tabla que contiene solo texto. Como se indicó anteriormente el contenido de las celtas puede ser cualquier elemento de HTML, un texto, una imagen, un Hiperenlace, una Lista, etc...

MAPAS
Un Mapa es una imagen que permite realizar diferentes Hiperenlaces en función de la "zona" de la imagen que se pulse. Las etiquetas para crear mapas son y .

La etiqueta