Unidad II: Introducción a HTML

Transcripción

1 Unidad II: Introducción a HTML Introducción En los recientes años, la World Wide Web se ha convertido en el principal sistema de distribución de información sobre Internet. Su crecimiento y popularidad ha sido resultado de la capacidad de incorporar gráficos, efectos de multimedia al texto convencional, juntamente con la posibilidad de acceder a diferentes formatos de archivos. Esta unidad presenta los conceptos básicos para la construcción y visualización de paginas web con el empleo del lenguaje HTML. Objetivos Comprender los mecanismos básicos de la operación de la web Crear y modificar documentos HTML con un simple editor de texto Escribir una serie de paginas web que presenten información textual y gráfica y que provean links hypertext a otros documento en Internet. Contenidos 1. Información Lineal y no Lineal En general, según la forma de acceso y su utilización, la información puede ser clasificada en dos tipos diferentes: información lineal e información no lineal. Por información lineal, denominamos a todo tipo de información que progresa en forma directa desde un punto inicial, a un punto final siguiendo un único y determinado camino. Por ejemplo una novela es tipo de información lineal, ya que para su total comprensión debe ser leída desde el principio hasta el fin. Una información no lineal, es aquella que puede ser accedida aleatoreamente sin perdida de comprensión. Un ejemplo de información no lineal es una revista, la cual tiene un índice de contenido y a través de el, uno puede leer y comprender un articulo o tema tratado en forma completa si necesidad de recorrer todas las paginas de la revista. Otro ejemplo de información no lineal es un diccionario. Un tipo de información lineal, también puede ser leída en forma no lineal, esto se podría realizar leyendo alguna partes en forma aleatorias de la novela, pero como su contenido fue pensado para ser leido en forma secuencia,l puede que el lector que intente leer en forma no lineal una novela pierda parte de la comprensión de la misma.

2 Luego de esta atípica introducción es muy probable que nos preguntemos porque es importante distinguir entre estos tipos de información. La respuesta es muy importante debido a que en la World Wide Web (www), básicamente es un gran contendor de información no lineal. Esta modelización del tipo de información entre lineal y no lineal, no debe prestar a confusiones, ya que en la web puede coexistir información no lineal y lineal. Por ejemplo un libro, que es una información básicamente lineal, puede incluir información no lineal, tales como referencias a otros libros, artículos, gráficos, presentaciones multimedia y videos. De manera que navegar en la web puede ser una experiencia producida a partir de la combinación de realizar lecturas lineales y lectura no lineales. 2. La World Wide Web el primer sistema práctico de manejo de información no lineal Desde 1960 se ha tratado de crear un sistema para el manejo de la información no lineal, tal fué el caso de Ted Nelson con su proyecto Xanadu, el cual fue el primero en incluir la palabra hipertexto. Pero hubo que esperar un tiempo mas hasta que las ideas, el hardware y el software pudiera hacer viable una solución práctica. La solución la aporto Tim Berners-Lee en 1990, un científico ingles que trabaja en el Laboratorio Europeo de física de partículas (CERN). Por entonces, Berners-Lee tenia dificultades para compartir información con otros científicos de otras nacionalidades y precisaba una herramienta que facilite la comunicación entre sus colegas. La idea de Berners-Lee era que la información en un sistema no debería ser solamente limitada a texto y que el tratamiento de dicha información debería ocultar la información no deseada de los datos necesarios,según el contexto en que se la analizara. Además preveía que mantener un sistema jerárquico de información, en un futuro, este colapsaría por su propio peso cuando la información se tornara más voluminosa. La solución a su problema radicaba en montar un hipertexto distribuido, donde la gente pueda manter los datos en su computadora, las cuales se encuentra conectadas a una red y con la posibilidad de publicar dichos datos para que otros usuarios tengan acceso. Los hipertextos tienen la capacidad de combinar texto, gráficos, sonido y otro tipo de información multimedial. Para preparar un hipertexto, la información debe ser dividida en unidades pequeñas, manejables y auto contenidas (de manera que pueda ser comprendida en su totalidad por el lector), llamadas nodos. Los hiperlinks posibilita que diferentes

3 accesos a nodos estén embebidos en un nodo. El proceso de navegar entre estos nodos es denominado browsing. El diseño efectivo de hipertexto, que es básicamente parte de información no lineal, es mas dificultoso que el diseño de texto narrativo (información lineal) Una colección de nodos interconectados por hiperlinks se denominada web. En consecuencia la World Wide Web es un sistema global de hipertexto. En marzo de 1989 Berners-Lee distribuye una propuesta de solución para desarrollar un sistema de hipertexto entre sus colegas. Esta propuesta tenia tres importantes conceptos: Una interface consistente La posibilidad de incorporar un amplio rango de tecnologías y tipos de documentos. La capacidad de lectura universal, esto es, cualquier persona sentado en cualquier sitio de la red, independientemente del hardware y sistema operativo que este empleando, pueda leer el mismo documento de la misma manera y presentado de la misma forma. A fines de 1990, Berners-Lee presento el proyecto nuevamente y a partir de ese momento el proyecto empezó a tomar forma. Berners-Lee escribió el software del servidor y del cliente, y sobre fines de 1991 lo distribuyo entre sus colegas. Esencialmente, 1992 fue el año de desarrollo de la World Wide Web (www). Un browser era disponible via FTP desde el servidor de la CERN. En 1994 la CERN realiza un acuerdo con el MIT (Massachussets Institute of Technology) y generan una grupo llamado W3, con la finalidad de desarrollar el futuro de la web. A partir de ese entonces se forma la World Wide Web Consortium, la W3C ( que es la organización que genera las recomendaciones para obtener los estándars en el manejo de la web. Para poder generara una solución independiente de la plataforma de hardware, sistemas operativos y lenguaje utilizado, Berners-Lee empleo como base el lenguaje SGML (Standard Generalized Markup Language) que es un estándar internacional, creado en los años 60. Es reconocido por el manejo de texto, porque esencialmente suministra una forma de organizar y estructurar la información. SGML es independiente de la plataforma, requiriendo solamente una computadora y software especial (parser) para analizar los documentos y poder mostrarlos. Los documentos SGML contienen dos elementos básicos: el contenido y la información acerca del contenido y en realidad se utilizo SGML para definir otro lenguaje el HTML. Es importante destacar que la creación de la Web por Berners-Lee pudo ser posible por tres factores. Primero, el trabajo con computadoras suficientemente potentes, pequeñas y económicas para ser utilizadas el la infraestructura de la World Wide Web.

4 Segundo, tuvo la capacidad de ver mas allá de una solución particular para el manejo eficiente de almacenar y recuperar información no lineal. Y, tercero, Berners-Lee, empleo las herramientas que tenia a su alcance, invento las que no existían, escribió software, recomendaciones y coordino el esfuerzo de varias persona para llegar a implementar su idea. 3. Como trabaja la Web? La característica más importante de la forma de trabajar de la web es su simplicidad. El traslado de documentos dentro de la web se realiza en cuatro fases básicas, todas soportadas por el protocolo HTTP (HyperText Transfer Protocol): 1. Conexión (connection) 2. Pedido (request) 3. Respuesta (response) 4. Cierre (close) En la fase de conexión el cliente Web (el browser, ej. Microsoft Internet Explorer, Netscape) intenta conectarse con el servidor. Esto aparece en la mayoría de las líneas de estado de los browsers en la forma de Conectando al http Server. Si el cliente no puede establecer la conexión, en general se intentara un par de veces mas y un mensaje al usuario informara la imposibilidad de conexión. Una vez que se estable una conexión con el servidor HTTP (servidor Web), el browser (cliente) envía un pedido (request) al servidor. El pedido establece cual protocolo será empleado y le indica al server que objeto es buscado. Si el servidor no puede acceder al objeto indicado envía un mensaje de error al cliente. Por el contrario, si servidor encuentra el objeto se lo envía al cliente en la respuesta (response). Finalmente se cierra la conexión. 4. Que es un documento HTML HTML (HyperText Markup Language) es el lenguaje mediante el cual se le indica al browser (por ej. Explorador de Internet de Microsoft o Netscape Navigator) como mostrar una página web. Un documento HTML (pagina) es un archivo de texto plano (un archivo ASCII) con etiquetas (tags) o códigos que el browser conoce y sabe como interpretarlos y mostrar el documento en pantalla. Un pagina HTML puede ser creada empleando cualquier editor de texto. Los documentos HTML pueden ser escritos utilizando una gran variedad de

5 herramientas, desde el NotePad (o Block de Notas) en Windows, un simple editor de texto, hasta las más avanzadas herramientas de redacción y preparación de hipertexto tal como Macromedia Dreamweaver. La idea de esta unidad es utilizar una simple herramienta de edición para enfocarnos específicamente en las características del lenguaje HTML. 5. Que son los tags de HTML Cuando un web browser muestra una página HTML lee el archivo de texto y busca etiquetas especiales o tags que vienen delimitadas por los caracteres < y >, los cuales le indican al browser como mostrar el texto que viene a continuación. El formato general de una etiqueta HTML o tag es el siguiente: <etiqueta>texto</etiqueta> Obsérvese que existe una etiqueta de apertura (<etiqueta>) que indica desde donde tiene alcance la etiqueta y una etiqueta de cierre (</etiqueta>) que indica el final del alcance del tag o la etiqueta. Recuerde que todas las etiquetas que empiezan con </.. la barra (slash) es una etiqueta de finalización. Por ejemplo, un tag de encabezamiento es el siguiente: <h3>buenos Días</h3> En HTML las mayúsculas y las minúsculas son irrelevantes, el ejemplo anterior es equivalente a : <H3>Buenos Días</H3> A diferencia de un lenguaje de programación que puede causar que errores cuelguen el programa, si una pagina HTML tiene errores se visualizara en forma defectuosa pero no tendrá efectos secundarios sobre el sistema. 6. Documentos HTML Un documento HTML consiste de dos partes: una cabecera y un cuerpo principal, que aunque no fuera explícitamente declarado HTML asume su existencia. La cabecera (head) contiene información acerca del documento en sí mismo y no será mostrado por el browser. El cuerpo (body) contiene toda la información que se desea que sea mostrada por el browser. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <html>

6 <head> <! Información de encabezamiento extra acerca del documento y no mostrada por la página --> </head> <body> <! Información a mostrar --> </body> </html> Observemos la primera línea <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">, es una línea opcional que esta afuera de la definición del documento html (tags <html> y </html>), y le indica al browser en que versión de HTML se encuentra la pagina a mostrar y las reglas acordadas para manejarlo. Este tag le indica al browser que este es un documento HTML que emplea la especificación publica DTD HTML 3.2 en ingles. Toda la pagina HTML esta indicada por el tag de apertura <html> y el tag de cierre </html>, dentro del cual se encuentra la cabecera (<header>... </header>) y el cuerpo (<body>... </body>). El elemento cabecera incluye una variedad de información para el browser, incluyendo un titulo para el documento, palabras claves a ser empleada por los buscadores, información de links y otra información adicional. El cuerpo es el elemento que el usuario final ve cuando el documento es analizado por el browser. El cuerpo incluye texto y objetos, tales como imágenes, y applets, junto con los tags necesario para definir su estructura y relación con el documento. También podemos observar tanto dentro de la cabecera como del cuerpo los tags de comentarios (<! >). El texto dentro del tag de comentario no será mostrado en la pagina web, pero es accesible para aquellos que lean el código HTML de la pagina. 7. Terminología HTML Antes de continuar con la estructura de HTML, es importante establecer un vocabulario común, por lo cual definimos el significado de los siguientes términos: Browser: Un Web Browser es un tipo especial de motor de analizador sintáctico (parser) que evalúa los tags y contenido de un archivo HTML y lo muestra de acuerdo a las capacidades y reglas establecidas previamente. Elemento: es un componente distintivo dentro de la estructura de un documento, tales como titulo, párrafo, lista, etc. En general incluyen tags de apertura y cierre, con el contenido en su interior.

7 Tag: Es una pieza de texto que usualmente identifica un elemento de manera que el browser u otro parser conoce como mostrar su contenido. Atributo: Un atributo provee instrucciones adicionales al browser acerca de una tag. La información que suministra el atributo es especifica de cada tag y varia de un tag a otro, y puede incluir información acerca del estilo, locación de archivos, tamaño, etc. DTD: (Document Type Definition), es la definición de un tipo de documento consistente en una colección de reglas escrita en SGML (Standard Generalized Markup Language) que define la sintaxis y la estructura de un tipo de documento especifico, tal como HTML. 8. Títulos Cada documento HTML necesita un titulo que aparece en el explorador que se este utilizando. El formato del titulo es el siguiente: <title>mi primer documento HTML</title> El texto del titulo que aparece en el browser es precedido por un tag, una etiqueta o un rótulo predefinido de HTML. Fíjense que el tag de inicio <title> tiene una etiqueta o tag que indica el final del título </title>. Ejercicio 1 Con el empleo de un editor de texto sencillo, editor ASCII (por ej. NotePad o Block de notas): a) abra un nuevo archivo b) escriba la siguiente linea de texto: <title>mi primer documento HTML</title> c) cierre el archivo y nómbrelo titulo.html d) ábralo con el browser de su preferencia e) Observe la barra de título de la ventana abierta por el browser. Nota: La extensión de los documentos html es.html o htm. Con cualquiera de las dos extensiones el browser los puede abrir y visualizar.

8 9. Encabezamientos En HTML existen seis niveles de encabezamiento con tamaño de letras (font) predefinidos <h1>encabezamiento 1</h1> <h2>encabezamiento 2</h2> Ejercicio 2 Escriba una pagina web con un simple editor de texto ASCII, con el nombre de encabezamiento.html para que luzca como la siguiente: 10. Párrafos El browser ignora todos las nuevas líneas (carriage return) que se ingresan cuando se tipea el texto. Si uno desea insertar una nueva línea y empezar un nuevo párrafo le indica tal condición al browser con el tag de párrafo <p>. Este tag de cierre del párrafo </p> es opcional

9 11. Otros tipos de breaks Para separar las secciones de una página web se puede utilizar la regla horizontal que inserta una línea horizontal y cuyo tag es: <hr> El tag <br> fuerza a una nueva linea, por ejemplo: <p> SGML (Standard Generalized Markup Language)<br> Es un estándar internacionalmente reconocido para el manejo de texto.<br> Provee una forma de organizar y estructurar la información.</p> El elemento <br> no tiene un tag de cierre. Los elementos que no tienen tag de cierre se denominan elementos vacios. 12. Espacios no fraccionables Los browsers automáticamente acomodan el texto entre los márgenes establecidos, las líneas se acomodan a lo largo respetando los márgenes, para ello el browser inserta una una línea en lugar de cualquier espacio. Si uno por un determinado motivo desea que un conjunto de palabras no sean separadas, por ejemplo queremos que siempre se vea Coca Cola, entonces deberá agregarse un espacio no fraccionable: <p>coca Cola</p> No es buena práctica utilizar los espacios no fraccionables para indentar texto, su lugar deberá utilizarse reglas de estilos 13. Estilos HTML ofrece distintos tags para agregarle estilos a su documento texto, por ejemplo existe los tags de: Bold: <b>... </b> Italica: <i>... </i>

10 similar a italiza es el énfasis que se demarcan con los tags <em>... </em> Tipo maquina de escribir (typewriter): <tt>... </tt> A partir de esto se pueden hacer combinaciones de tag, por ejemplo pruebe en el browser como se ve los siguiente tags: <h2><i>bueno</i>, bonito y <tt>barato</tt><h2> es lo que pedimos todos!! Ejercicio 3 Escriba una pagina web con un simple editor de texto ASCII, con el nombre de estilos.html para que luzca como la siguiente: 14. Listas Existen dos tipos de viñetas en HTML las cuale se preceden con un punto (listas no ordenadas) y secuencialmente numerada (listas ordenadas). Las listas ordenadas son demarcadas por los tags <ul> y </ul> y cada item de la lista es marcado por el tag <li>, por ejemplo:

11 <b>mi lista no ordenada</b> <ul> <li> Item 1 <li> Item 2 <li> Item 3 </ul> Las listas ordenadas son delimitadas con los tags <ol> y </ol>, y los items se delimitan con el tag <li>, por ejemplo: <b>mi lista ordenada</b> <ol> <li> Item 1 <li> Item 2 <li> Item 3 </ol> Es posible anidar las listas ordenadas y no ordenadas para realizar la combinación deseada. Ejercicio 4 Escriba una pagina web con un simple editor de texto ASCII, con el nombre de listas.html para que luzca como la siguiente:

12 15. Gráficos Una de las características de los hipertextos es la capacidad de combinar texto con gráficos. La mayoria de los browsers pueden mostrar GIF y JPEG, los mas modernos browser tabien pueden comprender archivos PNG. Generalmente JPEG son mejores para fotografias, mientras que los archivos GIF y PNG son optimos para gráficos de areas planas. La forma simple de agregar una imagen a una pagina web es utilizar el tag <img>. Supongamos que se quiere mostrar una imagen llamada grafico.jpg y se encuentra en el mismo directorio que la pagina html y que tiene una dimension de 250 pixels de ancho y 300 pixels de alto. El tag para mostrar dicha imagen seria: <img src="grafico.jpg" width="250" height="300" alt="grafico de Ventas > el atributo src identifica la imagen a mostrar, los atributos altura (height) y ancho (width) no son obligatorios, pero ayuda a mejora la velocidad con que se muestra el gráfico. El atributo alt tambien es opcional y nos indica un texto descriptivo en caso de que la imagen no pueda ser mostrada. Observe que todos los atributos dentro de un tag tienen la forma de: atributo= valor donde los valores siempre estan encerrado en doble comillas. 16. Links a otras páginas Por ejemplo si queremos que en la pagina aparezca un link: próxima pagina y una vez clickeado aparezca la pagina reporte.html, el tag deberá definirse de la siguiente forma: <a href="reporte.html">próxima pagina</a> El texto entre los tags <a> y </a> es la etiqueta que aparece como link.

13 Para realizar un link de una pagina de un sitio web a otro sito web debe explicitarse la dirección completa de la pagina o URL (Uniform Resource Locator). Asumamos que en el ejemplo anterior, se desea ir a la pagina de se debería escribir <a href=" pagina</a> También un gráfico puede servir para realizar el link, en lugar del texto de la etiqueta del link se coloca la definición de la imagen. <a href=" src="grafico.gif" alt="w3c"></a> 17. Que es un URL? Un Uniform Resource Locator, comúnmente denominado URL, especifica la locación exacta de un recurso, usualmente un archivo o servicio, en la Internet. Para poder especificar la locación exacta, en internet es necesario un nuevo tipo de direccionamiento que no solamente describa la locacion de una archivo o servidor, sino tambien el tipo de protocolo a emplear. Un URL consiste de cuatro partes separadas, que cuando se combinan definen completamente definen la locacion de cualquier archivo o servicio localizado en cualquier lugar de la red (internet). Las partes de un URL son: Protocolo o esquema Nombre del dominio Camino de acceso (path) Nombre del archivo En términos de la especificación oficial de la W3C (RFC 1738), el protocolo de transferencia es denominado esquema de transferencia de la información. El Serve es también referido como network host y puede ser direccionado ya sea por el nombre del dominio o una dirección IP (Internet Protocol) numérica. Existen tres tipo diferentes de URL: URL Absoluto: URL Relativo URL fragmentado:

14 URL Absoluto Los URL absolutos emplean una completa dirección de internet para determinar la locación de un recurso. Un ejemplo de URL absoluto es: URL Relativo Alguna veces denominado URL parcial. Son empleado donde el direccionamiento completo para acceder a los archivos es innecesario. Este es el caso donde los documentos y archivos a localizar se encuentran en el mismo servidor que la última pagina accesada por el browser. Por ejemplo un URL absoluto a la pagina index.html seria: si dentro de la pagina index se realiza un link a la pagina reporte.html y el browser primero accesa a la pagina index, y la pagina reporte se encuentra en el mismo servidor web y en el mismo directorio, se puede referenciar la pagina con el siguiente URL relativo: reporte.html. Los URL relativos son absolutamente necesarios si se requiere que el sitio web sea absolutamente portable entre servidores y dominios. URL fragmentado: Empleados cuando se requiere acceder a un determinada parte de una página. En la página previamente se especifican las etiquetas que pueden ser linkeadas. Un ejemplo de URL fraccionado es: Protocolo La parte mas importante de un URL es la definición del protocolo Esta información determina el tipo de servidor a que se tendrá acceso. Los principales protocolos son: Protocolo File ftp http Servicio Acceso a archivos almacenado en el disco duro de su computadora Ej. file://host/path Acceso a un servidor FTP, para realizar transferencias de archivos. Ej.: ftp://user:password@host:port/path/nombre_archivo Acceso a paginas html ubicadas en servidores web mediante el protocolo HyperText Transfer Protocol (http). Ej.:

15 Malito Este es un URL especial que permite enviar mails Ej.: Gopher News telnet wais Acceso a servidores Gopher Links que apuntan a grupos de noticias de Usenet Ej.: news:nombre_newsgroup News:identificador _mensaje Un link para iniciar una session de telnet contra un servidor de telnet. Ej. telnet://user:password@host:port Acceso a servidores wais (Wide Area Indexed Server), que es un sitio para buscar documentos orientados a temas, accedido por palabras claves. Nombre del dominio Seguido a la definición de protocolo, la proxima informacióna definir en el URL es la locacion del servidor al que se quiere tener acceso. Esto puede realizarse especificando su nombre de domino o dirección IP del servidor, donde en algunos caso es necesario especificar el puerto donde se realizará la conexión. El puerto en general puede ser omitido. Por ejemplo acceder al servidor web de IBM se realiza mediante el siguiente URL: Camino de acceso (path) y nombre del archivo Cuando se describe el path a un archivo, un URL emplea el método estándar de Unix para la definición de path, separando cada directorio por una barra hacia delante (forward slash) /. Note que si por equivocación se utilizan barras para atrás \ (back slash) el browser no lo comprenderá, por mas que se la forma que uno especifique los directorios en DOS o Windows. Direccionamiento relativo

16 Un especial tipo de URL no contiene un nombre de dominio, pero todavía puede contener un path a un nombre de archivo. En lugar del nombre del dominio y path en si mismo, este tipo de direccionamiento adopta el nombre de dominio y path de la ultima URL que fue accesado. 18. Links dentro de la misma página Si se desea realizar links dentro de la misma página. Supongamos que tenemos un encabezamiento como <h3>capítulo II</h3> si queremos que se convierta en un objetivo para poder ser linkeado, debemos identificar el tag <h3 name= capitulo2 >Capítulo II</h3> Si dentro de una página deseamos realizar un link al objeto anteriormente identificado, esto se realizaría de la siguiente forma: <a href="#capitulo2">ver el capitulo II</a> Observe que el carácter # es necesario antes del nombre del objeto identificado. De igual maera, si quisiera ir a una parte especial de otra pagina en otro servidor web, asumiendo que el objeto esta identificado, tendremos: <a href=" II</a> Solución a los ejercicios planteados Ejercicio 1 Contenido del archivo titulo.html: <title>mi primer documento HTML</title>

17 Visualizado con el empleo del browser: Ejercicio 2 Contenido del archivo encabezamiento.html <html> <head> <title>ejemplo de Encabezamientos</title> </head> <body> <h1>texto de encabezamiento tamaño 1</h1> <h2>texto de encabezamiento tamaño 2</h2> <h3>texto de encabezamiento tamaño 3</h3> <h4>texto de encabezamiento tamaño 4</h4> <h5>texto de encabezamiento tamaño 5</h5> <h6>texto de encabezamiento tamaño 6</h6> </body> </html> Ejercicio 3 Contenido del archivo estilos.html <html> <head>

18 <title>ejemplo de Estilos</title> </head> <body> <b>texto en bold</b> <i>texto en italic</i> <em>texto con emphasis</em> <tt>texto tipo maquina de escribir (tipewriter)</tt> </body> </html> Ejercicio 4 Contenido del archivo listas.html <HTML> <TITLE> Listas</TITLE> <BODY> <OL> <LI> Primer Item en la lista </LI> <LI> Segundo Item en la lista </LI> <LI> Tercer Item en la lista </LI> <LI> Cuarto Item en la lista </LI> </OL> <BR> <BR> <UL> <LI> Primer Item en la lista </LI> <LI> Segundo Item en la lista </LI> <LI> Tercer Item en la lista </LI> <LI> Cuarto Item en la lista </LI> </UL> </BODY> </HTML> Bibliografía Unleashed HTML 4, Second Edition, Rick Darnell, Sams, 1999 Indiana. Writing HTML, version 4.5.2, Maricopa Center for Learning and Instruction (MCLI), 2000,

19 Actividades de autoevaluación Actividad 1 a) Abra el note pad de windows o en su reemplazo un editor de texto simple b) Ingrese el siguiente texto <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <html> <head> <title>mi Primera Página HTML</title> </head> <!-- Escrita por CC IUA > <body> En estas actividades crearemos páginas webs. </body> </html> c) Salve el documento como un archivo llamado mi_primer_pagina.html. Tenga la precaución que el editor de texto empleado salve el documento en formato de texto plano (ascii). En windows también los documentos pueden ser salvados con la extensión htm. d) Abra la pagina html creada con el web browser. e) Observe que dentro del encabezamiento (header) que no es visible en la pagina web existe un tag de título (title) que es empleado para identificar cada documento y también es mostrado en la barra de titulo de la ventana del browser. Actividad 2 a) Escriba una pagina html que genera la siguiente salida, con el empleo de los tags de títulos y de encabezamientos.

20 Actividad 3 a) Abra un editor de texto b) Abra la página creada en el ejercicio 1, mi_primer_pagina.html. c) En el cuerpo (body) agregue el siguiente texto en la siguiente línea al texto En estas actividades crearemos páginas webs. HTML no reconoce los finales de línea. Por esa razón, aunque utilicemos distintas líneas en nuestro fichero, serán visualizadas de forma continua. d) Salve los cambios realizados al documento. e) Abra el web browser. f) Abra el documento mi_primer_pagina.htm. (archivo -> abrir) g) Observe como se muestra el documento en el browser h) Redimensione el browser, especialmente achique el browser a lo ancho y observe como se reacomoda el texto.

21 Actividad 4 a) Abra el editor de texto con el documento modificado en el ejercicio 3, mi_primer_pagina.html. Introduzca los siguientes cambios en el texto En estas actividades crearemos páginas webs. <h3>recuerde:</h3> HTML no reconoce los finales de línea. <p> Por esa razón, aunque utilicemos distintas líneas en nuestro fichero, serán visualizadas de forma continua. b) Salve los cambios realizados al documento. Si el browser se encuentra abierto haga una actualización de documento, caso contrario abra el browser y abra el documento en cuestión. Soluciones a las actividades de autoevaluación Actividad 1 La pagina web luce de la siguiente forma: Actividad 2 El código de la página solicitada es el siguiente: <html>

22 <head> <title>ejemplo de Encabezamientos</title> </head> <body> <h1>encabezamiento 1</h1> <h2>encabezamiento 2</h2> <h3>encabezamiento 3</h3> <h4>encabezamiento 4</h4> <h5>encabezamiento 5</h5> <h6>encabezamiento 6</h6> </body> </html> Actividad 3 La pagina web luce de la siguiente forma: Actividad 4 La pagina web luce de la siguiente forma:

23 Ejercicios complementarios Ejercicio complementario 1 Escriba su currículo en un pagina web con el de HTML Autor Ing. Carlos Carballo ccarballo@thinksoft.com.ar