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:
If you have not done so already, create a course folder.
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.
The following links provide basic information on getting started with whichever of these editors you choose to use.
replit.com
and
the basic operations for creating and modifying a web page)
TIP: Save Early and Often
Save your file frequently as you work.
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 asproject1.html
. It is best to avoid spaces and special characters in your filename, soCOMP Lab #1
is not a good filename for a web 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.
student.cs.kzoo.edu
using FileZilla)
student.cs.kzoo.edu/k00ab01/index.html
(using your
userid instead of
k00ab01
and your filename if it is something other than
index.html
)
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:
|
|
You are also welcome to include any additional information that you choose, such as:
|
|
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.
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.
- Test that your new or modified files uploaded correctly by reloading your
student.cs.kzoo.edu/userid/index.html
page.
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:
The sample HTML files you downloaded earlier, which you may have used as an initial template, already have that line in the<link rel="STYLESHEET" type="text/css" href="minimalCSS.css">
head
section.
(You can view the page source to see this.)
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.