Estrutura de Pastas em HTML e CSS

O html é uma línguagem de marcação.

O objectivo banal do html é a definição de elementos na página, este definição vai mais além quando introduzimos conceitos de relação entre elementos e aprimoramos as caracteristicas de cada tag.

A escolha entre um elemento varia da exigência que existe no contexto.

Se a escolha é por exemplo, levar o utilizador para algum lado, leva-nos a escolher entre o <button></button> e um <a/>.

Não quer isto dizer que outros elementos não poderão fazer o mesmo, mas depende da forma como o devemos, ou não, utilizar.

O html já tem formas nativas de reproduzir alguns comportamentos com os quais não há necessidade de aplicar métodos de JS

A semântica em HTML é uma prática fundamental para programadores, pois refere-se à utilização correta das tags HTML para transmitir o significado e a estrutura adequada do conteúdo de uma página web.

O uso adequado da semântica em HTML não só melhora a acessibilidade para os utilizadores com deficiências visuais ou tecnológicas, mas também ajuda os motores de busca a entenderem e indexarem melhor o conteúdo das páginas, o que pode resultar num melhor posicionamento nos resultados de pesquisa.

Alguns dos princípios básicos da semântica em HTML incluem:

• Utilização apropriada das tags: Usar as tags HTML apropriadas para representar o tipo de conteúdo presente na página, como <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, entre outras.
• Descrição clara do conteúdo: Assegurar que o conteúdo dentro das tags HTML seja descrito de forma clara e precisa, utilizando elementos como <h1> a <h6> para cabeçalhos, <p> para parágrafos, <ul> e <ol> para listas, entre outros.
• Evitar uso indevido de tags: Evitar o uso indevido de tags HTML apenas para estilização visual, como o uso excessivo de <div> em vez de elementos semânticos apropriados.
• Utilização de atributos semânticos: Usar atributos semânticos, como alt para imagens, title para fornecer informações adicionais sobre elementos interativos, e aria-label para descrever a função de elementos para utilizadores de tecnologias assistivas.

Ao seguir os princípios de semântica em HTML, os programadores podem criar páginas web mais acessíveis, compreensíveis para máquinas e, consequentemente, melhorar a experiência do utilizador e a visibilidade nos motores de busca.

Os atributos em HTML são componentes fundamentais para os desenvolvedores web, permitindo adicionar informações adicionais e comportamentos aos elementos HTML. Três desses atributos, `id`, `class` e `datasets`, desempenham papéis importantes na estruturação e funcionalidade das páginas web.

O atributo `id` é utilizado para identificar de forma única um elemento HTML numa página. Deve ser usado de forma cuidadosa e apenas uma vez por página para garantir a unicidade. Por exemplo, um elemento pode ser identificado com o `id="header"`, enquanto outro pode ter o `id="footer"`, permitindo referenciar estes elementos de forma única e consistente através de CSS ou JavaScript.

O atributo `class` é utilizado para agrupar elementos que têm características semelhantes, permitindo aplicar estilos CSS e comportamentos JavaScript a vários elementos de uma só vez. Ao contrário do `id`, o atributo `class` pode ser aplicado a múltiplos elementos na mesma página.

Os atributos `datasets` permitem adicionar dados personalizados aos elementos HTML, facilitando a interação com JavaScript e CSS. Estes atributos são prefixados com "data-" e podem conter qualquer tipo de informação relevante para a aplicação web. Por exemplo, podemos adicionar o atributo `data-user-id="123"` a um elemento para armazenar o ID do utilizador associado, ou `data-price="19.99"` para indicar o preço de um produto.

A utilização cuidada destes atributos contribui para uma melhor organização do código HTML, promovendo a reutilização e manutenção do mesmo. Ao atribuir um único `id` a cada elemento, utilizar `class` para agrupar elementos com características semelhantes e `datasets` para armazenar dados adicionais relevantes, os desenvolvedores podem criar páginas web mais estruturadas e funcionais, facilitando também o trabalho com JavaScript e CSS.

Num projeto organizado de HTML e CSS, a estrutura de pastas é fundamental para manter o código acessível e facilitar a manutenção. Uma estrutura básica pode ser:

projeto-html-css/
├── index.html
├── about.html
├── contact.html
├── css/
│   └── styles.css
├── js/
│   └── script.js
├── images/
│   └── logo.png
└── pages/
    ├── services.html
    └── team.html
			

• index.html: A página principal do site.
• about.html: Uma página sobre o projeto ou a equipa.
• contact.html: Página de contacto.
• css/: Pasta onde são guardados os ficheiros de estilos CSS.
• js/: Pasta onde são guardados os ficheiros JavaScript (opcional).
• images/: Pasta para armazenar as imagens usadas no projeto.
• pages/: Pasta com páginas adicionais, como services.html e team.html.

A tag <a> permite criar links para navegar entre diferentes páginas HTML dentro do projeto. Ao configurar os links corretamente, o utilizador pode navegar pelas diferentes páginas com facilidade.

Exemplos de Navegação:

• <a href="index.html">Página Inicial</a> - Link para a página inicial.
• <a href="about.html">Sobre</a> - Link para a página sobre.
• <a href="contact.html">Contactos</a> - Link para a página de contactos.

Dentro de cada página, é possível adicionar uma barra de navegação comum para facilitar a transição entre as páginas. Por exemplo:

Quando o projeto tem uma estrutura de pastas com múltiplos níveis, como `pages/`, podemos usar `../` e `./` para navegar entre esses níveis.

Exemplos:

• <a href="./team.html">Equipa</a> - Link para outra página no mesmo nível, ou seja, `pages/team.html`.
• <a href="../index.html">Página Inicial</a> - Link que sobe um nível para aceder à página principal `index.html`.
• <a href="../contact.html">Contactos</a> - Link para uma página fora da pasta `pages/`, subindo um nível.

Exemplo de uma barra de navegação numa página dentro da pasta pages/: