Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Para construir una pgina con el fin de publicarla en Internet, debemos aprender
el lenguaje HTML (HyperText Markup Language). Se dir que es muy fcil construir
pginas WEB hoy en da con los programas que se encuentran a disposicin de todos.
Pero si bien esto es cierto, es necesario conocer lo mnimo del HTML porque siempre
se nos presenta la situacin de que el resultado final, logrado con programas que
generan el cdigo automticamente, no es el esperado. En tal situacin se hace
necesario retocar el cdigo manualmente con un procesador de texto puro como el
Block de Notas que viene con Windows. Para poder hacerlo no hay otra salida que
conocerlo.
El HTML se basa en etiquetar lo que se quiere mostrar en la pgina; estas
etiquetas le dicen al programa navegador de Internet cmo debe mostrar en pantalla la
informacin que contiene. A raz de su forma de funcionamiento, podemos decir que
trabajar en HTML no significa programar ya que el resultado no se compila ni se
ejecuta independientemente.
Para trabajar con HTML se necesitan programas. Estos pueden ser simples o
ms complejos y depende de lo que se quiera lograr.
Lo bsico que se necesita para la realizacin de una pgina Web es:
Necesitamos...
Un editor de textos.
Un editor de imgenes... Paint Shop Pro.
Un editor de imgenes en movimiento... Gif Animator.
Un editor de applets de Java para botones... 1 Cool Button Tool o el Ulead Button.Applet.
Un editor de applets de Java para carteles... Applet Marquee Wizard.
Paul Delgado Soto
Todo documento para la WEB se abre y se cierra con las siguientes etiquetas...
<HTML>
(Aqu va todo el documento)
</HTML>
Todo documento HTML necesita un par de etiquetas HEAD o encabezado que
ser la informacin de la pgina que no se ver directamente en el navegador...
<HTML>
<HEAD>
</HEAD>
</HTML>
Dentro del encabezado debemos poner las etiquetas para el ttulo de nuestra
pgina WEB. Este debe ser corto y descriptivo de nuestra pgina ya que ser lo que se
vea cuando alguien guarda su direccin como favorito...
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
</HTML>
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Dentro del cuerpo, entre las etiquetas <BODY> y </BODY>, est todo lo que
queremos que aparezca en la pantalla principal (texto, imgenes, etc.).
<HTML>
<HEAD>
<TITLE>
Mi pgina de WEB
</TITLE>
</HEAD>
<BODY>
Hola, soy yo. Estoy haciendo una pgina WEB.
<P>
El texto puede tener unas cabeceras o ttulos, comprendidos entre las etiquetas
<H1> y </H1>, <H2> y </H2>, etc. (hasta el nmero 6), siendo el nmero indicativo del
tamao. El tamao mayor es el correspondiente al nmero 1. Veremos cmo queda...
<HTML>
<HEAD>
<TITLE>
Mi pgina de WEB
</TITLE>
</HEAD>
<BODY>
<H1>Ttulo ms grande con H1</H1>
<H2>Ttulo menos grande con H2</H2>
<H3>Ttulo un poco menos grande con H3</H3>
<H4>Ttulo en letra normal con H4</H4>
<H5>Ttulo en letra chica con H5</H5>
<H6>Ttulo en letra bien chica con H6</H6>
Hola, soy yo. Estoy haciendo una pgina WEB.
<P>
Aqu paso a otro prrafo.
<BR>
Aqu bajo un rengln.
</BODY>
</HTML>
<BR>
Aqu bajo un rengln.
<P>
<CENTER>
Este texto est centrado
</CENTER>
</BODY>
</HTML>
</BODY>
</HTML>
Las listas:
Si necesitamos presentar las cosas en forma de listas podemos elegir entre tres
formas...
1. Listas desordenadas (no numeradas)
2. Listas ordenadas (numeradas)
3. Listas de definicin.
Lista desordenada:
<UL>
<LI> Monitor.
<LI> Placa de sonido.
<LI> Teclado.
</UL> <LI> Etc.
Listas de definicin:
Sirven para presentar definiciones de trminos o trabajos similares. A diferencia
de las que hemos visto, cada rengln de la lista tiene dos partes:
1. El nombre de la cosa a definir, que se consigue con la etiqueta <DT> (definition term).
2. La definicin de dicha cosa, que se consigue con la etiqueta <DD> (definition definition).
Lista de definicin:
<DL>
<DT> Monitor:
<DD> Hardware de la computadora cuya funcin es destruir ojos.
<DT> Placa de sonido:
<DD> Rompe la tranquilidad familiar.
<DT> Teclado:
<DD> Destructor de uas.
</DL>
EJERCITACIN:
En el documento creado agregar...
1. Un ttulo de tipo 2 que diga "CAPTULO 2" que est centrado.
2. Agregar a cada ejercicio realizado una lnea que lo divida del otro.
3. Un comentario a cada ejercicio que indique qu es lo que sigue en el cdigo.
NOTA:
10
Tipos de enlaces:
1.
2.
3.
4.
11
Entonces...
Para subir un directorio: "ejem/tercera.htm"
Para bajar un directorio: "../primera.htm"
IMGENES:
Aqu una observacin... Trabajaremos nicamente con imgenes de tipo .gif y
.j pg que son las ms difundidas en la WEB.
La etiqueta que nos sirve para incluir imgenes en pginas WEB es muy similar
a la de enlaces a otras pginas, que hemos visto en el captulo anterior. La diferencia
es que, en lugar de indicar al programa navegador el nombre y la localizacin de un
documento de texto HTML para que lo cargue, se le indica el nombre y la localizacin
de un fichero que contiene la imagen que queremos poner.
La etiqueta es IMG SRC (image source o fuente de la imagen). La llamada
quedar as...
<IMG SRC="imagen1.jpg">
Abrimos la pgina primera.htm e introducimos el cdigo para llamar a la imagen.
Si la imagen estuviese en otro directorio o en otro sitio, antes del nombre de la
misma se debe indicar su ubicacin.
Dentro de la etiqueta se pueden aadir otros comandos, tal como ALT (este
permite ver una descripcin de la imagen que se carga). Es til para cuando la imagen
tarda en cargarse y el visitante, al sealarla con el ratn, puede ir teniendo una idea de
su contenido.
<IMG SRC="imagen1.jpg" ALT="descripcin">
Cambiamos "descripcin" por lo que corresponda segn la imagen que tengan.
Un aspecto muy importante a tener en cuenta es el tamao de las imgenes en
bytes, porque una imagen que sea muy grande o "pesada" har el acceso a nuestra
pgina muy tedioso y puede ocasionar que el visitante desista de visitarla.
Tambin podemos hacer que la misma imagen sea utilizada como enlace hacia
otra pgina. Primeramente haremos el ejemplo con el archivo "imagen2.jpg". Ponemos
la direccin de la pgina en la llamada de enlace y, al terminar tal orden, ponemos la
imagen y luego su descripcin. Finalmente cerramos con </A>
EJERCITACIN:
1.
2.
3.
4.
CARACTERES ESPECIALES:
Existen algunas limitaciones para escribir el texto...
Las etiquetas se forman como un comando escrito entre los smbolos "<" y ">", entonces, si
se quisieran escribir estos caracteres como parte normal del texto, dara esto lugar a una
ambigedad, ya que el navegador podra interpretarlos como el comienzo o final de una
etiqueta, en vez de un carcter ms del texto.
El HTML es un lenguaje escrito en idioma ingls, y ste no tiene la letra ni los acentos a las
vocales ni apertura de interrogacin y exclamacin. En los navegadores en castellano esto
no es problema, pero tenemos que tener en cuenta que la WEB es mundial y, para que todos
puedan ver bien los textos, es conveniente reemplazar algunos caracteres por cdigos.
Para resolver estos problemas, existen cdigos para poder escribir estos
caracteres. Estos cdigos tienen un inicio y un fin. El inicio es el smbolo & y el final es
el ;
para
para
para
para
<
>
&
"
(menor que)
(mayor que)
(ampersand)
(double
quotation)
para la
para la
para la
para la
para la
para la
para la
para la
para la
para la
para la
para la
para la
para la
para
para
</BODY>
</HTML>
FORMATO DE FUENTES:
Tamao de las fuentes:
El tamao de las fuentes utilizadas puede cambiarse con el comando SIZE=X,
donde X es el nmero asignado al tamao que puede variar entre 1 y 7. Por ejemplo...
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
<FONT SIZE=1> Texto en tamao 1 </FONT> <BR>
<FONT SIZE=2> Texto en tamao 2 </FONT> <BR>
<FONT SIZE=3> Texto en tamao 3 </FONT> <BR>
<FONT SIZE=4> Texto en tamao 4 </FONT> <BR>
<FONT SIZE=5> Texto en tamao 5 </FONT> <BR>
<FONT SIZE=6> Texto en tamao 6 </FONT> <BR>
<FONT SIZE=7> Texto en tamao 7 </FONT> <BR>
</BODY>
</HTML>
Para tener una referencia vlida, el tamao normal es el 3 y de tipo Times New
Roman que se puede cambiar a gusto. Pero cuidado, podemos poner una fuente que
el visitante no tenga en su computadora y as la visualizacin de la pgina puede
cambiar en su esttica.
Para cambiar la fuente la orden es FACE=. Por ejemplo, para que el documento
se vea con la fuente ARIAL, la parte del texto afectada deber quedar de la siguiente
manera...
<FONT FACE="Arial">Este texto est configurado para ver con la fuente Arial</FONT>
FONDOS DE PGINA:
Se puede cambiar el fondo de las pginas de dos formas diferentes:
Para hacer un tono ms oscuro del color elegido hay que reducir el nmero de
su componente, dejando los otros dos invariables. As, el rojo #FF0000 se puede
hacer ms claro con #AA0000, o ms oscuro con #550000.
Para hacer que un color tenga un tono ms suave (ms pastel), se deben variar
los otros dos colores hacindolos ms claros (nmero ms alto), en una cantidad igual.
As, podemos convertir el rojo en anaranjado con #FF7050.
pueda traer problemas con el texto, tambin podemos cargar un color que s lo
permita. En tal caso, el color aparecer si la imagen no es cargada.
Si queremos poner como fondo con una imagen cuya tonalidad general es verde
y arreglamos los colores del texto para que haga un buen contraste, entonces debemos
cargar un color parecido a continuacin.
La etiqueta quedara as:
<BODY BACKGROUND="fondo5.jpg" BGCOLOR="#0000FF">
EJERCITACIN:
1. Poner un fondo a la pgina index.htm con un color alternativo.
2. Poner el mismo fondo a las pginas primera.htm, segunda.htm y tercera.htm
con un color alternativo.
3. Hacer que en la pgina tercera.htm aparezcan partes del texto en diferentes colores,
fuentes y tamaos de fuente.
SRC="imagen1.jpg"></CENTER>
20
Dimensionando la imagen:
Los navegadores cuando cargan un documento HTML y encuentran una
etiqueta de una imagen, piden al servidor que les enve nicamente este archivo.
Cuando carga la imagen, recin despus cargan los dems datos porque necesita de
la imagen para ir armando la pgina. Para que el navegador sepa qu tamao tiene la
imagen y siga cargando los otros datos de la pgina (textos), se le puede indicar qu
tamao tendr y as reservar tal lugar.
Para indicar el tamao en ancho y alto, las etiquetas son...
WIDTH (ancho)
HEIGHT (alto)
Por ejemplo, para imagen1.jpg:
<IMG SRC="imagen1.jpg" WIDTH=200 HEIGHT=100>
De tal manera, podemos decirle al navegador que muestre la imagen en otro
tamao del que realmente tiene. Podemos decirle...
21
GIFs transparentes:
Una caracterstica muy til del formato .gif es la opcin de hacer transparente un
color determinado, es decir, que en la pgina del Web ese color concreto no se vea,
siendo reemplazado por el fondo de la pgina. Esto es muy beneficioso cuando
queremos realizar ejectos atractivos con imgenes irregulares o de texto.
Se debe tener en cuenta que slo puede tener transparencia el formato .gif de
tipo 89 a, ya que tambin est el tipo 87 a con el que no nos ser posible realizarlo.
Con el programa Paint Shop Pro podemos elegir el formato final del archivo.
GIFs animados:
Este formato tiene la particularidad de que es posible superponer varias
imgenes diferentes que, al ser cargadas por el navegador, se irn reproduciendo una
a una consecutivamente dando la impresin de ver una animacin (igual que con los
dibujos animados).
Para realizar tal efecto, guardamos las imgenes que conformarn la animacin
en un directorio (pueden ser 4).
Luego las unimos con el programa Microsoft Gif Animator, guardamos el archivo
(que ser uno solo) y, al cargarlo en el navegador, se reproducirn consecutivamente.
TABLAS:
Estructura de una tabla:
1. Una tabla tiene un comienzo y un fin; adentro, todos los atributos necesarios para las filas y
columnas. Todo el cdigo debe ir entre <BODY> y </BODY>.
<TABLE>
[resto de las etiquetas]
</TABLE>
Para que los bordes puedan verse en el navegador, le agregamos la etiqueta
BORDER a <TABLE>
2. El siguiente nivel corresponde a las etiquetas para formar cada fila (row) de la tabla, que son
<TR> y </TR>. Hay que repetirlas tantas veces como filas queremos que tenga la tabla. Para
una tabla con dos filas quedara as su estructura:
<TABLE BORDER>
<TR>
[etiquetas de las distintas celdas de la primera fila]
</TR>
<TR>
[etiquetas de las distintas celdas de la segunda fila]
</TR>
</TABLE>
3. En el ltimo nivel estn las etiquetas de cada celda, que son <TD> y </TD>, que dan lugar al
contenido de cada celda concreta (texto, imgenes, etc.). Hay que repetirla tantas veces como
celdas queremos que haya en esa fila teniendo cuidado de que en cada fila tengamos el mismo
nmero de celdas para formar las columnas.
En el siguiente ejemplo tendremos 2 columnas y en cada fila 2 celdas:
<TABLE BORDER>
<TR>
</TR>
<TR>
</TR>
</TABLE>
<TD>fila1-celda1</TD>
<TD>fila1-celda2</TD>
<TD>fila2-celda1</TD>
<TD>fila2-celda2</TD>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=5>
<CAPTION>Ttulo de la tabla</CAPTION>
<TR>
<TD>fila1-celda1</TD>
<TD>fila1-celda2</TD>
<TD>fila1-celda3</TD>
</TR>
<TR>
<TD>fila2-celda1</TD>
<TD>fila2-celda2</TD>
</TR> <TD>fila2-celda3</TD>
</TABLE>
</BODY>
</HTML>
Celdas de cabecera:
Seguidamente, pondremos ttulo a cada columna. Es como poner otra fila pero
el texto aparecer en negrita y centrado. La etiqueta es <TH> y </TH> (en vez de la
normal <TD> y </TD>).
Entonces, el agregado ser...
<TR>
<TH>Columna 1</TH>
<TH>Columna 2</TH>
<TH>Columna 3</TH>
</TR>
Agregamos el texto de arriba, guardamos el archivo y lo visualizamos en el
navegador...
Como podemos ver, estira las 3 columnas en forma automtica hasta ocupar el
porcentaje indicado y cada celda ahora es ms ancha.
</TR>
2. Si queremos que una celda determinada tenga un color de fondo colocamos el atributo
dentro de la etiqueta de la celda correspondiente. Por ejemplo, vamos a hacer que slo la
celda 1 de la fila 1 tenga un color azul. Nos quedar as...
<TD
BGCOLOR="#0000FF">fila1-celda1</TD>
<CAPTION>Ttulo de la tabla</CAPTION>
<TR>
<TH>Columna 1</TH>
<TH>Columna 2</TH>
<TH>Columna 3</TH>
</TR>
<TR> <TD
BGCOLOR="#0000FF">fila1-celda1</TD>
<TD>fila1-celda2</TD>
<TD>fila1-celda3</TD>
</TR>
<TR>
<TD>fila2-celda1</TD>
<TD>fila2-celda2</TD>
<TD>fila2-celda3</TD>
</TR>
</TABLE>
</BODY>
</HTML>
EJERCITACIN:
1. Realizar una tabla con 2 filas, con una celda cada una. La primera como cabecera,
con el texto "Esto es un gran lo" y la segunda con una imagen cualquiera.
2. La tabla deber tener un ancho del 80 % y un borde de tamao 3.
3. Agregar dos filas con 3 celdas cada una.
4. Poner un color de fondo a toda la tabla.
5. A la cabecera ponerle un color diferente.
SONIDOS:
A nuestra pgina podemos agregarle msica de fondo pero slo se escuchar
si la computadora del visitante est preparada para procesarlo y un navegador que
soporte su recepcin y reproduccin.
Los formatos ms comunes son los .mid y .wav aunque actualmente hay otros
que son de mejor calidad. Pero para el ejemplo trabajaremos con los ms comunes.
Hay que tener en cuenta que no todos los navegadores soportan sonido ni las
mismas rdenes para su reproduccin.
Internet Explorer utiliza la siguiente etiqueta...
<BGSOUND SRC="fichero_de_sonido" LOOP=n>
El atributo LOOP (en ingls, lazo) sirve para especificar el nmero (n) de veces
que se debe ejecutar el fichero de sonido. Si se escoje el nmero n=-1 o se pone
LOOP=infinite, el sonido se ejecutar indefinidamente. Si se omite este atributo, y
entonces el fichero se ejecutar una sola vez.
Netscape utiliza otra etiqueta...
<EMBED SRC="fichero_de_sonido" WIDTH=xxx HEIGHT=yy>
WIDTH es la anchura y HEIGHT la altura de una consola de control que aparece
y que tiene diferentes teclas (play, stop, pausa, etc.). El valor recomendado para xxx es
de 200 y para yyy es de 60.
TEXTO EN MOVIMIENTO:
Podemos poner un texto que se desplace por la pantalla; esto recibe el nombre
de Marquesina (marquee en ingls).
La etiqueta es...
<MARQUEE> Este texto se desplaza </MARQUEE>
Si agregamos atributos, cambiaremos su aspecto...
WIDHT, HEIGHT ajustan el ancho y alto de la marquesina. Pueden ser igual a un
nmero de pixels, o a un porcentaje de la pantalla...
<MARQUEE WIDTH=70% HEIGHT=60> Esta marquesina ocupa el 70 % del ancho
de la pantalla y tiene una altura de 60 pixels </MARQUEE>
BEHAVIOR (comportamiento en ingls) definir la forma de ejectuar el
desplazamiento del texto...
BEHAVIOR=SCROLL (el texto aparecer por el lado derecho y desaparecer por el
izquierdo).
30
31
servidores, para que puedan colocar sus pginas personales, bien sea gratuitamente o
por una tarifa determinada.
Empresas comerciales que, sin ser proveedores de acceso a Internet, se dedican
a alquilar espacio para la colocacin de pginas, de carcter personal o comercial.
En este otro caso, se incluyen en el atributo CONTENT las palabras claves para
la bsqueda de nuestra pgina. Se pueden poner tantas como se crea necesario,
incluso sus plurales.