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:PowerPointNotepadIE

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.

<html>

<head>

<title>

<body>

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, typeMy 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.

<html>

<head>

<title>My CIS 5 Web Page </title>

</head>

<body>

</body>

</html>

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 5Section ???? (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 name attribute

value

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_

colornames.asp 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”>

<html>

<head>


</head>

<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.




<br/>

<img src=“photo.jpg” /> <br/>

<br/>

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.




<br/>

<img src=“photo.jpg” width=“100” /> <br/>

<br/>

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!




<br/>


<br/>

<hr width=“75%” size=“15” noshade=“noshade” color=“turquoise” />

<br/>

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) tagsThe 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.


<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.

Alternatively…

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:[email protected]”>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:[email protected]”> 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.jpgyou 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!




<br/>

<img src=“beach_lisa_photo.jpg” width=“100” /> <br/>

<br/>


<br/>

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.

You’re Done!

Date post:	20-Jun-2015
Category:	Technology
Upload:	beachtch
View:	131 times
Download:	0 times

Web pageassignment

Technology