Crear pagina web desde Cero (Capitulo 1)

De verdad me ha gustado la forma en la que han impactado la serie de Videotutoriales de como hacer un tema para WordPress desde cero, asi que he decidido crear otra serie pero ahora es sobre como crear paginas webs desde cero. Voy a tratar de usar el lenguaje mas basico posible para que todos puedan entender lo que se esta explicando.

Preparando el trabajo

Antes que nada te dejo este articulo donde explico los programas y herramientas que debes tener para crear tu pagina web, en el transcurso de este tutorial voy a estar usando uno u otro y voy a suponer que tu cuentas con ellos. Asimismo informo que voy a estar utilizando otros tutoriales escritos previamente en skyandstars para darles uso en nuestra pagina web.

Comenzamos con el diseño, muchas personas empiezan desde cero sin tener una idea clara de como quieres que sea su diseño, yo te recomiendo que antes de utilizar tu programa de diseño realices en tu mente un pequeño esquema de como va a estar organizada tu pagina. Yo imagine una pagina con header, contenido, sidebar y footer. Aqui te dejo la imagen.

web0_1

No te voy a explicar como hacer el diseño ni como lograr algunos u otros efectos en el mismo, Uso Corel Photo Paint un programa que quizas no muchos usen, por eso no hago tutoriales de diseño pero te recomiendo algunas paginas o foros donde consigues tutoriales muy buenos sobre photoshop. (FORO CHUCHERIAS)

Mi diseño final resulto asi: CLIC PARA VER.

Algo muy sencillo pero perfecto para los efectos de este tutorial, como viste en el contenido coloque algunos titulos, esto lo hice para tener una idea de como quiero que se vea mi pagina terminada. Tambien notas que el menu tiene una seccion que sobre sale, es porque pienso utilizar este tutorial para lograr un menu mucho mas profesional.

Crea una nueva carpeta y llamala con el nombre de tu web.

Recorta con tu programa de diseño algunas imagenes que vas a necesitar en tu estilo, solo necesitas aquellas cuyos elementos es imposible lograr con CSS por ejemplo el logo o la descripcion de la pagina.

Las imagenes que recorte son las siguientes:

1- Bg:

2- Header

3- Menu (normal, hover y activo): web0_2

4- Fondo de titulo 1.

5- Fondo de titulo sidebar.

Dentro de la carpeta de tu web, crea otra y llamala “imagenes” y guarda todas aquellas imagenes que recortes ahi.

Creando la estructura HTML

Muchos de los que empiezan estan tentados a usar marcos flotantes, capas o tablas para crear su web ya que resultan faciles de ubicar en el lugar que se quiere. Hoy en dia muy pocas paginas profesionales usan estos elementos para ubicar sus elementos, vamos a salirnos de la rutina y a crear nuestra pagina web con div’s.

Para usar los div’s solo tienes que tener en cuenta como trabajarlos, es decir, cuando agregar un div o cuando no, cuando agregarle un “class” o un “id” o cuando agregar un div dentro de otro y cuando no. Para lograr entender ésto, nos resulta muy util la primera imagen mental que creamos de nuestro tema.

web0_1

Si vemos esta imagen, encontramos facilmente diferenciables tres sectores, el header, el centro (donde esta el contenido y el sidebar) y el footer pero primero que nada necesitamos uno principal que abarque a estos 3 juntos, vamos a llamar a ese gran div “contenido” y dentro escribiremos los otros tres.

Abre tu dreamweaver y selecciona HTML en la ventana que te aparece al principio:

crearform

En tu codigo HTML crea los cuatro grandes divs que mencionamos arriba:

<body>
<div id="contenido"><!--Comienza Contenido-->
<div id="header"><!--Comienza Header-->
 
</div><!--Termina Header-->
<div id="centro"><!--Comienza centro-->
 
</div><!--Termina Centro-->
<div id="footer"><!--Comienza footer-->
 
</div><!--Termina footer-->
</div><!--Termina Contenido-->
</body>

Hay dos cosas que recomiendo cuando se hace la estructura de nuestro tema a mano.

1- Deja una sangria en aquellos elementos que esten contenidos dentro de otros, por ejemplo, el div id=”contenido” esta dentro de la etiqueta body, comenzamos con una sangria. El header, el centro y el footer estan a mismo nivel, por eso entre ellos no hay sangrias pero éstos tres a su vez estan dentro de “contenido”, por eso tienen una sangria.

2- Especifica con un comentario HTML el principio y el fin de cada elemento, creeme que a la hora de encontrar fallos o hacer modificaciones en el codigo, éstos te ayudan mucho.

Trabajamos ahora dentro del div id=”header”, si vemos nuestro diseño solo encontramos en el header la imagen principal (donde esta el logo y la bienvenida) y el menú.

La imagen principal la podemos agregar con un simple div y en el estilo darle el tamaño y el fondo deseado.

<div id="header"><!--Comienza Header-->
<div id="imagen-header"><!--Comienza imagen header-->
</div><!--Termina imagen header-->
</div><!--Termina Header-->

El menu lo vamos a agregar con listas (<ul><li><a></a></li></ul>) a mi personalmente me costo atreverme a usar estos elementos pero la verdad es que son muy utiles y te ahorran trabajo. Te recomiendo que le agregues un id a la etiqueta <ul> y dentro de las etiquetas <li> coloques un link (<a>) con un class identificativo para cada seccion del menu, Veamos el codigo que yo cree.

<div id="header"><!--Comienza header-->
<div id="imagen-header"><!--Comienza imagen header-->
</div><!--Termina imagen header-->
<ul id="menu"><!--Comienza menu-->
<li><a href="#" class="home">Home</a></li>
<li><a href="#" class="tutoriales">Tutoriales</a></li>
<li><a href="#" class="recursos">Recursos</a></li>
<li><a href="#" class="freebies">Freebies</a></li>
<li><a href="#" class="pide">Pide</a></li>
<li><a href="#" class="webmaster">Webmaster</a></li>
<li><a href="#" class="pagina">Pagina</a></li>
<li><a href="#" class="foro">Foro</a></li>
</ul><!--termina menu-->
</div><!--termina header-->

Ya tenemos la estructura de nuestro header, ahora pasamos al segundo gran div (centro)

Si observamos nuestro diseño nos encontramos dentro del centro, el contenido principal y el sidebar, vamos a agregar estos div’s dentro de nuestro centro.

<div id="centro"><!--Comienza centro-->
<div id="contenido-izquierda"><!--Comienza contenido izquierda-->
 
</div><!--Termina contenido izquierda-->
<div id="sidebar"><!--Comienza sidebar-->
 
</div><!--Termina sidebar-->
</div><!--Termina Centro-->

Dentro de los dos ultimos (contenido-izquierda y sidebar) solo va a ir texto, asi que lo podemos agregar luego.

En nuestro footer tambien va a ir solo texto, asi que ya tenemos la estructura principal de nuestra pagina, verdaderamente muy simple y ordenada con nuestros divs.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
</head>
<body>
<div id="contenido"><!--Comienza Contenido-->
<div id="header"><!--Comienza header-->
<div id="imagen-header"><!--Comienza imagen header-->
</div><!--Termina imagen header-->
<ul id="menu"><!--Comienza menu-->
<li><a href="#" class="home">Home</a></li>
<li><a href="#" class="tutoriales">Tutoriales</a></li>
<li><a href="#" class="recursos">Recursos</a></li>
<li><a href="#" class="freebies">Freebies</a></li>
<li><a href="#" class="pide">Pide</a></li>
<li><a href="#" class="webmaster">Webmaster</a></li>
<li><a href="#" class="pagina">Pagina</a></li>
<li><a href="#" class="foro">Foro</a></li>
</ul><!--termina menu-->
</div><!--termina header-->
<div id="centro"><!--Comienza centro-->
<div id="contenido-izquierda"><!--Comienza contenido izquierda-->
 
</div><!--Termina contenido izquierda-->
<div id="sidebar"><!--Comienza sidebar-->
 
</div><!--Termina sidebar-->
</div><!--Termina Centro-->
<div id="footer"><!--Comienza footer-->
 
</div><!--Termina footer-->
</div><!--Termina Contenido-->
</body>
</html>

Asi debe lucir tu codigo despues de terminar este capitulo, en el proximo vamos a comenzar agregando estilo a todo eso y a hacer las partes internas de nuestro tema (titulos, subtitulos y texto).

En el sistema que usamos para mostrar los codigos HTML no aparecen las sangrias, pero me refiero a algo como esto:

web0_3

Mijael es el creador y editor de skyandstars.net donde publica guias y tutoriales sobre WordPress, Cutenews, PHP, HTML y mucho más. Acutalmente estudiante universitario.

Mijael166

Quizas alguna de estas entradas te pueda interesar

19 Comentarios en "Crear pagina web desde Cero (Capitulo 1)"

Juan Carreño

4 mayo 2009

Respuesta

Amigo mio, debes leer un poco sobre usabilidad y mas sobre diseño de páginas web porque de verdad que tu web es difícil de leer. Se que tus intenciones son buenas pero tus esfuerzos se pierden al tener una página así, Con un fondo negro y letras pequeñas y oscuras cansa mucho la vista.
Mijael166

4 mayo 2009

Respuesta

Jejeje creeme que de verdad lo se, he intentado cambiar infinidades de veces este diseño (ya va para un año) pero pues mis atributos como diseñador no son los mejores que digamos, tengo muchos problemas que arreglar en esta pagina, entre ellos esta el diseño y la ubicacion y organizacion del contendio, gracias por las criticas y son bien tomadas :)…cuando cambie el diseño te paso un mail a que me des tu opinion. Saludos!!
leonardo

9 junio 2009

Respuesta

saludos amigo… cuales son las posibilidades de que me puedas pasar todo el tutorial en un pdf?

se te agradeseria muchismo amigo..
Mijael166

9 junio 2009

Respuesta

Te refieres a todos los capitulos?…Deja a ver que puedo hacer pero la verdad no te prometo nada…
ShairNash

20 junio 2009

Respuesta

mas especificamente de como o para q sirven el li y el ul
Mijael

20 junio 2009

Respuesta

Ok..
“UL” (unordered list) Traducido al español seria lista no ordenada, esta etiqueta indica que abre una lista de elementos que no tienen porque estar ordenados por ejemplo con numeros (1,2,3,4,5) un contraejemplo es la etiqueta “OL” que abre una lista ordenadas que puede ser algo como:
1- Primero
2- Segundo
3- Tercero
Eso es una lista ordenada.
La etiqueta “LI” lo que hace es abrir un elemento de la lista que tiene caracteristicas de su UL o OL, es decir en el caso de las listas ordenadas, el primer li seria “primero”. Espero que me entiendas, simplemente son listas…
Hadabell

16 septiembre 2009

Respuesta

Hola mijael… ya puse el background en mi página, llegué al “header” y no sé cómo poner el div con la dirección de la imagen :(
Mijael

16 septiembre 2009

Respuesta

Quieres decir q no sabes como colocarle al div una imagen?.. no entendi bien la pregunta linda.
Hadabell

17 septiembre 2009

Respuesta

si, eso mismo. no me sé el código para insertar una imagen.
Hadabell

17 septiembre 2009

Respuesta

osea, si quiero insertar una imagen por ejemplo: header.png, cómo la inserto?
Mijael

17 septiembre 2009

Respuesta

ok..el html seria asi:

Y el css seria asi:
#header {
background: url(header.png);
width: anchodelaimagen.px
heigth: alto de la imagen.px
}
Con eso se va a insertar la imagen…despues agregale margen para ubicarla donde quieres. un beso linda.
Hadabell

18 septiembre 2009

Respuesta

Respuesta al Comentario deMijael:

mmm lo inserté y no sale la imagen, sólo el código. No lo debo estar haciendo bien :(
bueno, creo terminaré agregando capas porque me queda menos de una semana para terminarlo (en caracas no tengo internet) y bueno, tampoco te he visto conectado para preguntarte directamente. Sé de igual forma, que los novatos fastidian jejeje y lo entiendo perfectamente. Ya me dan pena las preguntas! :P
Mijael166

18 septiembre 2009

Respuesta

Por dios linda como dices eso de que los novatos fastidian?…si para eso esta esta pagina, para ayudar a los que comienzan…no te pongas con eso :(
Hadabell

18 septiembre 2009

Respuesta

jajajaja… tranquilo!! es que estoy algo presionada, además me tienen presionada para que termine eso :( jejeje tranquilo, tu me has ayudado mucho!! :) y estoy segura seguirás ayudandome. Es que se me vuelve un “revoltillo” todo esto. Pero justo ahorita esta saliendome, estoy haciendo tooodo el tutorial, paso por paso, y ya hay un producto!! ya vincule el html con la hoja css y todo eso. Ya estoy aprendiendo más :) cuando te vea te muestro a ver que opinas. Un besote
Hadabell

18 septiembre 2009

Respuesta

es decir, respiré profundo y dije… esta v…. me va a salir!!! con todo y que el diseño de mi web es diferente al de tu ejemplo, estoy aplicandole la lógica y me va saliendo!! :) gracias por esta página!! es genial, de verdad que sale mejor asi que trabajar con capas. Las imagenes queda como en el fondo!! es espectacular.
jonus

25 septiembre 2009

Respuesta

Respuesta al Comentario deMijael166: aca otro novato y pesado soy alan. jejej registre porque me gusto la pagina. te comento solucionado lo del include, ahora en el html puse un iframe de una galeria de fotos, el problema es que el iframe sale fuera de lugar del div contenido-izquierdo, y es como que el iframe no existe porque el div centro no se extiende, no se si me explico, cualquier cosa si tenes un tiempito te dejo el la dire para ver de lo que hablo… Gracias y viejo cualquier cosa que pueda aportar encantado. la dire: http://www.elsaenglerpinturas.com.ar/index1.php
Mijael

25 septiembre 2009

Respuesta

No se si te entiendo..pero por lo que veo deberias añadirle un ancho mayor al div centro, y si no tiene un tamaño especifico simplemente no le coloques ningun valor en el ancho..no se si te entendi bien..
Stefgus

2 octubre 2009

Respuesta

Hola Mijael! ¿Como hacer para que una div te quede en el centro?
Mijael166

5 octubre 2009

Respuesta

Hola man…revisa el tutorial de como ajustar una web a todas las resoluciones, es lo mismo pero debes cambiar el tamaño del div, pero en esencia es lo mismo.

Deja un Comentario

Lee los tutoriales en tu Lenguaje:

Loading ...

Agrega tu Email y te enviaremos todos los nuevos tutoriales de skyandstars totalmente gratis!!

O tambien puedes seguirnos via..