Texto Del Manual de HTML

UNIOR Ingeniera de sistemas
Gua de Desarrollo WEB
Ing. Oscar R. Castillo Oros
Gua de Desarrollo WEB

OSCAR ROLANDO CASTILLO OROS
Oscar Rolando Castillo Oros E-mail: oxskar@yahoo.com Cel: 72493207 Diseo e Impresin: Oscar R. Castillo Oros Oruro Bolivia
Contenido
Leccin 1: Introduccin............................................................................. 6 Leccin 2: Qu es HTML? ...................................................................... 7 Leccin 3: Elementos y etiquetas ............................................................. 9 Leccin 4: Crea tu primer sitio web........................................................... 12 Leccin 5: Qu has aprendido hasta ahora? .......................................... 18 Leccin 6: Ms elementos ........................................................................ 20 Leccin 7: Atributos .................................................................................. 24 Leccin 8: Enlaces ................................................................................... 28 Leccin 9: Imgenes ................................................................................ 33 Leccin 10: Tablas ................................................................................... 39 Leccin 11: ... y ms tablas ...................................................................... 43 Leccin 12: Presentacin (CSS) ............................................................... 46 Leccin 13: Sube tus pginas a Internet ................................................... 51 Leccin 14: Estndares web y validacin ................................................. 54 Leccin 15: ltimos consejos ................................................................... 69 Instalacin de Servidor Apache- PHP y MySQL ....................................... 71 Instalacin de Apache ............................................................................. 72 Instalacin de PHP ................................................................................... 82 Modificaciones en Apache para que soporte PHP .................................... 83 Instalacin y configuracin de MySQL ...................................................... 84 Prueba del Servidor con pginas web y Base de Datos ........................... 89 Archivo Registro.html ............................................................................... 91 Mtodo PHP para envi de datos y registro en base de datos. ................ 93 Reporte general conec.php ...................................................................... 94
Leccion 1: Introduccion
En esta primera leccin te presentaremos brevemente las herramientas que necesitas para crear un sitio web.
Qu se necesita?
Lo ms probable es que ya tengas todo lo que necesitas. Ya dispones de un "navegador". El navegador es el programa que te permite navegar y abrir sitios web. En este preciso momento ests viendo esta pgina en el navegador. No importa qu navegador uses. El ms habitual es Microsoft Internet Explorer, pero existen otros como Opera y Mozilla Firefox, y todos ellos se pueden usar indistintamente. Es posible que hayas odo hablar, e incluso llegado a usar, programas como Microsoft FrontPage, Macromedia Dreamweaver e incluso Microsoft Word, que pueden - o afirman poder - crear sitios web. De momento, olvdate de todos estos programas! No son de ninguna ayuda a la hora de aprender a codificar tu propio sitio web. En su lugar, necesitas un sencillo editor de texto. Si utilizas Windows puedes usar el Bloc de notas, que se encuentra normalmente pinchando en el men de Inicio, en la seccin Todos los programas y dentro de sta en la seccin Accesorios: Si no utilizas Windows, puedes usar un editor de texto parecido. Por ejemplo, Pico (para Linux) o TextEdit (para Mac).
El Bloc de notas es un programa de edicin de textos muy bsico, excelente para escribir cdigo fuente ya que no interfiere con lo que vas escribiendo, por lo que te proporciona un control total. El problema con muchos de los programas que proclaman que pueden crear sitios web es que disponen de muchas funciones estndar entre las que puedes elegir; la desventaja es que todo tiene que adaptarse a esas funciones estndar. As pues, este tipo de programas, con frecuencia, no pueden crear un sitio web con la exactitud que uno quiere. O, lo que es ms enojoso, hacen cambios al cdigo escrito a mano. Con el Bloc de notas u otros editores de texto sencillos, uno mismo es el nico culpable de sus xitos o errores. Un navegador y el Bloc de notas (o un editor de texto sencillo similar) es todo lo que necesitas para seguir este tutorial y aprender a crear tus propios sitios web
Leccion 2: Que es HTML?

HTML es la "lengua materna" de tu navegador. Para abreviar una larga historia, podemos decir que un cientfico llamado Tim Berners-Lee invent HTML all por 1990. El objetivo era facilitar a cientficos de diferentes universidades el acceso a los documentos de investigacin de cada uno de ellos. El proyecto obtuvo un xito mucho mayor del que Tim Berners-Lee nunca hubiese llegado a imaginar. Al inventar HTML, este cientfico sent las bases de la web tal y como la conocemos hoy da. HTML es un lenguaje que hace posible presentar informacin (por ejemplo, investigaciones cientticas) en Internet. Lo que ves al visualizar una pgina en Internet es la interpretacin que hace el navegador del cdigo HTML. Para ver el cdigo HTML de una pgina slo tienes que pinchar en la opcin "Ver" de la barra de mens y elegir "Cdigo fuente" (en Internet Explorer).
Para el ojo inexperto, el cdigo HTML parece complicado, pero este tutorial te ayudar a que le encuentres todo su sentido.
Para qu puedo usar HTML?

Si quieres crear sitios web, no hay otra solucin que aprender HTML. Incluso si usas un programa como Dreamweaver, por ejemplo, para la creacin de sitios web, poseer unos conocimientos bsicos de HTML hacen la vida mucho ms fcil y tus sitios web mucho mejores. La buena noticia es que HTML es fcil de aprender y de usar. En las dos prximas lecciones ya habrs aprendido cmo crear tu primer sitio web. HTML se usa para crear sitios web. As de sencillo!
Qu representan las siglas H-T-M-L?

HTML es la abreviatura de "HyperText Mark-up Language", es decir, "Lenguaje de marcado hipertextual", y esto ya es ms de lo que necesitas saber
a estas alturas. En todo caso, para mantener un buen orden, vamos a explicar qu significa con mayor detalle.
Hiper es lo contrario de lineal. En los buenos viejos tiempos -cuando un ratn era un animalillo que persegua un gato- los programas de ordenador se ejectutaban de forma lineal: cuando el programa haba ejecutado una accin segua hasta la siguiente lnea, y despus de sta a la siguiente, y a la siguiente, ... HTML, sin embargo, es diferente: se puede ir donde uno quiera cuando uno quiera. Por ejemplo, no es necesario visitar MSN.com antes de visitar HTML.net. Texto se explica por s solo. Marcado es lo que haces con el texto. Se marca el texto del mismo modo que en un programa de edicin de textos con encabezados, vietas, negrita, etc. Lenguaje es lo que es HTML. Este lenguaje hace uso de muchos trminos en ingls.
Por medio de este tutorial aprenders lo que se ha dado en llamar XHTML (Extensible HyperText Mark-up Language, es decir, Lenguaje de marcado hipertextual extensible) que, en pocas palabras, es una forma de escribir HTML nueva y mejor estructurada. Ahora que ya sabes qu representan las siglas HTML (y XHTML), nos ponemos en marcha y empezamos a crear sitios web.
Leccion 3: Elementos y etiquetas

Los elementos proporcionan la estructura al documento HTML e indican al navegador cmo quieres que se presente tu sitio web. Por lo general, los elementos estn formados por una etiqueta de inicio, el contenido, y una etiqueta de cierre.
"Etiquetas?"
Las etiquetas son marcas que se usan para sealar el inicio y el fin de un elemento. Todas las etiquetas comparten el mismo formato: empiezan con el signo menor que "<" y terminan con el signo mayor que ">". Por lo general, hay dos tipos de etiquetas: la etiquetas de inicio, por ejemplo, <html>, y las etiquetas de cierre, por ejemplo, </html>. La nica diferencia entre la etiqueta de inicio y la de cierre es la barra oblicua "/". El contenido queda etiquetado al colocarlo entre una etiqueta de inicio y una etiqueta de cierre. HTML trata esencialmente de elementos. Aprender HTML consiste en aprender a usar diferentes etiquetas.
Y si vemos algunos ejemplos?

Vale. El elemento em se usa para dar enfasis al texto. Todo el texto entre la etiqueta de inicio <em> y la etiqueta de cierre </em> aparecer enfatizado en el navegador. ("em" es la abreviatura de "emphasis"). Ejemplo 1:
<em>Texto con nfasis.</b>
que se ver as en el navegador: Texto con nfasis. Los elementos h1, h2, h3, h4, h5 and h6 se utilizan para crear encabezados ("h" es la abreviatura de "heading"), donde h1 representa el primer nivel y,
10
normalmente, el texto ms grande, h2 es el segundo nivel y, normalmente, es un texto algo ms pequeo, y h6 es el sexto y ltimo nivel en la jerarqua de los encabezados y es, normalmente, el texto ms pequeo. Ejemplo 2:
<h1>Este es un encabezado de primer nivel</h1> <h2>Este es un encabezado de segundo nivel</h2>
que se ver as en el navegador:
Este es un encabezado de primer nivel

Este es un encabezado de segundo nivel As pues, siempre son necesarias las etiqueta de inicio y de cierre?
Como se dice, siempre hay una excepcin que confirma la regla, y en HTML la excepcin son unos cuantos elementos que se abren y cierran con la misma etiqueta. Estos elementos que se denominan elementos vacos no se asocian a un pasaje especfico del texto sino que son ms bien etiquetas aisladas; por ejemplo, un salto de lnea tiene este formato: <br />.
Las etiquetas hay que escribirlas en mayscula o en minscula?
11
A la mayora de los navegadores les da igual si se escriben en mayscula, minscula o una mezcla de las dos. <HTML>, <html> or <HtMl> normalmente tendrn el mismo resultado. Sin embargo, el modo correcto es escribir las etiquetas en minscula. As que acostmbrate a escribir las etiquetas en minscula.
Y dnde coloco todas estas etiquetas?

Las etiquetas se escriben dentro de un documento HTML. Todo sitio web contiene uno o ms documentos HTML. Cuando navegas por la web, no haces otra cosa que abrir diferentes documentos HTML. Si continas ahora con la siguiente leccin, en unos diez minutos habrs creado tu primer sitio web.
Leccion 4: Crea tu primer sitio web

Con lo que ya has aprendido en las lecciones anteriores, slo te quedan unos minutos para crear tu primer sitio web.
Cmo?
En la leccion 1 vimos qu se necesita para crear un sitio web: un navegador y el Bloc de notas (o un editor de texto similar). Puesto que ests leyendo esto, lo ms probable es que ya tengas abierto el navegador. Lo nico que necesitas es abrir otra ventana del navegador de forma que puedas leer este tutorial y veas cmo va quedando tu nuevo sitio web al mismo tiempo.
12
Abre tambin el Bloc de notas (que se encuentra en el men de Inicio, Todos los programas, en la seccin Accesorios):
Y qu puedo hacer?
Empecemos con algo sencillo. Que te parece una pgina que diga: "Hurra! Esta es mi primera pgina web." Sigue leyendo y vers qu sencillo es. HTML is sencillo y lgico. El navegador lee el cdigo HTML igual que lo haces t: de arriba abajo y de izquierda a derecha. As pues, todo
13
documento HTML empieza con lo que debera aparecer en primer lugar en la pgina y termina con lo que debera ir en ltimo lugar. Lo primero que tienes que hacer es decirle al navegador que le "hablars" usando el lenguaje HTML. Esto se consigue con la etiqueta <html> (sin sorpresas, no?). As que antes de hacer cualquier otra cosa, escribe "<html>" en la primera lnea del documento creado con el Bloc de notas. Como recordars de las lecciones anteriores, <html> es una etiqueta de inicio y tiene que cerrarse con su correspondiente etiqueta de cierre cuando hayas terminado de escribir el cdigo HTML. As que para no olvidar la etiqueta de cierre del elemento HTML escribe "</html>" un par de lneas ms abajo, y entre ambas etiquetas <html> y </html> escribe el resto del documento. Lo siguiente que necesita el documento es una "cabecera", que proporcionar informacin relativa a este mismo documento, y un "cuerpo" donde se incluir el contenido del documento. Puesto que HTML es de lo ms lgico, la cabecera (es decir, las etiquetas <head> y </head>) se encuentra encima del cuerpo (o sea, encima de las etiquetas <body> y </body>). El documento debera presentar ahora este aspecto:
<html> <head> </head> <body> </body> </html>
14
Presta atencin a cmo hemos estructurado las etiquetas introduciendo nuevas lneas (usando la tecla Enter) al igual que hemos usado sangrado (utilizando la tecla Tab). En principio, da igual cmo estructures el documento HTML; sin embargo, para que te sirva de ayuda tanto para ti y como para otros a la hora de interpretar el cdigo fuente, y con el fin tener una buena visin de conjunto, es recomendable estructurar el cdigo HTML de una forma ntida, con saltos de lnea y sangrados, como en el ejemplo anterior. Si el documento se parece al del ejemplo anterior, ya has creado tu primer sitio web: un sitio web especialmente aburrido y en modo alguno parecido a lo que soabas cuando empezaste este tutorial, pero, con todo y con eso, ya es algo que parece un sitio web. El cdigo que acabas de crear te servir como plantilla bsica para todos tus futuros documentos HTML.
Hasta ahora todo va bien, pero cmo aado contenido a mi sitio web?
Como aprendiste anteriormente, todo documento HTML tiene dos partes: un encabezado y un cuerpo. En la seccin del encabezado se incluye informacin sobre la propia pgina, mientras que el cuerpo contiene la informacin que constituye la pgina en s.. Por ejemplo, si quieres poner a la pgina un ttulo que aparecer en la barra de ttulos del navegador, deberas hacerlo en la seccin del encabezado, es decir dentro de las etiquetas "head". El elemento que se usa para el ttulo es title, o sea, escribe el ttulo de la pgina entre la etiqueta de inicio <title> y la etiqueta de cierre </title>:
<title>Mi primer sitio web</title>
Ten en cuenta que este ttulo no aparecer en la pgina en s. Cualquier cosa que quieras que aparezca en la pgina es contenido y debe, por la tanto, aadirse entre las etiquetas <body> y </body>.
15
Como lo prometido es deuda, vamos a conseguir que la pgina nos diga: "Hurra! Este es mi primer sitio web." Este es el texto que queremos transmitir, y, por lo tanto, pertenece a la seccin del cuerpo. As pues, en la seccin del cuerpo, escribe lo siguiente:
<p>Hurra! Este es mi primer sitio web.</p>
La p de <p> es la abreviatura de "prrafo", que es exactamente lo que es: un prrafo de texto. El documento HTML debera tener ahora este aspecto:
<html> <head> <title>Mi primer sitio web</title> </head> <body> <p>Hurra! Este es mi sitio web.</p> </body> </html>
Hecho! Acabas de crear ahora mismo tu primer sitio web de verdad! Lo siguiente que hay que hacer es guardarlo en el disco duro y luego abrirlo en el navegador:

En el Bloc de notas elige "Guardar como..." del men "Archivo" en el men principal. Elige "Todos los archivos" en la caja "Tipo". Esto es muy importante, pues, de lo contrario, se guardar como documento de texto y no como un documento HTML. 16
Ahora guarda el documento como "pagina1.htm" (la terminacin ".htm" indica que es un documento HTML; con la terminacin ".html" se consigue el mismo resultado. Personalmente, siempre uso ".htm"; t puedes elegir cualquiera de las dos extensiones, segn prefieras). Da igual dnde guardes el documento en el disco duro, siempre que recuerdes dnde lo hiciste para poder recuperarlo con posterioridad.
Ahora pasamos al navegador:

En el men principal elige "Abrir" del men "Archivo". Haz clic en el botn "Examinar" de la caja que aparece. Ahora localiza el documento HTML y haz clic en "Abrir".
17
En el navegador debera poder leerse ahora: "Hurra! Este es mi primer sitio web." Enhorabuena!
Leccion 5: Que has aprendido hasta ahora?

Empieza siempre con la plantilla bsica que creamos en la leccin anterior:
<html> <head> <title></title> </head> <body> </body> </html>
En la seccin del encabezado, incluye siempre un ttulo: <title> El ttulo de la pgina </title>. Fjate cmo aparece el ttulo en la esquina superior izquierda del navegador:
18
El ttulo es especialmente importante porque los motores de bsqueda (por ejemplo, Google) lo utilizan para indexar tu sitio y porque aparece reflejado en los resultados de la bsqueda.
En la seccin del cuerpo, se escribe el contenido propiamente dicho de la pgina. Ya conoces algunos de los elementos ms importantes:
<p>Se usa para <em>Muestra el <h1>Encabezado <h2>Encabezado <h3>Encabezado escribir prrafos</p> texto enfatizado</em> de nivel 1</h1> de nivel 2</h2> de nivel 3</h3>
Recuerda: el nico modo de aprender HTML es utilizando el mtodo de la prueba y el error. Pero no te preocupes, en modo alguno vas a destrozar tu ordenador o Internet. As que sigue experimentando; es el mejor modo de adquirir experiencia.
19
Leccion 6: Mas elementos

Has conseguido crear algunas pginas t solo? Si no es as, aqu tienes un ejemplo:
<html> <head> <title>Mi sitio web</title> </head> <body> <h1>Encabezado de nivel <p>texto, texto, texto, <h2>Encabezado de nivel <p>texto, texto, texto, </body> </html> 1</h1> texto</p> 2</h2> texot</p>
Y ahora qu?
Pues ha llegado el momento de aprender siete nuevos elementos. Del mismo modo que enfatizamos el texto al incluirlo entre la etiqueta de inicio <em> y la etiqueta de cierre </em>, se puede acentuar ms ese nfasis usando la etiqueta de inicio <strong> y la etiqueta de cierre </strong>.
20
Ejemplo 1:
<strong>nfasis acentuado</strong>
y se ver as en el navegador: nfasis acentuado. Asimismo, puedes hacer que el texto sea ms pequeo usando small: Ejemplo 2:
<small>Este texto tendra que ser un poco ms pequeo.</small>
y se visualizar as en el navegador: Este texto tendra que ser un poco ms pequeo.
Puedo usar varios elementos a la misma vez?

S, se pueden usar fcilmente varios elementos a la vez siempre que evitemos elementos superpuestos. Esto lo entenderemos mejor con un ejemplo: Ejemplo 3: Si quieres que el texto aparezca enfatizado y ms pequeo, se debe hacer de la siguiente manera:
<em><small>Texto enfatizado ms pequeo</small></em>
y NO de la siguiente manera:
<em><small>Texto enfatizado ms pequeo</em></small>
21
La diferencia estriba en que, en el primer ejemplo, cerramos en ltimo lugar el elemento que abrimos primero. De este modo evitamos confundir al navegador y a nosotros mismos.
Ms elementos!
Como mencionbamos en la leccin 3, existen una serie de elementos que se abren y cierran con la misma etiqueta. Estos elementos conocidos como elementos vacos no estn relacionados con un pasaje especfico del texto sino que son ms bien etiquetas aisladas. Un ejemplo de dichas etiquetas es <br /> que crea un salto de lnea forzado. Ejemplo 4:
Algo de texto <br />y algo ms de texto en una nueva lnea
que se visualizar as en el navegador: Algo de texto y algo ms texto en una nueva lnea Fjate en que la etiqueta parece una forma contrada de la etiqueta de inicio y de la etiqueta de cierre con un espacio en blanco y una barra al final: <br />. Otro elemento que se abre y cierra con la misma etiqueta es <hr />, que se usa para trazar una lnea horizontal ("hr" es la abreviatura de "horizontal rule"): Ejemplo 5:
<hr />
22
Otros ejemplos de elementos que necesitan tanto la etiqueta de inicio como de cierre -la mayora de elementos cumplen esta norma- son: ul, ol y li. Estos tres elementos se usan para crear listas.
ul
is la forma abreviada de "unordered list" (es decir, lista no ordenada) e inserta vietas para cada elemento. ol es la abreviatura de "ordered list" (es decir, lista ordenada) y numera cada elemento de la lista. Para crear elementos de lista use la etiqueta li ("list item", o sea, elemento de lista). Parece algo confuso, no? Veamos, entonces, algunos ejemplos: Ejemplo 7:
<ul> <li>Un elemento de lista</li> <li>Otro elemento de lista</li> </ul>

Un elemento de lista Otro elemento de lista
Ejemplo 8:
<ol> <li>Primer elemento de lista</li> <li>Segundo elemento de lista</li> </ol>
que se visualizar as en el navegador: 1. Primer elemento de lista 2. Segundo elemento de lista

23
Eso es todo?
De momento, s. Una vez ms, experimenta y crea tus propias pginas usando alguno de los siete nuevos elementos que acabas de aprender en esta leccin:
<strong>nfasis ms fuerte</strong> <small>Texto pequeo</small> <br />Salto de lnea <hr />Lnea horizontal <ul>Lista sin ordenar</ul> <ol>Lista ordenada</ol> <li>Elemento de lista</li>
Leccion 7: Atributos
Es posible aadir atributos a determinados elementos.
Y qu es un atributo?
Como recordars, los elementos sirven para estructurar el contenido de todo el documento HTML e indican al navegador cmo debera presentarse el sitio web (por ejemplo, <br /> informa al navegador para que introduzca un salto de lnea). En algunos elementos se puede aadir ms informacin. Esa informacin extra se denomina atributo. Ejemplo 1:
<h2 style="background-color:#ff0000;">Mi amistad con HTML</h2>
Los atributos se incluyen siempre dentro de la etiqueta de inicio y llevan inmediatamente detrs el signo de igual ("=") con los valores de dichos atributos entre comillas (""). El punto y coma que sigue al atributo se usa para
24
separar los diferentes comandos de estilo. Ms tarde volveremos a tratar sobre este tema. Existen muchos atributos diferentes. El primero que vas a aprender es style. Con el atributo style se puede aadir efectos de presentacin a tu sitio web. Por ejemplo, un color de fondo: Ejemplo 2:
<html> <head> </head> <body style="background-color:#ff0000;"> </body> </html>
El cdigo anterior mostrara un pgina con fondo rojo en el navegador; adelante, prubalo t mismo. En unos minutos explicaremos como ms detalle cmo funciona el sistema de colores en HTML. Ten en cuenta que algunas etiquetas y atributos usan ortografa estadounidense, es decir, "color" en vez de "colour". Es importante que utilices la misma ortografa que usamos en los ejemplos de este tutorial; de otro modo, los navegadores no sern capaces de interpretar el cdigo. Adems, no olvides cerrar siempre las comillas detrs del atributo.
25
Qu ocurri para que la pgina apareciera en color rojo?

En el ejemplo anterior, hicimos referencia al color de fondo usando el cdigo "#ff0000". Este es el cdigo de color para el rojo en el sistema numrico hexadecimal (HEX). Cada color tiene su propio nmero hexadecimal.. Y estos son algunos ejemplos: Blanco:#ffffff Negro:#000000(ceros) Rojo:#ff0000 Azul:#0000ff Verde:#00ff00 Amarillo: #ffff00 El cdigo de color hexadecimal se compone de una almohadilla, "#", y seis dgitos (del 0 al 9) o letras (de la A a la F). Existen ms de 1.000 cdigos hexadecimales y no es fcil calcular qu cdigo hexadecimal corresponde a un color especficoTambin se pueden usar los nombres en ingls para los colores ms comunues (white: blanco, black: negro, red: rojo, blue: azul, green: verde y yellow: amarillo). Ejemplo 3:
<body style="background-color: red;">
De momento, ya vale de colores. Volvamos a los atributos.
Qu elementos pueden usar atributos?

Son varios los atributos diferentes que se pueden aplicar a la mayora de los elementos.
26
Por ejemplo, usars con frecuencia atributos en la etiqueta body, mientras que, por ejemplo, raras veces usars atributos en la etiqueta br, ya que un salto de lnea es un salto de lnea que no tiene parametros que ajustar. Al igual que existen muchos elementos, existen tambin muchos y diferentes atributos. Algunos atributos estn hechos a la medida para un elemento concreto, mientras que otros se pueden usar para muchos elementos diferentes. Y viceversa: algunos elementos slo pueden contener un tipo de atributo mientras otros pueden contener muchos. Puede sonar algo confuso, pero una vez que te acostumbres a los diferentes atributos, es en realidad de lo ms lgico y pronto vers qu fcil es usarlos y cuntas posibilidades brindan. Este tutorial te presentar los atributos ms importantes.
Y de qu partes se compone exactamente un elemento?

Por lo general, todo elemento se compone de una etiqueta de inicio, sin atributos o con uno o ms atributos, el contenido correspondiente y una etiqueta de cierre. As de sencillo. Observa la imagen inferior.
27
Leccion 8: Enlaces
Qu necesito para crear un enlace?
Para crear enlaces se usa lo que siempre usamos al codificar HTML: un elemento. Un sencillo elemento con un atributo y podrs enlazar con cualquier cosa y con todo. Vas a ver ahora mismo un ejemplo de cmo se codificara un enlace a HTML.net:
Ejemplo 1:
<a href="http://www.html.net/">Desde HTML.net</a> aqu enlazamos con
que se visualizar as en el navegador:

Desde aqu enlazamos con HTML.net
El elemento a es la abreviatura de "anchor" (ancla, en espaol). Y el atributo href es la abreviatura de "hypertext reference" (es decir, referencia hipertextual), que especifica hacia dnde nos dirige el enlace; normalmente, una direccin de internet o un nombre de fichero. En el ejemplo anterior el atributo href contiene el valor "http://www.html.net", que es la direccin completa de HTML.net y que se denomina URL (Uniform Resource Locator; en espaol, localizador de recursos uniforme). Ten en cuenta que "http://" siempre debe incluirse en las URLs. El texto "Desde aqu enlazamos con HTML.net" es el que aparece en el navegador como enlace. Recuerda cerrar el elemento con la etiqueta de cierre </a>.
28
Y se pueden crear enlaces entre mis propias pginas?

Si quieres crear enlaces entre las pginas de un mismo sitio web, no es necesario incluir la direccin completa (el URL) del documento. Por ejemplo, si has creado dos pginas (llammoslas pagina1.htm y pagina2.htm) y las has guardado en la misma carpeta, puedes enlazar una pgina con la otra con slo escribir el nombre del fichero en el enlace. Si este es el caso, enlazar la pagina1.htm con la pagina2.htm tendra el siguiente aspecto:
Ejemplo 2:
<a href="pagina2.htm">Haz clic para ir a la pgina 2</a>
Si la pgina 2 estuviera en una subcarpeta (llamada "subcarpeta"), el enlace tendra el siguiente aspecto:
Ejemplo 3:
<a href="subcarpeta/pagina2.htm">Haz clic para ir a la pgina 2</a>
En sentido inverso, enlazar desde la pgina 2 (en la subcarpeta) a la pgina 1 se hara usando con el siguiente cdigo:
Ejemplo 4:
<a href="../pagina1.htm">Enlace a la pagina1</a>
Los dos puntos con la barra, "../", hacen referencia a una carpeta que se encuentra un nivel por encima de donde se encuentra el fichero desde el que se crea el enlace. Siguiendo este mismo sistema, se puede sealar a dos (o ms) carpetas en niveles superiores escribiendo "../../". Has captado cmo funciona el sistema? De forma alternativa, siempre puedes escribir la direccin completa del fichero (el URL).
29
Y se pueden crear enlaces internos dentro de una misma pgina?

Tambin puedes crear enlaces internos dentro de una misma pgina; por ejemplo, una tabla de contenidos en la parte superior de la pgina con enlaces a cada captulo que se encuentra ms abajo. Todo lo que necesitas es usar un atributo muy til llamado id (identification, en ingls; es decir, identificador) y el smbolo "#", conocido como almohadilla. Usa el atributo id para marcar el elemento con el que quieras enlazar. Por ejemplo:
<h1 id="encabezado1">Primer encabezado</h1>
Ahora ya puedes crear un enlace a dicho elemento usando la almohadilla "#" en el atributo "href" del elemento a. El smbolo "#" debe ir seguido del id de la etiqueta con la que quieres enlazar. Por ejemplo:
<a href="#encabezado1">Enlace con el primer encabezado</a>
Vamos a ver un ejemplo para que todo quede claro:

Ejemplo 5:
<html> <head> </head> <body> <p><a href="#encabezado1">Enlace con el primer encabezado</a></p> <p><a href="#encabezado2">Enlace con el segundo encabezado</a></p>
30
<h1 id="encabezado1">Primer encabezado</h1> <p>Texto texto texto texto</p> <h1 id="encabezado2">Segundo encabezado</h1> <p>Texto texto texto texto</p> </body> </html>
que se visualizar as en el navegador (haz clic en los dos enlaces): Enlace con el primer encabezado Enlace con el segundo encabezado
Primer encabezado
Texto texto texto texto
Segundo encabezado
Texto texto texto texto (Nota: El atributo "id" debe empezar con una letra)
Puedo crear enlaces a otras cosas?

Tambin puedes crear enlaces a una direccin de correo electrnico. Se hace casi igual que cuando se crea un enlace a un documento:
31
Ejemplo 6:
<a href="mailto:nobody@html.net">Enve un mensaje a nadie en HTML.net</a>
que se visualizar en el navegador as: Enve un mensaje a nadie en HTML.net La nica diferencia entre un enlace a una direccin de correo electrnico y un enlace a un fichero consiste en que en lugar de escribir la direccin del documento, se escribe: mailto: seguido de dicha direccin de correo electrnico. Al hacer clic sobre el enlace se abre el programa de correo por defecto con un nuevo mensaje en blanco dirigido a la direccin de correo especificada. Tngase en cuenta que esta fncin slo funcionar si tienes instalado un programa de correo electrnico en tu ordenador. Prubalo!
Hay ms atributos que debera conocer?

Para crear un enlace, siempre tienes que usar el atributo href. Adems, tambin puedes poner un ttulo (atributo title) al enlace:
Ejemplo 7:
<a href="http://www.html.net/" title="Visita HTML.net y aprende HTML">HTML.net</a>
que se ver as en el navegador: HTML.net El atributo title se usa para incluir una breve descripcin del enlace. Si se coloca el cursor sobre el enlace -sin pulsarlo- aparecer el texto "Visita HTML.net y aprende HTML".
32
Leccion 9: Imagenes
Insertar imgenes es bastante sencillo hacerlo. Todo lo que necesitas es un nuevo elemento: Ejemplo 1:
<img src="burger.jpg" alt="hamburguesa" />
Lo que hay que hacer es indicar al navegador que quieres insertar una imagen, usando el elemento img y, luego, dnde est localizada por medio del atributo src (abreviatura de "source", es decir, fuente). Fjate cmo el elemento img se abre y cierra usando la misma etiqueta. Al igual que la etiqueta <br />, no est relacionado con un pasaje especfico de texto. "burger.jpg" es el nombre del fichero de imagen que quieres insertar en la pgina. ".jpg" es el tipo de fichero de la imagen. Al igual que la extensin ".htm" muestra que un fichero es un documento HTML, la extensin ".jpg" indica al navegador que dicho fichero es una imagen. Hay tres clases diferentes de tipos de fichero de imagen que puedes insertar en tus pginas:
33
GIF (Graphics Interchange Format) JPG o JPEG (Joint Photographic Experts Group) PNG (Portable Network Graphics)
Normalmente, las imgenes GIF son mejores para grficos y dibujos, mientras que las imgenes JPEG son mejores para fotografas. Esto es as por dos razones; la primera es que las imgenes GIF slo constan de 256 colores, mientras que las imgenes JPEG constan de millones de colores, y la segunda es que el formato GIF es mejor que el formato JPEG a la hora de comprimir imgenes sencillas, ya que ste ltimo est optimizado para imgenes ms complejas. Cuanto mejor sea la compresin, y ms pequeo el tamao del fichero de imagen, ms rpida se cargar la pgina. Como sabrs por experiencia propia, las pginas innecesariamente "pesadas" pueden ser extremadamente irritantes para el usuario. Tradicionalmente, los formatos GIF y JPEG han sido los dos tipos de imagen dominantes, pero ltimamente el formato PNG ha ganado cada vez ms popularidad (principalmente a expensas del formato GIF). El formato PNG contiene, en muchos aspectos, lo mejor de ambos formatos: millones de colores y una compresin efectiva.
Dnde puedo conseguir mis imgenes?

Para crear tus propias imgenes, necesitas un programa de edicin de imgenes. Un programa de edicin de imgenes es una de las herramientas esenciales que necesitars para crear bonitos sitios web.. Por desgracia, Windows, al igual que otros sistemas operativos, no incluye un buen programa de edicin de imgenes. As pues, podras pensar en invertir algo de dinero en uno de estos programas: Paint Shop Pro, Photoshop o Macromedia Fireworks, que son tres de los mejores programas de edicin de imgenes del mercado en la actualidad.
34
Sin embargo, como ya dijimos anteriormente, no ser necesario comprar programas caros para completar este tutorial. Por ahora, puedes descargar el excelente programa de edicin de imgenes IrfanView que es un programa que se denomina "freeware" y, por lo tanto, no cuesta nada. O bien puedes tomar prestadas imgenes de otros sitios descargndolas. Pero ten cuidado de no infringir derechos de autor al descargar dichas imgenes. Con todo, es til saber cmo descargar las imgenes, as que aqu te mostramos cmo hacerlo: 1. Haz clic con el botn derecho sobre la imagen que quieras descargar de internet. 2. Elige "Guardar imagen como..." del men emergente. 3. Elige la carpeta de tu ordenador donde quieres guardar la imagen y pulsa en "Guardar". Haz esto con la imagen de ms abajo y gurdala en tu ordenador en el mismo lugar que los documentos HTML. (Observa que el logo se guarda como un archivo PNG: logo.png):
Ahora ya puedes insertar la imagen en una de tus propias pginas. Prubalo.
Eso es todo lo que necesito saber sobre imgenes?

Hay unas cuantas cosas ms que deberas saber respecto a las imgenes. En primer lugar, puedes insertar fcilmente imgenes localizadas en otras carpetas, o incluso imgenes localizadas en otros sitios web:
35
Ejemplo 2:
<img src="imagenes/logo.png" />
Ejemplo 3:
<img src="http://www.html.net/logo.png" />
En segundo lugar, las imgenes se pueden usar como enlaces: Ejemplo 4:

<a href="http://www.html.net"> <img src="logo.png" /></a>
Hay ms atributos que tenga que conocer?

Siempre hay que usar el atributo src, que indica al navegador dnde est localizada la imagen. Aparte de ste, hay otros atributos que pueden ser tiles a la hora de insertar imgenes. El atributo alt se usa para ofrecer una descripcin alternativa de la imagen si, por alguna razn, la misma no se puede mostrar al usuario. Esto es especialmente importante para las personas con discapacidades visuales, o si la pgina se carga de manera muy lenta. Por lo tanto, usa siempre el atributo alt: Ejemplo 5:
<img src="logo.gif" alt="Logo de HTML.net" />
Algunos navegadores muestran el texto del atributo alt como una pequea caja desplegable cuando el usuario coloca el cursor encima de la imagen. Ten en cuenta que el objetivo de usar el atributo alt es proporcionar una descripcin alternativa de la imagen. El atributo alt no debera usarse para crear mensajes desplegables especiales dirigidos al usuario, ya que, en ese
36
caso, las personas con discapacidades visuales oirn el mensaje sin saber cmo es la imagen. El atributo title se puede usar para aadir informacin a la imagen: Ejemplo 6:
<img src="logo.gif" title="Aprende HTML con HTML.net" />
que se ver de la siguiente manera en el navegador:
Si colocas el cursor sobre la imagen -sin llegar a hacer clic- vers aparecer el texto "Aprende HTML con HTML.net" en forma de caja desplegable. Otros dos atributos importantes son width y height: Ejemplo 7:
<img src="logo.png" width="141" height="32" />
Los atributos width y height se pueden usar para establecer la altura y la anchura de una imagen. El valor usado para establecer la altura y la anchura se expresa en pxeles. Los pxeles son unidades de medida utilizadas para medir la resolucin de la pantalla. (La resolucin de pantalla ms habitual es 1024 x 768 pxeles). A diferencia de los centimetros, los pxeles son unidades de medida relativas que dependen de la resolucin de la pantalla. Para un usuario con una
37
resolucin de pantalla alta, 25 pxeles pueden corresponder a 1 centmetro, mientras que los mismos 25 pxeles en una resolucin de pantalla baja pueden corresponder a 1,5 centmetros sobre la pantalla. Si no se establece la anchura y la altura, la imagen se insertar con su tamao real. Sin embargo, con la anchura y la altura se puede manipular el tamao: Ejemplo 8:
<img src="logo.gif" width="32" height="32" />
Sin embargo, hay que tener en cuenta que el tamao real en kilobytes de la imagen seguir siendo el mismo, por lo que la imagen tardar en cargarse el mismo tiempo que antes, aunque aparezca ms pequea en la pantalla. Por lo tanto, nunca deberas disminuir el tamao de la imagen usando los atributos width y height. En vez de hacer esto, siempre deberas redimensionar las imgenes usando un programa de edicin de imgenes con el fin de que las pginas sean ms ligeras y rpidas de cargar. Dicho esto, sigue siendo buena idea usar los atributos width y height porque, de este modo, el navegador podr detectar cunto espacio necesitar la imagen en la presentacin final de la pgina antes de que la imagen se haya descargado totalmente. Esto permite que el navegador componga correctamente la pgina con mayor rapidez.
38
Leccion 10: Tablas

Las tablas se usan cuando necesitamos mostrar "datos en formato de tabla", o sea, informacin que se presenta de forma lgica en filas y columnas.
Es dficil?
Construir tablas con HTML puede parecer, al principio, complicado, pero si no pierdes la calma y andas con ojo, en realidad es de lo ms lgico: como todo en HTML. Ejemplo 1:
<table> <tr> <td>Celda 1</td> <td>Celda 2</td> </tr> <tr> <td>Celda 3</td> <td>Celda 4</td> </tr> </table>
que se ver asi en el navegador: Celda 1 Celda 2 Celda 3 Celda 4
39
Qu diferencia hay entre <tr> y <td>?

Como observars en el ejemplo anterior, ste es probablemente el ejemplo ms complicado de cdigo HTML que hemos escrito hasta el momento. Vamos a desglosarlo y a explicar las diferentes etiquetas: Para insertar tablas se usan 3 elementos diferentes:

La etiqueta de inicio <table> y la etiqueta de cierre </table> inician y finalizan la tabla. Lgico. <tr> es la abreviatura de "table row" (es decir, fila de la tabla) e inicia y finaliza las filas horizontales. Lgico tambin. <td> es la abreviatura de "table data" (es decir, datos de la tabla). Esta etiqueta inicia y finaliza cada una de las celdas que componen las filas de la tabla. Todo sencillo y lgico.
Y esto es lo que ocurre en el ejemplo 1: la tabla empieza con <table>, seguida de <tr>, que indica el inicio de una nueva fila. Se insertan dos celdas en esta fila: <td>Celda 1</td> y <td>Celda 2</td>. La fila se cierra a continuacin con </tr> e inmediatemente despus se inicia una nueva fila con <tr>. La nueva fila contiene dos celdas. Y por fin la tabla se cierra con </table>. Vamos a dejarlo claro: las filas son lneas horizontales de celdas y las columnas son lneas verticales de celdas: Celda 1 Celda 2 Celda 3 Celda 4 La celda 1 y la Celda 2 forman una fila, mientras que la Celda 1 y la Celda 3 forma una columna. En el ejemplo anterior, la tabla consta de dos filas y dos columnas. Sin embargo, una tabla puede contener una cantidad ilimitada de filas y columnas.
40
Ejemplo 2:
<table> <tr> <td>Celda <td>Celda <td>Celda <td>Celda </tr> <tr> <td>Celda <td>Celda <td>Celda <td>Celda </tr> <tr> <td>Celda <td>Celda <td>Celda <td>Celda </tr> </table> 9</td> 10</td> 11</td> 12</td> 5</td> 6</td> 7</td> 8</td> 1</td> 2</td> 3</td> 4</td>
que se visualizar as en el navegador: Celda 1 Celda 2 Celda 3 Celda 4 Celda 5 Celda 6 Celda 7 Celda 8 Celda 9 Celda 10 Celda 11 Celda 12
Existe algn atributo para el elemento table?

Por supuesto, hay atributos. Por ejemplo, el atributo border se usa para especificar el grosor del borde de la tabla:
41
Ejemplo 3:
<table border="1"> <tr> <td>Celda 1</td> <td>Celda 2</td> </tr> <tr> <td>Celda 3</td> <td>Celda 4</td> </tr> </table>
Que se ver as en el navegador: Celda 1 Celda 2 Celda 3 Celda 4 El grosor de la tabla se especifica en pxeles Al igual que con las imgenes, se puede establecer el ancho de la tabla en pxeles, o, de modo alternativo, por medio de un porcentaje del ancho de la pantalla: Ejemplo 4:
<table border="1" width="30%">
La tabla del anterior ejemplo se mostrar en el navegador como una tabla con un ancho equivalente al 30 % de la pantalla. Prubalo.
42
Hay algn otro atributo?

Para las tablas existen muchos atributos. Aqu mostramos dos ms:
align:
especifica la alineacin horizontal del contenido de toda la tabla, de una fila o de una sola celda. Por ejemplo, left, center o right. valign: especifica la alineacin vertical del contenido de una celda. Por ejemplo, top, middle o bottom.
Ejemplo 5:
<td align="right" valign="top">Celda 1</td>
Qu puedo insertar en las tablas?

En teora, se puede colocar cualquier cosa dentro de una tabla: texto, enlaces, imgenes, ... Sin embargo, las tablas se usan para presentar datos en forma de tabla (es decir, datos que se pueden presentar de forma coherente en columnas y filas), as que evita colocar cosas dentro de una tabla porque quieras colocarlas una al lado de otra.
Leccion 11: ... y mas tablas

El ttulo "... y ms tablas" puede sonar algo aburrido. Pero mralo por el lado bueno; cuando domines las tablas, nada de nada en HTML te podr dejar K.O.
Entonces, qu ms queda por conocer?
43
Los atributos colspan y rowspan se usan cuando queremos crear tablas elaboradas.
Colspan
es la abreviatura de "column span" (expandir columna). Colspan se usa con la etiqueta <td> para especificar cuntas columnas ocupar la celda: Ejemplo 1:
<table border="1"> <tr> <td colspan="3">Celda 1</td> </tr> <tr> <td>Celda 2</td> <td>Celda 3</td> <td>Celda 4</td> </tr> </table>

Celda 1 Celda 2 Celda 3 Celda 4
Al establecer el atributo colspan a "3", la celda de la primera fila ocupa tres columnas. Si hubisemos establecido colspan a "2", la celda slo habra ocupado dos columnas y habra sido necesario insertar una celda adicional en la primera fila para que la cantidad de columnas sea igual en las dos filas.
44
Ejemplo 2:
<table border="1"> <tr> <td colspan="2">Celda 1</td> <td>Celda 2</td> </tr> <tr> <td>Celda 3</td> <td>Celda 4</td> <td>Celda 5</td> </tr> </table>

Celda 1 Celda 2
Celda 3 Celda 4 Celda 5
Y el atributo rowspan?
Como ya habrs adivinado, rowspan especifica cuntas filas debera ocupar una celda: Ejemplo 3:
<table border="1"> <tr> <td rowspan="3">Celda 1</td> <td>Celda 2</td> </tr> <tr> <td>Celda 3</td> </tr>
45
<tr> <td>Celda 4</td> </tr> </table>

Celda 2 Celda 1 Celda 3 Celda 4
En el ejemplo anterior el atributo rowspan se establece con el valor "3" en la Celda 1. Esto especifica que la celda debe expandirse a lo largo de tres filas (o sea, ocupa la suya propia y dos ms). La Celda 1 y la Celda 2 , por tanto, estn en la misma fila, mientra que la Celda 3 y la Celda 4 forman dos filas independientes.
Leccion 12: Presentacion (CSS)

Para la presentacin de tu sitio web usa Cascading Style Sheets (CSS), es decir, hojas de estilo en cascada.. En esta leccin te presentaremos una breve introduccin a CSS. CSS se puede considerar la media naranja de HTML. Y a la hora de escribir cdigo, no hay punto de comparacin en cuanto a su situacin: HTML se encarga del contenido en bruto de la pgina (la estructura), mientras que CSS le proporciona ese toque elegante (la presentacin).
46
Como vimos en la Leccin 7, se pueden aadir estilos con CSS recurriendo al atributo style. Por ejemplo, por medio de dicho atributo se puede establecer el tamao y tipo de fuente de un prrafo: Ejemplo 1:
<p style="font-size:20px;">El tamao de este prrafo es de 20 pxeles</p> <p style="font-family:courier;">El tipo de letra usado en este prrafo es Courier</p> <p style="font-size:20px; font-family:courier;">Este prrafo combina tipo de letra Courier con un tamao de 20 pxeles</p>
y se ver as en el navegador:
El tamao de este prrafo es de 20 pxeles

El tipo de letra usado en este prrafo es Courier
Este prrafo combina tipo de letra Courier con un tamao de 20 pxeles

En el ejemplo anterior hemos usado el atributo style para especificar el tipo de fuente que vamos a usar (por medio de la propiedad font-family) y el tamao de la fuente (por medio de la propiedad font-size). Observa cmo en el ltimo prrafo establecemos tanto el tipo de fuente como el tamao separando ambas propiedades con un punto y coma.
Y no parece un trabajo hercleo?

Una de la caractersticas "elegantes" de CSS es la posibilidad de gestionar la presentacin de manera centralizada.. En vez de usar el atributo style en
47
cada etiqueta de inicio, se puede indicar al navegador, de una sola vez, cmo tiene que presentar el texto en la pgina: Ejemplo 2:
<html> <head> <title>Mi primera pgina con estilos CSS</title> <style type="text/css"> h1 {font-size: 30px; font-family: arial;} h2 {font-size: 15px; font-family: courier;} p {font-size: 8px; font-family: "times new roman";} </style> </head> <body> <h1>Mi primera pgina con estilos CSS</h1> <h2>Bienvenidos a mi primera pgina con estilos CSS</h2> <p>Aqu podis ver cmo funciona CSS</p> </body> </html>
En el ejemplo anterior, el cdigo CSS se ha insertado en la seccin de encabezado (head), aplicndose, por tanto, a toda la pgina.. Para hacer esto, utiliza la etiqueta style aadindole el atributo type y como valor de ste text/css, es decir: <style type="text/css">, con lo que le estamos indicando al navegador que lo que estamos escribiendo es cdigo CSS. En el ejemplo todos los encabezados de nivel 1 aparecern con letra de tipo Arial y tamao de 30 pxeles; todos los encabezados de nivel 2 se mostrarn con tipo de letra Courier y tamao de 15 pxeles; y el texto de un prrafo normal usar el tipo de letra Times New Roman con tamao de 8 pxeles. Otra opcin es crear el cdigo CSS en un documento independiente. Con un documento CSS independiente se puede gestionar la presentacin de
48
muchas pginas a la misma vez.. Esta opcin es muy inteligente si se quiere cambiar el tipo de fuente o el tamao a un sitio web con cientos o miles de pginas. Ahora no profundizaremos en este aspecto, pero lo puedes aprender ms tarde en nuestro tutorial sobre CSS.
Qu ms puedo hacer con CSS?

CSS se puede usar para muchas ms cosas que especificar tipos y tamaos de fuente. Por ejemplo, se puede aadir colores y fondos. Aqu te presentamos algunos ejemplos para que experimentes con ellos:
<p style="color:green;">Texto de color verde</p> <h1 style="background-color: blue;">Encabezado de nivel 1 con fondo azul</h1> <body style="background-image: url ('http://www.html.net/logo.png');">
Prueba a insertar los ejemplos anteriores en alguna de tus pginas, tal como aparecen anteriormente y bien como cdigo CSS insertado en la seccin head del documento.
CSS slo trata de colores y tipos de fuente?

Aparte de aadir presentacin relativa a colores, tipos de fuente, etc., CSS tambin se puede usar para controlar la configuracin de la pgina y la presentacin de la misma (mrgenes, elementos flotantes, alineacin, anchura, altura, etc.). Al establecer los diferentes elementos con CSS podrs presentar tus pginas de forma elegante y precisa.
49
Ejemplo 3:
<p style="padding:25px;border:1px solid red;">Me encanta CSS</p>
Me encanta CSS
Con la propiedad float se puede hacer flotar un elemento bien a la derecha o a la izquierda. El siguiente ejemplo muestra este principio: Ejemplo 4:
<img src="bill.jpg" alt="Bill Gates" style= "float:left;" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...</p>
que se ver as en el navegador: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...
50
En este ejemplo un elemento (la imagen) flota a la izquierda y el otro elemento (el texto) rellena el hueco. Con la propiedad position se puede colocar un elemento en el lugar preciso que se quiera de la pgina: Ejemplo 5:
<img src="bill.jpg" alt="Bill Gates" style="position:absolute;bottom:50px;right:10px;" />
En el ejemplo anterior la imagen se coloca a 50 pxeles del borde inferior y a 10 pxeles del borde derecho del navegador. Pero se puede colocar exactamente donde se quiera. Prubalo. Muy fcil y llamativo, verdad?
Leccion 13: Sube tus paginas a Internet

Hasta ahora, slo t has tenido la satisfaccin de ver tus pginas. Este es el momento de que el resto del mundo pueda ver tu obra maestra.
Est el mundo preparado para eso?

El mundo lo est... y t tambin lo estars bien pronto. Para que tu sitio web forme parte de Internet slo necesitas espacio en un servidor y un programa FTP gratuito.. Si tienes acceso a Internet, podra ser que ya tuvieras espacio en algn servidor gratuito para tu sitio web. Si es as, el espacio en el servidor se llamar algo as: http://home.provider.com/~usernumber. Pero antes de nada es probable que
51
tuvieras que activarlo. Sigue leyendo sobre esto en la informacin que te haya proporcionado tu servidor de Internet o en sus pginas de asistencia al cliente. Otra opcin es conseguir espacio en algn servidor gratuito de Internet. Del mismo modo que puedes crear una cuenta de correo electrnico (por ejemplo, en Hotmail), te puedes registrar para conseguir espacio en un servidor gratuito de Internet. Son varias las compaas que ofrecen este servicio, entre ellas Angelfire (hac clic en "Sign Up" ("Registrarse") y elige "free membership" ("Socio gratuito"); no tardars ms de un par de minutos en registrarte. Para acceder al servidor es necesario saber el nombre del servidor ("Host Name", por ejemplo, ftp.angelfire.com) y tener a mano tu nombre de usuario ("username") y contrasea ("password").
Es eso todo lo que necesito?

Para acceder al servidor y subir las pginas tambin necesitars un programa FTP. FTP es la abreviatura de File Transfer Protocol (protocolo de transferencia de archivos). El programa FTP se usa para conectar dos ordenadores en Internet, de modo que puedas transferir ficheros desde tu ordenador a otro ordenador (en nuestro caso, el servidor). Puede que an no tengas este tipo de programa, pero, por suerte, algunos de ellos se pueden descargar de forma gratuita. Existen muchos programas FTP diferentes. Uno de los mejores es FileZilla, que es totalmente gratuito. As que ya puedes ir descargndote FileZilla de la pgina filezilla.sourceforge.net.
Y cmo subo las pginas?
52
Ms abajo describimos cmo subir tus pginas con FileZilla a una cuenta gratuita en Angelfire. Pero el procedimiento es igual, poco ms o menos, para todos los proveedores y programas ftp. Abre el programa FTP cuando ests conectado a Internet. Inserta "Nombre del servidor" ("Host Name", "ftp.angelfire.com") en el campo "Direccin" ("Address"), "nombre de usuario" (en el campo "User") y "contrasea" (en el campo "Password") y haz clic en "Conectar" ("Connect"). Ahora mismo ya deberas tener acceso al servidor. En un lado del programa puedes ver los contenidos de tu ordenador ("Local Site" o "sitio local"), y en el otro lado puedes ver el contenido del servidor ("Remote Site" o "sitio remoto"):
53
Localiza los documentos HTML y las imgenes en tu ordenador (en "Local Site") y transfirelos al servidor (en "Remote Site") haciendo doble clic sobre ellos. Ahora ya puede verlos todo el mundo! (Por ejemplo, en la direccin http://www.angelfire.com/tunombre/htmlnet/pagina1.htm). Dale a una de las pginas el nombre "index.htm" (o "index.html") y de forma automtica se convertir en la pgina de inicio. Es decir, si escribes http://www.angelfire.com/tunombre/htmlnet (sin ningn nombre de fichero) la pgina que abrirs realmente ser http://www.angelfire.com/tunombre/htmlnet/index.htm. A la larga, podra ser una buena idea comprar tu propio dominio (por ejemplo, www.tu-nombre.com o www.tu-nombre.net) y evitar las largas y complicadas direcciones que te asignar tu proveedor de Internet o los proveedores de servidores de espacio gratuito. Puedes encontrar y comprar dominios, por ejemplo, en las direcciones Speednames o NetworkSolutions.
Leccion 14: Estandares web y validacion

Qu ms hay que saber sobre HTML?
HTML se puede codificar de muchas maneras diferentes. Y los navegadores pueden interpretar HTML de todas esas mismas maneras. Se podra decir que HTML tiene muchos dialectos. Esta es la razn de que algunos sitios web se visualizan de forma diferente en navegadores diferentes. Por parte del Consorcio del World Wide Web (W3C), fundado por Tim Berners-Lee (s, ese gran tipo que invent HTML!), se han producido intentos para crear un estndar comn de HTML. Pero ste ha sido un camino largo y difcil.
54
En los viejos tiempos, cuando para tener un navegador haba que pagarlo, Netscape era el navegador dominante. Por aquel entonces, el estndar HTML con mayor soporte eran la versin 2.0 y, ms tarde, la versin 3.2. Sin embargo, con una cuota de mercado de ms del 90%, Netscape no tena por qu preocuparse, ni se preocupaba, de seguir unos estndares comunes. Todo lo contrario, Netscape invent sus propios elementos extraos, que no funcionaban en otros navegadores. Durante muchos aos Microsoft dej de lado Internet casi por completo. Pasado un tiempo, reanud la competencia con Netscape y present un navegador. Las primeras versiones del navegador de Microsoft, el Internet Explorer, no eran muchos mejores que las de Netscape a la hora de soportar los estndares HTML. Pero Microsoft se decant por ofrecer su navegador de forma gratuita (algo siempre muy popular) e Internet Explorer pronto pas a ser el navegador ms popular. A partir de las versiones 4 y 5 de Internet Explorer, Microsoft se propuso soportar cada vez ms los estndares del W3C. Netscape, por su parte, no consigui desarrollar un nueva versin de su navegador y sigui distribuyendo la desfasada versin 4. El resto es historia. Hoy da los estndares HTML son la versin 4.01 y XHTML. Ahora es Internet Explorer el que acapara ms del 90% de cuota de mercado; sigue teniendo sus propios elementos extraos, pero tambin soporta los estndares HTML del W3C. Al igual que lo hacen los dems navegadores, como, por ejemplo, Mozilla, Opera and Netscape. As pues, cuando se escribe cdigo HTML conforme con los estndares del W3C, creamos sitios web que se pueden ver en todos los navegadores ... tanto en los actuales como en los futuros. Y, por suerte, lo que has aprendido en este tutorial es una nueva versin ms estricta y limpia de HTML llamada XHTML.
55
Cmo indico qu versin uso?

Teniendo en cuenta los diferentes tipos de dialectos HTML existentes, es necesario indicar al navegador qu "dialecto" utiliza tu cdigo HTML, en este caso XHTML. Para hacer esto, usa una DTD ("Document Type Declaration", declaracin de tipo de documento) que debe aparecer siempre al inicio del documento: Ejemplo 1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>Ttulo</title> </head> <body> <p>texto, texto</p> </body> </html>
Aparte del DTD (la primera lnea del ejemplo anterior), que indica al navegador que vas a usar cdigo escrito en XHTML, tambin es necesario insertar informacin adicional en la etiqueta html por medio de los atributos xmlns y lang.
xmlns
is la abreviatura de "XML-Name-Space" (espacio de nombre XML) y siempre debera tener el valor http://www.w3.org/1999/xhtml. Eso es todo lo que necesitas saber respecto al atributo xmlns; pero si lo que tienes es una sed desmesurada de conocimientos sobre temas complicados, te invitamos a que sigas leyendo sobre espacios de nombre en el sitio web del W3C. Con el atributo lang se especifica en qu idioma se ha escrito el documento. Para esto se usa el estndar ISO 639, que presenta un listado de cdigos de todos los idiomas del mundo. En el ejemplo anterior el idioma usado es el ingls ("en").
56
Con la DTD, el navegador sabe con exactitud cmo interpretar y mostrar el cdigo HTML. As pues, usa el ejemplo anterior como plantilla para todos los documentos futuros que vayas a crear. La DTD tambin es importante a la hora de validar tus pginas web.
Validar? Por qu y cmo debera hacer eso?

Al insertar la DTD en tus pginas siempre podrs comprobar el cdigo HTML para revisar posibles errores usando el validador gratuito del W3C. Para probarlo, crea una pgina y sbela a Internet. Ahora abre la pgina del validator.w3.org y escibe la direccin (el URL) de tu pgina y valdala. Si el cdigo HTML es correcto recibirs un mensaje de enhorabuena; si no, recibirs un informe de errores que te indicar qu error se ha producido y dnde se localiza el mismo. Comete algn error que otro a propsito para ver qu ocurre. El validador no es slo til para localizar errores. Algunos navegadores intentan compensar la falta de destreza entre los desarrolladores web solucionando errores en el cdigo HTML y mostrando las pginas como suponen que deberan visualizarse. Con este tipo de navegadores, podra ser que nunca llegaras a ver un error en tu propio navegador. Sin embargo, otros navegadores podran intentar mostrarlas de forma diferente o no mostrarlas en absoluto. El validador puede servirte de gran ayuda para encontrar errores que ni siquiera sabas que existan. Valida siempre tus pginas para asegurarte de que se mostrarn de forma correcta. Frames (en ingls, marcos o cuadros) es un procedimiento del lenguaje HTML para dividir la pantalla en diferentes zonas, o ventanas, que pueden actuar independientemente unas de otras. Una de sus caractersticas ms importantes es que pulsando un enlace situado en un frame, se puede cargar en otro frame una pgina determinada. Esto se
57
utiliza frecuentemente para tener un frame estrecho en la parte lateral (o superior) con un ndice del contenido en forma de diferentes enlaces, que, al ser pulsados cargan en la ventana principal las distintas pginas. De esta manera se facilita la navegacin entre las pginas, pues aunque se vaya pasando de unas a otras, siempre estar a la vista el ndice del conjunto. Para comprender los distintos conceptos vamos a desarrollar un ejemplo, creando una pgina con dos frames. El de la izquierda va a servir de ndice de lo que veamos en el de la derecha, y en ste veremos inicialmente una pgina de presentacin. Lo primero que tenemos que hacer es crear un documento HTML en el que definiremos cuntas zonas va a haber, qu distribucin y tamao van a tener, y cul va ser el contenido de cada una de ellas. En el ejemplo que vamos a desarrollar, la pgina va a tener dos frames distribuidos en columnas (es decir, uno al lado del otro, en vez de uno encima del otro, lo que sera una distribucin en filas). Con respecto al tamao, haremos que el primero (el del izquierda) ocupe el 20% del ancho de la pantalla, y el otro, el 80% restante. Y con respecto al contenido, el frame de la izquierda va a contener un documento HTML que va a servir de ndice de lo que veamos en el otro (y que vamos a llamar mipagind.html), y el de la derecha otro documento HTML que va a servir de pgina de presentacin (al que llamaremos mipagpre.html). Todo lo anterior se refleja en el siguiente documento HTML: <HTML> <HEAD> <TITLE>Mi pagina con frames</TITLE> </HEAD> <FRAMESET COLS="20%, 80%"> <FRAME SRC="mipagind.html"> <FRAME SRC="mipagpre.html" NAME="principal"> </FRAMESET> </HTML> Obsrvese lo siguiente:
58
Es un documento parecido a los que conocamos hasta ahora. La diferencia est en 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 (definir los frames). En este caso, con la etiqueta <FRAMESET COLS="20%, 80%"> se define que va a haber dos frames y que van a ir en columnas. Si hubiramos querido que fueran en filas, habramos puesto ROWS (filas, en ingls). Tambin se define el espacio en anchura que van a ocupar cada uno de ellos en la pantalla. Se ha puesto como porcentajes del total, pero se podra tambin haber puesto una cifra absoluta, que representara el nmero de pixels a ocupar. Ya se ha definido el nmero de frames, su distribucin y su tamao, pero falta por definir el contenido de cada frame. Esto se hace con las etiquetas: <FRAME SRC="mipagind.html"> <FRAME SRC="mipagpre.html" NAME="principal"> Con esto se define que el contenido del primer frame (el de la izquierda) sea el documento HTML mipagind.html y el del segundo (el de la derecha) sea el documento HTML mipagpre.html. Obsrvese que en la etiqueta del segundo se ha incluido el atributo NAME="principal", pero no as en el primero. El motivo es que se necesita dar un nombre al segundo frame, pues, como veremos a continuacin, en el documento del primer frame va a haber unos enlaces que van a ir dirigidos hacia l. En este caso slo tenemos dos frames, pero podra haber ms, y es necesario distinguirlos unos de otros. Y el primero no necesita nombre, pues no va a haber enlaces en el segundo dirigidos hacia l. A este documento le vamos a llamar mipagina.html, pero todava no lo vamos a guardar, pues falta por aadir algo que veremos ms adelante. Documentos HTML de cada frame Necesitamos ahora confeccionar el documento HTML de cada uno de los frames. Recurdese que son como pginas independientes, que pueden tener
59
cada una su propio fondo, etc., y todo lo que queramos aadir en ellos y que hemos aprendido hasta ahora. Documento del frame de la izquierda Va a tener un fondo amarillo, y va a contener dos enlaces dirigidos al frame de la derecha. Adems, como muestra de que se puede aadir cualquier cosa en un frame. <HTML> <HEAD> <TITLE> Indice </TITLE> </HEAD> <BODY BGCOLOR="#FFBB00"> <P><A HREF="mipagpre.html" TARGET="principal"> Presentacin </A> <P><A HREF="mipag13.html" TARGET="principal"> Mi pgina </A> <P><IMG SRC="glogoan2.gif"> </BODY> </HTML> Dentro de las etiquetas de los enlaces podemos observar algo nuevo, y es el atributo TARGET (en ingls: objetivo, blanco), que sirve para hacer que al ser activado el enlace no se cargue en el propio frame, sino en otro, precisamente en el que hayamos llamado con ese nombre en el documento de definicin de los frames. En nuestro caso, le hemos dado el nombre de "principal" al frame de la derecha, y es por tanto ah donde se van a cargar los documentos HTML.
60
Guardamos este documento con el nombre de mipagind.html. Documento del frame de la derecha Va a tener un fondo negro, y va a contener slamente un texto. En captulos posteriores se irn aadiendo aqu ms cosas. <HTML> <HEAD> <TITLE> Presentacion </TITLE> </HEAD> <BODY BGCOLOR="#000000" TEXT="#0000FF"> <CENTER> <FONT SIZE=+3><STRONG> <P>ESTA ES LA VERSION <BR><FONT COLOR="#FF0000">CON FRAMES</FONT> <BR>DE MI PAGINA </STRONG> </FONT> </CENTER> </BODY> </HTML>
61
Guardamos este documento con el nombre de mipagpre.html <HTML> <HEAD> <TITLE>Mi pagina con frames</TITLE> </HEAD> <FRAMESET COLS="20%, 80%"> <FRAME SRC="mipagind.html"> <FRAME SRC="mipagpre.html" NAME="principal"> </FRAMESET> <NOFRAMES> Estas utilizando un navegador que no soporta frames. <P>Pulsa para visitar mi <A HREF="mipag13.html"> pgina</A>. </NOFRAMES> </HTML> Atributos de la etiqueta <FRAMESET> La etiqueta FRAMESET, como hemos visto en el ejemplo, es la que define la distribucin, el nmero y tamao de los frames. Tiene dos atributos: COLS (columnas) y ROWS (filas): <FRAMESET COLS="xx, yy, zz, .."> <FRAMESET ROWS="xx, yy, zz, ..">
62
Define la distribucin de los frames en columnas o en filas, segn se use uno u otro atributo. Define el nmero de frames que habr, pues, por ejemplo: <FRAMESET COLS="xx, yy"> (habr dos frames en columnas) <FRAMESET COLS="xx, yy, zz"> (habr tres frames en columnas) Define el tamao de los frames, segn el valor que demos a xx, yy, zz.... Este valor se puede expresar en: Un porcentaje del ancho del pantalla (para las columnas), o del alto de la pantalla (para las filas). As, por ejemplo: <FRAMESET COLS="%20, %80"> (la columna de la izquierda ocupar el 20% del ancho de la pantalla, y la de la derecha el 80% restante) <FRAMESET ROWS="%10, %70, %20"> (la fila superior ocupar el 10% del alto de la pantalla, la del medio el 70%, y la inferior el 20%) Un nmero absoluto que representa el nmero de pixels que ocupar cada frame a lo ancho o a lo alto (segn sean filas o columnas). As, por ejemplo: <FRAMESET COLS="40, 600"> (la columna de la izquierda tendr 40 pixels de ancho y la de la derecha 600). Pero es peligroso utilizar slo valores absolutos, pues el tamao de la pantalla vara de un usuario a otro. Si se va a usar algn valor absoluto para un frame, es mejor mezclarlo con alguno relativo, como los que vamos a ver a continuacin, para que se ajuste el total a la pantalla del usuario Un valor relativo que se consigue poniendo un asterisco (*), en vez de un nmero. Esto se interpreta como que ese frame debe tener el espacio restante. Por ejemplo:
63
<FRAMESET ROWS="100,*,100"> (Habr tres filas, la superior y la inferior de una altura fija de 100 pixels, y la del medio obtendr el espacio restante). Si hay ms de un frame con asterisco, ese espacio restante se dividir por igual entre ellos. Si hay un nmero antes del asterisco, ese frame obtiene esa cantidad ms de espacio relativo. As "2*,*" dara dos tercios para el primer frame y un tercio para el otro. Frames sin bordes Si se desea que no haya un borde de separacin entre los frames, se deben incluir el atributo FRAMEBORDER=0 dentro de la etiqueta FRAMESET. No todas las versiones de los navegadores lo implementan. Para que tambin desaparezcan los huecos de separacin entre frames hay que aadir otros dos atributos (el primero es para el Explorer y el segundo para el Netscape): FRAMESPACING=0 y BORDER=0. con lo que la etiqueta completa quedara: <FRAMESET FRAMEBORDER=0 COLS="xx, yy"> Atributos de la etiqueta <FRAME> Esta etiqueta define las cararactersticas de un frame concreto, no del conjunto de los frames, como era el caso con la etiqueta <FRAMESET>. Puede tener los siguientes posibles atributos, que van dentro de la etiqueta <FRAME>: SRC="direccin". Esta direccin puede ser la de un documento HTML (tal como hemos utilizado en el ejemplo), o cualquier otro recurso del Web (o URL). Con este atributo se indica lo que se cargar inicialmente en el frame. Si no se le pone este atributo a la etiqueta <FRAME>, entonces dicho frame aparecer inicialmente vaco, aunque tendr las dimensiones asignadas.
64
FRAMESPACING=0
BORDER=0
NAME="nombre_de_la_ventana". Este atributo se usa para asignar un nombre a un frame. De esta manera se podr "dar en el blanco" (en ingls, target) en esta pgina, desde un enlace situado en otra pgina. Es decir, que pulsando en otra pgina un enlace, se cargar precisamente en sta, tal como hemos visto en el ejemplo. El atributo NAME es opcional. Por defecto, todas las ventanas carecen de nombre. Los nombres que se escojan deben comenzar por un carcter alfanumrico (una letra o un nmero, pero no otro tipo de smbolo) MARGINWIDTH="nmero". Se utiliza este atributo cuando se quiere controlar la el ancho de los mrgenes dentro de un frame. El nmero que se ponga representa los pixels de los mrgenes. Este atributo es opcional. MARGINHEIGHT="nmero". Igual que el anterior, pero referido a los mrgenes en altura. SCROLLING="yes|no|auto". Este atributo se utiliza para decidir si el frame tendr o no una barra deslizadora. Si se escoje "yes" tendr siempre una barra deslizadora. Si se escoje "no" no la tendr nunca, y si se escoje "auto", ser el navegador quien decida si la tendr o no. Este atributo es opcional. Su valor por defecto es "auto". NORESIZE. A este atributo no se le asigna un valor numrico, como a los dems. Es un indicador para que la ventana no se pueda re-dimensionar (en ingls, resize) por parte el usuario. Se puede comprobar en el ejemplo con frames que si se coloca el cursor del ratn entre los dos frames, al pulsarlo y arrastrarlo en un sentido u otro, varan las dimensiones prefijadas de los frames. Este atributo impide que ocurra esto en un frame. Es un atributo opcional. Por defecto, todos los frames son re-dimensionables. FRAMEBORDER="no". Este atributo elimina el borde en un frame, pero si se quiere que se elimine completamente, tambin hay que ponrselo al frame contiguo. Si se quiere eliminar los bordes de todos los frames, se debe colocar en la etiqueta FRAMESET, como hemos visto anteriormente.
65
El atributo TARGET En el ejemplo hemos visto que, como queramos que los enlaces situados en el frame de la izquierda surtieran efecto no en l mismo, sino en otro frame, tenamos que poner dentro de cada enlace el atributo TARGET="principal", siendo "principal" el nombre que habamos dado al segundo frame, en el documento de definicin de frames. Es decir, hemos utilizado este atributo de esta manera: TARGET="nombre_dado_a_otro_frame". Estos nombres, que los escogemos nosotros, pueden ser cualquiera, pero con la condicin que el primer carcter sea alfanumrico (letra o nmero). Pero hay unos nombres reservados (es decir, que no se pueden usar para denominar a un frame), que hacen que este atributo efecte unas funciones especiales. Para que cumplan su cometido, es imprescindible escribir estas palabras reservadas (blank, self y top) en minsculas. TARGET="_blank". Hace que se abra una nueva copia del navegador, y el enlace activado se carga en ella, a pantalla completa. Es decir, tendramos dos copias del navegador (Netscape, Explorer, etc.) funcionando a la vez. TARGET="_self". Hace que el enlace se cargue en el propio frame. TARGET="_top". Hace que el enlace se cargue a pantalla completa, suprimiendo todos los frames, pero sin que se cargue una nueva copia del navegador. Este es particularmente til. Un error muy comn es olvidarse de poner este atributo en los enlaces que estn en un frame, con lo que resulta que al ser activados, la pgina llamada se carga dentro del propio frame, lo cual es muy molesto si esa pgina pertenece a otro sitio del Web, y an ms grave si esa pgina tiene a su vez frames. Este inconveniente se evita poniendo este atributo dentro de las etiquetas de los enlaces.
66
Frames anidados dentro de otros frames Hasta ahora hemos contemplado slo la posibilidad de tener una distribucin de los frames bien en filas o bien en columnas, (dependiendo que se utilice el atributo ROWS o COLS en la etiqueta FRAMESET), pero no ambos a la vez. Se pueden obtener distribuciones ms complejas anidando filas dentro de una columna, o a la inversa, columnas dentro de una fila. Supongamos que queremos la siguiente distribucin: Un frame estrecho en horizontal en la parte superior, de lado a lado de la pantalla (altura, el 15%) Otro frame estrecho en vertical en la parte izquierda, debajo del anterior (anchura, el 20%) Un tercero ocupando el resto de la pantalla. Vemos que, en realidad, esto equivale a la siguiente distribucin: Dos filas. La superior ocupa el 15% y la inferior el resto. La fila inferior est a su vez dividida en dos columnas. La primera (la de la izquierda) ocupa el 20% y la otra, el resto. El documento de definicin de las dos filas (olvidmonos de momento que la de abajo est subdividida), sera: <HTML> <HEAD> <TITLE>Pagina con dos filas</TITLE> </HEAD>
67
<FRAMESET ROWS="15%, *"> <FRAME SRC="documento_fila_superior"> <FRAME SRC="documento_fila_inferior"> </FRAMESET> </HTML> Como la fila inferior, en realidad, son dos columnas (con una distribucin del 20% y resto), sustituimos (anidando) la etiqueta <FRAME SRC="documento_fila_inferior"> por: <FRAMESET COLS="20%, *"> <FRAME SRC="documento_columna_izqda"> <FRAME SRC="documento_columna_dcha"> </FRAMESET> Con lo que queda el documento definitivo as: <HTML> <HEAD> <TITLE>Pagina con fila superior y dos columnas inferiores</TITLE> </HEAD> <FRAMESET ROWS="15%, *"> <FRAME SRC="documento_fila_superior"> <FRAMESET COLS="20%, *">
68
<FRAME SRC="documento_columna_izqda"> <FRAME SRC="documento_columna_dcha"> </FRAMESET> </FRAMESET> </HTML>
Leccion 15: Ultimos consejos

Y ahora, ya s todo lo que hay que saber?
Has aprendido mucho, y ya eres capaz de crear tus propios sitios web! Sin embargo, lo que has aprendido son los principios bsicos y an te queda mucho para dominar HTML. sin embargo, ya tienes una buena base a partir de la cual puedes seguir avanzando. En esta ltima leccin te vamos a proporcionar algunos consejos de ltima hora:
En primer lugar, es una buena idea mantener un cierto orden y estructura en tus documentos HTML. Al publicar documentos bien estructurados no slo mostrars a los dems tu dominio de HTML, sino que, adems, te ser considerablemente ms facil tener una visin de conjunto. Cete a los estndares y valida tus pginas. Esto hay que subrayarlo una y otra vez; escribe siempre XHTML claro, usa la DTD adecuada y valida tus pginas en validator.w3c.org. Llena tus pginas de contenido. Recuerda que HTML es una herramienta que permite presentar informacin en Internet, as que asegrate de presentar dicha informacin. Las pginas bonitas pueden
69
parecer agradables, pero la mayor parte de la gente usa Internet para buscar informacin. Evita sobrecargar tus pginas con imgenes pesadas y otras cosas divertidas que hayas podido encontrar en Internet, ya que el tiempo de carga de la pgina aumenta y esto podra confundir a los visitantes. Por ejemplo, las pginas que tardan ms de 20 segundos en cargarse pueden llegar a perder hasta un 50 % de sus visitantes. Recuerda aadir tu sitio web a directorios y motores de bsqueda de modo que la gente, en general, y no slo tus familiares, pueda encontarla y disfrutar de ella. En la pgina principal de todos los motores de bsqueda encontrars un enlace para aadir nuevas pginas (el ms importante es Google, pero tambin existen otros como DMOZ, Yahoo, AltaVista, AlltheWeb y Lycos). En este tutorial has aprendido a usar el Bloc de notas, que es un editor sencillo y muy fcil de usar, pero a lo mejor te puede ser de ayuda usar un editor ms avanzado que proporcione una mejor visin de conjunto y ms posibilidades. Puedes encontrar un resumen de diferentes editores y revisiones de los mismos en Download.com.
Cmo puedo aprender ms?

En primer lugar, es importante que sigas trabajando y experimentando con lo que has aprendido en este tutorial. Estudia los sitios web de otros y si encuentras algo que te guste, mira cmo se hizo haciendo clic en "Ver" de la barra de mens del navegador y pincha en "Ver cdigo fuente". Navega por Internet y busca ejemplos y artculos sobre HTML. Hay muchos sitios web con contenido extraordinario sobre HTML.
70
Instalacin de Servidor Apache- PHP y MySQL
71
Instalacin de Apache
Lo primero que hay que hacer es instalar el servidor web; en nuestro caso instalaremos apache en su versin para Windows. Apache es un servidor open source, y el ms usado por los servidores en todo Internet, podrs encontrar toda la informacin sobre Apache en su pgina web: http://www.apache.org/ Bien, una vez bajado el Apache (son unos 7 megas) lo que tenemos que hacer es instalarlo; estos son los pasos a seguir:
72
1 - Una vez bajado activar el ejecutable (doble clic) y nos aparece la siguiente ventana:
73
2 - En esta ventana hacemos clic en el boton next y nos aparecer esta otra ventana:
74
3 - Despus de habernos leido la licencia del Apache selecciona la casilla de aceptacin (I accept the terms in the licence agreement), hacemos clic en el botn next, apareciendo la siguiente ventana:
75
4 - Otra ventanita de leer; pues lo mismo que antes, clic en el botn next, apareciendo esta otra ventana:
5 - Bien, una ventana para modificar:
- Network Domain:
- En esta casilla tenemos varias opciones; lo ms normal es que queramos instalar el servidor para usarlo nosotros solos, si este es tu caso en esta casilla pon "localhost" (sin las comillas). - Si por el contrario deseas que el resto del mundo mundial pueda ver las maravillas que puedes hacer con PHP+MySQL pues en esta casilla debes poner tu direccin IP. (externa= 76
Nota: No sabes cual es tu direccin IP? Lo podrs saber ejecutando, en modo consola, el comando ipconfig. - La mayora de nosotros no tenemos una direccin IP fija cuando nos conectamos a Internet as que esto no nos servir de
- Server Name :
- Es el nombre que quieres que tenga tu servidor web, por ejemplo My_Server. - Administrators Email adress : aqu tienes que poner la direccin de correo electrnico del administrador del servidor web; vamos la tuya, por ejemplo: yo_mimo@hotmail.com Despus de haber rellenado ests casillas nos aparecen dos opciones: - For all users in port 80, as a service: instala Apache como un servicio de Windows, es decir que Apache se ejecuta al iniciar el ordenador; eligiendo esta opcin el servidor se pone a la escucha en el puerto 80.
- Only for the current user , on port 8080, when started manually: instala Apache como un programa normal, para ejecutar el servidor lo elegimos en el men de inicio y se abre una ventana para indicar que se est ejecutando Apache. Una vez rellenados todos los campos y elegida la opcin que deseemos, hacemos clic en el botn next; nos aparecer esta ventana:
77
Esta es la tipica ventana en la escogemos si queremos hacer una instalacin tpica o personalizada, hacemos clic en la instalacin tpica (typical) y luego en el botn next
78
Aqui nos dan a elegir el directorio donde deseamos instalar el Apache, por defecto se instala en Archivos de programa, pero nosotros para no complicarnos mucho la vida, lo vamos a instalar en c:\Apache\ Para cambiar el directorio de instalacin hacemos clic en el botn change y escribimos c:\Apache; aceptamos clic en el botn ok y luego en el botn next. Despus de esto nos saldr una ventanita de confirmacion y tal, hacemos clic en el botn next y comenzar la instalacin de Apache. Cuando acabe la instalacin aparecer otra ventana, simplemente hacemos clic en el boton finish y ya habr acabado la instalacin de nuestro servidor. Y aqu acabamos con la instalacin de Apache ahora vamos a ver la configuracin:
79
Lo primero es ejecutar el servidor apache eligiendo la opcin start Apache in console, abriendose una ventana (negra) indicando que se est ejecutando el servidor Apache. Despus de esto abrimos nuestro explorador de Internet para ver si realmente nuestro servidor est funcionando. Una vez abierto, tenemos varias opciones segn como hayamos rellenado el campo network domain: - Si hemos puesto nuestra direccin IP, en la barra de direccin de nuestro explorador ponemos esto: http://nuestra direccion ip:8080 Nota: ponemos al final :8080 para indicar al explorador que nuestro servidor est escuchando en el puerto 8080. - Si en el campo network domain hemos puesto localhost, para que nuestro servidor no sea visible desde Internet pondremos esto en la barra de direccin de nuestro navegador: http://localhost:8080 Si todo es correcto aparecer una pgina diciendo que nuestro servidor Apache est configurado con xito. Bien, lo siguiente es modificar la configuracin de Apache a nuestro gusto. Toda la informacin del servidor se guarda en el fichero de texto c:\Apache\Apache2\conf\httpd.conf , vamos a abrir el fichero y cambiar algo: Abrimos el fichero y buscamos el siguiente texto: # # DocumentRoot: The directory out of which you will serve your # documents. By default, all requests are taken from this directory, but # symbolic links and aliases may be used to point to other locations. # DocumentRoot "C:/Apache/Apache2/htdocs" Esta es la carpeta donde vamos a tener los archivos .php , .html , etc lo mejor es cambiarla, por ejemplo vamos a poner:
80
DocumentRoot "C:/servidor_web" Nota: es importantes fijarse que la barra es esta "/" no esta "\" El siguiente texto a buscar es este: # # This should be changed to whatever you set DocumentRoot to. # <Directory "C:/Apache/Apache2/htdocs"> Aqui tenemos que hacer lo mismo antes, sustituir el directorio por el que deseemos, en nuestro caso: Directory "C:/servidor_web" Bueno, pues aqui acaba la instalacin y configuracin de nuestro servidor Apache, de forma bsica, simplemente para servir pginas web, para que luego podamos trabajar con PHP, vamos a tener que hacer un aadido a este archivo.
81
Instalacin de PHP
PHP Es un lenguaje de programacin orientado a servidor, es decir, que nuestra mquina no realiza ninguna operacin de compilado, la mquina encargada de esto es el servidor web en el que est puesta nuestra pgina; es ms si miramos el cdigo de la pgina en nuestro explorador no vamos a ver nada de php, porque lo que hace php es escribir html (entre otras cosas) PHP es un lenguaje doneo para el manejo de base de datos MySQL, y se pueden llegar a hacer verdaderas maravillas con la combinacin de estas dos herramientas, las principales caracteristicas de PHP son: - Manejo ultra sencillo de las bases de datos - Creacin de imgenes dinmicas - Hace que la creacin de una pgina web sea mucho ms rpida y mucho ms sencilla - La creacin de carritos de la compra, entre otras cosas es super sencilla. - Y otras muchas cosas ms que se me olvidan 1 - Bajarse el PHP: La pgina principal de PHP es http://www.php.net/ 2 - La instalacin de PHP es muy sencilla, una vez bajado hay que descomprimirlo; una vez descomprimido en c:\ tendremos una carpeta que se llame c:\php-4.2.3-Win32, lo mejor es cambiarle el nombre, la llamaremos c:\php a secas.
3 - Bien, ahora tenemos una carpeta que se llama c:\php con el contenido de php; lo siguiente que tenemos que hacer es entrar en esa carpeta y copiar el archivo php.inidist a nuestro directorio de Windows (normalmente c:\windows) con el nombre php.ini; el archivo debe quedar asi: c:\windows\php.ini
4 - La instalacin bsica de PHP ya ha finalizado, ahora hay que darle soporte a Apache para PHP, y hacer algunas modificaciones en el archivo php.ini para que todo funcione correctamente
82
Modificaciones en Apache para que soporte PHP

5 - Para que Apache soporte PHP tenemos que abrir el archivo httpd.conf (se encuentra en c:\apache\apache2\conf\) y aadir al final del mismo este texto: ScriptAlias /php/ "c:/php/" AddType application/x-httpd-php .php Action application/x-httpd-php "/php/php.exe" Si tenemos iniciado nuestro servidor Apache, lo tenemos que reiniciar para que soporte PHP, ahora mismo nos funcionara PHP en nuestro servidor web (que caa eh?), pero es mejor hacer algunas modificaciones en el php.ini para evitar futuros dolores de cabeza.
Modificaciones en el php.ini
1 - Lo primero, abrir el archivo php.ini (est en c:\windows\php.ini) y buscar el texto que pone: ; You should do your best to write your scripts so that they do not require ; register_ to be on; Using form variables as globals can easily lead ; to possible security problems, if the code is not very well thought of. register_globals = Off Para que cuando vayamos a usar los mtodos POST y GET funcionen correctamente es necesario poner: register_globals = On 2 - La segunda y ltima modificacin que vamos a hacer sobre el php.ini es esta; buscar este texto: [mail function]
83
; For Win32 only. SMTP = Bien vamos a modificar el valor de smtp poniendo el servidor de correo saliente que tengamos, por ejemplo: SMTP = mailhost.terra.es
Bueno, pues con esto tenemos instalado PHP en nuestro servidor Apache
Instalacin y configuracin de MySQL

Bien, si has seguido todos los pasos del manual debes tener instalado el servidor Apache con soporte para PHP, ahora lo nico que nos queda por hacer es instalar la base de datos MySQL La pgina principal de MySQL es http://www.mysql.com/ y podrs bajar la ltima version de aqu 1 - Una vez bajado lo que tenemos que hacer es descomprimir el contenido en una carpeta temporal, por ejemplo c:\temp. 2 - Una vez descomprimido entramos en esa carpeta y ejecutamos el setup.exe; nos aparecer la siguiente ventana:
84
85
3 - Es una ventana de bienvenida, simplemente hacemos clic en el botn next y nos aparecer esta ventana
86
4 - Es una ventana de informacin, leemos lo que pone y hacemos clic en next.
87
5 - En esta ventana nos dan a elegir el directorio donde queremos instalar MySQL, por defecto es c:\mysql, no lo vamos a cambiar, simplemente hacemos clic en el boton next
6 - En esta otra ventana nos dan a elegir el tipo de instalacin, como antes, no tocamos nada, simplemente hacemos clic en el boton next (jo, que facil es esto!) Bien, pues ya est instalada la base de datos MySQL, lo nico que queda por hacer es ir a la carpeta c:\mysql\bin\ y ejecutar el programa winmysqladmin.exe.
Haciendo esto ya tenemos montado complatemente nuestro servidor con Apache+PHP+MySQL, 88
Prueba del Servidor con pginas web y Base de Datos

Aqui se muestra como insertar datos en la tabla de mysql con codigo php, ademas se mostrara en la parte inferior una tabla donde se veran los datos insertados solo para que verifiquen que efectivamente se insertan los datos.
Creacin de la Base de Datos 1.- Abrimos nuestro editor de textos y copiamos el siguiente codigo: <html> <head><title>Creacion de Base de datos con tabla en php</title></head> <body> <?php $basedatos = "ejemplo"; //conectamos con el servidor $link = mysql_connect("tu_servidor", "tu_usuario", "tu_contrasea"; // comprobamos que hemos estabecido conexin en el servidor if (! $link){ echo "<h2 align='center'>Imposible establecer coneccin con el servidor</h2>"; exit; } // obtenemos una lista de las bases de datos del servidor $db = mysql_list_dbs(); // vemos cuantas BD hay $num_bd = mysql_num_rows($db); //comprobamos si la BD que quermos crear exite ya $existe = "NO" ; for ($i=0; $i<$num_bd; $i++) { if (mysql_dbname($db, $i) == $basedatos) { $existe = "SI" ;
89
break; } } // si no existe la creamos if ($existe == "NO" { /* manera 1 if (! mysql_create_db($basedatos, $link)) { echo "<h2 align='center'>Imposible crear base de datos</h2>"; exit; } */ /* manera 2*/ if (! mysql_query("CREATE DATABASE $basedatos", $link)){ echo "<h2 align='center'>Imposible crear base de datos</h2>"; exit; } } // creamos la tabla ejemplo $sql = "CREATE TABLE usuario ("; $sql .= "id INT NOT NULL AUTO_INCREMENT, "; $sql .= "nick CHAR(30), "; $sql .= "contrasea CHAR(20), "; $sql .= "nombre CHAR(50), "; $sql .= "direccion CHAR(100), "; $sql .= "telefono CHAR(15), "; $sql .= "email CHAR(50), "; $sql .= "KEY (id) ) "; if (@mysql_db_query($basedatos, $sql, $link)) { echo "<h2 align='center'>La tabla se ha creado con exito</h2>"; } else { echo "<h2 align='center'>No se ha podido crear la tabla</h2>"; } ?> </body> </html>
90
2.- Lo Guardamos con el nombre de crear.php en la ruta de nuestra pagina web del apache. 3.- Abrimos nuestro navegador ya sea Firefox u Opera y escribimos en la barra de diracciones lo siguiente: localhost/crear.php Listo ya creamos nuestra base de datos Ejemplo con una tabla Usuarios Se puede hacer uso de algn administrador de Base de Datos para Mysql o usar la consola de comandos. Ejemplo 2 Para el segundo ejemplo se ha creado una tabla con el uso de solo dos campos o atributos Nombre y telfono: Las paginas de Edicin y reporte son las siguientes:
Archivo Registro.html
<html> <body bgcolor="#000080"> <p align="center"><u><b><font color="#00FF00">Adicin de Registros </font></b> </u></p> <p align="center"> </p> <form method="post" action="add_reg.php">
91
<p><font color="#FFFF00">Nombre </font>:<input type="Text" name="nombre" size="22"></p> <p><br> <font color="#FFFF00">Telfono </font>:<input type="Text" name="telefono" size="13"></p> <p><br> <input type="Submit" name="enviar" value="Aceptar informacin"> </p> </form> <p> </p> <p> </p> <p><font color="#FFFF00"><a href="index.html" style="text-decoration: none"> <font color="#FFFF00">Retornar Pagina Principal</font></a></font></p> </body> </html>
92
Mtodo PHP para envi de datos y registro en base de datos.

<html> <body bgcolor="#0034Af"> <?php // process form $link = mysql_connect("localhost", "root",""); mysql_select_db("agenda", $link); $sql = "INSERT INTO amigos(nombre,telefono) VALUES ('$nombre','$telefono') "; // $sql = ""; $result = mysql_query($sql); ?> <center> <font color="#FFFF00"><B>SE HAN REGISTRADO LOS DATOS</B></font> </center> <p><font color="#FFFF00"><a href="index.html" style="text-decoration: none"> <font color="#FFFF00">Retornar Pagina Principal</font></a></font></p> </body> </html> 93
Reporte general conec.php

<html> <head> <title> Prueba de conexion a base de datos</title> </head> <body bgcolor="#ff8711"> <center> <b>Registro de Base de datos Mysql Agenda, Tabla amigos</b><br> <?php $link = mysql_connect("localhost", "root",""); mysql_select_db("agenda", $link); $result = mysql_query("SELECT * FROM amigos", $link); echo "<table border = '1'> \n"; echo "<tr> \n"; echo "<td><b>Nombre</b></td> \n"; echo "<td><b>Telefono</b></td> \n"; echo "</tr> \n"; while ($row = mysql_fetch_row($result)){
94
echo "<tr> \n"; echo "<td>$row[0]</td> \n"; echo "<td>$row[1]</td> \n"; echo "</tr> \n <br>"; } echo "</table> \n"; ?> </center> <p> <hr size=3%> <a href="http://localhost">Retornar Pagina Principal</a>; </body> </html>
95
96

Texto Del Manual de HTML

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Texto Del Manual de HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

UNIOR Ingeniera de sistemas

Gua de Desarrollo WEB

Ing. Oscar R. Castillo Oros

UNIOR Ingeniera de sistemas

Gua de Desarrollo WEB

Ing. Oscar R. Castillo Oros

UNIOR Ingeniera de sistemas

Ing. Oscar R. Castillo Oros

UNIOR Ingeniera de sistemas

Leccion 2: Que es HTML?

Ing. Oscar R. Castillo Oros

Para qu puedo usar HTML?

Qu representan las siglas H-T-M-L?

UNIOR Ingeniera de sistemas

Leccion 3: Elementos y etiquetas

Ing. Oscar R. Castillo Oros

Y si vemos algunos ejemplos?

UNIOR Ingeniera de sistemas

que se ver as en el navegador:

Este es un encabezado de primer nivel

Las etiquetas hay que escribirlas en mayscula o en minscula?

Ing. Oscar R. Castillo Oros

Y dnde coloco todas estas etiquetas?

Leccion 4: Crea tu primer sitio web

UNIOR Ingeniera de sistemas

Ing. Oscar R. Castillo Oros

UNIOR Ingeniera de sistemas

Ing. Oscar R. Castillo Oros

UNIOR Ingeniera de sistemas

Ahora pasamos al navegador:

Ing. Oscar R. Castillo Oros

Leccion 5: Que has aprendido hasta ahora?

UNIOR Ingeniera de sistemas

Ing. Oscar R. Castillo Oros

Leccion 6: Mas elementos

UNIOR Ingeniera de sistemas

y se visualizar as en el navegador: Este texto tendra que ser un poco ms pequeo.

Puedo usar varios elementos a la misma vez?

Ing. Oscar R. Castillo Oros

que se ver as en el navegador:

UNIOR Ingeniera de sistemas

que se ver as en el navegador:

Un elemento de lista Otro elemento de lista

que se visualizar as en el navegador: 1. Primer elemento de lista 2. Segundo elemento de lista

Ing. Oscar R. Castillo Oros

UNIOR Ingeniera de sistemas

Ing. Oscar R. Castillo Oros

Qu ocurri para que la pgina apareciera en color rojo?

De momento, ya vale de colores. Volvamos a los atributos.

Qu elementos pueden usar atributos?

UNIOR Ingeniera de sistemas

Y de qu partes se compone exactamente un elemento?

Ing. Oscar R. Castillo Oros

que se visualizar as en el navegador:

UNIOR Ingeniera de sistemas

Y se pueden crear enlaces entre mis propias pginas?

Ing. Oscar R. Castillo Oros

Y se pueden crear enlaces internos dentro de una misma pgina?

Vamos a ver un ejemplo para que todo quede claro:

UNIOR Ingeniera de sistemas

Puedo crear enlaces a otras cosas?

Ing. Oscar R. Castillo Oros

Hay ms atributos que debera conocer?

UNIOR Ingeniera de sistemas