Friday, April 6, 2012

Learn HTML Part-1

Hi! Friends!

How are you all. Today I will start part to part HTML Basics for you all. As we all know HTML is the heart of webpage. And it is the must necessary elements for building a web site. But often people avoid learning it thinking it's a difficult subject. But one cant imagine how easy it is. Just you have to remember some methods and design key. And it is not so complex as you are afraid of. So, don't worry and cheer up as I am starting to help you by giving the teaching to you.

My classes concludes:-

  • Everything in easy language.
  • Who wants to learn HTML as a new student, he or she gets it in a easy way.
  • Description of every tag with example.
  • After the Basics, discussion of advance Level of HTML.
  • Discussion of HTML Style in short way.
  • Discussion of HTML Form, Input and frame.
  • Discussion of using of fonts in HTML.
  • Color list according to the browser support.
So, why are you still worried! Just have patients and make your self a HTML designer within 3 days.

HTML   

The full meaning of HTML is [ Hyper Text Markup Language ]. In fact in reality it is not a program language but a Markup language which in short a group of Markup Tag. To elaborate Web page or web site it[HTML] uses Markup tags. You can create your own web page with HTML. As it is a popular Markup language to build a website, still it is the chosen topics for every designer. 

HTML HEADING  

Inside HTML headings are selected as <h1> to <h6>. Just follow the below steps to learn the headings.

1. Open your note pad and write down the following codes as it is here:

<html>
<body>
<h1> This is heading 1</h1>
<h2> This is heading 2</h2>
<h3> This is heading 3</h3>
<h4> This is heading 4</h4>
<h5> This is heading 5</h5>
<h6> This is heading 6</h6>

</body>
</html>

2. Now save the file renaming it as heading.html. 
3. Open the file in web browser. You can find the variations among the codes. Every heading has its own size.  
 See The results:

  

This is heading 1


This is heading 2


This is heading 3


This is heading 4


This is heading 5

This is heading 6
Now try Yourself.

HTML PARAGRAPH

Inside HTML Paragraphs are tagged as <p>......</p>. Noted the <...> is starting tag & </...> is closing tag. Text should be set between the starting tag and ending tag. Now follow the steps.....

1. Open the Note Pad.
2. Write down the below codes as it is given...::

<html>
<body>

<p> This is a paragraph </p>
<p> This is a paragraph </p>
<p> This is a paragraph </p>

</body>
</html>

3. Now save the file renaming as paragraph.html.
4. Open the file on browser and the result like below.........

This is a paragraph
This is a paragraph
This is a paragraph

Now try Yourself.

HTML LINK

Inside HTML Links are tagged wirh <a> ......</a> tag. Link is written inside this <a href = link> tags. And words to locate the link is written before </a>. Follow the below steps....:::::

1. Open the Note Pad.
2. Write down the following codes in the note pad like:

<html>
<body>

<a href="http://www.sylhetbazar.com"> This is a link</a>

</body>
</html>

3. Now save the file renaming as link.html.
4. Open the file with your browser and see the result like below...

Now try your self.

HTML IMAGE

inside HTML image files are tagged under <img>.  Now follow the steps....

1. Open your note pad.
2. Write down the following codes as.....

<html>
<body>

<img src="eureka_group.jpg" width="500" height="157"./>

</body>
</html>

3. You have to write the image name with extension in between src=" image.jpg ". And you have to write its width & height. Just you have to place the image in the same folder where you keep the html file.
4. Now the save the file renaming as eureka_group.html. And place the original image file to the same file where you save the image's html file. And the results will come like.......


Now Try yourself.    

No more today. Please comment on me about the class. Your comments help me to do better. See you on next class. Thank you.

No comments:

Post a Comment