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º 1 Nombre de la practica: Introducción al 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 claridad en el proceso a seguir para visualizar un documento HTML a través de un navegador. 2. Identificar la estructura básica de un documento web. II. Introducción Teórica Qué es HTML? HTML son las siglas de HyperText Markup Language, que significa, en español, Lenguaje de Marcas de Hipertexto. El concepto de hipertexto apareció por 1965, basado en la idea general de unos elementos de texto especiales dentro de un documento que permitieran enlazar con otra parte de ese mismo documento, o con otro documento diferente. La idea original era poder transferir y compartir recursos a través de Internet. Esto implicaba nuevas formas de comunicación entre equipos informáticos, y así, la CERN (Consejo Europeo para la Investigación Nuclear), junto con otras instituciones, implementaron la tecnología de base para que esto fuera posible. Lo primero fue el protocolo de red específico, que se denominó http (HyperText Transfer Protocol), que permitiría transferir de forma adecuada los diferentes documentos de hipertexto. Lo segundo, fue desarrollar un mecanismo de identificación de los recursos, esto se plasmó en lo que hoy conocemos como URL (Uniform Resource Lacator), o Identificador Uniforme de Recursos. Este URL indica tanto la localización exacta del recurso, así como, el protocolo necesario para su transferencia. La forma genérica de una URL es la siguiente: Protocolo:// Un ejemplo concreto sería: 1

2 Estructura básica de un documento 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, t arget, 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 2

3 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: 3

4 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. 1. Etiquetas de cabecera Se le llama cabecera de un documento web a todo el texto y código que se encierra entre las etiquetas del elemento <HEAD> y </HEAD>. El contenido de la cabecera no es visible en la ventana del navegador y puede contener los siguientes elementos: Título de la página usando el elemento TITLE Lo que se coloca entre las etiquetas <TITLE></TITLE> (ambas obligatorias) aparece en la barra de título de la ventana del navegador que utilicemos. Ejemplo: <TITLE>Mi primera página web</title> El elemento TITLE debería ser utilizado para identificar los contenidos de un documento usando títulos ricos en contexto. Por ejemplo, en lugar de usar un título como Introducción, debería usarse uno como Introducción a la apicultura medieval. Elemento LINK Un elemento LINK se utiliza para definir vínculos o relaciones concretas entre el documento actual y otros documentos o archivos relacionados con el actual. Ejemplo: <LINK rel= stylesheet type= text/css href= css/estilos.css > La línea anterior indica que el archivo estilos.css, ubicado en la carpeta css/, será un archivo de estilos externo para la página actual. Elemento META Este elemento proporciona información complementaria sobre el documento web, a veces se dice que es información acerca de la información, como propiedades propias del documento. Por ejemplo, el autor, la fecha de caducidad, el tema del documento, palabras clave dentro del documento, etc También, se utiliza para asignar valores a esas propiedades. Existen dos tipos diferentes de etiquetas META, que son: Del tipo META http-equiv, que pueden servir para dar información a los robots de los motores de búsqueda de Internet (google, altavista, yahoo, etc), para enviar una serie de cabeceras http al navegador del usuario. La utilidad de este tipo de etiqueta META es el control de la caché de los navegadores y la extracción del cliente (hacer que una página se cargue después de un cierto período de tiempo). Del tipo META name, utilizadas para complementar la información para los robots de los buscadores o para el contenido del documento. Ejemplos: <META http-equiv="content-type" content="text/html; charset=iso "> <META http-equiv="cache-control" content="no-cache"> <META http-equiv="refresh" content="10;url=otrapagina.html"> <META name="author" content="universidad Don Bosco"> <META name="description" content="institución Educativa Acreditada en ES"> 4

5 <META name="keywords" content="carreras, campus, maestrías, laboratorios, biblioteca, horarios, aulas, aspectos administrativos"> 2. Etiquetas del cuerpo El cuerpo de un documento HTML comprende todo el código situado entre las etiquetas <BODY> y </BODY>. Su contenido es visible en la ventana del navegador y puede contener diversos elementos. Entre ellos están: Elementos estándares HTML: párrafos, listas, tablas, formularios, etc. Capas definidas mediante etiquetas <DIV>... </DIV>, o <SPAN>... </SPAN> Código de lenguajes en servidor: JSP, Java, ASP, PHP, etc. Objetos incrustados: applets, animaciones de flash, etc. Existen ciertas etiquetas que poseen atributos o parámetros que modifican la forma en que actuará la etiqueta cuando sea interpretada por el navegador. Ejemplo de utilización de atributos en el elemento BODY <body background="nubes.png" bgproperties="fixed" > <p>el sitio web de la Universidad Don Bosco lo puede encontrar haciendo clic en Todo lo relacionado con la universidad lo puedes encontrar en este sitio web. </p> </body> NOTA IMPORTANTE: Los atributos de la etiqueta BODY relacionados con la presentación han sido desaprobados en favor de las hojas de estilo (CSS). Líneas, saltos de línea y párrafos. En HTML se pueden dibujar líneas horizontales en las páginas. Para ello se utilizar la etiqueta <HR>. Para producir un cambio de línea en el texto que se escribe en el documento HTML, no basta con presionar ENTER, hay que colocar una etiqueta especial para producir ese efecto. Eso significa que un texto como el siguiente: Está en su primera práctica de lenguaje HTML. Empezará creando páginas sencillas, con puro texto plano. Más adelante comenzará a utilizar listas, tablas, formularios, etc. Se mostraría en una sola línea si el ancho de la ventana del navegador lo permite. Si se lleva más de una es porque el largo de las tres líneas es mayor al ancho de la ventana del navegador. La etiqueta que debe utilizar para que en la página web se vea el texto, tal y como se escribió en el documento HTML es utilizar la etiqueta <BR> al final de cada línea. El resultado de hacerlo sería: Está en su primera práctica de lenguaje HTML. <BR> Empezará creando páginas sencillas, con puro texto plano. <BR> Más adelante comenzará a utilizar listas, tablas, formularios, etc. <BR> Si se desea separar el texto de una página web en párrafos, para una mejor presentación, se puede utilizar la etiqueta <P>, que puede usarse sin etiqueta de cierre, pero es más entendible el código HTML, 5

6 cuando se incluyen etiquetas de cierre de párrafo, </P>. Veamos el siguiente segmento de código como ejemplo: <P> La comprensión psicológica del miedo experimentado como consecuencia de las experiencias represivas requiere ser ubicado en el contexto de la situación específica y referido a los distintos niveles de comprensión de los procesos psicológicos como tales. </P> <P> Así, se observa que el miedo puede provocar conductas específicas que pueden ser descritas como procesos adaptativos como algo que se anticipa como un desastre, o como una catástrofe personal, inminente e imprevista. </P> Etiquetas de cabeceras o títulos. Este tipo de etiquetas se suelen utilizar para los títulos en el texto de las páginas. Existen en total seis etiquetas para este propósito. Estas se muestran en la siguiente tabla: Etiqueta <H1>... </H1> <H2>... </H2> <H3>... </H3> <H4>... </H4> <H5>... </H5> <H6>... </H6> Resultado Cabecera de nivel 1 Cabecera de nivel 2 Cabecera de nivel 3 Cabecera de nivel 4 Cabecera de nivel 5 Cabecera de nivel 6 Colocar comentarios <!-- -->: Comentarios. Son etiquetas que nunca se mostrarán a través del navegador y que le servirán para recordatorios en futuras revisiones del documento. 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. 6

7 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, &#x000c;) Espacio de anchura cero ( ) El salto de línea (<br> o <br />) Funcionamiento de los navegadores La comunicación entre el servidor web y el navegador se realiza mediante el protocolo HTTP, aunque la mayoría de los navegadores soportan otros protocolos como FTP, Gopher, y HTTPS (una versión cifrada de HTTP basada en Secure Socket Layer o Capa de Conexión Segura (SSL)). La función principal del navegador es descargar documentos Web y mostrarlos en pantalla. En la actualidad, no solamente descargan este tipo de documentos sino que muestran con el documento sus imágenes, sonidos e incluso videos en diferentes formatos y protocolos. Además, permiten almacenar la información en el disco de las páginas más visitadas. Ejemplo de navegadores: Internet Explorer Mozilla Firefox Safari Google Chrome III. Requerimientos Nº Cantidad Descripción 1 1 PC con Windows XP con uno de los editores de páginas Web: Microsoft WebMatrix, 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 7

8 IV. Procedimiento Ejercicio 1. Crear el primer documento HTML 1. Cuando cargue el sistema operativo, crear una carpeta en Mis Documentos con el nombre: NºCarnet_Guia1, Nota: Cambiar NºCarnet por su número de carnet de la Universidad. 2. Cuando haya creado la carpeta, dar clic en el botón inicio de Windows. 3. Ir a todos los programas y hacer clic en Microsoft WebMatrix. 4. Dar clic en abrir y seleccionar la opción carpeta, en el cuadro de dialogo buscar la carpeta que acaba de crear en mis documentos y dar clic en seleccionar. 5. Hacer clic en Crear un nuevo archivo. 6. Seleccionar archivo tipo HTML e ingresar el nombre: Primera_Pagina.html, como se muestra en la siguiente figura: 7. Se nos creara un documento con una plantilla HTML5 predeterminada. 8. Modificar el documento con el siguiente codigo: 8

9 9. Probaremos nuestra aplicación, dando clic Ejecutar. 10. Aplicaremos estilo a nuestra página, dando click nuevo y seleccionaremos tipo de archivo css con el nombre estilo.css. 11. En ese nuevo documento haremos el siguiente código: 9

10 12. En el html, dentro de la etiqueta head agregaremos el siguiente código. <link href="estilo.css" rel="stylesheet" type="text/css"> 1. Probaremos nuestra aplicación, dando clic Ejecutar. Ejercicio 3. Creación de segunda página HTML 1. Hacer clic en nuevo. 2. Seleccionar archivo tipo HTML e ingresar el nombre: Los_Pagina.html 10

11 Ejercicio 2. Visualizar una página Web en el navegador Internet Explorer desde la opción Archivo. Ir a inicio 1. Hacer doble clic en Internet Explorer 2. Hacer clic en Archivo, después hacer clic en Abrir se activara la siguiente ventana: 3. Hacer clic en Examinar y buscar en la carpeta que creo al inicio de la práctica y seleccionar el archivo Primera_Pagina.html y hacer clic en Abrir. 4. Hacer clic en Aceptar y observara que se abre su página Web. Ejercicio 3. Visualizar una página Web en el navegador desde la opción Abrir con 1. Abrir la carpeta donde tiene su página Web 2. Seleccionar el archivo y hacer clic derecho para visualizar el menú contextual 3. Del menú seleccione la opción Abrir con 4. De la lista puede seleccionar los navegadores: Internet Explorer, Firefox, Google Chrome o cualquier otro navegador. 5. Visualizara su página Web en el navegador seleccionado. Recomendaciones: Para comenzar a trabajar y no tiene instalado el editor de páginas Web que se está utilizando en la práctica puede utilizar el bloc de notas (notepad), pero si quiere trabajar con el mismo editor puede descargarlo de la siguiente dirección: O también puede descargar el editor HTML Kit de esta dirección: Debe guardar todos los archivos en una sola carpeta, para que no tenga problemas a la hora de trabajar con ellos. Cuando guarde el documento Web siempre digite la extensión.html Cuando realice cambios a un documento Web, y su página ya está cargada en un navegador solamente actualice el navegador y observara los nuevos cambios. 11

12 V. Ejercicio complementario 1. Realice una página web que contenga su información por ejemplo carnet, nombre completo, carrera que estudia y materias inscritas. 2. Realice una página web con la información de su programa de televisión favorito por ejemplo nombre del programa, personajes principales, tipo de programa (comedia, romance, documental, etc). El instructor evaluara el desempeño de su trabajo VI. Análisis de resultados 1. Qué es una etiqueta? 2. Qué es un atributo? 3. Cuál son las partes importantes de un Documento web? 4. Investigue y colocar en una página Web 5 ejemplos de etiqueta y atributo y explique cada uno 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 ISBN: HTML 5. Editorial Anaya Multimedia.1ra. Edición. Madrid, España. Autor: Alonso Álvarez García Biblioteca UDB Clasificación: Libro A473 - ISBN: