Mostrando entradas con la etiqueta plantilla basica. Mostrar todas las entradas
Mostrando entradas con la etiqueta plantilla basica. Mostrar todas las entradas

lunes, 30 de mayo de 2016

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.