Práctica # 1 - 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.1LABORATORIODENOMBRE DE LAPRÁCTICALicenciado en Sistemas ComputacionalesDURACIÓN(HORA)Introducción al HTML, elementos básicos 21. INTRODUCCIÓNEs importante que el alumno de la carrera de Licenciado en Sistemas Computacionales cuente conlas bases necesarias para poder leer el contenido de una página web, para posteriormente poderhacer las modificaciones pertinentes y proponer una mejora en algún sitio web.2. OBJETIVO (COMPETENCIA)El alumno elaborará una página web sencilla utilizando el lenguaje html, para presentar lainformación en el internet con actitud analítica, de manera creativa.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. FUNDAMENTOHTML (Hipertext Markup Lenguage): Significa Lenguaje Marcado de Hipertexto, es decir,texto presentado de forma estructurada y agradable con enlaces (hyperlinks) a otras páginas uotras fuentes de información. Un documento HTML, es un archivo de texto plano; el cual puede sercreado y modificado en cualquier editor simple de texto como el vi, bloc de notas, wordpad, word,etc. El principio esencial del lenguaje HTML es el uso de etiquetas (tags), las cuales puedes serutilizadas en mayúsculas y/o minúsculas de forma indistinta.Código GC-N4-017 .Página 1 de 6Revisió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 CALIDAD¿Qué son las etiquetas (tags) y como funcionan?Las etiquetas son las instrucciones del lenguaje HTML, y deben ser acotadas por los signos de < y>. Y funcionan como las llaves en programación una que marca en inicio y otra de cierre, con ladiferencia que a la etiqueta decierre se le antepone a la instrucción el signo /.Ejemplo:etiqueta de inicioTexto afectadoetiqueta de cierreEstructura básica de una documento HTMLTodos los documentos HTML están divididos en dos zonas principales, el encabezado (head) y elcuerpo de la página (body).Todo documento HTML debe iniciar con las etiquetas HTML para decirle al navegar que es undocumento HTML y lo procese como tal.HEADBODYAfecta a la parte superior de la páginaAfecta a la parte inferior de la página dándole la estructura y contenidoCódigo GC-N4-017 .Página 2 de 6Revisió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 CALIDADEtiquetasde HEAD (Encabezado) y su descripciónEtiquetas Funcionalidad EjemploHEAD aquí van las otrasEstá etiqueta es contenedora de otras, queetiquetascontienen información del documento.TITLEH1 a H6Muestra el título del documento, el cual debe serbreve y descriptivo.En HTML existen 6 niveles de encabezado, loscuales se presentan en el documento condiferentes características de tamaño o ennegritas, lo cual los hace destacar del resto deltexto. Está etiqueta permite poner comentarios para eldiseñador de la página, y el usuario no lo puedevisualizar.Título de mi páginaPrimer nivel Segundo nivel Tercer nivel Cuarto nivel Quinto nivel Sexto nivel Etiquetas de BODY(Cuerpo) y su descripciónEtiquetas Funcionalidad EjemploBODYEstá etiqueta es contenedora de otras, quecontienen información que se presenta en lapágina así también el aspecto relacionado con laapariencia. aquí van las otrasetiquetas que modifican laapariencia y muestran elcontenido de la páginaHRPEs un separador horizontal. No lleva etiqueta decierre. Está etiqueta cuenta con atributos loscuales sirven para definir las características de lalínea:Size GrosorWidth Ancho de la línea dado en porcentajeAlign Alineación de la líneaColor Color de la línea.Está etiqueta crea párrafos dentro de una página,para no tener el texto de manera corrida en estáetiqueta el cierre es opcional.< BODY>Texto del nuevo párrafoCódigo GC-N4-017 .Página 3 de 6Revisió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 CALIDADBRBISe utiliza para separar un renglón, es como sifuera un enter de cualquier procesador depalabras. No tiene etiqueta de cierre.Está etiqueta da formato de letras negritas altexto.Está etiqueta da formato de letras itálico ocursivo. texto que seráseparadoTexto afectado Texto afectado U Está etiqueta da formato de letras subrayado. Texto afectado EMEtiqueta que modifica el texto, ya tiene un formato Texto afectadodefinidoSTRONG Etiqueta que modifica el texto, ya tiene un formatodefinido Textoafectado CITEEtiqueta que modifica el texto, ya tiene un formatodefinido Texto afectadoSAMPEtiqueta que modifica el texto, ya tiene un formatodefinido Texto afectadoPREEl texto que se encuentre entre ella estarápreformateado, es decir que aparecerá como sihubiera sido escrito con una máquina de escribir,con una fuente de espaciado fijo (tipo Courier).Además se respetarán los espacios en blanco yretornos del carro, tal como estaban en nuestrodocumento HTML (lo cual no ocurrenormalmente, como hemos visto anteriormente).Es muy apropiada para confeccionar tablas yotros documentos similares. Texto afectado yacon formato espaciadoSUBSUPCENTERBLINKMARQUEEFONTEn las fórmulas matemáticas puede interesarpoder escribir índices.En las fórmulas matemáticas puede interesarpoder escribir subíndices.Está etiqueta permite centrar la información en lapantalla.Con está etiqueta aparece el texto intermitente enla pantalla, aunque no todos los navegadores lasoportan.El texto aparecerá desplegándose de un lado aotro de la pantalla.Está etiqueta define un formato especifico al textocomo en cualquier procesador de palabras. Susv x se consigue con:vxm 2 se consigue de lasiguiente manera:m2 información acentrar Texto afectado Textoafectado

Formato para prácticas de laboratorioFecha de efectividad: __________________UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIAFACULTAD DE INGENIERÍA (UNIDAD MEXICALI)DOCUMENTO DEL SISTEMA DE CALIDADatributos son:Color Define el color de la fuenteFace Define el tipo de letraSize Define el tamaño de la fuenteCOLOR=red>TextoafectadoAtributos de BODY (Cuerpo) y su descripciónEtiquetas Funcionalidad EjemploBGCOLOR Está no es una etiqueta, sino un atributo es decirse integra dentro de la etiqueta de body, y agregacolor de fondo a la página, solo hay que igualar elcolor en inglés o su correspondiente valor enhexadecimal.TEXTBACKGROUNDEs atributo pone color al texto que contendrá todala página, y se usa igual que el anterior.Agrega una imagen de fondo a nuestra página,solo colocando la ruta y la extensión.TextonormalBGCOLOR= “#FFDD99”>Textonormal.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. Construya un página con fondo color #3D6C3D2. Agregue una etiqueta de título que diga Primera practica HTML3. Con la etiqueta de encabezado nivel 1 agregue el nombre su nombre completo el cualdeberá estar centrado.4. En la línea de bajo escriba el nombre de la unidad de aprendizaje con la etiqueta deencabezado nivel 3 y centrado.Código GC-N4-017 .Página 5 de 6Revisió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 CALIDAD5. En el área del body escribe otro párrafo con el texto Aquí aprenderé a leer y utilizar lasetiquetas del lenguaje HTML con letra Elephant, está vez deberá modificar el color #C3E08C, y tamaño 6, centrado.6. Agrega otro párrafo con 2 títulos subrayados y negritos que digan:Etiquetas de HEAD:Etiquetas de BODY:7. En cada uno de los textos deberás agregar por lo menos 3 etiquetas relacionadas con cadapunto, en forma de lista hacia abajo, con la letra negra y tamaño 4.8. Agregue una línea horizontal del 60% de ancho y con un grosor de 5, centrada, color#C3E08C9. En una marquesina escriba: “Espero te haya gustado HTML” con un color #66ffcc, letraBroadway, y tamaño 4.10. Después ponga el texto “Solo es un acercamiento, aun hay más” en una etiqueta de blink,centrada y con las mismas características del texto anterior.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 6 de 6Revisión 1 .