Thursday, October 19, 2017

CLASS 13 - WHAT IS AN INPUT TYPE OR ONLINE TEXT BOX IN HTML USING <INPUT> TAG?

What is an input tag in HTML? How we create an input tag in HTML?

<input>, <form>, <action>, <submit>, these tags are used in creating an input type box or online text box on HTML page.

What is input type?

input type is a tag which is used to create an single line of online text box to enter the end user text to submit the online form. 

File Name:  "input.html"

<!DOCTYPE html>
<html>
<body>
<p>If you click the "Submit" button in the below form, the form-data will be sent to a page which will be defined in action="" in the form opening tag</p>

<form action="">
First name:
<input type="text" name="firstname" value="Anil Goud">
<br><br>
Last name:
<input type="text" name="lastname" value="Ramagouni">
<br><br>
<input type="submit" value="Submit">
</form>

</body>
</html>

OUTPUT:


Watch the below video for more details on the above program:





*************************************************************************

CLASS 12 - HOW TO CREATE AN IFRAME IN HTML USING <IFRAME>TAG?

What is an iframe in HTML? How we create iframe in HTML?

<iframe>, <frameborder>, <height>, <width>, <scrolling>, <align> these tags are used in creating an iframe section on HTML page.

What is iframe?

iframe is a part or section of any html page on which we can show the content of complete web page of the same page or external page as an information or as an advertisement.

File Name:  "iframes.html"

<html>
<body>
<h3>Here, I am showing an iframe which is a page from one of my other blogs about POWER POINT <br/><br/>
<a href="https://agrpowerpnt.blogspot.com" target="_blank">https://agrpowerpnt.blogspot.com</a>
</h3>
<iframe src="https://agrpowerpnt.blogspot.com" frameborder="1" height="450px" width="1200px" scrolling="yes">
<p>Your browser does not support iframes concept. </p>
</iframe>
</body>
</html>

OUTPUT:


Watch the below video for more details on the above program:





*************************************************************************

Tuesday, October 17, 2017

CLASS 11 - HOW TO CREATE DIV ELEMENT AND SPAN ELEMENT IN HTML OR BLOCK LEVEL ELEMENTS AND INLINE ELEMENTS IN HTML

What is Div element/Block level elements, Span element/Inline elements in html? How we create those things in HTML?

<div>, <span> elements/tags are used in HTML as a block level or inline elements in HTML.

File Name:  "span.html"

<html>
<head>
<title>Demo on <span> element</title>
</head>
<body>
<div>

In the HTML language, div element is a block level element that can be used as a container for grouping other HTML elements.

The div element has no special meaning. Except that, because it is a block level element, the browser will display a line break before and after it.

<span style="color:blue">Another common use of the div element, is for document/page layout. It replaces the "old way" of defining layout using tables.</span> the same text is used to see the change with div now...

<div style="color:blue">Another common use of the div element, is for document/page layout. It replaces the "old way" of defining layout using tables.</div>

Using table elements for layout is not the correct use of table.

The purpose of the table element is to display tabular data.

</div>
</body>
</html>

OUTPUT:



Watch the below video for more details on the above program:



*************************************************************************

CLASS 10 - HOW TO CREATE DEFINITION OR DESCRIPTION LIST IN HTML

What is definition list or description list in HTML? How we create those things in HTML?

<dl>, <dt>, <dd> elements/tags are used in HTML for creating definition or description list in HTML.

File Name:  "new 2.html"

<html>
<body>
<h2>A Definition or Description List:</h2><hr>
<dl>
<dt>Tea</dt>
<dd>- brown drink</dd>
<dt>Milk</dt>
<dd>- white drink</dd>
<dt>Coffee</dt>
<dd>- black drink</dd>
<dt>Water</dt>
<dd>- colorless drink</dd>
</dl>
</body>
</html>

OUTPUT:




Watch the below video for more details on the above program:



*************************************************************************

Monday, October 16, 2017

CLASS 9 - HOW TO CREATE ORDERED LIST OR NUMBERING LISTS IN HTML

What is ordered list or bullet points with some order in HTML? How we create those things in HTML?

<ol>, <li> start, type elements/tags are used in HTML for creating ordered bullet list in HTML.

File Name:  "9_3 nested orderde list.html"

<html>
<body>
<h2>An Ordered List:</h2><hr>
<ol>
<li>Milk
<ol type="A" start="1">
<li>Cow milk</li>
<li>Buffalo milk</li>
</ol>
</li>
<li>Tea
<ol type="i">
<li>Green Tea
<ol type="I">
<li>Japanese Green Tea</li>
<li>Chinese Green Tea</li>
<li>Srilankan/Ceylon Green Tea</li>
</ol>
</li>
<li>Regular Tea
<ol type="1" start="3">
<li>Japanese Green Tea</li>
<li>Chinese Green Tea</li>
<li>Srilankan/Ceylon Green Tea</li>
</ol>
</li>
</ol>
</li>
<li>Coffee
<ol type="a">
<li>cold coffee</li>
<li>Regular coffee</li>
</ol>
</li>
</ol>
<br/>
</body>
</html>

OUTPUT:




Watch the below video for more details on the above program:



*************************************************************************

Sunday, October 15, 2017

CLASS 8 - HOW TO CREATE UN-ORDERED LIST OR BULLET LIST (NESTED LIST) IN HTML

What is un-ordered list or bullet points in HTML? How we create those things in HTML?

<ul>, <li> tags are used in HTML for creating un-ordered bullet list in HTML.

File Name:  "new 2.html"

<html>
<body>
<h2>An Unordered Nested List:</h2><hr>
<ul>
<li>Milk
<ul>
<li>Cow milk</li>
<li>Buffalo milk</li>
</ul>
</li>
<li>Tea
<ul>
<li>Green Tea</li>
<li>Regular Tea</li>
</ul>
</li>
<li>Coffee
<ul>
<li>Cold coffee
<ul>
<li>Cold coffee1</li>
<li>Cold coffee2</li>
</ul>
</li>
<li>Hot coffee
<ul>
<li>Hot coffee1</li>
<li>Hot coffee2</li>
</ul>
</li>
</ul>
</li>
</ul>
<br/>
</body>
</html>

OUTPUT:



 Watch the below video for more details on the above program:



*************************************************************************

CLASS 7 - DIFFERENCES BETWEEN COLUMN SPANNING AND ROW SPANNING IN HTML.

What is colspan & rowspan? How we create those things in HTML?

<table>, <tr>, <th>, <td>, cell-spacing, cell-padding, col-span, row-span are used in HTML for padding and spacing in table.

File Name:  "New colspanrowspan.html"

<html>
<head>
<title>HTML TABLE PROGRAM</title>
</head>
<body>
<br/> <br/> <br/>
<table border="1" align="center" cellspacing="0" cellpadding="3">
<tr>
<th rowspan="2" bgcolor="lime">S.No</th>
<th rowspan="2" bgcolor="lime">Name</th>
<th colspan="3" bgcolor="lime">Age</th>
<th rowspan="2" bgcolor="lime">Department</th>
</tr>
<tr>
<th bgcolor="pink">above 18 to 25</th>
<th bgcolor="pink">above 25</th>
<th bgcolor="pink">above 50</th>
</tr>
<tr>
<td>1</td>
<td>Vijay</td>
<td>23</td>
<td>--</td>
<td>--</td>
<td>Consulting</td>
</tr>
<tr>
<td>2</td>
<td>Tom</td>
<td>--</td>
<td>28</td>
<td>--</td>
<td>HR</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>--</td>
<td>--</td>
<td>52</td>
<td>Finance</td>
</tr>
</table>
</body>
</html>

OUTPUT:




 Watch the below video for more details on the above program:




*************************************************************************

CLASS 6 - DIFFERENCES BETWEEN CELLSPACING AND CELLPADDING IN HTML

What is cell-spacing & cell-padding? How we create those things in HTML?

<table>, <tr>, <th>, <td>, cell-spacing, cell-padding elements are used in HTML for padding and spacing in table.

File Name:  "Table.html"

<html>
<head>
<title>HTML TABLE PROGRAM</title>
</head>
<body>
<br/> <br/> <br/>
<table border="1" align="center" width="200" cellspacing="50" cellpadding="100">
<tr>
<th bgcolor="yellow">S.No</th>
<th bgcolor="yellow">Name</th>
</tr>
<tr>
<th align="center" bgcolor="lime">1</th>
<th align="center" bgcolor="lime">Anil</th>
</tr>
<tr>
<th align="center" bgcolor="skyblue">2</th>
<th align="center" bgcolor="skyblue">Sunil</th>
</tr>
</table>
</body>
</html>

OUTPUT:


 Watch the below video for more details on the above program:




*************************************************************************

CLASS 5 - HTML PROGRAM ON TABLE USING TABLE TAG

What is table and how we create it in HTML?

<table>, <tr>, <th>, <td> elements are used in table creation in HTML.

File Name:  "Table.html"

<html>
<head>
<title>HTML TABLE PROGRAM</title>
</head>
<body>
<br/> <br/> <br/>
<table border="1" align="center" width="200">
<tr>
<th bgcolor="yellow">S.No</th>
<th bgcolor="yellow">Name</th>
</tr>
<tr>
<th align="center" bgcolor="lime">1</th>
<th align="center" bgcolor="lime">Anil</th>
</tr>
<tr>
<th align="center" bgcolor="skyblue">2</th>
<th align="center" bgcolor="skyblue">Sunil</th>
</tr>
</table>
</body>

</html>

OUTPUT:




Watch the below video for more details on the above program:




*************************************************************************

CLASS 4 - INLINE HYPER-LINKING OR BOOKMARKS IN HTML

What is inline hyperlinking or bookmarks in HTML?

<a>, <name> #top, #bottom elements are used in internal hyperlinking or bookmarks in HTML.

File Name:  "hyperlink.html"

<! -- Program on inline hyper-linking or bookmarks -- >

<html>
<head>
<title>
Inline hyperlink
</title>
</head>
<body>
<a href="#bottom" name="top">down</a>
<br/><br/>
hi hello how r you?.
<br/>
<br/><br/>
hi hello how r you?.
<br/><br/>
hi hello how r you?.
<br/><br/>
hi hello how r you?.
<br/><br/>
hi hello how r you?.
<br/><br/>
hi hello how r you?.
<br/><br/>
hi hello how r you?.
<br/><br/>
hi hello how r you?.
<br/><br/>
hi hello how r you?.
<br/><br/>
hi hello how r you?.
<br/><br/>
hi hello how r you?.
<br/><br/>
hi hello how r you?.
<br/><br/>
hi hello how r you?.
<br/><br/>
hi hello how r you?.
<br/><br/>
hi hello how r you?.
<br/><br/>
hi hello how r you?.
<br/><br/>
hi hello how r you?.
<br/><br/>
hi hello how r you?.
<br/><br/>
hi hello how r you?.
<br/><br/>
hi hello how r you?.
<br/><br/>
hi hello how r you?.
<br/><br/>
hi hello how r you?.
<br/><br/>
hi hello how r you?.
<br/><br/>
hi hello how r you?.
<br/><br/>
hi hello how r you?.
<br/><br/>
hi hello how r you?.
<br/><br/>
hi hello how r you?.
<br/><br/>
hi hello how r you?.
<br/><br/>
hi hello how r you?.
<br/><br/>
hi hello how r you?.
<br/><br/>
hi hello how r you?.
<br/><br/>
hi hello how r you?.
<br/><br/>
hi hello how r you?.
<br/><br/>
hi hello how r you?.
<br/><br/>
hi hello how r you?.
<br/><br/>
hi hello how r you?.
<br/><br/>
hi hello how r you?.
<br/><br/>
<a name="bottom" href="#top">top</a>
</body>
</html>


 Watch the below video for more details on the above program:




*************************************************************************

CLASS 3 - EXTERNAL HYPERLINKING CONCEPTS AND IMAGE HYPERLINKING IN HTML

What is external hyperlinking and graphical hyperlinking in HTML?

<a>, link="green" vlink="blue" alink="red" elements are used in external hyperlinking and graphical hyperlinking in HTML.

File Name:  "hyperlink.html"

<! -- Program on external hyperlink tag or anchor tag -- >

<html>
<head>
<title>
Hyperlink or anchor tag program
</title>
</head>
<body link="green" vlink="blue" alink="red">
<center>
<a href="http://www.google.com" target="_new"  title="Google">
<img src="flowers.jpg" title="Flowers" alt="Flowers" height="50" width="100" border="1" vspace="50" hspace="50">
</a>
</center>
</body>
</html>

Watch the below video for more details on the above program:



*************************************************************************

CLASS 2 - HTML PROGRAM ON TAGS like "BR, COMMENT, P, HR, IMAGE

This blog is all about the program on Html tags like comment tag, <P> tag, <br> tag, <hr> tag, <image> tag etc. This will be help full to Beginners to learn more about it.

File Name:  "demo.html"

<! -- Program on HTML PROGRAM ON TAGS like "BR, COMMENT, P, HR, IMAGE" -- >

<html>
<head>
<title>
Demo program on some basic tags like comment tag, p tag, br tag, hr tag, image tag etc.
</title>
</head>
<body bgcolor=" lime">
Hai how are you doing?. <br> <br>
Yeah I am doing good! <br> <br>
By the way how are you doing. <br> <br>
Yes also doing good!.
<p align="left">
<img src="Jpg image.jpg" alt="Tree" title="Tree" border="1" width="300" height="100">
</p>
<p align="center">
<img src="Gif image.gif" alt="Tree" title="Tree" border="1" width="300" height="100">
</p>
<p align="right">
<img src="Png image.png" alt="Tree" title="Tree" border="1" width="300" height="100">
</p>
</body>
</html>

Watch the below video for more details on the above program:




*******************************************************************

CLASS 1 - HTML TUTORIAL FOR BEGINNERS: HTML BASIC PROGRAM

What are <h1>, <h2>, <h3>, <h4>, <h5>, <h6> HTML Tags?

These <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> elements are used to create headings in descending order of importance where <h1> is the most important and <h6> the least important.

File Name:  "demo.html"

<html>
<head>
<title>Demo Page</title>
</head>
<body>
<h1>Hi Welcome to the first basic html program! </h1>
<h2>Hi Welcome to the first basic html program! </h2>
<h3>Hi Welcome to the first basic html program! </h3>
<h4>Hi Welcome to the first basic html program! </h4>
<h5>Hi Welcome to the first basic html program! </h5>
<h6>Hi Welcome to the first basic html program! </h6>
</body>
</html>

Watch the below video for more details on the above program:



*************************************************************************