UNIVERSIDAD DON BOSCOFACULTAD DE ESTUDIOS TECNOLOGICOS

ESCUELA DE COMPUTACION

CICLO 01-2014

GUIA DE LABORATORIO N 1Nombre de la practica: Introduccin al lenguaje HTMLLugar de ejecucin: Laboratorio de InformticaTiempo estimado: 3 horasMateria: Introduccin a Internet

I. Objetivos

Que el estudiante sea capaz de:

1. Tener claridad en el proceso a seguir para visualizar un documento HTML a travs de unnavegador.

2. Identificar la estructura bsica de un documento web.

II. Introduccin Terica

Qu es HTML?HTML son las siglas de HyperText Markup Language, que significa, en espaol, Lenguaje de Marcas deHipertexto. El concepto de hipertexto apareci por 1965, basado en la idea general de unos elementosde texto especiales dentro de un documento que permitieran enlazar con otra parte de ese mismodocumento, o con otro documento diferente.

La idea original era poder transferir y compartir recursos a travs de Internet. Esto implicaba nuevasformas de comunicacin entre equipos informticos, y as, la CERN (Consejo Europeo para laInvestigacin Nuclear), junto con otras instituciones, implementaron la tecnologa de base para que estofuera posible. Lo primero fue el protocolo de red especfico, que se denomin http (HyperText TransferProtocol), que permitira transferir de forma adecuada los diferentes documentos de hipertexto. Losegundo, fue desarrollar un mecanismo de identificacin de los recursos, esto se plasm en lo que hoyconocemos como URL (Uniform Resource Lacator), o Identificador Uniforme de Recursos. Este URLindica tanto la localizacin exacta del recurso, as como, el protocolo necesario para su transferencia.La forma genrica de una URL es la siguiente:

Protocolo://www.servidor.dominio/carpeta/pgina.html

Un ejemplo concreto sera:

http://www.udb.edu.sv/biblioteca/catalogo.html

Estructura bsica de un documento HTMLUna etiqueta (o directiva) HTML es un comando codificado que se utiliza para indicar cmo se debemostrar una parte de una pgina web.

1

Dichas etiquetas pueden ser de dos tipos: Cerradas Abiertas

Las etiquetas cerradas son aquellas que tienen una palabra clave que indica el principio de la directiva yotra que indica el final. Ambas delimitadas por signos de menor (), con la diferencia que laque indica el final lleva el smbolo de barra (/) justo despus del smbolo de apertura (smbolo menor).La forma general sera la siguiente: ...

Las etiquetas abiertas constan de una sola palabra clave, encerrada siempre entre smbolos de menor(). La forma general de este tipo de etiqueta es:

NOTA: En el lenguaje HTML no se hace distincin entre maysculas y minsculas, esto significa que pudohaberse escrito y el resultado sera exactamente el mismo.La estructura bsica de una pgina web indica las etiquetas, que como mnimo, debera contener undocumento web. Dicha estructura bsica es mostrada en el siguiente cdigo HTML:

Indica el inicio del documento.Inicio de la cabecera.Inicio del ttulo del documento.Final del ttulo del documento.Final de la cabecera deldocumento.Inicio del cuerpo del documento.Final del cuerpo del documento.Final del documento.

SUGERENCIA: Usted puede guardar este archivo escribiendo primero las lneas anteriores en un editorsencillo, como el Bloc de notas, y luego guardando el archivo con el nombre estructurabasica.html (sinincluir las comillas). Esto le servir para no volver a escribir estas mismas lneas cada vez que quieracrear una pgina web nueva.

OBSERVACIN: Normalmente, las pginas web se hospedan en un servidor web. Nosotros durante estasprcticas trabajaremos localmente; es decir, en lugar de subir las pginas a un servidor lasalmacenaremos en el disco duro de la computadora que utilicemos. Luego para observar el resultado,abriremos el archivo HTML creado utilizando el comando Abrir del navegador situado en el menArchivo.

1. Etiquetas de definicin de tipo de documentoUn documento HTML, bien realizado, debera especificar qu versin de HTML se est utilizando.Adems de esto se debe establecer la definicin del tipo de documento (DTD). En el HTML 4.01 sepueden especificar tres DTDs, que se pueden introducir en el documento web realizando lasdeclaraciones que a continuacin se detallan:El DTD HTML 4.01 Estricto (Strict DTD) incluye todos los elementos y atributos que no han sidodesaprobados o que no aparecen en documentos con marcos.

Para los documentos que usen este DTD, utilice esta declaracin del tipo de documento:

2

El DTD HTML 4.01 Transicional (Transitional DTD) incluye todo lo que incluye el DTD estricto ms loselementos y atributos desaprobados (la mayora de los cuales estn relacionados con la presentacinvisual). Para los documentos que usen este DTD, utilice esta declaracin del tipo de documento:

El DTD HTML 4.01 para Documentos con Marcos (Frameset DTD) incluye todo lo que incluye el DTDTransicional ms los marcos. Para los documentos que usen este DTD, utilice esta declaracin del tipo dedocumento:

El URL que aparece en la declaracin del tipo de documento permite a los agentes de usuario(navegador) descargar el DTD y los conjuntos de entidades que sean necesarios.

Los siguientes URLs se refieren a los DTDs del HTML 4: strict.dtd DTD estricto (este es el valor establecido por defecto) loose.dtd DTD no estricto frameset.dtd DTD para los documentos con marcos (frames)

Las ltimas dos letras de la declaracin indican el idioma de la DTD. Para HTML, este es siempre ingls(EN).

2. Etiquetas de cabeceraSe le llama cabecera de un documento web a todo el texto y cdigo que se encierra entre las etiquetasdel elemento y .El contenido de la cabecera no es visible en la ventana del navegador y puede contener los siguienteselementos:

Ttulo de la pgina usando el elemento TITLELo que se coloca entre las etiquetas (ambas obligatorias) aparece en la barra de ttulode la ventana del navegador que utilicemos.Ejemplo: Mi primera pgina webEl elemento TITLE debera ser utilizado para identificar los contenidos de un documento usando ttulosricos en contexto. Por ejemplo, en lugar de usar un ttulo como Introduccin, debera usarse unocomo Introduccin a la apicultura medieval.

Elemento BASEEl elemento BASE permite establecer vnculos y referencias a recursos externos como imgenes,aplicaciones, programas o scripts de procesamiento de formularios, hojas de estilo, etc. Estos vnculos se

3

establecen mediante URLs que sirven para completar los URLs relativos que se utilicen dentro deldocumento web.Su utilidad prctica es especificar una carpeta en la que pueden estar colocadas todas las imgenes,vdeos o sonidos enlazados que sern utilizadas en nuestra pgina web. De esta forma, nos podemosevitar colocar rutas absolutas cuando queramos llamar a un archivo de imagen desde nuestra pgina.Otra utilidad de esta etiqueta es definir la ventana por defecto en la que se abrirn los enlacescontenidos en la pgina.Ejemplo:

Elemento LINKUn elemento LINK se utiliza para definir vnculos o relaciones concretas entre el documento actual yotros documentos o archivos relacionados con el actual.Ejemplo:

La lnea anterior indica que el archivo estilos.css, ubicado en la carpeta css/, ser un archivo de estilosexterno para la pgina actual.

Elemento METAEste elemento proporciona informacin complementaria sobre el documento web, a veces se dice quees informacin acerca de la informacin, como propiedades propias del documento. Por ejemplo, elautor, la fecha de caducidad, el tema del documento, palabras clave dentro del documento, etcTambin, 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 informacin a los robots de los motores debsqueda de Internet (google, altavista, yahoo, etc), para enviar una serie de cabeceras http alnavegador del usuario. La utilidad de este tipo de etiqueta META es el control de la cach de losnavegadores y la extraccin del cliente (hacer que una pgina se cargue despus de un cierto perodo detiempo).

Del tipo META name, utilizadas para complementar la informacin para los robots de los buscadores opara el contenido del documento.Ejemplos:

3. Etiquetas del cuerpoEl cuerpo de un documento HTML comprende todo el cdigo situado entre las etiquetas y. Su contenido es visible en la ventana del navegador y puede contener diversos elementos.Entre ellos estn:

Elementos estndares HTML: prrafos, listas, tablas, formularios, etc. Capas definidas mediante etiquetas ... , o ... Cdigo de lenguajes en servidor: JSP, Java, ASP, PHP, etc.

4

Objetos incrustados: applets, animaciones de flash, etc.

Existen ciertas etiquetas que poseen atributos o parmetros que modifican la forma en que actuar laetiqueta cuando sea interpretada por el navegador.

Ejemplo de utilizacin de atributos en el elemento BODY

El sitio web de la Universidad Don Bosco lo puede encontrar haciendo clic enhttp://www.udb.edu.sv. Todo lo relacionado con la universidad lo puedes encontrar en este sitioweb.

NOTA IMPORTANTE: Los atributos de la etiqueta BODY relacionados con la presentacin han sidodesaprobados en favor de las hojas de estilo (CSS).

Lneas, saltos de lnea y prrafos.En HTML se pueden dibujar lneas horizontales en las pginas. Para ello se utilizar la etiqueta .

Para producir un cambio de lnea en el texto que se escribe en el documento HTML, no basta conpresionar ENTER, hay que colocar una etiqueta especial para producir ese efecto. Eso significa que untexto como el siguiente:

Est en su primera prctica de lenguaje HTML.Empezar creando pginas sencillas, con puro texto plano.Ms adelante comenzar a utilizar listas, tablas, formularios, etc.

Se mostrara en una sola lnea si el ancho de la ventana del navegador lo permite. Si se lleva ms de unaes porque el largo de las tres lneas es mayor al ancho de la ventana del navegador.La etiqueta que debe utilizar para que en la pgina web se vea el texto, tal y como se escribi en eldocumento HTML es utilizar la etiqueta al final de cada lnea. El resultado de hacerlo sera:

Est en su primera prctica de lenguaje HTML. Empezar creando pginas sencillas, con puro texto plano. Ms adelante comenzar a utilizar listas, tablas, formularios, etc.

Si se desea separar el texto de una pgina web en prrafos, para una mejor presentacin, se puedeutilizar la etiqueta , que puede usarse sin etiqueta de cierre, pero es ms entendible el cdigo HTML,cuando se incluyen etiquetas de cierre de prrafo, . Veamos el siguiente segmento de cdigo comoejemplo:

La comprensin psicolgica del miedo experimentado como consecuencia de las experienciasrepresivas requiere ser ubicado en el contexto de la situacin especfica y referido a los distintosniveles de comprensin de los procesos psicolgicos como tales.

5

As, se observa que el miedo puede provocar conductas especficas que pueden ser descritas comoprocesos adaptativos como algo que se anticipa como un desastre, o como una catstrofe personal,inminente e imprevista.

Etiquetas de cabeceras o ttulos.Este tipo de etiquetas se suelen utilizar para los ttulos en el texto de las pginas. Existen en total seisetiquetas para este propsito. Estas se muestran en la siguiente tabla:

Etiqueta 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 mostrarn a travs del navegador y que le servirnpara recordatorios en futuras revisiones del documento.

Caracteres especiales

La mayora de las fuentes incluyen ahora caracteres especiales como por ejemplo la e acentuada deCaf, tambin existen algunos smbolos matemticos y marcas especiales de puntuacin entre otros.

Se puede agregar estos caracteres especiales en cualquier parte del documento Web usando los cdigosespeciales que se explican en la siguiente tabla:

Carcter Cdigo Descripcin Referencia! ! Cerrar exclamacin --" " Dobles comillas --# # Signo de nmero --$ $ Dlar --% % Tanto por ciento --& & Ampersand --' ' Apstrofe --( ( Cerrar parntesis --) ) Abrir parntesis --* * Asterisco --Carcter Cdigo Descripcin Referencia

6

+ + Signo ms --, , Coma --- - Guin --. . Punto --/ / Barra de divisin --0 - 9 0 - 9 Dgitos del al 0-9 --: : Dos puntos --; ; Punto y coma --< < Menor --< < Menor > Mayor --> > Mayor >? ? Cerrar interrogacin --@ @ Arroba --A - Z A - Z Letras A-Z --[ [ Cerrar corchete (izquierdo) --\ \ Barra inversa --] ] Abrir corchete --^ ^ Circunflejo --_ _ Subrayado --` ` Acento agudo --a - z a - z Letras a-z --{ { Abrir llave --| | Barra vertical --} } Cerrar llave --~ ~ Tilde --

Espacio sin separacin Abrir exclamacin Centavo Libra Esterlina Signo de divisa general Yen Barra vertical partida (pipe) Seccin Diresis Copyright Doa Abrir comillas francesas No (smbolo lgico)

Guin dbil Registrado Macrn Grados Ms-menos Dos superndice

7

Carcter Cdigo Descripcin Referencia Tres superndice Acento agudo Micro Fin de prrafo Punto medio Cedilla Uno superndice Gnero masculino Cerrar comillas francesas Un cuarto Un medio Tres cuartos Abrir interrogacin A mayscula, acento grave A mayscula, acento agudo A mayscula, acento circunflejo A mayscula, tilde A mayscula, diresis A mayscula, anillo AE mayscula C cedilla mayscula E mayscula, acento grave E mayscula, acento agudo E mayscula, acento circunflejo E mayscula, diresis I mayscula, acento grave I mayscula, acento agudo I mayscula, acento circunflejo I mayscula, diresis Eth mayscula Ee mayscula O mayscula, acento grave O mayscula, acento agudo O mayscula, acento circunflejo O mayscula, tilde O mayscula, diresis Signo de multiplicacin O barrada mayscula U mayscula, acento grave U mayscula, acento agudo U mayscula, acento circunflejo U mayscula, diresis Y mayscula, acento agudo THORN mayscula Beta minscula a minscula, acento grave

8

Carcter Cdigo Descripcin Referencia a minscula, acento agudo a minscula, acento circunflejo a minscula, tilde a minscula, diresis a minscula, anillo ae mnuscula c cedilla minscula e minscula, acento grave e minscula, acento agudo e minscula, acento circunflejo e minscula, diresis i minscula, acento grave i minscula, acento agudo i minscula, acento circunflejo i minscula, diresis eth minscula ee minscula o minscula, acento grave o minscula, acento agudo o minscula, acento circunflejo o minscula, tilde o minscula, diresis Signo de divisin o barrada minscula u minscula, acento grave u minscula, acento agudo u minscula, acento circunflejo u minscula, diresis y minscula, acento agudo thorn minscula y minscula, diresis

Como puede ver, la tabla tiene una columna con el carcter deseado seguida de su cdigo numrico enbase decimal, una descripcin del carcter y despus un nombre corto (una especie de alias) que paralos ms habituales se llegan a memorizar, y para cosas cortas, ayudan.

Ejemplo:

La palabra Caf se utiliza:

Caf

Otra forma es:

Caf

9

Navegador

Un navegador o navegador web (del ingls, web browser) es un programa que permite visualizar lainformacin que contiene una pgina web ya que este alojada en un servidor dentro de la World WideWeb o en uno local.

El navegador interpreta el cdigo, HTML generalmente, en el que est escrita la pgina web y lopresenta en pantalla permitiendo al usuario interactuar con su contenido y navegar hacia otros lugaresde la red mediante enlaces o hipervnculos.

La funcionalidad bsica de un navegador web es permitir la visualizacin de documentos Web,posiblemente con recursos multimedia incrustados. Los documentos pueden estar ubicados en lacomputadora en donde est el usuario, pero tambin pueden estar en cualquier otro dispositivo queest conectado a la computadora del usuario o a travs de Internet, y que tenga los recursos necesariospara la transmisin de los documentos (un servidor web). Tales documentos, comnmentedenominados pginas web, poseen hipervnculos que enlazan una porcin de texto o una imagen a otrodocumento, normalmente relacionado con el texto o la imagen.

Funcionamiento de los navegadores

La comunicacin entre el servidor web y el navegador se realiza mediante el protocolo HTTP, aunque lamayora de los navegadores soportan otros protocolos como FTP, Gopher, y HTTPS (una versin cifradade HTTP basada en Secure Socket Layer o Capa de Conexin Segura (SSL)).

La funcin principal del navegador es descargar documentos Web y mostrarlos en pantalla. En laactualidad, no solamente descargan este tipo de documentos sino que muestran con el documento susimgenes, sonidos e incluso videos en diferentes formatos y protocolos. Adems, permiten almacenar lainformacin en el disco de las pginas ms visitadas.

Ejemplo de navegadores:

Internet Explorer Mozilla Firefox Safari Google Chrome Nestcape Navigator

III. Requerimientos

N Cantidad Descripcin1 1 PC con Windows XP con uno de los editores de pginas Web: PHP Designer

Personal, Notepad ++, BlueFish y HTML Kit y cualquiera de los navegadoressiguiente: Internet Explorer 7 u 8, Firefox (ltima versin disponible), GoogleChrome (ltima versin disponible), Opera (ltima versin disponible), Safari(ltima versin disponible), Netscape (9.0.0.6)

2 1 Gua de Laboratorio #1 de Introduccin a Internet3 1 Memoria USB

10

IV. Procedimiento

Ejercicio 1. Crear el primer documento HTML

1. Cuando cargue el sistema operativo, dar clic en el botn inicio.

2. Crear una carpeta en Mis Documentos con el nombre: NCarnet_Guia1Nota: Cambiar NCarnet por su nmero de carnet de la Universidad

3. Ir a todos los programas y hacer clic en Notepad ++ o cualquiera de los editores de pginas Webpropuesto

4. Crear un nuevo documento en el cual comenzara a trabajar con el primer ejercicio.

5. Hacer clic en ArchivoY hacer clic en la opcin Nuevo

6. Digite el siguiente cdigo:

7. Guardar el archivo con el nombre primera_pagina.html, realizando los siguientes pasos:

Hacer clic en Archivo Hacer clic en Guardar como Seleccionar la carpeta que creo en Mis Documentos En la opcin Nombre, digite el nombre del archivo Hacer clic en el botn Guardar

Ejercicio 2. Visualizar una pgina Web en el navegador Internet Explorer desde la opcin Archivo.Ir a inicio

1. Hacer doble clic en Internet Explorer

11

2. Hacer clic en Archivo, despus 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 practica y seleccionar elarchivo primera_pagina.html y hacer clic en Abrir.

4. Hacer clic en Aceptar y observara que se abre su pgina Web.

Ejercicio 3. Visualizar una pgina Web en el navegador desde la opcin Abrir con

1. Abrir la carpeta donde tiene su pgina Web

2. Seleccionar el archivo y hacer clic derecho para visualizar el men contextual

3. Del men seleccione la opcin Abrir con

4. De la lista puede seleccionar los navegadores: Internet Explorer, Firefox, Google Chrome ocualquier otro navegador.

5. Visualizara su pgina Web en el navegador seleccionado.

Recomendaciones:

Para comenzar a trabajar y no tiene instalado el editor de pginas Web que se est utilizando enla prctica puede utilizar el bloc de notas (notepad), pero si quiere trabajar con el mismo editorpuede descargarlo de la siguiente direccin:http://notepad-plus.sourceforge.net/es/site.htm

O tambin puede descargar el editor HTML Kit de esta direccin:http://www.chami.com/html-kit/download/

Debe guardar todos los archivos en una sola carpeta, para que no tenga problemas a la hora detrabajar con ellos.

Cuando guarde el documento Web siempre digite la extensin .html

Cuando realice cambios a un documento Web, y su pgina ya est cargada en un navegadorsolamente actualice el navegador y observara los nuevos cambios.

12

V. Ejercicio complementario

1. Realice una pgina web que contenga su informacin por ejemplo carnet, nombre completo,carrera que estudia y materias inscritas.

2. Realice una pgina web con la informacin de su programa de televisin favorito por ejemplonombre del programa, personajes principales, tipo de programa(comedia, romance,documental, etc).

El instructor evaluara el desempeo de su trabajo

VI. Anlisis de resultados

1. Qu es una etiqueta?2. Qu es un atributo?3. Cul son las partes importantes de un Documento web?4. Investigue y colocar en una pgina Web 5 ejemplos de etiqueta y atributo y explique cada uno

Fecha de entrega: Prxima semana

VII. Fuente de consulta

1. HTML 5 para desarrolladoresEditorial Anaya Multimedia 1ra. Edicin, Madrid, Espaa.Autor: Joseph W. Lowery y Mark FletcherBiblioteca UDB Clasificacin: Libro 004.67 L913 ISBN: 978-84-415-3108-6

2.HTML 5.Editorial Anaya Multimedia.1ra. Edicin. Madrid, Espaa.Autor: Alonso lvarez GarcaBiblioteca UDB Clasificacin: Libro 004.67 A473 - ISBN:978-84-415-2746-1

13