Web Development Part 3.

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= 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 us</a><br> Address: Box 564, Disneyland<br> Phone: </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>  <p>This is a paragraph.</p>  </body></html>

HTML Open link in a new browser window
<html><body> <a href=" 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 link: <a 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>

<h3>Cell that spans two columns:</h3> <table> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <td>Bill Gates</td> <td> </td> <td> </td> </tr></table>

<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> </td> </tr> <td> </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>

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

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

<table style="width:300px"> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <td>Eve</td> <td>Jackson</td> <td>94</td>

<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> <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 from a form <html><body> <h3>Send to <form method="post" enctype="text/plain"> Name:<br> <input type="text" name="name" value="your name"><br> <br> <input type="text" name="mail" value="your "><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>

Web Development Part 3.

Similar presentations

Presentation on theme: "Web Development Part 3."— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Web Development Part 3.

Similar presentations

Presentation on theme: "Web Development Part 3."— Presentation transcript:

Similar presentations

About project

Feedback