¤ This again is a very basic tutorial. I made it for beginners, assuming you are one, this is going to teach you about some of the basic tags used in html coding.
¤ I suggest you to first read "making a webpage" tutorial before learning about all the tags, you will understand better that way!
Requirements: Nothing actually or if you are going to try it whole learning, you need notepad and browser and some practice.
Note: Html coding is not case sensitive, you may use upper or lower case, though i prefer the lower case , the choice is yours.
Important html tags
Without these tags html document won't work!
• The first tag which marks the begining of an htmk document is
<html>
Everything else , all the tags and EVERYTHING that has to be shown on the webpage must come between these two tags. Here is the closing tag,
</html>
• The next tag is the head tag. This basically holds the title tags in between, also it has the link to css files is they are external and the style command if the css is included with the html document..Don;t worry about thes for now,
It also carries some javascripts if theer are any. Well for now you must remember that it contains the title tags !
<head>
between these comes the &title> TITLE </title> tags (see below) The closing tag is
</head>
• Then comes the title tag which defines the title of a webpage, the title you see on top of the browser window. It is contained within the <head> & </head> tags.
<title> Title comes between these tags </title>
Like this website has the title
»Bouncy-Bubbles.NET++
• Then comes the body tag. The body tag contains everything that you actually see on the webpage. Without these tags yor page is nothing but a plain white board!
<body>
the closing tag is
</body>
Frequently used html tags They are used every now and then so you must remember these!
• The first one which I and anything everyone uses the most is the line break tag,
<br>
This tag give the text or anything else a line break, which is like hitting enter key except that hitting the enter key wont make a difference in the html coding! The text/image/anything moves one line downwards
when you put this tag either in the end of the previous line or in the begining of next like or in middle lol
For example:
Before:
The line break tag is very handy and most frequently used. Its one of those tags which don't have a closing tag with them!
Add the break tag
The line break tag is very handy and most frequently used.
<br>
Its one of those tags which don't have a closing tag with them!
After:
The line break tag is very handy and most frequently used.
Its one of those tags which don't have a closing tag with them!
So I hope you get it now, Important > there is no closing tag for the line break tag you just put <br> tag wherever you want a line break. Easy ?
• Next the basic tags you use to change the appearance of the text on the webpage. To make the text bold, italic etc.
Bold : <b> Text </b> Will give you »
Text
Italic: <i> Italic </i> Will give you »
Italic
Underline: <u> Underline </u> Will give you »
Underline
Strikeout: <s> Not commonly used though </s> Will give you »
Not commonly used though
Typewriter fonts: <tt> Typewriter </tt> Will give you »
Typewriter
Now you can use these tags all together in combination. For example if you want to make text bold, italic and underlined.
<b><i><u> I am bold, italic and underlined. </u></i></b>
Will give you this »
I am bold, italic and underlined.
• Now if you want to place the text in the center.. you use this tag
<center>
Anything between these two tags on page (image/text etc) Will be shifted to the center of the page/table.
</center>
• You want to change the font size and color ? This is how you do it.
<font color="#FF0000"> Something </font> Will give you this »
Something
<font face="arial"> something </font> Will give you this »
something
<font size="2"> Something </font> Will give you this »
Something
You can use all these tags together, for example :
<font face="arial" color="#FF0000" size="2"> Example </font>
Will give you this »
Example
• Now you would want to add some imags to your page.. Here is how to do it
<img src="imagefilename.extension">
image file name : the name of your image file! (duh!)
extension : extension of the file/ file type such as .jpg .bmp .gif .png
Note: the path to you image file name should be correct or else instead of the image an ugly red cross will show up on your page!
If you are trying this tutorial offline you should keep the image files in the same folder where you put the .html file or make a folder inside it for example
if you make a folder named images inside the main folder which contains .html file the path for your image file will be something like this
C:\Documents and Settings\something\Desktop\mainfolder\images\picture.gif
Example: <img src="http://bouncy-bubbles.net/images/tuts/blink.gif"> Gives you
So you get it ? And on web too you need to put the correct file path
• Adding link to your page.. some of these tags are reapeated as Nica has soecial tutorials for them, Check them out. I am including them here because I think every
webpage has links so there ^_^
<a href="http://www.yahoo.com"> Yahoo! </a> Will generate a link like this »
Yahoo!
Now do you want this link to open in the same window or in a new one ? Here is what to do for both cases :
1.) Open the link in same window : For this you don't have to do anything just use the tag show above as it is.
2.) Open link in new window : This is what you do,
<a href="http://www.google.com" target="_blank"> Google! </a>
which will generate a link to google that opens in a new window like this »
Google
Note: Some people put "new" as the target instead of "_blank" Its same thing except that if you put many links on page and put the target "new" for all those links, they will
though open in a different window (other than the parent window) but all those links will open in that one different window only (huh *confused*). Well "_blank" opens up a new browser window
for every link where the target is "_blank" and "new" opens the link in different window and all the links with target"new" open in that one window ! (arghh I hope you understand >_<) So its your choice, I prefer "_blank".
• Making email links
<a href="mailto:youremailaddress@domain.com"> E-Mail me! </a>
Will generate an email link like this »
E-Mail me!
• Alt codes/ text. What is that ? Well hover this text link ( bring you cursor over it and wait for few econds) »
Bouncy-Bubbles.NET So you notice the small box kind of thing
that drops down when you hover the mouse..thats called alt text. Its a way of telling your visitors a little about the link they are just going to click. Or maybe a picture ? Yes you can use these to describe your images too. Here is how to do it :
<a href="http://bouncy-bubbles.nett" target="_blank" title="Bouncy-Bubbles.NET"> Bouncy-Bubbles.NET
Will give you this »
Bouncy-Bubbles.NET
To put alt text for on images :
<img src="http://bouncy-bubbles.net/images/tuts/doggie.gif" alt="This dog is so cute!">
Gives you (hover to see)»
¤ To find more about links/image links etc. Please read the link tutorials written by Nica.
• Horizontal rule. Like the line break element it has no closing tag. Here is how you get it,
<hr> which gives you »
I think this makes the page look ugly. To change the look of horizontal rule and have fun with the tag:
<hr noshade>
Which gives you »
Now change the color og the rule
<hr noshade color="FF0000">
Which gives you »
Lets change the size of this rule ? What about the width ?
<hr noshade color="FF0000" size="4px" width="100px">
Gives you »
Keep playing with these varaibles and have fun with the otherwise boring <hr> tag!
• I can't think of any other tags that are used frequently though I am sure theer are tons of them left.
Okay another tag is :
<p> This is paragraph tag..anything between this tag will become a paragraph, ie: it will start after 2 line breaks and leave a gap of 2 line breaks when it ends
</p>
I guess that is all for the basic html tags. This tutorial is more helpful when read after or alongwith the "making a webpage" tutorial.
I will be writing a tables tutorial soon because I think tables themselves are hard to understand for a beginner, so can't be included under basic tags.
« Back
