Organização é Poder: Como Gerir Imagens Locais e Ficheiros CSS

 Olá, equipa! Sejam bem-vindos de volta à nossa oficina de código.

No último artigo, construímos um website de três páginas com um menu de navegação. Foi um avanço gigante! Mas, se reparaste bem, o nosso método de trabalho tem dois problemas:

  1. Estamos a usar uma imagem de um link externo. Se o link falhar, a nossa imagem desaparece.

  2. Tivemos que copiar e colar todo o nosso código CSS em cada um dos três ficheiros HTML. Imagina se tivéssemos 50 páginas? Seria um pesadelo para manter!

Hoje, vamos resolver estes problemas e aprender a organizar o nosso projeto como um verdadeiro profissional.

Parte 1: A Estrutura de Pastas Profissional

A organização é a chave para evitar dores de cabeça no futuro. Vamos criar uma estrutura de pastas para o nosso projeto.

  1. No teu Ambiente de Trabalho ou na tua pasta de Documentos, cria uma nova pasta e chama-a de meu-primeiro-site.

  2. Dentro desta pasta, move os teus três ficheiros: index.html, sobre.html e contato.html.

  3. Agora, dentro da pasta meu-primeiro-site, cria uma nova pasta chamada imagens.

A tua estrutura deve estar assim:

 ./meu-primeiro-site/ 

  ____./|-- index.html |

 _____./-- sobre.html |

  _____./-- contato.html |

  _____./-- imagens/

Parte 2: Usando as Nossas Próprias Imagens (Imagens Locais)

Agora, em vez de um link da internet, vamos usar uma imagem do nosso computador.

  1. Encontra uma imagem que gostes no teu computador (uma foto tua, uma paisagem, etc.).

  2. Copia essa imagem e cola-a dentro da tua nova pasta imagens. Para este exemplo, vamos supor que o nome do ficheiro é minha-foto.jpg.

  3. Abre o teu ficheiro index.html no VS Code.

  4. Encontra a tag <img> que tínhamos antes.

  5. Agora, muda o atributo src para apontar para o nosso ficheiro local.

O código vai ficar assim:

<img src="imagens/minha-foto.jpg" alt="Uma descrição da minha foto">

Por que isto funciona? O src="imagens/minha-foto.jpg" diz ao navegador: "A partir da localização deste ficheiro HTML, entra na pasta 'imagens' e procura pelo ficheiro 'minha-foto.jpg'". Isto chama-se um "caminho relativo".

Parte 3: Centralizando o Estilo com um Ficheiro CSS Externo

Agora, vamos resolver o problema do código CSS repetido. Vamos seguir o princípio "DRY" (Don't Repeat Yourself - Não te Repitas).

Passo 1: No VS Code, cria um novo ficheiro e guarda-o dentro da tua pasta meu-primeiro-site com o nome estilos.css.

Passo 2: Abre um dos teus ficheiros HTML (por exemplo, index.html), seleciona e recorta (Cut) todo o código que está entre as tags <style> e </style>.

Passo 3: Cola (Paste) esse código que recortaste dentro do teu novo ficheiro estilos.css e guarda-o.

Passo 4: Agora, volta ao teu index.html e apaga completamente o bloco <style> ... </style>. Ele já não é necessário aqui.

Passo 5: A Ligação Mágica No lugar onde estava o bloco <style>, vamos adicionar uma única linha de código que vai "puxar" todo o nosso estilo do ficheiro externo. Dentro do <head>, adiciona a seguinte linha:

<link rel="stylesheet" href="estilos.css">

O atributo href="estilos.css" diz ao navegador para procurar um ficheiro com esse nome na mesma pasta e aplicar todas as regras de estilo que encontrar lá dentro.

Passo 6: Repete para as outras páginas Agora, vai aos teus ficheiros sobre.html e contato.html, apaga o bloco <style> de cada um e substitui-o pela mesma linha <link rel="stylesheet" href="estilos.css">.

E pronto! Agora, todo o teu estilo está centralizado num único ficheiro. Se quiseres mudar a cor do menu em todas as páginas, só precisas de editar o estilos.css num único sítio!

Conclusão

Que evolução! Hoje aprendemos a organizar os nossos projetos numa estrutura de pastas limpa, a usar as nossas próprias imagens locais e, o mais importante, a centralizar o nosso CSS num ficheiro externo. Estas são práticas fundamentais que todos os desenvolvedores profissionais usam.

Comentários

Enviar um comentário

Mensagens populares deste blogue

O Box Model do CSS: O Guia Definitivo de Margin, Border e Padding

 Olá, equipa! Preparados para desvendar um dos maiores segredos do CSS? Tudo o que vemos numa página web — um parágrafo, uma imagem, um título — é, para o navegador, uma caixa retangular . Entender como essa caixa funciona, como podemos controlar o seu tamanho e o espaço à sua volta, é o segredo para controlar o layout de qualquer site. Hoje, vamos desvendar o famoso (e por vezes temido) Box Model do CSS . Prometo que, no final desta aula, vais dominar os conceitos de margin , border e padding de uma vez por todas. Os 4 Componentes da Caixa Imaginem um quadro com uma fotografia na parede. O Box Model funciona exatamente da mesma forma. ` ` Content (Conteúdo): É a fotografia em si. O teu texto, a tua imagem. Padding (Preenchimento): É o espaço em branco (passe-partout) entre a fotografia e a moldura. É o espaço interno da caixa. Border (Borda): É a moldura do quadro. A linha que fica à volta do conteúdo e do padding. Margin (Margem): É o espaço vazio na parede à volta do qua...
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 ...
Ler mais

Crie sua Primeira Página Web em 30 Minutos Usando Apenas HTML e CSS

 Olá e bem-vindo ao Código do Zero MZ ! Sempre teve curiosidade em saber como os websites são feitos? Parece magia, mas garanto que não é. Hoje, juntos, vamos desvendar o primeiro segredo da internet. Neste guia passo a passo, vamos criar a sua PRIMEIRA página web do absoluto zero. E o melhor de tudo? Faremos isso em menos de 30 minutos, usando apenas ferramentas que você já tem no seu computador. Pronto para se tornar um criador da web? Vamos a isso! O Que Você Vai Precisar? Não se preocupe, a lista é muito curta: Um computador ( Windows , Mac ou Linux ). Um editor de texto simples. Vamos usar o Bloco de Notas (Notepad) que já vem instalado no Windows. Um navegador de internet como o Google Chrome ou Firefox . É só isso! Não precisa instalar nada. Parte 1: O Esqueleto da Página (HTML) Toda página web precisa de uma estrutura, um esqueleto. Essa linguagem de estruturação chama-se HTML ( HyperText Markup Language ). Passo 1: Criar o nosso ficheiro Abra o Bloco de Notas no s...
Ler mais