CICLO 01-2014 UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION GUIA DE LABORATORIO Nº 2 Nombre de la practica: Introducción a las hojas de estilo Lugar de ejecución: Laboratorio de Informática Tiempo estimado: 3 horas Materia: Introducción a Internet I. Objetivos Que el estudiante sea capaz de: 1. Tener la capacidad de crear un documento HTML con la estructura básica. 2. Demostrar la capacidad para crear documentos HTML en editores de textos básicos. II. Introducción Teórica HTML5 es la evolución natural de HTML4, que considera el rápido crecimiento de los medios de comunicación, experiencias ricas en línea, y aplicaciones sofisticadas Web desarrolladas desde que HTML 4.01 se convirtió en un estándar a finales de 1999. HTML5 está todavía bajo desarrollo y sujeto a cambio. Sin embargo, es una base firme, y los navegadores ya han agregado varias de sus características. ELEMENTOS HTML EN UN DOCUMENTO WEB Elementos (X)HTML Puede pensar en los elementos (X)HTML como todo aquello que puede estar presente en un documento web. Por ejemplo: encabezados, párrafos, listas, tablas, imágenes, formularios, etc. De forma más técnica, se puede decir que un elemento es un bloque de contenido que se puede utilizar para estructurar contenido en una página web. Los elementos HTML tienen una estructura fácil de reconocer, se componen de una etiqueta de apertura, que puede contener atributos y sus respectivos valores, el contenido que afectan o delimitan y una etiqueta de cierre. Existen algunos elementos, conocidos como elementos vacíos que únicamente poseen la etiqueta de apertura, y posiblemente atributos con sus valores. Una etiqueta es a nivel del código una marca dentro del documento que delimita el inicio o el fin de un elemento, incluso para los elementos vacíos. El navegador (un posible agente de usuario) interpreta estas marcas para producir el resultado visual en una ventana que es la que los usuarios pueden ver.
Las etiquetas, además del nombre de la etiqueta, pueden contener atributos y sus respectivos valores. Estructura de un elemento HTML A continuación se muestra la estructura de un elemento con contenido: A continuación se muestra la estructura de un elemento HTML sin contenido o elemento vacío: Especificación del idioma del contenido Este aspecto de los documentos Web tiene que ver con la internacionalización del lenguaje HTML. Se utilizan dos atributos en particular para la especificación del idioma del contenido en un documento Web. Estos atributos son lang y dir. El primero, especifica el idioma y el segundo indica la dirección del texto. El atributo lang se puede utilizar en una gran cantidad de elementos y especifica el idioma base de los valores de los atributos y del texto contenido en un elemento. La información sobre el idioma es utilizada por el navegador de varias formas para controlar la forma en que debe representar el contenido. La utilidad de especificar el idioma del contenido puede ser diversa. Entre estas se pueden mencionar: o Ayudar a los motores de búsqueda.
o o o o Ayudar a los sintetizadores de voz Ayudar al agente de usuario a elegir variaciones de un signo para la tipografía Ayudar a las verificaciones de ortografía y gramática Ayudar al agente de usuario a hacer decisiones sobre separación de palabras y espaciado Para indicar el idioma del contenido a través del atributo lang debe agregar dicho atributo dentro de la etiqueta de apertura del elemento al que se va a afectar y a continuación colocar el valor correspondiente del lenguaje. Como se muestra: <body lang="es">todos los elementos</body> <a lang="en">header</a> <p lang="es">contenido</p> El valor asignado al atributo lang es un código de idioma que identifica al lenguaje natural hablado, escrito o usado para comunicación de información entre personas Algunos ejemplos de códigos de idioma son: en (inglés), es (español), fr (francés), de (alemán), it (italianao), pt (portugués), ru (ruso), en-us (variación estadounidense del inglés). Herencia de los códigos de idioma Los elementos heredan la información sobre los códigos de idioma en el siguiente orden de precedencia: Por el valor del atributo lang establecido para el propio elemento. El valor del atributo lang establecido para el elemento padre más cercano. El valor establecido para el atributo Content-Language de un elemento META, que puede configurarse en el servidor web que alojará la página. Elementos de citas Además del elemento CITE se pueden utilizar los elementos BLOCKQUOTE y Q. BLOCKQUOTE. Permite hacer referencia de citas largas, mostrando el contenido en bloque. Q. Se utiliza para citas cortas mostrando el contenido en línea (sin cambio de párrafo). Ambos elementos aceptan el uso del atributo cite que se puede utilizar para indicar el URL de la fuente original de la cita, si es que se encuentra en algún sitio de Internet. Elementos de estilo físico HTML y XHTML proporcionan un conjunto de nueve diferentes elementos para proporcionar texto con estilo físico al documento. Estos estilos son: negrita, cursiva, monoespaciado, subrayado, tachado, más grande, más pequeño, superíndice y subíndice. Todos los elementos HTML y XHTML para estilo físico poseen etiquetas de apertura y cierre. STRONG. Este elemento pone en letra negrita un carácter o fragmento de texto. EM. Se utiliza para indicar al navegador que el contenido afectado debe mostrarse en tipografía cursiva u oblicua. SMALL. Funciona de forma similar al elemento BIG, con la diferencia que éste muestra el contenido con letra más pequeña.
SUP. Muestra el contenido en forma de superíndice. Es útil para mostrar fórmulas matemáticas, estadísticas, etc. De forma apropiada. SUB. Muestra el contenido afectado en forma de subíndice para mostrar de forma apropiada ecuaciones, fórmulas matemáticas, físicas, químicas o estadísticas. Consideraciones especiales en un documento El espacio en blanco Existen diferentes tipos de caracteres especiales que se consideran espacios en blanco. Un espacio en blanco no es únicamente el carácter producido por la presión de la barra espaciadora. En HTML son definidos como espacios en blanco los siguientes caracteres: Espacio ASCII ( ) Tabulador ASCII ( ) Avance de página ASCII (form feed, ) Espacio de anchura cero ( ) El salto de línea (<br> o <br />) Presentación y Contenido (HTML 5) HTML 5 hace especial hincapié en separar presentación y contenido. Para ello convierte en obsoletos muchos elementos y atributos que todavía encontramos frecuentemente en gran parte de las páginas web. La gran mayoría de editores hacen uso y abuso de estos elementos. La gran mayoría de elementos empleados para la presentación se han eliminado de HTML 5, excepto el elemento style y el atributo style. Otros han cambiado su significado y ya no denotan la apariencia sino que definen el tipo de contenido que incluyen. Estos son los elementos obsoletos: Listado de elementos obsoletos basefont, big, center, font, s, strike, tt, u, frame, frameset, noframes, acronym, applet, dir, align, link, vlink, alink, bgcolor, height, width, scrolling, valign, hspace, vspace, cellpadding, cellspacing, border, target, longdes Elementos que cambian su significado small Desde ahora el elemento small se debe emplear para hacer referencia a condiciones legales, informaciones de copyright, exenciones de responsabilidad, etc.. Normalmente en España denominamos a eso como letra pequeña por lo que resultará muy sencillo para nosotros aplicarlo de forma correcta. Ejemplo: <small>(c) 2011 Nuestra empresa. Nuestra empresa no se hace responsable de los comentarios realizados en nuestro blog. Siendo estos, responsabilidad de quien lo realiza</small> b El elemento b se empleará cuando deseemos resaltar algún aspecto de un parrafo pero sin otorgarle importancia semántica al elemento resaltado. La norma indica que b debe usarse como
último recurso y emplear los encabezados (h1..h6), el elemento em, strong o mark en función del tipo de contenido a resaltar. i Emplearemos i cuando queramos indicar algun aspecto diferenciador en el parrafo actual. Por ejemplo: un nombre propio, una frase en otro idioma, una idea, un pensamiento. Al igual que b debe ser usado en último recurso cuando otros elementos como em o como dfn, por ejemplo, no encajen. s El elemento s indicará contenidos en un párrafo que ya no son relevantes y/o fiables. Por ejemplo: <p>visitanos</p> <p><s>dirección antigua: Avda. de las Acacias, 22</s></p> <p><strong>nueva dirección: Avda. de las Acacias, 666</strong></p> style Tanto el elemento style como el atributo style permanecen en la especificación. Si bien se desaconseja su uso y se recomienda utilizar las hojas de estilo siempre que sea posible, pueden existir situaciones específicas donde esto no sea posible o recomendable. Es en estas situaciones excepcionales donde podremos aplicar estilos a los elementos utilizando su atributo style. Marcado semántico y diseño de página Se pueden hacer todas las combinaciones que se quieran, pero hay que tener presente que si en la máquina cliente no está instalada una determinada fuente, ésta no se verá y en su lugar aparecerá la fuente por defecto del visualizador. No es interesante por tanto, definir tipos raros, que probablemente, no llegarán a verse nunca. Algunos elementos de HTML 4.01 en HTML 5.0 han quedado obsoletos, incluyendo elementos que trabajan directamente en la presentación del texto, como <font> y <center>, cuyos efectos son manejados por el CSS. El W3C obtuvo datos de miles de millones de páginas web existentes para descubrir los ID y nombres de clase que los desarrolladores ya estaban utilizando. Una vez que se descartó div1, div2, etc., tuvieron con una lista de elementos enriquecidos descriptivos que ya se estaban utilizando y esos fueron los que convirtieron en normas. Aquí están algunos de los nuevos elementos semánticos en HTML5: article aside figcaption figure footer header hgroup mark
nav section time Debido a la riqueza semántica, probablemente pueda adivinar lo que la mayoría de estos elementos hacen. Pero por si acaso, aquí va una visualización: Los Headers y footers resultan claros, mientras que nav crea una barra de menú o navegación. Puede utilizar sections y articles para agrupar su contenido. Por último, el elemento aside puede ser usado para contenido secundario, por ejemplo, una barra lateral de enlaces relacionados. III. Requerimientos Nº Cantidad Descripción 1 1 PC con Windows XP con uno de los editores de páginas Web: PHP Designer Personal, Notepad ++, BlueFish y HTML Kit y cualquiera de los navegadores siguiente: Internet Explorer 7 u 8, Firefox (última versión disponible), Google Chrome (última versión disponible), Opera (última versión disponible), Safari (última versión disponible), Netscape (9.0.0.6) 2 1 Guía de Laboratorio #1 de Introducción a Internet 3 1 Memoria USB
IV. Procedimiento Indicaciones Generales. 1. Crear una carpeta en mis documentos y colocar en el nombre N Carnet_Guia2, Nota: Cambiar N Carnet por su número de carnet brindado por la Universidad. 2. Crear una nueva carpeta dentro de la anterior y colocarle en el nombre css. 3. Descargar el editor de texto Sublime text, teniendo cuidado de saber si es de 32 o de 64 bits la arquitectura del sistema operativo en la computadora que estamos trabajando, luego descargarlo compatible con dicha arquitectura. Pueden descargar el setup o la versión portable. Descarga: http://www.sublimetext.com/2 4. Abrir el editor Sublime Text. 5. Trabajaremos con HTML no intrusivo, todos los estilos tienen que ser declarados en un archivo css y vincularlo al documento html. 6. Consultar al docente, la guía 1 o buscar en internet por cualquier duda. Ejercicio 1 1. Cree un nuevo archivo en Sublime Text dando click en file, new file. 2. Guardar el archivo en la carpeta creada con su carnet haciendo uso de Ctrl+s o dando click en file, save y colocarle en el nombre pensamientos.html 3. Estructura de la página web:
<title>: Pensamientos. <h1>: Bienvenidos a mi página web. <h2>: Tiempo de reflexión. <h3>: Pensamientos. <p>: 3 Párrafos de pensamientos reflexivos (texto a elegir por el estudiante). <small>: Copyright 2015. <h6> Desarrollado por: nombre del estudiante. Nota: Para todos los acentos de la página utilizar el código Ejemplo: para le a con tilde á para la e con tilde é para la ñ ñ 4. Crear un nuevo archivo y guardarlo en la carpeta css con el nombre style.css 5. Aplicar las reglas de estilo necesarias para lograr que la página se muestre de la siguiente forma: Color de fondo: negro. Color de la tipografía: blanco. header: centrado. h3: texto cursivo. section: tipo de tipografía Helvetica, tamaño de letra 12pt, texto justificado. footer: centrado. 6. Agregar la línea necesaria en el documento html para lograr vincular el archivo css y poder aplicar los estilos. 7. Visualizar la página web en el navegador.
Ejercicio 2 1. Crear un nuevo archivo en Sublime Text. 2. Guardar el archivo en la carpeta creada con su carnet y colocarle en el nombre sentidos.html 3. Crear la estructura y contenido del documento HTML tomando como base el ejercicio 1. (ver la página finalizada en el paso 8). 4. Agregar las siguientes etiquetas meta dentro del head. 5. Crear un nuevo archivo y guardarlo en la carpeta css con el nombre style2.css 6. Aplicar las reglas de estilo necesarias para lograr que la página se muestre de la siguiente forma: Color de fondo: Plateado. Tamaño de la tipografía: 12pt. header: Centrado hr: Todos los hr tienen que tener un ancho de 85% section: Tipo de tipografía Arial, Color de letra blue, ancho 85%, margen de 90px, texto justificado. footer: Centrado. 7. Agregar la línea necesaria en el documento html para lograr vincular el archivo css y poder aplicar los estilos. 8. Visualizar la página web en el navegador.
V. Ejercicio complementario Realice una página web que contenga información sobre su programa favorito ya sea serie, telenovela etc., la cual se creara con las etiquetas vistas en la práctica como por ejemplo: párrafos, colores de texto, color de fondo, saltos de líneas, etc. pero además debe colocar todos los elementos y /o atributos con los cuales puede aplicar el formato al texto de la página Web, como también debe colocar todos los códigos donde haya un carácter especial. Recordar que todo el estilo debe colocarse en un archivo css y vincularlo al documento html. El instructor evaluara el desempeño de su trabajo. VI. Análisis de resultados Para cada uno de los ejercicios debe mostrar la respuesta en una Página Web 1. Cómo colocaría las siguientes Nomenclaturas en una página Web? NH 4 + Catión amonio. O 2 2- Peróxido. MnO 4 2- Manganato. Hg 2 2+ Catión mercurioso. MnO 4 - Permanganato S 2 2- Disulfuro. Nota: Esta tarea es individual. Fecha de entrega: Próxima semana VII. Fuente de consulta 1. HTML 5 para desarrolladores Editorial Anaya Multimedia 1ra. Edición, Madrid, España. Autor: Joseph W. Lowery y Mark Fletcher Biblioteca UDB Clasificación: Libro 004.67 L913 2.HTML 5. Editorial Anaya Multimedia.1ra. Edición. Madrid, España. Autor: Alonso Álvarez García Biblioteca UDB Clasificación: Libro 004.67 A473