Publicado el Deja un comentario

CSS. Toma de contacto

Video en el que se explica como empezar con CSS, manteniendo el archivo de formato aparte del codigo HTML.

El codigo del archivo tomadecontacto.HTML es:

<!doctype html>
<html lang=”ES”>
<head>
<link rel=”stylesheet” type=”text/css” href=”css/tomadecontacto.css”>
<title>
Toma de contacto con CSS
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Esto es el primer encabezado</h1>
</hgroup>
<p>Este es el primer parrafo para probar CSS</p>
</article>
</section>
<aside>
</aside>
<footer>
</footer>
</body>
</html>

El codigo de la hoja de estilos tomadecontacto.CSS es:

/*Comentario de CSS*/
/*selector universal*/
*{
    background-color:blue;
}

Espero os sea util. Gracias.

Please follow and like us:
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: