Welcome to TechRiz

Where tech enthusiasts come for the latest tech news, Free downloads, free tutorials, articles and how to's.

Description: This is the TechRiz Free Tutorials page. Visit every day to stay informed about the latest tech news, from security alerts to Hardware and software updates. Enjoy your stay.

Week-1

HTML Basic Tags Examples

HTML Code Examples

Simple Code:

<html>

<body>

The content of the body element is displayed in your browser.

</body>

</html>

Result:

The content of the body element is displayed in your browser.

How text inside paragraphs is displayed

Code:

<html>

<body>

<p>This is a paragraph.</p>

</body>

</html>

Result:

This is a paragraph.

More paragraphs

Code:

<html>

<body>

<p>This is a paragraph.</p>

</body>

</html>

Result:

This is a paragraph.

More paragraphs

Code:

<html>

<body>

<p>

This paragraph

contains a lot of lines

in the source code,

but the browser

ignores it.

</p>

<p>

This paragraph

contains a lot of spaces

in the source code,

but the browser

ignores it.

</p>

<p>

The number of lines in a paragraph depends on the size of your browser window. If you resize the browser window, the number of lines in this paragraph will change.

</p>

</body>

</html>

Result:

This paragraph contains a lot of lines in the source code, but the browser ignores it.

This paragraph contains a lot of spaces in the source code, but the browser ignores it.

The number of lines in a paragraph depends on the size of your browser window. If you resize the browser window, the number of lines in this paragraph will change.

The use of line breaks

Code:

<html>

<body>

<p>This is<br />a para<br />graph with line breaks</p>

</body>

</html>

Result:

This is
a para
graph with line breaks

Poem problems (some problems with HTML formatting)

Code:

<html>

<body>

<p>

My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

</p>

<p>Note that your browser ignores your layout!</p>

Result:

My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me.

Note that your browser ignores your layout!

Heading tags

Code:

<html>

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

Result:

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

Center aligned heading

Code:

<html>

<body>

<h1 style="text-align:center">This is heading 1</h1>

<p>The heading above is aligned to the center of this page. The heading above is aligned to the center of this page. The heading above is aligned to the center of this page.</p>

</body>

</html>

Result:

This is heading 1

The heading above is aligned to the center of this page. The heading above is aligned to the center of this page. The heading above is aligned to the center of this page.

Insert a horizontal rule

Code:

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

Result:

The hr tag defines a horizontal rule:

This is a paragraph

Comments in the HTML source

Code:

<html>

<body>

<p>This is a regular paragraph</p>

</body>

</html>

Result:

This is a regular paragraph

Add a background color

Code:

<html>

<h2>Look: Colored Background!</h2>

</body>

</html>

Result:

Look: Colored Background!

HTML Formatting Text Examples

Text formatting

Code:

<html>

<h2>Look: Colored Background!</h2>

</body>

</html>

Result:

Look: Colored Background!

HTML Formatting Text Examples

Text formatting

Code:

<html>

<body>

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

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

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

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

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

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

<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

</body>

</html> Result:

This text is bold

This text is strong

This text is big

This text is emphasized

This text is italic

This text is small

This is_subscript and ^superscript

This site is viewed: