Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Não foi possivel aceder ao seu ficheiro

Oi gente, então, eu criei o HTML about.html e coloquei no href da âncora, mas quando eu vou ao site e clico no sobre mim aparece que "não foi possível aceder ao seu ficheiro".

Imagem dos diretórios de arquivos do projeto

Imagens dos arquivos abertos no VSCode e a organização dos arquivos

Imagem do navegador com o erro

  <header>
    <nav class="classe-nav-ancoras">
      <a class="classe-home" href="index.html">Home</a>
      <a class="classe-sobre-mim" href="about.html">Sobre Mim</a>
    </nav>
  </header>
1 resposta
solução!

Opa Lucas! Tudo ok contigo?

Pelas imagens que você enviou eu consegui entender que você criou uma pasta chamada index.html e dentro dessa pasta temos 2 pastas e 2 arquivos, sendo elas:

  1. Pasta assets;
  2. Pasta html;
  3. Arquivo about.html;
  4. Arquivo style.css.

Correto? E dentro da pasta html temos um arquivo chamado index.html, correto?

Bom, se for isso, então para resolver siga esses passos abaixo:

  1. Mude o nome da pasta que engloba todos esses arquivos e pastas que listei antes. Ou seja, mude o nome da pasta index.html para algo que identifique o projeto, algo como, por exemplo, "Meu primeiro projeto em HTML e CSS" ou talvez "Nome do que você vai criar", por exemplo, se for um portfólio "Meu portifólio", se for uma página para uma barbearia pro exemplo "Barbearia do Lucas" ou algo nesse sentido. Algo que identifique o projeto;
  2. Feito isso, agora você vai pegar o arquivo about.html e vai MOVER ele para DENTRO da PASTA html;
  3. Depois você vai mover o arquivo index.html para FORA da PASTA html, vai deixar ele no mesmo diretório que a pasta de assets e a pasta html e o arquivo style.css;
  4. Após isso tudo você vai abrir o arquivo index.html e vai procurar a tag <nav> e dentro dela você vai substituir o conteúdo dela por esse:
    <nav class="classe-nav-ancoras">
        <a class="classe-home" href="./index.html">Home</a>
        <a class="classe-sobre-mim" href="./html/about.html">Sobre Mim</a>
    </nav>
    
  5. E só então, após alterar o conteúdo da tag <nav> do arquivo index.html, você vai abrir o arquivo about.html e SUBSTITUIR o conteúdo da tag <nav> dele também, mas dessa vez por esse OUTRO código abaixo:
    <nav class="classe-nav-ancoras">
        <a class="classe-home" href="../index.html">Home</a>
        <a class="classe-sobre-mim" href="./about.html">Sobre Mim</a>
    </nav>
    
  6. E assim a navegação deverá funcionar perfeitamente, e quando você ativar a extensão "Live Server" ela irá saber que deve buscar o arquivo index.html que agora após todas essas mudanças, está na raiz do projeto, onde ele deve ficar até o final.

Era isso, se você não entendeu algo que fiz eu vou explicar de forma breve:

  • Do comando 1. até o 3. eu lhe guiei a organizar os nomes dos arquivos e mostrei onde eles devem ficar;

    OBS Importante: Todos os outros arquivos HTML que você criar, como por exemplo, um minhas-experiencias.html ou talves meus-contatos.html, ou outros arquivos HTML que você queira adicionar no projeto devem ficar dentro da pasta html, assim como o arquivo about.html.

  • O 4. e 5. foram para arrumar a paginação do seu projeto, assim agora o arquivo index.html referência a si mesmo no botão Home e no Sobre Mim ele referencia a página html/about.html, e o contrário ocorre com a página about.html, dê uma olhadinha com calma que você vai entender. E se tiver dúvidas é só me chamar.

Chegamos ao fim. Se precisar me chame.

Abraços e bons estudos.

Caso este post tenha lhe ajudado, por favor marque ele como solução! ✓