como hacer una pagina web

Como hacer una pagina web es desde que llego Internet a nuestras vidas algo imprescindible. No importa cual sea el giro de tu negocio o el tópico de lo que quieres escribir. Siempre es importante conocer como crear una página web.

Como hacer una pagina web

Para hacer una página web con HTML tan solo debes contar con un editor de código, una computadora y algo de tiempo. Anteriormente crear archivos HTML era algo complicado con el uso del bloc de notas. Pero ahora existe software de licencia libre que nos facilita mucho esta tarea. Uno de ellos es Brackets. El cual puede interpretar también lenguajes como Javascript o PHP.

Una vez que hayas descargado Brackets lo primero por hacer es crear un archivo nuevo. Este archivo lo debes guardar como index.html en la carpeta que tu desees. Y agregaremos el siguiente código HTML.

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>Halloween fiesta</title>
  5.     </head>
  6.     <body>
  7.     </body>
  8. </html>

Primero dentro de las etiquetas head vamos a poner etiquetas style para usar CSS. El CSS es para hacer hojas de estilo muy importante en el actual diseño de paginas web. Crearemos un div dentro de body para colocarlo como la caja principal a la cual nombraremos contenedor. En Css colocamos un estilo para div.contenedor con un ancho del 100% mira el código siguiente.

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>Halloween fiesta</title>
  5.         <style>
  6.             *{
  7.             margin: 0;  
  8.             }
  9.             div.contenedor{
  10.                 width: 100%;
  11.             }
  12.         </style>
  13.     </head>
  14.     <body>
  15.      <div class="contenedor">
  16.        
  17.      </div>  
  18.     </body>
  19. </html>

Ahora toca realizar el top de la página. El top es un div que va en la parte superior y que incluye un logotipo y una barra de enlaces. Para realizarlo primero pondremos una etiqueta header y dentro de ella dos divs. Una que llamare logo y la otra navegación. la etiqueta header va dentro del div contenedor.

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>Halloween fiesta</title>
  5.         <style>
  6.             *{
  7.             margin: 0;  
  8.             }
  9.             div.contenedor{
  10.                 width: 100%;
  11.             }
  12.         </style>
  13.     </head>
  14.     <body>
  15.      <div class="contenedor">
  16.         <header>
  17.          <div class="logo"></div>
  18.          <div class="navegacion"></div>
  19.         </header>
  20.      </div>  
  21.     </body>
  22. </html>

Embelleceremos el top de la pagina. A header le cambiaremos el background a negro con un ancho del 90% y una altura de 90 pixeles. También a div logo y div navegacion agregaremos estilos y pondremos etiquetas de navegación dentro de div navegacion con li.

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>Halloween fiesta</title>
  5.         <style>
  6.             *{
  7.             margin: 0;  
  8.             }
  9.             div.contenedor{
  10.                 width: 100%;
  11.             }
  12.             header{
  13.                 width: 90%;
  14.                 height: 90px;
  15.                 background-color: black;
  16.                 margin-left: auto;
  17.                 margin-right: auto;
  18.             }
  19.             div.logo{
  20.                 color: white;
  21.             }
  22.             div.navegacion{
  23.                 color: white;
  24.             }
  25.             li {
  26.                 display: inline;
  27.             }
  28.         </style>
  29.     </head>
  30.     <body>
  31.      <div class="contenedor">
  32.         <header>
  33.          <div class="logo">Halloween</div>
  34.          <div class="navegacion"><nav>
  35.             <ul>
  36.                 <li><a href="home.html">Home</a></li>
  37.                 <li><a href="historia.html">Historia</a></li>
  38.                 <li><a href="acerca.html">Acerca</a></li>
  39.             </ul>
  40.              </nav></div>
  41.         </header>
  42.      </div>  
  43.     </body>
  44. </html>

como hacer una pagina web.

Hasta este momento nuestra pagina web. Ya va tomando forma. En la imagen puedes ver que el encabezado es con fondo negro. Aún se ve muy pobre, Poco a poco iremos mejorando la pagina. No desesperes.

Así se ve el encabezado
este es el encabezado aún se ve muy pobre.

Por mi parte siempre trato de ir terminando sección por sección. Vamos a finalizar el encabezado. Primero vamos a configurar los estilos para el logo agregando un margen de 2 pixeles. Un margen izquierdo de 20 pixeles para mover el logo un poco hacia la derecha. He cambiado el tamaño de la fuente a 70 pixeles y para la familia de la fuente. He ido a google fonts y elegí la work sans. El colo del logo en texto es blanco. Lo mismo he hecho para el div de navegación solo que con diferentes valores. Revisa los estilos.

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>Halloween fiesta</title>
  5.         <link href="https://fonts.googleapis.com/css?family=Work+Sans:900" rel="stylesheet">
  6.         <link href="https://fonts.googleapis.com/css?family=Nosifer" rel="stylesheet">
  7.         <style>
  8.             *{
  9.             margin: 0;
  10.             }
  11.             div.contenedor{
  12.                 width: 100%;
  13.                 background-color: black;
  14.             }
  15.             header{
  16.                 width: 100%;
  17.                 height: 90px;
  18.                 margin-left: auto;
  19.                 margin-right: auto;
  20.                 background-color: black;
  21.             }
  22.             div.logo{
  23.                 color: white;
  24.                 float: left;
  25.                 margin-top:15px;
  26.                 margin-left: 20px;
  27.                 font-size: 40px;
  28.                 font-family: 'Nosifer', cursive;
  29.                 color:darkorange;
  30.             }
  31.             div.navegacion{
  32.                 color: white;
  33.                 float: right;
  34.                 margin-top:34px;
  35.                 margin-right: 20px;
  36.                 font-size: 20px;
  37.                 font-family: 'Work Sans', sans-serif;
  38.             }
  39.             li {
  40.                 display: inline;
  41.                 margin: 0 auto;
  42.             }
  43.             a{
  44.                 color: darkorange;
  45.             }
  46.         </style>
  47.     </head>
  48.     <body>
  49.      <div class="contenedor">
  50.         <header>
  51.          <div class="logo">Halloween</div>
  52.          <div class="navegacion"><nav>
  53.             <ul>
  54.                 <li><a href="home.html">Home</a></li>
  55.                 <li><a href="historia.html">Historia</a></li>
  56.                 <li><a href="acerca.html">Acerca</a></li>
  57.             </ul>
  58.              </nav></div>
  59.         </header>
  60.      </div>  
  61.     </body>
  62. </html>

Así luce el encabezado por el momento ya no lo modificaremos más. Le he puesto al titulo de la pagina Halloween con letras de google font y color darkorange. Los mismo hice con los enlaces de navegación. Puedes ver que he usado algunas parámetros de estilos para hacerlo lucir como deseo.

En la siguiente imagen puedes apreciar como luce el encabezado final.

este es el top final
Este ya sera el encabezado final para la página.

Recuerda modificar los estilos para que la pagina web vaya quedando a tu gusto.

Ahora voy a pasar al contenido para esto creare dos divs más. Div contenido que incluye una imagen de fondo que he descargado de pixabay. Sobre la imagen se vera una leyenda a la cual he agregado de igual forma estilos. Este texto aparece a la izquierda del div contenido. El siguiente div incluye tres divs más que se llaman lapidas los cuales indican la Historia, fotografías y Monstruos. El código HTML es el siguiente.

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>Halloween fiesta</title>
  5.         <link href="https://fonts.googleapis.com/css?family=Work+Sans:900" rel="stylesheet">
  6.         <link href="https://fonts.googleapis.com/css?family=Nosifer" rel="stylesheet">
  7.         <style>
  8.             *{
  9.             margin: 0;
  10.             }
  11.             div.contenedor{
  12.                 width: 100%;
  13.                 background-color: black;
  14.             }
  15.             header{
  16.                 width: 100%;
  17.                 height: 90px;
  18.                 margin-left: auto;
  19.                 margin-right: auto;
  20.                 background-color: black;
  21.             }
  22.             div.logo{
  23.                 color: white;
  24.                 float: left;
  25.                 margin-top:15px;
  26.                 margin-left: 20px;
  27.                 font-size: 40px;
  28.                 font-family: 'Nosifer', cursive;
  29.                 color:darkorange;
  30.             }
  31.             div.navegacion{
  32.                 color: white;
  33.                 float: right;
  34.                 margin-top:34px;
  35.                 margin-right: 20px;
  36.                 font-size: 20px;
  37.                 font-family: 'Work Sans', sans-serif;
  38.             }
  39.             li {
  40.                 display: inline;
  41.                 margin: 0 auto;
  42.             }
  43.             a{
  44.                 color: darkorange;
  45.             }
  46.             div.contenido{
  47.                 width: 100%;
  48.                 background-image: url("witchs-house-1635770_1920.jpg");
  49.                 background-position: center;
  50.                 height: 400px;
  51.                 margin-left: auto;
  52.                 margin-right: auto;
  53.                 text-align: center;
  54.                 display:table;
  55.                 background-color: antiquewhite;
  56.             }
  57.             div.letrasContenido{
  58.                 margin-top: 110px;
  59.                 color: white;
  60.                 width:40%;
  61.                 float: right;
  62.                 margin-right: 20px;
  63.                 font-size: 20px;
  64.                 font-family: 'Work Sans', sans-serif;
  65.                 color:white;
  66.                 border: 2px;
  67.             }
  68.             div.subcontenido{
  69.                 width: 100%;
  70.                 height: 200px;
  71.                 margin-left: auto;
  72.                 margin-right: auto;
  73.                 text-align: center;
  74.                 display:table;
  75.                 background-color:orange;
  76.             }
  77.             strong{
  78.                 font-size: 40px;
  79.                 color: darkorange;
  80.                 font-family: 'Nosifer', cursive;
  81.             }
  82.             div.lapidas{
  83.                 width: 30%;
  84.                 float: left;
  85.                 height: 200px;
  86.                 margin: 1.5%;
  87.                 background-color: darkorange;
  88.                 text-align: center;
  89.                 font-family: 'Nosifer', cursive;
  90.                 border-radius: 25px;
  91.                 border: 2px solid #000000;
  92.             }
  93.         </style>
  94.     </head>
  95.     <body>
  96.      <div class="contenedor">
  97.         <header>
  98.          <div class="logo">Halloween</div>
  99.          <div class="navegacion"><nav>
  100.             <ul>
  101.                 <li><a href="home.html">Home</a></li>
  102.                 <li><a href="historia.html">Historia</a></li>
  103.                 <li><a href="acerca.html">Acerca</a></li>
  104.             </ul>
  105.              </nav></div>
  106.         </header>
  107.          <div class="contenido">
  108.          <div class="letrasContenido"><p>El 31 de Octubre el objetivo de esta fiesta se convierte en <strong>Espantar</strong>. A los
  109.              niños que no se porten bien.</p></div>
  110.          </div>
  111.          <div class="subcontenido">
  112.          <div class="lapidas"><h2>Historia</h2><img src="book.png"/></div>
  113.          <div class="lapidas"><h2>Fotografías</h2><img src="witch.png"/></div>
  114.          <div class="lapidas"><h2>Monstruos</h2><img src="bat.png"/></div>
  115.          </div>
  116.      </div>  
  117.     </body>
  118. </html>

En la imagen puedes ver como va quedando el sitio ya con el contenido y el subcontenido. Solo nos queda por hacer el footer y la página web quedaría lista para subirla al servidor.

contenido de la pagina
Este es finalmente el contenido con una imagen y después un subcontenido.

Para el footer solo agregamos una etiqueta div llamada contenedorFooter y dentro las etiquetas footer. Podría hacer omisión de la div contenedorFooter. Pero para aplicar los estilos es necesario.

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>Halloween fiesta</title>
  5.         <link href="https://fonts.googleapis.com/css?family=Work+Sans:900" rel="stylesheet">
  6.         <link href="https://fonts.googleapis.com/css?family=Nosifer" rel="stylesheet">
  7.         <style>
  8.             *{
  9.             margin: 0;
  10.             }
  11.             div.contenedor{
  12.                 width: 100%;
  13.                 background-color: black;
  14.             }
  15.             header{
  16.                 width: 100%;
  17.                 height: 90px;
  18.                 margin-left: auto;
  19.                 margin-right: auto;
  20.                 background-color: black;
  21.             }
  22.             div.logo{
  23.                 color: white;
  24.                 float: left;
  25.                 margin-top:15px;
  26.                 margin-left: 20px;
  27.                 font-size: 40px;
  28.                 font-family: 'Nosifer', cursive;
  29.                 color:darkorange;
  30.             }
  31.             div.navegacion{
  32.                 color: white;
  33.                 float: right;
  34.                 margin-top:34px;
  35.                 margin-right: 20px;
  36.                 font-size: 20px;
  37.                 font-family: 'Work Sans', sans-serif;
  38.             }
  39.             li {
  40.                 display: inline;
  41.                 margin: 0 auto;
  42.             }
  43.             a{
  44.                 color: darkorange;
  45.             }
  46.             div.contenido{
  47.                 width: 100%;
  48.                 background-image: url("witchs-house-1635770_1920.jpg");
  49.                 background-position: center;
  50.                 height: 400px;
  51.                 margin-left: auto;
  52.                 margin-right: auto;
  53.                 text-align: center;
  54.                 display:table;
  55.                 background-color: antiquewhite;
  56.             }
  57.             div.letrasContenido{
  58.                 margin-top: 110px;
  59.                 color: white;
  60.                 width:40%;
  61.                 float: right;
  62.                 margin-right: 20px;
  63.                 font-size: 20px;
  64.                 font-family: 'Work Sans', sans-serif;
  65.                 color:white;
  66.                 border: 2px;
  67.             }
  68.             div.subcontenido{
  69.                 width: 100%;
  70.                 height: 200px;
  71.                 margin-left: auto;
  72.                 margin-right: auto;
  73.                 text-align: center;
  74.                 display:table;
  75.                 background-color:orange;
  76.             }
  77.             strong{
  78.                 font-size: 40px;
  79.                 color: darkorange;
  80.                 font-family: 'Nosifer', cursive;
  81.             }
  82.             div.lapidas{
  83.                 width: 30%;
  84.                 float: left;
  85.                 height: 200px;
  86.                 margin: 1.5%;
  87.                 background-color: darkorange;
  88.                 text-align: center;
  89.                 font-family: 'Nosifer', cursive;
  90.                 border-radius: 25px;
  91.                 border: 2px solid #000000;
  92.             }
  93.             div.contenedorFooter{
  94.                 width: 100%;
  95.                 height: 150px;
  96.                 margin-left: auto;
  97.                 margin-right: auto;
  98.                 text-align: center;
  99.                 display:table;
  100.                 background-color:black;
  101.                
  102.             }
  103.             footer{
  104.                 margin-top: 60px;
  105.                 color:darkorange;
  106.                 width:100%;
  107.                 margin-left: auto;
  108.                 margin-left: auto;
  109.                 font-size: 20px;
  110.                 font-family: 'Nosifer', cursive;
  111.             }
  112.         </style>
  113.     </head>
  114.     <body>
  115.      <div class="contenedor">
  116.         <header>
  117.          <div class="logo">Halloween</div>
  118.          <div class="navegacion"><nav>
  119.             <ul>
  120.                 <li><a href="home.html">Home</a></li>
  121.                 <li><a href="historia.html">Historia</a></li>
  122.                 <li><a href="acerca.html">Acerca</a></li>
  123.             </ul>
  124.              </nav></div>
  125.         </header>
  126.          <div class="contenido">
  127.          <div class="letrasContenido"><p>El 31 de Octubre el objetivo de esta fiesta se convierte en <strong>Espantar</strong>. A los
  128.              niños que no se porten bien.</p></div>
  129.          </div>
  130.          <div class="subcontenido">
  131.          <div class="lapidas"><h2>Historia</h2><img src="book.png"/></div>
  132.          <div class="lapidas"><h2>Fotografías</h2><img src="witch.png"/></div>
  133.          <div class="lapidas"><h2>Monstruos</h2><img src="bat.png"/></div>
  134.          </div>
  135.          <div class="contenedorFooter">
  136.          <footer>Derechos Reservados Halloween por AbolenGeek</footer>
  137.          </div>
  138.      </div>  
  139.     </body>
  140. </html>

Este código HTML lo puedes utilizar para crear tu propia página web. Tan solo recuerda descargar una imagen de acuerdo a tu negocio. Puedes jugar con los estilos. Agregar más divs. Este es el como hacer una pagina web gratis.

Comments

comments

%d bloggers like this: