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: ML frames

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



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

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

attributes 5

HTML ATTRIBUTES (5)

Html elements can also contain attributes. HTML attributes provide extra information about HTML elements. HTML attributes general syntax is name=”value”. Moreover HTML attributes are always defined in start tag.e.g.

<a href=”index.html”> index</a>

In this example href is given as an HTML attribute to the <a>…</a> tag. Note that attribute is given in start tag. Also note the syntax of defined attribute.


HTML Attributes:

Attributes values are always quoted. There are some cases when attributes values have either double or single quotation marks in them then the syntax should be:

Name=”value ’single quotes ’double quotes”

Name=’value ”double quotes” single qoutes’

In this example href is given as an HTML attribute to the <a>…</a> tag. Note that attribute is given in start tag. Also note the syntax of defined attribute.


Example4.1:

<html>

 

<head>

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

</head>

 

<body>

 

<img src=”homeb.gif” width=”153″ height=”73″ alt=”home” />

<p> This image is displayed using image tags inside the body tags. Src, width, height and alt are given as attributes to an image tag.</p>

</body>

</html>


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

elements 4

HTML ELEMENTS (4)

HTML elements are defined as a command that tells a browser to do something e.g. <title> tag pair. Everything inside the HTML tags is known as element contents. The start/opening tag defines the start of a HTML element. Similarly, the end/closing tag defines the end of a HTML element.


Example 1:

The <html> element defines whole html file. Similarly <head> element defines title of document using another <title> element.

EMPTY ELEMENTS:

Some HTML tags have nothing inside them. Such HTML elements are empty. Empty elements are often closed in start tag.

Example 2:

The line break tag is used to insert a line in document layout. It is closed in the start tag. Moreover it does not contain any content so it is empty element. e.g. </br>

HTML elements can also contain some attributes. e.g.


<a href=”index.html”> index</a>

In this example href is given as an HTML attribute to the <a>…</a> tag.

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