Introducción al HTML

Como funciona la Web

¿Básicamente que es la Web?

• La Web son documentos enlazados unos con otros, bajo algún mecanismo; o sea, lo que sucede cada vez que se hace algo tan fácil como clickear un vínculo con el ratón. Cuando se hace clic, la computadora recibe la orden de buscar el documento que se le ha pedido. Así que tiene que ir hasta donde esté el documento en cuestión, recogerlo, y mostrarlo en la pantalla.

¿Cómo reacciona la computadora?

• Lo primero que necesita es saber qué documento tiene que ir a buscar..

• Y necesita saber dónde tiene que ir a buscarlo• Y una vez localizado, tiene que traer el documento

de algún modo a través de las redes de comunicaciones

• Y por último, tiene que ser capaz de representar el documento en la pantalla

¿Y eso técnicamente como es?• En primer lugar, cada documento debe tener un

localizador o un identificador, algo que diga cómo se llama el documento y dónde se encuentra, es decir, en qué computadora de todas las conectadas a Internet está almacenado.

• En segundo lugar, debe existir un lenguaje en que las computadoras se comuniquen para pedirse y entregarse documentos unas a otras.

• Y en tercer lugar, debe existir una forma de codificar los documentos para que una vez que una computadora, sea la que sea, lo haya obtenido, sea capaz de representarlo en la pantalla o en cualquier otro medio.

Veamos en detalle cada parte• En cuanto al localizador, cada documento

necesita un nombre único que le diferencie de todos los demás. Y es precisamente lo que se pone en la barra de direcciones del navegador. Por ejemplo, el identificador de una página es http://www.ues.edu.sv/memorialabores/2010/documentos/facultades/ml2010FMO.pdf

• De momento lo importante es que si por ejemplo se quiere acceder a un documento, se tiene que hacer referencia a él con su nombre,

Error 404: Not found• Se refiere a la segunda parte o sea, la comunicación entre

computadoras• Las computadoras tienen una especie de protocolo sencillo para

comunicarse. Algo así como “Me han dicho que tienes este documento. Vamos dámelo". Y la otra, si lo tiene, se lo da. Y si no lo tiene, le dice "No lo encuentro. Lárgate".

• Por supuesto, las computadoras hablan con números, y en vez de decir "No lo encuentro" dicen "404".

• Este protocolo de comunicación consiste básicamente en unas cuantas reglas para que todo funcione bien, y unos cuantos códigos como "404", "500", "200", etc. Por cierto, el protocolo se llama HTTP.

• HTTP es HyperText Transfer Protocol (Protocolo para la Transferencia de Hipertexto)

Código• La tercera parte es el mecanismo para codificar los documentos de

modo que los programas que reciben el documento puedan descodificarlo y representarlo en la pantalla como lo que era: un documento de hipertexto.

• Si los documentos fueran de texto normal, bastaría con enviar un archivo con las palabras del texto, un documento de texto normal y corriente. Pero como no es texto normal, sino que es hipertexto. Eso quiere decir que además de palabras y frases, hay vínculos que se refieren a otros documentos. Entonces se necesita un lenguaje para formatear los documentos que tenga en cuenta que hay palabras y también que hay hipervínculos.

• Y es aquí donde entra el tema; el HTML fue el lenguaje que se creó para compartir documentos en la Web. En aquellos entonces los recursos eran limitados, así que tanto el protocolo HTTP como el lenguaje HTML tenían que ser muy sencillos: por eso son tan sencillos…

¿Y que significa HTML?• HyperText Mark-up Language (Lenguaje para el Formato de

Documentos de Hipertexto)• Un poco de historia básica (en cuanto a Mark-up). Es un término de

imprenta. Cuando un escritor escribía un libro, a mano o con una máquina de escribir, y se lo entregaba a su editor, el editor tenía que marcar sobre el texto instrucciones para que los de la imprenta imprimieran todo correctamente: decía dónde estaban los títulos, las secciones, marcaba los párrafos, etc. Todo eso lo anotaba con unas marcas más o menos estándares que los de la imprenta entendían. Al conjunto de todas esas marcas, en inglés se le llama "mark-up".

• Y eso es justamente lo mismo que se hace cuando se escribe en HTML. Se hace las veces del escritor (se escribe el contenido del documento) y el editor, porque también hay que decir dónde acaba y dónde empieza cada párrafo, cuáles son los títulos, dónde acaba y dónde empieza una lista y cada elemento de la lista, etc. Y el navegador será como la imprenta, que va a reconocer todas esas marcas y le va a dar al documento la apariencia deseada: los títulos más grandes, los párrafos separados, las listas con marcadores de lista, etc.

Veamos un ejemplo• Muy bien. Tratemos de visualizar una pagina web,

imaginemos que la página web va a tratar de... ¿de qué quieren que trate? (Juegos Olímpicos, Política, Música, etc.)

• Bueno, por ejemplo, podría poner mis discos de música.

• Vamos a hacer un documento con un título como "Mi colección de discos", y varias secciones donde se hablara un poco de cada grupo y se pondrá una lista con los discos.

• Bueno probemos con un par de grupos.

Mi colección de discos• 1er grupo• Aquí mencionaremos algo de la historia de este

grupo• Después ubicaremos la lista con unos dos discos• El primer disco• El Segundo disco• Luego a continuación una estructura similar a la

anterior para el segundo grupo• 2do grupo, historia, listado de discos…

Escritor y Editor• Bueno se ha elaborado una especie de boceto. • Si recuerdan, se menciono que se haría la labor del escritor y del

editor. Además de decir el contenido de lo que se va a poner, que es lo que hace el escritor, se tiene que marcar la estructura del documento: los títulos, los párrafos, las listas... , que es precisamente lo que tiene el ejemplo: títulos, párrafos y listas.

• Para ello. Se le vamos a poner a cada cosa, a cada elemento del documento, su etiqueta, para marcar su función dentro del documento, dónde empieza y dónde acaba. Por ejemplo, a los párrafos se les pone una etiqueta <p> al principio, y otra </p> al final, donde p significa "párrafo". Al título principal, una etiqueta <h1> al principio y otra </h1> al final, y así todo. Se le pondrán otras etiquetas que luego se irán conociendo. Ejemplo 1

• Como se puede ver hay son títulos de segundo nivel, listas y objetos de la lista, ¿me imagino otras etiquetas…?

Un ejemplo muuuuy sencillo• No seria mejor escribirlo a mano, o en un archivo sencillo• El HTML no sirve para hacer cosas bonitas. Puedes estructurar

los contenidos, pero poco más..., Ya que el HTML tiene algo así como unas "amigas" que le ayudan a hacer lo que él no sabe.

• Estas son las Hojas de Estilo. Especialmente las CSS(Cascading Style Sheets)

• Para el caso al elemental documento en HTML creado se quiere darle un poco de color. Para ello, se tienen que escribir unas "reglas de estilo" para el navegador. Si todas esas reglas se juntan en otro documento, se tendrá una hoja de estilo.

• Y está, es la idea básica. Pero es una idea muy básica y muy fundamental del diseño web: el contenido y su estructura en HTML, el estilo y la apariencia en la Hoja de Estilo.

Recapitulando

• La Web son documentos enlazados entre sí. • Eso es posible gracias al hipertexto, que permite saltar de

unos documentos a otros. • También gracias a que cada documento tiene un nombre

propio que lo identifica entre los demás. • Que los documentos de hipertexto viajan por la red a

través de un protocolo llamado HTTP. • Que para escribir documentos de hipertexto se usa HTML. • Que en los documentos HTML se mete el contenido y su

estructura, y la apariencia se controla con las Hojas de Estilo.

Una ultima consideración• Hay algo incorrecto en lo anterior, y esa es la tercera y

última regla fundamental: en la Web la apariencia no se controla.

• Aunque se quisiera no se podría. • No se sabe quién lee las páginas, no se sabe que clase de

computadora utiliza, ni el navegador que usa, ni el sistema operativo, ni la resolución de pantalla, ni el número de colores, ni el tamaño de la ventana del navegador... Por tanto, recuerda, en la Web no se controla, sólo se sugiere.

• Sera esto un obstáculo o un estimulo, será que en la actualidad ya se ha superado …