Tutorial de HTML

 INTRODUCCIÓN A HTML

 Lección 1

Por Humberto Rodríguez

 HTML es un acrónimo de Hyper Text Markup Language y fue concebido para escribir páginas web que fuesen compatibles con todos los sistemas operativos.  Las páginas de HTML escritas en Windows funcionan también perfectamente en Unix, MacIntosh y otros sistemas operativos.  La razón es simple; no usa los atributos automáticos  del sistema.  Por ejemplo, una página de texto escrita en MacIntosh inserta automáticamente un "Carriage Return" (Intro) o un "\r" al final de cada línea; el mismo texto, escrito en Unix, introduce un "New line" o un \n en vez del \r y en Windows, el editor incluirá ambos \r\n al final de cada línea.  Cuando leemos páginas HTML en un navegador, éste ignora todos esos comandos y utiliza las "tags" (etiquetas) de HTML en su lugar. 

 Un documento escrito en HTML tiene alguna semejanza con los procesadores de texto antiguos.  Los que lleven muchos años usando computadoras recordarán los primeros procesadores de palabras tales como "Peachtree" que eran muy famosos y usados allá por los años 70 y principio de los 80.  Peachtree también usaba tags o etiquetas para darle la forma deseada al texto, de forma similar a lo que usa HTML.

 Lo primero que se debe decidir al comenzar a aprender a escribir documentos en HTML es donde hacerlo.  Se pueden escribir los documentos en cualquier editor de texto o en un procesador de palabras, siempre que se guarde el documento en texto, (.TXT) o en HTML.  Muchos prefieren ésta última opción por su sencillez.  

 Usando MS Word por ejemplo, se puede simplemente escribir un documento cualquiera y a la hora de guardarlo, pedir que sea guardado en HTML, con la terminación .HTML o .HTM.  Estas páginas podrán ser leídas perfectamente desde un navegador, pero el inconveniente es que, a la hora de editarlas, es extremadamente engorroso hacerlo, dada la verborrea que MS Word utiliza al convertir las páginas a HTML.

 Algo parecido sucede con otros programas creados precisamente para facilitar la creación de páginas web, tales como Front Page o Dreamweaver.

 También existen programas gratuítos hechos específicamente para editar documentos de HTML.  Uno de los mejores es Arachnophilia y está disponible en:

 http://www.arachnoid.com/arachnophilia/index_old.html

 Es la versión vieja, la 4.0, que es la que es accesible.  La versión nueva, la 5, es en Java y no es accesible para usuarios de Jaws.  El programa está en inglés, pero creo que es uno de los mejores de los que generan páginas de HTML.  Usando sus menús, es más fácil entrar ciertas etiquetas y evitar errores.

 Yo uso un editor de texto y de HTMl, llamado NoteTab.  Uso la versión Pro, pero ellos tienen una versión gratuíta, que se puede descargar de aquí:

 http://www.notetab.com/ntl.php

NOTA: Para descargar rápidamente, Ins-F7 y oprime D cinco veces, hasta "Download Now".

 Es un buen editor de texto, que facilita el editar páginas de .txt, .css y de .html.

 Las normas actuales requieren separar la estructura del contenido de la página, y la configuración de su presentación, para lo que se usan Hojas de Estilo.  Las usaremos en forma básica, en éste tutorial, para sentar la base donde se pueda continuar aprendiendo luego, en vez de tener que regresar y aprender distintos métodos más tarde.

 Yo prefiero usar NoteTab u otro editor de texto llamado EditPad pero igual se puede usar el Bloc de Notas que viene con Windows o VI, que viene con Unix.  Para usar el Bloc de Notas, ir a Inicio - Todos los Programas - Accessorios y presionar sobre el enlace del Bloc de Notas.

 También prefiero escribir todas mis etiquetas en minúsculas.  Cuando lleguemos a usar XTML, que quizás sea lo que prevalezca en el futuro, es necesario que las etiquetas estén en minúsculas.  Para HTML pueden estar en mayúsculas o en minúsculas, pero tiene que ser consistente, no se pueden usar ambas.

 Una vez que abrimos el editor de texto, estamos listos para comenzar a escribir nuestra primera página en HTML.

 Lo primero que hay que entender es la estructura de una página de HTML.  Consiste, primero que nada,  de la declaración del tipo de página que es.  Nosotros usaremos por ahora HTML 4.01 y cuando lleguemos al curso avanzado, cubriremos algo de XTML.  Para declarar que la página es HTML 4 estricto (puede ser estricto o de transición),  basta con poner las siguientes dos líneas  al principio de cada página:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

 "http://www.w3.org/TR/html4/strict.dtd">

 La página con toda probabilidad funcionará aunque omitan esas dos líneas, pero entonces dependen de que el navegador adivine correctamente qué tipo de página es, lo que puede traer problemas, sobre todo si hace tiempo desde el diseño y publicación de la página.

 La declaración del tipo de página va inmediatamente seguida de una etiqueta que es <html> y al final de la página, va otra etiqueta para cerrarla, que es </html>.  Noten el </ pues es la norma para cerrar etiquetas.  Usualmente las etiquetas están dentro de signos de <> y cuando terminan, dentro de signos de </>.

 Para terminar el documento por lo tanto, hace falta colocar una etiqueta de </html>.  De manera que para comenzar nuestro primer documento escribimos:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

 "http://www.w3.org/TR/html4/strict.dtd">

 <html>

 </html>

 y entre esas dos etiquetas, ponemos el resto.

 Hay dos secciones principales dentro de todo documento de HTML.  La primera es el "head" (cabeza) y la segunda es el "body" (cuerpo).  De manera que el bosquejo ahora luce como sigue:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

 "http://www.w3.org/TR/html4/strict.dtd">

 <html>

 <head>

 </head>

 <body>

 </body>

 </html> 

 Con eso, ya podemos escribir nuestra primera página de html y guardarla en nuestro propio disco o subirla a un servidor que esté conectado al internet para verla allí. No está dentro de la intención de éste curso entrar en temas como el funcionamiento de las conecciones de los servidores al internet o de como subir archivos a un servidor, a través de la internet, usando FTP (File Transfer Protocol o Protocolo para la transferencia de archivos). Nosotros simplemente guardaremos los archivos que creemos, con terminación .html en vez de .txt,  en 

la carpeta c:\web y si ya instalamos Apache, como hemos recomendado, lo leeremos desde el navegador, entrando:

localhost/nombre_archivo.html

 De manera que, abriendo nuestro editor de texto, escribimos:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

 "http://www.w3.org/TR/html4/strict.dtd">

 <html>

 <head>

 </head>

 <body>

 Hola a todos por el mundo entero.

 </body>

 </html> 

 Una vez escrito ésto, guardamos el archivo en la carpeta c:\web, con el nombre 

 c:\web\prueba1.html

Noten que yo uso siempre la terminación .html.  Igual se puede usar .htm pues funcionan exactamente igual, pero mi consejo es que escojan una forma o la otra y nombren todos sus archivos con la misma terminación, para evitar confusiones.

 Una vez guardado el archivo, abrimos el navegador.  En la barra de la dirección, ponemos localhost/prueba1.html 

 y presionamos <INTRO>

 ¡Listo! Ya creamos tu primer documento en HTML, que puede ser utilizado como página web.

 También es posible, estando en el Windows Explorer, hacer doble click o presionar <INTRO> sobre el archivo y abrirá automáticamente en el navegador, pero no será a través de Apache.  Cuando lo abrimos en esa forma, abre en el navegador porque Windows tiene asociada esa terminación de archivo (.html y .htm), con el navegador.

En la proxíma lección, veremos lo que se puede poner dentro del cabezal, o sección "head."

Copyright 2008, Humberto Rodríguez, Derechos Reservados

http://tranquilamente.com