HTML (Hyper Text Markup Language) es una serie de marcas que indican a un visualizador qué y cómo presentar el contenido de un archivo de texto.
Por ejemplo, en el siguiente fragmento la marca <b> indica que la palabra "navidad" debe aparecer en negrilla
... feliz <b>navidad</b> para ...
La marca </b> indica que en ese punto termina la negrilla, lo cual nos lleva a una característica importante: las marcas van en pares, una para empezar y otra para terminar.
Para empezar rápidamente conozcamos algunas marcas:
<html> Toda página HTML debe empezar con la marca <html> y terminar con </html>.
<head> Marca el inicio de la cabezera que es una sección que contiene información acerca de la página pero que no será presentada cuando el visualizador la muestre. Por supuesto, la marca que indica el fin de esta sección es </head>
<title> Quiere decir "título" y precisamente marca el inicio del título que se presentará en la barra superior del visualizador (conocida como "barra de título"). Termina con </title>
<body> Significa "cuerpo". Señala el inicio del cuerpo de la página. Todo lo que se presente en la página web está contenido entre esta marca y </body> que indica el final del cuerpo de la página.
Con estes conocimientos ya podemos crear nuestra primera página web.
<html>
<head>
<title>Mi primera página</title>
</head>
<body>
<h1>Ven a la diversión!</h1>
</body>
</html>
Este código HTML producirá una página similar a la siguiente:
Notemos que la frase "Mi primera página" se ha presentado en la barra de título de la ventana del visualizador.
El espacio entre la marca </head> y <body> no es necesario, pero hace más fácil la lectura del código.
Además se ha introducido la marca <h1> que proviene de "heading 1" o "cabezera 1" que es la forma como podemos colocar títulos dentro de la misma página (diferentes a los que colocamos con <title>).
Ahora continuemos con otras marcas, incluyendo la ya comentada <h1>.
<h1> Proviene de "heading 1" que significa "cabezera 1" y nos servirá para colocar grandes o medianos títulos a nuestra página. Como ya sabemos, termina con </h1>. También existen los códigos <h2>, <h3>, <h4>, <h5>, <h6> que escribirán en letra más pequeña cada vez.
Por ejemplo,
<h1>Tamaño 1</h1>
<h2>Tamaño 2</h2>
<h3>Tamaño 3</h3>
<h4>Tamaño 4</h4>
producirá
<p> "paragraph". Párrafo. Señala el inicio de un párrafo. Inserta una línea en blanco antes del texto, de modo que existe una separación entre cada párrafo si tenemos varios.
Veamos el efecto que producirá el siguiente texto:
<p>Compre linda casa
en plena esquina, sobre 1000m2
a una cuadra de la Plaza Colón. Además con un
departamento amoblado y listo
para habilitarlo.
Llamar al 04-244357
<p>Venta de linda casa soleada, 5
dormitorios, 5 baños, 600m2. US$ 235.000.-
Ref.fono:01732428
Compre linda casa en plena esquina, sobre 1000m2 a una cuadra de la Plaza Colón. Además
con
un departamento amoblado y listo para habilitarlo. Llamar al 04-244357
Venta de linda casa soleada, 5 dormitorios, 5 baños, 600m2. US$ 235.000.-
Ref.fono:01732428
<b> "Bold". Negrilla. Termina con </b>
<i> "Italic". Itálica o cursiva. Termina con </i>
<br> "break". Corte de línea. Inserta un corte de línea, es decir, el efecto de un ENTER al escribir en un procesador de textos.
Utilicemos lo aprendido hasta ahora:
<html>
<head>
<title>La Casa Lógica</title>
</head>
<body>
<center>
<h1>La casa lógica</h1>
<h3>Su tienda amiga de software</h3>
</center>
<br><br>
<p>
Esta temporada tenemos una selección exclusiva de
programas para contabilidad y control de
inventarios.<br>
Por ejemplo, tenemos el programa <b>"INVENTANDO"</b> que
incorpora una cantidad impresionante de reportes de
productos y servicios en una agradable interfaz.<br>
También está el sistema contable <b>"MENTE CONTABLE"</b>
que resuelve todos sus problemas de negocios.
</p>
</body>
</html>
El resultado del código anterior será algo como esto:
Esta temporada tenemos una selección exclusiva de programas para contabilidad y control
de inventarios.
Por ejemplo, tenemos el programa "INVENTANDO" que incorpora una cantidad impresionante de reportes de productos y servicios en una agradable interfaz.
También está el sistema contable "MENTE CONTABLE" que resuelve todos sus problemas de negocios.
Practique un poco insertando códigos como <i>, <strong> que resalta con negrilla o itálica
o <em> que enfatiza con itálica o negrilla.
COLORES
Trabajar con colores es igual de sencillo que todo lo anterior.
<body bgcolor=?> bg proviene de background y esta etiqueta sirve, por tanto, para colocar el color del fondo. Puede especificar el color a través de un nombre o un valor hexadecimal. Por ejemplo la etiqueta <body bgcolor=red> hará que el color del fondo cambie a rojo. También podría escribir <body bgcolor="#FF0000"> y el fondo se establecerá en rojo (La siguiente lección explica la forma de cambiar el valor utilizando esta última forma).
Los colores aceptados por el Internet Explorer son:
black - negro
silver - plateado
gray - gris
white - blanco
maroon - marrón
red - rojo
purple - púrpura
fuchsia - fucsia
green - verde
lime - verde lima
yellow - amarillo
blue - azul
aqua - agua
<body text=?> Con esta etiqueta indicamos el color en que debe ser visualizado el texto. Puede especificar el color a través de un nombre o un valor hexadecimal. Por ejemplo la etiqueta <body text=blue> hará que el color del texto sea azul.
Veamos un ejemplo que reuna lo anterior:
<html>
<head>
<title>Mi página personal</title>
</head>
<body bgcolor=yellow text=red>
<h1>La página de Juancito</h1>
<p><br>
<b><i>¿Quién soy?</b></i>
<br>
<p> ...
</body>
</html>
El código anterior presentará una página de fondo amarillo y dos líneas de texto rojo.
Más adelante hablaremos más acerca de los colores.
GRAFICOS
Podemos incluir en nuestra página imágenes en formato "GIF" o "JPEG".
Es poco recomendable la inclusión de imagenes grandes que harán muy lenta la carga de la página. Además debemos tomar en cuenta que algunos usuarios pueden tener desactivada la presentación de imágenes, por lo que debemos tratar siempre de colocar un texto descriptivo adicional según veremos ahora.
<img src=?> img src proviene de image source y significa "origen de la imagen". Un ejemplo de uso de esta etiqueta podría ser: <img src="luna.gif"> que cargará la imagen "luna.gif" que se debe encontrar en el mismo directorio del archivo HTML, aunque podría estar en otro lugar del que deberemos indicar la ruta.
<img src=? alt=?> ALT es un comando muy útil para proporcionar una descripción breve de la imagen. Al incluir esta descripción solucionamos el problema de navegadores que no presenten imágenes. Por ejemplo podemos escribir <img src="luna.gif" alt="Luna en 4o. menguante">.
Como último ejemplo de esta sección veamos lo que produciría un código como el siguiente:
<html>
<head>
<title>Luna lunera</title>
</head>
<body>
<h1>Luna lunera</h1>
<p><br>
<img src="luna.gif" alt="luna">
<p><br>
<p align=left>
Luna lunera, cascabelera<br>
...
</p>
</body>
</html>
ENLACES
Una vez que aprendimos la forma de dar formato a nuestro texto y cómo incorporar imágenes en nuestras páginas, ya no se puede postergar la presentación del verdadero fundamento de las páginas web: los hiperenlaces.
También conocidos como enlaces hipertexto o simplemente enlaces, los hiperenlaces permiten "saltar" a la dirección indicada, que puede estar en la misma página, el otra página del mismo sitio o en otro sitio del mundo. También existen enlaces a direcciones de correo.
Ejemplo de enlace a otra página:
<A HREF="otrapagina.html"> Este es un ejemplo </A>
Otro ejemplo de enlace a otra página:
<A HREF="http://www.google.com/"> Buscar con Google </A>
Ejemplo de enlace a una dirección de correo:
<A HREF="mailto:juan@hotmail.com"> Escribe a Juan </A>
Ejemplo de enlace dentro de la misma página:
<A HREF="#marca"> Sección 2 </A>
en este caso, también debemos colocar en el sitio a donde queremos saltar
la siguiente etiqueta:
<A NAME="marca"> </A>
Ejemplo de enlace a una posición específica dentro de otra página
<A HREF="otrapagina.html#marca"> cualquier texto </A>
y en la otra página debe existir una marca como la siguiente:
<A NAME="marca"></A>
