Publicado el Deja un comentario

Plantilla basica HTML5 con CSS

Os indico codigo basico HTML5 desde donde comenzar a modificar para crear nuestros propios archivos, segun los puntos vistos hasta ahora en este blog.
El codigo de partida HTML5 es:

<!DOCTYPE html>
<html lang=”es”>
<head>
<meta charset=”utf-8″>
<meta name=”description” content=”Ejemplo Html5″>
<meta name=”keywords” content=”HTML5, CSS”>
<title>Plantilla de html5</title>
<link rel=”stylesheet” href=”estilo.css”>
</head>
<body>
<header>
<h1>Titulo principal de la web</h1>
</header>
<nav>
<ul>
<li>inicio</li>
<li>acerca de</li>
<li>contacto</li>
<li>blog</li>
</ul>
</nav>
<section>
<article>
<header>
<hgroup>
<h1>Titulo primer mensaje</h1>
<h2>Subtitulo del primer mensaje</h2>
</hgroup>
</header>
<p>Texto del primer mensaje</p>
<figure>
<img src=”#” alt=”imagen”>
<figcaption>Imagen del primer mensaje</figcaption>
</figure>
<footer>
<p>comentarios pie primer mensaje</p>
</footer>
</article>
<article>
<header>
<hgroup>
<h1>Titulo segundo mensaje</h1>
<h2>Subtitulo del segundo mensaje</h2>
</hgroup>
</header>
<p>Texto del segundo mensaje</p>
<figure>
<img src=”#” alt=”imagen2″>
<figcaption>Imagen del segundo mensaje</figcaption>
</figure>
<footer>
<p>comentarios pie segundo mensaje</p>
</footer>
</article>
</section>
<aside>
<blockquote>Cita en barra lateral</blockquote>
</aside>
<footer><p>Derechos reservados 2016</p></footer>
</body>
</html>

El codigo basico de la hoja de estilos o CSS (estilo.css) seria asi:

 *{
    margin: 0 auto;
    max-width:960px;
}
header h1{

    background-color: grey;
    margin:10px;  
}
nav {
  
}
section{
    float:left;
    width: 70%;
    padding: 5px;
}
aside {
    float:right;
    width: 25%;
    padding: 5px;
    background-color: grey;
    border-radius: 15px 20px;
}
footer{
    clear:both;
    width: 100%;
    padding: 5px;
    margin: 5px;
    background-color: grey;
    border-radius: 15px 20px;
}

 Con lo que obtendriamos la siguiente web:

Que es el punto de partida para comenzar a desarrollar nuestra web, sirviendo como ejemplo al que poder modificar o añadir todo lo que se nos ocurra.
Espero os sea util. Gracias.

Please follow and like us:

Deja un comentario