Caractersticas bsicas de

HTML5 y CSS3
ITS de Zapotlanejo
Febrero de 2014

Estructura bsica de un
documento HTM5
< !D O CTYPE htm l>
< htm llang= "es">
< head>
< !-- aqupondrem os elcontenido htm l-->
< /head>
< body>
< !-- aqupondrem os elcontenido htm l-->
< /body>
< /htm l>

D octype Y la etiqueta H ead

La etiqueta body
Antes de ocuparnos del contenido primero tenemos
que colocar la etiqueta pero le asignamos una clase
seria as:

El H eader
Para el header agregamos la nueva etiqueta <header> dentro
de ella colocamos el logo por medio de la etiqueta <figure> y
el lema en h1 por medio de la etiqueta <figcaption>, despus
colocamos un div con la clase redes para meter los logos de
las redes sociales y cerramos la etiqueta header. Y quedara
algo as:

La etiqueta N av
Para la navegacin vamos a utilizar la etiqueta nav
conteniendo una lista desordenada con sus respectivo
tem de lista en enlaces. Sera algo as:

Contenedor o fondo de
contenido
Para hacer la simulacin del fondo del contenido
vamos a utilizar un div y lo cerramos antes del footer

Seccin principal etiqueta

Section
Utilizamos una etiqueta section para meter la seccin de
los artculos y dentro metemos un slider por medio de un
div y tambin 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 categora a la que pertenece ese
artculo, podemos duplicar esa etiqueta article para simular
varios artculos. Luego cerramos la etiqueta article y la
etiqueta section

Seccin principal etiqueta

Section

< !-- com ienzo de la seccion principal-->

< section class= "articulos">
< div id= "slider">
< im g src= "im agenes/slider.jpg" alt= "slider" />
< /div>
< !-- com ienzo delarticulo-->
< article class= "post">
< h2> < a href= "# "> Titulo delPost< /a> < /h2>
< fi
gure>
< a href= "# "> < im g src= "im agenes/im g-post.jpg" alt= "im gpost" /> < /a>
< /fi
gure>
< p class= "m eta"> Por < a href= "# "> Adm in< /a> El< a
href= "# "> 30/05/2012.< /a> En < a href= "# "> Pruebas< /a> < /p>
< p> Lorem ipsum dolor sit am et,consectetuer
adipiscing elit.D onec odio.Q uisque volutpat
m attis eros.N ullam m alesuada erat ut turpis.
Suspendisse urna nibh,viverra non,sem per
suscipit,posuere a,pede.
D onec nec justo eget felis facilisis ferm entum .
Aliquam porttitor m auris sit am et orci.
Aenean dignissim pellentesque felis.< /p>
< div class= "leerm as"> < a href= "# "> Leer M as..< /a> < /div>
< /article>
< !-- fi
n delarticulo
< /section>
< !-- fi
n de la seccion-->

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 categoras, y la informacin importante por medio de un
div con una clase bloque aside , dentro de los bloque siempre va un
titulo en un H3 y definimos cada contenido individualmente, unas
imgenes para la publicidad, un form con las nuevas propiedades
html5 para la bsqueda, una lista para las categoras y un prrafo con
una clase para las informaciones importante. Y cerramos la etiqueta
aside .

El pie de pgina por medio

de la etiqueta footer y
cierre del HTML
Bueno para el pie de pgina vamos a utilizar la etiqueta < footer>
dentro vamos hacer una navegacin por medio de una lista
desordenada y el copyright, cerramos el footer, cerramos el body y
cerramos el html.

Otras etiquetas HTML5

< article>
Este elemento
representa una porcin independiente de informacin relevante (por
ejemplo, cada artculo de un peridico o cada entrada de un blog). El
elemento < article> puede ser anidado y usado para mostrar una lista
dentro de otra lista de tems relacionados, como comentarios de
usuarios en entradas de blogs, por ejemplo.
< hgroup> Este elemento es usado para agrupar elementos H cuando
la cabecera tiene mltiples niveles (por ejemplo, una cabecera con
ttulo y subttulo).
< fi
g ure> Este elemento representa una porcin independiente de
contenido (por ejemplo, imgenes, diagramas o videos) que son
referenciadas desde el contenido principal. Esta es informacin que
puede ser removida sin afectar el fluido del resto del contenido.

Otras etiquetas HTML5

< fi
g caption> Este elemento es utilizado para mostrar una leyenda o
pequeo texto relacionado con el contenido de un elemento <figure>,
como la descripcin de una imagen.
< m ark> Este elemento resalta un texto que tiene relevancia en una
situacin en particular o que ha sido mostrado en respuesta de la
actividad del usuario.
< sm all> Este elemento representa contenido al margen, como letra
pequea (por ejemplo, descargos, restricciones legales, declaracin de
derechos, etc).
< cite> Este elemento es usado para mostrar el ttulo de un trabajo
(libro, pelcula, poema, etc).

Otras etiquetas HTML5

< address> Este elemento encierra informacin de contacto para un
elemento < article> o el documento completo. Es recomendable que
sea insertado dentro de un elemento < footer> .
< tim e> Este elemento se utiliza para mostrar fecha y hora en
formatos comprensibles por los usuarios y el navegador.
El valor para los usuarios es ubicado entre las etiquetas mientras que
el especfico para programas y navegadores es incluido como el valor
del atributo datetim e. Un segundo atributo optativo llamado pubdate
es usado para indicar que el valor de datetim e es la fecha de
publicacin.

Uso de
propiedades
abreviadas o
shorthand en CSS

Estilos
Estilos en lnea: Una de las tcnicas ms
simples para incorporar estilos CSS a un
documento HTML es la de asignar los estilos
dentro de las etiquetas por medio del atributo
style.
< !D O C TYPE htm l>
< htm llang= "es">
< head>
< title> Este es elttulo deldocum ento< /title>
< /head>
< body>
< p style= font-size: 20px > M itexto< /p>
< /body>
< /htm l>

Estilos
Estilos enbebidos: Una mejor alternativa es
insertar los estilos en la cabecera del
documento y luego usar referencias para
afectar los elementos HTML correspondientes:
< !D O CTYPE htm l>
< htm llang= "es">
< head>
< title> Este es elttulo deldocum ento< /title>
< style>
p { font-size: 20px }
< /style>
< /head>
< body>
< p> M itexto< /p>
< /body>
< /htm l>

Estilos
Estilos con archivos externos: Declarar los
estilos en la cabecera del documento ahorra
espacio y vuelve al cdigo ms consistente y
actualizable, pero nos requiere hacer una copia
de cada grupo de estilos en todos los
documentos de nuestro sitio web. La solucin
es mover todos los estilos a un archivo externo
y luego utilizar el elemento <link> para
insertar este archivo dentro de cada
documento que los necesite. :

< !D O CTYPE htm l>

< htm llang= "es">
< head>
< title> Este es elttulo deldocum ento< /title>
< link rel= "stylesheet" href= "m isestilos.css">
< /head>
< body>
< p> M itexto< /p>
< /body>
< /htm l>

SHORTHAND
Los Shorthand son las propiedades CSS que le
permiten establecer los valores de otras
propiedades CSS simultneamente. El uso de
una propiedad resumida, un desarrollador web
puede escribir hojas de estilo ms legibles ms
concisas y, a menudo, ahorrando tiempo y
energa.

Propiedad Background
La Propiedades background de CSS se utiliza para
definir los efectos de fondo de un elemento.

Propiedad Font
La Propiedades font de CSS se utiliza para definir los
efectos de texto del documento.

Propiedad Border
Las propiedades de borde CSS permiten especificar
el estilo y el color del borde de un elemento.

Propiedad Border-radius
Esta propiedad permiten especificar la redondez de
los bordes de un elemento.

Propiedad Margin
Las propiedades de margin CSS permiten
especificar los mrgenes de un elemento.

Propiedad Padding
Con esta propiedad definimos un margen interior de un
elemento. (Shorthand igual que el de margin).

Propiedad List-style
Especifique todas las propiedades de
la lista en una declaracin

Propiedad Transition
Las propiedades de Transition en CSS permiten
especificar la transicin de un elemento.

Propiedad Outline
Outline es una lnea que se dibuja alrededor de los
elementos (fuera de las fronteras) para hacer que el
elemento.

 Los Shorthand son las propiedades CSS que le

permiten establecer los valores de otras
propiedades CSS simultneamente. El uso de
una propiedad resumida, un desarrollador web
puede escribir hojas de estilo ms legibles ms
concisas y, a menudo, ahorrando tiempo y
energa.