Como utilizar CSS e Javascript em um documento HTML
O HTML permite a inclusão de script de diferentes formas, todas elas para situações específicas.
O HTML é uma linguagem que tem muita versatilidade, podemos utilizar diferentes script CSS e Javascript em locais diferentes. Por outro lado, devemos saber os ganhos que cada posição que nosso código entra nos oferece.
Vamos ver mais adiante como incluir script CSS e HTML dentro do nosso documento HTML, ainda vamos ver algumas questões semânticas e performance para SEO, através do posicionamento e uso de tags adequadas.
Incluindo CSS no HTML
Basicamente temos três formas de inserir o CSS no nosso documento, elas respeitam uma ordem de execução, sendo que a forma inline tem maior influência relacionado as outras duas. Veja elas abaixo
Arquivo CSS Externo
Podemos criar um arquivo CSS chamado de style.css com o código abaixo.
h1{
color: #3d65ac
}
Agora no nosso documento, podemos usar a tag link dentro da tag head para importar esse arquivo.
<link rel="stylesheet" href="style.css" />
CSS embebido ao documento
Podemos dentro da tag <head>, incluir uma nova tag chamada de style, ela permitirá que scripts CSS sejam incluídos na página.
<style>
h1 {
color: #ef3e39
}
</style>
CSS inline
A última forma é bem simples, basta inserir o atributo style em qualquer tag e incluir suas instruções CSS. Se você optar por usar o modelo inline, tenha em mente que instruções embebidas e externas não terão influência.
<h1 style="color: #3d3d3d; text-transform: uppercase;">Olá, mundo!</h1>
Incluindo Javascript no HTML
A inclusão do Javascript no documento HTML também pode ser feita de três formas, inline, embebido e externo. Vamos deixar a forma inline para um outro post, já que ela está fortemente ligada a eventos.
Arquivo Javascript externo
Imagine que você tenha um arquivo chamado script.js, nele você tem o código abaixo que imprime um alerta na página.
'use strict'
alert('Olá. mundo!')
Para chamar esse arquivo no seu HTML, você pode usar a tag script juntamente com o atributo src, veja como fica no código abaixo.
<script src="script.js"></script>
Isso já basta para funcionar, mas por convenção e pensando em performance, normalmente colocamos essa chamada antes do fechamento da tag <body>.
...
<script src="script.js"></script>
</body>
Arquivo Javascript embebido ao documento
Incluir o Javascript diretamente na página também é possível graças a tag script, a mesma que utilizamos anteriormente. Basta inserir nosso código dentro da tag script e não incluir o atributo src.
<script>
alert('Alerta')
</script>
Também por boas práticas, evitamos inserir a tag script dentro da tag <head>, incluímos ela o mais baixo nível antes do fechamento da tag <body>.
Utilizando preload
Arquivos de CSS, fontes, imagens e Javascripts podem ser um problema durante a renderização das páginas, para tentar aliviar atrasos na renderização, podemos utilizar o preload. Criamos uma tag do tipo <link> e inserimos o valor preload no atributo rel, veja abaixo como fica.
<!--PRELOAD-->
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="script.js" as="script">
Videoaula completa sobre inclusão de CSS e javascript
Agora que você já chegou até aqui, assista a nossa videoaula e aprenda mais sobre o que foi abordado nesse artigo.