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-PE'> <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-PE'>
<Head>
<Title>Manual HTML</Title>
<Link TYPE="text/css" REL=stylesheet HREF=ruta_del_CSS media=all />
<Link REL=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:
Especifique una URL y un destino predeterminado para todos los enlaces en una página. 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-PE'> <Head> <Title>Apuntes HTML</Title> <Base href='https://apuntes.perut.org' target=_blank> </Head>
Solo puede haber un único <base>elemento en un documento, y debe estar dentro del elemento <head>.
También admite los atributos globales.
Especifica la información usable por el cliente/servidor en documentos dinámicos.
| Nombre | Descripción |
|---|---|
| CharSet | Especifica la codificación del archivo HTML. |
| Name | Especifica algún meta dato |
| http-equiv | Provee al encabezado de información y valores |
| content | Especifica el valor asociado con los atributos <http-equiv> o <name> |
| 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 serán usados por los motores de búsqueda 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-PE'> <Head> <Title>Manual HTML</Title> <Meta CharSet='UFT-8' /> <Meta name=description content="Bienvenido a los apuntes HTML de Enrique Garrido-Lecca (Kike_GL)." /> <Meta name=keywords content='HTML,CSS,JavaScript' /> <Meta name=author content='Enrique Garrido-Lecca (Kike_GL)' /> <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 búsqueda 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. |
También 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 mínimo zoom. |
| maximun-scale | Define el máximo zoom. |
| user-scalable | Yes|No, permite al usuario cambiar el zoom. |
Define la relación entre el ducmento actual y el recurso externo referido. Debe tener los atributo REL y HREF. Usado para enlazar CSS, JavaScript y Favicon.
<!DOCTYPE html> <HTML LANG='es-PE'> <HEAD> <Title>Apuntes HTML</Title> <Link rel=StyleSheet href=hoja.css> </HEAD>
No usa etiqueta de cierre.
| Atributo | Descripción |
|---|---|
| REL | alternate|author|dns-prefetch|help|icon|license|next|pingback|preconnect|prefetch|preload|prerender|prev|search|stylesheet |
| HREF | URL del recurso |
| TYPE | Determina el tipo de medio. |
| TITLE | Define una hoja de estilo preferida o alternativa |
| SIZES | Especifica el tamaño del recurso vinculado. Solo para rel=icon |
| MEDIA | Especifica en qué dispositivo se mostrará el documento vinculado. |
| CROSSORIGIN | Especifica cómo maneja el elemento las solicitudes de origen cruzado. |
| HREFLANG | Especifica el lenguaje en el documento referenciado. |
| REFERRERPOLICY | no-referrer|no-referrer-when-downgrade|origin|origin-when-cross-origin|unsafe-url |
Otra cosa que es posible cargar mediante esta etiqueta es una fuentes google.
<!DOCTYPE html> <HTML LANG='es-PE'> <HEAD> <TITLE>Apuntes HTML</TITLE> <Link rel=StyleSheet href=hoja.css> <Link rel=Profile href=meta.txt> <Link rel=Icon href=favicon.ico> </HEAD>
| Valor | Descripción |
|---|---|
| Alternate | Proporciona un enlace a una versión alternativa. |
| Author | Proporciona un enlace al autor del documento. |
| dns-prefetch | Especifica que el navegador debe realizar preventivamente una resolución DNS para el origen del recurso de destino |
| Help | Define el documento de ayuda |
| Icon | Define el favicon de la pagina |
| License | Proporciona un enlace al siguiente documento de la serie. |
| Next | Indica que el documento es parte de una serie y define el siguiente de la serie. |
| PingBack | Proporciona la dirección del servidor pingback que maneja pingbacks al documento actual. |
| preConnect | Especifica que el navegador debe conectarse de forma preventiva al origen del recurso de destino. |
| preFetch | Especifica que el navegador debe buscar y almacenar de forma preventiva el recurso de destino, ya que es probable que sea necesario para una navegación de seguimiento |
| preLoad | Especifica que el agente de navegador debe buscar y almacenar de forma preventiva el recurso de destino para la navegación actual de acuerdo con el destino dado por el atributo "como" (y la prioridad asociada con ese destino). |
| Prerender | Especifica que el navegador debe pre-renderizar (cargar) la página web especificada en segundo plano. Entonces, si el usuario navega a esta página, acelera la carga de la página (porque la página ya está cargada). Advertencia! esto desperdicia el ancho de banda del usuario ! Solo use prerender si es absolutamente seguro que la página web es necesaria en algún momento del viaje del usuario. |
| Prev | Indica que el documento es parte de una serie y define el anterior de la serie. |
| Search | Proporciona un enlace a un recurso que se puede utilizar para buscar en el documento actual y sus páginas relacionadas. |
| Stylesheet | Importa una hoja de estilo CSS. |
El valor más común de tipo de type="text/css". Si omite el atributo de tipo, el navegador mirará el atributo rel para adivinar el tipo correcto,pero si rel=stylesheet, el navegador asumirá que el tipo es type="text/css".
| Valor | Descripción |
|---|---|
| text/css | Archivo CSS |
| text/javascript | Archivo JavaScript |
| text/html | Texto HTML |
| image/png | Imagen PNG |
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-PE'>
<HEAD>
<TITLE>Apuntes 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 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, así que lo lógico es poner primero el global con LINK y luego el local con STYLE.
También acepta atributo globales.
Usado para definir código del lado del cliente en JavaScript. Puede contener sentencias de script o apuntar la URL de un archivo de script externo a través del atributo SRC.
| Atributo | Descripción |
|---|---|
| Async | Especifica que el script se ejecuta de forma asincrónica (solo para scripts externos) |
| CharSet | Especifica la codificación de caracteres usada en un archivo de script externo |
| Defer | Especifica que el script se ejecuta cuando la página ha finalizado el análisis (solo para scripts externos) |
| SRC | URL del script |
| TYPE | Determina el tipo de medio del script |
Vea también la etiqueta noscript para los usuarios que han deshabilitado los scripts en su navegador o que tienen un navegador que no admite scripts del lado del cliente.
<!DOCTYPE html>
<HTML lang='es-PE'>
<Head>
<Title>Apuntes HTML</Title>
<Script>
function miFuncion {
document.getElementById('manual').innerHTML = "Esto es JavaScript";
}
</Script>
</Head>
O desde un archivo externo
<!DOCTYPE html> <HTML lang='es-PE'> <Head> <Title>Aputes 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.
También acepta atributo globales.
Detecta si el navegador tiene deshabilitados 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 botón.
<script>
document.write("Hola mundo")
</script>
<noscript>Your browser does not support JavaScript!</noscript>
También acepta atributo globales.
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.
La etiqueta 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. Esta etiqueta se usa como un contenedor para mantener una porcion de HTML oculto al usuario cuando se carga la página.
<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>
Rellene la página web con un nuevo elemento div para cada elemento de una matriz. El código HTML de cada elemento div está dentro del elemento de plantilla.
<template>
<div class="myClass">I like: </div>
</template>
<script>
var myArr = ["Audi", "BMW", "Ford", "Honda", "Jaguar", "Nissan"];
function showContent() {
var temp, item, a, i;
temp = document.getElementsByTagName("template")[0];
item = temp.content.querySelector("div");
for (i = 0; i < myArr.length; i++) {
a = document.importNode(item, true);
a.textContent += myArr[i];
document.body.appendChild(a);
}
}
</script>
Crear el objeto DocumentiFragment usando node
<Script>
if (document.createElement('template').content) {
document.write('Tu navegador soporta template');
} else {
document.write('Tu navegador NO SOPORTA template');
}
</Script>
También acepta atributo globales.