diseno y programacion (html, php, asp, javascript, xml, sql) ®

385

Click here to load reader

Transcript of diseno y programacion (html, php, asp, javascript, xml, sql) ®

  • Diseo y Programacin de Pginas Web

    Autor: DesarrolloWeb

    Editor: Miguel ngel Pedregosa Pareja

  • ndice Capitulo 1 Publicar en Internet Tratamos los temas ms bsicos que necesitas saber para publicar una pgina web, como los materiales necesarios, el lenguaje HTML, editores, elegir alojamiento, subir pginas a los servidores y mucho ms.

    Pg. 4

    Capitulo 2 Introduccin al diseo web

    Primeros pasos para aquellas personas que deseen crear su propia pgina web, desde el punto de vista del diseador. Motivacin a seguir, programas a utilizar, etc.

    Pg. 12

    Capitulo 3 Manual de HTML

    HTML es el lenguaje utilizado como base para crear las pginas web. Con este manual puedes aprender a utilizarlo con toda su potencia.

    Pg. 15

    Capitulo 4 Ayudas tcnicas Las ayudas tcnicas son pequeos reportajes de inters general muy tiles para conocer rpidamente diversos temas de inters.

    Pg. 75

    Capitulo 5 Introduccin a la promocin de webs Una vez hemos construido una pgina web tenemos que hacer que esta sea conocida por todos los medios que estn a nuestro alcance, para atraer visitas a ella y, cuando menos, sentirnos orgullosos de que esta sea popular en la Red. Para conseguir esto tenemos que promocionarla adecuadamente, de manera que su direccin figure en el mayor nmero de sitios.

    Pg. 115

    Capitulo 6 La imagen en Internet

    Explica cmo debemos crear la imagen en Internet de las empresas, productos o servicios que deseamos vender. No vale clonar lo anterior; hace falta conjugar estrategia, contenido, diseo y tecnologa.

    i

  • Pg. 146

    Capitulo 7 Pginas dinmicas

    Introduccin al concepto de pginas dinmicas, lenguajes de lado cliente y servidor y otra serie de nociones bsicas para lanzarse a la aventura de la programacin en ASP o PHP. Este manual sirve de introduccin a otros ms avanzados.

    Pg. 150

    Capitulo 8 Introduccin a los lenguajes del web Vamos a estudiar de manera global el mundo de la programacin de pginas web. Para ello empezaremos estudiando rpidamente algunos conceptos bsicos, que seguramente muchos ya sabremos, como el marco donde la web se desarrolla, qu es una pgina web, cmo se construye una pgina y el lenguaje HTML. Adems veremos qu es una pgina esttica y dinmica distinguiendo entre pginas dinmicas de cliente y servidor.

    Pg. 155

    Capitulo 9 Programacin en ASP Principios bsicos para la programacin en ASP, el lenguaje del lado del servidor creado por Microsoft . Manual asequible para no programadores que sienta los fundamentos bsicos de este lenguaje. Continuacin lgica del manual de pginas dinmicas.

    Pg. 169

    Capitulo 10 Programacin en PHP

    Principios bsicos para la programacin en PHP, el popular lenguaje del lado del servidor. Manual asequible para no programadores que sienta los fundamentos bsicos de este lenguaje. Continuacin lgica del manual de pginas dinmicas.

    Pg. 187

    Capitulo 11 Programacin en JavaScript

    Descubre el lenguaje dinmico de lado cliente por excelencia. Aprende a crear pginas webs con vida propia con nuestro manual de Javascript.

    Pg. 224

    ii

  • Capitulo 12 Programacin en Javascript II

    En este manual explicamos todos los recursos con los que cuenta un programador de Javascript para crear todo tipo de efectos y aplicaciones.

    Pg. 258

    Capitulo 13 Tutorial de Visual Basic Script

    Manual del lenguaje de scripting de Microsoft para pginas web con el que podrs aprender a realizar efectos para el Internet Explorer. Explora las caractersticas del HTML Dinmico con el lenguaje del navegador ms habitual.

    Pg. 304

    Capitulo 14 CSS, hojas de estilos

    Manual completo y prctico sobre hojas de estilo en cascada (CSS). Aprende a utilizar esta tecnologa que te ayudar a crear pginas ms atractivas y precisas. El curso contiene la descricin, uso, sintaxis, y lista de atributos para crear estilos.

    Pg. 320

    Capitulo 15 Introduccin a XML Una breve intruduccin al mundo XML que explica qu es este lenguaje y sus tecnologas relacionadas.

    Pg. 337

    Capitulo 16 Tutorial de SQL Aprende a utilizar el estndar utilizado para la consulta de bases de datos. Seleccionar, crear, modificar y borrar registros. Todo lo que necesitas para la creacin de tus pginas dinmicas.

    Pg. 342

    Apndice I Qu es cada tecnologa Este apendice trata en cada uno de sus captulos de introducir cada una de las tecnologas utilizadas en el desarrollo de pginas web.

    Pg. 352

    iii

  • Apndice II Frontpage 2000 para principiantes Un anlisis en profundidad de Frontpage y la respuesta a las preguntas ms habituales planteadas por los usuarios novatos de este programa.

    Pg. 373

    Apendice III Instalacin de IIS en Windows XP profesional Descripcin detallada del proceso de instalacin y configuracin de Internet Information Server en Windows XP profesional. Conceptos bsicos necesarios para empezar la administracin.

    Pg. 377

    iv

  • Capitulo 1 Publicar en Internet Tratamos los temas ms bsicos que necesitas saber para publicar una pgina web, como los materiales necesarios, el lenguaje HTML, editores, elegir alojamiento, subir pginas a los servidores y mucho ms.

    Introduccin a Internet Internet es una red de ordenadores conectados en toda la extensin del Globo Terrqueo que ofrece diversos servicios a sus usuarios como pueden ser el correo electrnico, el chat o la web. Todos los servicios que ofrece Internet son llevados a cabo por miles de ordenadores que estn permanentemente encendidos y conectados a Internet, esperando que los usuarios les soliciten los servicios y sirvindolos una vez son solicitados. Como decimos, hay servidores para todo, los hay que ofrecen correo electrnico, otros hacen posible nuestras conversaciones por chat, otros la transferencia de ficheros o la visita a las pginas web y as hasta completar la lista de servicios de Internet. Tambin existe otro tipo de servidores que son los que se encargan de proveer de acceso a Internet a nuestros ordenadores, son los proveedores de acceso, los servidores a los que nos conectamos con nuestros mdems. Cuando hacemos la llamada con el mdem a los servidores que proveen el acceso entramos a formar parte de Internet y mientras mantengamos la conexin podremos acceder a todos los servidores repartidos por todo el mundo y solicitarles sus servicios. En el momento que pedimos un servicio de Internet nos convertimos en clientes del servidor que lo ofrece. Para solicitar uno de estos servicios es necesario contar con un programa especial que suele ser distinto para cada servicio de Internet. Por ejemplo, para acceder al correo electrnico utilizamos Outlook, para acceder a la web utilizamos Netscape o Internet Explorer o para entrar en el chat utilizamos un programa como Mirc o Pirch. Todos estos programas que nos dan acceso a los servicios de Internet se denominan clientes, como se puede ver, para ser el cliente de un servidor de Internet necesitamos un programa cliente del servicio al que intentamos acceder.

    La web es un servicio de Internet Toda esta introduccin sirva para que nos demos cuenta que Internet es un conjunto de servicios y el web, que es lo que tratamos de analizar, no es ms que uno de ellos. Probablemente sea el ms popular en estos momentos y a veces parezca que Internet se limita al web, como en los anuncios de prensa, donde casi siempre nos venden portales o productos de la web como si ellos fueran lo nico que se puede hacer en Internet. La web es entonces un servicio ms que consiste en un inmenso conjunto de pginas conectadas unas a otras por un sistema de enlaces. El sistema con el que est construido el web se llama hipertexto y es un entramado de pginas conectadas con enlaces. Los sistemas de hipertexto se utilizan en otros contextos, como la ayuda del Windows y son muy fciles de utilizar y de encontrar lo que buscamos rpidamente. La web no solo se limita a presentar textos y enlaces, sino que tambin puede ofrecernos imgenes, videos, sonido y todo tipo de presentaciones, llegando a ser el servicio ms rico en medios que tiene Internet. Por esta razn, para referirnos al sistema que implementa el web (hipertexto), se ha acuado un nuevo trmino que es hipermedia, haciendo referencia a que el web permite contenidos multimedia. Multimedia, por si alguno no lo sabe todava, hace referencia a muchos medios, solamente quiere decir que se estn utilizando muchos medios para presentar informacin como son el vdeo, el audio o realidad virtual. Cuando nos venden un ordenador multimedia, nos venden un ordenador que est construido para poder trabajar con muchos medios, como imagen, sonido, animacin, video, etc.

    Cmo es una web por dentro Una pgina web la vemos en nuestro navegador, o cliente web, y parece una sola entidad, pero no es as, est compuesta por multitud de diferentes ficheros, como son las imgenes, los posibles vdeos y lo ms importante, el cdigo fuente que dice donde colocar cada texto, cada imagen o cada video y la forma que tendrn estos al ser colocados en la pgina. No es problema que las webs estn compuestas por tantos elementos, ya que rpidamente veremos que su organizacin es fcil y que no se nos van a perder o escapar ninguno. Como hemos podido imaginar y a modo de resumen, para publicar en Internet necesitaremos construir unos documentos hipertexto, o hipermedia, con sus correspondientes archivos de imagen o video y colocarlos en unos ordenadores que son servidores de pginas web. Pero esto es algo que vamos a tratar de explicar poco a poco en los siguientes captulos.

    4

  • Aunque signifique adelantarse a los acontecimientos, es interesante sealar que con una simple accin podemos ver el cdigo fuente de de las pginas, es decir, cmo estn hechas por dentro. Para ello en Internet Explorer se ha de pulsar sobre el men de Ver > Cdigo fuente y en Netscape se ha de seleccionar Ver > Origen de la pgina.

    Pasos previos I. Pensar un tema Para publicar una pgina en Internet debemos seguir unos pasos, primero una planificacin, luego la construccin de las pginas y ms tarde la promocin y constante actualizacin de las pginas. En este captulo vamos a ver cules son los pasos previos que debemos realizar para que nuestro esfuerzo y resultados sean lo ms ptimos posibles, es decir, vamos a ver cul es la planificacin que hay que hacer antes de ponerse manos a la obra. Pensar un tema Puede ser el ms importante de los pasos para la creacin de un web. Hay que elaborar la idea y documentarse sobre el tema que has elegido para tu pgina en Internet. Cuando hacemos incluso una pgina personal podemos hablar de algn tema interesante como nuestro equipo de ftbol o nuestro cantante favorito, o de un tema que nos conmueva profundamente, como el ecologismo o la historia de nuestra comarca. Tambin podemos construir una pgina que trate de nuestra familia o de nuestros perros, o todo junto, pero tenemos que tener en cuenta que el valor de este tipo de pginas es mucho menor y que a los dems usuarios seguramente no les va a interesar. Si deseamos construir una pgina que algn da sea popular, debemos abordar, como digo, temas que sean de inters para un grupo de gente. Una vez pensado el tema es muy importante documentarse lo ms posible sobre l, aunque muchas de las ideas pueden estar en nuestra cabeza, es importante tomar notas, fotografas u opiniones de otras personas que tambin conocen el asunto que nos traemos en la cabeza. Insisto, es importante que el material que vamos a publicar tenga el mayor valor posible, as conseguiremos los mejores resultados.

    Pasos previos II. Estructura del sitio Es importante tambin que pensemos en la estructura de los contenidos de todo el sitio antes de ponernos a disearlo. En este punto tenemos que pensar sobre varias cosas, como las distintas secciones que va a contener el sitio, el rbol de las pginas que vamos a tratar, etc. La manera de que este punto sea realmente til, es preparar todas estas ideas sobre el papel. Con toda la tranquilidad del mundo y con toda la determinacin posible vamos a preparar una serie de diagramas y listados que nos permitan dirigir nuestros esfuerzos de la manera ms ptima. Secciones del sitio: Podremos pensar en qu secciones vamos a poner en el sitio. Una con informacin general, otra con informacin de contacto, otra con una visita grfica a nuestras instalaciones, etc. rbol del sitio: Podemos dibujar en un papel cules son las distintas secciones del sitio, metidas dentro de cuadrados y representar tambin los enlaces que hay entre cada seccin, mediante lneas que unen esos cuadrados. Es algo muy simple y divertido de hacer, adems podemos tener nuevas ideas para el web a medida que lo vamos dibujando. Esquema de una pgina: podemos dibujar en papel tambin una pgina del sitio que vamos a construir, para que veamos donde colocar la barra de navegacin, el logotipo del sitio o la empresa, un posible banner publicitario, etc. Este esquema puede ser tambin de utilidad a la hora de construir las pginas y siempre es ms fcil disear sobre el papel que disear directamente con el ordenador Estos pasos son opcionales, cualquiera puede ponerse a construir una pgina nada ms decidir que desea tener una web, pero no todo el mundo es capaz de plantearse bien cules son sus objetivos y formar un proyecto con todos los puntos desarrollados de antemano. Los resultados finales son lo ms importante y empezar la casa por el tejado no va a ser lo ms positivo para nuestra pgina y los resultados finales mejorarn si hacemos primero una planificacin.

    Qu necesitas para empezar Para ponernos a disear pginas web nos hace falta realmente poco material. En la mayora de los equipos que se instalan con Windows 98 se encuentran todos los materiales necesarios para empezar sin necesidad de obtener nuevos programas. En concreto, los materiales necesarios son un editor de textos, con el que programaremos nuestras pginas y un cliente del web como Internet Explorer o Netscape Navigator. Como un ordenador Windows

    5

  • 98 por defecto siempre tiene instalado el Block de Notas y tambin el Internet Explorer se puede empezar a construir una pgina web sin ms necesidades que lo que ya tenemos. En otros sistemas distintos de Windows 98 ser tambin muy fcil obtener un editor de textos sencillo y un navegador con el que ver las pginas que vamos a crear, si es que no estn instalados ya. Sitios en la web desde donde se pueden descargar estos programas son Tucows o Download.com, donde tienen software de todos los sistemas operativos como Windows, Mac OS, o Linux. Tambin en castellano tenemos buenas pginas de descarga de software, la ms representativa es Softonic. Sin duda, en nuestra aventura con el desarrollo del web vamos a necesitar muchos ms programas como por ejemplo programas de retoque fotogrfico o editores complejos de pginas web, pero no es necesario que los introduzcamos todava en este manual porque no son necesarios para dar nuestros primeros pasos.

    Qu es HTML HTML es el lenguaje con el que se definen las pginas web. Bsicamente se trata de un conjunto de etiquetas que sirven para definir la forma en la que presentar el texto y otros elementos de la pgina. El HTML se cre en un principio con objetivos divulgativos. No se pens que la web llegara a ser un rea de ocio con carcter multimedia, de modo que, el HTML se cre sin dar respuesta a todos los posibles usos que se le iba a dar y a todos los colectivos de gente que lo utilizaran en un futuro. Sin embargo, pese a esta deficiente planificacin, si que se han ido incorporando modificaciones con el tiempo, estos son los estndares del HTML. Numerosos estndares se han presentado ya. El HTML 4.01 es el ltimo estndar a febrero de 2001. El HTML es un lenguaje de programacin muy fcil de aprender, lo que permite que cualquier persona, aunque no haya programado en la vida pueda enfrentarse a la tarea de crear una web. HTML es fcil y pronto podremos dominar el lenguaje. Ms adelante se conseguirn los resultados profesionales gracias a nuestras capacidades para el diseo y nuestra vena artista. Una vez conocemos el concepto de HTML os vamos a adelantar algunas cosas ms. Este lenguaje se escribe en un documento de texto, por eso necesitamos un editor de textos para escribir una pgina web. As pues, el archivo donde est contenido el cdigo HTML es un archivo de texto, con una peculiaridad, que tiene extensin .html o .htm (es indiferente cul utilizar). De modo que cuando programemos en HTML lo haremos con un editor de textos, lo ms sencillo posible y guardaremos nuestros trabajos con extensin .html, por ejemplo mipagina.html Por adelantar un poco cmo se utiliza el HTML os diremos que el lenguaje consta de etiquetas que tienen esta forma o . Cada etiqueta significa una cosa, por ejemplo significa que se escriba en negrita (bold) o significa un prrafo, es un enlace, etc. Casi todas las etiquetas tienen su correspondiente etiqueta de cierre, que indica que a partir de ese punto no debe de afectar la etiqueta. Por ejemplo se utiliza para indicar que se deje de escribir en negrita. As que el HTML no es ms que una serie de etiquetas que se utilizan para definir la forma o estilo que queremos aplicar a nuestro documento. Esto est en negrita. Para aprender HTML en profundidad tenemos un manual en DesarrolloWeb.com. Adems se pueden consultar los enlaces a distintos manuales que tenemos en nuestro buscador en la seccin de HTML. Hay que hacer en este punto una mencin especial a un manual que es muy interesante, aunque un poco anticuado ya, el Webmaestro.

    Editores de HTML Para las personas que no deseen complicarse la vida con el lenguaje HTML, porque no tengan tiempo de aprenderlo o porque se sientan incapaces de hacerlo, hay una posibilidad distinta a programar directamente el HTML a base de texto. Se trata de utilizar un tipo de programas que nos permiten disear la pgina como si estuviramos escribiendo un documento con un editor del tipo de Word. El editor de HTML es el encargado de vrselas con el lenguaje y programar internamente la pgina con el cdigo HTML segn lo que nosotros estamos diseando. Con el editor HTML podemos colocar imgenes, definir estilos, utilizar negritas o cursivas, etc. sin preocuparnos de las etiquetas correspondientes a cada estilo o elemento. Es el editor el que sabe estas etiquetas y las utiliza convenientemente. Este tipo de editores HTML se denominan habitualmente WYSIWYG (What You See Is What You Get) porque cuando trabajas con ellos lo que ves que ests creando con el editor es lo que obtienes luego cuando grabas la pgina. Existe entre las personas que se dedican a realizar las pginas web dos tendencias. Por un lado tenemos

    6

  • a las personas que prefieren crear las pginas programando el HTML y por otro las personas que utilizan editores HTML. Algunas diferencias entre hacerlo de un modo u otro son las siguientes

    Escribiendo el HTML Con un editor WYSIWYG

    Dominas con mayor precisin el cdigo de la pgina, queda ms limpio. Si dominas bien el HTML nunca tendrs ningn problema para hacer lo que deseas.

    El cdigo de la pgina tiene peor calidad, incluso puede llegar a tener errores, ms o menos visibles, que cuestan arreglar. Es la mquina la que domina el trabajo.

    Es ms complicado el aprendizaje, ms lento y cuando se llega a un nivel avanzado tambin se hace considerablemente ms difcil

    El aprendizaje es muy sencillo, tal como puede ser trabajar en Word. Solo se trata de manejar un programa ms.

    Hacer una pgina cuesta ms trabajo y tiempo.

    Es muy rpido.

    Cada uno debe escoger el camino que ms le convenga o el que le parezca ms atractivo. De todos modos siempre se puede empezar de un modo y luego pasar al otro modo sin ningn tipo de problema. Incluso, por adelantarnos a los acontecimientos, diramos que cuando una persona profundiza en el diseo de pginas web llega un momento en el que le hace falta conocer las dos maneras de construir webs. A los programadores en HTML les har falta aprender un editor porque eso aumentar su productividad y los que utilizan editores necesitarn aprender un poco de HTML para arreglar alguna cosa que el editor ha hecho mal o realizar alguna cosa que el editor no puede hacer. Este manual est escrito por una persona que aprendi a realizar sus primeras webs con el Block de notas y algunas veces puede verse mi mayor inclinacin a escribir el cdigo HTML uno mismo. Aunque mi consejo es aprender HTML, estoy seguro que muchos de vosotros, maestros diseadores, obtendris mejores resultados utilizando un editor HTML WYSIWYG. En el mercado existen multitud de editores de HTML WYSIWYG, es importante elegir un editor bueno porque nuestros trabajos van a depender de sus resultados. Actualmente el rey de los editores y el que os aconsejaramos sin duda es el Dreamweaver, fabricado por Macromedia. Otras posibilidades son editores como GoLive de Adobe o Frontpage de Microsoft, aunque este ltimo lo desaconsejamos. Editores de texto preparados para escribir HTML Las personas que despus de estas lneas han decidido aprender el lenguaje HTML tambin tienen herramientas muy interesantes para aumentar su productividad sin dejar de escribir ellos mismos el HTML que desean. Se trata de unos editores de texto, como cualquier otro, que estn preparados para escribir HTML y por lo tanto ofrecen multitud de ayudas a los diseadores

    Colorean los cdigos de las pginas para hacerlos ms comprensibles Ofrecen ayudas a la programacin Completan etiquetas

    Y un montn de cosas ms que sera demasiado complejo de enumerar aqu. Estos editores son por ejemplo Home Site o UltraEdit y es muy recomendable utilizarlos para sentirnos ms a gusto al programar las pginas y poder hacerlas ms rpido. Posiblemente sea aconsejable empezar con el Block de notas, por que es lo ms sencillo, pero utilizar un programa de estos ser imprescindible con el tiempo.

    Construir las pginas Por fin empezamos a trabajar en la pgina y vamos a ver algunos consejos tiles para hacerlo bien. Es el momento en el que nos ponemos manos a la obra de una forma ms dedicada y tenemos que trabajar ms duramente. El programar o disear las pginas podr gustar ms o menos que otras acciones como planearlas o promocionarlas ms tarde, pero no cabe duda que es el momento ms excitante porque nuestros sueos y nuestras ideas empiezan a concretarse en los resultados que esperbamos conseguir. Si hemos proyectado un sitio compuesto por un gran nmero de pginas lo ms habitual es empezar diseando una pgina con el marco del sitio, que luego vamos a repetir a modo de plantilla en todas las pginas. Pero esto son tcnicas que aprenderemos con el tiempo. Para ahorrarnos errores cuando hacemos las pginas podemos seguir una serie de consejos tiles.

    7

  • No utilizar espacios en los nombres de los archivos de las pginas o las imgenes. Tampoco utilizar caracteres raros como la o los acentos.

    Tener cuidado con las maysculas y las minsculas en los nombres de los archivos que tratamos. Si las utilizamos equivocadamente la pgina podr funcionar en nuestro Windows (por que le dan igual las maysculas y las minsculas), pero al subirla al servidor Linux o Unix podra ser que no funcionase (porque estos sistemas si que distinguen entre maysculas y minsculas).

    Enterarse de cmo funciona el documento por defecto, que nos permitiris que lo expliquemos en captulos posteriores.

    Trabajar siempre con una extensin del archivo HTML especfica. No mezclar en un mismo proyecto pginas con extensin .html y .htm.

    Imgenes y otros recursos Como se ha podido ver anteriormente, el diseo de una pgina web implica la creacin de un archivo en cdigo HTML, pero no es lo nico que debemos crear. En la mayora de los casos tambin desearemos incluir imgenes y para ello ser necesario crear los correspondientes archivos grficos. El proceso para incluir una imagen en una pgina empieza por la creacin de la imagen con un programa de diseo grfico o mediante su digitalizacin con un escner. Ser necesario que conozcamos alguno de los programas de diseo grfico que existen en el mercado. Son muy interesantes Photoshop, Paint Shop Pro o Fireworks. En un principio podremos contentarnos con manejarlos por encima y nos resultar muy fcil, pero segn avancemos en el camino como diseadores web ser ms necesario dominarlos para obtener resultados ms profesionales. Los tipos de archivos grficos que soporta Internet son el JPG y el GIF. Tienen caractersticas distintas y por tanto usos distintos. Podemos conocer ms esto en el reportaje Formatos grficos de Internet. Una vez tenemos los archivos grficos los ponemos en el mismo directorio que los archivos HTML o en un subdirectorio de este y en el cdigo de la pgina HTML pondremos una etiqueta especial para incluir la imagen, o la insertaremos con nuestro programa editor de HTML. Lo importante de todo esto es que nos percatemos que el sitio web est compuesto por archivos HTML, GIFs, JPGs e incluso los correspondientes archivos que contengan videos, animaciones Flash, programas Java, etc. Todos estos archivos los tenemos que tener bien localizados dentro de nuestro disco duro y dentro de un mismo directorio. Por supuesto el orden como estn los archivos dentro del directorio es indiferente, pero podr ser interesante que incluyamos subdirectorios para que quede todo mejor colocadito y su mantenimiento sea ms fcil. Por ejemplo, una tcnica muy habitual es colocar todas las imgenes dentro de un subdirectorio llamado images. El objetivo de tanto orden y conocimiento de la localizacin de todos los archivos es que luego tendremos que subirlos al servidor sin olvidarnos de ninguno. En captulos posteriores veremos cmo se hace este paso. Un problema tpico con las imgenes y otros archivos externos consiste en que cuando vemos las pginas en nuestro ordenador se ven correctamente y no falta ninguna imagen ni otros posibles elementos. Sin embargo, cuando subimos los archivos al servidor y vemos la pgina desde Internet esta se muestra con errores en las imgenes y otros elementos, de modo que no se pueden ver. Esto suele llamarse tener una imagen "rota". La razn por la que est rota es que no puede localizarla en el servidor y por tanto no la puede mostrar. Esto puede ser debido a varias razones.

    La imagen no ha sido subida al servidor La posicin relativa de la imagen con respecto a la pgina no es la misma en nuestro ordenador

    (local) y en el servidor (remoto). Por ejemplo, las imgenes en local podran estar en el directorio images mientras que en remoto podran estar en el mismo directorio que la pgina, lo que sera un error. Siempre se debe respetar la estructura de directorios que hay en local y crearla exactamente igual en remoto.

    La imagen que se intenta acceder tiene un camino dirigido a un directorio de nuestro disco duro, como al ver la pgina desde Internet no se tiene acceso a tu disco duro, los usuarios no podrn ver las imgenes. Cuando trabajamos con un editor de HTML y colocamos imgenes en algunas ocasiones el editor coloca caminos en nuestro disco duro en lugar de caminos relativos. Los caminos relativos son rutas que empiezan en el lugar donde est la pgina que estamos diseando.

    Hay una forma muy til de obtener pistas acerca del fallo de una imagen, consiste en pulsar con el botn derecho del ratn sobre ella y seleccionar propiedades. Esto nos muestra informacin sobre la imagen y nos informa sobre el sitio donde se est intentando encontrarla.

    8

  • Alojar las pginas Como hemos dicho, cualquier servicio que se quiere ofrecer en Internet tiene que brindarlo un servidor, que es un ordenador que se encuentra encendido las 24 horas del da y conectado a Internet tambin permanentemente. En el caso de una pgina web, existen unos servidores que son los encargados de mandarla cuando se la solicita, son los servidores web. Nuestras pginas tienen que estar alojadas en un servidor web para que puedan estar accesibles desde Internet. Lo que tendremos que hacer entonces es buscar un lugar para alojar la pgina que est acorde con nuestras necesidades, por suerte en muchos de los casos el alojamiento lo podremos conseguir de manera gratuita.

    Subir los archivos al servidor Es una de las tareas que parecen ms difciles cuando te pones a construir las pginas. Igual que cualquier cosa en este mundo, cuando lo has hecho unas cuantas veces el problema se desvanece. Bsicamente lo que tenemos que hacer es tomar todos los archivos que componen nuestro sitio web, incluidas imgenes, animaciones, etc. y subirlas a nuestro servidor web. Para ello primero es tarea imprescindible el identificar dnde estn todos los archivos de nuestro web. Si hemos escrito la pgina con cdigo HTML seguramente sabremos perfectamente donde estn nuestros ficheros, pero si la pgina la hemos hecho con un editor HTML como Frontpage es probable que estn un poco ms difciles de identificar. Dependiendo del alojamiento que tengamos, la manera de subir los archivos cambiar. Existen, de todos modos, dos maneras de subir los archivos al servidor, por FTP o a travs de una interfaz web, de modo que podremos ver aqu todas las formas. Subir archivos por FTP La forma ms tradicional de subir ficheros es por FTP, que es un servicio ms de Internet que se utiliza para transferir ficheros por la red. Como lo que queremos hacer es transferir los ficheros desde nuestro ordenador al servidor, este es el servicio que debemos utilizar. Cuando tenemos un alojamiento profesional para nuestras webs lo ms seguro es que nos proporcionen un acceso por FTP a los servidores para subir las pginas. Como otros servicios de Internet, para utilizar FTP necesitamos un programa especial que se denomina cliente de FTP. Podemos encontrar en el mercado muchos de estos clientes, algunos populares son Cute FTP o FTP Voyager. Si queremos ver una gama muy amplia de clientes FTP podemos acercarnos por Tucows o Donwload.com y encontraremos muchas opciones interesantes, algunas de ellas gratuitas. Todos los programas de FTP son parecidos (igual que Internet Explorer es parecido a Netscape), bsicamente consisten en una ventana que est partida en dos partes. En una parte podemos ver nuestro disco duro, con sus distintas unidades y carpetas. En la otra parte se puede ver el sistema de archivos del servidor, con sus correspondientes carpetas. Para mover los archivos de un lugar a otro suele bastar con arrastrarlos de una parte de la ventana a la otra. Una tarea que tambin puede ser complicada en un principio puede ser el configurar el programa de FTP para que acceda al espacio que tenemos asignado. Los datos de configuracin los debes obtener en el lugar donde te ofrecieron el espacio, son estos: Nombre del servidor FTP: suele tener una forma como ftp.tudominio.com Usuario: tu nombre de usuario. Password: tu palabra de clave Podra haber algn dato adicional, como el directorio por defecto, que es el directorio en el que deseas abrir la sesin, pero no es habitual que te den este dato porque los accesos por FTP suelen estar configurados para que se acceda directamente al directorio donde estn tus pginas. Con estas explicaciones ya vers que cuando vas a hacer un acceso por FTP te suena todo y no te cuesta nada el realizarlo. De todos modos, puedes ver un tutorial de Cute FTP que puede aclararte alguna duda ms. Acceso con interfaz web Es muy tpico que los proveedores de alojamiento gratuito provean de una herramienta de muy fcil uso para subir las pginas. Esta herramienta se accede a travs de la web alojador y no es ms que un formulario donde se puede elegir los archivos que se desea subir al servidor, se pulsa un botoncito, y todo listo.

    9

  • Documento por defecto Es importante conocer este concepto, incluso antes de ponerse ha disear la pgina. El documento por defecto es el archivo que enva el servidor cuando el cliente no especifica que archivo es el que solicita. Esto se puede ver muy fcilmente con un ejemplo. Cuando escribimos la direccin http://www.desarrolloweb.com/ no estamos especificando ningn nombre de archivo en concreto, entonces el servidor web donde est alojado este sitio web le devolver el documento por defecto del directorio raz del dominio. Cada directorio puede tener un documento por defecto, por ejemplo, cuando escribimos www.desarrolloweb.com/manuales se enva el documento por defecto del directorio manuales. Cada servidor web puede ests configurado de una manera distinta para el documento por defecto, es decir, en cada servidor web el documento por defecto puede ser distinto. Lo ms habitual es que se llame index.html, en desarrolloweb es as y en muchos alojadores gratuitos tambin lo es, pero en otros casos puede variar el documento por defecto y ser lo que los administradores de cada servidor decidan. Otros nombres para el documento por defecto podran ser default.html o ind.html. Como decamos, en desarrolloweb el documento por defecto se llama index.html, podemos probar a acceder a http://www.desarrolloweb.com/index.php o a http://www.desarrolloweb.com/manuales/index.php y veramos como se accede a las mismas pginas que se accede sin especificar el archivo index.html, usando el documento por defecto.

    Nota: En desarrolloweb el documento por defecto es en realidad index.php. Esto es porque desarrolloweb.com est programado con pginas dinmicas PHP, que son un poco ms complejas, pero que tambin nos permiten hacer cosas ms avanzadas. En desarrolloweb podemos encontrar tambin informacin adicional sobre pginas dinmicas.

    Decimos que es importante saber cul es nuestro documento por defecto porque es necesario que llamemos a la primera pgina de nuestro sitio web con ese nombre de archivo, de modo que no tengamos que saber el nombre de ningn archivo de nuestra pgina para acceder y la direccin ser ms corta. Por ejemplo si tenemos espacio en Geocities y nuestro nombre de usuario es pepe, nuestra pgina se accedera escribiendo www.geocities.com/pepe y se devolvera el documento por defecto. Sin embargo, si no utilizamos el documento por defecto y nuestra home page se llama mipagina.html si intentamos acceder sin poner el nombre de archivo, con la direccin de antes, dar un error de archivo no encontrado y para acceder a nuestra home deberamos de escribir www.geocities.com/pepe/mipagina.html.

    Promocin de las pginas Con el diseo y la publicacin del sitio web en el servidor no se termina el trabajo. Una de las tareas ms importantes para el xito de la web es promocionarla adecuadamente, de manera que su direccin figure en el mayor nmero de sitios. Las acciones que se pueden realizar para promocionar una pgina son muchas y variadas, como hacer que figure su direccin en nuestros correos electrnicos o intercambiar banners, pero la ms importante es el registro en los buscadores. Estas tareas de promocin no son nada complicadas y cualquiera puede realizarlas sin ningn problema, pero conseguir que nuestra web se encuentre situada entre los primeros resultados de la bsqueda reviste ms dificultad.

    Actualizar las pginas El ltimo "truco" para que nuestra pgina sea muy visitada y que los visitantes entren una y otra vez se trata de mantenerla siempre bien actualizada. Hay algunas webs que se prestan ms que otras a tener los contenidos actualizados, como son las pginas donde se pueden ver contenidos de actualidad, pero en general todas las pginas pueden mantener secciones con contenidos actualizables. Este es un aspecto muy importante, pues si el navegante se percata de que los contenidos se renuevan constantemente volver con el tiempo unas cuantas veces. Para dar una imagen de web actualizada se pueden utilizar imgenes o textos que resalten donde ponga "nuevo" o "new". Tambin ser adecuado poner un rea en un sitio visible donde se enumeren las novedades del sitio. Por lo general habr que volver siempre sobre este punto para ver qu hay de nuevo y dnde se puede renovar el contenido del web. No es bueno tener un enlace que no lleva a ningn sitio, igual que no es bueno tener una direccin de correo que no existe ya. Adems, si tenemos un rea de noticias no ser

    10

  • bueno que la ltima noticia sea de hace tres meses porque da la impresin de que nunca renovamos los contenidos. Si no mantenemos nuestro sitio actualizado el visitante entrar una vez a la pgina pero no lo volver a hacer nunca, con lo que habremos perdido una oportunidad de hacernos con un cliente o un visitante asiduo. Supongo que habr quedado claro lo importante de esta tarea, aunque salta a la vista, creo, para la mayora de las personas.

    Por dnde continuar En este manual hemos visto lo ms bsico y sin duda tendremos multitud de trabajo en lo sucesivo para tratar de dominar cada una de las tcnicas y programas de los que hemos hablado como el HTML, algn editor, los programas de diseo grfico, alojar las pginas y subir archivos... Pero en la carrera de un desarrollador del web queda todo un mundo de posibilidades por delante de las que ni siquiera hemos hablado, como puede ser el tratamiento de imgenes profesional, la programacin de pginas avanzadas con Javascript y lenguajes como ASP o PHP que nos permitirn crear portales con pginas que acceden a bases de datos y ofrecen servicios ms complicados. Un punto muy interesante para continuar aprendiendo es la seccin Desde 0 que contiene la gua para moverse por los contenidos de DesarrolloWeb para personas novatas. En la seccin descubrirs enlaces a un manual de HTML, otro de promocin de pginas y a otros artculos y manuales de inters. Muchas de estas cosas que acabo de enumerar te sonarn todava a chino, pero ya vers que con el tiempo y a medida que aumenten tus necesidades llegars a comprenderlas y estudiarlas con calma. Acerca de todas estas cuestiones se puedes informarte en DesarrolloWeb.com, segn tu curiosidad y necesidades se presenten. Otro manual que te puede introducir en procesos ms avanzados de la programacin de pginas web es el Manual de Paginas Dinmicas, que te explicar que es una pgina dinmica, para que la puedes necesitar y cmo llegar a programarlas. Por ahora, este manual se acaba y solo me queda recomendarte otra serie de sitios donde puedes dirigirte para solucionar tus problemas y dudas.

    Si piensas que a este manual para principiantes le falta algn contenido realmente bsico o algo que consideras confuso, te agradecera que escribieses a la direccin [email protected] para que publiquemos un artculo al respecto.

    Si deseas preguntar dudas puedes dirigirte a la lista de correo que tenemos a este efecto. Tambin puedes participar en los foros para webmasters, donde se puede encontrar mucha

    informacin acerca de un montn de tecnologas, servidores, programacin, etc.

    Esperamos que la suerte te acompae en tu diseo web.

    11

  • Capitulo 2 Introduccin al diseo web Primeros pasos para aquellas personas que deseen crear su propia pgina web, desde el punto de vista del diseador. Motivacin a seguir, programas a utilizar, etc.

    Prlogo a los primeros pasos en el diseo web Hace unos das, durante una cena, mi padre me pregunt qu era exactamente eso de los chats, o lo que quiera que la gente hace cuando se escribe a travs de Internet. Es un hombre un tanto suspicaz ante las nuevas tecnologas, de manera que me vi obligado a lidiar en tres frentes a la vez, aadiendo adems el hecho de que la pregunta, planteada con intenciones solapadas, son como un aldabonazo y me desconcert unos segundos. Las tres lneas de ataque de las que hablo eran las siguientes: una, la que me obligaba a describir de manera superficial las bases tecnolgicas de los chats, ya que mi padre los haba comparado con sistemas de comunicacin ms convencionales, y yo deba establecer las distancias adecuadas. En segundo lugar, le expliqu los elementos de la prctica, como por ejemplo la interfaz tpica de un software de chat o las funciones bsicas: flujo de texto en tiempo real y transmisin de archivos, as como el modo en que los chats se organizan y pueden ser disfrutados en diversas salas; se conoce que cosas muy elementales. En tercer lugar le suger la utilidad de los chats, sus ventajas frente a otras formas de comunicacin a distancia y le expliqu, de forma ms general ya, que pese a su postura, Internet constituye en gran medida el sistema sanguneo del futuro, aunque en el mejor de los casos se trate arterias de fibra de carbono... De ah pasamos a conversar acerca de cuestiones mucho ms diversas en torno a la Red, pero esto ya no tena importancia. Un tema u otro era un asunto de formas. En realidad, yo no siento mucha atraccin por los chats genricos, y si acaso opto por aplicaciones de mensajera instantnea. Pero aquella conversacin me revel algunas de las bases que, despus, me ayudaran a responder a una usuaria en cierto foro de diseo web. Su pregunta era: Aunque no s mucho de ordenadores, siempre estoy enganchada, y ahora quiero hacer mi propia pgina web. Por dnde empiezo? Desde luego eso era toda una declaracin de intenciones y no exista, ni existe, una respuesta infalible. El desarrollo web es un proceso creativo e ntimo, como lo es la navegacin en Internet; dnde voy si me conecto a la Red? Pues eso depende de ti. Es ms: lo probable es que muy pronto ya ni siquiera dejes que otros usuarios compartan y fisguen en tu historial. De la misma manera, una vez que empezamos a disear, decidimos que nadie puede entrometerse en nuestra forma de trabajar. Cierto? Entonces, quiere esto decir que no hay una especie de protocolo de principiantes? Oh, s que hay un protocolo, un camino de baldosas que todos solemos seguir para llegar a nuestro destino (naturalmente, el destino de cada usuario es distinto, y mientras ms diferente e ingenioso, mayor ser el aprendizaje).

    Introduccin al diseo web Como en el caso de los chats, podemos considerar que existen tres directrices elementales que sirven de guas. Una de ellas es el conocimiento tecnolgico de Internet; estamos obligados a saber cmo funciona de manera general, desde las conexiones de ordenador hasta el valor de los servidores, pasando por la arbitraria congestin de las lneas telefnicas y, desde luego, considerando los diversos navegadores que hay en el mercado, adems de prestar atencin a la necesidad de instruirnos, aunque sea un poco, en el lenguaje HTML. Es muy difcil tomarse en serio a alguien que no tiene constancia de que, echando un vistazo al cdigo fuente de una pgina, hallar etiquetas tan bsicas como y . Estos conocimientos tcnicos nos informan de nuestras posibilidades creativas; no basta con crear una preciosa imagen y colgarla en nuestra pgina principal, si no sabemos que dicha imagen podra tardar un minuto en cargarse... Y a da de hoy sa s es una verdad infalible.

    En segundo lugar, estamos obligados a saber trabajar. No es ms difcil que eso; si trabajas en modo cdigo, debes dominar el HTML y, mejor an, el HTML y otros lenguajes de uso comn en la Red. Si empleas software de tipo WYSIWYG (lo que ves es lo que obtienes, en espaol), debes ser capaz de conocer las funciones de tu programa. Desde luego que detenerse a leer las instrucciones es aburrido, y provoca lo que se conoce como curva de aprendizaje, pero es la nica manera de llegar a entender y desarrollar todas las posibilidades tcnicas e imaginativas que te permiten las diferentes aplicaciones del mercado. Si usas DreamWeaver, aprende DreamWeaver; puede que conozcas FrontPage, por ejemplo, pero eso no conduce a ninguna parte. Son programas distintos que necesitan procesos de instruccin diversos.

    12

  • Caractersticas especiales de la publicacin web En tercer lugar es fundamental saber que Internet no es una conferencia telefnica, un CD-ROM o televisin a la carta. La Red sufre limitaciones propias y disfruta tambin de posibilidades ms extensas y personales. As, cuando diseamos nuestros sitios web, debemos entender que el visitantes no espera lo mismo de nuestras pginas que de un programa de TV, incluso aunque ambos traten el mismo tema.

    Tomemos por ejemplo un documental sobre los elefantes africanos. E imaginemos a un ciudadano muy interesado en dichos animales, que en un momento del da debe elegir entre ver la vida de los elefantes en televisin, o buscar informacin en Internet a propsito de lo mismo. Nosotros tenemos la obligacin de disear una pgina web al respecto. Tomaramos inspiracin de la televisin? Quizs alguna, pero si sabemos lo que nos conviene, no pasaramos de ah. Por ejemplo, la tele se encuentra a un mnimo de dos metros del televidente; el monitor de la computadora, a unos palmos; el texto debe ser estrecho para no irritar al navegante. En la tele eso da igual. A la tele tambin le es indiferente mostrar cientos de tomas, cientos de perspectivas y cientos de sonidos emitidos por los elefantes africanos. El web apenas podra hacer eso, en condiciones estndar de conexiones de 56kb. Pero nosotros podemos crear enlaces a pginas que traten todas y cada una de las costumbres del enorme paquidermo. La televisin, no...

    La pregunta, sintetizada, es sta: qu damos al navegante para hacerle fiel a nuestros contenidos aunque tan slo sea durante una sesin? Le damos personalizacin, le damos contenidos, le damos libertad, le damos ingenio, le damos belleza, le damos oportunidades, le damos buen gusto, le damos comodidad, le damos datos, le damos sntesis, le damos grficos, le damos informacin detallada, le damos esquemas, le damos conocimientos en tres palabras o sabidura en textos de tres kilmetros, le damos todo y ms, le damos, en fin, lo que sea que busca. Estamos en condiciones de hacer estas cosas? Ms nos vale.

    Algo ms sobre el diseo web? Hay ms cosas, cierto. El diseo enfocado a la Red suele ser hijo de la receptividad, como cualquier otro tipo de diseo. Ms all del aprendizaje tcnico, que consiste en leer informaciones a veces aburridas y engorrosas, existe un modo complementario y muy excitante de aprender. Como deca, hablamos de receptividad. De ver lo que otros muchos hacen con un talento que parece inagotable, y dejar que lo que vemos sedimente en nuestro trabajo; desde el diseo grfico de los sitios web, desde las imgenes que incluyen y que a veces definen su identidad, hasta la manera en que escriben sus textos. Dejadme decir que pocas cosas me parecen tan divertidas y poco serias como un prrafo mal escrito. Es que desenvolvernos en un entorno digital nos da derecho a escribir mal? Sin duda que no. Los textos deben ser sugestivos, esclarecedores o enigmticos, pero siempre llamativos y eficientes.

    Hace poco visitaba un sitio web de cierta gran empresa y termin preguntndome si la redaccin haba corrido a cargo de algn narrador extranjero. El texto era breve y directo, pero cometa fallos gramaticales tan evidentes que era lo que ms llamaba la atencin; incluso ms que el bonito y efervescente diseo. Tengamos en cuenta que si nos consideran poco aplicados, no nos tomarn como una alternativa razonable. (Y olvidemos la idea de que alguien nos pague por nuestro trabajo.)

    Miremos, analicemos, aprendamos de los dems. Es un proceso basado en la febril actividad de nuestro ratn. Tendremos que hacer clic cientos, miles de veces, antes de que el efecto de los maestros del web deje huella en nosotros. Para empezar podemos observar los estudios y casos de grandes empresas del medio como Adobe y Macromedia, que incluyen secciones ex profeso muy interesantes; y tambin tenemos la oportunidad de mirar las pginas de las agencias de publicidad y diseo; con frecuencia sus mejores trabajos estn hechos para s mismos, y no para sus clientes.

    Herramientas para profesionales del diseo web Despus necesitas el software que interpretar tus deseos, inquietudes y talentos y les dar la forma que quieras en el mejor de los casos, de manera que puedas transferirlo todo a un servidor web abierto al pblico. Tampoco aqu existe acuerdo. Todo depender de si trabajas en modo html 1st Page 2000 es una aplicacin reconocida y gratuita o WYSIWYG, cuyo espectro es tambin muy amplio, desde el popular y domstico FrontPage de Microsoft, hasta los profesionales y valiosos DreamWeaver o GoLive!, pasando por los accesibles pero potentes Namo Web Editor o NetObjects Fusion... Tampoco viene mal disponer de algn programa de diseo grfico. De una manera elemental podemos decir que los hay de dos tipos ms o menos puros, y un tercer tipo mixto. En uno de los casos se trata de aplicaciones de dibujo vectorial, es decir, aquellas que generan grficos desde cero mediante herramientas de trazado geomtrico, fundamentalmente, pero tambin a mano alzada; dicho de una forma ms llana, hablamos de dibujos de lneas y curvas. Pero no nos confundamos. Estos programas son madre de muchas de las mejores ilustraciones que vemos tanto en la Red como en publicidad impresa y en los envases de productos cotidianos. Actualmente se asume que Adobe Illustrator es el

    13

  • mejor en este campo; sin embargo, compite con el clsico indiscutible CorelDraw, adems de con Macromedia Freehand. Y, no obstante, existen alternativas baratas y eficientes, bien criticadas y admiradas en los medios, como ZonerDraw 4 o Xara. El segundo de los casos cuando hablamos de grficos es el retoque fotogrfico; o lo que es lo mismo, el trabajo de diseo visual sobre imgenes que normalmente combinan fotografas reales con objetos diseados y efectos visuales. Tambin Adobe y Corel se disputan el pastel, de momento favorable al primero. Sus estrellas son Photo Shop y Photo Paint. Las alternativas ms accesibles suelen ser Paint Sho Pro de Jasc y Ulead Photo Impact. Una tercera opcin es el software que combina retoque fotogrfico y dibujo vectorial; cada vez ms, sta es una posibilidad que traen de serie todos los grandes programas, de manera que no hace falta cambiar de aplicacin para mezclar los modos de trabajo grfico.

    Conclusin a la introduccin al diseo web Existe vida ms all de los grficos estticos? En realidad s. La opcin ms comn es Flash de Macromedia, que permite crear pelculas realmente complejas e interactivas combinando ilustraciones embebidas, grficos vectoriales, sonidos y ActionScript, el lenguaje de comandos especfico de Flash, amn de otras posibilidades muy bien conocidas. Adicionalmente est disponible el formato vectorial SVG. Conclusin En conclusin, el trabajo del desarrollador web (esa especie de alquimista obligado a dominar y combinar variables tan dispares, y a veces de apariencia incompatible, como la usabilidad y el atractivo de cara al usuario, y la efectividad tcnica de cara a la empresa que paga sus honorarios, como por ejemplo en el caso de tiendas on-line), este trabajo, deca, es un proceso largo que requiere un enorme grado de instruccin y aprendizaje tcnico, pero tambin generosas dosis de intuicin y anticipacin. A fin de cuentas, la Red muta y crece cada poco tiempo, y no podemos quedar atrs. Buena suerte.

    14

  • Capitulo 3 Manual de HTML HTML es el lenguaje utilizado como base para crear las pginas web. Con este manual puedes aprender a utilizarlo con toda su potencia.

    Prlogo al manual de HTML Bienvenidos al manual de HTML de DesarrolloWeb. A travs de todos estos captulos vamos a descubrir el lenguaje utilizado para la creacin de pginas web: el Hyper Text Markup Language, ms conocido como HTML. Puede que en un principio, el hecho de hablar de un lenguaje informtico pare los pies a ms de uno. No os asustis, el HTML no deja de ser ms que una forma un tanto peculiar de dar formato a los textos e imgenes que pretendemos ver por medio de un navegador. Antes de entrar en materia, lo cual haremos de una forma directa y practica, os recomendamos fervorosamente la lectura previa de nuestro manual Publicar en Internet. A partir de esta gua, aprenderis los conceptos ms bsicos necesarios para creacin de un sitio web. Tambin os permitir acceder a este manual con unos conocimientos de base sobre HTML imprescindibles y os dejara bien claro lo que su conocimiento aporta con respecto al simple uso de editores de HTML. El pblico al que va enfocado este manual es a todos aquellos que, con conocimientos mnimos de informtica, desean hacer mundialmente pblico un mensaje, una idea o una informacin usando para ello el medio ms prctico, econmico y actual: Internet. Lo que necesitis como base para llevar a buen trmino el aprendizaje (aparte de leer el manual Publicar en Internet) es:

    Saber escribir con un teclado Saber manejar un ratn Tener ganas de aprender

    Lo que obtendris despus de haber pasado por estos captulos:

    Capacidad para crear y publicar vuestro propio sitio web con un mnimo de calidad Conocimientos de todo tipo sobre las tecnologas y herramientas empleadas en el mbito de la

    Red Posiblemente una aficin que puede convertirse en pasin y terminar, en algunos casos, siendo

    un vicio o un oficio.

    Introduccin al HTML HTML es el lenguaje con el que se escriben las pginas web. Las pginas web pueden ser vistas por el usuario mediante un tipo de aplicacin llamada navegador. Podemos decir por lo tanto que el HTML es el lenguaje usado por los navegadores para mostrar las pginas webs al usuario, siendo hoy en da la interface ms extendida en la red. Este lenguaje nos permite aglutinar textos, sonidos e imgenes y combinarlos a nuestro gusto. Adems, y es aqu donde reside su ventaja con respecto a libros o revistas, el HTML nos permite la introduccin de referencias a otras pginas por medio de los enlaces hipertexto. El HTML se cre en un principio con objetivos divulgativos. No se pens que la web llegara a ser un rea de ocio con carcter multimedia, de modo que, el HTML se cre sin dar respuesta a todos los posibles usos que se le iba a dar y a todos los colectivos de gente que lo utilizaran en un futuro. Sin embargo, pese a esta deficiente planificacin, si que se han ido incorporando modificaciones con el tiempo, estos son los estndares del HTML. Numerosos estndares se han presentado ya. El HTML 4.01 es el ltimo estndar a septiembre de 2001. Esta evolucin tan anrquica del HTML ha supuesto toda una seria de inconvenientes y deficiencias que han debido ser superados con la introduccin de otras tecnologas accesorias capaces de organizar, optimizar y automatizar el funcionamiento de las webs. Ejemplos que pueden sonaros son las CSS, JavaScript u otros. Veremos ms adelante en qu consisten algunas de ellas.

    15

  • Otros de los problems que han acompaado al HTML es la diversidad de navegadores presentes en el mercado los cuales no son capaces de interpretar un mismo cdigo de una manera unificada. Esto obliga al webmster a, una vez creada su pgina, comprobar que esta puede ser leda satisfactoriamente por todos los navegadores, o al menos, los ms utilizados. Adems del navegador necesario para ver los resultados de nuestro trabajo, necesitamos evidentemente otra herramienta capaz de crear la pgina en si. Un archivo HTML (una pgina) no es ms que un texto. Es por ello que para programar en HTML necesitamos un editor de textos. Es recomendable usar el Bloc de notas que viene con windows, u otro editor de textos sencillo. Hay que tener cuidado con algunos editores ms complejos como Wordpad o Microsoft Word, pues colocan su propio cdigo especial al guardar las pginas y HTML es nicamente texto plano, con lo que podremos tener problemas. Existen otro tipo de editores especficos para la creacin de pginas web los cuales ofrecen muchas facilidades que nos permiten aumentar nuestra productividad. No obstante, es aconsejable en un principio utilizar una herramienta lo ms sencilla posible para poder prestar la mxima atencin a nuestro cdigo y familiarizarnos lo antes posible con l. Siempre tendremos tiempo ms delante de pasarnos a editores ms verstiles con la consiguiente ganancia de tiempo. Para tener ms claro todo el tema de editores y los tipos que existen, visita los artculos:

    Editores de HTML. Bloc de notas. Tambin puedes acceder a descripciones editores ms complejos que el Block de Notas, pero

    ms potentes como Homesite o UltraEdit.

    Es importante tener claro todo ello puesto que en funcin de vuestros objetivos puede que, ms que aprender HTML, resulte ms interesante aprender el uso de una aplicacin para la creacin de pginas. As pues, una pgina es un archivo donde est contenido el cdigo HTML en forma de texto. Estos archivos tienen extensin .html o .htm (es indiferente cul utilizar). De modo que cuando programemos en HTML lo haremos con un editor de textos y guardaremos nuestros trabajos con extensin .html, por ejemplo mipgina.html

    Consejo: Utiliza siempre la misma extensin en tus archivos HTML. Eso evitar que te confundas al escribir los nombres de tus archivos unas veces con .htm y otras con .html. Si trabajas con un equipo en un proyecto todava ms importante que os pongis todos de acuerdo en la extensin.

    Sintaxis del HTML El HTML es un lenguaje que basa su sintaxis en un elemento de base al que llamamos etiqueta. La etiqueta presenta frecuentemente dos partes: Una apertura de forma general Un cierre de tipo Todo lo incluido en el interior de esa etiqueta sufrir las modificaciones que caracterizan a esta etiqueta. As por ejemplo:

    Las etiquetas y definen un texto en negrita. Si en nuestro documento HTML escribimos una frase con el siguiente cdigo: Esto esta en negrita El resultado Ser: Esto esta en negrita

    Las etiquetas y definen un prrafo. Si en nuestro documento HTML escribiramos: Hola, estamos en el prrafo 1 Ahora hemos cambiado de prrafo

    16

  • El resultado sera:

    Hola, estamos en el prrafo 1

    Ahora hemos cambiado de prrafo

    Partes de un documento HTML Adems de todo esto, un documento HTML ha de estar delimitado por la etiqueta y . Dentro de este documento, podemos asimismo distinguir dos partes principales: El encabezado, delimitado por y donde colocaremos etiquetas de ndole informativo como por ejemplo el titulo de nuestra pgina. El cuerpo, flanqueado por las etiquetas y , que ser donde colocaremos nuestro texto e imgenes delimitados a su vez por otras etiquetas como las que hemos visto. El resultado es un documento con la siguiente estructura: Etiquetas y contenidos del encabezado Datos que no aparecen en nuestra pgina pero que son importantes para catalogarla: Titulo, palabras clave,... Etiquetas y contenidos del cuerpo Parte del documento que ser mostrada por el navegador: Texto e imgenes Las maysculas o minsculas son indiferentes al escribir etiquetas A notar que las etiquetas pueden ser escritas con cualquier tipo de combinacin de maysculas y minsculas. , o son la misma etiqueta. Resulta sin embargo aconsejable acostumbrarse a escribirlas en minscula ya que otras tecnologas que pueden convivir con nuestro HTML (XML por ejemplo) no son tan permisivas y nunca viene mal coger buenas costumbres desde el principio para evitar fallos triviales en un futuro.

    Tu primera pgina Podemos ya con estos conocimientos, y alguno que otro ms, crear nuestra primera pgina. Para ello, abre tu editor de textos y copia y pega el siguiente texto en un nuevo documento. Cocina Para Todos Bienvenido, Ests en la pgina Comida para Todos. Aqu aprenders recetas fciles y deliciosas. Ahora guarda ese archivo con extensin .html o .htm en tu disco duro. Para ello accedemos al men Archivo y seleccionamos la opcin Guardar como. En la ventana elegimos el directorio donde deseamos guardarlo y colocaremos su nombre, por ejemplo mi_pagina.html

    Consejo: Utiliza nombres en tus archivos que tengan algunas normas bsicas para ahorrarte disgustos y lios.

    17

  • Nuestro consejo es que no utilices acentos ni espacios ni otros caracteres raros. Tambin te ayudar escribir siempre las letras en minsculas. Esto no quiere decir que debes hacer nombres de archivos cortos, es mejor hacerlos descriptivos para que te aclaren lo que hay dentro. Algn caracter como el guin "-" o el guin bajo "_" te puede ayudar a separar las palabras. Por ejemplo quienes_somos.html

    Con el documento HTML creado, podemos ver el resultado obtenido a partir de un navegador. Es conveniente, llegado a este punto, hacer hincapi en el hecho de que no todos los navegadores son idnticos. Desgraciadamente, los resultados de nuestro cdigo pueden cambiar de uno a otro por lo que resulta aconsejable visualizar la pgina en varios. Generalmente se usan Internet Explorer y Netscape como referencias ya que son los ms extendidos. A decir verdad, en el momento que estas lneas son escritas, Internet Explorer acapara la inmensa mayora de usuarios (90% ms o menos) y Netscape esta relegado a un segundo plano. Esto no quiere decir que lo debemos dejar totalmente de lado ya que el 10% de visitas que puede proporcionarnos puede resultar muy importante para nosotros. Por otra parte, parece que se ha hecho publica la intencin de Netscape de desviar un poco su temtica de negocios hacia otros derroteros y abandonar esta llamada "lucha de navegadores" en la cual estaba recibiendo la peor parte. Pues bien, volviendo al tema, una vez creado el archivo .html o .htm, podemos visualizar el resultado de nuestra labor abriendo dicha pgina con un navegador. Para hacerlo, la forma resulta diferente dependiendo del navegador: Si estamos empleando el Explorer, hemos de ir al barra de men, elegir Archivo y seleccionar Abrir. Una ventana se abrir. Pulsamos sobre el botn Examinar y accederemos a una ventana a partir de la cual podremos movernos por el interior de nuestro disco duro hasta dar con el archivo que deseamos abrir. La cosa no resulta ms difcil para Netscape. En este caso, nos dirigimos tambin a la barra de men principal y elegimos File y a continuacin Open File. La misma ventana de bsqueda nos permitir escudriar el contenido de nuestro PC hasta dar con el archivo buscado.

    Nota: Tambin puedes abrir el archivo si accedes al directorio donde lo guardaste. En l podrs encontrar tu archivo HTML y vers que tiene como icono el logotipo de Netscape o el de Internet Explorer. Para abrirlo simplemente hacemos un doble click sobre l.

    Una vez abierto el archivo podris ver vuestra primera pgina web. Algo sencillita pero por algo se empieza. Ya veris como en poco tiempo seremos capaces de mejorar sensiblemente. Fijaos en la parte superior izquierda de la ventana del navegador. Podris comprobar la presencia del texto delimitado por la etiqueta . Esta es una de las funciones de esta etiqueta, cuyo principal cometido es el de servir de referencia en los motores de bsqueda como Altavista o Yahoo.

    Por otro lado, los elementos que colocamos entre la etiqueta y se pueden ver en el espacio reservado para el cuerpo de la pgina. Si ahora hacis click con el botn derecho sobre la pgina y elegs Ver cdigo fuente (o View page

    18

  • source) veris como en una ventana accesoria aparece el cdigo de nuestra pgina. Este recurso es de extremada importancia ya que nos permite ver el tipo de tcnicas empleadas por otros para la confeccin de sus pginas. Con todo esto asimilado ya estamos en condiciones de adentrarnos un poco ms en la descripcin de algunas de las etiquetas ms empleadas del HTML.

    Posible problema: Al utilizar el Block de Notas en Windows en ocasiones, aunque le digamos que es un archivo .html, el documento se guarda como si fuera un texto y no una pgina web. Lo que est pasando es que el Block de Notas tiene predeterminado guardar sus archivos con extensin .txt y en realidad lo que est guardando en el disco duro es mi_pagina.html.txt Para conseguir tener el control de las extensiones en el block de notas y en Windows en general podemos acceder a MI-PC y en el men de Ver seleccionis "Opciones de carpeta". En la ventana que sale pulsamos en la solapa "Ver" y nos permite deseleccionar una caja de seleccin que pone algo como "Ocultar extensiones para los tipos de archivos conocidos". (As se hace en Win98, puede variar un poco en otras versiones de Windows.) Con ello conseguiremos que se vea siempre la extensin del archivo con el que estamos trabajando y que el Block de Notas nos haga caso cuando le indicamos que grabe el archivo con otra extensin que no sea .txt

    Formato de prrafos en HTML En los captulos anteriores hemos presentado a titulo de ejemplo algunas etiquetas que permiten dar formato a nuestro texto. En este capitulo veremos con ms detalle las ms ampliamente utilizadas y ejemplificaremos algunas de ellas posteriormente. Formatear un texto pasa por tareas tan evidentes como definir los prrafos, justificarlos, introducir vietas, numeraciones o bien poner en negrita, itlica... Hemos visto que para definir los prrafos nos servimos de la etiqueta que introduce un salto y deja una lnea en blanco antes de continuar con el resto del documento. Podemos tambin usar la etiqueta , de la cual no existe su cierre correspondiente (), para realizar un simple retorno de carro con lo que no dejamos una lnea en blanco sino que solo cambiamos de lnea.

    Nota: Existen otras etiquetas que no tienen su correspondiente de cierre, como para las imgenes, las veremos ms adelante. Esto ocurre porque un salto de lnea o una imagen no empiezan y acaban ms adelante sino que slo tienen presencia en un lugar puntual.

    Podis comprobar que cambiar de lnea en nuestro documento HTML sin introducir alguna de estas u otras etiquetas no implica en absoluto un cambio de lnea en la pgina visualizada. En realidad el navegador introducir el texto y no cambiara de lnea a no ser que esta llegue a su fin o bien lo especifiquemos con la etiqueta correspondiente. Los prrafos delimitados por etiquetas pueden ser fcilmente justificados a la izquierda, centro o derecha especificando dicha justificacin en el interior de la etiqueta por medio de un atributo align. Un atributo no es ms que un parmetro incluido en el interior de la etiqueta que ayuda a definir el funcionamiento de la etiqueta de una forma ms personal. Veremos a lo largo de este manual cantidad de atributos muy tiles para todo tipo de etiquetas. As, si desesemos introducir un texto alineado a la izquierda escribiramos: Texto alineado a la izquierda El resultado seria:

    Texto alineado a la izquierda

    Para una justificacin al centro: Texto alineado al centro que dara:

    19

  • Texto alineado al centro

    Para justificar a la derecha: Texto alineado a la derecha cuyo efecto seria:

    Texto alineado a la derecha

    Como veis, en cada caso el atributo align toma determinados valores que son escritos entre comillas. En algunas ocasiones necesitamos especificar algunos atributos para el correcto funcionamiento de la etiqueta. En otros casos, el propio navegador toma un valor definido por defecto. Para el caso de align, el valor por defecto es left.

    Nota: Los atributos tienen sus valores indicados entre comillas ("), pero si no los indicamos entre comillas tambin funcionar en la mayora de los casos. Sin embargo, es aconsejable que pongamos siempre las comillas para acostumbrarnos a utilizarlas, por dar homogeneidad a nuestros cdigos y para evitar errores futuros en sistemas ms quisquillosos.

    El atributo align no es exclusivo de la etiqueta . Otras etiquetas muy comunes, que veremos ms adelante, entre las cuales se introducen texto o imgenes, suelen hacer uso de este atributo de una forma habitual. Imaginemos un texto relativamente largo donde todos los prrafos estn alineados a la izquierda (por ejemplo). Una forma de simplificar nuestro cdigo y de evitar introducir continuamente el atributo align sobre cada una de nuestras etiquetas es utilizando la etiqueta . Esta etiqueta por si sola no sirve para nada. Tiene que estar acompaada del atributo align y lo que nos permite es alinear cualquier elemento (prrafo o imagen) de la manera que nosotros deseemos. As, el cdigo: Parrafo1 Parrafo3 Parrafo2 es equivalente a: Parrafo1 Parrafo2 Parrafo3 Como hemos visto, la etiqueta marca divisiones en las que definimos un mismo tipo de alineado. Ejemplo prctico: Para practicar un poco lo que acabamos de ver vamos a proponer un ejercicio que podis resolver en vuestros ordenadores. Simplemente queremos construir una pgina que tenga, por este orden: 2 Prrafos centrados 3 Prrafos alineados a la derecha Un salto de lnea triple 1 prrafo alineado a la izquierda Encabezados Existen otras etiquetas para definir prrafos especiales, formateados como ttulos. Son los encabezados o Header en ingls. Como decimos, son etiquetas que formatean el texto como un titular, para lo cual asignan un tamao mayor de letra y colocan el texto en negrita. Hay varios tipos de encabezados, que se diferencian en el tamao de la letra que utilizan. La etiqueta en concreto es la , para los encabezados ms grandes, para los de segundo nivel y as hasta

    20

  • que es el encabezado ms pequeo. Los encabezados implican tambin una separacin en prrafos, as que todo lo que escribamos dentro de y (o cualquier otro encabezado) se colocar en un prrafo independiente. Podemos ver cmo se presentan algunos encabezados a continuacin. Encabezado de nivel 1 Se ver de esta manera en la pgina:

    Encabezado de nivel 1

    Los encabezados, como otras etiquetas de HTML, soportan el atributo align. Vemos un ejemplo de encabezado de nivel 2 alineado al centro. Encabezado de nivel 2 Se ver de esta manera en la pgina:

    Encabezado de nivel 2

    Otro ejercicio interesante es construir una pgina web que contenga todos los encabezados posibles. Se puede ver a continuacin. Todos los encabezados Encabezado de nivel 1 Encabezado de nivel 1 Encabezado de nivel 1 Encabezado de nivel 1 Encabezado de nivel 1 Encabezado de nivel 1

    Consejo: No debemos utilizar las etiquetas de encabezado para formatear el texto, es decir, si queremos colocar un tipo de letra ms grande y en negrita debemos utilizar las etiquetas que existen para ello (que veremos en seguida). Los encabezados son para colocar titulares en pginas web y es el navegador el responsable de formatear el texto de manera que parezca un titular. Cada navegador, pues, puede formatear el texto a su gusto con tal de que parezca un titular.

    Formateando el texto Adems de todo lo relativo a la organizacin de los prrafos, uno de los aspectos primordiales del formateo de un texto es el de la propia letra. Resulta muy comn y prctico presentar texto resaltado en negrita, itlica y otros. Paralelamente el uso de ndices, subndices resulta vital para la publicacin de textos cient&iaacute;ficos. Todo esto y mucho ms es posible por medio del HTML a partir de multitud de etiquetas entre las cuales vamos a destacar algunas. Negrita Podemos escribir texto en negrita incluyndolo dentro de las etiquetas y (bold). Esta misma tarea es desempeada por y siendo ambas equivalentes. Nosotros nos inclinamos por la primeras por simple razon de esfuerzo. Escribiendo un cdigo de este tipo: Texto en negrita

    21

  • Obtenemos este resultado: Texto en negrita

    Nota: Qu diferencia hay entre y ? Aunque las dos etiquetas hacen el mismo efecto, tienen una peculiaridad que las hace distintas. La etiqueta indica negrita, mientras que la etiqueta indica que se debe escribir resaltado. El HTML lo interpretan los navegadores segn su criterio, es por eso que las pginas se pueden ver de distinta manera en unos browsers y en otros. La etiqueta quiere decir "encabezado de nivel 1", es el navegador el responsable de formatear el texto de manera que parezca un encabezado de primer nivel. En la prctica los encabezados de Internet Explorer y Netscape son muy parecidos (tamao de letra grande y en negrita), pero otro navegador podra colocar los encabezados con subrayado si le pareciese oportuno. La diferencia entre y se podr entender ahora. Mientras que significa simplemente negrita y todos los navegadores la interpretarn como negrita, es una etiqueta que significa que se tiene que resaltar fuertemente el texto y cada navegador es el responsable de resaltarlo como desee. En la prctica coloca el texto en negrilla, pero podra ser que un navegador decidiese resaltar colocando negrilla, subrayado y color rojo en el texto.

    Itlica Tambin en este caso existen dos posibilidades, una corta: e (italic) y otra un poco ms larga: y . En este manual, y en la mayora de las pginas que veris por ah, os encontraris con la primera forma sin duda ms sencilla a escribir y a acordarse. He aqu un ejemplo de texto en itlica: Texto en itlica Que da el siguiente efecto: Texto en itlica Subrayado El HTML nos propone tambin para el subrayado el par de etiquetas: y (underlined). Sin embargo, el uso de subrayados ha de ser aplicado con mucha precaucin dado que los enlaces hipertexto van, a no ser que se indique lo contrario, subrayados con lo que podemos confundir al lector y apartarlo del verdadero inters de nuestro texto. Subndices y suprandices Este tipo de formato resulta de extremada utilidad para textos cientficos. Las etiquetas empleadas son: y para los suprandices y para los subndices Aqu tenis un ejemplo: La 13CC3H4ClNOS es un heterociclo alergeno enriquecido El resultado: La 13CC3H4ClNOS es un heterociclo alergeno enriquecido Anidar etiquetas Todas estas etiquetas y por supuesto el resto de las vistas y que veremos ms adelante pueden ser anidadas unas dentro de otras de manera a conseguir resultados diferentes. As, podemos sin ningn problema crear texto en negrita e itlica embebiendo una etiqueta dentro de la otra: Esto slo est en negrita y esto en negrita e itlica Esto nos daria: Esto slo esta en negrita y esto en negrita e itlica

    22

  • Consejo: Cuando anides etiquetas HTML hazlo correctamente. Nos referimos a que si abres etiquetas dentro de otra ms principal, antes de cerrar la etiqueta principal cierres las etiquetas que hayas abierto dentro de ella.

    Debemos evitar cdigos como el siguiente: Esto est en negrita e itlica

    En favor de cdigos con etiquetas correctamente anidadas:

    Esto est en negrita e itlica Esto es muy aconsejable, aunque los navegadores entiendan bien las etiquetas mal anidadas, por dos razones:

    1. Sistemas como XML no son tan permisivos con estos errores y puede que en el futuro nuestras pginas no funcionen correcamente.

    2. A los navegadores les cuesta mucho tiempo de procesamiento resolver este tipo de errores, incluso ms que construir la propia pgina y debemos evitarles que sufran por una mala codificacin.

    Color, tamao y tipo de letra A pesar de que por razones de homogeneidad y sencillez de codigo este tipo de formatos son controlados actualmente por hojas de estilo en cascada (de las cuales ya tendremos tiempo de hablar), existe una forma clsica y directa de definir color tamao y tipo de letra de un texto determinado. Esto se hace a partir de la etiqueta y su cierre correspondiente. Dentro de esta etiqueta deberemos especificar los atributos correspondientes a cada uno de estos parmetros que deseamos definir. A continuacin os comentamos los atributos principales de esta etiqueta: Atributo face Define el tipo de letra. Este atributo es interpretado por versiones de Netscape a partir de la 3 y de MSIE 3 o superiores. Otros navegadores las ignoran completamente y muestran el texto con la fuente que utilizan. Hay que tener cuidado con este atributo ya que cada usuario, dependiendo de la plataforma que utilice, puede no disponer de los mismos tipos de letra que nosotros con lo que, si nosotros elegimos un tipo del que no dispone, el navegador se ver forzado a mostrar el texto con la fuente que utiliza por defecto (suele ser Times New Roman). Para evitar esto, dentro del atributo suelen seleccionarse varios tipos de letra separados por comas. En este caso el navegador comprobar que dispone del primer tipo enumerado y si no es as, pasar al segundo y as sucesivamente hasta encontrar un tipo que posea o bien acabar la lista y poner la fuente por defecto. Veamos un ejemplo. Este texto tiene otra tipografa Que se visualizara as en una pgina web. Este texto tiene otra tipografa

    Nota: Aqu tenemos un ejemplo de atributo cuyo valor debe estar limitado por comillas ("). Habamos dicho que las comillas eran opcionales en los atributos, sin embargo esto no es as siempre. Si el valor del atributo contiene espacios, como es el caso de:

    face="Comic Sans MS,arial,verdana" debemos colocar las comillas para limitarlo. En caso de no tener comillas

    face=Comic Sans MS,arial,verdana se entendera que face=Comic, pero no se tendra en cuenta todo lo que sigue, porque HTML no lo asociara al valor del atributo. En este caso HTML pensara que las siguientes palabras (despus del espacio) son otros atributos, pero como no los conoce como atributos simplemente los desestimar.

    Atributo size Define el tamao de la letra. Este tamao puede ser absoluto o relativo.

    23

  • Si hablamos en trminos absolutos, existen 7 niveles de tamao distintos numerados de 1 a 7 por orden creciente. Elegiremos por tanto un valor size="1" para la letra ms pequea o size="7" para la ms grande. Este texto es ms grande Que se visualizara as en una pgina web. Este texto es ms grande Podemos asimismo modificar el tamao de nuestra letra con respecto al del texto mostrado precedentemente definiendo el nmero de niveles que queremos subir o bajar en esta escala de tamaos por medio de un signo + o -. De este modo, si definimos nuestro atributo como size="+1" lo que queremos decir es que aumentamos de un nivel el tamao de la letra. Si estabamos escribiendo previamente en 3, pasaremos automticamente a 4. Los tamaos reales que veremos en pantalla dependern de la definicin y del tamao de fuente elegido por el usuario en el navegador. Este tamao de fuente puede ser definido en el Explorer yendo al menu superior, Ver/Tamao de la fuente. En Netscape elegiremos View/Text Size. Esta flexibilidad puede en ms de una ocasin resultarnos embarazosa ya que en muchos casos desearemos que el tamao del texto permanezca constante para que ste quepa en un determinado espacio. Veremos en su momento que esta prefijacin del tamao puede ser llevada a cabo por las hojas de estilo en cascada. Atributo color El color del texto puede ser definido mediante el atributo color. Cada color es a su vez definido por un nmero hexadecimal que esta compuesto a su vez de tres partes. Cada una de estas partes representa la contribucin del rojo, verde y azul al color en cuestin. Podis entender cmo funciona esta numeracin y cules son los colores que resultan ms compatibles a partir de este artculo: Los colores y HTML. Por otra parte, es posible definir de una manera inmediata algunos de los colores ms frecuentemente usados para los que se ha creado un nombre ms memotcnico:

    Nombre Color

    Aqua

    Black

    Blue

    Fuchsia

    Gray

    Green

    Lime

    Maroon

    Navy

    Olive

    Purple

    Red

    Silver

    Teal

    White

    Yellow

    Este texto est en rojo Que se visualizara as en una pgina web. Este texto est en rojo Con todo esto estamos ya en disposicion de crear un texto formateado de una forma realmente elaborada.

    24

  • Pongamos pues en practica todo lo que hemos aprendido en estos capitulos haciendo un ejercicio consistente en una pgina que tenga las siguientes caractersticas:

    Un titular con encabezado de nivel 1, en itlica y color verde oliva. Un segundo titular con encabezado de nivel 2, tambin de color verde oliva. Todo el texto de la pgina deber presentarse con una fuente distinta de la fuente por defecto.

    Por ejemplo "Comic Sans MS" y en caso de que sta no est en el sistema que se coloque la fuente "Arial".

    Atributos para pginas Las pginas HTML pueden construirse con variedad de atributos que le pueden dar un aspecto a la pgina muy personalizado. Podemos definir atributos como el color de fondo, el color del texto o de los enlaces. Estos atributos se definen en la etiqueta y, como decamos son generales a toda la pgina. Lo mejor para explicar su funcionamiento es verlos uno por uno. Atributos para fondos bgcolor: especificamos un color de fondo para la pgina. En el captulo anterior y en el taller de los colores y HTML hemos aprendido a construir cualquier color, con su nombre o su valor RGB. El color de fondo que podemos asignar con bgcolor es un color plano, es decir el mismo para toda la superficie del navegador. background: sirve para indicar la colocacin de una imagen como fondo de la pgina. La imagen se coloca haciendo un mosaico, es decir, se repite muchas veces hasta ocupar todo el espacio del fondo de la pgina. En captulos ms adelante veremos como se insertan imgenes con HTML y los tipos de imgenes que se pueden utilizar. Ejemplo de fondo Vamos a colocar esta imagen como fondo en la pgina.

    La imagen se llama fondo.jpg y suponemos que se encuentra en el mismo directorio que la pgina. En este caso se colocara la siguiente etiqueta Se puede ver el efecto de colocar ese fondo en una pgina a parte.

    Consejo: siempre que coloquemos una imagen de fondo, debemos poner tambin un color de fondo cercano al color de la imagen. Esto se debe a que, al colocar una imagen de fondo, el texto de la pgina debemos colocarlo en un color que contraste suficientemente con dicho fondo. Si el visitante no puede ver el fondo por cualquier cuestin (Por ejemplo tener deshabilitada la carga de imgenes) puede que el texto no contraste lo suficiente con el color de fondo por defecto de la web. Creo que lo mejor ser poner un ejemplo. Si la imagen de fondo es oscura, tendremos que poner un texto claro para que se pueda leer. Si el visitante que accede a la pgina no ve la imagen de fondo, le saldr el fondo por defecto, que generalmente es blanco, de modo que al tener un texto con color claro sobre un fondo blanco, nos pasar que no podremos leer el texto convenientemente. Ocurre parecido cuando se est cargando la pgina. Si todava no ha llegado a nuestro sistema la imagen de fondo, se ver el fondo que hayamos seleccionado con bgcolor y es interesante que sea parecido al color de la imagen para que se pueda leer el texto mientras se carga la imagen de fondo.

    Color del texto text: este atributo sirve para asignar el color del texto de la pgina. Por defecto es el negro.

    25

  • Adems del color del texto, tenemos tres atributos para asignar el color de los enlaces de la pgina. Ya debemos saber que los enlaces deben diferenciarse del resto del texto de la pgina para que los usuarios puedan identificarlos fcilmente. Para ello suelen aparecer subrayados y con un color ms vivo que el texto. Los tres atributos son los siguientes: link: el color de los enlaces que no han sido visitados. (por defecto es azul clarito) vlink: el color de los enlaces visitandos. La "v" viene justamente de la palabra visitado. Es el color que tendrn los enlaces que ya hemos visitado. Por defecto su color es morado. Este color debera ser un poco menos vivo que el color de los enlaces normales. alink: es el color de los enlaces activos. Un enlace est activo en el preciso instante que se pulsa. A veces es difcil darse cuenta cuando un enlace est activo porque en el momento en el que se activa es porque lo estamos pulsando y en ese caso el navegador abandonar la pgina rpidamente y no podremos ver el enlace activo ms que por unos instantes mnimos. Ejemplo de color del texto Vamos a ver una pgina donde el color de fondo sea negro, y los colores del texto y los enlaces sean claros. Pondremos el color de texto balnco y los enlaces amarillos, ms resaltados los que no estn visitados y menos resaltados lo que ya estn visitados. Para ello escribiramos la etiqueta body as: El efecto se puede ver en una pgina a parte. Mrgenes Con otros atributos de la etiqueta se pueden asignan espacios de margen en las pginas, lo que es muy til para eliminar los mrgenes en blanco que aparecen a los lados, arriba y debajo de la pgina. Estos atributos son distintos para Internet Explorer y para Netscape Navigator, por lo que debemos utilizarlos todos si queremos que todos los navegadores los interpreten perfectamente. leftmargin: para indicar el margen a los lados de la pgina. Vlido para iexplorer. topmargin: para indicar el margen arriba y debajo de la pgina. Para iexplorer. marginwidth: la contrapartida de leftmargin para Netscape. (Margen a los lados) marginheight: igual que topmargin, pero para Netscape. (Margen arriba y abajo) Tenemos un artculo sobre la utilizacin de estos atributos para hacer diseos avanzados con tablas en distintas definiciones de pantalla, que puede ser interesante de leer. Un ejemplo de pgina sin margen es la propia pgina de DesarrolloWeb.com, que ests visitando actualmente. (Por lo menos a la hora de escribir este artculo) Adems, vamos a ver otra pgina sin mrgenes, por si alguien necesita ver el ejemplo en estas lneas. Hola amigos Gracias por visitarme! Esta pgina tiene el fondo blanco y dentro una tabla con el fondo rojo. En la pgina podremos ver que la tabla ocupa el espacio en la pgina sin dejar sitio para ningn tipo de margen.

    Listas I Las posibilidades que nos ofrece el HTML en cuestin de tratamiento de texto son realmente notables. No se limitan a lo visto hasta ahora, sino que van ms lejos todava. Varios ejemplos de ello son las listas, que sirven para enumerar y definir elementos, los textos preformateados y las cabeceras o ttulos. Las listas son utilizadas para citar, numerar y definir objetos. Tambin son utilizadas corrientemente para desplazar el comienzo de lnea hacia la derecha. Podemos distinguir tres tipos de listas:

    26

  • Listas desordenadas Listas ordenadas Listas de definicin

    Las veremos detenidamente una a una. Listas desordenadas Son delimitadas por las etiquetas y (unordered list). Cada uno de los elementos de la lista es citado por medio de una etiqueta (sin cierre, aunque no hay inconveniente en colocarlo). La cosa queda as: Pases del mundo Argentina Per Chile El resultado:

    Pases del mundo

    Argentina Per Chile

    Podemos definir el tipo de vieta empleada para cada elemento. Para ello debemos especificarlo por medio del atributo type incluido dentro de la etiqueta de apertura , si queremos que el estilo sea vlido para toda la lista,o dentro le la etiqueta si queremos hacerlo especfico de un solo elemento. La sintaxis es del siguiente tipo: donde tipo de vieta puede ser uno de los siguientes: circle disc square

    Nota: En algunos navegadores no funciona la opcin de cambiar el tipo de vieta a mostrar y por mucho que nos empeemos, siempre saldr el redondel negro. En caso de que no funcione siempre podemos construir la lista a mano con la vieta que queramos utilizando las tablas de HTML. Veremos ms adelante cmo trabajar con tablas.

    Vamos a ver un ejemplo de lista con un cuadrado en lugar de un redondel, y en el ltimo elemento colocaremos un crculo. Para ello vamos a colocar el atributo type en la etiqueta , con lo que afectar a todos los elementos de la lista. Elemento 1 Elemento 2 Elemento 3 Elemento 4 Que tiene como resultado

    Elemento 1 Elemento 2 Elemento 3 o Elemento 4

    27

  • Listas II Continuamos estudiando las listas de HTML, con las que crear estructuras atractivas para presentar la informacin. Listas ordenadas En este caso usaremos las etiquetas (ordered list) y su cierre. Cada elemento sera igualmente precedido de su etiqueta . Pongamos un ejemplo: Reglas de comportamiento en el trabajo El jefe siempre tiene la razn En caso de duda aplicar regla 1 El resultado es:

    Reglas de comportamiento en el trabajo

    1. El jefe siempre tiene la razn 2. En caso de duda aplicar regla 1

    Del mismo modo que para las listas desordenadas, las listas ordenadas ofrecen la posibilidad de modificar el estilo. En concreto nos es posible especificar el tipo de numeracin empleado eligiendo entre nmeros (1, 2, 3...), letras (a, b, c...) y sus maysculas (A, B, C,...) y nmeros romanos en sus versiones maysculas (I, II, III,...) y minsculas (i, ii, iii,...). Para realizar dicha seleccin hemos de utilizar, como para el caso precedente, el atributo type, el cual ser situado dentro de la etiqueta . Los valores que puede tomar el atributo en este caso son: 1 Para ordenar por nmeros a Por letras del alfabeto A Por letras maysculas del alfabeto i Ordenacin por nmeros romanos en minsculas I Ordenacin por nmeros romanos en maysculas

    Nota: Recordamos que en algunos navegadores no funciona la opcin de cambiar el tipo de vieta a mostrar

    Puede que en algn caso deseemos comenzar nuestra enumeracin por un nmero o letra que no tiene por qu ser necesariamente el primero de todos. Para solventar esta situacin, podemos utilizar un segundo atributo, sta