2

I am new to HTML. Using www.Codepen.io website, I created a website using HTML to produce a couple of .png pictures, headers and paragraphs. But unfortunately, everything in the website is generating but the pictures. I am not sure why. Do we need to have the .png files in the same area as where the .html file is located? If we do need to save the .html file from Codepen, how do we do so? Am i doing something wrong while writing the script?

Please see attachment for reference: website screenshot

<div>
 <h1>Rohit's page of Interests</h1>
 <img src = "/Users/Roys_laptop/Desktop/Java/java_logo.png" id = "Java logo" />
 <p>My aim is to become a Java Developer one day.</p>
</div>
<div>
 <h1>My Interests</h1>
 <img src = "/Users/Roys_laptop/Desktop/Java/nfl_logo.png" id = "NFL 
  logo" />
 <p> I am a very big football fan. I love and root for the Cinncinnati 
  Bengals </p>
 <img src = "/Users/Roys_laptop/Desktop/Java" id = "Cinncinnati Bengals" />
</div>
Priyanka
  • 169
  • 3
  • 10
Roy
  • 73
  • 2
  • 8

1 Answers1

2

It appears as if you are trying to grab images from your computer to display. Your images need to be hosted somewhere on the internet in order for them to be viewed.

Codepen.io does offer asset hosting, but only if you have a Pro membership. This link goes into that with more detail: https://blog.codepen.io/documentation/pro-features/asset-hosting/

Images do not need to be in the same location as an html file. It is common practice in web development to give images their own folder so all images are in the same location. This thread discusses best practice for site structure.

As for how to actually link the image, this thread discusses that in detail.

Lisa
  • 323
  • 3
  • 14