Etiquetas <DOCTYPE> y <META> en HTML4.0.1 / HTML 5 Por Joseph Ambomo
¿ 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.
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
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)
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: http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd
Estructura del Doctype Nuestro DOCTYPE quedaría así: <!DOCTYPE html SYSTEM “-//W3C// DTD xhtml 1.1// EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> 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: “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> (Url del DTD)
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" "http://www.w3.org/TR/html4/strict.dtd"> Transitional : Contiene Strict + elementos y atributos obsoletos recuperados por cuestión de compatibilidad. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN“ "http://www.w3.org /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" "http://www.w3.org/TR/html4/frameset.dtd">
Página con doctype strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN "http://www.w3.org/ 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>
Página con doctype transicional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.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>
Página con doctype frameset <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.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>
<DOCTYPE> EN HTML5 La Etiqueta Doctype en Html5 se ha simplificado y reducido a la siguiente: <!DOCTYPE html >
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>
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”
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">
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-8859-1”> 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=““http://www.yoako.es”>
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>
FIN