Oh Yes we do have made a lot of stuff easy with WYSIWYG (What-You-See-Is-What-You-Get) editors on almost all community sites... & i am using one of these kids right now. But there is a lot of stuff which need some basic coding knowledge.
Well, this post would simplify all of that in 10 html tags that everyone should know.
These tags may be useful to people who publish articles on various sites, write blog posts or even edit their profiles on the various social networking sites.
One of the amazing things you could do using these is put all kinds of HTML boxes in your facebook profile with any cool stuff you want in them. These maybe pictures or youtube videos ...
And yes, you dont need to know what html is, how it works & what it does. Just use the tags whenever you need them. If you want to know more about web design and html, you can check out other posts here or elsewhere.
Ok, All you need to know is that every tag perform a specific function & each tag looks something like <tag> where tag would be the name of the tag. Most of the tags need to be closed once they have performed their respective function. To close a tag we use </tag>
So, if i want my name in bold letters, i would use the bold tag which is <b>. Hence, <b>Rishabh Dev</b> shows my name in bold.
Well, lets just begin with the tags...
1. The HTML tag <html>
To write a piece of html code, you will first need to open the <html> tag. When you're done with your coding, you can close the html tag </html> Whatever you write outside the tag is not included the code.
I hope you realize thats how you are able to see the tags here & not the executed tags. Eg: above you can see <b>Rishabh Dev</b> & not Rishabh Dev because the former is outside the html tag.
So everything html comes within <html>.....</html>
2. The HEAD tag <head>
You can almost divide a html page into two categories-head & body. The head includes information about the page... The most important(as of now) being the title tag.
<title>...</title> is the title of your page & appears at the top of the browser window.
And this is where the title comes up...
Remember that the title tag can only be used inside the head tag.
Hence the whole thing would look like...
<head><title>Facebook | Rishabh Dev</title></head>
It would give the above result.
4. The BODY tag <body>
This is the second part of your html page. All the tags below come inside the <body> tag.
<body>...everything else...</body>
Hence, a basic html page would be coded as below...
<html>
<head><title>Hello World</title></head>
<body>...content/images/links/paragraphs/etc...</body>
</html>
4. The paragraph tag <p>
Most mini editors wont have this one. This is the tag which you need to use whenever you're writing stuff in paragraphs. So, a paragraph would look like...
<p>...content here...</p>
So, our </p> tag ends the paragraph. Then, you may begin a new one by using the <p> tag again.
5. The center tag <center>
Using the center tag you can align your text or image or whatever to the center of the page.
So anything between <center>...</center> tag would show in the center.
6. The image tag <img src="">
This tag is the most popular one. To insert an image into your text, just use the image tag.
The 'src' here represents 'source' so you will need an image url in the double inversions... Something like..
<img src="http://i48.tinypic.com/qrd8nq.jpg">
Now this is a tag you don't need to close. So it would come out to be something like...
Here, src is called an attribute of the image tag. You can use other attributes of the image tag like width & height.
Using these , we can display a particular photo in different sizes. For example, we can reduce the size of the image to 400x300 using the following:
<img src="http://i48.tinypic.com/qrd8nq.jpg" height="400" width="300">
You can make a thumbnail of it by giving it a smaller size lie...
<img src="http://i48.tinypic.com/qrd8nq.jpg" height="300" width="200">
It could also be made into an icon by decreasing the size further.
7. The Break Rule <br>
We use this tag to leave a line. Just put a <br> & it leaves a line. No closing tag again!
8. The Horizontal Rule <hr>
Think your content is getting mixed up? Well, you can draw a line wherever you want using the <hr> tag.
Here is one just to show you guys.
9. The link tag <a>
This is used when you're writing content & you want to link it to your own website. Lets say we have something like..
Make food...Not war
And you have a recipe site you want the word food to link to...You would then use...
Make <a href="http://recipesite.com">food<a>, Not War
And this would show as
Make food, Not War.
10. The font tag <font>
This changes the font size, color(in html, its color & not colour) & face(as far as we are concerned). This again is done by giving values to different attributes of the tag.
Lets say you want to display Durofy in various styles...
<font size="10" color="green">Durofy</font>
would show...
Durofy
Similarily,
<font size="8" color="blue" >Durofy</font>
would give us...
Durofy
Well, if you're not sure of the default size, you could just use...
<font size="+1"> or <font size="+2"> which would increase the default size by 1 or 2.
...& we're done!
So, where do you practice...
Open Notepad...enter all the code you want inside the <html></html> tags...save the faile as name.html. Open this file with any internet browser & have fun! If you still have any questions...leave me a comment! Good Luck!
