Skip to content

Instantly share code, notes, and snippets.

@Buildsoftwaresphere

Buildsoftwaresphere/File Path

Created March 10, 2016 14:24
Show Gist options
  • Save Buildsoftwaresphere/76a2623e0a1b3071b783 to your computer and use it in GitHub Desktop.
Save Buildsoftwaresphere/76a2623e0a1b3071b783 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
File Path
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<img src="" alt="My test image">
</body>
</html>
@Buildsoftwaresphere
Copy link
Author

Copy the image you chose earlier into your images folder.
Open up your index.html file, and insert the following code into the file exactly as shown. Don't worry about what it all means for now — we'll look at the structures in more detail later in the series.
The line My test image is the HTML code that inserts an image into the page. We need to tell the HTML where the image is. The image is inside the images directory, which is in the same directory as index.html. To walk down the file structure from index.html to our image, the file path we'd need is images/your-image-filename. For example, our image is called firefox-icon.png, so the file path is images/firefox-icon.png.
Insert the file path into your HTML code between the double quote marks of the src="" code.
Save your HTML file, then load it in your web browser (double-click the file). You should see your new webpage displaying your image!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment