Aprender a Crear una Página Web Paso a Paso

Aprender a Crear una Pgina Web Paso a PasoEn estas pginas vas a aprender a crear una pgina web, a escoger un servidor de pago o gratuito, a subirla a internet, a mejorarla y actualizarla a tu gusto e incluso a sacarle un buen provecho econmico si lo deseas. No hace falta que tengas conocimientos de nada, simplemente con leer estas lecciones lo vas a lograr, vers. El resultado final ser una web igual que esta, con su foro, un top, un directorio de enlaces, optimizada para aparecer en buenas posiciones en los buscadores, con un cdigo html y css vlidos, etc, etc. Qu, la mitad de lo que acabo de decir ni te suena eh? ja ja ja ja, no te preocupes, te lo voy a explicar todo paso a paso, como si fueras idiota, vale? ja ja ja. Hey, que era broma, no te vayas!!! Adems, te lo explicamos todo tan bien que sabrs como personalizar tu pgina web a tu antojo. Una vez termines el tutorial podrs cambiar los colores, la estructura, los mens, etc, etc para adaptarla a tus gustos. Tras aprender todos los trucos podrs hacer cualquier otro proyecto desde cero con lo que vas a aprender aqu.

Qu vamos a necesitar?En principio solo conexin a internet y seguir estas instrucciones. El resto de recursos necesarios los conseguiremos de la red, como por ejemplo el software (gratuito) que vamos a seguir para las lecciones, el espacio web (gratuito tambin) para alojar tu proyecto, el software para el foro, para el directorio y para el topsites (de nuevo, gratis), etc, etc. Si tienes acceso a internet tendrs todo lo necesario. Bueno y un poco de tiempo y paciencia, claro.

Y si no entendemos algo?En ese caso dispones del Foro CCTW donde puedes escribir todas tus dudas. Las resolvemos todas, de modo que... si no tienes pgina web ser solo porque no quieres. No hay escusa! Para leer el foro no es necesario registrarse, para escribir tus dudas en l s (es necesario para poder evitar un poco el Spam, lo siento).

Bien, cmo seguimos las lecciones de esta web?Arriba vers un men horizontal con fondo naranja. Desde all puedes acceder a las distintas lecciones de este tutorial. Al hacer clic en cada una aparece un men a la izquierda, con fondo blanco como el que hay ahora, desde donde acceders a las distintas partes de cada leccin. Adems, pulsando sobre las flechas "Siguiente" y "Anterior" de la parte baja de cada pgina puedes ir avanzando las lecciones por orden. Todo claro? Pues adelante, basta con pulsar la flecha derecha de aqu abajo. Recuerda, lee con atencin las lecciones, sigue al pie de la letra cada paso y consulta todas tus dudas en el foro CCTW. Paciencia y... Suerte!!

Introducin Descargar Html-Kit La instalacin Configuracin En Castellano Simplificando El cdigo Html Mirando el Cdigo Un poco de Orden El Sitio Local Mi primera pgina Mi primer prrafo Mi primer enlace La Hoja de Estilos Relaccionar Estilos Fondos en CSS Fondo en Ejemplo Insertar Imgenes Enlace de E-Mail Imagenes y CSS Centrar prrafos

Por el momento

Software NecesarioUn software es un programa informtico, lo que ocurre es que al decir software parece que la cosa tiene ms importancia, como es una palabra en ingls... ya se sabe... pero no es ms que eso, un programa. Para crear nuestra pgina web necesitamos un programa. Para crear webs hay miles, de pago, gratuitos, regalados, pirateados... Nosotros vamos a ser buenos y usaremos uno gratuito, por ejemplo uno que se llama Html-Kit

De dnde descargar Html-KitEl Html-Kit es un editor de html y css (entre otros) gratuito. Editor significa que podemos escribir con l y Html y Css son los lenguajes que se usan para hacer pginas web. Es gratuito, esto significa que no has de pagar un duro por l, aunque tienes la opcin de pagar para tener acceso a un sin fn de herramientas extra. Por lo pronto, con la versin gratuita nos va a sobrar. Para conseguirlo, qu mejor que descargarlo desde la pgina oficial, no? As estaremos seguros de obtener la versin ms moderna. La pgina es www.htmlkit.com. Ve haciendo clic y se abrir una ventana aparte, para que puedas seguir leyendo estas instrucciones. Al acceder a la web de Html-Kit podrs ver en la parte alta un cartelito similar a este:

En el hueco de arriba te preguntan donde oiste hablar de Html-Kit. Puedes poner lo que quieras, la direccin de esta web, un buscador, etc, etc. En el hueco de abajo puedes escribir tu email si deseas recibir informacin de actualizaciones de este software y cosas as. No son obligatorios ninguno, pero ya que es gratuito no est al menos contestarles a la primera pregunta, no? A continuacin, pulsa en la parte de abajo de ese cuadro, donde pone Download HTML-Kit para proceder a la descarga del archivo. Son unas 2.8 megas, por lo que ser algo rpido. Al hacer clic se abre una ventana preguntado si lo deseas guardar o ejecutar directamente. Escoge Guardar y as lo tendrs a mano en caso de que te haga falta:

Tras terminar de bajarlo aparece otra ventana. Escoge Ejecutar para empezar su instalacin:

Quizs te aparezca un mensaje como este:

Puedes aceptar y Ejecutar sin problemas. Este programa es seguro. En seguida, el programa empieza a instalarse en tu PC.

Primeros Pasos Introducin Descargar Html-Kit La instalacin Configuracin En Castellano Simplificando El cdigo Html Mirando el Cdigo Un poco de Orden El Sitio Local Mi primera pgina Mi primer prrafo Mi primer enlace La Hoja de Estilos Relaccionar Estilos Fondos en CSS Fondo en Ejemplo Insertar Imgenes Enlace de E-Mail Imagenes y CSS Centrar prrafos

Por el momento..

Cmo Instalar el Html-KitComienza mostando una ventana de bienvenida y preguntndote si quieres seguir o no... parece que an no ha entendido que "si".. je je:

Como va siendo habitual, ahora aceptamos los las condiciones, cmo no, verdad? Tienes que marcar la casilla que te he marcado en rojo en la imagen de aqu abajo y despus pulsar en Next> :

Siguiente paso? Inicarle en que carpeta de nuestro disco duro lo queremos instalar. La opcin por defecto es perfectamente vlida:

Seguidamente, nos pregunta qu opciones deseamos instalar. Como no hay quien nos pare, nosotros escogemos todas (que chulos somos,eh?). Seguramente no las usemos, pero tampoco es cuestin de perderse algo, as que... t pa dentro.

Si an no te has cansado de aceptar y aceptar, aqu tienes otra ventana que te pregunta cul quieres que sea el nombre del programa en tu barra de programas... aceptamos de nuevo...

Bueno... ahora nos muestra las opciones que se van a instalar. Que majo... pero un poco pesado..

Pulsamos Install y... all va eso! Se instala en un segundo y claro, para no perder costumbre, nos dice que ya est todo listo. Te recomiendo no dejar marcada la casilla marcada con un circulo rojo por m. Eso es para descargarte ms cosas, pero por el momento vamos sobrados. Quita la marca (mira la foto de abajo) y seguimos, oki?

Hacer un acceso directo al Html-Kit en tu escritorioSi no igual te cuesta trabajo encontrarlo luego... Basta con ir a Inicio > Todos los programas > Html Kit y en el icono de la ventana que se despliega, hacer clic con el botn derecho del ratn sobre el que pone Html Kit y escoger "Crear Acceso Directo". En ese momento si vuelves a abrir el desplegable vers dos iconos de Html Kit. En el recien creado aparece un "2" al lado. Haz clic una sola vez sobre ese icono y SIN soltar el botn, arrstralo hasta tu escritorio y listo, ya lo tienes a mano. La prxima vez que quieras abrir el Html Kit bastar con darle dos veces a ese icono de tu escritorio.

Arrancando el Html-KitEn la pgina anterior nos quedamos en esta ventana:

Aceptamos de nuevo presionando "Finish" y vemos, cmo no, una preguntita....

Dice arriba que las preguntas siguientes (vaya, que no es solo una...) son para ayudarte a configurar el programa, pero que siempre puedes cambiar estas cosas ms tarde desde Edit > Preferencias. Esta pregunta de arriba es por si quieres que los archivos HTML se abran siempre por defecto con este programa. Por el momento le diremos que no y al hacerlo, claro, aparece otra pregunta...

Quieres que Html-Kit detecte los navegadores que tienes para usar la vista previa con ellos? Fjate, a esta le vamos a decir que s, para que no se diga...

Ahora como ves en la ventana de aqui abajo, pregunta si quieres descargarte enlaces de ayuda e informacin actualizada.. A esto le diremos que no, pues ya nos estamos cansando de tanta preguntita y queremos ver el programa de una vez..

No contento con la contestacin, nos pregunta si queremos verificar si hay alguna versin ms moderna del programa... arghhh. Adivina que ponemos?

Y finalmente (espero) nos invita a dar una vuelta por el programa con el tutorial. Lo siento pero no, mi paciencia tiene un lmite, je je je.

Bueno. Ahora ya si que si, aparece una ventana preguntando qu tipo de archivo queremos abrir para empezar. Como opciones tenemos: Create a new file (Crear un nuevo archivo) Create a new file based on a template (Crear un archivo basado en una plantilla) etc, etc, etc. Escogemos Create a new File y antes de pulsar OK desactivamos la casilla de abajo del todo, donde pone "Dont display this screen again" o "No mostrar esta ventana de nuevo".

TACHAAANNN!! Por fin! El programa se deja ver! je je je.

Traducir el Html-Kit al espaolAhora que tenemos el Html-Kit instalado vamos a traducirlo al castellano para enterderlo mejor... Para ello es suficiente bajar un archivo de la pgina web oficial de Html-Kit y descomprimirlo en una carpeta de nuestro disco duro. El archivo necesario lo puedes encontrar en: http://www.html-kit.com/html-kit/download/plugin/irtranslationspanish/

Pulsa donde pone "start download" que significa "empezar a descargarlo". Al hacer clic all se abre esta ventana de Windows preguntandote donde guardar el archivo. Hazlo en la carpeta "default" que se encuentra dentro de una de las carpetas donde has instalado el programa:

Una vez guardado el archivo (llamado irTranslationSpanish.zip) descomprime su contenido en esa misma carpeta y listo. La prxima vez que abras el Html-Kit estar en Castellano gran parte del men, no todo, pero la gran mayoria. Si te descargas ese archivo y no logras descomprimirlo haciendo doble cllic sobre l, quizs sea porque no tienes ningn programa descompresor instalado. Puedes bajarte el winrar, instalarlo y poder as descomprimir tanto este como los que te bajes en el futuro. Para cualquier duda al respecto usa el Foro CCTW.

Simplifica el Html-Kit, Hazlo fcil!El Html-Kit es un programa sencillo, pero an as tiene cantidad de opciones que no vamos a necesitar, al menos por el momento. As que para no liarnos mucho con tanto men vamos a simplificar todo esto. Trataremos de desactivar todo aquello que no vayamos a usar e iremos activandolo conforme nos haga falta. As ser todo ms claro, oki? Para empezar, abre tu Html-Kit (si lo tienes abierto, cierralo y lo vuelves a abrir). Nada ms abrirlo nos sale la ventana donde nos pregunta qu tipo de archivo queremos crear. Esto es lo primero que nos sobra, de modo que marcamos la casilla de la parte de abajo de esa ventana para que no vuelva a aparecer:

Tras desactivar esa opcin y pulsar OK vemos de nuevo el programa con una pgina nueva, tal que as:

Empecemos a desactivar cosas. Para empezar haz clic en la barra de herramientas, donde pone Ver y vamos a desactivar una a una todas las opciones que te marco con un circulo rojo en la siguiente imagen:

Todas ellas las puedes activar cuando quieras haciendo lo mismo de nuevo, pero como vers, de este modo la superficie de trabajo que nos queda es mucho ms amplia y clara, no? Quedara as:

Mucho mejor, verdad? Ya estamos preparados para empezar el juego. Vers como crear pginas web va a ser pan comido para t. Ahora es una buena oportunidad para empezar a saber qu es ese cdigo que aparece en la pantalla del Html-Kit. Vamos a verlo en la pgima siguiente.

Primeros Pasos

Introducin Descargar Html-Kit La instalacin Configuracin En Castellano Simplificando El cdigo Html Mirando el Cdigo Un poco de Orden El Sitio Local Mi primera pgina Mi primer prrafo Mi primer enlace La Hoja de Estilos Relaccionar Estilos Fondos en CSS Fondo en Ejemplo Insertar Imgenes Enlace de E-Mail Imagenes y CSS Centrar prrafos Por el momento..

Primer contacto con el cdigo HTML?Una pgina web no es ms que un puado de letras y nmeros que son interpretados por los navegadores mostrando lo que ves por internet. Al ser tan solo eso, letras y nmeros, podramos usar por ejemplo el Block de Notas de Windows para crear una pgina web completa. Tan solo hay que saber qu letras y nmeros escribir y luego guardar el archivo, pero en lugar de hacerlo con extensin .txt se guardara con extensin .html o .htm (son iguales). Nosotros vamos a usar en estas lecciones otro programa distinto al Notepad o Block de Notas, el Html-Kit, pues nos va a facilitar algunas cosas que no nos hace el Notepad y que iremos viendo a su debido tiempo.

El cdigo html de una pgina webTodas las pginas web empiezan y terminan con el mismo cdigo y es el siguiente:

(todas empiezan con esto) (todas terminan con esto otro)

En adelante, siempre que escriba cdigo HTML lo har de este modo, de color azul y con fondo gris para que lo distingais. Pues bien, si eso lo escribimos en un archivo y lo guardamos con extensin .htm o .html ser una pgina web. Vacia si, pero una pgina web. La primera palabra indica que ah empieza el cdigo de la web. La segunda indica que el cdigo de la pgina web a terminado. Se distinguen por la contrabarra / que siempre indica que algo ha terminado.

La estructura de una pgina web en HTMLDentro de cualquier pgina web hay cosas que se ven (o que se escuchan) y cosas que no. Las cosas que se ven son los textos, las imgenes, sonidos, etc. Por otro lado lo que no se ve son sus caractersticas, como el ttulo, su descripcin, y otra serie de cosas que veremos ms adelante. Las cosas que no se ven se colocan dentro del cdigo HTML en una zona llamada cabecera (Head en ingls) y lo que se muestra se pone en lo que se llama cuerpo (o Body en ingls). Pues igual que antes hemos escrito en cdigo dnde empieza la pgina y dnde termina, la cabecera llamada HEAD y el cuerpo llamado BODY se colocan y escriben as en Html:

En Html, se indica que va a empezar la cabecera con la palabra y termina con la misma palabra pero colocandole la contrabarra, tal y como hemos visto que pasaba para cerrar . Lo mismo podemos decir del cuerpo, que comienza con y termina con . Como puedes ver, tanto la cabecera como el cuerpo no contienen nada dentro, por lo que seguimos teniendo una pgina web vacia.

Definir el ttulo de una pgina webUna de las cosas que se pueden definir dentro de la cabecera o head es el ttulo de la pgina. Antes hemos dicho que en la cabecera se colocaban las cosas que no se mostraban en la web. Este ttulo realmente no se ve en la web, pero si en la barra azul de la parte alta del navegador (Explorer, Mozilla, Firefox, etc son tipos de navegadores) por lo que resulta importante aprender a definirlo. Ms adelante veremos por qu es tan importante. Como ya estars sospechando, existe una palabra para indicar que va a comenzar el ttulo y otra para indicar cuando termina, verdad? Que lince, que inteligencia la tuya oye, je je. El ttulo se define as (como ves, dentro de la cabecera o head):

Este es el ttulo de mi web y puedo escribir lo que quiera!

Como siempre, empieza por la palabra y termina con la misma pero con la contrabarra delante, es decir, con . Fcil, no? Si guardaramos esto en un archivo con extensin .html o .htm qu veriamos? Una ventana del navegador completamente en blanco, pero con un ttulo en la parte superior del navegador como el que hemos escrito. Mira un ejemplo haciendo clic aqu. Si tras hacer clic en ese enlace y abrirse la pgina del ejemplo miras el cdigo de esa pgina web, vers como coincide exctamente con el mostrado antes. Si no sabes, te enseo como mirar el cdigo html de una pgina web en la pgina siguiente. Por el momento, ya sabes crear pginas en blanco. Todo un logro, verdad? je je je

Cmo ver el cdigo Html de cualquier pgina web?Como vers, estas lecciones estn explicadas para quien no tiene ni idea. Si sabes ver el cdigo Html de una pgina web puedes pasar sin miedo a la pgina siguiente. Si tienes tus dudas, mejor lee estas notas. El curso te va a costar lo mismo de modo que... aprovechate! je je. Aunque te parezca una chorrada mirar el cdigo Html de una pgina web pronto vers que resulta muy util, tanto para corregir errores en tus pginas como para ver cmo narices una web que te ha gustado a podido hacer alguna cosa. Una vez que domines un poco ms el diseo de pginas web, aprenders mucho cotilleando el cdigo Html de otras pginas. La forma ms sencilla de ver el cdigo Html de una pgina web es haciendo clic en las opciones que aparecen normalmente en la barra de herramientas superior de cualquier navegador. La opcin concreta depender de cul sea el navegador que ests usando. Si usas el Internet Explorer puedes ver el cdigo haciendo clic en Ver > Cdigo Fuente. Cuando pongo esta flechita ">" es para indicar que primero se hace clic en la opcin Ver y al abrirse el desplegable con otras opciones, se toma la opcin Cdigo Fuente. Te enseo una imagen para que lo tengas ms claro:

Si en cambio ests usando el Firefox, la opcin est en Ver > Cdigo Fuente de la Pgina o teclas Control + U. Para el navegador Opera, el cdigo Html se puede lo tienes en Ver + Cdigo Fuente o pulsando las teclas Control + F3. Como ves, son todos parecidos y por supuesto, el cdigo mostrado ha de ser idntico. Haz la prueba con esta misma pgina, o con el ejemplo de la pgina anterior, y as compruebas el cdigo del ejemplo, oki?

Una Carpeta para dominarlas a todas...Antes de seguir aprendiendo y creando cosillas con el Html vamos a ordenar un poco nuestros archivos para no perdernos ms adelante. Para ello sigue estas indicaciones paso a paso.

La carpeta de nuestras websCuando tengamos lista nuestra pgina web tendremos que mandar todos los archivos utilizados a la red (a nuestro servidor) por lo que es necesario que todos ellos estn en una misma carpeta. En caso contrario sera un lio tremendo saber qu tenemos que subir. El lugar ms accesible es nuestro escritorio de Windows, de modo que vamos a crear una carpeta all llamada "mis-paginas-web". Crear esta carpeta es bien sencillo. Pones el cursor de tu ratn sobre una parte de tu escritorio donde no haya ningn icono. Haces clic all con el botn derecho del ratn y escoges Nuevo > Carpeta. A continuacin le pones el nombre que os he dicho "mis-paginas-web" y pulsamos Intro. Ya tenemos lista la carpeta. Fcil, no?

Dentro de esta carpeta como te digo, vamos a guardar todos los archivos que usemos en cada web. Digo "en cada web" porque adems de la que vamos a crear ahora, t mismo puedes seguir creando otras. Asi que dentro de esa carpeta vamos a crear otra llamada "web-ejemplo-cctw", que ser donde guardemos los archivos de esta web de ejemplo que iremos creando con estas lecciones.

As que, si a la vez que sigues estas lecciones quieres ir creando otra a tu bola, puedes crear otra carpeta con el nombre que quieras dentro de "mis-paginas-web", junto a "web-ejemplo-cctw". As no mezclamos cosas, vale? Dentro de la carpeta "web-ejemplo-cctw" crea otra carpeta ms y llmala "objetos". En ella guardaremos las imgenes, archivos de sonidos, etc. Te repito, es muy importante que sigas mis pasos al pie de la letra, de modo que cuando digo que a esa carpeta la llames "objetos", hazme caso y no la llames "Objetos", ni "OBJETOS". Todo en minsculas, oki? Ya entenders por qu.

Como ves, por el momento no tenemos nada de nada, solo sabemos crear pginas web vacias y carpetas vacias, pero en un par de pginas vers como cambia esto.. confia en m.

Primeros Pasos

Configurar nuestro Sitio en en Html-KitAhora que tenemos la carpeta lista, llega el momento de configurar nuestro Sitio en el Html-Kit. Y qu es un Sitio? Se llama sitio a toda la web, incluyendo todos sus pginas, imagenes y dems elementos. Coincide o ha de coincidir con la carpeta que acabamos de crear, pues esa era su funcin, englobar todos los archivos del sitio para no liarnos ni liar al Html-Kit.

Abriendo la ventana WorkSpaceEmpezamos desde cero, vale? Cierra el Html-Kit si lo tienes abierto y sigue estos pasos de uno en uno y hasta el final y no tendrs ningn problema. 1- Abre el Html-Kit. Aparecer en blanco con una pantalla como esta:

2.- Haz clic sobre la barra de herramientas, donde pone Herramientas y activa la opcin Workspace.

3.- Aparece ahora una ventana donde podemos definir nuestros sitios:

Vemos tres carpetas ya creadas pero en principio no les vamos a hacer ningn caso. Cuando seas mayor si quieres las cotilleas pero ahora vamos a lo nuestro. En el futuro, puedes cerrar esa ventana pulsando sobre la x de su parte superior derecha y puedes volver a verla siguiendo lo explicado en el paso 2. Cuando te moleste la cierras, cuando te haga falta la abres. Fcil, verdad? Y para qu sirve esto? Lo vemos ahora mismo.

Sitio Local y Sitio VirtualDentro de esa ventana llamada WorkSpace vamos a definir dos sitios. Uno que se llama Sitio Local que se corresponde con la carpeta que tenemos en el ordenador llamada antes "ejemplo-web-cctw" y otro sitio que podemos llamar Sitio Virtual, que ser el espacio en internet. Este segundo lo veremos ms adelante. Por ahora vamos a definir el Sitio Local de la siguiente forma: 1.- Hacemos clic en la barra de herramientas, donde pone Workspace y escogemos Aadir Carpeta Local/Red.

2.- En la ventana que se abre (como ves, la traduccin al espaol no es completa, pero podremos defendernos, ya vers), tienes que poner la carpeta "pagina-ejemplo-cctw" en el primer hueco (pincha en la carpeta amarilla de su derecha para encontrarla y escogerla) y en el segundo hueco pon un ttulo cualquiera, por ejemplo, "web-ejemplo-cctw-local" y pulsa OK:

3.- Tras pulsar OK vers como aparece este nuevo sitio en la ventana de Workspace:

A partir de ahora, cada vez que queramos trabajar sobre archivos de esta pgina web, en lugar de abrir la carpeta que hemos creado en lecciones anteriores (web-ejemplo-cctw), podemos acceder a ellos directamente desde ac. Ahora s que podemos ya empezar a crear nuestra pgina web. Que emocionante...... no?

Que tal crear otro sitio para tus pruebas?Como veo que eres un poco impaciente, vamos a crear una segunda carpeta o sitio local, en el que podrs hacer todos los experimentos que quieras. As podrs dejar el sitio "web-ejemplo-cctw-local" solo para lo explicado aqui y no te hars un lio mezclando lo que explicamos con tus propias pruebas, vale? Para crear esa otra carpeta local repite los pasos anteriores, y crea otra para tus cosas llamada como quieras, por ejemplo "mis-experimentos". A la hora de crearla te pide una carpeta. Puedes crear una llamada "mis-experimentos" dentro de la carpeta del escritorio llamada "mis-paginas-web" si quieres.

Cmo crear la primera pgina de la webLa primera pgina que vamos a crear es la pgina principal. La pgina principal es la que se muestra por defecto al visitante cuando nos visita, la primera que ve. Su archivo ha de llamarse obligatoriamente index.html sea cual sea el servidor donde la alojemos. Como esta pgina va a pertenecer al sitio "web-ejemplo-cctw", tendremos que apaarnoslas para crearla dentro de ese sitio y no en los otros que aparecen en la ventana de Workspace. Para crearla ponemos el cursor del ratn dentro de la ventana de Workspace, justo encima del sitio "web-ejemplocctw" y pulsamos el botn derecho del ratn. Se abre entonces una ventana en la que tenemos que escoger, dentro de la seccin New, la opcin Create File...

Al hacer clic sobre Create File... aparece esta otra ventana:

Haz clic sobre la lengeta en la que pone "General", escoge el tipo de archivo "Blank HTML Page" (pgina html en blanco) y pulsa Ok. En seguida aparece otra ventana preguntando (este programa no para de preguntar.. verdad? que pesao es... je je) preguntndonos el nombre que queremos que tenga ese archivo. Cul debe ser? Cmo? Que no lo sabes? Ejem.... hay que estar ms atento! je je. Se tiene que llamar index.html pues ser la pgina principal, as que lo escribimos en esa ventana, con la extensin y todo y pulsamos en Ok:

Tras pulsar Ok no vemos nada nuevo, pero el archivo index.html a sido creado. Para verlo solo tienes que hacer clic en el signo "+" que hay a la izquierda del sitio "web-ejemplo-cctw"m en la ventana Workspace. Haz clic all.

Como ves, no solo te muestra el archivo index.html sino tambin la carpeta "objetos" que hemos creado anteriormente. Si te vas a MiPc y abres la carpeta vers como adems de la carpeta "objetos" tambin aparece all el archivo index.html Ya estamos listos para escribir contenidos el la pgina principal, index.html as que vamos a la siguiente pgina y comenzamos el juego!

Primeros Pasos

Cmo crear un prrafo en la pgina webSi has prestado atencin a lo dicho hasta ahora, te acordars de que las cosas que se ven en la web se colocan dentro del cuerpo o Body, es decir, entre las etiquetas y de modo que, si vamos a escribir un prrafo tendremos que hacerlo all. Empezaremos abriendo el Html-Kit. Una vez abierto nos vamos a la ventana Workspace, hacemos clic en el signo "+" que hay a la izquierda del sitio "web-ejemplo-cctw" para que se muetre su contenido y despus hacemos doble clic en el archivo index.html o pgina principal. Se abre entonces la ventana de ese archivo mostrando todo su cdigo Html.

Como por ahora solo vamos a trabajar sobre el index.html podemos cerrar la ventana Workspace para tener ms sitio visible. De modo que hacemos clic en la x de Workspace para cerrarla y despus maximizamos la ventana del index para ocupar toda la ventana del Html-Kit, quedando as:

Esta es la vista llamada "Editor de Html". Como vers, el cdigo de esta pgina coincide ms o menos con el que te expliqu en las primeras lecciones, verdad? Empieza por seguido de la cabecera y despus el cuerpo o Body, para cerrarse al final con que como toda etiqueta de cierre lleva su contrabarra "/". Se ve tambin esa primera lnea de la que no te he hablado an. Esa lnea describe el tipo de pgina que es, las normas de Html que est siguiento. No tiene mayor importancia, la dejaremos y listo.

Cambiando el ttuloVamos a cambiarle el ttulo a esta index. Bastar con escribir el ttulo que quedamos en lugar de donde pone "Page title". Vamos a ponerle todos "Pagina Principal del Ejemplo CCTW". Ya sabes, entre y .

Mi primer prrafoAl igual que un ttulo se escribe entre y , un prrafo hay que escribirlo entre las etiquetas y . As, para escribir por ejemplo "Bienvenidos a mi pgina web. Muy pronto estar lista!" basta con escribir esa frase encerrada entre esas etiquetas, dentro del cuerpo de la pgina es decir, entre y . Quedara as:

Claro que con la vista "Editor" no vemos lo que estamos consiguiendo. Para ver cuales son los resultados el Html-Kit dispone de otra vista llamada "Preview" o vista previa, que nos muestra cmo quedara la web vista por internet. A esta vista previa o preview se accede haciendo clic abajo del todo, junto a donde pone "Editor". Haz clic ah y veamos como queda nuestro ejemplo por el momento, vale?

Bueno, por el momento no es gran cosa pero... sabas hacer esto antes? Pues pronto aprenders mucho ms. No vamos a parar hasta que aprendas a crear pginas como ComoCrearTuWeb, oki? je je, no va a ser dificil, vers. Haciendo clic sobre "Editor", junto a "Preview" puedes volver a ver la vista de cdigo Html. Ya sabemos algo ms.

Crear un segundo prrafo en la pginaPara crear un segundo prrafo ya imaginars lo que hay que hacer, no? Basta con incluir ese segundo prrafo debajo del anterior y encerrarlo entre las etiquetas y . Por ejemplo, vamos a poner este segundo prrafo: "Pgina creada gracias a CCTW". En la vista "Editor" la pgina quedara as:

Esto es lo que hemos conseguido hasta el momento: ejemplo 2.

Cmo guardar los cambios realizadosPara guardar lo que hemos hecho hasta el momento pulsa en la barra de herramientas, donde pone Archivo y escoge Salvar. Ya puedes cerrar el Html-Kit sin miedo a perder nada, e irte a merendar, que llevas ya mucho tiempo delante del ordenador, je je je je.

Cmo crear un enlace en la pgina webLo importante de una pgina web es la posibilidad de navegar de unas pginas a otras sin ms que hacer clic en los enlaces, as que vamos a aprender a crearlos. Para crear un enlace hay que decidir dos cosas, una es desde qu palabra de nuestra web lo queremos hacer y segundo a qu pgina lo queremos dirigir. Para el ejemplo vamos a crear un enlace desde la palabra "CCTW" que tenemos escrita en el segundo prrago hacia la direccin www.comocreartuweb.com Para ello cierra el Html-Kit y lo vuelves a abrir (se supone que has guardado los cambios hechos en la pgina de antes). Ahora vuelve a abrirlo y aparecer el Html-Kit en blanco. En ese caso ya sabes, pulsa sobre Ver > Workspace para que aparezca la ventana de los sitios ( la ventana Workspace) y una vez que aparezca haz clic en el signo "+" a la izquierda de "web-ejemplo-cctw" para ver su contenido. Ppara terminar, doble clic sobre el archivo index.html para ver su cdigo. Tras esto, como sabes, puedes cerrar la venata de Workspace para tener ms espacio.

El cdigo Html de los enlaces o vnculosComo estars sospechando, los enlaces empiezan con una etiqueta y terminan con otra de cierre. La etiqueta de inicio para definir enlaces es y la de cierre . La palabra que encerremos entre esas dos etiquetas ser la que el visitante pueda pinchar para acceder a la pgina enlazada. Por lo tanto, si la palabra fuera "palabra" (que poco original, no?) la lnea quedara as: palabra Pero con esto no conseguimos nada, pues de alguna manera hay que indicar a qu pgina queremos enviar al visitante al hacer clic all, no? Esto se define dentro de la etiqueta de inicio, de este modo: palabra Donde pone "ruta" hemos de poner la direccin completa del lugar a donde queremos mandar al visitante. Te recomiendo que leas las instrucciones sobre rutas que tenemos en ComoCrearTuWeb. Te evitarn muchos problemas en el futuro. Como queremos enlazar a una web externa, pondremos entre las comillas su ruta absoluta que es esta: http://www.comocreartuweb.com quedando el cdigo del enlace de este modo:

CCTW Te dejo una vista del Html-Kit para que lo veas ms claro, vale?

En la misma o en otra ventana?Si no se indica ninguna cosa ms, cuando el visitante haga clic en el enlace la pgina destino se abrira en la misma ventana, pero si quieres que en lugar de eso se abra en una ventana distinta (por ejemplo, para que no se pierda la web anterior) has de indicrselo dentro de la primera etiqueta. Yo te recomiendo que todos los enlaces hacia pginas de tu misma web se abran en la misma ventana, y que todos los enlaces hacia pginas externas las abras en ventanas diferentes. Como este enlace apunta a una pgina externa (no forma parte de la web de ejemplo) le vamos a indicar que ha de abrirse en una ventana distinta y esto se hace aadiendo este trozo de cdigo target="_blank" quedando por tanto el cdigo as:

Quieres ver como est quedando? Este es el aspecto del ejemplo 3.

Los estilos css

El mayor problema que encontramos los que hacemos pginas web es el conseguir que se vea idntica en cualquier navegador. A veces terminamos una web que se ve perfecta en Explorer y de pronto vindola con el Opera o con el Firefox descubrimos que est toda desordenada. El el peor sueo que podemos tener, je je je. Esto pasa porque no todos lo navegadores interpretan igual las cosas que escribimos en el cdigo Html. Para evitar esto lo mejor es usar estilos CSS. Mucha gente piensa que es algo complicado, pero como lo vamos a ir aprendiendo sobre la marcha no te va a resultar nada dificil, ya lo vers. La idea es colocar en las pginas web solamente los contenidos, sin tener en cuenta colores, tamaos, anchuras ni nada de nada, solo contenidos puros y duros. Por otro lado crearemos un archivo aparte donde definiremos todas las caractersticas que queremos que tenga cada elemento de cada una de las pgina de la web. De este modo si un da creemos por poner un caso que el tamao de la letra es muy pequeo y queremos hacerlo ms grande, solo tenemos que indicarlo en ese archivo de caractersticas y automticamente el tamao de letra quedar cambiado en tooodas las pginas de nuestra web. Genial, no? Lo mismo podremos hacer a la hora de cambiar el fondo de la pgina, la posicin de cierto elemento, el color de fondo de una parte, el coloreado de los enlaces.... todo lo que tenga que ver con el modo de presentar las cosas de la web se queda definido en ese archivo de caractersticas, vale?

La hoja de estilos cssEste archivo de caractersticas se llama Hoja de Estilos y aunque podemos ponerle el nombre que queramos, vamos a llamarlo siempre estilos.css para no liarnos. La extensin, .css es obligatoria. Por un lado hemos de crear ese nuevo archivo y por otro lado hemos de indicar en cada una de las pginas de nuestra web que ha de leer esa Hoja de Estilos para saber cmo queremos que se presenten los elementos de la web.

Crear la Hoja de Estilos "estilos.css"Para crear la hoja de estilos volvamos a abrir el Html-Kit y activamos la vista de Workspace para tener a mano el sitio "web-ejemplo-cctw". Igual que hicimos para crear la pgina principal index.html ahora vamos a hacer algo parecido para crear el archivo estilos.css Hacemos clic con el botn derecho del ratn sobre la carpeta del sitio "web-ejemplo-cctw" de la ventana Workspace y escogemos New > Create File... Se abre entonces la ventana que nos pregunta qu tipo de archivo queremos crear. Escogemos este que os enseo en la imagen de abajo:

Fjate que est en la primera pestaa, donde pone StyleSheet que significa Hoja de Estilo y que hemos escogido "Blank Style Sheet" que significa Hoja de Estilo en blanco. Al pulsar Ok nos pregunta qu nombre queremos darle al nuevo archivo. Escribimos "estilos.css"

Tras pulsar Ok aparece este nuevo archivo en la lista de archivos del sitio "web-ejemplo-cctw" de la ventana Workspace, nuestra Hoja de Estilo para variar, en blanco.

Esto cada vez pinta mejor, no?

Primeros Pasos Introducin Descargar Html-Kit La instalacin Configuracin En Castellano Simplificando El cdigo Html Mirando el Cdigo Un poco de Orden El Sitio Local Mi primera pgina Mi primer prrafo Mi primer enlace La Hoja de Estilos Relaccionar Estilos Fondos en CSS Fondo en Ejemplo Insertar Imgenes Enlace de E-Mail Imagenes y CSS Centrar prrafos Por el momento..

Relaccionar la Hoja de Estilos CSS con la pgina webAhora que tenemos creada la Hoja de Estilos (en blanco, pero la tenemos) hay que decirle a la pgina web index.html que tiene que leer las caractersticas que hay en estilos.css para que sepa qu propiedades queremos que tenga cada elemento de la pgina. No te preocupes si no te enteras mucho de cules con estas caractersticas, pues lo vamos a ver muy pronto y te va a quedar bien clarito. Como los estilos no son un elemento que aparecer en la pgina sino algo que indica cmo se han de mostrar los elementos (color, tamao, etc), parece fcil adivinar que los estilos (o la llamada a la hoja de estilo) hay que indicarlos dentro de la cabecera o Head de la pgina no? Pues vamos all. La lnea de cdigo Html que tenemos que incluir en la cabecera, es decir, entre y es esta: (No pongas lo escrito en rojo. Eso significa que en ese lugar tienes que escribir la ruta, no que tengas que escribir "ruta/" literalmente. Sigue leyendo para tenerlo ms claro)

Lo nico que tendrs que cambiar en algunas ocasiones de esa lnea es ruta/. Y cual ser? Si leiste bien el apartado de las explicaciones de las rutas de los archivos de ComoCrearTuWeb se te har ms fcil entenderlo (leelo ahora si no lo has visto antes). Vamos a usar una ruta relativa para indicar dnde ha de leer la pgina index.html el archivo estilos.css

Como tanto la pgina index.html como el archivo estilos.css estn en la misma carpeta, basta con escribir el nombre del archivo de la Hoja de Estilo. Esto es, usar rutas relativas. El cdigo Html ha de queda entonces as. De modo que abrimos el Html-Kit, abrimos la pgina index.html y escribimos esa lnea de cdigo dentro del Head, quedando de esta forma:

Si ahora nos vamos a la vista previa haciendo clic en "Preview" (en la parte de abajo del Html-Kit) vers como no hay cambio alguno. Esto es porque la Hoja de Estilo (estilos.css) est todava vacia, pero te prometo que te va a encantar el invento este cuando veas de lo que es capaz. Venga, lo ests haciendo genial!

Explicando el color y la imagen de fondo de una pgina webAunque podemos indicar un color y/o un fondo de pgina directamente en el cdigo Html, vamos a hacerlo en la Hoja de Estilos para evitar los problemas y aprovechar las ventajas que te he comentado en la pgina anterior. As de paso, vamos a prendiendo a usar el archivo estilos.css para definir las caractersticas de las pgina web.

Color de fondoPor defecto, el color de fondo de una pgina web es el blanco. Si queremos cualquier otro tenemos que indicarlo. El elemento al que tenemos que decir que tiene que tener el color que queramos es el Body, pues engloba a todo "lo que se ve" de la pgina web. Los colores se definen por un cdigo muy raro (como por ejemplo #E6E6FA). Te dejo aqu un enlace con una lista de colores y sus cdigos que te puede venir muy bien. Escoge uno que te guste para el fondo y seguimos. Para indicar el color deseado, abrimos el Html-Kit, activamos la ventana Workspace y abrimos la Hoja de Estilos creada antes. Escribe en ella este cdigo: body {background-color: #E6E6FA} En adelante, cuando escriba cdigos de CSS los pondr en color verde para distinguirlos del cdigo Html que lo pondr de color azul. oki? (Cmo crees que hago esto? je je je, pues s, con estilos CSS..) Si ahora guardas el archivo estilos.css, abres el index.html y pulsas abajo en "Preview" para ver como queda, vers como el fondo ahora es del color elegido. Bien, no? Y vers que no hemos tocado el index.html para nada. Si en lugar de solo el index tuvieramos 500 pginas pasara lo mismo, todas cambiarian con solo retocar el archivo estilos.css y en cambio si no usaramos Hoja de Estilos tendramos que cambiar el color de fondo en las 500 pginas, una a una, a mano!!... es un buen invento o no? Pues an hay webmasters que no lo saben usar... vaya tela.

Un poco de estilos CSSYa de paso te explico un poco de estilos css. Para dar propiedades a los elementos de la web, se escribe en la hoja de estilos el nombre de la etiqueta y a continuacin, encerrado entre los corchetes "{" y "}" se define cada propiedad que queremos pero separndo unas de otras con un punto y coma ";". En el caso anterior, como la propiedad era para el cuerpo, hemos escrito "body" y entre corchetes hemos definido la propiedad. Background que significa fondo. background-color se usa para especificar el color de fondo no solo del body sino de otros muchos elementos, como prrafos, enlaces, etc,. Ese nmero raro, el #E6E6FA es el cdigo que corresponde a uno de los colores que aparecian en la tabla de colores del enlace que te puse antes. En este caso, como solo hemos definido una propiedad, no es necesario poner el punto y coma, pues no hay nada que separar. Te parece muy raro todo esto? No te preocupes, pronto te ser familiar y lo hars con los ojos cerrados... bueno con uno un poco abierto sale mejor.. je je.

Imagen de fondoLa imagen de fondo se define de forma similar al color de fondo. Primero vamos a escoger una imagen que nos guste. Tienes un montn en la Galera de Imgenes, pero puedes colocar cualquiera que tengas a mano. Cuando la tengas, copiala y la pegas en la carpeta "objetos" que hemos creado lecciones atrs en tu escritorio, dentro de la carpeta "web-ejemplo-cctw" que hay en la carpeta "mis-paginasweb", y una vez copiada all le cambias el nobre y le pones "fondo.png". Suponiendo que le hemos puesto de nombre fondo.png el cdigo a insertar en la hoja de estilos sera este: body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) } Fjate como hemos separado la propiedad color de fondo de la propiedad imagen de fondo con un punto y coma, tal y como te coment antes.

Explicando el Background-ImageEn este caso la propiedad se llama background-image y sirve para indicar el archivo de imagen de fondo que ha de tener la web. La ruta del archivo de imagen se escribe entre los parntesis tal y como hemos visto en el cdigo. Por defecto, es decir, si no decimos lo contrario, esta imagen de fondo se repetir horizontal y verticalmente para ocupar todo el fondo de la pgina, como formando un mosaico. Se puede hacer que no se repita, que se repita solo horizontalmente, o solo verticalmente e incluso que no se repita y colocarlo en el centro, o en la parte baja o a la derecha.... En cambio no es posible conseguir que solo salga una vez y que a la vez se expanda ocupando toda la pgina. Vamos a ver todas esas opciones.

Background-RepeatPara que el fondo solo salga una vez hay que decirle, en la misma lnea de la hoja de estilo que no se repita, de este modo: background-repeat: no-repeat quedando as el cdigo de la Hoja de Estilos: body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; backgroundrepeat: no-repeat } Para que el fondo se repita solo horizontalmente, se pone esto en su lugar: background-repeat: x body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; backgroundrepeat: x } Para que se repita solo verticalmente se escribe: background-repeat: y body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; backgroundrepeat: y } Para que se repita vertical y horizontalmente no hace falta poner nada, pero si lo deseas puedes poner esto: background-repeat: repeat, tal que as: body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; backgroundrepeat: repeat }

Background-PositionTambin puedes elegir que el fondo aparezca arriba y centrado, abajo a la izquierda y todas estas combinaciones con la propiedad background-position. Te dejo un ejemplo para que lo pruebes y veas como funciona: body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; backgroundrepeat: no-repeat ; background-position: left bottom} Los valores que puede tomar son: top (arriba), center (centrado) y bottom (abajo) para la alineacin vertical; y left (izquierda) center (centro) y right (derecha) para la alineacin horizontal, de modo que puedes usar cualquiera de esas combinaciones.

Aunque no se recomienda, tambin puedes usar distancias, es decir, indicarle que se posicione a 50 pixeles desde la derecha y 100 pixeles desde arriba, as: background-position: 50px 100px. Un pixel es una medida de distancia y equivale a un puntito de tu monitor. Si te acercas mucho mucho a tu monitor, casi pegando las narices a l, vers que todo est hecho con puntitos. Pues cada uno de esos es un pixel. Para hacerte una idea, estas letras que lees deben tener unos 10 pixeles de ancho cada letra. Una pgina web suele tener una achura de 800 pixeles.

Background-AttachmentEsto no funciona en todos los navegadores y hace que la imagen de fondo se quede fija mientras mueves la pgina con la barra de desplazamiento o que se mueva con ella. Los valores a tomar son fixed o scroll. Pero no te lo recomiendo por que depende del navegador conseguiras el efecto o no.

Nota:Realmente, si definimos una imagen de fondo no es necesario el color de fondo. Puede estar bien por si el archivo de la imagen de fondo no se cargara, pero si estamos seguros de que est bien podemos eliminar la propiedad background-color de la lnea de la hoja de estilos, no crees? Pues a no ser que la imagen no ocupe toda la pgina, la imagen tapar el color de fondo. En cambio si la imagen solo ocupa una parte si puede ser interesante colocar el color de fondo. Eso queda ya a tu criterio.

Aplicando color e imagen de fondo a nuestro ejemploUps, creo que en la pgina de antes me he pasado un poco escribiendo. Espero no haberte asustado, je je je. Solo acurdate de que ah hay informacin de los fondos por si algn da te hace falta. Vamos ahora a aplicar un color de fondo a la web de nuestro ejemplo.

Aplicando el color de fondoTal y como hemos visto antes, para aplicar el color de fondo #E6E6FA a la pgina web pondremos a la etiqueta body de nuestra hoja de estilo lo siguiente (ya sabes, abres el Html-Kit y abres la hoja de estilo para insertarle esta lnea): body {background-color: #E6E6FA}

Aplicando una imagen de fondoSuponiendo que hemos escogido esta imagen para el fondo de la web (lo se, es horrible, pero para el ejemplo sirve, no?):

y suponiendo que la hemos guardado en la carpeta "objetos" y que la hemos llamado "fondo.png", abrimos la hoja de estilo y dejamos la lnea de antes as: body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) } Como no quiero que se repita, le pongo tambien esto: body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; backgroundrepeat: no-repeat } Adems la quiero centrada tanto vertical como horizontalmente, as que le aado esto: body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; backgroundrepeat: no-repeat ; background-position: center center} En otros navegadores no pasa nada, pero en Firefox es necesario especificar la altura del body para que el fondo salga centrado verticalmente. Para conseguirlo solo hemos de indicar en esa misma lnea que el body va a tener una altura del 100%, esto es... que va a ocupar lo que tenga que ocupar. Una chorrada, lo se, pero si no el Firefox no se lo traga, de modo que lo ponemos y listo, perfecto: body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; backgroundposition: center center ; background-repeat: no-repeat ; height:100%; } A veces hay que buscar el truco para que se vea bien en cualquier navegador y la mayoria de veces es un calentamiento de cabeza tremendo, pero t tienes la suerte de contar con CCTW, je je je. La pgina de ejemplo, tras guardar la hoja de estilo, se vera as con cualquier navegador (espero...):

(Para guardrtela, pon el ratn sobre ella, haz clic derecho y escoge guardar como. Luego la guardas en la carpeta "objetos".)

Si t la ves diferente, rara, nos lo dices en el foro, en la seccin de Html-Kit y as lo reparamos y retocamos la leccin, oki? Qu tal? Mereci la pena el rollo de la pgina anterior? je je je. Intentar hacerlo ms ameno la prxima vez...

Cmo insertar una imagen en una pgina webYa hemos insertado una imagen como fondo de pgina pero para insertar una imagen dentro de la misma el procedimiento es algo distinto. Como puedes sospechar, como las imgenes son "visibles" van definidas dentro del Body. En qu lugar? Eso ya depende de donde la queramos insertar.

Dnde insertar la imagen.Si creamos la lnea de cdigo Html en cualquier parte dentro del Body, sta aparecer all, en cualquier parte. Al principio uno de los problemas que vas a tener es no saber en qu parte del cdigo Html insertar la lnea de cdigo correspondiente a un elemento para conseguir que aparezca donde deseas, verdad? Pues bien, una imagen puede insertarse o bien dentro de un prrafo, es decir, entre palabras, como este ejemplo y sin que el prrafo se corte, o bien como una lnea independiente. En ambos casos es aconsejable meterla en un prrafo, a pesar de que sea la imagen lo nico que haya en esa lnea, es decir, siempre encerrada entre y .

Cdigo Html para insertar una imagenPara insertar una imagen, se coloca el siguiente cdigo: Como ves, este es uno de los pocos casos en los que no hay etiqueta de cierre, es decir, no se pone . Recurdalo, oki? Las imgenes nunca tienen etiqueta de cierre. Vamos a ver lo que hay dentro de ese cdigo. Para empezar se coloca la ruta, que como siempre puede ser una ruta relativa (si la imagen pertenece a, o est guardada en tu espacio web) o absoluta (siempre que la imagen la ests obteniendo de otra web distinta a la tuya, aunque esto no es recomendable). Las rutas van siempre encerradas entre comillas, no lo olvides. Luego se coloca su anchura y altura expresada en pixeles con las siglas "px". No debes dejar nunca espacios en blanco entre la cantidad y las unidades, es decir, no vale poner esto "100 px", sino que lo vlido es ponerlo junto, as "100px". Estas cantidades las coloca normalmente el Html-Kit automticamente y si t las cambias seguramente la imagen se vea desvirtuada y perder definicin. Si necesitas cambiar el tamao mejor hacerlo con un programa grfico y luego la vuelves a pegar en la pgina, oki?

En el caso de que no pongamos ni width (anchura) ni height (altura), si el archivo de la pgina fallara, el resto de los elementos como prrafos etc, ocuparan el lugar de esa imagen. Sera como si no existiera. En cambio, si definimos anchura y altura, si ocurre un fallo con la imagen y esta no se muestra, el navegador dejar un rectngulo con esas medidas en blanco, respetando la estructura de la web, sin mover nada. Eso es bueno, no crees? Por ltimo vemos un alt="........". No es obligatorio, pero para tener un cdigo vlido es necesario poner ese alt y adems escribir entre las comillas una breve descripcin de la imagen. Este contenido aparece en el hueco de la imagen en el caso de que la propia imagen no se visualizara por algn problema. Por otro lado, algunos buscadores como Google tienen en cuenta estas palabras escritas en estas descripciones para relacionar las bsquedas de sus usuarios con el contenido de las pginas web, de modo que es bueno adems hacer que aquellas palabras por las que queremos ser encontrados aparezcan en esa descripcin. En mi caso, si quiero aparecer en Google cuando la gente busque por las palabras "html-kit", por ejemplo, me viene bien colocar descripciones en los alt de las imgenes como "Men del Html-Kit", o "As se descarga el Html-Kit", pero siempre que tengan su sentido con esa imagen, claro.

Vamos a insertar una imagen en nuestro ejemploEn primer lugar necesitaremos una imagen guardada en la carpeta "objetos", que para eso est. Copia esta misma que dejo debajo, la guardas en tu carpeta "objetos" y seguimos. Recuerda que para copirtela solo tienes que poner tu ratn sobre ella, apretar el botn derecho del ratn y escoger "Guardar imagen como...". Ponle el nombre sonrisa.gif y seguimos adelante.

Si ya tienes ese archivo guardado en "objetos" abre ahora el Html-Kit y la pgina index.html para continuar. Vamos a colocar la imagen entre el prrafo donde dice "Bienvenidos a mi pgina web" y el que dice "Pgina creada....". Como va entre los dos, nos vamos al Html-Kit a la vista "Editor" y ponemos el cursor despus del primer (al final de la lnea de cdigo del primer prrafo). A continuacin pulsamos Intro para crear una nueva lnea e insertamos esto (como te he dicho, la encerramos entre nuevos y que tambin debemos escribir):

Quieres aprender a hacerlo directamente desde las opciones del Html-Kit?Situa el cursor al final del primer prrafo, como antes. Pulsa Intro para crear una nueva lnea y seguidamente ve a la barra de herramientas del Html-Kit y escoge Etiquetas > Imagen > Insertar Imagen...

Aparece entonces esta ventana:

Pulsas sobre Add... y en la ventana que se abre (mira la imagen de aqui arriba) busca la carpeta "objetos". Tras pulsar en Aceptar se ve esto en la misma ventana:

Si seleccionas el archivo "sonrisa.gif" del cuadro de la derecha, vers como aparecen una serie de datos que te he sealado en rojo en la foto de arriba. Aparce la ruta relativa, lo que ocupa, el ancho, el alto, etc. Curioso, verdad? Nos falta ya que estamos ah poner la descripcin. Para eso pulsamos a la derecha de donde pone "alt" (arriba a la izquierda, junto a la ruta relativa) y escribimos la descripcin que te dije antes "Bienvenido al Ejemplo de CCTW". Como vers hay muchsimas ms opciones para las imgenes en esa ventana, pero por ahora lo dejamos as, para no saturarnos, oki? Tras escribir la descripcin y pulsar Ok, vemos como aparece la lnea de cdigo en nuestra index.html aunque le falta colocarle las unidades, es decir, escribir "px" tras cada cantidad de anchura y altura. Ponlo t mismo a mano (sin dejar espacios entre el nmero y el px !!!) y seguimos. Si te soy sincero, estoy aprendiendo a usar el Html-Kit a la vez que hago las lecciones, je je je. En cuanto descubra como hacer para que aparezcan las unidades automticamente os lo dir, .

Primeros Pasos Introducin Descargar Html-Kit La instalacin Configuracin En Castellano Simplificando El cdigo Html Mirando el Cdigo Un poco de Orden El Sitio Local Mi primera pgina Mi primer prrafo Mi primer enlace La Hoja de Estilos Relaccionar Estilos Fondos en CSS Fondo en Ejemplo Insertar Imgenes

Enlace de E-Mail Imagenes y CSS Centrar prrafos Por el momento..

Cmo insertar un enlace a tu E-MailSin conocer lo que piensan tus visitantes no tienes nada que hacer, nada que mejorar, de modo que colocar un enlace donde el usuario pueda hacer clic para escibirte un E-Milio parece algo imprescindible, verdad? Claro que ms adelante colocaremos un foro en la web, pero nunca est de ms al menos saber como insertar estos enlaces de correo, as que vamos a aprender.

Cdigo Html de un enlace de E-MailComo vas a ver, es muy parecido al cdigo Html de un enlace a otra pgina web. Solo cambian una palabrilla, y por supuesto la ruta, que en este caso ser simplemente tu direccin E-Mail. La lnea de cdigo en Html es la siguiente: Texto que quieras poner para hacer clic en l Donde pone "Texto que quieras poner.." escribe las palabras que ver el visitante y donde ha de hacer clic para enviarte el mensaje. Puedes poner "Envame un E-Milio", "Clic para escribirme" o simplemente la propia direccin de tu E-Mail.

Problemas de este tipo de enlaceEl problema que yo le veo a esto es que hay miles de robots pululando por la red en busca de direcciones de E-Mail para crear bases de datos con ellos y enviarles todo ese spam del que terminamos tan hartos. Por lo que quizs prefieras una alternativa, ms incomoda para el visitante pero efectiva contra el spam. Se trata de escribir tu direccin de E-Mail con un programa de dibujo y colocar la imagen en la web. De este modo, como las imgenes no pueden ser leidas, estos robots no pueden cazar tu direccin mientras que cualquiera de tus visitantes siempre puede leerla y escribirla en su programa de correo para mandarte sus felicitaciones. Tambin puedes colocar un botn cualquiera y hacer el enlace desde all. El botn sera un simple dibujo con el texto "E-Mail" o el dibujo de un buzn de correo o algo as. En ese caso los robots de spam no pueden leer la imagen, pero quizs puedan sacar la direccin de tu E-Mail desde el cdigo html de tu web, por lo que seguimos con el mismo problema... Qu hacemos entonces? Por el momento y para el caso del ejemplo, vamos a colocar el enlace de EMail en un dibujo de un buzn. Aunque sea para aprender, oki?

Enlace de E-Mail en una imagenPrimero gurdate esta imagen en tu carpeta de "objetos" para poder seguir. Al guardarla ponle de nombre buzon.gif

Ya tenemos tres archivos en la carpeta de "objetos":

Ahora abre el index de tu Html-Kit y pon la vista "Editor". Como siempre, puedes cerrar la ventana de Workspace de la derecha para tener ms sitio y maximizar la ventana del index. Mejor, verdad? je je. Pon el cursor del ratn justo al final de la lnea de cdigo del ltimo prrafo (justo antes de ), pulsa con el ratn una sola vez para colocar el cursor all y pulsa luego el Intro para crear una nueva lnea. Como te dije anteriormente, conviene poner las cosas dentro de un prrafo, de modo que creamos ese prrafo an vacio escribiendo sus etiquetas . Ahora situa el cursor dentro de ese prrafo (colocndolo entre y ) y en el Html-Kit tal y como hicimos anteriormente pulsa en insertar una imagen (te dejo una foto para que recuerdes cmo era):

(Fijate como en la lnea nmero 15 del cdigo html en la imagen de arriba, he escrito ya y he colocado el cursor entre esas dos etiquetas) Y del mismo modo que la otra vez, ponemos algunos datos en la ventana que aparece:

Fjate como tras seleccionar el archivo buzn en la ventana derecha de arriba, podemos escribir el "alt" del que hablamos pginas atras, y como por fn he descubierto como poner las unidades en el ancho y alto de la imagen.... era obvio verdad? je je je. Pues si, escribe "px" detrs de cada cifra de auchura y altura despus de poner al "alt" y luego pulsa el Ok. Automticamente aparece esa nueva lnea de cdigo Html en la ventana de nuestro index y si le das a "preview" podrs ver el buzn en cuestin. Vamos ahora a colocarle el enlace a nuestro EMail.

Enlace de E-Mail con Html-Kit:Para insertar un enlace de E-Mail desde una imagen, tienes que seleccionar todo el cdigo html de la imagen primero. Si te cuesta trabajo seleccionarlo, prueba colocando el cursor en el inicio y luego haciendo clic pulsando a la vez la tecla "Shift" (es la flecha que apunta para arriba, esa que se pulsa para escribir maysculas, justo encima del "Control") de tu teclado teniendo el cursor al final del cdigo que quieres seleccionar. Lo que tienes que seleccionar es el que he puesto arriba, desde . No selecciones la parte de ni la de , oki? Una vez seleccionado pulsa en la barra de herramientas del Html-Kit sobre Etiquetas > Crear Link...:

Se abre la ventana de los links y vemos como en la ventana de la parte inferior derecha aparece la imagen seleccionada (aunque puede que no se vea). Ahora en la lista de opciones de la izquierda de esa ventana, en la lnea que pone "href" escoge "mailto:", as:

y a continuacin de mailto: escribe tu direccin de correo.

Despus pulsa Ok y listo!

Los estilos CSS para las imgenes con enlacesComo vers si pulsas en "Overview" o vista previa, la imagen del buzn de correo aparece recuadrada en azul. Esto es porque por defecto, los enlaces aparecen siempre subrayados con una lna azul, para indicar que son enlaces. Cuando se hace un enlace desde una imagen en lugar de aparecer subrrayada aparece recuadrada en azul. Esto no queda demasiado bien, de modo que vamos a corregirlo.Vers qu rpido y fcil se hace esto con la hoja de estilo y sin tocar para nada el index. Cierra el index.html de tu Html-Kit y abre la hoja de estilos llamada "estilos.css". Vers como solo tenemos aquella lnea que habiamos definido para el body. Vamos a incluir otra lnea ms con este contenido: img {border-style: none} Esto indica que, todos los elementos de imagen (img) han de cumplir lo que hemos puesto entre corchetes, es decir, que no tengan ningna tipo de borde.

Si guardamos la hoja de estilo y abrimos el index.html veremos como en el "Overview" o vista previa ya no aparece ese recuadro. Tampoco saldr ya en ninguna de las imgenes de ninguna de nuestras pginas. Buen invento esta hoja de estilos, verdad? Pues an tiene cosas mejores, ya lo vers ms adelante.

Cmo centrar un prrafo de la pgina webLo que hemos conseguido hasta ahora no es gran cosa comparado con lo que nos espera, pero por lo pronto hemos aprendido ya algunas cosas interesantes. El aspecto de la web conseguida hasta ahora no est mal del todo, pero se le echa en falta por lo menos el conseguir centrar algunos prrafos. Vamos a aprender a centrar prrafos de un modo muy sencillo gracias como siempre a nuestra grandiosa Hoja de Estilos.

Crear un estilo centradoLa propiedad en CSS que define la alineacin de un elemento es text-align y se le pueden dar los valores left (pegado a la izquierda), right (pegado a la derecha), center (centrado), y justify (justificado). Si quisieramos que todos los prrafos aparecieran centrados, bastara con poner en la Hoja de Estilo esta lnea: p {text-align:center}

El problema de esto es que nos centra TODOS los prrafos y seguramente no queramos eso, sino centrar solo unos pocos. En estos casos en los que queremos definir un estilo pero no queremos que se aplique a todos los elementos, es necesario definir lo que se llaman Clases de Estilo. Por ejemplo, podramos crear un nuevo tipo o clase de estilo que podemos llamar como queramos, por ejemplo "centrado". Definimos en la Hoja de Estilo las propiedades que queremos que tenga y luego en el Html de la pgina le indicamos a un prrafo concreto que ha de tomar ese estilo. Vamos a verlo por partes.

Crear una clase de estiloAbrimos la Hoja de Estilo y escribimos esta lnea: .centrado {text-align:center} Fjate que hemos puesto un punto seguido del nombre que nos ha dado la gana y a continuacin entre los corchetes hemos dado la propiedad de centrado. Es importante que sepas que al ponerle nombre a estos estilos creados por nosotros hemos de seguir ciertas normas para evitar problemas: - Siempre en minsculas. - No poner acentos, simbolos raros ni espacios en blanco. Solo letras y nmeros. - Nunca empezar el nombre con un nmero. - Si necesitas separar el nombre en dos o ms palabras usa guiones medios "nombre-nombre", nunca bajos "nombre_nombre". Bien, una vez claras estas normas (recurdalas muy bien!) guarda la Hoja de Estilos y abrimos el index.html para centrar algunos prrafos.

Centrar prrafos en el HtmlComo recordars, todos los prrafos empiezan con la etiqueta . Pues es dentro de esa etiqueta donde tenemos que indicarle (si es que lo queremos as) la clase de estilo que queremos que tome. Vamos por ejemplo a centrar el prrafo donde ponemos "Bienvenidos...". Para ello vamos a la vista del cdigo html del index y modificamos esa etiqueta dejndola as: Bienvenidos a mi pgina web. Muy pronto estar lista! Si ahora haces vista previa o "Overview" desde el Html-Kit, vers como este prrafo aparece ahora centrado. Fcil, verdad? A partir de ahora, cada vez que quieras centrar un elemento solo tienes que ponerle class="centrado" dentro de la etiqueta de inicio en su cdigo Html. Que te quede claro: Se define en la Hoja de Estilo poniendo un punto, ms el nombre, y se indica en el html con class="nombre" (aqu sin el punto). Estas cosas no las sabe cualquiera, no te creas... ests empezando a ser un Webmaster de verdad!

Cmo va nuestra pgina web por el momento?Por si te has perdido o por si has estado experimentando por tu cuenta y te has cargao el cdigo Html de la web de ejemplo, te dejo aqu lo conseguido hasta el momento. Recuerda que puedes hacer experimentos creando otro sitio local, creando otra carpeta dentro de la carpeta "mis-paginas-web" que hemos creado en tu escritorio y repitiendo los primeros pasos de estas lecciones. Pero la web del ejemplo es mejor que no la toques mucho pues te podras perder cuando la usamos en las lecciones siguientes, oki? La maravillosa Hoja de Estilo queda as:body { background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; background-repeat: no-repeat ; background-position: center center } { border-style: none }

.centrado { text-align:center }

Y el cdigo Html del index.html de ejemplo as:

Pagina Principal del Ejemplo CCTW Bienvenidos a mi pgina w eb. Muy pronto estar lista! Pgina creada gracias a CCTW

Y con esta pgina terminamos con la primera leccin. Pulsando arriba, en la barra de navegacin naranja sobre "Leccin Segunda" o pulsando en la flecha derecha de aqu abajo continuamos con la segunda, donde empezaremos a meter mano a la plantilla. Espero que me des tu opinin de estas lecciones en el Foro CCTW, eh? Solo con tu punto de vista y tu opinin puedo mejorar todo esto, acurdate de m! je je je.Paso

Comenzando a crear la plantilla de nuestra pgina WebLa pgina index.html que hemos visto hasta el momento no est terminada ni mucho menos. Su aspecto final no tiene nada que ver con lo que tiene ahora, pero trabajaremos sobre ella ms adelante. Ahora lo que vamos a hacer es comenzar creando la plantilla, que nos valdr para generar a partir de ella el resto de pginas de nuestra web.

Crear el archivo plantilla.htmlRecordando los pasos dados antes para crear el index.html vamos a crear ahora el archivo de la plantilla. Te doy pistas por si no te acuerdas.

Abrimos el Html-Kit. Hacemos visible la ventana Workspace. Ponemos el ratn sobre el sitio "web-ejemplo-cctw-local" y pulsamos sobre l con elbotn derecho del ratn. Escogemos New > Create File...

La estructuracin con Capas o Divs?El darle forma a una web se le suele llamar estructurarla, o enmaquetarla. Es darle una estructura concreta para colocar luego el men aqu, el contenido all, etc. Para estructurar una web podemos usar simples saltos de lnea, o avanzar un poco ms y usar tablas, que dividen el espacio en celdas, celdas en las que podemos colocar ms comodamente los elementos que queramos. Tambin se puede estructurar una web partindola en frames o marcos. Pero el mtodo ms profesional, lmpio y cmodo es sin duda el uso de Capas o Divs (es lo mismo decir capa que div).

Qu es una Capa o un DIV?No es ms que un elemento rectangular dentro del cual podemos incluir lo que queramos, palabras, prrafos, enlaces, imgenes, varias de estas cosas a la vez o incluso otras capas o tambin tablas. Es un

simple hueco. Lo bueno que tiene es que luego, desde la Hoja de Estilos, podemos darle a todo su contenido propiedades como color de fondo, tamao de letra, dimensiones de ese recuadro, margenes, bordes, etc, etc. Al principio quizs te de un poco de pnico todo esto, pero te prometo que no es nada dificil, ya vers. Fjate, esto de abajo es el cdigo Html de un Div sencillo. Bienvenidos a mi Web A que no te ha dolido? je je. Como puedes ver, igual que ocurra con los elementos que vimos atrs, empieza con una etiqueta y termina con otra de cierre, igual pero con la contrabarra delante. Entre ambas etiquetas se coloca su contenido. Escribe esa lnea de cdigo en el archivo plantilla.html, por supuesto, entre y pues se trata de algo que debe "verse". Ahora haz vista previa "Preview" y observa qu aparece. Nada asombroso, ya lo se.

Dando estilos a un DivEse Div no tiene ningn atractivo, claro. Para adornarlo lo que hacemos es definir un tipo de estilo en la Hoja de Estilos y aplicarselo a ese DIV. Para empezar a jugar, abre el archivo estilo-general.css que se abrir vacio, pon esto dentro y luego gurdalo: #cabecera {background-color: pink } Nota: Cada vez que hagas un cambio en la Hoja de Estilos, tienes que guardarla para poder ver sus efectos en la vista previa de la pgina web.

Clases de Estilo y Estilos nicosExisten dos formas de definir estilos. Una es crear una clase de estilo, que es un tipo de estilo que podemos asignar luego a uno o a varios elementos. Por otro lado estn los estilos nicos, que solo se deben aplicar a un elemento por pgina web. Las clases de estilo, que se pueden usar sobre varios elementos (varios prrafos, varias celdas, enlaces, etc) se definen en la Hoja de Estilo como vimos al crear la clase de estilo ".centrado", es decir, con un punto delante del nombre y luego colocando las propiedades entre los corchetes. Luego, en el cdigo Html se asigna esa clase de estilo a un elemento colocando dentro de su etiqueta de inicio esto, class="nombredelaclasedeestilo". En cambio los estilos nicos se definen en la Hoja de Estilo con una almohadilla como esta "#" (se escribe pulsando a la vez la tecla Alt Gr, que est a la derecha del espacio y la tecla del nmero 3 de tu teclado) en lugar de con un punto, y en el cdigo Html se asigna este tipo de estilo nico escribiendo dentro de la etiqueta del elemento esto otro id="nombredelestilounico" en lugar de con el class, que es para clases (estilos que se pueden asignar a varios elementos). Si te he echo la picha un lio, leelo despacito. Es importante entenderlo. Como puedes ver, el estilo de antes #cabecera {background-color: pink } es un Estilo nico y por lo tanto se asigna este tipo a un solo elemento, y se hace en el Html as: Bienvenidos a mi Web Abre ahora el archivo plantilla.html y pon esa lnea de cdigo. Ha de quedar as: Page title Bienvenidos a mi Web

Si has guardado antes la Hoja de Estilo y haces vista previa en la plantilla, vers como ahora la frase "Bienvenido a mi Web" aparece diferente. Con un fondo rosa (pink). Es la magia del CSS aplicado a los Divs, pero no te creas que esto queda as, vers lo asombroso que es todo esto ms adelante.

Ms capas, ms capasYa tenemos nuestra primera capa llamada cabecera. Al final de estas lecciones esta capa contendr la cabecera, que segurametne conste del logotipo de la web y de un hueco para, por ejemplo, algo de publicidad para sufragar los gastos de un posible dominio propio y quin sabe, de un hosting de pago... no es algo descabellado, no te creas.

Pero con esa capa sola no tenemos ni para empezar, je je. Vamos a crear una segunda capa que contendr una barra de navegacin. La llamaremos, navegacion (sin acentos, y todo en minsculas, claro).

Qu es una barra de navegacin?Una de las cosas ms importantes en una pgina web es el dar facilidades al visitante para que pueda navegar por nuestras pginas sin perderse y que lo tenga todo siempre a mano. No es bueno tener pginas escondidas, es decir, pginas a las que para acceder haya que ir primero a la seccin tal, luego a la subseccin cual, luego entrar en otro lado y finalmente conseguir acceder a una pgina en concreto. Todas las pginas deberan ser accesibles sin ms que pulsar un par de enlaces desde el index o pgina principal. La barra de navegacin nos ayuda a esto. En esta barra que aparecer en todas las pginas de la web pondremos enlaces a las secciones que tratemos. As, en cualquier momento el visitante puede ir de un lado a otro sin perderse. Esto es son varios ejemplos de barras de navegacin:

Como ves, dan acceso a varias secciones y pueden ser muy sencillas o ms complicadas o llamativas con lengetas y todo eso. Pues ahora que sabes lo que son, vamos a crear la capa de nuestra barra de navegacin.

Creando la capa navegacionLa llamaremos "navegacion" y solo va a existir una por pgina, luego se trata de un estilo nico y se define por tanto as en la Hoja de estilo: #navegacion {background-color: gray } Escribimos eso en la Hoja de Estilo. Despus abrimos la plantilla.html y escribimos, a continuacin del div cabecera, esta otra lnea: Barra de Navegacin Como puedes ver, en la Hoja de Estilo le hemos dado a navegacion la propiedad de color de fondo gris (gray). Ms adelante le pondremos ms cosas, pero ahora seguimos creando el resto de capas.

Creando las capas contenido y pieYa que estamos, vamos a crear dos capas ms. La primera se llamar contenido y en ella pondremos luego un men lateral y los textos de nuestra web, la parte principal. Tambin vamos a crear otra capa para la parte ms baja de la web que llamaremos pie en la que ms tarde tendremos algunos enlaces, un mensaje de copyright y puede que otro espacio para publicidad, ya veremos. Siguiendo las mismas instrucciones que antes, definimos estas otras dos capas en la Hoja de Estilo: #contenido {background-color: orange} #pie {background-color: brown} Y tras guardas la Hoja de Estilo, abrimos la plantilla.html y ponemos estas otras dos lneas despus de la de la capa navegacion: Esta ser la zona principal de la web Este es el pi de pgina

Y el resultado es...Tras guardar todo, en la Hoja de Estilo tendrs esto:#cabecera {background-color: pink } #navegacion {background-color: gray } #contenido {background-color: orange } #pie {background-color: brow n }

En la plantilla.html esto otro:

Page title Bienvenidos a mi Web Barra de Navegacin Esta ser la zona principal de la w eb Este es el pi de pgina

Y aqu tienes el resultado del ejemplo. Se que no parece una pgina web, pero no me dirs que no est tomando forma, no? Vers como esto empieza a cambiar en breve..

Escogemos crear "Blank Html Page" desde la pestaa "General" y pulsamos Ok.

Le ponemos de nombre plantilla.html y pulsamos Ok de nuevo.

Ahora la abrimos haciendo doble clic en su nombre, en la ventana Workspace para empezar a trabajar sobre ella. Como siempre que se crea un archivo nuevo, aparece casi vacio.

Creando la Hoja de Estilo para el resto de pginas de la webHacemos lo mismo para crear una Hoja de Estilo distinta a la anterior. Mientras que la anterior (estilos.css) la vamos a usar solo para el index, esta segunda Hoja de Estilo que llamaremos "estilo-general.css" se usar para todas las dems pginas de la web. Crala tu mismo. Toma, por si no te acuerdas de cmo crear una Hoja de Estilo Vacia, pero recuerda ponerle de nombre "estilo-general.css".

Relacionando estilo-general.css con plantilla.htmlAhora te toca relacionar esta segunda Hoja de Estilos con la plantilla.html recien creada. Te recuerdo que haba que colocar una lnea de cdigo en el Head. Te dejo esto por si no te acuerdas de cmo relacionar la hoja de estilo con la web, pero recuerda poner en la ruta "estilo-general.css" en lugar de "estilos.css", oki? Como tanto plantilla.html como estilo-general.css estn en la misma carpeta, es suficiente con escribir esto:

Una vez creados estos dos archivos y relacionados entre s, pasamos a meterles mano.

Resoluciones de pantalla y pginas webExisten varias formas de darle un tamao a una pgina web. Por ejemplo, podemos hacer que ocupe toda la pantalla del navegador del usuario, sea como sea esta de grande, la tenga o no maximizada (la ventana...), o tambin podemos darle un ancho concreto, de modo que los que tengan un monitor pequeo la vern muy grande y los que la tengan ms grande (la pantalla...) la vern ms chica... Ambos casos tienen su parte buena y su parte mala. En el primer caso, si le decimos que ocupe toda la pantalla del navegador es muy posible que la web se desmorone cuando el usuario cambie el tamao de esa ventana. Los elementos grandes no caben y desplazan el contenido siguiente hacia abajo, produciendo un caos en la web. Lo bueno es que se aprovecharia todo el espacio, cuando lo hay, claro. El otro caso es darle un ancho fijo a la pgina web (por ejemplo 20 cm, o 800 pixeles). As el usuario podr hacer lo que quiera con la ventana de su navegador que la web seguir manteniendo su forma y no se deformar en absoluto. Eso es lo bueno, lo malo es que si no acertamos en qu anchura darle, pasar que unos la vern muy grande y la vern tan pequea que tendrs ms margenes a los lados que espacio para la web....

Qu opcin tomamos entonces?Lo mejor es tomar la segunda opcin, dar un ancho fijo a la web, pero estudiando muy bien cul ser esa anchura. Lo mejor es darle un ancho que sea cmodo para la resolucin ms usada por todo nuestro pblico. As, si unos pocos usan una resolucin de pantalla un poco mayor no vern unos mrgenes exagerados y los que usen resoluciones un poco menores al ancho que le demos, no tendrn que usar demasiado la barra de desplazamiento y adems, sern la minora. Parece ser que hoy por hoy la anchura ptima para una pgina web es de 800 pixeles. De hecho, si miras las webs que sueles visitar vers que es as y que quedan muy bien con cualquier resolucin. As que... vamos a darle a la web del ejemplo esa anchura y adems vamos a hacer que aparezca centrada en la ventana del navegador, las dos cosas a la vez, oki? Sers capaz? je je, fijo que s.

Un Div para dominarlos a todosss

Excto. Como queremos centrarlo todo, lo que haremos ser encerrar toda la parte visible de la web en un div al que le definiremos en la Hoja de Estilo la propiedad de centrado, pero de un modo algo especial para que funcione en todos los navegadores. Llamaremos a esa capa.... "global". Como va a ser nica, es decir, solo va a haber un elemento "global" por pgina, en lugar de definirlo con un punto delante y el class="global" en el Html, lo haremos con la almohadilla y con id="global". Para encerrar todo lo visible, ponemos la etiqueta de inicio justo despus de y la de cierre justo antes de . El cdigo Html queda as:

Ves como encierra a los otros divs? Ahora, en la hoja de estilo definimos #global con las siguientes propiedades: #global {width:800px ; margin: 4px auto } Esto significa que la capa global tendr un ancho de 800 pixeles y aparece una propiedad que no hemos visto antes, (margin: 4px auto) que define el margen a dejar entre el elemento (en este caso el div global) y el resto de cosas a su alrededor. El 4px es la cantidad de margen que vamos a dejar por encima y por debajo de la web, mientras que auto es la cantidad de margen que dejaremos por cada lado. Auto significa automtico, por lo que se dejar todo lo que exceda de 800px y automticamente, es decir, la mitad a la derecha y la otra mitad a la izquierda y por tanto, centrado. Lo veremos mejor ms adelante, no te preocupes si no lo entiendes demasiado bien, vale? Esto no funciona en todos los navegadores a menos que definamos una caracteristica a Body en la Hoja de Estilo estilo-general.css. Abrela si la cerraste y escribe al principio del todo esta nueva lnea de css: body {text-align: center} Body no es un nombre de un estilo inventado por nosotros, como cabecera, pie, tal y cual, sino que es una etiqueta de Html, y a las etiquetas de Html (como body, p, a, table, div, etc..) no se les pone ni el punto delante ni la almohadilla (#). Lo que estamos haciendo al ponerle propiedades a una etiqueta es cambiar las propiedades que tiene por defecto. Con esto ya queda toda la web centrada en toooodos los navegadores. Si guardas ahora la Hoja de Estilo y haces vista previa de la plantilla.html vers como todo aparece centrado y con un ancho fijo de 800px. Ahora no ser fcil descuadrar tu web. Esto es lo que hemos conseguido con el ejemplo hasta el momento. Va mejorando poco a poco....

El men de nuestra pgina webPresta mucha atencin en esta leccin, que igual es un poco espesa, pero merece la pena para crear el men lateral y empezar a entender como se usan estas capas o divs. Ahora queremos crear un men lateral parecido al de esta misma web, el de la izquierda de estas lneas. Te gusta? Pues a ti te puede quedar mucho mejor si tienes un poco de gusto y ganas de experimentar. Como un men es ms o menos una zona rectangular, vamos a crear una capa para meter en ella este men. Como queremos que salga dentro de la parte central de la pgina, dentro de la zona de los textos, meteremos o crearemos este div que vamos a llamar menu dentro del div contenido. Parece lgico, no? Esto es lo que se llama anidar capas. Empezamos creando la capa. Abre en el Html-Kit la plantilla.html y escribe la siguiente lnea justo despus de la etiqueta de inicio de la capa contenidos y antes del texto de dentro suya (Esta ser la.....bla bla blal...), de forma que quede el cdigo Html as:

Como vers, despus del cdigo Html de la capa menu, van los textos de la capa contenido (Esta ser la ....) y despus, en la siguiente lnea vemos la etiqueta de cierre del div contenidos. Ahora tienes que definir el estilo de la capa menu en la Hoja de Estilos. Abre estilo-general.css y escribe esta lnea para el div menu: #menu {background-color: yellow; width: 150px ; float:left }

Como solo hay un men por pgina, lo definimos como estilo nico, con la almohadilla (#). Le ponemos un color diferente al resto para distinguir donde empieza y donde termina la capa menu y colocamos dos propiedades ms. La primera es width:150px con la que le damos una anchura fija de 150 pixeles. Quizs sea poco, pero por ahora lo dejamos as hasta que veamos si nos va a faltar anchura en esa capa. La segunda nueva caraterstica que vemos es nueva, la propiedad Float.

Para que sirve la propiedad Float?La propiedad Float hace que el elemento flote sobre el resto de la web. Esto vale para cambiarlo de posicin ms fcilmente. A la propiedad float se le suele poner uno de estos dos valores: left (que flote a la izquierda) o right (lo manda a la derecha). Como nosotros queremos tenerlo a la izquierda, le pondremos la propiedad float:left y esto lo manda pegarse al borde izquierdo de la capa en la que est, es decir, a la izquierda de la capa contenido.

Y el resultado final.... por ahora...La Hoja de Estilos queda por tanto as (puedes ver como voy ordenando los estilos definidos por orden de aparicin en la pgina, de arriba a abajo):

Ale, lo de siempre.. guarda la Hoja de Estilos y mira como est quedando la plantilla haciendo vista previa, o si el cansancio puede contigo, miralo aqu mismo, je je je. Bueno, ya estn todas las capas creadas (mucho ms adelante quizs metamos alguna ms...) as que ahora vamos a rellenarlas y a darles una mejor presencia, oki?

Rellenando el men de nuestra pgina webEl men as como lo hemos dejado ni parece men ni parece n de n. Vamos a insertarle algunos enlaces (ficticios, pues an no tenemos pginas que enlazar) y as de paso vemos como se estructura correctamente.

Si es un listado, usa listasPuedes imaginar el men como una serie de enlaces uno debajo de otro. Se podra pensar en colocar un div para cada uno de ellos, es decir, incluir tantos divs pequeos dentro de la capa menu como enlaces vayamos a poner, pero parece demasiada capa, no? En realidad un men no es ms que una lista y, lo mejor para poner una lista es usar el elemento... lista? Excto.

Como se hace una listaLas listas se definen en Html con dos etiquetas, la primera indica el principio de la lista y es

mientras que la otra define el inicio de un elemento de la lista, que es

. Te lo puedes apuntar, yo siempre me liaba y terminaba poniendo lu y il, je je je. Por supuesto, cuando termina la lista se coloca su etiqueta de cierre que ser

y cuando termina un elemento de la lista (un enlace en este caso) se coloca , de forma que el cdigo Html de una lista completa sera este mismo:

y se vera haciendo vista previa de este modo:

Para nuestro ejemplo, seguramente nos moleste el dichoso puntito negro a la izquierda de cada elemento de lista, pero eso lo podemos arreglar. Cmo? Pues como siempre, con solo poner una cosilla

en la Hoja de Estilos. Pero antes vamos a ver qu cul es el cdigo que tendramos que colocar dentro del div del men. Para empezar, abre tu Html-Kit y escribe el cdigo de arriba dentro del div menu, eliminando claro la palabra "men" que habia ya colocada. Ha de quedar de este modo:

Si haces vista previa vers cosas un poco raras, como que el men se descuelga un poco por debajo de la web, pero eso lo arreglamos en las siguientes pginas.

Enlaces para el men de nuestra pgina webComo recordars (eso espero...) los enlaces tenian esta forma: Texto del Enlace as que vamos a poner ese cdigo dentro de cada elemento li de la lista del men. Si ponemos una ruta falsa nos dar algn problema, asi que en lugar de poner nada en la ruta le vamos a colocar una almohadilla (#) que sirve para que haga el efecto de enlace pero sin enviarnos a ningn lado por ahora. Cuando tengamos ms pginas en la web pondremos las rutas de aquellas pginas que queremos enlazar desde el men, vale? Enlace 1 Como no vamos a querer que se abran esos enlaces en pginas distintas sino en la misma, no es necesario ponerle el target al cdigo del enlace (el target="_blank" se pone para que el enlace se abra en una pgina distinta, lo recuerdas?). Pues adelante, abre tu Html-Kit, abre la plantilla.html y coloca un enlace en cada uno de los tres elementos de lista que tenemos. Para diferenciarlos, puedes escribir Enlace 1, Enlace 2 y Enlace 3. As que el cdigo del men completo se tiene que quedar as:

Eso es todo lo que tenemos que hacer en la plantilla.html porque lo dems, el "aspecto" como siempre, se lo daremos con la Hoja de Estilo ahora mimo.

Dar estilos Css a la lista del menVamos a empezar a arreglar cosas en la Hoja de Estilos para dar mejor aspecto a este men. Recuerda que la estrategia perfecta para no tener problemas con algunos navegadores y para tener un cdigo Html sencillo para revisarlo nosotros, y sencillo para que los buscadores lo lean bien e indexen nuestras pginas correctamente, es poner en el Html lo justito, y dejar los detalles de cmo queremos adornar cada cosa para la Hoja de Estilo. Adems esto nos permitir hacer cualquier cambio en todas las pginas de nuestra web con solo cambiar una palabra en la Hoja de Estilos. Es genial.

Reparando el fallo del men.Si ya hiciste vista previa de la plantilla, habrs visto que al poner varios enlaces dentro ha crecido y se sale por debajo de la pgina web. Vamos a reparar esto desde la Hoja de Estilo. Abre tu Html-Kit y abre estilo-general.css

Esto, despus de muuuchas pruebas lo he conseguido arreglar de este modo, colocando un width: 800px y un float:left a la capa contenido. No me preguntes mucho porqu, pero es la nica combinacin que logra que en todos los navegadores se corrija ese fallo. Realmente le estamos indicando a la capa contenido que ha de tener un ancho de 800 pixeles, igual que el ancho de la pgina. En realidad parece que ocupara menos, pero ten en cuenta que el men est dentro de l, luego lo amarillo del men es parte de la capa contenido. Ves ahora como s ha de tener 800px de ancho? El colocarle el float:left evita que en algn navegador se descuadre todo. No se explicarte porqu ahora mismo, y vers como a veces, a pesar de que cumplas todas las buenas prcticas que se pueden leer por la red, hay que hacer alguna "pirula" para que se vea correctamente la pgina web con cualquier navegador. Es todo un reto, pero por ahora lo estamos consiguiendo. Sin ms rollo, abres la Hoja de Estilo, dejas la lnea del estilo contenido de este modo: #contenido {background-color: orange ; width: 800px ; float:left} y luego guardas la Hoja de Estilo y haces vista previa de la plantilla.html para que veas como ahora todo se ha solucionado... o no? Si ves algn fallo no dudes en decirmelo en el Foro CCTW, plis!

Eliminando los puntos de la listaEsta es fcil y comprensible. Podemos modificar las propiedades del elemento li en la Hoja de Estilos, pero el problema que podemos tener es que si lo hacemos as, todas las listas que tengamos en la web dejarn de tener ese punto, y es ms, tomarn todas las propiedades que le digamos ahora. Por eso, mejor que modificar las propiedades del elemento li, lo que haremos ser crear un estilo nuevo de li, que usaremos solo en el men. De este modo todas las listas que pudieramos poner en las otras partes de la web seran normales. As que, definiremos en la Hoja de Estilo propiedades para todos los li que cumplan la condicin de estar dentro de la capa menu. Toma ya. Cmo te has quedao? je je je. Esto se hace as: #menu li { ...propiedades..... } Cuando se pone la capa antes de un tipo de estilo, se est indicando que esas propiedades solo han de respetarse cuando el elemento (en este caso el li) est dentro de la capa escrita antes (en este caso menu). Que bien, no? Las propiedades que le vamos a dar son las siguientes: #menu li { list-style:none } Esto hace que no tenga ningn (none) tipo de estilo, como por ejemplo el puntito aquel. Si guardas la Hoja de Estilo (estilo-general.css) y haces vista previa de la plantilla vers que ya no aparece. En la pgina siguiente seguimos arreglando el men.

Segunda Leccin

Creando la plantilla Las Capas o Divs Creando ms capas Una anchura fija El Men de la Web Enlaces del men Estilos para enlaces Estilos para Listas Dar Formato a Cero Mrgenes del Men Enlaces Cambiantes Enlaces con Fondo Margen en Prrafos Indentar Prrafos Margin y Padding Separar el Men Los ttulos Posicionamiento

Formatear los estilos a ceroSi tuvieras varios navegadores diferentes, como el Internet Exporer, el Opera, el Firefox, etc, etc, te darias cuenta que en cada uno de ellos el men (y algunas otras cosas) se ve ligeramente distinto. En

unos los enlaces aparecen en el centro, en otros un poco a la derecha, o un poco ms a la izquierda en otros.. Esto es porque mientras no se indique lo contrario, unos navegadores deciden dejar un margen de unos pocos pixeles para cada elemento, mientras otros navegadores deciden que no, que hay que dejar un poco ms o un poco menos... Al final lo que ocurre es que parece imposible ver una pgina web exctamente igual con todos los navegadores. Todos los problemas de este tipo no los vamos a poder arreglar de golpe, pero uno bien importante s. Como cada uno toma por defecto un valor inicial para los margenes y bordes, lo que haremos ser indicar nosotros en la Hoja de Estilos que TODOS los elementos van a tener un valor cero para los bordes y margenes. Luego, si deseamos cambiar alguno, lo definiremos en la Hoja de Estilos, pero por el momento lo ponemos todo a cero, o lo que es igual, vamos a formatear los estilos! Para indicar que ha de aplicarse a todos, ponemos un asterisco. Para indicar que tengan margen, padding (padding es otro tipo de margen que ya explicar) y borde cero basta

Aprender a Crear una Página Web Paso a Paso

Documents

Transcript of Aprender a Crear una Página Web Paso a Paso