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: HTML definition

lists 1

HTML LISTS (11.1)

In websites, displaying a list is very easy by the help of HTML. There are three types of lists in HTML:


ORDERED LIST: The ordered list which consists of numbered objects. This list is also known as “Numbered List”. The tag used for this type of list is <ol>….</ol>. The tag used to specify an entry of list is <li>…</li>. The attributes given to this tag are:

TAG ATTRIBUTES DISCRIPTION
TYPE This attribute specifies the type of number schemes. There are five types of number schemes:I for I,II,III….

1 for 1,2,3…..

A for A,B,C….

A for a,b,c…..

“i”fori,ii,iii…..

START It specifies the starting point (number) of the list.
VALUE It is used to change the number at any position of number sequence.

 


UNORDERED LIST: An unordered list consists of objects which are marked with symbols. This list is also known as “Unnumbered List”. The tag used for this type of list is <ul>….</ul>. The tag used to specify an entry of list is <li>…</li>. The attributes given to this tag are:

TAG ATTRIBUTES DISCRIPTION
TYPE It specifies the type of the symol which is used as a bullet for the entry of the list. There are four important types of such symbols:

  • Circle (Default value)
  • Square
  • Disc
  • Fillround

 

DEFINATION LIST: This type of list consists of terms and their description. The tag which is used for this purpose is <dl>….</dl>. The tag which is used to create a list of terms is <dt>…</dt>. The tag used for the definition of any entry of list is <dd>….</dd>.


NESTED LIST: To display items in a nested list is also very easy in HTML. The List with in another list can be displayed by using nested listing tags.

 


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

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