Qu es una pgina web?Pues eso de entrada podemos preguntarnos qu es una pgina web. Habran dos respuestas: para el internauta y para el diseador.Para elinternautauna pgina WEB es una pantalla en su monitor que le muestra la informacin que va buscando y enlaces a otros sitios relacionados.Para eldiseadoruna pgina WEB es un documento construdo para mostrar informacin en la pantalla de un monitor, que contiene adems de la informacin una serie de instrucciones para indicar como se ha de mostrar esa informacin. Estas instrucciones se escriben siguiendo un lenguaje llamado HTMLComo ves eldiseadordefine la pgina web como algo ms completo y tcnico que el simple internauta. La pgina web se concreta en un documento con un nombre terminado con la extensin .htm o .html.Una serie de pginas web interconectas e interrelacionadas de alguna forma (el mismo tema, el mismo objetivo...) forman un sitio web, que habitualmente est almacenado en un servidor.RequisitosPara seguir el curso los requisitos son mnimos: un ordenador, un navegador y un editor de texto simple es suficiente. Pero te recomendara, adems, instalar un servidor de internet en tu ordenador. No te asustes, no es nada del otro mundo. Tanto si usas Windows como si te mueves en el mundo Linux te recomiendo el servidorApache(si piensas trabajar con PHP te recomiendo la versin 1.xx, la 2 sigue siendo desaconsejable), es muy simple de instalar y de configurar. Con este servidor corriendo en tu equipo tendrs un sitio llamado localhost al que podrs acceder como si se tratara de un servidor de internet: http://localhost/, pero solo es visible en tu ordenador.En cuanto al editor de pginas web utiliza un editor tipo texto, o uno grfico, pero trabajano en modo texto. Recuerda que la idea es conocer el lenguaje HTML, y los editores grficos esconden el cdigo. Mira estasherramientasque te pueden ser tiles, recuerda que de gratis tambin hay cosas buenas.En cuanto al navegador lo mejor es tener uno de cada, de esa manera podrs comprobar que todo lo que hagas funciona en ambos modelos, aunque hoy por hoy el rey es el Explorer de Microsoft.El HTMLAntes de entrar de lleno en materia un poquito de historia, nunca viene mal conocer el material de trabajo a fondo. El HTML o lenguaje de marcas de hipertexto es un derivado de un lenguaje usado para describir documentos, el SGML. Y esto que significa? Pues muy sencillo: la estructura de las pginas web se describe en la propia pgina mediante una serie de etiquetas que le dicen al navegador como debe mostrar el documento, o sea, lapgina web: cuando debe cambiar de prrafo, cuando debe mostrar el texto en negrita o en color, cuando mostrar una imagen, cuando un enlace a otro documento, etc. Y esto se lo dice al navegador mediante unas marcas o etiquetas en el documento. El HTML es el lenguaje que explica qu etiquetas se pueden usar en una pgina y como se usan.Como ves todo va mezclado: informacin y formato, algo que ha comenzado a cambiar con la aparicin de losestilos CSS, un interesante intento de separar la informacin del formato de presentacin.

Los inicios: HTML 2.0Cuando internet sali del mbito universitario y se convirti en una herramienta de dominio pblico la versin de HTML existente era la 2.0, algo limitada pero que cualquier navegador va a ser capaz de interpretar.

HTML 3.0 y 3.2A medida que la red se extenda, los documentos que circulaban por ella se hicieron ms complejos y completos, la versin 2.0 pronto se mostr demasiado limitada para cumplir con su cometido: mostrar las pginas web en los terminales de los usuarios. As que los exploradores comenzaron a incluir etiquetas extras no contempladas en el estndard. Por entonces elIETF(Intenert Enginierign Task Force) era el encargado de normalizar todo lo relativo a la recien nacida red de redes y elabor la versin 3.0, versin que pretenda incorporar las nuevas etiquetas y las que estuvieran por llegar.Este standard no termin de cumplir lo esperado, adems en esas fechas la seccin de standarizacin de HTML de este comit cerraba sus puertas, por lo que un grupo de empresas, entre las que estaban Netscape, Microsoft, IBM y Sun, crearon un nuevo comit para estandarizar internet, era elW3C, organismo que an hoy dicta los estndares no solo para HTML, sino tambin para las hojas de estilo CSS y otras herramientas de la red. Su primer trabajo consisti en mejorar la versin 3.0 de HTML, lo que llev al HTML 3.2, que inclua muchas de las nuevas etiquetas que los principales navegadores de la poca, osea, Netscape y Explorer, ya estaban utilizando.

HTML 4.0El HTML 3.2 era una solucin temporal que se aprob en enero de 1997, momento en el que elW3Ccomenzaba a eloborar un nuevo estandard con reformas profundas, era la versin 4.0. En julio de 1997 se presenta el borrador de este nuevo estndar que unifica el manejo de los marcos (frames e iframes), las hojas de estilo y losscripts. El 17 de diciembre de 1997 dicho borrador corregido fue finalmente aprobado como HTML 4.01, y es el que an hoy da viene usndose para la creacin de las pginas web.

Versiones para este manualEn principio cualquier navegador debera ser capaz de interpretar el HTML 3.2, pero si en algn caso es necesario sealar que algn elemento es solo soportado por una determianda versin o navegador usaremos los smbolos que veis en esta tablita:Introducido con la versin 3.2 del HTML

Introducido con la versin 4.0 del HTML

Carecterstica soportado slo por Explorer

Carecterstica soportado slo por Netscape

El cdigoLo mejor para aprender a hacer algo es ... hacerlo!. As que vamos a la primera pginamipagina.htm

Mi primera pagina web

Mi Primera pagina web

Esto tan sencillo es una verdadera pgina web, aunque le falta el contenido, pero todo llegar.

Si quieres ver como queda esto en el explorador solo tienes quepulsar aqu, y tranquilo que se abrir en otra ventana

La explicacinSi te fijas en la pgina que ves con el explorador solo se ve parte de lo que has escrito, concretamente todo lo que no est encerrado entre los smbolos < y >. Eso es el contenido de la pgina, pero y lo que est entre esos parntesis angulares? pues esas son las etiquetas que le dicen al explorador como mostrar el contenido: en grande, con colores, centrado, el ttulo de la pgina, etc. Si te fijas cada etiqueta tiene un comienzo y un fin: ... Como ves una apertura y un cierre. Algunaas etiquetas (como
cambio de lnea o linea horizontal) no llevan cierre. Fijaros que lo primero que tenemos es la etiqueta cerrda al final del documento con , eso quiere decir que estamos ante un HTML: ... Dentro de ese documento vemos una parte llamada cabecera, que la reconocers porque est limitada con la etiqueta . l contenido de esta parte no siempre es visible, y si lo es nunca se muestra en la pgina en si. Contiene por ejemplo el ttulo que se ve en la ventana del explorador, arriba a la izquierda. La cabecera queda por tanto :

Mi pgina web

Puede contener muchas otras cosas, pero eso lo dejamos para ms adelante.

El cuerpo del documentoLa otra parte es el cuerpo o , es el contenido de la pgina web. Tiene una etiqueta con cierre: ... Y ahora el contenido: Mi primera pgina webCon esto colocaremos el texto en formato(o cabecera 1) y centrado (align="center"), o sea, en tamao grande y centrado en la pgina, una forma de resaltar la frase. Ahora separamos esa frase por medio de una lnea horizontal:

Como ves este es un ejemplo de etiqueta sin cierre. Y por ltimo colocamos un texto escplicativo en un prrafo (), o sea, un bloque de texto con un espacio por delante y otro por detrs :Esto tan sencillo es una verdadera pgina web, aunque le falta el contenido, pero todo llegar.Para empezar no est mal, por supuesto existen muchas ms etiquetas con misiones diferentes a la de mostrar texto, pero eso lo iremos viendo poquito a poco.

Estructura del documentoLa estructura de un documento HTML se puede resumir as:tipo de documento

titulo de la pgina cosas que afectan a la pgina pero no a su contenido

contenido de la pgina

En el tipo de documento deberemos especificar a que estndar del HTML responde nuestra pgina entre una de las siguientes opciones:

Cumple el estndar HTML 2.0

Cumple el estndar HTML 3.2

Cumple el estndar HTML 4.0

Cumple el estndar HTML 4.0 y no contiene adems elementos desaconsejables

Es una definicin de marcos que cumple el estndar HTML 4.0El HTML 4.0 considera desaconsejables aquellos elementos que, an siendo soportados, han sido sustituidos por otros ms potentes y, por ello, es posible que sean eliminados del estndar HTML en el futuro.

La cabeceraSuele ser el lugar ms indicado para colocar aquellos elementos de la pgina que no alteren el contenido de la misma, aunque si la forma de presentarlo y su comportamiento. Es por eso que es el lugar ms recomendable para colocar losscriptsy las hojas de estilo, como veremos en los captulos correspondientes.Hay tambin otro elemento interesante que podremos incluir en nuestras cabeceras. Cuando especificamos una URL relativa en un enlace, en principio es para acceder a una pgina situada en nuestro mismo servidor. Sin embargo, si especificamos:

Ahora todas nuestras URLs relativas se encontrarn dentro del servidorhttp://www.misitio.com

Meta NameAdems del ttulo de la pgina, uno de los elementos que se pueden incluir aqu son losMETA. Entre otras cosas, sirven para indicar propiedades de la pgina como pueda ser el nombre de su autor. Por ejemplo,

nos indicara la herramienta con que hemos creado la pgina (en este caso la versin 4.03 en espaol para Windows 95 del Composer de Netscape). Como veris el uso es muy simple, en NAME colocamos el nombre de la etiqueta y en CONTENT colocamos su valor, ambos entre comillas y con el signo igual por delante.Estas son las propiedades ms comunes:NameContent

AUTHORAutor de la pgina.

CLASSIFICATIONPalabras que permite clasificar la pgina dentro de un buscador jerrquico (como Yahoo).

KEYWORDSPalabras clave por las que encontrarn la pgina en los buscadores. Google no le hace mucho caso.

GENERATORHerramienta utilizada para hacer la pgina.

DESCRIPTIONDescripcin del contenido de la pgina. Google le hace algn caso.

Meta http-equivSon etiquetas usadas tambin para dar informacin al navegador y complementan las etiquetas Meta vistas en el apartado anterior. En algunos casos existen etiquetas Meta Name y http-equiv similares. Su uso es similar a las etiquetas Meta Name, por ejemplo:

La nica diferencia est en que en lugar de NAME usamos HTTP-EUIV, el resto es igual. Cuando el contenido conste de ms de varios valores, estos se separan con ; (punto y coma). Veamos algunos tipos:HTTP-EQUIVCONTENT

expiresFecha desde la que la pgina debe ser recargada por los navegadores

pragmaEl contenido debe ser no-cache y sirve para que el navegador no guarde la pgina en el ordenador del internauta.

Content-LanguageIdioma en el que est escrita la pgina. Se usan las iniciales como: es_ES: espaol Espaa, en_US: ingles americano...

RefreshIndica al navegador el tiempo (en segundos) que debe esperar para recargar la pgina automticamente y la pgina a la que debe ir. Ambos datos se separan con un punto y coma.

Content-TypeTipo de documento y juego de caracteres usado. Lo habitual es colocar el valor:text/html; charset=iso-8859-1Si n o se usa los caracteres especiales (letras acentuadas, ) pueden quedar ilegibles .

El cuerpoEl cuerpo es el contenido de la pgina propiamente dicho, o sea, lo que se ve, en el es donde colocarn prcticamente todos los elementos que vamos a ir viendo por este manual. Los atributos que admite esta etiqueta:BACKGROUNDColoca una imagen como fondo de la pgina.

BGCOLORDefine el color de fondo de la pgina.

BGPROPERTIESCuando es igual aFIXEDel grfico definido como fondo de la pgina permanecer inmvil aunque utilicemos las barras de desplazamiento.

TEXTColor del texto.

LINKColor de un enlace no visitado (por defecto azul).

VLINKColor de un enlace ya visitado (por defecto prpura).

ALINKColor que toma un enlace mientras lo estamos pulsando (por defecto rojo).

LEFTMARGIN y TOPMARGINNmero de pixels que dejar de margen entre el borde de la ventana y el contenido de la pgina.

MARGINWIDTH y MARGINHEIGHTEquivalentes a los anteriores, pero stos funcionan en Netscape.

No resulta recomendable cambiar los colores del texto y enlaces a no ser que exista alguna dificultad al leerlos por haber cambiado el fondo, ya que en muchas ocasiones el usuario ha podido cambiarlos en las opciones de su navegador y estarn ya a su gusto.

Dando formatoEvidentemente en las pginas no todo el contenido es igual y por tanto no todo se ha de mostrar en la misma forma, por eso HTML nos permite modificar el aspecto del texto: podemos darle diferentes formatos, modificando desdel el aspecto de los caracteres (tipo de letra) hasta el color. Podemos formatear desde lasletrasuna por una hasta bloques completos de texto.

Estilos de prrafoEstos estilos o formatos actan a nivel de prrafoEtiquetaSignificadoResultado

Sirve para delimitar un prrafo. Inserta una lnea en blanco antes del texto.Soy un prrafo: fjate en los espacios de antes y de despus.

... Justificar el texto del prrafo a la izquierda (ALIGN=LEFT), derecha (RIGHT), al centro (CENTER) o a ambos mrgenes (JUSTIFYhtml4 )Alineacin izquierdaTexto centradoAlineacin derechaTexto justificado o sea, alineado a ambos lados sin dejar, escalones en el margen derecho.

... Permite centrar todo el bloque de texto encerrado.Alineacin por defectoTexto centrado

... Representa el texto encerrado en ella con un tipo de letra de paso fijo. El parmetro WIDTH especifica el nmero mximo de caracteres en una lnea.Estoy en paso fijo

... Mete sangras de prrafo tanto a derecha como a izquierda. Suele usarse como tabuladorSi quieres ver el texto indentado por ambos mrgenes usa el Blockquote.

Los encabezadosEl HTML nos ofrece seis etiquetas distintas para mostrar cabeceras o ttulos.EtiquetaResultado

... Cabecera de nivel 1

... Cabecera de nivel 2

... Cabecera de nivel 3

... Cabecera de nivel 4

... Cabecera de nivel 5

... Cabecera de nivel 6

Actan a nivel de prrafo, es decir, el texto encerrado en lleva una linea enblanco por delante y por detrs. Habitualmente se utilizan para destacar ttulos de los diferentes apartados o secciones de un texto.

Cambiando el tipo de letraTodas estas etiquetas nos permiten cambiar de una manera u otra el aspecto del tipo de letra que estemos utilizando y se pueden utilizar dentro de un prrafo.EtiquetaUtilidadResultado

... Pone el texto en negrita.Soy un texto negro como el tizn

... Representa el texto en cursiva.Estoy ladeado

... Para subrayar algo.Como soy muy importante estoy subrayado

... Para tachar.A m, en cambio, nadie me quiere

... Permite representar el texto en un tipo de letra de paso fijo.No soy variable

... Letra superndice.E=mc2

... Letra subndice.ai,j=bi,j+1

... Incrementa el tamao del tipo de letra.Soy GRANDE

... Disminuye el tamao del tipo de letra.Cre ver un lindo gatito

Estilos de textoSon formatos predefinidos aplicables a caracteres individuales (y a grupos por supuesto). Realmente no se usan demasiado salvo que se controlen mediante los estilos CSS.EtiquetaSignificadoEfectos

... Cita, por ejemplo de un textoEsta frase no es ma

... Cdigoint x=0;

... Fuerte, negrita.Hay cosasimportantes.

... Enfasis.Para ponernfasis

... TecladoEl usuario debe teclearMultivac es el mejor.

... Representar variables de un cdigo.La variablex, definida anteriormente...

... Para representar una serie de caracteres literalmente.Estoy en unliteral

... Abreviaturas.LaWWWusa el protocolohttp

Otros elementosEstas etiquetas realmente no son formato ni de prrafo ni de texto, pero hay que ponerlas en algn sitio:EtiquetaSignificadoResultado

Cambio de lnea.Simple salto de linea

Barra horizontal.

Comentarios.No se ve el contenido

Caracteres especialesSi habis estudiado o ledo algo acerca del modo de funcionamiento de los ordenadores y la informtica, casi seguro que sabis que la informacin que introduces en el ordenador est codificadaes decir, escrita de alguna manera que sea entendible para la mquina. En relacin con esto habris topado con unas siglas algo extraas cdigo ASCII, que no es ms que una forma de codificar los caracteres asignando a cada uno un valor numrico. Sin entrar en ms detalles resulta que el cdigo ASCII solo tiene 128 smbolos, pero existe una extensin del cdigo que llega a los 256 smbolos, aunque slo estn normalizados los 128 primeros, los restantes se usan para caracteresextraoscomo nuestra o la o el , o las letras acentuadas.Es decir que todo lo que no sean caracteres ingleses quedan codificados con cdigos ASCII por encima de 127, como caracteres especiales o extendidos. En base a esto existen muchos juegos de caracteres para mostrar las pginas, juegos que se adaptan a las particularidades de cada idioma.

Caracteres extendidos en HTMLCualquier caracter, especial o no, puede mostrarse en una pgina usando su cdigo ASCII, es decir, el nmero que tiene asignado, encerrado entrey;. Por ejemplo el smbolo @ tiene como cdigo ASCII el 64, as podemos representarlo como:@Si usasemos el nmero 127 obtendremos nuestra tilde ~ . No obstante muchos caracteres especiales tienen sinnimos que nos facilitan su insercin en las pginas web:CdigoResultado

, , , ,..., , , , , , , , y

y y

o

Espacio en blanco

Caracteres reservadosEn el HTML existen cuatro caracteres de control, que se usan para formar etiquetas, establecer parmetros, etc.. Para poder emplearlos sin riesgo deberemos escribir los siguiente cdigos:CdigoResultado