View
136
Download
0
Category
Preview:
Citation preview
HTML 5 Y PHP
JHON E. ROJAS B.
DIPLOMADO DE DISEÑOS DE OBJETOS MULTIMEDIALES
OCTUBRE 2013>
HTML 5
INTRODUCION DREAMWEAVER ETIQUETASOBJETOS MULTIMEDIAWEB DISPOSITIVO MOVIL
HTML 5 DREAMWEAVER CSSCon 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>
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
HTML 5 ETIQUETASEtiquetas 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/es-es/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.
● 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
MENU NAVEGADOR
Redondear esquinas de bordes con border-radius
HTML 5
opcionesMETAhttp://www.google.com/fontsHttp;//www.google.com/maps
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
Paginas de tutoriales
http://codecriticon.com/html5-meta/
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{
}
Java script <script> </script>
PHP 5
Preguntas y respuestas
Recommended