HTML 5 PHP TUTORIALES

HTML 5 Y PHP
JHON E. ROJAS B.
DIPLOMADO DE DISEÑOS DE OBJETOS MULTIMEDIALES
OCTUBRE 2013>

HTML 5
INTRODUCION

DREAMWEAVER

ETIQUETAS
OBJETOS

MULTIMEDIA
WEB DISPOSITIVO MOVIL

HTML 5 DREAMWEAVER CSS
Con HTML5 tendremos una web más simple y semántica gracias a las nuevas etiquetas
para identificar mejor algunos elementos y no llenar nuestra página de elementos div sin ningún valor semántico.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>

HTML 5 ETIQUETAS
Uso de Header, Nav y Footer
Vamos a editar la estructura para adecuarla a lo que queremos, empezando
por cambiar el lenguaje de la página a español y poniendo el título “Mi primer
sitio html5”. También pondremos un título, un menú de navegación y el pie de
página.
Existe una etiqueta nueva denominada <header>. Se utiliza para los
elementos que sean encabezados, normalmente títulos, que tengamos en
nuestra página y pueden haber varias de estas etiquetas. El título lo
pondremos dentro de una etiqueta <header>.
Para el menú utilizaremos la etiqueta <nav> que es la etiqueta para este tipo
de funcionalidad que se ha añadido en HTML5. Añadiremos unos cuantos
enlaces en el menú. En HTML5 también existe una etiqueta <menu> pero hay
que tener en cuenta que si se trata del menú de navegación se debe utilizar
<nav>.
El pie de página será un elemento <footer> y dentro de este hemos añadido
el copyright y una fecha para mostrar la última actualización.

HTML 5 ETIQUETAS

Etiquetas Section y Article

vamos a añadir algo de texto. Para ello insertaremos un elemento <section> entre el menú y el pie, y
dentro de ella unos elementos <article> donde pondremos un pequeño texto con un título. El título lo
pondremos también entre etiquetas <header>.

http://msdn.microsoft.com/eses/ie/ff468705#_HTML5

fichero CSS para que coja el estilo aplicado en ese CSS.
<link rel="stylesheet" href="estilo.css"/>
Pondremos el menú de navegación a la
izquierda, la sección con los artículos a la
derecha y el pie de página debajo de la sección a
la izquierda. También le daremos un ancho fijo a
cada una.

MENU NAVEGADOR

●

Pulse para editar el formato de esquema del texto
–

Segundo nivel del esquema
●

Tercer nivel del esquema
–

Cuarto nivel del esquema
●



Quinto nivel del esquema

●

Sexto nivel del esquema

Séptimo nivel del esquemaHaga clic para modificar el estilo de texto
del patrón



Segundo nivel


Tercer nivel


Cuarto nivel


Quinto nivel

Redondear esquinas de bordes con
border-radius

HTML 5
 opciones
 META
 http://www.google.com/fonts
 Http;//www.google.com/maps

Paginas de tutoriales
http://www.aprendiendoando.com/
http://www.cristalab.com/tutoriales/tutorial-de-jquery-c214l/
http://www.cristalab.com/blog/sproutcore-la-competencia-en-javascript-a-flex-y-flash-c58098l/
http://www.cristalab.com/tutoriales/bordes-redondeados-con-css3-c69441l/
http://msdn.microsoft.com/es-es/ie/ff468705#_HTML5
http://codecriticon.com/html5-meta/

Java script <script> </script>
var device = navigator.userAgent
if (device.match(/Iphone/i)|| device.match(/Ipod/i)|| device.match(/Android/i)||
device.match(/J2ME/i)|| device.match(/BlackBerry/i)|| device.match(/iPhone|iPad|iPod/i)||
device.match(/Opera Mini/i)|| device.match(/IEMobile/i)|| device.match(/Mobile/i)||
device.match(/Windows Phone/i)|| device.match(/windows mobile/i)|| device.match(/windows
ce/i)|| device.match(/webOS/i)|| device.match(/palm/i)|| device.match(/bada/i)||
device.match(/series60/i)|| device.match(/nokia/i)|| device.match(/symbian/i)||
device.match(/HTC/i))
{
window.location = "http://www.miwebmovil.com/";
}
else
{
}

HTML 5 PHP TUTORIALES

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (7)

Similar a HTML 5 PHP TUTORIALES

Similar a HTML 5 PHP TUTORIALES (20)

Más de Reynaldo Daza Avila

Más de Reynaldo Daza Avila (6)

HTML 5 PHP TUTORIALES