Final Web Site

Hans-Petter Halvorsen

Web Site

Each student should create a Web Site. The Web Site should briefly present your Lab Work for one of the Lab Assignments. Important! Make sure to include updated work based on the feedback given for the lab you choose for the final website.

 

USN Web Server

You should use the Web Server (web01.usn.no) available at the University. It should be a basic HTML page with title, text, figures, tables, hyperlinks, etc. Styling and formating shall be done using CSS. New! You need to activate and use 2FA to login to the server.

Note! If you have technical issues (login issues, etc.) using web01, you can contact it-support@usn.no for help.

 

GitHub Pages

An alternative to using the USN Web Server is to use GitHub Pages. Here you can host and create static HTML web pages using HTML, CSS and JavaScript. This video on YouTube will get you started: How to Host a Website on Github Pages (YouTube video).

 

Getting Started

The Web Site could have the same structure as a standard technical report/article (IMRaD): Introduction, Problem Description, Material and Methods, Results, Discussions, Conclusions (Summary may be better for a website) and References. Note! that IMRaD only say something about the structure, names of headers can differ from that.

You should include common Web Site/HTML features like Hyperlinks (both internal links to other web pages created by you and link to external web pages), Images, HTML Tables, HTML Lists (ordered and/or unordered), CSS, etc.

The final Web Site should also have an appealing and intuitive user interface. CSS can be used for layout and styling if needed.

You may also include one or more videos, e.g., the video that you already have made and that gives an overview of the system you have developed during the lab work.

Note! The basic rules for writing technical documentation still apply, but also make sure to embrace the web features to make it more interactive, like use hyperlinks if you have a table of contents, use hyperlinks for your references, e.g., your reference like this [1] inside the text can be a hyperlink to the Reference List, etc. Note that you can use hyperlinks both to other pages both you can also use hyperlinks that points to another section in the same web page. You can also have hyperlinks to videos (or embed the video within the page itself), source code, etc. You can also have webpages for each "chapter", etc, e.g., index.html, introduction.html, methods.html, results.html, discussions.html, conclusion.html, references.html.

 

Tip! Pretend that you are creating a real-life system on behalf of a customer or something - don't present it as a school project. Avoid using phrases like "This is a scool project", "I learned a lot from this assignment", etc.

 

USN Web Server Resources

Information about the Web Server (web01.usn.no) + Information about 2FA (New! You need to activate and use 2FA to login to the server)

Your URL will be: https://web01.usn.no/~studentnumber (replace <studentnumber> with your 6 digits number)

For more information: Web Server User Guide (pdf) + Video (YouTube)

Note! If you have technical issues (login issues, etc.) using web01, you can contact it-support@usn.no for help.

 

Tools for Web Site Development

Make sure to validate your Web Site (i.e., do you follow the latest HTML 5 standards?): http://validator.w3.org

 

Video: USN Web Server Overview (web01.usn.no):

Note! You may need to set proper Read/Write Properties for both your root folder and for the public_html folder by right-clicking and select Properties on these folders in your FTP program.

 

Final Web Site Criteria

The Final Web Site should present and give a short overview of your work and results.

In order to get the Final Web Site approved, the web site needs to fullfill the following criteria:

 

HTML

Basic HTML tags are <html>, <title>, <body>, <p>, <h1>, <strong>, <b>, <table>, <a>, etc.

Some other useful tags are:

 

The W3School website is a good start for learning basic HTML, CSS and JavaScript.

 

Resources

Below you find some useful resources.

Video: Web Programming Overview:

Web Programming Overview

The Video is also available on YouTube

 

Video: HTML and CSS:

Create Web Pages using HTML and CSS

The Video is also available on YouTube