Olá, Nataly! Tudo bom contigo?
Antes de tudo, gostaria de agradecer a paciência em aguardar um retorno!
Quando colocamos a tag <script> dentro de <head>, o Javascript é executado antes da renderização dos itens que estão na página, neste caso, das tags HTML inseridas dentro de <body></body>. Por esse motivo, quando realizamos o comando document.querySelector('canvas') nenhum valor é atribuído à var tela, tendo em vista que a tag <canvas> não existia até o fim da execução do código Javascript — logo, os demais métodos que dependem da variável tela não são processados como gostaríamos.
Sendo assim, é comum colocarmos a tag <script> nas linhas finais da tag <body>, visto que, desta maneira, todos os outros elementos do nosso arquivo HTML serão renderizados pelo navegador previamente.
Após alterações, teremos algo assim:
<body>
<h1>Bem vindos a minha primeira pagina web</h1>
<canvas width="600" height="400"></canvas>
<img src="./img/b.jpg">
<button>click</button>
<a href="">redirecionamento de pagina</a>
<script rel="script" type="text/javascript" src="./script.js"></script>
</body>
Aliás, não é necessário adicionar rel=”script” à <script>, já que este atributo não integra tal tag. Removendo-o, teremos algo dessa maneira:
<script type="text/javascript" src="./script.js"></script>
Por fim, seu código terá o resultado abaixo:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Curso Alura</title>
<link rel="stylesheet" href="./style.css" type="text/css"/>
</head>
<body>
<h1>Bem vindos a minha primeira pagina web</h1>
<canvas width="600" height="400"></canvas>
<img src="./img/b.jpg">
<button>click</button>
<a href="">redirecionamento de pagina</a>
<script type="text/javascript" src="./script.js"></script>
</body>
</html>
Caso tenha dúvidas após minha explicação ou ao longo dos seus estudos, sinta-se confortável para enviá-las ao fórum. Fico à disposição para te ajudar no que for preciso!
Abraços e até mais!
Caso este post tenha lhe ajudado, por favor, marcar como solucionado! ✓.
