Descargar la presentación
La descarga está en progreso. Por favor, espere
1
Etiquetas <DOCTYPE> y <META> en HTML4.0.1 / HTML 5
Por Joseph Ambomo
2
¿ QUÉ ES DOCTYPE ? 3. Usado antes de <Html> Doctype es:
El acrónimo inglés de Tipo de Documento 2. Etiqueta especial de HTML definida por la W3C 3. Usado antes de <Html> 4. Indica al navegador las reglas y estándares aplicados en la página web.
3
Elementos y atributos de Doctype (l)
!DOCTYPE Indica al navegador que estamos declarando un tipo de documento <!DOCTYPE (…)> 2. HTML Indica el elemento raíz del documento <!DOCTYPE html (…)> 3. DTD Definición de Tipo de Documento: *reglas sintácticas, *elementos permitidos *reglas que invalidan o no los elementos
4
Elementos y atributos de Doctype (ll)
4. PUBLIC Indica que la DTD es disponible de forma pública. <!DOCTYPE html PUBLIC> 5. SYSTEM la DTD No es disponible de forma pública. <!DOCTYPE html SYSTEM> 6. “FPI” (Identificador Público formal) * “-//W3C// (Organización responsable de TDT) * DTD (Clase pública de Texto – Public Text class)
5
Elementos y atributos de Doctype (lll)
* xhtml (Descripción pública de Texto “lable” Public Text class) * 1.1 // (Definición del Tipo de Documento de Texto) * EN” Código del idioma en que esta escrito DTD cierra el Identificador Público Formal. <!DOCTYPE html SYSTEM “-//W3C// DTD xhtml 1.1// EN”> 7. “URL DTD” Este es el último elemento del Doctype. Es simplemente la dirección o ruta del archivo DTD Ejemplo:
6
Estructura del Doctype
Nuestro DOCTYPE quedaría así: <!DOCTYPE html SYSTEM “-//W3C// DTD xhtml 1.1// EN” “ Su estructura se resumiría en tres partes: 1ªparte: <!DOCTYPE html SYSTEM (tipo documento-elemento raíz-disponibilidad) 2ªparte: “-//W3C// DTD xhtml 1.1// EN” (Identificador Público Formal) 3ªParte: “ (Url del DTD)
7
Variantes de DOCTYPE Strict:
Contiene la definición de html tal como recomienda la Word Wide Web <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " Transitional : Contiene Strict + elementos y atributos obsoletos recuperados por cuestión de compatibilidad. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN“ " /TR/html4/ loose.dtd"> Frameset: Contiene transitional + elementos específicos para la creación de marcos. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "
8
Página con doctype strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN " TR/ html4/strict.dtd"> <html> <head> <title> título</title> <link rel=“stylesheet” src=“url-archivo.css” type=“text/css”> <script language=“javascript”href=“url-archivo.js”type=“text/javascript”> </head> <body> ... </body> </html>
9
Página con doctype transicional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <title> título</title> <link rel=“stylesheet” src=“url-archivo.css” type=“text/css”> <script language=“javascript”href=“url-archivo.js”type=“text/javascript”> </head> <body> ... </body> </html>
10
Página con doctype frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " <html> <head> <title> título</title> <link rel=“stylesheet” src=“url-archivo.css” type=“text/css”> <script language=“javascript”href=“url-archivo.js”type=“text/javascript”> </head> <body> ... </body> </html>
11
<DOCTYPE> EN HTML5
La Etiqueta Doctype en Html5 se ha simplificado y reducido a la siguiente: <!DOCTYPE html >
12
Ejemplo de <DOCTYPE> EN HTML5
<!DOCTYPE html> <html> <head> <title>Titulo</title> </head> <body> <div id="centrado"> <header><hgroup><h1>(( TITULO ))</h1></hgroup></header> <nav> (( MENU DE NAVEGACION ))</nav> <aside>….</aside> <section id="izquierda“><article>(( NOVEDAD UNO ))</article></section> <section id="centro"> <h2>Temas Populares<h2><article>(( POPULAR A ))</article> </section> </div> <footer><section id="copyright">(( Datos Copyright ))</section></footer> </div> </body> </html>
13
LA ETIQUETA <META>
Suministra información sobre la página Información valiosa para los navegadores Datos no visibles para el usuario Atributos de <meta>: name=“tipo de información o palabra clave” content=“valor de dicha información” http-equiv=“acción que debe realizarse”
14
LA ETIQUETA <META> (l)
Atributo content: Es una descripción del valor de name Atributo name: author classification description generator Keyword Copyright Date etc… <META name="author" content="José Pérez">
15
LA ETIQUETA <META> (ll)
Ejemplos de uso del Atributo http-equiv: Indica al navegador el tipo de contenido de la página web <meta http-equiv=“content-type” content=“text/html; charset=iso ”> Transición al salir de la página, de un círculo desde fuera a dentro y medio segundo de duración. <meta http-equiv="Page-Exit" content="revealTrans(duration=0.5, transition=2)"> Transición al entrar en la página, de una cortinilla que va de arriba a abajo. <meta http-equiv="Page-Enter" content="revealTrans(duration=1, transition=5)"> Este metadato actualizará la pagina cada 10 segundos <meta http-equiv=“refresh” content=“10” url=““
16
Código html con <META> (ll)
<! DOCTYPE html> <html> <head> <title>título</title> <meta charset="utf-8"/> <meta name="author" content="Antonio Vidal"/> <meta name="application-name" content="Entrada Codecriticon" /> </head> <body> </body> </html>
17
FIN
Presentaciones similares
![Un wiki o una wiki (del hawaiano wiki, rápido)[1] es un sitio web cuyas páginas pueden ser editadas por múltiples voluntarios a través del navegador web.](/3/1125861/big_thumb.jpg "Un wiki o una wiki (del hawaiano wiki, rápido)[1] es un sitio web cuyas páginas pueden ser editadas por múltiples voluntarios a través del navegador web.>")
