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 lists

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

images 9

HTML IMAGES 9

A web page can be attractive and beautiful. HTML allows addition of both static and animated graphics. The tag used for this purpose is <img>. This tag does not need an eng tag. There are many types of images which can be used in web pages. But the two popular types are: “.gif” (Graphic Interchange Format), “.jpg” and “.jpeg” (Joint Photographic Expert Group).

Some important attributes of <img> tag are as follows:

IMAGE TAG ATTRIBUTES DISCRIPTION
SRC It specifies the name of image to be displayed if the image is stored in same directory. But if the image is stored in some other directory than a complete path must be defined in this attribute.
WIDTH It specifies the width of image in pixels.
HEIGHT It specifies the height of image in pixels.
VSPACE It specifies the amount of space to image from top or bottom in pixels.
HSPACE It specifies the amount of space to image from left or right in pixels.
ALIGN It is used to align the image on screen. It has three values: left, right and center.
ALIGN It is also used to align the text with respect of image on screen. It has three values: top, bottom and middle.
BORDER It specifies the size of border around the image.

 

HTML Images:

In this example, the width, height and border are specified in attribute values. Moreover, the space to the image from top, bottom, right and left is also specified in the attributes.

EXAMPLE8.1:

<html>

 

<head>

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

</head>

 

<body>

<img src=”/logo.gif” alt=”8e1images(e1)” width=”500″ height=”507″ hspace=”10″ vspace=”10″ border=”2″ /><p>This image has width=500, height=507, hspace=10, vspace=10 and border=2</p>

</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