Getting started with HTML What you will need: - A text editor such as Notepad, Word pad or your favorite word processor.
Remember to save the document as a TXT file!- A printer, to make hard copies of these pages
Now you will learn enough HTML code to make your very own home page.Don't let yourself be overwhelmed. Simply follow our clear and easy to understand, step-by-step instructions below. The guide is not designed to make you an HTML expert, however it may inspire you to learn more. Ready?
Then enter the world of Hyper Text Markup Language
Or HTML for short... HTML Commands (Tags) To make it easier, we have colour-coded the HTML commands to make them stand out. Also, we show the HTML in capital letters although HTML is not case-sensitive. That means it doesn't distinguish between upper and lower case letters generally, you can use <B> or <b>. This way you can see instantly
if you make a mistake and correct it immediately...
However computer filenames are case sensitive when stored on many UNIX and NT systems. <HTML>
<HEAD><TITLE>Hello World!</TITLE>
<META...>
</HEAD>
<BODY BACKGROUND="lines.gif" BGCOLOR="#0000FF" TEXT="#000000" LINK="#0000FF" VLINK="#FF00FF" ALINK="#FF0000">
<CENTER>
<FONT SIZE=+2 COLOR=#000000>
<B>[BOLD] Hello World</B>
<I>[Italics] Hello World</I>
<U>[Underlined] Hello World</U><BR>
<A HREF= ../html.html>Click here to return to the tutorial </A>
</FONT>
<HR>
</CENTER>
</BODY>
</HTML> To view the above sample click here. You may have noticed similarities. The symbols "<" and ">" tell the computer to pay attention to the HTML TAGS in between, like <B> for "BOLD". You may have also noticed that a similar command sometimes follows but with a "/", like
</B> for "END BOLD". This tells the computer to do the command up to that point.For example the first command on the list is <HTML> these commands are known as Tags . All Tags require a closing Tag, as in this case </HTML>. The slash before the command gives the closing signal. <HTML> belongs on the first line
of the page and must be present. This tells the computer that what follows is in HTML language and logically the last line on the page also is </HTML> , signaling the end of that particular page. See? You already learned your first command! Congratulations! The next command is <HEAD> This one is rather obvious in many ways. Consider, we are at the head of the page
and what is at the head of the page? Exactly! The <TITLE> which follows immediately. This is where you would place the name you intend to give your web page. Although this page title is not displayed in the browser's viewing window, it is displayed in the browser's' title bar. Click here to see it first hand.Using your text editor Type in the following lines
<HTML> <HEAD> <TITLE>Hello World!</TITLE> Next, you have to close the HEAD Tag, type in </HEAD>. The next area of the HTML page is the BODY. This is where all the information you enter between <BODY> and </BODY> is displayed in the Browser's viewing window. Now add type the following: <BODY> </BODY> And finally Type in the closing, </HTML>, signaling the end of your HTML page.
Relax, you've made it through the main portion of your web page. HTML Structure Check <HTML> <HEAD> <TITLE>Hello World!</TITLE> </HEAD> <BODY> </BODY> </HTML> If your Page looks like this You got it! If not compare to see what needs be change at this point. Very important: In the example above, note the order of the tags. ,<HEAD> <TITLE> therefore the closing sequence is as follow </TITLE> then </HEAD>. Any other order and you will get error messages. There is no need to view this with your browser at this time. It is a blank page since there is nothing between the <BODY> and </BODY> Tags. The next step will explain the BODY Tags.
HTML BODY Tags Now we will learn more about the <BODY> Tags This is the main part of your home page. The BODY contains all the information you want to display in the browser's viewing window. Here you will learn more commands. First, you must decide what look you want to give to your home page.Like the colour of the
background, size and colour of the text and the position of the text. These are some of the commands you will need to learn in order to accomplish all of the above. BACKGROUND="name.gif" BGCOLOR="#0000FF" TEXT="#000000" "#0000ff" is a code for a particular colour, Click here
to see a chart for Browser Safe colours and their respective codes. Next you will learn the necessary commands to format your text. As always, relax. If you feel stressed at any point, take a break. Take time to assimilate each step. HTML Page Formatting Command Tags Most of the command are self explanatory.
<P> means you begin a paragraph; </P> ends it. <BR> Means a line break. <CENTER> means you want your text centered; </CENTER> ends the text centering. HTML Heading Tags There are 6 HTML Heading tags that will control both font sizes font face. Note that the user has control over these parameters with their browser
options. Just to give you an example here are a couple of examples: <H1> means your text will look like the following; This big the Tag </H1> ends that font size.<H2> means your text will look like the following: This big the Tag </H2> ends that font size.<H3></H3> through
<H6></H6> normally decrease in size unless the user has changed their settings. Don't lose any sleep over this one. The <B> Tag means you want the text BOLD; </B> is placed at end of the text to end BOLD text. <I> means you want the text in Italics; </I> is placed at end of the text to end Italic text. For example; <CENTER> <H1> <B> WOW! This looks good!</B>
</H1> </CENTER> Would look like this; WOW! This looks good! Click here
to see a Browser Safe colour chart with corresponding code #.
Now you know how your text or background will look like! Next you will see a colour-coded layout for your home page. Simply replace RED TEXT with your own codes and text...Give it a try,
HTML SAMPLE CODE PAGE: <HTML> <HEAD> <TITLE> MY FIRST HOME PAGE </TITLE> </HEAD> <BODY BgcolorBgcolor ="#3300CC" TEXT="#ffffff" LINK="#ffff00"> <H1> <CENTER>
MY FIRST HOME PAGE </CENTER></H1> <H2>Welcome to my world! </H2> <P> <H3>
This page is under construction, Check back here soon to see the new changes! </H3> </P> </BODY> </HTML> To view the above sample click here. You have it, technically, you
have done a home page with background in one colour and the text in another!A bit bland and plain looking? I grant you that. In the next page you will see how to make it more interesting to look at. HTML Style Tags How about lines?Simply add the following code where you want a line to appear. <HR SIZE=3 WIDTH=100%>
To make your line thicker, change the 3 to a 4 or 5. To make it thinner, change the 3 to a 1 or 2 To make the line shorter, change 100% to 50% or any other percentage you prefer. You can also use the <CENTER> code to center the shorter lines. To make a coloured line insert the command for colour mentioned earlier. Below is an example of <HR SIZE=3 WIDTH=81%>;
HTML File Names Save your file as: index.htm To view the page open your File Management software and locate the document, double click the index.htm(l) file and it should launch your browser with it. If that fails, you can use FILE then OPEN from within your browser then locate the index.htm(l) file. Next Steps You're ready to learn about FTP (File Transfer Protocol).
This is how you get your page up on the Internet for the world to see. | 
