Schedule > Write your first HTML Page

Today's Slides

1. Configure your computer

Download and install Visual Studio Code (VS Code): https://code.visualstudio.com/ This does not need to be done if you are working on a lab computer – just if you’re working on your laptop. From within VS Code, install the “Live Server” plugin (Sarah will walk through this).

2. Organize your files

Now that you’re taking a computer science class, it’s important to think about where you’re storing your files. Please do the following EXACTLY as specified:

  1. Create a course folder called mser521 somewhere on your computer. Many people store theirs in Documents or on their Desktop.
  2. Create a intro-html folder inside of your mser521 folder.

Today, you will be creating new files inside your intro-html folder When you’re done, your file structure should look something like this:

mser521
    └── intro-html

3. Create an index.html file

  1. Open VS Code

  2. Click the “File” menu (top left) and select/click “Add Folder to Workspace…” Then, navigate to your mser521 folder (wherever you saved it), select it, and click the “Add” button (i.e., add the whole folder).

    When you’re done, you should see all of the folders you just made in the left-hand panel.

  3. Finally, right-click the lecture03 folder and select “New File…”

  4. Name the new file index.html (all lowercase, no spaces).

4. Add code to your index.html

  1. Change the title of your webpage
  2. Add a heading and a paragraph element (in the “body” section): https://mser521.github.io/fall2025/resources/html-text
  3. Add 3 image tags (in the “body” section): https://mser521.github.io/fall2025/resources/html-images
  4. Add a list (in the “body” section): https://mser521.github.io/fall2025/resources/html-composite-tags

5. If you have time (Recommended)

  1. Create a second HTML page called page2.html
  2. Add a hyperlink (relative path) that links from index.html to page2.html
  3. Add a hyperlink (relative path) that links from page2.html to index.html
  4. Refer to: https://mser521.github.io/fall2025/resources/html-linking