Web pageassignment

Web page
Assignment
CIS 5 Online

By following these steps exactly you will be
able to create a simple web page that will
satisfy the requirements for CIS 5 online.

You CANNOT use a web page generator
program (Dreamweaver, GoLive, etc.) to
complete this assignment. I will know if you
do! No points will be given to such a
submission.

Do NOT copy and paste from this PowerPoint
file.

If you have any questions, be sure to post
them to the class message board.

Leave this window open while you’re
working, then open and re-size other
windows as directed.

I recommend you close all other
windows before you begin.

When I need you to type something, you
will see it displayed in teal.

Photo requirement
 To complete this assignment, you will need a
digital photo of yourself.
 You can use a digital camera or scan a printed
photo you have (the labs have scanners and the
assistants can help you with this.)
 Name the file “photo.jpg” and save it in your My
Files folder (this is important!)
 Please make sure the file size of your photo is
less than 500 KB. If you’re not sure how to make
your file smaller, either post the question to the
message board or ask a lab assistant on campus
to help you.
 Your classmates will see this photo, so choose a
good one!

First, open Notepad

 Click Start
 Point to All Programs

 Point to Accessories

 Click on Notepad

Open Internet Explorer

 Even if you usually use a different
browser, it will be helpful for the sake
of simplicity if you use this browser.
 Once you open an IE window, you
should have three windows open:
 PowerPoint
 Notepad
 IE

Go to Notepad

 As we switch between windows, use
the tabs in your taskbar (bottom of
your screen) to go from one program
to another.

Add the four basic HTML tags

 “Tags” are the codes that are used to create web
pages.
 Tags always go between “brackets” like this: <html>
 When we put these tags (along with plain text) in a
file, the browser then interprets them to give us
colors, sizes, lines, etc. and shows them to us as
web pages.
 Use the next screen as your example, and type the
tags exactly as you see them in your Notepad file.
 Remember, HTML is a precise language and will
not tolerate spelling or punctuation errors!

 Note: because XHTML prefers it, all tags should be entered in lowercase.

Why…
 <html> tells the browser that what follows is written in
the HTML language
 <head> is the signal that what appears in this area is
information for the browser and search engines, not to
be displayed.
 <title> is the area that contains the name of the web
page. This name will appear in the title bar of the
window when the page is opened, in the “Favorites” or
“Bookmarks” list if the page is book-marked, and in the
title area of a “hit” in a search engine list.
 <body> is the area to put anything that you actually
want to have displayed on the web page.

Save the file

 File > Save
 Name the file webpage.html (no
spaces)
 You MUST add the .html extension,
as indicated, to your filename
 Save the file in you’re My Files folder

Add a title

 After the <title> tag, type
My CIS 5 Web Page
 Save the file

Closing tags
 Nearly every HTML command has both an
opening and closing tag. There are a few
exceptions, but for the most part, each time
we “open” a tag, we will need to “close” it.
We do this by adding a similar tag that
begins with a / . For example, the tag to
close the <html> command is </html>.
 Opening and closing tags surround the
characters that they apply to.
 Use the next page to close the tags we
have opened so far.

Nesting tags
 Notice that tags are “nested” and not
“crossed”. Therefore:

<b><i>These tags are crossed</b></i>

is wrong and

<b><i>These tags are nested</i></b>

is correct.

Spacing
 Browsers collapse all white space
between characters down to a single
space.
 Therefore, extra spaces, tabs, and
returns are ignored when the page is
displayed.
 The reason we use extra spaces, tabs
and returns in our Notepad file is
simply to make it easier for us to read.

Add your name

 Use the following screen to put your
name in the body of the web page
 Make sure it’s your name, and not
mine!
 Save the file

<html>
<head>
</head>
<body>
Lisa Beach

</body>
</html>

Drum roll please…
 Now we’re going to see what this great web
page we’ve created looks like!
 Go to your IE window
 Click File > Open
 Click the Browse button
 Navigate to your My Files folder
 Click the webpage.html file
 Click Open
 Click OK

Are we impressed?

 I know, it’s pretty boring so far, but
isn’t it cool that you’ve created a web
page from scratch?
 Now we’ll make it more exciting…

Centering plus
 Add a tag that will center your text.
 Before your name, add a <center>
tag.
 After your name add
CIS 5
Section ????
(replace the ?s with your section #)
 Before the closing body tag, close the
center tag.

<html>
<head>
</head>
<body>
<center>
Lisa Beach
CIS 5
Section 5303

</center>
</body>
</html>

Seeing the changes
 Each time you want to see how your
changes to your html file affect the way the
page looks in the browser, you need to do
two things:
 Save the Notepad file (File > Save)
 Refresh the IE screen
(you can either choose Refresh from the
View menu, or click the Refresh button on
the toolbar)
 Do this now!

Not what you expected?
 Maybe you expected the text to be on 3 lines, like
it is in our Notepad file.
 Remember what I said about spaces (see slide
#16)
 If we want to have the text on 3 lines (and we do!)
we’ll need to use either break or paragraph tags
 The break tag <br/> is one of those exceptions to
the closing tag rule. It is what is called “self
closing,” so the / is included in the opening tag.
 Use the following screen to add line breaks to our
text.

<html>
<head>
</head>
<body>
<center>
Lisa Beach<br/>
CIS 5<br/>
Section 5303<br/>

</center>
</body>
</html>

Save and refresh

 Check out the difference in your IE
window. Look better now?
 Feel free to add more break tags
anywhere you want to make things
look better.
 Now let’s make the page a little
snazzier by using heading tags.

Headings
 Heading tags are used to make text more or less
“important” in a document.
 Visually, heading tags make text larger, bolder,
etc.
 There are six levels of headings: <h1> to <h6> ,
with <h1> being the most “important” or largest.
 You will need to use three different heading tags
for your text. You can choose which ones you like
best, just make sure they are not all the same.
 Be sure to close your heading tags!

<html>
<head>
</head>
<body>
<center>
<h1>Lisa Beach</h1><br/>
<h3>CIS 5</h3><br/>
<h5>Section 5303</h5><br/>

</center>
</body>
</html>

Save and refresh

 If you’d like to make things easier, you
can re-size your Notepad and IE
windows so that they are open side by
side.
 Now when you make a change, Save
in Notepad, then click the refresh
button in IE – no need to use the
taskbar to switch between windows.

Color
 Now for the fun stuff… adding color!
 Not every color in the rainbow can be displayed on a web
page.
 Colors can be named either with words (“orange”) or
with 6-digit codes called hexidecimal codes.
 Color is added to text by adding a <font> tag
 The word “color” then becomes an “attribute” to the font
tag
 The name of the color becomes a “value” of the attribute.
 Values are always enclosed with quotes.
 It ends up looking like this:
<font color=“blue”>

Tag value
name attribute

Add color to our text
 Use the next screen to add font tags with
color attributes to our three lines of text.
 Remember to both open and close the color
tags.
 The three lines should end up being three
different colors.
 Remember to “nest” your tags correctly.
 NOTE: As the sample file gets larger and
more complex, I will show you only the part
that we are currently working on.

<h1><font color=“blue”>Lisa Beach</font></h1><br/>
<h3><font color=“orange”>CIS 5</font></h3><br/>
<h5><font color=“pink”>Section 5303</font></h5><br/>

Save and refresh
 Like the colors?
 Be sure to experiment with different
names.
 Want a complete list of names?
 http://www.w3schools.com/html/html_colorn
 You might be surprised by how many
there are!

Background color

 We’ll add an attribute to the <body>
tag that will change the background
color of our page.
 It will look like this:
<body bgcolor=“yellow”>

Clashing colors
 Now that you’ve added a background
color, you may want to rethink your
text colors (or vice versa). Play with
different combinations until you find
one you like.
 Remember to be nice to your readers.
Red text on a black background, for
instance, may look cool, but it’s hard
on the eyes!

Adding your picture
 For this next part, you will need a digital
picture of yourself (read slide #4 again if
you missed it.)
 The file must be named photo.jpg, and it
must be saved in the My Files folder (or
wherever you have saved your Notepad
file.)
 We will use an image tag to “point” to the
photo, with an “src” attribute to tell the
browser what it’s called and where to find it.
 Use a few breaks <br/> to set it off from the
text.

Save and refresh
 Did it work? If not, check to make sure that
the file is actually called photo.jpg and is
saved in the same folder that your Notepad
file is saved in.
 Photo too big or too small? You can add a
width attribute to the img tag to change the
size on the page. Just note that in the real
world, a web page designer would change
the actual dimensions of the image using
photo editing software, rather than changing
the size here.

Image tag notes
 The img tag is self-closing, so you’ll need
the / at the end and no closing tag.
 The location of the image here is “relative”
meaning if you don’t tell the browser
otherwise, it will look only in the same folder
the html file is located in. If you needed to,
you could add the complete path for the
filename so it would look elsewhere.
 The width value is in pixels (remember
those?) So a value of 100 is 100 pixels. You
may want to play with this value until the
image size is what you want.

Horizontal rule
 The next element we’ll add to our page is
called a horizontal rule. That’s just a fancy
way of saying a straight line across the page.
 The tag is <hr/> (self-closing)
 The attributes we will use are width, size,
noshade and color.
 The width value can be either in pixels (i.e.
“200”) or in percentage of the actual page
width (i.e. “75%).
 The size (height) value is in pixels.
 The noshade attribute removes the shadow.
 All values must be in “ ” s!

Links
 The last two elements we’ll add are hyperlinks.
 Hyperlinks are the things you click on that take you
somewhere else.
 There are 4 types of links:
 Internal: takes you to somewhere within the website
 External: takes you to somewhere else on the web
 Jump: takes you to a different place on the same
page
 Email: opens your email software and adds an
address to the To: line
 We’ll add an external and an email link

Link tags
Links are <a> (anchor) tags
The attribute is href (hyperlink reference)
The tags look like this:

<a href=“http://www.santarosa.edu”>the text that can be clicked on</a>

Note that the URL must be complete (including
the http://)
The text that is between the opening and closing
anchor tags is what will appear on the page
(usually blue and underlined) to click on

Your external link

 Link us to one of your favorite
websites
 Use the text to tell us why it is a
favorite

<br/>
<br/>
<a href=“http://www.snopes.com/”> I always check this site when I get
one of those emails from a well-meaning friend telling me I should be in
a panic about something. When it turns out not to be true (most of the
time!) I send back the link to this site. </a>
<br/>

In this case, the whole paragraph of text is the link.

Alternatively…
<br/>
<br/>
I always check <a href=“http://www.snopes.com/”> this site </a> when I
get one of those emails from a well-meaning friend telling me I should
be in a panic about something. When it turns out to not be true (most of
the time) I send back the link to this site.
<br/>

In this case, just the words “this site” are the link.

Save and refresh

 Try the link in IE.
 Didn’t work? This is a long tag. Go
back and check that you haven’t
misspelled anything, left out quotes,
added or left out any punctuation, etc.

Email link
 The format for an email link is similar to an
external link.
<a href=“mailto:youremailaddress@isp.net”>Email me!</a>

 In this case, your actual email address goes in
the quotes.
 Use whatever text you prefer between the
anchor tags
 This link will NOT work on campus computers,
because they are not set up for individual email
software.

<br/>
I always check <a href=“http://www.snopes.com/”> this site </a> when I
get one of those emails from a well-meaning friend telling me I should
be in a panic about something. When it turns out to not be true (most of
the time) I send back the link to this site.
<br/><br/>
<a href=“mailto:beachtch@pacbell.net”> Email me! </a>
</center>
</body>
</html>

Un-center

 Move the closing center tag so that
the two hyperlinks are no longer
centered

Tweaking

 Go back and change any colors,
sizes, spacing, etc. until you’re
pleased with the look of your page.

Extra credit
 For 5 extra credit points, use the link from
the color section to find the hexidecimal (6-
digit) codes for your colors and replace your
color names with these.
 Be sure you put the # in front of the 6-digit
code to identify it as a hexidecimal color
code (i.e. color=“#999CCC”)

Last look

 Take a last look at the page in IE and
make sure everything looks good and
is working correctly.

Before we upload

 We will need to change one thing
before we upload the file to the CATE
server.
 When you upload files, the server
automatically adds your
lastname_firstname to the beginning
of the filename.
 Any idea what this will mess up???

Photo file
 It’s the image tag. We used a value of
“photo.jpg” for our src attribute.
 Once it’s on the server, however, the image
file will be renamed to
lastname_firstname_photo.jpg
 Go back to that tag, and add your last name
and first name, all lowercase, before the
filename so it looks like the example above.
 Note: once you do this, it will no longer work
on your computer when you look at the file
in IE, but it will work when it’s uploaded to
the server.

Case note
 Once it’s on the server, all filenames will be
case sensitive.
 Therefore, if your image file is called
photo.JPG, or Photo.jpg
you must make sure that you call it that in
the img tag. You must match exactly the
case of the filename in the tag.
 Even though IE may have ignored a case
difference, the server will not!

Upload your files

 Use the link on the schedule to upload
both your html and jpg files.
 Use the same link to view the web
pages created by the other students.
 Post a message to the message
board if you have any difficulties or
questions about this assignment.

Web pageassignment

More Related Content

What's hot

Viewers also liked

Similar to Web pageassignment

Recently uploaded

Web pageassignment