ELCOME TO THE
ORLD IDE EB
IRCLE OF RIENDS

EB AGE ESIGN
ESSONS



Return to Newsletter Index

CREATING WEB PAGES


The Internet has exploded in popularity in recent years. Do you know that you can create your very own web site on the World Wide Web. There are many ways to do this but if you want to understand what goes into making a web page, you need to learn the basic language of the web: Hyper Text Markup Language (usually called HTML) to build from the ground up.

Don't worry! HTML isn't scary. It is just a language that gives instructions to computers.

You will need the following things in order to make a web page: - A computer with a modem;
- And Internet Service Provider, or ISP (for an online connection);
- A Web Browser like Microsoft Internet Explorer or Netscape Navigator and
- A word processing program and a floppy disk

We would like to share our knowledge of HTML with you…so come on everyone and lets design a homepage. You will never be alone on your journey into the new world of web page design. Many of the members of the World Wide Web started their web pages using these simple, basic instructions and we are all available to assist you as you go through these twelve lessons.

LESSON ONE


Decide what kind of web page you would like to develop - decide what you want to say to the world.

Some suggestions would be:

- Develop a personal page about all the hot topics in your life: friends, family hobbies, cubs activities, games, music sports, etc.;
- Create a group or club page full of fun stuff, games, jokes, puzzles and riddles, etc. or
-Or a combination of all of the above and more.

MAKING AN OUTLINE

Setting up an outline is a great way to organize your site. For example:

1) Welcome
a) Introduce yourself and the site
b) Say what your site will be about and
c) Show interesting pictures

2) Your Family
a) Give descriptions of family members
b) Tell what makes your family interesting
c) Include photos

3) Your Friends
a) Tell fun things about your friends
b) Talk about what you like to do together
c) Include pictures or drawings

4) Your Activity Page
a) Explain any groups/clubs that you belong to
b) Tell about your activities
c) Talk about your favorite things to do

Now that you have gotten to know me know that I NEVER stick to the rules and please don't feel like you have to stick to this or any other outline. This will be your web site. You will be the Webmaster. An outline is only a starting point. You will always be making changes as you go along.

LESSON TWO -DESIGNING BASICS


The sample outline in Lesson One consisted of the following four categories:

1) Welcome
2) Your Family
3) Your Friends
4) Your Activity Page

Let's make a separate Web page for each category and link them all together.

First you need to decide where to put the text and where to put images or pictures. Get out four sheets of paper (one for each of your four web pages) and draw a square box on each. Draw similar boxes on the pages where you think your art would look nice.

Next add in the text on each page. Be creative and try new things. Have fun with this. As the Web designer you are the artist and you are in charge!!!!

There are some elements of good design with Web pages and Rule No. 1 is keep it simple. Simplicity is the key to understanding. Everyone will understand your page better if you keep it simple.

Your site must have:

A purpose - what is it about? Are you making the point you wanted? Does it make sense? and

A theme - a design element that repeats on every page to show that it goes together. Choose your colors carefully. If you use a bold background color, use text that contrasts (stands out clearly) with it so other people viewing your site will be able to easily read it.

Limit the number of moving items on the page.

Keep file size in mind.

Be consistent in your design.

Checking the work of others is one way to help you learn about designing. Check out other web sites and take note of the ones that like.

Lesson Three - Basic HTML


To start with let's review some basic computer terms that you will see used in the upcoming lessons.

Start Button - learn where the Start Button is on the windows computer system. It can take you to lots of your computer programs, including your internet browser. Click on Start, and a menu will pop up. Choose Programs, and another menu will pop up. You can choose your browser from this menu to get online.

Internet Browser - another way to open your internet connection is by clicking on the Internet browser icon on your computer desktop.

Title Bar - Every window on the computer has a title bar at the top. The title bar on the text editor shows you the name of the file that you are working on. A file is made when you save anything you create on a computer. When you save something like a picture or a saved typed story, you will have to give it a file name. Once you save the file, the name will show up on the title bar.

On the right hand corner of every title bar are three buttons.

Minimize Button - This is the first button and it is displayed as a minus sign. Minimize means to make smaller. Sometimes, you don't want to close a program, but you don't want it in the way while you work on something else. This is when you use the minimize button. Click on this button and the program you are working on will become a small button at the bottom of the screen. When you want to go back to the file again, click on that small button and the file will be back to its original size.

Maximize Button - This is the second button in the title bar - the maximize button (looks like a square box) or the restore button (looks like two small squares on top of each other).

Close Button - The last button in the title bar has an X on it. This is the close button. Clicking on this button will shut down the file when you are finished working on it.

Getting Started:

Open your browser (see instructions above)

You should work on your Web page while your browser is offline. Offline means you aren't connected to the internet. Don't sign on when the log-on screen for your Internet Service Provider (ISP) pops up. Click the X in the corner of the sign-in box. The browser will stay open without connecting to the Internet. If your browser asks if you want to work in offline mode, click on yes.

Once the browser is opened, minimize it by clicking on the minus sign in the title bar at the top of the screen.

Open your text editor to create your pages. Most computers have Notepad (on PC computers) or SimpleText (on Macintosh computers. To find Notepad, click on the Start button in the lower left corner of the screen. Click on the Programs folder. A menu will pop up. Click on Accessories, from that menu you should see Notepad there. Click to open it. Macintosh users should double click on the SimpleText icon to open the program.

WEB CODE WORDS

HTML is a language that is full of rules for computers to live by.

Rule No. 1 - ALL HTML code must be put inside of angle brackets that look like this < >. The left and right angle brackets are on your keyboard in the lower right corner. They are the same keys that contain the comma and the period. Press the Shift key, and one of the keys to type it in.

TAGS

Opening Tag

The code and the angle brackets together are called a tag.

Before you start writing your Web Page, you have to tell the computer that you are using HTML. To do this you use an opening HTML tag. So type - NO SPACES:

< HTML >

at the top of your page. It comes before anything else on your web page.

Closing Tag

You have to use a tag to show the computer that you are done using HTML too. That's when you use a closing tag. A forward slash mark (/) is used to make a closing tag. The forward slash is on the lower right corner of the keyboard. It's the same key as the question mark. The very last thing you put on your web page will be

< /HTML >

This tells the computer that it can stop reading HTML. If you leave it off, your page will be blank.

All other information that you add to your Web Page must go between the opening HTML tag and the closing HTML tag.

There are a couple of things to remember with tags. First it is important to have the angle brackets on both sides and the slash mark for the closing tag. Also, it is a good habit to use capital letters to write the code. This isn't a rule but it makes it easier to read the code and find any mistakes.

Head Tag

The head tag tells the computer what to put in the header, or top section of the Web Page.

The < HEAD > tag has an opening tag and a closing tag < /HEAD >.

For the purpose of these lessons, the only thing in the header will be the tile of the page.

Title Tag

The title tag goes between the head tags.

The < TITLE > tag has an opening and a closing tag < /TITLE >.

Whatever you put inside these two tags will be the title of the page. It will not show up on the Web Page itself, but you will be able to see it in the browsers title bar.

For example if the word Welcome was typed here then when you were looking at the page on the web, you would see Welcome in the title bar across the top of your browser screen.

So far this is what your text editor page should look like:

< HTML >
< HEAD >
< TITLE >Welcome
< /HEAD >
< /HTML >
Notice the head tags go inside the HTML and the Title tags go inside the Head Tags. This is called nesting, which is when a set of tags are placed, or nested, between another set of tags. Each set has an opening tag and a closing tag.

Now on to the next two tags:

Body Tags

Just like most other tags the opening tag goes inside angle brackets

< BODY >

and the closing tag goes inside the brackets but has a forward slash in front of it.

< /BODY >

The body tags are nested inside the < HTML > tags like this

< HTML >
< HEAD >
< TITLE >Welcome< /TITLE >
< BODY >
Welcome to My Web Page
< /BODY >
< /HTML >

So far so good, I hope. Hang in there. You are doing great!

Ok, your masterpiece is taking form but so far it is not looking very exciting. Try changing the size of the text to make it stand out more. To do this you will use another set of tags called headings.

Headings

There are seven types of headings available for a Web Page and the tag for each is just a letter "H" with the heading number next to it.

< H1 > Heading 1 < /H1 >

Welcome


< H2 > Heading 2 < /H2 >

Welcome


< H3 > Heading 3 < /H3 >

Welcome


< H4 > Heading 4 < /H4 >

Welcome


< H5 > Heading 5 < /H5 >
Welcome

< H6 > Heading 6 < /H6 >
Welcome


Let's add some tags to your web page. We will use the Heading 1 style as an example. The heading tags are nested between the < BODY > tags.

Everything that is typed between the < H1 > and < /H1 > tags will show up in Heading 1 size and style.

Change your text editor to read like this:

< HTML >
< HEAD >
< TITLE >Welcome< /TITLE >
< BODY >
< H1 >Welcome to My Web Page< /H1 >
< /BODY >
< /HTML >

Ok, I know that this seems long and hard right now. Soon though you will be really good at this and it will go a whole lot quicker.

Save your work!

Put a formatted disk into the computer. In your text editor, click on File in the menu bar at the top of the screen. Then click as Save As. Now you have to tell the computer what to name the file and where to save it. Go to the Save In: box at the top of the Save As screen. Click on the small down arrow by the Save In: box and choose 3 ½ Floppy (A). The floppy disk is in the A: drive.

You will also need to save it as an HTML file. Click on the small black arrow next to the Save As type: box. From the drop down menu, choose All Files (*.*). Now type index.html in the File Name.: box and click on the Save button.

Before we close this lesson lets take a peek at our page:

First minimize your text editor. (Click on the minus box in the upper right corner of the title bar of the text editor screen to minimize).

Next maximize the browser (Click on the browser button in the task bar at the bottom of the screen).

To open your page, click on File in the menu bar at the top of the browser window. Choose Open from the menu that appears and a new screen will come up. Double-click on Browse. You need to tell the computer what drive your file is in.

Click on the black arrow next to the Look in: box and choose 3 ½ Floppy (A). Your saved .htm or .html file should be there. Just click OK and there's your page!!!!!!!

Lesson 4 –Adding More Content


Minimize the browser window by clicking on the minus button in the title bar, and maximizing the editor by clicking in the text editor button on the task bar at the bottom of your screen.

Time to put that outline you wrote to good use. Welcome and introduce yourself to your web site visitors.

Type your new content into your text editor. The information goes beneath the < BODY > tag after the closing < /H1 >tag.

For example:

< HTML >
< HEAD >
< TITLE >Welcome< /TITLE >
< /HEAD >
< BODY >
< H1 > Welcome to My Web Page< /H1 >
This is my personal Web Page. To find out more about me click on the links below.

My family
My Pets
My Interests & Hobbies

< /BODY >
< /HTML >

Now save your work again on your floppy. This time click on File from the menu bar, then click on Save, not Save As.

Time to open the browser again. Minimize the text editor by clicking on the minus button in the title bar, and maximizing the browser by clicking in the browser button on the task bar at the bottom of your screen.

Click on Refresh (or Reload) button from the tool bar at the top of the browser screen.

See the changes, cool eh but they don’t look so great do they? Boy do we need to learn how to format our web page.

Fantastic Formatting

Time to learn a new tag. The Paragraph Tag. Just put it before and after the text where you want to create a little space and like most HTML tags, the paragraph tag has an opening < P > and a and closing tag < /P >.

For example

< HTML >
< HEAD >
< TITLE >Welcome< /TITLE >
< /HEAD >
< BODY >
< H1 > Welcome to My Web Page< /H1 >
< P >This is my personal Web Page. To find out more about me click on the links below.< /P >
< P >My family
My Pets
My Interests & Hobbies < /P >
< /BODY >
< /HTML >

Now this should make our page look a little better. Let’s check it and see. First save your file again by clicking on File at the top of the screen, then choose Save.

Minimize your editor and maximize your browser. Click on Refresh (or Reload).

Well that should look better but there is still room for improvement. Some spaces between the categories would be nice.

Another tag can do this nicely for us. The line break tag < BR >.

This tag is perfect for when you want to put one line of text below another and it does not need a closing tag.

For example

< HTML >
< HEAD >
< TITLE >Welcome< /TITLE >
< /HEAD >
< BODY >
< H1 > Welcome to My Web Page< /H1 >
< P >This is my personal Web Page. To find out more about me click on the links below.< /P >
< P >My family < BR >
My Pets < BR >
My Interests & Hobbies< /P >
< /BODY >
< /HTML >

Time for another check. Click File and Save, then minimize the editor and maximize your browser, and click on Refresh (or Reload).

Wow! It really is starting to look like a real web page.

Lesson Five – Now You’re Styling


Time to make your text stand up and shout!!!

Common Styles – please note that each has an opening and a closing tag. The tags go around the word or words that you want to change.

Bold - < B > This makes the text bold or heavier and darker< /B >

Italic - < I > This makes the text italic, which means the type leans. < /I >

Underline - < U > This underlines the text between the tags. < /U >

Strike - < STRIKE > This puts a strike through he middle of the text. < /STRIKE >

Superscript - < SUP > This raises the text that is in the tags. < /SUP > (for example you would use this with a word like 3rd. The code for that would look like 3< SUP > rd < /SUP >.)

Subscript - < SUB > This lowers the text that is in the tags. < /SUB > (You would use this one on words like H20. The code would look like H< SUB >20< /SUB >.)

You can use more than one style at the same time. This is when nesting is important. Remember that with nesting, one set of tags must go completely inside the other set of tags. Look, for example, at a sentence like this.

< B >< I > This text would be bold and italic < /I >< /B > - This text would be bold and italic

The first tag to be opened must be closed last. The italics tags must be nested between the < B > and < /B > tags. In other words close the tags in the reverse order to which they were opened. The last one opened is the first one closed.

Have fun experimenting with these common style tags.

For example:

< HTML >
< HEAD >
< TITLE > Welcome< /TITLE >
< /HEAD >
< BODY >
< H1 >< B >< I >Welcome to My Web Page< /I >< /B >< /H1 >
< P > this is my Personal Web Page. To find out more about me click on the links below. < /P >
< P >< B >< I > My Family< BR >
My Pets< BR >
My Interests & Hobbies< /I >< /B >< /P >
< /BODY >
< /HTML >


Lesson Six - Adding Color to your Pages


One of the easiest ways to add color to your page is to put in a color background. The attribute (which helps further describe what a tag will look like; it tells the computer more specific information. It describes the tag.) used is BGCOLOR (which stands for background color). The BGCOLOR attributes are included inside the body tags. All you have to do is type the color you want in quotation marks. There are 16 color names the Web recognizes (silver, black, green, yellow, gray, teal, blue, lime, maroon, purple, magenta, white, navy, olive, cyan and red).

For example if you want a yellow background you would type:

< BODY BGCOLOR="yellow" >

Note: Since BGCOLOR is an attribute, it doesn't need a closing tag.

The rest of the colors are written in hexadecimals. If you have ever mixed two different paints together and come up with a different color that is how the hexadecimal system works. Each hexadecimal code has six symbols. The first two are how much red will be in the color. The second two are how much green will be in the color. The last two show how blue will be in the color. The number 0 is the darkest shade of any of those colors. The letter F is the lightest.

The hexadecimal system uses the numbers 0, 3, 6, 9 and the letters C and F.

Play around making your own colors.

You have to put a # sign before the code and you have to have six digits in the code.

For example, if you want a hot pink background, your new code would look like this:

< BODY BGCOLOR="#FF3399" >

Have fun with trying different hexadecimal codes. Keep saving your work and refreshing it in the browser to see how different backgrounds look.

Lesson Seven - Fonts, Bullets and Home Rule


Fonts -

What are fonts? A font is a type of lettering or different-styled text. It is a good idea to use common fonts that most computers have such as Arial and Times New Roman.

To change the text on your page you'll use the < FONT> tag with the text, followed by the closing < /FONT > tag.

The < FONT > tag has several attributes too.

Face - tells the browser the name of the font you will use.

Size - shows how big you want the text to be.

Color - tells which color you want the text to be.

(N.B.) Just like the attributes you learned earlier, these should be surrounded by quotation marks and brackets.)

For example if you use this coding:

< FONT FACE ="Times New Roman" SIZE="3" COLOR="#FF3369" >

You should see this sentence in a Times New Roman typeface with a type size 3 in a shade of red.

Bullets-

Sometimes you want to give a list of information and it makes it easier for the reader if you put the information in a bulleted list.

Bulleted lists are great because they are easy to read, break out the important information and look nice in the page design.

The tags used for bullets are called lists. There are two types of lists for you to use.

There are unordered lists < UL > with these tags:

< UL > the opening unordered list tag
< LI > the first bulleted text
< LI > the second bulleted text
< LI > the third bulleted text
< LI > the fourth bulleted text
< /UL > the closing unordered list tag

and ordered (numbered) lists < OL > with these tags:

< OL > the opening ordered tag
< LI > the first bulleted text
< LI > the second bulleted text
< LI > the third bulleted text
< LI > the fourth bulleted text
< /OL > the closing ordered list tag

The list will start with 1 and go up from there.

    My Favourite Websites
  1. World Wide Web Circle of Friends
  2. World Wide Web Circle of Friends Newsletter
  3. World Wide Web Circle of Friends Reunion
  4. World Wide Web Circle of Friends Calendar


Home Rule

To divide sections of test, or to separate pictures you add a line to split things up.

The home rule (or line) has an opening tag < HR > but no closing tag.

Example:



You can adjust the size of the line with any of the following attributes:

SIZE - how thick you want the line to be;
WIDTH - how wide you want the line across the window;
ALIGN - where you want the line-left, right or center;
COLOR - what color you want the line to be and
NOSHADE - if you want the line to be flat instead of 3-D

Here are some examples of home rule codes. Notice how the attributes have an equal sign after them and are in quotation marks.

< HR SIZE="2" WIDTH="50%" ALIGN="LEFT" >

< HR SIZE="8" WIDTH="50%" ALIGN="CENTER" COLOR="#FF3369" >

Examples of the above two codes:





Note that the size of the line is measured by a number but the width is measured by a percentage.

More lessons coming soon!



Be sure to visit our Geeks Corner for more Webmaster Tricks

"What is difficult we carry out immediately...the impossible might take a little longer."


If you want to reach me you can email me at sharongreene@shaw.ca and/or you can usually find me hanging about with other members on MSN Messenger between 5:30 & 7:00 AM PST -- my username on MSN Messenger is sharongreene32@hotmail.com

Keeping in touch with friends around the world!

Always extend a hand in friendship!

Take a moment to look at this Friendship Book and this Friendship Card

Love to have you sign the guestbook before you leave today.



Have a Great Day everyone!

Click for Nanaimo, British Columbia Forecast


We are the Circle of Friends, made from a chain,
A chain of cable and wire without an end.

There's lots to do and plenty of friends to meet in the Worldwide Circle of Friends! We have people from all over the world who meet, chat and share experiences.

Find out more about us in the site, look at the Message Board and then be sure to join in!



“A ball is a circle. No beginning, no end.
It keeps us together, like our Circle of Friends;
but, the treasure inside, for you to see
is the treasure of friendship you've granted to me.

Today I pass the friendship ball to you. Pass it on to someone who is a friend to you.”



A four leaf clover is rare,
and so is a friend who cares,
so with this token
and no words spoken
I offer my friendship to share
- By Tammy Pottruff!




What did I do today?
I sat in my room and talked to my friends!
And this is where my day begins
We talked about crafting, recipes too,
About how were happy, sad or feeling blue
We give each other hugs, we smile and we cry
Show our photos of family here and gone by
We answer questions on this and on that
And it doesn’t matter where each of us sat
For were all in the same room
Huddled together
And for this we’ll remain friends forever
So when your alone wondering what you can do
Come to our room, meet friends like me and you
The WWWCOF are waiting, come join us we say
Then you too can answer What did I do today?

~~written by Pat Broatch & dedicated to the WWWCOF~~




A warm welcome from Sharon,
founder of the Worldwide Circle of Friends

Click Here For Yours!
©Angel Hugs Postcards

 

Copyright 2000-2003 © Worldwide Circle of Friends. All rights reserved.
 . Floribunda Initial Font courtesy of IconBAZAAR.
 Copyright materials on this site may not be removed or used by anyone without
the copyright owner's written permission.