Primer Contacto Con El Código HTML

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 HtmlKit, 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 web

Todas las pginas web empiezan y terminan con el mismo cdigo y es el siguiente:
<html> </html>
(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 <html> indica que ah empieza el cdigo de la web. La segunda </html> 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 HTML

Dentro 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:
<html> <head> </head> <body> </body> </html>

En Html, se indica que va a empezar la cabecera con la palabra <head> y termina con la misma palabra pero colocandole la contrabarra, </head> tal y como hemos visto que pasaba para cerrar </html>. Lo mismo podemos decir del cuerpo, que comienza con <body> y termina con </body>. 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 web

Una 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):
<html> <head>
<title>Este es el ttulo de mi web y puedo escribir lo que quiera! </title> </head> <body> </body> </html>
Como siempre, empieza por la palabra <title> y termina con la misma pero con la contrabarra delante, es decir, con </title>. 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 webs

Cuando 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.
Configurar nuestro Sitio en en Html-Kit

Ahora 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 WorkSpace

Empezamos 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 Virtual

Dentro 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 web
La 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!
Cmo crear un prrafo en la pgina web

Si 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 <body> y </body> 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 <html> seguido de la cabecera y despus el cuerpo o Body, para cerrarse al final con </html> 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 ttulo
Vamos 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 <title> y </title>.
Mi primer prrafo
Al igual que un ttulo se escribe entre <title> y </title>, 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 <body> y </body>. 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 pgina

Para 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 realizados

Para 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 web

Lo 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 vnculos

Como estars sospechando, los enlaces empiezan con una etiqueta y terminan con otra de cierre. La etiqueta de inicio para definir enlaces es <a> y la de cierre </a>. 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: <a>palabra</a> 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: <a href="ruta">palabra</a>
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: <a href="http://www.comocreartuweb.com">CCTW</a> 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 css

Este 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?
Relaccionar la Hoja de Estilos CSS con la pgina web

Ahora 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 <head> y </head> es esta: <link rel="stylesheet" href="ruta/estilos.css" type="text/css" media="all">
(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. <link rel="stylesheet" href="estilos.css" type="text/css" media="all"> 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 web

Aunque 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 fondo
Por 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 CSS

Ya 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 fondo
La 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-paginas-web", 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-Image
En 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-Repeat
Para 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:repeatx body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; backgroundrepeat:repeat-x } Para que se repita solo verticalmente se escribe: background-repeat:repeat-y body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; backgroundrepeat:repeat-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 } An hay otro valor posible que podemos dar. Se trata del valor "inherit" que significa algo as como fondo anclado. Significa que aunque movamos la web el fondo quedara fijo y solo se desplaza el contenido, no el fondo. Eso si, no funciona en todos los navegadores, tenlo en cuenta si lo aplicas.
Background-Position
Tambin 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-Attachment
Esto 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 ejemplo

Ups, 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 fondo

Tal 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 fondo

Suponiendo 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 web

Ya 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 imagen

Para insertar una imagen, se coloca el siguiente cdigo: <img src="ruta/imagen.gif" width="XXpx" height="YYpx" alt="descripcion de la imagen"> Como ves, este es uno de los pocos casos en los que no hay etiqueta de cierre, es decir, no se pone </img>. 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 ejemplo

En 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): <img src="objetos/sonrisa.gif" width="60px" height="60px" alt="Bienvenidos al ejemplo de CCTW">
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, .
Cmo insertar un enlace a tu E-Mail

Sin 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-Mail

Como 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: <a href="mailto:tudireccion@email.com">Texto que quieras poner para hacer clic en l </a> 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 enlace

El 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 imagen

Primero 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 </body>), 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 <img alt="Pulsa width="32px" /> para escribirme un E-Mail!" src="objetos/buzon.gif" height="32px"
y si le das a "preview" podrs ver el buzn en cuestin. Vamos ahora a colocarle el enlace a nuestro E-Mail.
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 <img alt="...... hasta 23px" />. 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 enlaces

Como 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 web

Lo 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 centrado

La 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 estilo

Abrimos 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 Html

Como 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: Y el cdigo Html del index.html de ejemplo as: 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.
Comenzando a crear la plantilla de nuestra pgina Web

La 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.html

Recordando 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 el botn

derecho del ratn. Escogemos New > Create File...
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 web

Hacemos 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 "estilogeneral.css".
Relacionando estilo-general.css con plantilla.html

Ahora 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:
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">

Una vez creados estos dos archivos y relacionados entre s, pasamos a meterles mano.
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. <div>Bienvenidos a mi Web</div> 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 <body> y </body> 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 Div

Ese 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 nicos

Existen 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: <div id="cabecera">Bienvenidos a mi Web</div> Abre ahora el archivo plantilla.html y pon esa lnea de cdigo. Ha de quedar as: 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.

Primer Contacto Con El Código HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Primer Contacto Con El Código HTML

Uploaded by

Copyright:

Available Formats

Primer contacto con el cdigo HTML?

El cdigo html de una pgina web

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

La estructura de una pgina web en HTML

<html> <head> </head> <body> </body> </html>

Definir el ttulo de una pgina web

Cmo ver el cdigo Html de cualquier pgina web?

Una Carpeta para dominarlas a todas...

La carpeta de nuestras webs

Configurar nuestro Sitio en en Html-Kit

Abriendo la ventana WorkSpace

Sitio Local y Sitio Virtual

Que tal crear otro sitio para tus pruebas?

Cmo crear la primera pgina de la web

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

Cmo crear un prrafo en la pgina web

Crear un segundo prrafo en la pgina

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

Cmo guardar los cambios realizados

Cmo crear un enlace en la pgina web

El cdigo Html de los enlaces o vnculos

En la misma o en otra ventana?

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

Los estilos css

La hoja de estilos css

Crear la Hoja de Estilos "estilos.css"

Esto cada vez pinta mejor, no?

Relaccionar la Hoja de Estilos CSS con la pgina web

Explicando el color y la imagen de fondo de una pgina web

Un poco de estilos CSS

Aplicando color e imagen de fondo a nuestro ejemplo

Aplicando el color de fondo

Aplicando una imagen de fondo

Cmo insertar una imagen en una pgina web

Dnde insertar la imagen.

Cdigo Html para insertar una imagen

Vamos a insertar una imagen en nuestro ejemplo

Quieres aprender a hacerlo directamente desde las opciones del Html-Kit?

Aparece entonces esta ventana:

Cmo insertar un enlace a tu E-Mail

Cdigo Html de un enlace de E-Mail

Problemas de este tipo de enlace

Enlace de E-Mail en una imagen

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

Enlace de E-Mail con Html-Kit:

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

Despus pulsa Ok y listo!

Los estilos CSS para las imgenes con enlaces

Cmo centrar un prrafo de la pgina web

Crear un estilo centrado

Crear una clase de estilo

Centrar prrafos en el Html

Cmo va nuestra pgina web por el momento?

Comenzando a crear la plantilla de nuestra pgina Web

Crear el archivo plantilla.html

Abrimos el Html-Kit. Hacemos visible la ventana Workspace.

Ponemos el ratn sobre el sitio "web-ejemplo-cctw-local" y pulsamos sobre l con el botn

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

Creando la Hoja de Estilo para el resto de pginas de la web

Relacionando estilo-general.css con plantilla.html

<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">

La estructuracin con Capas o Divs?

Qu es una Capa o un DIV?