You are on page 1of 14

Introducción al HTML

Como funciona la Web

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

tiene que ser capaz de representar el documento en la pantalla . • Y necesita saber dónde tiene que ir a buscarlo • Y una vez localizado.¿Cómo reacciona la computadora? • Lo primero que necesita es saber qué documento tiene que ir a buscar.. tiene que traer el documento de algún modo a través de las redes de comunicaciones • Y por último.

debe existir una forma de codificar los documentos para que una vez que una computadora. debe existir un lenguaje en que las computadoras se comuniquen para pedirse y entregarse documentos unas a otras. lo haya obtenido. cada documento debe tener un localizador o un identificador. sea la que sea. es decir. . • En segundo lugar.¿Y eso técnicamente como es? • En primer lugar. algo que diga cómo se llama el documento y dónde se encuentra. • Y en tercer lugar. sea capaz de representarlo en la pantalla o en cualquier otro medio. en qué computadora de todas las conectadas a Internet está almacenado.

se tiene que hacer referencia a él con su nombre.edu. . cada documento necesita un nombre único que le diferencie de todos los demás.Veamos en detalle cada parte • En cuanto al localizador.sv/memorialabores/2010/ documentos/facultades/ml2010FMO. Y es precisamente lo que se pone en la barra de direcciones del navegador.ues. el identificador de una página es http://www. Por ejemplo.pdf • De momento lo importante es que si por ejemplo se quiere acceder a un documento.

le dice "No lo encuentro. • Este protocolo de comunicación consiste básicamente en unas cuantas reglas para que todo funcione bien. el protocolo se llama HTTP. y unos cuantos códigos como "404". la comunicación entre computadoras • Las computadoras tienen una especie de protocolo sencillo para comunicarse. Y la otra. si lo tiene. las computadoras hablan con números. Vamos dámelo". Por cierto. "200". • HTTP es HyperText Transfer Protocol (Protocolo para la Transferencia de Hipertexto) . Lárgate". se lo da. Algo así como “Me han dicho que tienes este documento. y en vez de decir "No lo encuentro" dicen "404". Y si no lo tiene.Error 404: Not found • Se refiere a la segunda parte o sea. "500". etc. • Por supuesto.

un documento de texto normal y corriente. • Y es aquí donde entra el tema. el HTML fue el lenguaje que se creó para compartir documentos en la Web. • Si los documentos fueran de texto normal. hay vínculos que se refieren a otros documentos. así que tanto el protocolo HTTP como el lenguaje HTML tenían que ser muy sencillos: por eso son tan sencillos… . Entonces se necesita un lenguaje para formatear los documentos que tenga en cuenta que hay palabras y también que hay hipervínculos.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. Eso quiere decir que además de palabras y frases. sino que es hipertexto. Pero como no es texto normal. En aquellos entonces los recursos eran limitados. bastaría con enviar un archivo con las palabras del texto.

las listas con marcadores de lista. 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. marcaba los párrafos. a mano o con una máquina de escribir. cuáles son los títulos. dónde acaba y dónde empieza una lista y cada elemento de la lista. Y el navegador será como la imprenta. Cuando un escritor escribía un libro. • Y eso es justamente lo mismo que se hace cuando se escribe en HTML. Todo eso lo anotaba con unas marcas más o menos estándares que los de la imprenta entendían. ¿Y que significa HTML? . etc. que va a reconocer todas esas marcas y le va a dar al documento la apariencia deseada: los títulos más grandes. las secciones.• HyperText Mark-up Language (Lenguaje para el Formato de Documentos de Hipertexto) • Un poco de historia básica (en cuanto a Mark-up). Se hace las veces del escritor (se escribe el contenido del documento) y el editor. etc. Es un término de imprenta. Al conjunto de todas esas marcas. los párrafos separados. etc. y se lo entregaba a su editor. porque también hay que decir dónde acaba y dónde empieza cada párrafo. en inglés se le llama "mark-up".

y varias secciones donde se hablara un poco de cada grupo y se pondrá una lista con los discos. Política. Música. por ejemplo. • Bueno probemos con un par de grupos.) • Bueno. ¿de qué quieren que trate? (Juegos Olímpicos. . • Vamos a hacer un documento con un título como "Mi colección de discos".. imaginemos que la página web va a tratar de. Tratemos de visualizar una pagina web..Veamos un ejemplo • Muy bien. etc. podría poner mis discos de música.

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. listado de discos… . historia.

Se le vamos a poner a cada cosa. se tiene que marcar la estructura del documento: los títulos. listas y objetos de la lista. y así todo. su etiqueta. Al título principal. párrafos y listas..Escritor y Editor • Bueno se ha elaborado una especie de boceto. dónde empieza y dónde acaba. • Si recuerdan. los párrafos. Además de decir el contenido de lo que se va a poner. Por ejemplo. para marcar su función dentro del documento. se menciono que se haría la labor del escritor y del editor. que es lo que hace el escritor. . a cada elemento del documento. Se le pondrán otras etiquetas que luego se irán conociendo. las listas. donde p significa "párrafo". a los párrafos se les pone una etiqueta <p> al principio. ¿me imagino otras etiquetas…? . y otra </p> al final. que es precisamente lo que tiene el ejemplo: títulos. • Para ello. una etiqueta <h1> al principio y otra </h1> al final.. Ejemplo 1 • Como se puede ver hay son títulos de segundo nivel.

. • Y está. Pero es una idea muy básica y muy fundamental del diseño web: el contenido y su estructura en HTML. Para ello... Si todas esas reglas se juntan en otro documento. o en un archivo sencillo • El HTML no sirve para hacer cosas bonitas. Un ejemplo muuuuy sencillo . se tendrá una hoja de estilo. Puedes estructurar los contenidos. el estilo y la apariencia en la Hoja de Estilo. • Estas son las Hojas de Estilo. Ya que el HTML tiene algo así como unas "amigas" que le ayudan a hacer lo que él no sabe. es la idea básica.• No seria mejor escribirlo a mano. se tienen que escribir unas "reglas de estilo" para el navegador. pero poco más. Especialmente las CSS(Cascading Style Sheets) • Para el caso al elemental documento en HTML creado se quiere darle un poco de color.

• Que en los documentos HTML se mete el contenido y su estructura. 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.Recapitulando • La Web son documentos enlazados entre sí. • Eso es posible gracias al hipertexto. y la apariencia se controla con las Hojas de Estilo.

ni el tamaño de la ventana del navegador. • Sera esto un obstáculo o un estimulo. sólo se sugiere. y esa es la tercera y última regla fundamental: en la Web la apariencia no se controla. será que en la actualidad ya se ha superado … . ni la resolución de pantalla. no se sabe que clase de computadora utiliza.Una ultima consideración • Hay algo incorrecto en lo anterior.. • No se sabe quién lee las páginas. ni el número de colores. ni el sistema operativo. Por tanto. recuerda. • Aunque se quisiera no se podría.. en la Web no se controla. ni el navegador que usa.