Create a Simple Webpage

CREATING A SIMPLE WEBSITE

Introduction to HTML

CREATE a webpage.

Your homepage should be more about content first then looks.
When creating a homepage save graphics in a graphics folder and all other html links in a homepage folder.
Links must be exact when you add them or they won’t work
.Graphics that are huge tend to slow down a page as it loads.
Personal homepages for young people should not give too much personal information.
A table is something that a homepage author can use to convert graphics into other files.(more on this later)

NOW LET'S GET STARTED

1. First create a folder named webpage in your Documents.

2. Open up TextEdit if you are on a MAC or Apple computer. It can be found in Applications . (If you are on a IBM and have windows 98, 2000, or XP open up the program Notepad. It can be found by clicking on the start button and then go to programs, then accessories, then notepad on windows)

CHANGE YOUR PREFERENCES NOW
To do this click on TextEdit > Preferences
Now go to the next link on the moodle that says Change Your Preferences Now. Make your preferences the same as the picture. THEN open a new document or file and get started. If you use a file that was open before changing the preferences, this will not work!!!

3. Click on File and then go to Save as

4. Type in the filename of your web page and then add .html after the filename. For example, I would type lee.html MAKE SURE YOU type .HTML Also make sure you do not have the Hide Extension box checked in your save options.
NOw be sure you create a another folder for this particular webpage to be in. I would call my folder lee since that is the name of my webpage. We will need to put any pictures or other items in this folder that we add to our webpage.
AS A REVIEW -- you already created a folder in your documents called Webpage - and inside that folder is another folder called lee or whatever your webpage is called and your webpage lee.html sits inside that folder.

5. You are ready to begin typing your web page. Web pages are written in a language called HTML. HTML stands for HyperText Markup Language. Let’s begin by looking at the HTML code Opening closing

6. To make a basic web page, you need to write the following code exactly as you see it below...only type in what is in bold ..the other part just tells you what each code means: DO NOT TYPE THE BULLETS! :)

<html> - Opening tag of html
<head> - Opening tag of header
<title> Type a Title</> -Opening & Closing of title tags
</head> -Closing of header tag
<body> -This tag is for the main part of the web page (text, graphics etc.)
 -Opening of font color=green (Default is black)
J. Frank Hillyard - Type this text - will be the text on web page
 -Closing of font color=green (default is black)
</body>-Close the body of the web page
</html> -Close the html of the web page

7. Save your file.
8. Open any browser.
9. Click on File and open File and find your webpage. You can see how your web page would look on the Internet. It is not on the Internet yet, you are just seeing your local web page on your computer. To put it on the Internet, you would have to put it on a free website at home like www.geocities.com
10. You can also view and learn how other web page designers make their web pages. Go to http://www.rockingham.k12.va.us/ Click on the View menu and choose Source. You will see the html code that was used to make that web page. See how much you can understand.

DON’T GIVE PERSONAL INFORMATION ON THE INTERNET SUCH AS YOUR ADDRESS, PHONE NUMBER, PICTURE OF YOU ETC.

After you get your website above to work you can try these common tags used after the <body> tag:

<h1>...</h1> These are headers and can be H1, H2, H3 etc. Headers are used to show title sections of a page. Headers are used to make text BIG!
... This makes the text bold.
... This makes the text italics
…. This underlines the text.
<center>...</center> This centers the text.
This keeps all the text in a paragraph.
A space or break that is one line long.
<hr> a horizontal line.
This makes the text blue. (Yellow, green,red, black)
This changes the size of your font. (1-50)
This changes the font of your text. (Courier, Elementary, Egypt, Boulder)
<img src=”smile.gif”> This puts the picture or animation in the web page.
<bgsound src="song.wav" loop="0"> This puts music on your web page. My musical song is a wav file.
<BODY BACKGROUND="Cloud.jpg" This is your background. This example used a cloud background.
<a href="http://www.pbs.org/wnet/africa/">Africa</a> This tag would show the word, Africa and if you clicked on it, it would take you to that web page,http://www.pbs.org/wnet/africa/.
The code below will give you a scrolling message that says, How are you doing?
<center><td width="100%"><marquee border="0" width="493" height="25" bgcolor="black">How are you doing?</marquee></td></center>

Resources for making a web page:
http://www.quia.com/pages/solcomputers.html

HOME