1 | P a g e
HTML BY SATURNGOD
HTML áááášáááš ááąáááĄááŤáá˝áŹ
Internet
ááŹáĄááźáášááşáášáťááášáááŹáťááŽá¸
áá°áááŻáášá¸ááŽá¸ááŤá¸áĄááśáŻá¸áťááłážááąáááášá
áá˝áźáášáąááŹášáááŻááąááźááŹááášá¸ Internet áąáááá˝áŹ áááŻáášáááŻáášáąáááŹááşáŹá¸ááᯠáááŻáášáááŻááš Homepage ááşáŹá¸ááᯠáĄááźáášááá° áá°áąááŹáášáááŻáášáąááťááŽá Internet áááŻááŹááᯠáĄááşáášáá˝áášá¸ááąááąááŹáˇááŤáá°á¸á áĄááźáášáá˝áášá¸áááášáąááŹáˇ Internet áááŻáᏠáááŹáť áąááááá˝ áááŻáášááśáĄááşáášá¸ááşáášá¸ ááşááášááášááŹá¸áąáᏠNetwork ááźáášááášážááŽá¸áá ášááŻáťáá ášááŤááášá áĄá˛ááŽááᯠInformation áąááź ááá˝áášáááŻááĄááźááš Web Page áąááźááᯠáąáá¸ááźá˛áááŤááášá Web Page áąáá¸ááźá˛áááŻáááŹáĄááźááš HTML áᏠáĄááá ááşááŤááášá áąáá¸ááŹá¸ááŹá¸áá˛áˇ Web Page áąááźááᯠWeb Browser Software áá˛á ážáááˇášáááááŤááášá Web Broswer Software áąááźá Internet Explorer áá˛á Firefox áááŻáá ááŹááášážááŽá¸áąááźááŤá
HTML History
1989 ááŻá Tim Berners-Lee áá˛á Rober Calliau áᏠResearch Documents áąááźááᯠáááŻáááŻáťááášááášáąááŹáášá¸ááźááš ááášáˇ ááášá¸ááášá¸ááᯠáá˝áŹáąááźááˇá ᲠáŤááášá á áá˝á áš áąááŹáášážááŹáąááŹáˇ Berners-Lee áᏠbrowser áąááźá ážáááˇášááááášááŹá¸áááŻáášáťááŽá¸ Tag ááşáŹá¸áá˝áášáˇ ááźá˛áá áášá¸ááášáąááŹáášááŹá¸áá˛áˇ ááášá¸áááŹáá ášááŻááᯠáťááłááŻáášáááŻáášááˇá ᲠáŤááášá áááŻááąááŹáášáĄá˛áᎠtage áąááźáá˛áá˝áŹ Hyper-Link áá˛á document áĄááşáášá¸ááşáášá¸ááşááášááášáááŻáášááˇá˛ tag áąááźááŤááášáˇááźáášá¸áááŻáášááˇá ᲠáŤááášá Berners-Lee áá˛á ááášá¸áááŹááᯠHyber Text Markup Language áááŻááˇá˛ HTML ááŤáá˛á
Tag áááŻááŹááŹáá˛
Tag
áááŻááŹááąááŹáˇ
áááŻá¸áááŻá¸
Text
áąááźááá˛
HTML
code
áąááźáááŻ
ááźá˛áťááŹá¸áááŻáááąáĄáŹáášááŻáášááŹá¸ááŹááŤá
ááášáááŻááşáłáá¸áá˛áááŻááášáąááŹáˇ <b>This is bold </b> áááŻáááš web browser áá˛á ážáááˇášáááš á áŹááśáŻá¸áᏠbold áťáá ášáąáááŤáááášáˇááášá áĄá˛ááŽáá˝áŹ <b> áá˛á </b> áááŻááᏠtag áąááźááŤá áĄááşáŹá¸áĄáŹá¸áťááášáˇ tag áąááźáᏠáĄááźáášáˇ áá˛á áĄáááášá፠ááŤááášá áĄáááášáááŻáááš / áąáá¸ááśááŹá¸áąáá¸áááŤááášá
HTML áĄááźááš Editor
HTML áĄááźááš Editor áąááź IDE áąááźáĄááşáŹá¸ážááŽá¸ááá˝ááŤááášá áá˝áźáášáąááŹášááąááŹáˇ Dreamweaver áĄážáááłáášááśáŻá¸ááŤáá˛á áá°á HTML áááášááášáąááŹááš Website áá ášááŻááźá˛áááŻááááŤááášá ááŤáąáááášáˇ Dreamweaver áááŻááśáŻá¸ááášáąááŹáˇ HTML code áąááźááááŹáá˝áŹ áááŻáášáááᯠááťááŹá¸ website áąááźááᯠáťááášáááŹááášá¸ááášááŤáááášáˇááášá áá˝áźáášáąááŹášáááŻááąááź áá°ááşáŹá¸áąááźáąáá¸ááŹá¸áá˛áˇ
website
template
áááŻáťááášááşáášááášá
áááŻáášáááŻáášáąááąáááşáŹááşáŹ
HTML
code
áąááźáááŻááááşáášááášá ááŤáááŻááášáąááŹáˇ áąááˇááŹááŹá áá˝áŹ Notepad ááśáŻá¸áťááŽá¸áąááˇááŹááŤá áąááˇááşáášáˇááŤá HTML á web site
http://saturngod.mysteryzillion.com
2 | P a g e
HTML BY SATURNGOD
ááźá˛ááá˛áˇ
áĄáá˛áá˝áŹ
áĄááźáášááśáŻá¸áá˛á
áĄáąáťáááśáĄááşááśáŻá¸áá˛á
áá°ááááŻáąááąáááşáŹááşáŹááŹá¸ááášááŹá¸áá˝
ááťááŹá¸
web
programming áąááźáťáá ášááˇá˛ PHP, ASP.NET , JSP , Ruy On Rail áááŻááá˝áŹ áĄáąááŹáášáĄáá°áťáá ášáá˝áŹááŤá
HTML áááŻáąááˇááŹáááš
1.Starting To Creat and Edit Webpage
Notepad áťááášáˇá ááášáťááášá¸
á. Windows Key + R ááᯠááá˝áášáááŻáášááŤá Run Dailog Box ááášááŹááŤááášá áááŻááąááŹááš notepad ááŻáááááŻáášáááŻáášááŤá áťááŽá¸áá˝áşááš OK ááᯠááá˝áášáááŻáášááŤá ááŤáááŻáááš notepad ááášááŹááŤáááášáˇááášá
á. Notepad áá˛ááźááš Format áąáĄáŹáášá word warp ááᯠcheck ááŻáášááŹá¸á፠á ááŹáťáá ášáááŻáááášá¸áááŻááášáąááŹáˇ Word Warp á Notepad áá˝áŹá áŹáááŻáášáᏠáťááášáˇááźáŹá¸áááš áąáĄáŹáášáá ášáąážááŹáášá¸ ááášá¸ááźáŹá¸ááášáĄááźááš áťáá ášááášá
HTML á ááášáąáá¸ááŹá¸áťááášá¸
á. Notepad áá˛ááźááš áĄááŻáááŻáąáá¸ááŹá¸áááŻáášááŤá
http://saturngod.mysteryzillion.com
3 | P a g e
HTML BY SATURNGOD
<html> <head> <title>This is title</title> </head> <body> This is body </body> </html>
HTML áá˛á á áťááŽá¸ HTML áá˛ááťááášáááášáááŤááášá áĄá˛ááŽážááŹá¸áá˝áŹ html code áąááźáąáá¸áááŤááášá Head Tag áá˛á Head Tag áĄáááášážááŹá¸ááźááš Title ááášáˇááŹá¸ááášááᯠáąááźááááášá Title áááš Browser á ááááš bar ááźááš áąááźááťááášááášáťáá ášááášá Body áĄááźáášáˇ áá˛á áĄáááášážááŹá¸áá˝áŹ ááááá áá˝á ášááášáᏠá áŹááşáŹá¸áąáá¸ááŹá¸áááŻáášáááš á
á. áĄá˛ááŤááᯠááąááᏠáá˝áŹ save ááźáášá¸áááŻáášááŤá Save Dialog box ááášááŹáááš filetype ááᯠAll file áááŻááąáá¸áááŻáášááŤá file name ááᯠfirstrun.html áááŻááąáá¸áááŻáášááŤá firstrun áááš ááááá áá˝á ášááášáᏠááŹááášáąáá¸áááŻáášááášá .html áááš file extension áťáá ášááášá HTML áąáá¸ááŹá¸áąáᏠpage ááşáŹá¸ááᯠ.html áá˝áášáˇ .htm áááŻááąáá¸áá˝áᏠbrowser ááźááš áąááááŤáááášáˇááášá
á. Save ááźáášá¸áááŻáášáąáᏠfile ááášá¸áąážááŹáášá¸ááᯠááźáŹá¸áááŻáášá፠á first.html file áąáá¸ááᯠdouble click ááŻáášáťááŽá¸ ááźáášáˇáááŻáášá፠á
ááŤááᯠpage áąáá¸áá ášááŻááášááŹááŹááᯠáťááášáááŤááášá
http://saturngod.mysteryzillion.com
4 | P a g e
HTML BY SATURNGOD
áááášáááŻáášá¸ááźááš
File
ááášááášá¸áąážááŹáášá¸áááŻ
address
bar
ááźáášáąááźááááášáťáá ášááášá title tag áá˛ááźááš áąáá¸ááŹá¸áąáᏠThis is tile áááŻáąáᏠá áŹááᯠWindos á Title bar áá˝áášáˇ Tab Title bar áááŻáááźááš áąááźááááášá Body tag áá˛ááźááš áąáá¸ááŹá¸áąáᏠThis is body áááŻáąáᏠá áŹááŹá¸ááᯠá áŹááşáášáá˝áŹáĄáťáá´áąááááźááš áąáááąáááášááᯠáąááźááááášáťáá ášááášá
áťááášááášáááŻááášáąááŹáˇ IE7 áá˝áŹáááŻáááš Page > View Source áááŻááá˝áášáááŻáášááŤá Notepad áá˛á áááŻáášáąáá¸ááŹá¸áá˛áˇ HTML ááźáášáˇááŹááŤááášá IE 6 áá˝áŹáááŻáááš View > Source ááᯠááá˝áá áš ááŻáášááŤá Notepad áá˛á áááŻáášáąáá¸ááŹá¸áá˛áˇ HTML ááźáášáˇááŹááŤááášá áĄá˛ááŽáá˝áŹ áąáá¸ááŹá¸áá˛áˇ codeáąááźááᯠááášáááŻáášáááᯠáááŻáášáˇá áášáá˛áá˝áŹáąáá¸ááŹá¸áá˛áˇ page áááŻááášáąááŹáˇ áťááášáťááŽá¸ áá ášááŤááášá¸ save ááŻáášáááŻáášááŤááášá Internet áąááá Web site áąááźáááŻáąááŹáˇ view > source ááąáááźáášáˇáťááášáťááŽá¸ save ááŻáášáááŻáááááŤáá°á¸á
Header Tag
http://saturngod.mysteryzillion.com
5 | P a g e
HTML BY SATURNGOD
notepad áá˛áá˝áŹ ááŽáááŻáááŻáášáááŻáášá፠<html> <head> <title>Example Of Header</title> </head> <body> <h1>This is Header</h1> This is normal text </body> </html> áĄá˛áᎠcode áąáá¸ááᯠnotepad áá˛áá˝áŹááášáˇáąáá¸.. áťááŽá¸áąááŹáˇ run ážáááˇášáááŻáášááŤá áĄááŻáááŻáťááášáááŤáááášáˇááášá Head Tag á h1 ááąá h6 áĄáá ááá˝ááŤááášá ááśááŤáášážááŽá¸áąááąá áąáá¸ááźáŹá¸áąááąááá˛á h6 áááŻáĄáąáá¸ááśáŻá¸ááᯠáąááŹáášááźáŹá¸áťááŽá áᲠááášáąááźá á áášá¸ážáááˇášááąáĄáŹáášá notepad áá˛áá˝áŹ áąáĄáŹáášáááᯠáááŻáášáťááŽá¸ save ááŻáášáááŻáášá áťááŽá¸áááš ááźáášáˇážáááˇášáááŻáášáááš áąááźááááŤáááášáˇááášá
<html> <head> <title>Example</title> </head> <body>
http://saturngod.mysteryzillion.com
6 | P a g e
HTML BY SATURNGOD
<h1>H1</h1> <h2>H2</h2> <h3>H3</h3> <h4>H4</h4> <h5>H5</h5> <h6>H6</h6>
</body> </html> áĄááŻáááŻ
html áĄáąážááŹáášá¸ááášá¸ááášá¸
ááá˝ááŤáąáá¸ááášá
ááŽáąááŹáášáąáá¸áá˛ááááš
ááŹá¸ááášááŹáąááŹáášááŤáťááŽá á áŹáąááźáá˛ááŤáá˛áˇ
page
áááášááášá¸áąááŹáˇ
áá ášááŻáąáá¸áááŻáááąááťááŽá
áááášááŤáá°á¸á ááŤáąáááášáˇ
áááŻáĄáášááŹáąááź
ááá˝áąáá¸ááŹáąááŤáˇá áĄááŻááášáťááŽá¸ bold á italic á underline ááŻáášááśáŻáąáá¸áąááź ááášáąáťááŹááŤááášá ááźáášááŤááášá
Line Break HTML áá˝áŹ á áŹáá ášáąážááŹáášá¸ááášá¸ááşáášááášáąááŹáˇ <br/> áááŻááśáŻá¸ááŤááášá áá°ááá˝áŹ close tag áááŤáá°á¸á <br/> áá˛áąáá¸áąáḠ<br> áá˛áąáá¸áąáá¸áááŤááášá <html> <head> <title>Example</title> </head> <body> First Line<br/>Second Line<br>Third Line </body> </html>
http://saturngod.mysteryzillion.com
ááŤááĄá áá˛
7 | P a g e
HTML BY SATURNGOD
Bold, Italic , Underline Tag bold áááŻááááŻá áá˝áźáášáąááŹášáááŻááąááź <b> áááŻááśáŻá¸ááŤááášá áąááŹáášáťááŽá¸ italic áááŻááááŻá <i> áąááŤáˇá ááŤáááŻáááš Underline áááŹáá˛áááŻáááš áááťááŽá¸ááŹá¸áąááŹáášááŤá áá˝áźáášáąááŹášáááŻááąááź <u> áááŻááśáŻá¸ááŤááášá áĄá˛ááŤááᯠnotepad áá˛áá˝áŹ ááŽáááŻáąáá¸áťááŽá¸ run áááŻáášááášáááŤááášá
<html> <body> <b>This is bold</b> <br/> <i>This is italic</i> <br/> <u>This is underline</u> <br/> </body> </html> Bold ááŻáášááášá áąááŹáášáťááŽá¸ áĄá˛ááŤááᯠunderline ááŹá¸ááášá ááŤáá˝ áááŻááš italic ááŻáášááášá áĄá˛áááŻááşáłáá¸ááŻáášááşáášááášá áááŤááášá tag áąááźáá˛áá˝áŹ tag áąááźááášáˇáááŻáášáąááŤáˇá ááŽáááŻááášáˇáááŻááááŤááášá <i><b>This is bold italic </b></i> <u><i><b>This is bold italic </b></i></u> áĄá˛áááŻááşáłáá¸áąáá¸áááŻááááŤááášá áááşáłáááá°áąááźá áąáá¸ááášááášá <i> áá˛áá áá˝ ááá˝áŹááŹá¸á ááŽáááŻáááŻáášá¸ áĄá áĽášáááŻáášá¸áąáá¸áá˝ ááá˝áŹááŹá¸á áąááŹáášáťááŽá¸ <b><i></b></i> áĄá˛áááŻááşáłáá¸áąááźáąáᏠáááášáááŻááááá°á¸ááŹá¸á ááŹáá˛á á á áááŤááášá áĄá áĽášáááŻáášá¸áááŻáášáᲠ<b><i> This is bold italic </i></b> áááŻááąáá¸ááášá¸áťáá ášááŤááášá áąááŹáášáťááŽá¸ tag áĄááźáášáˇáąááź áĄáááášáąááźá ážáááłáášááááŻáťáá ášáąááááŻááááŤááášá ááŤáąáááášáˇ structure ááşááşáąáá¸á ááśáŻá áśááşááşáąáḠáťáá ášáąáááášáąááŹáášá¸ááŹáąááŤáˇá áąááŹáášáááŻáááᯠcode áááŻáťááášááášáááášááŹáąááŤáˇá
Pre Tag http://saturngod.mysteryzillion.com
8 | P a g e
HTML BY SATURNGOD
áá˝áźáášáąááŹášáááŻááąááź á áŹáá ášáąážááŹáášá¸ááášá¸ááá˝áŹ áážáááłáášáá°á¸á Enter áąááŤáášáááŻáášááśáŻáá˛ááááš áá ášáąážááŹáášá¸ááášá¸ááşáášááášá áĄááźáášááśáŻá¸
ááášá¸ááášá¸ááąááŹáˇ
dream
weaver
ááśáŻá¸áááŻáášáťááášá¸áá˛á
áĄá˛ááŤáááŻááášáąááŹáˇ
HTML
ááŹá¸ááášáá˝áŹáááŻáášáąááŹáˇáá°á¸á áąááŹáášáá ášááášá¸ááąááŹáˇ <pre> ááŤá ááŤáąáááášáˇ áá°á font ááśáŻá áśáąáťááŹáášá¸ááźáŹá¸ááášá áĄá˛ááŤá ááá ἠáááá˝ááŤáá°á¸á áąááŹáášáááŻáášá¸ font áąááźááášáááŻáąáťááŹáášá¸ááᲠáááŻááŹááááŹáááš ááŹáťááášááŻááášáááŻááááŤááášá áąááŹáášáťááŽá¸ <pre> áá˝áŹ áá°á tab áąááŤáášááŹá¸ááŹáąááź áĄá ááááŤááášá
<html> <head> <title>Example</title> </head> <body> <pre>Pre Tag, Now Enter Now Tab
Tab
</pre> </body> </html>
Paragraph Tag áá˝áźáášáąááŹášáááŻááąááź
á áŹáąááźáááŻ
paragraph
ááśáŻá áśáąáá¸ááşáášááášá
á áŹáááŻáášáąááźáá˛á
áąáá¸ááášáąááŤáˇá
áááŻááśáŻá¸áááŻááááŤááášá áá°á áĄááááš tag áááŤááášá¸áááŤááášá ááášáˇááášáąááŹáˇ áááŻáąááŹáášá¸ááŹáąááŤáˇá <html> <head> <title>Example</title> </head> <body>
http://saturngod.mysteryzillion.com
ááŤáááŻáááš
<p>
9 | P a g e
HTML BY SATURNGOD
<h1>About Notepad</h1> <p>Notepad is a basic text editing program and it is most commonly used to view or edit text files. A text file is a file type typically identified by the .txt file name extension.</p> <b> How do I change the font style and size?</b> <p>Changes to the font style and size affect all the text in the document.<br/> Click the Format menu, and then click Font.<br/> Make your selections in the Font, Font style, and Size boxes.<br/> An example of how your font will look appears under Sample.<br/> When you are finished making font selections, click OK.<br></p> </body> </html>
Horizonal Line áá˝áźáášáąááŹášáááŻááąááź horizonal ááşáĽášá¸ááŹá¸ááşáášááˇá˛ áĄááŤáá˝áŹ ááśáŻá¸áááŻááááŤááášá ááśáŻá¸ááśáŻááśáŻá¸ááášá¸ááąááŹáˇ <hr> ááŤáá˛á close tag áááŤááŤáá°á¸á <html> <head> <title>Example</title> </head> <body>
http://saturngod.mysteryzillion.com
10 | P a g e
HTML BY SATURNGOD
<h1>About Notepad</h1> <p>Notepad is a basic text editing program and it is most commonly used to view or edit text files. A text file is a file type typically identified by the .txt file name extension. </p>
<hr>
<h1> How do I change the font style and size?</h1> <p>Changes to the font style and size affect all the text in the document.<br/> Click the Format menu, and then click Font.<br/> Make your selections in the Font, Font style, and Size boxes.<br/> An example of how your font will look appears under Sample.<br/> When you are finished making font selections, click OK.<br></p> </body> </html> áĄááášá፠code ááᯠrun áááŻáášáááš ááŽáááŻáťááášáááášá áĄá˛áá˝áŹ <hr> ááášáˇááŹá¸áá˛áˇáąáááŹá line áąáá¸ááŹá¸ááŹá¸ááŹááᯠáťááášáááŤáááášáˇááášá
Attribue http://saturngod.mysteryzillion.com
11 | P a g e
HTML BY SATURNGOD
áá˝áźáášáąááŹášáááŻááąááźáᏠtag áąááźáá˝áŹááášá¸ attribute áąááźááášáˇáťááŽá¸ ááśáŻá¸áááŻáášááŤááášá attribute áááŻááŹááąááŹáˇ áĄá˛áᎠtag áááŻáášáááŻáášááˇá˛ properties áąááŤáˇá tag áááŻáášá¸áá˝áŹáąááŹáˇ attribute áááá˝ááŤáá°á¸á áĄáᯠáĽáŽá¸á áźáŹ áĄááášááśáŻá¸ body áá˝áŹááŤáá˛áˇ color attribute áĄáąážááŹáášá¸áąáá¸áá˛á á áááŻáášááąáĄáŹáášá
Body Color <html> <head> <title>Example</title> </head> <body bgcolor=silver> Body BGCOLOR </body> </html>
áĄá˛áᎠcode áąáá¸ááᯠrun ááŻááášááášáąááŹáˇ áĄááášáááᯠbackground color á áĄáťáá´áąááŹáášáááŻáášáąááŹáˇáᲠá ááášá¸ááŻáąááŹáášáąáá¸áťáá ášáąáááŹááᯠáąááźááááŤááášá áąáĄáŹáášá Table áá˝áŹ áĄááśáŻá¸ááşáŹá¸áá˛áˇ color 16 áąááŹáášááŹááášáąááźááŤá
Silver
Gray
Maroon
Green
Navy
Purple
Olive
Teal
White
Black
Red
Lime
Blue
Magenta
Yellow
Cyan
áá˝áźáášáąááŹášáááŻááąááźáᏠcolor áąááźááᯠcode áĄáąááá˛áááášá¸ áĄááśáŻá¸áťááłáááŻáášááŤááášá ááśáŻá¸ááá˝áŹááąááŹáˇ RGB color ááŤá Hex code number áááŻáĄááśáŻá¸áťááłáááŤááášá #FF0000 áááŻááášáąááŹáˇáĄááŽáąááŹáášááŤá áąáá˝áááśáŻá¸ á ááśáŻá¸á áĄááŽáąááŹáášáťáá ášáťááŽá¸ áĄáááš á ááśáŻá¸á áĄá ááášá¸áąááŹáášááŤá áąááŹáášááśáŻá¸ áááśáŻá¸ááąááŹáˇ áĄáťááŹáąááŹáášáąááŤáˇá áĄá˛áᎠáĄáąááŹááš ááąááŹáášááᯠá áášáťááŽá¸ ááśáŻá¸áááŤááášá áááášáááŻá color áąááźááᯠááááá°á¸áááŻáááš photoshop ááąáááášá¸ ážáááłáášáá˝á ášááášááˇá˛ áĄáąááŹáášáááŻ
http://saturngod.mysteryzillion.com
12 | P a g e
HTML BY SATURNGOD
áá°áťááŽá¸ááśáŻá¸áááŻáášááŤááášá ááášáááŻáá°áááá˛áááŻááášáąááŹáˇ áĄááášááśáŻá¸ photoshop áááŻááźáášáˇáááŻáášá ááášáááš áąáĄáŹáášááŹá¸áá˝áŹ color áąááźá¸áááŻááąáá¸ááŤááášá áĄá˛ááŤáąáá¸ááᯠdouble click ááŻáášáááŻáášááŤá color dialog box ááášááŹááŤááášá áťááŽá¸áááš áá˝á ášááášáᏠáĄáąááŹáášáąááźá¸ááŤá color áĄáąááŹáášáąááźá¸áťááŽá¸áááš áąáĄáŹáášááŹá¸áá˝áŹ hex code áąáá¸ááᯠcopy áá°á¸áááŻáášááśáŻááŤáá˛á áá˝áźáášáąááŹášáááŻááąááź color áĄáąááá˛áááśáŻá¸ááşáášáááš # áąáá¸ááᯠáąáá˝ááá˝áŹ ááśáťááŽá¸ááśáŻá¸áááŻáášááśáŻááŤáá˛á
<html> <head> <title>Example</title> </head> <body bgcolor=#e5bb2c> Body BGCOLOR Hex code </body> </html>
http://saturngod.mysteryzillion.com
13 | P a g e
HTML BY SATURNGOD
áĄááŻáááŻááášáąááŹáˇ attribute áááŻáášá¸ áá˛á color áááŻáášá¸áąáá¸ááᯠááášá¸ááášá¸ááŤá¸ááŤá¸áááąááŹáášáťááŽáááŻáááášááŤááášá attribute ááášáˇáááŻáááá˛áˇ tag áąááźáááášá¸ áĄááşáŹá¸ážááŽá¸ááá˝ááŤáąáá¸ááášá áťááášá¸áťááášá¸áťááášá¸ áąáťááŹáťáááźáŹá¸ááášá áĄáᯠáąááŹáášáááš tag áá ášááŻáťáá ášááˇá˛ <hr> áá˛á attribute áĄáąážááŹáášá¸áąáá¸áąáťááŹááŤááášá Hr Attribute áá˝áźáášáąááŹášáááŻááąááźáᏠtag áá ášááŻáá˛ááąááŹáášáá˝áŹ attribute áá ášááŻááášáá áááŻáášáááŻááááŤááášá tag áąááźáąááŹáášáá˝áŹ attribute
áá ášááŻááášááááŤááŹáąááźáááŻ
ááášááąáĄáŹáášá
<html> <head> <title>Example</title> </head> <body bgcolor=#e0e0e0> Default HR <hr> Hr with size=1 <hr size=1> Hr with size=5 <hr size=5>
http://saturngod.mysteryzillion.com
áąááŹáášáááŻáášá¸áá˝áŹáąááźááááŤáááášáˇááášá
áĄááŻáąááŹáˇ
hr
áĄáąážááŹáášá¸áąáá¸
14 | P a g e
HTML BY SATURNGOD
Hr with size=10 <hr size=10> Hr with size=10 and noshade <hr size=10 noshade> Hr with size=5 and color <hr size=5 color=#D60000> </body> </html> áĄá˛áá˝áŹ size ááąááŹáˇ áĄááźáášáĄá áŹá¸ááŤá noshade áááŻááŹááąááŹáˇ shade áááŤáá˛áˇááŹááᯠáąáťááŹááŹááŤá áąáťááŹáášážááŽá¸áąááŤáˇá color ááąááŹáˇ ááááážáááłáášáá˝á ášááášááˇáĄ ᲠáąááŹáášááášáˇáááŻááááŤááášá List List áááŻáášá¸áá˝áŹ order list áá˛á unorder list áááŻáťááŽá¸ááá˝ááŤááášá áááášá¸áĄáŹá¸áťááášáˇ ááśááŤáášá áĽášáá˛á list áá˛á ááśááŤáášá áĽášáąááźáááŤáá˛áˇ list áąááŤáˇá áąááŹáášáťááŽá¸
defination
list
áááŻááŹááá˝ááŤáąáá¸ááášá
áĄáąážááŹáášá¸áąáá¸ááźáŹá¸ááąáĄáŹáášá Unorder list <html> <head> <title>Example</title> </head> <body> <h3>Unorder List</h3> <ul> <li>First Item</li> <li>Second Item</li>
http://saturngod.mysteryzillion.com
áá°ááśáŻá¸ááášá¸ááŤááášá
áááááśáŻá¸
unorder
list
15 | P a g e
HTML BY SATURNGOD
<li>Third Item</li> </ul> </body> </html>
<ul> á unorder list ááŤá <li> ááąááŹáˇ list áąááŤáˇá list á ááŻáá˛áááŻáááš <li>1</li>á áááŻáááŻáááš <li>1</li> <li>2</li> áááŻááąáá¸ááŤááášá áĄáąááá code ááᯠrun ááŻááášáááš list áąáá¸áąááźááᯠáťááášááá˝áŹááŤá áĄááŻáášááśáŻá¸á áĄáááŻáášá¸áąáá¸áąááźáá˛á List ááŤáá˛á áᲠáĄáᯠattribute áąáá¸ááášáˇáťááŽá¸ ááśáŻá áśáąáťááŹáášá¸ážáááˇášááąáĄáŹáášá <html> <body> <h3>Unorder List</h3> <h5>Disc</h5> <ul type="disc"> <li>First Item</li> <li>Second Item</li> <li>Third Item</li> </ul>
<h5>Square</h5> <ul type="square"> <li>First Item</li> <li>Second Item</li>
http://saturngod.mysteryzillion.com
16 | P a g e
HTML BY SATURNGOD
<li>Third Item</li> </ul>
<h5>Circle</h5> <ul type="circle"> <li>First Item</li> <li>Second Item</li> <li>Third Item</li> </ul> </body> </html> unorder list áá˝áŹ disc, square, circle áááŻáťááŽá¸ á ááşáłáá¸áąáťááŹáášá¸áááŻááááŤááášá default ááąááŹáˇ disc ááŤá Ordered List <html> <head> <title>Example</title> </head> <body> <h3>Ordered List</h3> <ol> <li>First Item</li> <li>Second Item</li> <li>Third Item</li> </ol>
http://saturngod.mysteryzillion.com
17 | P a g e
HTML BY SATURNGOD
</body> </html>
<ol> ááąááŹáˇ order list ááŤá áĄá˛áᎠcode áąáá¸ááᯠrun áááŻáášáááš ááśááŤááš áĄá áĽášáááŻáášáąááááŹááŤááááˇášááášá áá°ááá˝áŹááášá¸ attribute áąááźááá˝ááŤááášá
<html> <head> <title>Example</title> </head>
http://saturngod.mysteryzillion.com
18 | P a g e
HTML BY SATURNGOD
<body> <h3>Ordered List</h3>
<ol type="1"> <li>First Item</li> <li>Second Item</li> <li>Third Item</li> </ol> <h5>Type A</h5> <ol type="A"> <li>First Item</li> <li>Second Item</li> <li>Third Item</li> </ol>
<h5>Type a</h5> <ol type="a"> <li>First Item</li> <li>Second Item</li> <li>Third Item</li> </ol> <h5>Type a</h5> <ol type="I"> <li>First Item</li>
http://saturngod.mysteryzillion.com
19 | P a g e
HTML BY SATURNGOD
<li>Second Item</li> <li>Third Item</li> </ol> <h5>Type i</h5> <ol type="i"> <li>First Item</li> <li>Second Item</li> <li>Third Item</li> </ol> </body> </html>
Order List ááźáášááášá¸ Unorder List áá˛áˇáááŻááááš type ááşáŹá¸ááá˝ááŤááášá áĄá˛ááŤáąááźááᯠáĄáąááá code áá˝áŹ áąááŹášáťáááŹá¸ááŤááášá order list á unorder list áá˛áááá°ááˇá˛ áĄááşáášááąááŹáˇ ááśááŤáášá áĽášáááŻáášáťáá ášááŤááášá ááááážáááłáášááˇá˛ ááśááŤáášááąá á áááŻáášááášá ááááážáááłáášááˇá˛ ááśááŤáášáá áááŻáášáááŻá start áááŻááˇá˛ attribute áááŻááśáŻá¸áááŻáášááŤááášá <ol type="A" start=4> áá˝áŹáááŻááášáąááŹáˇ D ááąáá áá˝áŹááŤá ááŤáááŻááášáąááŹáˇ HTML áá˛á list áąááźááŤáá˛áˇ web page áąáá¸áąáá¸áááŻáááťááŽáąááŤáˇá áąááŹáášáááš list áá ášááŻááşáášááŤáąáá¸ááášá definition list ááŤá
Definition List áĄááşáŹá¸áĄáŹá¸áťááášáˇ áĄáááá¸áŹáášááźáášáˇáááŻááşáášáąááźáá˝áŹ ááśáŻá¸ááŤááášá <html> <head><title>Example</title></head> <body>
http://saturngod.mysteryzillion.com
20 | P a g e
HTML BY SATURNGOD
<h3>Definition List</h3> <dl> <dt>HTML <dd>Language used to develop Web Pages
<dt>Image <dd>Any graphic such as an icon,bullet, line, photo , or illustration </dl> </body> </html>
Defination List á áĄáťááŹá¸ List áąááźáá˛á ááá°ááŤáá°á¸á áá°ááá˝áŹá defination term áá˛á defination á፠ááŤááášá á ááášáąááŹáˇ dl áá˛á á áááŤááášá defination term áááŻáąááŹáˇ <dt> áĄááśáŻá¸áťááłáťááŽá¸ defination áááŻáąááŹáˇ <dd> ááśáŻá¸ááŤááášá
áá°á
áĄáťááŹá¸
list
áá˛áááá°ááˇá˛
áąááŹáášáá ášááşáášááąááŹáˇ
tag
áĄáááášáááŤááŹáá˛á
</dl>
áá ášááŻáá˛ááŤááášáááŻááŹááᯠáąááźááááŻáášááŤááášá áá˛...
áĄááŻáááŻááášáąááŹáˇ
HTML
áááŻáĄážááášá¸áĄáŹá¸áťááášáˇáąááŹáášáąááŹáˇ
áááąááŹáášáťááŽáąááŤáˇá
áąááŹáášáááš áąááąáááşáŹááşáŹ ááááąáĄáŹááš áąááŹáášáááš áá ášááášá¸ááźáŹá¸ááąáĄáŹáášá
http://saturngod.mysteryzillion.com
áĄááŻáá˝áźáášáąááŹášáááŻááąááź
21 | P a g e
HTML BY SATURNGOD
2.Creating Web Page With Apperance And Link
áá˝áźáášáąááŹášáááŻááąááź áĄá áááŻáášá¸áá˝áŹ bold,italic,underline áááŻáááᯠááááˇáťá˛ ááŽá¸ááŤáťááŽá áĄáᯠááŽáĄááášá¸áá˝áŹáąááŹáˇ áĄááášááśáŻá¸ font áĄáąážááŹáášá¸áąáḠá áąáťááŹááŤááášá áá˝áźáášáąááŹášáááŻááąááź font áąááźáąáťááŹáášá¸ááášá font size áąááźáąáťááŹáášá¸ááášá á áŹááśáŻá¸áąááźáá˝áŹ color áąááźááášáˇááášá áĄá˛ááŤáąááźááᯠáĄáťáááš page áá ášááŻáá˛á áá ášáᯠlink ááşááášááŹáąááźááášá¸ ááŤááášáá˝áŹááŤá áĄá˛ááŤáąááźááᯠááąáťááŹááášáá˝áŹ <center> áĄáąážááŹáášá¸áąáá¸áá˛á á áááŻáášááąáĄáŹáášá
Optional Tag Move To Center áá°á á áŹááśáŻá¸áąááźááᯠcenter áąááŹáášáąáĄáŹáášááŻáášáąáá¸ááŤááášá <html> <head><title>Example</title></head> <body> <center> This is center </center> </body> </html>
This is center áááŻááŹáąáá¸á áĄááášáááŻáášá¸áááŻáąááŹáášáąáááŹáááŻáąááźááááŤááášá áĄá˛ááŤáąáá¸ááᯠááśáŻá¸áťááŽá¸ á áŹáąááźááᯠáĄááášáááŻáášá¸ááᯠáąááźáááŹá¸áááŻááááŤááášá <html> <head><title>Example</title></head> <body> <h1 align="justify">Test</h1>
http://saturngod.mysteryzillion.com
22 | P a g e
HTML BY SATURNGOD
</body> </html> áĄá˛áᎠcode áá˝áŹáááŻááášáąááŹáˇ header áąááźá áĄááášáááŻáąááŹáášáąáááŹáááŻáąááźááááŤáááášáˇááášá
Marquee marquee ááąááŹáˇ á áŹááśáŻá¸áąááźááᯠáąááźááąááááŻáááŻáášáąááŹáášáąáá¸ááŹááŤá <html> <head><title>Example</title></head> <body> <marquee>Iâm moving</marquee> </body> </html> áĄá˛áᎠcode áá˝áŹáááŻáááš á áŹááŹá¸áąáá¸á áąááźááąáááŹáááŻáąááźááááŤááášá ááášááášááąá ááŹááášáááŻáąááźáááŹááŹááŤá Marquee áá˝áŹááá˝ááˇá˛ attribute áąááźááąááŹáˇ Attribute Name
Properties
Descripton
behavior
alternate
ááášááąááᏠá ááŹááąá ááášáťááášááźáŹá¸ ááŤááášá
<marquee behavior="alternate">I'm moving</marquee>
scroll
áá°á default value ááŤá ááášááąá áᏠá ááŹááášáąááŹáášááźáŹá¸áááš ááášááźáŹá¸áťááŽá¸
ááášááášáąá áťááášá ááŹááŤá <marquee behavior="scroll">I'm moving</marquee>
direction
slide
áá°ááąááŹáˇ ááášááąááᏠáťááŽá¸áááš ááŹááášááášá¸áąááŹáášáąáᏠááášááźáŹá¸ááŤááášá
<marquee behavior="slide">I'm moving</marquee>
left
áá°ááąááŹáˇ default value ááŤá ááŹááášááąá ááášááášáááŻááźáŹá¸ááášáááŻá
http://saturngod.mysteryzillion.com
23 | P a g e
HTML BY SATURNGOD
áááŻááŹááŤá <marquee direction="left" >I'm moving</marquee>
right
áá°ááąááŹáˇ ááášááášááąá ááŹááášáááŻááźáŹá¸ááášáááŻááááŻááŹááŤá
<marquee direction="right" >I'm moving</marquee>
up
áá°ááąááŹáˇ áąáĄáŹáášááąá áĄáąááááŹááášáááŻááááŻááŹááŤá
<marquee direction="up" >I'm moving</marquee>
down
áá°ááąááŹáˇ áĄáąááááąá áąáĄáŹáášááášá¸ááášáááŻááááŻááŹááŤá
<marquee direction="down" >I'm moving</marquee>
loop
[number]
áá°ááąááŹáˇ áááŻáášááášáá˝á ášážááááš marquee ááᯠááŻáášáááŻáášá¸ááášáááŻáťááŽá¸ number
áá ášááśáŻá¸ááášáˇáąáá¸áááŤááášá á ááᯠá ážáááášáá˛ááŻáášááášáąááŤáˇá <marquee loop="1" >I'm moving</marquee>
scrollamount
[number]
áá ášááŤáąááźááááš
ááášáąááŹááš
pixel
áąáááááá˛áááŻáťááŽá¸
ááášáˇáąáá¸áááŹááŤá
ááášáˇáááŻáášááˇá˛ ááśááŤáášááşáŹá¸áąááąá áąáá¸áąáá¸áąááźá áťááášáťááášááźáŹá¸áąááąááá˛á <marquee scrollamount="10">I'm moving</marquee>
scrolldelay
[number]
áá°ááąááŹáˇ ááášáąááŹáášážááŹáááš áąáááááá˛áááŻááŹááŤá áá°á millisecond áá˛áááŤá 1000 áááŻáááášáˇáááŻáášáááš 1 second ážááŹáá˝ áá ášááŤáąááźááá˝áŹááŤá áá°ááąááŹáˇ ááśááŤáášááşáŹá¸áąááąá ážááŹáąááąáááŤáá˛á <marquee scrolldelay="1000">I'm moving</marquee>
Bgcolor
[hex code] OR áá°ááąááŹáˇ marquee áá˛á back color áĄáąááŹáášáąáá¸ááŤá #009933 áááŻááášáąááŹáˇ [Color Name]
áĄá ááášá¸áąááŹáášáąáá¸áááŻ
background
ááŹá¸áťááŽá¸
áąáááááźáŹá¸áá˝áŹááŤá
color
áá˝áźáášáąááŹáš áĄáąáááááŻáášá¸áá˝áŹ áąáťááŹáá˛áˇáťááŽá¸ááŤáťááŽá <marquee bgcolor="#009933" >I'm moving</marquee>
http://saturngod.mysteryzillion.com
áááŻáášá¸áááŻ
24 | P a g e
HTML BY SATURNGOD
marquee áąáá¸ááŻáášááᏠáąááşáŹášá ááŹáąááŹáˇáąááŹáášá¸ááŤááášá á áŹááśáŻá¸áąáá¸áąááźá áąááźááąááźáááźáŹá¸ááŹáąáá¸ááᯠážáááˇášáťááŽá¸ áąááşááášáááąáá¸ááááŻáášááŤáąá á áĄáᯠfont áááŻáášá¸ááᯠááášááášáąááˇááŹááąáĄáŹáášá
Font Font ááąááŹáˇ HTML áá˝áŹáĄáąáá¸ááŤáá˛áˇ áĄáááŻáášá¸ááŤá Web Page áá ášááŻáá˝áŹ áááŻáášáááŻááşáášááˇá˛ font ááŻááąáťááŹáášá¸áá˛áááŻááĄááźááš font tag áááŻáááá˝ áťáá ášáá˝áŹááŤáá <html> <head><title>Example</title></head> <body> <font face="Zawgyi-one">Zawgyi Font áťááášáˇáĄááśáŻá¸áťááłááŹá¸áááš</font> </body> </html> áĄá˛ááŤáááŻáááš <font> áá˛á </font> ážááŹá¸áá˝áŹáááŻáášááŹá¸áá˛áˇ á áŹá zawgyi-one font áá˛ááąáááąááá˝áŹááŤá face="font name" áááŻááášáˇáááŹááŤá font tag áá˝áŹááśáŻá¸áááŻáááá˛áˇ attribute áąááźááąááŹáˇ Name
Properties
color
[hex code] OR color [color name]
Description ááąááŹáˇ
áááťááŽá¸ááŹá¸ááŤá
áĄáąáááá˝áŹááášá¸
áá˝áźáášáąááŹáš
áąáťááŹáá˛áˇáá°á¸ááŤááášá
áĽáááŹáĄáąááá˛á ááŽáááŻááśáŻá¸áááŻááááŤáááš <font
face="Zawgyi-one"
color="#006699">Zawgyi
Font
áťááášáˇáĄááśáŻá¸áťááłááŹá¸áááš</font> size
[number]
áá°ááąááŹáˇ font áá˛á áĄááźáášáĄá áŹá¸áąáťááŹáášá¸ááŹááŤá ááśáŻáá˝áášá size=3 ááŤá á áŹááśáŻá¸ size ážááŽá¸áááŻáá˝áşááš size=4 ááąá 7 ááááášáˇáááŻááááŤááášá 1 ááąá 7 áĄááááá˝ááŤááášá 3 ááąááŹáˇ
ááśáŻáá˝áášá áŹááśáŻá¸ááŤá
áąááŹáášáťááŽá¸
+1
ááąá
+6
ááá˝ááŤááášá
ááśáŻáá˝áášáááŻ
ááášáąááŹáášáááŻá¸ááášáááŻááŤá +2 áááŻáááš ááśáŻáá˝áášá 3 áááŻáąááŹáˇ 5 áťáá ášááźáŹá¸áá˝áŹáąááŤáˇá áĄá˛áááŻááşáłáá¸áᲠ-1 ááąá -6 ááááá˝ááŤáąáá¸ááášá -1 áááŻáááš ááśáŻáá˝áášá 3 áááŻáąááŹáˇ ááŽáááŻáąáḠááśáŻá¸áááŻááááŤááášá
http://saturngod.mysteryzillion.com
2 áťáá ášááźáŹá¸áá˝áŹáąááŤáˇá
25 | P a g e
HTML BY SATURNGOD
<font face="Zawgyi-one" size="5">Zawgyi Font áťááášáˇáĄááśáŻá¸áťááłááŹá¸áááš</font> <font face="Zawgyi-one" size="+2">Zawgyi Font áťááášáˇáĄááśáŻá¸áťááłááŹá¸áááš</font> <font face="Zawgyi-one" size="-2">Zawgyi Font áťááášáˇáĄááśáŻá¸áťááłááŹá¸áááš</font>
ááŤáąááźááąááŹáˇ áĄáťááŹá¸ text formatting tags áąááźááŤá áĄááşáłááááąááŹáˇ áĄáąáááá˝áŹáąáťááŹáá˛áˇáá°á¸ááŤááášá Tag
Description
<b></b>
ááŤáááŻáąááŹáˇ áĄáąáááá˝áŹááášá¸ áąáťááŹáťááŽá¸ááŤáťááŽá áá°á font ááᯠblod ááŻáášááŹááŤá
<big></big>
áá°áááášá¸ bold ááŻáášááŹááŤáá˛á
<blockquote></blockquote>
ááŤááąááŹáˇ tab ááŻáášááŹáąááŤáˇá áááŻáášáˇá áŹáááŻáášáąáá¸ááᯠáá ášááášá¸áá ášáááŻášááᲠáąááŹášáťáááşáášááˇá˛ áĄááŤáá˝áŹ ááśáŻá¸ážáááŤááášá
<i></i>
italic ááŻáášááŹááᯠáĄáąáááá˝áŹáąáťááŹáá˛áˇáá°á¸ááŤááášá
<pre></pre>
áᎠcode áááŻááášá¸ áááá˝áŹááŤá áá˝áźáášáąááŹášáááŻááąááź enter áąááź tab áąááźááááŻáᲠááśáŻá¸áá˛áˇááŹáąáá
<small></small>
áá°ááąááŹáˇ á áŹááśáŻá¸ááᯠááśáŻáá˝áášáááš áąáá¸áąáĄáŹááš ááŻáášáąáá¸ááŹááŤá
<strike></strike>
áĄá˛ááŤáąáá¸ááąááŹáˇ á áŹááśáŻá¸áąááźáá˛á áĄááášáá˝áŹ ááşáĽášá¸ááŹá¸áááŻáášááŹááŤá
<sub></sub>
áá°ááąááŹáˇ á áŹááśáŻá¸ááᯠáąáĄáŹáášááŹá¸ááášá¸ááŹáąáá¸áąááŤáˇá H2 áááŻááşáłáá¸áąáá¸áĄááźáášáąááŤáˇá
<sup></sup>
áá°ááąááŹáˇ á áŹááśáŻá¸ááᯠáĄáąááááášááŹááŤá 22 áááŻááşáłáá¸áąááŤáˇá
<tt></tt>
ááŤá typing font áááŻáąáťááŹááŹááŤá typing áááŻáášáááᯠá áŹááśáŻá¸áąáááąáĄáŹáášáĄááźáášááŤá
<u></u>
ááŤáááŻáąááŹáˇ áááťááŽá¸áąááŹáášáťááŽáááŻáááášááŤááášá underline ááŹá¸ááŹááŤá
http://saturngod.mysteryzillion.com
26 | P a g e
HTML BY SATURNGOD
áĄááŻááášáťááŽá¸áąááŹáˇ Link áąááźáĄáąážááŹáášá¸áąáťááŹááŤááášá Link ááąááŹáˇ Web Page áá˝áŹáĄááá áĄááášá¸á ááŤááášááŤááášá Page áá ášááŻáá˛á áá ášáᯠááşááášááášááŹá¸áááŻá áĄááźááš Link ááşááášááášáááŻááááŻááŤááášá
Page Link And Image Link Page Link ááŻáášááášáááŻááŹááąááŹáˇ page áá ášááŻááąá áąááŹááš page áá ášááŻááᯠááşááášááášááŹá¸ááŤááášá áąáĄáŹáášá example ááśáŻáąáá¸ááᯠážáááˇášáááŻáášáááš ááŹá¸ááášáááŻáášááŤááášá áá˝áźáášáąááŹášáááŻááąááź Home Page ááąá Gallery Page ááᯠGo To Home áááŻááˇá˛ á áŹááśáŻá¸áąáḠááá˝áášáááŻáášááŹáá˛á áá°á¸ááźáŹá¸ááášá áąááŹáášáťááŽá¸ Gallery ááąáááášá¸ Home Page ááᯠHome áááŻááˇá˛ á áŹááśáŻá¸áąáá¸ááᯠááá˝áášáááŻáášááŹáá˛á Home page ááᯠáťááášáąááŹáášááźáŹá¸ááášá áĄá˛ááŽáááŻááşáłáá¸áąáḠáťáá ášáąáĄáŹááš áá˝áźáášáąááŹášáááŻá áąáĄáŹáášááĄáááŻáášá¸ áąáá¸áááŻáášááášá File á ááŻááá˝áááášáąááŤáˇá index.html áá˛á gallery.html áąááŤáˇá áąáááŹáĄáá°áá°áᲠáááášá¸ááŹá¸áąááŹášá C:\example\index.html áá˛á C:\example\gallery.html áĄá˛áááŻááşáłáá¸áąáḠáąáááŹáĄáá°áá°áťáá ášáááášá Index.html
<html> <head><title>Example</title> <body> <!-- Link To Gallery Page -->
http://saturngod.mysteryzillion.com
27 | P a g e
HTML BY SATURNGOD
<a href="gallery.html">Gallery</a> </body> </html> Gallery.html
<html> <head><title>Example</title> <body> <!-- Link To Home Page --> <a href="index.html">Home</a> </body> </html> áĄáąááá code áááŻááá˝áášá¸áťááááš áąáá¸ááşáášááŹáąáá¸áąááź ááŤááŹááášááášááášá <!-- --> á ááŹážááŽá¸áá˛áááŻáťááŽá¸áąááŹáˇá áąááŹáášáťááŽá¸áąááŹáˇ home page ááᯠhome.html áá˛á áááášá¸áááŻááąáᏠáááá°á¸ááŹá¸á ááŹáááŻá index.html áá˛ááááášá¸ááŹáá˛á ááŹáąááźááźáŹáá˛á <!-- comment --> áĄá˛ááŤá comment áąáá¸ááŹá¸ááŹááŤá <!-- áá˛á --> ážááŹá¸áá˝áŹ áąáá¸ááŹá¸áá˛áˇ á áŹáąááźááᯠáĄááŻáášáááŻáášááŤáá°á¸á áá˝áźáášáąááŹášáááŻá home page ááᯠááŹáááŻá index.html áá˛á áááášá¸ááá˛ááᯠweb page áąááźáá˝áŹ á ááášááˇá˛ page á index.html ááŤá ááŤáá˝ áááŻááš default.html áąááŤáˇá www.example.com áááŻááąáááááŻáášáááš page áá ášááŻááášááŹááášá
áááášááášá¸áąááŹáˇ
www.example.com/index.html
áááŻááŹáááŻ
ááźáŹá¸áąááááŹá¸ááŹááŤá
áĄáąááŹáášá index.html áááŤááášá¸ áĄááŻáášááŻáášááŤááášá ááŤáąážááŹáášáˇ Home Page áááŻááášáąááŹáˇ index.html áááŻáťááŽá¸ááśáŻá¸áááŤááášá ááŤáá˝áááŻááš default.html áááŻááášá¸áááŤááášá áá˛..
Link
áĄáąážááŹáášá¸ááášá¸
ááášááźáŹá¸ááąáĄáŹáášá
link
ááşááášááşáášáááš
<a
href="address">Name</a>
áááŻááˇá ᲠáśáŻá áśááşáłáá¸áá˛á ááźáŹá¸áááŹáąááŤáˇá address áááŻááŹááąááŹáˇ áááŻáášááşááášááşáášááˇá˛ page áąááŤáˇá Name ááąááŹáˇ áąáááąá ááşáášááˇá˛ ááŹááášáąááŤáˇá ááášáąáá¸á ááŹáąáḠáá ášááŻááášáąááááŹááŹááᯠáąááźááááŤáááášáˇááášá Link á áĄá ááąááŹáˇ áĄáťááŹáąááŹáášá áąááŹáášáąááŹáˇ ááŽáááłáąááŹááš áąáťááŹáášá¸ááźáŹá¸ááášá ááŹáťáá ášáááŻáááášá¸ á áĄá˛ááŤááąááŹáˇ vistied áťáá ášáťááŽá¸ááźáŹá¸áááŻáááŤá áá ášá፠click ááŻáášáťááŽá¸áááš áĄá˛áááŻáĄáąááŹááš áąáťááŹáášá¸ááźáŹá¸ááŤááášá áááŻáášááá˝áášáťááŽá¸ááŹá¸áąááŤáˇá áĄáąááŹáášááąáťááŹáášá¸ááşáášááášáąááŹáˇ body áá˝áŹ vlink áááŻááˇá˛ attribute áá˛á link áááŻááˇá˛ attribute áá˝áŹ áĄáąááŹááš áťááášáááŻááááŤááášá <body vlink="green" link="green"> áĄá˛ááŤáááŻááášáąááŹáˇ link color á áĄá ááášá¸áąááŹáášáťáá ášáąáááŹááᯠáąááźáááá˝áŹááŤá link ááŻáášáááš áá°áááŻáášá¸áąáá¸ááášááˇá˛
http://saturngod.mysteryzillion.com
28 | P a g e
HTML BY SATURNGOD
áąáá¸ááźáášá¸áá ášááŻááá˝ááŤááášá
file
áąááźáááŻ
download
ááşáąá ááşáášááášá
ááášáááŻáąáá¸áááá˛á
áááášááášá¸áąááŹáˇ
ááźáášááŤááášá link address ááᯠfile áááŻáąáá¸áááŻáášááśáŻáá˛áąááŤáˇá <a
href="file.zip>Download</a>
ááášá¸áąážááŹáášá¸áąáá¸
áĄá˛áááŻááşáłáá¸ááśáŻá áśáąáá¸áąááŤáˇá
áąááŹáášá¸áąááŹáášá¸áááááŻááááŻááášá
áá˛..
Link
áąááŹášáąááŹášááşáŹá¸ááşáŹá¸á
áĄáąážááŹáášá¸áąááŹáášááášáąááŹáˇ
ááááá°á¸á
path
áááášááášáááŻáááášážáááášá
áááášááášá¸áĄá˛ááᯠááááášááŤáá°á¸á
Path For Link Path <a href=" áąáĄáŹáášá path link">Path</a>
áá˝áášá¸ááášá¸ááşááš
./file.html OR file.html
áąáááŹáá ášááŻáá˛áá˝áŹ
áĄáá°áá°
áĄá˛áááŻáąáááááŻááááŤááášá
áááášá¸áááš
C:\example\index.html
ááąá C:\example\gallery.html áááŻáąááááášáąááˇáŤá ./ ááąááŹáˇ directory áá°áá°áá˛áááŻá áááŻááŹááŤá ./download/download.html OR download/download.html
ááŤááąááŹáˇ áááŻáášáˇ folder áąáĄáŹáášá folder ááᯠááášáąááááŹááŤá
../file.html
áá°áááŹáˇ ááá°áąááŹáˇáá°á¸á folder ááᯠup ááŻáášáťááŽá¸ áąááááŹááŤá
ááášáááŻááşáłáá¸áá˛áááŻááášáąááŹáˇ
C:\example\download\index.html
ááąá
C:\example\gallery.html áááŻáąááááŹáąááŤáˇá download áááŻááˇá˛ folder áĄáąáááááášáˇá file áááŻáąááááŹáąááŤáˇá áá˝á ášááášáˇ
áąááááşáášááášáąááŹáˇ
../../file.html
áąááŤáˇá
../
áááŻááŹá folder directory ááᯠup ááŻáášáááŻáášááŹááŤá http://www.mysteryzillion.com
ááŤááąááŹáˇ ááťááŹá¸ website áá ášááŻááᯠáá˝áášá¸áąááááŹááŤá
./download/file.zip OR download/file.zip
download áąááźáááŻááášá¸ áááŻáášá¸áąááźáááŻ
ááşáááŻááĄááźááš
file
áąááź
image
áááŻáášáááŻáášáąáááááŻááááŤááášá áá˝áźáášáąááŹáš
image
áąááŹáášáááŻáášá¸
ááášááášáá˝áášá¸áťáááŤáĄáśáŻá¸ááášá
ááŽááášááášá¸áąážááŹáášá¸áąááź
áĄáąážááŹáášá¸áąááŹáášá¸áąááŹáášá¸áááááŻááááŻááŤááášá
ááŹáťáá ášáááŻáááášá¸áááŻ
áááŻáášáˇ
site
á
ážááŽá¸ááŹááŹáá˛á áĄáá˝ site structure á áááášáąááźá¸ááŹáá˝áŹááŤá Link áąááźááášá¸ ááşáŹá¸ááŹáá˝áŹáťáá ášáááŻáááŤá ááŤáąážááŹáášáˇ áąááąáááşáŹááşáŹ ááááŹá¸ááášáˇááŤááášá
http://saturngod.mysteryzillion.com
file
29 | P a g e
HTML BY SATURNGOD
áá˛.. áĄáᯠáá˝áźáášáąááŹášáááŻááąááź page áá˝áŹ ááśáŻáąáá¸áąááź ááášáˇááąáĄáŹáášá
Image ááśáŻáąááźááąááŹáˇ web page áá ášááŻáá˝áŹ ááťáá ášááąáááŤááášáááŤááášá áááŻáášááášáąááŹáášááˇá˛ page ááᯠáá˝ááťááŽá¸ áĄáááá¸áŹáášáťáááˇášá áśáŻáááŻá áĄááźáášááŤá áá˛... ááśáŻáąáá¸áąááź ááášáˇážáááˇášááąáĄáŹáášá <html> <head> <title>Example</title> </head> <body> <img src="Apple-logo.jpg"> Apple Logo</body> </html>
áááášáááŻá
ááśáŻááťááášááá˛
ážááášáąáťááááš
(
)
áá˛áťááášáááášááŹáˇ
ááášáˇááŹá¸áá˛áˇ
image
ááášááášá¸áąážááŹáášá¸áá˝áŹá¸ááŹáťáá ášáááŻáášáááᯠimage extension áá˝áŹá¸ááŹááášá¸ áťáá ášáááŻáášááášá image ááášáˇáááŻáááá˛áˇ extension áąááźááąááŹáˇ jpg gif png áąááźáá˛á image á size ážááŽá¸á ážááŽá¸áąáááášá áąáá¸ááşáášááášá áťáá ášááŤááášá <html> <head> <title>Example</title> </head>
http://saturngod.mysteryzillion.com
30 | P a g e
HTML BY SATURNGOD
<body> <img src="Apple-logo.jpg" width=80px height=80px> Apple Logo</body> </html> width áá˛á height áááŻááˇá˛ attribute á ááśáŻáá˛á size ááᯠáááášá¸ááşáłáášáąáá¸ááŤááášá áááŻáášážáááłáášááˇá˛ áĄááşáŹá¸ááᯠwidth áá˝áŹááášáˇáťááŽá¸ áĄáťááášáˇáááŻáąááŹáˇ height áá˝áŹááášáˇáťááŽá¸ ááśáŻáá˛á size áááŻáťááášáááŻááááášá <img src="Apple-logo.jpg" width=80px height=80px alt="Apple Logo"> Apple Logo
áááŻááášáąááŹáˇ
alt
áááŻááˇáĄ Რáá˛áá˝áŹáąáá¸ááŹá¸áá˛áˇ
á áŹááŹá¸áááŻ
ááśáŻáąáá
Mouse
áąáá¸ááźáŹá¸ááášáááŻáášáťááŽá¸
ááážááŹáá˝áŹ
áąááááŹáá˝áŹááŤá áá˝áźáášáąááŹášáááŻáááąááŹáˇ tool tip áááŻááąááááŹááŤá Image áááŻáášá¸áá˝áŹ áąáťááŹá ááŹáąááź áąááŹášáąááŹášááşáŹá¸ááŤááášá áá°ááá˝áŹ attribute áąááźááášááá˝áąáá¸ááášá ááŹááášá¸áááŻáąááŹáˇ text align áąááŤáˇá text align ááᯠimg code áá˛áá˝áŹ align áááŻááˇá˛ attribute áááŻááśáŻá¸ááášá Align
áá˝áášá¸áťáááşááš
top
á áŹáá ášáąážááŹáášá¸ááᯠááśáŻáá˛á áąáá¸ááŹá¸á align áá˝áŹ áĄáąááááśáŻá¸áá˝áŹ áąááŹášáťááąáá¸ááŹááŤá
bottom
áá°ááąááŹáˇ default ááŤá á áŹááŹá¸ááᯠááśáŻáąáĄáŹáášááášáá˝áŹ áąááŹášáťáááŹáááŻáąááźááááŤááášá
middle
á áŹááŹá¸ááᯠááśáŻáĄááášáá˝áŹ áá˝áŹáąáá¸ááŹááŤá
left
áá°ááąááŹáˇ ááśáŻááᯠpage áá˛á ááášááášáááŻáááŻááááŻáášáťááŽá¸ á áŹááŹá¸áĄááŻáášááśáŻá¸ááᯠááśáŻáąáá¸áá˝áŹ áąááŹášáťááąáá¸ááŹááŤá
right
áá°áááášá¸ Left áá˛á áĄáá°áá°ááŤáá˛á ááŹááášááᯠááśáŻáąááźáááźáŹá¸áťáᎠá áŹááŹá¸áĄáŹá¸ááśáŻá¸ááᯠááśáŻáá˛á ááášááášáá˝áŹ áąááŹášáťááąáá¸ááŤááášá
http://saturngod.mysteryzillion.com
31 | P a g e
HTML BY SATURNGOD
ááśáŻ : img top
ááśáŻ : img bottom
ááśáŻ : img middle
ááśáŻ : img left
ááśáŻ : img right
áĄááŻáááŻáááš image áá˛áááášááášáťááŽá¸ áąááŹášáąááŹášáąáá¸áááąááŹáášáťáᎠááášááášá áąááŹáášááášáá ášáᯠááášáąáťááŹáĄáśáŻá¸ááášá ááśáŻáąáá¸áąáá¸áąáá¸ááᯠááá˝áášáááŻáášáá˝ ááśáŻáĄážááŽá¸ážááŽá¸áąáťááŹáášá¸ááźáŹá¸ááááŻááşáłáá¸áąáá¸áąááŤáˇá ááśáŻ size ááᯠwidth áá˛á height attribute áá˛á ááşáłáśááŹáááŻáášáá°á¸áąááŹášá ááśáŻáá˝á ášááśáŻá áá ášááśáŻá áĄážááŽá¸ á áąááŹáášáá ášááśáŻá áĄáąáá¸áąááˇáŤá Photo áąááźááᯠsize áąáá¸ááŹáááŻ
http://saturngod.mysteryzillion.com
32 | P a g e
HTML BY SATURNGOD
áťáááŹá¸áťááŽá¸ ááśáŻááᯠclick ááŻáášááŻááášáá˝ size ážááŽá¸áá˛áˇ ááśáŻááᯠáťá áá˛áˇááśáŻááŤá áĄá˛áááŻááŹáááŻá ááŻáášááá˛ááᯠááśáŻážááŽá¸áááš page ááášááŹážááŹááŤááášá ááŤáąážááŹáášáˇ ááśáŻáąáá¸ááᯠáĄááášáťáááášá click ááŻáášáááŻáášáá˝ ááśáŻážááŽá¸áťáá ášááźáŹá¸ááášá <html> <head> <title>Example</title> </head> <body> <a href="fullsize.jpg"> <!-- Full size when click --> <!-- img src is small size --> <img src="smallsize.jpg" width=80px height=80px border=0> </a> </body> </html> áĄáąááá code ááᯠááášáááŻáášááŹáá˛á ááŹá¸ááášááášááášááŤááášá áĄá˛áá˝áŹ áąáá¸á ááŹáá ášááŻááźáášááŹááášá border áááŻááŹááŹáá˛áąááŤáˇá áá˝áźáášáąááŹášáááŻá href ááᯠááśáŻá¸áááŻáášááˇá˛ áĄá፠image áá˝áŹ áĄáťááŹáąááŹááš border áťáá ášááźáŹá¸ááášá áĄáááá¸áŹáášááąááŹáˇ Link ááá˝ááášáąááŤáˇá áĄá˛ááŤáąáá¸ááᯠááąááááşáášáááŻá áąááşáŹáášáááŻáášááŹááŤá
ááśáŻ : border ááąááşáŹáášááŹá¸áąáᏠáá˛á image
ááśáŻ : border áąááşáŹáášááŹá¸áąáᏠááśáŻ
áĄááŻáááŻááášáąááŹáˇ áá˝áźáášáąááŹášáááŻááąááź link áąááź ááŻáášááášááźáŹá¸áťááŽá page áá ášááŻááąá áá ášááŻááᯠáąááááášááźáŹá¸áťááŽá ááśáŻáąááź ááášáˇááášááźáŹá¸áťááŽá áĄááŻáĄááášá¸áá˝áŹ áá˝áźáášáąááŹášá sample áąáá¸áąáá¸áąáá¸áąááźáᲠáťáááźáŹá¸ááášá áááŻáášáááŻááš á áášá¸ážáááˇášááŤá áąááşáŹášáááŻá áááášáąááŹáášá¸ááŤááášá áááŻáášáˇ ááśáŻáąáá¸áąááź áá˛á web page áąáḠá áášá¸áąááŹáášáááŻááąááŹáˇááťááŽá ááŤáąáááášáˇ áťáááˇášáťáááˇášá áśáŻá áśáŻáťáá ášáąáĄáŹááš
áąááŹáášáááŻááááąáá¸ááŹáááŻ
áąááźááá˝áŹááŤá
áąááŹáášáá ášááášá¸áá˝áŹ table áá˛á frame áąááźáĄáąážááŹáášá¸ áąáťááŹáťáááŤááášá
Table And Frame
http://saturngod.mysteryzillion.com
áá˝áźáášáąááŹášáááŻá
table
áááŻáĄáášáąááąáá¸ááŹááŤá
33 | P a g e
HTML BY SATURNGOD
Table áᏠweb page ááášáąááŹáášááŹáá˝áŹ áĄáąáá¸ááŤááŤááášá á ááášáąááˇááŹáá°áąááźáĄááźáášáąááŹáˇ table ááᏠweb page frame ááᯠááśáŻá áśááşáąáĄáŹááš ááŻáášáąáá¸áááŻáášááŹááŤá áááášáááŻá áááŻáášá professional áťáá ášááźáŹá¸áťáᎠá stylesheet áąááź ááášááźáŹá¸áťááŽáááŻááášáąááŹáˇ div áá˛á CSS ááᯠááźáťá˛ ááŽá¸áąááŹáˇ áááŻáášáˇ page áááŻáá˝áťááąáĄáŹááš ááŻáášáááŻáášááŹáąááŤáˇá áĄááŻáąááŹáˇ HTML áĄáąážááŹáášá¸áᲠáąáťááŹáąááąáá¸áááš á áąááŹáášáťááŽá¸ CSS áĄáąážááŹáášá¸áąááź Advance áťáá ášááˇáĄ ᲠáąážááŹáášá¸áąááź áááŤáąáá¸áá°á¸á table ááśáŻá¸áťááŽá¸ááášá¸ áá°ááşáŹá¸ web page áąááźááᯠáá˝áááŹááŤááŹá¸áááŻá áąáá¸ááşáášáááš áąáá¸ááŹáááŻáášáááŻá áĄááŻáááŻáąáťáááŹá¸ááŹááŤá áᲠtable áĄáąážááŹáášá¸áąáá¸á ááąáĄáŹáášá
Table áááŻááŹ
Table áá ášááŻáááŻááášáąááŹáášááŹáá˝áŹ áĄáąáťáááśáĄáŹá¸áťááášáˇ roll áá˛á column ááŤááášááŤááášá áąááŹáášáťááŽá¸ cell ááźáášáąáá¸áąááź áá˛á ááášáąááŹáášááŹá¸ááŤááášá Table áá ášááŻáᏠáá˝áźáášáąááŹáš áĄáąáááá˝áŹ áąáťááŹáá˛áˇáááᯠHTML áá ášááŻááášá¸áá˛á web site áá ášáᯠááášáąááŹáášááŹáá˝áŹ áąááŹášáąááŹášáąáá¸áĄááśáŻá¸ááášááŤááášá áąááŹáášáťááŽá¸ Gallery Page áąááź ááášáąááŹáášááŹáá˝áŹ áĄááášá¸áĄááśáŻá¸ááášááášá Page áá ášááŻááśáŻá¸ Layout ááᯠCSS áááŻááŹáĄááśáŻá¸áťááłááášááášááᯠTable ááášá áŹáááš CSS ááᯠáĄááśáŻá¸áťááłááášáˇááášá CSS áááŻáᏠááŹáá˛áááŻáąááŹáˇ Cascading Style Sheets ááŤá ááŽá áŹáĄáŻáášáá˝áŹáąááŹáˇ CSS áĄáąážááŹáášá¸ááŤááášáá˝áŹ áááŻáášááŤáá°á¸á ááŽá áŹáĄáŻáášáᏠWeb Page áááŻá áąááˇááŹááŤá áĄáąáťáááśáĄááşááśáŻá¸áťáá ášááˇá˛ HTML áĄáąážááŹáášá¸áááŻáᏠáąáťááŹááźáŹá¸ááŹááŤá HTML áááŻáąááąáááşáŹááşáŹááŹá¸ááášááźáŹá¸áááš CSS áá˛áááźá ᲠáśáŻááˇáĄ ᲠááŤáá˝áŹáąááŹáˇ áááŻáášáˇ site áąáá¸áᏠáąáááášáá˝áááŹáá˝áŹááŤá áĄááŻáąááŹáˇ HTML áĄáąážááŹáášá¸áąáá¸áᲠááášáááŻáášááąáĄáŹáášá
http://saturngod.mysteryzillion.com
34 | P a g e
HTML BY SATURNGOD
áĄáąááááśáŻááᯠážáááˇášáááŻáášááŤá áĄááźáášáá ášááŻááśáŻá¸áĄáťááášáˇáᏠtable ááŤá áąááŹáášáťááŽá¸ á áŹáąáá¸ááŹá¸áá˛áˇ áĄááźáášáąááźáᏠcell áąááźáąááŤáˇá cell ááźáášáąááźáá˛áá˝áŹáᲠá áŹáąáá¸ááŹááŤá áá˛.. áááŻáťááŽá¸ ááŹá¸ááášááźáŹá¸áąáĄáŹááš code áąáá¸áąááźáá˛áá áááŻáášááąáĄáŹáášá <head> <title>Example Table</title> </head> <body>
<table> <tr> <!-- Row--> <td> <!-- Column --> Row </td>
http://saturngod.mysteryzillion.com
35 | P a g e
HTML BY SATURNGOD
<td> Row </td> </tr> </table>
</body> </html>
Table áá ášááŻá ááášáťááŽáááŻááášáąááŹáˇ áá <table>áá˛á á áťááŽá¸ </table> áá˛ááááášááá˝áŹááŤá áá áááŻáášááášáˇááşáášááˇá˛ Row áĄáąááĄááźááš ááá˝ááąááŹáášááᯠ<tr></tr> áááŻááśáŻá¸ááá˝áŹááŤá áááŻáášá row á ááŻáááŻááşáášááášáááŻááŤá ááŻááááŤáááŻáááš <tr></tr><tr></tr> áááŻáťááŽá¸ áá˝á ášááŻááśáŻá¸ááá˝áŹáąááŤáˇá áááááŻáášááášáˇááşáášááˇá˛ column áĄáąááĄááźááš ááá˝ááąááŹáášááᯠ<td></td> áááŻááśáŻá¸ááá˝áŹááŤá <td></td> ááᯠ<tr> áá˛á </tr> ážááŹá¸áá˝áŹ ááášáˇáťááŽá¸ááśáŻá¸ááá˝áŹááŤá áá˝áźáášáąááŹášáááŻá column á ááŻáááŻáááš <tr><td></td><td></tr> ááŤáááŻáááš column á ááŻáąááŤáˇá áá˛... áá˝áźáášáąááŹášáááŻááąááź row á áᯠcolumn á ááŻááŻáášááášáąááŤáˇá row á ááŻáťáá ášááˇáĄ ᲠááźáášáąážááŹáášáˇ <tr> </tr> á ááŻááśáŻá¸áááášá column á ááŻáťáá ášáááŻá <td></td> ááᯠá ááŻááśáŻá¸ááášá ááá row áá˝áŹ áááŻááᯠáĄáťááŹá¸ row áąááźáá˝áŹááášá¸ áááŻáťáá ášáá˝ table áąááááŹáá˝áŹááŤá <table> <tr> <!-- First Row --> <td> <!-- First Column --> 1 </td> <td>
http://saturngod.mysteryzillion.com
36 | P a g e
HTML BY SATURNGOD
2 </td> <td> 3 </td> </tr>
<tr> <!-- Second Row --> <td> <!-- Second Column --> 4 </td> <td> 5 </td> <td> 6 </td> </tr> </table> áĄá˛áᎠExample ááᯠážáááˇášáááŻáášáááš ááŹá¸ááášáááŻáášáááŹá¸ááááá°á¸á áá˝áźáášáąááŹášáááŻááąááź row á ááŻáá˛á column á áᯠááá˝ááˇá˛ table áá ášááŻááášáąááŹáášááˇá ᲠáŹááŤá table áááŻáášá¸ááᯠáááášááášáááŻá ááášááşáášááášáąáááŤáááášáˇááášá ááŻáášááŤááášá áááášááŤááášá ááŤáąáááášáˇ ááŹá¸ááášááźáŹá¸áááš ááźáášáťááŽá¸ ááśáŻá¸áááŻááąááŹáášá¸ááŤááášá áá˝áźáášáąááŹášáááŻááąááź table áááŻáášá¸ááᯠáąááąáááşáŹááşáŹáąáḠáąááˇááŹáááŻááááŻááŤáááášáˇááášá áá˛... áąááŹáášáááš example áá ášáᯠááášááŻáášážááášáˇááąáĄáŹááš á áĄáᯠáá˝áźáášáąááŹášáááŻááąááź row á áᯠcolumn á áᯠááá˝ááˇá˛ table áá ášááŻááᯠáąááŹáášážáááˇášááąáĄáŹáášá row ááᯠáťáá ášáááŻá <tr></tr> áááŻááŤááášá column á ááŻáťáá ášáááŻá <tr>áá˛á </tr> ážááŹá¸áá˝áŹ <td></td> á ááŻááŤááášá áĄá˛áááŻáąáḠá áĽášá¸á áŹá¸áááŻááááźáŹá¸áťááŽáááŻáááš á áťááŽá¸ code áąáá¸ážáááˇášááąáĄáŹáášá
http://saturngod.mysteryzillion.com
37 | P a g e
HTML BY SATURNGOD
<html> <head><title>Example</title></head> <body> <table> <tr><!-- First Row --> <td>1</td> <td>2</td> <td>3</td> </tr> <tr><!--Second Row --> <td>3</td> <td>4</td> <td>5</td> </tr> <tr><!-- Third Row --> <td>6</td> <td>7</td> <td>8</td> </tr> </table> </body> </html>
http://saturngod.mysteryzillion.com
38 | P a g e
HTML BY SATURNGOD
áá˛...
áĄááŻáąááŹáášáááŻ
áá˝áźáášáąááŹášáááŻááąááźááŹ
ááŹá¸ááášáąááŹáášáťááŽááášááášá table
áá˛á
width
áááŻ
áá˝áźáášáąááŹášáááŻá
áááášá¸ááşáłáášáááŻáášááŤááášá
table
áąáá˝áááášááąáĄáŹáášá áá˛á
width
áááŻ
ááášáá˝áášááˇáĄ ᲠááŤáá˝áŹ % áá˛áááášáá˝áášááŹáá˛á pixel áá˛á ááášáá˝áášááŹááášááá˝ááŤááášá table áá˛á width ááŹáá <td> áá˛á width áąááźáááŻááŤááášáá˝áášáááŻáášááŤááášá % áá˛á ááášáá˝áášááŹáá˛á Pixel áá˛á ááášáá˝áášáᏠááŹááźáŹááá˛áááŻááášáąááŹáˇ % ááąááŹáˇ broswer áá˛á áĄáąáááá˝áŹ áá°ááášáťááŽá¸ width ááąáťááŹáášá¸áá˛ááŤááášá pixel ááąááŹáˇ ááąáťááŹáášá¸áá˛áá°á¸áąááŤáˇá áĄáąááąááŤáˇá % áá˛ááááŻáááš
broswer ááşá˛ááááŻáášááŹáá˛á ááŻááášááşáášááźáŹá¸ááŤááášá
pixel áá˛ááááŻááášáąááŹáˇ browser ááşáášááášá¸ áááŻáášáááşáášááźáŹá¸ááŤáá°á¸á áá˛.. á áááŻáášááąáĄáŹáášá <html> <head><title>Example</title></head> <body> <table width="100%"> <tr><!-- First Row --> <td>1</td> <td>2</td> <td>3</td> </tr>
<tr><!--Second Row --> <td>3</td> <td>4</td> <td>5</td> </tr> <tr><!-- Third Row --> <td>6</td> <td>7</td> <td>8</td>
http://saturngod.mysteryzillion.com
39 | P a g e
HTML BY SATURNGOD
</tr>
</table> </body> </html>
áĄá˛ááŽáá˝áŹáááŻáááš width á 100% áťáá ášááˇáĄ ᲠááźáášáąážááŹáášáˇ browser áĄáťáááˇáš table ááá°ááŤááášá áĄá˛ááŽá áĄáąááááśáŻá¸ first row áááŻááŽáááŻáťááášážáááˇášáááŻáášááŤá <table width="100%"> <tr><!-- First Row --> <td width="30px">1</td> <td>2</td> <td>3</td> </tr> ááŤáááŻááášáąááŹáˇ ááá column áá˛á width ááᯠ30px áááŻáááášáá˝áášáááŻáášááŤáťááŽá ááá row áá˝áŹááášáá˝áášááŻááášáááš ááťááŹá¸ row áąááźáá˛á ááá column áááŻááŤááášáá˝áášáťááŽá¸ááŹá¸ áťáá ášááźáŹá¸ááŤáááášáˇááášá áá˝áźáášáąááŹášáááŻááąááźáᏠpx ááŹáá % áá˛áá፠ááášáá˝áášáááŻáášááŤááášá column á ááŻááśáŻá¸ááᯠááášáá˝áášááşáášááášáąááŹáˇ ááŽáááŻáąáá¸áááŻáááŤááášá <table width="100%"> <tr><!-- First Row --> <td width="45%">1</td> <td width="20%">2</td> <td width="35%">3</td>
http://saturngod.mysteryzillion.com
40 | P a g e
HTML BY SATURNGOD
</tr> áĄá˛ááŽáá˝áŹáááŻááášáąááŹáˇ column áá˛á width ááᯠ% áá˛áááášáá˝áášáąáá¸áá˝áŹááŤá áĄá˛ááŽáá˝áŹ áááá colum ááᯠwidth áááášáˇááášá¸ áá°áááŹáᏠááşááášááá˝áąáá¸áááŻáášááŤááášá áá˛... table áá˛á time table áąáá¸ááźá˛ážáááˇášááąáĄáŹáášá <html> <head><title>Example</title></head> <body> <table width="100%"> <tr><!-- First Row --> <td>Date</td> <td>Time</td> <td>Subject</td> </tr> <tr><!--Second Row --> <td>Oct 07</td> <td>1:00 PM - 3:00 PM</td> <td>Hardware</td> </tr> <tr><!-- Third Row --> <td>Oct 08</td> <td>1:00 PM - 3:00 PM</td> <td>Software Install</td> </tr> <tr> <td>Oct 08</td>
http://saturngod.mysteryzillion.com
41 | P a g e
HTML BY SATURNGOD
<td>1:00 PM - 3:00 PM</td> <td>Windows Install</td> </tr> </table> </body> </html>
áá˛.. áĄááŻáááŻáááš ááášáąááźá áĄááśáŻá¸áťááłááášáąááŹáášáťáᎠááášááášá áá˝áźáášáąááŹášáááŻááąááź table áá˝áŹ border áąááźááᯠáąáááąá ááşáášááášáąááŹáˇ border áááŻááˇá˛ attribute ááášáˇáááŤááášá
Border , Cellpadding, Cellspacing <table width="100%" border="1"> áááŻááášáąááŹáˇ border ááášá¸áąááááŹááŤáááášáˇááášá áĄáá°áĄááŤá¸ááąááŹáˇ ážááŽá¸áąááąá border áá°áąááąááąááŤáˇá border áááŻáĄáąááŹáášááášáˇááşáášááášáąááŹáˇ <table width="100%" border="1" bordercolordark="red" bordercolorlight="#FF3300"> bordercolordark ááąááŹáˇ áĄáááášáąááŤáˇá bordercolorlight ááąááŹáˇ áĄáąáááĄáąááŹáášáąááŤáˇá ááŤáá˝áááŻááš bordercolor áááŻáťááŽá¸ááášá¸ áĄááśáŻá¸áťááłáááŻáášááŤááášá <table width="100%" border="1" cellspacing="0" bordercolor="#0066CC" >
http://saturngod.mysteryzillion.com
42 | P a g e
HTML BY SATURNGOD
border á áá˝á ášááášáťáá ášáąáááŹááᯠáąááźááááŤááááˇášááášá áĄá˛ááŤá cell padding áąážááŹáášáˇááŤá cell padding áá˛á cell spacing áááŻáťááŽá¸ áá˝á ášááşáłáá¸ááá˝ááŤááášá cellpadding áááŻááŹááąááŹáˇ table áĄááźáášá¸ border áá˛á á ᏠáąáááŹáĄááźáŹáĄáąáá¸ááŤá cellpadding ááşáŹá¸ááŹáąááąá á áŹá áĄááźáášá¸ááᯠááášáąááąááťáá ášáá˝áŹááŤá áĄáᯠcellpadding ááᯠ30 ááŹá¸áááŻáášááˇáĄ ᲠááŤáá˝áŹ á áŹááŹá¸áąááźáá˛á border áĄááášá¸ááşá˛ááźáŹá¸ááŹááᯠáąááźááááŤááááˇášááášá <table width="100%" border="1" cellpadding="30" bordercolor="#0066CC" >
cellspacing
ááąááŹáˇ
cell
áá ášááŻáá˛á
áá ášááŻážááŹá¸
áĄááźáŹáĄáąáá¸áąááŤáˇá
áĄááŻ
border
ááŹ
áá˝á ášááášáťáá ášáąáááŹáááŻáąááźááááŤááááˇášááášá áĄá˛ááŤááᯠáá ášááášááášá¸ áťáá ášááşáášááášáąááŹáˇ cellspacing ááᯠ0 áąáá¸áááŻáášááśáŻááŤáá˛á <table width="100%" border="1" cellspacing="0" bordercolor="#0066CC" >
http://saturngod.mysteryzillion.com
43 | P a g e
HTML BY SATURNGOD
áá˛... áĄááŻáááŻááášáąááŹáˇ ááášá¸ááášá¸áąáḠááááŹáťááŽááášááášá ááŽáąááŹáášáá ááŹá¸ááášáťááŽáááŻáááš áá˝áźáášáąááŹášáááŻááąááź cell áąááźáááŻ
merge
ááŻáášááŹáąááźáááŻ
á áááŻáášááąáĄáŹáášá
ááŹá¸áááášáąáá¸ááášáąááŹáˇ
áááŻáášáááŻááš
ááášáąááźá
á áášá¸ááášážáááˇášáááŻááááŻááŤááášá table áááŻáášá¸á ááášááąááŹááš ááááášááŤáá°á¸á ááášáąááźáááŻáášáááŻáášáááš ááŹá¸ááášááźáŹá¸áá˝áŹááŤá
Cell Merge Cell Merge áááŻáášá¸ááąááŹáˇ table áááŻáášá¸ááᯠáąáááşáŹááááŹá¸áááš ááŹá¸ááášááźáášááášáááŻáááášááŤááášá Cell Merge ááąááŹáˇ Cell áá˝á ášáᯠááŤáá˝áááŻááš Cell áá˝á ášááŻáááš áąááŤáášá¸ááŹáąááŤáˇá Cell Merge ááᯠááŽáááŻáąááŤáášá¸ááá˝áŹááŤá table áá ášááŻááᯠá áá˛áˇááŻáášá¸á row áąááźááᯠ<tr> áá˛ááąáá¸ááá˝áŹááŤá <tr> áá ášááŻáá˝áŹ <td>
á ááŻááŤáááš áąááŹáášáááš <tr> áá˝áŹááášá¸ <td> á
ááŻááŤááášááá˝áŹááŤá ááŤáąáááášáˇ cell áąááźááᯠmerge ááŻáášáááŻáášáááš áĄááášá¸áááš áąáťááŹáášá¸áá˛ááŻáášááŤááášá áĄáąáááá˝áŹ column ááśáŻá¸áᯠá ááŤáąážááŹááˇáš <td> á ááŻááŤááášá ááŤáąáááášáˇ áąáĄáŹáášáá˝áŹá column á ááŻáá˝áŹ áá˝á ášááŻááᯠáąááŤáášá¸áááŻáášááášá ááŤáááŻáááš cell
á
á
ááŻáá˛ááá˝áąááŹáˇááášá
ááŤáááŻááášáąááŹáˇ
<td>
á
ááŻáá˛ááŤáąááŹáˇááášá
áĄá˛ááŤááąááŹáˇ
column
merge
ááŻáášááˇáĄ ᲠááŤáá˝áŹáąááŤáˇá row áááášá¸ áĄá˛áááŻááŤáá˛á áĄááŻáąááŹáˇ column merge ááŻáášááˇá˛ code áąáá¸ááᯠážáááˇášáááŻáášááŤáĄáśáŻá¸á <html> <head> <title>Example</title> </head> <body> <table border="1"> <tr> <td> Cell 1 </td> <td> Cell 2
http://saturngod.mysteryzillion.com
44 | P a g e
HTML BY SATURNGOD
</td> <td> Cell 3 </td> </tr> <tr> <td colspan="2"> Cell 1 </td> <td> Cell 3 </td> </tr> </table> </body> </html>
áĄáąááá code áá˝áŹ <td colspan="2"> áááŻááŹááᯠáąááźááááŻáášááášááášááŤááášá áĄá˛ááŤááąááŹáˇ Cell á ááŻáąááŤáášá¸áááš áááŻááˇá˛ áĄáááá¸áŹáášááŤá áááášáááŻá cell á ááŻáąááŤáášá¸ááşáášááášáąááŹáˇ <td colspan="3"> ááŤá áá˝áźáášáąááŹáš áĄá˛áááŻááşáłáḠcode áááŻáąáťááŹáášá¸áąáá¸áááŻáášáááš ááŽáááŻáąááźáááá˝áŹááŤá
<html> <head>
http://saturngod.mysteryzillion.com
45 | P a g e
HTML BY SATURNGOD
<title>Untitled Document</title> </head>
<body> <table border="1"> <tr> <td> Cell 1 </td> <td> Cell 2 </td> <td> Cell 3 </td> </tr>
<tr> <td colspan="3"> Cell 1 </td> </tr>
</table>
http://saturngod.mysteryzillion.com
46 | P a g e
HTML BY SATURNGOD
</body> </html>
áá˝áźáášáąááŹášáááŻááąááź column ááŻá á ááŻá ááśáŻá¸ áąááŤáášá¸áááŻáášááˇá˛ áĄááźááš á áŻá áŻáąááŤáášá¸ column á ááŻáá˛ááá˝áąááŹáˇááášá ááŤáąážááŹáášáˇ <td> áá ášááŻááᯠáá˛ááśáŻá¸ááŹááŤá áá˛... ááášáťááŽá¸áąááŹáˇ example áá ášááŻáąááŹááš áąááŹáášážáááˇášááąáĄáŹáášá <html> <head>
<title>Untitled Document</title> </head>
<body> <table border="1"> <tr> <td colspan="3"> List Of Adboe Software </td> </tr> <tr> <td> Adobe Acrobat </td> <td>
http://saturngod.mysteryzillion.com
47 | P a g e
HTML BY SATURNGOD
Adobe Dreamweaver </td> <td> Adboe Flash </td> </tr> <tr> <td> Adobe InDesign </td> <td> Adobe Photoshop </td> <td> Adboe Bridge </td> </tr> </table> </body> </html>
http://saturngod.mysteryzillion.com
48 | P a g e
HTML BY SATURNGOD
áĄá˛ááŽá code áá˝áŹáááŻááášáąááŹáˇ List Of Adboe Sofware áĄááźááš Column á ááŻááśáŻá¸ááᯠmerge ááŻáášááŹá¸ááŹááᯠáąááźááá˝áŹááŤá Column á ááŻááᯠmerge ááŻáášáááŻáášááˇáĄ Რááźááš column á ááŻáá˛ááá˝ááŤáąááŹáˇááášá ááŤáąážááŹáášáˇ <td> áá ášááŻáᲠáááŻáĄáášááŤáąááŹáˇááášá áĄááŻáąááŹáášáááŻááášáąááŹáˇ Column Merge áááŻáááąááŹáášáťááŽááášááŤááášá ááášáťááŽá¸ Row Merge áĄáąážááŹáášá¸áąáḠáąááˇááŹááąáĄáŹáášá Row áąááź Merge ááŻáášááˇáĄ ᲠááŤáá˝áŹááášá¸ column merge ááŻáášááááŻááŤáá˛á áĄááášááśáŻá¸ code áąáá¸á áąáá¸áááŻáášááąáĄáŹáášá <html> <head>
<title>Untitled Document</title> </head>
<body> <table border="1"> <tr> <td rowspan="2"> Cell Left </td> <td> Cell 2 </td> </tr>
<tr>
<td>
http://saturngod.mysteryzillion.com
49 | P a g e
HTML BY SATURNGOD
Cell 3 </td> </tr>
</table> </body> </html>
áááááśáŻá¸ Column áá˝áŹ <td rowspan="2"> áááŻááŹáąáá¸ááá˝ááŤááášá áááááśáŻá¸ Column áá˝áŹ Row á ááŻáááŻáąááŤáášá¸áááš áááŻááˇá˛ áĄáááá¸áŹáášááŤá áĄáąáááá˝áŹ column á ááŻááá˝áąáááášáˇ áąááŹáášááášáá ášááášáˇáá˝áŹáąááŹáˇ Column á ááŻáá˛ááá˝ááŤáąááŹáˇááášá ááŹáťáá ášáááŻáááášá¸áááŻááášáąááŹáˇ First Column áá˝áŹ áá°ááąáĄáŹáášá First Column áá˛á áąááŤáášá¸áááŻáášáąááŹáˇ Column áá ášááŻáąááşáŹáášááźáŹá¸ááŹáąááŤáˇá ááášáťááŽá¸áá˝áášá¸áąáĄáŹááš áąááŹáášáááš example áá ášáᯠááášáťáááŤááášá <html> <head> <title>Example</title> </head>
<body> <table border="1"> <tr> <td> Row1 , Cell1 </td> <td>
http://saturngod.mysteryzillion.com
50 | P a g e
HTML BY SATURNGOD
Row1 , Cell2 </td> <td> Row1 , Cell3 </td> </tr> <tr> <td rowspan="2"> Left </td> <td> Center </td> <td rowspan="2"> Right </td> </tr> <tr> <td> Cell 1</td> </tr>
</table> </body> </html>
http://saturngod.mysteryzillion.com
51 | P a g e
HTML BY SATURNGOD
áᎠexample áá˝áŹáááŻáááš row span ááŻááąááŹáášá¸áąááŹáášá¸ááŹá¸ááášááášááášááŤááášá Left áá˛á Right áááŻáťááŽá¸ row áá˝á ášááŻáąááŤáášá¸áááŻáášáąááŹáˇ áąáĄáŹáášááśáŻá¸ row áá˝áŹ column áá ášááźáášáᲠááşáášáąááŹáˇááˇáĄ Რááźááš <td> áá ášááŻáᲠáąáá¸áááŹááŤá
Appearnce áá˝áźáášáąááŹášáááŻááąááźáᏠTable áąááźáá˝áŹ background color áąááźáĄááśáŻá¸áťááłáááŻáášááŤááášá border áĄááśáŻá¸áťááłááášá¸áááŻáąááŹáˇ áĄáąáááá˝áŹ áąááŹášáťááťááŽá¸ááźáŹá¸ááŤáťááŽá áĄáᯠáááŻáášáááŻááşáášááˇá˛ cell áá˝áŹ background áĄáąááŹáášáąáá¸áąááź ááášáˇááąáĄáŹáášá <html> <head> <title>Example</title> </head> <body>
<table border="1">
<tr> <td bgcolor="blue"> <font color="#FFFFFF">BLUE</font> </td> <td bgcolor="red"> Red </td> <td bgcolor="#EABCDF"> Hex Color </td> </tr>
http://saturngod.mysteryzillion.com
52 | P a g e
HTML BY SATURNGOD
</table> </body> </html>
áĄá˛ááŽáá˝áŹáááŻáááš background
bgcolor
áááŻáąááźááá˝áŹááŤá
áĄá˛ááŤááąááŹáˇ
áĄáąááŹáášáááŻááášáˇáááŻáááąáááášáˇ
á áŹááśáŻá¸áĄáąááŹáášááášáˇááşáášááášáąááŹáˇ
font
color
background
á áŹááśáŻá¸áĄáąááŹáášáąááź
áĄáąááŹáášááášáˇááŹááŤá
áá˝áźáášáąááŹášáááŻááąááź
ááášáˇáááŻáááááŤáá°á¸á
áá˝áźáášáąááŹášáááŻááąááź
áá˛ááááˇášááźáášá¸áááŤááášá
ááťááŹá¸áĄááášáąáťááá˛áˇááášá¸ááąááŹáˇ
CSS
áĄááśáŻá¸áťááłáááŻáášáťááášá¸ááŤáá˛á ááŽá áŹáĄáŻáášáá˛áá˝áŹáąááŹáˇ CSS áĄáąážááŹáášá¸ááŤááášáťááášá¸áááá˝áąáá¸áá°á¸á áĄááŻáááŻááášáąááŹáˇ bg color áááŻááášá¸ááášá¸ááŹá¸ááášááŹáťááŽááášááŤááášá
áááášáááŻá
áá˝áźáášáąááŹášáááŻááąááź
áĄáąááŹáášáááˇášááşáášááášáąááŹáˇ <tr> áá˝áŹ bgcolor áááŻááˇá˛ attribute ááśáŻá¸áááŤááášá <html> <head> <title>Example</title> </head> <body>
<table border="1">
<tr> <td bgcolor="blue"> <font color="#FFFFFF">BLUE</font> </td> <td bgcolor="red">
http://saturngod.mysteryzillion.com
row
áá ášááŻááśáŻá¸áááŻ
53 | P a g e
HTML BY SATURNGOD
Red </td> <td bgcolor="#EABCDF"> Hex Color </td> </tr> <tr bgcolor="#FF6699"> <td> a </td> <td> b </td> <td> c </td> </tr>
</table> </body> </html>
http://saturngod.mysteryzillion.com
54 | P a g e
HTML BY SATURNGOD
áĄá˛ááŽáá˝áŹáááŻááášáąááŹáˇ <tr bgcolor="#FF6699"> áąážááŹáášáˇ row áá ášááŻááśáŻá¸ áĄáąááŹáášáąáťááŹáášá¸ááźáŹá¸ááášáááŻááŹááᯠáąááźááááŻáášáá˝áŹááŤá
áĄááŻáąááŹáášáááŻááášáąááŹáˇ
table
áĄáąážááŹáášá¸áááąááŹáášááŤáťááŽá
table
á
HTML
áá˛ááąáá¸áááŹ
áąááŹášáąááŹášááášááášáťááŽá¸ á ááášááşáášáááŻá áąááŹáášá¸ááŤááášá Dreamweaver áááŻááşáłáḠsoftware ááśáŻá¸áááŻáášááášáąááŹáˇ table áá ášááŻáąááŹáášáááŹ
áĄááášá¸ááźáášááŤááášá
table
áááŻ
merge
ááŻáášááŹáąááźáááášá¸
dreamweaver
áá˝áŹ
áĄááźáášááá°ááŻáášáááŻáášááŤááášá ááŽá áŹáĄáŻáášáá˝áŹ dreamweaver áĄáąážááŹáášá¸áąáťááŹáᏠáááŻáášáᲠHTML áááŻáĄáąáťáááśá áĄá ááŹá¸ááášáąáĄáŹááš áąáá¸ááášáąáĄáŹááš áąáťááŹáťáááŹá¸ááŹáąážááŹáášáˇ áĄááŻáááŻááşáłáḠááášá¸ááášá¸ááášááášáąáááášáˇ ááŹá¸ááášáąáĄáŹááš áąááˇááŹááášáˇááŤááášá áĄááŻáąááŹáˇ frame áĄáąážááŹáášá¸áąáá¸áᲠááášááąáĄáŹáášá
Frame Frame ááąááŹáˇ HTML Page áá˝á ášáᯠááášáá ááŹáąááźááᯠá áŹááşáášáá˝áŹ áá ášááŻáᲠáá˝áŹ áąááŹášáťááťááášááˇá˛ áĄááŤáąááŤáˇá ááášáááŻááşáłáá¸áᲠáááŻáąááŹáˇ
áĄá˛ááŽáá˝áŹ áááŻáááš Frame á ááŻáá˛á Page áá ášááŻááᯠááźá˛áá áášá¸ ááášáąááŹáášááŹá¸ááŹááŤá áĄááŻáąááŹáášáááŻáášá¸áá˝áŹ Frame áááŻáĄááśáŻá¸ááášá¸ááźáŹá¸ááŤáťááŽá
AJAX
áááŻááˇá˛
ááášá¸áááŹáááŻ
áąáťááŹáášá¸ááŻáśá¸ážáááŤááášá
áĄááášááŻáášá¸ááąááŹáˇ
Frame
áááŻáĄááśáŻá¸ááşáŹá¸áá˛áˇááŤááášá ááŹáááŻááĄááśáŻá¸áťááłáááá˛áááŻááášáąááŹáˇ áĄáąááá ááśáŻáá˝áŹážáááˇášáááŻáášááŤá ááášááášá menu áťáá ášáťááŽá¸
ááŹááášááąááŹáˇ
menu
á
ááá˝áášáááŻáášáááš
áąááááŹááášáˇ
áááŻáąáá¸ááŹá¸ááŹááŤá áĄá˛.. áĄáᯠframe áĄáąážááŹáášá¸ á áááŻáášáąáĄáŹáášá Frame1.html <html> <head> <title>Untitled Document</title> </head> <body>
http://saturngod.mysteryzillion.com
page
áąááŤáˇá
áĄáąááááśáŻá¸ááąááŹáˇ
Name
55 | P a g e
HTML BY SATURNGOD
This is frame 1 </body>
</html>
Frame2.html
<html> <head> <title>Untitled Document</title> </head> This is frame 2
</html> index.html <html > <head> <title>Untitled Document</title> </head>
<frameset cols="80,*" frameborder="no" border="0" framespacing="0"> <frame src="frame1.html" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" /> <frame src="frame2.html" name="mainFrame" id="mainFrame" /> </frameset>
http://saturngod.mysteryzillion.com
56 | P a g e
HTML BY SATURNGOD
<noframes><body> </body> </noframes></html> frame áá ášááŻááᯠááášáąááŹáášáťááŽááášáąááŹáˇ áĄááášá¸ááśáŻá¸ file á ááŻáááŻááŤááášá index.html ááąááŹáˇ Frame1 áá˛á Frame2 áááŻááşááášááášáąááŹášáťááąáá¸áá˝áŹáťáá ášáťááŽá¸ frame1 áá˛á frame2 ááąááŹáˇ áĄááááąááŤáˇá
index.html ááᯠážáááˇášáááŻáášááŤá áá°á¸áťááŹá¸áᏠáá ášááŻá፠ááŤááášá áĄá˛ááŤááąááŹáˇ <body> áááŤáťááášá¸áá˛á frame áá˛á Main Page áᏠBody ááášáˇá ááŹááááŻááŤáá°á¸á frameset áᲠááášáˇááá˝áŹááŤá HTML áá˝áŹ frame ááśáŻá¸ááᏠááášááášáá˝ááŤááášá áĄáąááŹáášá¸ááśáŻá¸ááąááŹáˇ
IDE
áąááźáá˛á
Dreamweaver
áááŻáĄááśáŻá¸áťááłáááŻáášááášáąááŹáˇ
ááźáášááášáˇááá°
frame
áááŻáąáá¸ááŹá¸áááŻáášáá˝áŹááŤá áĄááŻáąááŹáˇ áááąáĄáŹááš áááŻáášáááŻáášáᲠáąáá¸ážááášáˇáááŹáąááŤáˇá <frameset> áá˛á á áťááŽá¸ </frameset> áá˛á áąáá¸áááŤááášácols áááŻááŹááąááŹáˇ column áĄáąááĄááźáášáąááŤáˇá áĄáᯠcolumn á ááŻáá˛ááŤáá˛áˇáĄááźááš cols="80,*" áááŻááąáá¸áááŻáášááŤááášá áĄá˛áᎠáĄáááá¸áŹáášá áąáá˝áá column áĄááşáášááᯠ80 px áá°áááš áąááŹáášááąááŹáˇ ááşáášáᏠáĄááŻáášáá°áááŻááˇá˛ áĄáááá¸áŹáášááŤá áá˝áźáášáąááŹášáááŻá percentage áá˛áááášá¸ áĄááśáŻá¸áťááłáááŻááááŤááášá cols="50%,*" áááŻááąáťááŹáášá¸áąáá¸áááŻáášááášáąááŹáˇ áąáá˝áá 50% áťáá ášáťááŽá¸ áąááŹáášá frame áááášá¸ ááşáášááˇá˛ 50% áąááŤáˇá frameborder="no" áááŻááŹááąááŹáˇ frame áá˝áŹ boder áááŤáá°á¸áááŻááˇá˛ áĄáááá¸áŹáášááŤá border="0" framespacing="0" áĄá˛ááŤááąááŹáˇ border áĄáá°á 0 áťáá ášáťááŽá¸ frame áá ášááŻáá˛á áá ášááŻážááŹá¸á spacing á 0 áááŻááąáťááŹááŹááŤá áĄáᯠcolumn á ááŻáááŻáášááŹá¸á ááŽáąááŹáˇ áá˝áźáášáąááŹášáááŻááąááź <frame> áá˝á ášáᯠááášáˇáááášá ááŤáąážááŹáášáˇ <frame src="frame1.html" name="leftFrame" scrolling="No" noresize="noresize" /> <frame src="frame2.html" name="mainFrame" id="mainFrame" /> áĄá˛áááŻááşáłáá¸áąáá¸áááŻáášááŹá áĄá˛áá˝áŹ src áááŻááŹááąááŹáˇ frame áá˛á Link áąááŤáˇá áá˝áźáášáąááŹášáááŻááąááź file á ááŻááśáŻá¸ááᯠáá ášáąáááŹááášá¸áá˝áŹááášáˇááŹá¸ááášá
ááŤáąážááŹáášáˇ
áááŻáášáááŻááš
áá˝áášá¸áąáááááŻáášááśáŻáá˛á
Name
ááąááŹáˇ
ááŹááášááŤá
áááášáˇááášá¸áááŤáááš.. scrolling áááŻááŹááąááŹáˇ áąáá¸ááŹá¸á scrollbar áąááááąáááąááŤáˇá áąáááąá ááşáášáááš Yes áąááŤáˇá noresize ááąááŹáˇ frame ááᯠresize ááŻáášáááŻááááąáĄáŹááš ááŻáášááŹá¸ááŹááŤá ááŤááᯠframe ááᯠresize ááŻáášááşáášááášáąááŹáˇ áĄá˛ááŤááᯠáááášáˇáá˛ááąááŤáˇá áĄáᯠcolumn á áᯠáá˛áááŻáášážáááˇášááąáĄáŹáášá
http://saturngod.mysteryzillion.com
57 | P a g e
HTML BY SATURNGOD
index.html
<html> <head> <title>Untitled Document</title> </head>
<frameset cols="20%,30%,*"> <frame src="frame1.html" /> <frame src="frame2.html" /> <frame src="frame1.html" /> </frameset> <noframes>Your Browser Donât Support Frame</noframes></html> áąáá¸á áᏠáá ášááŻáąááááŹáťááŽá ááŹáá˛áááŻááášáąááŹáˇ <noframes> á áĄá˛ááŤá ááŹáá˛áááŻááášáąááŹáˇ áááŻá¸áĄááášá browser áąááźá frame áąááźááᯠsupport áááŻáášááŤáá°á¸á ááŤáąážááŹáášáˇ frame áąááźááᯠsupport áááŻáášááˇá˛ browser áąááźáťáá ášáąááááš Message áąáá¸áąááŹášáťááąáá¸ááŤááášá áĄááŻáąááŹáášáááŻášáášá¸ browser áąááźá support ááŻáášááŤááášá áá˛.. áĄáᯠcode áąáá¸ááᯠááášá¸ááášá¸áąáḠáąáťááŹáášá¸ážáááˇášáááŻáášááąáĄáŹáášá <html> <head> <title>Untitled Document</title> </head>
http://saturngod.mysteryzillion.com
58 | P a g e
HTML BY SATURNGOD
<frameset rows="20%,30%,*"> <frame src="frame1.html" /> <frame src="frame2.html" /> <frame src="frame1.html" /> </frameset> <noframes><body> </body> </noframes></html>
ááŹáąáťááŹáášá¸ááźáŹá¸ááá˛áááŻáąááŹáˇ frameser ááŤá cols ááąá rows áťáá ášááźáŹá¸ááŤááášá cols áá˛á rows áąáá¸áᲠááźáŹááŹááŤá ááşáášáᏠáĄáá°áá°ááŤáá˛á
frame
áĄáá˛áá˝áŹááášá¸
ááášáťááŽá¸
ááášááśááźá˛ááŻáášáááŻááááŤáąáá¸ááášá áĄáᯠáĄáąááááśáŻá¸á rows ááᯠcolumn ááášáťááŽá¸ ááźá˛ááŤááášá
<html> <head> <title>Untitled Document</title> </head>
<frameset rows="20%,30%,*"> <frameset cols="*,50%" framespacing="0" frameborder="NO" border="0"> <frame src="frame1.html" /> <frame src="frame2.html" name="rightFrame" scrolling="NO" noresize> </frameset>
http://saturngod.mysteryzillion.com
59 | P a g e
HTML BY SATURNGOD
<frame src="frame2.html" /> <frame src="frame1.html" /> </frameset> <noframes><body> </body> </noframes></html>
áĄá˛ááŽáá˝áŹ <frameset> áąáĄáŹáášáá˝áŹ <frameset> ááášááášáˇááŹá¸ááŹááᯠáąááźáááá˝áŹááŤá
<frameset rows="20%,30%,*"> <frameset cols="*,50%" framespacing="0" frameborder="NO" border="0"> <frame src="frame1.html" /> <frame src="frame2.html" name="rightFrame" scrolling="NO" noresize> </frameset> áá˝áźáášáąááŹášáááŻá áĄáąááááśáŻá¸á rows ááᯠááášáťááŽá¸ cols ááźá˛ááŹááŤá ááŤáąážááŹáášáˇ áĄáąááááśáŻá¸ rows áá˝áŹ columns áá˝á ášááŻáťáá ášááźáŹá¸ááŤáťááŽá
ááŤáąážááŹáášáˇ
<frame>
áá˝á ášááŻ
áąáá¸áááŹááŤá
ááášááášáˇááşáášááášáąááŹáˇ code á ááŽáááŻáąáá¸áťáá ášááźáŹá¸áá˝áŹááŤá
http://saturngod.mysteryzillion.com
áááášáááŻá
ááŻááá
rows
áá˝áŹáá˛
colums
60 | P a g e
HTML BY SATURNGOD
<html> <head> <title>Untitled Document</title> </head>
<frameset rows="20%,30%,*">
<frame src="frame1.html" />
<frameset cols="*,50%" framespacing="0" frameborder="NO" border="0"> <frame src="frame2.html" /> <frame src="frame2.html" name="rightFrame" scrolling="NO" noresize> </frameset>
<frame src="frame1.html" /> </frameset> <noframes><body> </body> </noframes></html>
http://saturngod.mysteryzillion.com
61 | P a g e
HTML BY SATURNGOD
áá˝áášá¸áá˝áášá¸áąáá¸ááŤá ááŻááá rows áá˝áŹ áťáá ášáąá ááşáášáááŻá ááŻááá rows áá˝áŹ frameset áá ášááŻááášááášáˇáááŹááŤá áĄá˛áááŻááşáłáá¸áᲠcolumns áąááźáá˛áá˝áŹ rows áąááź ááźá˛áááŻááááŤááášá áĄáá°áá°ááŤáá˛á áĄáąááá rows áąáááŹáá˝áŹ cols áąáťááŹáášá¸áťááŽá¸áąááŹáˇ cols áąáááŹáá˝áŹ rows áąáťááŹáášá¸áááŻáášáááš áááá˝áŹááŤá áá˝áźáášáąááŹáš ááąáá¸áťááąááŹáˇáá°á¸á áááŻáášáááŻáášáᲠáąáá¸áťááŽá¸ á áášá¸ážááášáˇáááŻáášáąááŤáˇá
áĄáᯠááŽá áŹáĄáŻáášáá˛á áąááŹáášááśáŻá¸áĄááášá¸á áąááŹáášááśáŻá¸ áĄáąážááŹáášá¸ááŤáá˛á ááŹáá˛áááŻááášáąááŹáˇ Link And Frame ááŤá Frame áá ášááŻá
Link
á
ááá˝áášáááŻáášáááš
áąááŹááš
frame
áá ášááŻá
áąáťááŹáášá¸ááźáŹá¸áááŻáááŤá
áá˝áźáášáąááŹáš
áĄááŻáášááśáŻá¸áááŻ
áĄáąáťáááśáąááŹáášáᲠáąáťááŹáááŻáášáá˝áŹááŤá Web áááŻáášá¸áá˝áŹ áąááˇááŹá ááŹáąááź áĄááşáŹá¸ážááŽá¸ááŤá HTML áááŻáᏠááśáŻá¸á á ááŹá áĄáąáťáááśáĄááášáˇáąáá¸ááŤá áá˛.. áąááŹáášááśáŻá¸ áĄááášá¸áąáḠááášáááŻáášááąáĄáŹáášá
http://saturngod.mysteryzillion.com
62 | P a g e
HTML BY SATURNGOD
Link And Frame
áá˝áźáášáąááŹášáááŻá áĄáąáááá˝áŹ áąáťááŹáá°á¸ááŤááášá ááášááášá Link ááᯠááá˝áášáááŻáášáááš ááŹááášáá˝áŹ ááášáááŻáášáᏠPage ááᯠáąáťááŹáášá¸ááźáŹá¸ááášáááŻáťááŽá¸áąááŹáˇá áĄááŻáĄá ᲠááŻááşáłáḠááášááášá frame ááąá ááá˝áášáááŻáášáááš ááŹááášá frame áá˝áŹ ááášáááŻáášáᏠPage áąáťááŹáášá¸ááźáŹá¸ áąáĄáŹáášááŻáášááŤááášá áááááśáŻá¸ frame á ááŻáĄááźááš index.html áááŻá áąáá¸ááŤáˇááášá
<html> <head> <title>Menu</title> </head> <frameset cols="100,*"> <frame src="menu.html" id="menu">
http://saturngod.mysteryzillion.com
63 | P a g e
HTML BY SATURNGOD
<frame src="home.html" name="main"> </frameset> <noframes></noframes> </html> áĄá˛áá˝áŹ.. name="main" áááŻááąáá¸áá˛áˇááŹááᯠáąááźááá˝áŹááŤá áĄá˛áááŻááşáłáá¸ááŹáááš ááášáˇááˇá Რὠmenu ááąá áĄá˛áᎠframe áá˝áŹ ááźáŹá¸áąáááááŻáťááŽá¸ áąáťááŹáááŻáááá˝áŹá áá˛.. áĄáᯠmenu.html áá˝áŹáąáá¸ááŹá¸ááŹááᯠážáááˇášáááŻáášááąáĄáŹááš... <html> <head> <title>Menu</title> </head> <body>
<a href="home.html" target="main">Home</a><br> <a href="download.html" target="main">Download</a><br> <a href="link.html" target="main">Link</a><br>
</body> </html> áĄá˛áá˝áŹ link áąááźáĄááŻáášááśáŻá¸áá˝áŹ target áááŻááŹáąáḠááŤááŹáááŻáąááźááááŤáááášáˇááášá áá˝áźáášáąááŹášáááŻá index.html áá˝áŹ name="main" áááŻááˇá˛ frame áá˝áŹ ááźáŹá¸áąááááášáááŻááˇá˛ áĄáááá¸áŹáášáąááŤáˇá download áááŻááŹááᯠááá˝áášáááŻáášáááš ááŹááášá frame áá˝áŹ download.html áááŻááˇá˛ page áąáá¸áąááááźáŹá¸ááŤááášá Home áááŻááá˝áášáááŻáášááášá¸ home.html áᏠááŹááášá frame áá˝áŹáᲠááźáŹá¸áąááááŤááášá áĄá˛ááŽáąááŹáášáááŻáááš ááŹá¸áááš ááááá˝áťááŽáááŻáááášááŤááášá
http://saturngod.mysteryzillion.com
64 | P a g e
HTML BY SATURNGOD
áĄááŻááášáťááŽá¸ ááášá¸ááášá¸áĄáááŻáąáḠááášáˇáąáťááŹáťáááąá á
menu.html page áá˛áá˝áŹáᲠhome.html áąáá¸ááᯠáá˝áášá¸áťááŽá¸ áąáááťááá˛áˇááášá¸ááŤá áĄá˛ááŤáąáá¸ááąááŹáˇ áĄááśáŻá¸ááášááŤááášá Home Page áá˝áŹ news áąááźááᯠáąááŹášáťááá˛áˇáĄá፠áá˝áŹáĄááśáŻá¸ááášáá˝ááŤááášá <html> <head>
http://saturngod.mysteryzillion.com
65 | P a g e
HTML BY SATURNGOD
<title>Menu</title> </head> <body>
<iframe src="home.html" width="500" height="200"></iframe> </body> </html> code áąáá¸á áá˝áášá¸ááŤááášá <iframe> ááŤá src ááąááŹáˇ áááš page ááᯠááşááášááá˛áááŻááŹááŤá width áá˛á height ááąááŹáˇ
áááŻáášáąááŹášáťáááşáášááąááŹáášáąááŤáˇá
áĄááŻáááŻááášáąááŹáˇ
áá˝áźáášáąááŹášáááŻááąááź
HTML
áĄáąáťáááśáąáá¸áááŻ
áąááˇááŹáááŻááťááŽá¸ááźáŹá¸ááŤáťááŽá ááŽá áŹáĄáŻáášááᯠááášáťááŽá¸ááášáąááŹáˇ áᏠcode á ááŹáááŻáąáťááŹááŹáá˛áááŻááŹáᲠáááááŻáášáá˝áŹááŤá ááŹáááŻááşáášáááš ááášáááŻááŻáášáááᲠáááŻááŹáąááŹáˇ áááááá˛á áąááˇááŹááá áźáášá¸áĄáŹá¸áąáá áá°ááášááŤááášá á áŹáĄáŻáášááášááśáŻáá˛á ááááŤáá°á¸ á ááŻááášáąááźá¸ááŤá á áášá¸ážáááˇášááŤá ááŤáá˝ áááŻá¸ááášááááᯠááá˝áŹááŤá ááşáášá ááá˛á ážáááˇášááśáŻáá˛ááąááŹáˇ áááŻá¸ááášááááá˝áá˝áŹ áááŻáášááŤáá°á¸á ááŽá áŹáĄáŻááš ááášáťááŽá¸ááášáąááŹáˇ "áąáĄáŹáš.. áᎠcode á ááŤáĄááźáášáąáá¸ááŹá¸ááŹ" áĄá˛áąááŹáášáᲠá áźáášá¸áąááŹááš áąáá¸áááŻáášáá˝áŹááŤá ááŤááŽáááŻááźá˛ááşáášááášá ááŤáąážááŹáášáˇ ááŤááᯠááśáŻá¸ááááš áááŻááŹááąááŹáˇ áááááá˛á áĄáŹááśáŻ ááźáášááťáá´á¸áááá˛á ááŽá áŹáĄáŻáášááᯠáąááŤáášá¸áťááŽá¸ áĄááśáŻá¸ááşááááš ááááŻáášáá˝áŹááŤá áá˝áźáášáąááŹášáááŻááąááź áĄááášáˇáąááŹááš
ááŹáąááź
ááášáťááŽá¸áąááˇááŹáááŻááááŻáąáá¸áá˛áááŻáąááŹáˇ
ááááźáŹá¸áťááŽáááŻááášáąááŹáˇ
CSS
áááŻááášáťááŽá¸
áĄááşáŹá¸ážááŽá¸ááŤá
áąááˇááŹáááŻááááŻááŤááášá
HTML
áááŻ
ááŽá áŹáĄáŻááš
áĄá˛ááŽáá˝á ášááŻááášáťááŽá¸ááášáąááŹáˇ
ááášá¸ááášá¸áąáḠáąáá¸ááźá˛ááᏠááźáášááźáŹá¸áąáĄáŹááš Dreamweaver ááśáŻá¸áťááŽá¸ááźá˛áąá ááşáášááŤááášá áťááŽá¸ááášáąááŹáˇ Javascript áąááŤáˇá
áĄá˛ááŽááŹáąááź
áťááŽá¸ááźáŹá¸áááš
photoshop
áá˛á
Flash
ááášá¸ááášá¸ááśáŻá¸ááášáááŻááááŻááŤááášá
Webdesigner
áá ášáąááŹáášáĄáąááá˛á áąááˇááŹáááŻááąáťááŹááŹááŤá web developer áĄáąááá˛áááášá¸ CSS , Javascript, Phtoshop, Flash áááŻáááᯠáĄááášá¸áĄááşáĽášá¸áąáḠááááá˝ááŹá¸ááášááŹá¸áááŻááááŻááŤááášá áťááŽá¸áááš web programming áąááź áąááˇááŹááá˝áŹááŤá .NET áááŹá¸áąááźáááŻááášáąááŹáˇ
ASP.NET
áąááŤáˇá
Java
áááŹá¸áááŻááášáąááŹáˇ
JSP
ááá˝ááŤááášá
áĄáťááŹá¸
ááźáášáá°á áźáŹ
áąááˇááŹááşáášááášáąááŹáˇ php á áĄááźáášááśáŻá¸ááŤá áąááŹáášááśáŻá¸ technology áąááźáá˛á áąááŹáášá¸áąááŹáášá¸áąáá¸áááŻáááá˛áˇ Ruby On Rails áá˛á python áááŻááááŻááášá¸ áąááˇááŹáááŻáášááŤáąáá¸ááášá áĄááşáŹá¸ážááŽá¸ áąááˇááŹáááŻááąááźááá˝ááŤááášá áĽáŽá¸á áźáŹáąááŹáˇ HTML ááᯠáąááąáááşáŹááşáŹ ááášáá˝áźáášá¸ááŹá¸ááŻáááááŻááŤááášá
CSS By SaturngodâŚâŚ coming soonâŚâŚâŚâŚâŚ.
http://saturngod.mysteryzillion.com