Ejemplos paginas html

889 views
634 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
889
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Ejemplos paginas html

  1. 1. Estructura básicaComo dije antes, las estructuras son necesarias para que tusvisitantes no se mareen, nosotros a lo largo de este cursocrearemos 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 lassecciones mas importantes.•Contenido: toda pagina web debe tener un contenidoespecifico por sección, nosotros lo pondremos aquí, así alcambiar de sección cambiamos esta parte de la pagina y elresto lo dejamos todo igual.•Pie de pagina: aquí irán los accesos útiles, a la paginadonde este nuestra dirección de email para que nos contacten,a la pagina de ayuda que crearemos o a lo que nos parezcamas útil.
  2. 2. <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
  3. 3. http://www.lawebera.es/diseno-web/estructura-de-una-pagina-web-estructura-del-diseno.php
  4. 4. Estructura del SitioWebCuando ingrese eldominio establecido parael Sitio Web en elnavegador, verá unapágina con unaestructura básica similara la siguiente.http://manual.pagecreative.com/sitio-web/estructura-del-sitio-web
  5. 5. (1)Título del Sitio Web: Es el título principal del Sitio Web, editable en la “Informaciónbásica” del Panel Admin. Opcionalmente puede mostrarse aquí una imagen cargadacomo 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 hanmarcadas 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, activadoen el sector “Recurso Buscador” del Panel Admin.(4)Botonera principal: Son vínculos de acceso a las páginas del Sitio Web, que hanmarcadas como de acceso predeterminado en el sector “Mapa del Sitio” del PanelAdmin, 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áginaabierta. 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 elsector “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 elsector “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 elsector “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 hanmarcadas 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.
  6. 6. http://www.atcreativa.com/blog/estructura-de-una-pagina-web-con-html5/Header: es elencabezamiento de lapágina o de la sección.Footer: es el pie depágina o de la secciónsection: es la seccióndentro de una páginaweb.Article: contenido,contenido y máscontenido.aside: Cosas varias,ejemplo, todo aquello quese pone en los blogs enla barra derecha, comonuve de tags, los másdescargados, visitenosen Twitter, FB, etc.Nav: la navegación de laweb.Todas estas etiquestasvan dentro de la etiqueta<body></body>.
  7. 7. http://www.tutosytips.com/dia-4-nuevas-etiquetas-estructurales-en-html5/
  8. 8. <!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>
  9. 9. Realizar el siguiente diseño con tablas
  10. 10. EncabezadoBarra de NavegaciónMenúPié de PáginaÁrea de Trabajo
  11. 11. EncabezadoBarra de NavegaciónMenúPié de PáginaÁrea de TrabajoImg
  12. 12. EncabezadoBarra de NavegaciónMenúPié de PáginaÁrea de TrabajoImgEnlaces deInterés
  13. 13. EncabezadoBarra de NavegaciónMenúPié de PáginaÁrea de TrabajoEnlaces deInterés
  14. 14. EncabezadoBarra de NavegaciónMenúPié de PáginaÁrea de TrabajoImgEnlaces deInterés

×