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="" />
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:
<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:
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:
| ||||||
<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:
|
- Si no quieres bordes cambia el valor de "border" y "cellpadding" por 0.
- Para crear botones puede servirte Cooltext.
6. Más utilidades
- 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.
Sencillamente genial. Me ha sido de muchísima utilidad!!!! Es increíble.
ResponderEliminarMe he animado a aprender un poquito de html y eso me ha funcionado; he logrado hacer lo que explicas, es fenomenal :DD
Me encanta ese blog, estoy aprendiendo muchísimo en él: gracias! ^-^