How Website Files Connect

AMDE 155 · Introduction to Web Design · 20-minute lab

Build a one-page site on your computer, connect a stylesheet and a photo, then move a file and fix the broken link. You’ll need a code editor, a browser, and a JPEG you can copy into the project.

1. Show file extensions

• Windows 11: In File Explorer, choose View → Show → File name extensions.
• Mac: In Finder, choose Finder → Settings → Advanced and turn on Show all filename extensions.

Check the full name of each file. A file named index.html.txt ends in .txt. If it contains plain-text HTML code, rename it to index.html.

2. Create the page

1. Create a folder called path-lab somewhere you can find it again.
2. Open the folder in your code editor. Create index.html and style.css directly inside it.
3. Paste this into index.html and save.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Path Lab</title>
  </head>
  <body>
    <h1>Path Lab</h1>
  </body>
</html>

Open index.html in your browser from Finder or File Explorer. You should see the heading Path Lab.

3. Connect the stylesheet

In style.css, add this rule and save.

body {
  background: lightblue;
}

In index.html, add this line just before </head>.

<link rel="stylesheet" href="style.css">

Save and refresh. The background should turn blue. The value of href tells the browser to look for style.css beside index.html.

4. Break the link and repair it

1. In Finder or File Explorer, create a css folder inside path-lab.
2. Move style.css into css. Predict what will happen, then refresh. The blue background should disappear.
3. Start in the folder containing index.html. To reach the stylesheet now, open css and find style.css.
4. Replace the old link with the one below. Save and refresh. The blue background should return.

<link rel="stylesheet" href="css/style.css">

5. Connect an image

1. Create an images folder inside path-lab, beside css.
2. Copy a JPEG into images and name the copy photo.jpg. If you use a PNG, keep the .png extension and update the code to match.
3. Paste the line below after the heading. Replace the sample alt text with a short description of your own photo.
4. Save and refresh. Check that the photo appears and the background stays blue.

<img src="images/photo.jpg" alt="A tree in snow">

Check your project folder

path-lab/
  index.html
  css/
    style.css
  images/
    photo.jpg

With a partner, take turns reading each path aloud. One person says where to start and which folder to open. The other points to each folder and file. If something fails to load, check the full filename, spelling, and capitalization, then confirm you saved and refreshed the same copy you edited.

Exit ticket

The page is named index.html.txt. The photo is inside the images folder, but the image tag says src="photo.jpg". Write the corrected HTML filename and the corrected src value.