Por medio del lenguaje HTML (HyperText Markup Languaje), podemos navegar por miles y miles de páginas a través de la WWW. Es un lenguaje que sirve para escribir hipertexto, es decir, documentos de texto presentado de forma estructurada, con enlaces (links) que conducen a otros documentos o a otras fuentes de información (por ejemplo bases de datos) que pueden estar en la propia máquina o en máquinas remotas de la red. Todo ello se puede presentar acompañado de cuantos gráficos estáticos o animados y sonidos seamos capaces de imaginar.
HTML es el lenguaje con el que se construyen las páginas Web. La idea inicial de HTML era describir la estructura y el contenido de un documento, sin embargo la tendencia actual es utilizarlo también como un lenguaje de descripción, controlando el aspecto de documento (tipografía, posicionado, etc.).
Por supuesto, la estética de los documentos escritos en HTML no se limita a texto digamos normal; consigue todos los efectos que habitualmente se pueden producir con un moderno procesador de textos: negrita, cursiva, distintos tamaños y fuentes, tablas, párrafos tabulados, sangrías, incluso texto y fondo de página de colores, y muchos más.
El programa encargado de interpretar el texto HTML es el navegador o browser. El navegador puede recibir el código HTML junto con los elementos integrados en la página (imágenes, sonidos, vídeo, etc.) desde un servidor remoto o de un servidor de red (utilizando el protocolo de transferencia de hypertexto y HTTP) o leer las páginas directamente de nuestro disco duro(sin un protocolo de transmisión tipo HTTP, sino el equivalente a abrir un documento con un procesador de textos).
En HTML todas las codificaciones de efectos en el texto que lo forman no son más que instrucciones para el visualizador. Partiendo de esto, se entiende el porqué no se ve lo mismo con
todos los visualizadores. Depende de cómo estén diseñados y para qué versión de lenguaje estén diseñados.
Hasta no hace mucho los programadores de HTML cobraban una barbaridad por crear una página Web. Eran los inicios del boom WWW.
HTML no es un lenguaje de programación como puede serlo C, Pascal o Java; HTML tan sólo es un lenguaje para crear documentos en formato electrónico, una forma de definir efectos en el texto de manera similar a como se hacía en los antiguos procesadores de texto pero con complicados y poderosos servidores de información.
En la actualidad cualquiera puede crear sus páginas Web; puede escribir el código HTML directamente o utilizar alguno de los excelentes editores. Muchos usuarios de la Red tienen ya sus páginas Web publicadas, gracias al espacio que les brindan la mayoría de los proveedores de acceso. No es necesario que la pagina Web este publicada en Internet; podemos utilizarla tan solo para consultas en la red de área local para realizar consultas internas de la empresa u organización(Intranet).
La unidad fundamental en lenguaje HTML es el "
tag " o la marca. Cada estructura de texto se encerrará entre una marca de inicio y otra de fin.
En HTML las marcas vienen delimitadas con los signos <(inferior) y >(superior). De este modo el navegador sabe que debe interpretar código comprendido entre estos símbolos.
Esqueleto Básico de un documento HTML
<HTML> <HEAD > <TITLE >Título del documento < /TITLE > < / HEAD > BODY Cuerpo del documento </BODY > < / HTML >
ESQUELETO BÁSICO DE LA ESTRUCTURA HTML
Entre <html> y </html> encontraremos la definición de la página propiamente dicha. En el bloque delimitado por <head> y </head> se establecen ciertas características de la página, tales como el título, quien las construyó, etc. De estas características de la página, la única que es obligatoria declarar es el título. Esto se hace mediante el par de tags <title> y </title>. Por último está <body> y </body>, entre los cuales se encierra toda la información que el navegador debe mostrar.
No todos los tags son iguales; hay alguno cuyas acciones están acotadas por las funciones que cumplen, por lo que no es necesario incluir otro tag para finalizar su acción. Algunos de ellos son:
<br> Genera un retorno de carro
<p> Equivale a un retorno de carro + un avance de línea <hr> Crea una línea divisoria horizontal.
Existen tags que llevan parámetros asociados cómo:
<img src="/cm/marzo.gif" width=104 height=97>
Este tag <img> permite incluir imágenes dentro de una página. El parámetro src indica la ruta de acceso al archivo donde está la imagen, mientras que width y height detallan su ancho y alto en pixeles.
FORMATEAR TEXTO
Hay códigos qué afectan a la distribución y aspecto del texto. Los más importantes agrupados en las categorías Tamaño, Tipo de letra y posición.
Tamaño
Lo más destacable aquí son los seis niveles de cabeceras. Por ejemplo: <H1> Guía de Redacción HTML</H1> <H2> Notas sobre esta Guía</H2> <H3> Un Poco de Historia</H3> Esta guía fue elaborada...
Se puede cambiar el tamaño de las palabras utilizando los códigos:
<FONT SIZE= +2> estas palabras </FONT>
Tipo de letra
La siguiente tabla muestra los principales códigos que afecta al aspecto del texto.
Posición
Los códigos principales son los que provocan salto de línea y el que se centra.
El código <P> señala el inicio de un párrafo y provoca un salto de línea precedido por un renglón en blanco. El código <BR> hace lo mismo pero sin renglón en blanco. Los códigos <center> y </center> centran el texto entre los márgenes.
ELEMENTOS TEXTUALES Caracteres y símbolos
Muchos de los caracteres que necesitamos representar, letras acentuadas, requieren un trato especial en HTML. Un buen editor nos irá haciendo la conversión automáticamente, pero a veces resulta necesario recurrir a los códigos. Aca se ve una tabla de los principales:
|| á ñ ¿ || á & ntilde ¿ || Á Ñ ¡ || Á Ñ ç ¡ || é è ç © &coª ª || py || ü º || ü º ||
Caracteres especiales
Listas
Hay varias maneras de tratar listas. Las principales son la lista numerada(OL) y de los puntos conductores(UL) que tiene un par de variantes. También hay una lista pensada para glosarios de términos (DL).
Una Lista Numerada (Ordered List)
<OL> <LI>Animales <LI>Plantas </OL>
Se ve así:
- 1. 1. Animales
- 2. 2. Plantas
Una lista No Numerada (Unordered List)
<UL> <LI>Animales <LI>Plantas </UL> Se ve así:
. Animales
. Plantas
Un Lista de Definiciones (Definition List)
<DL> <DT> Animales <DD> Son unos bichitos que algunos tienen espinazo y otros no. <DT> Plantas <DD> Están vivas pero no les puedes llamar bichos. No sería correcto. </DL>
Se ve así:
Animales Son unos bichitos que tienen espinazo y otros no. Plantas Están vivas pero no se les puede llamar bichos. No sería correcto.
A veces resulta útil anidar las listas para representar un esquema jerárquico. Un ejemplo:
<UL> <LI>Animales <UL> <LI>Vertebrados <LI>Invertebrados </UL> <LI>Plantas <UL> <LI>Verdes <LI>Nucleares </UL> </UL>
Se ve así:
.
Animales
. Vertebrados
. Invertebrados
.
Plantas
. Verdes
. Nucleares
Tablas
Las tablas nos permiten distribuir las cosas en columnas y en filas, aprovechando mejor el ancho de página. Se puede especificar un montón de parámetros de formato tanto de tabla (TABLE) como de filas (TR) y las celdas (TD) individuales. Los principales son:
<TABLE> <TR><TD></TD>Mallorca</TD></TD>Menorca</TD><TD>Ibiza</TD></TR> <TR><TD>Extensión</TD><TD>Grandecito</TD><TD>Mediano</TD><TD>Chiquitín</TD></TR> <TR><TD>Población/TD><TD>Mallorquines</TD><TD>Menorquines</TD><TD>Ibicencos</TD></TR> <TABLE>
Se ve así
Mallorca Menorca Ibiza Extensión Grandecito Mediano Chiquitín Población Mallorquines Menorquines Ibicencos
Podemos mejorar el aspecto de la tabla insertando atributos dentro de los códigos de TABLE, TR, y TD. Como el ancho de la tabla (WIDTH) y del reborde (BORDER),añadiendo un título(CAPION) debajo (ALIGN=BOTTOM) y formateamos las celdas de la primera fila y columna como cabeceras (TH) que salen en negrilla y centradas.
<TABLE BORDER=2 WIDTH=75%> <CAPTION ALIGN=bottom>Datos de Baleare.</CAPTION. <TR><TD></TD>Mallorca</TD></TD>Menorca</TD><TD>Ibiza</TD></TR> <TR><TD>Extensión</TD><TD>Grandecito</TD><TD>Mediano</TD><TD>Chiquitín</TD></TR> <TR><TD>Población/TD><TD>Mallorquines</TD><TD>Menorquines</TD><TD>Ibicencos</TD></TR> <TABLE>
