Bem-vindo a aula de Programação Web!
Neste conteúdo, vamos aprender a criar uma página web do zero, entendendo como funciona a estrutura básica de um site. Você vai descobrir como utilizar o JavaScript para criar interações dinâmicas, tornando seu site mais funcional e interativo.
psychologyO que você vai aprender:
O que é HTML?
HTML (HyperText Markup Language) é a linguagem de marcação usada para criar páginas web. Ele é usado para criar o conteúdo da página, como textos, imagens, links e outros elementos. Com HTML, você pode criar uma página web simples ou complexa, dependendo do que você deseja fazer.
Conhecendo a estrutura HTML
O HTML é composto por varios elementos que são usados para estruturar o conteúdo da página. Cada elemento é definido por uma tag, que é uma palavra-chave que envolve sinais de maior e menor envolta da tag (< e >). A estrutura básica de um documento HTML é a seguinte:
html
<!DOCTYPEhtml>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Título da Página</title>
</head>
<body>
<h1>Título Principal</h1>
<p>Este é um parágrafo de texto.</p>
</body>
</html>
Declaração do documento
- Essa tag informa ao navegador que estamos utilizando o padrão HTML5, a versão mais recente da linguagem.
- Deve ser sempre a primeira linha do seu código HTML.
Tag <html>
- A tag raiz do seu documento.
- Envolve todo o conteúdo da página, tanto o que aparece quanto o que fica nos bastidores.
- O atributo lang="pt-br" define o idioma da página como português brasileiro.
Tag <head>
- Contém informações importantes da página, que não são exibidas diretamente no corpo visível.
- Exemplos: Título da página, Link CSS e Scripts
Tag <meta>
- Define a codificação de caracteres como UTF-8.
- Isso é essencial para que acentuações da língua portuguesa, apareçam corretamente.
- Evita erros com caracteres estranhos (como � ou símbolos).
Tag <title>
- Define o título da página que aparece na aba do navegador.
Tag <body>
- Contém todo o conteúdo visível ao usuário.
- Tudo o que for exibido no navegador estará dentro dela: textos, imagens, botões, links etc.
Tag <h1>
- Usada para o título mais importante da página.
- Por padrão, o navegador o exibe em negrito e com tamanho grande.
Tag <p>
- Utilizada para exibir textos em blocos, como parágrafos.
psychology Entendendo o que são tags
As tags são os elementos do HTML, e são usadas para definir o conteúdo da página. Cada tag tem sua propria função especifica no código, como definir um título, um parágrafo, uma imagem, um link, e entre outros. As tags são escritas com sinais de maior e menor (< e >), elas geralmente vem em pares, com uma tag de abertura e uma tag de fechamento. Por exemplo, a tag <p> é usada para definir um parágrafo, e a tag de fechamento é </p> Existem também tags que não precisam de fechamento, como a tag <br> que é usada para criar uma quebra de linha. Irei citar algumas tags mais comuns que você irá utilizar no HTML:
Atributos em tags
Como já conhecimos as tags, agora vamos entender o que são atributos. Atributos são informações adicionais que podemos adicionar às tags para definir características ou comportamentos específicos. Eles são escritos dentro da tag de abertura, e geralmente são compostos por um nome e um valor, separados por um sinal de igual (=). Por exemplo, a tag <a> pode ter um atributo href que define o destino do link, como em <a href="https://www.exemplo.com">Link</a>. Outro exemplo é a tag <img>, que pode ter um atributo src que define o caminho da imagem, como em <img src="imagem.jpg" alt="Descrição da imagem">. Os atributos são opcionais, mas podem ser muito úteis para definir o comportamento e a aparência dos elementos na página.
O que é CSS
CSS (Cascading Style Sheets) é uma linguagem de estilo usada para definir a aparência e o layout de uma página web. Ele é usado para estilizar o conteúdo HTML, como cores, fontes, tamanhos, margens, espaçamentos e muito mais. Com CSS, você pode criar páginas web bonitas e atraentes, e podemos aplicar os estilos aos elementos HTML de forma fácil através de seletores, que são usados para selecionar os elementos que você deseja estilizar.
Entendendo o que são seletores
Seletores são usados para identificar os elementos HTML que você deseja estilizar com CSS. Existem vários tipos de seletores, como seletores de tag, classe, id e atributos. Os seletores de tag são usados para selecionar todos os elementos de uma determinada tag, como p para selecionar todos os parágrafos. Os seletores de classe são usados para selecionar elementos com uma classe específica, como .minha-classe para selecionar todos os elementos com a classe "minha-classe". Os seletores de id são usados para selecionar um elemento com um id específico, como #meu-id para selecionar o elemento com o id "meu-id". Os seletores de atributos são usados para selecionar elementos com um atributo específico, como [type="text"] para selecionar todos os elementos com o atributo type igual a "text". Mas como eu posso aplicar um seletor em uma tag HTML? Para aplicar um seletor em uma tag HTML, você precisa escrever o seletor que você deseja, como por exemplo a classe ou o id, se for uma classe você deve colocar na tag dessa forma <tag class="minha-classe">, e se for um id você deve colocar na tag dessa forma <tag id="meu-id">.
Propriedades e valores
As propriedades são usadas para definir as características dos elementos HTML, como cor, tamanho, fonte, margem, espaçamento e muito mais. Cada propriedade tem um valor associado que define como a propriedade deve ser aplicada. Por exemplo, a propriedade color é usada para definir a cor do texto, e o valor pode ser uma cor específica, como red ou #ff0000, esse código: #ff0000, é uma cor em código hexadecimal, nesse exemplo é o vermelho. Outro exemplo é a propriedade font-size, que é usada para definir o tamanho da fonte, e o valor pode ser um número seguido de uma unidade de medida, como 16px ou 1pt. As propriedades e valores são escritos em pares, separados por dois pontos (:), e cada par é separado por ponto e vírgula (;). Por exemplo:
O que é JavaScript
JavaScript é uma linguagem de programação usada para criar interatividade em páginas web. Ele é usado para adicionar comportamento aos elementos HTML, como responder a eventos, manipular o DOM (Document Object Model) e muito mais. Com JavaScript, você pode criar páginas web interativas, como formulários dinâmicos, animações, jogos e muito mais. É uma linguagem muito poderosa, e é amplamente usada no desenvolvimento web.
O que é Programação?
Programação é dar instruções a um computador para que ele faça algo. Essas instruções são escritas em uma linguagem que o computador entende, como o HTML e o JavaScript, que vamos aprender aqui.
Com programação conseguimos criar muitas coisas legais, como por exemplo:
- Sites (como este que você está vendo, o Youtube, Instagram...)
- Aplicativos
- Jogos
- Robôs
Ou seja, a programação é como ensinar o computador a trabalhar para você.
Aprendendo sobre variaveis
O que é uma variável?
Variáveis são como caixas onde podemos guardar informações temporariamente. Vamos pensar em um armário com vários espaços que podemos preencher com algo — veja isso como espaços de memória do computador que podemos utilizar para guardar dados. Para isso, utilizamos variáveis.
Em JavaScript, podemos criar variáveis usando as palavras-chave var, let ou const.
A diferença entre elas é que var é uma variável que pode ter o valor alterado, ou seja, podemos mudar o valor dela depois de criada.
A let também permite a alteração do valor, mas possui escopo de bloco — ou seja, só pode ser acessada dentro do bloco onde foi criada.
Já a const é uma variável cujo valor não pode ser alterado após sua criação.
Um exemplo é quando criamos uma variável, e o JavaScript reserva um espaço na memória do computador, observe a imagem a seguir:
Armazenando Elementos HTML
Podemos armazenar elementos HTML em variáveis usando o método document.querySelector() ou document.getElementById().
Utilizamos o querySelector() para selecionar um elemento HTML usando um seletor CSS. Com ele, conseguimos buscar elementos por tag, classe, id e outros atributos.
Por exemplo, para selecionar um elemento com a classe "minha-classe", podemos fazer assim: document.querySelector('.minha-classe');. Assim conseguimos acessar o elemento HTML pela classe.
Já o getElementById() é usado para selecionar um elemento HTML pelo seu ID. Por exemplo: document.getElementById('meu-id');.
Agora vamos armazenar os elementos HTML em variáveis. Para isso, podemos criar uma variável chamada meuElemento e armazenar o elemento HTML com a classe "minha-classe" nela: let meuElemento = document.querySelector('.minha-classe');
Com isso, podemos manipular o elemento HTML armazenado na variável meuElemento: alterar o texto do elemento, adicionar ou remover classes e muito mais.
Manipulando uma pagina web com o DOM
O DOM (Document Object Model) é uma representação da estrutura de um documento HTML, e é usado para manipular os elementos HTML da página. Com o DOM, podemos acessar, modificar, adicionar e remover elementos HTML da página usando JavaScript.
Podemos acessar os elementos HTML usando os métodos document.querySelector() ou document.getElementById(), como já vimos anteriormente.
Depois de acessar um elemento HTML, podemos manipular ele usando as propriedades e métodos do DOM. Por exemplo, podemos alterar o texto de um elemento usando a propriedade innerText, como em: meuElemento.innerText = 'Novo texto';
Também podemos mudar o estilo de um elemento usando a propriedade style, como em: meuElemento.style.color = 'red';
Ou até mesmo mudar o fundo do elemento usando a propriedade style.backgroundColor, como em: meuElemento.style.backgroundColor = 'blue';
Existem muitos outros métodos e propriedades do DOM que você pode usar para manipular os elementos HTML da página, como adicionar eventos, criar novos elementos, remover elementos, e muito mais.
Criando eventos com JavaScript
Eventos são ações que ocorrem, como cliques do mouse, pressionamento de teclas, carregamento da página e entre outros. Podemos criar eventos para responder ações como um clique em um botão, como seria isso? Para criar eventos podemos utilizar o método addEventListener(), que é usado para adicionar um evento a um elemento HTML, como por exemplo, um clique em um botão. Para esse exemplo, vamos criar um botão com a classe "meu-botao" e adicionar um evento de clique nele, assim:
Exemplo Modo Dia e Noite com JavaScript
Digite na caixa de texto um comando para deixar a noite em dia e virse versa.
- /
- day
Código do Modo Dia e Noite acima
inputMine.addEventListener('keypress', (e) => { if ( e.key === 'Enter' ) { eventImgMinecraft(); } });
buttonMine.addEventListener('click', () => { eventImgMinecraft(); });
function eventImgMinecraft() { if (inputMine.value === '/time set night') { imgMine.classList.remove("day"); imgMine.classList.add("night"); } else if { imgMine.classList.remove("night"); imgMine.classList.add("day"); } }