por joseph ambomo. ¿ quÉ es doctype ? doctype es: 1. el acrónimo inglés de tipo de documento 2....
TRANSCRIPT
Por Joseph Ambomo
¿ QUÉ ES DOCTYPE ?Doctype es: 1. 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)
1. !DOCTYPEIndica 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. 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 Elementos y atributos de Doctype (ll)(ll)
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 DoctypeNuestro 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 DOCTYPEStrict: 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">
<!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>
<!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>
<!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 HTML5La Etiqueta Doctype en Html5 se ha simplificado y reducido a la siguiente:
<!DOCTYPE html >
<!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>
Ejemplo de <DOCTYPE> EN HTML5
LA ETIQUETA <META>
o Suministra información sobre la páginao Información valiosa para los navegadoreso Datos no visibles para el usuarioo 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 name:o authoro classificationo descriptiono generatoro Keywordo Copyrighto Date etc…
Atributo content:
Es una descripción del valor
de name
<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”>
<! 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>
Código html con <META> (ll)
FIN