Uneweb Instituto: Conoce sobre los tags de Estructura de la página

En HTML5 existen tags específicos para marcar varios elementos en la estructura de una página:

<header></header>: Para marcar el encabezado.
<nav></nav>: Para marcar la sección de navegación de la página web.
<section></section>: Permite marcar diferentes secciones dentro de la página, que pueden ser anidadas una dentro de otra.
<aside></aside>: Se puede utilizar para marcar una zona que, si bien forma parte del contenido principal de la página, es una exclusión a este y tiene sentido propio.
<footer></footer>: Se utiliza para marcar el pie de página.

Este es un ejemplo de código HTML con esta estructura:

<!doctype html>

<html>

<head>

<title>T&iacute;tulo de P&aacute;gina</title>

</head>

<body>

<header>

<h1>T&iacute;tulo de P&aacute;gina</h1>

</header>

<nav>

<!-- Navegación -->

</nav>

<section id="intro">

<!-- Introducción -->

</section>

<section id="intro">

<!-- Contenido principal -->

</section>

<aside>

<!-- Barra Lateral -->

</aside>

<footer>

<!-- Pie de Página -->

</footer>

</body>

</html>

Como no hemos formateado ni introducido ningún tipo de contenido, la página simplemente se ve de esta forma:

De igual manera, si ingresamos contenido a cada sección, pero sin darle ningún formato, el texto se dibuja de forma continuada:

Ahora creamos una lista no ordenada para el menú de navegación y lo agregamos en la secciónnav:

<nav>

<!-- Navegación -->

<ul> 

<li><a href="#">Inicio</a></li> 

<li><a href="#">Archivo</a></li> 

<li><a href="#">Contacto</a></li>     

</ul>

</nav>

El resultado se verá así:

Ahora, podemos agregar un poco de CSS a la mezcla. Primero, enlazamos el archivo CSS con nuestra página:

<head>

<title>T&iacute;tulo de P&aacute;gina</title>

<link rel="stylesheet" href="/Estilo.css" type="text/css"media="screen" />

</head>

Luego creamos el formato para el body y los tags h1… h3, tal como es usual:

body {

margin: 0 auto;

width: 940px;

font: 13px/22px Helvetica, Arial, sans-serif;

background: #f5f5f1;

}

h1 {

font-size: 28px;

line-height: 30px;

padding: 10px 0;

}

h2 {

font-size: 23px;

line-height: 25px;

padding: 10px 0;

}

h3 {

font-size: 18px;

line-height: 20px;

padding: 11px 0;

}

p {

padding-bottom: 22px;

}

Esto nos da como resultado nuestra página web con esta apariencia:

Ahora, aplicamos más CSS, específicamente a la sección de navegación, esto lo hacemos con cuatro nuevas secciones en nuestro archivo CSS:

nav {

position: absolute;

left: 0;

width: 100%;

background: url("nav_background.png");

}

Primero le decimos al navegador que nuestra sección nav tendrá una posición absoluta en la posición 0, un ancho del 100% y una imagen de fondo.

nav ul {

margin: 0 auto;

width: 960px;

list-style: none;

}

Luego damos formato a las listas no ordenadas dentro de la sección nav con un ancho de 960px y ningún estilo predeterminado.

nav ul li {

float: left;

}

nav ul li a {

display: block;

margin-right: 20px;

width: 140px;

font-size: 14px;

line-height: 44px;

text-align: center;

text-decoration: none;

color: #777;

}

nav ul li a:hover {

color: #fff;

}

nav ul li.selected a {

color: #fff;

}

Por último, se le indica al navegador cual es el estilo que llevarán los enlaces de las listas no ordenadas dentro de la sección nav. Al final, nuestra sección de navegación tiene este estilo:

Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve para más información

lunes, 5 de octubre de 2015

Conoce sobre los tags de Estructura de la página

No hay comentarios:

Publicar un comentario

Entradas populares