Dentro de HEAD: metadatos
y <links>.
Las etiiquetas <meta> proveen información extra sobre la página y puede tener diferentes funciones. Como ves no necesitan etiqueta de cierre. Las más usadas
<meta charset="UTF-8"> Indica el juego de caracteres usados en la página. Los más comunes son UTF-8 (Unicode) y ISO-8859-1 (Caracteres latinos). Los admitidos puedes verlos aquí
<meta name="Description" content=" "> Hace un resumen breve de la página, una descripción útil para directorios y buscadores de páginas web, aunque no incide mucho en el posicionamiento dentro de los resultados de búsqueda.
<meta http-equiv="refresh" content=" " url=" "> Util para recargar la página actual o enviar al visitante a otra (indicada en el valor opcional url) después de transcurridos el número de milisegundos indicados en content.
<meta name="viewport" content="width=device-width, user-scalable=no"> Utiliza en el diseño de web responsive con el objeto de ajustar el ancho de de la página al tamaño e la pantalla del dispositivo con el que la vemos.Luego algo menos usadas:
<meta name="author" content=" "> Contiene el nombre del autor de la página web.
<meta name="generator" content=" "> Se puede usar para escribir el programa usado para crear la página.
Ignorables:
<meta name="keywords" content=" "> En content escribimos una lista separada por comas con las palabras más significativas de nuestra página. Era útil para buscadores, pero hoy tiene poco valor. La pongo para que la conozcas por si la ves, pero puedes ignorarla.
Encontrarás otras muchas meta etiquetas para objetivos muy concretos, como las etiquetas destinadas a que las redes sociales extraigan información para mostrar cuando una página es compartida. En este ejemplo tienes las meta propias de la red Facebook y las de Twitter. Son etiquetas utilizables por ambas redes definidas en el Protocolo Open Graph, de donde viene la inicial og: que ves en el código de ejemplo
<meta property="og:title" content="Desarrollo Web">
<meta property="og:description" content="Aprende a crear sitios web">
<meta property="og:image" content="https://creatuweb.com/thumbnail.jpg">
<meta property="og:url" content="http://creatuweb.com/index.htm">
<meta name="twitter:card" content="summary_large_image">
<!-- Recomendables -->
<meta property="og:site_name" content="Aprende a crear sitios web">
<meta name="twitter:image:alt" content="texto alta para la imagen">
<!-- Necesarias para Analiticas de cada red-->
<meta property="fb:app_id" content="app_id_del_sitio" />
<meta name="twitter:site" content="@website-username">
Los estilos o los scripts pueden ira también fuera de la sección HEAD. A veces e hace esto para disminuir el tiempo de acceso a la página.
Recursos y definiciones
Ls recursos externos se incluyen con una etiqueta <link>, con ella se incorpora a la página web recursos contenidos en archivos externos, como estilos, códigos Javascript, imágenes o iconos. Estos recursos se localizan mediante el atributo href, que contendrá una url señalando al archivo a incluir. El tipo de recurso enlazado se especifica en el atributo rel.
Un recurso externo habitual son las hojas de estilo, archvos con definiciones de formato para los elementos de la página: colores, tipos de letras, márgenes, bordes..... Por ejemplo
<link href="/css/estilos.css" rel="stylesheet" type="text/css">
Esta linea diria que la página web necesita el archivo estilos.css situado en la carpeta css del sitio web (/css). El argumento <type="text/css">
indica el tipo de archivo enlazado, en caso de archivos css no es necesario escribirlo.
Otro elemento habitual es el marcado con las etiquetas <scrip src=""></script>
para incluir un archivo javascript, es decir, con código para ejectuar en la pagina. Por ejemplo
<script src="/scripts/codigomenu.js"></script>
Esta linea diría a la página que cargue el archivo codigomenu.js situado en la carpeta /scripts del sitio web (se usa el atributo src). Este elemento puede colocarse en cualquier parte de la página, no solo en HEAD.
Y los recursos internos serían los definidos en la propia página.
Tenemos las etiquetas <style></style> para contener definiciones de estilo CSS
Y la etiqueta <script></script> para incluir código en la propia página
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Grupo Laweb</title>
<link rel="shortcut icon" href="http://www.grupoweb.com/favicon.ico">
<link href="http://fonts.googleapis.com/css?family=Roboto:400,300,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/animate/animate.css">
<link rel="stylesheet" href="assets/animate/set.css">
<link rel="stylesheet" href="assets/style.css">
<script>
var link = document.createElement('link');
link.type = 'image/x-icon';
link.rel = 'shortcut icon';
link.href = 'favicon.ico';
</script>
</head>