2ºB - Matemática II - PROGRAMAÇÃO
Antes de iniciar um projeto, é necessário idealizá-lo. Isto é, imaginar a “carinha” do site, as imagens que queremos colocar, quais funcionalidades vamos inserir etc. Em seguida, devemos planejar os primeiros passos para que os objetivos sejam alcançados. Podemos realizar esse planejamento escrevendo ou desenhando no papel, ou ainda, utilizando uma ferramenta que possibilite planejarmos por meio do computador ou dispositivo móvel. Feito nosso protótipo, devemos agora iniciar o projeto. Para isso, usaremos um editor de código chamado Visual Studio Code, por meio do qual podemos criar sites.
Ao abrirmos o Visual Studio Code, ou VSCode que é sua abreviação, devemos criar uma pasta para que todos os arquivos sejam salvos em um só lugar. Então, vamos clicar em Abrir a Pasta. A pasta será aberta no VSCode e já podemos iniciar a criação do site.
Vamos criar o arquivo index.html. Clicaremos com o botão direito do mouse na coluna à esquerda da tela. Em seguida, clicaremos em Novo Arquivo. Um campo em branco será aberto. Digitaremos “index.html” para criar um arquivo.Faremos o mesmo processo para criar um arquivo style.css.
Clicaremos com o botão direito do mouse em Novo Arquivo. Em seguida, em alterar o nome para “style.css”.
Vamos criar a estrutura do arquivo.html. Para isso, digitaremos o ponto de exclamação “!” na tela e apertaremos a tecla Enter. Logo em seguida, surgirá uma estrutura padrão de código de uma página HTML. Vamos entendê-la melhor em seguida.
Vamos praticar a escrita no arquivo index.html. Iniciaremos escrevendo uma frase “vai ser uma imagem aqui”. Para isso, usaremos a tag h1, que corresponde a uma tag de título. Essa frase deve ser adicionada dentro do espaço da tag
, que corresponde ao corpo da página.Para conferirmos se o arquivo style.css está funcionando, vamos atribuir a cor de fundo rosa, a mesma do protótipo, em nossa página HTML. Devemos utilizar a tag
e envolver o código da cor entre as chaves dessa tag. Quando escrevemos o código no arquivo style.css não usamos o símbolo <>.Nossa cor é FFEBEB. Feito isso, vamos adicionar a propriedade background-color, que significa “cor do fundo”, para que esta receba o código de cor correto.