leann15
Usuario (Argentina)
Buenas gente! Les traigo este pequeño post hecho por mi, para aquellos usuarios que capaz no saben diseño web, pero aún así quieren tener una pagina! Este post lo hago porque es lo que me paso, se cosas MUY básicas de HTML y aún asi tengo mi página! Les dejo una captura de mi web, para que puedan ver a lo que me refiero. http://k45.kn3.net/29DA8B9A5.jpg (No se que pasa, la imagen se ve negra:S es www.strikegamers.net la web!) No se si esta buena o no, pero a mi me gusta! Bueno, la web consta de 8 imagenes y dos scripts PHP. (El reproductor de musica y el like-box de facebook). Empecemos! Lo que necesitamos: 1.- Saber diseño gráfico! Las imagenes son TODA la web, por ende tenes que saber bastante diseño gráfico! 2.- Saber HTML básico! No importa si no sabes en realidad, yo los voy a guiar paso a paso! 3.- En lo posible, tener un webhost y un dominio! Si no los tenes no importa, total yo lo hice todo en mi PC y recien ahí los pase al webhost! 4.- Tener paciencia! Creanme, van a necesitar mucha para esto! Es casi todo prueba & error. Vamos! 1.- Ok, para empezar, necesitamos 3 cosas: a) Una carpeta para meter todos los archivos! (en mi caso es "strikeGamers" b) Una carpeta para poner todas las imagenes de la web! (en mi caso es "img", recomiendo utilizar esa!) c) El Adobe Photoshop (u otro editor gráfico) y el Bloc de notas! Ya tienen todo esto? Bueno, vamos! Dentro de la carpeta raiz (a partir de ahora WebFolder), creamos un archivo de texto que se llame "index". Este archivito será la puerta de nuestra web! Aca van a estar los codigos que le dan forma a la misma. Bueno, empecemos con lo básico. Dentro del archivo copiamos y pegamos esto (explicado a continuación) : dijo: <html> <head> <title>Sitio de prueba 0.1</title> </head> <body bgcolor="#000000" link="white" vlink="white"> </body> </html> <html></html>: Etiquetas que definen que el codigo que viene es HTML. <head></head>: Etiquetas que definen la cabecera de la web (título, metatags, etc.) <title></title>: Titulo de nuestra web! <body></body>: El cuerpo de nuestra web: Color de fondo, imagenes, texto, etc. "bgcolor" Viene a ser el color de fondo de nuestra web. Click aquí para obtener los colores! "link" Color de los links "vlink" Color de los links ya visitados! (Creo xD!) ------------------------------------------------- O ------------------------------------------------- Guardamos nuestro archivo "index" yendo a "Archivo -> Guardar como ->", y seleccionamos "todos los archivos" http://k40.kn3.net/C92032282.png Entonces lo guardamos como "index.html" y NO como "index.txt.html"/"index.txt". Ahora, este archivo lo podemos abrir con un explorador web como el Google Chrome, Mozilla Firefox, etc. y podrán ver como va quedando nuestra web! ------------------------------------------------- O ------------------------------------------------- Ahora que ya tenemos lo básico de nuestra web (título y color de fondo) viene la parte donde entran las imagenes y algunos otros códigos! Lo primero que queremos hacer es agregar un banner que muestre el nombre de nuestra web. En mi caso puse el nombre de la web, acompañado de mi servidor de CS. Como hacemos esto? Con esto! dijo: <html> <head> <title>Sitio de prueba 0.1</title> </head> <body bgcolor="#000000" link="white" vlink="white"> <center> <img src="img/strikecs.png" height="150" width="1200"> </center> </body> </html> <center></center>: Centra la imagen/texto/link/animacion en el medio de la pantalla (NO en el centro.) <img>: Con esto agregamos nuestra imagen a la web! "src" Source de la imagen: ubicación! (nuestras imagenes estan guardadas en /img/ , entonces podría ser img/banner.png, o su ubicación web: www.midominio.com/img/banner.png) "height" Altura de la imagen. Esta es la altura con la que creamos la imagen en el Adobe Photoshop (o en nuestro editor gráfico) "width" Ancho de la imagen. Este es el ancho con el que creamos la imagen en el Adobe Photoshop (o en nuestro editor gráfico) En mi caso user 150px altura, 1200px ancho. Ok, guardamos nuevamente nuestro archivo y lo abrimos con nuestro explorador favorito! Deberíamos ver algo así: http://k41.kn3.net/7E544C458.png ------------------------------------------------- O ------------------------------------------------- Esa fue nuestra primer parte! Ahora vamos a agregar algunas imagenes con redirecciones! (Al clickearla, nos lleva a otra parte de la web/otra página web) El código que usaremos será este: dijo: <html> <head> <title>Sitio de prueba 0.1</title> </head> <body bgcolor="#000000" link="white" vlink="white"> <center> <img src="img/strikecs.png" height="150" width="1200"> <a href="http://www.strikeGamers.net/foro" target="_blank"><img src="img/foro2.png" height="500" width="200"></a> </center> </body> </html> <a href></a>: Estas etiquetas son usadas para crear enlaces. "target": Usamos esta variable para indicar que tiene que abrirse en una nueva ventana/pestaña. Verán que nuestra nueva imagen la agregamos en la linea debajo del banner, para no crear muchos espacios vacíos. Guardamos, y previsualizamos, debería quedarnos algo así: http://k37.kn3.net/DAFBBB4DF.png (Abajo a la izquierda está remarcada en rojo la barra de estado, verán que nos muestra que al hacer click en la imagen, nos movermeos a esa dirección!) ------------------------------------------------- O ------------------------------------------------- Con eso ya estarían instruidos para terminar la web por ustedes solos! Lo unico que tienen que hacer, es seguir agregando imagenes, y estarían listos para mostrar su web al mundo! Pueden agregar scripts PHP como un LikeBox de facebook (En mi web puse uno, muy facil de hacerlos y agregarlos a la web!), o un reproductor de música! (Tambien puse uno, es un reproductor que reproduce la música de mi radio!) Siempre tengan en cuenta el tamaño de las imagenes! A veces se puede complicar el diseño en ese sentido. Mis webs las desarrolo en 1200px x Xpx (1200pixeles de ancho, y X pixeles de alto.) Espero que este post les haya gustado, y les haya servido! Sin mucho mas me despido de ustedes, cualquier consulta o problema me avisan por acá o por PM!