HTML Online Tutorial Contents

Following are the posts for HTML online Tutorial. To learn everything about HTML, just read these posts: HTML Online Tutorial HTML TAGS (2) HTML BASICS (3) HTML ELEMENTS (4) HTML ATTRIBUTES (5) More »

XHTML

XHTML stands for Extensible Hypertext Markup Language. It is also known as XML (Extensible Markup Language). It is a markup language. In XHTML, there are no predefined tags. The user defines the More »

HTML SUMMARY

In this tutorial, you learned: HTML Introduction HTML Tags HTML Basics HTML Elements HTML Attributes HTML Paragraphs HTML Headings HTML Formats HTML Image HTML Links HTML Lists HTML Frames HTML Table After More »

HTML TABLES (13)

HTML Tables are used to arrange data in web pages. HTML allows the use of tables by <table>…</table> tags. Each row in HTML table is recognized by <tr>…</tr> tag. In each row More »

HTML FRAMES (12.2)

Nested frames example: For the following example to work, there are two other simple HTML files : “HMTL11e1 frame a.html” and “HMTL11e1 frame b.html”. your browser will divide your screeub half. The More »

 

Tag Archives: XHTML

links 2

HTML LINKS (10.2)

INTERNAL IMAGE HTML LINKS Example 3:

Following example demonstrates the use of an image as a link. Moreover, this is an example of an internal link. Note that the image tag is used inside the link tag.




Example9.3:

<html>

 

<head>

<title>Website-School/HTML Links Example 3</title>

</head>

 

<body>

<p><a href=”/index.html.html”><img src=”/logo.gif” width=”500″ height=”507″ alt=”imagelinkexample” /></a>

</p>

<p>This image is a link to a homepage of www.website-school.com</p>

</body>

 

</html>

 

HTML LINKS Example 4:

Following example shows a way to link an external website. In this example there is a link to www.google.com.





Example9.4:

<html>

 

<head>

<title> Website-School/HTML Links Example 4</title>

</head>

 

<body>

<a href=”/www.Google.com”>Home Page</a> of www.google.com.

</body>

 

</html>

HTML LINKS Example 5:

In the following example, if you click the link, it will open your default email software and in to section the supposed email will be visible. Remember this email address is supposed.

Example9.5:

<html>

 

<head>

<title>HTML LINKS Example 5</title>

</head>

 

<body>

<p>Email Me:</p>

<p>You can <a href=”mailto:abc@hotmail.com”> email me.</a></p>

<p>This email address is supposed and is not real</p>

</body>

 

</html>

For more visit next posts in this category.To go back to Contents of this tutorial: Contents of HTML Tutorial



llinks 1

HTML LINKS (10.1)

Hyper Links are the keywords, images or animations which are linked either to the portion of same document or to the other documents. These Hyper links when clicked shows the linked portion in the browser.

When the cursor is moved over these hyper links, the cursor turns into hand shape cursor. The tag used for this purpose is <a>. This tag can be used to create :


EXTERNAL LINK: A link to another document of some other website using “href” attribute inside <a> tag.

BOOKMARK: A bookmark is a link inside the same document by using the name attribute inside <a> tag.

INTERNAL LINKS: A link to another webpage of the same website using “href” attribute inside <a> tag.

EMAIL LINKS: These are the links which start an email software on the user computer when clicked.

The general syntax of inserting links in HTML file is:

<a href=”url”> Link text </a>

INTERNAL HTML LINKS Example 1:

 

Example9.1:

<html>

 

<head>

<title>Website-School/HTML Links Example 1</title>

</head>

<title>INTERNAL HTML LINKS Example 1</title>

</head>

 

<body>

<p><a href=”/index.html.html”>Home Page</a> of Website-School.</p>

</body>

 

</html>

HTML LINKS (Bookmarks) Example 2:

Following example explains the creation of bookmarks inside the same HTML document.


Example9.2:

<html>

 

<head>

<title>Website-School/HTML Links Example 2</title>

</head>

 

<body>

<p><a href=”#Heading 4″>Heading 4</a> of Website-School.</p>

 

<h1>Heading 1</h1>

</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>

<h2>Heading 2</h2>

</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>

<h3>Heading 3</h3>

</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>

<h4>Heading 4</h4>

</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>

</body>

</html>

For more visit next posts in this category.To go back to Contents of this tutorial: Contents of HTML Tutorial

formats 8

HTML FORMATS 8

HTML uses different tags to improve the layout and format of text on web page. To display an italic text HTML uses <i>…</i>  tag.

Following are some important tags used to improve the format of text:


FORMAT TAGS DISCRIPTION
<b>….</b> It displays text in bold style.
<big>….</big> It displays text in Big style.
<i>….</i> It displays text in Italic style.
<sub>….</sub> It displays text in Subscript.
<sup>….</sup> It displays text in Superscript.
<em>….</em> It displays an emphasized text.
<small>….</small> It displays text in Small.
<strong>….</strong> It displays a strong style text.
<ins>….</ins> It displays text in inserted style.
<del>….</del> It displays text in deleted style.

 

HTML tags can be nested. e.g.

Nested Tags:

In the following example the formatting tags are used inside paragraph tag.

Example7.1:


<html>

 

<head>

<title>Website-School/HTML Formats Example 1</title>

</head>

 

<body>

<p><b>This text is Bold</b></p>

<p><big>This text is Big</big></p>

<p><i>This text is Italic</i></p>

<p>This text is <sub>in Subscript</sub></p>

<p>This text is <sup>in Subscript</sup></p>

<p><em> This is an emphasized text.</em></p>

<p><small>This text is Small</small>  </p>

<p><strong>This text is Strong</strong>  </p>

<p><ins>This text is in Inserted style</ins></p>

<p><del>This text is in Deleted style</del></p></body>

</body>

 

</html>

For more visit next posts in this category.To go back to Contents of this tutorial: Contents of HTML Tutorial

headings 7

HTML HEADINGS 7

HTML headings are important part of web pages. There are six sizes of headings. There are separate tags for each size of heading. But the general syntax of heading tag is: <ha>…</ha>. Where, “a” is a number of heading size. e.g. <h1>..</h1> is used for heading # 1(largest heading size).

Following is the heading tags and their result:


HEADING TAG VALUES
<ha>….</ha> <h1>…</h1>
<h2>…</h2>
<h3>…</h3>
<h4>…</h4>
<h5>…</h5>
<h6>…</h6>

 

Sizes of Headings:


 

It is important to use headings for headings only. Search engines use headings to search and index the content of any web page.

HTML HEADINGS:

Following example shows different sizes of headings:

Example 6.1:

<html>

 

<head>

<title>Website-School/HTML Headings example 1</title>

</head>

 

<body>

<h1>This is Heading #1</h1>

<h2>This is Heading #2</h2>

<h3>This is Heading #3</h3>

<h4>This is Heading #4</h4>

<h5>This is Heading #5</h5>

<h6>This is Heading #6</h6>

</body>

 

</html>

For more visit next posts in this category.To go back to Contents of this tutorial: Contents of HTML Tutorial

paragraphs 6.2

HTML Paragraph (6.2)

HTML Center Aligned Paragraph:

Following example shows the use of Align attribute in paragraph tag. In this example the value of Align attribute is Center.


Example5.3:

<html>

 

<head>

<title>Website-School/HTML Paragraphs example 3</title>

</head>

 

<body>

<p ALIGN=”center”>This paragraph is displayed in center because value of Align attribute is center. </p>

</body>

</html>

Right Aligned Paragraph:

Following example shows the use of Align attribute in paragraph tag. In this example the value of Align attribute is Right. Example5.4:

<html>

 

<head>

<title>Website-School/HTML Paragraphs example 4</title>

</head>

 

<body>

<p ALIGN=”right”>This paragraph is displayed at right because value of Align attribute is right. </p>

</body>

</html>

Justified Paragraph:

Following example shows the use of Align attribute in paragraph tag. In this example the value of Align attribute is Justify.

Example5.5:

<html>

 

<head>

<title>Website-School/HTML Paragraphs example 5</title>


</head>

 

<body>

<p ALIGN=”justify”>This paragraph is displayed as justified because value of Align attribute is justify.This paragraph is displayed as justified because value of Align attribute is justify.This paragraph is displayed as justified because value of Align attribute is justify.This paragraph is displayed as justified because value of Align attribute is justify. </p>

</body>

 

</html>

For more visit next posts in this category.To go back to Contents of this tutorial: Contents of HTML Tutorial