Exercise 1: HTML Basics

In this exercise you will use HTML to build the skeleton of your personal sandbox webpage. This will serve as a space for you to experiment with each new exercise and will link to your two main projects and process documents/case study. We will work with this file in our next exercise adding styles using CSS.

Step 1. Access Western’s Network from home via a VPN (Virtual Private Network)

Carefully follow the instructions under Installation Section at this link: https://atus.wwu.edu/kb/vpn-virtual-private-network.

Step 2. Connect to the U-Drive.

  • After you have connected from home using the downloaded Cisco AnyConnect client from the previous step, you need to connect to the U-Drive to be able to upload your web files. 
  • On a Mac, Go to Finder, then select Go > Connect to server from the top menu or just select Command+K from Desktop
  • Enter smb://msfs-student.univ.dir.wwu.edu/stu/username, replacing username with your actual user name (e.g. morrowk2).
  • For PC users or if you are having trouble get help here: https://atus.wwu.edu/kb/how-connect-networked-drives. 

Step 3. Create root folder on your U-Drive

  • In your U-drive, make a folder called myweb (all one word and lowercase) if there isn’t already one. In that folder, make another folder called 360. Create 3 sub folders in the 360 folder: images, project-1, and project-2. Your sandbox files will be saved here. You will later be able to view the published files by going to http://myweb.students.wwu. edu/username/360 in a web browser. Again, make sure to replace username with your actual user name (e.g. morrowk2).

Step 4. Open a new .html document in your text editor, preferably Visual Studio Code. Before you begin, save the file in your 360 site root folder and name it index.html.

Step 5. Setup the basic html document structure including the following tags (Refer to Basic HTML Structure for help on correct nesting/order) :

<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>

Step 5.1. The content of the web page needs to include. This content will be wrapped in the html tags below in Step 5.2:

  1. your name
  2. course title
  3. quarter and year
  4. navigation links:
    1. Project 1
    2. Project 1 Process
    3. Project 2
    4. Project 2 Process
  5. image of your choice
  6. 150 word bio
  7. copyright and email address 

Step 5.2. Technical requirements to contain previous content includes the following markup:

  1. header (use the header tag to place your name and class info) <header></header>
  2. nav and unordered list (for navigation links. remember to nest these inside each other. for example, the unordered list goes inside the nav tags and the list items go inside the unordered list tags) <nav></nav>,<ul></ul>,<li></li>
  3. anchors for your links (place the web address between the opening and closing anchor tags):
    <a href="project-1/index.html"> </a>
    <a href="project-1/processdoc.pdf"> </a>
  4. div (use the div tag to contain your bio paragraph and image. You can include multiple div tags for the different sections of content on the page): <div></div>
  5. headings and paragraphs (use these tags throughout to provide hierarchy in type): <h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6>, <p></p>
  6. image (should represent you or the subject of the class. Go to Export > Save For Web in Photoshop to optimize/save a smaller file size. Put your image in the images folder you created in the 360 folder.)
    <img src="images/nameofimage.jpg"/>
  7. line break (to provide space between sections before we start using CSS. This is really only used in these early exercises. Once we use CSS, we can add spacing more accurately and won’t need to use this tag as much): <br>
  8. horizontal rule (to create horizontal lines between sections before we start using CSS): <hr>
  9. footer (use a footer tag to contain your copyright and email address info. remember you can nest text-related tags in here around your type to control their style. For example, <h4></h4> or <p> </p>)  <footer></footer>

The HTML version of your site is still undressed, so it will be super ugly! Let’s see how some of these past sandboxes looked after they styled them up a bit.

Past Student Examples:

DUE NEXT CLASS