Home Explore web_Development

web_Development

Published by Luangprabang TTC, 2019-07-11 23:57:30

Description: web_Development

Read the Text Version

Pages:

2.2. ຄໍາສ່ ງັ Align ໃຊກ້ າໍ ນດົ ຕໍາແໜ່ ງການຈດັ ວາງຕາຕະລາງມີ 3 ຮູບແບບຄື  Left ຄກື ານຈດັ ຕາຕະລາງຢ່ ູທາງຊາ້ ຍ (ຄ່ າປກົ ກະຕ)ິ ຂອງຈພໍ າບ  Right ຄກື ານຈດັ ຕາຕະລາງໄວທ້ າງຂວາຂອງຈພໍ າບ  Center ຄກື ານຈດັ ຕາຕະລາງໄວເ້ ຄ່ ງິ ກາງຂອງຈພໍ າບ ຕວົ ຢ່ າງທີ 3.18 ການສາ້ ງຕາຕະລາງໃຫຢ້ ່ ູເຄ່ ງິ ກາງຈພໍ າບ <!doctype html> <html> <head> <title> Create Table </title> </head> <body> <table border=4 align=center> <caption>New Movie this Week</caption> <tr> <th>Name</th> <th>Time</th> <th>Time</th> <th>Time</th> </tr> <tr> <td>Fast and Furious 7</td> <td>12:00</td> <td>15:00</td> <td>18:00</td> </tr> <tr> <td>Ice Age 5</td> <td>12:00</td> <td>15:00</td> <td>18:00</td> </tr> <tr> <td>Step Up 4</td> <td>12:00</td> <td>15:00</td> <td>18:00</td> </tr> </table> </body> </html> 46

2.3. ຄໍາສ່ ງັ Width ໃຊກ້ າໍ ນດົ ຄວາມກວາ້ ງຂອງຕາຕະລາງທງັ ໝດົ ມໜີ ່ ວຍເປນັ Pixel ຫຼື ເປີເຊນັ ກ່ ໍ ໄດ ້ 2.4. ຄາໍ ສ່ ງັ Height ໃຊກ້ າໍ ນດົ ຄວາມສູງຂອງຕາຕະລາງທງັ ໝດົ ມໜີ ່ ວຍເປນັ Pixel ຫຼື ເປີເຊນັ ກ່ ໄໍ ດ້ 2.5. ຄໍາສ່ ງັ Bgcolor ເປັນຄາໍ ສ່ ງັ ທ່ ໃີ ຊໃ້ ນການກາໍ ນດົ ສພີ ນື້ ຫງຼັ ຂອງຕາຕະລາງ ຕວົ ຢ່ າງທີ 3.19 ການໃຊຄ້ ໍາສ່ ງັ Width, Height, Bgcolor <!doctype html> <html> <head> <title> Create Table </title> </head> <body> <table border=4 align=center width=\"80%\" height=\"50%\" bgcolor=\"lightblue\"> <caption>New Movie this Week</caption> <tr> <th>Name</th> <th>Time</th> <th>Time</th> <th>Time</th> </tr> <tr> <td>Fast and Furious 7</td> <td>12:00</td> <td>15:00</td> <td>18:00</td> </tr> <tr> <td>Ice Age 5</td> <td>12:00</td> <td>15:00</td> <td>18:00</td> </tr> <tr> <td>Step Up 4</td> <td>12:00</td> <td>15:00</td> <td>18:00</td> </tr> </table> </body> </html> 47

2.6. ຄາໍ ສ່ ງັ Cellspacing ໃຊກ້ ໍານດົ ໄລຍະຫ່ າງລະຫວ່ າງຊ່ ອງແຕ່ ລະຊ່ ອງໃນຕາຕະລາງ ໂດຍການ ເພ່ ມີ ຂະໜາດ ຫຼື ຫຸດຼ ຂະໜາດຕາມຄວາມໜາຂອງເສນັ້ ຂອບຕາຕະລາງ ຕວົ ຢ່ າງທີ 3.20 ການໃຊຄ້ ໍາສ່ ງັ Cellspacing <!doctype html> <html> <head> <title> Create Table </title> </head> <body> <table border=4 align=center width=\"80%\" height=\"50%\" cellspacing=\"10\"> <caption>New Movie this Week</caption> <tr> <th>Name</th> <th>Time</th> <th>Time</th> <th>Time</th> </tr> <tr> <td>Fast and Furious 7</td> <td>12:00</td> <td>15:00</td> <td>18:00</td> </tr> <tr> <td>Ice Age 5</td> <td>12:00</td> <td>15:00</td> <td>18:00</td> </tr> <tr> <td>Step Up 4</td> <td>12:00</td> <td>15:00</td> <td>18:00</td> </tr> </table> </body> </html> 48

2.7. ຄາໍ ສ່ ງັ Cellpadding ໃຊກ້ າໍ ນດົ ໄລຍະຫ່ າງລະຫວ່ າງແຖວຂອງຕາຕະລາງ ໂດຍການເພ່ ມີ ຂະໜ າດ ຫຼື ຫຸດຼ ຂະໜາດຕາມຄວາມສູງາຂອງເສນັ້ ຂອບຕາຕະລາງ ຕວົ ຢ່ າງທີ 3.21 ການໃຊຄ້ ໍາສ່ ງັ Cellspacing <!doctype html> <html> <head> <title> Create Table </title> </head> <body> <table border=4 align=center width=\"80%\" height=\"50%\" cellpadding=\"10\"> <caption>New Movie this Week</caption> <tr> <th>Name</th> <th>Time</th> <th>Time</th> <th>Time</th> </tr> <tr> <td>Fast and Furious 7</td> <td>12:00</td> <td>15:00</td> <td>18:00</td> </tr> <tr> <td>Ice Age 5</td> <td>12:00</td> <td>15:00</td> <td>18:00</td> </tr> <tr> <td>Step Up 4</td> <td>12:00</td> <td>15:00</td> <td>18:00</td> </tr> </table> </body> </html> 49

2.8. ຄາໍ ສ່ ງັ Colspan ແລະ Rowspan ຄໍາສ່ ງັ <td colspan> ເປນັ ຄໍາສ່ ງັ ໃນການລວມຖນັ ເຂາົ້ ດວ້ ຍກນັ ຕາມຄ່ າຂອງຈາໍ ນວນຖນັ ທ່ ກີ ໍາ ນດົ ຮູບແບບຄໍາສ່ ງັ <td colspan = “number”> ໂດຍທ່ ີ colspan ຄື ແອດັ ທບິ ວິ ທ່ ໃີ ຊໃ້ ນການກາໍ ນດົ ການລວມຖນັ Number ຄື ຄ່ າຕວົ ເລກທ່ ໃີ ຊໃ້ ນການລວມຖນັ ເຂາົ້ ເປນັ ຖນັ ດຽວກນັ ຄໍາສ່ ງັ <td rowspan> ເປນັ ຄໍາສ່ ງັ ໃນການລວມແຖວເຂາົ້ ດວ້ ຍກນັ ຕາມຄ່ າຂອງຈາໍ ນວນແຖວທ່ ີ ກາໍ ນດົ ໄວ້ ຮູບແບບຄໍາສ່ ງັ <td rowspan = “number”> ໂດຍທ່ ີ rowspan ຄແື ອດັ ທບິ ວິ ທ່ ໃີ ຊໃ້ ນການກາໍ ນດົ ການລວມແຖວ Number ຄື ຄ່ າຕວົ ເລກທ່ ໃີ ຊໃ້ ນການລວມແຖວເຂາົ້ ເປນັ ແຖວດຽວກນັ <!doctype html> <html> <head> <title> Create Table </title> </head> <body> <table border=1 align=center width=\"80%\" height=\"50%\" cellpadding=\"10\"> <caption>New Movie this Week</caption> <tr> <th>Name</th> <th colspan=3>Time</th> </tr> <tr> <td>Fast and Furious 7</td> <td>12:00</td> <td>15:00</td> <td>18:00</td> </tr> <tr> <td rowspan=2>Ice Age 5</td> <td colspan=2>12:00</td> <td>18:00</td> </tr> <tr> <td>12:00</td> <td colspan=2>15:00</td> </tr> </table> </body> </html> 50

3.12. ຄາໍ ສ່ ງັ ພາຍໃນ <head> (HTML Head) ສ່ ວນຫວົ ເລ່ ອື ງຂອງເອກະສານເວບັ ແລະ ສ່ ວນເນອື້ ໃນເອກະສານເວບັ ໂດຍຄໍາສ່ ງັ ທ່ ໃີ ຊບ້ ອກສ່ ວນ ຫວົ ເລ່ ອື ງຂອງເອກະສານເວບັ ນນັ້ ຄຄື ໍາສ່ ງັ <HEAD>…</HEAD> ເຊ່ ງິ ຄໍາສ່ ງັ ທ່ ຢີ ່ ູພາຍໃນສ່ ວນຫວົ ຂອງ ເອກະສານເວບັ ນນັ້ ເປນັ ຄໍາສ່ ງັ ທ່ ໃີ ຊກ້ າໍ ນດົ ຂໍຄ້ ວາມທ່ ເີ ປນັ ຊ່ ເື ລ່ ອື ງຂອງເອກະສານ HTML ແລະ ຄໍາສ່ ງັ ທ່ ໃີ ຊ້ ສໍາລບັ ບອກຄໍາສໍາຄນັ (Keyword) ເອກະສານ HTML ເພ່ ອື ໃຊໃ້ ນການຄນົ້ ຫາເອກະສານນນັ້ ເທງິ ລະບບົ ເຄອື ຂ່ າຍອນິ ເຕເີ ນດັ <HEAD> (ຄໍາສ່ ງັ ຍ່ ອຍສາລບັ ສ່ ວນຫວົ ຂອງເອກະສານ) </HEAD> ຄໍາສ່ ັງທ່ ໃີ ຊສ້ ໍາລບັ ກໍານດົ ຂໍຄ້ ວາມທ່ ປີ ະກດົ ເທງິ ສ່ ວນຫວົ ຂອງໂປຣແກຣມເວບັ ບຣາວເຊີ ຄຄື ໍາສ່ ງັ <TITLE> … </TITLE> ຫາກຕອ້ ງການໃຫຂ້ ໍຄ້ ວາມມດປະກດົ ທ່ ສີ ່ ວນຫວົ ຂອງໂປຣແກຣມເວບັ ບຣາວເຊີ ເຮດັ ໄດໂ້ ດຍເອາົ ຂໍຄ້ ວາມທ່ ຕີ ອ້ ງການສະແດງຜນົ ນນັ້ ໃສ່ ເຂາົ້ ໄປລະຫວ່ າງຄໍາສ່ ງັ ເປດີ <TITLE> ແລະ ຄໍາສ່ ງັ ປິດ </TITLE> ເຊ່ ງິ ຄໍາສ່ ງັ ນຈີ້ ະຢ່ ູໃນສ່ ວນຫວົ ຂອງເອກະສານເວບັ <TITLE> (ຂໍຄ້ ວາມທ່ ຕີ ອ້ ງການໃຫ ້ ປະກດົ ທ່ ສີ ່ ວນຫວົ ຂອງໂປຣແກຣມເວບັ ບຣາວເຊ)ີ </TITLE> ຕວົ ຢ່ າງທີ 3.22 ຄາໍ ສ່ ງັ ທ່ ໃີ ຊໃ້ ນສ່ ວນຫົວຂອງເອກະສານເວບັ ບຣາວເຊີ <!DOCTYPE html> <html> <head> <title>HTML script Tag Example</title> <meta name = \"keywords\" content = \"C, C++, Java, PHP, Perl, Python\"> <meta name = \"author\" content = \"Tutorials Point\"> <meta http-equiv = \"refresh\" content = \"30\"> <base href = \"http://www.tutorialspoint.com/\" /> <link rel = \"stylesheet\" type = \"text/css\" href = \"/css/style.css\"> <style type = \"text/css\"> .myclass { background-color: #aaa; padding: 10px; } </style> <script type = \"text/JavaScript\"> function Hello() { alert(\"Hello, World\"); } </script> </head> <body> <input type = \"button\" onclick = \"Hello();\" name = \"ok\" value = \"OK\" /> </body> </html> 51

3.13. ການແບ່ ງສດັ ສ່ ວນເວບັ ໂດຍນາໍ ໃຊ້ <div>ແລະ <span> (HTML Blocks) 1. ການກາໍ ນດົ ລກັ ສະນະຂອງເສນັ້ ຂອບ (Border) ເສັນ້ ຂອບ (Border) ຄືເສນັ້ ທງັ 4 ດາ້ ນທ່ ອີ ອ້ ມຮອບອີເລເມນັ ນນັ້ ເອງ ໂດຍສນັ ຍາລັກທ່ ສີ ໍາຄນັ ກ່ ຽວກບັ ເສນັ້ ຂອບທ່ ເີ ຮາົ ຄວນຮູຈ້ ກັ ໃນເບອື້ ງຕນົ້ ມດີ ່ ງັ ນີ້  ເຮົາຈະແທນເສນັ້ ຂອບແຕ່ ລະດາ້ ນດວ້ ຍຄໍາວ່ າ top (ດາ້ ນເທງິ ), right (ດາ້ ນຂວາ), bottom (ດາ້ ນລ່ ຸມ), left (ດາ້ ນຊາ້ ຍ)  ລກັ ສະນະທ່ ເີ ຮາົ ກໍານດົ ໃຫແ້ ກ່ ເສນັ້ ຂອບມີ 3 ຢ່ າງຄ:ື style (ຮູບແບບເສນັ້ ), width (ຄວາມໜາ) ແລະ color (ສ)ີ  ໃນການກາໍ ນດົ ລກັ ສະນະຂອງເສນັ້ ຂອບ ສາມາດເລອື ກກໍານດົ ສະເພາະດາ້ ນທ່ ຕີ ອ້ ງການໄດ້ ໂດຍບ່ ໍ ຈາໍ ເປນັ ຕອ້ ງກາໍ ນດົ ໃຫຄ້ ບົ ຫຼື ມລີ ກັ ສະນະຄກື ນັ ທຸກດາ້ ນ. ຕວົ ຢ່ າງທ່ ີ 3.23 border-style.html <!doctype html> <html> <head> <meta charset=\"utf-8\"> <title>Border Style</title> <style> body { font-family: 'Phetsarath OT'; } #p1 { border-top-style: solid; border-bottom-style: dotted; } #p2 { border-top-style: dashed; border-right-style: solid; border-bottom-style: solid; border-left-style: dashed; } #p3 { border-style: double; } #p4 { border-style: groove; } </style> </head> <body> <p id=\"p1\">ການສະແດງເສນັ້ ຂອບຈະຊ່ ວຍໃຫອ້ ເີ ລເມນັ ໂດດເດ່ ນັ ແລະສວຍງາມຂນຶ້ </p> <p id=\"p2\">ການສະແດງເສນັ້ ຂອບຈະຊ່ ວຍໃຫອ້ ເີ ລເມນັ ໂດດເດ່ ນັ ແລະສວຍງາມຂນຶ້ </p> <p id=\"p3\">ການສະແດງເສນັ້ ຂອບຈະຊ່ ວຍໃຫອ້ ເີ ລເມນັ ໂດດເດ່ ນັ ແລະສວຍງາມຂນຶ້ </p> <p id=\"p4\">ການສະແດງເສນັ້ ຂອບຈະຊ່ ວຍໃຫອ້ ເີ ລເມນັ ໂດດເດ່ ນັ ແລະສວຍງາມຂນຶ້ </p> </body> </html> 52

ຕວົ ຢ່ າງທ່ ີ 3.24 border-width.html <!doctype html> <html> <head> <meta charset=\"utf-8\"> <title>Border Width</title> <style> body { font-family: 'Phetsarath OT'; } p { border-style: solid; } #p1 { border-top-width: 1px; border-right-width: 3px; border-bottom-width: 3px; border-left-width: 1px; } #p2 { border-width: 5px; } #p3 { border-width: 8px; } #p4 { border-width: thin; } #p5 { border-width: medium; } #p6 { border-width: thick; } </style> </head> <body> <p id=\"p1\">ເສນັ້ ຂອບຂະໜາດ 1px 3px 3px 1px</p> <p id=\"p2\">ເສນັ້ ຂອບຂະໜາດ 5px</p> <p id=\"p3\">ເສນັ້ ຂອບຂະໜາດ 8px</p> <p id=\"p4\">ເສນັ້ ຂອບຂະໜາດ thin</p> <p id=\"p5\">ເສນັ້ ຂອບຂະໜາດ medium</p> <p id=\"p6\">ເສນັ້ ຂອບຂະໜາດ thick</p> </body> </html> 53

ຕວົ ຢ່ າງທ່ ີ 3.25 border-color.html <!doctype html> <html> <head> <meta charset=\"utf-8\"> <title>Border Color</title> <style> body { font-family: 'Phetsarath OT'; } p { border-width: 3px; } #p1 { border-style: double; border-color: red; } #p2 { border-top-color: #666; border-right-color: #ccc; border-bottom-color: #ccc; border-left-color: #666; } #p3 { border-color: #ccc #666 #666 #ccc; } #p4 { border-color: #0cf; } #p2, #p3, #p4 { border-style: solid; } </style> </head> <body> <p id=\"p1\">ການສະແດງເສນັ້ ຂອບຈະຊ່ ວຍໃຫອ້ ເີ ລເມນັ ໂດດເດ່ ນັ ແລະສວຍງາມຂນຶ້ </p> <p id=\"p2\">ການສະແດງເສນັ້ ຂອບຈະຊ່ ວຍໃຫອ້ ເີ ລເມນັ ໂດດເດ່ ນັ ແລະສວຍງາມຂນຶ້ </p> <p id=\"p3\">ການສະແດງເສນັ້ ຂອບຈະຊ່ ວຍໃຫອ້ ເີ ລເມນັ ໂດດເດ່ ນັ ແລະສວຍງາມຂນຶ້ </p> <p id=\"p4\">ການສະແດງເສນັ້ ຂອບຈະຊ່ ວຍໃຫອ້ ເີ ລເມນັ ໂດດເດ່ ນັ ແລະສວຍງາມຂນຶ້ </p> </body> </html> 54

2. ການກາໍ ນດົ ເສນັ້ ຮອບນອກເສນັ້ ຂອບ (Outline) ນອກຈາກເສນັ້ ຂອບແລວ້ ເຮົາຍງັ ສາມາດກໍານດົ ເສນັ້ ທ່ ຢີ ່ ູອອ້ ມຮອບອເີ ລເມນັ ອີກແບບໜ່ ງຶ ເອນີ້ ວ່ າ ເສນັ້ ຮອບນອກ (Outline) ດ່ ງັ ຕວົ ຢ່ າງ ຕວົ ຢ່ າງທ່ ີ 3.26 outline.html <!doctype html> <html> <head> <meta charset=\"utf-8\"> <title>Outline</title> <style> body { font-family: 'Phetsarath OT'; } button { font: 14px Phetsarath OT; } p{ border: double 4px brown; } .p-outline { outline: dotted 4px blue; } .bt-outline { outline: solid 2px red; outline-offset: 1px; } </style> </head> <body> <p> ເສນັ້ ຮອບນອກ (Outline) ຄເື ສນັ້ ທ່ ຢີ ່ ູຖດັ ຈາກເສນັ້ ຂອບອອກໄປ< br> ມກັ ໃຊເ້ ພ່ ອື ເນນັ້ ໃຫອ້ ເີ ລເມນັ ອນັ ໃດອນັ ໜ່ ງຶ ໃຫເ້ ດ່ ນັ ຊດັ ຂນຶ້ </p> <p class=\"p-outline\"> ເສນັ້ ຮອບນອກ (Outline) ຄເື ສນັ້ ທ່ ຢີ ່ ູຖດັ ຈາກເສນັ້ ຂອບອອກໄປ< br> ມກັ ໃຊເ້ ພ່ ອື ເນນັ້ ໃຫອ້ ເີ ລເມນັ ອນັ ໃດອນັ ໜ່ ງຶ ໃຫເ້ ດ່ ນັ ຊດັ ຂນຶ້ </p> <button>« ຍອ້ ນກບັ </button> <button class=\"bt-outline\">ຖດັ ໄປ »</button> </body> </html> 55

3. ການກາໍ ນດົ ເສນັ້ ຂອບແບບມມູ ໂຄງ້ (Border-Radius) ການກໍານດົ ເສນັ້ ຂອບແບບມູມໂຄງ້ (Rounded Corners) ເປັນລກັ ສະນະທ່ ເີ ພ່ ມີ ເຂາົ້ ມາໃໝ່ ໃນ CSS3 ໂດຍການກາໍ ນດົ ຄ່ າລດັ ສະໝໃີ ນແກນ X ແລະ Y ດ່ ງັ ຕວົ ຢ່ າງດ່ ງັ ນີ້ ຕວົ ຢ່ າງທ່ ີ 3.27 border-radius.html <!doctype html> <html> <head> <meta charset=\"utf-8\"> <title>Rounded Corners</title> <style> #container { border: solid 2px crimson; width: 480px; border-radius: 15px; background: lightgray; text-align: center; } #top { font: 24px tahoma; color: cyan; border-top-left-radius: 12px; border-top-right-radius: 12px; } #bottom { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; } #top, #bottom { width: auto; background: royalblue; padding: 5px; } img { height: 100px; margin: 10px 5px; border-radius: 10px; } button { border-radius: 10px; background: tomato; padding: 5px; width: 80px; } </style> </head> 56

<body> <div id=\"container\"> <div id=\"top\">Rounded Corners</div> <img src=\"laos1.jpg\"> <img src=\"laos2.jpg\"> <img src=\"laos3.jpg\"> <div id=\"bottom\"> <button>OK</button> <button>Cancel</button> </div> </div> </body> </html> 57

4. ການກາໍ ນດົ ເງາົ ໃຫກ້ ບັ ອເີ ລເມນັ (Box Shadow) ການເຮດັ ໃຫອ້ ເີ ລເມນັ ມເີ ງາົ (Shadow) ຖເື ປັນລກັ ສະນະທ່ ໜີ າ້ ສນົ ໃຈອກີ ຢ່ າງໜ່ ງຶ ທ່ ເີ ພ່ ີມເຂາົ້ ມາ ໃນ CSS3 ດ່ ງັ ຕວົ ຢ່ າງ ຕວົ ຢ່ າງທ່ ີ 3.28 box-shadow.html <!doctype html> <html> <head> <meta charset=\"utf-8\"> <title>Box Shadow</title> <style> body { font-family: 'Phetsarath OT'; } p{ border: solid 2px orangered; width: 450px; font-size: 24px; } #p1 { box-shadow: 5px 5px; } #p2 { box-shadow: -5px -5px 3px darkgray; } #p3 { box-shadow: 10px -10px skyblue; } #p4 { border-radius: 10px; box-shadow: 8px 8px 5px darkgray; } </style> </head> <body> <p id=\"p1\">ກາໍ ນດົ +hoffset ແລະ +voffset</p> <p id=\"p2\">ກໍານດົ -hoffset, -voffset, blur ແລະ color</p> <p id=\"p3\">ກໍານດົ +hoffset, -voffset ແລະ color</p> <p id=\"p4\">ກາໍ ນດົ +hoffset, +voffset, blur ແລະ color</p> </body> </html> 58

5. ການກາໍ ນດົ ຂະໜາດຂອງອເີ ລເມນັ ໂດຍປົກກະຕແິ ລວ້ ອເີ ລເມນັ ບາງຊະນດິ ທ່ ໃີ ຊບ້ ນັ ຈເຸ ນອື້ ໃນອ່ ນື ໆເຊ່ ນັ : <div>, <p> ຈະມຄີ ວາມ ສູງຕາມຂະໜາດຂອງເນອື້ ໃນ ສ່ ວນຄວາມກວາ້ ງຈະເທ່ ົາກບັ ຄວາມກວາ້ ງຂອງອີເລເມນັ ທ່ ີໃຊບ້ ັນຈຸຢ່ ູ (Container) ຖາ້ ມີ <body> ເປັນຄອນເທນັ ເນໂີ ດຍກງົ ກ່ ໍຈະກວາ້ ງເທ່ າົ ກບັ ຂະໜາດຂອງບຣາວເຊີ ແລະ ເມ່ ອື ເຮາົ ຫຍໍ້ ຫຼື ຂະຫຍາຍຂະໜາດຂອງບຣາວເຊີ ຈະເຮດັ ໃຫຂ້ ະໜາດຂອງອເີ ລເມນັ ປ່ ຽນໄປຕາມດວ້ ຍ ດ່ ງັ ຕວົ ຢ່ າງ ຕວົ ຢ່ າງທ່ ີ 3.29 resize.html <!doctype html> <html> <head> <meta charset=\"utf-8\"> <title>Size</title> <style> body { font-family: 'Phetsarath OT'; } div { border: solid 3px crimson; } </style> </head> <body> <div> ອເີ ລເມນັ ທ່ ບີ ່ ໄໍ ດລ້ ະບຸຂະໜາດເປນັ ຄ່ າຄງົ ທ່ ີ ເມ່ ອື ປ່ ຽນຂະໜາດຂອງບຣາວເຊີ ຂະໜາດຂອງອີ ເລເມນັ ຈະປ່ ຽນໄປຕາມ </div> </body> </html> ການທ່ ອີ ີເລເມນັ ມຂີ ະໜາດບ່ ໍແນ່ ນອນເຊ່ ນັ ນີ້ ໃນບາງກໍະນຈີ ະເກດີ ປັນຫາຕ່ ໍການຈດັ ວາງໂຄງຮ່ າງ ຂອງເວບັ ເພຈໄດ້ ດ່ ງັ ນນັ້ ເຮາົ ຈ່ ງຶ ຄວນກໍານດົ ຂະໜາດທ່ ແີ ນ່ ນອນໃຫກ້ ບັ ອີເລເມນັ ບາງໂຕ ຫຼບື ່ ໍກ່ ໍໃຫສ້ າມາດ ປ່ ຽນ ຂະໜາດໄດພ້ າຍໃນຂອບເຂດທ່ ກີ າໍ ນດົ ໂດຍໃນ CSS ນນັ້ ມີ Properties ທ່ ກີ ່ ຽວຂອ້ ງກບັ ອເີ ລເມນັ ດ່ ງັ ນີ້  ການກາໍ ນດົ ຂະໜາດເປນັ ຕວົ ເລກເຊ່ ນັ : width: 100px; ຈະເຮດັ ໃຫອ້ ເີ ລເມນັ ມຂີ ະໜາດເທ່ າົ ເດມີ ຕະຫອຼ ດ  ການກໍານດົ ຂະໜາດເປັນເປີເຊນັ ເຊ່ ນັ : width: 80%; ຈະທຽບກບັ ຂະໜາດຂອງອີເລເມນັ ເປັນ ຄອນເທນັ ເນີ ເຊ່ ງິ ຈະເຮດັ ໃຫອ້ ເີ ລເມນັ ປ່ ຽນຂະໜາດຕາມຄອນເທນັ ເນເີ ພ່ ອື ຮກັ ສາສດັ ສ່ ວນຂອງຂະ ໜາດໃຫເ້ ປນັ ຄ່ າຕາມ % ທ່ ກີ າໍ ນດົ 59

 ກໍລະນທີ ່ ເີ ຮາົ ຕອ້ ງການໃຫອ້ ເີ ລເມນັ ມຂີ ະໜາດພໍດີ ແລະ ປບັ ຕວົ ຕາມຂະໜາດຄອນເທນັ ເນີ ແນະ ນໍາໃຫກ້ ໍານົດຄ່ າເປັນ auto ຫຼາຍກວ່ າທ່ ຈີ ະກໍານດົ ເປັນ 100% ເພາະຈະເຮດັ ໃຫຄ້ ່ າpadding, margin, border ຖືກນໍາມາລວມເພ່ ີມເຂາົ້ ໄປອີກ ເຊ່ ິງອາດຈະສ່ ງົ ຜົນໃຫອ້ ີເລເມນັ ມຂີ ະໜາດ ໃຫຍ່ ກວ່ າຄອນເທນັ ເນີ ຕວົ ຢ່ າງທ່ ີ 3.30 sizing-element.html <!doctype html> <html> <head> <meta charset=\"utf-8\"> <title>Size of Element</title> <style> #container { border: dotted 4px darkgray; width: 80%; min-width: 250px; max-width: 500px; } #p1 { border: double 4px; background-color: coral; width: 100px; height: 50px; } #p2 { border: double 4px; background-color: skyblue; width: 50%; height: 50px; } </style> </head> <body> <div id=\"container\"> width: 80% <p id=\"p1\">width: 100px</p> <p id=\"p2\">width: 50%</p> </div> </body> </html> 60

ຕວົ ຢ່ າງທ່ ີ 3.31 sizing-100percent-auto.html <!doctype html> <html> <head> <meta charset=\"utf-8\"> <title>100% - auto</title> <style> #container { border: dotted 4px darkgray; width: 200px; } #p1 { background-color: coral; width: auto; } #p2 { background-color: skyblue; width: 100%; } #p1, #p2 { border: double 10px; padding: 10px; margin: 20px; } </style> </head> <body> <div id=\"container\"> <p id=\"p1\">width: auto</p> <p id=\"p2\">width: 100%</p> </div> </body> </html> ຈະເຫນັ ວ່ າການກໍານດົ ແບບ auto ຈະມຄີ ວາມສມົ ດຸນກັບຄອນເທນັ ເນີ ແຕ່ ການກໍານົດແບບ 100% ຈະມຂີ ະໜາດເກນີ ອອກມາຈາກຄອນເທນັ ເນີ ທງັ ນເີ້ ພາະມກີ ານລວມຄ່ າຂອງ padding, margin ແລະ border ເຂາົ້ ໄປດວ້ ຍນນັ້ ເອງ 61

6. ການສະແດງເນອື້ ໃນຂຄໍ້ ວາມທ່ ເີ ກນີ ຂອບເຂດຂອງອເີ ລເມນັ (Overflow) ໃນກໍລະນີທ່ ີເຮົາກໍານດົ ຂະໜາດຂອງອີເລເມນັ ດວ້ ຍ Properties width/height ຫຼື min- width/min-height ອາດຈະເກດີ ປນັ ຫາຢ່ າງໜ່ ງຶ ຕາມມານນັ້ ກ່ ຄໍ ື ຖາ້ ປະລມິ ານເນອື້ ອໃນຂໍຄ້ ວາມທ່ ຢີ ່ ູພາຍ ໃນອີເລເມນັ ນນັ້ ເກນີ ຂອບເຂດທ່ ກີ ໍານດົ ໄວ້ ຈະເຮດັ ໃຫເ້ ນອື້ ໃນຂໍຄ້ ວາມນນັ້ ລນົ້ ອອກມານອກອີເລເມນັ ໃນ CSS ມີ Properties overflow/overflow-x/overflow-y ດ່ ງັ ຕວົ ຢ່ າງ ຕວົ ຢ່ າງທ່ ີ 3.32 overflow.html <!doctype html> <html> <head> <meta charset=\"utf-8\"> <title>overflow</title> <style> body { font-family: 'Phetsarath OT'; } p{ border: double 4px red; width: 200px; height: 60px; } #p1 { overflow: visible; } #p2 { overflow: hidden; } #p3 { overflow: scroll; } #p4, #p5 { overflow: auto; } #p5 { width: 250px; height: 100px; } span { color: blue; } </style> </head> <body> <p id=\"p1\"> <span>overflow: visible</span><br> ໃນກໍລະນທີ ່ ເີ ຮາົ ກາໍ ນດົ ຂະໜາດຂອງ ອເີ ລເມນັ ດວ້ ຍ Properties width/ height ຫຼmື in-width/ min-height ອາດຈະເຮດັ ໃຫ ້ ເນອື້ ໃນຂໍຄ້ ວາມນນັ້ ລນົ້ ອອກມານອກອີ ເລເມນັ ໄດ້ </p> <br><br> 62

<p id=\"p2\"> <span>overflow: hidden</span><br> ໃນກລໍ ະນທີ ່ ເີ ຮາົ ກາໍ ນດົ ຂະໜາດຂອງອເີ ລເມນັ ດວ້ ຍ Properties width/height ຫຼື min- width/min-height ອາດຈະເຮດັ ໃຫເ້ ນອື້ ໃນຂໍຄ້ ວາມນນັ້ ລນົ້ ອອກມານອກອເີ ລເມນັ ໄດ້ </p> <p id=\"p3\"> <span>overflow: scroll</span><br> ໃນກໍລະນທີ ່ ເີ ຮາົ ກາໍ ນດົ ຂະໜາດຂອງອເີ ລເມນັ ດວ້ ຍ Properties width/height ຫຼື min- width/min-height ອາດຈະເຮດັ ໃຫເ້ ນອື້ ໃນຂໍຄ້ ວາມນນັ້ ລນົ້ ອອກມານອກອເີ ລເມນັ ໄດ້ </p> <p id=\"p4\"> <span>overflow: auto</span><br> ໃນກໍລະນທີ ່ ເີ ຮາົ ກາໍ ນດົ ຂະໜາດຂອງອເີ ລເມນັ ດວ້ ຍ Properties width/height ຫຼື min- width/min-height ອາດຈະເຮດັ ໃຫເ້ ນອື້ ໃນຂໍຄ້ ວາມນນັ້ ລນົ້ ອອກມານອກອເີ ລເມນັ ໄດ້ </p> <p id=\"p5\"> <span>overflow: auto</span><br> ໃນກລໍ ະນທີ ່ ເີ ຮາົ ກາໍ ນດົ ຂະໜາດຂອງອເີ ລເມນັ ດວ້ ຍ Properties width/height ຫຼື min- width/min-height ອາດຈະເຮດັ ໃຫເ້ ນອື້ ໃນຂໍຄ້ ວາມນນັ້ ລນົ້ ອອກມານອກອເີ ລເມນັ ໄດ້ </p> </body> </html> 63

7. ການກາໍ ນດົ ໄລຍະຫ່ າງລະຫວ່ າງເນອື້ ໃນຂຄໍ້ ວາມກບັ ຂອບຂອງອເີ ລເມນັ (Padding) ໃນ CSS ມກີ ່ ຸມ Properties ທ່ ໃີ ຊກ້ າໍ ນດົ ໄລຍະຫ່ າງທງັ 4 ດາ້ ນຄ:ື top, right, bottom ແລະ left ດ່ ງັ ຕວົ ຢ່ າງ ຕວົ ຢ່ າງທ່ ີ 3.33 padding.html <!doctype html> <html> <head> <meta charset=\"utf-8\"> <title>padding</title> <style> body { font-family: 'Phetsarath OT'; } p{ border: solid 2px red; width: 280px; } #p1 { padding-top: 10px; padding-left: 20px } #p2 { padding: 10px; } /*ທັ ງ 4 ດ້ ານ*/ #p3 { padding: 15px 10px; } /*top,bottom&right,left*/ #p4 { padding: 5px 10px 15px 30px; } /*top, right, bottom, left*/ span { color: blue; } </style> </head> <body> <p id=\"p1\"> <span>padding-top: 20px; padding-left: 20px;</span><br> Properties ໃນກ່ ຸມ padding ນນັ້ ຈະໃຊໃ້ ນການກາໍ ນດົ ໄລຍະຫ່ າງລະຫວ່ າງຂອບຂອງອເີ ລເມນັ ກບັ ເນອື້ ໃນຂໍຄ້ ວາມ </p> <p id=\"p2\"> <span>padding: 10px;</span><br> Properties ໃນກ່ ຸມ padding ນນັ້ ຈະໃຊໃ້ ນການກໍານດົ ໄລຍະຫ່ າງລະຫວ່ າງຂອບຂອງອເີ ລເມນັ ກບັ ເນອື້ ໃນຂໍຄ້ ວາມ </p> <p id=\"p3\"> <span>padding: 15px 10px;</span><br> Properties ໃນກ່ ຸມ padding ນນັ້ ຈະໃຊໃ້ ນການກໍານດົ ໄລຍະຫ່ າງລະຫວ່ າງຂອບຂອງອເີ ລເມນັ ກບັ ເນອື້ ໃນຂໍຄ້ ວາມ </p> <p id=\"p4\"> <span>padding: 5px 10px 15px 30px;</span><br> Properties ໃນກ່ ຸມ padding ນນັ້ ຈະໃຊໃ້ ນການກາໍ ນດົ ໄລຍະຫ່ າງລະຫວ່ າງຂອບຂອງອເີ ລເມນັ ກບັ ເນອື້ ໃນຂໍຄ້ ວາມ </p> </body> </html> 64

8. ການກາໍ ນດົ ໄລຍະຫ່ າງລະຫວ່ າງອເີ ລເມນັ (Margin) ໃນ CSS ມກີ ່ ຸມ Properties ທ່ ໃີ ຊກ້ າໍ ນດົ ໄລຍະຫ່ າງທງັ 4 ດາ້ ນຄ:ື top, right, bottom ແລະ left ດ່ ງັ ຕວົ ຢ່ າງ ຕວົ ຢ່ າງທ່ ີ 3.34 margin.html <!doctype html> <html> <head> <meta charset=\"utf-8\"> <title>magin</title> <style> body { margin-top: 10px; margin-left: 10px; } img { height: 50px; border: solid 3px royalblue; margin: 5px; } span,div { font: bold 20px Tahoma; border: solid 3px crimson; padding: 10px; } span { margin: 20px; } div { width: 150px; margin: auto; /* ຈດັ ເຄ່ ງິ ກາງ */ } </style> </head> <body> <img src=\"laos1.jpg\"> <img src=\"laos2.jpg\"> <img src=\"laos3.jpg\"> <br><br> <span>1</span> <span>2</span><br><br> <div>3</div> </body> </html> 65

9. ການຄວບຄຸມການສະແດງຜນົ ຂອງອເີ ລເມນັ (Visibility ແລະ Display) ໂດຍປກົ ກະຕແິ ລວ້ ອເີ ລເມນັ ຕ່ າງໆ ທ່ ຖີ ກື ກາໍ ນດົ ໄວໃ້ ນເວບັ ເພຈກ່ ຈໍ ະປະກດົ ໃຫເ້ ຫນັ ຕາມປກົ ກະຕິ ແຕ່ ໃນບາງກໍລະນທີ ່ ເີ ຮາົ ຕອ້ ງການເຊ່ ືອງ/ສະແດງອີເລເມນັ ເຊ່ ນັ : ກໍລະນກີ ານສາ້ ງເມນຫູ ຼກັ /ເມນຍູ ່ ອຍ ອເີ ລ ເມນັ ທ່ ເີ ປນັ ຕວົ ບນັ ຈລຸ າຍການເມນຍູ ່ ອຍ ຕອ້ ງສາມາດເຊ່ ອື ງ ແລະ ສະແດງໄດຕ້ າມຕອ້ ງການດ່ ງັ ຕວົ ຢ່ າງ ຕວົ ຢ່ າງທ່ ີ 3.35 visibility.html <!doctype html> <html> <head> <meta charset=\"utf-8\"> <title>Visibility</title> <style> img { height: 60px; margin: 5px; } img.visible { visibility: visible; } img.hidden { visibility: hidden; } img.collapse { display: none; } </style> </head> <body> <img src=\"laos1.jpg\"> <img src=\"laos2.jpg\" class=\"visible\"> <img src=\"laos3.jpg\"> <br> <img src=\"laos1.jpg\"> <img src=\"laos2.jpg\" class=\"hidden\"> <img src=\"laos3.jpg\"> <br> <img src=\"laos1.jpg\"> <img src=\"laos2.jpg\" class=\"collapse\"> <img src=\"laos3.jpg\"> </body> </html> 66

ຕວົ ຢ່ າງທ່ ີ 3.36 display-inline-block.html <!doctype html> <html> <head> <meta charset=\"utf-8\"> <title>display</title> <style> span { background: skyblue; font: bold 18px tahoma; color: crimson; margin: 5px; display: block; } div, p { border: double 3px tomato; width: 150px; } div { display: inline-block; } p { display: inline; } </style> </head> <body> <span>LUANG PRABANG</span> Situated in the centre of <p>northern Laos,</p> Luang Prabang is classified as a UNESCO World Heritage Site for its outstanding cultural, <div>historic and architectural values</div> and its harmonious relationship between the natural and built environment. </body> </html> 67

10. ການກາໍ ນດົ ໃຫອ້ ເີ ລເມນັ ລອຍຢ່ ູຂາ້ ງໆກນັ ໄດ້ (Floating) ເປັນການເຮດັ ໃຫອ້ ເີ ລເມນັ ທ່ ມີ ລີ ກັ ສະນະເປນັ ຄອນເທນັ ເນເີ ຊ່ ນັ : <div> ສາມາດລອຍຢ່ ູຂາ້ ງໆກນັ ໄດ້ ເພ່ ອື ໃຊໃ້ ນການເຮດັ ໂຄງຮ່ າງຂອງເວບັ ເພຈ ໂດຍໃຊ້ Properties float ແລະ clear ສໍາລບັ ຍກົ ເລກີ ຕວົ ຢ່ າງທ່ ີ 3.37 floating-element.html <!doctype html> <html> <head> <meta charset=\"utf-8\"> <title>floating element</title> <style> body { font-family: 'Phetsarath OT'; } div { width: 210px; border: double 4px red; padding: 3px; margin: 10px; float: left; /* right */ } img { height: 50px; margin: 5px; float: left; } </style> </head> <body> <div id=\"penguins\"> <img src=\"laos2.jpg\"><span>ຫພໍ ພິ ທິ ະພນັ ເມອື ງຫວຼ ງພະບາງເປນັ ພະລາດຊະວງັ ເກ່ າົ ສາ້ ງຕາມແບບສະ ຖາ ປດັ ຕະຍະກາໍ ຝຣ່ ງັ ໃນປີ 1 904 ແລະ ຕ່ ໍເຕມີ ຍອດ ຂອງຜາສາດແບບລາວ ໃນປີ 1 930.ປະຈບຸ ນັ ໃຊສ້ ະແດງສນິ ລະປະ ແລະ ພຸດທະສາດສະໜາ</span> </div> <div id=\"tulips\"> <img src=\"laos3.jpg\"><span>ຕກັ ບາດ ຫຼື ບນິ ທະບາດ ໝາຍເຖງິ ພຣະສງົ ສາມະ ເນນພາຍບາດໄປຮບັ ເອາົ ຂອງໃສ່ ບາດ ຈາກຍາດໂຍມ. ໃສ່ ບາດ ໝາຍເຖງິ ຍາດໂຍມນາໍ ເອາົ ເຂາົ້ ໄປປ່ ອນລງົ ໃນບາດ ຂອງພຮະສງົ ສາມະເນນແຕ່ ເຮາົ ມກັ ນຍິ ມົ ເວາົ້ ກນັ ວ່ າ “ຕກັ ບາດ”.</span> </div> ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂຄໍ້ ວາມ ຂຄໍ້ ວາມ ຂຄໍ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂຄໍ້ ວາມ ຂຄໍ້ ວາມ ຂຄໍ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂຄໍ້ ວາມ ຂໍຄ້ ວາມ ຂຄໍ້ ວາມ ຂຄໍ້ ວາມ ຂໍຄ້ ວາມ ຂຄໍ້ ວາມ ຂຄໍ້ ວາມ ຂໍຄ້ ວາມ ຂຄໍ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂຄໍ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂຄໍ້ ວາມ ຂຄໍ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂຄໍ້ ວາມ ຂຄໍ້ ວາມ ຂຄໍ້ ວາມ ຂຄໍ້ ວາມ ຂຄໍ້ ວາມ ຂຄໍ້ ວາມ ຂໍຄ້ ວາມ ຂຄໍ້ ວາມ ຂຄໍ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂຄໍ້ ວາມ ຂໍຄ້ ວາມ ຂຄໍ້ ວາມ ຂຄໍ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂຄໍ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂຄໍ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ </body> </html> 68

ຕວົ ຢ່ າງທ່ ີ 3.38 floating-layout.html <!doctype html> <html> <head> <meta charset=\"utf-8\"> <title>floating layout</title> <style> body { font-family: 'Phetsarath OT'; width: 600px; margin: auto; } #atop { width: 620px; border: dotted 2px darkgray; padding: 3px; margin: 5px; } #aside { width: 150px; border: dotted 2px darkgray; float: left; padding: 3px; margin: 5px; } #content { min-width: 450px; max-width: 600px; border: dotted 2px darkgray; margin: 5px; float: left; padding: 3px; } a.submenu { display: block; background: powderblue; margin: 5px; padding: 3px; } </style> </head> <body> <div id=\"atop\"> <br><br><br><br> </div> <div id=\"aside\"> <a href=\"#\" class=\"submenu\">ໜາ້ ທໍາອດິ </a> <a href=\"#\" class=\"submenu\">ກ່ ຽວກບັ ວຄຫບຼ </a> <a href=\"#\" class=\"submenu\">ການເຂາົ້ ສກຶ ສາ</a> <a href=\"#\" class=\"submenu\">ຫກຼັ ສູດແລະການສອນ</a> <a href=\"#\" class=\"submenu\">ຕດິ ຕ່ ໍພວົ ພນັ </a> </div> <div id=\"content\"> <br><br><br><br><br><br><br><br> </div> </body> </html> 69

11. ການກາໍ ນດົ ຕໍາແໜ່ ງອເີ ລເມນັ ເທງິ ເວບັ ເພຈ ເປັນການຈດັ ວາງອເີ ລເມນັ ຕາມຕໍາແໜ່ ງທ່ ກີ າໍ ນດົ ດວ້ ຍ Properties top, left, bottom, right ແລະ ກາໍ ນດົ ຮູບແບບການຈດັ ວາງດວ້ ຍ Properties position ເຊ່ ງິ ມີ 4 ຮູບແບບຄື  static ເປັນການຈດັ ວາງຕໍາແໜ່ ງໃນ HTML  absolute ຈດັ ວາງໂດຍທຽບກບັ ຕໍາແໜ່ ງອເີ ລເມນັ ທ່ ເີ ປນັ ຄອນເທນັ ເນີ  relative ຈດັ ວາງໂດຍທຽບກບັ ຕາແໜ່ ງເດມີ ທ່ ມີ ນັ ຄວນຢ່ ູ  fixed ຈດັ ວາງໂດຍທຽບກບັ ບຣາວເຊເີ ປນັ ຫກຼັ ໂດຍບ່ ໍສນົ ໃຈຄອນເທນັ ເນີ ເຮດັ ໃຫອ້ ເີ ລເມນັ ຖກື ຄງົ ຢ່ ູກບັ ທ່ ີ ໂດຍບ່ ໍເລ່ ອື ນຕາມສະກບໍ າ. ຕວົ ຢ່ າງທ່ ີ 3.39 top-left-bottom-right.html <!doctype html> <html> <head> <meta charset=\"utf-8\"> <title>top-left-bottom-right</title> <style> div { font: bold 16px tahoma; background: skyblue; text-align: center; border: solid 2px red; width: 100px; height: 50px; position: absolute; /*****/ } #dv1 { top: 10px; left: 20px; } #dv2 { top: 3px; right: 10px; } #dv3 { bottom: 1px; right: 1px; } #dv4 { bottom: 10px; left: 10px; } </style> </head> <body> <div id=\"dv1\">div #1</div> <div id=\"dv2\">div #2</div> <div id=\"dv3\">div #3</div> <div id=\"dv4\">div #4</div> </body> </html> 70

12. ການຈດັ ລໍາດບັ ອເີ ລເມນັ ທ່ ວີ າງຊອ້ ນກນັ ດວ້ ຍ z-index ໃນກໍລະນທີ ່ ອີ ີເລເມນັ ມກີ ານວາງຊອ້ ນທບັ ກນັ ປົກກະຕແິ ລວ້ ອເີ ລເມນັ ທ່ ຖີ ກື ວາງລງົ ໄປກ່ ອນຈະຢ່ ູ ດາ້ ນລ່ ຸມ ແຕ່ ໃນ CSS ນນັ້ ມີ Properties ທ່ ຊີ ່ ວຍໃຫເ້ ຮາົ ສາມາດກໍານດົ ລໍາດັບການຈດັ ລຽງອເີ ລເມນັ ໃນ ແນວຕງັ້ ຫຼື ແນວແກນ Z ໂດຍບ່ ໍຂນຶ້ ກບັ ລໍາດບັ ທ່ ຂີ ຽນໄວໃ້ ນໂຄດ້ HTML ດ່ ງັ ຕວົ ຢ່ າງ ຕວົ ຢ່ າງທ່ ີ 3.40 z-index.html <!doctype html> <html> <head> <meta charset=\"utf-8\"> <title>z-index</title> <style> body { font-family: 'Phetsarath OT'; } img { position: fixed; border: solid 2px red; height: 120px; } #penguin { z-index: 1; top: 10px; left: 10px; } #tulip { z-index: 10; top: 40px; left: 40px; } #koala { z-index: 5; top: 70px; left: 70px; } </style> </head> <body> <img id=\"penguin\" src=\"laos1.jpg\"> <img id=\"tulip\" src=\"laos2.jpg\"> <img id=\"koala\" src=\"laos3.jpg\"> ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂຄໍ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂຄໍ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂຄໍ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂຄໍ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂຄໍ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂຄໍ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂຄໍ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂໍຄ້ ວາມ ຂຄໍ້ ວາມ </body> </html> 71

3.14. ການສາ້ ງ Form (Creating Form) ການສາ້ ງແບບຟອມ (Form) ເພ່ ອື ໃຊໃ້ ນການຮບັ ຂໍມ້ ນູ ເປນັ ວທິ ກີ ານໜ່ ງຶ ທ່ ເີ ຮດັ ກນັ ໃນເວບັ ໄຊທ່ ວົ ໄປ ເພາະການສາ້ ງແບບຟອມຈະເຮດັ ໃຫກ້ ານຕ່ ມື ຂໍມ້ ນູ ໄດງ້ ່າຍເປນັ ລະບຽບ ສວຍງາມ ແລະ ເປນັ ສດັ ສ່ ວນ ຕວົ ຢ່ າງແບບຟອມທ່ ໃີ ຊກ້ ນັ ທ່ ວົ ໄປເຊ່ ນັ ການເພ່ ມີ ຂໍມ້ ນູ ໃນການສະໝກັ ສະມາຊກິ ຕ່ າງໆ ການສະແດງຄວາມ ຄດິ ເຫນັ ການຕອບແບບສອບຖາມ ສ່ ງິ ເຫ່ າຼົ ນຖີ້ ໄື ດວ້ ່ າເປນັ ການຮບັ ຂໍມ້ ນູ ຜ່ ານຟອມທງັ ນນັ້ ການອອກ ແບບຟອມໃຫມ້ ລີ ກັ ສະນະຕ່ າງໆ ຂນຶ້ ຢ່ ູກບັ ປະໂຫຍດໃນການໃຊງ້ ານຂອງເຮາົ 1. ຮູບແບບການສາ້ ງຟອມ ການສາ້ ງຟອມ (Form) ຄວບຄຸມດວ້ ຍແທກັ Form ແລະ Input ໂດຍມຮີ ູບແບບດ່ ງັ ນີ້ <form ພາຣາມເິ ຕ>ີ <input type= “text” name= “ຊ່ ຂື ອງເທກັ ບອັ ກ” value= “ຄ່ າເລ່ ມີ ຕນົ້ ” size= ຂະໜາດ ຂອງເທກັ ບອັ ກ maxlength= ຈາໍ ນວນຕວົ ອກັ ສອນທ່ ສີ າມາດບນັ ທກຶ ໄດ>້ </form> 2. ຕວົ ຢ່ າງການສາ້ ງຟອມແບບຕ່ າງໆ 2.1. ການສາ້ ງທ່ ໃີ ສ່ ຊ່ ື Username : <Input Type=\"text\" size=\"15\" maxlength=\"20\"> Username : 2.2. ການສາ້ ງ Password Password : <Input Type=\"password\" size=\"15\" maxlength=\"25\"> Password : 2.3. ແປຄວາມໝາຍ <Input type=\"......\"> ຄກື ານໃສ່ ຄ່ າ Form ທ່ ຕີ ອ້ ງການເຊ່ ນັ : ຕອ້ ງການ Form ໃສ່ ຊ່ ື ກ່ ໃໍ ຫໃ້ ສ້ Type ໄວວ້ ່ າ Text ຫຈຼື ະໃສ່ password ກ່ ໃໍ ຫໃ້ ສ່ Type ໄວວ້ ່ າ password < Input size=\"....\">ໃສ່ ຂະໜາດຄວາມກວາ້ ງຂອງ Form ຄ່ າເປນັ ຕວົ ເລກເຊ່ ນັ : 15 < Input maxlength=\"....\"> ຂະໜາດຄວາມຈຂຸ ອງຕວົ ອກັ ສອນ ເຊ່ ງິ ຖາ້ ເກນີ ຈາໍ ນວນທ່ ລີ ະບຸ ໄວຈ້ ະບ່ ໍ ສາມາດໃສ່ ເຂາົ້ ໄປໃນ input ມຄີ ່ າເປນັ ຕວົ ເລກເຊ່ ນັ : 25 72

2.4. ການສາ້ ງປ່ ຸມ Button ການສາ້ ງປ່ ຸມ Button ໃນ Form ສາມາດເຮດັ ໄດທ້ ງັ ປ່ ຸ ມສ່ ງົ ຫຼື ຮບັ ຂໍມ້ ນູ ) Submit) ແລະປ່ ຸມຍກົ ເລກີ ການເຮດັ ວຽກ ຫຼື Reset <Input type=\"submit\" value=\"ສ່ ງົ ຂໍມ້ ນູ \" name=\"data\"> ? ??? ?? ? <Input type=\"reset\" value=\"ລບົ ຂໍມ້ ນູ \"name=\"data\"> ? ? ? ?? ? ແປຄວາມໝາຍ type ຂອງການສ່ ງົ ຂໍມ້ ນູ ຄື submit ແລະ type ຂອງການຣເີ ຊດັ ຄື reset ສ່ ວນ name ເປນັ ການກາໍ ນດົ ຊ່ ຂື ໍມ້ ນູ ເພ່ ອື ສ່ ງົ ໄປປະມວນຜນົ 2.5. ການສາ້ ງປ່ ຸມ Checkbox Checkbox ເປນັ ຮູບແບບການເລອື ກ ຊະນດິ ເລອື ກໄດຫ້ າຼ ຍລາຍການ ມປີ ະໂຫຍດຫາຼ ຍໃນການສາ້ ງຕວົ ເລອື ກທ່ ບີ ່ ໍຈາໍ ເປນັ ຕອ້ ງພມິ ຂມໍ ້ ນູ ລງົ ໄປ ພຽງແຕ່ ຄກິ ເລອື ກທ່ ປີ ່ ຸ ມນນັ້ ໆ ກ່ ເໍ ປນັ ການເພ່ ມີ ເພ່ ອື ຮບັ ຂໍມ້ ນູ ປ່ ຸມ ແບບ checkbox ສາມາດກາໍ ນດົ ຄ່ າໄດຫ້ າຼ ຍຄ່ າ ຫຼື ເລອື ກໄດຫ້ າຼ ຍຕວົ ເລອື ກ ຮູບແບບ < Input type=\"checkbox\" name=\"ຊ່ ຂື ອງປ່ ຸມ checkbox ນ\"ີ້ value=\"ຄ່ າທ່ ສີ ່ ງົ ໄປປະມວນຜນົ ເມ່ ອື ເລອື ກທ່ ປີ ່ ຸ ມນ\"ີ້ > ຕວົ ຢ່ າງ < Input type=\"checkbox\" name=\"check\" value=\"1\">ລາຍໄດຫ້ າຼ ຍກວ່ າ 300.000 ກບີ ລາຍໄດຫ້ າຼ ຍກວ່ າ 300.000 ກບີ 2.6. ການສາ້ ງປ່ ຸມ Radiobox ຮູບແບບຈະຄາ້ ຍໆກບັ checkbox ພຽງແຕ່ ສາມາດເລອື ກຂມໍ ້ ນູ ໄດແ້ ຕ່ ຕວົ ເລອື ກດຽວເທ່ າົ ນນັ້ ເໝາະ ສໍາລບັ ນໍາໄປໃຊໃ້ ນຄາໍ ຖາມທ່ ມີ ຕີ ວົ ເລອື ກ 2 ຕວົ ເລອື ກເຊ່ ນັ : ແບບທດົ ສອບ ຫຼື ເລອື ກເພດ ເປນັ ຕນົ້ ຮູບແບບ < Input type=\"radio\" name=\"ຊ່ ຂື ອງປ່ ຸມ radiobox ນ\"ີ້ value=\"ຄ່ າທ່ ສີ ່ ງົ ໄປປະມວນຜນົ ເມ່ ອື ເລອື ກທ່ ປີ ່ ຸມນ\"ີ້ > ຕວົ ຢ່ າງ < Input type=\"radio\" name=\"sex\" value=\"0\">ຊາຍ < Input type=\"radio\" name=\"sex\" value=\"0\">ຍງິ ຊາຍ ຍງິ 73

2.7. ການສາ້ ງທ່ ປີ ອ້ ນຂຄໍ ້ ວາມທ່ ມີ ຈີ າໍ ນວນຫາຼ ຍ ການສາ້ ງຟອມຮບັ ຂໍມ້ ນູ ສະແດງຄວາມຄດິ ເຫນັ ຈະໃຊຄ້ ໍາສ່ ງັ TEXT AREA ໃນການຮບັ ຂມໍ ້ ນູ ທ່ ມີ ຄີ ວາມ ຍາວຫາຼ ຍກວ່ າໜ່ ງຶ ແຖວ ໂດຍມຮີ ູບແບບຄໍາສ່ ງັ ດ່ ງັ ນ:ີ້ <TEXTAREA rows=\"ຈາໍ ນວນແຖວ \"cols=\"ຈາໍ ນວນຕວົ ອກັ ສອນໃນແຕ່ ລະແຖວ\"> </TEXTAREA> ຕວົ ຢ່ າງ <TEXTAREA rows=\"5\" cols=\"20\"> </TEXTAREA> ສາມາດເພ່ ມີ ຂະໜາດຂອງ Textarea ໄດໂ້ ດຍໄປຕງັ້ ຄ່ າທ່ ີ Rows ຫຼື Cols 2.8. ການສາ້ ງລດີ ຕວົ ເລອື ກ (Drop down list) ການສາ້ ງລດີ ຕວົ ເລອື ກการสร้างดรอปดาวนล์ ิสต์ )Drop Drown List) ເປນັ ການຮບັ ຂໍມ້ ນູ ຈາກການຄກິ ເມາົ້ ເລອື ກລາຍການທ່ ກີ ໍານດົ ໄວ ້ ໂດຍຈະເລອື ກໄດພ້ ຽງໜ່ ງຶ ລາຍການເທ່ າົ ນນັ້ ໂດຍມຮີ ູບແບບການໃຊງ້ ານຄໍາສ່ ງັ ດ່ ງັ ນ:ີ້ <SELECT> <OPTION SELECTED>---ເລອື ກຂໍຄ້ ວາມ--- <OPTION VALUE=1>ຊ່ ຕື ວົ ປ່ ຽນ1 <OPTION VALUE=2>ຊ່ ຕື ວົ ປ່ ຽນ 2 </SELECT> ---???? ? ???? ? ?? --- ແປຄວາມໝາຍ <SELECT>......</SELECT>ຄຄື ໍາສ່ ງັ ເລ່ ມີ ຕນົ້ ປ່ ຸມທາງເລອື ກ <OPTION VALUE=\"....\">ໃຫໃ້ ສ່ ຄ່ າຂອງຕວົ ເລອື ກໃນ Value ແລະໃສ່ ຂໍຄ້ ວາມດາ້ ນນອກ <OPTION SELECTED> ຕງັ້ ຄ່ າວ່ າຄໍາສ່ ງັ ນຄີ້ ທື າງເລອື ກທາໍ ອດິ 74

3. ຕວົ ຢ່ າງການປະຍຸກ Form ມາໃຊງ້ ານ <form name=\"register\" action=\"reg_setup.php\" method=\"post\"> ຊ່ :ື <input type=\"text\" name=\"firstname\" size=13> ນາມສະກຸນ: <input type=\"text\" name=\"surname\" size=13> Email: <input type=\"text\" name=\"email\" size=13> ເພດ: <input type=\"radio\" name=\"sex\" value=\"male\">male <input type=\"radio\" name=\"sex\" value=\"female\">female ລາຍໄດ:້ <select name=\"salary\"><option selected>ບ່ ໍມລີ າຍໄດ<້ /option><option value=\"5000\">5000 ກບີ </option><option value=\">5000\">ຫາຼ ຍກວ່ າ 5000 ກບີ </option></select> <input name=\"register\" type=\"submit\" value=\"ລງົ ທະບຽນ\"><input name=\"reset\" type=\"reset\" value=\"ລບົ ຂໍມ້ ນູ \"> </form> ຊ່ ື : : ນາມສະກຸນ : Email: ເພດfemale male ລາຍໄດ:້ ?????? ?? ??? ? ? ? ?? ?? ? ? ? ?? ? 3.15. ຄໍາສ່ ງັ Iframe (HTML Iframe) Iframe ຄື HTML ໂຄດທ່ ໃີ ຊໃ້ ນການດຶງໜາ້ ເວັບບ່ ໍວ່ າຈະເປັນ path url ຈາກເວບັ ໄຊເຮົາ ຫຼື ຈາກເວບັ ໄຊອ່ ນື ມາສະແດງໃນເວບັ ໄຊຂອງເຮາົ ແລະ ສາມາດກາໍ ນດົ ໄດທ້ ງັ ຂະໜາດຂອງຂອບທ່ ຈີ ະສະແດງ ວ່ າ ກວາ້ ງ / ຍາວເທ່ າົ ໃດ ເຊ່ ງິ ບາງບ່ ອນໃຊໃ້ ນການດງຶ ຂ່ າວສານຈາກເວບັ ໄຊອ່ ນື ມາສະແດງທ່ ເີ ວບັ ໄຊຕວົ ເອງ ຂໍດ້ ຂີ ອງ iframe ຄຊື ່ ວຍແບ່ ງການໂຫດຼ ໜາ້ ເວບັ ອອກເປນັ ສ່ ວນໆ ເຮດັ ໃຫຫ້ ຸດຼ ຜ່ ອນການໂຫດຼ ໜາ້ ເວບັ ຫກຼັ ຂອງເຮາົ ເຮດັ ໃຫເ້ ບ່ ງິ ຄວື ່ າເວບັ ໂຫດຼ ໄວຂນຶ້ ນອກຈາກນີ້ ຍງັ ສາມາດດງຶ ໜາ້ ເວບັ ອ່ ນື ມາສະແດງທ່ ໜີ າ້ ເວັບໄຊຂອງເຮາົ ໄດດ້ ວ້ ຍ iframe ເຊ່ ນັ ດຽວກນັ ແລະ ຫາກຟາຍຫຼລື ິງ້ ທ່ ເີ ຮາົ ໃສ່ ໄວໃ້ ນ iframe ເກດີ ມີ 75

ປນັ ຫາ error ກ່ ຈໍ ະບ່ ໍສ່ ງົ ຜນົ ກບັ ໜາ້ ເວບັ ຫກຼັ ຂອງເຮາົ ແຕ່ ຈະໄປ error ໃນສ່ ວນຂອງ iframe ແທນ ແລະ ຍງັ ມຂີ ໍດ້ ອີ ່ ນື ໆ ອກີ ສ່ ວນຂໍເ້ ສຍຂອງ iframe ຄບື ່ ໍດຕີ ່ ໍ Robot search ຫງຼັ ຈາກທ່ ເີ ຮາົ ໄດຮ້ ູຂ້ ໍດ້ ີ ແລະ ຂໍເ້ ສຍຂອງ iframe ແລວ້ ຕ່ ໍໄປເຮາົ ມາເບ່ ງິ ວທິ ກີ ານເອນີ້ ໃຊງ້ ານກນັ ເຊ່ ງິ ວທິ ກີ ານໃຊງ້ ານກ່ ງໍ ່າຍໆ ເອາົ ໂຄດ iframe ໄປໄວໃ້ ນ html ສ່ ວນທ່ ເີ ຮາົ ຕອ້ ງການສະແດງຜນົ ໂດຍໂຄດ iframe ສາມາດຂຽນໄດດ້ ່ ງັ ນີ້ <iframe src=\"http://www.siammodify.com\" height=\"600\" width=\"700\" > </iframe> ສໍາລບັ option ຂອງ tag iframe ນຈີ້ ະມໃີ ຫເ້ ລອື ກໃຊຢ້ ່ ູຫາຼ ກຫາຼ ຍ ຢ່ ູມ່ ເີ ຮາົ ຈະໃສ່ ເຂາົ້ ໄປ ໃນທ່ ີ ນຈີ້ ະຊ່ ວຍຂຽນອະທບິ າຍໃຫຮ້ ູ ້ ເທ່ າົ ທ່ ຫີ ກຼັ ໆໄດໃ້ ຊງ້ ານກນັ  src=\"http://www.siammodify.com\" ເປັນ url ຂອງໜາ້ ທ່ ີຕອ້ ງການດຶງມາສະແດງ ໃສ່ ໄດ ້ ທງັ ລງິ້ ພາຍໃນ ແລະ ລງິ້ ພາຍນອກຈາກທ່ ອີ ່ ນື  height=\"600\" ໃນສ່ ວນນຈີ້ ະເປນັ ຄວາມສູງ  width=\"700\" ຄວາມກວາ້ ງຂອງຂອບ iframe ທ່ ເີ ຮາົ ດງຶ ມາສະແດງ  scrolling=\"auto\" ສາມາດໃສ່ (auto | yes | no) ໃນສ່ ວນນຄີ້ ກື ໍານດົ ໃຫຂ້ ອບເຮາົ ມີ Scrollbar ຫບຼື ່ ໍ  class=\"{classname}\" ສາມາດໃສ່ class ແລະ id ໄດເ້ ຊ່ ນັ ກນັ 76

 frameborder=\"1\" ຫຼັກໆສາມາດໃສ່ ໄດ້ (0 | 1 | yes | no) ຫຼື ຕົວເລກ ໃນສ່ ວນນີຈ້ ະເປັນ border ຂອງຂອບ  marginheight=\"\" marginwidth=\"\" ຄໄື ລຍະຫ່ າງຈາກຂອບ  style=\"\" ສາມາດໃສ່ style css ໄດຕ້ າມປົກກະຕິ  bordercolor=\"#CCCCCC\" ໃສ່ ສຂີ ອງເສນັ້ ຂອບ border ຂອງຂອບ iframe  align=\"left\" ຈດັ ຕໍາແໜ່ ງກາງ / ຂວາ / ຊາ້ ຍ 3.16. ແນະນາໍ HTML5 (Introduction to HTML5) HTML5 ຫຼື HTML Version 5 HTML ເປນັ ພາສາ ພາສາໜ່ ງຶ ທ່ ອີ ອກແບບມາສໍາລບັ ໃຫເ້ ຮດັ ວຽກເທງິ ເວບັ ບຣາວເຊໂີ ດຍສະເພາະ, HTML ຫຍມໍ ້ າຈາກ Hypertext Markup Language, HTML5 ມກີ ານພດັ ທະນາຂນຶ້ ມາເລອື້ ຍໆ. ທາໍ ອດິ ນນັ້ ອອກມາເພ່ ອື ສາ້ ງເວບັ ເພຈເປນັ ລກັ ສະນະ Static ຫຼື ເປນັ ເວບັ ເພຈທ່ ມີ ຂີ ໍຄ້ ວາມ, ຮູບພາບ ຫຼື ວດັ ຖຸໃດໆຄງົ ທ່ ,ີ ບ່ ໍມກີ ານປ່ ຽນແປງ, ເມ່ ອື ຕອ້ ງການປ່ ຽນແປງຂໍມ້ ນູ ຈະຕອ້ ງມກີ ານແກໄ້ ຂໜາ້ ເວບັ ເພຈນນັ້ ໆ. ປດັ ຈບຸ ນັ ມກີ ານພດັ ທະນາຮ່ ວມກບັ ພາສາຕ່ າງໆ, ຍອມໃຫພ້ າສາຕ່ າງໆແຊກເຂາົ້ ໄປລະຫວ່ າງແຖວ ໃນຄໍາສ່ ງັ HTML ນນັ້ ໆ ໄດ.້ ດ່ ງັ ນນັ້ ຈ່ ງຶ ມກີ ານຕດິ ຕ່ ກໍ ບັ ຖານຂໍມ້ ນູ ດວ້ ຍພາສາອ່ ນື ໆ ແລວ້ ປະມວນຜນົ ໃຫ ້ ຂໍມ້ ນູ ທ່ ປີ ່ ຽນແປງນນັ້ ມາສະແດງແທນຂໍມ້ ນູ ເກ່ າົ ຈ່ ງຶ ເຮດັ ໃຫເ້ ວບັ ເພຈນນັ້ ເກດີ ຄວາມໜາ້ ສນົ ໃຈຂນຶ້ ມາທນັ ທີ ໃນລກັ ສະນະຂອງການເປນັ ປດັ ຈບຸ ນັ . ພາສາ HTML5 ໃຊເ້ ທກັ ນກິ ທ່ ເີ ອນີ້ ວ່ າ ປາ້ ຍ ຫຼື Tag ແຍກແຕ່ ລະຄໍາສ່ ງັ ຈະມຄີ ໍາສ່ ງັ ຫຼື ປາ້ ຍເປດີ ປດິ ຄ່ ູກນັ (Tag ເປີດ – Tagປດິ ) ເຊ່ ນັ : <html> ເປນັ Tag ເປີດ </html> ເປນັ Tag ປດິ ດ່ ງັ ນນັ້ ໂຄງສາ້ ງພນື້ ຖານຂອງພາສາ HTML5 ຈ່ ງຶ ມດີ ່ ງັ ນີ້ <!DOCTYPE html> <html> <head> <meta charset=\"UTF-8\"> <title>ສະແດງທ່ ີ Title Bar</title> </head> <body> ເນອື ້ ໃນຂອງເວບັ ເພຈຢ່ ູບ່ ອນນ.ີ .້ .... </body> </html> 77

ຂໍພ້ ຈິ າລະນາ <!DOCTYPE html> ໃນສ່ ວນນຈີ້ ະແຕກຕ່ າງຈາກ HTML Version ກ່ ອນໜາ້ ນີ້ ເພາະຈະມຂີ ໍຄ້ ວາມເປນັ ຄໍາ ຫປຼື ະໂຫຍກຍາວ ກວ່ ານີ້ ຕວົ ຢ່ າງ ການຂຽນ ຂຄໍ້ ວາມ Hello World!! ໃນເວບັ ເພຈ <!DOCTYPE html> <html> <head> <meta charset=\"UTF-8\"> <title>ສະບາຍດຊີ າວໂລກ</title> </head> <body> Hello World!!!. </body> </html> 78

ບດົ ທີ 4 ແນະນາໍ ການຕບົ ແຕ່ ງເວບັ ໄຊ ໂດຍນາໍ ໃຊ້ CSS (Introduction to CSS) 4.1. CSS ແມ່ ນຫຍງັ ? (What is CSS?) CSS (Cascading Style Sheets) ເປັນຄໍາສ່ ງັ ທ່ ໃີ ຊໃ້ ນການຈດັ ຮູບແບບເອກະສານເວບັ ເພຈໃນ ລກັ ສະນະຕ່ າງໆເຊ່ ນັ : ສ,ີ ພນື້ ຫງຼັ , ເສນັ້ ຂອບ, ຂະໜາດ, ໂຄງຮ່ າງ ຫຼື ຕວົ ອກັ ສອນ ເປັນຕນົ້ ໂດຍ CSS ຖກື ສາ້ ງມາຄງັ້ ທາໍ ອດິ ເມ່ ອື ປີ 1977 ແລະ ມພີ ດັ ທະນາການມາເລ່ ອື ຍໆຕງັ້ ແຕ່ ເວຊີ ນັ 1, 2 ແລະ ປັດຈບຸ ນັ ຄເື ວຊີ ນັ 3 ຫທຼື ່ ເີ ອນີ້ ກນັ ວ່ າ CSS3 ນນັ້ ເອງ. ເຖງິ ແມ່ ນວ່ າໃນ HTML ນນັ້ ຈະມທີ ງັ ແທກັ ແລະ ແອດັ ທບິ ວິ ບາງສ່ ວນ ທ່ ສີ າມາດໃຊຈ້ ດັ ຮູບແບບເອກະສານຢ່ ູແລວ້ ແຕ່ ຍງັ ບ່ ໍຄວບຄຸມການໃຊງ້ ານຄບົ ທຸກກໍລະນ.ີ ນອກຈາກນກີ້ ່ ຍໍ ງັ ຂາດຄວາມສະຖຽນ ແລະ ບ່ ໍສາມາດຈດັ ຮູບແບບໃນລກັ ສະນະທ່ ຊີ ບັ ຊອ້ ນໄດ ້ ດ່ ງັ ນນັ້ ໃນປັດຈຸບນັ ທາງອງົ ກອນ W3C ແລະ ກ່ ຸມຜູສ້ າ້ ງເວບັ ບຣາວເຊີທຸກລາຍການຈ່ ງຶ ພະຍາຍາມເນນັ້ ໃຫເ້ ຮາົ ໃຊ້ CSS ຈດັ ຮູບແບບ ເວັບເພຈຫຼາຍກວ່ າທ່ ຈີ ະໃຊແ້ ອັດທບິ ິວຂອງພາສາ HTML ດ່ ັງຈະເຫນັ ໄດຈ້ າກໃນ HTML5 ໄດມ້ ກີ ານ ຍກົ ເລກີ ແອດັ ທບິ ວິ ທ່ ກີ ່ ຽວກບັ ການຈດັ ຮູບແບບໄປເກອື ບທງັ ໝດົ ເພ່ ອື ໃຫເ້ ກດີ ການແຍກສ່ ວນກນັ ຢ່ າງຊດັ ເຈນລະຫວ່ າງ HTML ແລະ CSS ຕາມຫກຼັ ການດ່ ງັ ນີ້  HTML ໃຊສ້ ໍາລບັ ຈດັ ໂຄງສາ້ ງຂອງເວບັ ເພຈທງັ ໝດົ  CSS ໃຊສ້ ໍາລບັ ຈດັ ຮູບແບບຂອງເວບັ ເພຈເປນັ ຫກຼັ 4.2. ລກັ ສະນະຄໍາສ່ ງັ CSS (CSS Syntax) ການກາໍ ນດົ ສະຕາຍແບບ Inline ຄກື ານກາໍ ນດົ ຮູບແບບເອາົ ໄວທ້ ່ ແີ ທກັ ເປີດຂອງອເີ ລເມນັ ທ່ ເີ ຮາົ ຕອ້ ງການຈດັ ຮູບແບບໂດຍລະບູໃຫ ້ ເປັນຄ່ າຂອງແອດັ ທບິ ວິ Style ດ່ ງັ ຕວົ ຢ່ າງ ຕວົ ຢ່ າງທ່ ີ 4.1 style-inline.html <!doctype html> <html> <head> <meta charset=\"utf-8\"> <title>Style - Inline</title> </head> <body style=\"font-size: 18px\"> <p style=\"color: red;\">HTML use for manage content in webpage</p> <span style=\"background-color: lightskyblue; font-weight: bold;\"> CSS use for manage format of content in webpage </span> </body> </html> 79

ການກາໍ ນດົ ສະຕາຍແບບ Embedded ສະຕາຍແບບ Embedded ຄກື ານກໍານດົ ສະຕາຍເອົາໄວທ້ ່ ສີ ່ ວນຫວົ ຂອງເອກະສານດວ້ ຍອເິ ລ ເມນັ style ເພ່ ອື ໃຫມ້ ນັ ມຜີ ນົ ກບັ ຫາຼ ຍໆອເີ ລເມນັ ໂດຍບ່ ໍຕອ້ ງກາໍ ນດົ ສະຕາຍຊໍາ້ ຊອ້ ນກນັ ອກີ ດ່ ງັ ຕວົ ຢ່ າງ ຕວົ ຢ່ າງທ່ ີ 4.2 style-embedded.html <!doctype html> <html> <head> <meta charset=\"utf-8\"> <title>Style - Embedded</title> <style> body { font-size: 18px; font-family: 'Phetsarath OT'; } p{ color: red; } span { background-color: lightskyblue; font-weight: bold; } </style> </head> <body> <span>ໃນ HTML5 ການດົ ໃຫແ້ ຍກສ່ ວນລະຫວ່ າງ HTML ແລະ CSS ດ່ ງັ ນ<ີ້ /span> <p>HTML ໃຊສ້ ໍາລບັ ຈດັ ໂຄງສາ້ ງຂອງເວບັ ເພຈທງັ ໝດົ </p> <span>CSS ໃຊສ້ ໍາລບັ ຈດັ ຮູບແບບຂອງເວບັ ເພຈເປນັ ຫກຼັ </span> </body> </html> ການກາໍ ນດົ ສະຕາຍແບບພາຍນອກ External ສະຕາຍແບບ External ຄກື ານແຍກສ່ ວນສະຕາຍອອກໄປໄວທ້ ່ ຟີ າຍພາຍນອກຕ່ າງຫາກ ເມ່ ອື ຕອ້ ງການໃຊງ້ ານທ່ ເີ ພຈໃດຈ່ ງຶ ຈະເຊ່ ອື ມໂຍງກບັ ຟາຍນນັ້ ໃນສ່ ວນຂອງແທກັ <head> ຂອງ HTML ເຊ່ ນັ <head> <title> Home </title> <link rel= “stylesheet” href= “style.css”> </head> ຈາກຄາໍ ສ່ ງັ HTML ຂາ້ ງຕນົ້ ຟາຍຂອງ CSS ພາຍນອກຊ່ ື style.css ຫານເອນີ້ ໃຊໃ້ ນລກັ ສະນະ ດ່ ງັ ກ່ າວເຮາົ ຈະຕອ້ ງນໍາຟາຍ style.css ໄວໃ້ ນໂຟນເດດີ ຽວກນັ ກບັ HTML 80

4.3. id ແລະ class (CSS id & class Selector) 1. Type Selector Type Selector ເປັນການນໍາຊະນດິ ຂອງອເີ ລເມນັ ມາກໍານດົ ເປັນຊເີ ລກັ ເຕີ ເຮດັ ໃຫສ້ ະຕາຍທ່ ເີ ຮາົ ກາໍ ນດົ ມຜີ ນົ ກບັ ອເີ ລເມນັ ຊະນດິ ນນັ້ ທຸກໂຕທ່ ຢີ ່ ູໃນເພຈດ່ ງັ ຕວົ ຢ່ າງ ຕວົ ຢ່ າງທ່ ີ 4.3 type-selector.html <!doctype html> <html> <head> <meta charset=\"utf-8\"> <title>Type Selector</title> <style> body { font-family: 'Phetsarath OT'; } p{ color: blue; } div { color: red; background-color: lightskyblue; } span { font-size: 18px; font-weight: bold; } </style> </head> <body> <p>ວທິ ະຍາໄລຄູຫວຼ ງພະບາງ</p> <div>ຂະແໜງວທິ ະຍາສາດທໍາມະຊາດ</div> <span>ຂະແໜງພາສາຕ່ າງປະເທດ</span> <div>ຂະແໜງປະຖມົ - ອະນບຸ ານ</div> <p>ຂະແໜງວທິ ະຍາສາດສງັ ຄມົ </p> </body> </html> 2. ID Selector ແອດັ ທບິ ວິ id ໃຊສ້ ໍາລບັ ກາໍ ນດົ ເປນັ ຊ່ ອື າ້ ງອງີ ສໍາລບັ ອີເລເມນັ ໂຕນນັ້ ເຊ່ ນັ : <div id= “title”> ຫຼື <p id= “warning”> ເປັນຕົນ້ ເຮົາສາມາດນໍາແອັດທບິ ວິ id ໄປກໍານດົ ກບັ ອິເລເ◌ັມນໄດເ້ ກອື ບທຸກ ຊະນດິ ທງັ ນພີ້ າຍໃນເວບັ ເພຈດຽວກນັ ຕອ້ ງບ່ ໍກາໍ ນດົ ຄ່ າ id ຊໍາ້ ກນັ ຫຼື ແຕ່ ລະອເີ ລເມນັ ຈະມຄີ ່ າ id ເປັນຂອງ ຕວົ ເອງນນັ້ ເອງແລະ ຈາກການທ່ ຄີ ່ າ id ເປນັ ຕວົ ອາ້ ງອງີ ຂອງແຕ່ ລະອເີ ລເມນັ ເຮາົ ຈ່ ງຶ ສາມາດນໍາມາກາໍ ນດົ ເປນັ 81

ຊີເລກັ ເຕອີ ກີ ແບບໜ່ ງຶ ເຮາົ ຕອ້ ງຂຽນເຄ່ ອື ງໝາຍ # ໄວທ້ ່ ໜີ າ້ id ສະເໝີ ເພ່ ອື ແຍກຄວາມແຕກຕ່ າງຈາກຊີ ເລກັ ເຕຊີ ະນດິ ອ່ ນື ໆ ດ່ ງັ ຕວົ ຢ່ າງ ຕວົ ຢ່ າງທ່ ີ 4.4 id-selector.html <!doctype html> <html> <head> <meta charset=\"utf-8\"> <title>ID Selector</title> <style> body { font-family: 'Phetsarath OT'; } #dv1 { color: red; background-color: lightgrey; } #dv2 { color: blue; } </style> </head> <body> <div>ຫອ້ ງການວດັ ປະເມນີ ຜນົ </div> <div id=\"dv1\">ຫອ້ ງການວຊິ າການ</div> <div id=\"dv2\">ຫອ້ ງການພດັ ທະນາຄູ</div> </body> </html> 3. Class Selector ຂໍກ້ ໍານດົ ສໍາຄັນຂອງ Class Selector ຄືຈະຕອ້ ງມເີ ຄ່ ອື ງໝາຍຈໍາ້ ( . ) ໄວໜ້ າ້ ຊ່ ື class ແລະ ຫາ້ ມມຊີ ່ ອງຫວ່ າງລະຫວ່ າງຈາໍ້ ແລະ ຊ່ ື class ດ່ ງັ ຕວົ ຢ່ າງ 82

ຕວົ ຢ່ າງທ່ ີ 4.5 class-selector.html <!doctype html> <html> <head> <meta charset=\"utf-8\"> <title>Class Selector</title> <style> body { font-family: 'Phetsarath OT'; } .blue-text { color: blue; } .red-text { color: red; } .highlight { background-color: lightskyblue; } </style> </head> <body> <p class=\"blue-text\">ຂະແໜງວທິ ະຍາສາດທໍາມະຊາດ</p> <div>ຄູຄະນດິ ສາດ</div> <div class=\"highlight\">ຄູຟຊີ ກິ ສາດ</div> <div class=\"red-text\">ຄູເຄມສີ າດສາດ</div> <div class=\"highlight\">ຄູໄອຊທີ <ີ /div> </body> </html> 4. Union Selector ເປັນການນໍາເອາົ ຊີເລັກເຕຫີ ຼາຍໆ ຮູບແບບມາໃຊສ້ ະຕາຍຮ່ ວມກນັ ຊີເລັກເຕທີ ່ ນີ ໍາມາໃຊອ້ າດຈະ ເປັນຊະນດິ ດຽວກນັ ຫຼື ຕ່ າງຊະນດິ ກນັ ກ່ ໄໍ ດ້ ໂດຍຂນັ້ ແຕ່ ລະຊເີ ລກັ ເຕດີ ວ້ ຍເຄ່ ອື ງໝາຍຈດຸ ( , ) ດ່ ງັ ຕວົ ຢ່ າງ 83

ຕວົ ຢ່ າງທ່ ີ 4.6 union-selector.html <!doctype html> <html> <head> <meta charset=\"utf-8\"> <title>Union Selector</title> <style> body { font-family: 'Phetsarath OT'; } div, p, span { font-size: 18px; } .blue-bold, #first-line { color: blue; font-weight: bold; } </style> </head> <body> <p id=\"first-line\">ຂະແໜງວທິ ະຍາສາດສງັ ຄມົ </p> <div>ຄູພາສາລາວ - ວນັ ນະຄະດ<ີ /div> <span>ຄູປະຫວດັ ສາດ</span> <div class=\"blue-bold\">ຄູວທິ ະຍາສາດການເມອື ງ</div> </body> </html> 4.4. ຕວົ ຢ່ າງການສາ້ ງ CSS (CSS Examples) ການຈດັ ຮູບແບບຂຄໍ້ ວາມດວ້ ຍ CSS ການຈດັ ຮູບແບບຂໍຄ້ ວາມເຊ່ ນັ : ເປັນຕວົ ໜາ, ຕວົ ເນງີ້ , ຂດີ ເສນັ້ ກອ້ ງຂໍຄ້ ວາມ, ສຂີ ໍຄ້ ວາມ ເປນັ ຕນົ້ ສາມາດໃຊ້ CSS ໄດດ້ ່ ງັ ຕວົ ຢ່ າງຕ່ ໍໄປນີ້ 84

ຕວົ ຢ່ າງທ່ ີ 4.7 text-decoration.html <!doctype html> <html> <head> <meta charset=\"utf-8\"> <title>color, text-decoration</title> <style> body { font-family: 'Phetsarath OT'; } p, span { font-size: 20px; } #p1 { text-decoration: overline; font-style: italic; } #p2 { text-decoration: underline; font-weight: bold; } #p3 { text-decoration: line-through; font-family: 'LaoHeritage'; } </style> </head> <body> <p id=\"p1\"> ປບັ ແຕ່ ງຂໍຄ້ ວາມດວ້ ຍ: <span style=\"color: brown;\">overline</span> </p> <p id=\"p2\"> ປບັ ແຕ່ ງຂໍຄ້ ວາມດວ້ ຍ: <span style=\"color: rgb(0, 128, 255)\">underline</span> </p> <p id=\"p3\"> ປບັ ແຕ່ ງຂໍຄ້ ວາມດວ້ ຍ: <span style=\"color: #f30;\">line-through</span> </p> </body> </html> 85

ບດົ ທີ 5 ແນະນາໍ ພາສາ JavaScript (Introduction to JavaScript) 5.1. JavaScript ແມ່ ນຫຍງັ ? (What is JavaScript?) JavaScript ເປັນພາສາຍຸກໃໝ່ ສໍາລບັ ການຂຽນໂປຣແກຣມເທງິ ລະບບົ ອນິ ເຕເີ ນດັ ທ່ ກີ ໍາລງັ ໄດຮ້ ບັ ຄວາມນຍິ ມົ ຢ່ າງສູງ, ເຮາົ ສາມາດຂຽນໂປຣແກຣມ JavaScript ເພ່ ມີ ເຂາົ້ ໄປໃນເວບັ ເພຈເພ່ ອື ໃຊປ້ ະໂຫຍດ ສໍາລບັ ວຽກງານດາ້ ນຕ່ າງ ໆ ທງັ ການຄດິ ໄລ່ , ການສະແດງຜນົ , ການຮບັ -ສ່ ງົ ຂໍມ້ ູນ ແລະ ທ່ ສີ ໍາຄນັ ຄື ສາມາດ ໂຕຕ້ ອບກບັ ຜູໃ້ ຊໄ້ ດຢ້ ່ າງທນັ ທທີ ນັ ໃດ. ນອກຈາກນຍີ້ ງັ ມຄີ ວາມສາມາດດາ້ ນອ່ ນື ໆ ອກີ ຫາຼ ຍປະການທ່ ຊີ ່ ວຍ ສາ້ ງຄວາມໜາ້ ສົນໃຈໃຫກ້ ບັ ເວັບເພຈຂອງເຮົາໄດຢ້ ່ າງຫຼາຍ, ພາສາ JavaScript ຖືກພັດທະນາໂດຍ Netscape Communications Corporation ໂ ດ ຍ ໃ ຊ້ຊ່ ື ວ່ າ Live Script ອ ອ ກ ມ າ ພ້ອ ມ ກັບ Netscape Navigator 2.0 ເ ພ່ ືອ ໃ ຊ ້ສ້າ ງ ເ ວັບ ເ ພຈ ໂ ດ ຍ ຕິດ ຕ່ ໍກັບ ເ ຊີເ ວີແ ບ ບ Live Wire ຕ່ ໍ ມ າ Netscape ຈ່ ຶງໄດ ຮ້ ່ ວມມືກັບບໍລິສັດ ຊັນໄມໂ ຄຣຊິດເຕັມ (Sun Microsystem) ປັບ ປຸ ງລະບົບ ຂອງບຣາວເຊເີ ພ່ ອື ໃຫສ້ າມາດຕດິ ຕ່ ໃໍ ຊງ້ ານກບັ ຈາວາໄດ້ ແລະ ປັບປຸງ Live Script ໃໝ່ ເມ່ ອື ປີ 1995 ແລວ້ ຕງັ້ ຊ່ ໃື ໝ່ ວ່ າ JavaScript. 5.2. ລກັ ສະນະຄາໍ ສ່ ງັ JavaScript (JavaScript Syntax) ການປະກາດຕວົ ປ່ ຽນໃນ JavaScript ມີ 3 ຮູບແບບແບ່ ງຕາມຂອບເຂດການໃຊງ້ ານຄ:ື 1) ຕວົ ປ່ ຽນທ່ ໃີ ຊຮ້ ່ ວມກນັ (Global Variable) ຈະປະກາດດວ້ ຍປະໂຫຍກ var ແລະ ວາງຢ່ ູນອກ ຟງັ ຊ່ ນັ , ຕວົ ປ່ ຽນທ່ ປີ ະກາດແບບນຈີ້ ະໃຊໄ້ ດຕ້ ະຫອຼ ດທງັ ເອກະສານ. 2) ຕວົ ປ່ ຽນໃຊສ້ ະເພາະໃນຟງັ ຊ່ ນັ (Local Variable) ຈະໃຊ້ var ຫບຼື ່ ໍກ່ ໍໄດ ້ ໂດຍຕວົ ປ່ ຽນນຈີ້ ະໃຊ ້ ງານໄດຕ້ ງັ້ ແຕ່ ແຖວທ່ ຕີ ວົ ປ່ ຽນຖກື ປະກາດໃຊ ້ ຈນົ ເຖງິ ປດິ } ໂດຍຈະໃຊໄ້ ດສ້ ະເພາະໃນຟງັ ຊ່ ນັ ນນັ້ ໆ ເທ່ າົ ນນັ້ . 3) ຕວົ ປ່ ຽນທ່ ເີ ປນັ ພາຣາມເິ ຕຂີ ອງຟງັ ຊ່ ນັ (Parameter Variable) ຂອບເຂດສາມາດອາ້ ງອງີ ເຖງິ ໄດ້ ຕງັ້ ແຕ່ ເປດີ ປີກກາ { ຂອງຟງັ ຊ່ ນັ ຈນົ ເຖງິ ປດິ } 86

//global_var ເປນັ ຕວົ ປ່ ຽນຊະນດິ global ສາມາດໃຊໄ້ ດທ້ ງັ ເອກະສານ var global_var=20; // a ແລະ b ເປນັ function parameter ສາມາດໃຊໃ້ ນຟງັ ຊ່ ນັ ເທ່ າົ ນນັ້ function funcX(a , b){ // resultX ເປນັ local variable ໃຊໄ້ ດສ້ ະເພາະໃນຟງັ ຊ່ ນັ funcX ເທ່ າົ ນນັ້ var resultX = (a + b) * global_var; return resultY; } function funcY(c , d){ var resultY= (c * d) * global_var; return resultY; } ສ່ ວນຮູບແບບການຂຽນມກີ ດົ ກະຕກິ າເລກັ ນອ້ ຍດ່ ງັ ນີ້  ຊ່ ຕື ວົ ປ່ ຽນທ່ ໃີ ຊຫ້ າ້ ມມສີ ນັ ຍາລກັ ພເິ ສດ ຫຼື ຊ່ ອງຫວ່ າງ  ການໃຊຕ້ ວົ ອກັ ສອນໃນຊ່ ຕື ວົ ປ່ ຽນ, ຕວົ ພມິ ນອ້ ຍກບັ ຕວົ ພມິ ໃຫຍ່ ຖເື ປັນຕວົ ປ່ ຽນຄນົ ລະຕວົ ກນັ (Case Sensitive) ເຊ່ ນັ : firstname ກບັ firstName ຖເື ປັນຄນົ ລະຕວົ ກນັ .  ເນ່ ອື ງຈາກ JavaScript ເປັນພາສາທ່ ບີ ່ ໍມຕີ ວົ ລະບຸ ຊະນດິ ຂອງຂໍມ້ ູນ (Un-Type) ດ່ ງັ ນນັ້ ຊະນດິ ຂອງຂໍມ້ ນູ ຈະຂນຶ້ ຢ່ ູກບັ ຄ່ າທ່ ກີ າໍ ນດົ ໃຫໃ້ ນຝ່ ງັ ຂວາມຂື ອງເຄ່ ອື ງໝາຍ = ເຊ່ ນັ : var x=20; //ຕອນນີ້ x ເປັນຂໍມ້ ູນຊະນດິ ຕວົ ເລກ (integer) var x=3.414; //ຕອນນີ້ x ເປນັ ຂໍມ້ ູນຊະນດິ ທດົ ສະນຍິ ມົ (float) var x=’A’, y=”b”; //ຕອນນີ້ x ແລະ y ເປັນຂໍມ້ ນູ ຊະນດິ ຕວົ ອກັ ສອນ (String)  ຕວົ ປ່ ຽນທ່ ປີ ະກາດໄວໂ້ ດຍບ່ ໍມກີ ານກໍານດົ ຄ່ າ ຈະມຄີ ່ າເປັນ undefined  ເມ່ ອື ຈບົ ຄໍາສ່ ງັ ການເຮດັ ວຽກຕອ້ ງປດິ ດວ້ ຍເຄ່ ອື ງໝາຍ ; (Semi Colon) ສະເໝີ  ການຄອມເມນັ້ ໃຊເ້ ໝອື ນ C ກບັ Java ຄື // ສໍາລບັ ແຖວດຽວ /* ... */ ສໍາລບັ ຫາຼ ຍແຖວ ສນັ ຍາລກັ ທາງຄະນດິ ສາດ ແລະ ອ່ ນື ໆ +, -, *, /, % ບວກ, ລບົ , ຄູນ, ຫານ, ຫານເອາົ ເສດສ່ ວນ >, <, >=, <= ຫາຼ ຍກວ່ າ, ນອ້ ຍກວ່ າ, ຫາຼ ຍກວ່ າຫເຼື ທ່ າົ ກບັ , ນອ້ ຍກວ່ າຫເຼື ທ່ າົ ກບັ ==, === ເທ່ າົ ກນັ ແບບບ່ ໍສນົ ຊະນດິ , ເທ່ າົ ກນັ ແບບເບ່ ງິ ຊະນດິ ເຊ່ ນັ : 1 == “1” ຈະໄດ້ true !=, !=== ແຕ່ ຖາ້ 1 === “1” ຈະໄດ້ false ບ່ ໍເທ່ າົ ກບັ ແບບບ່ ໍສນົ ຊະນດິ , ບ່ ໍເທ່ າົ ກບັ ແບບເບ່ ງິ ຊະນດິ 87

&&, || ການເຊ່ ອື ມສມົ ຜນົ ເຂາົ້ ກນັ ແບບ AND ແລະ OR ++, -- ເພ່ ມີ ຂນຶ້ ເທ່ ອື ລະ 1, ຫຸດຼ ລງົ ເທ່ ອື ລະ 1 ເງ່ອື ນໄຂ ແລະ ການວນົ ຮອບ if / else, else if ການກວດສອບດວ້ ຍສມົ ຜນົ ທ່ ໃີ ຫຜ້ ນົ ຮບັ true, false ເຊ່ ນັ : var inp=prompt(\"ກະລຸນາໃສ່ ອາຍຸຂອງທ່ ານ\"); if(age > 18){ // ເຂາົ້ ສ່ ູໜາ້ ຫກຼັ }else{ // ແຈງ້ ບ່ ໍສາມາດໃຫເ້ ຂາົ້ ໄດ້ } switch ການກວດສອບແບບຫາຼ ຍເງ່ອື ນໄຂພອ້ ມ ໆ ກນັ switch(inp){ case 'a': alert(\"A\"); break; case 'b': alert(\"B\"); break; case 'c': alert(\"C\"); break; default : alert(\"Invalid\"); break; } for loop ການວນົ ຮອບແບບຮູຈ້ ດຸ ສນິ້ ສຸດ ມກັ ໃຊກ້ ບັ array var ar[]=[1,2,3,4,5]; for(var i=0;i<ar.length;i++){ console.log(ar[i]); } ຫຼື for(i in ar){ console.log(ar[i]); } 88

while, do/while loop ໃຊວ້ ົນຮອບແບບບ່ ໍຈາໍ ເປັນຕອ້ ງຮູຈ້ ດຸ ສນິ້ ສຸດເຊ່ ນັ : ການວນົ ຮອບໂດຍ ໃຫຜ້ ູໃ້ ຊຕ້ ດັ ສນິ ໃຈອອກເອງ var inp = \"a\"; // ຢຸ ດເມ່ ອື ຜູໃ້ ຊໃ້ ສ່ ຄ່ າເປັນ e while(inp != \"e\"){ inp = prompt(\"ໃສ່ ຄໍາສ່ ງັ \"); } var inp=\"\"; do{ inp = prompt(\"ໃສ່ ຄໍາສ່ ງັ \"); }while(inp!='e'); ຟງັ ຊ່ ນັ ແລະ ຕວົ ປ່ ຽນຂອງພາສາ JavaScript ມຟີ ງັ ຊ່ ນັ ແລະ ຕວົ ປ່ ຽນຂອງຕວົ ພາສາມາໃຫໃ້ ຊຫ້ າຼ ກຫາຼ ຍ (Predefined Object and Function) ເພ່ ອື ເພ່ ມີ ຄວາມສະດວກໃຫກ້ ບັ ນກັ ພດັ ທະນາ ເຊ່ ງິ ຕອນຫຼງັ ຍງັ ຄງົ ມເີ ພ່ ມີ ເຕມີ ມາຢ່ າງຕ່ ໍ ເນ່ ອື ງເພ່ ອື ຮອງຮບັ ການເຮດັ ວຽກຮ່ ວມກບັ HTML5 ແລະ CSS3 ໃນທ່ ນີ ຈີ້ ະຂໍສະຫຸບຼ ເອາົ ສະເພາະທ່ ໄີ ດໃ້ ຊ້ ງານເປັນປະຈາໍ ມາໃຫເ້ ບ່ ງິ . ການໃຊງ້ ານ Object ແລະ Array Math ຟງັ ຊ່ ນັ : abs, acos, asin, atan, atan2, ceil, cos, exp, floor, log, max, min, pow, random, round, sin, sqrt, tan ຄ່ າຄງົ ທ່ :ີ E, LN10, LN2, LOG10E, PI, SQRT1_2, SQRT2 String charAt, indexOf, lastIndexOf, substring, toLoveCase, toUpperCase ຟງັ ຊ່ ນັ : RegExp match, replace, search, split ຟງັ ຊ່ ນັ : 89

ການປະກາດຟງັ ຊ່ ນັ ແລະ ການຕດິ ຕງັ້ ການປະກາດຟງັ ຊ່ ນັ ແລະ ນາໍ ໄປໃຊງ້ ານສາມາດເຮດັ ໄດຫ້ າຼ ຍວທິ ດີ ່ ງັ ນ:ີ້ //ການປະກາດແບບປກົ ກະຕິ function func1(){ // ການເຮດັ ວຽກ } //ການປະກາດແບບໂຍນໃຫຕ້ ວົ ປ່ ຽນ ຜ່ ານ Anonymous function (ຟງັ ຊ່ ນັ ບ່ ໍມຊີ ່ )ື var func2 = function(){ // ການເຮດັ ວຽກ }; //ການປະກາດໂດຍໂຍນຟງັ ຊ່ ນັ ໃຫກ້ ບັ ຕວົ ແປ function square(x) { return x*x; } var f=square; //** ຫາ້ ມໃສ່ ( ) ຫງຼັ ຊ່ ຟື ງັ ຊ່ ນັ ທ່ ໂີ ຍນ f(5); // ໄດຄ້ ່ າເປນັ 25 5.3. ຕວົ ຢ່ າງການນາໍ ໃຊ ້ JavaScript (JavaScript Examples)  ໜາ້ ຕ່ າງເຕອື ນເມ່ ອື ຄກິ ເທງິ ປ່ ຸມ <form> <input type=\"button\" value=\"message\" onClick=\"alert('this is the message'); return true\"> </form> ທດົ ລອງນາໍ ໄປໃຊປ້ ່ ຸ ມ Tag ອ່ ນື ໆ ຂອງ Form ເຊ່ ນັ : ຕວົ ຢ່ າງການປະຍຸກໃຊກ້ ບັ Radio Button <FORM> <p>HTML ເປນັ ຄໍາຫຍຂໍ້ ອງຫຍງັ ? <p> 1: <INPUT TYPE=\"radio\" NAME=\"radio\" value=\"ເກ່ ງັ ຫາຼ ຍ\" onClick=\"alert(value)\"> HyperText Markup Language <br> 90

2: <INPUT TYPE=\"radio\" NAME=\"radio\" value=\"ແນ່ ໃຈບ່ ວໍ ່ າຖກື ຕອ້ ງ ລອງ ເບ່ ງິ ໃໝ່ ອກີ ຄງັ້ \" onClick=\"alert(value)\"> HyperText Making Language <br> 3: <INPUT TYPE=\"radio\" NAME=\"radio\" value=\"ແນ່ ໃຈບ່ ໍວ່ າຖກື ຕອ້ ງ ລອງ ເບ່ ງິ ໃໝ່ ອກີ ຄງັ້ \" onClick=\"alert(value)\"> HyperText Marking Learning </FORM> ຕວົ ຢ່ າງການປະຍຸກໃຊກ້ ບັ Button <form> <p><font face=\"MS Sans Serif, Microsoft Sans Serif\" size=\"1\">HTML ເປນັ ຄໍາຫຍຂໍ້ ອງຫຍງັ ? </font> <p><font face=\"MS Sans Serif, Microsoft Sans Serif\" size=\"1\"> 1: <input type=\"button\" name=\"button\" value=\"HyperText Markup Language \" onClick=\"alert('ເກ່ ງັ ຫາຼ ຍ'); return true\"> </font> <p><font face=\"MS Sans Serif, Microsoft Sans Serif\" size=\"1\">2: <input type=\"button\" name=\"button\" value=\"HyperText Making Language \" onClick=\"alert('ລອງເບ່ ງິ ໃໝ່ ອກີ ຄງັ້ '); return true\"> </font> <p><font face=\"MS Sans Serif, Microsoft Sans Serif\" size=\"1\">3: <input type=\"button\" name=\"button\" value=\"HyperText Marking Learning \" onClick=\"alert('ຜດິ ແລວ້ '); return true\"> </font> </form>  ໜາ້ ຕ່ າງເຕອື ນກ່ ອນປດິ ໜາ້ ເວບັ ເຄຍີ ເຫນັ ບ່ ໍ ບາງເວບັ ພຄໍ ກິ ປິດ ຈະມໜີ າ້ ຕ່ າງນອ້ ຍ ໆ ສະແດງຂຄໍ້ ວາມບອກລາເຊ່ ນັ : “ຂອບໃຈທ່ ີ ຢຽ້ ມຊມົ ຢ່ າລມື ກບັ ມາຢຽ້ ມຊມົ ອກີ ຄງັ້ ” ບ່ ໍຍາກເລຍີ ພຽງແຕ່ ເອາົ ລະຫດັ ຄໍາສ່ ງັ ໄປເຕມີ ໃສ່ ໃນສ່ ວນຂອງແທກັ body ດ່ ງັ ນ:ີ້ <body onUnload=\"window.alert('ບ່ ອນນໃີ້ ສ່ ຂໍຄ້ ວາມເອງ')\"> 91

 ປ່ ຽນຮູບຮ່ າງຂອງເມາົ້ ເບ່ ອື ຮູບຮ່ າງຂອງເມາົ້ ບ່ ໍ, ບ່ ຍໍ າກເລຍີ ມາລອງປ່ ຽນພອ້ ມກນັ <a href=\"ຟາຍລງິ້ \" style=\"cursor:hand\">ຂໍຄ້ ວາມ</a> ປ່ ຽນລາຍການທ່ ສີ ະແດງຕາມຮູບແບບດ່ ງັ ຕ່ ໍໄປນີ້ style=\"cursor:hand\" style=\"cursor:crosshair\" style=\"cursor:text\" style=\"cursor:wait\" style=\"cursor:e-resize\" style=\"cursor:help\" style=\"cursor:move\"  ປ່ ຸມຄວບຄຸມເດນີ ໜາ້ , ຖອຍຫງຼັ ໜາ້ ເວບັ ໄຊແບບ Presentation ຄງົ ຢາກຈະໄດປ້ ່ ຸມ Back ແລະ ປ່ ຸມ Next ແມ່ ນບ່ ໍ ບ່ ຍໍ າກເລຍີ ເຮາົ ມາລອງເຮດັ ນາໍ ກນັ ເລຍີ <FORM> //ລະຫດັ ສາລບັ ປ່ ຸມ Back <INPUT TYPE=\"button\" VALUE=\" BACK \" onClick=\"history.go(-1)\"> //ລະຫດັ ສາລບັ ປ່ ຸມ Next <INPUT TYPE=\"button\" VALUE=\"FORWARD\" onCLick=\"history.go(1)\"> </FORM> 92

ບດົ ທີ 6 ແນະນາໍ ພາສາ PHP ແລະ ການເຊ່ ອື ມຕ່ ຖໍ ານຂໍມ້ ນູ MySQL (Introduction to PHP and MySQL Connect) 6.1. PHPແມ່ ນຫຍງັ ? (What is PHP?) PHP ຫຍມໍ ້ າຈາກ PHP Hypertext Preprocessor ແຕ່ ເດມີ ຫຍໍມ້ າຈາກ Personal Home Page Tools, PHP ຄພື າສາຄອມພວິ ເຕຈີ າໍ ພວກ Scripting Language ພາສາຈາໍ ພວກນຄີ້ ໍາ ສ່ ງັ ຕ່ າງໆ ຈະເກບັ ຢ່ ູໃນຟາຍທ່ ເີ ອນີ້ ວ່ າ Script ແລະ ເວລາໃຊງ້ ານຕອ້ ງອາໄສຕວົ ປ່ ຽນຊຸດຄໍາສ່ ງັ , ຕວົ ຢ່ າງ ຂອງພາສາສະຄຣບິ ກ່ ເໍ ຊ່ ນັ : JavaScript, Perl ເປນັ ຕນົ້ ລກັ ສະນະຂອງ PHP ທ່ ແີ ຕກຕ່ າງຈາກພາສາ ສະຄຣບິ ແບບອ່ ນື ໆຄື PHP ໄດຮ້ ບັ ການພດັ ທະນາ ແລະ ອອກແບບມາ ເພ່ ອື ໃຊງ້ ານໃນການສາ້ ງເອກະສານ ແບບ HTML ໂດຍສາມາດສອດແຊກ ຫແຼື ກໄ້ ຂເນອື້ ໃນໄດໂ້ ດຍອດັ ຕະໂນມດັ . ດ່ ງັ ນນັ້ ຈ່ ງຶ ເວາົ້ ໄດວ້ ່ າ PHP ເປນັ ພາສາທ່ ເີ ອນີ້ ວ່ າ server-side ຫຼື HTML-embedded scripting language ນນັ້ ກ່ ຄໍ ື ໃນທຸກໆ ຄງັ້ ກ່ ອນທ່ ເີ ຄ່ ອື ງຄອມພວິ ເຕເີ ຊ່ ງິ ໃຫບ້ ໍລກິ ານເປນັ Web server ຈະສ່ ງົ ໜາ້ ເພຈທ່ ຂີ ຽນດວ້ ຍ PHP ໃຫເ້ ຮາົ ມນັ ຈະເຮດັ ການປະມວນຜນົ ຕາມຄໍາສ່ ງັ ທ່ ມີ ຢີ ່ ູໃຫສ້ ໍາເລດັ ເສຍກ່ ອນ ແລວ້ ຄ່ ອຍສ່ ງົ ຜນົ ຮບັ ທ່ ໄີ ດໃ້ ຫເ້ ຮາົ , ຜນົ ຮບັ ທ່ ໄີ ດນ້ ນັ້ ກ່ ຄໍ ເື ວບັ ເພຈທ່ ເີ ຮາົ ເຫນັ ນນັ້ ເອງ. ຖໄື ດວ້ ່ າ PHP ເປນັ ເຄ່ ອື ງມທື ່ ສີ ໍາຄນັ ຊະນດິ ໜ່ ງຶ ທ່ ຊີ ່ ວຍໃຫເ້ ຮາົ ສາ້ ງ Dynamic Web pages (ເວບັ ເພຈທ່ ມີ ກີ ານໂຕຕ້ ອບກບັ ຜູໃ້ ຊ)້ ໄດຢ້ ່ າງມປີ ະສດິ ທພິ າບ ແລະ ມລີ ູກ ຫນຼິ້ ຫາຼ ຍຂນຶ້ . PHP ເປັນຜນົ ງານທ່ ເີ ຕບີ ໃຫຍ່ ມາຈາກກ່ ຸມຂອງນກັ ພດັ ທະນາໃນທາງເປດີ ເຜີຍລະຫດັ ຕນົ້ ສະບບັ ຫຼື Open Source ດ່ ງັ ນນັ້ PHP ຈ່ ງຶ ມກີ ານພດັ ທະນາໄປຢ່ າງວ່ ອງໄວ ແລະ ແພ່ ຫາຼ ຍໂດຍສະເພາະຢ່ າງຍ່ ງິ ເມ່ ອື ໃຊງ້ ານຮ່ ວມກບັ Apache Web Server ໃນລະບບົ ປະຕບິ ດັ ການຢ່ າງເຊ່ ນັ : Linux ຫຼື FreeBSD ເປນັ ຕນົ້ . ໃນປດັ ຈບຸ ນັ PHP ສາມາດໃຊງ້ ານຮ່ ວມກບັ Web Server ຫາຼ ຍໆ ໂຕເທງິ ລະບບົ ປະຕບິ ດັ ການ ຢ່ າງເຊ່ ນັ : Windows 7/8/8.1/10 ເປນັ ຕນົ້ . 6.2. ລກັ ສະນະຄໍາສ່ ງັ PHP (PHP Syntax)  Comment ເປນັ ສ່ ວນທ່ ຈີ ່ ງົ ໄວບ້ ່ ໃໍ ຫ ້ PHP ເຮດັ ການປະມວນຜນົ ໃນສ່ ວນນນັ້ ໆ, Comment ຫຼື ຄໍາອະທບິ າຍຂອງ PHP ຈະໃຊດ້ ວ້ ຍເຄ່ ອື ງໝາຍ // ຫຼື /* PHP */ // ໃຊ້ Comment ສາໍ ລບັ 1 ແຖວເທ່ າົ ນນັ້ /* PHP */ ໃຊສ້ ໍາລບັ Comment ທ່ ຫີ າຼ ຍກວ່ າ 1 ແຖວ ຕວົ ຢ່ າງການໃຊງ້ ານ // <? $strName = \"Mr. Virakone Keophommavong\"; $strAddress = \"Luang Prabang\"; $strEmail = \"[email protected]\"; 93

echo $strName; //echo $strAddress; ໂປຣແກຣມຈະບ່ ໍສນົ ໃຈ ແລະ ບ່ ປໍ ະມວນຜນົ ໃນສ່ ວນນີ້ echo $strEmail; ?> ຕວົ ຢ່ າງການໃຊງ້ ານ /* PHP */ <? $strName = \"Mr. Virakone Keophommavong\"; $strAddress = \"Luang Prabang\"; $strEmail = \"[email protected]\"; echo $strName; /* echo $strAddress; echo $strEmail; ໂປຣແກຣມຈະບ່ ສໍ ນົ ໃຈ ແລະ ບ່ ໍປະມວນຜນົ ໃນສ່ ວນນີ້ */ ?>  PHP Concat String ການລວມ String ດວ້ ຍພາສາ PHP ຈະໃຊເ້ ຄ່ ອື ງໝາຍ (.) (dot) Syntax <? $str1.$str2.str3,...; ?> ຕວົ ຢ່ າງການໃຊງ້ ານ <? $str1 = \"A\"; $str2 = \"B\"; $str3 = \"C\"; $str4 = $str1.$str2.$str3; echo $str4; ?> 94

 PHP Print ເປນັ ຄໍາສ່ ງັ ທ່ ໃີ ຊສ້ ະແດງຄ່ າຂອງຕວົ ປ່ ຽນ ຫຼື ສະແດງຄ່ າຂອງ PHP ສໍາລບັ ຂໍແ້ ຕກຕ່ າງລະຫວ່ າງຄໍາສ່ ງັ Print ກບັ Echo ກ່ ຄໍ ື Echo ສາມາດແຍກເປັນພດົ ຫຼື ຄ່ າຕວົ ປ່ ຽນລງົ ໄປໄດ້ ໂດຍໃຊເ້ ຄ່ ອື ງໝາຍ , ຂນັ້ ໄວ້ Syntax <? print \"string/value\"; ?> ຕວົ ຢ່ າງການໃຊງ້ ານ <? print \"Mr. Virakone Keophommavong<br>\"; $strAddress = \"Luang Prabang\"; print $strAddress.\"<br>\"; $strEmail = \"[email protected]\"; $strMsn = \"[email protected]\"; print \"$strEmail<br>\"; print '$strMsn<br>'; //print \"$strEmail \", $strMsn,\"<br>\"; // print ບ່ ສໍ າມາດໃຊຄ້ ໍາສ່ ງັ ແຍກນພິ ດົ 2 String ໄດ ້ ?>  PHP $$ ເປນັ ການກາໍ ນດົ ຄ່ າຕວົ ປ່ ຽນໃຫເ້ ປນັ ຊ່ ຕື ວົ ປ່ ຽນ ເພ່ ອື ຈະໄດຄ້ ່ າໃໝ່ ທ່ ຕີ ອ້ ງການ Syntax <? $$var = value; ?> ຕວົ ຢ່ າງການໃຊງ້ ານ <? $strScore = 20; $strItem = \"strScore\"; echo $$strItem; ?> 95

Pages:

Luangprabang TTC

web_Development

Like this book? You can publish your book online for free in a few minutes!

Create your own flipbook

TOP SEARCH

business design fashion music health life sports home marketing children

web_Development

Description: web_Development

Read the Text Version

Luangprabang TTC

TOP SEARCH

RELATED PUBLICATIONS