HCDE 532: Creating (and publishing) your first web page

Lecture > HTML & CSS basics

Now that you have set up your server space, let’s create and publish your first web page (which is going to be a “home” page of sorts).

Step one: create a new HTML5 “section” home page

Create a folder called <hcde532> on your laptop and then a subdirectory <working> (note case). This is where we will save working files.

This is where you want to save these downloads (zip).

HTML 5 template:

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

The snippet below, from the “index-first-home-page.html” document, provides an example of basic HTML tags. You should save this page as ‘index.html’ in the sub-folder ‘working’. Note case! No capitals.

Edit “Kathy” in the index.html document (hcde532 > working > index.html).

<h1>Kathy's First Home Page!</h1>
<h2>Header Level 2</h2>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo.</p>
<p>Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h3>Header Level 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<ul>
<li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li>
<li><a href="#">Aliquam tincidunt mauris eu risus.</a></li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>

Step two: login to UW web server with FileZilla

Launch FileZilla and connect to your account on the correct server

  • Student web publishing is Vergil
    vergil.u.washington.edu 
  • Staff and faculty web publishing is Homer/Ovid
    ovid.u.washington.edu 

Save the information you need to make it easy to access the UW server 

  1. Go to Filezilla > File > Site Manager
  2. Click “New site” and give it a name (“UW” makes sense)
  3. Use the correct “host” (see above) and the settings in the screen capture below
    • Port: 22
    • Protocol: SFTP/SSH
    • Username: NetID
    • Password: NetID Password
    • Directory is under “Advanced” – skip for now 
  4. Click “OK” (this is “save”)
  5. Site Manager will close

Site Manager Settings

Now log in using the Site Manager bookmark.

When you log into your web server with default settings, you will see a “public_html” directory.

  1. Go to Filezilla > File > Site Manager
  2. “UW” should be selected (if not, select it)
  3. Click “Connect”
  4. Enter your password when prompted
  5. Double click the public_html alias to drill down.
    public_html
  6. Now you’ll see a default index.html file. This is your default home page. Don’t overwrite it! Instead, we will create a new folder or directory, called hcde532, for our course files.
    default-home

Create a new folder, hcde532, at the “root” of public_html

  1. Make sure you have double-clicked public_html and can see the index.html file
  2. Right-click anywhere inside the public_html area of the right pane
    filezilla
  3. After you right-click, select “Create new directory”
    filezilla
  4. Then name the new directory “hcde532” (note the case of the name)
    filezilla
  5. You should now have a file and a directory in your public_html folder/directory:
    filezilla
  6. Double-click the hcde532 folder to make it the active folder. Now create four more folders!
    SFtP files
  7. Save tonight’s index.html in the “working” directory. To do that, double-click it to make it the active directory.
    working directory

 

Step three: upload the file to the server and test

  • Drag-and-drop the index.html file from your computer to the server – make sure you put it in the hcde532 > working folder! If you get a warning about over-writing a file, you’re in the public_html folder, not the hcde532 > working folder
    • In the left-hand pane of FileZilla (“local”), navigate to your hcde532 folder
      drag-and-drop
  • Take a peek at the page.
    The url should be http://students.washington.edu/yournetid/hcde532/working or http://staff.washington.edu/yournetid/hcde532/working (depending on your status and the server you have used if you wear both hats)
  • Ugly, isn’t it?
  • Note to Kathy: talk about default server behavior

 

Step four: add an internal style sheet

Cascading style sheets alter the presentation of our content.

We’re going to create an internal style sheet, which lives inside the <head> </head> tags of your index.html file.

Paste this code snippet inside the <head> </head> tags of your index.html file.

  • Once you have finished editing your file in VSB, “save as” index.html
  • Now drag and drop that file from your computer to the server
  • When prompted about over-writing the existing file, say “yes”
  • Does it look the same? (It shouldn’t!)
<style type="text/css" media="all">

* { margin: 0; padding: 0; }

body {
background-color:#FFFFFF;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
}

h1 {
width: 620px;
font-size: 36px;
line-height: 36px;
margin-top: 25px;
margin-bottom: 20px;
margin-left: 50px;
border-bottom: 1px solid #000000;
}

h2 {
width: 620px;
font-size: 24px;
line-height: 24px;
padding-top: 8px;
margin-bottom: 2px;
margin-left: 50px;
}

h3 {
width: 620px;
font-size: 18px;
line-height: 18px;
padding-top: 8px;
margin-bottom: 2px;
margin-left: 50px;
}

p {
width: 620px;
font-size: 16px;
line-height: 24px;
margin-bottom: 10px;
margin-left: 50px;
}

ol, ul {
width: 620px;
font-size: 16px;
line-height: 24px;
padding-left: 40px;
margin-bottom: 10px;
margin-left: 50px;
}

</style>

 

Congrats! You have your first web page up and running. Although this isn’t a home page in the true sense, it is the home page for this directory.

 

Lecture