Internet Technology

HTML basic

Heading <html> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> </body> </html> Comment <html> <body> <!--this comment will not be displayed--> <p>this is a regular paragraph</p> </body> </html> Text direction <html> <body> <p> the line will be written from the right to the left (rtl): </p> <bdo dir="rtl"> here is some text </bdo> </body> </html> Different types of ordered lists <html> </body> <h4> numbered list</h4> <ol> <li>applle</li> <li>orange</li> <li>lemons</li> </ol> <h4>letters list.</h4> <ol type="A"> <li>apples</li> <li>orange</li> <li>lemons<li> </ol> <h4>letters list.</h4> <ol type="a"> <li>apples</li> <li>orange</li> <li>lemons<li> </ol> </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>yasitha</td> <td>33843</td> <td>5654+</td> </tr> </table> </body> </html> Insert images from another folder or another server <html> <body> <img src="link of the image" width="104" height="142" /> </body> </html>	Paragraph <html> <body> <p> This paragraph contains a lot of lines in the source code, but the browser ignores it. </p> </body> </html> Horizontal line <html> <body> <hr /> <p>this is paragraph 1</p> <hr /> <p>this is paragraph 2 </p> <hr /> </body> </html> Pre format <html> <body> <pre> this is preformatted text. it preserves both spaces and lines breaks. </pre> </body> </html> Different types of unordered Lists <html> <body> <h4>disc bullets list:</h4> <ul type ="disc"> <li>apples</li> <li>bannana</li> <li>orange</li> </ul> <h4>circle bullets list</h4> <ul type="circle"> <li>bannana</li> <li>green</li> <li>lemmon</li> </ul> </body> </html> Sample tables <html> <body> <h4>one cloum:</h4> <table border="2"> <tr> <td>100</td> <tr> </table> <h4>one row and three colums:</h4> <table border="3"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table> <h4>two rows and three colums:</h4> <table border="10"> <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>	Link <html> <body> <a href="http://www.facebook.com"> This is a link</a> </body> </html> LIne break <html> <body> <p>this is a <br/>paragraph <br/>with line breaks</p> </body> </html> mark deleted and inserted text <html> <body> <p>my favorite site is <del>facebook</del><ins> google +</ins>!</p> </body> </html> Text format <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></p> <p>this is<sub>subscript</sub>and<sup>superscript</sup></p> Nested list <html> <body> <h4>a nested list</h4> <ul type="square"> <li>coffee</li> <li>tea</li> <li>milk</li> <ul> <li>apple</li> <li>orange</li> </ul> <li>food</li> </ul> </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> </body> </html> Image <html> <body> <img src="DSC00007.jpg" width="104"height="142"/> </body> </html> Aligning images <html> <body> <p>an image <img src="guitar_b24wlly9.gif"align="bottom" width="45"height="56"/> with align ="bottom".</p> <p>an image <img src="guitar_b24wlly9.gif" align="middle" width="67"height="45"/> with align="middle".</p> <p>an image <img src="guitar_b24wlly9.gif" align="top" width="89" height="45"/> with align="top".</p> <p><b>tip:</b>align="bottom" is default</p> <p><img src="guitar_b24wlly9.gif" width="56"height="56" /> an image before the text</p> <p>an image after the text. <img src="guitar_b24wlly9.gif" width="78"height="45"/> </p> </body> </html>

Web Design

HTML basic