You are on page 1of 27

HTML

A very simple HTML document

<html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
headings

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

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

HTML links

<html> <body> <a href="http://www.w3schools.com"> This is a link</a> </body> </html>


HTML images

<html> <body> <img src="w3schools.jpg" width="104" height="142"></body> </html>


Insert horizontal lines

<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>
The use of line breaks

<html> <body> <p>This is<br>a para<br>graph with line breaks</p> </body> </html>
Text formatting

<html> <body> <p><b>This text is bold</b></p> <p><strong>This text is strong</strong></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>
Preformatted text (how to control line breaks and spaces)

<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>
Insert contact information

<html> <body> <address> Written by W3Schools.com<br> <a href="mailto:us@example.org">Email us</a><br> Address: Box 564, Disneyland<br> Phone: +12 34 56 78 </address> </body> </html>
Text direction

<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>
How to mark deleted and inserted text

<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>
Style HTML elements

<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>
Style background color

<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>
Style font, color, and size

<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>
Style alignment of text

<html> <body> <h1 style="text-align:center;">Center-aligned heading</h1> <p>This is a paragraph.</p> </body> </html>


Set the font of text

<html> <body> <h1 style="font-family:verdana">This is a heading</h1> <p style="font-family:courier">This is a paragraph.</p> </body> </html>
Set the font size of text

<html> <body> <h1 style="font-size:200%">This is a heading</h1> <p style="font-size:110%">This is a paragraph.</p> </body> </html>
Set the font color of text

<html> <body> <h1 style="color:blue">This is a heading</h1> <p style="color:red">This is a paragraph.</p> </body> </html>
Using styles in HTML

<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>
Link that is not underlined

<html> <body> <a href="http://www.w3schools.com" style="text-decoration:none;">Visit W3Schools.com!</a> </body> </html>


Link to an external style sheet

<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>
How to create hyperlinks

<html> <body> <p> <a href="default.asp">HTML Tutorial</a> This is a link to a page on this website. </p> <p> <a href="http://www.w3.org/">W3C</a> This is a link to a website on the World Wide Web. </p> </body> </html>
Use an image as a link

<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> <p>No border around the image, but still a link: <a href="default.asp"> <img border="0" src="smiley.gif" alt="HTML tutorial" width="32" height="32"></a></p> </body> </html>
Open link in a new browser window

<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>
How to link to a mail message (will only work if you have mail installed)

<html> <body> <p> This is an email link: <a href="mailto:someone@example.com?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>
Another mailto link

<html> <body> <p> This is another mailto link: <a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@exampl e.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20part y!">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>


Insert images

<html> <body> <p> An image: <img src="smiley.gif" alt="Smiley face" width="32" height="32"></p> <p> A moving image: <img src="hackanm.gif" alt="Computer man" width="48" height="48"></p> <p> Note that the syntax of inserting a moving image is no different from a non-moving image. </p> </body> </html>
Insert images from another folder or another server

<html> <body> <p>An image from another folder:</p> <img src="/images/chrome.gif" alt="Google Chrome" width="33" height="32"><p>An image from W3Schools:</p> <img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com" width="104" height="142"> </body> </html>
Aligning images

<html>

<body> <h4>Image with default alignment (align="bottom"):</h4> <p>This is some text. <img src="smiley.gif" alt="Smiley face" width="32" height="32"> This is some text.</p> <h4>Image with align="middle":</h4> <p>This is some text. <img src="smiley.gif" alt="Smiley face" align="middle" width="32" height="32"> This is some text.</p> <h4>Image with align="top":</h4> <p>This is some text. <img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32"> This is some text.</p> <p><b>Note:</b> The align attribute is deprecated in HTML 4, and is not supported in HTML5. Use CSS instead.</p> </body> </html>
Make a hyperlink of an image

<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> <p>No border around the image, but still a link: <a href="default.asp"> <img border="0" src="smiley.gif" alt="HTML tutorial" width="32" height="32"></a></p> </body> </html>

Create an image-map, with clickable regions

<html>

<body> <p>Click on the sun or on one of the planets to watch it closer:</p> <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"> </map> </body> </html>
Simple tables

<html> <body> <p> Each table starts with a table tag. Each table row starts with a tr tag. Each table data starts with a td tag. </p> <h4>One column:</h4> <table border="1"> <tr> <td>100</td> </tr> </table>

<h4>One row and three columns:</h4> <table border="1"> <tr>

<td>100</td> <td>200</td> <td>300</td> </tr> </table> <h4>Two rows and three columns:</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html>
Tables without borders

<html> <body> <h4>This table has no borders:</h4> <table> <tr> <td>100</td> <td>200</td>

<td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> <h4>And this table has no borders:</h4> <table border="0"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html>
Table headers

<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>
Table cells that span more than one row/column

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


Tags inside a table

<html> <body> <table border="1"> <tr> <td> <p>This is a paragraph</p> <p>This is another paragraph</p> </td> <td>This cell contains a table: <table border="1"> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td> </tr> <tr> <td>This cell contains a list

<ul> <li>apples</li> <li>bananas</li> <li>pineapples</li> </ul> </td> <td>HELLO</td> </tr> </table> </body> </html>
Cell padding (control the white space between cell content and the borders

<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>
Cell spacing (control the distance between cells)

<html> <body> <h4>Without cellspacing:</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>With cellspacing="0":</h4> <table border="1" cellspacing="0">

<tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>With cellspacing="10":</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>
An unordered list

<html> <body> <h4>An Unordered List:</h4> <ul> <li>Coffee</li>

<li>Tea</li> <li>Milk</li> </ul> </body> </html>


An ordered list

<html> <body> <h4>An Ordered List:</h4> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html>
Nested list

<html> <body> <h4>A nested List:</h4> <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li>

<li>Milk</li> </ul> </body> </html>


Definition list

<html> <body> <h4>A Definition List:</h4> <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> </body> </html>
Create text fields

<html> <body> <form action=""> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form> <p><b>Note:</b> The form itself is not visible. Also note that the default width of a text field is 20 characters.</p> </body> </html>
Create password field

<html> <body> <form action=""> Username: <input type="text" name="user"><br> Password: <input type="password" name="password"> </form> <p><b>Note:</b> The characters in a password field are masked (shown as asterisks or circles).</p> </body> </html>
Checkboxes

<html> <body> <form action=""> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car </form> </body> </html>
Radio buttons

<html> <body> <form action=""> <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female </form>

<p><b>Note:</b> When a user clicks on a radio-button, it becomes checked, and all other radio-buttons with equal name become unchecked.</p>

</body> </html>
Simple drop-down list

<html> <body> <form action=""> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </form> </body> </html>
Textarea (a multi-line text input field)

<html> <body> <textarea rows="10" cols="30"> The cat was playing in the garden. </textarea> </body> </html>
Create a button

<html> <body> <form action=""> <input type="button" value="Hello world!">

</form> </body> </html>


Draw a border around form-data

<html> <body> <form action=""> <fieldset> <legend>Personal information:</legend> Name: <input type="text" size="30"><br> E-mail: <input type="text" size="30"><br> Date of birth: <input type="text" size="10"> </fieldset> </form> </body> </html>
Form with text fields and a submit button

<html> <body> <form name="input" action="html_form_action.asp" method="get"> First name: <input type="text" name="FirstName" value="Mickey"><br> Last name: <input type="text" name="LastName" value="Mouse"><br> <input type="submit" value="Submit"> </form>

<p>If you click the "Submit" button, the form-data will be sent to a page called "html_form_action.asp".</p> </body>

</html>
Form with checkboxes and a submit button

<html> <body> <form name="input" action="html_form_action.asp" method="get"> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car <br><br> <input type="submit" value="Submit"> </form> <p>If you click the "Submit" button, the form-data will be sent to a page called "html_form_action.asp".</p> </body> </html>
Form with radiobuttons and a submit button

<html> <body> <form name="input" action="html_form_action.asp" method="get"> <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female<br> <input type="submit" value="Submit"> </form> <p>If you click the "Submit" button, the form-data will be sent to a page called "html_form_action.asp".</p> </body> </html>
Send e-mail from a form

<html> <body>

<h3>Send e-mail to someone@example.com:</h3> <form action="MAILTO:someone@example.com" method="post" enctype="text/plain"> Name:<br> <input type="text" name="name" value="your name"><br> E-mail:<br> <input type="text" name="mail" value="your email"><br> Comment:<br> <input type="text" name="comment" value="your comment" size="50"><br><br> <input type="submit" value="Send"> <input type="reset" value="Reset"> </form> </body> </html>
Inline frame (a frame inside an HTML page)

<html> <body> <iframe src="demo_iframe.htm"></iframe> <p>Some older browsers don't support iframes.</p> <p>If they don't, the iframe will not be visible.</p> </body> </html>