Nuestra
primera página en HTML
Introducción
Primero y
principal: Nada de editores visuales. En estos informes aprenderás puro HTML para hacer
tus páginas más fácilmente y que sean muchísimo más rápidas. Veamos las
preguntas que surgen antes de empezar con el curso.
¿Para qué
quiero un sitio en la web? cuánta gente se preguntará eso, ¿no? Hoy en día
la mayor parte de los proyectos, ya sean personales, en grupo y los
comerciales tienen un lugar en Internet.
¿Y de qué me sirve? otra pregunta frecuente. Gracias a Internet podemos
llegar a todo el mundo con sólo tener una computadora y unos programitas
instalados. No hace falta gastar tanta plata en anuncios que ronden los países
ni nada de eso.
Pero hacer un sitio web debe llevar tiempo y ¿no es difícil? Esta pregunta
es muy buena, pero a la vez puede confundir. Hacer un sitio web no es ni fácil
ni difícil, sólo debemos aprender y luego formular nuestras propias ideas al
respecto. Tenemos toda la web disponible para que nos fijemos los diseños,
busquemos información y nos queden los conceptos de ella.
Para dar
comienzo a una página debemos abrir un editor HTML que puede ser CuteHTML,
HotDog Professional, HomeSite, Adobe GoLive o cualquier otro de los tantos que existen,
como también Bloc de Notas, el cual viene con Windows. Aunque los
demás traen muchas herramientas.
En un documento en blanco escribí lo siguiente (lo cual analizaremos):
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
¿Pero qué
dice ahí? la "programación" en HTML se conforma de diferentes (y
muchas) etiquetas, también denominadas tags html.
En estas etiquetas especificaremos los contenidos del sitio web. Dentro de una
etiqueta escribiremos atributos de la página (como color de fondo o
márgenes), dentro de otras escribiremos propiedades de los textos, etc.
Digamos que el 97% de los tags (linda exactitud...) son "abiertos y
cerrados".
La sintaxis básica sería: <etiqueta>[contenidos]</etiqueta>.
También si tenemos que definir propiedades de la misma hacemos: <etiqueta
propiedad="valor"
propiedad2="valor">[contenidos]</etiqueta>.
Esto lo iremos viendo más detalladamente más adelante.
Comencemos explicando los tags que escribimos anteriormente...
<HTML></HTML>:
Esta etiqueta marca el principio (<html>) y
final (</html>) de la
"construcción" de la página web. Esta etiqueta NO tiene
propiedades.
Dentro de esa etiqueta deberemos escribir todas las demás.
<HEAD></HEAD>: Dentro de
<html></html> por supuesto. Es la cabecera de nuestra página,
donde colocaremos distintos aspectos internos de la misma. Esta etiqueta tampoco tiene
propiedades sino que dentro de HEAD deberemos especificar otros tags, de los
cuales algunos SÍ tienen sus respectivos atributos a modificar. Por ejemplo,
la etiqueta <TITLE></TITLE>. Dentro
de ella especificamos el texto que aparecerá en la página en la barra de
títulos del navegador. Es como el título oficial de toda la página.
Ej: <TITLE>Sitio web
no oficial del Fútbol Argentino</TITLE>.
Obviamente este contenido puede cambiarse tantas veces como queramos.
Dentro de HEAD también podremos establecer otro tipo de atributos en la
página, los denominados meta tags o etiquetas meta. Que veremos
en otros artículos.
Para finalizar la cabecera, colocamos </HEAD>.
<BODY></BODY>: Dentro de estas etiquetas deberemos indicar
TODOS los contenidos visuales, ya sean textos, tablas, imágenes, formularios.
En este primer caso, BODY tiene diferentes propiedades que serán aplicadas a
la página en general.
Teniendo en cuenta lo explicado anteriormente, lo damos por entendido y
pasamos a detallar las propiedades:
BGCOLOR: Especifica el color de fondo de la
página. Podremos escribir el nombre del color en inglés o indicarlo mediante
el sistema de códigos hexadecimal. Ej: <BODY
BGCOLOR="black"><!-- contenidos de la
página --></BODY>. Otro ej: <BODY
BGCOLOR="#FF0066"><!-- contenidos
--></BODY>.
En el último caso, especificamos un valor hexadecimal, donde primero
colocamos el símbolo # (numeral) y luego el código de seis
caracteres.
BACKGROUND: Esta propiedad nos deja establecer como fondo una imagen. La misma
puede ser de cualquier peso, tamaño y medidas. Se recomienda utilizar los
formatos GIF o JPEG, o GIFs transparentes. Ej:
<BODY BACKGROUND="imagen1.jpg">.
LINK / ALINK / VLINK: Podremos especificar el
color que tendrán todos los enlaces en la página antes de ser cliqueados por
primera vez, al estar haciendo clic y al haber sido ya cliqueados al menos una
vez, respectivamente.. Los mismos se podrán expresar tanto en valor
hexadecimal como el nombre del color. Ej: < ... BODY
LINK="#FFFFFF" ALINK="CC0F0F" VLINK="0000CC" ...
>. (Los ... significan que ahí puede
haber otra propiedad escrita dentro de la etiqueta).
Bueno, luego de
establecer las propiedades de BODY y de incrustar todos los elementos que
compondrán la página web, deberemos cerrar el cuerpo, con </BODY>
y la página, con </HTML>.
Con ésto habremos finalizado nuestra primer página. Un ejemplo simple:
<HTML>
<HEAD>
<TITLE>Primer página del curso HTML</TITLE>
<!-- otros tags
-->
</HEAD>
<BODY BGCOLOR="#FFFFFF" LINK="#FF0000" ALINK="#CC0F0F"
VLINK="0000CC">
<!-- toda la
parte externa de la página, es decir, los elementos que ser verán -->
</BODY>
</HTML>
Para finalizar
podemos aclarar que <!-- y -->
indican comienzo y final de un comentario (interno). El cual NO aparecerá en
la página en el navegador.
Cristian Gentiluomo
webmaster@laredarg.com
| 
