Es una colección de etiquetas de información sin orden particular, que no afectan directamente la forma de mostrar el documento, pero sí son usados; dan importante información al navegador cliente (el browser que intenta interpretar la página). Son llamados metadatos, es decir datos sobre los datos.
<!DOCTYPE html> <HTML lang='es'> <Head> <Title>Manual HTML</Title> </Head>
Estas etiquetas son:
Cada documento HTML debe tener un título <TITLE> que identifique su contenido y este NO debe contener elementos de control como centrado, negritas, subrayado etc
La etiqueta título es obligatoria y requiere etiqueta de cierre.
<!DOCTYPE html>
<HTML lang='es'>
<Head>
<Title>Manual HTML</Title>
<Link TYPE="text/css" REL=stylesheet HREF="ruta_del_CSS" media=all />
<Link REL="shortcut icon" HREF="ruta_del_FAVICON.ICO" />
<Style TYPE="text/css">
... codigo CSS
</Style>
<Script TYPE="text/javascript" LANGUAGE=javascript SRC="ruta_del_JS"></Script>
<Script TYPE="text/javascript">
... codigo JavaScript;
</Script>
</Head>
La longitud del título no tiene límite, pero los títulos largos son cortados en ciertas aplicaciones. Para minimizar este problema te recomiendo que el título no pase de 64 caracteres.
También ten en cuenta de que en Internet los títulos son jalados a listas de búsqueda (como Google y Yahoo) y títulos como "Introducción" mandarán a muchos al desvío. En lugar de eso te sugiero:
Proporciona una dirección básica específica para la web. Debe tener obligatoriamente los atributos HREF y TARGET. No requiere etiqueta de cierre.
| Valor | Descripción |
|---|---|
| _blank | En una nueva pagina sin nombre. |
| _parent | Cargar el resultado en el contexto de navegación padre del actual. Si no hay padre, esta opción se comporta de la misma manera que _self. |
| _self | Carga el resultado en el mismo contexto de navegación que el actual. Este valor es el valor por defecto si no se especifica el atributo. |
| _top | Carga el resultado en el contexto de nivel superior de navegación (es decir, el contexto de navegación que es un ancestro de la actual, y no tiene padre). Si no hay padre, esta opción se comporta de la misma manera que _self. |
| nombre de frame | En el frame mencionado |
<!DOCTYPE html> <HTML lang='es'> <Head> <Title>Manual HTML</Title> <Base href='http://wiki.peru.org' target=_blank> </Head>
Especifica la información usable por el cliente/servidor en documentos dinámicos.
| Nombre | Descripción |
|---|---|
| CharSet | Especifica la codificacion dle archivo HTML. |
| Name | Especifica algun meta dato |
| http-equiv | Provee al encabezado de infomacion y valores |
| scheme | Especifica el esquema usado. No soportado en HTML5. |
Si la fuente no fue previamente definida en el header del archivo HTTP, es necesario hacerlo usando HTML. Así se evita, por ejemplo, que la ñ o las tildes no se muestren correctamente. El atributo que usaremos es este:
<Meta CharSet='utf-8'> <Meta CharSet='iso-8859-1'>
Especifica los metadatos que seran usados por los motores de busqueda para clasificar la pagina web.
| Name | Descripción |
|---|---|
| description | Define la descripción de la pagina. Usar content= |
| keywords | Define las palabras claves asociadas. |
| author | Define el autor de la pagina. |
| generator | Define el programa usado para generar la pagina. |
| robots | Parámetros para los robots. content="index/noindex, follow/nofollow, archive/noarchive" |
| revisit_after | Define el tiempo de una nueva revisión de la pagina. |
| viewport | Define el tamaño inicial de visualizacion. |
<!DOCTYPE html> <HTML lang='es'> <Head> <Title>Manual HTML</Title> <Meta CharSet='UFT-8'> <Meta name=description content="Bienvenido al manual de HTML de Enrique Garrido-Lecca (Kike_GL)."> <Meta name=keywords content="HTML,CSS,JavaScript"> <Meta name=author content="Enrique Garrido-Lecca"> <Meta name=robots content="index/noindex, follow/nofollow"> <Meta name=viewport content="width=device-width; initial-scale=1.0"> </Head>
Instruye a los robots de busqueda que hacer con el contenido de esta pagina web.
| Contet | Descripción |
|---|---|
| index/noindex | Indica al robot si se desea o no permitir la indexación de la página. |
| follow/nofollow | Indica al robot si se debe o no permitir seguir recorriendo la web a través de los enlaces que encuentre en el cuerpo del documento. |
| archive/noarchive | Indica al robot si deseamos o no que guarde el contenido del sitio web en su caché interna. Buscadores como Google tienen una caché y podemos ver las páginas web tal como las tiene cacheadas el buscador. Para ello, en los resultados de las búsquedas aparece un enlace que pone caché. Según Google, esto no evitara que se guarde en caché la página, pero no se mostrara a los usuarios del buscador y por lo tanto no muestra el enlace respectivo. |
| snippet/nosnippet | Sirve para que el motor de búsqueda no muestre ninguna descripción de un sitio, sólo su título. Si utilizas NOSNIPPET automáticamente defines un NOARCHIVE, por lo que la página tampoco se mostrará en caché. |
| odp/noodp | Sirve para indicar al buscador si debe, o no, mostrar el título y descripción de la página. |
| ydir/noydir | Igual a anterior para buscador Yahoo. |
Tambien es una buena idea usar el archivo robots.txt
El punto de vista varia con la resolución de pantalla y en dispositivos móviles este valor es critico. HTML5 introdujo este parámetro para facilitar a todas las web a adaptarse a los móviles, así que debe incluir esta etiqueta en todas sus paginas.
<META name=viewport CONTENT="width=device-width, initial-scale=1.0">
El atributo http-equiv pueden contener información equivalente a las indicaciones en el encabezado HTTP, la cual puede ser leída, por ejemplo, si el servidor no está configurado como corresponde. Los encabezados HTTP con el mismo nombre tienen prioridad frente a los meta de HTML. Los más importantes son:
| http-equiv = | Descripción |
|---|---|
| Refresh | Refresca la pagina cada n segundos y redireccionar. Usar: <meta content="n; URL=ruta" |
| Content-Type | Define contenido. Usar: <meta content="text/html; charset=UTF-8" |
| cache-control | Define forma de control de cache. Usar: <meta http-equiv="cache-control" content="no-cache"> |
| expires | Define fecha de expiracion del cache. Usar: <meta http-equiv=expires content=43200 |
<!DOCTYPE html> <HTML LANG='es'> <Head> <META charset='UTF-8'> <TITLE>Manual HTML</TITLE> <META http-equiv=Refresh CONTENT=120; URL=h21.htm> </Head>
Donde device-width establece que el ancho de la pagina debe coincidir con el ancho de la pantalla del dispositivo del cliente. y initial-scale=1.0 fija el nivel de zoom al cargar por primera vez.
No obligues a los usuarios a desplazarse horizontalmente, solo verticalmente si no quieres que tu pagina sea calificada con una pobre experiencia gráfica.
| Valor | Descripción |
|---|---|
| width | device-width, define el ancho visual |
| device-width | Define ancho físico |
| height | device-height, define el anto visual |
| device-height | Define alto físico |
| initial-scale | 1.0, define la zoom inicial (sin zoom) |
| minimun-scale | Define el minimo zoom. |
| maximun-scale | Define el maximo zoom. |
| user-scalable | Yes|No, permite al usuario cambiar el zoom. |
Indica la relación entre doc. Debe tener los atributo TYPE, REL y HREF. Usado para enlazar CSS, JavaScript y Favicon.
<!DOCTYPE html> <HTML LANG='es'> <HEAD> <Title>Manual HTML</Title> <Link type="text/css" rel="StyleSheet" href="https://fonts.googleapis.com/css?family=Fira+Sans" /> </HEAD>
No usa etiqueta de cierre.
Otra cosa que es posible cargar mediante esta etiqueta es una fuentes google.
<!DOCTYPE html> <HTML LANG='es'> <HEAD> <TITLE>Manual HTML</TITLE> <Link type="text/css" rel="StyleSheet" href="hoja.css" /> <Link type="text/css" rel="Profile" href="meta.txt" /> </HEAD>
| Valor | Descripción |
|---|---|
| text/css | Archivo CSS |
| text/javascript | ARchivo JavaScript |
| text/html | Texto HTML |
| image/png | Imagen PNG |
| Valor | Descripción |
|---|---|
| StyleSheet | Importa una hoja CSS |
| Profile | Define URL de un archivo externo con Metadatos |
| Next | Indica que el documento es parte de una serie y define el siguiente de la serie. |
| Prev | Indica que el documento es parte de una serie y define el anterior de la serie. |
| Help | Define el documento de ayuda |
| Icon | Define el favicon de la pagina |
| Alternate | |
| Author | |
| License | |
| PingBack | |
| preConnect | |
| preFetch | |
| preLoad | |
| dns-prefetch | |
| Search | |
| Stylesheet |
La etiqueta LINK puede contener un único atributo PROFILE que define la URL de un documento externo que contiene el perfil de la cabecera.
Declara el estilo CSS que se usara esta pagina. Requiere etiqueta de cierre.
<!DOCTYPE html>
<HTML lang='es'>
<HEAD>
<TITLE>Manual HTML</TITLE>
<STYLE>
body {background-color: powderblue;}
h1 {color: red;}
</STYLE>
</HEAD>
Es lógico que este CSS solo afecta al documento actual de forma aislada, pro lo que se acostumbra en su lugar preferir las definiciones globales que se referencias asi:
<Link type="text/css" rel="StyleSheet" href="hoja.css">
Es muy importante el orden de aplicación de los CSS, recuerde que es el cascada de forma que se chancan unos a otros, asi que lo logico es poner primero el global con LINK y luego el local con STYLE.
Usado para definir código del lado de cliente JavaScript
<!DOCTYPE html>
<HTML lang="es">
<Head>
<Title>Manual HTML</Title>
<Script>
function miFuncion {
document.getElementById('manual').innerHTML = "Esto es JavaScript";
}
</Script>
</Head>
O desde un archivo externo
<!DOCTYPE html> <HTML lang="es"> <Head> <Title>Manual HTML</Title> <Script src='jquery.min.js'></Script> </Head>
Es muy importante el orden de aplicación de los JavaScript, recuerde que el segundo invocado podría chancar al primero.
Detecta si el navegador tiene desabilitados el motor JavaScript y muestra el código encerrado.
<FORM ACTION=calculadora.php>
<P><LABEL FOR=x>Number</LABEL>: <INPUT TYPE=number NAME=x ID=x></P>
<SCRIPT>
var x = document.getElementById('x');
var output = document.createElement('p');
output.textContent = 'Type a number; it will be squared right then!';
x.form.appendChild(output);
x.form.onsubmit = function (){return false;}
x.oninput = function (){
var v = x.valueAsNumber;
output.textContent = v + ' squared is ' + v * v;
};
</SCRIPT>
<NOSCRIPT>
<INPUT TYPE=submit VALUE="Calculadora de cuadrados">
</NOSCRIPT>
</FORM>
Si el navegador tiene activado la secuencia de comandos, el valor se calcula sobre la marcha en su lugar. Cuando los SCRIPTs estén deshabilitados, aparece un botón para hacer que el cálculo pueda ser hecho del lado del servidor via calculadora.php al pulsar el boton.
Usado para declarar fragmentos de HTML que pueden ser clonados e insertados en el documento via SCRIPT. Proporcionar un método para declarar subárboles DOM inertes y manipularlos para instanciar fragmentos de documentos con idénticos contenidos. Cuando las páginas web alteran dinámicamente el contenido de sus documentos (por ejemplo, en respuesta a la interacción del usuario o los nuevos datos que llegan de un servidor), es común que requieran fragmentos de HTML que pueden requerir modificaciones adicionales antes del uso, como la inserción de valores apropiado para el contexto de uso.
El elemento TEMPLATE permite la declaración de fragmentos de documento que no se usan en el documento al momento de cargarse, pero se analizan como HTML y están disponibles en tiempo de ejecución para su uso por la página web.
<SCRIPT>
//Esta data podría venir de un servidor
var data = [
{ name: 'Pilar', color: 'Ticked Tabby', sex: 'Female (neutered)', legs: 3 },
{ name: 'Mateo', color: 'Tuxedo', sex: 'Male (neutered)', legs: 4 },
];
</SCRIPT>
<TABLE>
<THEAD>
<TR>
<TH>Name<TH>Color<TH>Sex<TH>Legs
<TBODY>
<TEMPLATE id="row">
<TR><TD><TD><TD><TD>
</TEMPLATE>
</TABLE>
<SCRIPT>
var template = document.querySelector('#row');
for (var i = 0; i < data.length; i += 1) {
var cat = data[i];
var clone = template.content.cloneNode(true);
var cells = clone.querySelectorAll('td');
cells[0].textContent = cat.name;
cells[1].textContent = cat.color;
cells[2].textContent = cat.sex;
cells[3].textContent = cat.legs;
template.parentNode.appendChild(clone);
}
</SCRIPT>
Crear el objeto DocumentiFragment usando node