ejemplos paginas html
TRANSCRIPT
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 WebCuando 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
Barra de Navegación
Menú
Pié de Página
Área de Trabajo
Img
Encabezado
Barra de Navegación
Menú
Pié de Página
Área de Trabajo
Img
Enlaces deInterés
Encabezado
Barra de Navegación
Menú
Pié de Página
Área de Trabajo
Enlaces deInterés
Encabezado
Barra de Navegación
Menú
Pié de Página
Área de Trabajo
Img
Enlaces deInterés