Diseno.y.programacion.de.paginas.web. .miguel.pedroza.pareja

2,129 views
2,073 views

Published on

PERMITE LA CREACION DE PAGINAS WEB HTML.

Published in: Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,129
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
42
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Diseno.y.programacion.de.paginas.web. .miguel.pedroza.pareja

  1. 1. Diseño y Programación de Páginas WebAutor: DesarrolloWebEditor: Miguel Ángel Pedregosa Pareja
  2. 2. ÍndiceCapitulo 1Publicar en InternetTratamos los temas más básicos que necesitas saber para publicar una página web,como los materiales necesarios, el lenguaje HTML, editores, elegir alojamiento, subirpáginas a los servidores y mucho más.Pág. 4Capitulo 2Introducción al diseño webPrimeros pasos para aquellas personas que deseen crear su propia página web, desde elpunto de vista del diseñador. Motivación a seguir, programas a utilizar, etc.Pág. 12Capitulo 3Manual de HTMLHTML es el lenguaje utilizado como base para crear las páginas web. Con este manualpuedes aprender a utilizarlo con toda su potencia.Pág. 15Capitulo 4Ayudas técnicasLas ayudas técnicas son pequeños reportajes de interés general muy útiles para conocerrápidamente diversos temas de interés.Pág. 75Capitulo 5Introducción a la promoción de websUna vez hemos construido una página web tenemos que hacer que esta sea conocidapor todos los medios que estén a nuestro alcance, para atraer visitas a ella y, cuandomenos, sentirnos orgullosos de que esta sea popular en la Red. Para conseguir estotenemos que promocionarla adecuadamente, de manera que su dirección figure en elmayor número de sitios.Pág. 115Capitulo 6La imagen en InternetExplica cómo debemos crear la imagen en Internet de las empresas, productos oservicios que deseamos vender. No vale clonar lo anterior; hace falta conjugarestrategia, contenido, diseño y tecnología.i
  3. 3. Pág. 146Capitulo 7Páginas dinámicasIntroducción al concepto de páginas dinámicas, lenguajes de lado cliente y servidor yotra serie de nociones básicas para lanzarse a la aventura de la programación en ASP oPHP. Este manual sirve de introducción a otros más avanzados.Pág. 150Capitulo 8Introducción a los lenguajes del webVamos a estudiar de manera global el mundo de la programación de páginas web. Paraello empezaremos estudiando rápidamente algunos conceptos básicos, que seguramentemuchos ya sabremos, como el marco donde la web se desarrolla, qué es una página web,cómo se construye una página y el lenguaje HTML. Además veremos qué es una páginaestática y dinámica distinguiendo entre páginas dinámicas de cliente y servidor.Pág. 155Capitulo 9Programación en ASPPrincipios básicos para la programación en ASP, el lenguaje del lado del servidorcreado por Microsoft . Manual asequible para no programadores que sienta losfundamentos básicos de este lenguaje. Continuación lógica del manual de páginasdinámicas.Pág. 169Capitulo 10Programación en PHPPrincipios básicos para la programación en PHP, el popular lenguaje del lado delservidor. Manual asequible para no programadores que sienta los fundamentos básicosde este lenguaje. Continuación lógica del manual de páginas dinámicas.Pág. 187Capitulo 11Programación en JavaScriptDescubre el lenguaje dinámico de lado cliente por excelencia. Aprende a crear páginaswebs con vida propia con nuestro manual de Javascript.Pág. 224ii
  4. 4. Capitulo 12Programación en Javascript IIEn este manual explicamos todos los recursos con los que cuenta un programador deJavascript para crear todo tipo de efectos y aplicaciones.Pág. 258Capitulo 13Tutorial de Visual Basic ScriptManual del lenguaje de scripting de Microsoft para páginas web con el que podrásaprender a realizar efectos para el Internet Explorer.Explora las características del HTML Dinámico con el lenguaje del navegador máshabitual.Pág. 304Capitulo 14CSS, hojas de estilosManual completo y práctico sobre hojas de estilo en cascada (CSS). Aprende a utilizaresta tecnología que te ayudará a crear páginas más atractivas y precisas. El cursocontiene la descrición, uso, sintaxis, y lista de atributos para crear estilos.Pág. 320Capitulo 15Introducción a XMLUna breve intruducción al mundo XML que explica qué es este lenguaje y sustecnologías relacionadas.Pág. 337Capitulo 16Tutorial de SQLAprende a utilizar el estándar utilizado para la consulta de bases de datos. Seleccionar,crear, modificar y borrar registros. Todo lo que necesitas para la creación de tus páginasdinámicas.Pág. 342Apéndice IQué es cada tecnologíaEste apendice trata en cada uno de sus capítulos de introducir cada una de lastecnologías utilizadas en el desarrollo de páginas web.Pág. 352iii
  5. 5. Apéndice IIFrontpage 2000 para principiantesUn análisis en profundidad de Frontpage y la respuesta a las preguntas más habitualesplanteadas por los usuarios novatos de este programa.Pág. 373Apendice IIIInstalación de IIS en Windows XP profesionalDescripción detallada del proceso de instalación y configuración de Internet InformationServer en Windows XP profesional. Conceptos básicos necesarios para empezar laadministración.Pág. 377iv
  6. 6. Capitulo 1Publicar en InternetTratamos los temas más básicos que necesitas saber para publicar una página web, como los materialesnecesarios, el lenguaje HTML, editores, elegir alojamiento, subir páginas a los servidores y mucho más.Introducción a InternetInternet es una red de ordenadores conectados en toda la extensión del Globo Terráqueo que ofrecediversos servicios a sus usuarios como pueden ser el correo electrónico, el chat o la web. Todos losservicios que ofrece Internet son llevados a cabo por miles de ordenadores que están permanentementeencendidos y conectados a Internet, esperando que los usuarios les soliciten los servicios y sirviéndolosuna vez son solicitados. Como decimos, hay servidores para todo, los hay que ofrecen correoelectrónico, otros hacen posible nuestras conversaciones por chat, otros la transferencia de ficheros o lavisita a las páginas web y así hasta completar la lista de servicios de Internet.También existe otro tipo de servidores que son los que se encargan de proveer de acceso a Internet anuestros ordenadores, son los proveedores de acceso, los servidores a los que nos conectamos connuestros módems. Cuando hacemos la llamada con el módem a los servidores que proveen el accesoentramos a formar parte de Internet y mientras mantengamos la conexión podremos acceder a todos losservidores 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 loofrece. Para solicitar uno de estos servicios es necesario contar con un programa especial que suele serdistinto para cada servicio de Internet. Por ejemplo, para acceder al correo electrónico utilizamosOutlook, para acceder a la web utilizamos Netscape o Internet Explorer o para entrar en el chatutilizamos un programa como Mirc o Pirch. Todos estos programas que nos dan acceso a los servicios deInternet se denominan clientes, como se puede ver, para ser el cliente de un servidor de Internetnecesitamos un programa cliente del servicio al que intentamos acceder.La web es un servicio de InternetToda esta introducción sirva para que nos demos cuenta que Internet es un conjunto de servicios y elweb, que es lo que tratamos de analizar, no es más que uno de ellos. Probablemente sea el más popularen 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 sepuede hacer en Internet. La web es entonces un servicio más que consiste en un inmenso conjunto depáginas 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 páginasconectadas con enlaces. Los sistemas de hipertexto se utilizan en otros contextos, como la ayuda delWindows y son muy fáciles de utilizar y de encontrar lo que buscamos rápidamente. La web no solo selimita a presentar textos y enlaces, sino que también puede ofrecernos imágenes, videos, sonido y todotipo de presentaciones, llegando a ser el servicio más rico en medios que tiene Internet. Por esta razón,para referirnos al sistema que implementa el web (hipertexto), se ha acuñado un nuevo término que eshipermedia, haciendo referencia a que el web permite contenidos multimedia.Multimedia, por si alguno no lo sabe todavía, hace referencia a muchos medios, solamente quiere decirque se están utilizando muchos medios para presentar información como son el vídeo, el audio orealidad virtual. Cuando nos venden un ordenador multimedia, nos venden un ordenador que estáconstruido para poder trabajar con muchos medios, como imagen, sonido, animación, video, etc.Cómo es una web por dentroUna página web la vemos en nuestro navegador, o cliente web, y parece una sola entidad, pero no esasí, está compuesta por multitud de diferentes ficheros, como son las imágenes, los posibles vídeos y lomás importante, el código fuente que dice donde colocar cada texto, cada imagen o cada video y laforma que tendrán estos al ser colocados en la página. No es problema que las webs estén compuestaspor tantos elementos, ya que rápidamente veremos que su organización es fácil y que no se nos van aperder o escapar ninguno.Como hemos podido imaginar y a modo de resumen, para publicar en Internet necesitaremos construirunos documentos hipertexto, o hipermedia, con sus correspondientes archivos de imagen o video ycolocarlos en unos ordenadores que son servidores de páginas web. Pero esto es algo que vamos atratar de explicar poco a poco en los siguientes capítulos.4
  7. 7. Aunque signifique adelantarse a los acontecimientos, es interesante señalar que con una simple acciónpodemos ver el código fuente de de las páginas, es decir, cómo están hechas por dentro. Para ello enInternet Explorer se ha de pulsar sobre el menú de Ver > Código fuente y en Netscape se ha deseleccionar Ver > Origen de la página.Pasos previos I. Pensar un temaPara publicar una página en Internet debemos seguir unos pasos, primero una planificación, luego laconstrucción de las páginas y más tarde la promoción y constante actualización de las páginas. En estecapítulo vamos a ver cuáles son los pasos previos que debemos realizar para que nuestro esfuerzo yresultados sean lo más óptimos posibles, es decir, vamos a ver cuál es la planificación que hay quehacer antes de ponerse manos a la obra.Pensar un temaPuede ser el más importante de los pasos para la creación de un web. Hay que elaborar la idea ydocumentarse sobre el tema que has elegido para tu página en Internet.Cuando hacemos incluso una página personal podemos hablar de algún tema interesante como nuestroequipo de fútbol o nuestro cantante favorito, o de un tema que nos conmueva profundamente, como elecologismo o la historia de nuestra comarca.También podemos construir una página 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 páginas es mucho menor y que a losdemás usuarios seguramente no les va a interesar. Si deseamos construir una página que algún día seapopular, debemos abordar, como digo, temas que sean de interés para un grupo de gente.Una vez pensado el tema es muy importante documentarse lo más posible sobre él, aunque muchas delas ideas pueden estar en nuestra cabeza, es importante tomar notas, fotografías u opiniones de otraspersonas que también conocen el asunto que nos traemos en la cabeza. Insisto, es importante que elmaterial que vamos a publicar tenga el mayor valor posible, así conseguiremos los mejores resultados.Pasos previos II. Estructura del sitioEs importante también que pensemos en la estructura de los contenidos de todo el sitio antes deponernos a diseñarlo. En este punto tenemos que pensar sobre varias cosas, como las distintassecciones que va a contener el sitio, el árbol de las páginas que vamos a tratar, etc.La manera de que este punto sea realmente útil, es preparar todas estas ideas sobre el papel. Con todala tranquilidad del mundo y con toda la determinación posible vamos a preparar una serie de diagramasy listados que nos permitan dirigir nuestros esfuerzos de la manera más óptima.Secciones del sitio: Podremos pensar en qué secciones vamos a poner en el sitio. Una con informacióngeneral, otra con información de contacto, otra con una visita gráfica a nuestras instalaciones, etc.Árbol del sitio: Podemos dibujar en un papel cuáles son las distintas secciones del sitio, metidas dentrode cuadrados y representar también los enlaces que hay entre cada sección, mediante líneas que unenesos cuadrados. Es algo muy simple y divertido de hacer, además podemos tener nuevas ideas para elweb a medida que lo vamos dibujando.Esquema de una página: podemos dibujar en papel también una página del sitio que vamos aconstruir, para que veamos donde colocar la barra de navegación, el logotipo del sitio o la empresa, unposible banner publicitario, etc. Este esquema puede ser también de utilidad a la hora de construir laspáginas y siempre es más fácil diseñar sobre el papel que diseñar directamente con el ordenadorEstos pasos son opcionales, cualquiera puede ponerse a construir una página nada más decidir quedesea tener una web, pero no todo el mundo es capaz de plantearse bien cuáles son sus objetivos yformar un proyecto con todos los puntos desarrollados de antemano. Los resultados finales son lo másimportante y empezar la casa por el tejado no va a ser lo más positivo para nuestra página y losresultados finales mejorarán si hacemos primero una planificación.Qué necesitas para empezarPara ponernos a diseñar páginas web nos hace falta realmente poco material. En la mayoría de losequipos que se instalan con Windows 98 se encuentran todos los materiales necesarios para empezar sinnecesidad de obtener nuevos programas.En concreto, los materiales necesarios son un editor de textos, con el que programaremos nuestraspáginas y un cliente del web como Internet Explorer o Netscape Navigator. Como un ordenador Windows5
  8. 8. 98 por defecto siempre tiene instalado el Block de Notas y también el Internet Explorer se puedeempezar a construir una página web sin más necesidades que lo que ya tenemos.En otros sistemas distintos de Windows 98 será también muy fácil obtener un editor de textos sencillo yun navegador con el que ver las páginas que vamos a crear, si es que no están instalados ya. Sitios enla web desde donde se pueden descargar estos programas son Tucows o Download.com, donde tienensoftware de todos los sistemas operativos como Windows, Mac OS, o Linux.También en castellano tenemos buenas páginas de descarga de software, la más representativa esSoftonic.Sin duda, en nuestra aventura con el desarrollo del web vamos a necesitar muchos más programascomo por ejemplo programas de retoque fotográfico o editores complejos de páginas web, pero no esnecesario que los introduzcamos todavía en este manual porque no son necesarios para dar nuestrosprimeros pasos.Qué es HTMLHTML es el lenguaje con el que se definen las páginas web. Básicamente se trata de un conjunto deetiquetas que sirven para definir la forma en la que presentar el texto y otros elementos de la página.El HTML se creó en un principio con objetivos divulgativos. No se pensó que la web llegara a ser un áreade ocio con carácter multimedia, de modo que, el HTML se creó sin dar respuesta a todos los posiblesusos que se le iba a dar y a todos los colectivos de gente que lo utilizarían en un futuro. Sin embargo,pese a esta deficiente planificación, si que se han ido incorporando modificaciones con el tiempo, estosson los estándares del HTML. Numerosos estándares se han presentado ya. El HTML 4.01 es el últimoestándar a febrero de 2001.El HTML es un lenguaje de programación muy fácil 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 fácil ypronto podremos dominar el lenguaje. Más adelante se conseguirán los resultados profesionales graciasa nuestras capacidades para el diseño y nuestra vena artista.Una vez conocemos el concepto de HTML os vamos a adelantar algunas cosas más. Este lenguaje seescribe en un documento de texto, por eso necesitamos un editor de textos para escribir una páginaweb. Así pues, el archivo donde está contenido el código HTML es un archivo de texto, con unapeculiaridad, que tiene extensión .html o .htm (es indiferente cuál utilizar). De modo que cuandoprogramemos en HTML lo haremos con un editor de textos, lo más sencillo posible y guardaremosnuestros trabajos con extensión .html, por ejemplo mipagina.htmlPor adelantar un poco cómo se utiliza el HTML os diremos que el lenguaje consta de etiquetas que tienenesta forma <B> o <P>. Cada etiqueta significa una cosa, por ejemplo <B> significa que se escriba ennegrita (bold) o <P> significa un párrafo, <A> es un enlace, etc. Casi todas las etiquetas tienen sucorrespondiente etiqueta de cierre, que indica que a partir de ese punto no debe de afectar la etiqueta.Por ejemplo </B> se utiliza para indicar que se deje de escribir en negrita. Así que el HTML no es másque una serie de etiquetas que se utilizan para definir la forma o estilo que queremos aplicar a nuestrodocumento. <B>Esto está en negrita</B>.Para aprender HTML en profundidad tenemos un manual en DesarrolloWeb.com. Además se puedenconsultar los enlaces a distintos manuales que tenemos en nuestro buscador en la sección de HTML. Hayque hacer en este punto una mención especial a un manual que es muy interesante, aunque un pocoanticuado ya, el Webmaestro.Editores de HTMLPara las personas que no deseen complicarse la vida con el lenguaje HTML, porque no tengan tiempo deaprenderlo o porque se sientan incapaces de hacerlo, hay una posibilidad distinta a programardirectamente el HTML a base de texto. Se trata de utilizar un tipo de programas que nos permitendiseñar la página como si estuviéramos escribiendo un documento con un editor del tipo de Word. Eleditor de HTML es el encargado de vérselas con el lenguaje y programar internamente la página con elcódigo HTML según lo que nosotros estamos diseñando.Con el editor HTML podemos colocar imágenes, definir estilos, utilizar negritas o cursivas, etc. sinpreocuparnos de las etiquetas correspondientes a cada estilo o elemento. Es el editor el que sabe estasetiquetas y las utiliza convenientemente. Este tipo de editores HTML se denominan habitualmenteWYSIWYG (What You See Is What You Get) porque cuando trabajas con ellos lo que ves que estáscreando con el editor es lo que obtienes luego cuando grabas la página.Existe entre las personas que se dedican a realizar las páginas web dos tendencias. Por un lado tenemos6
  9. 9. a las personas que prefieren crear las páginas programando el HTML y por otro las personas que utilizaneditores HTML. Algunas diferencias entre hacerlo de un modo u otro son las siguientesEscribiendo el HTML Con un editor WYSIWYGDominas con mayor precisión el código de lapágina, queda más limpio. Si dominas bien elHTML nunca tendrás ningún problema parahacer lo que deseas.El código de la página tiene peor calidad,incluso puede llegar a tener errores, más omenos visibles, que cuestan arreglar. Es lamáquina la que domina el trabajo.Es más complicado el aprendizaje, más lentoy cuando se llega a un nivel avanzadotambién se hace considerablemente másdifícilEl aprendizaje es muy sencillo, tal comopuede ser trabajar en Word. Solo se trata demanejar un programa más.Hacer una página cuesta más trabajo ytiempo.Es muy rápido.Cada uno debe escoger el camino que más le convenga o el que le parezca más atractivo. De todosmodos siempre se puede empezar de un modo y luego pasar al otro modo sin ningún tipo de problema.Incluso, por adelantarnos a los acontecimientos, diríamos que cuando una persona profundiza en eldiseño de páginas web llega un momento en el que le hace falta conocer las dos maneras de construirwebs. A los programadores en HTML les hará falta aprender un editor porque eso aumentará suproductividad y los que utilizan editores necesitarán aprender un poco de HTML para arreglar algunacosa 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 denotas y algunas veces puede verse mi mayor inclinación a escribir el código HTML uno mismo. Aunquemi consejo es aprender HTML, estoy seguro que muchos de vosotros, maestros diseñadores, obtendréismejores resultados utilizando un editor HTML WYSIWYG.En el mercado existen multitud de editores de HTML WYSIWYG, es importante elegir un editor buenoporque nuestros trabajos van a depender de sus resultados. Actualmente el rey de los editores y el queos aconsejaríamos sin duda es el Dreamweaver, fabricado por Macromedia. Otras posibilidades soneditores como GoLive de Adobe o Frontpage de Microsoft, aunque este último lo desaconsejamos.Editores de texto preparados para escribir HTMLLas personas que después de estas líneas han decidido aprender el lenguaje HTML también tienenherramientas muy interesantes para aumentar su productividad sin dejar de escribir ellos mismos elHTML que desean. Se trata de unos editores de texto, como cualquier otro, que están preparados paraescribir HTML y por lo tanto ofrecen multitud de ayudas a los diseñadores• Colorean los códigos de las páginas para hacerlos más comprensibles• Ofrecen ayudas a la programación• Completan etiquetasY un montón de cosas más que sería demasiado complejo de enumerar aquí. Estos editores son porejemplo Home Site o UltraEdit y es muy recomendable utilizarlos para sentirnos más a gusto alprogramar las páginas y poder hacerlas más rápido. Posiblemente sea aconsejable empezar con el Blockde notas, por que es lo más sencillo, pero utilizar un programa de estos será imprescindible con eltiempo.Construir las páginasPor fin empezamos a trabajar en la página 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 más dedicada y tenemos quetrabajar más duramente. El programar o diseñar las páginas podrá gustar más o menos que otrasacciones como planearlas o promocionarlas más tarde, pero no cabe duda que es el momento másexcitante porque nuestros sueños y nuestras ideas empiezan a concretarse en los resultados queesperábamos conseguir.Si hemos proyectado un sitio compuesto por un gran número de páginas lo más habitual es empezardiseñando una página con el marco del sitio, que luego vamos a repetir a modo de plantilla en todas laspáginas. Pero esto son técnicas que aprenderemos con el tiempo.Para ahorrarnos errores cuando hacemos las páginas podemos seguir una serie de consejos útiles.7
  10. 10. • No utilizar espacios en los nombres de los archivos de las páginas o las imágenes. Tampocoutilizar caracteres raros como la ñ o los acentos.• Tener cuidado con las mayúsculas y las minúsculas en los nombres de los archivos quetratamos. Si las utilizamos equivocadamente la página podrá funcionar en nuestro Windows(por que le dan igual las mayúsculas y las minúsculas), pero al subirla al servidor Linux o Unixpodría ser que no funcionase (porque estos sistemas si que distinguen entre mayúsculas yminúsculas).• Enterarse de cómo funciona el documento por defecto, que nos permitiréis que lo expliquemosen capítulos posteriores.• Trabajar siempre con una extensión del archivo HTML específica. No mezclar en un mismoproyecto páginas con extensión .html y .htm.Imágenes y otros recursosComo se ha podido ver anteriormente, el diseño de una página web implica la creación de un archivo encódigo HTML, pero no es lo único que debemos crear. En la mayoría de los casos también desearemosincluir imágenes y para ello será necesario crear los correspondientes archivos gráficos.El proceso para incluir una imagen en una página empieza por la creación de la imagen con un programade diseño gráfico o mediante su digitalización con un escáner. Será necesario que conozcamos alguno delos programas de diseño gráfico que existen en el mercado. Son muy interesantes Photoshop, PaintShop Pro o Fireworks. En un principio podremos contentarnos con manejarlos por encima y nos resultarámuy fácil, pero según avancemos en el camino como diseñadores web será más necesario dominarlospara obtener resultados más profesionales.Los tipos de archivos gráficos que soporta Internet son el JPG y el GIF. Tienen características distintas ypor tanto usos distintos. Podemos conocer más esto en el reportaje Formatos gráficos de Internet.Una vez tenemos los archivos gráficos los ponemos en el mismo directorio que los archivos HTML o enun subdirectorio de este y en el código de la página HTML pondremos una etiqueta especial para incluirla 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, programasJava, etc. Todos estos archivos los tenemos que tener bien localizados dentro de nuestro disco duro ydentro de un mismo directorio. Por supuesto el orden como estén los archivos dentro del directorio esindiferente, pero podrá ser interesante que incluyamos subdirectorios para que quede todo mejorcolocadito y su mantenimiento sea más fácil. Por ejemplo, una técnica muy habitual es colocar todas lasimágenes dentro de un subdirectorio llamado images.El objetivo de tanto orden y conocimiento de la localización de todos los archivos es que luegotendremos que subirlos al servidor sin olvidarnos de ninguno. En capítulos posteriores veremos cómo sehace este paso.Un problema típico con las imágenes y otros archivos externos consiste en que cuando vemos laspáginas en nuestro ordenador se ven correctamente y no falta ninguna imagen ni otros posibleselementos. Sin embargo, cuando subimos los archivos al servidor y vemos la página desde Internet estase muestra con errores en las imágenes y otros elementos, de modo que no se pueden ver. Esto suelellamarse tener una imagen "rota". La razón por la que está rota es que no puede localizarla en elservidor y por tanto no la puede mostrar. Esto puede ser debido a varias razones.• La imagen no ha sido subida al servidor• La posición relativa de la imagen con respecto a la página no es la misma en nuestro ordenador(local) y en el servidor (remoto). Por ejemplo, las imágenes en local podrían estar en eldirectorio images mientras que en remoto podrían estar en el mismo directorio que la página, loque sería un error. Siempre se debe respetar la estructura de directorios que hay en local ycrearla exactamente igual en remoto.• La imagen que se intenta acceder tiene un camino dirigido a un directorio de nuestro discoduro, como al ver la página desde Internet no se tiene acceso a tu disco duro, los usuarios nopodrán ver las imágenes. Cuando trabajamos con un editor de HTML y colocamos imágenes enalgunas 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 página que estamosdiseñando.Hay una forma muy útil de obtener pistas acerca del fallo de una imagen, consiste en pulsar con el botónderecho del ratón sobre ella y seleccionar propiedades. Esto nos muestra información sobre la imagen ynos informa sobre el sitio donde se está intentando encontrarla.8
  11. 11. Alojar las páginasComo 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 día y conectado a Internet tambiénpermanentemente. En el caso de una página web, existen unos servidores que son los encargados demandarla cuando se la solicita, son los servidores web. Nuestras páginas tienen que estar alojadas en unservidor web para que puedan estar accesibles desde Internet.Lo que tendremos que hacer entonces es buscar un lugar para alojar la página que esté acorde connuestras necesidades, por suerte en muchos de los casos el alojamiento lo podremos conseguir demanera gratuita.Subir los archivos al servidorEs una de las tareas que parecen más difíciles cuando te pones a construir las páginas. Igual quecualquier cosa en este mundo, cuando lo has hecho unas cuantas veces el problema se desvanece.Básicamente lo que tenemos que hacer es tomar todos los archivos que componen nuestro sitio web,incluidas imágenes, animaciones, etc. y subirlas a nuestro servidor web. Para ello primero es tareaimprescindible el identificar dónde están todos los archivos de nuestro web. Si hemos escrito la páginacon código HTML seguramente sabremos perfectamente donde están nuestros ficheros, pero si la páginala hemos hecho con un editor HTML como Frontpage es probable que estén un poco más difíciles deidentificar.Dependiendo del alojamiento que tengamos, la manera de subir los archivos cambiará. Existen, de todosmodos, dos maneras de subir los archivos al servidor, por FTP o a través de una interfaz web, de modoque podremos ver aquí todas las formas.Subir archivos por FTPLa forma más tradicional de subir ficheros es por FTP, que es un servicio más de Internet que se utilizapara transferir ficheros por la red. Como lo que queremos hacer es transferir los ficheros desde nuestroordenador al servidor, este es el servicio que debemos utilizar.Cuando tenemos un alojamiento profesional para nuestras webs lo más seguro es que nos proporcionenun acceso por FTP a los servidores para subir las páginas.Como otros servicios de Internet, para utilizar FTP necesitamos un programa especial que se denominacliente de FTP. Podemos encontrar en el mercado muchos de estos clientes, algunos populares son CuteFTP o FTP Voyager. Si queremos ver una gama muy amplia de clientes FTP podemos acercarnos porTucows 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),básicamente consisten en una ventana que está partida en dos partes. En una parte podemos vernuestro disco duro, con sus distintas unidades y carpetas. En la otra parte se puede ver el sistema dearchivos del servidor, con sus correspondientes carpetas. Para mover los archivos de un lugar a otrosuele bastar con arrastrarlos de una parte de la ventana a la otra.Una tarea que también puede ser complicada en un principio puede ser el configurar el programa de FTPpara que acceda al espacio que tenemos asignado. Los datos de configuración los debes obtener en ellugar donde te ofrecieron el espacio, son estos:Nombre del servidor FTP: suele tener una forma como ftp.tudominio.comUsuario: tu nombre de usuario.Password: tu palabra de clavePodría haber algún dato adicional, como el directorio por defecto, que es el directorio en el que deseasabrir la sesión, pero no es habitual que te den este dato porque los accesos por FTP suelen estarconfigurados para que se acceda directamente al directorio donde están tus páginas.Con estas explicaciones ya verás que cuando vas a hacer un acceso por FTP te suena todo y no te cuestanada el realizarlo. De todos modos, puedes ver un tutorial de Cute FTP que puede aclararte alguna dudamás.Acceso con interfaz webEs muy típico que los proveedores de alojamiento gratuito provean de una herramienta de muy fácil usopara subir las páginas. Esta herramienta se accede a través de la web alojador y no es más que unformulario donde se puede elegir los archivos que se desea subir al servidor, se pulsa un botoncito, ytodo listo.9
  12. 12. Documento por defectoEs importante conocer este concepto, incluso antes de ponerse ha diseñar la página. El documento pordefecto es el archivo que envía el servidor cuando el cliente no especifica que archivo es el que solicita.Esto se puede ver muy fácilmente con un ejemplo.Cuando escribimos la dirección http://www.desarrolloweb.com/ no estamos especificando ningúnnombre de archivo en concreto, entonces el servidor web donde está alojado este sitio web le devolveráel documento por defecto del directorio raíz del dominio. Cada directorio puede tener un documento pordefecto, por ejemplo, cuando escribimos www.desarrolloweb.com/manuales se envía el documento pordefecto del directorio manuales.Cada servidor web puede estás configurado de una manera distinta para el documento por defecto, esdecir, en cada servidor web el documento por defecto puede ser distinto. Lo más habitual es que sellame index.html, en desarrolloweb es así y en muchos alojadores gratuitos también lo es, pero en otroscasos puede variar el documento por defecto y ser lo que los administradores de cada servidor decidan.Otros nombres para el documento por defecto podrían ser default.html o ind.html.Como decíamos, en desarrolloweb el documento por defecto se llama index.html, podemos probar aacceder a http://www.desarrolloweb.com/index.php o ahttp://www.desarrolloweb.com/manuales/index.php y veríamos como se accede a las mismas páginasque 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 porquedesarrolloweb.com está programado con páginas dinámicas PHP, que son un poco más complejas,pero que también nos permiten hacer cosas más avanzadas. En desarrolloweb podemos encontrartambién información adicional sobre páginas dinámicas.Decimos que es importante saber cuál es nuestro documento por defecto porque es necesario quellamemos a la primera página de nuestro sitio web con ese nombre de archivo, de modo que notengamos que saber el nombre de ningún archivo de nuestra página para acceder y la dirección serámás corta.Por ejemplo si tenemos espacio en Geocities y nuestro nombre de usuario es pepe, nuestra página seaccedería escribiendo www.geocities.com/pepe y se devolvería el documento por defecto. Sin embargo,si no utilizamos el documento por defecto y nuestra home page se llama mipagina.html si intentamosacceder sin poner el nombre de archivo, con la dirección de antes, dará un error de archivo noencontrado y para acceder a nuestra home deberíamos de escribirwww.geocities.com/pepe/mipagina.html.Promoción de las páginasCon el diseño y la publicación del sitio web en el servidor no se termina el trabajo. Una de las tareasmás importantes para el éxito de la web es promocionarla adecuadamente, de manera que su direcciónfigure en el mayor número de sitios.Las acciones que se pueden realizar para promocionar una página son muchas y variadas, como hacerque figure su dirección en nuestros correos electrónicos o intercambiar banners, pero la más importantees el registro en los buscadores.Estas tareas de promoción no son nada complicadas y cualquiera puede realizarlas sin ningún problema,pero conseguir que nuestra web se encuentre situada entre los primeros resultados de la búsquedareviste más dificultad.Actualizar las páginasEl último "truco" para que nuestra página sea muy visitada y que los visitantes entren una y otra vez setrata de mantenerla siempre bien actualizada. Hay algunas webs que se prestan más que otras a tenerlos contenidos actualizados, como son las páginas donde se pueden ver contenidos de actualidad, peroen general todas las páginas pueden mantener secciones con contenidos actualizables.Este es un aspecto muy importante, pues si el navegante se percata de que los contenidos se renuevanconstantemente volverá con el tiempo unas cuantas veces. Para dar una imagen de web actualizada sepueden utilizar imágenes o textos que resalten donde ponga "nuevo" o "new". También será adecuadoponer 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 dónde se puederenovar el contenido del web. No es bueno tener un enlace que no lleva a ningún sitio, igual que no esbueno tener una dirección de correo que no existe ya. Además, si tenemos un área de noticias no será10
  13. 13. bueno que la última noticia sea de hace tres meses porque da la impresión de que nunca renovamos loscontenidos.Si no mantenemos nuestro sitio actualizado el visitante entrará una vez a la página pero no lo volverá ahacer nunca, con lo que habremos perdido una oportunidad de hacernos con un cliente o un visitanteasiduo. Supongo que habrá quedado claro lo importante de esta tarea, aunque salta a la vista, creo,para la mayoría de las personas.Por dónde continuarEn este manual hemos visto lo más básico y sin duda tendremos multitud de trabajo en lo sucesivo paratratar de dominar cada una de las técnicas y programas de los que hemos hablado como el HTML, algúneditor, los programas de diseño gráfico, alojar las páginas y subir archivos...Pero en la carrera de un desarrollador del web queda todo un mundo de posibilidades por delante de lasque ni siquiera hemos hablado, como puede ser el tratamiento de imágenes profesional, la programaciónde páginas avanzadas con Javascript y lenguajes como ASP o PHP que nos permitirán crear portales conpáginas que acceden a bases de datos y ofrecen servicios más complicados.Un punto muy interesante para continuar aprendiendo es la sección Desde 0 que contiene la guía paramoverse por los contenidos de DesarrolloWeb para personas novatas. En la sección descubrirás enlacesa un manual de HTML, otro de promoción de páginas y a otros artículos y manuales de interés.Muchas de estas cosas que acabo de enumerar te sonarán todavía a chino, pero ya verás que con eltiempo y a medida que aumenten tus necesidades llegarás a comprenderlas y estudiarlas con calma.Acerca de todas estas cuestiones se puedes informarte en DesarrolloWeb.com, según tu curiosidad ynecesidades se presenten.Otro manual que te puede introducir en procesos más avanzados de la programación de páginas web esel Manual de Paginas Dinámicas, que te explicará que es una página dinámica, para que la puedesnecesitar y cómo llegar a programarlas.Por ahora, este manual se acaba y solo me queda recomendarte otra serie de sitios donde puedesdirigirte para solucionar tus problemas y dudas.• Si piensas que a este manual para principiantes le falta algún contenido realmente básico o algoque consideras confuso, te agradecería que escribieses a la dirección eugim@desarrolloweb.compara que publiquemos un artículo al respecto.• Si deseas preguntar dudas puedes dirigirte a la lista de correo que tenemos a este efecto.• También puedes participar en los foros para webmasters, donde se puede encontrar muchainformación acerca de un montón de tecnologías, servidores, programación, etc.Esperamos que la suerte te acompañe en tu diseño web.11
  14. 14. Capitulo 2Introducción al diseño webPrimeros pasos para aquellas personas que deseen crear su propia página web, desde el punto de vistadel diseñador. Motivación a seguir, programas a utilizar, etc.Prólogo a los primeros pasos en el diseño webHace unos días, durante una cena, mi padre me preguntó qué era exactamente eso de los chats, “o loque quiera que la gente hace cuando se escribe a través de Internet”. Es un hombre un tanto suspicazante las nuevas tecnologías, de manera que me vi obligado a lidiar en tres frentes a la vez, añadiendoademás el hecho de que la pregunta, planteada con intenciones solapadas, sonó como un aldabonazo yme desconcertó unos segundos. Las tres líneas de ataque de las que hablo eran las siguientes: una, laque me obligaba a describir de manera superficial las bases tecnológicas de los chats, ya que mi padrelos había comparado con sistemas de comunicación más convencionales, y yo debía establecer lasdistancias adecuadas. En segundo lugar, le expliqué los elementos de la práctica, como por ejemplo lainterfaz típica de un software de chat o las funciones básicas: flujo de texto en tiempo real y transmisiónde 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 ventajasfrente a otras formas de comunicación a distancia y le expliqué, de forma más general ya, que pese a supostura, Internet constituye en gran medida el sistema sanguíneo del futuro, aunque en el mejor de loscasos se trate arterias de fibra de carbono... De ahí pasamos a conversar acerca de cuestiones muchomás diversas en torno a la Red, pero esto ya no tenía importancia. Un tema u otro era un asunto deformas.En realidad, yo no siento mucha atracción por los chats genéricos, y si acaso opto por aplicaciones demensajería instantánea. Pero aquella conversación me reveló algunas de las bases que, después, meayudarían a responder a una usuaria en cierto foro de diseño web. Su pregunta era: “Aunque no sémucho de ordenadores, siempre estoy enganchada, y ahora quiero hacer mi propia página web.¿Por dónde empiezo?”Desde luego eso era toda una declaración de intenciones y no existía, ni existe, una respuesta infalible.El desarrollo web es un proceso creativo e íntimo, como lo es la navegación en Internet; ¿dónde voy sime conecto a la Red? Pues eso depende de ti. Es más: lo probable es que muy pronto ya ni siquieradejes que otros usuarios compartan y fisguen en tu historial. De la misma manera, una vez queempezamos a diseñar, 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í quehay un protocolo, un camino de baldosas que todos solemos seguir para llegar a nuestrodestino (naturalmente, el destino de cada usuario es distinto, y mientras más diferente eingenioso, mayor será el aprendizaje).Introducción al diseño webComo en el caso de los chats, podemos considerar que existen tres directrices elementales que sirven deguías. Una de ellas es el conocimiento tecnológico de Internet; estamos obligados a saber cómo funcionade manera general, desde las conexiones de ordenador hasta el valor de los servidores, pasando por laarbitraria congestión de las líneas telefónicas y, desde luego, considerando los diversos navegadores quehay en el mercado, además de prestar atención a la necesidad de instruirnos, aunque sea un poco, en ellenguaje HTML. Es muy difícil tomarse en serio a alguien que no tiene constancia de que, echando unvistazo al código fuente de una página, hallará etiquetas tan básicas como <head> y <body>. Estosconocimientos técnicos nos informan de nuestras posibilidades creativas; no basta con crear unapreciosa imagen y colgarla en nuestra página principal, si no sabemos que dicha imagen podría tardarun minuto en cargarse... Y a día de hoy ésa sí es una verdad infalible.En segundo lugar, estamos obligados a saber trabajar. No es más difícil que eso; si trabajas en modocódigo, debes dominar el HTML y, mejor aún, el HTML y otros lenguajes de uso común en la Red. Siempleas software de tipo WYSIWYG (lo que ves es lo que obtienes, en español), debes ser capaz deconocer las funciones de tu programa. Desde luego que detenerse a leer las instrucciones es aburrido, yprovoca lo que se conoce como “curva de aprendizaje”, pero es la única manera de llegar a entender ydesarrollar todas las posibilidades técnicas e imaginativas que te permiten las diferentes aplicaciones delmercado. 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 instruccióndiversos.12
  15. 15. Características especiales de la publicación webEn tercer lugar es fundamental saber que Internet no es una conferencia telefónica, un CD-ROM otelevisión a la carta. La Red sufre limitaciones propias y disfruta también de posibilidades más extensasy personales. Así, cuando diseñamos nuestros sitios web, debemos entender que el visitantes no esperalo mismo de nuestras páginas 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 muyinteresado en dichos animales, que en un momento del día debe elegir entre ver la vida de los elefantesen televisión, o buscar información en Internet a propósito de lo mismo. Nosotros tenemos la obligaciónde diseñar una página web al respecto. ¿Tomaríamos inspiración de la televisión? Quizás alguna, pero sisabemos lo que nos conviene, no pasaríamos de ahí. Por ejemplo, la tele se encuentra a un mínimo dedos metros del televidente; el monitor de la computadora, a unos palmos; el texto debe ser estrechopara no irritar al navegante. En la tele eso da igual. A la tele también le es indiferente mostrar cientosde tomas, cientos de perspectivas y cientos de sonidos emitidos por los elefantes africanos. El webapenas podría hacer eso, en condiciones estándar de conexiones de 56kb. Pero nosotros podemos crearenlaces a páginas que traten todas y cada una de las costumbres del enorme paquidermo. La televisión,no...La pregunta, sintetizada, es ésta: ¿qué damos al navegante para hacerle fiel a nuestros contenidosaunque tan sólo sea durante una sesión? Le damos personalización, le damos contenidos, le damoslibertad, le damos ingenio, le damos belleza, le damos oportunidades, le damos buen gusto, le damoscomodidad, le damos datos, le damos síntesis, le damos gráficos, le damos información detallada, ledamos esquemas, le damos conocimientos en tres palabras o sabiduría en textos de tres kilómetros, ledamos todo y más, le damos, en fin, lo que sea que busca. ¿Estamos en condiciones de hacer estascosas? Más nos vale.¿Algo más sobre el diseño web?Hay más cosas, cierto. El diseño enfocado a la Red suele ser hijo de la receptividad, como cualquier otrotipo de diseño. Más allá del aprendizaje técnico, que consiste en leer informaciones a veces aburridas yengorrosas, existe un modo complementario y muy excitante de aprender. Como decía, hablamos dereceptividad. De ver lo que otros muchos hacen con un talento que parece inagotable, y dejar que lo quevemos sedimente en nuestro trabajo; desde el diseño gráfico de los sitios web, desde las imágenes queincluyen y que a veces definen su identidad, hasta la manera en que escriben sus textos. Dejadme decirque pocas cosas me parecen tan divertidas y poco serias como un párrafo mal escrito. ¿Es quedesenvolvernos en un entorno digital nos da derecho a escribir mal? Sin duda que no. Los textosdeben ser sugestivos, esclarecedores o enigmáticos, pero siempre llamativos y eficientes.Hace poco visitaba un sitio web de cierta gran empresa y terminé preguntándome si la redacción habíacorrido a cargo de algún narrador extranjero. El texto era breve y directo, pero cometía fallosgramaticales tan evidentes que era lo que más llamaba la atención; incluso más que el bonito y“efervescente” diseño. Tengamos en cuenta que si nos consideran poco aplicados, no nos tomarán comouna alternativa razonable. (Y olvidemos la idea de que alguien nos pague por nuestro trabajo.)Miremos, analicemos, aprendamos de los demás. Es un proceso basado en la febril actividad de nuestroratón. Tendremos que hacer clic cientos, miles de veces, antes de que el efecto de los maestros del webdeje huella en nosotros. Para empezar podemos observar los estudios y casos de grandes empresas delmedio como Adobe y Macromedia, que incluyen secciones ex profeso muy interesantes; y tambiéntenemos la oportunidad de mirar las páginas de las agencias de publicidad y diseño; con frecuencia susmejores trabajos están hechos para sí mismos, y no para sus clientes.Herramientas para profesionales del diseño webDespués necesitas el software que interpretará tus deseos, inquietudes y talentos y les dará la formaque quieras —en el mejor de los casos—, de manera que puedas transferirlo todo a un servidor webabierto al público. Tampoco aquí existe acuerdo. Todo dependerá de si trabajas en modo html —1st Page2000 es una aplicación reconocida y gratuita— o WYSIWYG, cuyo espectro es también muy amplio,desde el popular y doméstico FrontPage de Microsoft, hasta los profesionales y valiosos DreamWeaver oGoLive!, pasando por los accesibles pero potentes Namo Web Editor o NetObjects Fusion...Tampoco viene mal disponer de algún programa de diseño gráfico. De una manera elemental podemosdecir que los hay de dos tipos más o menos puros, y un tercer tipo mixto. En uno de los casos se tratade aplicaciones de dibujo vectorial, es decir, aquellas que generan gráficos desde cero medianteherramientas de trazado geométrico, fundamentalmente, pero también a mano alzada; dicho de unaforma más llana, hablamos de dibujos de líneas y curvas. Pero no nos confundamos. Estos programasson madre de muchas de las mejores ilustraciones que vemos tanto en la Red como en publicidadimpresa y en los envases de productos cotidianos. Actualmente se asume que Adobe Illustrator es el13
  16. 16. mejor en este campo; sin embargo, compite con el clásico indiscutible CorelDraw, además de conMacromedia Freehand. Y, no obstante, existen alternativas baratas y eficientes, bien criticadas yadmiradas en los medios, como ZonerDraw 4 o Xara.El segundo de los casos cuando hablamos de gráficos es el retoque fotográfico; o lo que es lo mismo, eltrabajo de diseño visual sobre imágenes que normalmente combinan fotografías reales con objetosdiseñados y efectos visuales. También Adobe y Corel se disputan el pastel, de momento favorable alprimero. Sus estrellas son Photo Shop y Photo Paint. Las alternativas más accesibles suelen ser PaintSho Pro de Jasc y Ulead Photo Impact.Una tercera opción es el software que combina retoque fotográfico y dibujo vectorial; cada vez más, éstaes una posibilidad que traen de serie todos los grandes programas, de manera que no hace falta cambiarde aplicación para mezclar los modos de trabajo gráfico.Conclusión a la introducción al diseño web¿Existe vida más allá de los gráficos estáticos?En realidad sí. La opción más común es Flash de Macromedia, que permite crear películas realmentecomplejas e interactivas combinando ilustraciones embebidas, gráficos vectoriales, sonidos yActionScript, el lenguaje de comandos específico de Flash, amén de otras posibilidades muy bienconocidas. Adicionalmente está disponible el formato vectorial SVG.ConclusiónEn conclusión, el trabajo del desarrollador web (esa especie de alquimista obligado a dominar ycombinar variables tan dispares, y a veces de apariencia incompatible, como la usabilidad y el atractivode cara al usuario, y la efectividad técnica de cara a la empresa que paga sus honorarios, como porejemplo en el caso de tiendas on-line), este trabajo, decía, es un proceso largo que requiere un enormegrado de instrucción y aprendizaje técnico, pero también generosas dosis de intuición y anticipación. Afin de cuentas, la Red muta y crece cada poco tiempo, y no podemos quedar atrás. Buena suerte.14
  17. 17. Capitulo 3Manual de HTMLHTML es el lenguaje utilizado como base para crear las páginas web. Con este manual puedes aprendera utilizarlo con toda su potencia.Prólogo al manual de HTMLBienvenidos al manual de HTML de DesarrolloWeb. A través de todos estos capítulos vamos adescubrir el lenguaje utilizado para la creación de páginas web: el Hyper Text Markup Language, másconocido como HTML.Puede que en un principio, el hecho de hablar de un lenguaje informático pare los pies a más de uno. Noos asustéis, el HTML no deja de ser más que una forma un tanto peculiar de dar formato a los textos eimágenes que pretendemos ver por medio de un navegador.Antes de entrar en materia, lo cual haremos de una forma directa y practica, os recomendamosfervorosamente la lectura previa de nuestro manual Publicar en Internet. A partir de esta guía,aprenderéis los conceptos más básicos necesarios para creación de un sitio web. También os permitiráacceder a este manual con unos conocimientos de base sobre HTML imprescindibles y os dejara bienclaro lo que su conocimiento aporta con respecto al simple uso de editores de HTML.El público al que va enfocado este manual es a todos aquellos que, con conocimientos mínimos deinformática, desean hacer mundialmente público un mensaje, una idea o una información usando paraello el medio más práctico, económico y actual: Internet.Lo que necesitáis como base para llevar a buen término el aprendizaje (aparte de leer el manual Publicaren Internet) es:• Saber escribir con un teclado• Saber manejar un ratón• Tener ganas de aprenderLo que obtendréis después de haber pasado por estos capítulos:• Capacidad para crear y publicar vuestro propio sitio web con un mínimo de calidad• Conocimientos de todo tipo sobre las tecnologías y herramientas empleadas en el ámbito de laRed• Posiblemente una afición que puede convertirse en pasión y terminar, en algunos casos, siendoun vicio o un oficio.Introducción al HTMLHTML es el lenguaje con el que se escriben las páginas web. Las páginas web pueden ser vistaspor el usuario mediante un tipo de aplicación llamada navegador. Podemos decir por lo tanto que elHTML es el lenguaje usado por los navegadores para mostrar las páginas webs al usuario, siendo hoy endía la interface más extendida en la red.Este lenguaje nos permite aglutinar textos, sonidos e imágenes y combinarlos a nuestro gusto. Además,y es aquí donde reside su ventaja con respecto a libros o revistas, el HTML nos permite la introducciónde referencias a otras páginas 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 áreade ocio con carácter multimedia, de modo que, el HTML se creó sin dar respuesta a todos los posiblesusos que se le iba a dar y a todos los colectivos de gente que lo utilizarían en un futuro. Sin embargo,pese a esta deficiente planificación, si que se han ido incorporando modificaciones con el tiempo, estosson los estándares del HTML. Numerosos estándares se han presentado ya. El HTML 4.01 es el últimoestándar a septiembre de 2001.Esta evolución tan anárquica del HTML ha supuesto toda una seria de inconvenientes y deficiencias quehan debido ser superados con la introducción de otras tecnologías accesorias capaces de organizar,optimizar y automatizar el funcionamiento de las webs. Ejemplos que pueden sonaros son las CSS,JavaScript u otros. Veremos más adelante en qué consisten algunas de ellas.15
  18. 18. Otros de los problemás que han acompañado al HTML es la diversidad de navegadores presentes en elmercado los cuales no son capaces de interpretar un mismo código de una manera unificada. Esto obligaal webmáster a, una vez creada su página, comprobar que esta puede ser leída satisfactoriamente portodos los navegadores, o al menos, los más utilizados.Además del navegador necesario para ver los resultados de nuestro trabajo, necesitamos evidentementeotra herramienta capaz de crear la página en si. Un archivo HTML (una página) no es más 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 quetener cuidado con algunos editores más complejos como Wordpad o Microsoft Word, pues colocan supropio código especial al guardar las páginas y HTML es únicamente texto plano, con lo que podremostener problemas.Existen otro tipo de editores específicos para la creación de páginas web los cuales ofrecen muchasfacilidades que nos permiten aumentar nuestra productividad. No obstante, es aconsejable en unprincipio utilizar una herramienta lo más sencilla posible para poder prestar la máxima atención anuestro código y familiarizarnos lo antes posible con él. Siempre tendremos tiempo más delante depasarnos a editores más versátiles con la consiguiente ganancia de tiempo.Para tener más claro todo el tema de editores y los tipos que existen, visita los artículos:• Editores de HTML.• Bloc de notas.• También puedes acceder a descripciones editores más complejos que el Block de Notas, peromás potentes como Homesite o UltraEdit.Es importante tener claro todo ello puesto que en función de vuestros objetivos puede que, más queaprender HTML, resulte más interesante aprender el uso de una aplicación para la creación de páginas.Así pues, una página es un archivo donde está contenido el código HTML en forma de texto. Estosarchivos tienen extensión .html o .htm (es indiferente cuál utilizar). De modo que cuando programemosen HTML lo haremos con un editor de textos y guardaremos nuestros trabajos con extensión .html, porejemplo mipágina.htmlConsejo: Utiliza siempre la misma extensión en tus archivos HTML. Esoevitará que te confundas al escribir los nombres de tus archivos unas vecescon .htm y otras con .html. Si trabajas con un equipo en un proyecto todavíamás importante que os pongáis todos de acuerdo en la extensión.Sintaxis del HTMLEl HTML es un lenguaje que basa su sintaxis en un elemento de base al que llamamos etiqueta. Laetiqueta presenta frecuentemente dos partes:Una apertura de forma general <etiqueta>Un cierre de tipo </ etiqueta>Todo lo incluido en el interior de esa etiqueta sufrirá las modificaciones que caracterizan a esta etiqueta.Así por ejemplo:Las etiquetas <b> y </b> definen un texto en negrita. Si en nuestro documento HTMLescribimos una frase con el siguiente código:<b>Esto esta en negrita</b>El resultado Será:Esto esta en negritaLas etiquetas <p> y </p> definen un párrafo. Si en nuestro documento HTML escribiéramos:<p>Hola, estamos en el párrafo 1</p><p>Ahora hemos cambiado de párrafo</p>16
  19. 19. El resultado sería:Hola, estamos en el párrafo 1Ahora hemos cambiado de párrafoPartes de un documento HTMLAdemás de todo esto, un documento HTML ha de estar delimitado por la etiqueta <html> y</html>. Dentro de este documento, podemos asimismo distinguir dos partes principales:El encabezado, delimitado por <head> y </head> donde colocaremos etiquetas de índoleinformativo como por ejemplo el titulo de nuestra página.El cuerpo, flanqueado por las etiquetas <body> y </body>, que será donde colocaremos nuestrotexto e imágenes delimitados a su vez por otras etiquetas como las que hemos visto.El resultado es un documento con la siguiente estructura:<html><head>Etiquetas y contenidos del encabezadoDatos que no aparecen en nuestra página pero que son importantes para catalogarla: Titulo, palabrasclave,...</head><body>Etiquetas y contenidos del cuerpoParte del documento que será mostrada por el navegador: Texto e imágenes</body></html>Las mayúsculas o minúsculas son indiferentes al escribir etiquetasA notar que las etiquetas pueden ser escritas con cualquier tipo de combinación de mayúsculas yminúsculas. <html>, <HTML> o <HtMl> son la misma etiqueta. Resulta sin embargo aconsejableacostumbrarse a escribirlas en minúscula ya que otras tecnologías que pueden convivir con nuestroHTML (XML por ejemplo) no son tan permisivas y nunca viene mal coger buenas costumbres desde elprincipio para evitar fallos triviales en un futuro.Tu primera páginaPodemos ya con estos conocimientos, y alguno que otro más, crear nuestra primera página. Para ello,abre tu editor de textos y copia y pega el siguiente texto en un nuevo documento.<html><head><title>Cocina Para Todos</title></head><body><p><b>Bienvenido,</b></p><p>Estás en la página <b>Comida para Todos</b>.</p><p>Aquí aprenderás recetas fáciles y deliciosas.</p></body></html>Ahora guarda ese archivo con extensión .html o .htm en tu disco duro. Para ello accedemos al menúArchivo y seleccionamos la opción Guardar como. En la ventana elegimos el directorio donde deseamosguardarlo y colocaremos su nombre, por ejemplo mi_pagina.htmlConsejo: Utiliza nombres en tus archivos que tengan algunas normas básicas para ahorrartedisgustos y lios.17
  20. 20. Nuestro consejo es que no utilices acentos ni espacios ni otros caracteres raros. También teayudará escribir siempre las letras en minúsculas.Esto no quiere decir que debes hacer nombres de archivos cortos, es mejor hacerlosdescriptivos para que te aclaren lo que hay dentro. Algún caracter como el guión "-" o elguión bajo "_" te puede ayudar a separar las palabras. Por ejemplo quienes_somos.htmlCon el documento HTML creado, podemos ver el resultado obtenido a partir de un navegador. Esconveniente, llegado a este punto, hacer hincapié en el hecho de que no todos los navegadores sonidénticos. Desgraciadamente, los resultados de nuestro código pueden cambiar de uno a otro por lo queresulta aconsejable visualizar la página en varios. Generalmente se usan Internet Explorer y Netscapecomo referencias ya que son los más extendidos.A decir verdad, en el momento que estas líneas son escritas, Internet Explorer acapara la inmensamayoría de usuarios (90% más o menos) y Netscape esta relegado a un segundo plano. Esto no quieredecir que lo debemos dejar totalmente de lado ya que el 10% de visitas que puede proporcionarnospuede resultar muy importante para nosotros. Por otra parte, parece que se ha hecho publica laintención de Netscape de desviar un poco su temática de negocios hacia otros derroteros y abandonaresta 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 denuestra labor abriendo dicha página con un navegador. Para hacerlo, la forma resulta diferentedependiendo del navegador:Si estamos empleando el Explorer, hemos de ir al barra de menú, elegir Archivo y seleccionar Abrir. Unaventana se abrirá. Pulsamos sobre el botón Examinar y accederemos a una ventana a partir de la cualpodremos movernos por el interior de nuestro disco duro hasta dar con el archivo que deseamos abrir.La cosa no resulta más difícil para Netscape. En este caso, nos dirigimos también a la barra de menúprincipal y elegimos File y a continuación Open File. La misma ventana de búsqueda nos permitiráescudriñar el contenido de nuestro PC hasta dar con el archivo buscado.Nota: También puedes abrir el archivo si accedes al directorio donde lo guardaste. En élpodrás encontrar tu archivo HTML y verás que tiene como icono el logotipo de Netscape o elde Internet Explorer. Para abrirlo simplemente hacemos un doble click sobre él.Una vez abierto el archivo podréis ver vuestra primera página web. Algo sencillita pero por algo seempieza. Ya veréis como en poco tiempo seremos capaces de mejorar sensiblemente.Fijaos en la parte superior izquierda de la ventana del navegador. Podréis comprobar la presencia deltexto delimitado por la etiqueta <title>. Esta es una de las funciones de esta etiqueta, cuyo principalcometido es el de servir de referencia en los motores de búsqueda como Altavista o Yahoo.Por otro lado, los elementos que colocamos entre la etiqueta <body> y </body> se pueden ver en elespacio reservado para el cuerpo de la página.Si ahora hacéis click con el botón derecho sobre la página y elegís Ver código fuente (o View page18
  21. 21. source) veréis como en una ventana accesoria aparece el código de nuestra página. Este recurso es deextremada importancia ya que nos permite ver el tipo de técnicas empleadas por otros para laconfección de sus páginas.Con todo esto asimilado ya estamos en condiciones de adentrarnos un poco más en la descripción dealgunas de las etiquetas más empleadas del HTML.Posible problema: Al utilizar el Block de Notas en Windows en ocasiones, aunque le digamosque es un archivo .html, el documento se guarda como si fuera un texto y no una página web.Lo que está pasando es que el Block de Notas tiene predeterminado guardar sus archivos conextensión .txt y en realidad lo que está guardando en el disco duro es mi_pagina.html.txtPara conseguir tener el control de las extensiones en el block de notas y en Windows engeneral podemos acceder a MI-PC y en el menú de Ver seleccionáis "Opciones de carpeta". Enla ventana que sale pulsamos en la solapa "Ver" y nos permite deseleccionar una caja deselección 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 extensión del archivo con el que estamostrabajando y que el Block de Notas nos haga caso cuando le indicamos que grabe el archivocon otra extensión que no sea .txtFormato de párrafos en HTMLEn los capítulos anteriores hemos presentado a titulo de ejemplo algunas etiquetas que permiten darformato a nuestro texto. En este capitulo veremos con más detalle las más ampliamente utilizadas yejemplificaremos algunas de ellas posteriormente.Formatear un texto pasa por tareas tan evidentes como definir los párrafos, justificarlos, introducirviñetas, numeraciones o bien poner en negrita, itálica...Hemos visto que para definir los párrafos nos servimos de la etiqueta <p> que introduce un salto y dejauna línea en blanco antes de continuar con el resto del documento.Podemos también usar la etiqueta <br>, de la cual no existe su cierre correspondiente (</br>), pararealizar un simple retorno de carro con lo que no dejamos una línea en blanco sino que solo cambiamosde línea.Nota: Existen otras etiquetas que no tienen su correspondiente de cierre, como <img> paralas imágenes, las veremos más adelante. Esto ocurre porque un salto de línea o una imagenno empiezan y acaban más adelante sino que sólo tienen presencia en un lugar puntual.Podéis comprobar que cambiar de línea en nuestro documento HTML sin introducir alguna de estas uotras etiquetas no implica en absoluto un cambio de línea en la página visualizada. En realidad elnavegador introducirá el texto y no cambiara de línea a no ser que esta llegue a su fin o bien loespecifiquemos con la etiqueta correspondiente.Los párrafos delimitados por etiquetas <p> pueden ser fácilmente justificados a la izquierda, centro oderecha especificando dicha justificación en el interior de la etiqueta por medio de un atributo align. Unatributo no es más que un parámetro incluido en el interior de la etiqueta que ayuda a definir elfuncionamiento de la etiqueta de una forma más personal. Veremos a lo largo de este manual cantidadde atributos muy útiles para todo tipo de etiquetas.Así, si deseásemos introducir un texto alineado a la izquierda escribiríamos:<p align="left">Texto alineado a la izquierda</p>El resultado seria:Texto alineado a la izquierdaPara una justificación al centro:<p align="center">Texto alineado al centro</p>que daría:19
  22. 22. Texto alineado al centroPara justificar a la derecha:<p align="right">Texto alineado a la derecha</p>cuyo efecto seria:Texto alineado a la derechaComo veis, en cada caso el atributo align toma determinados valores que son escritos entre comillas. Enalgunas ocasiones necesitamos especificar algunos atributos para el correcto funcionamiento de laetiqueta. 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 indicamosentre comillas también funcionará en la mayoría de los casos. Sin embargo, es aconsejableque pongamos siempre las comillas para acostumbrarnos a utilizarlas, por dar homogeneidada nuestros códigos y para evitar errores futuros en sistemas más quisquillosos.El atributo align no es exclusivo de la etiqueta <p>. Otras etiquetas muy comunes, que veremos másadelante, entre las cuales se introducen texto o imágenes, suelen hacer uso de este atributo de unaforma habitual.Imaginemos un texto relativamente largo donde todos los párrafos están alineados a la izquierda (porejemplo). Una forma de simplificar nuestro código y de evitar introducir continuamente el atributo alignsobre cada una de nuestras etiquetas es utilizando la etiqueta <div>.Esta etiqueta por si sola no sirve para nada. Tiene que estar acompañada del atributo align y lo que nospermite es alinear cualquier elemento (párrafo o imagen) de la manera que nosotros deseemos.Así, el código:<p align="left">Parrafo1</p><p align="left"> Parrafo3</p><p align="left"> Parrafo2</p>es equivalente a:<div align="left"><p>Parrafo1</p><p>Parrafo2</p><p>Parrafo3</p></div>Como hemos visto, la etiqueta <div> marca divisiones en las que definimos un mismo tipo de alineado.Ejemplo práctico:Para practicar un poco lo que acabamos de ver vamos a proponer un ejercicio que podéis resolver envuestros ordenadores. Simplemente queremos construir una página que tenga, por este orden:2 Párrafos centrados3 Párrafos alineados a la derechaUn salto de línea triple1 párrafo alineado a la izquierdaEncabezadosExisten otras etiquetas para definir párrafos especiales, formateados como títulos. Son los encabezadoso Header en inglés. Como decimos, son etiquetas que formatean el texto como un titular, para lo cualasignan un tamaño mayor de letra y colocan el texto en negrita.Hay varios tipos de encabezados, que se diferencian en el tamaño de la letra que utilizan. La etiqueta enconcreto es la <h1>, para los encabezados más grandes, <h2> para los de segundo nivel y así hasta20
  23. 23. <h6> que es el encabezado más pequeño.Los encabezados implican también una separación en párrafos, así que todo lo que escribamos dentro de<h1> y </h1> (o cualquier otro encabezado) se colocará en un párrafo independiente.Podemos ver cómo se presentan algunos encabezados a continuación.<h1>Encabezado de nivel 1</h1>Se verá de esta manera en la página:Encabezado de nivel 1Los encabezados, como otras etiquetas de HTML, soportan el atributo align. Vemos un ejemplo deencabezado de nivel 2 alineado al centro.<h2 align="center">Encabezado de nivel 2</h2>Se verá de esta manera en la página:Encabezado de nivel 2Otro ejercicio interesante es construir una página web que contenga todos los encabezados posibles. Sepuede ver a continuación.<html><head><title>Todos los encabezados</title></head><body><h1>Encabezado de nivel 1</h1><h2>Encabezado de nivel 1</h2><h3>Encabezado de nivel 1</h3><h4>Encabezado de nivel 1</h4><h5>Encabezado de nivel 1</h5><h6>Encabezado de nivel 1</h6></body></html>Consejo: No debemos utilizar las etiquetas de encabezado para formatear el texto, es decir,si queremos colocar un tipo de letra más grande y en negrita debemos utilizar las etiquetasque existen para ello (que veremos en seguida). Los encabezados son para colocar titularesen páginas web y es el navegador el responsable de formatear el texto de manera queparezca un titular. Cada navegador, pues, puede formatear el texto a su gusto con tal de queparezca un titular.Formateando el textoAdemás de todo lo relativo a la organización de los párrafos, uno de los aspectos primordiales delformateo de un texto es el de la propia letra. Resulta muy común y práctico presentar texto resaltado ennegrita, itálica y otros. Paralelamente el uso de índices, subíndices resulta vital para la publicación detextos cient&iaacute;ficos. Todo esto y mucho más es posible por medio del HTML a partir de multitudde etiquetas entre las cuales vamos a destacar algunas.NegritaPodemos escribir texto en negrita incluyéndolo dentro de las etiquetas <b> y </b> (bold). Esta mismatarea es desempeñada por <strong> y </strong> siendo ambas equivalentes. Nosotros nos inclinamospor la primeras por simple razon de esfuerzo.Escribiendo un código de este tipo:<b>Texto en negrita</b>21
  24. 24. Obtenemos este resultado:Texto en negritaNota: ¿Qué diferencia hay entre <b> y <strong>?Aunque las dos etiquetas hacen el mismo efecto, tienen una peculiaridad que las hacedistintas. La etiqueta <b> indica negrita, mientras que la etiqueta <strong> indica que sedebe escribir resaltado. El HTML lo interpretan los navegadores según su criterio, es por esoque las páginas se pueden ver de distinta manera en unos browsers y en otros. La etiqueta<H1> quiere decir "encabezado de nivel 1", es el navegador el responsable de formatear eltexto de manera que parezca un encabezado de primer nivel. En la práctica los encabezadosde Internet Explorer y Netscape son muy parecidos (tamaño de letra grande y en negrita),pero otro navegador podría colocar los encabezados con subrayado si le pareciese oportuno.La diferencia entre <b> y <strong> se podrá entender ahora. Mientras que <b> significasimplemente negrita y todos los navegadores la interpretarán como negrita, <strong> es unaetiqueta que significa que se tiene que resaltar fuertemente el texto y cada navegador es elresponsable de resaltarlo como desee. En la práctica <strong> coloca el texto en negrilla,pero podría ser que un navegador decidiese resaltar colocando negrilla, subrayado y color rojoen el texto.ItálicaTambién en este caso existen dos posibilidades, una corta: <i> e </i> (italic) y otra un poco más larga:<em> y </em>. En este manual, y en la mayoría de las páginas que veréis por ahí, os encontraréis conla primera forma sin duda más sencilla a escribir y a acordarse.He aquí un ejemplo de texto en itálica:<i>Texto en itálica</i>Que da el siguiente efecto:Texto en itálicaSubrayadoEl HTML nos propone también para el subrayado el par de etiquetas: <u> y </u> (underlined). Sinembargo, el uso de subrayados ha de ser aplicado con mucha precaución dado que los enlaceshipertexto van, a no ser que se indique lo contrario, subrayados con lo que podemos confundir al lectory apartarlo del verdadero interés de nuestro texto.Subíndices y supraíndicesEste tipo de formato resulta de extremada utilidad para textos científicos. Las etiquetas empleadas son:<sup> y </sup> para los supraíndices<sub> y </sub> para los subíndicesAquí tenéis un ejemplo:La <sup>13</sup>CC<sub>3</sub>H<sub>4</sub>ClNOS es un heterociclo alergeno enriquecidoEl resultado:La 13CC3H4ClNOS es un heterociclo alergeno enriquecidoAnidar etiquetasTodas estas etiquetas y por supuesto el resto de las vistas y que veremos más adelante pueden seranidadas unas dentro de otras de manera a conseguir resultados diferentes. Así, podemos sin ningúnproblema crear texto en negrita e itálica embebiendo una etiqueta dentro de la otra:<b>Esto sólo está en negrita <i>y esto en negrita e itálica</i></b>Esto nos daria:Esto sólo estáa en negrita y esto en negrita e itálica22
  25. 25. Consejo: Cuando anides etiquetas HTML hazlo correctamente. Nos referimos a que si abresetiquetas dentro de otra más principal, antes de cerrar la etiqueta principal cierres lasetiquetas que hayas abierto dentro de ella.Debemos evitar códigos como el siguiente:<b>Esto está en negrita e <i>itálica</b></i>En favor de códigos con etiquetas correctamente anidadas:<b>Esto está en negrita e <i>itálica</i></b>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 elfuturo nuestras páginas no funcionen correcamente.2. A los navegadores les cuesta mucho tiempo de procesamiento resolver este tipo deerrores, incluso más que construir la propia página y debemos evitarles que sufranpor una mala codificación.Color, tamaño y tipo de letraA pesar de que por razones de homogeneidad y sencillez de codigo este tipo de formatos soncontrolados actualmente por hojas de estilo en cascada (de las cuales ya tendremos tiempo de hablar),existe una forma clásica y directa de definir color tamaño y tipo de letra de un texto determinado.Esto se hace a partir de la etiqueta <font> y su cierre correspondiente. Dentro de esta etiquetadeberemos especificar los atributos correspondientes a cada uno de estos parámetros que deseamosdefinir. A continuación os comentamos los atributos principales de esta etiqueta:Atributo faceDefine el tipo de letra. Este atributo es interpretado por versiones de Netscape a partir de la 3 y de MSIE3 o superiores. Otros navegadores las ignoran completamente y muestran el texto con la fuente queutilizan.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 delque 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 deletra separados por comas. En este caso el navegador comprobará que dispone del primer tipoenumerado y si no es así, pasará al segundo y así sucesivamente hasta encontrar un tipo que posea obien acabar la lista y poner la fuente por defecto. Veamos un ejemplo.<font face="Comic Sans MS,arial,verdana">Este texto tiene otra tipografía</font>Que se visualizaría así en una página web.Este texto tiene otra tipografíaNota: Aquí tenemos un ejemplo de atributo cuyo valor debe estar limitado por comillas (").Habíamos 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 comillasface=Comic Sans MS,arial,verdanase entendería que face=Comic, pero no se tendría en cuenta todo lo que sigue, porque HTMLno lo asociaría al valor del atributo. En este caso HTML pensaría que las siguientes palabras(después del espacio) son otros atributos, pero como no los conoce como atributossimplemente los desestimará.Atributo sizeDefine el tamaño de la letra. Este tamaño puede ser absoluto o relativo.23
  26. 26. Si hablamos en términos absolutos, existen 7 niveles de tamaño distintos numerados de 1 a 7 por ordencreciente. Elegiremos por tanto un valor size="1" para la letra más pequeña o size="7" para la másgrande.<font size=4>Este texto es más grande</font>Que se visualizaría así en una página web.Este texto es más grandePodemos asimismo modificar el tamaño de nuestra letra con respecto al del texto mostradoprecedentemente definiendo el número de niveles que queremos subir o bajar en esta escala detamaños por medio de un signo + o -. De este modo, si definimos nuestro atributo como size="+1" loque queremos decir es que aumentamos de un nivel el tamaño de la letra. Si estabamos escribiendopreviamente en 3, pasaremos automáticamente a 4.Los tamaños reales que veremos en pantalla dependerán de la definición y del tamaño de fuente elegidopor el usuario en el navegador. Este tamaño de fuente puede ser definido en el Explorer yendo al menusuperior, Ver/Tamaño de la fuente. En Netscape elegiremos View/Text Size. Esta flexibilidad puede enmás de una ocasión resultarnos embarazosa ya que en muchos casos desearemos que el tamaño deltexto permanezca constante para que éste quepa en un determinado espacio. Veremos en su momentoque esta prefijación del tamaño puede ser llevada a cabo por las hojas de estilo en cascada.Atributo colorEl color del texto puede ser definido mediante el atributo color. Cada color es a su vez definido por unnúmero hexadecimal que esta compuesto a su vez de tres partes. Cada una de estas partes representala contribución del rojo, verde y azul al color en cuestión.Podéis entender cómo funciona esta numeración y cuáles son los colores que resultan más compatibles apartir de este artículo: Los colores y HTML.Por otra parte, es posible definir de una manera inmediata algunos de los colores más frecuentementeusados para los que se ha creado un nombre más memotécnico:Nombre ColorAquaBlackBlueFuchsiaGrayGreenLimeMaroonNavyOlivePurpleRedSilverTealWhiteYellow<font color="red">Este texto está en rojo</font>Que se visualizaría así en una página web.Este texto está en rojoCon todo esto estamos ya en disposicion de crear un texto formateado de una forma realmenteelaborada.24
  27. 27. Pongamos pues en practica todo lo que hemos aprendido en estos capitulos haciendo un ejercicioconsistente en una página que tenga las siguientes características:• Un titular con encabezado de nivel 1, en itálica y color verde oliva.• Un segundo titular con encabezado de nivel 2, también de color verde oliva.• Todo el texto de la página 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 lafuente "Arial".Atributos para páginasLas páginas HTML pueden construirse con variedad de atributos que le pueden dar un aspecto a lapágina muy personalizado. Podemos definir atributos como el color de fondo, el color del texto o de losenlaces. Estos atributos se definen en la etiqueta <body> y, como decíamos son generales a toda lapágina.Lo mejor para explicar su funcionamiento es verlos uno por uno.Atributos para fondosbgcolor: especificamos un color de fondo para la página. En el capítulo anterior y en el taller de loscolores y HTML hemos aprendido a construir cualquier color, con su nombre o su valor RGB. El color defondo que podemos asignar con bgcolor es un color plano, es decir el mismo para toda la superficie delnavegador.background: sirve para indicar la colocación de una imagen como fondo de la página. La imagen secoloca haciendo un mosaico, es decir, se repite muchas veces hasta ocupar todo el espacio del fondo dela página. En capítulos más adelante veremos como se insertan imágenes con HTML y los tipos deimágenes que se pueden utilizar.Ejemplo de fondoVamos a colocar esta imagen como fondo en la página.La imagen se llama fondo.jpg y suponemos que se encuentra en el mismo directorio que la página. Eneste caso se colocaría la siguiente etiqueta <body><body background="fondo.jpg">Se puede ver el efecto de colocar ese fondo en una página a parte.Consejo: siempre que coloquemos una imagen de fondo, debemos poner también un color defondo cercano al color de la imagen.Esto se debe a que, al colocar una imagen de fondo, el texto de la página debemos colocarloen un color que contraste suficientemente con dicho fondo. Si el visitante no puede ver elfondo por cualquier cuestión (Por ejemplo tener deshabilitada la carga de imágenes) puedeque 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 queponer un texto claro para que se pueda leer. Si el visitante que accede a la página no ve laimagen de fondo, le saldrá el fondo por defecto, que generalmente es blanco, de modo que altener un texto con color claro sobre un fondo blanco, nos pasará que no podremos leer eltexto convenientemente.Ocurre parecido cuando se está cargando la página. Si todavía no ha llegado a nuestrosistema la imagen de fondo, se verá el fondo que hayamos seleccionado con bgcolor y esinteresante que sea parecido al color de la imagen para que se pueda leer el texto mientras secarga la imagen de fondo.Color del textotext: este atributo sirve para asignar el color del texto de la página. Por defecto es el negro.25
  28. 28. Además del color del texto, tenemos tres atributos para asignar el color de los enlaces de la página. Yadebemos saber que los enlaces deben diferenciarse del resto del texto de la página para que los usuariospuedan identificarlos fácilmente. Para ello suelen aparecer subrayados y con un color más vivo que eltexto. 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 quetendrán los enlaces que ya hemos visitado. Por defecto su color es morado. Este color debería ser unpoco 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. Aveces es difícil darse cuenta cuando un enlace está activo porque en el momento en el que se activa esporque lo estamos pulsando y en ese caso el navegador abandonará la página rápidamente y nopodremos ver el enlace activo más que por unos instantes mínimos.Ejemplo de color del textoVamos a ver una página donde el color de fondo sea negro, y los colores del texto y los enlaces seanclaros. Pondremos el color de texto balnco y los enlaces amarillos, más resaltados los que no esténvisitados y menos resaltados lo que ya están visitados. Para ello escribiríamos la etiqueta body así:<body bgcolor="#000000" text="#ffffff" link="#ffff33" alink="#ffffcc" alink="ffff00">El efecto se puede ver en una página a parte.MárgenesCon otros atributos de la etiqueta <body> se pueden asignan espacios de margen en las páginas, lo quees muy útil para eliminar los márgenes en blanco que aparecen a los lados, arriba y debajo de la página.Estos atributos son distintos para Internet Explorer y para Netscape Navigator, por lo que debemosutilizarlos todos si queremos que todos los navegadores los interpreten perfectamente.leftmargin: para indicar el margen a los lados de la página. Válido para iexplorer.topmargin: para indicar el margen arriba y debajo de la página. 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 artículo sobre la utilización de estos atributos para hacer diseños avanzados con tablas endistintas definiciones de pantalla, que puede ser interesante de leer.Un ejemplo de página sin margen es la propia página de DesarrolloWeb.com, que estás visitandoactualmente. (Por lo menos a la hora de escribir este artículo) Además, vamos a ver otra página sinmárgenes, por si alguien necesita ver el ejemplo en estas líneas.<body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0 bgcolor="ffffff"><table width=100% bgcolor=ff6666><tr><td><h1>Hola amigos</h1><br><br>Gracias por visitarme!</td></tr></table></body>Esta página tiene el fondo blanco y dentro una tabla con el fondo rojo. En la página podremos ver que latabla ocupa el espacio en la página sin dejar sitio para ningún tipo de margen.Listas ILas posibilidades que nos ofrece el HTML en cuestión de tratamiento de texto son realmente notables.No se limitan a lo visto hasta ahora, sino que van más lejos todavía. Varios ejemplos de ello son laslistas, que sirven para enumerar y definir elementos, los textos preformateados y las cabeceras o títulos.Las listas son utilizadas para citar, numerar y definir objetos. También son utilizadas corrientementepara desplazar el comienzo de línea hacia la derecha.Podemos distinguir tres tipos de listas:26
  29. 29. • Listas desordenadas• Listas ordenadas• Listas de definiciónLas veremos detenidamente una a una.Listas desordenadasSon delimitadas por las etiquetas <ul> y </ul> (unordered list). Cada uno de los elementos de la listaes citado por medio de una etiqueta <li> (sin cierre, aunque no hay inconveniente en colocarlo). La cosaqueda así:<p>Países del mundo</p><ul><li>Argentina<li>Perú<li>Chile</ul>El resultado:Países del mundo• Argentina• Perú• ChilePodemos definir el tipo de viñeta empleada para cada elemento. Para ello debemos especificarlo pormedio del atributo type incluido dentro de la etiqueta de apertura <ul>, si queremos que el estilo seaválido para toda la lista,o dentro le la etiqueta <li> si queremos hacerlo específico de un solo elemento.La sintaxis es del siguiente tipo:<ul type="tipo de viñeta">donde tipo de viñeta puede ser uno de los siguientes:circlediscsquareNota: En algunos navegadores no funciona la opción de cambiar el tipo de viñeta a mostrar ypor mucho que nos empeñemos, siempre saldrá el redondel negro.En caso de que no funcione siempre podemos construir la lista a mano con la viñeta quequeramos utilizando las tablas de HTML. Veremos más adelante cómo trabajar con tablas.Vamos a ver un ejemplo de lista con un cuadrado en lugar de un redondel, y en el último elementocolocaremos un círculo. Para ello vamos a colocar el atributo type en la etiqueta <ul>, con lo queafectará a todos los elementos de la lista.<ul type="square"><li>Elemento 1<li>Elemento 2<li>Elemento 3<li type="circle">Elemento 4</ul>Que tiene como resultadoElemento 1Elemento 2Elemento 3o Elemento 427
  30. 30. Listas IIContinuamos estudiando las listas de HTML, con las que crear estructuras atractivas para presentar lainformación.Listas ordenadasEn este caso usaremos las etiquetas <ol> (ordered list) y su cierre. Cada elemento sera igualmenteprecedido de su etiqueta <li>.Pongamos un ejemplo:<p>Reglas de comportamiento en el trabajo</p><ol><li>El jefe siempre tiene la razón<li>En caso de duda aplicar regla 1</ol>El resultado es:Reglas de comportamiento en el trabajo1. El jefe siempre tiene la razón2. En caso de duda aplicar regla 1Del mismo modo que para las listas desordenadas, las listas ordenadas ofrecen la posibilidad demodificar el estilo. En concreto nos es posible especificar el tipo de numeración empleado eligiendo entrenúmeros (1, 2, 3...), letras (a, b, c...) y sus mayúsculas (A, B, C,...) y números romanos en susversiones mayúsculas (I, II, III,...) y minúsculas (i, ii, iii,...).Para realizar dicha selección hemos de utilizar, como para el caso precedente, el atributo type, el cualserá situado dentro de la etiqueta <ol>. Los valores que puede tomar el atributo en este caso son:1 Para ordenar por númerosa Por letras del alfabetoA Por letras mayúsculas del alfabetoi Ordenación por números romanos en minúsculasI Ordenación por números romanos en mayúsculasNota: Recordamos que en algunos navegadores no funciona la opción de cambiar el tipo deviñeta a mostrarPuede que en algún caso deseemos comenzar nuestra enumeración por un número o letra que no tienepor qué ser necesariamente el primero de todos. Para solventar esta situación, podemos utilizar unsegundo atributo, start, que tendra como valor un número. Este número, que por defecto es 1,corresponde al valor a partir del cual comenzamos a definir nuestra lista. Para el caso de las letras o losnúmeros romanos, el navegador se encarga de hacer la traducción del número a la letracorrespondiente.Os proponemos un ejemplo usando este tipo de atributos:<p>Ordenamos por numeros</p><ol type="1"><li>Elemento 1<li> Elemento 2</ol><p>Ordenamos por letras</p><ol type="a"><li>Elemento a<li> Elemento b</ol><p>Ordenamos por números romanos empezando por el 10</p><ol type="i" start="10"><li>Elemento x<li> Elemento xi</ol>28
  31. 31. El resultado:Ordenamos por números1. Elemento 12. Elemento 2Ordenamos por letrasa. Elemento ab. Elemento bOrdenamos por numeros romanos empezando por el 10x. Elemento xxi. Elemento xiListas IIITerminamos el tema de listas estudiando las listas de definición. Veremos también la anidación de listas.Listas de definiciónCada elemento es presentado junto con su definición. La etiqueta principal es <dl> y </dl> (definitionlist). La etiquetas del elemento y su definición son <dt> (definition term) y <dd> (definition definition)respectivamente.Aquí os proponemos un código que podrá aclarar este sistema:<p>Diccionario de la Real Academia</p><dl><dt>Brujula<dd>Señórula montada en una escóbula<dt>Oreja<dd>Sesenta minutejos</dl>El efecto producido:Diccionario de la Real AcademiaBrujulaSeñórula montada en una escóbulaOrejaSesenta minutejosFijaos en que cada línea <dd> esta desplazada hacia la izquierda. Este tipo de etiquetas son usadas amenudo con el propósito de crear textos más o menos desplazados hacia la izquierda.El código:<dl><dd>Primer nivel de desplazamiento<dl><dd>Segundo nivel de desplazamiento<dl><dd>Tercer nivel de desplazamiento</dl></dl></dl>El resultado:Primer nivel de desplazamientoSegundo nivel de desplazamientoTercer nivel de desplazamiento29
  32. 32. Anidando listasNada nos impide utilizar todas estas etiquetas de forma anidada como hemos visto en otros casos. Deesta forma, podemos conseguir listas mixtas como por ejemplo:<p>Ciudades del mundo</p><ul><li>Argentina<ol><li>Buenos Aires<li>Bariloche</ol><li>Uruguay<ol><li>Montevideo<li>Punta del Este</ol></ul>De esta forma creamos una lista como esta:Ciudades del mundo• Argentina1. Buenos Aires2. Bariloche• Uruguay1. Montevideo2. Punta del EsteCaracteres especialesUna página web se ha de ver en paises distintos, que usan conjuntos de caracteres distintos. El lenguajeHTML nos ofrece un mecanismo por el que podemos estar seguros que una serie de caracteres raros sevan a ver bien en todos los ordenadores del mundo, independientemente de su juego de caracteres.Este conjunto son los caracteres especiales. Cuando queremos poner uno de estos caracteres en unapágina, debemos sustituirlo por su códico.Por ejemplo, la "á" (a minúscula acentuada) se escribe "&aacute;" de modo que la palabra página seescribiría en una página HTML de este modo: p&aamp;aacute;ginaCaracteres especiales básicosEn realidad estos caracteres se usan en HTML para no confundir un principio o final de etiqueta, unascomillas o un & con su correspondiente caracter.&lt; < &gt; >&amp; & &quot; "Caracteres especiales del HTML 2.0&Aacute; Á &Agrave; À&Eacute; É &Egrave; È&Iacute; Í &Igrave; Ì&Oacute; Ó &Ograve; Ò&Uacute; Ú &Ugrave; Ù&aacute; á &agrave; à&eacute; é &egrave; è&iacute; í &igrave; ì&oacute; ó &ograve; ò30
  33. 33. &uacute; ú &ugrave; ù&Auml; Ä &Acirc; Â&Euml; Ë &Ecirc; Ê&Iuml; Ï &Icirc; Î&Ouml; Ö &Ocirc; Ô&Uuml; Ü &Ucirc; Û&auml; ä &acirc; â&euml; ë &ecirc; ê&iuml; ï &icirc; î&ouml; ö &ocirc; ô&uuml; ü &ucirc; û&Atilde; à &aring; å&Ntilde; Ñ &Aring; Å&Otilde; Õ &Ccedil; Ç&atilde; ã &ccedil; ç&ntilde; ñ &Yacute; Ý&otilde; õ &yacute; ý&Oslash; Ø &yuml; ÿ&oslash; ø &THORN; Þ&ETH; Ð &thorn; þ&eth; ð &AElig; Æ&szlig; ß &aelig; æCaracteres especiales del HTML 3.2&frac14; ¼ &nbsp;&frac12; ½ &iexcl; ¡&frac34; ¾ &pound; £&copy; © &yen; ¥&reg; ® &sect; §&ordf; ª &curren; ¤&sup2; ² &brvbar; ¦&sup3; ³ &laquo; «&sup1; ¹ &not; ¬&macr; ¯ &shy;&micro; µ &ordm; º&para; ¶ &acute; ´&middot; · &uml; ¨&deg; ° &plusmn; ±&cedil; ¸ &raquo; »&iquest; ¿Otros caracteres especiales&times; × &cent; ¢&divide; ÷ &euro; €“ “ ™ ™” ” ‰ ‰Œ Œ ƒ ƒ‡ ‡ † †31

×