Práctica # 2 - Licenciado en Sistemas Computacionales ...

Formato para prácticas de laboratorioFecha de efectividad: __________________UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIAFACULTAD DE INGENIERÍA (UNIDAD MEXICALI)DOCUMENTO DEL SISTEMA DE CALIDADCARRERAPLAN DEESTUDIOCLAVEASIGNATURALSC 2009-2 12008NOMBRE DE LA ASIGNATURATemas Selectos de SistemasComputacionalesPRÁCTICANo.2LABORATORIODENOMBRE DE LAPRÁCTICALicenciado en Sistemas ComputacionalesDURACIÓN(HORA)HTML, Listas, hipervínculos e imágenes 21. INTRODUCCIÓNEn el diseño de páginas web en muy importante la integración, de imágenes, el uso dehipervínculos y listas, ya que esto permite una presentación más clara y descriptiva de lainformación que se presenta, así mismo nos da la pauta para poder vincularnos a otras fuentes deinformación.2. OBJETIVO (COMPETENCIA)El alumno integrará listas, imágenes, e hipervínculos, utilizando las etiquetas de html, paraestructurar la información de manera adecuada, con perseverancia, de manera pertinente.FormulóM.C. MónicaCristina Lam MoraRevisóM.C. Mónica CristinaLam MoraAprobóAutorizóM.C. Maximiliano DeLas Fuentes LaraMaestroCoordinador de laCarreraGestión de la CalidadDirector de la Facultad3. FUNDAMENTOListasLas listas son elementos muy importantes ya que nos ayudan a organizar varios objetos o ideascon una buena presentación, ya que las viñetas se alinean con un margen. Estas listas generanviñetas de diferentes tipos, muy parecidas a las que se utilizan en Word:Código GC-N4-017 .Página 1 de 9Revisión 1 .

Formato para prácticas de laboratorioFecha de efectividad: __________________UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIAFACULTAD DE INGENIERÍA (UNIDAD MEXICALI)DOCUMENTO DEL SISTEMA DE CALIDADExistenvarios tipos de listas:Listas desordenadas.Listas ordenadasListas de definiciónEtiquetasde UL(Lista Desordenada)y su descripciónEtiquetas Funcionalidad EjemploUL aquí van las otrasCon esta etiqueta damos inicio a las listasetiquetasdesordenadas (unorderedlists).LIDentro del bloque de la lista cada elemento debede llevar la directiva (listitem) que significaelemento de lista.Atributo de ULPrimer elementoSegundoelementoTercer elementoEstás viñetas pueden modificar su apariencia al aplicar diferentes valores al atributo “TYPE”.Atributo Valor EjemploTYPEsquareTYPEcircleTYPEdiscEtiquetas de OL (Lista Ordenada) y su descripciónEstas listas generan una numeración automática, (Números arábigos, romanos, o letras)Código GC-N4-017 .Página 2 de 9Revisión 1 .

Formato para prácticas de laboratorioFecha de efectividad: __________________UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIAFACULTAD DE INGENIERÍA (UNIDAD MEXICALI)DOCUMENTO DEL SISTEMA DE CALIDADEtiquetas Funcionalidad EjemploOL aquí van las otrasCon esta etiqueta damos inicio a las listasetiquetasordenadas (orderedlists).LIDentro del bloque de la lista cada elemento debede llevar la directiva (listitem) que significaelemento de lista.Atributos de OLPrimer elementoSegundoelementoTercer elementoEstás listas pueden modificar su apariencia al aplicar diferentes valores a los atributos.Atributo Valor Resultado EjemploTYPEGenera una lista con 1números arábigos. TYPELa lista se enumerará acon letras de a-z en minúsculas.TYPELa lista se enumerará Acon letras de A-Z en mayúsculas.TYPEGenera una lista con inúmeros romanos minúsculos.TYPEGenera una lista con Inúmeros romanos mayúsculos.STARTSeutiliza para indicar el tener la lista numerada. Por defecto es 1.Código GC-N4-017 .Página 3 de 9Revisión 1 .

Formato para prácticas de laboratorioFecha de efectividad: __________________UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIAFACULTAD DE INGENIERÍA (UNIDAD MEXICALI)DOCUMENTO DEL SISTEMA DE CALIDADEtiquetas de la Lista de Definición y su descripciónEtiquetas Funcionalidad EjemploDLLas listas de definición, como su nombre indica, aquí van las otrasson apropiadas para glosarios (o definiciones de etiquetastérminos). Toda la lista debe ir englobada entre las etiquetas y . Y a diferencia de lasdos que hemos visto, cada renglón de la listatiene dos partes:DTDD1) La palabra a definir.2) la definición de dicha palabra.Permite poner la palabra la cual vamos a definir(definitionterm)Permite integrar el texto que aparecerá como ladefinición de la palabra.palabra a definirpalabra a definirTexto de la palabra adefinir.otra palabra a definirTexto de la otrapalabra a definir.ImágenesLas imágenes son igual de importante que el texto, tanto para decorar una página como para darleformato. Los tipos de archivo que se recomiendan para el uso en páginas web son jpg, gif, y png,ya que estos son archivos comprimidos de muy buena calidad y no ocupan tanto espacio como unbmp.Código GC-N4-017 .Página 4 de 9Revisión 1 .

Formato para prácticas de laboratorioFecha de efectividad: __________________UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIAFACULTAD DE INGENIERÍA (UNIDAD MEXICALI)DOCUMENTO DEL SISTEMA DE CALIDADBorderUn numeroCon BORDER especificamos elancho de un borde que rodea laimagenHipervínculos (enlaces)Un hipervínculo es un vínculo de una página Web o un archivo a otra página Web. Cuando unvisitante hace clic en el hipervínculo, el destino se mostrará en un explorador Web, se abrirá o seejecutará, en función del tipo de destino. El destino es con frecuencia otra página Web, perotambién puede ser una imagen, un archivo multimedia, un documento de Microsoft Office, unadirección de correo, etc.Vamos a distinguir cuatro tipos de enlaces:Tipos de enlaces1. Enlaces con otra página nuestra2. Enlaces con una página fuera de nuestro sistema3. Enlaces con una dirección de email4. Enlaces dentro de la misma página1. Enlaces con otra página nuestraPuede ser que tengamos una sola página. Pero lo más frecuente es que tengamos variaspáginas, una inicial (o principal) y otras conectadas a ella, e incluso entre ellas mismas.Etiqueta de A (enlace) y su descripciónEtiqueta Funcionalidad EjemploACon esta etiqueta podemos empezar acrear un enlace, la palabra HREF marca lareferencia de la página que deseamosvisitar, dando entre comillas poniendo elnombre de archivo, su extensión y la ruta,si es necesaria. Deberá integrar también elMi SegundaPráctica

Formato para prácticas de laboratorioFecha de efectividad: __________________UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIAFACULTAD DE INGENIERÍA (UNIDAD MEXICALI)DOCUMENTO DEL SISTEMA DE CALIDADtexto el cual será el enlace que aparece ennuestra página web.2. Enlaces con una página fuera de nuestro sistemaSi queremos enlazar con una página que esté fuera de nuestro sistema (es decir, que esté en unservidor distinto al que soporta nuestra página), es necesario conocer su dirección completa, oURL (UniformResourceLocator). El URL podría ser, además de la dirección de una página delWeb, una dirección de ftp, gopher, etc.Una vez conocida la dirección (o URL), lo colocamos en vez de lo que hemos llamadoanteriormente segunda.html (el destino del enlace). Si queremos enlazar con la página de Google(cuyo URL es: http://www.google.com.mx/), la etiqueta sería: Página inicial de Google3. Enlaces con una dirección de emailEn este caso, sustituimos lo que se ha llamado segunda.html (el destino del enlace) por mailto:seguido de la dirección de email. La estructura de la etiqueta es: Texto del enlace Un ejemplo de esto está al final de la página principal de este manual. Podría haber puesto:Comentarios a Mándame un correo4. Enlaces dentro de la misma páginaA veces, en el caso de documentos (o páginas) muy extensos, nos puede interesar dar un saltodesde una posición determinada otra.En este caso, lo que antes hemos llamado segunda.html, es decir, el destino del enlace, en estecaso el sitio dentro de la página a donde queremos saltar, se sustituye por #marca (la palabramarca puede ser cualquier palabra que queramos). Además debemos integrar el texto queaparecerán en la pantalla en color (en forma de hipertexto).Código GC-N4-017 .Página 7 de 9Revisión 1 .

Formato para prácticas de laboratorioFecha de efectividad: __________________UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIAFACULTAD DE INGENIERÍA (UNIDAD MEXICALI)DOCUMENTO DEL SISTEMA DE CALIDADSu estructura es, entonces:Texto del enlaceY en el sitio exacto a donde queremos saltar, debemos poner la siguiente etiqueta:Por ejemplo, si quiero saltar desde aquí a la pantalla final, pongo la siguiente etiqueta: Pulsa para ir al finalY en el final del documento he puesto esta otra etiqueta:Agregar imagen como link 4. PROCEDIMIENTO (DESCRIPCIÓN)A) EQUIPO NECESARIO MATERIAL DE APOYOComputadora con cualquier procesador de palabrasPrácticainstalado o block de notas.B) DESARROLLO DE LA PRÁCTICA1. Elabore una página web donde integre el fondo de color #508299.2. Agregue un nivel de encabezado 1 que diga Trabajando con imágenes e hipervínculos.3. Ahora en el siguiente renglón agregue un nivel de encabezado 2 que diga Las Olimpiadas2012.4. Al centro de la pantalla inserte una imagen del logo de las Olimpiadas 2012, la cual deberáser una liga al sitio oficial de las olimpiadas.5. Ahora en la siguiente línea agregue un título color blanco, únicamente este texto seráblanco, con tipo de letra Bodoni MT Black, tamaño 5, que diga Los deportistas másdestacados del mundo se encuentran representados aquí.6. Más debajo de la pantalla pero centrado, agregue el titulo Las deportistas con más medallasolímpicas.Código GC-N4-017 .Página 8 de 9Revisión 1 .

Formato para prácticas de laboratorioFecha de efectividad: __________________UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIAFACULTAD DE INGENIERÍA (UNIDAD MEXICALI)DOCUMENTO DEL SISTEMA DE CALIDAD7. Ahora al centro de la pantalla agregue las 3 imágenes que tengan que ver con este punto,con un tamaño de 200.8. Abra una lista desordenada donde agregué los nombre de los deportistas que agregó en lasfotos anteriores.9. Escriba nuevamente otro título centrado que diga Los deportistas mexicanos con medallasolímpicas en Londres 201210. Seleccione 3 medallistas mexicanos y al centro de la pantalla agregue las 3 imágenes, conun tamaño de 200, y con bordo de tamaño 6.11. Agregue otra viñeta desordenada que tipo cuadro que diga Medallas de oro, plata y broncerespectivamente.12. Ahora en una lista ordenada agregue los nombres relacionados con cada categoría.13. Nuevamente agregue un titulo que esta vez diga, Estos son algunos de los deportespresentados en las olimpidas de Londres 2012.14. Ahora con las mismas características de las imágenes anteriores acomode las cuatrodisciplinas de las olimpiadas que usted bajo para su práctica.15. Finalmente agregue una lista ordenada pero esta vez de tipo alfabética con los nombres delas disciplinas que acomodo en las imágenes anteriores.C) CÁLCULOS Y REPORTEPreguntas sobre la práctica de forma INDIVIDUAL, que hará el maestro al finalizar la práctica a cadaalumno.5. RESULTADOS Y CONCLUSIONESLos resultados serán solo a nivel de visualización, no serán impresos, estos podrán variardependiendo de los datos de entrada que el alumno introduzca.6. ANEXOS7. REFERENCIASCódigo GC-N4-017 .Página 9 de 9Revisión 1 .