[Part-13] HTML : Div Tag

Read my previous tutorial if you have not read yet.

In this post you will learn about <div> tag, it is used to define a section in an webpage and group the elements to arrange them with CSS.


Let's Start: 

• Below are the HTML code to see the use of <div> tag. You have to save it and then run the saved file.
• After running the file you will noticed that some text appears in blue color, this happens because we have written elements inside the <div></div> and we have applied CSS on <div> to change the color.
• We will discuss CSS very soon.

HTML Code :-

Read More

[Part-12] HTML : Iframes

If you have not read my previous posts of HTML then read it for better understating of today's HTML post.

In today's post I will you about <iframe></iframe> tag. This tag is used to open more than one webpage on the same webpage.

<iframe></iframe> tag is used if we want to display another page on the same webpage.

Now follow the below steps to see the Iframes working :-

• Open notepad and notepad++.
• Then write or copy and paste below given HTML code.
• Now save it as anyname.html.
• Run the saved file with browser.
• You will notice that another page is displaying on the same webpage, this is done by using <iframe></iframe>.
• You have also noticed that Swifter Travel page is opening on the same page if you want to change the page address then change the highlighted url with your url in the given HTML code, <iframe src="http://swiftertravels.tk" name="iframe_a" width="500" height="300"></iframe>.
• We have used width="500" and height="300" to give height and width to the iframe.
• We have also used frameborder="0" if we set its value to "0" then the border will be removed.
• You have also seen that when you click on Complete Programming Tutorials it opens in the Iframe this happens because the name="iframe_a" and target="iframe_a" are same.
• When you click on Complete Programming Tutorials it open Complete Programming Tutorials page if you want to open other page then change the highlighted url <a href="http://programmingskills.blogspot.in/" target="iframe_a">.

HTML Code :-

For more help see the below video :-

If you have any doubt post in the comment box.

For more updates like us on Facebook.

Read More

[Part-11] HTML : Frame Set

If you have not read my previous posts of HTML then read it for better understating of today's HTML post.

In today's post I will you about <frameset> tag. This tag is used to open more than one webpage on the same webpage.

Now follow the below steps to see the frameset's working :-

• Open notepad or or notepad++.
• Then write or copy and paste the below given HTML code.
• After that save as anyname.html.
• Now open the saved file with browser.
• When you opened the file you have noticed that more than one webpage are opened on the same page, this is done using the <frameset>.
• You have also seen that pages are open column wise, if you want to open it row wise you can also do this by just changing in some text in the given code.
• If you want to show page rows wise then in the give code just change the highlighted text <frameset cols="25%,*,25%"> with this rows.
• Then save it and run it, now pages are opened row wise.
• If you want to change the size or rows or cols then changed the highlighted text<frameset cols="25%,*,25%">  with the size you want to give, you have also notice that star (asterisk) symbol is used, when you used this symbol it automatically takes the remaining size, for example we give size as "25%,*,25%" it means that two columns are of 25% size and we put star (asterisk), here by using this symbol it takes the remaining size for the other column. 
• If you want to open other webpage then change this highlighted text <frame src="http://programmingskills.blogspot.in/"> in the given HTML code.
• Then save it and run it.
• Now your webpages have changed according to the links you have  put in the given HTML code.

HTML Code :-

For more help see the below video :-

If you have any doubt post in the comment box.

For more updates like us on Facebook.

Read More

[Part-4] HTML : Inserting Image

Today I will show you how to insert image on webpage using html.

We can insert the image using given below syntax :-

• <img src="url/source" alt="Any Text" width="Image Width" height="Image Height">
• In src we have to write the address of the image, alt give information about image when image doesn't load successfully,width and height is used to give width and height to the picture.
• Copy the below code in notepad or notepad++ to see how it work's.

HTML Code :-

<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Way to insert image on a webpage.</h1>
<b><i><p>Below is a image :-</b></i></p>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7XDtQAFwTc6tkVB1E0gXiFbxsCWTvrLcI_h2RrDrw2SShzBT0KFqgg2cC6x7wky_dx_9s77_aMhXQy0NUXOox5NoibyHbycz00i0v1muKTCJBQkCf1Jo17brZiXxmUFOFvRogY2Tkqbs/s320/engagelikeusonfacebook.jpg" alt="Programming Skills" width="500px" height="500px">
</body>

</html>

For more help see below video :-

Read More

[Part-3] HTML : Hyperlink Tutorial

In this part I will tell you about HTML Hyperlink.

What is hyperlink and how to add hyperlink?

• Basically we can say that hyperlink is a word or it can be an image on which when we click we jumps up to the another page for example below is a hyperlink when you click on it you will jump to another page.
• Hyperlink Click on it.
• We can add the hyperlink using the below syntax.
• <a href="url">Any Name</a>

HTML Code :-

<html>

<head>

<title>Use of Anchor Tag</title>

</head>

<body>

<h1>Use of Anchor Tag</h1>

<br>

<p>In this tutorial you will learn that what is hyperlink and how to add the hyperlink?</p>

<hr>

<!-- Below is a hyperlink -->

<a href="http://programmingskills.blogspot.in">Complete Programming Tutorials</a>

</body>

</html>

Now see the below video to learn the use of hyperlink :-

Read More

[PART-2] HTML : Tags

Read my previous tutorial of HTML for better understanding of HTML

Today I will tell more about HTML tags and there uses. In my  previous tutorial of HTML I said that there are some tags which doesn't need closing tag  such type of tags are called unpaired tags or self-closing tags for example :- <hr> and <br>.


Now we will discuss some HTML tag :-

• <h1></h1> this tag is used to show the heading,  we can define this tag from <h1> to <h6>, priority of <h1></h1> is higher and <h6></h6> is less.
• <hr> this tag is used to create the horizontal.<br> this tag is used to create line break.
• <!-- Comment --> tag this is used to define comment, anything written in this tag will not be displayed on webpage.
• <p> this tag is used to create the paragraph.
• <b> this tag is used to give bold style to the text.
• <i> this tag is used to give italic style to the text.

HTML Code :-

<html>

<head>

<title>My First HTML Page</title>

</head>

<body>

<h1>This is written using the heading 1 tag.</h1>

<h2>This is written using the heading 2 tag.</h2>

<h3>This is written using the heading 3 tag.</h3>

<h4>This is written using the heading 4 tag.</h4>

<h5>This is written using the heading 5 tag.</h5>

<h6>This is written using the heading 6 tag.</h6>

<br>

<p>Before this br tag is used for line break and this paragraph is written using the paragraph tag.</p>

<hr>This horizontal line is create using the hr tag.

<i><b><p>In this bold and italic tag is used</b></i></p>

<!-- This tag will not be displayed on webpage -->

</body>

</html>

Now see the below video to learn the use of these tags :-

Read More

[PART-1] HTML : Introduction

In first part I will tell you a little bit about HTML after that in other parts I will tell more about HTML.

Requirements to learn HTML :-

• You can use notepad or better to use notepad++ download it from here.
• Then install it or if you want to use notepad press Win+R a window will appear in that window type notepad and hit enter.
• Now you are set to write your HTML coding.

First HTML program :-

• Open notepad or notepad++.
• In that write or copy the code as shown below.

<html>

<head>

<title>My First HTML Page</title>

</head>

<body>

<h1>My First HTML Web Page</h1>

<p>This is my first web page created using the HTML</p>

</body>

</html>

• Now press ctrl+s and save as anyname.html or anyname.htm better to save as anyname.html.
• Then open the file you save using the browser.
• Now you will get output as shown in below :-

• In this coding <title></title>show the title of your webpage and it must be placed between the <head></head> and after that other coding will be written in <body></body>, <h1></h1> used to give the heading on the page and the <p></p> is used to write the paragraph.
• Note that every open tag has a closing tag but there are some tags which don't have closing we will discuss about that tag in second part.

For more help see below video :-

I hope you will like the article if you have any question or suggestion post in the comment box.

Read More