You are on page 1of 2

CMPT 165 Page 1 of 2

Weekly exercise #1

Weekly Exercise #1
Start by getting the software you need: you can find instructions and links in the Study
Guide software section. (http://www.cs.sfu.ca/CourseCentral/165/common/study-
guide/content/sw.html). You will need a text editor (such as Notepad++, not Word!) and
secure file transfer program for this exercise. You should also be using either Chrome or
Firefox as your web browser to test your page.

Create an HTML File


In your text editor, copy-and-paste this template for an HTML file. Save it as ex1.html. You
are recommended to save it in some directory other than the desktop, for example in a
directory that you could name cmpt165.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
</body>
</html>

Video tutorial: CMPT 165: Working with text files.


(https://www.youtube.com/watch?v=rmLBTsKM4GA )

Use either Chrome or Firefox to open this file. If you are using Windows oyucan view your
file from the file explorer, and open with one of your browsers (you can also bring up the
opening dialog right clicking on the file).

If you have menus visible (which is a browser setting), you can select the File menu → Open
File… → select your ex1.html. Or you can press ctrl-O (Windows/Linux) or ⌘-O (OSX) to
bring up the opening dialog and select your ex1.html. You are now seeing this page (with
essentially no content) locally in your browser.

Add some actual content to the page.

The topic can be whatever you wish as long as it is your own and respectful. There should
be enough content that one can see that you are using the HTML tags properly, but you
shouldn't need to write more than a few lines to do that.
CMPT 165 Page 2 of 2
Weekly exercise #1

In the text editor, fill in the <title> and in the <body>, add:

o an <h1> element with the same text as your <title>.


o a few paragraphs (<p>).
o Include at least one element of <dfn>, <code>, or <strong>. Find it in the HTML tag
reference (https://developer.mozilla.org/en-US/docs/Web/HTML/Element ) and
look at the reference page for that tag to learn the type of content it is supposed to
hold. Use it for some (appropriate) content on the page. (All of these tags should go
inside a paragraph.)

In the web browser, reload the file (ctrl-R or ⌘-R or the reload button ↻) to see your
changes. You are still seeing your page locally here.

Upload to the Server


Open up your secure file transfer program and make a SFTP (or SSH File Transfer or SCP:
those are all synonyms) connection to the course web server, cmpt165.csil.sfu.ca. Log in
with your usual SFU username and password. (E.g. Cyberduck or other that you may have
downloaded)

Instructions: Uploading Files (http://www.cs.sfu.ca/CourseCentral/165/common/study-


guide/content/tech-upload.html ) in the Study Guide. Video tutorial: CMPT 165: Uploading
Files. (https://www.youtube.com/watch?v=oTQiGJ2E_ig )

Upload the file into the public_html directory in your home directory in the server:
double-click public_html and upload the file in there.

Once it's uploaded, you should be able to go to a URL to see your page (this time you will
get your page via the internet, as opposed to locally). The URL would be something like the
following (substituting your username for “userid”) and see your HTML page.

http://cmpt165.csil.sfu.ca/~userid/exercises/ex1.html

Submitting
Additionally to uploading your files in the CMPT 165 server you need to submit in
Canvas your URLs or they will not be marked. Submit the URL of this HTML page to the
Canvas Weekly exercises, Exercise 1.

Acknowledgements
This exercise is based on Greg Baker’s CMPT 165 Distance Education course materials.