Criando seu primeiro site: 10 etapas

2025 Autor: John Day | [email protected]. Última modificação: 2025-01-23 15:03

Neste tutorial, você aprenderá a construir uma página da web básica que possui uma folha de estilo vinculada e um arquivo javascript interativo.

Etapa 1: Criando sua pasta

Crie uma pasta para os arquivos que iremos criar para serem armazenados. Sinta-se à vontade para nomeá-lo como quiser, apenas lembre-se de onde ele está localizado, pois iremos salvar os arquivos nele mais tarde.

Etapa 2: Criando Seu Primeiro Arquivo

Abra seu editor de texto favorito. No meu caso, estarei simplesmente usando o bloco de notas integrado do Windows 10. Assim que tiver um novo arquivo, digite o seguinte:

Esta é minha primeira página da web, trazida a você por um instrutível

Isso é conhecido como tag HTML. Significa Título 1. O texto que colocamos nesta tag aparecerá como um título na página. É aberto e fechado assim. O texto entre as duas tags é o que será exibido no seu navegador da web. A parte que diz está dando a essa tag um atributo que faremos referência na etapa x. Depois de fazer isso, salve o arquivo na pasta que criamos na etapa 1 como index.html.

Etapa 3: Abra o arquivo

Agora que concluímos, navegue até o arquivo dentro da pasta que criamos, clique com o botão direito do mouse no arquivo e selecione a opção "abrir com" e selecione o navegador da web que você usa. No meu caso, este é o Google Chrome. Agora veja o trabalho de seu árduo trabalho até agora!

Etapa 4: estilizando sua página

Como está, nosso site é bastante simples. Vamos adicionar o que é conhecido como folha de estilo em cascata para apimentar um pouco as coisas. Crie um novo arquivo de texto e digite o seguinte:

h1 {cor: azul; alinhamento de texto: centro;}

O que estamos dizendo ao navegador aqui é para encontrar qualquer elemento em uma tag h1 (que aprendemos na etapa 2) e dar a ele a cor azul e alinhá-lo no centro da página. Salve este arquivo na pasta que criamos na etapa 1 como style.css.

Etapa 5: vincule o Style.css ao seu Index.html

Neste ponto, temos dois arquivos separados que não se conhecem. Precisamos informar ao nosso arquivo index.html que temos um arquivo style.css ao qual queremos fazer referência e obter algum estilo. Para fazer isso, vamos abrir nosso arquivo index.html em nosso editor de texto e, acima de nossa tag h1, vamos adicionar o que é conhecido como tag de link. A tag link faz exatamente o que seu nome sugere, ela se vincula a algo. No nosso caso, uma folha de estilo. Vá em frente e digite. A tag de link é uma tag de fechamento automático, portanto, não é necessária uma tag de finalização. O rel significa relação e href diz ao arquivo de índice onde está localizado nosso arquivo externo que estamos referenciando. Agora salve o arquivo index.html.

Etapa 6: Visualize sua página com o novo estilo

Reveja a etapa 3, recarregue sua página da web e observe como as mudanças refletem.

Etapa 7: Criando um botão

Reabra o arquivo index.html no editor de texto e digite o seguinte:

Clique em mim!

e salve o arquivo. Isso cria um elemento de botão na página. Depois de salvar, reabra o arquivo conforme mostrado na etapa 3 e certifique-se de que o botão esteja no canto inferior esquerdo da página.

Etapa 8: Crie seu arquivo Javascript

Por último, vamos criar nosso arquivo javascript. É isso que tornará nosso site interativo. Abra um editor de texto e digite o seguinte:

document.querySelector ("# button"). addEventListener ("click", function () {

document.querySelector ("# header"). innerText = "Alterando o título na hora"

})

O que estamos fazendo é pedir ao documento que encontre um elemento com o ID do botão, e faremos com que o botão responda a um evento de clique alterando o texto de um elemento com o ID do título para "Alterando o título rapidamente " Salve o arquivo como button.js na pasta que criamos na Etapa 1.

Etapa 9: Vincule seus arquivos Javascript e de índice

Como fizemos com o arquivo style.css, precisamos informar nosso arquivo index.html sobre nosso arquivo javascript. Na parte inferior, abaixo de tudo o que fizemos até agora, digite o seguinte:

A tag de script nos permite adicionar uma linguagem de script (no nosso caso, javascript) para fornecer funcionalidade à nossa página. Estamos dizendo a ele para procurar um arquivo chamado button.js e adicionar todo o código contido nele ao nosso arquivo de índice. Depois de digitar, salve o arquivo e abra-o novamente como mostrado na etapa 3.

Etapa 10: teste o botão recém-criado

Agora vá em frente e clique no botão e observe a mudança de direção!

Parabéns!! Você acabou de criar sua primeira página da web interativa! Eu me pergunto o quanto mais você poderia levar sabendo o que sabe agora ??