Google+ Como crear una página web mediante html5 y CSS3 - Tutorial desde cero - Miopiblog

lunes, 14 de enero de 2013

Como crear una página web mediante html5 y CSS3 - Tutorial desde cero

Espero que te guste este fabuloso tutorial en el que te explico que es lo que tienes que hacer para crear una página web mediante html5 y CSS3, desde cero. Vamos a crear un sitio web visible en todos los navegadores modernos que soportan html5. El estilo de esta página web, lo vamos a aplicar mediante una hoja de estilo en cascada o CSS3, vinculada mediante un link insertado dentro de las etiquetas <head> de nuestro archivo index.

Lo primero que tienes que hacer para poder crear un sitio web mediante html5 y CSS3 es conseguir un programa o editor que soporte html5 (si no lo tienes ya). Yo en este caso voy a utilizar Webmatrix2, pero cualquier otro en el que se pueda crear y editar html5 nos sirve.

Una vez que tengas el software instalado abre un nuevo sitio web y crea dentro de el un documento html en blanco, ponle de nombre: "index.html". Para comenzar, vamos a crear una estructura html5 básica o simple, que podría ser esta:


<!DOCTYPE html>
 
<html lang="es">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        
    </body>
</html>

A continuación, vamos a añadir algunas etiquetas meta al documento html5, como por ejemplo la descripción, el título, las palabras clave... etc.



<html lang="es">
    <head>
        <meta charset="utf-8" />
        <title>Ejemplo de web html5</title>
        <meta name="robots" content="all"/>
        <meta content="Antonio Menchón García" name="author" />
        <meta name="generator" content=" webmatrix2 y bloc de notas de windows"/>
        <meta content="Ejemplo de pagina web creada con html5 y CSS" name="description" />
<meta content="web html5, pagina web html5, html5, html5 css web," name="keywords" />
<!-------hoja de estilos css ---------->
        <link rel="stylesheet" href="estilo.css" type="text/css" />
        <!-------webfonts de google ---------->
        <link href='http://fonts.googleapis.com/css?family=Freckle+Face' rel='stylesheet' type='text/css'>
      <link href='http://fonts.googleapis.com/css?family=Risque' rel='stylesheet' type='text/css'>
</head>
    <body>
        
    </body>
</html>


Ahora, vamos a añadir varias secciones <section>, una cabecera <header>, un pie de página <footer> y varios artículos <article>


<!DOCTYPE html>
 
<html lang="es">
    <head>
        <meta charset="utf-8" />
        <title>Ejemplo de web html5</title>
        <meta name="robots" content="all"/>
        <meta content="Antonio Menchón García" name="author" />
        <meta name="generator" content=" webmatrix2 y bloc de notas de windows"/>
        <meta content="Ejemplo de pagina web creada con html5 y CSS" name="description" />
<meta content="web html5, pagina web html5, html5, html5 css web," name="keywords" />
<!-------hoja de estilos css ---------->
        <link rel="stylesheet" href="estilo.css" type="text/css" />
        <!-------webfonts de google ---------->
        <link href='http://fonts.googleapis.com/css?family=Freckle+Face' rel='stylesheet' type='text/css'>
      <link href='http://fonts.googleapis.com/css?family=Risque' rel='stylesheet' type='text/css'>
<!------- plugin para que se vea en IE ---------->
<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
    <body>
      <section class="sitio">
      <header>
      </header>
          <section class="conenidoprincipal">
          <article class="arriba"></article>
          <div class="separador"></div>
              <article class="izquierda"></article>
              <article class="derecha"></article>
              </section>
           <div class="separador"></div>
          <footer></footer>
      </section>
          </body>
</html>

Le he asignado las clases (class) para poder maquetar la web fácilmente mediante CSS3. Vamos a introducir algo de contenido en el sitio web. Introduce el texto entre las etiquetas como lo hago yo:


<!DOCTYPE html>
 
<html lang="es">
    <head>
        <meta charset="utf-8" />
        <title>Ejemplo de web html5</title>
        <meta name="robots" content="all"/>
        <meta content="Antonio Menchón García" name="author" />
        <meta name="generator" content=" webmatrix2 y bloc de notas de windows"/>
        <meta content="Ejemplo de pagina web creada con html5 y CSS" name="description" />
<meta content="web html5, pagina web html5, html5, html5 css web," name="keywords" />
        <!-------hoja de estilos css ---------->
        <link rel="stylesheet" href="estilo.css" type="text/css" />

        <!-------webfonts de google ---------->

        <link href='http://fonts.googleapis.com/css?family=Freckle+Face' rel='stylesheet' type='text/css'>
      <link href='http://fonts.googleapis.com/css?family=Risque' rel='stylesheet' type='text/css'>
<!------- plugin para que se vea en IE ---------->
<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--></head>
    <body>
      <section class="sitio">
      <header><p>Esta es la cabecera, aquí puedes introducir tu logo, por ejemplo</p>
      </header>
          <section class="contenidoprincipal">
          <article class="arriba"><h1>Titulo 1</h1><p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber
               hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans
               eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu,
               eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit
               veritus placerat per. Ius id vidit volumus mandamus, vide veritus democritum te nec,</p></article>
          <div class="separador"></div>
              <article class="izquierda"><h2>Titulo 2</h2><p> ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei. Blandit incorrupte quaerendum in quo, nibh impedit id vis, vel no nullam semper audiam. Ei populo graeci consulatu mei, has ea stet modus phaedrum. Inani oblique ne has, duo et pri in errem putant feugiat. Sed iusto nihil populo an, ex pro novum homero cotidieque. Te utamur civibus eleifend qui, nam ei brute doming concludaturque, modo aliquam facilisi nec no. Vidisse maiestatis constituam eu his, esse pertinacia intellegam ius cu. Eos ei odio veniam, eu sumo altera adipisci eam, mea audiam prodesset persequeris ea. Ad vitae dictas vituperata sed, eum posse labore postulant id. Te eligendi principes dignissim sit, te vel dicant officiis repudiandae. Id vel sensibus honestatis omittantur, vel cu nobis commune patrioque. In accusata definiebas qui, id tale malorum dolorem sed, solum clita phaedrum ne his. Eos mutat ullum forensibus ex, wisi perfecto urbanitas cu eam, no vis dicunt impetus. Assum novum in pri, vix an suavitate moderatius, id has reformidans referrentur. Elit inciderint omittantur duo ut, dicit democritum signiferumque eu est, ad suscipit delectus mandamus duo. An harum equidem maiestatis nec. At has veri feugait placerat, in semper offendit praesent his. Omnium impetus facilis sed at, ex viris tincidunt ius. Unum eirmod dignissim id</p></article>              <article class="derecha"><h3>Título 3</h3><p>offendit persequeris ei vim. Eos dicat oratio partem ut, id cum ignota senserit intellegat. Sit inani ubique graecis ad, quando graecis liberavisse et cum, dicit option eruditi at duo. Homero salutatus suscipiantur eum id, tamquam voluptaria expetendis ad sed, nobis feugiat similique usu ex. Eum hinc argumentum te, no sit percipit adversarium, ne qui feugiat persecuti. Odio omnes scripserit ad est, ut vidi loem uupp non epsis maiestatis his, putent mandamus gloriatur ne pro. Oratio iriure rationibus ne his, ad est corrumpit pri in errem putant feugiat. Sed iusto nihil populo an, ex pro novum homero cotidieque. Te utamur civibus eleifend qui, nam ei menchoni brute doming concludaturque, modo aliquam facilisi nec no. Vidisse maiestatis constituam eu his, esse pertinacia intellegam ius cu. Eos ei odio veniam, eu sumo altera adipisci eam, mea audiam prodesset persequeris ea. Ad vitae dictas vituperata sed, eum posse labore postulant id. Te eligendi principes dignissim sit, te vel dicant officiis repudiandae. Id vel sensibus honestatis omittantur, vel cu nobis commune patrioque. In accusata definiebas qui, id tale malorum dolorem sed, solum clita phaedrum ne his. Eos mutat ullum forensibus ex, wisi perfecto urbanitas cu eam, no vis dicunt impetus. Assum novum in pri, vix an suavitate moderatius, id has reformidans referrentur. Elit inciderint omittantur duo ut, dicit democritum signiferumque eu est, ad suscipit delectus mandamus duo. An harum equidem maiestatis nec. At has veri feugait placerat, in semper offendit praesent his. Omnium impetus facilis sed at, ex viris tincidunt ius. Unum eirmod dignissim id quo. Sit te atomorum quaerendum neglegentur, his primis tamquam et. Eu quo quot veri alienum, ea eos nullam luptatum accusamus. Ea mel causae phaedrum reprimique, at vidisse dolores ocurreret nam splendide.</p></article>
              </section>
           <div class=" separador"></div>
          <footer><p>Este es el pie de página, en su interior puedes escribir algo, como por ejemplo enlaces a los derechos de autor,
          aviso legal...</p></footer>
      </section>
          </body>
</html>

Éste último código, es el que debes introducir dentro de tu archivo index una vez esté personalizado. Si lo subes al servidor y lo publicas, se puede ver esto:


Ahora vamos a aplicarle estilos, crea una nueva hoja de estilos css o aplicalos mediante las etiquetas <style> y </style> entre <head> y </head>. Pon de nombre a esta hoja de estilos: "estilo.css" que es el nombre que habíamos puesto para vincular este documento mediante un link: <link rel="stylesheet" href="estilo.css" type="text/css" />.

Introduce este contenido dentro de la hoja de estilos "estilo.css":

*{text-indent: 15px;}
h1 { font-family: 'Freckle Face', cursive; font-size:20px;font-weight: 400;color:white;padding-top:7px; }
h2 { font-family: 'Freckle Face', cursive; font-size:30px;font-weight: 400;color:yellow;padding-top:15px; }
a:link {text-decoration:none; color: #99CC00;} /* Link no visitado*/
a:visited {text-decoration:none; color:#99CC66} /*Link visitado*/
a:active {text-decoration:none; color:#99FF00;} /*Link activo*/
a:hover {text-decoration:underline; color:#99FF00;} /*Mouse sobre el link*/
body {
     width: 100%;
    background: #0000FF;
    background: -webkit-linear-gradient(#0000FF, #00008B);
background: -moz-linear-gradient(#0000FF, #00008B);
background: -o-linear-gradient(#0000FF, #00008B);
background: linear-gradient(#0000FF, #00008B);
 background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center top;
  height: 100%;
}
 
.sitio {
    overflow: hidden;
    margin: 0 auto;
    width: 955px;
    height: auto;
     font-family: 'Risque', cursive;
  color:white;
  font-size:14px;
     }
header {
    margin: 5px 5px 5px 0px;
    overflow: hidden;
    width: 918px;
    height: 100px;
    padding:15px;
    color: white;
    font-size: 17px;
    text-align: center;
  -moz-border-radius: 7px;
   -webkit-border-radius: 7px;
border-radius:7px;
   box-shadow: 5px 4px 3px #000;
   -webkit-box-shadow: 5px 4px 3px #000;
   -moz-box-shadow: 5px 4px 3px #000;
   background: #808000;
background: -webkit-linear-gradient(#808000, #2F4F4F);
background: -moz-linear-gradient(#808000, #2F4F4F);
background: -o-linear-gradient(#808000, #2F4F4F);
background: linear-gradient(#808000, #2F4F4F);
  background-repeat: no-repeat;
  background-position: center top;
}
 
.contenidoprincipal {
    text-align:justify;
  overflow:hidden;
  width: 942px;
  padding: 7px 3px 0px 3px;
    margin-top:10px;
    background: #4B0082;
    background: -webkit-linear-gradient(#4B0082,#800080);
background: -moz-linear-gradient(#4B0082,#800080);
background: -o-linear-gradient(#4B0082,#800080);
background: linear-gradient(#4B0082,#800080);
 background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center top;
  -moz-border-radius: 7px;
   -webkit-border-radius: 7px;
border-radius:7px;
   box-shadow: 5px 4px 3px #000;
   -webkit-box-shadow: 5px 4px 3px #000;
   -moz-box-shadow: 5px 4px 3px #000;
   }
.arriba {
    width:913px;
  padding: 0 5px 5px 5px;
    height:auto;
  position:relative;
  margin: -15px 1% 1% 1%;
 background: #800080; 
  -moz-border-radius: 15px;
   -webkit-border-radius: 15px;
border-radius:15px;
  background: -webkit-linear-gradient(#008000,#800080);
background: -moz-linear-gradient(#008000,#800080);
background: -o-linear-gradient(#008000,#800080);
background: linear-gradient(#008000,#800080);
}
.izquierda {
    float: left;
  display:block;
  padding: 0 5px 5px 5px;
  margin-left:1%;
  overflow:hidden;
    width: 445px;
    height: auto;
    background: #800080;
    margin-top: 5px;
    margin-bottom: 5px;
  -moz-border-radius: 15px;
   -webkit-border-radius: 15px;
border-radius:15px;
  background: -webkit-linear-gradient(#800080,#008000);
background: -moz-linear-gradient(#800080,#008000);
background: -o-linear-gradient(#800080,#008000);
background: linear-gradient(#800080,#008000);
}
.derecha {
    float: right;
  display:block;
  padding: 0 5px 5px 5px;
  margin-right:1%;
  overflow:hidden;
    width: 445px;
    height: auto;
    background: #800080;
    margin-top: 5px;
    margin-bottom: 5px;
  font-family: 'Risque', cursive;
  color:white;
  font-size:14px;
  -moz-border-radius: 15px;
   -webkit-border-radius: 15px;
border-radius:15px;
  background: -webkit-linear-gradient(#800080,#008000);
background: -moz-linear-gradient(#800080,#008000);
background: -o-linear-gradient(#800080,#008000);
background: linear-gradient(#800080,#008000);
}
 
footer {
    margin-top: 7px;
  margin-bottom:0px;
  padding-bottom: 7px;
  padding-top: 15px;
  text-align: center;
    width: 949px;
 height: auto;
    position: static;
    border-radius: 10px 10px 0px 0px;
    -moz-border-radius: 10px 10px 0px 0px;
   -webkit-border-radius: 10px 10px 0px 0px;
   box-shadow: 5px 4px 3px #000;
   -webkit-box-shadow: 5px 4px 3px #000;
   -moz-box-shadow: 5px 4px 3px #000;
   background: #800080;
  background: -webkit-linear-gradient(#008000,#800080);
background: -moz-linear-gradient(#008000,#800080);
background: -o-linear-gradient(#008000,#800080);
background: linear-gradient(#008000,#800080);
}

Si lo has hecho todo correctamente, una vez subido al servidor se debería ver algo como esto en los navegadores modernos:




Ya tienes tu página web creada mediante html5 y CSS3!!! ¿te gusta? ahora te toca aprender y practicar con tu nueva web. Mira que bien queda en este ejemplo que he creado de página web mediante html5 y CSS3, similar al de este post. En este link, puedes descargar los códigos para crear la web mediante html5 y CSS3.

Ahora te toca a ti personalizarla, y añadirle muchas más cosas, por ejemplo un menú, un formulario de contacto, videos, imágenes, plugins de javascript, frameworks, funciones php... Por cierto, si te interesa, puedes aprender como crear un formulario con html5 y CSS3, para añadirlo a tu nueva página web o también puedes descubrir como insertar vídeos mediante html5. Quizá te interese echar un vistazo esta plantilla html5 responsive web design, diseñada con CSS3.

Si no tienes conocimientos sobre html ni CSS, lo mejor es que te decidas por crear un sitio web con alguna de estas herramientas o sistemas para crear webs, gratis. Que no se te olvide seguirme en las redes sociales, así recibirás información instantáneamente sobre nuevas publicaciones y eventos en Miopiblog.

Seguidores (seguir blog)

Me siguen en google plus: