Mensagens

Manual de Correção

 Pronto para ver como te saíste? Vamos às respostas! 1. A tag é <body> . Todo o conteúdo visível (títulos, parágrafos, imagens) fica dentro dela. 2. A resposta é b) .html . É assim que o navegador sabe que deve interpretar o ficheiro como uma página web. 3. A tag <h1> serve para o título mais importante da página. Geralmente, só devemos ter um <h1> por página. 4. Falso. O conteúdo da tag <head> contém metadados e informações para o navegador, não é exibido diretamente na página (com exceção do <title> ). 5. A resposta é a) HyperText Markup Language. 6. A tag <meta charset="UTF-8"> garante que os caracteres especiais da nossa língua, como "ç" e os acentos (á, ã, ê), sejam exibidos corretamente. 7. O atributo alt (texto alternativo) descreve a imagem. É crucial para a acessibilidade (leitores de ecrã para pessoas com deficiência visual) e para o SEO. 8. A tag é <title> . 9. O atributo lang="pt-MZ" informa ...
Enviar um comentário
Ler mais

Desafio Código do Zero: 15 Perguntas para Testar a Tua Fundação HTML

Nas últimas sessões, mergulhámos de cabeça no mundo do HTML e das ferramentas de desenvolvimento. Aprendemos a criar a nossa primeira página, a entender o que cada linha de código faz e a configurar o nosso ambiente de trabalho como os profissionais. Agora, chegou a hora de fazer uma pausa na matéria nova, respirar fundo e olhar para trás. Vamos testar o nosso conhecimento com um pequeno desafio! Preparei 15 perguntas que cobrem os tópicos mais importantes das nossas Aulas 1, 2 e 3 . O objetivo não é ter uma nota, mas sim divertirmo-nos e, mais importante, consolidar a nossa fundação. Pega num papel e caneta ou abre um bloco de notas e tenta responder a tudo antes de espreitares o manual de correção no final. Vamos a isso! O Grande Quiz da Fundação Web --- AULA 1: A Primeira Página Web --- 1. Qual é a tag principal que usamos para envolver todo o conteúdo visível de uma página web? 2. Qual é a extensão de ficheiro correta para guardar uma página HTML? a) .txt b) .html c) .web 3. ...
Enviar um comentário
Ler mais

Aula Bónus - Laboratório Prático de Design Responsivo

 Na última aula, falámos sobre a teoria do Design Responsivo e aplicámo-la ao nosso projeto. Mas, por vezes, a melhor forma de entender um conceito é isolá-lo e vê-lo a funcionar de forma clara, sem distrações. Por isso, criei esta aula extra, a 17.1! Hoje, vamos construir uma página super simples a partir do zero com um único objetivo: ver a magia das Media Queries a acontecer em tempo real. Pensa nisto como o nosso laboratório: um ambiente controlado para experimentar e ver os resultados de forma inequívoca. Parte 1: A Estrutura HTML - O Nosso Material de Teste Vamos criar um único ficheiro HTML para esta experiência. Abre o teu VS Code, cria um novo ficheiro e guarda-o como laboratorio.html . Cola o seguinte código lá dentro. HTML <!DOCTYPE html > < html lang = "pt-MZ" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title ...
Enviar um comentário
Ler mais

Design Responsivo com Media Queries: Faça o seu Site Ficar Perfeito no Telemóvel

 O nosso site está incrível no computador. Está bonito, animado, interativo. Mas e se eu te dissesse que mais de metade dos teus visitantes provavelmente o verão num ecrã de telemóvel? Se o site não se adaptar, a experiência será péssima, com textos minúsculos e a necessidade de fazer zoom e arrastar a página para os lados. Hoje, vamos aprender a técnica essencial do desenvolvimento web moderno: o Design Responsivo . Vou mostrar-vos como usar as "Media Queries" do CSS para aplicar estilos diferentes dependendo do tamanho do ecrã, garantindo que o nosso site seja bonito e funcional em qualquer dispositivo, do telemóvel ao ecrã gigante. Parte 1: A Meta Tag Mais Importante de Todas ( viewport ) Antes de escrevermos uma única linha de CSS responsivo, temos que fazer uma coisa. Os navegadores de telemóvel, por padrão, fingem que são um ecrã de computador e depois diminuem o zoom da página. Temos que os impedir de fazer isso. Adicionem a seguinte linha de código dentro da tag <...
Enviar um comentário
Ler mais

Dando Vida à Web: O Guia Completo de Animações com @keyframes

 Olá, equipa! Chegámos a uma das aulas mais divertidas e criativas de toda a nossa maratona. Se as Transições são sobre suavizar mudanças, as Animações são sobre criar movimento do zero! Querem fazer um título deslizar para a página? Um ícone pulsar suavemente? Uma notificação aparecer com elegância? Tudo isso é feito com Animações CSS , e a base de tudo é uma regra especial chamada @keyframes . Hoje, vamos aprender a criar as nossas próprias animações, fazendo elementos moverem-se, pulsarem e aparecerem com estilo na nossa página. A Dupla Dinâmica: @keyframes e a propriedade animation Criar uma animação em CSS é um processo de duas partes: Definir a Animação com @keyframes : Primeiro, criamos uma "receita" para a nossa animação. Damos-lhe um nome e definimos os "passos" ou "momentos-chave" (keyframes) do movimento. Podemos usar from (o estado inicial) e to (o estado final), ou usar percentagens (0%, 50%, 100%) para um controlo mais fino. Aplicar a Anim...
Enviar um comentário
Ler mais

Magia Suave: Introdução às Transições em CSS

 Olá, equipa! Bem-vindos à aula onde vamos adicionar um toque de elegância e fluidez ao nosso site. A web moderna é fluida. Os elementos não aparecem e desaparecem; eles deslizam, desvanecem, mudam de cor suavemente. Essa elegância não é feita com JavaScript complicado. Na maioria das vezes, é uma única linha de CSS: a propriedade transition . Hoje, vamos aprender a animar as mudanças de estado dos nossos elementos (como quando passamos o rato por cima), para criar interfaces mais agradáveis e profissionais. O Que é uma Transição? Uma transição em CSS é uma instrução que damos ao navegador. Dizemos-lhe: "Quando uma propriedade de um elemento mudar (por exemplo, a cor de fundo), não a mudes instantaneamente. Leva X segundos para fazer essa mudança de forma suave." A propriedade transition é um atalho para quatro propriedades: transition-property : Qual propriedade queremos animar ( all , background-color , width , etc.). transition-duration : Quanto tempo a animação deve dura...
Enviar um comentário
Ler mais

Formulários Bonitos com CSS: O Guia para Estilizar Inputs

 Olá, equipa! Na aula passada, construímos a estrutura do nosso formulário de contato. Ele funciona, mas sejamos honestos: é feio. Ninguém se sente inspirado a preencher um formulário com a aparência dos anos 90. A boa notícia é que não precisa de ser assim. Hoje, vamos pegar nesse esqueleto HTML e vesti-lo com o poder do CSS. Vou mostrar-vos como estilizar cada parte do nosso formulário — os campos de texto, as etiquetas e os botões — para que ele fique limpo, moderno e convidativo. Parte 1: A Estrutura Base e o Espaçamento Primeiro, vamos dar ao nosso formulário um contentor e algum espaço para respirar. No nosso estilos.css , vamos adicionar o seguinte: CSS form { max-width : 600px ; /* O formulário não ficará demasiado largo em ecrãs grandes */ margin : 40px auto; /* Centra o formulário na página com margem em cima/baixo */ padding : 20px ; background-color : #ffffff ; border-radius : 8px ; box-shadow : 0 4px 8px rgba ( 0 , 0 , 0 , 0.1 ); } form ...
Enviar um comentário
Ler mais