EDUTAINMENT: 2016

Monday, 1 February 2016

Nested list - HTML Programs

<html>
<body>
<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>

</body>
</html>

Output

A nested List:

Coffee
Tea
- Black tea
- Green tea
Milk

Different types of unordered Lists - HTML Programs

<html>
<body>

<p><b>Note:</b> The type attribute of the ul tag is deprecated in HTML 4, and is not supported in HTML5.
Therefore we have used the style attribute and the CSS list-style-type property, to define different types of unordered lists below:</p>

<h4>Disc bullets list:</h4>
<ul style="list-style-type:disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>

<h4>Circle bullets list:</h4>
<ul style="list-style-type:circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>

<h4>Square bullets list:</h4>
<ul style="list-style-type:square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>

</body>
</html>

Output

Note: The type attribute of the ul tag is deprecated in HTML 4, and is not supported in HTML5. Therefore we have used the style attribute and the CSS list-style-type property, to define different types of unordered lists below:

Disc bullets list:

Apples
Bananas
Lemons
Oranges

Circle bullets list:

Apples
Bananas
Lemons
Oranges

Square bullets list:

Apples
Bananas
Lemons
Oranges

Saturday, 30 January 2016

Different types of ordered lists - HTML Programs

<html>
<body>
<h4>Numbered list:</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

<h4>Letters list:</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

<h4>Lowercase letters list:</h4>
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

<h4>Roman numbers list:</h4>
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

<h4>Lowercase Roman numbers list:</h4>
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

</body>
</html>

Output

Numbered list:

Apples
Bananas
Lemons
Oranges

Letters list:

Apples
Bananas
Lemons
Oranges

Lowercase letters list:

Apples
Bananas
Lemons
Oranges

Roman numbers list:

Apples
Bananas
Lemons
Oranges

Lowercase Roman numbers list:

Apples
Bananas
Lemons
Oranges

An ordered list - HTML Programs

<html>
<body>
<h4>An Ordered List:</h4>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>

Output

An Ordered List:

Coffee
Tea
Milk

An unordered list - HTML Programs

<html>
<body>

<h4>An Unordered List:</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

</body>
</html>
Output

An Unordered List:

Coffee
Tea
Milk

How to link to a mail message (will only work if you have mail installed) - HTML Programs

<html>
<body>

<p>
This is an email link:
<a href="mailto:someone@example.com?Subject=Hello%20again">
Send Mail</a>
</p>

<p>
<b>Note:</b> Spaces between words should be replaced by %20 to ensure that the browser will display the text properly.
</p>

</body>
</html>

Output

This is an email link: Send Mail
Note: Spaces between words should be replaced by %20 to ensure that the browser will display the text properly.

Break out of a frame - HTML Programs

<html>
<body>
<p>Locked in a frame?</p>
<a href="http://www.google.com/" target="_top">Click here!</a>
</body>
</html>

Output

Locked in a frame?
Click here!

Jump to another part of a document (on the same page) - HTML Programs

<html>
<body>
<p>
<a href="#C4">See also Chapter 4.</a>
</p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2><a id="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>

</body>
</html>

Output