05/09/2011

MATERIA:

CREACIN DE PAGINAS WEB

MAESTRO:

OVIDIO PEREZ VALENTIN

COLEGIO DE ESTUDIOS CIENTFICOS Y TECNOLGICOS DEL ESTADO DE JALISCO

GRADO: 3
C

GRUPO:

ALUMNA:

SUSANA SARAHI ACOSTA TORRES

1 QU ES LA WWW?

En informtica, la World Wide Web (WWW) es un sistema de distribucin de informacin basado en hipertexto o hipermedios enlazados y accesibles a travs de Internet. Con un navegador web, un usuario visualiza sitios web compuestos de pginas web que pueden contener texto, imgenes, videos u otros contenidos multimedia, y navega a travs de ellas usando hiperenlaces.La Web fue creada alrededor de 1989 por el ingls Tim Berners-Lee y el belga Robert Cailliau mientras trabajaban en el CERN en Ginebra, Suiza, y publicado en 1992. Desde entonces, Berners-Lee ha jugado un papel activo guiando el desarrollo de estndares Web (como los lenguajes de marcado con los que se crean las pginas web), y en los ltimos aos ha abogado por su visin de una Web semntica.

2 QU SON LAS PAGINAS WEB?

Fuente de informacin compatible con la WWW y que puede ser accedida a travs de un navegador en internet. Por lo general las pginas web se presentan en formato que les da forma llamado HTML. Son documentos que soportan hipertexto. Las pginas web suelen estar disponibles en servidores web en internet. Generalmente mltiples pginas web en un mismo dominio constituyen un sitio web. Por lo general un sitio web tiene una pgina principal (el ndice que puede ser index.htm, index.php, index.asp) desde donde se enlazan otras pginas web del sitio formando una red. En un sitio pueden existir pginas web de acceso pblico y de acceso privado. El navegador web se encarga de solicitar una pgina web especfica a un servidor dependiendo de la direccin (URL). Esta peticin se realiza siguiendo el protocolo HTTP.Una pgina web puede estar constituida de texto esttico al que se le da formato con etiquetas HTML. O tambin puede armarse dinmicamente cada vez que se visita dependiendo de mltiples factores (como paso de parmetros, cookies, origen del visitante, PHP, ASP, etc.), pero, por lo general, el servidor siempre responder en un formato HTML. Estas ltimas son llamadas pginas web dinmicas. Como se dijo anteriormente, las pginas web pueden ser visualizadas a travs de un navegador web como Internet Explorer, Netscape, Firefox, Opera, etc. Las pginas web pueden estar formadas por distintos elementos como: Texto e hipervnculos, imgenes (generalmente formatos GIF, JPG y PNG), audio (MIDI, MP3 y WAV), Flash, Shockwave, grficos vectoriales (SVG), etc. Tambin pueden poseer elementos no son visibles por el usuario amplan las posibilidades del HTML. Scripts (generalmente Java Script), metatags, Hojas de Estilo (CSS), etc. Antiguamente diferentes navegadores a veces interpretaban de formas distintas una misma pgina web; incluso los webmasters deban adaptar los cdigos para uno u otro navegador web. Actualmente este problema casi no existe porque tanto diseadores web como desarrolladores de navegadores comenzaron a respetar

los estndares para la creacin de pginas web. Estas reglas son creadas por el Consorcio World Wide Web (W3C) para HTML, CSS, XML, etc.Las pginas web pueden hacerse desde cualquier editor de texto, aunque siempre ms sencillo usar los editores WYSIWYG, que son totalmente grficos como Dreamweaver o FrontPage, etc.

3. INVESTIGACIN SOBRE EL USO DE EXTENSIONES DE PAGINAS WEB (TIPOS MIME, SUS DIFERENCIAS Y CARACTERSTICAS PRINCIPALES)
MIME (Extensiones Multipropsito de Correo Internet) es un estndar propuesto en 1991 por Bell Communications para expandir las capacidades limitadas del correo electrnico y en particular para permitir la insercin de documentos (como imgenes, sonido y texto) en un mensaje. Fue definido originalmente en junio de 1992 por las RFC 1341 y 1342. MIME describe el tipo de contenido del mensaje y el tipo de cdigo usado con encabezados. MIME incorpora las siguientes caractersticas al servicio de correo electrnico: Capacidad de enviar mltiples adjuntos en un solo mensaje Longitud ilimitada del mensaje Uso de conjuntos de caracteres no pertenecientes al cdigo ASCII Uso de texto enriquecido (diseos, fuentes, colores, etc.) Adjuntos binarios (ejecutables, imgenes, archivos de audio o video, etc.), que se pueden dividir de ser necesario MIME usa directivas especiales en los encabezados para describir el formato utilizado en el cuerpo de un mensaje, de modo que el cliente de correo electrnico pueda interpretarlo correctamente: Versin de MIME: esta es la versin de MIME estndar usada en el mensaje. Actualmente slo existe la versin 1.0. Tipo de contenido: describe el tipo y el subtipo de datos. Puede incluir un parmetro de "juego de caracteres", separado por un punto y coma, que define qu juego de caracteres utilizar. Codificacin de transferencia de contenido: define la codificacin usada en el cuerpo del mensaje. Identificacin de contenido: representa una identificacin nica para cada segmento del mensaje. Descripcin de contenido: proporciona informacin adicional sobre el contenido del mensaje.

Disposicin de contenido: define la configuracin de los adjuntos, particularmente el nombre vinculado al archivo, usando el atributo nombre del archivo. TIPOS DE MIME PRIMARIOS

Los tipos de MIME, usados en el encabezado Tipo de contenido, se usan para clasificar los documentos adjuntos de un correo electrnico. Un tipo de MIME est compuesto de la siguiente manera:

Tipo de contenido: tipo_mime_principal/subtipo_mime

Por ejemplo, una imagen GIF tiene el siguiente tipo de MIME:

Tipo de contenido: image/gif

Los tipos de datos primarios, a veces denominados "tipos de datos discretos", son:

Texto: texto de datos legible text/rfc822 [RFC822]; text/plain [RFC2646]; text/html [RFC2854]. Imagen: datos binarios que representan imgenes digitales: image/jpeg, image/gif, image/png. Audio: datos de sonido digital: audio/basic, audio/wav Video: datos de vdeo: video/mpeg Aplicacin: Otros datos binarios: application/octet-stream, application/pdf

Los tipos de MIME tambin se usan en la web para clasificar documentos transferidos usando el protocolo HTTP. As, durante una transaccin entre un servidor web y un explorador, lo primero que hace el servidor web es enviar el tipo de MIME del archivo al explorador, para que ste sepa cmo mostrar el documento.

4. HISTORIA O EVOLUCIN DEL LENGUAJE HTML.

La primera descripcin de HTML disponible pblicamente fue un documento llamado HTML Tags (Etiquetas HTML), publicado por primera vez en Internet por Tim Berners-Lee en 1991. Describe 22 elementos comprendiendo el diseo inicial y relativamente simple de HTML. Trece de estos elementos todava existen en HTML 4. Berners-Lee consideraba a HTML una ampliacin de SGML, pero no fue formalmente reconocida como tal hasta la publicacin de mediados de 1993, por la IETF, de una primera proposicin para una especificacin de HTML: el boceto Hypertext Markup Language de Berners-Lee y Dan Connolly, el cual inclua una Definicin de Tipo de Documento SGML para definir la gramtica. HISTORIA Y OBJETIVOS DEL LENGUAJE HTML El HTML (Hyper Text Markup Language) es el lenguaje de programacin con el que se escriben las pginas web. Es un lenguaje muy sencillo que permite confeccionar archivos de texto mostrndolo de forma estructurada y atractiva, con enlaces (hyperlinks) que hacen referencia a otros documentos o fuentes de informacin relacionada, y que permite incorporar archivos multimedia como grficos, sonidos, imgenes, videos, etc. El HTML fue creado originalmente por Tim Berners-Lee. Luego en los aos 90 se desarrollo con el crecimiento de la Web (Internet). Durante este tiempo, el HTML se ha desarrollado gracias a la colaboracin de todos los programadores y usuarios de Internet. El HTML ha pasado de varias versiones unas ms sencillas y otras mucho ms complejas y a pesar de no haberse logrando nunca un consenso en las discusiones sobre los estndares del HTML, y as en el ao 1996 se llego a la versin 3.2 de HTML que fue una de las ms slidas y completas sobre la que posteriormente se desarrollara el HTML que actualmente usamos. Esta evolucin tan anrquica del HTML ha supuesto toda una serie de inconvenientes y deficiencias que se han superado gracias a la introduccin de nuevas tecnologas que ayudaron a organizar, perfeccionar y automatizar el funcionamiento de las pginas web. Entre ellas podemos nombrar las CSS (Cascading Style Sheets u Hojas de Estilo en Cascada), el lenguaje JavaScript, etc. Otro inconveniente que ha tenido el HTML ha sido la gran variedad de navegadores existentes en el mercado que no son capaces de interpretar de igual manera el cdigo de las pginas web, por lo que obligan al webmaster o encargado de las pginas web, a comprobar que la mayora de los navegadores leen correctamente las pginas web. Adems de los navegadores necesitaremos otra herramienta importante como son los editores de HTML. Es recomendable en un principio usar el Bloc de notas, para poder familiarizarnos lo antes posible con el cdigo y prestarle la mxima atencin al cdigo HTML. Ms adelante veremos otros editores de HTML.

5. QU ES UNA ETIQUETA?

El lenguaje HTML es un lenguaje de marcas, estas marcas sern fragmentos de texto destacado de una forma especial que permiten la definicin de las distintas instrucciones de HTML, tanto los efectos a aplicar sobre el texto como las distintas estructuras del lenguaje. A estas marcas las denominaremos etiquetas y sern la base principal del lenguaje HTML. En documento HTML ser un fichero texto con etiquetas que variarn la forma de su presentacin. Una etiqueta ser un texto incluido entre el smbolo menor que < y mayor que >. El texto incluido dentro de los smbolos ser explicativo de la utilidad de la etiqueta. Por ejemplo:
<B> Letra Negrita, del ingls Bold (negrita).

<TABLE> Definir una tabla. <IMG> Inclusin de una IMaGen.

Existe normalmente una etiqueta de inicio y otra de fin, la de fin contendr el mismo texto que la de inicio aadindole al principio una barra inclinada /. El efecto que define la etiqueta tendr validez para todo lo que este incluido entre las etiquetas de inicio y fin, ya sea texto plano o otras etiquetas HTML. <ETIQUETA>Elementos Afectados por la Etiqueta</ETIQUETA> Por ejemplo, con la etiqueta siguiente: <B>Texto que ser en negrita</B>. Obtendremos: Texto que ser en negrita

Algunas etiquetas no necesitarn la de fin, sern aquellas en las que el final este implcito, por ejemplo <P> prrafo, <BR> salto de lnea <IMG> inclusin de una imagen. Definen un efecto que se producir en un punto determinado sin afectar a otros elementos. El uso de maysculas o minsculas en las etiquetas es indiferente, se interpretarn del mismo modo en ambos casos, pero lo normal es expresarlas en maysculas para que destaquen con ms nitidez del texto normal

6. QU ES UN ATRIBUTO?

Muchas etiquetas llevan atributos. Los mismos proveen de mayor informacin a los elementos HTML.

Los atributos siempre van con la estructura: nombre="valor". Los atributos siempre van en la etiqueta de apertura. Los valores siempre hay que ponerlos entre comillas.

Las etiquetas pueden presentar modificadores que llamaremos atributos que permitirn definir diferentes posibilidades de la instruccin HTML. Estos atributos se definirn en la etiqueta de inicio y consistirn normalmente en el nombre del atributo y el valor que toma separados por un signo de igual. El orden en que se incluyan los atributos es indiferente, no afectando al resultado. Si se incluyen varias veces el mismo atributo con distintos valores el resultado obtenido ser imprevisible dependiendo de como lo interprete el navegador. Cuando el valor que toma el atributo tiene ms de una palabra deber expresarse entre comillas, en otro caso no ser necesario. Un ejemplo de atributo ser: <A HREF="http://www.uca.es">Pagina principal de la UCA</A>

En este caso la etiqueta A presenta un atributo HREF cuyo valor es http://www.uca.es. Igualmente una etiqueta podra presentar varios atributos: <HR ALIGN=LEFT NOSHADE SIZE=5 WIDTH=50%>

En este caso la etiqueta HR presenta cuatro atributos. El segundo atributo NOSHADE es un caso especial que no presenta valor. El orden en que se especifiquen los atributos no afectar al resultado final.

7. EL MANEJO DE COLORES EN PGINAS WEB ENTRE PARNTESIS HEXADECIMAL Y LITERAL .

El color del texto puede ser definido mediante el atributo color. Cada color es a su vez definido por un nmero hexadecimal que esta compuesto a su vez de tres partes. Cada una de estas partes representa la contribucin del rojo, verde y azul al color en cuestin. Por otra parte, es posible definir de una manera inmediata algunos de los colores ms frecuentemente usados para los que se ha creado un nombre ms memotcnico: <font color="red">Este texto est en rojo</font> Que se visualizara as en una pgina web. Este texto est en rojo Con todo esto estamos ya en disposicin de crear un texto formateado de una forma realmente elaborada. En la composicin de webs juegan un papel muy importante los colores. Se indican en valores RGB, es decir, que para conseguir un color cualquiera mezclaremos cantidades de Rojo, Verde y Azul. Los valores RBG se indican en numeracin hexadecimal, en base 16. (Los dgitos pueden crecer hasta 16). Como no hay tantos dgitos numricos se utilizan las letras de la A a la F.
0=0 1=1 2=2 3=3 4=4 5=5 6=6 7=7 8=8 9=9 A=10 B=11 C=12 D=13 E=14 F=15

Para conseguir un color, mezclaremos valores de esta manera: RRGGBB Donde cada valor puede crecer desde 00 hasta FF.

EJEMPLO Cmo se cambiara la fuente para escribir en rojo: <font color="#FF0000">Rojo</font> Al Atributo color le damos un valor RGB en formato hexadecimal. El carcter # se coloca al principio de la cadena. OTROS COLORES

Naranja Verde turquesa Azul oscuro

#FF8000 #339966 #000080

COLORES COMPATIBLES EN TODOS LOS SISTEMAS Como las pginas web las tienen que ver todos los usuarios, y los sistemas que utilizan para entrar son distintos, hay que utilizar colores compatibles con la paleta de todos ellos. La forma de conseguir esto es limitando nuestros colores a los que se pueden conseguir utilizando la siguiente norma:
Utilizaremos siempre estos valores: 00 33 66 99 CC FF

Ejemplos: #3366FF #FF9900 #666666 COLOR: Regula el color de los caracteres. En principio existen dos posibilidades para definir los colores en HTML: 1. Mediante la especificacin de los valores RGB del color deseado en forma hexadecimal (RGB=Red/Green/Blue, valores Rojo/Verde/Azul) 2. Mediante la especificacin del nombre del color en ingles Ejemplos:

<FONT COLOR="WHITE">Blanco</FONT> <FONT COLOR="BLACK">Negro</FONT> <FONT COLOR="RED">Rojo</FONT> <FONT COLOR="GREEN">Verde</FONT> <FONT COLOR="BLUE">Azul</FONT> <FONT COLOR="YELLOW">Amarillo</FONT> <FONT COLOR="CYAN">Cyan</FONT> <FONT COLOR="MAGENTA">Magenta</FONT>

Blanco Negro Rojo Verde Azul

#FFFFFF #000000 #FF0000 #00FF00 #0000FF

Amarillo #FFFF00 Cyan #00FFFF

Magenta #FF00FF

Si nos decidimos a trabajar con valores hexadecimales, entonces tenemos la libertad de utilizar 16,7 millones de colores. De esta manera trabajamos independientemente de los navegadores Web. Si especificamos el nombre del color, podemos evitar la definicin del color en forma hexadecimal que es un poco ms difcil. Actualmente estn estandarizados tan slo 16 colores. Existen colores adicionales los cuales son dependientes de los navegadores Web. Primero que todo debe escribir un smbolo #. A continuacin siguen las 6 cifras para la definicin del color. Las primeras 2 cifras definen el valor rojo, las siguientes 2 el valor verde y las 2 ltimas el valor azul. Las cifras hexadecimales son: 0 1 2 3 4 5 6 7 (corresponde (corresponde (corresponde (corresponde (corresponde (corresponde (corresponde (corresponde al al al al al al al al decimal decimal decimal decimal decimal decimal decimal decimal 0) 1) 2) 3) 4) 5) 6) 7) 8 9 A B C D E F (corresponde (corresponde (corresponde (corresponde (corresponde (corresponde (corresponde (corresponde al al al al al al al al decimal decimal decimal decimal decimal decimal decimal decimal 8) 9) 10) 11) 12) 13) 14) 15)

Para ponerle color de fondo a la pgina escribir: <body bgcolor=#808080></body> con el cual obtendremos un color de fondo gris oscuro

8. MANIPULACIN DE TABLAS ETIQUETAS Y ATRIBUTOS.

TABLAS Las tablas son la manera ms sencilla de organizar el contenido en una pgina web. Nos permiten delimitar de qu lugar a qu lugar deseamos que se muestre el contenido. La estructura bsica consta de celdas y columnas, como si fuera una hoja de clculo. Sin embargo, se pueden llegar a combinar filas o columnas. Ejemplo de tabla en HTML <table> <tr> <td>Celda</td> <td>Celda</td> </tr> <tr> <td>Celda</td> <td>Celda</td> </tr> </table>

La etiqueta <tr> sirve para cambiar de rengln. La etiqueta <td> sirve para crear una nueva celda. Todas las propiedades del HTML aplican a la etiqueta <table> ETIQUTAS

<script>: incrusta un script en una web, o se llama a uno mediante src="url del script". Se recomienda incluir el tipo MIME en el atributo type, en el caso de JavaScript text/javascript. <head>: define la cabecera del documento HTML; esta cabecera suele contener informacin sobre el documento que no se muestra directamente al usuario. Como por ejemplo el ttulo de la ventana del navegador. Dentro de la cabecera <head> podemos encontrar:

Un ejemplo de cdigo HTML con coloreado de sintaxis.

<title>: define el ttulo de la pgina. Por lo general, el ttulo aparece en la barra de ttulo encima de la ventana. <link>: para vincular el sitio a hojas de estilo o iconos. Por ejemplo: <link rel="stylesheet" href="/style.css" type="text/css">. <style>: para colocar el estilo interno de la pgina; ya sea usando CSS, u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo externo usando la etiqueta <link>. <meta>: para metadatos como la autora o la licencia, incluso para indicar parmetros http (mediante http-equiv="") cuando no se pueden modificar por no estar disponible la configuracin o por dificultades con server-side scripting.

<body>: define el contenido principal o cuerpo del documento. Esta es la parte del documento html que se muestra en el navegador; dentro de esta etiqueta pueden definirse propiedades comunes a toda la pgina, como color de fondo y mrgenes. Dentro del cuerpo <body> podemos encontrar numerosas etiquetas. A continuacin se indican algunas a modo de ejemplo: <h1> a <h6>: encabezados o ttulos del documento con diferente relevancia. <table>: define una tabla. <tr>: fila de una tabla. <td>: celda de una tabla (debe estar dentro de una fila). <a>: hipervnculo o enlace, dentro o fuera del sitio web. Debe definirse el parmetro de pasada por medio del atributo href. Por ejemplo: <a href="http://www.wikipedia.org">Wikipedia</a> se representa como Wikipeda). <div>: divisin de la pgina. Se recomienda, junto con css, en vez de <table> cuando se desea alinear contenido. <img>: imagen. Requiere del atributo src, que indica la ruta en la que se encuentra la imagen. Por ejemplo: <img src="./imgenes/mifoto.jpg" />. Es conveniente, por accesibilidad, poner un atributo alt="texto alternativo". <li><ol><ul>: etiquetas para listas. <b>: texto en negrita (etiqueta desaprobada. Se recomienda usar la etiqueta <strong>). <i>: texto en cursiva (etiqueta desaprobada. Se recomienda usar la etiqueta <em>). <s>: texto tachado (etiqueta desaprobada. Se recomienda usar la etiqueta <del>). <u>: texto subrayado.

La mayora de etiquetas deben cerrarse como se abren, pero con una barra (/) tal como se muestra en los siguientes ejemplos:

<table><tr><td>Contenido de una celda</td></tr></table>. <script>Cdigo de un [[script]] integrado en la pgina</script>. ATRIBUTOS

Las pginas HTML pueden construirse con variedad de atributos que le pueden dar un aspecto a la pgina muy personalizado. Podemos definir atributos como el color de fondo, el color del texto o de los enlaces. Estos atributos se definen en la etiqueta <body> y, como decamos son generales a toda la pgina

ATRIBUTOS PARA FONDOS

Bgcolor: especificamos un color de fondo para la pgina. El color de fondo que podemos asignar con bgcolor es un color plano, es decir el mismo para toda la superficie del navegador. Background: sirve para indicar la colocacin de una imagen como fondo de la pgina. La imagen se coloca haciendo un mosaico, es decir, se repite muchas veces hasta ocupar todo el espacio del fondo de la pgina.

9. CREACIN Y MANEJO DE FRAMES.

CREACIN DE PGINAS CON FRAMES
El hecho de usar frames no slo cambia por completo la apariencia de nuestra pgina, sino que tambin cambia el proceso de su realizacin. Si hasta ahora los Webs estaban formados por un nico documento HTML donde estaba el contenido, al usar frames ser necesario un documento HTML para definir la estructura de la pgina (nmero de frames a usar y disposicin de estos), y posteriormente tantos documentos HTML extra como frames tengamos para insertar su contenido. En la figura 8.7 vemos un ejemplo con una pgina Web compuesta por 3 frames: Los Webs con frames constarn de varios documentos HTML. En este ejemplo al haber tres frames sern necesarios 4 documentos HTML.

En este caso sern necesarios 4 documentos HTML. El primero simplemente contiene el cdigo que le indica al navegador el nmero de frames de la pgina, su tamao, su posicin y el nombre de los archivos donde est el contenido de los 3 frames, a este documento HTML le llamaremos DOCUMENTO DE DEFINICIN DE FRAMES . Los otros 3 documentos HTML tienen el contenido de cada uno de los tres frames y deben ser creados de la misma manera que hemos venido creando los documentos HTML hasta ahora, eso s, hay que tener en cuenta que ese contenido ser mostrado en un espacio reducido (el del frame correspondiente) y no en toda la ventana del navegador.

MANEJO DE FRAMES
Un frame es una especie de marco o recuadro independiente en el que podemos cargar una pgina web. Podemos as dividir una pgina web en diferentes partes o ventanas, cada una con sus propios bordes y barras de desplazamiento, pudiendo cargar dentro de cada una de ellas una pgina externa independiente. Pero los frames no se usan aisladamente, si no que una de las caractersticas ms importantes de los frames es que pulsando un enlace situado en un frame, se puede cargar en otro frame una pgina determinada. Los frames se definen en una pgina especial, que en su cdigo slo contiene la definicin de los frames o divisiones y la pgina que se va a cargar dentro de cada uno de ellos, por lo que deberemos crear aparte cada una de las pginas que van a contener los marcos. En la pgina donde hemos de definir los frames diremos el nmero de los mismos que queremos que haya, su tamao y la pgina que van a contener. La principal diferencia que va a haber a la hora de crear una pgina de frames es que en vez de utilizar la etiqueta BODY, que sirve normalmente para delimitar lo que se va a ver en la pantalla, se hace uso de la etiqueta FRAMESET. El uso de las frames es til para cierto tipo de documentos, pero puede llegar a dificultar la navegacin, ya que dentro de un documento con frames no tendrn utilidad los botones de documento previo (back) ni documento siguiente (forward), ya que ambos nos trasladarn fuera del documento con frames. Para ver el documento previo en una de las frames debemos utilizar el botn derecho del ratn sobre ella y seleccionar la opcin volver en el frame (Back in Frame). Esto hace que cuando se utilicen frames haya que cuidar la correcta transicin entre documentos.