,
,EWWWWWWWWWW
EWWWWWWWWWW
EWWWWWWWWWW
1. Introducción
HTML1 es un lenguaje universal, que funciona en cualquier plataforma
(Windows, Macintosh, Unix, OS/2, etc.) y con cualquier navegador o
browser (Netscape, Internet Explorer, Mozilla Firefox, etc.). El precio que
paga por su universalidad es su poca sofisticación, puesto que no es otra
cosa que el viejo formato ASCII2 (y con 7 bits en lugar de ocho, por lo
que ni tan siquiera tiene acentos ni otros caracteres especiales).
Por tanto, para que un documento HTML sea algo más que simples
caracteres básicos, debe contener, además de dicho texto, una serie de
instrucciones para el browser que lo va a reproducir: estas intrucciones
se denominan etiquetas o tags y se distinguen del texto porque van entre
guiones (< >)3. Estas etiquetas contienen todo el resto de la información
de la página web.
Por tanto, si un documento HTML no es más que texto ASCII (parte sin
guiones y parte entre guiones: las etiquetas), cualquier documento web,
hasta el más sofisticado, puede escribirse directamente desde un
sencillo programa básico de texto, como el Cuaderno de Notas
(Notepad) de Windows, por ejemplo.
Sin embargo, escribir un documento complejo de esta manera exige un
conocimiento exhaustivo de las numerosísimas etiquetas existentes y
sus normas de utilización; para evitar esta dificultad, hay una serie de
programas denominados comúnmente editores de HTML (desde el
Composer al Dreamweaver, pasando por tantos otros), que permiten al
usuario componer una página (es decir, generar etiquetas HTML) desde
un interfaz más o menos parecido al de un procesador de textos.
A la hora de crear una página web, y aunque utilicemos un editor de
HTML, es casi imprescindible entender la disposición del etiquetado de
un documento y manejar siquiera las etiquetas más elementales. Son
varias las razones que pueden aducirse para ello:
1. Los editores de HTML no son siempre herramientas perfectas,
sobre todo cuando ha habido muchas modificaciones durante
el proceso de creación. Con bastante frecuencia se hará
necesario consultar el código completo, con las etiquetas
HTML (lo que se suele denominar código fuente o código
madre) para corregir las disfunciones.
2. Tal vez la mejor manera de aprender a diseñar páginas web es
observar las páginas de los demás, cuyos códigos fuente
están siempre disponibles para ser imitados (o incluso
copiados, técnicamente, al menos). Pero, para ello, es
necesario entenderlos.
3. Los mismos editores HTML manejan términos propios del
lenguaje HTML (heading, cellspacing, etc.), que es preciso
comprender.
4. Es necesario un buen conocimiento de HTML para insertar
otros códigos más potentes, como los de Javascript, por
ejemplo.
El objetivo de este documento es aprender a componer una sencilla
página web desde el más básico de los programas de texto disponibles
en Windows: el Cuaderno de Notas.4 De esta manera, seremos capaces
de entender y manejar los códigos fuente de las páginas más complejas.
inicio
<HTML><HEAD></HEAD><BODY></BODY></HTML>
<HTML>
<HEAD></HEAD>
<BODY></BODY>
</HTML>
Ver resultado
Esta primera página web está, lógicamente, vacía, pero es
perfectamente operativa. Para modificarla, basta con modificar sus
códigos en el editor de texto. No hace falta cerrar para ello el navegador:
una vez modificado –y salvado– el fichero, basta con utilizar el
comando Actualizar (o Refresh) para ver los cambios.
Al visualizar los resultados del Ejemplo 1, en la barra de título de la
ventana correspondiente sólo aparece el nombre del navegador (con
Netscape) o la trayectoria completa del archivo (con Explorer). Esto
sucede porque nuestro documento no posee un título propio. Para
crearlo, debemos introducir una nueva etiqueta (pareada) en la
cabecera: <TITLE>. Nuestro página web podría quedar, por tanto, así:
EJEMPLO 2
<HTML>
<HEAD>
<TITLE>Ejemplo 2</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Ver resultado
Ya sabemos crear el esqueleto de una página web. La siguiente tarea
será aprender a introducir texto (entre los tags <BODY> y </BODY>) y
controlar sus etiquetas elementales.
inicio
EJERCICIO 1
Ya es hora de practicar
con las herramientas
que hemos presentado
hasta ahora. ¿Cómo?
Es muy sencillo: ¡crea
una página web!
Si no se te ocurre
nada, te propongo que
reproduzcas esta
página. Para que no
tengas que teclearlo
todo, aquí tienes el
archivo de texto, de
modo que, si quieres,
no tienes más que
pegarlo en tu editor y
colocar las etiquetas
correspondientes en
los lugares adecuados.
(Por cierto: las fuentes
que he utilizado son
Arial y Comic Sans
MS.)
inicio
inicio
inicio
Notas
1 HTML es el acrónimo de HyperText Markup Language. Para redactar este
apartado me he valido en buena medida del trabajo de Luc Van
Lancker Aprender el lenguaje Html.
2 El código ASCII (American Standard Code for Information Interchange) es el
más extendido de los muchos sistemas de codificación informática, es decir,
maneras de representar las informaciones (letras, números, etc.) con bits (esto
es, ceros y unos).
3 Escribiremos todas las etiquetas con color, como suelen aparecer, por mera
convención visual, en los programas editores de HTML.
4 El Cuaderno de Notas de Windows, por su propia simplicidad, genera código
ASCII simple. Los procesadores de textos más potentes (Word y otros) generan
códigos propios, que entorpecen en este caso su conversión a HTML.
5 Las etiquetas no se ven afectadas por mayúsculas o minúsculas, por lo que da
8 Por supuesto, sí hay procedimientos HTML para controlar estas distancias con
Windows (y aun antes, en las últimas versiones del MS-Dos), y hoy en día es un
procedimiento habitual en un número creciente de aplicaciones.
inicio
Alexander Iribar >> Edición digital
Comentarios: alex.iribar@deusto.es
Dante dos
Nota: La página que aquí crearemos sólo será visible en nuestra computadora y si queremos
mostrarla al mundo a través de la red necesitamos de un lugar para alojarla en Internet como se
explica en la sección anterior.
Un editor de texto.
No importa cual, basta con que grabe los archivos como texto puro
o ASCII . Los usuarios de Windows pueden usar el Notepad
incluido en el sistema operativo. Si lo desea, puede usar también su
procesador de palabras favorito, pero tendrá que asegurarse de
grabar los archivos como "archivos de texto" o "archivos ASCII" ("text
files" o "ASCII files" en inglés).
Un programa navegador.
Para poder ver las páginas creadas. Basta con el mismo programa
que usamos para navegar por Internet, ya sea Netscape, Internet
Explorer o cualquier otro.
Etiquetas que
se abren y se cierran
Estructura de una
página HTML
Toda página HTML inicia con la etiqueta <html>, indicando así a los
programas navegadores que no se trata de un simple archivo texto sino
de una página web y que debe ser interpretada como tal.
Correspondientemente, la última etiqueta o código insertado en una
página web debe ser </html>.
Entre ambas etiquetas (o tags en inglés) se deben encontrar las dos áreas
principales que componen la página:
La Cabecera (head).
Demarcada por las etiquetas <head> y </head> (head significa cabeza
en inglés), contiene información sobre el título de la página, su
contenido, su autor, temas tratados, etc.
El cuerpo del documento (body).
Es aquí donde colocamos la información que será desplegada en
nuestra página web, delimitada por las
etiquetas <body> y </body> (body significa cuerpo en inglés).
Veamos entonces un ejemplo simple del texto que conforma una página
web típica:
<head>
<title>
Mi Página de
prueba
</title>
</head>
<body>
<p>
Bienvenido a
mi primera
<i>página
web</i>.
<p>
Espero se sientan a gusto y disfruten su visita.
</body>
</html>
Dentro del cuerpo (body), encontramos las etiquetas <p>, que sirven para
señalar el inicio de cada párrafo y dejar un poco de espacio vertical en su
lugar.
Escriba las líneas del ejemplo en un editor de texto y grábelas en un
archivo llamado practica.htm en formato ASCII o de texto (aunque el
archivo puede contener acentos, el nombre no debe llevarlos, así que
recuerde no acentuar la primera "a" en practica.htm). Luego vea ese
archivo en su navegador favorito escribiendo el nombre completo del
archivo y el nombre o directorio donde se encuentra en la barra de
direcciones (donde típicamente
aparece http://www.ladireccion.com/delsitio/quevisitamos.html). O si lo desea
use la opción de Abrir en el menú File y localice el archivo en su disco
duro. Al ver dicho archivo en su navegador, se le mostrará el texto de la
página, pero sin las etiquetas usadas.
Resaltando
los títulos
Además de h1 podemos usar en la misma forma h2, h3, h4, h5 y h6. Cada
una de estas opciones produce títulos de menor tamaño y jerarquía
que h1.
Líneas separadoras
Conjuntamente con los títulos, el HTML nos brinda una útil etiqueta que
nos permite separar visualmente el contenido y los elementos de nuestra
página en diferentes secciones. Usando la etiqueta <hr> introducimos una
simple línea separadora que atraviesa la pantalla horizontalmente.
Saltos de línea y
párrafos
Tamaño
del texto
La opción size= puede ser usada en combinación con la que vimos antes
de color= sin problemas y sin importar el orden en que las coloquemos.
Así da igual escribir <font color=red size=+1> que <font size=+1 color=red>.
Veamos un nuevo ejemplo ahora con las cosas que hemos aprendido.
<html>
<head>
<title>
INSTRAW en la red
</title>
</head>
<h1 align=center>
<font color=yellow> Instituto Internacional de Investigaciones y Capacitación
para la Promoción de la Mujer<br>
- INSTRAW -
</font>
</h1>
<hr>
<p align=center>
Bienvenidos a nuestras oficinas virtuales, donde esperamos brindarles un
mejor servicio y una vía directa alternativa de comunicación e información de
apoyo para la <i>potenciación de la mujer</i>.
<hr>
<h4>
Cómo contactarnos
</h4>
<p align=right>
<font color=lime size=-1>
César Nicolás Penson 102-A<br>
Santo Domingo, República Dominicana<br>
(809)685-211 - fax (809)685-2117<br>
correo-e: instraw.hq.sd@codetel.net.do
</font>
</body>
</html>
Insertar listas
en el texto
<p>
Los objetivos del INSTRAW son:
<ul>
<li>
Estimular y asistir el avance de la mujer, por medio de la investigación, la
capacitación y la recolección y diseminación de información.
<li>
Hacer más visible la contribución de la mujer al desarrollo.
<li>
Apoyar los esfuerzos de organizaciones inter-gubernamentales,
gubernamentales y no gubernamentales para estos fines.
</ul>
Insertar gráficos
en nuestras páginas
Insertar una imagen en su página web es simple una vez que la tenemos
en uno de estos formatos. Si nuestro gráfico se llama logo.gif entonces
basta con usar la etiqueta <img src=logo.gif>. Si deseamos que la imagen
aparezca a un lado de la página y el texto corra a su alrededor, entonces
haríamos <img src=logo.gif align=left> para colocarla a la izquierda o <img
src=logo.gif align=right> para colocarla a la derecha.
Introducir enlaces
con otras páginas
El texto que queda entre las etiquetas <a href=…> y </a> aparecerá
subrayado en la mayoría de los navegadores para indicar que es un
enlace de hipertexto.
<html>
<head>
<title>
Welcome to INSTRAW </title>
</head>
<body bgcolor=navy text=white link=yellow vlink=lime>
<a href=http://www.un.org/instraw>
<img src=http://www.civila.com/instraw/graficos/logos/instraw-01.gif align=left
alt="seleccione aquí para visitar la página oficial de Instraw" border=0>
</a>
<a href=http://www.un.org/spanish>
<img src=http://www.civila.com/instraw/graficos/logos/onu-01.gif align=right
alt="seleccione aquí para visitar la página oficial de las Naciones Unidas en
español" border=0>
</a>
<h2 align=center>
<font color=yellow>
Instituto Internacional de Investigaciones y Capacitación para la Promoción de
la Mujer<br>
- INSTRAW -
</font>
</h2>
<p>
Bienvenidos a nuestras oficinas virtuales, donde esperamos brindarles un
mejor servicio y una vía directa alternativa de comunicación e información de
apoyo para la <i>potenciación de la mujer</i>.
<hr>
<img src=http://www.civila.com/instraw/graficos/misc/mujeres-01.gif align=left>
<ul>
<li>
<a href=http://www.civila.com/instraw/ejemplo/que-es.html>
¿Qué es Instraw?
</a>
<li>
<a href=http://www.civila.com/instraw/ejemplo/como.html>
¿Cómo trabaja Instraw?
</a>
<li>
<a href=http://www.civila.com/instraw/ejemplo/recursos.html>
¿De dónde vienen los recursos financieros de Instraw?
</a>
<li>
<a href=http://www.civila.com/instraw/ejemplo/donde.html>
¿Dónde está Instraw?
</a>
</ul>
<hr>
<p align=right>
<a href=http://www.un.org/instraw>
<img src=http://www.civila.com/instraw/graficos/logos/instraw-02.gif align=right
alt="seleccione aquí para visitar la página oficial de Instraw" border=0>
</a>
<font color=lime size=-1>
César Nicolás Penson 102-A<br>
Santo Domingo, República Dominicana<br>
(809)685-211 - fax (809)685-2117<br>
correo-e:
<mailto:instraw.hq.sd@codetel.net.do>instraw.hq.sd@codetel.net.do</a>
</font>
</body>
</html>
Podemos usar variantes de los colores, como vino (50% rojo o #800000),
verde oscuro (50% verde o #008000), azul marino (50% azul o #000080) e
incluso hacer combinaciones de los mismos, como amarillo (100% rojo y
100% verde o #FFFF00) y morado (50% rojo y 50% azul o #800080).
<SCRIPT LANGUAGE="JavaScript">';
<!--
var BrowserName=navigator.appName
var BrowserVersion=navigator.appVersion.substring(0,1)
if (BrowserName == "Microsoft Internet Explorer" && BrowserVersion < 4)
// para versiones de IExplorer anteriores a la 4.0
document.write("<BGSOUND SRC='tuarchivo.mid'>")
else
// para Netscape e IExplorer 4.0
document.write("<EMBED SRC='tuarchivo.mid' WIDTH=145 HEIGHT=60
AUTOSTART=true></EMBED>")
// -->
</SCRIPT>
Aquí, el bgsound src= es usado cuando el visitante tiene una versión del
Internet Explorer anterior a la 4, mientras que el embed src= es usado para
el Internet Explorer 4 y todas las versiones de Netscape.
Dar a conocer
sus páginas
Atajos - Autoregístralo
http://www.xyz.com.mx/atajos/autoregistralo.html
Dejar Huella
http://web.jet.es/lp/huella/index.html
Con miles y hasta millones de páginas registradas, se hace cada vez más
difícil que cuando una persona busca información sobre un tema en una
herramienta de búsqueda o directorio, aparezca nuestra página entre las
primeras que son listadas.
<HEAD>
<TITLE>
Escribimos aquí el título de la página
</TITLE>
<META NAME=author CONTENT="Su nombre o el de su institución">
<META NAME=keywords CONTENT="Topico 1, Topico 2, Topico 3, Topico 4,
etc.">
<META NAME=description CONTENT="Breve descripción en una frase de la
pagina">
</HEAD>
Si le parece complicado escribir esos tags, puede siempre visitar la
siguiente página, responder un formulario y recibir en su correo-e los
tags preparados para incluir en su página:
Preparar huella
http://web.jet.es/lp/huella/generadormetas.html
Si está usando Microsoft Word for Windows, no use la opción Save as HTML. Grábe su
archivo en el formato "text-only".
Para una lista completa de las opciones de colores y cómo indicar nuestra propia selección
de colores libremente, refiérase a la sección correspondiente "Los números de los colores" más
adelante en "Trucos y consejos adicionales al construir su página web".
Recursos sobre la
[ Buscar ] [ Insertar ] [ Activar ] [ Borrar ]
Mujer
[ Obtener una copia de esta guía ]
Referencia: [ Preguntas y respuestas ] [ Glosario ]
[ Formulario de evaluación ]