www.vensocial.

com
El nico lmite ser nuestra creatividad

Introduccin a lenguajes de programacin (HTML)

Jess Rueda

La finalidad de vensocial.com es la de instruir a nuestros usuarios y programadores como utilizar todas las herramientas que nos permitan contribuir a construir este nuevo mundo virtual. Su objetivo principal es el de impartir nuestro conocimiento en tcnicas y habilidades utilizadas en el desarrollo de nuevas aplicaciones web basadas en lenguaje html, css, php, mysql, javascript y ajax. Al final del curso el estudiante tendr la capacidad de crear sistemas y estructuras de sitios web complejos (tiendas electrnicas, aulas virtuales, blogs, etc). Siguiendo con los estndares para la optimizacin de nuestro cdigo de fuente. Venezuela cuenta con excelentes sistemas para la gestin empresarial, movimiento mercantil, contabilidad general y muchas otras aplicaciones relacionadas con el software ya sea libre o comercial. Cuando hacemos referencias a aplicaciones web que sirvan de gran utilidad para usuarios a nivel global son muy pocos los sitios web que llegan a esta altura. VenSOCIAL del acrnimo Venezuela en redsocial busca la manera de integrar todas las aplicaciones existentes para darle un giro de 180 y rehacerlas a nuestro estilo de vida, la manera en que nos gustara ver un sitio web con sello venezolano desarrollado por nosotros estudiantes unefistas.

La mesclas de los lenguajes bsicos pero muy importantes se le conoce como XHTML siendo este la base para la creacin de sitios web dinmicos debido a que la internet fue creciendo, se necesitaba el control y gestin de estos cdigos del cual surgieron nuevos lenguajes de programacin que facilitara la redaccin del XHTML.

Desde esta primera unidad se hace referencia a todo lo relacionado con hojas de estilo CSS, archivos XML y toda aplicacin que venga del lado del servidor. El curso de XHTML es bien extenso si se quiere especializar en alguno de sus divisiones. Existen muchos editores de texto que nos ayudaran a crear nuestros sitios web fcilmente, este no ser la solucin ms profesional ya debemos tener conocimiento bsico de lo que estamos escribiendo, con el fin de que a la hora de depurar un error sea fcil la comprensin del cdigo para el programador.

Unidad 1. Introduccin a HTML Qu es HTML Versiones de HTML Los navegadores. Compatibilidad Editores Introduccin al Bloc de notas Compaginar dos sesiones Etiquetas Mi primera pgina

Qu es HTML

HTML es el acrnimo de HyperText Markup Language, que traducido a nuestro idioma es Lenguaje de Marcacin de Texto. Es una herramienta para que el ordenador conectado a Internet interprete como visualizar el documento. No es un lenguaje de programacin y no tiene compilador alguno, as que si hay algn error que no detecta lo visualizar de la manera en la que lo ha entendido. Es un sistema de etiquetas que indica al ordenador cuando hay que sealar una cursiva, separar un prrafo o definir el color del texto. De todas maneras, tiene sus limitaciones as que a menudo se utilizan otras herramientas como las hojas de estilo, que le dan mayor libertad al diseador. En concreto, el HTML le da las indicaciones mencionadas al programa cliente, el browser o navegador para que presente el documento en la pantalla de la manera adecuada. El HTML se hizo popular por su sencillez, era fcil de aprender y eso lo hace accesible a mayor nmero de personas. Estos documentos web deben estar escritos con el mismo lenguaje para que diferentes ordenadores puedan leerlos, si alguien utiliza un sistema diferente no podr compartir su informacin con los que usan el HTML ni podr visualizar los de los dems. Por eso la tendencia es crear un estndar que evoluciona poco a poco y que es compatible con la versin anterior. La creacin

El fsico nuclear Tim Berners Lee defini la primera versin de HTML en el ao 1989. Despus evolucionara hasta llegar a cuatro versiones ms. HTML 4 fue la ltima en 1998. Despus llegara el lenguaje que aun utilizamos, el XHTML hijo del XML y el HTML. No caigamos en el error de pensar que uno supone la desaparicin del otro pues el XHTML necesita del HTML para ser entendido por el ordenador. En otras palabras, el HTML abre las puertas y el XHTML trabaja.

Pero como deca al principio de estas lneas, nada surge de la nada. Berners Lee desarroll su idea mientras trabajaba en el CERN (Centro Europeo para la investigacin Nuclear), pretenda facilitar el acceso a todos los datos del Centro independientemente del ordenador en el que se encontrara esa informacin, tanto si estaba en el propio centro o en los ordenadores de las diferentes instituciones que colaboraban con el CERN. El producto de su idea sera una plataforma de tipo hipertexto y un protocolo de comunicaciones que se denomin HTTP (Hyper Text Transfer Protocol). En su pgina web, Berners afirma que se puede inventar cualquier cosa que imagines que un ordenador pueda hacer. Y ese fue su caso, imagin una situacin de completa comunicacin a partir de unas herramientas que ya existan, convenci a su equipo y superiores que se podan unir y las uni. Hablamos del concepto de Hipertexto (Conocido tambin como link) con el que se pueden conectar dos elementos entre si y el SGML (Standard General Markup Language) el cual sirve para colocar etiquetas o marcas en un texto que indique como debe verse.

Antes de seguir es importante definir la funcin del HTTP, ya que como vemos est ntimamente relacionado con la evolucin y creacin del HTML. HTTP es el protocolo utilizado en las transacciones de la World Wide Web. Es el sistema mediante el cual se envan las peticiones para acceder a una pgina web y mediante el cual sta responde. El http enva el hipertexto (contenido de las pginas web) para ser visualizado en pantalla. Este protocolo tambin sirve para enviar informacin adicional en ambos sentidos, como formularios con mensajes y otros similares. Los Padres del HTML

El Hipertexto: El primero en usar este trmino fue Ted Nelson en su artculo No more teacher s dirty looks . Utilizaba sta palabra para referirse a escritos no secuenciales que coordinaran la presentacin de cualquier tipo de informacin, texto, imagen o audio. Un media donde el usuario pudiera interactuar con la informacin.

En un inicio Nelson trabajaba con tarjetitas de papel relacionadas entre ellas por palabras clave. Con esta idea crea, en los aos sesenta, la organizacin Xanadu con el fin de aplicar el concepto de hipertexto a otros tipos de trabajos.Tampoco debemos olvidar a Vannevar Bush, que dieciocho aos antes haba hablado de una idea muy similar con otro nombre, el memex. En su artculo As we may think publicado en la revista The Atlantic Monthly en 1945, Bush expone su idea de compartir informacin especializada mediante las mquinas y poco ms tarde crea el memex, un dispositivo mecnico para almacenar libros y grabaciones. La genialidad del invento se basaba en la bsqueda de informacin que era rpida, sencilla y no-lineal. Sera sta la idea base del que ahora conocemos hipertexto. El Hipertexto como se le conoce en nuestros das es un instrumento donde se encuentran y cruzan diversos documentos. Normalmente el hipertexto funciona con hipervnculos, as se puede acceder rpidamente a un documento relacionado con el que se ha consultado inicialmente. Cuando empezaban a popularizarse los ordenadores personales en los aos ochenta IBM ide un sistema de gua y enlace para sus PC mientras que Macintosh desarrollaba la Intermedia y la Hypercard. El SGML (Standard Generalized Markup Language) fue publicado por la Organizacin Internacional de Estndares el 1986. En espaol significa Lenguaje Estndar de Marcacin General. Se trata de un sistema que organiza y etiqueta documentos. Con l se especifican las reglas de etiquetado aunque no impone ningn conjunto de etiquetas en especial. Es con estos trminos que se define el HTML. Uno de sus principales usuarios es la industria de publicacin de documentos. sta crea y mantiene documentos que luego son llevados a otros formatos, entre ellos HTML, Postscript, RTF, etc.

La evolucin del HTML La idea de Berners-Lee surgi hacia el 1989 y en los dos aos siguientes defina el HTML como un subconjunto del SGML al que ms tarde llamara nivel 0. Esta primera versin solamente marcaba encabezados, listas y anclas pero fue suficiente para que se creara la World Wide Web. Surgieron varias versiones de este primer HTML pero ninguna de ellas llegara a convertirse en el estndar oficial. Lo ms cercano fue el HTML 2.0, al cual se le puso el nombre para distinguirlo de la coleccin de estndares no oficiales que iban surgiendo. Tim Berners fundara el W3C (World Wide Web Consotium) en 1995 y poco despus surgi el borrador de la tercera versin, HTML 3.0. ste daba mucha ms libertad de creacin al diseador web. Facilitaba la creacin de tablas, el texto poda fluir alrededor de las figuras y se mostraban elementos matemticos complejos. Sus creadores pretendan que fuera compatible con la versin anterior pero era demasiado complejo como para que lo soportaran los navegadores de la poca. En septiembre de ese mismo ao se abandon el proyecto debido a la falta de apoyo de los fabricantes de navegadores web. La siguiente versin tampoco lleg a ser propuesta oficialmente. Una nueva versin, el HTML 3.2 abandonaba muchos de los elementos que se haban introducido en el HTML 3.0 a cambio de acoger los elementos que haban desarrollado los fabricantes de navegadores web como Netscape y Mosaic. Por ejemplo, se abandon la posibilidad de introducir frmulas matemticas complejas para delegarlo en un estndar distinto, el MathML. La ltima versin es el HTML 4.0, que tambin incluye muchos elementos especficos que haban sido desarrollados para un navegador web determinado pero que, a su vez, calific a muchos de ellos como desaprobados . El camino evolutivo del HTML ha sido complejo, se ha tenido que lidiar con muchas partes y finalmente ha cesado. Pero las tecnologas continan avanzando y su heredero ahora es el XHTML. La base y el objetivo son los mismos pero esta vez entra un elemento nuevo en escena, el XML. Otro estndar que se asemeja en funcionalidad al SGML pero que es ms sencillo y ms joven. As pues de la fusin de estos dos estndares, XML y HTML, surge el XHTML.

Versiones de HTML
HTML 4.01 Transitional, Strict, Frameset Hay tres versiones de HTML 4.01, y cada una tiene sus propios fines, as que lo mejor es que elijas la ms adecuada para tu proyecto y tu nivel de conocimiento. HTML Strict Es la versin ms limpia y simple de HTML. Con este doctype slo puedes usar las partes del HTML que se refieren a la estructura y, en general, no permite utilizar las partes que se relacionan con el estilo (algunas etiquetas de HTML permiten realizar un diseo bsico, pero esto por suerte ha sido reemplazado por el CSS). Si haces tus pginas web basndote en esta versin de HTML te ser mucho ms fcil pasar a XHTML en un futuro. HTML Transitional Esta es la versin mixta. Se permite el uso de etiquetas de estilo, que realmente no tienen cabida en HTML, pero que se introdujeron antes de que el CSS existiera. En general, es mejor mantener el marcado (HTML) y el estilo (CSS) totalmente independiente, ya que esto hace ms fcil cambiar el aspecto de la web ms tarde, e incluso compartir el mismo estilo en varias pginas web, pero si todava no dominas HTML y CSS, este doctype seguramente sea la mejor eleccin.

HMTL Frameset Esta versin de HTML permite utilizar un conjunto de marcos (frames) en lugar del BOBY, por lo que puedes combinar varias pginas en una sola. Parece una tontera, pero es muy importante que definas el tipo de documento de tu web, como se muestra a continuacin, para obtener una interpretacin correcta de tu cdigo fuente en todos los navegadores actuales. Si no lo haces corres el riesgo de que la pgina no se vea como t quieres. Este cdigo debera ser lo primero que aparezca en el cdigo fuente de tu pgina, antes incluso de la etiqueta HTML. Los tres doctypes para HTML 4.01 son:

Strict <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Ejemplos:

Mi primera lnea de cdigo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Los navegadores. Compatibilidad

Como hemos dicho, el navegador instalado en el ordenador del usuario es el que interpreta el cdigo HTML de la pgina que visita por lo que a veces puede ocurrir que dos usuarios visualicen la misma pgina de forma distinta porque tienen instalados navegadores distintos o incluso versiones distintas del mismo navegador. Los navegadores de hoy en da pretenden ser compatibles con la ltima versin de HTML. Es necesario realizar extensiones de los navegadores para que puedan ser compatibles con esta ltima versin. Dos de los navegadores que continuamente estn realizando extensiones son Internet Explorer y Netscape Navigator, que realizan extensiones incluso antes de que se establezcan los estndares, intentando incluir las nuevas funciones incluidas en los borradores. Los navegadores tienen que ser compatibles con la ltima versin HTML para poder interpretar el mayor nmero posible de etiquetas. Si un navegador no reconoce una etiqueta, la ignora y el efecto que pretenda la etiqueta no queda reflejado en la pgina. Para realizar las extensiones de estos navegadores se aaden nuevos atributos a las etiquetas ya existentes, o se aaden nuevas etiquetas. Como resultado a estas extensiones, habrn pginas cuyo cdigo podr ser interpretado completamente por todos los navegadores, mientras que otras, al incluir nuevos atributos o etiquetas del borrador de la ltima versin de HTML, solo podrn ser interpretadas en su totalidad en los navegadores ms actualizados. En este ltimo caso tambin puede ocurrir que alguna etiqueta de la pgina solamente pueda ser interpretada por un navegador concreto, y otra etiqueta por un navegador diferente al anterior, por lo que nunca sera visualizada en su totalidad por ningn navegador. Uno de los retos de los diseadores de pginas web es hacer las pginas ms atractivas utilizando toda la potencia del lenguaje HTML pero teniendo en cuentas estos problemas de compatibilidades para que el mayor nmero de internautas vean sus pginas tal como las ha diseado.

Comparacin de diseos estndar cs3

Editores
Un editor es un programa que nos permiten redactar documentos. Hoy en da existen un gran nmero de editores que permiten crear pginas web sin la necesidad de escribir ni una sola lnea de cdigo HTML. Estos editores disponen de un entorno visual, y generan automticamente el cdigo de las pginas. Al poder ver en todo momento cmo quedar la pgina en el navegador, se facilita la creacin de las pginas, y el uso de mens permite ganar rapidez. Estos editores visuales pueden generar en ocasiones cdigo basura, es decir, cdigo que no sirve para nada, en otras ocasiones puede ser ms efectivo corregir directamente el cdigo por lo que resulta necesario saber HTML para poder depurar el cdigo de nuestra pginas. Algunos de los editores visuales con los que podrs crear tus pginas web son Macromedia Dreamweaver, Microsoft Frontpage, Adobe Pagemill, NetObjects Fusion, CutePage, HotDog Proffesional, Netscape Composer y Arachnophilia, de los cuales algunos tienen la ventaja de ser gratuitos. Es aconsejable comenzar utilizando una herramienta lo ms sencilla posible, para tener que insertar nosotros mismos el cdigo HTML. Esto permite familiarizarse con el lenguaje, para poder utilizar algn editor visual posteriormente, y depurar el cdigo cuando fuera necesario. Para crear pginas web escribiendo directamente el cdigo HTML puedes utilizar la herramienta Wordpad o el Bloc de notas que proporciona Windows. A lo largo de este curso vamos a trabajar con el Bloc de notas para crear nuestras pginas, ya que se trata de un editor de textos muy sencillo de manejar, que nos permitir crear pginas a travs del cdigo HTML.

Etiquetas
Las etiquetas o marcas delimitan cada uno de los elementos que componen un documento HTML. Existen dos tipos de etiquetas, la de comienzo de elemento y la de fin o cierre de elemento. La etiqueta de comienzo est delimitada por los caracteres < y >. Est compuesta por el identificador o nombre de la etiqueta, y puede contener una serie de atributos opcionales que permiten aadir ciertas propiedades. Su sintaxis es: <identificador atributo1 atributo2 ...> Los atributos de la etiqueta de comienzo siguen una sintaxis predefinida y pueden tomar cualquier valor propio del usuario, o valores HTML predefinidos. La etiqueta de final est delimitada por los caracteres </ y >. Est compuesta por el identificador o nombre de la etiqueta, y no contiene atributos. Su sintaxis es: </identificador> Cada uno de los elementos de la pgina se encontrar entre una etiqueta de comienzo y su correspondiente etiqueta de cierre, a excepcin de algunos elementos que no necesitan etiqueta de cierre. Tambin es posible anidar etiquetas, es decir, insertar etiquetas entre otras etiquetas de comienzo y de cierre. A continuacin tenemos un ejemplo en el que tenemos la etiqueta <font..> anidada dentro de la etiqueta <p..>.: <p align="center"><font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos a www.vensocial.com</font></p>

Este cdigo dara como resultado el siguiente texto:

Bienvenidos a www.vensocial.com
Es importante anidar bien las etiquetas, las etiquetas no se pueden 'cruzar', en nuestro ejemplo hemos empezado por la etiqueta <p..>, Antes de cerrar esta etiqueta hemos puesto la <font..> Por lo que antes de cerrar la etiqueta <p..> debemos cerrar la etiqueta <font..>

Si 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 ya mencionadas 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: <ETIQUETA parmetros> ... </ETIQUETA> Como ves una apertura y un cierre. Algunas etiquetas (como <BR> cambio de lnea o <HR> lnea horizontal) no llevan cierre. Fijaros que lo primero que tenemos es la etiqueta <HTML> cerrada al final del documento con </HTML>, eso quiere decir que le indica al documento donde comienza y que estamos ante un HTML: <HTML> ... </HTML> Dentro de ese documento vemos una parte llamada cabecera, que la reconocers porque est limitada con la etiqueta <HEAD> </HEAD>. l contenido de esta parte no siempre es visible, y si lo es nunca se muestra en la pgina en s. Contiene por ejemplo el ttulo que se ve en la ventana del explorador, arriba a la izquierda. La cabecera queda por tanto: <HEAD> <TITLE>Mi pgina web</TITLE> </HEAD>

El cuerpo del documento

La otra parte es el cuerpo o <BODY> </BODY>, es el contenido de la pgina web. Tiene una etiqueta con cierre: <BODY> ... </BODY> Y ahora el contenido: <H1 align="center"> Mi primera pgina web</H1> Con esto colocaremos el texto en formato <H1> (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:

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

Los cdigos ms bsicos.

Bueno, para poder construir tu pgina web, debes usar estos cdigos (son los ms bsicos). <html>: define el inicio del documento HTML, le indica al navegador que lo que viene a continuacin debe ser interpretado como cdigo HTML. Esto es as de facto, ya que en teora lo que define el tipo de documento es el DOCTYPE, significando la palabra justo tras DOCTYPE el tag de raz. <script>: incrusta un script en una web, o se llama a uno mediante src="url del script" Se recomienda incluir el tipo MIME en el atributo type, en el caso de JavaScript text/javascript. <head>: define la cabecera del documento HTML, esta cabecera suele contener informacin sobre el documento que no se muestra directamente al usuario. Como por ejemplo el ttulo de la ventana del navegador. Dentro de la cabecera <head> podemos encontrar: <title>: define el ttulo de la pgina. Por lo general, el ttulo aparece en la barra de ttulo encima de la ventana. <link>: para vincular el sitio a hojas de estilo o iconos Por ejemplo:<link rel="stylesheet" href="/style.css" type="text/css"> <style>: para colocar el estilo interno de la pgina; ya sea usando CSS, u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo externo usando la etiqueta <link>

<meta>: para metadatos como la autora o la licencia, incluso para indicar parmetros http (mediante http-equiv="" cuando no se pueden modificar por no estar disponible la configuracin o por dificultades con server-side scripting. <body>: define el contenido principal o cuerpo del documento. Esta es la parte del documento html que se muestra en el navegador; dentro de esta etiqueta pueden definirse propiedades comunes a toda la pgina, como color de fondo y mrgenes. Dentro del cuerpo <body> podemos encontrar numerosas etiquetas. A continuacin se indican algunas a modo de ejemplo: <h1> a <h6>: encabezados o ttulos del documento con diferente relevancia. <table>: define una tabla <tr>: fila de una tabla <td>: columna de una tabla <a>: Hipervnculo o enlace, dentro o fuera del sitio web. Debe definirse el parmetro de pasada por medio del atributo href. <div>: divisin de la pgina. Se recomienda, junto con css, en vez de <table> cuando se desea alinear contenido <img>: imagen. Requiere del atributo src, que indica la ruta en la que se encuentra la imagen. <b>: texto en negrita. <i>: texto en cursiva. <s>: texto tachado. <u>: texto subrayado. <!-- ... -->: Podemos comentar nuestro cdigo sin imprimir el texto

La mayora de etiquetas deben cerrarse como se abren, pero con una barra ("/" ) tal como se muestra en los siguientes ejemplos: <table><tr><td>Contenido de una celda</td></tr></table> <script type="text/javascript></script>.

Tips:
Seleccionando la opcin Ver cdigo fuente en el navegador, se puede ver realmente la informacin que est recibiendo ste y cmo la est interpretando. Por ejemplo: en Internet Explorer o en Firefox, simplemente hay que desplegar el men Ver y luego elegir Cdigo fuente. De esta forma, se abrir el editor de texto configurado como predeterminado en el sistema con el cdigo fuente de la pgina que se est viendo en ese momento en el explorador. Otra forma ms rpida consiste en hacer clic con el botn derecho del ratn en cualquier punto del rea donde el navegador muestra la pgina web y elegir Ver cdigo fuente. Para el navegador Firefox existe el plugin FireBug, un depurador que permite entre otras cosas visualizar el cdigo HTML de la pgina que estamos visualizando de forma dinmica, y que incluso resalta el trozo de cdigo por el que est pasando el ratn en cada momento, por lo que es una herramienta muy til para aprender diversos conceptos de este lenguaje.

Mi primera Pagina
Lo primero que tienes que hacer es abrir el Bloc de notas o cualquier otro editor de texto. En este caso para abrirlo, puedes dirigirte al men Inicio, Programas, Accesorios, opcin Bloc de notas. Seguidamente introduce, en el documento en blanco, el texto siguiente:

<html> <head> <title>MI PRIMERA PAGINA</title> </head> <body bgcolor="#FFCC99"> <font color="#CC3300" size="5">Hola, estoy haciendo pruebas.</font> </body> </html>

Guarda el documento con la extensin html, con el nombre miprimpag.html. Puedes guardarlo a travs del men Archivo, opcin Guardar. Pulsando dos veces sobre el icono del archivo miprimpag.html, ste debera abrirse automticamente en el navegador que tengas instalado en tu ordenador. El navegador deber mostrar una pgina como la de la derecha. Como puedes ver, la pgina resultante es una pgina que solamente tiene una lnea de texto.

Si observas la barra de ttulo del navegador, vers que el ttulo de la pgina es MI PRIMERA PAGINA. Este ttulo ha sido establecido por la lnea <title>MI PRIMERA PAGINA</title>. El color de fondo de la pgina ha sido establecido por la lnea <body bgcolor="#FFCC99">. El texto Hola, estoy haciendo pruebas. se ha insertado a travs de lnea <font color="#CC3300" size="5">Hola, estoy haciendo pruebas.</font>

Unidad 2. Estructura de una pgina

Identificador del tipo de documento <html> Cabecera de la pgina <head> Ttulo de la pgina <title> La etiqueta <meta> Cuerpo del documento <body> Colores en hexadecimal

Unidad 2. Estructura de una pgina (I) Profundizando y conociendo nuestro cdigo La estructura bsica de una pgina es: <html> <head> ... </head> <body> ... </body> </html>

Ahora veamos cmo funcionan estas etiquetas.

Identificador del tipo de documento <html> Todas las pginas web escritas en HTML tienen que tener la extensin html o htm. Al mismo tiempo, tienen que tener las etiquetas <html> y </html>. Entre las etiquetas <html> y </html> estar comprendido el resto del cdigo HTML de la pgina. Por ejemplo:

<html> ... </html>

Cabecera de la pgina <head>

La cabecera de la pgina se utiliza para agrupar informacin sobre ella, como puede ser el ttulo.

Est formada por las etiquetas <head> y </head>. La etiqueta <head> va justo debajo de la etiqueta <html>.

Por ejemplo: <html> <head> ... </head> ... </html>

Entre las etiquetas <head> y </head>, las etiquetas que podemos encontrar y ms se utilizan son: <link>, <style>, <script> (estas etiquetas las veremos ms adelante), <meta> <title>

Ttulo de la pgina <title> El ttulo de la pgina es el que aparecer en la parte superior de la ventana del navegador, cuando la pgina est cargada en l.

Para asignar un ttulo a una pgina es necesario escribir el texto deseado entre las etiquetas <title> y </title>.

Estas etiquetas han de estar dentro de la cabecera, es decir, entre las etiquetas <head> y </head>.

Por ejemplo:

<html> <head> <title>Curso de HTML</title> </head> ... </html>

Cuerpo del documento <body> El cuerpo del documento contiene la informacin propia del documento, es decir lo que queremos que se visualice, el texto de la pgina, las imgenes, los formularios, etc. Todos estos elementos tienen que encontrarse entre las etiquetas <body> y </body>, que van justo debajo de la cabecera. Por ejemplo:

<html> <head> <title>Curso de HTML</title> </head> <body> ... </body> </html>

A travs de la etiqueta <body> es posible establecer el color o la imagen de fondo de la pgina.

El color de fondo puede establecerse a travs del atributo bgcolor, al que es posible asignarle un color representado en hexadecimal o por un nombre predefinido.

Si no sabes cmo representar los colores en hexadecimal, o a qu nmero o nombre se corresponde cada uno de ellos, puedes consultarlo aqu.

Por ejemplo, para hacer que el color de fondo de una pgina sea de color azul, tendremos que escribir:

... <body bgcolor="#0000FF"> ... </body> </html>

Sera equivalente a poner:

... <body bgcolor="blue"> ... </body> </html>

La imagen de fondo puede establecerse a travs del atributo background, indicando la ruta en la que se encuentra la imagen.

Por ejemplo, para hacer que la imagen de fondo de una pgina sea la imagen fondo.gif, que se encuentra en el mismo directorio en el que se encuentra guardada la pgina, tendremos que escribir:

... <body background="fondo.gif"> ... </body> </html>

En el caso de que la imagen no se encuentre en el mismo directorio que la pgina, y se encuentre dentro de la carpeta imagenes, que s se encuentra en el mismo directorio que la pgina, tendremos que escribir:

... <body background="imagenes/fondo.gif"> ... </body> </html>

A travs de la etiqueta <body> tambin es posible establecer el color del texto de la pgina a travs del atributo text.

Por ejemplo, para hacer que el color del texto de una pgina sea de color rojo, tendremos que escribir:

... <body text="#FF0000"> ... </body> </html>

Entre el borde de la ventana y el contenido de la pgina existe un margen, cuyo tamao en pxeles puede modificarse mediante los atributos leftmargin (margen izquierdo) y topmargin (margen superior). Estos atributos no funcionan para el navegador Netscape, pero s los atributos marginwidth (anchura del margen) y marginheight (altura del margen).

Estos atributos suelen utilizarse para eliminar el margen, para lo cual deben valer cero.

Por ejemplo, para hacer que una pgina no tenga margen superior, y tenga un margen izquierdo de 20 pxeles, tendremos que escribir:

... <body leftmargin="20" topmargin="0" marginwidth="20" marginheight="0" > ... </body> </html>

Unidad 3. El texto (I)

A lo largo de este tema vamos a aprender a cambiar las propiedades del texto, as como a insertar caracteres especiales o separadores. Caracteres especiales y espacios en blanco Los caracteres < y > son dos caracteres especiales que indican inicio y fin de etiqueta. Si se desea insertar estos caracteres como texto hay que escribir el nombre que los representa:

< Se representa con &lt;

> Se representa con &gt;

Existen otra serie de caracteres que no se visualizan correctamente en algunos navegadores, como es el caso de la y las letras acentuadas, por lo que al igual que ocurre con los caracteres especiales < y >, para insertarlos como texto habra que escribir el nombre que los representa.

A continuacin se muestra una lista con algunos caracteres y el nombre con el que han de ser representados: Carcter

Carcter & "

Representacin &euro; &ccedil; &Ccedil; &uuml; &Uuml; &amp; &iquest; &iexcl; &quot; &middot; &ordm; &ordf; &not; &copy; &reg;

Carcter < >

Representacin &lt; &gt; &aacute; &Aacute; &eacute; &Eacute; &iacute; &Iacute; &oacute; &Oacute; &uacute; &Uacute; &ntilde; &Ntilde; &#153;

Siempre que se inserta texto en HTML hay que tener en cuenta que si se escriben varios espacios en blanco seguidos slamente se mostrar uno en el navegador. Para conseguir que se muestren varios espacios en blanco seguidos puede sustituirse cada uno de ellos por &nbsp;.

Por ejemplo, para insertar el texto:

Bienvenidos, esta es mi 1 pgina!

Habra que escribir:

&iexcl;Bienvenidos, esta es mi&nbsp;&nbsp;&nbsp;1&ordf;&nbsp;&nbsp;&nbsp;p&aacute;gina!

Comentarios Existe un mtodo que define la codificacin de estos caracteres con esto nos ahorramos la laboriosa tarea de escribir cada letra especial por su cdigo esta se define en el head dentro de una etiqueta de tipo meta ejemplo Por defecto siempre se carga esta <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> Para optimizar nuestro html lo ideal sera colocar esta etiqueta <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> En ocasiones podemos desear aadir comentarios aclaratorios dentro del cdigo, de manera que no sean visualizados en el navegador, pero s a la hora de editar el documento.

Para insertar comentarios dentro del cdigo, basta con insertar el texto entre <!-- y //-->.

Todo el cdigo que se inserte entre estos smbolos no ser visualizado en los navegadores.

Por ejemplo, para insertar el texto siguiente con un comentario:

Bienvenidos, esta es mi 1 pgina!

Habra que escribir:

<!-- A continuacin aparecer una lnea de texto//--> &iexcl;Bienvenidos, esta es mi 1&ordf; p&aacute;gina!

Saltos de lnea <br> En general, cuando trabajamos con un editor de texto se produce un salto de lnea al pulsar la tecla INTRO. Si pulsamos INTRO en un documento HTML, el salto de lnea se producir en el cdigo, pero no se mostrar en el navegador. Para que se produzca el salto de lnea en el navegador, en lugar de pulsar la tecla INTRO hay que insertar la etiqueta <br> donde se desee que se produzca el salto.

La etiqueta <br> no precisa ninguna etiqueta de cierre. No hay que insertar la etiqueta </br> despus de ella, ya que dicha etiqueta no existe.

Por ejemplo, para insertar el texto:

Queridos usuarios, Tengo el placer de comunicaros que hay una nueva seccin.

Habra que escribir:

Queridos usuarios,<br>tengo el placer de comunicaros que hay una nueva secci&oacuten.

Colores en hexadecimal
Los colores en HTML se representan mediante un nmero hexadecimal. Un nmero hexadecimal se diferencia de un nmero decimal en que no slo puede tomar valores del 0 al 9, sino que puede tomar hasta diecisis valores distintos, que van del 0 al 9, y de la A a la F. Cada color estar representado por un grupo de seis dgitos en hexadecimal, precedidos por una almohadilla, como por ejemplo #FFFFFF. Existen 216 colores seguros para web. stos son los colores que se muestran de la misma forma en Microsoft Internet Explorer y en Netscape Navigator, tanto en Windows como en Macintosh. Tambin podemos personalizar nuestros propios colores, modificando los valores de cada uno de los dgitos que forman parte del nmero hexadecimal. A continuacin se muestran los 216 colores seguros para web, para que puedas consultarlos cuando lo necesites.

#000000 #003300 #006600 #009900 #00CC00 #00FF00 #330000 #333300 #336600 #339900 #33CC00 #33FF00 #660000 #660033 #666600 #669900 #66CC00 #66FF00 #990000 #993300 #996600 #999900 #99CC00 #99FF00 #CC0000 #CC3300 #CC6600 #CC9900 #CCCC00 #CCFF00 #FF0000 #FF3300 #FF6600 #FF9900 #FFCC00 #FFFF00

#000033 #003333 #006633 #009933 #00CC33 #00FF33 #330033 #333333 #336633 #339933 #33CC33 #33FF33 #660033 #663333 #666633 #669933 #66CC33 #66FF33 #990033 #993333 #996633 #999933 #99CC33 #99FF33 #CC0033 #CC3333 #CC6633 #CC9933 #CCCC33 #CCFF33 #FF0033 #FF3333 #FF6633 #FF9933 #FFCC33 #FFFF33

#000066 #003366 #006666 #009966 #00CC66 #00FF66 #330066 #333366 #336666 #339966 #33CC66 #33FF66 #660066 #663366 #666666 #669966 #66CC66 #66FF66 #990066 #993366 #996666 #999966 #99CC66 #99FF66 #CC0066 #CC3366 #CC6666 #CC9966 #CCCC66 #CCFF66 #FF0066 #FF3366 #FF6666 #FF9966 #FFCC66 #FFFF66

#000099 #003399 #006699 #009999 #00CC99 #00FF99 #330099 #333399 #336699 #339999 #33CC99 #33FF99 #660099 #663399 #666699 #669999 #66CC99 #66FF99 #990099 #993399 #996699 #999999 #99CC99 #99FF99 #CC0099 #CC3399 #CC6699 #CC9999 #CCCC99 #CCFF99 #FF0099 #FF3399 #FF6699 #FF9999 #FFCC99 #FFFF99

#0000CC #0033CC #0066CC #0099CC #00CCCC #00FFCC #3300CC #3333CC #3366CC #3399CC #33CCCC #33FFCC #6600CC #6633CC #6666CC #6699CC #66CCCC #66FFCC #9900CC #9933CC #9966CC #9999CC #99CCCC #99FFCC #CC00CC #CC33CC #CC66CC #CC99CC #CCCCCC #CCFFCC #FF00CC #FF33CC #FF66CC #FF99CC #FFCCCC #FFFFCC

#0000FF #0033FF #0066FF #0099FF #00CCFF #00FFFF #3300FF #3333FF #3366FF #3399FF #33CCFF #33FFFF #6600FF #6633FF #6666FF #6699FF #66CCFF #66FFFF #9900FF #9933FF #9966FF #9999FF #99CCFF #99FFFF #CC00FF #CC33FF #CC66FF #CC99FF #CCCCFF #CCFFFF #FF00FF #FF33FF #FF66FF #FF99FF #FFCCFF #FFFFFF

Existe otra forma de representar algunos colores, sin la necesidad de utilizar nmeros en hexadecimal. Estos colores pueden representarse por su nombre, y son los siguientes:
Color Hexadecimal #FFFFFF #000000 #000080 #0000FF #008000 #008080 #00FF00 #00FFFF #800000 #800080 #808000 #808080 #C0C0C0 #FF0000 #FF00FF #FFFF00 Nombre white black navy blue green teal lime aqua maroon purple olive gray silver red fuchsia yellow

Introduccin al desarrollo de contenido por tablas

Tablas simples Una tabla HTML puede ser considerada de manera simple como un grupo de filas donde cada una de ellas contiene un grupo de celdas. Las tablas, as como toda estructura en documentos HTML, son definidas usando tags. Una tabla simple puede ser insertada en un documento HTML usando tres tags: el tag HTML table (principal contenedor), el tag HTML tr (fila contenedora) y el tag HTML td (celda simple). Veamos un ejemplo: Cdigo Visualizacin

<table border="1" summary="Ejemplo de tabla simple."> <tr> <td>Celda 1</td> <td>Celda 2</td> <td>Celda 3</td> Celda 1 Celda 2 Celda 3 </tr> <tr> Celda 4 Celda 5 Celda 6 <td>Celda 4</td> <td>Celda 5</td> <td>Celda 6</td> </tr> </table> Nota: Los bordes en este ejemplo son creados utilizando el atributo "border" para el tag HTML table, el cual es slo utilizado para mejorar la visualizacin. Como los atributos de presentacin van siendo desaprobados con cada versin del estndar HTML, y dado que los mismos efectos pueden lograrse usando hojas de estilo, recomendamos evitar el uso de atributos de presentacin como "border". Ten en cuenta que las celdas vacas igual deben ser declaradas utilizando sus respectivos tags para lograr correctitud en el cdigo. Cuando el contenido de una celda debe ser vaco, deberas usar siempre un espacio en blanco (&nbsp;) en su lugar. Esto har que tu pgina sea ms comatible, dado que ciertos navegadores tienen problemas al mostrar celdas vacas.

Tipos de celdas Dos tipos de celda pueden ser definidos en una tabla HTML. Una de ellas es la celda simple (tag HTML td) anteriormente utilizada en el ejemplo de "tabla simple", y la otra es un tipo de celda especial (tag HTML th) que contiene informacin de encabezado para todas las celdas en la columna (pertenecientes al mismo grupo horizontal). Los navegadores pueden graficar el contenido de las celdas de encabezado en una manera especial (usualmente, texto centrado y en negrita). Este tipo de celda es comnmente encontrado en el encabezado de una tabla. En el ejemplo siguiente la misma "tabla simple" es definida pero esta vez con celdas de encabezado: Cdigo <table border="1" summary="Ejemplo de tabla simple con celdas de encabezado."> <tr> <th>Columna 1</th> <th>Columna 2</th> <th>Columna 3</th> </tr> <tr> <td>Celda 1</td> <td>Celda 2</td> <td>Celda 3</td> </tr> <tr> <td>Celda 4</td> <td>Celda 5</td> <td>Celda 6</td> </tr> </table> Visualizacin

Columna Columna Columna 1 2 3 Celda 1 Celda 4 Celda 2 Celda 5 Celda 3 Celda 6

Las caractersticas de estas celdas pueden ser logradas visualmente usando una celda simple con atributos de presentacin (texto centrado y en negrita), pero las celdas de encabezado proporcionan ms informacin oculta que puede ser til para navegadores no visuales (los navegadores hablados pueden decir a los usuarios el contenido de una celda asocindolo inmediatamente con el encabezado correspondiente) y araas (como las de los motores de bsqueda lo que ayudara en la promocin del sitio).

Otra forma de asociar celdas de encabezados con celdas simples es usando los atributos: "headers" para definir una lista de celdas que proveen informacin de encabezado para la celda actual (ver el tag HTML td) y "scope" para definir una lista de celdas para las cuales la celda actual provee informacin de encabezado (ver el tag HTML th). Unificando celdas Para algunas tablas puedes necesitar unificar dos o ms celdas en una sola que tomar el lugar de aquellas afectadas. Estas unificaciones pueden lograrse mediante los atributos "rowspan" (para unificar verticalmente) y "colspan" (para unificar horizontalmente), ambos disponibles para celdas (tag HTML td y tag HTML th). Cdigo <table border="1" summary="Ejemplo de tabla simple con unificaci&oacute;n de celdas de una fila."> <tr> <td>Campo 1</td> <td>Campo 2</td> <td>Campo 3</td> </tr> <tr> <td colspan="2">Campos 4 y 5</td> <td>Campo 6</td> </tr> <tr> <td>Campo 7</td> <td>Campo 8</td> <td>Campo 9</td> </tr> </table> Visualizacin

Campo Campo Campo 1 2 3 Campos 4 y 5 Campo 6

Campo Campo Campo 7 8 9

Observa en el ejemplo anterior como una definicin de celda unificando dos celdas, es el equivalente unificado de dos definiciones de celda simple. Esto tambin funciona para unificar verticalmente con una pequea diferencia debida a la naturaleza de las tablas HTML. Al unificar celdas verticalmente, las definiciones de celda en la columna afectada debern ser omitidas. Observa el siguiente ejemplo, donde el campo 1, 4 y 7 son unificados: Cdigo <table border="1" summary="Ejemplo de tabla simple con unificaci&oacute;n de celdas de una columna."> <tr> <td rowspan="3">Campo unificado</td> <td>Campo 2</td> <td>Campo 3</td> </tr> <tr> <td>Campo 5</td> <td>Campo 6</td> </tr> <tr> <td>Campo 8</td> <td>Campo 9</td> </tr> </table> Visualizacin

Campo Campo 2 3 Campo unificado Campo Campo 5 6 Campo Campo 8 9

Debes ser cuidadoso al unificar filas y columnas de modo de que no se encimen las celdas unificadas. Esto puede provocar un resultado indeseado.

Rentabilidad de un sitio web:

Los sitios web llegan a ser rentables si consiguen ser populares. La popularidad de una pgina se conforma a grandes rasgos de tres aspectos: nmero de visitas diarias, la posicin en buscadores y el nmero de links que desde otros sitios apuntan a ella. Esto ltimo es un aspecto fundamental para mantener la popularidad estable en el tiempo. Algunos sitios ofrecen un contenido gratuito para atraer visitas que lo hacen escalar en popularidad y basan sus ingresos vendiendo espacios de propaganda en el propio sitio. Otros, son comerciantes directos que utilizan las pginas para exponer sus productos o servicios, (tienda virtual). Es decir, unos muestran informacin escrita (cientfica, arte, noticias, entretenimiento, revistas, etc.), y otros venden productos en lnea. Ninguno de ellos podr mantener su rentabilidad en el tiempo si no tiene una buena posicin en buscadores que le asegure un mnimo de visitas diarias. No es ningn secreto que internet es una fantstica forma de encontrar nuevos mercados, nuevos clientes y finalmente, nuevas formas de obtener ingresos con costes muy bajos. Y tampoco sorprender a nadie, si digo, que una pgina web, es la plataforma ideal para conseguir esto. No es ningn secreto que internet es una fantstica forma de encontrar nuevos mercados, nuevos clientes y finalmente, nuevas formas de obtener ingresos con costes muy bajos. Y tampoco sorprender a nadie, si digo, que una pgina web, es la plataforma ideal para conseguir esto.

1.- Dirgete siempre a tu pblico objetivo especfico. No intentes hacer un sitio web para todo tipo de personas que puedan estar interesadas en tus productos y servicios, pues entonces ninguno de ellos se sentir identificado contigo.

Por lo tanto dirgete siempre a un colectivo especfico de forma directa. Ejemplos:

Atencin! Webmaster y Programadores: Bla, bla, bla . Solo Para Emprendedores! Bla, bla, bla

Si Eres Un Empresario Del Comercio, Esto Te Interesa Especial para amas de casa que quieren bla, bla, bla Aficionados a la jardinera Bienvenidos A [Nombre de tu web]

[Consejo: Siempre, siempre, siempre Despus de tu saludacin o mensaje de bienvenida, coloca el mayor beneficio que tu negocio ofrece a tu pblico objetivo. Por ejemplo: Aficionados a la jardinera Bienvenidos A RinconDelJardin.com: Atrvete ahora a descubrir, cmo tener un jardn que envidien tus vecinos, sin contratar a un jardinero profesional Hacindolo t mismo fcil y rpidamente, mientras te diviertes ! ]

2.- Contenido y Grficos. Asegrate que el contenido de tu sitio web y los grficos tienen relevancia respecto al tema de tu negocio. En especial mi consejo es que si un grfico no ayuda a vender tu producto o servicio, es mejor que lo quites de all. Lo nico que har es distraer la atencin del prospecto. [Consejo: Las mejores fotografas que puedes tener en tu sitio web son las de tus clientes satisfechos utilizando tu producto Sin duda!]

3.- Mantente en contacto con tus prospectos.

Una de las formas de hacer un sitio web eficaz y rentable es dotndolo de una forma de captar la direccin de e-mail y el nombre de la mayor cantidad de visitantes que puedas. Luego debers mantenerte peridicamente en contacto con ellos, especialmente por e-mail y siempre, siempre, siempre, con contenidos tiles e interesantes para ellos.

4.- Tu informacin de contacto en todas las pginas. Muchas veces me he topado con sitios web, que para encontrar como ponerme en contacto con ellos, me ha costado Dios y Ayuda , encontrar la forma de contactarles. Es bsico que en todas y cada una de las pginas tengas informacin de contacto, telfono, un link a un formulario de contactos e incluso el e-mail linkeable As conseguirs que ms prospectos entren en contacto contigo, para hacerte preguntas, sugerencias, etc. Y esto, sin duda, representa una gran oportunidad para vender

5.- Tu sitio web, disponible fuera de internet.

Dale a la gente la posibilidad de que puedan ver tu sitio web off line.

Quizs podras ofrecerles una versin de tu web en formato PDF, que se puedan descargar va un autor-respondedor. De esta forma adems estars captando su e-mail y su nombre. Quien se quiera descargar tu sitio web para verlo tranquilamente fuera de lnea, es alguien que est interesado en lo que all tienes y una de dos, o es un competidor, o bien es un potencial cliente.

6.- Contenido original.

Asegrate que la mayor parte del contenido de tu sitio web es original. Es decir que los artculos, informaciones o consejos que puedas tener en tu sitio, en su mayor parte, estn creados por ti o por alguien de tu empresa.

Contenido y Popularidad en Buscadores

El contenido de un sitio web es muy importante. Los motores de bsqueda, utilizan un robot para rastrear los sitios. Este robot o spider, lee pginas web y las clasifica de acuerdo a su tema. Para ello utiliza programas de estadsticos basado en un algoritmo que como resultado demuestra ser con creces ms eficiente que el ser humano en este tipo de labores: retira de sus ndices a los sitios que no tienen lo que dicen tener.

El texto principal de una buena pgina web debe apuntar a un mximo de dos ideas o conceptos (frases claves), debe contener links que salen hacia pginas de otros sitios que sirvan para complementar el tema en cuestin.

Si bien la mayora de los usuarios no lee el texto de las pginas web, igualmente es necesaria su presencia para orientar de mejor forma a los motores de bsqueda en su proceso de indexacin.