HTML Training Course in Persian

5,424 views
5,288 views

Published on

This is a kick-start HTML tutorial. with this you could easily learn HTML in a few days. In PERSIAN.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
5,424
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML Training Course in Persian

  1. 1. HTML -
  2. 2. • Web 2 – HTTP – –HTTPS – FTP – – HTML •
  3. 3. World Wide Web • Web Browser • HyperText Markup Language HTML • • Hyperlink •World Wide Web Consortium (W3C) • Internet Engineering Task Force (IETF) •
  4. 4. Web 2 • • • • • •
  5. 5. HTTP HyperText Transfer Protocol HTTP • Request-Responce - HTTP • Stateless HTTP • GET POST • HTML • HTML •
  6. 6. Web Browser • HTTP •HTML • HTML • Internet Explorer • Firefox Google Chrome
  7. 7. HTTPS HTTP • HTTP Secure HTTP HTTPS • Secure Sockets Layer SSL Transport Layer Security TLS HTTPS • Digital Certificate HTTPS •
  8. 8. FTP File Transfer Protocol FTP • HTTP FTP FTP • – – FTP • HTTP HTML
  9. 9. ••
  10. 10. HTML
  11. 11. HTML • HTML • Word PDF • Markup Language Tag HTML • XML HTML • • /<tagName>tagdata here, as mush as you want </tagName>
  12. 12. • – – – • •<tag attribute1=“attributeValue” attribute2=“attributeValue2”><innerTag> some data <anotherInnerTag /> </innerTag></tag> •
  13. 13. XML • <html> HTMLHTML XML •HTML 4.01 Strict<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">HTML 4.01 Transitional<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"HTML 4.01 Frameset<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
  14. 14. XHTML 1.0 Strict<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">XHTML 1.0 Transitional<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">XHTML 1.0 Frameset<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- frameset.dtd">XHTML 1.1 (strict)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  15. 15. Head HTML • Body<html><head> <title> Sample Webpage </title></head><body> <p> hello there this is a paragraph </p> <p> hello again another paragraph with <b> bold </b> text! </p></body></html>
  16. 16. HTML • .1 ASCII .1 .2 Unicode .3UTF-8 .2 Enter
  17. 17. HTML Space whitespace .1 <>& .2 &lt; < .1 &gt; > .2 &amp; .3 HTML .3 Microsoft Frontpage .1 Adobe Dreamweaver .2 ZendStudio for Eclipse .3
  18. 18. HTML
  19. 19. HTML • HTML • CSS HTML • Comments<!-- this is a comment! --> HTML •
  20. 20. <html> HTML • HTML HTML • “ltr” “rtl” Dir – rtl “en” “fa” Lang –
  21. 21. <html><html dir=rtl lang=fa><head></head><body></body></html><html><head></head><body>Hello, World! </body></html>
  22. 22. <head> Head Html body head • head
  23. 23. <title> Title Head •
  24. 24. <title><html lang=fa><head> <title> </title></head><body></body></html>
  25. 25. <p> P Align – Left • Right • Center • Justify • RTL Body
  26. 26. <br> Br
  27. 27. <img> Img src – Alt – top, bottom, middle, left , right Align – Width , Height – Tooltip Title – Usemap – Title HTML Body
  28. 28. <img><html><head> <title> title></head><body><p> <br/><img src=image1.jpg width=200align=middle/></p><p> </p><img src=image1.jpg width=200height=200 /></body></html>
  29. 29. <a> A URL href – Name – Target – _blank • _parent • _self • • Body
  30. 30. <a><html><body> <p> This is a sample paragraph. Click <a href=http://www.google.com>Here</a> to visit Google website. <br/> <a href=http://hackersite.com/hack.html title=Click me to die!>Yahoo!</a> <br/><br/> <a href=http://somesite.com/somepage.html#anchor> <img src=img.gif /> </a></body></html>
  31. 31. <b> B Bold Body small big i css
  32. 32. <sup>,<sub> Sup, Sub Body small big i css
  33. 33. <hr> Hr Horizontal Line Body hr br
  34. 34. <sub>,<sup><html><body> Some text with <sup>super</sup> text. <hr/> Some more text with <sub>sub</sub> text.</body></html>
  35. 35. <ol>,<ul> OL,UL Unordered List Ordered List Body li li
  36. 36. <li> LI List Item UL OL
  37. 37. <html><body> <ol> <li> li> <li> li> <li> li> </ol> <ul> <li> List 1</li> <li> List 2</li> <li> List 3</li> </ul></body></html>
  38. 38. Span, DivHTML • HTML Span • Div • Div CSS •
  39. 39. HTML HTML • – – – Table • Body Header • Footer •
  40. 40. <Table> Table Border – Cellpadding – Cellspacing – Width – Body
  41. 41. <Tr> Tr Table Row Align – VAlign – Top • Middle • Bottom • Baseline • Table,Tbody,Thead,Tfoot
  42. 42. <Td> Td Table Data Align – VAlign – Colspan – Rowspan – tr,th
  43. 43. <html><body> <table border=1> <tr> <td>Cell 11</td> <td>Cell 12</td> </tr><tr> <td>Cell 21</td> <td>Cell 22</td> </tr></table> <hr/> <table border=1> <tr> <td rowspan=2>Cell 11 <br/>Cell 21</td> <td>Cell 12</td> </tr><tr> <!-- Cell 21 ommited --> <td>Cell 22</td> </tr></table></body></html>
  44. 44. <Tbody> Tbody Table Body Align – VAlign – Table
  45. 45. <Thead> Thead Table Header Align – VAlign – Table
  46. 46. <Tfoot> Tfoot Table Footer Align – VAlign – Table
  47. 47. <Th> Th Table Header Data Align – VAlign – Thead>Tr
  48. 48. <html><body> <table border="1"> <thead><tr> <th>Month</th> <th>Pays</th> </tr></thead><tbody><tr> <td>January</td> <td>$100</td> </tr><tr> <td>February</td> <td>$80</td> </tr></tbody><tfoot><tr> <td>Sum</td> <td>$180</td> </tr></tfoot></table></body></html>
  49. 49. Border • CSS • • DOCTYPE • bazitab.com •
  50. 50. HTML HTTP • HTML Submit HTML • Get • Post Get • URL Get – Post – Get Post •http://hosting.pershe.com/viewticket.php?tid=109338&c=X4jQ3Ukc c , tid Get
  51. 51. <form> Form HTML • Submit Enter • Get/Post Method – Action – •<form></form><form action=„getData.php‟ method=„get‟></form><form action=„http://google.com/‟ method=„get‟></form>
  52. 52. <input> •type Button – Checkbox – File – Hidden – Password – Radio Radio – Text – Submit – Reset –
  53. 53. <input><html><body><form method=get><input type=checkbox> I am a checkbox! <br/><input type=file> <br/><input type=password value=sth> <br/><input type=radio> Radio button! <br/><input type=text value=Normal!> <br/><input type=submit> | <input type=button></form></body></html>
  54. 54. <input> input • input Checkbox Radio Checked – Checked=„Checked‟ or else Disabled – password text MaxLength – password text Readonly – Size – Value – Name –
  55. 55. <input><html><body><form method=getaction=http://google.com/search> <br/><input text value=Search String /><br/><input type=submit value=Search><br/></form></body></html>
  56. 56. <textarea> <textarea> • readonly • cols rows • • textarea<textarea rows=„5‟ cols=„10‟>HelloThere</textarea> textarea <br/> HTML
  57. 57. <select> Dropdown Combo Select • Select Mutiple • Option Select • Selected Option • Value Value Option •
  58. 58. <select><html><body><select> <option value=Wood> </option> <option value=Iron> </option> <option value=Stone> </option></select></body></html>
  59. 59. <label>,<fieldset> • Label For Label •<label for=„myname‟>Enter your name:</label><input type=„text‟ name=„myname‟ /> fieldset • Radio<fieldset><input type=„radio‟><input type=„radio‟></fieldset><fieldset><input type=„radio‟><input type=„radiou‟></fieldset>
  60. 60. HTML • – CSS Class • HTML Id • CSSCSS Style • Title • – RTL LTR Dir • – Tabindex • Tabindex TAB
  61. 61. HTML • CSS Style – Javascript Script – Head Meta – HTTP Header Content • Header http-equiv • Name • Link – Rel • Href • Type •<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
  62. 62. HTML .1 SBCE .2 IE Firefox .3 Download.com .4 .5IMG .6

×