Vamos a aprender a cómo poner distintas secciones en la web. Para eso necesitaremos otro documento del bloc de notas. En él tienes que pegarle el código exactamente igual que el que tienes en "index.html", pero quitando la parte del contenido.
Por ejemplo, si en "index.html" tienes puesto un texto de bienvenida, en este nuevo archivo lo eliminas y en su lugar, pones lo que quieras: una noticia relacionada con la sección, por ejemplo.
El procedimiento es el mismo, solo que el archivo puede llamarse "loquesea.html", pero que no sea "index.html".
Ahora vamos a nuestro panel de archivos FTP (como si fuésemos a publicar por primera vez nuestra página web) pero ahora subimos también nuestro nuevo archivo. En mi caso, se llama "pag_web.html". ¿Véis? Está el "index.html" que es la portada de la web, y "pag_web.html" que es el mismo código (así que el diseño de la web es el mismo), pero con distintas noticias.
Ahora el último paso es añadir un enlace. Para ponerlo solo tienes que hacer como si fueses a poner un enlace normal, pero añadiendo el nombre de "pag_web.html" (en mi caso). Un ejemplo de enlace sería: <a href="pag_web.html"><img src="http://dl.dropbox.com/u/55341396/creaweb.png" /></a> Solo tienes que poner el nombre del archivo. De esta forma, al hacer clic en la imagen, irás al archivo "pag_web.html" que acabas de incluir, como si fuese una sección nueva.
Como vemos, hemos creado una variable #wrapper, #contenido y #sidebar, del cual hemos puesto un tamaño y un color de fondo.
El wrapper es todo el espacio que va a ocupar la página web (el contenido más la sidebar) y hemos puesto que tenga 1.000 píxeles, que es lo que se suele poner. Si quisieses que el contenido o la sidebar fuese más pequeño o más grande, ajustas los px pero teniendo en cuenta de que entre los dos deben sumar el valor del wrapper.
Después hemos puesto el contenido y la sidebar, y vemos que entre las dos suman 1.000.
En la segunda parte del código vemos que el wrapper se divide a su vez en "contenido" y "sidebar", y ahí es donde pondremos el contenido de cada uno.
Eso es todo, pero por si quedan algunas dudas, voy a poner un ejemplo de la segunda parte del código (la primera parte creo que es fácil)
<div id="wrapper">
<div id="contenido">
Bienvenidos a la web de Campamento Web. Esto es un ejemplo de lo que podrás crear con una sidebar. Este es el contenido con las noticias o lo que quieras poner.
<div style="height:500px"></div>
</div>
<div id="sidebar"> Esto se ve en la sidebar, y esta es una imagen: <a href="http://campamentoweb.blogspot.com/2012/02/crea-tu-pagina-web-desde-cero.html"><img src="http://dl.dropbox.com/u/55341396/creaweb.png" /></a><div></div>
</div>
Como ves, puedes colocar tanto textos, como otros códigos HTML para colocar imágenes o lo que quieras.
Desde siempre he querido tener una web creada totalmente por mí. Sabemos que hay servicios que nos ofrecen muchísimas cosas para hacer una web o blog y además, de forma sencilla como Blogger, Wordpress... Pero imaginemos que estos servicios caen en algún momento... entonces, tu web también caerá.
Bueno, antes que nada deciros que puede ser tarea difícil, pero en verdad es muy fácil. Habrá muchos códigos, sí, pero es muy fácil aprender todo. Además, pasaremos un buen rato aprendiendo.
Yo nunca he hecho esto, así que tampoco soy un profesional.
¿Estás preparado para crear una web totalmente tuya?
ANTES DE EMPEZAR...
Los códigos los pondremos en un bloc de notas. Será lo que nos servirá para hacer la web, aunque creas que no. Recuerda que tienes que ponerle de nombreindex.html, aunque venga predefinido con el formato .txt.
1. Creando la base
Para comenzar, haremos un pequeño código en HTML. Ya sabes, todos los códigos tendremos que ponerlos en un archivo del bloc de notas con el nombre de index.html.
<html>
<head>
<title>Título de tu web</title>
</head>
<body>
¡Bienvenido!
<p> Esta es una web de prueba </p>
</body>
</html>
Todos los códigos que se hagan en HTML deben ir entre <html> y </html> y dentro, aparecerán los demás:
- <head> </head>: entre estos códigos se pone lo que va dentro de la cabecera/título, también encerrado entre <title> </title>
- <body> </body>: aquí irá encerrado los códigos de lo que queda en la web.
- <p> </p>: es para poner un párrafo.
2. Dando color
Vamos a aprender cómo poner color de fondo, y color de texto.
Para eso, agregaremos a nuestro primer código lo que está en negrita:
<html>
<head>
<title>Título de tu web</title>
</head>
<body bgcolor="#FFFFFF" text="#FFFFFF">
¡Bienvenido!
<p> Esta es una web de prueba </p>
</body>
</html>
En "bgcolor" va el color hexadecimal del color de fondo de la web, y en "text", el color hexadecimal de color del texto.
3. Modificar el texto
Ya sabemos algunas cosas básicas, pero con estas etiquetas podrás modificar los textos y el contenido:
- <br> sirve para hacer saltos de línea. Por ejemplo:
Hola <br>
Estoy aquí.
Ese "Hola" se vería arriba, y "Estoy aquí", como si hubieses presionado la tecla "Enter".
- <hr> sirve para hacer una línea separadora. Por ejemplo:
Hola <hr>
Adiós
Se vería:
Hola
______________
Adiós
- <hx> sirve para hacer títulos. Ese "x" tienes que cambiarlo por un número (1,2,3...) y mientras mayor sea, más grande será la letra. Además, recuerda que este código debes encerrarlo con </hx>. Por ejemplo:
<h1>ejemplo</h1>
Se vería:
Ejemplo
- <p> ya he dicho en la lección 1 que es para poner párrafos.
- <center> es para centrar. También debe cerrarse el código con </center>. Por ejemplo:
<center>
Buenas tardes.
</center>
Se vería:
Buenas tardes
- Algunas técnicas para modificar texto:
<b> Texto </b> para poner texto en negrita.
<i> Texto </i> para poner texto en cursiva.
<u> Texto </u> para poner texto subrayado.
<strike> Texto </strike> para poner texto tachado.
<big> Texto </big> para poner texto grande.
<small> Texto </small> para poner texto pequeño.
4. Añadiendo imágenes y enlaces
Hasta ahora hemos visto lo más importante para que puedas organizar al menos, un inicio en tu web. Pero todavía se ve muy simple y sin estilo. Entonces, para que se quede todo más bonito, deberemos agregar imágenes. Para eso, solo agrega este código: <img src="URL DE LA IMAGEN" border="0" alt="" />
Y sustituye URL DE LA IMAGEN por la dirección de la imagen. Si quieres hacer que al hacer clic en la imagen vayas a otro sitio, pon esto:
<a href="ENLACE"><img src="URL DE LA IMAGEN" /></a><div>
Ya sabes, todo esto debe ir entre <body> y </body>, al igual que todas las etiquetas que hemos visto anteriormente (excepto si quieres modificar el título de la web)
Para las imágenes eso es todo.
Pero si quieres poner enlaces en un texto pondremos lo siguiente: <a href="ENLACE">TEXTO</a></span>
Vamos a ver cómo estaría quedando nuestra web con un título, texto, fondo y una imagen:
¡Esto ya va cogiendo forma! ¿Quieres hacer todavía más cosas? ¡Pues vayamos a la siguiente parte!
5. Poner un menú
Es imprescindible tener un menú de navegación en tu web. Para hacerlo usaremos tablas que nos servirán para alinear los enlaces que formarán parte del menú. Puedes usar textos con enlaces, o imágenes con enlaces:
Este código muestra un menú vertical con enlaces en el texto:
<table border="1" cellpadding="4"><tbody>
<tr><td><a href="ENLACE">TITULO1</a></span></td>
<tr><td><a href="ENLACE">TITULO2</a></span></td>
<tr><td><a href="ENLACE">TITULO3</a></span></td>
</tbody></table>
Este código muestra un menú horizontal con enlaces en el texto:
<table border="1" cellpadding="4"><tbody>
<tr><td>
<a href="ENLACE">TITULO1</a></span>
</td> <td>
<a href="ENLACE">TITULO2</a></span>
</td> <td>
<a href="ENLACE">TITULO2</a></span>
</td></tr>
</tbody></table>
Este código muestra un menú vertical con enlaces en imágenes:
<table border="1" cellpadding="4"><tbody>
<tr><td><a href="ENLACE"><img src="URL DE LA IMAGEN" /></a><div></td>
<tr><td><a href="ENLACE"><img src="URL DE LA IMAGEN" /></a><div></td>
<tr><td><a href="ENLACE"><img src="URL DE LA IMAGEN" /></a><div></td>
</tbody></table>
Este código muestra un menú horizontal con enlaces en imágenes:
<table border="1" cellpadding="4"><tbody>
<tr><td>
<a href="ENLACE"><img src="URL DE LA IMAGEN" /></a><div>
</td> <td>
<a href="ENLACE"><img src="URL DE LA IMAGEN" /></a><div>
</td> <td>
<a href="ENLACE"><img src="URL DE LA IMAGEN" /></a><div>
</td></tr>
</tbody></table>
Menú horizontal con enlaces en imágenes
- Si no quieres bordes cambia el valor de "border" y "cellpadding" por 0.
- Para cambiar el tamaño de las imágenes usa este código:
<img src="URL DE LA IMAGEN"width=250 height=150 />
En width y height puedes cambiar el valor para modificar la altura y el ancho de la imagen.
- Para poner una imagen de fondo pega este código justo después de </head>:
<body background="URL DE LA IMAGEN">
- Para cambiar la fuente de letra usa este código:
<font face="FUENTE DE LETRA">TEXTO</font>
- Para aparecer más en los buscadores pon debajo de <head> este código:
<meta name="description" content="DESCRIPCIÓN DE TU WEB " />
Pon una descripción que incluya palabras clave de tu página web. Por ejemplo, si tu web trata de animales procura que salgan palabras como "animales", "cuidados", "alimentación"...
7. Subir los archivos a un hosting
Ya tenemos todo creado, pero... ¿ahora qué hacemos? Pues pondremos nuestra web online para que todos puedan visitarla. Para eso necesitaremos alojarlo a un hosting.
Hay hostings de pago y otros gratis, pero ahora usaremos uno gratis, y es 000webhost. En este vídeo podrás aprender cómo usarlo:
Si no puedes verlo: regístrate y activa tu cuenta, entra al CPanel y entra en "File manage". Ahí, escribe la contraseña de tu cuenta nuevamente, y accede a la sección de "public_html". Elimina el archivo "default.php". Sube tu archivo "index.html" (en "Upload") y mira que el nombre del archivo subido no tenga ".txt". Para quitárselo dale a "Rename". ¡Y ya está, tu web estará disponible en la dirección que hayas puesto al crear la cuenta!
Puede que el hosting donde alojes tu web cierre, pase a ser de pago... pero no hay problema. Solo busca otro donde alojar tus archivos, y todo seguirá como antes.
