HTML Tutorial 1 - Basic HTML

Ever since the dawn of the "commercial" internet in the mid '90s, the internet has been a lucrative source of information, good and bad, legit and paraphrased or fabricated...well, you get the idea. Check the packaging of just about any product on the market today, and you are likely to discover a web address. While the media would have you believe that the internet is a jungle of product information and FAQs, the simplicity of WYSIWYG(What You See is What You Get) page editors and the HTML markup language itself has led to a proliferation of personal web sites on the internet. While the E-commerce "bubble" may have burst years ago, the internet remains a powerful tool for keeping in touch with family and friends, and sharing thoughts and ideas among various web communities.

Now, I know you may be nodding off to sleep at this point, but I felt a little background would be prudent. Now that that is out of the way, we can get to the real reason you came to this page: you want to design your own simple web page, or take the first step toward creating more advanced pages. You may think "Oh that tech stuff is for geeks", or "I can't learn to program these newfangled computers", but designing a web page is quite simple. All that is required is a text editor (either "notepad" or "wordpad" will do just fine), and some patience.

HTML is an acronym for "Hyper-Text Markup Language", the "Hyper-Text" derived from the links that join pages together, and the "Markup" meaning that unlike most computer "languages", HTML by itself (computed functions can be added with the assistance of Visual Basic Scripts, Javascript and Java) is not a programming language, it is a language of descriptor "containers" that format and arrange the text and images you want to place. The following as an example of a very simple web page:

<HTML> =>This tag denotes the beginning of an HTML document
<TITLE>My webpage</TITLE> =>The text between these two tags will be displayed in the title bar of the browser
<CENTER><H1>Welcome to my website</H1></CENTER> =>Display text in a heading (largest)
<CENTER><IMAGE SRC="pic1.gif"></CENTER> =>Display "pic1.gif" in the center of the page
<CENTER>Hello world, and welcome to my website</CENTER> =>Center some text
</HTML> =>This tag denotes the end of an HTML document

Click here to see this HTML code in action

Now that you've seen an example, Let's explore the basic semantics of HTML a little further. As I stated earlier in this tutorial, HTML is not a complex programming language, but a markup language, where you format and position text and images using sets of HTML tags. As you have seen in the example above, almost every tag (except for the IMG and a few others) must have its respective closing tag. If you just put a <CENTER> tag before some text, or surround the text with two <CENTER> tags, the text will not be centered - you must put a </CENTER> at the end of the text or object you wish to center.
Let's explore the HTML code above a little further:

<HTML>
The HTML tag defines the beginning of an HTML document - when you are done coding the page, an </HTML> closing tag is used to mark the end of the document. It is good practice for experienced web developers to add the DOCTYPE="HTML version used" to this tag, but it is not necessary to code a working webpage.

<TITLE></TITLE>
You may have noticed, that when you visit websites, a page title appears along the top of your browser window, these tags denote the page title. (Note - you cannot apply formatting to title text).

<H1></H1>
The H1 tag is the tag used to include a large heading in your document. Ranging from H1 to H8, the size of the heading text decreases as the heading number increases.

<IMG SRC="image file.extension">
The <IMG> tag displays a JPG, gif, BMP, or PNG graphic on your page. if you add ALIGN="left/center/right" within the <IMG> tag, you can justify your image (eg. <IMG ALIGN="right" SRC=sample1.gif> to right justify the image on your page.)


Experiment with the code above by downloading the HTML and the image from the example provided, and editing it in a text editor. This concludes the first part of this multi-part series.