Aprender el lenguaje Html
Estrictamente reservado a los principiantes
www.ccim.be/ccim328/htmlsp/index.htm
Preámbulo
Nuestro objetivo en la elaboración de esta formación dedicada a la creación de páginas Web y luego al
lenguaje Html ha sido la sencillez de planteamiento y el deseo de dar bases sanas para un estudio y una
utilización más adelantada.
No pretendemos ser exhaustivos ni ser "La" referencia. Sabemos perfectamente que nuestra síntesis es
muy subjetiva y que estaremos en contra de los puristas. Esperamos por lo menos hacerle comprender
y disfrutar el lenguaje Html, y darle ganas de aprender un poco más a propósito de la publicación en
Internet.
Capitulo 1 : El Web habla Html
Html es el lenguaje universal para comunicar en el Web. Su información será entonces recogida en
esta fantástica tela de redes interconectadas que es Internet, para acabar en el ordenador de su lector
gracias a un programa llamado navegador o browser.
• Entonces tiene dos interlocutores
1. el browser de su lector
2. y su mismo lector.
Este programa que se llama "browser" nos permite navegar en la Net y visualizar en su pantalla las
"páginas" que él ha localizado. Es una lastima que haya tantas marcas y tipos diferentes de
navegadores. Los hay simples, arcaicos, sofisticados... Los más conocidos son Netscape en su versión
2, 3, y 4 luego Internet Explorer 3, 4 y 5 de Microsoft pero también existen muchos otros.
• Cada browser tiene su propia manera de trabajar.
A diferencia de su tratamiento de texto preferido que restituye exactamente su documento en una hoja
de papel con su tipo de caracteres y su compáginación, no sabe nunca exactamente lo que el browser
de su lector del fin del mundo presentará en la pantalla de este último.
• En Html, nunca puede dominar totalmente su documento.
Para transitar lo más rápido posible en las líneas telefónicas hemos adoptado un formato de texto muy
compacto pero también (por consecuencia) poco sofisticado. Este es el viejo formato de texto sin
adornos del Cuarderno de notas o Notepad de Windows por ejemplo. ¡Y además este formato ASCII
fue amputado de un bit (7 bits en vez de 8)! Estará entonces privado de algunos caracteres especiales
como el é, para los cuales necesitará códigos particulares.
• Pero como recompensa suprema, Html es un lenguaje universal que se puede adaptar a cada
plataforma, ya sea Windows, Macintoch, Unix, OS/2...
Además del texto dirigido a su lector, tendrá que incluir instrucciones para el browser de este último.
Estas instrucciones serán diferenciadas de su texto por los signos < y > por ejemplo <Html>. Estas
"instrucciones" se llaman tags o etiquetas.
Cuando va a escribir las etiquetas de su página Html, no olvide :
• que una etiqueta marca una acción para el browser
• que los atributos especifican la modalidad de esta acción
(lo que tiene que hacer).
(cómo tiene que hacerlo).
1
Capitulo 2 : Los primeros instrumentos
2.1 Necesita :
• un editor de texto muy sencillo como por ejemplo el Bloque de notas o Notepad de
Windows o cualquier otro equivalente en su sistema operativo.
• un browser, sea Netscape (http://home.netscape.com) o en los CD de ciertas revistas de
informática o sea Microsoft Explorer (gratis) que se descarga igualmente
(http://www.microsoft.com) o en las revistas.
2.2 No necesita :
2.3 Consejos
• estar conectado para escribir, ver y mejorar sus páginas Html.
• tener el último editor Html, sin duda muy eficiente pero caro que podrá siempre adoptar
cuando haya usado sus pequeños dedos en sus primeras páginas. Nosotros pensamos en
Claris Home Page, Frontpage de Microsoft, Hotdog, Hotmetal, WebExpert o Netscape
Editor o Composer y también en las decenas de otros editores que podrá encontrar en el
Web.
Como el lenguaje Html es un conjunto de etiquetas y atributos, nos parece útil sino
indispensable examinarlos y sobre todo de visionarlos por lo menos una vez porque:
• si los editores Html le facilitarán grandemente el trabajo, ellos no son siempre perfectos,
sobre todo cuando hay modificaciones, anulaciones o supresiones durante el trabajo.
Necesitará entonces consultar el código madre (o fuente) para corregir las disfunciones.
• los códigos "fuente" de sus páginas preferidas están disponibles (y sin Copyright). Es
entonces posible inspirarse en ellos para utilizar el proceso sin tener que "inventar de nuevo
el mundo".
• esos mismos editores Html le propondrán términos como "Heading, Cell spacing, Numered
List..." que son propios del lenguaje Html.
• necesitará un conocimiento agudo del Html para incluir los códigos de Javascript o de
Vbscript en sus páginas.
Capitulo 3 : El documento Html mínimo
3.1 Estas son sus primeras etiquetas o tags :
<HTML>
</HTML>
<HEAD>
</HEAD>
<TITLE>
</TITLE>
<BODY>
</BODY>
Esto es el principio de un documento de tipo Html.
Esto es el final de un documento de tipo Html.
Esto es el principio de la zona cabecera.
(prólogo al documento propiamente dicho incluyendo
las informaciones destinadas al browser).
Esto es el final de la zona cabecera.
Esto es el principio del título de la página.
Esto es el final del título de la página.
Esto es el principio del documento propiamente dicho.
Esto es el final del documento propiamente dicho.
• Se habrá dado cuenta que a cada etiqueta de un principio de acción, o sea < ... > corresponde (muy
lógicamente) una etiqueta de fin de acción </ ... >.
• Notará también que las etiquetas no son "case sensitive". Es entonces equivalente escribir
<HTML>, <Html>, <html>, etc.
2
3.2 Hagamos juntos nuestro primer documento Html.
- Abrir el editor de texto.
- Escribir los códigos Html siguientes :
- Salvar [save as...] el documento con la extensión .html o .htm
- Abrir el navegador.
- Abrir el documento por medio del menú "File/Open file".
- Admirar su primer documento Html.
¡Este está vacío (y es normal) pero totalmente operacional! Ahora es necesario proporcionarle su
información al interior de las etiquetas <BODY></BODY>. Fíjese que su "TITLE" está presente en la
ventana de Netscape.
Para sus eventuales modificaciones, no es necesario volver a abrir cada vez el navegador
• volver al editor de texto (sin cerrar el navegador).
• modificar los códigos Html.
• guardar el fichero.
• utilizar el comando "Reload" del browser o si éste es perezoso apretar en la barra
"Location" y pulsar "Enter".
Capitulo 4 : El texto
Cada documento Html contendrá principalmente texto. Veamos como hacerlo más agradable con
algunas etiquetas elementales.
Negrilla
[Bold]
Itálico
[Italic]
<B>...</B>
<STRONG>...</STRONG>
<I>...</I>
<EM>...</EM>
Principio y final de zona en grueso
Principio y final de zona en itálico
(cursiva)
3
Tamaño del
carácter
Color del carácter
[Font size]
<FONT SIZE=?>...
</FONT>
[Font color] <FONT COLOR="#$$$$$$">
Salto de línea
Comentarios
Centrado
[Line break] <BR>
[Comments] <!-- *** -->
[Center]
<CENTER></CENTER>
</FONT>
Principio y final de zona con este
tamaño
Principio y final de zona en color
Introducir un salto de línea
No visualizar
Centrar
Abrir el editor de texto
<HTML>
<HEAD><TITLE></TITLE></HEAD>
<BODY>texto simple<BR>
<B>texto en grueso</B><BR>
<STRONG> texto en grueso</STRONG><BR>
<I> texto en itálico</I><BR>
<EM>texto en itálico</EM><BR>
<B><I>texto en grueso y en itálico</I></B><BR>
<FONT SIZE=5>texto</FONT>
<FONT COLOR="#0000FF">en azul</FONT>
<!--Está terminado-->
</BODY>
</HTML>
Abrir el browser
Se imponen algunos comentarios:
• El texto muy sencillo se escribe sin etiquetas. Éste será recogido por el browser con el tipo y el
tamaño de caracteres escogidos en su configuración por defecto.
• El browser presenta el texto que le "dictamos" saltando de línea cuando éste alcanza el borde
de la ventana. Para obligarle a pasar por encima de esta norma de conducta e ir a la línea
siguiente como usted lo desea, hace falta una instrucción particular. Es la etiqueta <BR>. Ésta
representa una acción aislada (puntual) y no necesita etiqueta de fin.
• El mismo browser sólo tiene en cuenta un único espacio entre las palabras. De esta manera
<FONT SIZE=5>texto</FONT>
<FONT COLOR="#0000FF">en azul</FONT>
es equivalente a
<FONT SIZE=5>texto</FONT><FONT COLOR="#0000FF">en azul</FONT>
4
• No es escaso utilizar varias etiquetas para un mismo elemento de texto. Hay que tener cuidado
con encajarlas bien. Esta forma, <B><I> ... </I></B> es correcta, mientras que <B><I> ...
</B></I> puede crear problemas.
• El tamaño en <FONT SIZE=?> se puede indicar de dos maneras :
1. con un numero de 1 a 7. El valor por defecto siendo 3.
2. de manera relativa en relación con el valor por defecto (aquí 0). O sea -3, -2, -1, 0,
+1, +2, +3.
• Para los puristas, las etiquetas <I> y <EM>, <B> y <STRONG> no son totalmente
equivalentes. Se dará cuenta al adelantar en su estudio del lenguaje Html que <EM> y
<STRONG> pertenecen a las definiciones estructurales (estilo lógico) cuya apariencia
depende de las opciones recogidas de la configuración del browser. Las etiquetas <B> y <I>
pertenecen a los formatos de presentación (estilo físico) cuya apariencia depende de la
voluntad del autor.
Aquí están los códigos de algunos colores básicos.
Azul
Blanco
Rojo
Gris claro
#0000FF
#FFFFFF
#FF0000
#C0C0C0
Verde
Morado
Amarillo
Negro
#00FF00
#8000FF
#FFFF00
#000000
Capitulo 5 : Más texto
Según las versiones del Html (desde entonces estamos en la versión Html 4.0) y la aparición de
editores Html adelantados, algunos tags son menos utilizados. Otros también son simplemente de un
empleo escaso o por lo menos particular.
Aquí están algunos que completarán su panoplia actual.
• El tag <BLOCKQUOTE></
Crear cuenta
Comentarios de: Aprender el lenguaje HTML (0)
No hay comentarios