universidad don bosco facultad de estudios tecnologicos escuela de

UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION CICLO 01-2012 GUIA DE LABORATORIO Nº 1 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 Docente: Tec. Arely Juárez, Tec. Marvin Martínez, Inga. Blanca Iris Cañas, Tec. Diana Palacios y Tec. Raúl Bermúdez 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. 3. Tener claridad en el proceso a seguir para visualizar un documento HTML a través de un navegador. 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://www.servidor.dominio/carpeta/página.html Un ejemplo concreto sería: http://www.udb.edu.sv/biblioteca/catalogo.html 1 Estructura básica de un documento HTML Una etiqueta (o directiva) HTML es un comando codificado que se utiliza para indicar cómo se debe mostrar una parte de una página web. 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 y otra que indica el final. Ambas delimitadas por signos de menor (<) y mayor (>), con la diferencia que la que indica el final lleva el símbolo de barra (/) justo después del símbolo de apertura (símbolo menor). La forma general sería la siguiente: <etiqueta> ... </etiqueta> Las etiquetas abiertas constan de una sola palabra clave, encerrada siempre entre símbolos de menor (<) y mayor (>). La forma general de este tipo de etiqueta es: <etiqueta> NOTA: En el lenguaje HTML no se hace distinción entre mayúsculas y minúsculas, esto significa que pudo haberse escrito <ETIQUETA></ETIQUETA> y el resultado sería exactamente el mismo. La estructura básica de una página web indica las etiquetas, que como mínimo, debería contener un documento web. Dicha estructura básica es mostrada en el siguiente código HTML: <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML> Indica el inicio del documento. Inicio de la cabecera. Inicio del título del documento. Final del título del documento. Final de la cabecera del documento. Inicio del cuerpo del documento. Final del cuerpo del documento. Final del documento. SUGERENCIA: Usted puede guardar este archivo escribiendo primero las líneas anteriores en un editor sencillo, como el Bloc de notas, y luego guardando el archivo con el nombre “estructurabasica.html” (sin incluir las comillas). Esto le servirá para no volver a escribir estas mismas líneas cada vez que quiera crear una página web nueva. OBSERVACIÓN: Normalmente, las páginas web se hospedan en un servidor web. Nosotros durante estas prácticas trabajaremos localmente; es decir, en lugar de subir las páginas a un servidor las almacenaremos 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 menú Archivo. 1. Etiquetas de definición de tipo de documento Un documento HTML, bien realizado, debería especificar qué versión de HTML se está utilizando. Además de esto se debe establecer la definición del tipo de documento (DTD). En el HTML 4.01 se pueden especificar tres DTDs, que se pueden introducir en el documento web realizando las declaraciones que a continuación se detallan: 2 El DTD HTML 4.01 Estricto (Strict DTD) incluye todos los elementos y atributos que no han sido desaprobados o que no aparecen en documentos con marcos. Para los documentos que usen este DTD, utilice esta declaración del tipo de documento: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> El DTD HTML 4.01 Transicional (Transitional DTD) incluye todo lo que incluye el DTD estricto más los elementos y atributos desaprobados (la mayoría de los cuales están relacionados con la presentación visual). Para los documentos que usen este DTD, utilice esta declaración del tipo de documento: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> El DTD HTML 4.01 para Documentos con Marcos (Frameset DTD) incluye todo lo que incluye el DTD Transicional más los marcos. Para los documentos que usen este DTD, utilice esta declaración del tipo de documento: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> El URL que aparece en la declaración 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 declaración indican el idioma de la DTD. Para HTML, este es siempre inglés (“EN”). 2. 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”. 3 Elemento BASE El elemento BASE permite establecer vínculos y referencias a recursos externos como imágenes, aplicaciones, programas o scripts de procesamiento de formularios, hojas de estilo, etc. Estos vínculos se establecen mediante URLs que sirven para completar los URLs relativos que se utilicen dentro del documento web. Su utilidad práctica es especificar una carpeta en la que pueden estar colocadas todas las imágenes, vídeos o sonidos enlazados que serán utilizadas en nuestra página web. De esta forma, nos podemos evitar colocar rutas absolutas cuando queramos llamar a un archivo de imagen desde nuestra página. Otra utilidad de esta etiqueta es definir la ventana por defecto en la que se abrirán los enlaces contenidos en la página. Ejemplo: <BASE href=”http://www.udb.edu.sv/imagenes” target=”_blank”> 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-8859-1"> <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"> <META name="keywords" content="carreras, campus, maestrías, laboratorios, biblioteca, horarios, aulas, aspectos administrativos"> 3. 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: 4     Elementos estándares HTML: párrafos, listas, tablas, formularios, etc. Capas definidas mediante etiquetas <DIV> ... </DIV>, o ... 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" > El sitio web de la Universidad Don Bosco lo puede encontrar haciendo clic en http://www.udb.edu.sv. Todo lo relacionado con la universidad lo puedes encontrar en este sitio web. </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 al final de cada línea. El resultado de hacerlo sería: 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. Si se desea separar el texto de una página web en párrafos, para una mejor presentación, se puede utilizar la etiqueta , que puede usarse sin etiqueta de cierre, pero es más entendible el código HTML, cuando se incluyen etiquetas de cierre de párrafo, . Veamos el siguiente segmento de código como ejemplo: 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. 5 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. 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. Caracteres especiales La mayoría de las fuentes incluyen ahora caracteres especiales como por ejemplo la e acentuada de Café, también existen algunos símbolos matemáticos y marcas especiales de puntuación entre otros. Se puede agregar estos caracteres especiales en cualquier parte del documento Web usando los códigos especiales que se explican en la siguiente tabla: Carácter ! " # $ % & ' ( ) * Código ! " # $ % & ' ( ) * Descripción Cerrar exclamación Dobles comillas Signo de número Dólar Tanto por ciento Ampersand Apóstrofe Cerrar paréntesis Abrir paréntesis Asterisco Referencia ----------6 Carácter + , . / 0-9 : ; < < = > > ? @ A-Z [ \ ] ^ _ ` a-z { | } ~ ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯ ° ± ² Código + , - . / 0 - 9 : ; < < = > > ? @ A - Z [ \ ] ^ _ ` a - z { | } ~   ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯ ° ± ² Descripción Signo más Coma Guión Punto Barra de división Dígitos del al 0-9 Dos puntos Punto y coma Menor Menor Igual Mayor Mayor Cerrar interrogación Arroba Letras A-Z Cerrar corchete (izquierdo) Barra inversa Abrir corchete Circunflejo Subrayado Acento agudo Letras a-z Abrir llave Barra vertical Cerrar llave Tilde Espacio sin separación Abrir exclamación Centavo Libra Esterlina Signo de divisa general Yen Barra vertical partida (pipe) Sección Diéresis Copyright Doña Abrir comillas francesas No (símbolo lógico) Guión débil Registrado Macrón Grados Más-menos Dos superíndice Referencia ---------< --> --------------  ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯ ° ± ² 7 Carácter ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à Código ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à Descripción Tres superíndice Acento agudo Micro Fin de párrafo Punto medio Cedilla Uno superíndice Género masculino Cerrar comillas francesas Un cuarto Un medio Tres cuartos Abrir interrogación A mayúscula, acento grave A mayúscula, acento agudo A mayúscula, acento circunflejo A mayúscula, tilde A mayúscula, diéresis A mayúscula, anillo AE mayúscula C cedilla mayúscula E mayúscula, acento grave E mayúscula, acento agudo E mayúscula, acento circunflejo E mayúscula, diéresis I mayúscula, acento grave I mayúscula, acento agudo I mayúscula, acento circunflejo I mayúscula, diéresis Eth mayúscula Eñe mayúscula O mayúscula, acento grave O mayúscula, acento agudo O mayúscula, acento circunflejo O mayúscula, tilde O mayúscula, diéresis Signo de multiplicación O barrada mayúscula U mayúscula, acento grave U mayúscula, acento agudo U mayúscula, acento circunflejo U mayúscula, diéresis Y mayúscula, acento agudo THORN mayúscula Beta minúscula a minúscula, acento grave Referencia ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à 8 Carácter á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ Código á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ Descripción a minúscula, acento agudo a minúscula, acento circunflejo a minúscula, tilde a minúscula, diéresis a minúscula, anillo ae mínuscula c cedilla minúscula e minúscula, acento grave e minúscula, acento agudo e minúscula, acento circunflejo e minúscula, diéresis i minúscula, acento grave i minúscula, acento agudo i minúscula, acento circunflejo i minúscula, diéresis eth minúscula eñe minúscula o minúscula, acento grave o minúscula, acento agudo o minúscula, acento circunflejo o minúscula, tilde o minúscula, diéresis Signo de división o barrada minúscula u minúscula, acento grave u minúscula, acento agudo u minúscula, acento circunflejo u minúscula, diéresis y minúscula, acento agudo thorn minúscula y minúscula, diéresis Referencia á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ Como puede ver, la tabla tiene una columna con el carácter deseado seguida de su código numérico en base decimal, una descripción del carácter y después un nombre corto (una especie de alias) que para los más habituales se llegan a memorizar, y para cosas cortas, ayudan. Ejemplo: La palabra Café se utiliza: Café Otra forma es: Café 9 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: 10 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 Ayudar a los sintetizadores de voz o Ayudar al agente de usuario a elegir variaciones de un signo para la tipografía o Ayudar a las verificaciones de ortografía y gramática o 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. Texto estructurado El texto estructurado permite crear elementos de frase que proporcionan información estructural a los fragmentos de texto.  Los elementos de frase basados en el contenido que se pueden utilizar de acuerdo a la recomendación HTML 5.0: EM, STRONG, CITE, DFN, CODE, SAMP, KBD, VAR, ABBR. 11           Tanto EM como STRONG se utilizan para indicar énfasis, en tanto que el resto de elementos se utilizan para indicar significados particulares en documentos técnicos. EM. Indica énfasis al navegador (emphasis) STRONG. Indica un énfasis pero más resaltado que EM. CITE. Indica una cita o una referencia de otras fuentes. DFN. Indica la definición de un término. Debe utilizarse únicamente para encerrar el término a definir, no su definición en sí. El elemento DFN puede ayudar a la creación de un índice o glosario del documento. CODE. Se utiliza para presentar el contenido en forma de código de computadora. Esta etiqueta es útil para programadores que deseen mostrar código fuente dentro de un documento web. SAMP. Indica la salida de un programa, script, etc. KBD. Indica también un estilo especial que especifica que el texto debe ser introducido por el usuario desde el teclado (keyboard). VAR. Indica que el texto es una variable o argumento de programa. Suele utilizarse en conjunto con los elementos CODE y PRE. ABBR. Indica que el texto es una forma abreviada de una palabra o frase más larga. 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. 12 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 ) Control de fuentes (HTML 4.01) Otra forma de cambiar los tamaños de letra es utilizar el elemento con el atributo SIZE, que es un número entre 1 y 7. El valor por defecto del texto es 3, por lo que valor puede ser positivo (+) o negativo (-) respecto a 3. Una gran ventaja de esta notación respecto a la anterior es que no se produce un salto de párrafo después de cada cambio, por lo que pueden hacerse cosas como esta: AAA AAA AAA Dará como resultado: AA AA A AA AA Se puede cambiar el tamaño por defecto (3) de toda la página con el elemento <BASEFONT SIZE=valor>. El texto tomará el tamaño indicado por valor y lo mantendrá hasta que aparezca otro elemento <BASEFONT SIZE=valor> y lo restaure o lo cambie por otro diferente. La etiqueta posee un atributo permite elegir tipos de letra entre los varios de que dispone por defecto Windows. Se trata del atributo FACE. Este atributo permite forzar el tipo de letra que el diseñador de la página quiere que vea el cliente, sin importar el que por defecto tenga establecido el navegador. Ejemplos: Texto de prueba Introducción a la Internet con tipo ARIAL Texto de prueba Introducción a la Internet con tipo TIMES NEW ROMAN Texto de prueba Introducción a la Internet con tipo COURIER NEW Texto de prueba Introducción a la Internet con tipo COURIER Texto de prueba Introducción a la Internet con tipo CALIBRI Texto de prueba Introducción a la Internet con tipo SMALL FONTS Se verá: Texto Texto de de prueba Introducción prueba Introducción a la a la Internet con Internet con tipo TIMES tipo NEW ARIAL ROMAN 13 Texto de prueba Introducción a la Internet con tipo COURIER NEW Texto de prueba Introducción a la Internet con tipo COURIER Texto de prueba Introducción a la Internet con tipo CALIBRI Texto de prueba Introducción a la Internet con tipo SMALL FONTS Por supuesto, este atributo es compatible con todos los demás ya conocidos, como color y tamaño. Ejemplo: Texto de prueba Introducción a la Internet con tipo IMPACT Se verá: Texto de prueba Introducción a la Internet con tipo IMPACT 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. Navegador Un navegador o navegador web (del inglés, web browser) es un programa que permite visualizar la información que contiene una página web ya que este alojada en un servidor dentro de la World Wide Web o en uno local. El navegador interpreta el código, HTML generalmente, en el que está escrita la página web y lo presenta en pantalla permitiendo al usuario interactuar con su contenido y navegar hacia otros lugares de la red mediante enlaces o hipervínculos. La funcionalidad básica de un navegador web es permitir la visualización de documentos Web, posiblemente con recursos multimedia incrustados. Los documentos pueden estar ubicados en la computadora en donde está el usuario, pero también pueden estar en cualquier otro dispositivo que esté conectado a la computadora del usuario o a través de Internet, y que tenga los recursos necesarios para la transmisión de los documentos (un servidor web). Tales documentos, comúnmente denominados páginas web, poseen hipervínculos que enlazan una porción de texto o una imagen a otro documento, normalmente relacionado con el texto o la imagen. 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)). 14 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 Nestcape Navigator III. Requerimientos Nº 1 Cantidad 1 2 3 1 1 Descripción 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) Guía de Laboratorio #1 de Introducción a Internet Memoria USB IV. Procedimiento Nota: En esta guía se trabajara utilizando elementos de HTML 4.01 Ejercicio 1. Crear el primer documento HTML 1. Cuando cargue el sistema operativo, dar clic en el botón inicio. 2. 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 3. Ir a todos los programas y hacer clic en Notepad ++ o cualquiera de los editores de páginas Web propuesto 4. Crear un nuevo documento en el cual comenzara a trabajar con el primer ejercicio. 5. Hacer clic en Archivo Y hacer clic en la opción Nuevo 6. Digite el siguiente código: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 15 <HTML> <HEAD> <TITLE>Mi primera página HTML</TITLE> </HEAD> <BODY> Esta la primera práctica de Introducción al Internet creada por : Escriba su nombre </BODY> </HTML> 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 opción Nombre, digite el nombre del archivo Hacer clic en el botón Guardar 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 practica 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 16 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. Ejercicio 4 1. Copiar la imagen fondo.jpg en su carpeta 2. Crear un nuevo archivo 3. Digitar el siguiente texto: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <TITLE>Reflexión</TITLE> </HEAD> <BODY background="imagenes/fondo.jpg" text="#ffff00"> <H1 align="center" lang="es">BIENVENIDO A MI PÁGINA WEB</H1> <HR width="85%"> <H1 align="center" lang="es">APRENDAMOS A VER</H1> <H3 lang="es">Reflexión</H3>  Una familia iba de paseo en un bus. A pesar de ser el paisaje muy hermoso, todo se veía opaco por los vidrios oscuros. Uno de los niños le dijo a su padre: – Papá, ¿Por qué nos trajiste a pasear por estos lugares tan feos y oscuros? El padre respondió: – Lo que sucede es que estás mirando el paisaje a través de un vidrio opaco, pero si abres la ventana, verás que el sol alumbra radiante, el verde del campo es fuerte y hermoso y toda la naturaleza es maravillosa. Así nos sucede muchas veces a los adultos, cuando creemos que vemos la vida por el lente correcto y nos equivocamos al observar lo que superficialmente se nos presenta. Hay vidrios oscuros en la vida, que no nos dejan apreciar las bondades y bellezas que 17 <BIG>Dios</BIG> nos ha obsequiado. Admiremos todo lo que tenemos y descubramos una vida llena de esplendor. </BODY> </HTML> 4. Guarde el documento con el nombre reflexión.html, siempre en la misma carpeta. 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: http://notepad-plus.sourceforge.net/es/site.htm O también puede descargar el editor HTML Kit de esta dirección: http://www.chami.com/html-kit/download/  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. Ejercicio 5. 1. Copia la imagen sentidos.jpg en la carpeta donde se encuentran sus archivos de la practica 2. Digite el siguiente código en el editor: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <META name="Página educativa" content="Tema Los Cinco Sentidos"> <TITLE> Los cinco sentidos </TITLE> </HEAD> <BODY background="imagenes/sentidos.jpg" text="#0B0B61"> <H1>Los Cinco Sentidos</H1> <HR> <H3 align="justify">Sin la información que recibimos a través de los cinco sentidos, no 18 podríamos funcionar como los seres que somos. Cada sentido es importante de por sí, pero tiene limitaciones. Por otra parte, se puede utilizar un sentido para compensar por otro. Por supuesto, la manera m´s eficaz de recibir información es de usar todos nuestros sentidos en armonía. Otro aspecto importante de utilizar nuestros sentidos es la conciencia de limitaciones físicas que podrían causar dificultades a las personas que no tienen acceso a éstos, pero esto no hace que las personas sean diferentes, ni de menos valor. Por consiguiente, se tienen que proteger y cuidar a estos maravillosos dones de percibir el mundo en que vivimos. Los cinco sentidos que posee todo ser humano sin discapacidades son: 1.La vista. 2.El oído. 3.El tacto. 4.El gusto. 5.El olfato. </H3> </BODY> </HTML> 3. Guardar el documento con el nombre: cincosentidos.html 4. Visualizar la pagina en el navegador Ejercicio 6. 1. Cree un nuevo archivo en Notepad++ 2. Digite el siguiente código: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> <HTML> <HEAD> <TITLE>Fórmulas matemáticas</TITLE> </HEAD> <BODY background=" imagenes/energia.jpg" color="#002200"> <H1 align="center"> Fórmulas básicas para los tipos de energía </H1> <HR> Existen varios tipos de energía en la naturaleza, entre las cuales podemos citar: la energía Mecánica, la energía eléctrica, la energía química, la energía electromagnética. A continuación se mostrarán algunas fórmulas importantes para calcular su magnitud. 19 La energía Mecánica se divide en: Energía Cinética: EC=0.5*M*V2 Energía Potencial: 1- Energía Potencial Gravitatoria: UG = m*g*(hF - hO) 2- Energía Potencial Elástica: US=0.5*K*(XF2 XO2) Energía Eléctrica: EE=P*t=V*I*T <HR> </BODY> </HTML> 3. Guardar el documento con el nombre: formulas.html 4. Visualice 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 esta se creara con las etiquetas vistas en la práctica como por ejemplo: párrafos, colores de texto, color de fondo o imagen 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 pagina 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. Crea una página que tenga su autobiografía, además deberá colocar la siguiente información: 20 a. Carrera b. Carnet c. Materias inscritas 2. ¿Cómo colocaría las siguientes Nomenclaturas en una página Web? NH4+ Catión amonio. Hg22+ Catión mercurioso. O22- Peróxido. MnO4- Permanganato MnO42- Manganato. S22- Disulfuro. Nota: Esta tarea es individual. Fecha de entrega: Próxima semana 21

universidad don bosco facultad de estudios tecnologicos escuela de

Documentos relacionados

Productos

Apoyo

universidad don bosco facultad de estudios tecnologicos escuela de

Documentos relacionados

Añadir este documento a la recogida (s)

Añadir a este documento guardado

Sugiéranos cómo mejorar StudyLib