ESTRUCTURA BASICA HTML 5

Estructura Semántica en HTML5 y CSS3

En esta lección veremos los principales elementos de un documento html, para lo cual podemos observarlos en la siguiente imagen:

semantica html5Podemos observar por tanto que una estructura básica de html5 consta de:

  • H1
  • nav
  • section
  • article
  • aside
  • footer

El código html es el siguiente:


 

<!DOCTYPE html>

<html lang=”es”>

<head>

<title> Estructura Semantica en HTML5 y CSS3</title>

<meta charset=”utf-8”/>

<meta name=”description” content=”Estructura Semantica en HTML5 y CSS3 =)” />

<link rel=”stylesheet” type=”text/css” href=”css/estilos.css” />

<body>

<h1> Estructura semantica HTML5</h1>

<header>

&lt;header&gt;

</header>

<nav>

&lt;nav&gt;

</nav>

<section id=”contenedor”>

<section id=”principal”>

&lt;section&gt;

<article>

&lt;article&gt;

</article>

</section>

<aside>

&lt;aside&gt;

</aside>

</section>

<footer>

&lt;footer&gt;

</footer>

</body>

</html>


El código css es el siguiente, guardarlo en la carpeta css y con el nombre estilos.css

* {

margin: 0;

padding: 0;

}

body{

background: #212121 url(../img/fondo.jpg); /* # 212121 escala de negro */

color:#FFF; /* # FFF color blanco */

font-family: “Chalet”, Helvetica, Verdana;

font-size: 2em;

}

H1{

color: #F60;

margin: 0.25em auto;

text-align:center;

text-shadow: 5px 5px 10px rgba(255,255,225,0.5); /* distancia x distancia y blur desenfoque, color: blanco y opacidad */

}

header, nav, footer{

background: #1E6381;

border-radius: 0.5em;

margin: 0.5em auto;

max-width: 960px;

padding:0.25em;

text-align: center;

}

 

section#contenedor      {

background: #99aaf1;

margin: 0.5em auto;

max-width: 960px;

padding: 0;

text-align:center;

}

section#principal, aside               {

background: #1E6381;

border-radius: 0.5em;

display: inline-block; /* se comporta en bloque */

margin: 0.25em auto;

max-width: 960px;

min-height: 150px;

padding: 0.1em;

text-align: center;

vertical-align: top;

width: 65%;

}

article{

background: #000022;

border-radius: 0.5em;

min-height: 100px;

padding: 0.25em;

}

 

aside

{

width: 30%;

}




 

/*

Reglas para trabajar con css

  1. Primero se definen los estilos para etiquetas html, por ejemplo header, footer, div, a, p, etc,
  2. Después se definen los estilos para identificadores (id), los id’s, son elementos unicos en el html, en el css se declaran con el simbolo de almohadilla o gato #, por ejemplo #nombre-id(estilos ) y en el html se llaman mediante el atributo id, ejemplo <div id=”publicidad”> </div>
  3. al final se definen los estilos para las CLASES (class), las clases son elementos que se pueden repetir n veces en el html, en el css se declaran con el simbolo de . Ejemplo: .nombre-clase (estilos) y en el html se llaman me diante el atributo class, ejemplo <div class=”borde-logos”> </div>
  4. todos los estilos de ordenan conforme van apareciendo en la disposicion del html, teniendo en cuenta la prioridad anterior, es decir, primero etiques html, luego id’s y al final clases
  5. los atributos se declaran de la siguiente forma: { atributo1:valor1; atribuot2:valor2;…; atributoN:valorN; }
  6. todos los atributos se ordenan alfabeticaente, por ejemplo si tengo width, color, display, entonces el orden seria: primero color, luego disply y al final width.
  7. si tenmos estilos para el comodin *, o las etiquetas html y/o body, estos estilos son los primero en definirse.
  8. en el bodydebemos declarar un tamaño de fuente global.
  9. si tenemos estilos para resetear elementos html, estos iran ates de cualquier estilo.

/*16px = 12pt =100% =em M */


No olvides compartir...Share on FacebookEmail this to someoneTweet about this on TwitterShare on LinkedInPrint this page