Assignment #3: Introduction to HTML - Index Page
Updated 4/30/2025 at 3:29pm
- This assignment will demonstrate:
- Making an HTML page, using
the Basic Document
Structure as given in the class handout.
- Using <p>...</p> tags to separate paragraphs of text from each other.
- Using FTP or the hosting service's File Manager to upload
your index page to the Web server that you got last week.
-
Create a new file in your text editor.
-
Add the Basic Document
Structure HTML page that is in
the class handout, to your new file.
You can copy and paste the HTML5
Template from the "Resources" page if you wish.
- Save the file as index.html.
-
Your index.html file will eventually become
the initial page for a mini Web site.
- For now,
put three <div> tags into the <section> tag that is already in the page.
You should add these div tags under the <h3> tag that is at the top of the section.
- Now add a paragraph tag (<p>) to each <div> tag, and
put some text into each paragraph.
The text that you put in these
paragraphs can be a brief description of the site that you will eventually
build for this class, or it can be Greeking
text, or even nonsense text, as
long as it is not illegal, offensive, or defamatory in nature.
-
Make sure that you close each of the <div> and <p> tags!
-
You will make your mini Web site in subsequent assignments during the
rest of the semester. Don't worry about that just yet, though.
-
Validate your index.html page with the W3C's
Validator page.
I will also be validating your page, so this validation will be part of your
grade.
-
Upload your index.html file to your Freehostia (or other hosting service) Web site (which you got for the
previous assignment). You
can use the site's File Manager if it has one. Here are some important hints regarding Freehostia's
File Manager:
-
When you log in to your Freehostia account, you will see a panel
with the heading "Manage your sites / databases".
-
Click the "File Manager" icon/link.
-
This next step is MOST IMPORTANT, and failure to do this next step
is the main reason that students fail to properly upload their
pages: You must double-click the URL of your site in the "File Manager" display.
This double-click is necessary because Freehostia has the capability of hosting
up to five different web sites on
one account, and you need to be in the proper/desired web site before you upload your files.
You can check to make sure you are in the correct folder, by looking at the "Path:" information in the File Manager.
It should show something like /www/giraffesaretall.xyz (or whatever your site's URL is,
following the /www/).
-
After you have navigated to the correct site URL (see the above item), you will click on the big blue button
that says "UPLOAD NEW FILE(S)".
-
Now click on the small white button that says "Add Files".
-
Locate and select the file(s) that you want to upload (which should be only index.html for this assignment)
and then click "Open" (in most browsers).
-
Finally, click the large blue "Upload" button.
-
You can see your page on the Web server by selecting the
"Student Sites" link on the class site and then clicking your
name in the bulleted list. Make sure you refresh/reload
your page with F5 (or Ctrl+R) to see the new version of your page!
You can also type your site's URL into the address bar of your browser!
-
When you are all done with this assignment, make sure you
back up your pages to multiple locations, such as
- Dropbox
- A jump drive
- An external hard drive
- iCloud
- iDrive online
- etc.