Como hacer una pagina web, desde cero, rápido y fácil

Hola!! una ves mas intentando ayudar a todos aquellos que les gusta esto de la programacion, una vez mas con ASP.NET …

en esta oportunidad les mostrare como hacer una pagina web facil y rapido, como siempre lo digo, no será nada extravagante o profesional, solo algo que se vea bien y sencillo, tampoco hare conexiones con bases de datos ni validaciones ni nada de esas cosas porque la idea es solo crear un diseño sencillo con cosas basicas y depronto unas que otras no tan basicas, pero la idea es poder presentar algo agradablemente visible, en otros post haremos cosas mas avanzadas con conexiones y validaciones, pero en este caso solo sera diseñar una estructura estable, dinamica y sencilla, asi que comencemos…

primero creamos un sitio web vacio…

creamos una pagina maestra a la que llamaremos MiPagina.master

<%@MasterLanguage=”VB”CodeFile=”MiPagina.master.vb”Inherits=”MiPagina” %>

<!DOCTYPEhtmlPUBLIC”-//W3C//DTD XHTML 1.0 Transitional//EN”"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<htmlxmlns=”http://www.w3.org/1999/xhtml”>

<headrunat=”server”>

<title></title>

<asp:ContentPlaceHolderid=”head”runat=”server”>

</asp:ContentPlaceHolder>

</head>

<body>

<formid=”form1″runat=”server”>

<div>

<asp:ContentPlaceHolderid=”ContentPlaceHolder1″runat=”server”>

</asp:ContentPlaceHolder>

</div>

</form>

</body>

</html>

No voy a explicar todo el código porke la idea no es dar clases de html ni de asp.net asi que solo dire lo necesario asi ke empecemos…

Solo usaremos 2 secciones para este ejemplo…la primera es el código que se encuentra dentro de las etiquetas <head> …</head> y lo que se encuentra dentro de las etiquetas <body> … </body>

Las etiquetas “head” en este momento nos permitirán agregarle un titulo a la pagina, este titulo aparecerá en la parte superior de nuestro navegador o en las pestañas del mismo…asi que escribamos un titulo para nuestra pagina, para hacerlo usaremos las etiquetas <title></title>…

<head runat=”server”>

<title>Takumi Project</title>

<asp:ContentPlaceHolder id=”head” runat=”server”>

</asp:ContentPlaceHolder>

</head>

Después de haber colocado nuestro titulo, nos dirigimos a las etiquetas <body> … </body> aquí comenzaremos a agregarle algunas cosillas a nuestra pagina…

Notaremos que dentro de las etiquetas “body” existen otras etiquetas…ubicaremos las etiquetas <form> … </form>, dentro de ellas ya existen dos etiquetas con el nombre “div” y “asp:ContentPlaceHolder” mas adelante sabremos para que sirve esta ultima…, primero crearemos espacios (o divisiones…) en nuestra pagina maestra… para esto usaremos las etiquetas DIV, creemos 3 divisiones asi….

<body>

<form id=”form1″ runat=”server”>

<div>

</div>

<div>

</div>

<div>

<asp:ContentPlaceHolder id=”ContentPlaceHolder1″ runat=”server”>

</asp:ContentPlaceHolder>

</div>

<div>

</div>

</form>

</body>



Dos de las etiquetas creadas estan sobre el DIV con la etiqueta del contentplace holder y una ultima debajo del content place holder. Ahora para poder diferenciar cada uno de los div, les pondremos un nombre…

<body>

<form id=”form1″ runat=”server”>

<div id=”header”>

</div>

<div id=”navMenu”>

</div>

<div id=”content”>

<asp:ContentPlaceHolder id=”ContentPlaceHolder1″ runat=”server”>

</asp:ContentPlaceHolder>

</div>

<div id=”footer”>

</div>

</form>

</body>



Ahora comenzaremos a agregar agunos controles a nuestra pagina para que valla cogiendo forma primero agreguemos una imagen para nuestro encabezado…

Usamos el control llamado “Imagen” y lo agregamos dentro de nuesta división llamada “header” asi:

<div id=”header”>

<asp:Image ID=”Image1″ runat=”server” />

</div>



Luego crearemos un menú de navegación para nuestra pagina, lo haremos en la división llamda “navmenu” en este caso usare 5 labels…

<div id=”navMenu”>

<asp:Label ID=”Label1″ runat=”server” Text=”Label”></asp:Label>

<asp:Label ID=”Label2″ runat=”server” Text=”Label”></asp:Label>

<asp:Label ID=”Label3″ runat=”server” Text=”Label”></asp:Label>

<asp:Label ID=”Label4″ runat=”server” Text=”Label”></asp:Label>

<asp:Label ID=”Label5″ runat=”server” Text=”Label”></asp:Label>

</div>

Y en nuesta división llamada “footer” agregaremos un label mas asi:

<div id=”footer”>

<asp:Label ID=”Label6″ runat=”server” Text=”Label”></asp:Label>

</div>



Quedaría algo asi como esto:

<body>

<form id=”form1″ runat=”server”>

<div id=”header”>

<asp:Image ID=”Image1″ runat=”server” />

</div>



<div id=”navMenu”>

<asp:Label ID=”menu1″ runat=”server” Text=”Opcion1″></asp:Label>

<asp:Label ID=”menu2″ runat=”server” Text=”Opcion2″></asp:Label>

<asp:Label ID=”menu3″ runat=”server” Text=”Opcion3″></asp:Label>

<asp:Label ID=”menu4″ runat=”server” Text=”Opcion4″></asp:Label>

<asp:Label ID=”menu5″ runat=”server” Text=”Opcion5″></asp:Label>

</div>

<div id=”content”>

<asp:ContentPlaceHolder id=”ContentPlaceHolder1″ runat=”server”>

</asp:ContentPlaceHolder>

</div>

<div id=”footer”>

<asp:Label ID=”mensaje” runat=”server”>Takumi project 2012. Todos los derechos reservados</asp:Label>

</div>

</form>

</body>



Si intentamos ver nuestra pagina desde un navegador web en este momento, se nos presentara un error como este:

Como hacer una pagina web, desde cero, rápido y fácil

Esto es porque aun no hemos creado un contenido para nuestra pagina, lo que hemos hecho hasta el momento es crear una estructura. Para contenido a nuestra pagina comenzaremos agregando un webform (.aspx)

diseño

Es muy importante que al crear nuestro webform en este caso Defaul.aspx, marquemos la opción “Seleccionar pagina maestra”. La idea es crear una pagina que contenga la información que queremos mostrar dentro de la estructura que hicimos en nuestra pagina maestra, al crear nuestro webform, nos preguntara cual es nuestro archivo de pagina maestra al cual queremos enlazar nuestra pagina, como solo tenemos una pagina maestra, solo nos saldrá esa.. la escogemos y aceptamos.

web

Nos aparecerá nuestra nueva pagina con el siguiente código:

<%@ Page Title=”" Language=”VB” MasterPageFile=”~/MiPagina.master” AutoEventWireup=”false” CodeFile=”Default.aspx.vb” Inherits=”_Default” %>

<asp:Content ID=”Content1″ ContentPlaceHolderID=”head” Runat=”Server”>

</asp:Content>

<asp:Content ID=”Content2″ ContentPlaceHolderID=”ContentPlaceHolder1″ Runat=”Server”>

</asp:Content>



Como será una pagina de contenido, seguiremos trabajando con ella luego. Si queremos ver como se ve nuestra pagina, ahora podemos hacerlo ya que heos creado una pagina para nuestro contenido. Asi luce nuestra pagina en este momento:

Microsoft

SI! Aunque no lo creas con todo lo que hemos hecho hasta el momento, esto es lo único que hemos hecho jejejejeje, si si si ya se, eso no parece en nada una pagina web, pero no te desesperes, hemos hecho mas de la mitad del trabajo, AUNQUE NO LO CREAS! Jejeje ya te deras cuenta por que… pero para que no te desesperes, comencemos a darle forma, ya veras que es solo cuestión de “ubicación” y unos cuantos colores….

Primero que todo, escojamos una imagen para nuestro encabezado, la agregaremos al proyecto

.net

Para asignar nuesta imagen a nuestro control “Image” simplemente le agregamos el atributo “ImageUrl”

<div id=”header”>

<asp:Image ID=”Image1″ runat=”server” ImageUrl=”~/banner.png” />

</div>



Si visualizamos nuestra pagina en el navegador se vera algo como esto….

asp

Mucho mejor cierto??? Que??? Noo??? Que le falta mas color dices??? Ok..hagamos algo de magia!

Vallamos a nuestro proyecto y agreguemos un nuevo elemento, y escogemos “hoja de estilos”, este es un archivo con extensión .css (StyleSheet.css), yo lo renombre y lo deje como “Style.css”

Inicialmente tendrá solo este valor:

body {

}



Es aquí donde empieza toda la magia… ahora veras el porque le dimos nombres a las divisiones



Editaremos lo que esta escrito en nuesta hoja de estilos, como su nombre lo dice, este elemento nos sirve para estilizar nuestra pagina, es decir, dejarla tal cual como queremos, ya veras a que me refiero…. Primero que nada agregaremos las siguientes líneas a nuestra hoja de estilos…

body

{

background-color: #C0C0C0;

}

Esto agregara un fondo gris a nuestra pagina web…

#form1

{

width: 800px;

background-color: #333333;

margin: 20px auto;

}

Con esto nuestra pagina se vera de un color gris oscuro (mas oscuro que el fondo…)

#navMenu

{

font-family: ‘Buxton Sketch’;

font-size: large;

color: #FFFFFF;

text-align:center;

padding-top:5px;

padding-bottom:5px;

}



Este código centrara nuestro menú de navegación y le asignara el color blanco a las letras de nuestros labels (también le cambia el tipo de letra )

#menu1, #menu2, #menu3, #menu4, #menu5

{

padding: 2px 10px 2px 10px;

cursor:pointer;

}



Con esto, hacemos parecer a nuestros labels como unos botones es decir, ke cambie el puntero del mouse cuando pase sobre ellos….

#content

{

background-color: #FFFFFF;

padding: 20px 30px;

}



Esto coloca un fondo blanco en el contenido de nuestra pagina

#footer

{

text-align: center;

color: #FFFFFF;

font-size: small;

padding: 30px 10px;

}



Con esto alineamos al centro el texto de nuestro pie de pagina y le reducimos el tañamo a la letra…

.Selected

{

background-color: #808080;

}



.notSelected

{

background-color: #333333;

}



Y con estos 2 ultimos lo que haremos es cambiar el color del contorno de nuestros labels cuando el mopuse pase sobre ellos….(como si fuesen botones!!!)

Para que esto ultimo funcione debemos agregar 2 propiedades a cada uno de nuestros labels…una llamada “OnMouseOver” y la otra “OnMouseOut”, de esta manera:

<div id=”navMenu”>

<asp:Label ID=”menu1″ runat=”server” Text=”Opcion1″ onMouseOver=”this.className=’Selected’” onMouseOut=”this.className=’notSelected’”></asp:Label>

<asp:Label ID=”menu2″ runat=”server” Text=”Opcion2″ onMouseOver=”this.className=’Selected’” onMouseOut=”this.className=’notSelected’”></asp:Label>

<asp:Label ID=”menu3″ runat=”server” Text=”Opcion3″ onMouseOver=”this.className=’Selected’” onMouseOut=”this.className=’notSelected’”></asp:Label>

<asp:Label ID=”menu4″ runat=”server” Text=”Opcion4″ onMouseOver=”this.className=’Selected’” onMouseOut=”this.className=’notSelected’”></asp:Label>

<asp:Label ID=”menu5″ runat=”server” Text=”Opcion5″ onMouseOver=”this.className=’Selected’” onMouseOut=”this.className=’notSelected’”></asp:Label>

</div>



Recuerdas como se veía nuestra pagina hace un rato?? Dale!! Intenta de nuevo y veras como “fluye la magia…… TARAN!!!!!!” jajajajajaja

Se ve muy diferente cierto??? Ya tiene mas aspecto de pagina web! Ahora solo nos queda añadir algún contenido.

Y para agregar enlaces a los labels (para que los redireccionen a otras paginas solo agregan la propiedad de OnClick y en el código de la pagina crean un evento de redirección. Ej:

Public sub NextPage(s as object, e as System.EventArgs)

Response.Redirect(“OtraPagina.aspx”)

End Sub

Y la propiedad quedaria asi: OnClick=”NextPage”

Eso es todo chicos!!! Espero lo hayan disfrutado, es un tuto bien básico (aunque con algunos temillas algo avanzaditos) pero intente hacerlo lo mas fácil posible, espero me hayan entendido bien , hasta la próxima

Para ver como quedaria pueden visitar este enlace:

http://aspspider.ws/xxTakumixx/

22 comentarios - Como hacer una pagina web, desde cero, rápido y fácil

@kilos12
Y lod dominio como son? por ejemplo, si quiero .com.ar?
@gonzalo_122
&lt;%@MasterLanguage=”VB”CodeFile=”MiPagina.master.vb”Inherits=”MiPagina” %&gt; este troso de codigo es algo dudoso.

enseñas a hacer una pagina WEB pero no explicas nada.

Bueno no sabes nada eso es lo único que puedo entender en tu código.

PDT: soy Programado...
@Dulce_RLutz
Genial este es el proximo tema que vere en la escuela va para favoritos
@naruto0008
kilos12 dijo:Y lod dominio como son? por ejemplo, si quiero .com.ar?

los dominos com.ar son gratuitos entra nic.ar
y yo tengo una pagina pero funciona con wordpress y me preguntaba que es mejor, con wordpress o como esta en el post
@gonzalo_122
naruto0008 dijo:
kilos12 dijo:Y lod dominio como son? por ejemplo, si quiero .com.ar?

los dominos com.ar son gratuitos entra nic.ar
y yo tengo una pagina pero funciona con wordpress y me preguntaba que es mejor, con wordpress o como esta en el post


WordPress es un CMS y lo que esta en este pos es una simple pagina en html si quieres llegar a lo que es algo parecido o mucho mejor que wordpress entonces tienes que hacerlo en PHP con MYSQL, JAVASCRIPT Jquery y otros muchos mas lengiajes que van embebidos dentro del código HTML ademas que tienes que usar CSS la forma que aqui te enseña es la mas basica y que se usaba en 1997 y 99 ahora se usa HTM5 y CCS3.
@gonzalo_122 +1
XxtakumixX dijo:
gonzalo_122 dijo:&lt;%@MasterLanguage=”VB”CodeFile=”MiPagina.master.vb”Inherits=”MiPagina” %&gt; este troso de codigo es algo dudoso. enseñas a hacer una pagina WEB pero no explicas nada. Bueno no sabes nada eso es lo único que puedo entender en tu código. PDT: soy Programado...


estoy estudiando programacion y vi asp.net, no lo hago para presumir, solo ke hace un tiempo no sabia nada de asp y kise hacer un tutorial pensando en personas ke como yo no sabia nada nada, asi ke solo explike lo necesario, si kieres te explico toda la pagina y te enseño html5, jquery, css, javasript tambien te puedo pasar links para ke te descargues los libros con los ke yo aprendi si eres programador porke entras a un enlace ke dice &quot;CREA UNA PAGINA WEB FACIL RAPIDO Y SENCILLO&quot;?? si se supone ke ya tu sabes?? eso si me parece dudoso pero bueno...cuando kieras compartimos informacion yo con todo gusto..como te dije, no sere el SUPER-Programador, pero ten por seguro ke me se defender



con todo gusto te puedo enseñar muchas cosas y darte un espacio gratuito en mi hosting basado en ubunto para que practiques
@neo___ +1
lo mas jodido es poner el domain
@naruto0008
XxtakumixX dijo:
naruto0008 dijo:
kilos12 dijo:Y lod dominio como son? por ejemplo, si quiero .com.ar?
los dominos com.ar son gratuitos entra nic.ar y yo tengo una pagina pero funciona con wordpress y me preguntaba que es mejor, con wordpress o como esta en el post


buu en mi pais los venden


son gratis, yo soy de Guatemala y me la dieron, solamente tienes que poner rellenar el formulario,y seguir los pasos
@gonzalo_122
neo___ dijo:lo mas jodido es poner el domain

es lo mas simple solo pagas $9 y ya esta es muy muy simple
@facmax09999
Yo crearia un archivo &quot;index.html&quot; y lo subiria a un hosting, y despues editaria la pagina desde el mismo archivo
@gonzalo_122
facmax09999 dijo:Yo crearia un archivo &quot;index.html&quot; y lo subiria a un hosting, y despues editaria la pagina desde el mismo archivo

no es tan simple como eso para hacer eso necesitas usar php javascript y mysql no vasta con usar html puro.
@facmax09999
gonzalo_122 dijo:
facmax09999 dijo:Yo crearia un archivo &quot;index.html&quot; y lo subiria a un hosting, y despues editaria la pagina desde el mismo archivo

no es tan simple como eso para hacer eso necesitas usar php javascript y mysql no vasta con usar html puro.

Usa el adobe muse
@gonzalo_122
XxtakumixX dijo:
gonzalo_122 dijo:
XxtakumixX dijo:
gonzalo_122 dijo:&lt;%@MasterLanguage=”VB”CodeFile=”MiPagina.master.vb”Inherits=”MiPagina” %&gt; este troso de codigo es algo dudoso. enseñas a hacer una pagina WEB pero no explicas nada. Bueno no sabes nada eso es lo único que puedo entender en tu código. PDT: soy Programado...
estoy estudiando programacion y vi asp.net, no lo hago para presumir, solo ke hace un tiempo no sabia nada de asp y kise hacer un tutorial pensando en personas ke como yo no sabia nada nada, asi ke solo explike lo necesario, si kieres te explico toda la pagina y te enseño html5, jquery, css, javasript tambien te puedo pasar links para ke te descargues los libros con los ke yo aprendi si eres programador porke entras a un enlace ke dice &quot;CREA UNA PAGINA WEB FACIL RAPIDO Y SENCILLO&quot;?? si se supone ke ya tu sabes?? eso si me parece dudoso pero bueno...cuando kieras compartimos informacion yo con todo gusto..como te dije, no sere el SUPER-Programador, pero ten por seguro ke me se defender
con todo gusto te puedo enseñar muchas cosas y darte un espacio gratuito en mi hosting basado en ubunto para que practiques


mientras me regales el hosting todo bien, lo de enseñarme...NAHHHH!! prefiero aprender por mi cuenta cuando me das el hosting??? jajaja

Cuando Quieras
solo dame el nombre se usuario que quieres usar y el pss por privado para crearte una cuenta ftp y en menos de 5 min estará listo
@gonzalo_122 +1
XxtakumixX dijo:
gonzalo_122 dijo:
facmax09999 dijo:Yo crearia un archivo &quot;index.html&quot; y lo subiria a un hosting, y despues editaria la pagina desde el mismo archivo
no es tan simple como eso para hacer eso necesitas usar php javascript y mysql no vasta con usar html puro.


y mi hosting??? mucha palabra y poca accion!!

ya lo tienes solo cuidalo cuidado con el codigo malicioso a es gratis y es ilimitado