HTML - 5. Incorporar arquivos

Incorporar Folhas de Estilos

Para incorporar uma folha de estilos em um documento HTML, basta inserir dentro da tag head a seguinte tag link como a seguir:
<link type="text/css" rel="stylesheet" href="estilo.css" />
Com isto, o navegador irá fazer o download do arquivo estilo.css do mesmo diretório de onde a página está sendo executada, e irá interpretar o CSS.

Diferentemente do JavaScript, o CSS pode ser incorporado por completo no head, sem preocupações com o tempo de execução, pois assim que algum elemento surgir, ele já irá ser renderizado dentro das especificações da folha de estilos, com um porém: a folha de estilos também seguirá ordem de execução, ou seja, se houver outra sobrescrevendo, ou códigos in-line, o que vale é o que vem por último.

Há uma forma de incorporar uma outra folha de estilos (arquivo de CSS) para versão apenas de impressão, ou seja, somente quando o usuário quiser imprimir algo, usando o atributo media.
<link type="text/css" rel="stylesheet" media="print" href="impressao.css" />
Desta forma, todo CSS neste arquivo, será interpretado quando for necessário realizar a impressão da página.

Caso queira definir, outros valores possíveis para o atributo media são: screen, all e print. O valor screen é para definir CSS apenas para a tela, exceto impressão, e o valor all é o padrão, acessando tanto a tela quando a versão de impressão.

Incorporar Favicon

O atributo rel não diz respeito apenas para arquivos do tipo stylesheet, mas a várias opções que podem ser incorporadas e que podem surgir no futuro, e alguns elementos possíveis são: alternative, author, dns-prefetch, help, icon, license, next, pingback, preconnect, prefetch, preload, prerender, prev, search, stylesheet. Talvez um outro comum nesta lista seja o icon, que é justamente para inserir o favicon no navegador.
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
Para um favicon versão PNG:
<link rel="icon" type="image/png" href="/favicon.png" />
O Internet Explorer suporta favicon no formato ICO desde a versão 5.0, Firefox desde a versão 1.0, e o Google Chrome desde sua primeira versão.

Para o favicon versão PNG, apenas o Internet Explorer não tem suporte.

Os navegadores por padrão já procuram pelo arquivo "favicon.ico" na raiz do site, ou seja, no endereço como exemplo: "www.exemplo.com.br", o navegador automaticamente tentará buscar o ícone do site no endereço "www.exemplo.com.br/favicon.ico".

Dica: Para o Internet Explorer 8, você precisa especificar "shortcut icon" para o navegador entender; e ele irá ignorar caso não tenha exatamente este valor, ou seja, se estiver "icon shortcut", ou apenas "icon", ele irá ignorar, e irá tentar pegar apenas o "favicon.ico" da raiz do site.

Incorporar scripts

Para incorporar scripts, basta usar a própria tag script e utilizar o atributo src, mas não esqueça de que esta tag precisa ser aberta e fechada com tags separadas sempre, ou podem haver erros no navegador.
<script type="text/javascript" src="script.js"></script>
E não adianta colocar código javascript dentro da tag, pois ela não será executada, por mais que ela exista, o navegador irá utilizar o conteúdo em src no lugar.


Comentários