HTML 1 – Making a Home Page

Activating your publish space

Western provides us with personal space on their “publish” web servers. You have to fill out an online form using your UWO username and password to activate your webspace. We’ll do this first, so that we can make our page “live” at the end of the tutorial.

Create a folder for your website

Use the finder to create a folder for your website. Let’s call it “yourname_exercises” (and use your own name to replace “yourname”. Open up that folder, and create another folder inside it called “images”.

Download a “starter” page

Rather than start from scratch, we’ll download this HTML5 boilerplate.

To download the page, just right-click on the link and “save link as”.

Navigate to the “yourname_exercises” folder and click on it. Save it as “index.html” in your “yourname_exercises” folder.

You can also click on the link to open the page, and right-click (ctrl-click) on the page itself. In the dropdown, click on “save as” (Chrome) or “save page as” (Safari).

When you do, it’s important to ensure you save as an html file, not as an archive. In Chrome change the pulldown, to Webpage, HTML only, like this:

In Safari, you’ll see it here, as Page Source:

Next, download the most awesome picture on the internet (below), and save it in your “images” folder

Let’s mark this up!

Follow along with the tutorial in class.

We’ll use Brackets to code this directly. (You can download Brackets to your own computer here, btw.)

Tags we’ll use:

  • Headings
  • Paragraphs
  • Breaks
  • Links
  • Images
  • Lists

We’ll also look at a few attributes that go with the tags.

Let’s publish it!

We’ll use an FTP client to upload the website to the Western server. Think of the server as another computer that we need to save the files to, in order to get them on the web. We use the FTP client to “save” the file to this server.

Server settings
  • Server Name: Publish Server
  • Address:
  • Port: 22
  • Username: your Western email prefix
  • Password: your Western email password
  • Site Root: /public_html

Check it online

Your new page will be located at

Western University: Faculty of Information & Media Studies

Powered by WordPress. Designed by WooThemes