Provincia de Buenos Aires Direccin General De Cultura Y Educacin Direccin de Educacin Superior Instituto Superior de Formacin Tcnica N 179

Carrera: Tecnicatura Superior en Anlisis de

Sistemas

Espacio curricular: EDI I Curso: 1 C Ciclo lectivo: 2011 Profesor/a: Clos, Ana Mara

Instituto Superior de Formacin Tcnica 179

EDI I

Conceptos bsicos

1.1 Internet
A qu se llama Internet? Es una coleccin de redes de computadoras a lo largo de todo el mundo que comparten informacin digital. Cualquiera puede conectar su computadora a Internet e inmediatamente comunicarse con otras computadoras y usuarios.

1.2 Pginas Web

Las pginas Web estn formadas por varios documentos que se enlazan unos con otros. Estos documentos no son lineales; podemos estar leyendo una parte del documento, hacer clic en un enlace y saltar a otro texto que puede estar ubicado en cualquier lugar del planeta. Estos documentos se conocen como hipertexto para hacer una analoga con el hiperespacio, o espacio que tiene ms de tres dimensiones.

1.3 Clientes, Servidores y Navegadores

Internet conecta dos clases de computadoras: los servidores, que alojan y ponen a disposicin del usuario documentos Web; y los clientes, que recuperan y muestran los documentos. Para acceder y mostrar pginas Web, existen programas llamados navegadores (browsers) en las computadoras clientes. Estos programas se comunican con servidores Web para obtener los documentos electrnicos.

1.4 IP
Todas las computadoras conectadas a Internet tienen una direccin nica: un nmero definido por el protocolo IP (Internet Protocol). Este protocolo es un estndar que define como los mensajes pasan de una mquina a otra en la red. Una direccin IP est formada por cuatro nmeros entre 0 y 255 cada uno. Los nmeros se separan por puntos, como 192.12.248.73 o 131.58.97.254. Las redes de Internet se agrupan en subredes, las cules se identifican por los dos o tres primeros nmeros de la direccin IP.

Ana Mara Clos

Instituto Superior de Formacin Tcnica 179

EDI I

1.5 DNS
Mientras las computadoras manejan nmeros, las personas prefieren nombres; por lo tanto cada nmero se puede traducir como un nombre nico de dominio. Este sistema se denomina DNS (Domain Name System). Hay computadoras especiales, llamadas servidores de nombres que mantienen tablas de nombres asociados con direcciones IP y realizan la tarea de traduccin. Un nombre de dominio consta de varias partes separadas por puntos y organizadas jerrquicamente. Las partes ms a la derecha son ms generales; la ltima corresponde a la nacin y la anteltima es una de las ramas en que se divide Internet. Por ejemplo el nombre www.oma.org.ar corresponde al equipo www que es parte del dominio oma que pertenece a una organizacin sin fines de lucro de la argentina (por convencin, los webmasters nombran a sus servidores como www para que sean fcilmente identificados en la red). Otras ramas de Internet son: com edu gov net mil Comercial Instituciones educativas Instituciones gubernamentales Proveedores de Intenet Organismos militares

Las redes tienen abreviaturas formadas por dos letras, que indican el pais de origen: por ejemplo "ca" por Canada, "jp" por Japn, y "ar" por Argentina.

1.6 URL
Para que un navegador Web (como Internet Explorer) pueda encontrar el documento que se le solicita, ste debe tener un identificador, es decir el nombre del documento y el lugar donde se encuentra. El identificador es el texto que el navegador muestra en la barra de direcciones. Por ejemplo, el identificador de una pgina elegida al azar es: http://www.uku.fi/neuro/index.html Este identificador nico es denominado URL (uniform resource locator). Una URL est compuesta por varias partes:

Ana Mara Clos

Instituto Superior de Formacin Tcnica 179

EDI I

protocolo://nombre_de_dominio/camino_al_documento Hay varios protocolos, pero el ms utilizado es el http o protocolo de transferencia de hipertexto, consiste bsicamente en reglas y cdigos para permitir la comunicacin entre las computadora A continuacin del nombre del protocolo se escriben dos puntos seguidos de doble barra transversal, luego el nombre de dominio y finalmente el camino hacia el documento que se desea identificar. Por convencin las pginas Web tienen extensin htm o html. Si despus del nombre de dominio no se escribe nada, se obtiene la pgina principal denominada home page ubicada en el directorio raz del servidor; sta generalmente se denomina index.html.

Introduccin a los lenguajes SGML

2.1 HTML
Para que las pginas Web puedan ser mostradas en una pantalla deben ser codificadas en una forma especial. HTML (HyperText Mark-up Language) fue el lenguaje que se cre para compartir documentos en la Web, es un lenguaje para dar formato a documentos de hipertexto. El HTML es un lenguaje muy simple. El formato de los documentos se marca mediante etiquetas (tags) que indican el comienzo y el final de los elementos que componen el documento. Por ejemplo, el elemento p contiene un prrafo de texto. El comienzo del prrafo se marca con la etiqueta <p> y el final del prrafo se marca (opcionalmente) con la etiqueta </p>.

2.2 SGML
HTML deriva de otro lenguaje, SGML (Standard Generalized Mark-up Language), que es un Lenguaje Generalizado Estndar para el Formato de Documentos . Es un estndar internacional que permite definir lenguajes para dar formato a documentos (mark-up languages). Por ejemplo, el HTML, es un lenguaje de formato de documentos definido de acuerdo con SGML (o en otras palabras una aplicacin de SGML) para dar formato a documentos de hipertexto.
Ana Mara Clos 4

Instituto Superior de Formacin Tcnica 179

EDI I

2.3 XML
Desde su creacin, el HTML ha ido aumentando su complejidad para responder a las demandas de los usuarios de la Web. Al principio era suficiente para los fsicos nucleares para los que iba a servir, pero hoy los documentos HTML tienen grficos, animaciones, msica; cada da llega a tecnologas diferentes (dispositivos porttiles, telfonos mviles) y algn da se convertir en una Web realmente interactiva. El lenguaje de la Web necesita seguir evolucionando. XML es una respuesta a esta necesidad. Es una versin de SGML, ms sencilla y ms fcil de aplicar, diseada precisamente para hacer frente a los problemas de compatibilidad y adaptabilidad de las nuevas tecnologas a Internet. XML significa "Extensible Mark-up Language". En XML no hay elementos. Cada usuario (o grupo de usuarios) puede crear su propio lenguaje para el formateo de datos y documentos; su propio vocabulario, segn sus necesidades, siguiendo las reglas de XML. Por ejemplo, para crear una lista de libros, pods definir tus propios elementos, encerrados entre las etiquetas correspondientes: <titulo>, <autor>, <precio>, <editorial>, etc. Cada elemento puede ser mostrado en un navegador o ser utilizado por un programa para buscar libros por autor, ordenarlos, etc. Hay varios lenguajes definidos de acuerdo con las reglas de XML, como DocBook (para libros electrnicos) y MathMl (para frmulas matemticas).

2.4 XHTML
El lenguaje XHTML es la definicin de HTML como aplicacin de XML. El XHTML 1.0 es exactamente igual que el HTML 4, excepto en que sigue las reglas de XML, que son ms estrictas que las de SGML. Por ejemplo, en HTML el elemento p no necesita la etiqueta final </p>. En XHTML s: todos los elementos necesitan una etiqueta inicial y otra final. En HTML se puede escribir <p> o <P>, no importa. En XHTML, las etiquetas tienen que ir obligatoriamente en minsculas. El lenguaje XHTML se cre para posibilitar en el futuro la modularizacin del HTML; dividir el HTML en partes o mdulos independientes y que cada

Ana Mara Clos

Instituto Superior de Formacin Tcnica 179

EDI I

navegador tome los que necesite segn sus capacidades: un mdulo de texto, un mdulo de imgenes, un mdulo de scripts, un mdulo de formularios, etc.

Estructura de una pgina HTML

El principio esencial del lenguaje HTML es el uso de etiquetas, las cuales funcionan de la siguiente manera: <etiqueta de inicio> ELEMENTO <etiqueta de fin/> Las etiquetas pueden escribirse con mayscula o minscula y estn encerradas entre los smbolos <>. Las etiquetas indican una accin que el navegador debe realizar. Las etiquetas tienen atributos que especifican de que forma debe ejecutarse esa accin. Con HTML el programador no tiene un control total sobre los elementos que incluir en su pgina. El objetivo de este lenguaje ser simplemente describir cmo es una pgina de manera que examinando esa descripcin el navegador del usuario final sea capaz de mostrarla de la mejor manera posible. Con HTML podremos indicarle al navegador que este es un titular, aqu comienza un prrafo, estos son elementos de una lista, etc. posteriormente el navegador decidir como mostrar esos elementos. Todo el documento debe escribirse entre estas dos etiquetas, que indican el comienzo y fin de una pgina Web: <html> y </html>

El documento se divide en dos partes: el encabezado y el cuerpo.

3.1 El encabezado
Se escribe entre las siguientes etiquetas <head> y </head>

Dentro del encabezado hay informacin del documento, que no se ve en la pantalla principal, principalmente el ttulo del documento, comprendido entre las etiquetas <title> y </title>. El ttulo debe ser breve y descriptivo de su contenido.

Ana Mara Clos

Instituto Superior de Formacin Tcnica 179

EDI I

3.2 El cuerpo
Se escribe entre las etiquetas <body> y </body>

Dentro del cuerpo est todo lo que queremos que aparezca en la pantalla principal: texto, imgenes, tablas, listas, etc.

3.3 Mi primera pgina

Para editar tu primera pgina no necesits demasiados recursos: 1) Un editor de texto, como el bloc de notas. Word no es conveniente ya que agrega cdigo extra a la pgina. 2) Un navegador o browser como el Internet Explorer, Firefox, Netscape, etc. 3) No es necesario estar conectado a Internet. Para comenzar tens que crear una carpeta en la computadora con un nombre a tu eleccin. Abr el editor de texto y escrib el siguiente cdigo: <html> <head> <title> Mi primera pagina</title> </head> <body>Esta es mi primera pagina Web</body> </html> Tens que guardarlo en la carpeta recin creada, con el nombre pagina1.html y como tipo todos los archivos. Ten cuidado, que no se almacene como archivo de texto y no cierres el editor. Si hacs doble clic sobre el cono de pagina1.html se abre una ventana del navegador mostrando tu pgina Web. Sobre la barra superior vas a leer el ttulo y en la ventana lo que escribiste entre las etiquetas <body > y </body>. En la ventana del editor modific los textos anteriores, escribiendo segunda en lugar de primera; guard los cambios y cerr el editor. En la ventana del navegador actualiz la pgina y vas a ver los cambios. Si quers editar nuevamente la pgina, busc la opcin Cdigo Fuente del men Ver.

Ana Mara Clos

Instituto Superior de Formacin Tcnica 179

EDI I

3.4 Actividad
Escrib una pgina Web con tu nombre como ttulo en la barra del navegador. Llamala yo.html. Escrib dos o tres lneas con tus datos personales. Abr la pagina en el navegador y fijate como se acomoda el texto al tamao de la ventana.

Elementos de una pgina Web

4.1 Comentarios
Los comentarios se escriben entre las etiquetas <!-- y -->. Todo lo que se escriba dentro de estas etiquetas no se va a mostrar en la pantalla del navegador. Por ejemplo, en el siguiente cdigo, la frase esto es un comentario no se muestra en el navegador. <html > <head> <title> Pgina con comentario</title> </head> <body> Esta es una pgina con comentario <!--Pero este comentario no se va a ver--> </body> </html>

4.2 Caracteres especiales

Para mostrar en la pantalla caracteres especiales, como letras acentuadas, signos mayor y menor y otros ms; HTML proporciona una serie de smbolos. Algunos navegadores necesitan estos smbolos para presentar correctamente esos caracteres, mientras que para otros no son necesarios todos ellos. A continuacin se muestran los principales:

&nbsp; &aacute; &eacute; &iacute; &oacute;

Ana Mara Clos

Espacio entre caracteres

8

Instituto Superior de Formacin Tcnica 179

EDI I

&uacute; &ntilde; &Ntilde; &lt; &gt;

< >

El siguiente es un ejemplo del uso de caracteres especiales:

<html > <head> <title> P&aacute;gina con caracteres especiales </title> </head> <body> Esta p&aacute;gina muestra los s&iacute;mbolos &lt; y &gt; </body> </html>

4.2.1.

Actividad

Escribir la pgina caracteres.html utilizando caracteres especiales para mostrar las siguientes expresiones: cmara quin smbolo cmodo brjula ao 2 < 3 6 > 5. Separar las expresiones con un espacio extra. Agregar un comentario al comienzo de body, que diga Uso de caracteres especiales.

4.3 Divisiones y prrafos

Los navegadores acomodan el texto de la pgina HTML para que se muestre abarcando toda la ventana. No prestan atencin a los espacios de ms de un caracter ni a los saltos de lnea. Para manejar la presentacin del texto en la ventana, HTML proporciona tres etiquetas: <div> <p> y <br>.

4.3.1.

Etiqueta <div>

Divide el contenido de la pgina en secciones. Cada seccin puede tener distinta alineacin: izquierda (por defecto), centrada, derecha o justificada; aunque esta ltima no es aceptada por todos los navegadores. El atributo align se encarga de establecer la alineacin de la seccin.

Ana Mara Clos

Instituto Superior de Formacin Tcnica 179

EDI I

<html > <head> <title> Pgina con divisiones </title> </head> <body> <div align=left>Primera linea</div> <div align=center>Segunda linea</div> <div align=right>Tercera linea</div> <div align=justify>Cuarta linea</div> <div>Quinta linea</div> </body> </html>

4.3.2.

Etiqueta <p>

Divide el contenido de la pgina en prrafos. Es similar a <div> y tiene sus mismos atributos; la diferencia principal es que inserta una lnea en blanco entre prrafos.

4.3.3.

Etiqueta <br>

Introduce una nueva lnea antes del texto que sigue a la etiqueta. Es una de las pocas etiquetas que no necesita una etiqueta de cierre. Aqu vemos un ejemplo que combina etiquetas <p> y <br>: <html > <head> <title> Pgina con divisiones </title> </head> <body> <p>Primera </p> <p>Segunda </p> <p>Tercera </p> <p>Cuarta <br>Quinta<br>Sexta</p> </body> </html>

4.3.4.

Actividad

Escribir una pgina con tres prrafos. Para el primero utilizar la etiqueta <div> alineada a la derecha. El segundo utiliza la etiqueta <p> alineada al centro. El

Ana Mara Clos

10

Instituto Superior de Formacin Tcnica 179

EDI I

tercero, la etiqueta <div> sin alineacin. Luego escribir tres palabras separadas por la etiqueta <br>.

4.4 Ttulos o encabezados

Para escribir ttulos de con distinto nivel de importancia, existen etiquetas que comienzan con H y siguen con un nmero que va del 1 al 6. Los encabezados comienzan en una nueva lnea y el texto que sigue tambin comienza en una nueva lnea. Para verlos en accin, escrib este cdigo en el cuerpo de la pgina. <h1>Encabezado <h2>Encabezado <h3>Encabezado <h4>Encabezado <h5>Encabezado <h6>Encabezado 1</h1> 2</h2> 3</h3> 4</h4> 5</h5> 6</h6>

Los encabezados pueden cambiar su alineacin si se les agrega el atributo align ya visto anteriormente.

4.5 Estilos lgicos

Estas etiquetas indican al navegador que el texto encerrado tiene un significado especfico, un cierto contexto o uso particular. El navegador da formato al texto en forma consistente con el significado, contexto o uso.

4.5.1.

Etiqueta <cite>

Indica que el texto encerrado es una cita textual de un libro o revista. Generalmente se muestra en cursiva.

4.5.2.

Etiqueta <code>

Se utiliza para representar cdigo fuente de programas. Generalmente se muestra en estilo Courier u otra fuente en estilo teletipo.

4.5.3.

Etiqueta <dfn>

Indica que el texto encerrado es una definicin.

4.5.4.

Etiqueta <em>

Se utiliza para resaltar un texto. Generalmente se muestra en cursiva.

Ana Mara Clos

11

Instituto Superior de Formacin Tcnica 179

EDI I

4.5.5.

Etiqueta <kbd>

Simula el tipeo de datos por teclado. Muestra una fuente estilo teletipo.

4.5.6.

Etiqueta <strong>

Destaca un texto con ms nfasis. Generalmente se muestra en negrita.

4.5.7.

Combinacin de estilos

Los estilos pueden combinarse para obtener nuevos resultados. En algunos casos el navegador no podr manejar las combinaciones y no se obtendr el resultado esperado. Hay que tener cuidado con el cierre de etiquetas, ya que debe efectuarse en sentido inverso que la apertura. El orden de los estilos es indistinto; por ejemplo la combinacin de <em> y <strong> se puede escribir de cualquiera de estas dos maneras: <br><strong><em>texto destacado </em></strong> <br><em><strong>texto destacado </strong></em>

4.5.8.

Actividad

Escribir una pgina Web utilizando una lnea para cada estilo. Escribir sucesivamente: Cita textual, Cdigo fuente, Definicin, Texto destacado, Texto ingresado por teclado, Texto ms destacado.

4.6 Estilos fsicos

En otros casos se desea que el texto aparezca explcitamente en una forma especial, como negrita o cursiva; en estas circunstancias se utilizan los estilos fsicos. Es preferible el uso de los estilos lgicos ya que en el futuro todos los navegadores tendrn herramientas para manejarlos de manera eficiente segn el contexto.

4.6.1.

Etiqueta <b>

Es similar a <strong> y representa el texto en negrita.

Ana Mara Clos

12

Instituto Superior de Formacin Tcnica 179

EDI I

4.6.2.

Etiqueta <big>

Muestra el texto en un tamao mayor que el texto por defecto. Estas etiquetas pueden anidarse para aumentar ms de un tamao.

4.6.3.

Etiqueta <i>

Se utiliza para mostrar el texto en cursiva.

4.6.4.

Etiqueta <small>

Muestra el texto en un tamao menor que el texto por defecto. Estas etiquetas pueden anidarse para disminuir ms de un tamao.

4.6.5.

Etiqueta <sub>

Se utiliza para escribir el texto como subndice, medio carcter hacia abajo que el texto normal. Generalmente se emplea en frmulas y ecuaciones matemticas. <br>P=2(l₁+l₂)

4.6.6.

Etiqueta <sup>

Se utiliza para escribir el texto como superndice, medio carcter ms elevado que el texto normal. Se emplea para exponentes o numerar notas al pie. Veamos el ejemplo: <br>Hay que comprar 10 m² de cermicos

4.6.7.

Etiqueta <tt>

Escribe el texto en un estilo similar al teletipo, como las etiquetas lgicas <code> y <kbd>.

Ana Mara Clos

13

Instituto Superior de Formacin Tcnica 179

EDI I

4.6.8.

Etiqueta <u>

Se emplea para subrayar el texto encerrado entre las etiquetas. No se recomienda su uso ya que un texto subrayado puede confundirse con un hipervnculo.

4.6.9.

Combinacin de estilos fsicos

Al igual que los estilos fsicos, los lgicos pueden combinarse. Las etiquetas deben cerrarse en el orden inverso en que fueron abiertas. Este ejemplo combina los estilos <b> y <i> de dos formas diferentes. <br><b><i>combina estilos</i></b> <br><i><b>combina estilos</b></i>

4.6.10.

Actividad

Crear una pgina que utilice una lnea diferente para mostrar estos textos, usando los distintos estilos fsicos: Negrita, Tamao mayor, Cursiva, Tamao menor, Subndice, Superndice, Teletipo, Subrayado.

Ana Mara Clos

14