Div html5, Div Html5div Html5div html5

Estructura de pginas web: Cmo
hacer para que lo importante aparezca

primero
Actualizado el 22/02/2010 < > 2 Cometarios
Resumen: La forma en que se decida maquetar la pgina, no

impide que podamos colocar los contenidos en el orden que
creamos ms conveniente, empleando adecuadamente las
propiedades CSS.
Cuando nos encontramos optimizando una pgina web para los buscadores, una de las cosas
que debemos tener en cuenta es que aquellos contenidos de mayor importancia deben ser los
primeros en aparecer, no solo visualmente, sino adems en el cdigo HTML. Esto est
relacionado con el funcionamiento de los robots de bsqueda.
Los buscadores necesitan clasificar las pginas web de acuerdo a su contenido, lo que
implica necesariamente un anlisis de los mismos. Pero estos robots que hurgan en las
pginas web no analizan la totalidad del cdigo de cada pgina, sino que tienen un lmite y
solo analizan los primeros contenidos.
Es por ello que resulta muy importante que las pginas web cuenten dentro de sus primeras
lneas aquellos contenidos que resulten ms relevantes. Sin embargo, esto que parece
sencillo, muchas veces choca con la intensin de los diseadores de maquetar la pgina
siguiendo cierto orden.
Por ejemplo, si un diseador desea que la pgina tenga una cabecera, dos columnas a la
izquierda y el cuerpo principal con el contenido a la derecha, podra parecer que es imposible
hacer que el contenido principal aparezca entre las primeras lneas del cdigo HTML. Sin
embargo, empleando algunas caractersticas de CSS, esto es posible.
Cmo maquetar una pgina para que el contenido

importante aparezca primero
A continuacin mostraremos como es posible hacer que los contenidos ms relevantes de la
pgina aparezcan en los primeros lugares del cdigo HTML, empleando para ello el float de
CSS. Sin entrar en demasiados detalles, ya que no es la finalidad de este artculo explicar
como funciona la propiedad float, podemos resumir que esta propiedad hace que el elemento
salga delflujo del HTML para posicionarse a la izquierda o derecha de otros elementos
adyacentes, alterando el orden en que se encuentran escritos en el cdigo HTML.
Para poder explicarlo de mejor forma, escribiremos un cdigo de ejemplo y su resultado visual,
que podrn probarlo utilizando el mismo cdigo escrito en bloc de notas, guardando el archivo
como .html o .htm y abrirlo en su navegador para visualizar los resultados.
Cdigo bsico
Lo primero que haremos ser ordenar los contenidos dentro del HTML en el orden que
deseamos. Luego, empleando CSS le daremos el orden visual. El cdigo de ejemplo es el
siguiente:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<html>
<head>
<title>Pgina de ejemplo</title>

<link rel="stylesheet" type="text/css" href="estilo.css" />
</head>
<body>
<div id="contenedor">
<div id="cabecera">
<h3>Cabecera</h3>
</div>
<div id="contenido">
<div id="caja">
<div id="primero">
Contenido principal
</div>
<div id="segundo">
Contenido de segundo orden
</div>
</div>
<div id="tercero">
Contenido de tercer orden
</div>
</div>
<div id="pie">
Pie de pgina
</div>
</div>
</body>
</html>
Como se puede apreciar, adems del cdigo HTML, deberemos escribir, en otro archivo
aparte, una hoja de estilo independiente, a la que llamaremos estilo.css y que contendr el
cdigo CSS. En este cdigo HTML podemos ver que el contenido principal de la pgina, se
encuentra inmediatamente despus de la cabecera, es decir, en los primeros lugares del
cdigo.
En el archivo CSS, daremos los primeros atributos a los diferentes divs, de forma que la
pgina adquiera una forma visible y donde los contenidos aparezcan separados. El siguiente
cdigo es el que aparecer en el archivo estilo.css:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/* Archivo base css de ejemplo */

/* Lo siguiente se emplea para resetear los valores por defecto de los navegadores
html, body { margin:0; padding:0; border:none; }
/* Definicin de los estilos bsicos */
/* Contenedor general. Se determina el ancho y los mrgenes automticos */
#contenedor {
width:80%;
margin: auto;
}
/* Estilo de los otros contenedores */
#cabecera, #pie {
background: #cbcbcb;
}
#pie {
clear: both;
}
#primero {
background: #fb9f9f;
}
#segundo {
background: #fdc08b;
}
#tercero {
background: #fdeb8b;
}
#cabecera, #pie, #primero, #segundo, #tercero {
padding: 1.25em 2%;
margin: 0.4em 0;
}
#cabecera{ margin-bottom: 0; }
#contenido { padding: 0; }
Con esto, ya es posible visualizar la pgina, la que encontraremos que se encuentra

diagramada en una nica columna y los diferentes contenidos aparecen alineados en forma
vertical. Esto se debe a que el proceso de maquetacin an no ha comenzado, y la pgina se
ver de la siguiente manera:
Empleando el ejemplo anterior, si deseramos maquetar la pgina con una columna a la

izquierda y el contenido principal a la derecha, deberamos dejar el tercer contenedor debajo
de los anteriores y ocupando todo el ancho de, para lo que podramos escribir, debajo
del CSSbsico que ya hemos escrito, las siguientes lneas de cdigo (debe observarse que en
cada uno de los ejemplos que daremos, el cdigo HTML no ser modificado).
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* Diseo a dos columnas con el contenido principal a la derecha */

#primero {
float: right;
width: 65%;
margin-left: 1%;
display: block;
height: 190px;
}
#segundo {
float: left;
width: 26%;
display: block;
height: 190px;
}
#tercero {
clear: both;
width: 96%;
}
18
La siguiente imagen es el resultado del cdigo descrito. En la caja de color rosa aparece el
contenido principal, aunque visualmente no ocupe esa posicin, ya que la columna de la
izquierda aparece antes.
A continuacin veremos un ejemplo donde la columna aparece a la derecha y el contenido

principal de la pgina estar a la izquierda:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* Diseo a dos columnas con el contenido principal a la izquierda */

#primero {
float: left;
width: 65%;
margin-right: 1%;
display: block;
height: 190px;
}
#segundo {
float: right;
width: 26%;
display: block;
height: 190px;
}
#tercero {
clear: both;
width: 96%;
}
16
17
18
Teniendo en cuenta que los contenidos se encuentran jerarquizados en tres escalas

diferentes, es posible organizarlos en tres columnas, como en los dos casos que exponemos a
continuacin, donde las dos columnas se colocan sobre uno de los lados (en un ejemplo a la
derecha y en el otro a la izquierda) y el contenido principal en el opuesto:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* Diseo a tres columnas con el contenido principal a la izquierda

#primero {
float: left;
width: 50%;
margin-right: 1%;
display: block;
height: 260px;
}
#segundo {
float: left;
width: 18%;
margin-right: 1%;
display: block;
height: 260px;
}
#tercero {
float: left;
width: 18%;
*/
16
17
18
19
20
21
display: block;
height: 260px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* Diseo a tres columnas con el contenido principal a la derecha */

#primero {
float: right;
width: 50%;
margin-left: 1%;
display: block;
height: 260px;
}
#segundo {
float: right;
width: 18%;
margin-left: 1%;
display: block;
height: 260px;
}
#tercero {
float: right;
width: 18%;
display: block;
height: 260px;
}
18
19
20
21
La forma en que se decida maquetar la pgina, no impide en modo alguno que podamos
colocar los contenidos en el orden que creamos ms conveniente. Empleando
adecuadamente las propiedades CSS, es posible establecer el diseo deseado sin necesidad
de realizar grandes modificaciones en el cdigo HTML.
Seguir el manual

Div html5, Div Html5div Html5div html5

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Div html5, Div Html5div Html5div html5

Enviado por

Direitos autorais:

Formatos disponíveis

Estructura de pginas web: Cmo

hacer para que lo importante aparezca

Resumen: La forma en que se decida maquetar la pgina, no

Cmo maquetar una pgina para que el contenido

/* Archivo base css de ejemplo */

Con esto, ya es posible visualizar la pgina, la que encontraremos que se encuentra

Empleando el ejemplo anterior, si deseramos maquetar la pgina con una columna a la

/* Diseo a dos columnas con el contenido principal a la derecha */

A continuacin veremos un ejemplo donde la columna aparece a la derecha y el contenido

/* Diseo a dos columnas con el contenido principal a la izquierda */

Teniendo en cuenta que los contenidos se encuentran jerarquizados en tres escalas

/* Diseo a tres columnas con el contenido principal a la izquierda

/* Diseo a tres columnas con el contenido principal a la derecha */

Você também pode gostar