Documentos de Académico
Documentos de Profesional
Documentos de Cultura
HTML 4 PDF
HTML 4 PDF
0
1. Introduccin al curso
Este curso ha nacido con la intencin de complementar a aquellos interesados
en crear y disear pginas en Internet. As podrs comprender mejor de donde
surge una pgina de internet comenzando desde cero.
Lo primero que hay que decir es que este curso no explica ningn estndar
especfico, ni examina exhaustivamente todos los parmetros de las etiquetas
HTML. Intenta ser una gua prctica, de modo que incluir todas las cosas que
yo crea importantes y que me han provocado algn dolor de cabeza mientras
realiz pginas de internet. El curso y sus ejemplos los he probado con Explorer
4-6 y Firefox. Hay que entender que cada navegador interpreta el cdigo HTML
diferente y puede que el resultado visual sea diferente en cada uno.
Requisitos
Puedes hacer pginas con algn editor especfico de pginas web, pero no es
necesario. Es ms, algunos de esos editores esconden las etiquetas HTML al
usuario, de modo que posiblemente lo que aprendas aqu te sera de poca
utilidad.
Agradecimientos
Aparte de dar las gracias a todos aquellos que visitan la web y en especial a los
que se toman la molestia de trabajar conmigo, quiero agradecer especialmente a
todos ustedes que han colaborado en participar de este curso. Si ustedes el
curso no se hubiese podido realizar, aprendo cada vez que llega un da de clase
y trato de mejorar mi prcticas de enseanza para poder llgar a ti.
HTML 2.0
Aunque la versin 2.0 cumpla bien el objetivo para el que se cre, careca de
herramientas para tener un control en las pginas. No se consider necesario
que lo tuviera, ya que por aquel entonces Internet era un fenmeno ms bien a
la actividad acadmica y el contenido se basaba sobre el diseo. Debido a ello,
Netscape (lder del mercado de navegadores por aquel entonces) empez a
incluir etiquetas nuevas no incluidas en ningn estndar.
Por estos problemas, el IETF, (el comit que suele decidir todos los estndares
dentro de Internet) comenz a elaborar el borrador del HTML 3.0, que result ser
demasiado grande para la poca, lo que atras su aceptacin en el mercado.
Esto llev a una serie de compaas (entre ellas Netscape, Microsoft, IBM, Sun,
etc.) a crear un nuevo comit llamado W3C y 508, que es el que actualmente
elabora las nuevas versiones del HTML. Su primer trabajo consisti en crear el
borrador del HTML 3.2, que inclua muchas de las mejoras que los principales
navegadores (Netscape y Explorer) haban introducido en Internet, como son las
tablas, los applets, etc.
HTML 4.0
3. Mi primera pgina
El cdigo
Nuestra primera pgina se guardar con el nombre index.html
<HTML>
<HEAD>
<TITLE>Mi primera pagina</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
La explicacin
Un documento HTML tiene una estructura que lo separa en dos partes: cuerpo y
encabezados. En la primera estar la pgina en s, mientras que en la segunda
incluiremos algunas cosas que no se ven al principio pero que pueden llegar a
ser muy importantes. Lo primero que hay que incluir en el cdigo son los
encabezados. Lo escribimos de esta manera:
<HEAD>
</HEAD>
<HR>
4. Formato bsico
Se pueden establecer varias categoras dentro de las etiquetas usadas para
formatear el texto. Nosotros las dividiremos entre aquellas que sirven para
cambiar prrafos enteros y las que son capaces de formatear ciertos caracteres
dentro del prrafo.
Ejemplo de justificaciones:
<HTML>
<HEAD>
<TITLE>Mi primera pagina</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
El HTML nos ofrece seis etiquetas distintas para mostrar tamaos. Son stas:
Etiqueta Resultado
<H1> ... </H1>
Letra de nivel 1
<H2> ... </H2> Letra de nivel 2
<H3> ... </H3> Letra de nivel 3
<H4> ... </H4> Letra de nivel 4
<H5> ... </H5> Letra de nivel 5
<H6> ... </H6> Letra de nivel 6
Todas estas etiquetas nos permiten cambiar de una manera u otra el aspecto del
tipo de letra que estemos utilizando y se pueden utilizar con tiras de caracteres
dentro de un prrafo.
Formato de frase
Por ltimo, debemos estudiar algunas cosas que no son texto y que podemos
incorporar a nuestra pgina.
5. Caracteres especiales
En los ejemplos anteriores los textos de los mismos no hay acentos, ni ees, ni
smbolos de abrir como interrogacin o exclamacin. Esto es debido a los
distintos caracteres que manejan las computadoras.
La manera de incluir los caracteres extendidos (cuyo nmero est ms all del
127) consiste en encerrar el cdigo entre los caracteres &# y ;. As pues, lo
siguiente:
½
nos debera dar un medio (). Tambin existe una serie de sinnimos para
poder recordar con ms facilidad estos caracteres. As, por ejemplo, ½
tambin se puede escribir como ½. Vamos a ver algunos de estos
cdigos, los ms tiles a la hora de escribir en espaol:
Cdigo Resultado
á, Á, é, , , , , , , , , y
É,...
ñ y
¿
¡ !
º
ª
o
™ o ™
©
®
(espacio en blanco que no puede ser usado
para saltar de lnea)
Caracteres de control
6. Enlaces
Un enlace es una zona de texto o grficos que si son seleccionados nos
trasladan a otra pgina o a otra posicin dentro del documento actual. Son los
enlaces lo que hacen de la telaraa del internet o mejor conocida como World
Wide Web.
Para incorporar un enlace hay que utilizar esta etiqueta. Todo lo que encerremos
entre <A> y </A>, ya sea texto o imgenes, ser considerado como enlace y
sufrir dos modificaciones:
Para que el enlace sirva para algo debemos especificarle una direccin o
referencia. Lo haremos de la siguiente manera:
<A HREF="direccion">Pulsame</A>
Una URL nos indica tanto una direccin de Internet como el servicio que
esperamos nos ofrezca el servidor al que corresponde la direccin. Tiene el
siguiente formato:
servicio://servidor:puerto/ruta/pagina.html
http
Es el servicio para transmitir pginas web y el que usaremos
normalmente en los enlaces.
https
Es una innovacin sobre el anterior, que nos permite acceder a servidores
(generalmente comerciales) que nos ofrecen el uso de tcnicas de
encriptacin para proteger los datos que intercambiemos con terceras
personas.
ftp
Permite trasmitir files desde una computadora a otra. En general el
navegador se encargar de mostrarnos el contenido del mismo para que
podamos transferir las pginas en internet cmodamente.
mailto
Para poder mandar un mensaje. Por ejemplo, la URL
mailto:efrain@uprm.edu me mandaras un mensaje a m.
news
Para poder acceder a foros de noticias.
SSH
Nos permite conectarnos con otras computadoras y entrar en ellas como
si fuese la nuestra. Permite modificar privilegios y accesos a nuestras
pginas.
C:\My Documents\html\index.html
Anclas
Como dijimos, es posible acceder a una posicin en la misma pgina dentro del
mismo documento HTML. Para hacerlo, primero debemos especificar el lugar del
documento al que queremos acceder:
<A NAME="ancla">
7. Listas
Existen varios tipos de listas en HTML. Todas ellas se pueden mezclar unas
dentro de. Todos los tipos siguen el siguiente formato:
<ul>
<LI>Primer elemento
<LI>Segundo elemento
</ul>
Listas desordenadas
<UL>
<LI>Primer elemento
<LI>Segundo elemento
</UL>
se ver como
Primer elemento
Segundo elemento
<OL>
<LI>Primer elemento
<LI>Segundo elemento
se ver como
1. Primer elemento
2. Segundo elemento
Listas de definiciones
Este es el nico tipo de lista que no utiliza la etiqueta <LI>. Al tener como
objetivo presentar una lista de definiciones, de modo que tiene que representar
de manera distinta el objeto definido y la definicin. Esto se hace por medio de
las etiquetas <DT> y <DD>:
se ver como
Primer elemento
Lista #1.
Segundo elemento
Lista # 2.
8. Imgenes
Para incluir grficos e imgenes en nuestras pginas utilizaremos la etiqueta
<IMG>
de esta manera:
Existen dos atributos que, aunque opcionales, conviene indicar siempre: la altura
y la anchura del grfico en pxeles. De este modo, el navegador puede mostrar
dibujar el la imagen correctamente mientras la va leyendo de la red y as poder
mostrar el resto de la pgina.
Se ve as:
Imgenes y enlaces
Suele ser comn incluir enlaces dentro de un grfico. En ese caso, los
navegadores le pondrn un borde al grfico para indicar que efectivamente es
un enlace. Prctico, pero la mayora de las veces bastante poco esttico. Por
medio del parmetro BORDER podremos alterar el borde o incluso esconderlo.
<A HREF="http://www.uprm.edu">
<IMG SRC=" http://www.uprm.edu/media/homebdg1.gif "
ALT="RUM" WIDTH=73 HEIGHT=36>
</A>
Sin embargo,
Se ve as:
9. Imgenes
Para incluir grficos e imgenes en nuestras pginas utilizaremos la etiqueta
<IMG>
de esta manera:
<IMG SRC=" http://www.uprm.edu/media/homebdg1.gif "
ALT="descripcion">
Existen dos atributos que, aunque opcionales, conviene indicar siempre: la altura
y la anchura del grfico en pxeles. De este modo, el navegador puede mostrar
un recuadro del tamao de la imagen mientras la va leyendo y as poder mostrar
el resto de la pgina correctamente mientras carga las imgenes.
Se ve as:
Se ve as:
Sin embargo,
Se ve as:
Hay que aclarar que la base del texto es la lnea donde descansan casi todas las
letras del alfabeto excepto algunas como la p, la g o la j.
Cambio de color
<FONT COLOR="#FF0000">D</FONT>
SIZE=1 SIZE=2
SIZE=3 SIZE=4 SIZE=5
SIZE=6 SIZE=7
El tamao normal es 3. Tambin se puede utilizar los modificadores + y - para
indicar un incremento (o decremento) relativo del tamao del tipo de letra. As,
por ejemplo, si indicamos que queremos un tamao de -2 estaremos pidiendo al
navegador que nos muestre el tipo de letra dos veces ms pequeo.
Tipo de letra
tipo de documento
<HTML>
<HEAD>
<TITLE>titulo de la pgina</TITLE>
cosas que afectan a la pgina pero no a su contenido
</HEAD>
<BODY parmetros>
contenido de la pgina
</BODY>
</HTML>
Encabezados
Adems del ttulo de la pgina, uno de los elementos que se pueden incluir aqu
son los META. Entre otras cosas, sirven para indicar propiedades de la pgina
como pueda ser el nombre de su autor.
Por ejemplo, nos indicara la herramienta con que hemos creado la pgina (en
este caso la versin 4.03 en espaol para Windows XP y el autor. Estas son las
propiedades ms comunes:
Propiedad Utilidad
AUTHOR Autor de la pgina.
GENERATOR Herramienta utilizada para hacer la pgina.
CLASSIFICATION Palabras que permite clasificar la pgina dentro de un
<BASE HREF="http://www.uprm.edu/news">
Ahora todas nuestras URLs relativas se referirn al directorio /news dentro del
servidor http://www.uprm.edu
El cuerpo <BODY>
Obviamente no voy a explicar lo que entra dentro del cuerpo
(prcticamente todos los captulos del curso intentan
hacerlo), sino los parmetros que admite la etiqueta
<BODY>:
12. Tablas
Las tablas son posiblemente la manera ms clara de organizar la informacin.
Tambin es el modo ms adecuado de organizar texto y grficos de una manera
algo ms controlada que con los parmetros ALIGN.
<TABLE>
<TR> 1,1 1,2 1,3
<TD>1,1</TD>
<TD>1,2</TD>
2,1 2,2 2,3
<TD>1,3</TD>
</TR>
<TR>
<TD>2,1</TD>
<TD>2,2</TD>
<TD>2,3</TD>
</TR>
</TABLE>
Como puedes ver (o mejor no ver) la tabla no tiene mucho aspecto de tabla.
Quedara mejor con unos bordes, no? Puede que tampoco le viniese mal un
Ahora si, por ejemplo definimos la tabla anterior como <TABLE BORDER=1
WIDTH="50%" ALIGN=CENTER> veremos lo siguiente:
Por ltimo, nos queda definir cada celda gracias a la etiquetas TD y TH. Estas
etiquetas son equivalentes, pero la ltima se utiliza para encabezados, de modo
Como podemos ver, cuando declaramos una celda con ROWSPAN o COLSPAN, no
debemos declarar las celdas "absorbidas" o la creacin de la tabla se nos
complicar de horrible manera.
Ttulo de la tabla
Por ltimo, vamos a ver como definir un ttulo a la tabla. Esto se hace por medio
de la etiqueta CAPTION. Para ver cmo funciona, vamos a incluirlo en la
declaracin de la tabla anterior:
<TABLE BORDER=1>
<CAPTION> Ejemplo de tablas
Ejemplo de tablas 1,1 y 1,2 1,3
</CAPTION>
... 2,1 y 3,1 2,2 2,3
</TABLE> 3,2 3,3