Páginas: 5 (1174 palabras)Publicado: 15 de mayo de 2015
Asignatura: Diseños de Páginas Web
Martes y Jueves: 5:00 P.M. – 6:40 P.M.
Creación de Plantilla de Página Web y CSS
Asignatura:
Diseños de Páginas Web
Martes y Jueves: 5:00 P.M. – 6:40 P.M.
Comencemos con la estructuración del documento base en HTML5
1 – Doctype Y La Etiqueta Head
Bueno, Primero definimos el doctype en su nueva forma, luego abrimos la
etiqueta head y colocamos lo que no debe defaltar en un documento web HTML5
es decir las etiquetas básicas del head, a esto agregamos un enlace a la hoja de
estilos y un enlace a la librería Modernizr añadimos otro enlace a html5shiv para
afirmar más la compatibilidad de html5 con los antiguos navegadores. Y sería algo
más o menos así el código:
Asignatura:
Diseños de Páginas Web
Martes y Jueves: 5:00 P.M. – 6:40 P.M.
2 – La EtiquetaBody
Antes de ocuparnos del contenido primero tenemos que colocar
la etiqueta pero le asignamos una clase seria así:
Asignatura:
Diseños de Páginas Web
Martes y Jueves: 5:00 P.M. – 6:40 P.M.
3 – El header
Para el header agregamos la nueva etiqueta dentro de ella colocamos el logo por
medio de la etiqueta y el lema en h1 por medio de la etiqueta ,
después colocamosun div con la clase redes para meter los logos de las redes sociales y
cerramos la etiqueta header. Y quedaría algo así:
Asignatura:
Diseños de Páginas Web
Martes y Jueves: 5:00 P.M. – 6:40 P.M.
4 – La Etiqueta Nav
Para la navegación vamos a utilizar la etiqueta nav conteniendo una lista desordenada con
sus respectivo ítem de lista en enlaces. Sería algo así:
Asignatura:
Diseños de PáginasWeb
Martes y Jueves: 5:00 P.M. – 6:40 P.M.
5 – Contenedor O Fondo Del Contenido
Para hacer la simulación del fondo del contenido vamos a utilizar un div y lo cerramos antes
del footer.
Asignatura:
Desarrollo de Aplicaciones para
Internet Lunes y Miércoles: 5:00 P.M. – 6:40 P.M.
6 – Sección Principal Etiqueta Section.
En el siguiente código abrimos una etiqueta section para meter la sección de losartículos y dentro metemos un
slider por medio de un div y también un articulo por medio de la etiqueta article y dentro de la etiqueta article
hacemos la estructura de un articulo o entrada, es decir un texto de entrada una imagen y los tag de autor,
fecha y categoría a la que pertenece ese artículo, podemos duplicar esa etiqueta article para simular varios
artículos. Luego cerramos la etiquetaarticle y la etiqueta section.
Asignatura:
Diseños de Páginas Web
Martes y Jueves: 5:00 P.M. – 6:40 P.M.
7 – Sidebar Por Medio De La Etiqueta Aside
Para el sidebar vamos a utilizar la etiqueta aside y vamos a definir los diferentes bloques para cada modulo,
para el de publicidad, el buscador, las categorías, y la información importante por medio de un div con una
clase bloque aside, dentro de losbloque siempre va un titulo en un H3 y definimos cada contenido
individualmente, unas imágenes para la publicidad, un form con las nuevas propiedades html5 para la
búsqueda, una lista para las categorías y un párrafo con una clase para las informaciones importante. Y
cerramos la etiqueta aside. Sería algo más o menos así:
Asignatura:
Diseños de Páginas Web
Martes y Jueves: 5:00 P.M. – 6:40P.M.
8 – El Pie De Pagina Por Medio De La Etiqueta Footer Y Cierre Del Html
Bueno para el pie de página vamos a utilizar la etiqueta
Estos documentos también te pueden resultar útiles