Web Master Class

 

Instructor: Marissa Kunz

June 2003, Richmond District YMCA Day Camp, 12 students

 

Summary: This class introduced students to the process of planning, designing and coding a web page.

 

Part 1:  We discussed basic web terminology such as: web sites, web pages, home pages, web browsers, the internet, the world wide web, web address, links, email, copyright, and HTML. Next students brainstormed content ideas by making a list of all the possible topics and images they might want to include on their page.  After selecting a few of the best topics from their list, students drew a plan for their layout and made a map of their links. A digital photograph of each student was taken for use on his or her web pages.

 

Part 2: In the computer lab, we discussed and surfed web pages made by other students around the world. Students learned how to use the web as a resource for hunting and gathering free clip art, web animations and other raw material for their web pages.

 

Part 3: Students then learned how to code a simple HTML document (see “Basic HTML” below) in a text editor and how to check their work in a web browser. Students jazzed up their web pages by learning additional codes that changed font style, color and size. (See “Today we will learn how to JAZZ UP our web page!” below) They learned how to add pictures, background images and hyperlinks. We discussed steps involved in getting a web page onto the world wide web.

 

Part 4: Photoshop was introduced as a way to edit images for use on their web pages. 

 

--------------------------------------------------

BASIC HTML:     

 

Copy this code onto your text editor:

 

<html>
<head>
<title> My Homepage </title>
</head>
<body>

 Hi my name is Marissa and this is my first web page!

</body>
</html>

 

 

 

Today we will learn how to JAZZ UP our web page!


 

Follow the instructions below and learn new tags that will make your web page more interesting!

 

Instructions:

 

  1. Making Headings. First we will learn how to make larger headings by adding the heading tag.

 

TRY THIS CODE: <H1> Welcome! </H1>

 

CHECK IT OUT: Save the file. Look in your Browser and Press the Refresh Button on your Browser to see the changes you made!

NEXT:  Try changing <H1> to <H2> (or <H3> or <H4> or <H5> or <H6> and see what happens. Hint: <H1> is the biggest and <H6> is the smallest)

 

PRACTICE: Now that you know how this tag works, use it on your web page the best way you see fit!

 

  1. Making line breaks. Do you notice how all your sentences run together without breaks even if you press ENTER? Next we will learn how to make breaks.

 

TRY THIS CODE: Add <BR> after your first sentence.

 

CHECK IT OUT: Save the file. Look in your Browser and Press the Refresh Button on your Browser to see the changes you made!

 

PRACTICE: Now that you know how this tag works, use it on your web page the best way you see fit!

 

 

 

 

  1. Making Text Bold. We will learn how to make text bold.

 

TRY THIS CODE: <B> this makes it bold! </B>

 

CHECK IT OUT: Save the file. Look in your Browser and Press the Refresh Button on your Browser to see the changes you made!

 

PRACTICE: Now that you know how this tag works, use it on your web page the best way you see fit!

 

  1. Making text underlined. We will learn how to underline text.

 

TRY THIS CODE: <U> This tag will underline words! </U>

 

CHECK IT OUT: Save the file. Look in your Browser and Press the Refresh Button on your Browser to see the changes you made!

PRACTICE: Now that you know how this tag works, use it on your web page the best way you see fit!

 

5. Making Text Italics. We will learn how to make text italics.

 

TRY THIS CODE: <I> This tags makes it Italics! <I>

 

CHECK IT OUT: Save the file. Look in your Browser and Press the Refresh Button on your Browser to see the changes you made!

 

PRACTICE: Now that you know how this tag works, use it on your web page the best way you see fit!

 

  1. HEY! HERE’S a TEST: Can you make a word Underlined, Bold AND Italics all at once?

 

  1. Changing Text Color! Fun!! Next we will learn how to make different colored text! Try making a rainbow colored web page!

 

TRY THIS CODE: <FONT COLOR=”BLUE”> is it blue yet? </FONT>

 

CHECK IT OUT: Save the file. Look in your Browser and Press the Refresh Button on your Browser to see the changes you made!

NEXT:  Try changing “BLUE” to other colors. Here is a list of all the colors you can try: AQUA, BLUE, GRAY, LIME, NAVY, PURPLE, SILVER, WHITE, BLACK, MAGENTA, GREEN, MAROON, OLIVE, RED, TEAL, YELLOW.

 

*But guess what? Sometime not all web browsers on the internet recognize these color words. Here are the codes that all web browsers will under stand: #00FFFF is AQUA, #0000FF is BLUE, #808080 is GRAY, #00FF00 is LIME, #000080 is NAVY, #800080 is PURPLE, #COCOCO is SILVER, #FFFFFF is WHITE, #000000 is BLACK, #FF00FF is MAGENTA, #008000 is GREEN, #800000 is MAROON, #808000 is OLIVE, #FF0000 is RED, #008080 is TEAL, #FFFF00 is YELLOW. 

 

TRY THIS CODE: <FONT COLOR=”#0000FF”> is this blue too? </FONT>

 

PRACTICE: Now that you know how this tag works, use it on your web page the best way you see fit! Make your text all different colors!

 

  1. Changing the Background Color. Now we will learn how to make the background color something other than white!

 

TRY THIS CODE: Find the first <BODY> tag on your code, then change it to look like this: <BODY BGCOLOR=”yellow”

 

CHECK IT OUT: Save the file. Look in your Browser and Press the Refresh Button on your Browser to see the changes you made!

NEXT PRACTICE:  Now that you know how this tag works, use it on your web page the best way you see fit! Try changing “YELLOW” to other colors!

 

  1. Adding Images.  At Last! What fun is a web site without images? Now we will learn how add images to our page.

TRY THIS CODE: <IMG SRC=”yourpicture.jpg” BORDER=0 ALT=”this is a picture of…”>

LET ME EXPLAIN: This one needs some explaining!

·         Instead of “mypicture.jpg” you need to type in the name of your picture. This is what you saved it as. If you forget what it is called look in the (P:) Drive.

·         As for BORDER=0, you can change zero to any number to make the border bigger.

·         As for the “this is a picture of…”, this is the text that people will see when they put their mouse over the picture!

CHECK IT OUT: Save the file. Look in your Browser and Press the Refresh Button on your Browser to see the changes you made! This can be a little tricky. Raise your hand if you have questions!

PRACTICE: Now that you know how this tag works, add more picture to your web page the best way you see fit!

 

MINI PROJECT INSTRUCTIONS: Now at the end of your web page we will add a little information about you!

 

  1. AT the end of your HTML File (BEFORE the last </BODY> tag) Add the code <HR>. <HR> stands for Horizontal Rule and this adds a line to across your page.

 

  1. Next add your picture by using the code: <IMG SRC= “yourname.jpg”>

 

  1. After the picture, add text that tells us your name and age or anything else about yourself. If there was more than one student that worked on the website add each additional person’s picture also! Then add a few sentences about yourself after your picture.

 

Example:

 

<HR>

<IMG SRC= “marissa.jpg”>

<BR>

My name is Marissa and I am 10 years old. I go to Alvarado Elementary School. I think making web pages is cool!

 

  1. Then Jazz it up by Changing the text color or style according to what you learned!