Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
Gabriel Almeida1998

HTML Estou tendo problemas em inserir imagens no HTML5.

Recommended Posts

Postado (editado)

Ola, espero que possam me ajudar!

Eu criei as pastas certinhas com diretórios específicos e inserir o enderenço da imagem  no código HTML5 na seguinte forma <img src="foto\HTML-Progressivo.png">, ate então tudo bem mas quando eu abro qualquer navegador para testar a imagem aparece quebrada, aparece somente um ícone de quebrada mas não a imagem.

 

Obs: Sistema Operacional Win 10

 

Código que estou usando para testar. 

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <title>Curso de HTML5</title>
        <meta charset="UTF-8" />
        <style>
            h1 {font-family:arial;
                font-size:30pt;
                color:blue;
                text-shadow:2px 2px 20px black;
            }
        </style>
    </head>
    
    <body>
        <h1>Olá. Mundo!</h1>
        <h2>Me livrando da maldição.</h2>
        <h1>Oba, Me livrei!</h1>
        <img src="\foto\HTML-Progressivo.png">
    </body>
</html>

 

Outras formas que utilizei.

<img src="foto\HTML-Progressivo.png" />

<img src="foto/HTML-Progressivo.png" />

<img src="C:\Users\Gabriel\Pictures\Teste\HTML-Progressivo.png " />

<img src="C:\Users\Gabriel\Pictures\Teste\foto\HTML-Progressivo.png " />

   <img width="320" height="54" border="solid" src="foto/HTML-Progressivo.png" alt="HTML-Progressivo.png" />

 

fiz testes ,(usando as barras \  / ) e deixando o final sem fechar , a unica forma que funcionou foi utilizando uma imagem da 

internet através do endereço URL mas com imagens do meu computador não consegui. 

Obrigado pela atenção espero que possam me ajudar ,esperando ansiosamente uma resposta.

 

 

Editado por Gabriel Almeida1998
Botão CODE <>

Compartilhar este post


Link para o post
Compartilhar em outros sites
Postado (editado)

@Gabriel Almeida1998 Eu acho que faltou especificar o tamanho, tipo assim 

<img width="1280" height="720" src="foto\HTML-Progressivo.png" />
adicionado 1 minuto depois

Ao menos foi o que eu fiz no meu, http://fazendomuitascoisas.com.br, mas é apenas um chute, mesmo porque sei bem pouco de html

Editado por DiF
Botão CODE <>
  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ola FFmarini, já tentei aparece um quadrado com o incone sinalizando que a imagem 

esta quebrada utilizei alt="" também.

Compartilhar este post


Link para o post
Compartilhar em outros sites
Postado (editado)

@Gabriel Almeida1998 Olá,  Seja bem vindo em nosso Clube do Hardware.

 

Então, pelo que eu vi você está errando o caminho da imagem.

 

Se o arquivo está no root(raiz) você coloca direto o nome da imagem.

Se o arquivo está dentro de uma pasta e esta pasta está no root, você precisa setar a pasta onde está.

Se o arquivo está dentro de uma pasta, mas esta pasta de está dentro de outra pasta que está no root, você precisa setar o caminho relativo com com  ../

 

E sim, no html você deve usar a barra normal e não a contra-barra.

 

Veja o seguinte exemplo:

Raiz(/)
  |
  |-|imagens
  |     |-imagem.png
  |
  |-index.html

Você acessa esta imagem assim:

<img src="imagens/imagem.png"  alt=""/>

 

Agora este exemplo:

Raiz(/)
  |
  |-|imagens
  |     |-grandes
  |     |    |-imagem.png   
  |     
  |-index.html

Você acessa assim:

<img src="../grandes/imagem.png"  alt=""/>

Porque o arquivo está dentro de uma pasta, que esta pasta está dentro de outra.

Você aumenta o número de ../  quando há mais pastas em níveis acima.

 

Dica,  experimente usar o inspecionador de elementos do navegador com o F12. inspecione o elemento da imagem e verá que ele está "quebrado" porque ele não consegue achar o caminho que você colocou.

 

 

Referência para você ler: https://www.w3schools.com/html/html_filepaths.asp

 

Editado por DiF
  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá DiF, obrigado acho que estou chegando la , mas você poderia me mostrar como 

eu aplico isso ao código , como devo escrever nele pra assear a imagem em questão

sou iniciante ainda se não for pedir muito. Muito obrigado!Em aguardo. 

 

Muito Obrigo DiF! Consegui valeu pelas dicas, tudo certo, agora continuar os estudos valeu!  

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário






Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×