H T M L
Anuncio
H T M L Prácticas U.A.C.M COMPUTACIÓN II Academia de Inf ormática 1 Práctica HTML Básico El objetivo de esta práctica es familiarizarse con el lenguaje HTML, por lo que se trabajará con un editor llamada GEL que es un software libre que nos permite trabajar páginas web, aunque existen otros métodos para conseguir el mismo resultado (editores de HTML o conversores desde otras aplicaciones). Esta práctica consiste en un website que se irá completando progresivamente. Fundamentos Teóricos. HTML es un lenguaje para la definición de estilos lógicos en documentos de hipertexto, siendo el medio principal para publicar información en Internet. HTML se limita a describir la estructura y el contenido de un documento, nunca el formato de la página y su apariencia, ya que éstos son muy dependientes del visualizador utilizado. Los documentos HTML se dividen en cuatro partes bien diferenciadas: 1. La Cabecera de tipo de documento La usa el software para saber la versión de HTML que se está usando (no visible). 2. La Cabecera del documento (document HEADer) Usada para dar información sobre el documento (no visible). 3. El Título del documento se almacena en la cabecera (HEAD) del documento. No es visible dentro de la página web, pero muchos visualizadores lo muestran en alguna parte. 4. El Cuerpo del documento (document BODY) Es la parte principal del documento, la parte que el usuario ve. Estas tres partes pueden verse en la plantilla mostrada a continuación. <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML> 1 La primera línea indica que es un documento HTML: <HTML> La segunda y quinta línea delimitan la cabecera del documento: <HEAD> </HEAD> La tercera y cuarta línea delimitan el título del documento: <TITLE> </TITLE> La sexta y séptima línea delimitan el cuerpo del documento: <BODY> </BODY> La última línea indica que finaliza el documento HTML: </HTML> Ejercicio I. Práctica Paso a Paso. Paso 1. Crea una carpeta en la unidad C llamada prácticas, crea dentro de este directorio una carpeta llamada practica1Ej1. Paso 2. Busca en el escritorio el siguiente icono o bien oprime el botón de inicio, elige la opción programas, busca el programa gel y da doble clic sobre la aplicación. Entorno de trabajo. 2 Paso 3. Para crear una página web, elige la opción a) file b)new c) html file archivo. d) Escribe un nombre al Paso 4. Una vez que el archivo tenga un nombre, aparecen las etiquetas o directivas básicas que tiene una página web. 3 Paso 5. Escriba entre las etiquetas <title> </title> lo siguiente: Practica 1. Escriba entre las etiquetas <body> </body> lo siguiente: ( Mi primera página Web ) Bienvenido al curso de Computación II en la U.A.C.M. Esta es mi primera página, es muy sencilla, pero como el lenguaje HTML es fácil, pronto estaré en condiciones de hacer cosas más interesantes. Paso 6. Guarde las modificaciones y visualice en el navegador de Internet Explorer el resultado. Escriba sus observaciones: Paso 7. Agrega a la práctica las etiquetas <BR> como se muestra a continuación. ( Mi primera página Web ) <BR><BR> Bienvenido al curso de Computación II en la U.A.C.M. <BR> Esta es mi primera página, es muy sencilla, pero como el lenguaje HTML es fácil, pronto estaré en condiciones de hacer cosas más interesantes. Escriba sus observaciones: Paso 8. Agrega a la práctica la etiqueta <HR> como se muestra a continuación. ( Mi primera página Web ) <HR> <BR><BR> Bienvenido al curso de Computación II en la U.A.C.M. <BR> Esta es mi primera página, es muy sencilla, pero como el lenguaje HTML es fácil, pronto estaré en condiciones de hacer cosas más interesantes. Paso 9. Agrega a la práctica la etiqueta <B> como se muestra a continuación. <B> ( Mi primera página Web ) </B> <HR> <BR><BR> Bienvenido al curso de Computación II en la U.A.C.M. <BR> 4 Esta es mi primera página, es muy sencilla, pero como el lenguaje HTML es fácil, pronto estaré en condiciones de hacer cosas más interesantes. Escriba sus observaciones: Paso 10. Agrega a la práctica la etiqueta <I> como se muestra a continuación. <B> ( Mi primera página Web ) </B> <HR> <BR><BR> <I>Bienvenido al curso de Computación II en la U.A.C.M.</I> <BR> Esta es mi primera página, es muy sencilla, pero como el lenguaje HTML es fácil, pronto estaré en condiciones de hacer cosas más interesantes. Escriba sus observaciones: Ejercicio II. Retroalimentación 1. ¿Para qué utilizas la etiqueta <HTML>? 2. ¿Para qué utilizas la etiqueta <HEAD>? 3. ¿Para qué utilizas la etiqueta <BODY>? 4. ¿Para qué utilizas la etiqueta <TITLE>? 5. ¿Qué indica la diagonal antes del nombre de una etiqueta? 6. ¿Para qué utilizas la etiqueta <BR>? 7. ¿Para qué utilizas la etiqueta <HR>? 8. ¿Para qué utilizas la etiqueta <B>? 9. ¿Para qué utilizas la etiqueta <I>? 5 Ejercicio III. Investigación. 1. 2. 3. 4. 5. ¿Para qué se utiliza la etiqueta <FONT SIZE> y como se marca el fin de la etiqueta? ¿Con qué etiqueta se cambia el color al texto? ¿Qué etiqueta se utiliza para los párrafos? ¿Indica para que se utilizan los atributos size y width en la etiqueta <HR>? ¿Cómo son codificados los colores en HTML, es decir cuantos dígitos tienen y en que están escritos? Ejercicio IV. Ejercicio Propuesto. Instrucciones 1. En la carpeta de la unidad C llamada prácticas y dentro del subdirectorio practica1, crea una nueva página web llamada Practica1Ej4.html 2. En la barra de título del navegador deberá mostrarse la leyenda UACM 3. Como parte del texto a ser visualizado en la página web, en la parte superior con letra negrita escriba Universidad Autónoma de la Ciudad de México. 4. Separe con 3 saltos de línea sus datos personales. 5. Escriba sus datos personales: Nombre, Boleta, Carrera. Estos datos deberán ser mostrados con letra cursiva. 6. Imprima un separador y posteriormente escriba en 3 líneas que es lo que le gusta más de su carrera. 6