Creating a Course Web Page

 


Introduction

For this course, you will create a web page that represents a portfolio of your projects. The course staff will use this page to track your progress throughout the course, so it is important that you keep it up-to-date. Whether or not you already have a personal home page, you should create a separate page for this course.

The purpose of this activity is to gain hands-on practice with HTML. To do this, you will create a course web page. If you get stuck, ask for help from the instructor or a TA.

This page is structured into the following activities:


Create a Folder for this Course

If you have not done so already, create a course folder.

Install a Web Page Editor

There are many programs that support creating and editing web pages. We recommend Visual Studio Code (also known as VS Code) if you are going to install a program on your own computer. The public computers in K labs, classrooms, the library, and other spaces have a similar program called Brackets. Both are free, built on open source software, and relatively easy to use. Alternatively, you can create web pages using the replit.com cloud-based service. The advantage (and disadvantage) of using this service is that you create pages on a server on the internet rather than on your own computer.


Practice the Basics

The following links provide basic information on getting started with whichever of these editors you choose to use.

TIP: Save Early and Often

Save your file frequently as you work.


Create a Home Page for this Course

Look over the page source for the SimpleHTMLPage.html and StudentTemplate.html files you downloaded earlier by clicking on each one in turn. As you look at these two files, you will see that the SimpleHTMLPage.html file is simpler, containing a heading, two paragraphs, and two short lists. The StudentTemplate.html is more involved, including some headings, paragraphs, lists, links to local and external files or web sites, and an image.

Choose one of these files as the template for your "home" page for this course. Save a copy of it with a new name, such as index.html in the same folder, using the File->Save As… option.

TIP: Web Page Filenames

By default, web browsers look for files called index.html, so that is a good name to use for the "home" page of any project; in this case, the "home" page for your work in this class. If you create other files in this directory (as you probably will), you will want to give them other names, such as project1.html. It is best to avoid spaces and special characters in your filename, so COMP Lab #1 is not a good filename for a web page.

Practice Publishing A Starter Page

Any files you create with your web page editor are sitting on the machine you were using when you created them (probably a laptop or lab machine). You can edit and preview them there, but no one else can see them. (This does not apply if you are using replit.com, where you create files on an internet server. If you are using replit.com, you can skip this section on publishing web pages.)

To publish a web page, or make it available to others, you need to copy (or "upload") it to a machine that is already visible on the internet, such as the K College CS Student Web Server (student.cs.kzoo.edu). This is also known as a "file transfer."

Most students have found FileZilla (another open source program) an easy way to transfer files from their own computers (or a lab desktop computer) to the server for this course.


Customize Your Page

Now customize your page, using appropriate HTML tags. If you want to see some examples of headings, paragraphs, lists, or tables, you can look at the source code for a simple HTML page or a simple table example (or any other HTML page) by going to the page and then either right-clicking or Control-clicking on the page and choosing View Page Source.

At a minimum your page must include:

  • Your name in the text between the <title> and </title> tags in the head section of your page to reflect the fact this is your web page.
  • Your name visible on the page itself.
  • A link to the web page for this course (https://www.cs.kzoo.edu/cs102 or https://www.cs.kzoo.edu/cs103).
  • An organized structure where you will list work you do in this course, such as a list or a table. Your web page must be organized in such a way that it is easy for us to find work for the purpose of grading.
  • At least one image. This could be a picture of you, or a picture of anything else that is tasteful. Be careful not to use copyrighted images without permission. (There are a number of fun images that can be found at https://www.cs.kzoo.edu/CSCourses/IntroMMProg/mediaSources/index.html. Or you can use the image search services for Yahoo and Google, both of which have options for filtering images based on copyright or usage rights under their "Advanced Search" or "Tools" options.) If you download an image from the web, provide a citation on your page.

    Note for replit.com users: After you download the image to your machine, you will need to drag or upload it to the Files pane in your class replit.

  • At least one style customization. (See the section on customizing styles below.)
TIP: A note on links

Links can specify complete web addresses (example: https://www.cs.kzoo.edu/cs101/index.html) or "relative" addresses (example: secondPage.html), which specify the location of the target relative to the current page. Relative links are usually used for pages in the same directory or in a subdirectory.

A common mistake is to create a relative link in your page, and then forget to copy the target file over to the web server. If your links don't work after you move your web page to the server, this might be the problem.

TIP: Adding Images

To download an image from a web page, right click the image and select "Save Image As...". Then save the image into the folder that contains your web page. In your editing window, add an image tag like the following:

<img src="NAME_OF_YOUR_IMAGE.jpg" alt="Short Description Of Image"> 

Your image should now appear in the preview window.

You are also welcome to include any additional information that you choose, such as:

  • A nickname.
  • Your hobbies.
  • Your class or graduation year.
  • Other courses you are taking.
  • Links to your favorite web pages.
TIP: Your Email Address on a Web Page

You can decide whether or not you want to put your email address on your web page. There are web crawlers that look for email addresses on web pages and then send spam to them. If you do put your email address on a web page, then you might want to disguise it in some way.

If your user id is k00ab01 then you don't want to list it as k00ab01@kzoo.edu, but rather as k00ab01{at}kzoo{.}edu, or in some other format that is easy for a human to read, but doesn't look like an e-mail address to a crawler. You can also disguise it by including it as an image (although some software is getting pretty good at recognizing and interpreting text in images).

At this point don't worry too much about the appearance of your page: font sizes, background colors etc. Get the basic content on the page first, then customize the appearance as much as you want when the basic requirements are met.

We'll talk more about HTML (the language underlying web pages) throughout this course, but one thing that you should be aware of now is that different web-browsers may render the same HTML file in slightly different ways.

Publish the Next (not yet final!) Version of Your Page

Using the same instructions you used earlier, publish (upload) your web page to the student.cs.kzoo.edu server again. If your page refers to a local image (one you already had or one you downloaded), you will need to copy that to the server also.

TIP: Replacing Published Pages

When you upload a new version of a file you have already copied to the server, you need to replace the older version that is there. FileZilla will ask about this; choose to "overwrite" the older version.


Style Customizations

One of the key principles of modern web design is that content should be kept separate from presentation. HTML is used to organize page content and CSS determines the presentation -- the way features on the page actually look. For example, you can specify your page's background color and the H1 text color and font style using style specifications like this:

body { background-color: yellow; }
h1 { color: red; font-style: italic; }

These specifications can be stored in inside <style> tags in the <head> section of your page, or, better yet, they can be stored in a separate CSS style file. The sample files you downloaded earlier include a minimalCSS.css file that you can edit to change your document's background color or make any other style changes.

You can tell an HTML page to use a CSS style sheet by including a line like the following in the <head> section of the web page:

    <link rel="STYLESHEET" type="text/css" href="minimalCSS.css">
The sample HTML files you downloaded earlier, which you may have used as an initial template, already have that line in the head section. (You can view the page source to see this.)


Wrap Up and Submit Your Work

In the time you have remaining, modify your HTML and CSS to make your page as well organized and visually appealing as possible. (You do not have to make your background yellow!) Keep in mind that we don't expect you to be an expert web designer at this point. Do the best you can with the time and the tools that you have available to you.

Before you leave, find the Getting Started assignment in Kit and submit the web address (URL) of your published web page on student.cs.kzoo.edu or replit.com. The name can be anything you like; but the URL must be correct. To double-check it after you choose Submit, click on the Download/View button on the submission confirmation page that comes up.