You are on page 1of 26

HTML 5 Y CSS 3

Semntica de la pagina y esttica de


la misma

Establecer la sintaxis del Lenguaje

Etiquetas utilizadas en HTML 5

HEADER

NAV

ICLE

SECTIO
N

FOOTER

Ejemplo 1. Pgina
Index.html

Caracteristicas de HTML 5

Diseado para ser utilizable por todos los desarrolladores de Open Web, esta
referencia pgina enlaza numerosos recursos sobre las tecnologas de HTML5,
que se clasifican en varios grupos segn su funcin.
Semntica: lo que le permite describir con mayor precisin cul es su contenido.
Conectividad: lo que le permite comunicarse con el servidor de formas nuevas e
innovadoras.
Desconectado y almacenamiento: permite a pginas web almacenar datos,
localmente, en el lado del cliente y operar fuera de lnea de manera ms
eficiente.
Multimedia: permite hacer vdeo y audio de ciudadanos de primera clase en la
Web abierta.
Grficos y efectos 2D/3D: permite una gama mucho ms amplia de opciones de
presentacin.
Rendimiento e Integracin: proporcionar una mayor optimizacin de la velocidad
y un mejor uso del hardware del equipo.
Dispositivo de Acceso: admite el uso de varios dispositivos de entrada y salida.
Styling: deja a los autores escribir temas ms sofisticados.

Insercin de Videos en la pgina


No se requiere de players externos, ya que
esta corriendo dentro del mismo html.
Propiedades de video.

Controls Aparece los botones de control.


Autoplay Inicia el audio o video.
Preload Precargado desde que se carga la
pagina
Loop Solo en audio, para que vuelva a
iniciar al terminar.

Insercin de Tablas

Ya no se utilizan para la distribucin de


contenido, sino como elemento visual de
la pagina.
Se visualizaran como se muestran en
Word.

Clases e Id

Class- se pueden aplicar a diferentes


objetos.
Id- solo se aplica a ese elemento.
Ejemplo:
<section class="noticias">
<section id=noticias>

CSS 3.

Lenguaje de Hojas de Estilo destinado a


la presentacin de los contenidos en una
pagina web.
Separar los contenidos del diseo.
Dar un aspecto a cada elemento de la
pagina.
Algunos elementos de CSS 3

Cajas con bordes redondeados.


Trasparencias y sombras.

Ventaja de olvidarse de la versin del


navegador del usuario final.

Insertar CSS en el
documento

Se agrega en el head insertndolo con


etiquetas style.

Linkear un archivo externo donde se


encuentren todos los estilos deseados.
Archivo con extensin .css

Estab

Optimizacin del cdigo

Navegadores antiguos.
www.modernizr.com
Seleccionar los elementos que se desean
compatibilizar.
Se descarga los scripts de javascripts
<head>
<script
src=js/modernizr.js></script>

Ejemplo

Rel = Tipo de relacin que se esta realizando.


Type = Tipo de recurso enlazado. Es un tipo de texto.
Href = url donde se encuentra el archivo
Media = medio donde se va aplicar el archivo css.
Asignar hojas de estilo de acuerdo al medio de
reproduccion: pantalla (screen), movil (handheld),
television (tv), impresin (print), impresoras
brailet(braille), proyector (proyection), todos (all)

Elementos CSS

Selector

Declaracin
(instrucciones)

Propiedad (modificar
caractersticas)

Valor

Regla: Ordenar en forma alfabtica en base al selector y


dentro de cada regla tambin la ordenacin en base a la
propiedad.

Regla

Selectores

Universal. Todos los elementos de la pagina.

De etiqueta. Acta especficamente sobre la


etiqueta establecida.

Selector mltiple. Permite aplicar las mismas


propiedades a varias etiquetas.

Compartir propiedades

Selector descendente. Seleccionar


elementos dentro de otros elementos. Se
encuentra dentro de las { } de otro.

Conclusion

Selector de clase

Ejemplo: Solo se desea cambiar al


parrafo 1.

Se tiene que definir una clase, tanto en


html como en la hoja de estilo.

Compartir la misma clase

Selector especifico en un
class.

Solo el elemento de la class pero que


pertenence solo a una etiqueta. Ejemplo
solo a Hola

Cualquier class aviso que


se encuentre dentro de p
Los p de class aviso

Los p y la class aviso

Ejemplo de los 3 separados:

<p classerror
destacado
especial>Hola
</p>

Selector Id

Diferencia con la class, que solo se aplica a


un solo elemento de la pgina y no
compartirlo. Un id no se repite.

Se cambia el . Por #
#destacado {
..
}

Herencia en CSS

Las etiquetas dentro de body heredan


las caractersticas, mientras no se
especifique lo contrario