Scribd
Upload
62 views

This Text Is Emphasized This Text Is Italic

The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation. If your browser supports bi-directional override (bdo), the next line will be written from the right to the left. Browsers will strikethrough deleted text and underline inserted text.

Uploaded by

Sathish Arukonda
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
62 views

This Text Is Emphasized This Text Is Italic

The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation. If your browser supports bi-directional override (bdo), the next line will be written from the right to the left. Browsers will strikethrough deleted text and underline inserted text.

Uploaded by

Sathish Arukonda
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 14

Ex 1: <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> Ex 2: <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> Ex 3: <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>

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

Computer code Keyboard input Teletype text

Sample text Computer variable Note: These tags are often used to display computer/programming code.

Ex 4: <html> <body> <address> Written by W3Schools.com<br /> <a href="mailto:[email protected]">Email us</a><br /> Address: Box 564, Disneyland<br /> Phone: +12 34 56 78 </address> </body> </html> Ex 5: <html> <body> <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p> <p>Can I get this <acronym title="as soon as possible">ASAP</acronym>?</p> <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> Ex 6: <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> <bdo dir="rtl"> Here is some Hebrew text </bdo> </body> </html> Ex 7: <html> <body> <p>My favorite color is <del>blue</del> <ins>red</ins>!</p> <p>Notice that browsers will strikethrough deleted text and underline inserted text.</p> </body> </html>

Written by W3Schools.com Email us Address: Box 564, Disneyland Phone: +12 34 56 78

The WHO was founded in 1948. Can I get this ASAP? The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.

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

My favorite color is blue red! Notice that browsers will strikethrough deleted text and underline inserted text.

Ex 8:
<html> <body style="background-color:PowderBlue;"> <h1>Look! Styles and colors</h1> <p style="font-family:verdana;color:red;"> This text is in Verdana and red</p> <p style="font-family:times;color:green;"> This text is in Times and green</p> <p style="font-size:30px;">This text is 30 pixels high</p> </body> </html> Ex 9: <html> <body style="background-color:yellow;"> <h2 style="background-color:red;">This is a heading</h2> <p style="background-color:green;">This is a paragraph.</p> </body> </html> Ex 10: <html> <body> <h1 style="font-family:verdana;">A heading</h1> <p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p> </body> </html> Ex 11: <html> <body> <h1 style="text-align:center;">Center-aligned heading</h1> <p>This is a paragraph.</p> </body> </html> Ex 12: <html> <body> <p> <a href="http://www.google.com/">Google</a> This is a link to a website on the World Wide Web. </p> </body> </html>

A heading
A paragraph.

Center-aligned heading
This is a paragraph.

Google This is a link to a website on the World Wide Web.

Ex 13: <html> <body> <p>Create a link of an image: <a href="default.asp"> <img src="smiley.gif" alt="HTML tutorial" width="32" height="32" /> </a></p> </body> </html> Ex 14: <html> <body> <a href="http://www.w3schools.com" target="_blank">Visit W3Schools.com!</a> <p>If you set the target attribute to "_blank", the link will open in a new browser window/tab.</p> </body> </html> Ex 15: <html> <body> <p> <a href="#C4">See also Chapter 4.</a> </p> <h2>Chapter 1</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 2</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 3</h2> <p>This chapter explains ba bla bla</p> <h2><a name="C4">Chapter 4</a></h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 5</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 6</h2> </body> </html>

Create a link of an image:

Visit W3Schools.com! If you set the target attribute to "_blank", the link will open in a new browser window/tab.

See also Chapter 4.

Chapter 1
This chapter explains ba bla bla

Chapter 2
This chapter explains ba bla bla

Chapter 3
This chapter explains ba bla bla

Chapter 4
This chapter explains ba bla bla

Chapter 5
This chapter explains ba bla bla

Chapter 6
This chapter explains ba bla bla

Ex 16: <html> <body> <p>Locked in a frame?</p> <a href="http://www.w3schools.com/" target="_top">Click here!</a> </body> </html> Ex 17: <html> <body> <p> This is an email link: <a href="mailto:[email protected]?Subject=Hello%20again"> Send Mail</a> </p> <p> <b>Note:</b> Spaces between words should be replaced by %20 to ensure that the browser will display the text properly. </p> </body> </html> Ex 18: <html> <body> <p>An image <img src="smiley.gif" alt="Smiley face" align="bottom" width="32" height="32" /> with align="bottom".</p> <p>An image <img src="smiley.gif" alt="Smiley face" align="middle" width="32" height="32" /> with align="middle".</p> <p>An image <img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32" /> with align="top".</p> <p><b>Tip:</b> align="bottom" is default!</p> <p><img src="smiley.gif" alt="Smiley face" width="32" height="32" /> An image before the text.</p> <p>An image after the text. <img src="smiley.gif" alt="Smiley face" width="32" height="32" /></p> </body> </html>

Locked in a frame? Click here!

This is an email link: Send Mail Note: Spaces between words should be replaced by %20 to ensure that the browser will display the text properly.

An image An image An image

with align="bottom". with align="middle". with align="top".

Tip: align="bottom" is default! An image before the text. An image after the text.

Ex 18:
<html> <body> <h4>Table headers:</h4> <table border="1"> <tr> <th>Name</th> <th>Telephone</th> <th>Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>Vertical headers:</h4> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th>Telephone:</th> <td>555 77 854</td> </tr> <tr> <th>Telephone:</th> <td>555 77 855</td> </tr> </table> </body> </html> Ex 19: <html> <body> <h4>Cell that spans two columns:</h4> <table border="1"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>Cell that spans two rows:</h4> <table border="1"> <tr> <th>First Name:</th>

Table headers: Name Telephone Telephone

Bill Gates 555 77 854 555 77 855 Vertical headers: First Name: Bill Gates Telephone: 555 77 854 Telephone: 555 77 855

Cell that spans two columns: Name Telephone

Bill Gates 555 77 854 555 77 855 Cell that spans two rows: First Name: Bill Gates 555 77 854 Telephone: 555 77 855

<td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> </body> </html> Ex 20: <html> <body> <h4>Without cellpadding:</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>With cellpadding:</h4> <table border="1" cellpadding="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html> Ex 21: <html> <body> <h4>Without cellspacing:</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td>

Without cellpadding: First Row

Second Row With cellpadding: First Row

Second

Row

<td>Row</td> </tr> </table> <h4>With cellspacing:</h4> <table border="1" cellspacing="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html> Ex 21: <html> <body> <h4>An Unordered List:</h4> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html> Ex 22: <html> <body bgcolor="yellow"> <form action=MAILTO:[email protected]> First name: <input type="text" name="firstname" /><br /> Last name: <input type="text" name="lastname" /><br /> Password: <input type="password" name="password" /><br /> <input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br /> <input type="checkbox" name="vehicle" value="Car" /> I have a car <br /> <input type="radio" name="sex" value="male" /> Male <input type="radio" name="sex" value="female" /> Female<br /> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat" selected="selected">Fiat</option><br /> <input type="button" value="submit"> </form> <textarea rows="10" cols="30"> The cat was playing in the garden. </textarea> </body> </html>

Without cellspacing: First Row

Second Row With cellspacing: First Row

Second Row

An Unordered List:

Coffee Tea Milk

Ex 23:
<html> <frameset cols="25%,50%,25%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> <frame src="frame_c.htm" /> </frameset> </html> Ex 24: <html> <frameset rows="25%,50%,25%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> <frame src="frame_c.htm" /> </frameset> </html> Ex 25: <html> <frameset rows="50%,50%"> <frame src="frame_a.htm" /> <frameset cols="25%,75%"> <frame src="frame_b.htm" /> <frame src="frame_c.htm" /> </frameset> </frameset> </html> Ex 26: <html> <body> <iframe src="demo_iframe.htm"></iframe> </body> </html>

Ex 27: <html> <head> <style type="text/css"> h1 {color:red;} h2 {color:blue;} p {color:green;} </style> </head> <body> <h1>All header 1 elements will be red</h1> <h2>All header 2 elements will be blue</h2> <p>All text in paragraphs will be green.</p> </body> </html> Ex 28: <html> <head> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <h1>I am formatted with an external style sheet</h1> <p>Me too!</p> </body> </html> Ex 29: <html> <body> <script type="text/javascript"> document.write("Hello World!") </script> </body> </html> Ex 30:

All header 1 elements will be red


All header 2 elements will be blue
All text in paragraphs will be green.

Hello World!

<html> <body> <div id="container" style="width:500px"> <div id="header" style="background-color:#FFA500;"> <h1 style="margin-bottom:0;">Main Title of Web Page</h1></div> <div id="menu" style="backgroundcolor:#FFD700;height:200px;width:100px;float:left;"> <b>Menu</b><br />

HTML<br /> CSS<br /> JavaScript</div> <div id="content" style="backgroundcolor:#EEEEEE;height:200px;width:400px;float:left;"> Content goes here</div> <div id="footer" style="backgroundcolor:#FFA500;clear:both;text-align:center;"> Copyright 2011 W3Schools.com</div> </div> </body> </html> Ex 31:

You might also like