Posteamelo

[Megapost] Crea tu página web profesional en minutos!

ESPERA A QUE CARGUE EL POST, GRACIAS!

Hola taringueros, como verán soy nuevo en esta comunidad, y vengo con el deseo de transmitirles mis humildes conocimientos sobre el tema para que ustedes también puedan aprovecharlo.

Bueno empecemos. El diseño web se basa en dos lenguajes el HTML (HyperText Markup Language) y el CSS (Cascading Style Sheets). El primero es el que le da la estructura a la web, mientras que el segundo es quien le da el estilo y formato a la página.

Para este tutorial, pueden utilizar el programa llamado Sublime Text 2 o el Bloc de Notas de su pc, (les recomiendo que utilicen el Sublime Text 2 porque te ordena todo por colores y es más fácil, visualmente, comprender todo el código que vallamos a elaborar). El programa es gratuito, no pesa nada y lo pueden descargar de la página oficial buscando en Google: Sublime Text 2 (no pongo el link por la nueva disposición de taringa (la cual no estoy de acuerdo D: ))

Vamos al grano:
PASO #1: Abrimos nuestro programa, vamos a File > New File y después a File > Save As...
Lo guardamos como index.html
Luego hacemos el mismo procedimiento y esta vez lo guardamos como style.css

PASO #2:
haremos lo que muestra la siguiente imagen en la pestaña index.html

<DOCTYPE html> Indica la versión del código con el cual está hecha la web (esto facilita a los buscadores para encriptarla)
<html></html> encierra lo que se muestra en la pantalla, todo lo que vallamos a escribir va a estar aquí adentro.
<head></head> Acá se pone el titulo de la pagina y el SEO, en en tutoriales mas avanzados veremos de que se trata.
<body></body> y acá va el código que se ve en la pantalla.

PASO #3: Cada uno de estos elementos que describí se llaman etiquetas, ahora comenzaremos a elaborar el código para la etiqueta <head>ACÁ VA EL CÓDIGO</head>
Pondremos <title>TÍTULO QUE QUERRAMOS</title> , debajo de esto pondremos :
<meta charset="UTF-8"> y debajo de esto, pondremos: <link href="style.css" rel="stylesheet" type="text/css">

<title></title> Acá se pone el titulo a la página que aparecerá en la pestaña arriba de la barra de direcciones.
<meta> Indica el lenguaje con el cual se hizo el código y también te habilita el uso de la ñ, entonces, se puede decir que UTF-8 es = a castellano/español.

PASO #4: Ahora pasamos al <body></body> en castellano, el cuerpo. Acá es donde vamos a trabajar por mucho tiempo, pero paciencia, que no es mucho

Empezaremos por dividir el cuerpo en 4 (cuatro) partes, y para ello emplearemos el uso de los DIVS. ¿Qué son divs? Bueno, los Divs son "cajas" donde uno mete cosas y ayuda a que nuestro proyecto esté mas ordenado. La idea es lograr algo como esto:

Y así es el procedimiento...

Bueno ahora ya tenemos toda la estructura armada, resta ponerle las cosas CUAK!

PASO #5: Empezaremos con la cabecera, para ello, debemos crear una imagen a nuestro gusto que tenga 1280px de ancho y 150px de alto, venga vamos!

Esta será la imagen que usaré para la cabecera:

Ah, deben crearse una cuenta en imageshack para poder alojar las imagenes que creen para la web!

Para colocarla, pondremos dentro de <div id="cabecera"></div> la siguiente etiqueta:
<img src="URL/LINK">

Ahora si abren el archivo index.html podrán ver la imagen que tiene un borde blanco, eso mas adelante lo corregiremos con el CSS.

Ahora seguiremos con el menú, y para esto hay que crear una lista con sus items, aquí va el .gif explicativo:

Debería quedarte así:
<ul>
<li><a href="#">INICIO</a></li>
<li><a href="#titulo1">TITULO1</a></li>
<li><a href="#titulo2">TITULO2</a></li>
<li><a href="#titulo3">TITULO3</a></li>
<li><a href="#titulo4">TITULO4</a></li>
</ul>

<ul></ul> Es el elemento que encierra la lista del menú.
<li></li> Item del menú (cada uno de estos será un botón) se pueden poner cuantos quieran.
<a href="LINK"></a> Es para "conectar" la página entre si, el menú de taringa funciona de manera similar.

Ahora es el turno de <div id="contenido"></div> Lo que va acá depende de que trate tu web, por lo tanto, pondré ejemplos sin explicación y si tienen dudas sobre algo en especifico me mandan un mensaje privado.

EJEMPLO Nº 1:
Texto: Para esto se necesitan las etiquetas<p>AQUÍ VA EL TEXTO</p> (yo pondré un texto sobre el html5 que es sobre lo que tratará mi web).

EJEMPLO Nº 2:
Imágenes: Utilizaremos la etiqueta <img src="URL"> (pondré 3 imagenes distintas)

(Yo voy a mezclar ambos ejemplos para hacer algo mas complejo, podrán verlo más adelante)

Por último, llega el turno de <div id="footer"></div> Este div puede ser opcional, aunque por lo general se utiliza. Tenemos un ejemplo en Taringa! que utiliza un menú hacia los terminos y condiciones generales y legales, o también se tiende a poner el nombre de quien creo la página.

Si decidimos hacer un menú, pues ya saben como hacerlo (es idéntico al que hicimos hace un rato) y si desean poner su nombre, usan la etiqueta <p></p>

Hasta aquí llegó la parte de HTML, ahora sigamos con el CSS (venga, ya vamos por la mitad, pero espera, que esta es la parte mas divertida! le empezaremos a agregar color, detalles, cambiaremos las fuentes de los textos, adornaremos el menú y muchas cosas mas

Recuerden guardar el archivo yendo a File > Save

ahora iremos a la pestaña style.css y trabajaremos plenamente ahí. La forma de escritura de este código es completamente distinta al de HTML, por lo tanto debes prestar suma atención.

El CSS modifica visualmente cada etiqueta, por lo tanto si nosotros queremos poner un color de fondo pondremos:

Ahora le quitaremos ese borde que quedo entre la cabecera y el borde utilizando el comando margin:0px; dentro de las {} de body de esta manera:

Ahora seguiremos con el menú, que estará ubicado de forma horizontal debajo de la cabecera. Ponemos:
#menu {}
#menu ul {}
#menu ul li {}
#menu ul li a {}

Demostración:

Ahora les mostraré una imagen con toda la configuración del menú ya hecha puesto que es muy larga de explicar, igualmente les explicare cada uno de los comandos que utilicé:

background-color:#COLOR; Sirve para ponerle color a un determinado objeto, nosotros lo usamos para el fondo de la web, y de los botones del menú.

margin:Xpx Se utiliza para marcar los márgenes dentro del sitio web, en nuestro caso fue utilizado para body y para #menu ul.

overflow-x:hidden; Bloquea el deslizamiento hacia la derecha del sitio (solo se puede bajar)

position:relative; Esto ubica a el div dentro de la web creada.

top:0px Le asigna la cantidad de pixeles que deben haber arriba suyo.

left:300px; Le asigna la cantidad de pixeles que deben haber a la izquierda suya.

display:block; Alinea los objetos de forma horizontal.

padding:5px; Es el borde interior de un objeto (prueben poniendo en vez de 5, 15 y verán a que me refiero

)

border-radius:5px; Le da la curvatura a los bordes del objeto.

list-style:none; Le saca los puntos, enumeración de la lista.

color:#fff; Es lo que le da el color blanco a las letras del menú.

font-family:'trebuchet MS', 'Tahoma'; Le asigna la fuente a la letra de los items del menú.

text-decoration:none; Le quita subrayados y tachados al texto.

font-weight:bold; Convierte la letra en negrita.

cursor:pointer; Cambia el cursor a una mano cuando se pone sobre el botón.

text-align:center; Centra el texto dentro del objeto que lo contiene.

#menu ul li:hover {background-color:#12536c;} El ":hover" es como debería reaccionar un objeto si pones el mouse encima.

¡MENÚ TERMINADO!

Acá va un pantallazo de como les debería ir quedando su página web (claro está que pueden modificarla a gusto... SIN HACER LIO!)

Bien, agregé 3 textos y 3 imágenes:

¿Lo pudieron ver?

Ahora vamos a centrar las imágenes y cambiarle la tipografía a los párrafos.

Bueno, arriba tienen una imagen del index.html actualmente, ahora va una del style.css.

Recuerden que para ir viendo como les va quedando la Página Web, pueden hacer doble click en el icono de index.html.

Y por último, nos queda el footer. Antes había dicho que era opcional, pero que podían poner su nombre o un menú como el que tiene Taringa! Yo puse mi nombre y un menú con las redes sociales! miren:

Aquí el html que puse dentro de <div id="footer"></div> y el css que agregé en style.css:

El código es parecido al del menú de la web.

¡CSS TERMINADO!

Ahora queda subir nuestra web a internet. Yo utilizo un hosting gratuito que no muestra publicidad en tu sitio. Se llama 000webhost, deberán registrarse, dejenme mostrarles como:

Una vez registrado, y logeado, se te abrirá algo parecido a esto...

Clickean "Go to CPanel"

Van a "File Manager", les pedirá su contraseña. (si tira error, actualicen la página con F5)

Ahora clickean "public_html"

Bien, ahora volveremos al archivo .html, sí, a index.html. Lo vamos a guardar como index.php, así:

Ahora iremos al host y le damos a donde dice "upload", luego apretamos "seleccionar archivo" y elegimos el index.php y luego de vuelta a "seleccionar archivo" y elegimos el style.css y le damos al tilde verde.

¡LISTO! Ya tenemos nuestra primera página web en internet!

Bueno este es el final del post, espero que les haya servido y acepto todo tipo de critica constructiva. Tardé 1 semana en terminar este post, modificando, agregando y sacando cosas para que sea cada vez mas comprensible. Gracias por leerlo y espero que ayan aprendido algo! jejeje.
Más adelante habrán posts sobre menues en css3, páginas con pestañas, diseño en photoshop, algo de javascript, slideshows y mucho, mucho más!
Otra vez... GRACIAS!

Saludos y nos vemos en otro post

Un usuario me pidió si podia subir un link con la web hasta este punto así la podían ver, acá lo tienen compañeros

http://www.ayudaweb1.site90.com/

Recuerda seguirme para mas tutoriales sobre páginas web!
Recomienda este post, Gracias!

Parte 2 de este tutorial, podés verlo acá:

Crea tu página web profesional en minutos!

Dejá tu comentario

Autor del Post