Web Page Assignment for CPT 114, Computers and Programming
If you wanted to do your assignments in the computer lab in building 920, room 740 or room 503, here are the hours: http://www.tridenttech.edu/13270_4713.htm
This should be a fun assignment for you. I want you to develop your own
web page. The reason I do this is that many people do not know Hypertext
Markup Language (html) even though they have developed many websites using
HTML editors. What I DON'T want is for you to develop a web page using a
piece of software (ie FrontPage, Word, etc). I want you to type out the HTML
tags to make the web site work in a text editor such as Notepad. As I
mentioned, it's relatively easy and can be quite fun. You are the theme for
this web page, so I'll want a paragraph about you, a list about you, a link
to your favorite website, a link to your email address, and a picture of
you. This biggest part of this assignment is using all the different tags.
As a minimum you will have to use all the tags on the hand out except you
don’t have to use both an ordered list and unordered list, just one will do.
I want you to create a page with all the other tags though. You can use
additional tags and be as creative as you would like to be.
If you do the minimum (ie just type the tags) and don’t put any thought or
creativity in this assignment your grade will be 85. The last 15 points are
awarded based upon the amount of effort you have placed into this
assignment. This is a similar assignment to the one you did in CPT class
except the theme needs to be about you. The is the exact same assignment as
CPT 220, you can feel free to upload that same submission for this class.
The instruction for creating a web page using html can be found below.
Another good resources is the site
Web
Monkey which has excellent tutorials on html. If I were doing this
assignment my page would look like this:
Tom's Web Page
Further Web Page creation instructions:
This should be a fun exercise for you. For most of you this is your first time
doing a web page and your first attempt at computer programming. Yikes!!!! Did I
say computer programming????!!!! Yes, Virginia you will be writing a computer
program with this exercise. No sense running through your house with your hair
on fire exclaiming "I can't do this!" Many others of weaker minds than yours
have completed this assignment and enjoyed doing it. As I will be stating above,
I want you to be the theme for this page. Then I want you to create content for
you page A paragraph about you, a list about you (favorite music, books, food,
etc), a picture of your, your family, your dog, etc, a hyperlink to your email
address and a hyperlink to your favorite website. The picture should be a
picture file or a link to a picture on the internet. When you send this file to
me you will be uploading it to the web page assignment drop box. You must upload
all the picture files that go along with your .htm file unless you have just
referenced pictures you already have on the internet. This means you will be
attaching multiple files. Warning: DO NOT use an html editor to do this
assignment. You must use notepad!!!!! Do not use MS Word and save as a web page
or use SharePoint, expression web or Dreamweaver. If you do, I'll know by the
code that was generated. You must do it by typing the tags or it is wrong.
Below you will find the HTML tags that tell your browser (Internet Explorer,
Chrome or FireFox) what your website will look like. So, how will you be doing this
assignment? Follow the following instructions and you won't have any problems.
You should develop and save this web page on a USB/stick/thumb drive. It's not
mandatory that you do this but my experience is that it works better if you do
it that way. Here's what my web page would look like if I did this assignment:
Tom's Web Page
1. Open Notepad, which is the text editor that comes
with every computer. To open it, click on Start, Programs, Accessories, then
Notepad. This will open a blank note pad file for you.
2. Now, type in the first tag you see on the second page of this document:
<HTML> (do not type the small type in italics, those are just for info)
3. After typing the tag, save the notepad file. Click on File, Save and when
the dialog box opens navigate to your USB drive. On the bottom of the dialog
box where it says "file name" type in "myfirstwebpage.htm. Then where it
says "Save as Type:" click the down arrow and change it to the "all Files"
option. If you don't change the file type, notepad will be adding .txt to
the end of you file name and we don't want that. Once you've done all that
click the save button.
4. Next we want to type in then next tags, all the way down to and including
the <BODY BGCOLOR= "red"> tag. At this point you should have five lines of
tags just as it shows on the next page. Once you've done that, save the file
by clicking on File, Save.
5. Now we want to view the file in the browser so you need to leave notepad
open and start Windows Explorer or My Computer. You don't have to be
connected to the Internet to do this assignment so you don't have to be
connected in any way. You will be using the browser to read the notepad file
off your usb drive. On your keyboard hold down the windows key
(between the ctrl and alt keys) and Press (don't hold down)
the letter "e" key. This opens windows explorer where you can see the
files on your computer. Navigate to the file you created in notepad
(should be myfirstwebpage.htm). Double click on the file name and it should
open in the browser. If it open in notepad instead then you didn't
follow my instructions in 3 above. You need to right mouse click on
the file and rename it with .htm as the extension. Your page should be
red with no text on it if you did it correctly. If it is not, then go back
to your notepad file while leaving the browser open, and check the tags to
ensure you didn't make any typo's which is the most common problem. In
order to open your myfirstwebpage.htm in notepad, just right mouse click on
the file name and select "Open with..." and choose notepad.
7. Now, type in each line of tags, one by one. IMPORTANT: After each line is
done, save the notepad file, switch to the browser and press the refresh
button. (saving and pressing refresh is the only way to see the changes you
are doing to your web page.
8. How you should do this assignment is to type the tags and text just as I
have it below and see what each tag does. What you will be turning into me
is YOUR page with YOUR content, not just you retyping the example below. The
theme should be about you. A paragraph about you, a list about you (favorite
music, books, food, etc), a picture of your, your family, your dog, etc, a
hyperlink to your email address and a hyperlink to your favorite website.
The picture should be a picture file or a link to a picture on the internet.
9. In order to get full credit you must use every tag below. I also expect
you to put some thought in the content of the page...make it interesting and
fun. Make sure you use you as your theme.
10. You need to upload your .htm file and any picture files to the assignment Dropbox. IMPORTANT After you upload your assignment, do not check it by clicking on the link to your file in the dropbox. If you do your webpage will come up without a background color or any pictures. This does not mean you have done anything incorrectly. It's just that D2L strips your head tags and attributes from the .htm document when you open it that way. Your instructor will be using a different tool to download it that will ensure that it looks just like it looked before ou uploaded it.
11. How do you get a picture???? If you have a picture on the internet you want use, simply right mouse click on it and select Save As. Then tell the dialog box to save it to your disk. Once you have saved it, then you must type the exact file name in the picture tag below in order for it to show up on your web page. More information on pictures are at the end of this page. Your picture might display too large for your liking and mine. I have placed the instructions on how to shrink your pictures on the bottom of this page.
INSTRUCTIONS: Follow the above instructions. After you type the <body bgcolor="red"> tag and look at your web page in the browser to ensure that your page works, then just type one line at a time verifying that each line works by viewing it in the browser. Do Not type they italic words they are just explaining what that tags do.
<HTML> Tells the Browser that we are using the HTML
programming Language (do not type the small type in
italics, those are just for info)
<HEAD> This starts the header section, this will not be
displayed in the text area of your browser
<TITLE>THIS IS A WEB PAGE</TITLE> Shows up on your title
bar only!
</HEAD> Tells the browser that we are done in this section
of the document
<BODY BGCOLOR="red"> This starts the area that will be
displayed in your browser, also assigns a background
color to your page. Just type in the color you want to use ie blue, yellow,
purple, etc
<H1 align=center>W0W! This is my Web Page</H1> H1
through H6 tags are for headings. H1 is the largest text and H6 is the
smallest text. You can align=Left, center or right.
The browser ignores extra spaces and when you hit the
Enter key to end the line. If you want the line to end you must use the <br>
tag to single space the next line. You must use the <P> to double space to
the next line.
This is how I type text
on my
Browser
<P>
<H3 ALIGN="Center">THESE ARE SUBSECTIONS</H3>
<OL> Ordered list tag starts
a list that will automatically number each line. The lines are designated by
the <LI> tag. You must use the </OL> tag to stop the numbering and the
</LI>to go to the next line. <UL> Unordered list tag starts a list
that will automatically display a bullet for each line. As with above, you
much use the <LI>…..</LI> to designate each line.
<OL> Ordered List Starts the list
<LI>NUMBER 1</LI> Starts and stops a line
<LI>NUMBER 2</LI> Starts and stops a line
</OL>
Stops the list
HR tag places a line across your page, you can change the
thickness with the size criteria, the color and shorten it by changing the
width (if you don't place anything but HR it assumes Black and 100%
<HR SIZE=12 COLOR=BLUE WIDTH=50%>
These are the two tags you use together to place a picture
on your page and center it. You don't need the first tag if you want to left
align it
<P ALIGN = "center"><IMG SRC="Shuttle2.JPG">
<P>
<A HREF="http://www.cnet.com">The CNET Site</A> Used to
link to another web page on the Internet
<p>
<A HREF=mailto:zpbradyt@trident.tec.sc.us>My email</A>
Used to allow someone to click to email you back.
</BODY> Closes the body of the page
</HTML> Lets the browser know that we are done.
How to Shrink your Pictures:
1. Open My Computer (hold down the windows key (between ctrl and alt keys) and tap the letter E.
2. Navigate to your picture file (it needs to be where your web page is located on your usb drive).
3. Right mouse click on the file name and choose Open with ....
4. Choose to open it with MS Paint
5. After it opens in Paint, choose the Image menu then Stretch and Skew, then change the two 100's to 20's. That will shrink your picture 80% which should make it the correct size for a web page.