Published on

සාමාන්‍ය පෙළ තොරතුරු හා සන්නිවේදන තාක්ෂණය විෂය සඳහා අවශ්‍ය සියළුම html tags මෙහි ඇතුලත් කර තිබේ. සමන් බණ්ඩාර හේරත්ගේ සටහන් පොත

Published in: Education, Technology


  1. 1. HTMLH.M.D.S.B.Herath
  2. 2. WHAT IS HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language A markup language is a set of markup tags HTML uses markup tags to describe web pages
  3. 3. HTML TAGS HTML markup tags are usually called HTML tags HTML tags are keywords surrounded by angle brackets like <html> HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag is the end tag Start and end tags are also called opening tags and closing tags
  4. 4. HTML DOCUMENT EXAMPLE<html> <body> This is my first paragraph. </body></html>
  5. 5. HTML DOCUMENT EXAMPLE<html> <head> <title>My First Web</title> </head> <body> This is my first paragraph. </body></html>
  6. 6. HTML HEADINGS <h1>This is a heading 1</h1> <h2>This is a heading 2</h2> <h3>This is a heading 3</h3> <h4>This is a heading 4</h4> <h5>This is a heading5</h5> <h6>This is a heading 6</h6>
  7. 7. HTML LINES<h1>This is a heading</h1><hr /><h2>This is a heading</h2><hr /><h3>This is a heading</h3><hr />
  8. 8. HTML COMMENTS<!-- This is a comment -->
  9. 9. HTML TEXT FORMATTING<b>Bold</b> <small>small</small><i>Italic</i> <strong>Strong</strong><u>Underline</u> <sub>subscript</sub><big>big</big> <sup>superscript</sup>
  10. 10. HTML LINE BREAKS <br> or <br />
  11. 11. H T M L PA R A G R A P H S<p>This is a paragraph</p>
  12. 12. H T M L < F O N T > TA G<font size="3" color="red">This is some text!</font><font size="2" color="blue">This is some text!</font><font face="verdana" color="green">This is some text!</font>
  13. 13. H T M L < C E N T E R > TA G<center>This text will be centered.</center>
  14. 14. HTML LINKS <a href="http://www" target="_blank">Visit!</a> <a href="page 01.html" target="_blank">Visit About Us </a> <a href="C:Documents and SettingsAdministratorDesktopfirst.html" target="_blank">Click here to visit first page</a>
  15. 15. HTML IMAGES<img src="boat.gif" alt="Big Boat" /><img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228" />
  16. 16. H T M L TA B L E S - 1<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr></table>
  17. 17. H T M L TA B L E S - 2<table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr></table>
  18. 18. H T M L TA B L E S - 3<table border="1“ bgcolor=“red” width=“50%” Align=“left”> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr></table>
  19. 19. H T M L TA B L E S - 4<table border="1“width=“50%” > <thead> <tr> <th>Month</th> </tr> </thead> <tbody> <tr><td>January</td></tr> <tr><td>February</td></tr> </tbody> <tfoot> <tr><th>Sum</th> </tr> </tfoot></table>
  20. 20. H T M L TA B L E S - 5<table border="1"> <tr bgcolor=“red” align=“center”> <td width=“20%”>Header 1</td> <td width=“80%”>Header 2</td> </tr> <tr> <td align=“right” height=“50”>row 1, cell 1</td> <td valign=“top”>row 1, cell 2</td> </tr></table>
  21. 21. H T M L TA B L E S ‘ S PA N N I N G ’ – 6<table border="1"> <tr> <td rowspan=“2”>row 1, cell 1</td> <td>row 1, cell 2</td> <td>row 1, cell 2</td> </tr> <tr> <td colspan=“2”>row 2, cell 1</td> </tr></table>
  22. 22. H T M L TA B L E S ‘ PA D D I N G ’ - 7<table border="1“ cellspacing=“15” cellpadding=“10”> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr></table>
  23. 23. HTML LISTS Unordered Lists <ul> <li>Coffee</li> <li>Milk</li> </ul>
  24. 24. HTML LISTS Ordered Lists <ol> <li>Coffee</li> <li>Milk</li> </ol>
  25. 25. HTML LISTSNested List <ol> <li>Flower</li> <ul> <li>red</li> <li>White</li> </ul> <li>Fruits</li> </ol>
  26. 26. HTML LISTS Definition Lists <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>
  27. 27. HTML FRAMES Column frame <frameset cols="25%,75%"> <frame src="frame_a.html" /> <frame src="frame_b.html" /> </frameset>
  28. 28. HTML FRAMES Row frame <frameset rows="*,*"> <frame src="frame_a.html" /> <frame src="frame_b.html" /> </frameset>
  29. 29. HTML FRAMES Nesting frame <frameset cols="25%,75%"> <frame src="frame_a.html" /> <frameset rows="*,*"> <frame src="frame_a.html" /> <frame src="frame_b.html" /> </frameset>
  30. 30. HTML I FRAMES<iframe src="demo_iframe.htm"width="200" height="200"></iframe>
  31. 31. HTML FORMS AND INPUT HTML Forms<form>.input elements.</form>
  32. 32. HTML FORMS AND INPUT Text Fields<input type="text" />
  33. 33. HTML FORMS AND INPUT Password Field<input type="password" />
  34. 34. HTML FORMS AND INPUT Submit Button<input type="submit" />
  35. 35. HTML FORMS AND INPUT Submit Button<input type="submit" />