Sunday, March 15, 2015

HTML Basic

Now we will see four example to understand HTML more precisely. Don't worry about the tags uses in those example. We will learn that step by step gradullay.

HTML Heading

Headings are define in HTML page with <h1> to <h6> tags . Follow the following steps to see the uses of Heading :

1. Open the notepad program
2. Write the following codes


<html>
<body>

<h1>This is the first      heading</h1>
<h2>This is the second heading</h2>
<h3>This is the third     heading</h3>
<h4>This is the fourth   heading</h4>
<h5>This is the fifth     heading</h5>
<h6>This is the sixth    heading</h6>

</body>
</html>

3. Save the file as heading.html
4. Open the  heading.html  file in web browser . You can see the following  result. The headings within different tags are shown in different sizes. You can show your headings as big or small in your browser by using these different tags.


HTML Paragraph

In HTML file the paragraphs are contained in the <p> tag . It starts with <p> tag and ends with </p>  (<p>........text.......</p>) . Text should put in those tags. To view the uses of paragraph take the following steps :-

1. Open the notepad program.
2. Write the following codes


<html>
<body>

<p>This is the first paragraph</p>
<p>This is the second paragraph</p>
<p>This is the third paragraph</p>

</body>
</html>

3. Now save the file as   paragraph.html
4. Open the file in a web browser. You can see the following result -


Please notice that there is a certain space between the lines.

HTML Link

In HTML file the links are determined with the <a> tag . It starts with <a> tag and ends with </a> tag. Text and links are put in those tags. Take the following steps to view the uses of links :-

1. Open the notepad program.
2. Write the following codes


<html>
<body>

<a href="http://webtutorialmania.blogspot.com">This is the link</a>

</body>
</html>

3. Now save the file as   link.html
4. Open the file in a web browser. You can see the following result -


You can see an underline under the text in blue color. A link is created here. If you click this link that website will be appear in the browser.

5. To add a link in a web page follow the above rule. The web site address of the link should put in the <a>  between the   href="..."  quotation mark. After this according to the rule, to close the tag use </a>  .  The clickable text is written between the starting and closing tags. For example  
<a href="http://webtutorialmania.blogspot.com">This is the link</a>   .

HTML Image

In HTML file the images are determined with the <img> tags. Take the following steps to view the uses of image :-

1. Open the notepad program.
2. Write the following codes


<html>
<body>

<img src="sampleimage.jpg" width="220" height="150" />

</body>
</html>

3. The image which you want to use write the name of the image with extension in the code between src="   "  the quotation mark. Write the Height and Width from the image properties. For example -

<img src="sampleimage.jpg" width="220" height="150" />

You can use any image instead the image which I use in the above code. Keep the image file in the folder where you save your page.

4. Now save your notepad file as test_image.html

5. Open the file in a web browser. You can see the following result


Posted by at No comments:
Labels:

Thursday, March 12, 2015

Introduction of HTML

HTML


You can build your own website with HTML . The full abbreviation of HTML is "Hyper Text Markup Language" . Actually it is not a programming language, it is markup language which is a combination of a set of Markup tags. To define a website or a webpage HTML uses this markup tags.

HTML Tags


Simply HTML markup tags are called HTML tags. Tags are keyword which are bounded within angel brackets by both sides ;  e.g. <html>  .  Generally tags appear in a pair ; e.g. <b> and </b> . 
The first tag of this pair is beginning tag and the second is ending tag. Those are also called opening tag and closing tag. It is very important that if you start a tag you have to use the the second closing tag ;  e.g.   <p>This is a Paragraph</p>  .

HTML Document = Web Page


Actually HTML documents define web page. These documents contains HTML tags and plain text. These documents are called web page . To display the webpage by reading or decoding the HTML document we use the web browser. Browser does not show the HTML tags rather than the contents are translated.

See the following example :

<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph</p>
</body>
</html>

Please open the notepad program of your computer . The most easy way of opening notepad program  is click the RUN from the START menu and write notepad in the appeared window and press ENTER .



Now write down the above text (code) in the notepad and save it in any name. After this rename it as .htm or .html at the end of the name . Here I have saved the notepad file as  page.html


Result :

Open the above file (page1.html) with any web browser . After opening the file it will display the following page. You can assume  this page as your first developed web page. This is very small page but very effective. It will help to learn HTML . The following result will display after opening the page.


Explanation of This Example :

<html> and </html>  - the text between these tags define the web page .
<body> and </body> -  the text between these tags are displayable page content.
<h1> and </h1> - the text between these tags are displayed as heading.
<p> and </p> - the text between these tags are displayed as paragraph.

What is Needed to Learn HTML ?

To learn HTML you do not need any renown  HTML editor, web server or website. You can learn HTML with the simple text editor 'notepad' . And this the best way to learn HTML. Though professional web developers use big HTML editor like dreamweaver or frontpage to develop website rather than writing plain text. But there is no alternate way to use notepad to prepare your basic foundation.
Posted by at 1 comment:
Labels:
Subscribe to: Posts (Atom)