WEB PAGE BUILDING ACTIVITY

Things you'll need to do this activity:

Before you begin: There are many different ways to build a web page, and many different software tools that can help you. We're going to use software that likely came with your computer - a text editor to write simple html code and an internet browser to view your code in action.

Make sure you have the software needed - it's all free!

→A text Editor: For example, Notepad (PC), Simpletext (Mac), or TextEdit (Mac OSX) are all free. You can also use a program like Microsoft Word or AppleWorks. There are also lots of html editors available - used specifically for writing and viewing html code - BBEdit, Microsoft FrontPage, Macromedia Dreamweaver, etc. - that are not free and vary greatly in thier capabilities and interfaces.
→An Internet Browser: Most likely, Internet Explorer and Netscape Navigator came installed on computer your computer - if not you can download them for free by clicking above, you may also want to check for a newer version.

Also, it's not a bad idea to pick up a good html guidebook. We'll just touch on the very basics of building a web page, you may want to take your skills further! Ther are also lots of great resources and tutorials on the web.

HTML BASICS:

What is html? Html, or hyper text mark-up language, is a universal mark-up language made up of simple tags that are used to "mark-up" text and pictures to be viewed over the web on any computer in any browser. Think of it like little instructions telling a browser what to do, and where to put things.

What's a tag? A tag is the little bit of code that all web browsers see and understand as instructions - they are usually English words and abbreviations, for example you would use the <title> tags for giving your page a title, and the <p> tags for formatting a paragraph. An important thing to remember about tags is they come in pairs - an opening and closing tag. Take for example the title tag, say the title of my web page is Studio 3d is GREAT!, I would write the code like this:

<title> Studio 3d is GREAT! </title>

with the / before the word title in the closing tag, make sense? Okay, let's get started!

Step 1: First, open your text editor and start a new document. The first thing you're going to do is tell the web browser that this is an html document, with guess what - the <html> tags (don't forget they come in pairs)! Your code will look like this:

<html>

</html>

Step 2: Now let's give your page a title and separate the body of your page (what's shown on the main page below the browser's menu bar) from the heading (what's not shown on the page). Your code will look like this:

<html>

   <head>

       <title> MY DOG SCOOTER </title>

   </head>

 

   <body>

Scooter is the greatest dog ever!!

   </body>

</html>

Did you notice how tags suround each other, this is called "nesting" tags. So - the title tags go inside the head tags which are in turn inside the html tags. Save your file (if you are using a word processing program such as Word - make sure you save it as "text only"), and open it in an internet browser (such as Internet Explorer). It should have your title across the top and the sentence "Scooter is the greatest dog ever!!" on the main page.

Step 3: Let's change our page so that it has a heading and two paragraphs. Change your code to look like this (the stuff in orange is new):

<html>

   <head>

       <title> MY DOG SCOOTER </title>

   </head>

 

   <body>

<h1>Scooter is the greatest dog ever!!</h1>

<p>My dog scooter brings me the newspaper every morning, and my slippers every night. He is a loyal friend, indeed. Thank goodness for cool dogs like Scooter!</p>

<p>If Scooter were a cat, I don't think he would be nearly as cool.</p>

   </body>

</html>

 

Again, save your file and open it in the browser, it should look something like this:

Don't be afraid to experiment, what happens if you change the heading tag to <h2> or <h3>?

Step 4: So, you hate the font and the color of the heading? Well, let's change it! Change your code to look like this:

<html>

   <head>

       <title> MY DOG SCOOTER </title>

   </head>

 

   <body>

<h1><font face="arial, helvetica, sans-serif" color="FF33OO"> Scooter is the greatest dog ever!!</font></h1>

<p>My dog scooter brings me the newspaper every morning, and my slippers every night. He is a loyal friend, indeed. Thank goodness for cool dogs like Scooter!</p>

<p>If Scooter were a cat, I don't think he would be nearly as cool.</p>

   </body>

</html>

Take a look at the font tag - why do I have 3 fonts listed? Well, not every computer has every font installed, so I'm providing alternatives. I'm telling the browser to first try to display the text in Arial, then in Helvetica if there's no Arial installed, and if both of those fonts are absent, choose any old sans-serif font. The other part of the font tag tells the browser which color to display the text in - using a numbering system called "Hexidecimal". So, FF33OO, is orange. Looking for a guide to hexidecimal colors? Check out htmlgoodies.com - this link will take you right to their color code page, but this site is well worth checking out for more web site tutorials.

Some other great sites to take your skills further:

http://hotwired.lycos.com/webmonkey/

http://www.w3schools.com/

http://www.webreference.com/html/tutorials/

Step 5: Do some digging around on the internet, visit one of the sites listed above, and see what else you can do to your page! Make some of the text bold, add an image to your page, create some links to other web pages. The internet can be a great teaching tool - take advantage of it!!

 

STUDIO 3D HOME • MISSION • PARTNERS • PROJECTS • LOCATIONS

 

studio 3d home mission partners projects locations