Building A Simple Web Page / Beginner’s HTML
This page was made in Microsoft Word using the View/Web Layout and saved as a Web Page.
A few things to remember:
1. Create a website folder and name it for your site. Everything for your web page must be in this folder, including graphic images and HTML pages. If not, the pages or graphics will not appear correctly.
2. Some web authors (like Front Page) will create web folders in the “My Documents” folder on the desktop; others (like Dreamweaver) ask you to define a site according to where your web folder is.
3. Your first, home, main page should be called index.html or index.htm, the default web page.
4. Not all fonts work on all browsers. If you want to use a fancy font, you may have to create the text in a program such as Paint Shop Pro or Fireworks and save it in a graphics format.
5. Fonts which work in all browsers include: Arial, Times New Roman, Verdana, Courier, Helvetica and Comic Sans.
6. Limit your graphics images to *.gif and *.jpg graphics formats. The smaller the graphic, the faster the download time.
7. When using a web author, always insert graphics images rather than copy them onto the page. The browser needs to find the path to the image so it can display it.
8. If your web author keeps trying to make you skip lines, you can force it to put text in the next line by holding down Shift+Enter.
9. Try typing all HTML tags in uppercase or lower case so you can easily identify them.
10. View any web page’s HTML source from within a browser by looking at View/Source (in Internet Explorer) or View/Page Source (in Netscape Navigator).
Now, try the following:
Step 1: Basic Tags
Certain HTML tags are necessary for each web page. A default web page will include these tags:
<HTML> Tag
marking the beginning of the page
<HEAD> Tag
marking the beginning of the Heading portion of the page
<TITLE>
</TITLE> What you put in here will end up at the
top of the browser
After placing your Title tags, put the
headline title of your page here.
You can choose from six sizes.
</HEAD> Close your heading tag like this.
<BODY> </BODY>
The body of the page. This will include any text, graphics, tables, and colors.
You
can align to the left, right, or center, and change the color and size of text.
</HTML>
End of HTML
Step 2: Inserting Your Own Information
Open up Windows Notepad (or similar text processor) found in Start/Programs/Accessories/Notepad. Type in the Basic Tags as you see them above. Then, type in information you want to include in your page between the opening and closing tags, including the web browser title, the headline, and some content.
Step 3: Saving as an HTML File
Save your page inside your web folder as index.txt and as index.html or index.htm. To view your page in a browser, locate the index.html file, then click it to bring it up in the browser. Whenever you make changes to your text file, then save it in both formats, and click on “Refresh” in the browser to see the changes you’ve made.
Step 4: Make a Paragraph Space or Break
To make a space between lines of text, insert the tag <P>. Only one tag will do the trick, since this doesn’t need a tag to close it. To force a line of text to go to the next line without a space, use the <BR> break tag.
Step 5: Change Fonts and Type Sizes
If you do not specify the font, a default Times-Roman type of font is supplied in a default size. To change a line of text to a different font, insert the tags <FONT FACE=“font”> before the text and end with </FONT>. For sizes you can add tags for large headings to small ones, as in <H1></H1> to <H6></H6>. Or you can use the tags <FONT SIZE +1></FONT> or <FONT SIZE –1></FONT>
Step 6: Insert an Image
To insert an image, first place the image in your web folder. Then place the tag where you want it within the body of the page <IMG SRC=“imagename.gif”> . Add ALIGN=CENTER or LEFT or RIGHT before the tag end.
Step 7: Insert a Link
To insert a link, type in: <A HREF=“http://www.pageURL.com”>Name you want to appear on the page</A>
Step 8: Change Background Color
To change the background color, insert the following inside of the <Body> tag: <body bgcolor= “#111xxx”> when the six letter/ number combination is one of the 256 web colors. For color references, see http://hotwired.lycos.com/webmonkey/reference/color_codes/
