Manual Basico De Html

CAPITULO I

________________________________________

1. Software necesario de desarrollo y visualización:

2. Principios esenciales del lenguaje HTML:

3. Plantilla de un documento HTML:

4. Etiquetas básicas:

INTRODUCCION A HTML:

Aprender a programar en HTML es considerablemente diferente de aprender a desarrollar software en otros lenguajes de programación. El lenguaje HTML es un lenguaje interpretado y permite dar indicaciones precisas al programa cliente, en este caso los browsers, o mas bien los conocidos navegadores, de cómo debe presentarse el documento en pantalla.

Este documento es el que, en la World Wide Web (WWW), conocemos como hipertexto. Un documento hipertexto no se compone únicamente de texto, pues también contiene relaciones con otros documentos. Con el paso del tiempo este concepto se amplió aun mas haciendo que los enlaces no solo sean texto, sino que se complementan con información en otros formatos, como gráficos, sonidos, video, etc. El resultado es un documento que podríamos prácticamente llamar multimedia.

El concepto básico es que los documentos tienen referencias a otros documentos, estén donde estén, bien en un equipo local ó en uno remoto, Estos enlaces pueden ser palabras, frases e incluso imágenes.

En 1989, Tim Berners Lee propuso diseñar un sistema de unificación del acceso a todos los datos que poseía el Centro Europeo para la Investigación Nuclear. Se comenzó así a desarrollar una plataforma de hipetexto y un protocolo de comunicaciones que se denominó HTTP (Hiper Text Transfer Protocol), que permitiría a todos los científicos del CERN, consultar cualquier información de cualquier tema, aunque se encontrase diseminada en los diferentes ordenadores, tanto del propio centro, como en los ordenadores de las diferentes instituciones que colaboraban con el CERN.

El sistema alcanzó un éxito enorme, tanto es así que se comenzó a definir un lenguaje de creación de documentos estructurados que vino a llamarse HTML (Hiper Text Marckup Language).

Los principales temas tratados es en este capitulo son los siguientes

• Software necesario de desarrollo y visualización.

• Principios esenciales del lenguaje HTML.

• Plantilla de un documento HTML.

• Etiquetas básicas.

1 Software necesario de desarrollo y visualización:

Un documento HTML es simplemente un fichero ASCII, en el que se incluye un texto que se quiere mostrar en pantalla, por lo que no se necesita nada más que un editor normal que nos permita salvar el fichero en formato ASCII, no obstante programas como Microsoft Word ya vienen preparados para escribir documentos HTML.

Existe en el mercado software que ayuda a construir las paginas Web, aliviando el trabajo de escribir código, pero siempre hay que retocar el código resultante por lo que es necesario el conocer el lenguaje HTML a fondo, si es que se quiere llegar a realizar buenas páginas.

A continuación mencionaremos el software necesario para el desarrollo de una página Web.

• Programas de tratamiento de imágenes tipo Paint Shop Pro, Corel Draw, Image Composer o similar. En este libro se efectuarán todas la imagenes con Paint Shop Pro, o con Image Composer.

• Editor, el que emplearemos aquí será Word de Microsoft Office.

• Navegador o browser, para ver los resultados de las paginas que se hagan, (Nestcape Navigator, Nestcape Comunicator o Internet Explorer). Dado que no todos los navegadores se comportan ante una instrucción de HTML de la misma forma, se advertirá de las excepciones, por lo que no utilizaremos un único navegador.

Los programas de tratamiento de imágenes se utilizaran para crear botones, banners, animaciones y retocar todas las imágenes que se utilizan en una pagina Web. El editor se utilizará para escribir el código HTML, y por ultimo los navegadores nos servirán para ver el trabajo realizado.

Es importante antes de empezar a trabajar, crear distintas carpetas que guarden cada uno de los distintos elementos que compondrán nuestra pagina Web, por ejemplo

• Imágenes: Almacenaremos aquí todas las imagenes que vamos a utilizar.

• Fondos: Guardaremos todos los fondos que vayamos creando.

• Botones: Todo tipo de botones.

• Banners: Los banners que vayamos a utilizar.

2 Principios esenciales del lenguaje HTML:

Ademas de ser un texto ASCII, el lenguaje HTML se caracteriza por la necesidad de introducir unos comandos o etiquetas llamadas "tags" que indican al programa cliente ("browser") como se debe visualizar el documento en la pantalla. Por medio de estas etiquetas se definen los distintos elementos que componen la imagen. Estos comandos se escriben entre los símbolos "<" y ">" yendo en parejas usualmente, como veremos mas adelante. El formatos general, por tanto, de estos "tags" es el siguiente:

• Inicio de un comando "tag".

• Cierre de ese mismo comando "tag".

El comando puede estar en mayúsculas o en minúsculas siendo indiferente cual de ellas se utilice, quedando a gusto del autor cual utilizar. Todo aquello que escribamos esntre estas dos etiquetas se verá afectado por ellas.

El nombre de los ficheros escritos en HTML deben tener como extensión .html. En el sistema opertivo DOS su extensión es .htm.

3 Plantilla de un documento HTML:

Para empezar, un documento HTML debe estar entre las siguientes dos etiquetas:

<html>

• documento

</html>

Todo documento de HTML se divide en dos zonas principales, una los encabezamientos y el cuerpo del documento la otra.

<head>cabeceras</head>

Dentro de este encabezamiento podemos incluir el titulo de nuestra página, que no obstante no veremos en la pantalla del "browser", pero si alguien añade a sus "bookmarks" la dirección de nuestra página será lo que verá. el titulo debe ser breve pero descriptivo, mas adelante veremos también algunos trucos que nos serviran para que las "arañas" de los buscadores incluyan la dirección a nuestra página.

Este titulo deberá ir encerrado entre las etiquetas:

<title>texto de titulo</title>

En el cuerpo del documento va encerrado todo aquello que deseamos que aparezca en la pantalla (texto, imágenes, botones, direcciones, etc.). El cuerpo del documento estará por tanto encerrado entre los siguientes "tags":

<body>documento</body>

Por los tanto ya tenemos la plantilla básica de un documento HTML, quedando esta de la siguiente forma:

<html> Etiqueta de inicio de HTML.

<head> Etiqueta de incio de encabezamiento

<title> TITULO < /title> Etiquetas de pricipio y final de título.

</head> Etiqueta de final de encabezamiento.

<body> Etiqueta de comienzo del cuerpo.

...

... Etiquetas que conforman la pagina.

...

</body> Etiqueta de final del cuerpo.

</html> Etiqueta de final del documento HTML.

La identación no es necesaria, es mas, se podría haber escrito todas las etiquetas en una misma línea, unicamente se ha empleado aquí por claridad y así lo haremos a lo largo de este libro.

4 Etiquetas básicas:

A continuación damos una lista de las etiquetas (tags) básicas, sin los atributos que pueden incluirse en ellas y que se describirán cuando se haga la definición de la siguiente etiqueta.

• Encabezados

 <hn>texto</hn>

n equivale a un numero entero comprendido entre 1 y 6 siendo 1 el de mayor tamaño, es decir, el cuerpo de letra es el mas grande y, si se utiliza 6 es muy pequeña.

• Párrafos y bloques de texto

 <P>texto</P>

Inicio y final de párrafo.

 <PRE>texto</PRE>

Respeta el bloque de texto, tal y como se ha escrito con espacios y tabuladores.

 <BLOCKQUOTE>texto</BLOCKQUOTE>

Esta etiqueta incluye citas en un bloque separado de la pantalla.

• Centrado de texto

 <CENTER>texto</CENTER>

Centra todo lo que esté dentro de ella, independientemente que sea texto ó imágenes. Hay que advertir aquí que no la soportan todos los navegadores, aunque si los mas conocidos.

• Aspecto de los caracteres

 <B>texto</B>

El texto entre estas dos etiquetas aparecerá en negrita.

 <I>texto</I>

El resultado de esta etiqueta produce un texto en itálica.

 <U>texto</U>

Se subraya el texto entre las dos tags. No lo reconocen todos los "browsers".

 <TT>texto</TT>

Esta etiqueta hace que el texto se vea en formato teletipo.

 <BLINK>texto</BLINK>

El texto se ve parpadeante.

• Líneas y saltos de línea

 <HR>

Con esta etiqueta se consigue una línea horizontal, que se extiende a todo lo ancho de la pantalla. Esta etiqueta no necesita marca de cierre.

 <BR>texto</BR>

El resultado es un salto forzado a la línea siguiente.

Con estas etiquetas ya estamos en disposicion de hacer una pagina Web, como veremos en el siguiente capitulo.

...