techriz.com-HTML Week-2

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 2

Preformatted text (how to control line breaks and spaces)

Code:

<html>

<body>

<pre>

This is

preformatted text.

It preserves both spaces

and line breaks.

</pre>

<p>The pre tag is good for displaying computer code:</p>

<pre>

for i = 1 to 10

print i

next i

</pre>

</body>

</html>

Result:

This is

preformatted text.

It preserves    both spaces

and line breaks.

The pre tag is good for displaying computer code:

for i = 1 to 10

print i

next i

Different computer-output tags

Code:

<html>

<body>

<code>Computer code</code>

<br>

<kbd>Keyboard input</kbd>

<br>

<tt>Teletype text</tt>

<br>

<samp>Sample text</samp>

<br>

<var>Computer variable</var>

<br>

<p>

<b>Note:</b> These tags are often used to display computer/programming code.

</p>

</body>

</html>

Result:

Computer code
Keyboard input
Teletype text
Sample text
Computer variable

Note: These tags are often used to display computer/programming code.

Insert an address

Code:

<html>

<body>

Donald Duck<br>

BOX 555<br>

Disneyland<br>

USA

</address>

</body>

</html>

Result:

Donald Duck
BOX 555
Disneyland
USA

Abbreviations and acronyms

Code:

<html>

<body>

<br />

<p>The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.</p>

</body>

</html>

Result:

UN
WWW

The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.

Text direction

Code:

<html>

<body>

<p>

If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl):

</p>

Here is some Hebrew text

</bdo>

</body>

</html>

Result:

If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl):

Here is some Hebrew text

Long and short quotations

Code:

<html>

<body>

A blockquote quotation:

This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.

</blockquote>

<p><b>The browser inserts line breaks and margins for a blockquote element.</b></p>

A short quotation:

<q>This is a short quotation</q>

<p><b>The q element does not render as anything special.</b></p>

</body>

</html>

Result:

A blockquote quotation:

This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.

The browser inserts line breaks and margins for a blockquote element.

A short quotation: This is a short quotation

The q element does not render as anything special.

How to mark deleted and inserted text

Code:

<html>

<body>

<p>

a dozen is

<del>twenty</del>

<ins>twelve</ins>

pieces

</p>

<p>

Most browsers will overstrike deleted text and underline inserted text.

</p>

<p>

Some older browsers will display deleted or inserted text as plain text.

</p>

</body>

</html>

Result:

a dozen is twelve pieces

Most browsers will overstrike deleted text and underline inserted text.

Some older browsers will display deleted or inserted text as plain text.

HTML Link Examples

How to create hyperlinks

Code:

<html>

<body>

<p>

This text</a> is a link to a page on

this Web site.

</p>

<p>

This text</a> is a link to a page on

the World Wide Web.

</p>

</body>

</html>

Result:

This text is a link to a page on this Web site.

This text is a link to a page on the World Wide Web.

Set an image as a link

Code:

<html>

<body>

<p>

You can also use an image as a link:

</a>

</p>

</body>

</html>

Result:

You can also use an image as a link:

Open a link in a new browser window

Code:

<html>

<body>

<p>

If you set the target attribute of a link to "_blank",

the link will open in a new window.

</p>

</body>

</html>

Result:

Last Page

If you set the target attribute of a link to "_blank", the link will open in a new window.

Jump to another part of a document (on the same page)

Code:

<html>

<body>

<p>

<a href="#C4">See also Chapter 4.</a>

</p>

<h2>Chapter 1</h2>