UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION

Transcripción

1 CICLO UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION GUIA DE LABORATORIO Nº 2 Nombre de la practica: Fundamentos del Lenguaje HTML 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 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.

2 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.

3 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> contenido 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.

4 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 ( o ) 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: (c) 2011 Nuestra empresa. Nuestra empresa no se hace responsable de los comentarios realizados en nuestro blog. Siendo estos, responsabilidad de quien lo realiza 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

5 ú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: visitanos <s>dirección antigua: Avda. de las Acacias, 22</s> nueva dirección: Avda. de las Acacias, 666 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 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

6 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 ( ) 2 1 Guía de Laboratorio #1 de Introducción a Internet 3 1 Memoria USB IV. Procedimiento Ejercicio 1 1. Cree un nuevo archivo en Notepad++ 2. Digitar el siguiente texto:

7

8 3. Guarde el documento con el nombre reflexión.html, siempre en la misma carpeta. 4. Visualizar la página en el navegador Ejercicio 2 1. Cree un nuevo archivo en Notepad++ 2. Digitar el siguiente texto: 3. Guarde el documento con el nombre cincosentidos.html, siempre en la misma carpeta. 4. Visualizar la página en el navegador.

9 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. 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 2+ Hg Catión amonio. O 2 Peróxido. MnO 4 Manganato Catión mercurioso. MnO 4 Permanganato S 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 L913 2.HTML 5. Editorial Anaya Multimedia.1ra. Edición. Madrid, España. Autor: Alonso Álvarez García Biblioteca UDB Clasificación: Libro A473