Nov 01 2010

HTML Basics For Beginners

Tag: HTML TipsSubramanyam Inkollu @ 8:58 am

what is html?

html stands for ‘hyper text mark-up language’ and is a simple language that anyone can learn and is used for making web pages

what tools are needed to make a webpage?

all that is needed is ‘notepad’ and a second browser, notepad is a simple text editor in windows, click start on your taskbar then programs and then goto accessories, finally click notepad.
If you are using internet explorer then you will need a netscape browser to check your work
If you are using netscape then you will also need an internet explorer browser to check your work.

what does html look like?

the html language is made up of tags that are enclosed in angle brakets, a webpage is completly enclosed within the html tags.
most html tags work in pairs
The first <html> tag tells the browser that it is reading a html document. The </html> tag with the / in it tells the browser that the html has ended
Take a look below
The first <HEAD> tag tells the browser that it is reading the head of a html document. The </HEAD> tag with the / in it tells the browser that the head part has ended
One more example
The first <title> tag tells the browser that it is reading the title of a html document. The </title> tag with the / in it tells the browser that the title has ended

The minimal webpage

Below is the code for a minimal webpage

make a webpage right now!

1. start up your notepad program or any text editor you have
2. now click the ‘Highlight All’ button above
3. now rightclick on the highlighted code
4. next select copy from the popup menu
5. now rightclick on your empty notepad page and selct paste from the popup menu
6. now, from notepad’s toolbar click ‘File’ and then ‘Save As…’
7. save your work as webpage.html

The .html is a file extension, its the bit that tells your computer that the file is a webpage *note: .htm is also acceptable.

look at your webpage

Now find the file you just saved, doubleclick on webpage.html and see your first webpage,
to return to this page after you have viewed your work just click the back button on your browser.

your page should look similar to this…

This is my very first webpage, aint i clever?

about the minimal webpage

<html>
<HEAD>
Nothing between the head tags is seen by people except the title
(if you look at the top left of your screen on your browsers titlebar you should see the title of this page ‘html tutorial and examples, learn html’)
there are lots of other things that we can put in the head section, like meta tags and javascripts but the only thing that goes in the head section of the page that need concern us now is the title
<title> my first web page </title>
</HEAD>

<body>
All the information that you want people to see goes between the body tags
</BODY>
</html>

formating the page

there are lots of html tags available for formatting a webpage
If we add the <CENTER> tag immediatly after the <BODY> tag then everything in the document will be centered, but remember to close the </CENTER> tag immediatly before the closing </BODY> tag

lets add a few line breaks too with the <BR> tag
°note the <BR> tag does not have a closing tag

<BODY>
<CENTER>
<BR>
<BR>
<BR>
This is my very first webpage, aint i clever?
</CENTER>
</BODY>

This is my very first webpage, aint i clever?

nesting tags

before moving on something should be said about nesting tags

the correct way to nest tags is like this…
<COLA><BUBBLEGUM></BUBBLEGUM></COLA> = correct

but you can expect allsorts of problems if you do this…
<COLA><BUBBLEGUM></COLA></BUBBLEGUM> = incorrect

Source: http://www.angelfire.com/fl5/html-tutorial/whatishtml.htm


« Previous PageNext Page »