<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
Showing posts with label HTML Programs. Show all posts
Showing posts with label HTML Programs. Show all posts
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
<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
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>
<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
<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
<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
<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.
<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!
<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>
See also Chapter 4.
<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
Chapter 1
This chapter explains ba bla blaChapter 2
This chapter explains ba bla blaChapter 3
This chapter explains ba bla blaChapter 4
This chapter explains ba bla blaChapter 5
This chapter explains ba bla blaChapter 6
This chapter explains ba bla blaChapter 7
This chapter explains ba bla blaChapter 8
This chapter explains ba bla blaChapter 9
This chapter explains ba bla blaChapter 10
This chapter explains ba bla blaChapter 11
This chapter explains ba bla blaChapter 12
This chapter explains ba bla blaChapter 13
This chapter explains ba bla blaChapter 14
This chapter explains ba bla blaChapter 15
This chapter explains ba bla blaChapter 16
This chapter explains ba bla blaChapter 17
This chapter explains ba bla blaOpen link in a new browser window - HTML Programs
<html>
<body>
<a href="http://www.google.com" target="_blank">Visit Google.com!</a>
<p>If you set the target attribute to "_blank", the link will open in a new browser window/tab.</p>
</body>
</html>
Output
Visit Google.com!
If you set the target attribute to "_blank", the link will open in a new browser window/tab.
<body>
<a href="http://www.google.com" target="_blank">Visit Google.com!</a>
<p>If you set the target attribute to "_blank", the link will open in a new browser window/tab.</p>
</body>
</html>
Output
If you set the target attribute to "_blank", the link will open in a new browser window/tab.
How to create hyperlinks - HTML Programs
<html>
<body>
<p>
<a href="http://www.google.com/">HTML Tutorial</a> This is a link to a page on this website.
</p>
<p>
<a href="http://www.google.com/">Google</a> This is a link to a website on the World Wide Web.
</p>
</body>
</html>
Output
HTML Tutorial This is a link to a page on this website.
Google This is a link to a website on the World Wide Web.
<body>
<p>
<a href="http://www.google.com/">HTML Tutorial</a> This is a link to a page on this website.
</p>
<p>
<a href="http://www.google.com/">Google</a> This is a link to a website on the World Wide Web.
</p>
</body>
</html>
Output
Google This is a link to a website on the World Wide Web.
Make a hyperlink of an image - HTML Programs
<html>
<body>
<p>Create a link of an image:
<a href="http://www.google.com/">
<img src="smiley.gif" alt="HTML tutorial" width="32" height="32"></a></p>
<p>No border around the image, but still a link:
<a href="http://www.google.com/">
<img border="0" src="smiley.gif" alt="HTML tutorial" width="32" height="32"></a></p>
</body>
</html>
Output
Create a link of an image:
No border around the image, but still a link:
Note: Due to inclusion of code to blogpost, images not able to display. But the code will work properly
<body>
<p>Create a link of an image:
<a href="http://www.google.com/">
<img src="smiley.gif" alt="HTML tutorial" width="32" height="32"></a></p>
<p>No border around the image, but still a link:
<a href="http://www.google.com/">
<img border="0" src="smiley.gif" alt="HTML tutorial" width="32" height="32"></a></p>
</body>
</html>
Output
Create a link of an image:
No border around the image, but still a link:
Note: Due to inclusion of code to blogpost, images not able to display. But the code will work properly
Tuesday, 17 November 2015
Let the image float to the left/right of a paragraph - HTML Programs
<html>
<body>
<p>
<img src="smiley.gif" alt="Smiley face" style="float:left" width="32" height="32"> A paragraph with an image. The image will float to the left of this text.
</p>
<p>
<img src="smiley.gif" alt="Smiley face" style="float:right" width="32" height="32"> A paragraph with an image. The image will float to the right of this text.
</p>
<p><b>Note:</b> Here we have used the CSS "float" property to align the image; as the align attribute is deprecated in HTML 4, and is not supported in HTML5.</p>
</body>
</html>
A paragraph with an image. The image will float to the left of this text.
A paragraph with an image. The image will float to the right of this text.
Note: Here we have used the CSS "float" property to align the image; as the align attribute is deprecated in HTML 4, and is not supported in HTML5.
<body>
<p>
<img src="smiley.gif" alt="Smiley face" style="float:left" width="32" height="32"> A paragraph with an image. The image will float to the left of this text.
</p>
<p>
<img src="smiley.gif" alt="Smiley face" style="float:right" width="32" height="32"> A paragraph with an image. The image will float to the right of this text.
</p>
<p><b>Note:</b> Here we have used the CSS "float" property to align the image; as the align attribute is deprecated in HTML 4, and is not supported in HTML5.</p>
</body>
</html>
Output
A paragraph with an image. The image will float to the left of this text.
A paragraph with an image. The image will float to the right of this text.
Note: Here we have used the CSS "float" property to align the image; as the align attribute is deprecated in HTML 4, and is not supported in HTML5.
Note: Due to inclusion of code to blogpost, images not able to display. But the code will work properly
Aligning images - HTML Programs
<html>
<body>
<h4>Image with default alignment (align="bottom"):</h4>
<p>This is some text. <img src="smiley.gif" alt="Smiley face" width="32" height="32"> This is some text.</p>
<h4>Image with align="middle":</h4>
<p>This is some text. <img src="smiley.gif" alt="Smiley face" align="middle" width="32" height="32"> This is some text.</p>
<h4>Image with align="top":</h4>
<p>This is some text. <img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32"> This is some text.</p>
<p><b>Note:</b> The align attribute is deprecated in HTML 4, and is not supported in HTML5. Use CSS instead.</p>
</body>
</html>
Output
This is some text.
This is some text.
This is some text.
Note: The align attribute is deprecated in HTML 4, and is not supported in HTML5. Use CSS instead.
<body>
<h4>Image with default alignment (align="bottom"):</h4>
<p>This is some text. <img src="smiley.gif" alt="Smiley face" width="32" height="32"> This is some text.</p>
<h4>Image with align="middle":</h4>
<p>This is some text. <img src="smiley.gif" alt="Smiley face" align="middle" width="32" height="32"> This is some text.</p>
<h4>Image with align="top":</h4>
<p>This is some text. <img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32"> This is some text.</p>
<p><b>Note:</b> The align attribute is deprecated in HTML 4, and is not supported in HTML5. Use CSS instead.</p>
</body>
</html>
Output
Image with default alignment (align="bottom"):
This is some text. This is some text.Image with align="middle":
This is some text. This is some text.Image with align="top":
This is some text. This is some text.Note: The align attribute is deprecated in HTML 4, and is not supported in HTML5. Use CSS instead.
Note: Due to inclusion of code to blogpost, images not able to display. But the code will work properly
Insert images - HTML Programs
<html>
<body>
<p>
An image:
<img src="html/home.png" alt="home" width="32" height="32"></p>
<p>
A moving image:
<img src="smiley.gif" alt="you are the best" width="48" height="48"></p>
<p>
Note that the syntax of inserting a moving image is no different from a non-moving image.
</p>
</body>
</html>
Output
An image:
A moving image:
Note that the syntax of inserting a moving image is no different from a non-moving image.
Note: Due to inclusion of code to blogpost, images not able to display. But the code will work properly
<body>
<p>
An image:
<img src="html/home.png" alt="home" width="32" height="32"></p>
<p>
A moving image:
<img src="smiley.gif" alt="you are the best" width="48" height="48"></p>
<p>
Note that the syntax of inserting a moving image is no different from a non-moving image.
</p>
</body>
</html>
Output
A moving image:
Note that the syntax of inserting a moving image is no different from a non-moving image.
Note: Due to inclusion of code to blogpost, images not able to display. But the code will work properly
Wednesday, 3 June 2015
Insert horizontal lines - HTML Programs
<html>
<body>
<p>The hr tag defines a horizontal rule:</p>
<hr><p>This is a paragraph</p>
<hr><p>This is a paragraph</p>
<hr><p>This is a paragraph</p>
</body>
</html>
Output
This is a paragraph
This is a paragraph
This is a paragraph
How to mark deleted and inserted text - HTML Programs
<html>
<body>
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
<p>Notice that browsers will strikethrough deleted text and underline inserted text.</p>
</body>
</html>
Output
My favorite color is blue red!
Notice that browsers will strikethrough deleted text and underline inserted text.
<body>
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
<p>Notice that browsers will strikethrough deleted text and underline inserted text.</p>
</body>
</html>
Output
Notice that browsers will strikethrough deleted text and underline inserted text.
Text direction - HTML Programs
<html>
<body>
<p>
If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl):
</p>
<bdo dir="rtl">
Here is some Hebrew text
</bdo>
</body>
</html>
Output
If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl):
Here is some Hebrew text
<body>
<p>
If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl):
</p>
<bdo dir="rtl">
Here is some Hebrew text
</bdo>
</body>
</html>
Output
Here is some Hebrew text
Tuesday, 26 May 2015
Abbreviations and acronyms - HTML Programs
<html>
<body>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<p>Can I get this <abbr title="as soon as possible">ASAP</abbr>?</p>
<p>The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.</p>
</body>
</html>
Output
The WHO was founded in 1948.
Can I get this ASAP?
The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.
<body>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<p>Can I get this <abbr title="as soon as possible">ASAP</abbr>?</p>
<p>The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.</p>
</body>
</html>
Output
Can I get this ASAP?
The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.
Insert contact information - HTML Programs
<html>
<body>
<address>
Written by W3Schools.com<br>
<a href="mailto:us@example.org">Email us</a><br>
Address: Box 564, Disneyland<br>
Phone: +12 34 56 78
</address>
</body>
</html>
Output
Written by W3Schools.com
Email us
Address: Box 564, Disneyland
Phone: +12 34 56 78
<body>
<address>
Written by W3Schools.com<br>
<a href="mailto:us@example.org">Email us</a><br>
Address: Box 564, Disneyland<br>
Phone: +12 34 56 78
</address>
</body>
</html>
Output
Written by W3Schools.com
Email us
Address: Box 564, Disneyland
Phone: +12 34 56 78
Different computer-output tags - HTML Programs
<html>
<body>
<code>Computer code</code>
<br>
<kbd>Keyboard input</kbd>
<br>
<samp>Sample text</samp>
<br>
<var>Computer variable</var>
<br>
<p><b>Note:</b> These tags are often used to display computer/programming code.</p>
</body>
</html>
Output
Keyboard input
Sample text
Computer variable
Note: These tags are often used to display computer/programming code.
<body>
<code>Computer code</code>
<br>
<kbd>Keyboard input</kbd>
<br>
<samp>Sample text</samp>
<br>
<var>Computer variable</var>
<br>
<p><b>Note:</b> These tags are often used to display computer/programming code.</p>
</body>
</html>
Output
Computer code
Keyboard input
Sample text
Computer variable
Note: These tags are often used to display computer/programming code.
Subscribe to:
Posts (Atom)