Encabezado HEAD

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:

1. TITLE

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 eqiqueta de ciere.

<!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:

Etiquetas dentro de HEAD
EtiquetasDescripcion
CharSetDefine el juego de carateres usados. UTF-8, ISO-8859-1
BaseEspecifica la URL base para las URL relativas. Usar HREF= y TARGET=
NameVer tabla abajo
http-equivVer tabla abajo

2 BASE

Proporcina una dirección básica específica para la web. Debe tener obligatoriamente los atributos HREF y TARGET. No requiere etiqueta de cierre.

Valores para TARGET
ValorDescripcion
_blankEn una nueva pagina
_parent
_self
_top
nombre de frameEn el frame ral
<!DOCTYPE html>
<HTML lang="es">
<Head>
   <Title>Manual HTML</Title>
   <Base href='http://wiki.peru.org' target=_blank>
</Head>

3 META

Especifica la información usable por el cliente/servidor en documentos dinámicos.

Parametros de Name
NameDescripcion
DescriptionDefine la descripcion de la pagina. <Meta content=description content="Manual HTML">
KeywordsDefine las palabras claves asociadas.
AuthorDefine el autor de la pagina.
CopyrightDefine los derechos de autor de la pagina.
RightsDefine derechos de autor de la pagina.
LanguajeDefine el idioma de la pagina. <Meta name=languaje content=Spanish>
GeneratorDefine el programa usapa para generar la pagina.
Revisit_afterDefine el tiempo de una nueva revision de la pagina.
RobotsParametros para los robots. Posibles valores: index|noindex, follow|nofollow, archive|noarchive
ViewportDefine el tamaño inicial de visualizacion para mobiles.
<!DOCTYPE html>
<HTML lang="es">
<Head>
   <Title>Manual HTML</Title>
   <Meta CharSet="UFT-8" />
   <Meta name=viewport content="width=device-width; initial-scale=1.0">
   <Meta name=description content="Bienvenido al manual de HTML de Enrique Garido-Lecca (Kike_GL)." />
   <Meta name=keywords content="HTML,CSS,JavaScript">
   <Meta name=keywords content="HTML,CSS,JavaScript">
   <Meta name=author content="Enrique Garrido-Lecca">
   <Meta name=robots content="index, follow">
</Head>

Content de Name=Robots
ContetDescripcion
index/noindexIndica al robot si se desea o no permitir la indexación de la página.
follow/nofollowIndica 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/noarchiveIndica 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.
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/noodpSirve para indicar al buscador si debe, o no, mostrar el título y descripción de la página.
ydir/noydirIgual a anterio para buscador Yahoo.

3.1 Atributos en http-equiv;

Valores de http-equiv
http-equiv =Descripcion
RefreshRefresca la pagina cada n seguntos y redirecciona. Usar content="n;URL=ruta"
Content-TypeDefine contenido. Usar content="text/html; charset=UTF-8"
Content-languajeDefine idioma. Usar http-equiv="content-language" content=es
<!DOCTYPE html>
<HTML LANG="es">
<Head>
   <META charset="UTF-8" />
   <META http-equiv="content-language" content=es>
   <TITLE>Manual HTML</TITLE>
   <META http-equiv=Refresh CONTENT=120; URL=h21.htm>
</Head>

3.9 META NAME=viewport

El punto de vista varia con la resolucion de pantalla y en dispositivos moviles este valor es critico. HTML5 introcujo este paranetro para facilitar a todas las web a adaptarse a los moviles, asi que debe incluir esta etiqueta en todas sus paginas.

<META=viewport CONTENT="width=device-width, initial-scale=1.0">

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 horizontamnete, solo verticalmente si no quieres que tu pagina sea calificada con una pobre experiencia grafica.

Valores de content
ValorDescripcion
widthdevice-width, define el ancho visual
device-widthDefine ancho fisico
heightdevice-height, define el anto visual
device-heightDefine alto fisico
initial-scale1.0, define la zoom inicial (sin zoom)
minimun-scaleDefine el minimo zoom.
maximun-scaleDefine el maximo zoom.
user-scalableYes|No, permite al usuario cambiar el zoom.
  1. No uses nunca elementos grandes de ancho fijo.
  2. Nunca fijes tu contenido para anchos particulares.
  3. Usa CSS para aplicar un estilo diferente para pantallas grandes y pequeñas.

4. LINK

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 mediente 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>
Valores de atributo TYPE en etiqueta LINK
ValorDescripcion
text/cssArchivo CSS
text/javascriptARchivo JavaScript
text/htmlTexto HTML
image/pngImagen PNG
Valores de atributo REL en etiqueta LINK
ValorDescripcion
StyleSheetImporta una hoja CSS
ProfileDefine URL de un archivo externo con Metadatos
NextIndica que el documento es parte de una serie y define el siguiente de la serie.
PrevIndica que el documento es parte de una serie y define el anterior de la serie.
HelpDefine el documento de ayuda
IconDefine el favicon de la pagina
Alternate
Author
License
PingBack
preConnect
preFetch
preLoad
dns-prefetch
Search

La etiqueta LINK puede contener un unico atributo PROFILE que define la URL de un documento externo que contiene el perfil de la cabecera.

5. STYLE

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>

6. SCRIPT

Usado para definir codigo 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>

7. NOSCRIPT

Detecta si el navegador tiene desabilidatos los SCRIPT y muestra el codigo 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 esten 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.

8. TEMPLATE

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 memento 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 podria 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