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: login to your server with FileZilla

Launch FileZilla and connect to your account on the correct server

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

Save the information needed 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

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.
  6. Then you’ll see a default index.html file. We’re going to over-write that page later (but not tonight).
    FTPindex page

 

We are not going to change the default index.html page (right now, anyway) because we don’t want our in-work code to be public. Instead, we will create a new folder or directory, called hcde532, for our course files.

Create a new folder, hcde532, at “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. This is where we will save tonight’s index.html file.
    filezilla

 

 

Step two: create a new HTML5 page with Brackets

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

Launch Brackets (instructions for BBEdit).

  1. Right-click the Getting Started folder to access a different folder
    brackets
  2. Navigate to your hcde532 folder, which is empty
    brackets
  3. Create a new file by using a keyboard shortcut (CMD/CTRL+N) or the File menu
    brackets new
  4. We can now see an untitled working file in the hcde532 folder
    brackets new file
  5. Before going any further, let’s save this file and name it index.html. (CMD/CTRL+S)
    brackets save as
  6. Notice this is a naked file. We’ll add an extension later that will make it easy to pick the file type.

Let’s create a basic HTML5 template. Copy the code snippet below and paste it into your index.html document; then change “Kathy’s” to your name and save. To copy, mouseover the code snippet and then click the “copy” icon, then use CMD/CTRL+C to copy.

code snippet copy
Mouseover the code snippet to see the Copy icon.

 

Step three: add some content

Let’s add content to the index.html file between the body tags.

Make sure your headings are nested in an outline format. Use HTML Lorem Ipsum (just like dummy print layouts!). There’s an extension for Brackets that makes adding lorem ipsum content a snap; we’ll add it later.

Feel free to copy&paste this snippet, which provides an example of basic HTML tags:

Step four: upload the file to the server and test

  • Once you have finished editing your file, “save as” index.html
  • Drag-and-drop the index.html file from your computer to the server – make sure you put it in the hcde532 folder! If you get a warning about over-writing a file, you’re in the public_html folder, not the hcde532 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://student.washington.edu/yournetid/hcde532 or http://staff.washington.edu/yournetid/hcde532 (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

NOTE: There is an extension allows us to FTP from inside Brackets. For now, however, I’d like us to use FileZilla.

 

Step five: 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, “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?

 

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