INSTITUTO TECNOLGICO SUPERIOR DE TEPOSCOLULA

CARRERA: INGENIERA EN SISTEMAS COMPUTACIONALES

MATERIA: PROGRAMACIN WEB

TRABAJO: MANUAL DE HTML

ALUMNA: EUNICE VENTURA JOS

ASESOR: ING. IVAN ESPINOSA LOPEZ

FECHA: 27 DE AGOSTO DEL 2012

NDICE CONTENIDO

PAG.

CARACTERSTICAS DEL LENGUAJE HTML.4 QU SE NECESITA PARA CREAR UNA PGINA WEB..5 ALGUNAS RAZONES PARA USAR HTML...7 HTML ES UN LENGUAJE DESCRIPTIVO........8 LAS BASES DE HTML..11 PRIMEROS PASOS CON HTML14 LOS ENCABEZADOS18

INTRODUCCIN El Word Wide Web (WWW) es un sistema que contiene una cantidad de informacin casi infinita. Pero esta informacin debe estar ordenada de alguna forma de manera que sea posible encontrar lo que se busca. La unidad bsica donde est almacenada esta informacin son las pginas Web. Estas pginas se caracterizan por contener texto, imgenes, animaciones... e incluso sonido y video. Una de las caractersticas ms importantes de las pginas Web es que son hipertexto. Esto quiere decir que las pginas no son elementos aislados, sino que estn unidas a otras mediante los links o enlaces hipertexto. Gracias a estos enlaces el navegante de internet puede pulsar sobre un texto (texto al que llamaremos de ahora en adelante (activo) de una pgina para navega hasta otra pgina. Ser cuestin del programador de la pgina inicial decidir que palabras o frases sern activas y a donde nos conducir pulsar sobre ellas. En algunos ambientes se discute que el Word Wide Web ya no es un sistema hipertexto sino hipermedia. Los que defienden el cambio se apoyan en que aunque en sus orgenes el WWW constaba nicamente de texto en la actualidad es un sistema principalmente grfico y se puede hacer que las zonas activas sean, no slo texto, sino imgenes, videos, botones,... en definitiva cualquier elemento de una pgina. Aun as, el trmino original no ha sido reemplazado todava y por tanto ser el empleado a lo largo de esta obra.

CARACTERSTICAS DEL LENGUAJE HTML

Pero empecemos ya con lo que nos interesa. Cmo se hace una pgina Web? Cuando los diseadores del WWW se hicieron esta pregunta decidieron que se deban cumplir, entre otras, las siguientes caractersticas: El Web tena que ser distribuido: La informacin repartida en pginas no muy grandes enlazadas entre s. El Web tena que ser hipertexto y deba ser fcil navegar por l. Tena que ser compatible con todo tipo de ordenadores (PCs, Macintosh, estaciones de trabajo...) y con todo tipo de sistemas operativos (Windows, MS-DOS, UNIX, MAC-OS,...). Deba ser dinmico: el proceso de cambiar y actualizar la informacin deba ser gil y rpi.

Aunque al principio el texto predominaba en el WWW, en la actualidad las imgenes son mayora como podemos observar en una de las principales webs del proyecto KDE.

Estas caractersticas son las que marcaron el diseo de todos los elementos del WWW incluida la programacin de pginas Web. Como respuesta a todos estos requisitos se cre el lenguaje HTML (HiperText Markup Language), cuyas siglas significan "lenguaje hipertexto de marcas".

Este lenguaje ser el encargado de convertir un inocente archivo de texto inicial en una pgina web con diferentes tipos y tamaos de letra, con imgenes impactantes, animaciones sorprendentes, formularios interactivos, etc.

QU SE NECESITA PARA CREAR UNA PGINA WEB

Una de las caractersticas de este lenguaje ms importantes para el programador es que no es necesario ningn programa especial para crear una pgina Web. Gracias a ello se ha conseguido que se puedan crear pginas con cualquier ordenador y sistema operativo. El cdigo HTML, como hemos adelantado en el prrafo anterior, no es ms que texto y por tanto lo nico necesario para escribirlo es un editor de texto como el que acompaan a todos los sistemas operativos: edit. en MS-DOS, block de notas en Windows, UNIX, etc. Por supuesto estos no son los nicos editores de texto que pueden ser usados, sino cualquier otro. Tambin se puede usar procesadores de texto, que son editores con capacidades aadidas, como pueden ser Microsoft Word o WordPerfect pero hay que tener cuidado porque en ocasiones hacen traducciones automticas del cdigo HTML que no siempre son deseadas. En estos dos ltimos casos, tambin hay que tener en cuenta que deberemos guardar el archivo en modo texto.

. Un editor de texto simple, como el block de notas de Windows, es todo lo necesario para crear una pgina Web

Una vez hemos escrito el cdigo deberemos guardar el archivo (con formato de texto) con la extensin .html ( o htm en MS-DOS, Windows 3.1 o cualquier otro sistema que slo acepte tres letras en la extensin. Los siguientes son nombres vlidos de archivos que contengan cdigo HTML: index.html, index.htm,

principal.html, PRINCIPAL.htm, etc...

Si el editor o procesador de textos usado para crear la pgina obliga a usar la extensin .txt al guardar el archivo en modo texto, deberemos guardarlo con esta extensin, por ejemplo como index.txt, y posteriormente cambiar el nombre del archivo desde fuera del programa a index.html o index.htm . Para ello usaremos el comando rename en MS-DOS; en Windows 3.1 lo haremos mediante el administrador de archivos y en Windows 95 con el explorador. En otros entornos, como Linux, es mas raro que se de esta situacin. El World Wide Web es un sistema que diferencia las maysculas de las minsculas. Es un error comn llamar a un archivo index.html y luego referirse a l como Index.html. Aunque en nuestro ordenador puede funcionar al publicarlo seguramente no lo har. Por esta razn es una norma general usar siempre minsculas para los nombres de los archivos html. ltimamente han aparecido nuevas alternativas que facilitan la programacin de pginas Web. Son los editores HTML. Podemos dividir estos editores en dos grupos: Asistentes: ayudan a crear el cdigo HTML e incluyen plantillas de cdigo prefabricadas, por ejemplo HotDog (Win), HomeSite(Win),HTML Editor (Mac), Quanta (Linux, KDE) o Bluefish, (Linux, GNOME). Conversores: son programas con otra funcin que la de la programacin Web pero que permiten convertir a HTML. Son ejemplos de conversores Microsoft Word ,Quark XPress y PageMaker. Editores WYSIWYG (What You See Is What You Get, lo que ves es lo que obtienes): estos editores Permiten crear pginas web sin escribir cdigo HTML como si se tratase de un programa de dibujo por Ordenador. Algunos ejemplos de este tipo de editores son Macromedia Dreamweaver, HotMetal o Microsoft FrontPage.

Algunos editores WYSIWYG permiten, adems, modificar el cdigo HTML directamente.

ALGUNAS RAZONES PARA USAR HTML

Todos estos editores HTML tipos pueden ser de gran ayuda y tienen sus ventajas e inconvenientes, pero la experiencia demuestra que conocer el lenguaje HTML ofrece bastantes ventajas: Seremos capaces de aprovechar todas las caractersticas de este lenguaje, incluso las ms nuevas Aunque se use inicialmente un editor WYSWYG tendremos los conocimientos suficientes para modificar posteriormente el cdigo que ste ha creado. As se pueden corregir errores o incluir etiquetas no soportadas por el editor. No dependeremos de la disponibilidad de una herramienta concreta para poder crear pginas web. Con un simple editor de textos ser suficiente.

El principal problema de usar editores conversores y WYSIWYG es la necesidad de trabajar con dos archivos fuentes por separado, por un lado el archivo del editor y por otro el archivo del cdigo HTML una vez generado, lo que nos complica la vida a la hora de realizar cambios en nuestro Web. Sin embargo su utilidad es innegable y su combinacin con un buen conocimiento del lenguaje HTML nos convertir en unos grandes programadores de pginas Web capaces de realizar creaciones impactantes visualmente y de gran calidad tcnica.

HTML ES UN LENGUAJE DESCRIPTIVO

Probablemente el lector ha usado alguna vez un procesador de texto (Abiword, MicrosoftWord. KWord) o un programa de descripcin de pginas (QuarkXPress). Con este tipo de aplicaciones el usuario tiene un control total sobre los elementos del documento: se le puede decir al programa "pon este texto con este tamao", "sitalo a 1 cm. del borde", "usa este sangrado para los prrafos", etc... Con HTML el programador no tiene este tipo de control 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 mostrarlo 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.

Los navegadores en modo texto como Lynx tambin pueden mostrar pginas Web gracias al carcter descriptivo de HTML.

Por qu funciona as? En un principio esta caracterstica del HTML puede resultar molesta para el creador de la pgina, que no puede saber cmo ser vista su pgina ms que de una forma aproximada. Sin embargo es fundamental para conseguir que el Word Wide Web pueda ser navegado con cualquier tipo de ordenador (dicho con otras palabras, que el WWW sea multiplataforma). Debemos tener en cuenta que no todos los sistemas operativos son grficos, que incluso usando un mismo sistema operativo existen diferentes resoluciones de pantalla,... Por esta razn el lenguaje necesario para crear pginas debe ser descriptivo y como consecuencia tras crear una pgina el programador debe ver como es mostrada con varios navegadores distintos como Netscape Navigator o Microsoft Internet Explorer incluyendo algn navegador de texto como Lynx. Pero una consecuencia ms importante an de esta caracterstica, es que ha permitido que aparezcan navegadores vocales, que leen las pginas en vez de mostrarlas. Gracias a ello personas ciegas tambin han podido disfrutar del WWW. Es ms, esta misma tecnologa est siendo usada para los nuevos navegadores embarcados en coches que leen la pgina al conductor para que no se distraiga.

Una vez creada una pgina es recomendable probar nuestra pgina, no slo con varios navegadores, sino tambin con varias resoluciones de pantalla distintas como por ejemplo: 640x480, 800x600 y 1024x768. Si existe la posibilidad de probarlo adems con un navegador vocal, mucho mejor an. Un buen ejemplo de este carcter descriptivo es la definicin de titulares, tambin llamados encabezados, en HTML. Vamos a adelantarnos un poco en esta introduccin para mostrar este ejemplo, en l se muestra como poner el titular de una pgina: <h1>Bienvenido a la pgina de La Super Editorial</h1> Con este cdigo estamos describiendo el texto Bienvenido a la pgina de La Super Editorial como el texto de mxima importancia en nuestra pgina, es el titular. En los navegadores ms usados como el Netscape Navigator o el Microsoft Internet Explorer este titular ser mostrado como un texto en negrita y de tamao grande (el tamao ms grande posible). Sin embargo repetimos una vez ms que existen navegadores como pueden ser Lynx o Emacs-W3 que son bastante usados por la comunidad acadmica y universitaria que slo pueden mostrar texto y no pueden variar el tamao de la letra. Por esta razn la etiqueta <h1> no dice que el texto que encierra debe ser de tal tamao o si debe ser negrita o no. Esta etiqueta slo le dice que este texto es el ms importante de la pgina, el titular. Sabiendo esto el navegador que funcione en modo texto puede resaltar dicho titular con los medios de que dispone, como por ejemplo ponindolo en maysculas o usando distintos sangrados. Tambin podemos encontrar ventajas de la descripcin mirando al futuro. Imaginemos que la informtica evoluciona hasta tal punto que los monitores de dentro de unos aos pueden mostrar objetos en tres dimensiones. Sera muy interesante que el titular de nuestra pgina fuese en 3-D de manera que resaltase lo mximo posible. Pues bien, si lo hemos definido como cabecera principal (y no como letra de tamao 20 puntos y en negrita, por ejemplo) el navegador sabe que queremos que ese texto sea el ms importante y puede actuar de manera inteligente ponindolo automticamente en tres dimensiones, sin que nosotros hayamos cambiado una sola lnea de nuestro cdigo! Parece interesante no? Una vez a quedado claro cul es el espritu de HTML, hay que decir que ltimamente se han introducido mtodos para conseguir un mayor control sobre las pginas. Estos mtodos permiten

10

controlar aspectos como el tamao de la letra la disposicin (aproximada) de imgenes y texto de manera que se facilita la labor del programador. Pero hay que tener siempre en mente que siempre habr ligeras diferencias entre como vern las pginas unos usuarios u otros y no debemos pretender poder controlar la presentacin y diseo de nuestra pgina hasta el mnimo detalle. LAS BASES DE HTML

Una vez

repasadas unas nociones bsicas de HTML y de la programacin de

pginas Web en general entraremos de lleno en la programacin con este lenguaje. Pronto nos daremos cuenta de la sencillez de este lenguaje lo que le convierte en un lenguaje muy fcil de aprender y que nos permitir crear pginas con mayor facilidad an. Las rdenes de este lenguaje estarn formadas por unos comandos llamados etiquetas que pueden tener o bien la siguiente estructura:

<NOMBRE_ETIQUETA> O bien esta otra: <NOMBRE_ETIQUETA> TEXTO </NOMBRE ETIQUETA>

Como vemos, la primera estructura est formada por una nica instruccin y la segunda por dos: una que marca el inicio de la etiqueta y otra que marca el final, con texto entre ambas. Por ejemplo, para indicarle al navegador que queremos que pinte una lnea horizontal debemos escribir: <hr> As de sencillo. Como vemos, el nombre de la etiqueta va delimitado por los smbolos menor que (<) mayor que (>), todas las instrucciones de HTML deben ir encerradas entre estos dos smbolos. Pero las etiquetas no se limitan a indicar ordenes tan sencillas, estas rdenes tienen en ocasiones parmetros. Por ejemplo la etiqueta <hr> tal y como lo hemos hecho anteriormente dara lugar a la lnea que vemos en la, es decir le dice al navegador que dibuje una lnea horizontal en la pantalla. Esta lnea tiene un grosor predeterminado y un ancho variable en funcin del tamao de la ventana del navegador.

11

Uso bsico de una etiqueta HTML sin ningn tipo de parmetros. Ejemplo usando la etiqueta <hr> para crear una lnea horizontal.

Sin embargo hay muchas formas de pintar una lnea y sera deseable poder elegir detalles tales como la anchura y el grosor que va a tener dicha lnea. Para especificar este tipo de detalles se crearon los atributos de las etiquetas. Este nuevo elemento se introduce en una etiqueta de la siguiente manera:

<etiqueta atributo="valor">

Es decir, en primer lugar ponemos el nombre de la etiqueta, despus el nombre del atributo seguido por un signo igual y posteriormente el valor que queramos darle a ese atributo encerrado entre comillas una etiqueta puede tener tantos atributos como se deseen y en ocasiones son necesarios para que la etiqueta tenga algn significado. En nuestro ejemplo de la lnea horizontal existe un atributo llamado SIZE, que significa tamao en ingls, que permite controlar el grosor de la lnea que ser dibujada en pantalla.

Las etiquetas tienen atributos para cambiar aspectos del efecto que producen. En este ejemplo vemos cmo se puede cambiar el grosor de una lnea con el atributo SIZE.

12

El valor que toma el atributo size determina el nmero de puntos de pantalla o pixeles que debe ocupar, en grosor, la lnea. En posteriores captulos estudiaremos en detalle la etiqueta <hr> y todos sus atributos. vemos que el valor numrico que le damos al atributo size no va entrecomillado, por ejemplo en <hr size=5>. En HTML no es necesario entrecomillar los valores de los atributos cuando estn formados nicamente por nmeros [0-9], letras [a-z, A-Z], guiones y puntos. En todo caso es muy recomendable incluir las comillas siempre. De esta forma no tenemos que preocuparnos de cuando ponerlas y cuando no y a la vez cumplimos el nuevo estndar XHTML. Para los curiosos adelantaremos que XHTML es idntico a HTML pero con algunas restricciones adicionales del mundo de XML. Antes de empezar con el cdigo HTML bsico conviene hacer saber al lector que aunque en todos los ejemplos usados hasta ahora las etiquetas usadas estaban escritas en maysculas en realidad es indiferente el uso de estas o de minsculas. Sin embargo las maysculas son de uso comn para que sea ms fcil distinguirlas del texto y por tanto seguiremos usando este convenio a lo largo del curso. En los ejemplos tambin usaremos distinto sangrado (alineacin de los prrafos) para los diferentes elementos del cdigo para mostrar los niveles de anidamiento. Este sangrado no es necesario y el lector puede optar por ignorarlo si decide copiar los ejemplos para verlos en su navegador, sin embargo facilita la lectura del cdigo y no afecta al modo en que los objetos de nuestra pgina sern mostrados

13

PRIMEROS PASOS CON HTML

Conocidas ya las principales caractersticas de HTML estamos listos para aprender sus principales etiquetas y para crear nuestra primera pgina. Estructura de una pgina Todo documento HTML est formado por los bloques que podemos apreciar cada una de ellas.

Estructura de bloques de un documento HTML.

En primer lugar deberemos especificar que el archivo de texto que estamos escribiendo es un documento HTML, para ello usamos las instrucciones de inicio y fin de la etiqueta <html> al principio y al final de la pgina respectivamente: <html> Cdigo de la pgina </html> El cdigo de la pgina est formado a su vez por dos grandes bloques, la cabecera y el cuerpo. La cabecera de la pgina est delimitada por las instrucciones de inicio y fin de la etiqueta head. Estas instrucciones deben estar dentro de la etiqueta HTML de la siguiente manera: <html> <head> Elementos de la cabecera </head> ... Resto de cdigo de la pgina ...

14

</html> En la cabecera de la pgina se introduce toda aquella informacin que afectar a toda la pgina. En un principio esta informacin se limitar al ttulo. Este ttulo se indicar con la etiqueta title usando la siguiente sintaxis: <html> <head> <title>Mi primera pgina WEB</title> </head> </html> El resultado de ver esta pgina con nuestro navegador es el que se observa en la figura 2.2. Como vemos, el rea de la pantalla donde suele estar la pgina est todava vaca, pero si nos fijamos en la cabecera de la ventana del navegador vemos que el ttulo a pasado de ser Microsoft Internet Explorer a "Mi primera pgina WEB - Microsoft Internet Explorer". Es decir el ttulo que le demos a nuestra pgina con la etiqueta <TITLE> pasar a ser el ttulo de la ventana del navegador. El ttulo de la pgina es mostrado en la parte superior de la ventana del navegador.

Adems cuando un usuario vea nuestra pgina y decida incluirla en su lista de webs preferidos con la opcin agregar a favoritos del men Favoritos del navegador (en este caso el explorer) aadir el nombre que le hemos dado a nuestra pgina en dicho men, tal y como podemos apreciar en la figura 2.3. Aunque el nombre con el

15

que se almacena un Favorito puede ser cambiado por el usuario, si hemos puesto un buen ttulo, lo suficientemente descriptivo a cada una de nuestras pginas le evitaremos esa molestia.

Cuando los navegantes incluyan nuestra pgina a su men de favoritos en su men aparecer el ttulo que le hayamos dado a nuestra pgina con la etiqueta <TITLE>

Es importante resaltar que nada de lo que se ponga en la cabecera de la pgina ser mostrado en la zona del navegador dedicada a mostrar el contenido, esto nos induce a pensar que existe otra forma de indicar cmo ser el contenido de la pgina, pues as es: el cuerpo es el siguiente gran bloque de nuestro documento HTML, ste quedar delimitado por la etiqueta body. En su interior introduciremos todos aquellos elementos de los que queremos que conste nuestra pgina como pueden ser testo, imgenes, tablas, etc. Conociendo la etiqueta body podemos ampliar el ejemplo anterior para que incluya texto. <html> <head> <title>Mi primera pgina WEB</title> </head> <body> Hola a todos, como han deducido por el ttulo esta es la

16

Primera pgina web que hago, espero que les guste. Fdo. Jorge </body> </html> podemos apreciar como muestra el Internet Explorer este cdigo. Como vemos todo el texto que hemos escrito entre las instrucciones de inicio y fin forman ahora el cuerpo de nuestra pgina.

En esta figura observamos la zona de la ventana en la que los navegadores mostrarn el texto que pongamos en el cuerpo de la pgina.

Es posible que aunque no incluyamos las etiquetas html o body nuestras pginas sean visualizadas con algunos navegadores. Sin embargo no debemos confiarnos ya que lo ms seguro es que con el resto de navegadores no se vean bien. Por esta razn es muy recomendable usar ambas etiquetas tal y como se ha descrito. Una vez que ya sabemos insertar contenido en una pgina pasaremos a estudiar las diferentes etiquetas que sirven para darle formato a ese contenido.

17

LOS ENCABEZADOS Usualmente un documento tiene, adems de texto llano, una serie de encabezados o titulares. Para ello el lenguaje HTML posee una serie de etiquetas que permiten disponer de titulares de hasta 6 niveles de importancia. Estas etiquetas son: <h1>, <h2>, <h3>, <h4>, <h5> y <H6>. La letra "h" al principio del nombre de estas etiquetas provien de la abreviatura de la palabra inglesa heading que significa encabezado. Siguiendo a la hache hay un nmero del uno al seis que indica la importancia del titular siendo el ms importante el uno y el menos importante el seis. se puede ver un ejemplo de cmo muestra las cabeceras Internet Explorer.

Distintos tipos de encabezados vistos con Microsoft Internet Explorer

<h1>Encabezado 1</h1> <h2>Encabezado 2</h2> <h3>Encabezado 3</h3> <h4>Encabezado 4</h4> <h5>Encabezado 5</h5> <h6>Encabezado 6</h6> Los encabezados empiezan siempre en una lnea nueva y el texto que les sigue comenzar en la lnea siguiente. Adems el navegador podr mostrar un espacio vertical adicional entre el encabezado y el texto anterior y posterior. En l observamos que todos los titulares estn en negrita y el tamao de la fuente usada para cada encabezado va decreciendo conforme decrece la importancia del titular.

18

Pero hay que tener en cuenta, tal y como comentbamos en la introduccin, que este es slo un ejemplo y que otros navegadores pueden mostrar estos encabezados de manera diferente. Por otro lado los navegadores ms usados hoy en da son el Internet Explorer y el Netscape Navigator y es normal prestarles una atencin especial (aunque no

exclusiva). Y en la figura 2.6 podemos apreciar cmo con este ltimo se muestra los encabezados de una manera prcticamente idntica. Por esta razn podemos estar casi seguros de que los usuarios vern los encabezados de la forma mostrada en ambas figuras. Distintos tipos de encabezados vistos con Netscape Navigator

Hay que destacar que los encabezados de h1 a h4 pueden ser usados como ttulos ya que los navegadores suelen usar un tamao de letra mayor que el habitual para mostrarlos. Sin embargo los encabezados h5 y h6 suelen ser mostrados con letra ms pequea an que el texto y por esta razn se usan como notas a pie de pgina o comentarios de poca importancia. El ejemplo mejorado Ahora que sabemos usar encabezados los utilizaremos para mejorar ligeramente nuestra pgina. Ejemplo de pginaWeb con dos tipos de encabezados y dos prrafos.

19

Esta pgina ha sido creada con el siguiente cdigo: <html> <head> <title>Mi primera pgina WEB</title> </head> <body> <h1>Mi primera pgina WEB</h1> <h2>Bienvenida</h2> Hola a todos, como han deducido por el titulo esta es la primera pgina web que hago, espero que les guste. Fdo. Jorge <h2>Proposito</h2> En esta pgina ir practicando con los conocimientos que Adquiera en el curso de HTML </body> </html>

20

CONCLUSIN

Ya sabemos mucho sobre la programacin de pginas. Conocemos las principales caractersticas del lenguaje HTML y qu es necesario para crear un Web. Hemos aprendido adems las bases del lenguaje y hemos creado nuestra primera pgina de ejemplo, con texto y encabezados, y la hemos puesto un ttulo. En la siguiente entrega realizaremos la primera pgina web completa, con prrafos, imgenes e hiperenlaces. Aprenderemos tambin a alinear el texto a los dos lados de la pgina y a combinar esta alineacin con la inclusin de imgenes. Igualmente veremos cmo es posible crear enlaces a distintos puntos de una pgina as como a otras pginas o puntos concretos de estas.

21