BEGINNERS
Basics of HTML
Getting Started
Enhancing your text (color, size, etc.)
Adding Graphics to your page
Linking your Documents
Publishing your site on the Internet
Go to Advanced Page
Return Home
Getting Started
First fo all, before engaging in HTML programming you will need at least one tool for editing text.
One of the most commonly used text editor is none other than NOTEPAD. Every Windows System MUST have it
or if ever you don't have it, you may also use Wordpad or MS Word. Once you have any one of the
above mentioned tools, you now need a HTML viewer to view the results or outcome of your HTML.
Internet Explorer and Netscape are the two most common browsers which you may use to view your
web page. Now all that's left to do is editing your page! Just go to the top of this page to
view the topics available. They are in no particular sequence so feel free to choose. one, minor
note, I'll try my very best to expand to give you more info on HTML programming. Thank you very much!
Now, here are the HTML tags your document should have: (NOTE: text after "//" symbol are my comments.)
<html>
----------------------------------// Start of HTML Document
<head>
----------------------------------// Heading of HTML Document
<title> Hello World! </title>
-----------// Title of the Page
</head>
---------------------------------// End of Heading
<body>
----------------------------------// Start of the Body of the Document
Hello World!
----------------------------// Displays the text "Hello World!"
</body>
---------------------------------// End of the body
</html>
---------------------------------// End of the whole HTML Document
The above example is one of the simplest HTML document. It displays "Hello World!" on your browser.
After editing your HTML, be sure to save it as *.HTM or *.HTML so that it could be easily be classified
as an HTML document.
Return to Top of Page
Enhancing your text
Still using plain text in your web page? Why not add some style. Here are some text style examples:
<i> Italics </i>
<b> BOLDFACE </b>
<u> Underlined </u>
<strike> Strike Out </strike>
<tt> Teletype Monospace Font </tt>
<big> Prints bigger text </big>
<small> Prints smaller text </small>
<sub> Subscripting </sub>
<sup> Superscripting </sup>
<blink> </blink>
Remember, type your text in between the 2 tags
Here's an additional, to create a Horizontal line through the screen, use the
<HR> tag.
All horizontal lines you see on this page is made from it.
Fonts and Sizes
To change font:
<font face="type the font you wish to use here" font size=" " font color=" ">
You may use any font you wish regardless if it is uppercase or lowercase. For the Font Size, you may use
any number, the small the number the small the font is. If you typed 300, it would almost be your whole
screen. For the font color, you may use the 8-bit colors: red, blue, green, cyan, magenta, yellow, etc.
(NOTE: if you have a HTML page maker like Front Page express, you can use the 16-bit colors (256 colors)
or the 32-bit colors (more or less 16 million colors))
you can also control the size of your text easily by using the heading tag.
Here are some examples (use 1-6 only, cause they're the only ones available):
<h1> This is how it looks like
</h1>
<h2> This is how it looks like
</h2>
<h3> This is how it looks like
</h3>
<h4> This is how it looks like
</h4>
<h5> This is how it looks like
</h5>
<h6> This is how it looks like
</h6>
To align text to either left, center or right. Use this tag:
<p align="center">
Text is aligned at the center
</p>
You can also use the
<P> tag to skip one line in your document:
CODE:
Hello!
<p></p> I skipped one line.
OUTPUT:
Hello!
I skipped one line.
Lastly, the
<br> tag acts as the enter key, or in other words, move to the next line.
In HTML Programming, you cannot use Special characters by just pressing alt plus it's code
Here are some examples and how they can be printed:
CODE = OUTPUT
& = &
£ = £
¥ = ¥
® = ®
° = °
© = ©
½, ¾ = ½ , ¾
÷ = ÷
< = <
> = >
To use these, just insert the codes in your text.
Return to Top of Page
Adding Graphics to your page
Well, there's nothing more enticing to view in a web page other than it's Graphics. As you notice, when
you surf the internet, almost every page, you'll see some pictures, animations and more graphics. This
attracts most of the visitors rather than what the site really contains. Now I'm going to teach you how
to put up a spicy and colorful webpage. First make sure your picture or image in the JPEG, GIF, PCX,
PNG, WMF format which are most widely used today.
But first, make sure you ask yourself, why should I put those images on my page? The images should be
meaningful. For example, you have a picture of your favorite actor/actress in your main page, but your
web site is titled, THE CALCULUS, it doesn't match right? (NOTE: Don't get me wrong, the pictures here
are only my examples ok?) Also, make sure your graphics can be seen by all internet and better yet,
everybody. Don't use high color graphics too often, like the JPEG which can contain 16 million colors
just use GIFs instead so that others with older browsers can see it correctly.
Here is the code to put your images on your web pages:
CODE:
<img src="images/eugene.jpg">
OUTPUT:
To display properly, type the EXACT location of the image in between the " "s.
"images" is the sub directory where eugene.jpg is located. If it is in the same directory as the web
page is, all need to type is the filename. i.e. "eugene.jpg"
(NOTE: Para sa mga Pinoy, Si Eugene!)
Here are examples with text formatting with graphics:
CODE:
<img src="images/sensui.jpg" align="top">
OUTPUT:
Text is on TOP
You can change top with middle, for middle text, and bottom, for lower text.
To make an image as your picture, use this option inside the
<body> tag:
<body background=" ">
type the exact Location of the image inside the " "s.
Now, if you've already done the coding for graphics and yet the images are still not showing up,
there maybe one error and the most common error,
TYPE THE CORRECT AND EXACT LOCATION OF YOUR
IMAGE, AND BE SURE TO CHECK THE CHARACTERS BECAUSE IT IS CASE SENSITIVE.
Return to Top of Page
Linking your documents
Perhaps this is the most important part of any Web Site. Links allows the user to navigate through your
web site. Either by linking to another HTML Document, or by linking within the page itself. As you can see,
this page you are viewing now is composed of several links. You can just click on these links to view
certain parts of this page rather than using the scroll bar you are seeing on the right.
Links make your site more navigational, especially when using image maps which is explained in the
advanced section of this tutorial. Links make your web site user friendly and easy to follow. But don't
abuse the use of links. For example, the web site of Mirabilis, you know, the creator of the famous ICQ
client. Their web site, the last time I visited it, almost all of the text you see are links! And whew! it
was really confusing. (I have news it was changed already) Also, in the advanced section of this tutorial,
I'll teach you to add a little touch of style with your links. But be sure to master links first.
TEXT LINKS
Text links are texts on your web page that when clicked, will send the user to the specified location
Example:
CODE:
<a href="beginners.htm"> Beginners Page </a>
OUTPUT:
Beginners Page
As you can see, the text "
Beginners Page" can be clicked. And that is called a link. Once you click on a
link it will send you to the specified location stated. In this case, once you click the text,
it will send you to the "beginners.htm"
document. Always remember that when making text links, be sure to
put the text in between the tags.
One last thing, do you see something different when you put your mouse on top of the page?
Yes! Text is displayed on the status bar of your browser (Lower left hand corner). And also, the color
of the text changes. I'll teach you these on the advanced page. But like what I've told you, be sure
to master links first.
IMAGE LINKS
Image links are links which are pictures or images. Once you click on these images, you will be sent
to the location specified.
Example:
CODE:
<a href="beginners.htm">
<img src="images/jericho.jpg">
</a>
OUTPUT:
As you can see, you can now click on the image and once you do, it will send you to the location you
specified.
Also you can link to various locations of the current web page. The best example is none other than
this page you are viewing right now. If you click "return to top of page", it will automatically scroll
to the top portion of this page. Here's an example of the code needed to accomplish this task.
SAMPLE:
<a name="testlocation">
After clicking on the link, this line should be at the top of the page.
</a>
<a href="#testlocation">
Click here to test in-page linking.
</a>
Now, "testlocation" is the location where you want to link. Upon clicking on the link, you will be
brought to the location specified and puts it at the top of the browser window.
Return to Top of Page
Publishing your site on the Internet
Nothing is more exciting than viewing your own creation on the Internet. You feel a sense of accomplishment
now that you see your work published on the Internet and viewed by thousands of netsurfers. There are several
ways to publish your web site. First, ask about your Internet Provider if they allow their customers to
use a little storage space for a personal web site and how much space they'll give. Second, use your own
hard disks as storage space for your site. Although it will be COSTLY, it is better to leave the files on
your own computer than on other servers. It is also advised that you have a permanent and an extremely fast
connection so that your computer can accommodate the traffic brought in by the net users. (Cable Modem
connection, T1-T3 Servers are the most commonly used connections. I believe it will cost you more or less
a thousand dollars on a monthly basis.) Lastly, the easiest way to publish you site is through online
services that gives Internet users 20 Megabtye+ storage space for personal web sites. As for my web site,
I am given by
XOOM a 100 Megabyte Space for my files. Here are some links to some of the online services
which gives you FREE!!! storage spaces.
GEOCITIES
XOOM
Fortune City
This page contains the basic HTML programming and these are the required components to a successful web site.
The Advanced HTML Programming teaches you MORE. Advance Scripting and a few tweaks of the codes. After
you've mastered all the basic HTML tags you may now proceed to the tougher advanced Tags.
Return to Top of Page
HTML Programming by "A"
�Copyright July 8, 1999