Hacer pagina web

Instrucciones para crear su primera página web básica

 
Dominio

Lo primero para crear tu web es buscar y comprar el nombre de internet que quieras usar. A ser posible intenta que en el nombre de tu dominio estén incluidas palabras que hagan referencia a tu negocio, ej: un despacho de abogados "abogadosexpertos.com". La terminación del dominio sigue este orden:
  1. Intentar conseguir tu dominio .com
  2. Si no está disponible el dominio .com busca un dominio .es o .net
  3. Si ninguno de las terminaciones anteriores esta libré intenta buscar otro nombre para el dominio




 
Hosting

Para empezar tu página web te recomendamos un Hosting con entré 1gb y 5gb, versión php 5.3x o más y por lo menos una base de datos mysql. Te recomendamos que el Hosting que contrates esté en el mismo país en el que quieras posicionar tu página web.
Una vez contrates el Hosting recibirás un correo con varias claves, guárdalas y al final de la página te mostramos como configurarlo todo.




 
Preparativos

Vamos a empezar instalando el programa de edición de código fuente Atom gratuito.
Una vez instalado vamos a crear una carpeta llamada "web" y abrimos Atom y creamos dentro un archivo que vamos a llamar índex.html (este archivo contendrá la página principal de la web)
Nota: nuestra página web la realizaremos sobre HTML5




index.html (archivo principal de la página web)

<!DOCTYPE html>
<html lang="es">
  <head>
    <title>Page title</title>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="estilo.css" />
  </head>
  <body>
    <header>
      <nav></nav>
    </header>
    <section>
      <article>
        <header></header>
        <section></section>
        <footer></footer>
      </article>
    </section>
    <aside></aside>
    <footer></footer>
  </body>
</html>



 
Añadimos un título en la cabezera, la palabra más importante para nuestra web.

<header>
  <nav></nav>
  <h1>Título principal de la página actual el index</h1>
</header>



 
Ponemos el menú el la cabecera:

<header>
  <nav>
    <ul>
      <li><a href="#">pagina1</a></li>
      <li><a href="#">pagina2</a></li>
      <li><a href="#">pagina3</a></li>
    </ul>
  </nav>
  <h1>Título principal de la página actual el index</h1>
</header>



 
Ahora vamos a poner algo de contenido a nuestra nueva página web:

<article>
  <header>
    <h2>título de esta parte de la página</h2>
    <p>pequeño resumen del contenido que vamos a poner a continuación</p>
  </header>
  <section>
    <h3>SUbtitulo</h3>
    <p>descripción completa del texto que quieras para tu página web</p>
    <img sec="http://www.spaceweb.es/assets/mails/logo_emails@2X.png" alt="nombre de la imagen">
  </section>
  <footer>una pequeña nota de finalización o recordatorio de lo hablado.</footer>
</article>



 
Muy bien ya casi tenemos la web lista, ahora vamos a rellenar la etiqueta <aside> Que se usa por ejemplo para poner una como lateral en nuestra web con contenido relacionado a la página pero no fundamental, lo podemos usar para publicitar las demás páginas que tenemos en nuestra web:

<aside>
  <div>
    <p>título otra página </p>
    <p>descripción de la nueva página</p>
    <a href >link nueva pagina</a>
  </div>
  <div>
    <p>título otra página </p>
    <p>descripción de la nueva página</p>
    <a href >link nueva pagina</a>
  </div>
</aside>



 
Y listo ya tenemos nuestra página web lista y funcionando ahora solo nos queda definir un estilo, para ello abrimos el archivo que creamos antes "estilo.css".

estilo.css

body{
  background:#f8f8f8;
}
header{
  width:980px;
  height:120px;
  margin:0 auto;
}
article{
}
aside{
}
footer{
}
nav ul{
  margin:0 auto;
  padding:0;
  width:980px;
  list-style:none
}
nav ul li{
  padding:5px 10px;
  display:inline-block
}
nav ul li a{
  color:#484848;
}