Scribd
Upload
15 views

Try - Experiment - Code: Muhammad Aamir Khan

This document contains examples of HTML code snippets demonstrating different HTML elements and formatting techniques, including styling text with colors and fonts, inserting and deleting text, hyperlinks, and creating a horizontal menu with list items and links. The examples provide code to experiment with and learn HTML formatting and elements.

Uploaded by

umama syed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
15 views

Try - Experiment - Code: Muhammad Aamir Khan

This document contains examples of HTML code snippets demonstrating different HTML elements and formatting techniques, including styling text with colors and fonts, inserting and deleting text, hyperlinks, and creating a horizontal menu with list items and links. The examples provide code to experiment with and learn HTML formatting and elements.

Uploaded by

umama syed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 13

TRY . EXPERIMENT .

CODE

Muhammad Aamir Khan

TRY THIS!
<!DOCTYPE html>
<html>
<body>
<p style="color:red">This is a paragraph.</p>
</body>
</html>

TRY THIS!
<!DOCTYPEhtml>
<html>
<body>
<h1style="text-align:center">Centered Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

TRY THIS!
<!DOCTYPEhtml>
<html>
<body>
<h1style="font-size:300%">This is a heading</h1>
<pstyle="font-size:160%">This is a paragraph.</p>
</body>
</html>

TRY THIS!
<!DOCTYPEhtml>
<html>
<body>
<h1style="font-family:verdana">This is a heading</h1>
<pstyle="font-family:courier">This is a paragraph.</p>
</body>
</html>

TRY THIS!
<!DOCTYPE html>
<html>
<body>
The ins element represent inserted (added) text.
<p>My favorite <ins>color</ins> is red.</p>
</body>
</html>

TRY THIS!
<!DOCTYPE html>
<html>
<body>
The del element represent deleted (removed) text.
<p>My favorite color is <del>blue</del> red.</p>
</body>
</html>

TRY THIS
<!DOCTYPE html>
<html>
<body>
<h2>HTML <mark>Marked</mark> Formatting</h2>
</body>
</html>

TRY THIS!
<!DOCTYPE html>
<html>
<body>
<p>The HTML address element defines contact information (author/owner) of a
document or article.</p>
<address>
Written by Jon Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
</body>
</html>

INTERESTING TRY THIS


<!DOCTYPE html>
<html>
<body>
<p>
If your browser supports bi-directional override (bdo), the next line will be written from
right to left (rtl):
</p>
<bdo dir="rtl">
This line will be written from right to left
</bdo>
</body>
</html>

TRY THIS
<!DOCTYPE html>
<html>
<body>

<p>
This is an email link:
<a href="mailto:[email protected]?Subject=Hello%20again" target="_top">
Send Mail</a>
</p>
</body>
</html>

MENU EXAMPLE - 1
<!DOCTYPE html> <html> <head>
<style>
ul#menu {
padding: 0;
}
ul#menu li {
display: inline;
}
ul#menu li a {
background-color: black;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 4px 4px 0 0;
}

MENU EXAMPLE - 1
ul#menu li a:hover {
background-color: orange;
}
</style>
</head> <body>
<h2>Horizontal List</h2>
<ul id="menu">
<li><a href="html_tables.asp">Tables</a></li>
<li><a href="html_lists.asp">Lists</a></li>
<li><a href="html_blocks.asp">Blocks</a></li>
<li><a href="html_classes.asp">Classes</a></li>
</ul>
</body> </html>

You might also like