Contenidos

1 Cabecera de una página Html

Cabecera de una página Html

La cabecera está delimitada por el elemento head (que a su vez está contenido dentro del elemento html), en ella se describe información del documento (titulo, configuración, scripts y estilos)

Se coloca información del documento, que no se verá en la pantalla principal y puede ser:

Título del documento
Metadatos
Enlaces a otros archivos
Scripts
Estilos

Título del documento

El título debe ser breve y descriptivo de su contenido, pues será lo que vean los demás cuando añadan nuestra página a su agenda de direcciones (bookmark)

Esta etiqueta es obligatoria y que debe aparecer sólo una vez en nuestro documento

El navegador la visualizará en la barra de título de su ventana

<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <title>Página de prueba</title>
    </head>
</html>

En el ejemplo se ha introducido la palabra página acentuada y como todavía no se ha introducido el código de caracteres podría mostrar caracteres extraños, asegúrese introducir la etiqueta de caracteres especiales para evitarlo

Metadatos

Los metadatos son elementos introducidos con la etiqueta meta, el tipo de metadato se define mediante sus atributos, algunos de los más habituales son:

charset

indica la codificación en la cual está escrito el documento

Es importante que introduzcamos la codificación correcta para que el navegador visualice el documento correctamente

<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <meta charset='utf-8'>
    </head>
</html>

En este ejemplo se ha usado la codificación UTF-8 que es la estándar para internet

author

indica quien es el autor de la página, se especifica con los atributos name y content

<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <meta name='author' content='Sergio Cárcamo García' />
    </head>
</html>

keywords y description

Ambas hacen referencia al contenido de la página y suelen ser usadas por los motores de búsqueda para indexar las páginas web

Gracias a estos campos, que se especifican con los atributos name y content, los buscadores saben que términos de búsqueda describen mejor nuestra página web para mostrarsela al resto de usuarios

<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <meta name='keywords' content='Desarrollo web, html, css, javascript' />
        <meta name='description' content='Informática, conjunto de conocimientos científicos y de técnicas que hacen posible el tratamiento automático de la información por medio de ordenadores' />
    </head>
</html>

Enlaces a otros archivos

En la cabecera podemos indicar enlaces a otros archivos que queremos cargar junto con nuestra página web, para ello utilizamos la etiqueta link

Generalmente serán hojas de estilo CSS, archivos JavaScript, librerias adicionales en otros lenguajes o nuestros propios archivos

<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <link rel='stylesheet' id='twentyfourteen-style-css' type='text/css' href='/wp-content/themes/twentyfourteen/style.css'  />
        <link rel='alternate' hreflang='es' href='/?lang=es' />
        <link rel='alternate' hreflang='en' href='/?lang=en' />
        <link rel='alternate' hreflang='x-default' href='/?lang=es' />
    </head>
</html>

En el ejemplo se ha incluido la hoja de estilo CSS del tema twentyfourteen de wordpress, para ello se han usado los atributos:

rel
para indicar que tipo de documento es, en este caso una hoja de estilo
id
para asignarle un identificador único
type
para indicar el tipo de texto que el navegador recibirá, en este caso una hoja de estilo CSS
href
es la ruta relativa del documento o su ruta absoluta

En el ejemplo también se ha incluido una especificación para definir varios idiomas, los cuales utilizará el buscador para indexar usando correctamente el idioma en el que está escrita la página, para ello se han usado los atributos:

rel
para indicar que tipo de documento es, en este caso una referencia para multisitio en varios idiomas
hreflang
para asignarle un idioma, en este caso es para español en para ingles y x-default para el idioma por defecto para la página de inicio
href
es la ruta relativa del documento o su ruta absoluta, en este caso se le añade el parámetro lang, empezando por ? para indicar las siglas del idioma

Scripts

El elemento script permite incluir código ejecutable en nuestra página web

Por defecto, el navegador tomará JavaScript como el lenguaje por defecto a ejecutar, si no especificamos otro

<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <script type='text/javascript'>
            //Código Javascript
        </script>
        <noscript>
            <p>Esta página requiere el uso de Javascript</p>
            <p>Por favor, compruebe la configuración de su navegador</p>
        </noscript>
    </head>
</html>

En el ejemplo se ha tenido en cuenta el caso de que el navegador no pueda usar scripts, ya sea por ser antiguo o que el usuario lo haya bloqueado en su configuración

Para ello hemos usado el elemento noscript, que en este caso mostrará el texto en el navegador en vez de ejecutar el script

<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <script type='text/javascript' src='/wp-includes/js/jquery/jquery.js'></script>
    </head>
</html>

En el ejemplo se ha utilizado un fichero externo para incluir el código ejecutable, utilizando la ruta absoluta o relativa en el atributo src

En muchas páginas web no se realiza la inclusión de los scripts en el head, sino en el body

La razón para acelerar la carga del HTML, ya que al encontrar un fichero externo tiene que leerlo y ejecutarlo, deteniendo el proceso de carga del resto del HTML

Imaginemos que tenemos el servidor saturado por la carga de los scripts, el usuario no recibiría nada del HTML y por tanto no vería la página, sólo una página en blanco

Por esta razón, algunos desarrolladores incluyen los scripts al final del documento, al final del elemento body

Como normalmente los scripts se encargan de la interacción con el usario, no es demasiado grave que haya una pequeña demora para empezar a ver las animaciones, enviar formularios, etc

Es más fácil para los usuarios si pueden ver el contenido y luego pueden interactuar con él

Estilos

El elemento style permite definir propiedades de estilos que se aplicarán a lo largo del documento

<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <style type='text/css'>
            p {
                  font-family: Arial;
                  font-size: 10pt;
                  color: rgb{0, 0, 128};
                  text-indet: 15px;
                  text-aling: justify;
                  margin-left: 10px;
            }
        </style>
    </head>
</html>

Como se puede ver en el ejemplo, con este elemento generalmente se indica lo que se espera aplicar, aunque también podremos incrustarlos dentro del propio HTML

<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <style type='text/css' href='/wp-content/themes/twentyfourteen/style.css'></style>
    </head>
</html>

También es posible utilizar una hoja de estilo externa, en este caso hemos utilizado la CSS del tema twentyfourteen de wordpress, especificando la ruta relativa o absoluta del archivo, en el atributo href

Cookie	Duración	Descripción
CookieLawInfoConsent	Hasta finalizar la sesión del navegador	Controla la visualización del consentimiento de Cookies, su gestión y visualización en la página web por parte del usuario
qtrans_admin_language	Hasta finalizar la sesión del navegador	Permite al administrador gestionar la traducción de la página web a varios idiomas
qtrans_edit_language	Hasta finalizar la sesión del navegador	Permite al administrador editar la traducción de la página web a varios idiomas
viewed_cookie_policy	Hasta finalizar la sesión del navegador	Controla si la visualización del consentimiento de Cookies es visible actualmente en la página web para el usuario o por el contrario está oculta

Web sobre Informática de Secarcam

Cabecera de una página Html

Cabecera de una página Html

Título del documento

Metadatos

Enlaces a otros archivos

Scripts

Estilos

Página web de Sergio Cárcamo García dedicada a la informática y temas relacionados como los lenguajes de programación, la estadística, las matemáticas, etc

Cabecera de una página Html

Título del documento

Metadatos

Enlaces a otros archivos

Scripts

Estilos

Página web de Sergio Cárcamo García dedicada a la informática y temas relacionados como los lenguajes de programación, la estadística, las matemáticas, etc

Política de Cookies