Web Development Part 3
HTML Iframes An iframe is used to display a web page within a web page <html><body> <iframe src="demo_iframe.htm" width="200" height="200"> </iframe> <p>Some older browsers don't support iframes.</p> <p>If they don't, the iframe will not be visible.</p> </body></html>
Iframe - Set Height and Width The height and width attributes are used to specify the height and width of the iframe. The attribute values are specified in pixels by default, but they can also be in percent (like "80%"). <html><body> <iframe src="demo_iframe.htm" width="200" height="200"></iframe> <p>Some older browsers don't support iframes.</p> <p>If they don't, the iframe will not be visible.</p> </body></html>
Iframe - Remove the Border The frameborder attribute specifies whether or not to display a border around the iframe. Set the attribute value to "0" to remove the border: <html><body> <iframe src="demo_iframe.htm" frameborder="0"></iframe> <p>Some older browsers don't support iframes.</p> <p>If they don't, the iframe will not be visible.</p> </body></html>
Use iframe as a Target for a Link An iframe can be used as the target frame for a link. The target attribute of a link must refer to the name attribute of the iframe: <html><body> <iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href=http://www.w3schools.com target="iframe_a">W3Schools.com</a></p> <p><b>Note:</b> Because the target of the link matches the name of the iframe, the link will open in the iframe.</p> </body></html>
HTML Insert horizontal lines <!DOCTYPE html> <html><body> <p>The hr tag defines a horizontal rule:</p> <hr> <p>This is a paragraph.</p> </body></html>
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> for i = 1 to 10 print i next i </pre></body></html>
HTML Different computer-output tags <html><body> <code>Computer code</code> <br> <kbd>Keyboard input</kbd> <samp>Sample text</samp> <var>Computer variable</var> <p><b>Note:</b> These tags are often used to display computer/programming code.</p> </body></html>
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>
HTML Abbreviations and acronyms <html><body> <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p> <p>Can I get this <abbr title="as soon as possible">ASAP</abbr>?</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>
HTML Hidden comments <html><body> <!-- This is a comment --> <p>This is a paragraph.</p> <!-- Comments are not displayed in the browser --> </body></html>
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>
HTML Jump to another part of a document (on the same page) <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> <h2>Chapter 3</h2> <h2><a id="C4">Chapter 4</a></h2> </body></html>
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" target="_top"> Send Mail</a> </p> <b>Note:</b> Spaces between words should be replaced by %20 to ensure that the browser will display the text properly. </body></html>
HTML Table with a caption <html><head><style> table, th, td { border-collapse:collapse; border:1px solid black; } th, td { padding:5px; </style></head><body> <html><head> <style> table, th, td { border-collapse:collapse; border:1px solid black; } th, td { padding:5px; } </style></head><body> <table> <caption>Monthly savings</caption> <tr><th>Month</th> <th>Savings</th></tr> <tr><td>January</td> <td>$100</td></tr> <tr><td>February</td> <td>$50</td> </tr></table></body></html>
HTML Table with a caption <table> <caption>Monthly savings</caption> <tr><th>Month</th> <th>Savings</th></tr> <tr><td>January</td> <td>$100</td></tr> <tr><td>February</td> <td>$50</td> </tr></table></body></html>
HTML Table cells that span more than one row/column <html><head> <style> table, th, td { border-collapse:collapse; border:1px solid black; } th, td padding:5px; </style></head><body>
HTML Table cells that span more than one row/column <h3>Cell that spans two columns:</h3> <table> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr></table>
HTML Table cells that span more than one row/column <h3>Cell that spans two rows:</h3> <table> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <td>555 77 855</td> </tr></table> </body></html>
HTML Tags inside a table <html><head> <style> table, th, td { border-collapse:collapse; border:1px solid black; } th, td padding:5px; </style> </head><body>
HTML Tags inside a table <table> <tr><td> <p>This is a paragraph</p> <p>This is another paragraph</p> </td> <td>This cell contains a table: <table><tr> <td>A</td> <td>B</td> </tr><tr> <td>C</td> <td>D</td> </tr></table>
HTML Tags inside a 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>
HTML Cell padding (control the white space between cell content and the borders) <html> <head> <style> table, th, td { border-collapse:collapse; border:1px solid black; } th, td padding:15px; </style></head><body>
HTML Cell padding (control the white space between cell content and the borders) <table style="width:300px"> <tr> <td>Jill</td> <td>Smith</td><td>50</td> </tr><tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table> <p>Try to change the padding to 5px.</p> </body></html>
HTML Cell spacing (control the distance between cells) <html> <head> <style> table, th, td { border:1px solid black; padding:5px; } table border-spacing:15px; </style></head><body>
HTML Cell spacing (control the distance between cells) <table style="width:300px"> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <td>Eve</td> <td>Jackson</td> <td>94</td>
HTML Cell spacing (control the distance between cells) <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table> <p>Try to change the spacing to 5px.</p> </body></html>
HTML Nested list <html><body> <h4>A nested List:</h4> <ul> <li>Coffee</li> <li>Tea <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </body></html>
HTML Nested list <html><body> <h4>A nested List:</h4> <ul> <li>Coffee</li><li>Tea <ul><li>Black tea</li> <li>Green tea<ul><li>China</li> <li>Africa</li> </ul></li></ul></li> <li>Milk</li> </ul> </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>
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>