Basic HTML Tutorial

Home

With the web, a thought you have in the shower can be posted to the world by say, lunchtime, or by well, even just an hour after.

I'm talking about having a Web page posted on the web. Don't have one yet? Now there's no excuse. Click! Click! Done. That's how easy it is to create a Web page with the Web publishing tools. Don't have any? No prob! A flood of on-line visual Web page creators has been hitting the shelves lately and they can help you. Then brag about it to your classmates, and claim you're now a Webmaster (you see, for having a Web page done). Webmaster? Man, loathe yourself being called as such? I mean having yet zero knowledge about how your Web page was done really? And letting Geocities or Tripod (or whatever) do it for you? Well, not until you create your own Web page yourself.

I'm talking about HTML Programming. Although now, there's XML, which others say, has come to replace HTML...i don't know really (anyone?). Anyway it's still wise to learn the basic, right? So if you're interested, read on!

HTML (Hyper Text Markup Language) is a computer language used in creating Web pages. It is a set of web-specific typesetting instructions. An HTML document always starts with <html>--meaning "HTML on" and ends with </html>--meaning "HTML off."

You're gonna need a word processor to work on your piece (i.e., Notepad, WordPad, Word). And of course, a browser to view your document. We are on the very basic yet, so any version of an Internet browser will do. If your PC is as Jurassic as having still Microsoft Windows 3.1 (as those in our computer laboratory), no prob, with this very basic tutorial, you can still be on the same language game as where this tutorial, is on. So after this <html> tag, you'll have <head> and the <title>; which creates the name you see in your Mac or Windows title bar when bringing up a page. After this <title> tag, you will write some real text-whatever you want your page to be called-say, "The Lair of the Cannibal Corpse ". After that, you close the <title> tag with </title>. Then close the <head> tag with </head>. Note: If you do <head><title>your text</head>, it won't work. You always have to turn off the last tag you turned on.

Now, you're ready for the <body>, wherein your actual page really starts. It's what lies between <body> and </body> tags that makes up the contents of your actual Web page. Inside the <body> tag, you can add; bgcolor=black text=white link=red. As this: <body bgcolor=black text=white link=red>. bgcolor (background color) defines the color of your background. And if you want an image to be your background, have background="someimage.gif" and an image with that filename will be tiled on your page's background.

Manipulating your text. The color, the size and the font face of your text can be manipulated. To do it simply insert this; (whatever satisfies you), before the desired text and close it with at the end of the chosen text. (One suggestion: Use the font face common to all PCs. Why? Becoz if you use say, Tempus Sans ITC and your Web page is viewed on a PC without this font, that PC will use the default font instead of the font you used on your text. So what if its default font is Times New Roman...convinced yet?). To run your text, simply have this: <marquee behavior=continuous>. Actually, you can simply have <marquee>. makes your text bold. makes your text slant. makes your text underlined. There are four paragraph alignments enabled by HTML; , , and . But in aligning your text to the center, you can simply have <center> instead of . But for the right and left paragraph alignments, you can't do the shortcuts. Remember you need to close the paragraph tag with .

Posting an image. The tag used in posting an image is the <img>, as <img src="somepic.gif">. You can resize the image or graphic the HTML way, specifying the width and the height, as: <img src="somepic.gif" width="90" height="120">. But for purposes of proportionality (and well not to deform your image), specify either only the height or the width. The unit used is called pixel.

Putting a link. A Web page having no links is a bore. A link when clicked, takes the viewer to another Web page. The basic way of putting a link is by inserting <a href="somepage.html">. The thing enclosed in quotation marks, is the filename of the Web page to be viewed once the linked text/graphic/image is clicked. You can simply have somepage.html if that Web page file is in the same directory as the original Web page's. If not, of course you need to type the whole URL of it including the http and the www. Say, you want to link up Yahoo!, well simply have: <a href="http://www.yahoo.com">. And hmm remember to always turn off the tag (</a>).

So basically, linking a graphic/image/text opens a new Web page, on the same window. Another way of opening a Web page through a link is by having it on another window. That's by: <a href="somepage.html" target="new_window">. So then if the linked text/grahic is clicked, a Web page having the filename "somepage.html" will be opened on another window that we've named "new_window". And with JavaScript (let me just tell you), you can manipulate the appearance of the "new_window". You can choose the window features you want that new window to have. But I'm not gonna include that here. JavaScript is another language. You can't jump to it without first understanding the basics of HTML programming.

The following are some basic tags commonly used:

<A>	Anchor; Sends you to a link, as.....<a href="somepage.html">link</a>
<B>	Makes the text bold. <STRONG> is even better
<BR>	Signals a break
<CENTER>	Centers a page element (whether text or graphic).
<FONT>	Defines the font of the text.
<H1>	Creates a header. You can have up to <H6>;.
<HR>	Inserts a horizontal line. Can be manipulated as <hr size=2 color=black width=200>
<I>	Makes text itallic.
<IMG>	Defines image on your page as....<img src="somepic.gif">
<LI>	Defines a list of elements.
<MARQUEE>	Makes your text run.
<P>	Defines a paragraph.
<U>	Makes your text underlined.

And here are some other characters with their corresponding commands:

Symbol	Command/Code	Name
&	&	Ampersand
>	>	greater than
<	<	less than sign
		non-breaking space
©	©	copyright sign
®	®	registered

So, after displaying your design through tags, you will close the <BODY> tag with </BODY> tag. Then, your whole document coz' HEY, you're done....with </HTML>.

At this point, you save your work as a text file with a name that ends with .html or .htm if you're working on Windows 3.1's three-character file extension limitation.

OK then, let's have a sample:

<html>
<head>
<title>The Lair of the Dragon</title>
</head>
<body bgcolor="black" text="white" link="red">
<center>
<img src="dragon.jpg">
 

Nothin' much is up in here. Come back real soon!!!

 
<a href="http://www.toyski.com">

<<--DeTOuR
</center>
</body>
</htmL>

Click here to view how that document would look like in an Internet browser (i.e., Explorer, NetScape Navigator). Note: it doesn't matter whether you use an upper or lower text case......

If you have questions, email me at: admin @ toyski.com (no spaces in between). Next time, let's see if I can teach you the basics of using tables in designing a Web page.