Dia 2

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

Dia 2

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Dia 2

Uploaded by

Copyright:

Available Formats

HTML 5 Y CSS 3

Semntica de la pagina y esttica de

Establecer la sintaxis del Lenguaje

Etiquetas utilizadas en HTML 5

Insercin de Videos en la pgina

Controls Aparece los botones de control.

Ya no se utilizan para la distribucin de

Class- se pueden aplicar a diferentes

Lenguaje de Hojas de Estilo destinado a

Cajas con bordes redondeados.

Ventaja de olvidarse de la versin del

Se agrega en el head insertndolo con

Linkear un archivo externo donde se

Optimizacin del cdigo

Rel = Tipo de relacin que se esta realizando.

Regla: Ordenar en forma alfabtica en base al selector y

Universal. Todos los elementos de la pagina.

De etiqueta. Acta especficamente sobre la

Selector mltiple. Permite aplicar las mismas

Selector descendente. Seleccionar

Ejemplo: Solo se desea cambiar al

Se tiene que definir una clase, tanto en

Compartir la misma clase

Solo el elemento de la class pero que

Cualquier class aviso que

Los p y la class aviso

Ejemplo de los 3 separados:

Diferencia con la class, que solo se aplica a

Las etiquetas dentro de body heredan

You might also like