Nessa aula você vai aprender como importar CSS e Javascript externos para sua página HTML, evitando que esses códigos fiquem misturados no seu arquivo HTML.

Quando você está criando sua página HTML é preciso colocar códigos CSS e Javascript para deixar seu site com uma boa usabilidade, melhorando a experiência do usuário nele.

Nada impede que você escreva diretamente em seu arquivo HTML seus códigos de estilo (CSS) e Javascript, mas na medida em que você evolui percebe que não é uma boa prática.

Arquivos separados

O mais indicado é de fato utilizar por exemplo CSS em um arquivo único, separado do CSS. A mesma coisa para o Javascript, isso torna seu site mais organizado e mais fácil de dar manutenção.

A partir do momento em que você cria seus arquivos de CSS e Javascript separados do HTML é preciso depois “chamar” esses arquivos dentro do seu HTML, fazer com que eles sejam incorporados ao seu código HTML.

Para isso utilizamos as tags <link> e <script>.

Importando CSS e favicon

Para incorporar um arquivo externo de CSS você deve utilizar a tag <link>. A forma de usar é bem simples, devemos informar o atributo “rel” com o valor “stylesheet” e o atributo “href” com o endereço que o aquivo está.

Ex.: <link rel=”stylesheet” href=”meuarquivo.css”>

Outro uso dessa tag é para criar o favicon da sua página. Sabe aquela imagem pequena mostrada na aba do navegador? é dela que estamos falando. Para adicioná-la é bem simples:

Ex.: <link rel=”icon” href=”img/favicon.png”>

Nesse exemplo acima informamos no atributo rel que esse será um “icon” e em “href” colocamos o endereço da imagem.

<link> não é <a>

A tag link não deve ser confundida com a tag que cria os links clicáveis em seu site, essa é a tag <a>. Lembrando que ainda estamos falando sobre os elementos do cabeçalho (head) no qual não são mostrados na tela aos usuários.

Para adicionar Javascript as suas páginas é preciso usar a tag <script>. Caso ainda não saiba o que é Javascript, em resumo é uma linguagem de programação em que é possível deixar suas páginas mais dinâmicas, interativas.

Importando Javascript

Para incorporar um arquivo Javascript usamos:

<script src=”javascript.js”></script>

Diferente ta tag <link>, essa tag precisa de fechamento (</script>). Para usar basta criar como no exemplo acima, colocando no atributo “src” o endereço que está o arquivo Javascript.

Observação importante

Apesar de estarmos mostrando o <script> como um elemento a ser inserido no <head>, é indicado que utilize ao final do <body> para ser a última parte de seu código a ser lido pelo navegador ao renderizar a página HTML.

Agora que você viu como importar CSS e Javascript em suas páginas HTML, vamos ver uma tag interessante para finalizarmos essa aula que é a <base>. Ao usar ela é possível inserir um endereço que será padrão para aquela página.

Sempre que for preciso usar imagens, ou outras coisas em nossa página que se encontram num mesmo lugar, por exemplo em nosso site, podemos usar:

<base href=”http://frontend.com.br/”>

Isso significa por exemplo, que quando eu for inserir uma imagem não vou precisar informar o endereço completo, pois o sistema já sabe a base em que tudo se encontra no meu site, basta apenas digitar a pasta e o nome do arquivo, como:

<img src”imagens/foto.png”>