NewtFire logo: a mosaic rendering of a firebelly newt
newtFire {dh|ds}
Authored by: Rebecca J. Parker (rjp43 at pitt.edu | Twitter: @bcpkr396) Edited and maintained by: Elisa E. Beshero-Bondar (ebb8 at pitt.edu) Creative Commons License Last modified: Sunday, 06-Aug-2017 18:15:43 EDT. Powered by firebellies.

Preliminaries

Before beginning this assignment please thoroughly read our tutorials: "Introduction to XHTML (and HTML)" and "Introduction to Cascading Stylesheets (CSS)". It will benefit you to keep these tutorials open while you work on this assignment. To begin, open a new XHTML file in <oXygen/> under File → New → Framework Templates → (scroll to XHTML in the alphabetized list) → XHTML 5. We do not recommend keeping the xml line at the very top, but just the DOCTYPE and the root html element pointing to the xhtml namespace; therefore, the top of your file should look like this:

                     <!DOCTYPE html
  SYSTEM "about:legacy-compat">
<html xmlns="http://www.w3.org/1999/xhtml">
                      
                  

You will also need to open a new CSS file in <oXygen/> under File → New → New Document → CSS.

Analysis of the task

The goal of this assignment is to create a very basic personal webpage. If you view page source on this page you can see examples of how we used headings, paragraphs, lists, an image, and links to other pages within the same directory. You can also view the corresponding CSS and take note of how we linked our CSS with this page. Mac users to view page source we recommend that you use Firefox or Chrome because Safari will require you to change browser preferences to see the page source. In Firefox or Chrome simply right-click and select view page source.

The key components of your first basic webpage that we will be looking for are:

We encourage you to go above and beyond these very basic requirements, and indeed in Exercise 2 we will expect to see a more completed web site.

Viewing your webpage locally

While developing your webpage it is important to consistently check your changes. Follow these three simple steps to open your webpage locally in your web browser:

  1. open your browser
  2. on Windows: control + o
    on Mac: command + o
  3. browse your local file explorer for your webpage

Submitting your work

You are required to save your HTML page(s) and CSS file in your personal webpage Git repository AND move them to your personal web space accounts at newtFire.org on the Pittsburgh Supercomputing Center using an FTP client. Be sure to add, commit, and push your files from your local Git repository to your remote GitHub repository.

A note on mindful file management: We recommend you save your CSS stylesheet in the same directory with your HTML pages, because then you simply need to indicate the filename in the <link> element that sits in the <head> element of each HTML page. The same applies for pages that are linked from other pages. Otherwise, you will need to declare the folder (directory) followed by a / and then the filename. Mindful file management is a key component of creating a well organized website.

By convention, the first page you place in your website folder is designated your index.html page. You don’t have to have an index.html, but if you do, the main page of your site can be abbreviated to the name of the site directory holding the web files, like this one for Dr. Beshero-Bondar’s personal Pitt homepage: http://www.pitt.edu/~ebb8/ . By default, when given that address, the web browser retrieves the index.html file placed in her account’s space, and if it doesn’t find one it generates an error. (The site address leads to exactly the same place as http://www.pitt.edu/~ebb8/index.html .) By assigning any other name to your homepage someone visiting your site is required to call on that specific file/file path to get to your homepage. For this assignment please name your homepage index.html.

Access your personal web space accounts at newtFire.org on the Pittsburgh Supercomputing Center using your preferred file transfer program (FTP client). Move all of your developed HTML pages and your CSS file into the public_html folder. Be sure the file permissions on your main folder allow the group and others to Read and Execute. You (the owner) should be the only one able to write to this directory. The following image shows how to access file permissions and our recommended settings using WinSCP on a Windows machine; however, the setup should be similar on other platforms and in other file transfer programs.

WinScp Changing File Permissions