Esquema
El
esquema (outline) de una página web es un índice de los apartados de
una página web que muestra la relación de jerarquía entre los diferentes
apartados y subapartados. El concepto de esquema se ha formalizado en HTML 5
con más precisión que en HTML 4 / XHTML 1 y explica explica algunas
características y formas de utilización de las etiquetas de secciones y
bloques de contenido.
Esquema
(outline) de una página web HTML 5
En
HTML 5 las etiquetas de título (<h1>, <h2>, etc.) siguen
definiendo implícitamente secciones de la página, pero además:
las
etiquetas <body>, <blockquote>, <fieldset>, <figure> y <td> tienen
su propio esquema.
las
etiquetas <article>, <section>, <nav> y <aside> también
definen explícitamente secciones y "reinician" los
títulos <h1>, ..., <h6> contenidos por ellas.
El
segundo punto implica que si en HTML 5 se cogen dos páginas completas y se
combinan en una tercera incluyendo el contenido de cada página en una
etiqueta <article>, no es necesario modificar los títulos, como
muestra el ejemplo siguiente:
h1articleh1h2h2articleh1h2h2
Este
código es correcto es HTML 5, ya que la
etiqueta <article> define una nueva sección en el esquema de
la página y los títulos contenidos en ella se cuentan en la jerarquía a
partir del nivel definido por el elemento <article>. Por tanto,
los <h1> que están dentro de
los <article> tienen menos nivel que
el <h1> de <body>
Secciones y títulos <h1>, ..., <h6>
Como cada sección reinicia la jerarquía de títulos independientemente
del nivel de los títulos, en el esquema correspondiente al ejemplo siguiente
el elemento <h1> del primer <article> tendría
el mismo nivel que el elemento <h2> del
segundo <article>.
ejemplo Esquema 1 ejemplo esquema 2
El esquema de estructura de una
página web
La estructura de una página web es el esquema de composición (o
maquetación) de la información que aparece en una página. No debe confundirse
con la estructura de una web que es un término más amplio y que hace
referencia a como se organiza la información en todo el sitio web. Se trata
en definitiva de realizar un esquema para situar el título, los enlaces que
llevan a otras páginas, el contenido, etc. Este esquema vendrá a ser una plantilla
que seguiremos para construir el resto de páginas.Al diseñar la estructura
podemos partir de una división en zonas de una página como la siguiente:
Botonera: Otra barra que contiene enlaces a otras páginas.
Migas: Este nombre hace referencia a una cadena de enlaces que indicará
al usuario donde se encuentra, de tal forma que a medida que navega se añade
un nuevo enlace a la cadena. Son como las "migas de pan" del famoso
cuento de Hansel y Gretel.
Lateral izquierdo: Donde suelen también albergarse enlaces, publicidad,
noticias, etc.
Contenido: Mayor área destinada al verdadero contenido de la página.
Lateral derecho: Otra zona para más información.
Pie: Donde suelen ponerse los créditos, ayudas, validadores, legislación,
etc.
Estas división por zonas se hacía inicialmente usando tablas y también
con elementos <frame>. Realmente a cada <frame> se le denomina
marco de página, pero por extensión daremos también ese nombre a cada una de
las zonas de estructurado de una página. Así podemos definir de una forma
particular para estos temas que un marco de página es una zona independiente
dentro de la estructura de una página, independencia que se debe contemplar
desde el punto de vista de la maquetación, es decir, de cómo se distribuyen
espacialmente los distintos contenidos.
Por supuesto que pueden haber páginas sin marcos, donde todo el contenido
está en una única zona. La barra de desplazamiento vertical mueve todo al
mismo tiempo. Un ejemplo de una página sin marcos puede ser la de la
especificación de tablas en HTML 4 de W3C. Todo está contenido en el mismo cuerpo (a excepción de un recuadro
vertical en el lateral izquierdo pero que no cambia el concepto de "sin
marcos").
El esquema HTML de una página web
Independientemente de sí usamos marcos CSS fijados o no, dimensionamiento
fijo, líquido o elástico, la estructura de partida es crear bloques con
elementos <div> para cada una de las zonas:
PARA LA CABECERA:
<div id="cabeza">...</div>
PARA LA BOTONERA:
<div id="botonera">...</div>
PARA LAS "MIGAS":
<div id="migas">...</div>
PARA EL LATERAL IZQUIERDO:
<div id="lateral-izdo">...</div>
PARA EL LATERAL DERECHO:
<div id="lateral-dcho">...</div>
PARA EL CONTENIDO:
<div id="contenido">...</div>
PARA EL PIE:
<div id="pie">...</div>
Cada elemento <div> se identifica con un id adecuado. Así luego podemos dotarlo de estilo. Aunque podríamos darle un
nombre de clase con class, es preferible el identificador para automatizar con
script el contenido de alguna zona si hiciera falta.
Cuando vayamos avanzando en estos temas nos daremos cuenta que será
necesario incluir todo lo anterior en un marco total que lo englobe todo. Por
ahora sólo lo presentamos y en el tema siguiente veremos porqué es necesario:
PARA EL TOTAL DE LA PÁGINA:
<div id="total">
... Todo el contenido ...
</div>
|
|||||||||||||||
jueves, 1 de febrero de 2018
Esquema General de una página web
Suscribirse a:
Comentarios de la entrada (Atom)
No hay comentarios.:
Publicar un comentario