Ejemplos paginas html

Estructura básica
Como dije antes, las estructuras son necesarias para que tus
visitantes no se mareen, nosotros a lo largo de este curso
crearemos una página web con la siguiente estructura:
•Cabecera: aquí irá el logo de tu página web.
•Menú lateral: en este menú pondrás los accesos a las
secciones mas importantes.
•Contenido: toda pagina web debe tener un contenido
especifico por sección, nosotros lo pondremos aquí, así al
cambiar de sección cambiamos esta parte de la pagina y el
resto lo dejamos todo igual.
•Pie de pagina: aquí irán los accesos útiles, a la pagina
donde este nuestra dirección de email para que nos contacten,
a la pagina de ayuda que crearemos o a lo que nos parezca
mas útil.

<div id="contenedor">
<div id="cabecera">
<h1> Esto es la cabecera </h1></div>
<div id="cuerpo">
<div id="columna1"> <h1>Columna 1</h1>
</div>
<div id="columna2">
<h1>Columna 2</h1>
</div>
</div>
<div id="Pie_de_pagina">
<h1> Aqui va el pie </h1> <h1>d</h1>
<h1>e pagina </h1>
</div>
</div>
http://ciudadvectorial.blogspot.com/2009/02/creacion-de-
una-pagina-web-con-css.html

http://www.lawebera.
es/diseno-
web/estructura-de-
una-pagina-web-
estructura-del-
diseno.php

Estructura del Sitio
Web
Cuando ingrese el
dominio establecido para
el Sitio Web en el
navegador, verá una
página con una
estructura básica similar
a la siguiente.
http://manual.pagecre
ative.com/sitio-
web/estructura-del-
sitio-web

(1)Título del Sitio Web: Es el título principal del Sitio Web, editable en la “Información
básica” del Panel Admin. Opcionalmente puede mostrarse aquí una imagen cargada
como logotipo en el sector “Diseño” del Panel Admin.
(2)Vínculos cabecera: Son vínculos de acceso a las páginas del Sitio Web, que han
marcadas como vínculo de cabecera, en el sector “Mapa del Sitio” del Panel Admin.
(3)Buscador (opcional): Es la vista en cabecera del formulario de búsqueda, activado
en el sector “Recurso Buscador” del Panel Admin.
(4)Botonera principal: Son vínculos de acceso a las páginas del Sitio Web, que han
marcadas como de acceso predeterminado en el sector “Mapa del Sitio” del Panel
Admin, y además son del primer nivel jerárquico de dicho mapa.
(5)Rastro: Son vínculos anidados, que conforman el camino jerárquico de la página
abierta. Existen algunos diseños que no incorporan este parte de su estructura.
(6)Botonera secundaria: Son vínculos de acceso a las páginas del Sitio Web,
contenidas en la página de primer nivel activa. Estas jerarquías son editables en el
sector “Mapa del Sitio” del Panel Admin.
(7)Título de página: Es el título de la página abierta, que ha sido editado en el sector
“Edición de Página” del Panel Admin.
(8)Subtítulo de página: Es el subtítulo de la página abierta, que ha sido editado en el
sector “Edición de Página” del Panel Admin.
(9)Contenido de página: Es el contenido de la página abierta, que ha sido editado en el
sector “Edición de Página” del Panel Admin.
(10)Vínculos de pie: Son vínculos de acceso a las páginas del Sitio Web, que han
marcadas como vínculo de pie, en el sector “Mapa del Sitio” del Panel Admin.
Generalmente se incluyen aquí el Copyright, la declaración de privacidad, etc.

http://www.atcreativa.com/blog/estructu
ra-de-una-pagina-web-con-html5/
Header: es el
encabezamiento de la
página o de la sección.
Footer: es el pie de
página o de la sección
section: es la sección
dentro de una página
web.
Article: contenido,
contenido y más
contenido.
aside: Cosas varias,
ejemplo, todo aquello que
se pone en los blogs en
la barra derecha, como
nuve de tags, los más
descargados, visitenos
en Twitter, FB, etc.
Nav: la navegación de la
web.
Todas estas etiquestas
van dentro de la etiqueta
<body></body>.

http://www.tutosytips.com/dia-4-nuevas-etiquetas-estructurales-en-html5/

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8"/>
<meta name="description" content="curso html5 desde 0" />
<title>Mi primera web en html5</title>
</head>
<body>
<header>
<hgroup>
<h1>Mi curso de html5</h1>
<h2>Aprende desde 0</h2>
</hgroup>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">quienes somos</a></li>
<li><a href="#">portafolio</a></li>
<li><a href="#">contacto</a></li>
</ul>
</nav>
</header>
<article>
<h2>Aquí va un post, con su titulo en h2</h2>
<p>Aqui puede ir los contenidos del post</p>
</article>
<article>
<h2>Aquí va un post, con su titulo en h2</h2>
<p>Aqui puede ir los contenidos del post</p>
</article>
<aside>
<h2>Titulo del sidebar</h2>
<p>alguna informacion que se muestra en la barra lateral </p>
<ul>
<li><a href="#">enlaces</a></li>
<li><a href="#">enlaces</a></li>
</ul>
</aside>
<footer>
<p>Aqui va el Pie de pagina, copyright, el menu otravez, etc.</p> </footer>
</body>
</html>

Realizar el siguiente diseño con tablas

Encabezado
Barra de Navegación
Menú
Pié de Página
Área de Trabajo

Encabezado
Menú
Pié de Página
Área de Trabajo
Img

Encabezado
Menú
Pié de Página
Área de Trabajo
Img
Enlaces de
Interés

Encabezado
Menú
Pié de Página
Área de Trabajo
Enlaces de
Interés

Ejemplos paginas html

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a Ejemplos paginas html

Similar a Ejemplos paginas html (20)

Más de Robert Rodriguez

Más de Robert Rodriguez (20)

Último

Último (20)

Ejemplos paginas html