know about HTML

1. ຍ຺ຈ຋ີ 1 ພໄຌຊາຌກໃ ຼ຤ກັຍວິຌຽຉີຽຌັຈ
ວິຌຽຉີຽຌັຈ(Internet) ຦ງໄຠາ຅າກ຃າ຤ໃ າ Inter Connection Network ໝາງຽຊິຄຽ຃ວຂໃ າງ຃ວຠພິ຤ຽຉີ຋ີໃ ຠີ
ກາຌ
ຽຆໃ ວຠ຿ງຄກັຌ຋຺ໃ ຤຿ຣກ ຿ຈງຠີຣັກລະຌະ຃ກັຍເງ຾ຠຄຠຸຠ
ກາຌຽຨັຈ຤ຼກຂວຄຣະຍ຺ຍຽ຃ວຂໃ າງວິຌຽຉີຽຌັຈ຅ະຠີ ຿ຎຢ຿ຉ຃ວຣ(Protocol) ຽຆິໃ ຄຽຎັຌຣະຍຼຍ ຦ົ຤ິ຋ີກາຌລໃ ລາຌ
຋ີໃ ຽຎັຌ
ຠາຈຉະຊາຌຂວຄກາຌຽຆໃ ວຠຉໃ , ຠາຈຉະຊາຌຈັໃ ຄກໃ າ຤ຽວີໄຌ຤ໃ າ TCT/IP (Transmission Control Protocol/
Internet Protocol) ຿ຈງ຃ວຠພິ຤ຽຉີ຋ຸກໜໃ ຤ງ຋ີໃ ຽຆໃ ວຠຉໃ ຽຂ຺ໄາກັຍຽ຃ວຂໃ າງວິຌຽຉີຽຌັຈ ຅ະຉໄວຄຠີໝາງຽຣກ
ຎະ຅າຉ຺຤
຦ົ IP address ຽພໃ ວເຆໄວໄາຄວີຄ ຦ົຉິຈຉໃ ກັຍ຃ວຠພິ຤ຽຉີໜໃ ຤ງວໃ ຌເຌຽ຃ວຂໃ າງ.
1.1 ຍັຌຈາ຃າລັຍ຋ີໃ ກໃ ຼ຤ກັຍວິຌຽຉີຽຌັຈ
- ຽ຤ັຍຽພ຅( webpage ): ຾ຠໃ ຌຽວກະລາຌ຋ີໃ ເຆໄເຌກາຌຌາລະຽໜີ ຦ຣ ຽຏີງ຾ພໃ ຂໄຠູຌ ຋ີໃ ຎະກວຍຈໄ຤ງຂໄຠູຌ຾ຍຍ
ລໃ ຎະລ຺ຠ ຽຆັໃ ຌ: ຂໄ຃຤າຠ,ຨູຍພາຍ,ພາຍຽ຃ໃ ວຌແ຦຤,ລຼຄ ຾ຣະ ຤ີຈີ຿ວ ຽຎັຌຉ຺ໄຌ ຿ຈງກາຌຌາລະຽໜີຏໃ າຌຽ຃ວ
ຣະຍ຺ຍຽ຃ວຂໃ າງວິຌຽຉີຽຌັຈ ຽຆິໃ ຄ຾ຉກຉໃ າຄກັຌແຎຉາຠ຅ຸຈຎະລ຺ຄຂວຄ຾ຉໃ ຣະຽ຤ັຍແຆ.
- ຽ຤ັຍແຆ( website ): ກາຌຍໃ ວຌຣ຤ຠຍັຌຈາໜໄາຽ຤ັຍຽພ຅຋ຸກໂໜໄາແ຤ໄຈໄ຤ງກັຌ ເຌຌັໄຌຠີ 1 ໜໄາຊກກາຌ຺ຈເ຦ໄ
ຽຎັຌ ໜໄາ຦ຣັກ ຦ຣ ໜໄາ຋າວິຈ ຦ຣ ຿ຨຠຽພ຅ ຎ຺ກກະຉິ຅ະຉັໄຄຆໃ ຽຎັຌ index .
- ຽ຤ັຍຨັວລຉິຄ( Web hosting ): ຾ຠໃ ຌກາຌຍຣິກາຌຽຌໄວ຋ີໃ ຃຤າຠ຅າຂວຄ຃ວຠພິ຤ຽຉີ຋ີໃ ຽຎັຌ web server
ຽພໃ ວຽກັຍຨັກລາຂໄຠູຌຽ຤ັຍແຆ ຿ຈງ຋຺ໃ ຤ແຎຏູໄຌາເຆໄ຅ະລາຠາຈຂຽຆ຺ໃ າຌາຏູໄເ຦ໄຍຣິກາຌ web hosting.

2. - ລູຌເ຦ໄຍຣິກາຌວິຌຽຉີຽຌັຈ(ISP : Internet Service Provider) : ຾ຠໃ ຌໜໃ ຤ງຄາຌ຋ີໃ ຍຣິກາຌເ຦ໄ຃ວຠພິ຤ຽຉີ
ລໃ ຤ຌຍຸກ຃຺ຌ ຦ຣ ຽ຃ວຂໃ າງ຃ວຠພິ຤ຽຉີຂວຄວ຺ຄກວຌ ຽຆໃ ວຠຉໃ ຽຂ຺ໄາກັຍຣະຍ຺ຍຽ຃ວຂໃ າງວິຌຽຉີຽຌັຈ ຽພໃ ວເ຦ໄລາຠາຈ
ເຆໄວິຌຽຉີຽຌັຈແຈໄ.
- ຆໃ ຿ຈຽຠຌ( Domain name ): ຾ຠໃ ຌຆໃ ຂວຄຽ຤ັຍແຆ ຽຆິໃ ຄຆໃ ຽ຤ັຍແຆ຃ລິໃ ຄ຋ີໃ ລະ຾ຈຄ ຦ຣ ຎະກາຈ຃຤າຠຠີຉ຺຤ຉ຺ຌ
ເຌວິຌຽຉີຽຌັຈ ຽຨັຈເ຦ໄ຃຺ຌ຋຺ໃ ຤ແຎແຈໄຨູໄ຅ັກ ຿ຈງຆໃ ຂວຄຽ຤ັຍແຆ຅ະຍໃ ຆໄາກັຌ ຽຆັໃ ຌ www.moe.gov.la ຽຎັຌຉ຺ໄຌ.
- ຽ຤ັຍຽຆີຍຽ຤ີ( Web server ): ຾ຠໃ ຌ຃ວຠພິ຤ຽຉີ຋ີໃ ຠີກາຌຉິຈຉັໄຄ຿ຎຢ຾ກຢຠກໃ ຼ຤ກັຍກາຌເ຦ໄຍຣິກາຌ ຽຨັຈໜໄາ
ໜໄາ຋ີໃ ຍຣິກາຌ ຾ຣະລ຺ໃ ຄຂໄຠູຌເ຦ໄຏູໄຌາເຆໄ຋ີໃ ຨໄວຄຂຠາ ຿ຈງລໃ ຤ຌ຦ົາງ຿ຎຢ຾ກຢຠ຋ີໃ ຠັກເຆໄຽຆັໃ ຌ: IIS(Internet
Information Service),Apache ຦ົວໃ ຌໂ.
- ຽ຤ັຍຍຢາ຤ຽຆີ( Web browser ): ຾ຠໃ ຌ຿ຎຢ຾ກຢຠລາຣັຍຽຎີຈຽຍິໃ ຄຂໄຠູຌເຌຨູຍ຾ຍຍຽ຤ັຍຽພ຅ ຦ຣ ຽວກະລາຌ
HTML ຦ຣ ຽ຤ັຍຽພ຅຋ີໃ ລໄາຄ຅າກພາລາວໃ ຌໂ.
- ຈາ຤຿຦ຣຈ( download ): ຾ຠໃ ຌກາຌລາຽຌ຺າຽວ຺າຂໄຠູຌ຅າກ web server ຠາແ຤ໄເຌ຃ວຠພິ຤ຽຉີຂວຄຏູໄເຆໄ.
- ວັຍ຿຦ຣຈ( Upload ): ຾ຠໃ ຌກາຌລ຺ໃ ຄ຿ວຌງໄາງຂໄຠູຌ຅າກ຃ວຠພິ຤ຽຉີຏູໄເຆໄແຎແ຤ໄເຌ web server.
- ກາຌຽຆໃ ວຠ຿ງຄ( link ): ຾ຠໃ ຌກາຌຽຆໃ ວຠ຿ງຄຣະ຦຤ໃ າຄຽ຤ັຍຽພ຅ພາງເຌຽ຤ັຍແຆ,ຌວກຽ຤ັຍແຆ,ຽວກະລາຌ ຉໃ າຄໂ
1.2 ກາຌຽຆໃ ວຠຉໃ ວິຌຽຉີຽຌັຈ
1.2.1 ກາຌຽຆໃ ວຠຉໃ ວິຌຽຉີຽຌັຈ຾ຍຍເຆໄລາງ(Wire Internet)
- ກາຌຽຆໃ ວຠຉໃ ວິຌຽຉີຽຌັຈຣາງຍຸກ຃຺ຌ(Individual Connection): ຾ຠໃ ຌກາຌຽຆໃ ວຠຉໃ ຃ວຠພິ຤ຽຉີ຋ີໃ ມູໃ ເຌຽຨວຌ
ຽຂ຺ໄາກັຍຣະຍ຺ຍຽ຃ວຂໃ າງວິຌຽຉີຽຌັຈຽພໃ ວເຆໄວິຌຽຉີຽຌັຈ຿ຈງຏໃ າຌລາຌ຿຋ຣະລັຍ ຿ຈງຏູໄເຆໄ຅ະຉໄວຄລະໝັກ
ຽຎັຌລະຠາຆິກກັຍຏູໄເ຦ໄຍຣິກາຌວິຌຽຉີຽຌັຈຽລງກໃ ວຌ ຅າກຌັໄຌ຅ະແຈໄຆໃ ຾ຣະຣະ຦ັຈຽພໃ ວຽຂ຺ໄາເຆໄ

3. ວ຺ຄຎະກວຍເຌກາຌຽຆໃ ວຠຉໃ ວິຌຽຉີຽຌັຈຣາງຍຸກ຃຺ຌຠີ຃:
1) ຿຋ຣະລັຍ
2)຃ວຠພິ຤ຽຉີ
3)ຏູໄເ຦ໄຍຣິກາຌວິຌຽຉີຽຌັຈ
4)຿ຠຽຈຠ
- ກາຌຽຆໃ ວຠຉໃ ວິຌຽຉີຽຌັຈຂວຄວ຺ຄກວຌ( Coperate Connection): ກາຌຽຆໃ ວຠຉໃ ວິຌຽຉີຽຌັຈຎະຽພຈຌີໄຠັກຽ຦ັຌ
ມູໃ
ຉາຠວ຺ຄກວຌ,ໜໃ ຤ງຄາຌຉໃ າຄໂ ຽຆິໃ ຄພາງເຌວ຺ຄກວຌ຅ະຠີຣະຍ຺ຍຽ຃ວຂໃ າງ຋ີໃ ຽຆໃ ວຠຉໃ ກັຍວິຌຽຉີຽຌັຈຈໄ຤ງລາງຽຆ຺ໃ າ
ຉະ຦ົວຈຽ຤ຣາ ຈັໃ ຄຌັໄຌຍຸກ຃຺ຌ຋ີໃ ມູໃ ເຌວ຺ຄກວຌກໃ ລາຠາຈເຆໄວິຌຽຉີຽຌັຈແຈໄຉະ຦ົວຈຽ຤ຣາຽຆັໃ ຌກັຌ
1.2.2 ກາຌຽຆໃ ວຠຉໃ ວິຌຽຉີຽຌັຈ຾ຍຍຍໃ ເຆໄລາງ(Wireless Network)

4. ຍ຺ຈ຋ີ 2 ພໄຌຊາຌກໃ ວຌກາຌຂຼຌພາລາ HTML
HTML(Hyper Text Markup Language) ພັຈ຋ະຌາ຿ຈງ຋ໃ າຌ ຋ີຠ ຽຍີຽຌີ ຣີ(Tim Berners
Lee) ຽຎັຌພາລາເຆໄຂຼຌຽວກະລາຌ ຽພໃ ວລະ຾ຈຄຏ຺ຌເຌໜໄາ຅຃ວຠພິ຤ຽຉີຏໃ າຌ຿ຎຢ຾ກຢຠຎະຽພຈ Web
Browser, ພາລາ HTML ຽຎັຌພາລາ຃າລັໃ ຄຆະຌິຈ຃຤ຍ຃ຸຠກາຌລະ຾ຈຄຂໄ ຠູຌ຾ຍຍກຢາຍຟິກ ຾ຣະຠີຌາຠລະ
ກຸຌຽຎັຌ *.html
ເຌຎະ຅ຸຍັຌຽຨ຺າ຅ະຽ຦ັຌ຤ໃ າ ຠີຽ຃ໃ ວຄຠ຅າຌ຤ຌ຦ົ຤ຄ຦ົາງເ຦ໄຽຣວກເຆໄຽພໃ ວລໄາຄ ຽ຤ັຍຽພ຅ ຿ຈງຍໃ ຅າຽຎັຌ
ຉໄວຄຠີ຃຤າຠຨູໄກໃ ຼ຤ກັຍພາລາເຈພາລາໜຶໃ ຄກໃ ລາຠາຈລໄາຄຽ຤ັຍຽພ຅ແຈໄ ຾ຌ຤ເຈກໃ ຉາຠ ຽ຃ໃ ວຄຠລາຽຣັຈຨູຍຉໃ າຄໂຌັໄຌ
຅ະລາຠາຈຽຨັຈແຈໄຽ຋຺ໃ າ຋ີໃ ຿ຎຢ຾ກຢຠຠີແ຤ໄເ຦ໄຽ຋຺ໃ າຌັໄຌ ຾ຉໃ ຊໄາຽຨ຺າຉໄວຄກາຌຎັຍຎຸຄ ຦ົຎໃ ຼຌ຾ຎຄຣັກລະຌະຉໃ າຄໂ
ຌວກຽໜວ຅າກ຋ີໃ ຿ຎຢ຾ກຢຠຠີຌັໄຌ ຽຨ຺າກໃ ຍໃ ລາຠາຈຽຨັຈແຈໄຊໄາຍໃ ຨູໄພາລາ຋ີໃ ເຆໄຂຼຌຽ຤ັຍຽພ຅ ຦ົຽຨັຈແຈໄກໃ ຃຺ຄຣາຍາກ
ລ຺ຠ຃຤ຌ.
ພາງເຌ຿຃ຄລໄາຄຂວຄຽວກະລາຌ HTML ຅ະຍໃ ຠີເຈໂຠາກາຌ຺ຈງໄວຌ຤ໃ າ ຿ຎຢ຾ກຢຠຎະຽພຈ ຽ຤ັຍຍຢາ຤ຽຆີ຅ະ
ຽ຦ັຌວ຺ຄຎະກວຍ຋ຸກມໃ າຄເຌ຿ຎຢ຾ກຢຠພາລາ HTML ຋ີໃ ຂຼຌຂຶໄຌຽຎັຌຽຌໄວ຦າ຋ັຄໝ຺ຈ ງ຺ກຽ຤ັໄຌເຌລໃ ຤ຌ຦຺຤຅ະຠີ
ກາຌກາຌ຺ຈພິຽລຈ.
1. ຽ຤ັຍແຆ (Web Site).
ໝາງຽຊິຄ ຽ຤ັຍຽພ຅ ຦ົາງໂໜໄາ຋ີໃ ຠີກາຌຽຆໃ ວຠ຿ງຄ຦າກັຌ ລໃ ຤ຌ຦ົາງຽ຤ັຍແຆຠັກ຅ະລໄາຄຂຶໄຌຽພໃ ວຌາລະຽ
ໜີຂໄຠູຌຏໃ າຌ຃ວຠພິ຤ຽຉີ ຿ຈງຊກກັຍຨັກລາແ຤ໄເຌຽ຃ວຂໃ າງວິຌຽຉີຽຌັຈ,ຽ຤ັຍແຆ຋຺ໃ ຤ແຎ຅ະເ຦ໄຍຣິກາຌຟຢີຉໃ ຏູໄເຆໄ
຾ຉໃ ຍາຄຽ຤ັຍແຆກໃ ຅າຽຎັຌຉໄວຄຠີກາຌລະໝັກລະຠາຆິກ ຾ຣະຽລງ຃ໃ າເຆໄ຅ໃ າງ຅າຌ຤ຌໜຶໃ ຄຽພໃ ວຂຽຍິໃ ຄຂໄຠູຌ. ກາຌລໄາຄ
ຽ຤ັຍແຆຠີ຦ົາງຣະຈັຍຉັໄຄ຾ຉໃ ຽ຤ັຍແຆລໃ ຤ຌຉ຺຤ ຅຺ຌຽຊິຄຣະຈັຍຽ຤ັຍແຆລາຣັຍ຋ຸຣະກິຈ ຦ົວ຺ຄກາຌຉໃ າຄໂ ກາຌຂໄຽຍິໃ ຄຂໄ
ຠູຌຽ຤ັຍແຆ຅ະເຆໄ຿ຎຢ຾ກຢຠຎະຽພຈ ຽ຤ັຍຍຢາ຤ຽຆີ.
2. ຽ຤ັຍຍຢາ຤ຽຆີ (Web Browser).
ຽຎັຌ຿ຎຢ຾ກຢຠ຃ວຠພິ຤ຽຉີ຋ີໃ ເຆໄຽຎີຈຽຍິໃ ຄຽ຤ັຍແຆ ຽພໃ ວຽຍິໃ ຄຂໄຠູຌ ຾ຣະລາຠາຈ຿ຉໄຉວຍກັຍຂໄຠູຌ
ຂໃ າ຤ລາຌເຌໜໄາຽ຤ັຍ຋ີໃ ລໄາຄຈໄ຤ງພາລາລະຽພາະ຋ີໃ ຠີກາຌຽກັຍຨັກລາແ຤ໄເຌຣະຍ຺ຍຍຣິກາຌຽ຤ັຍ ຦ົຽ຤ັຍຽຆິຍຽ຤ີ
(Web Server) ຦ົຣະຍ຺ຍ຃ັຄຂໄຠູຌວໃ ຌໂ ຿ຈງ຿ຎຢ຾ກຢຠ ຽ຤ັຍຍຢາ຤ຽຆີ ຅ະຽຎັຌ຃ກັຍລໃ ເຌກາຌຉິຈຉໃ ກັຍຽ຃ວ
ຂໃ າງວິຌຽຉີຽຌັຈ ຉ຺຤ມໃ າຄ຿ຎຢ຾ກຢຠຎະຽພຈ ຽ຤ັຍຍຢາ຤ຽຆີ ແຈໄ຾ກໃ :
1) ວິຌຽຉີຽຌັຈຽວັກລ຿ຎຢຽຣີ(Internet Explorer) ຿ຈງຍຣິລັຈ ແຠ຿຃ຢຆວຍ(Microsoft).
2) ຠຆິຣາ ແຟຟັວກ(Mozilla Firefox) ຿ຈງ ຠູຌຣະຌິ຋ິ ຠຆິຣາ.
3) ຽຌັຈລຽ຃ັຍ ຌາ຤ີຽກຽຉີ(Netscape Navigator) ຿ຈງຍຣິລັຈ ຌາ຤ີຽກຽຉີ.
4) ຆາຟາຢິ(Safari) ຿ຈງຍຣິລັຈ ຾ວັຍຽຎິໄຌ ຃ວຠພິ຤ຽຉີ.

5. 5) ຿ວຽຎຢາ(Opera) ຿ຈງຍຣິລັຈ ຿ວຽຎຢາ.
3. ກາຌລະ຾ຈຄຏ຺ຌເຌ຿ຎຢ຾ກຢຠ ຽ຤ັຍຍຢາ຤ຽຆີ.
ຽວກະລາຌພາລາ HTML ຽຎັຌຂໄ຃຤າຠ(Text) ຋າຠະຈາ຋ີໃ ຠີຌາຠລະກຸຌ .html ຽ຤ຣາຽຨ຺າຂຼຌ຃າລັໃ ຄ
ຉໃ າຄໂເຌ຿ຎຢ຾ກຢຠ Notepad ຾ຣໄ຤ຍັຌ຋ຶກເ຦ໄຽຎັຌຌາຠລະກຸຌຈັໃ ຄກໃ າ຤ ຊໄາຍໃ ຈັໃ ຄຌັໄຌ຅ະຍໃ ລາຠາຈລະ຾ຈຄຏ຺ຌ
ແຈໄ.
4. URL(Uniform Resource Locator).
ຽຎັຌຣະຍ຺ຍຠາຈຉະຊາຌ຋ີໃ ເຆໄກາຌ຺ຈຉາ຾ໜໃ ຄຍໃ ວຌມູໃ ຂວຄຽ຤ັຍຽພ຅຾ຉໃ ຣະໜໄາ ຽຆິໃ ຄ຅ະມູໃ ເຌຨູຍ຾ຍຍຽຆັໃ ຌ:
http://www.vihatec.edu.la
http(Hyper Text Transfer Protocol) ຽຎັຌກາຌກາຌ຺ຈຣັກລະຌະກາຌລໃ ລາຌຣະ຤ໃ າຄ຿ຎຢ຾ກຢຠ
ຽ຤ັຍຍຢາ຤ຽຆີ ຾ຣະ ຽ຤ັຍຽຆິຍຽ຤ີ.
www(World Wide Web) ໝາງຽຊິຄ ຍໃ ວຌ຋ີໃ ຽກັຍຨັກລາຂໄຠູຌຂໃ າ຤ລາຌ຋ີໃ ຽຆໃ ວຠ຿ງຄກັຌເຌວິຌຽຉີ
ຽຌັຈ.
Vihatec.edu.la ໝາງຽຊິຄ ຆໃ ຿ຈຽຠຌ ຋ີໃ ເຆໄ຾຋ຌໝາງຽຣກ຋ີໃ ມູໃ ເຌຽ຃ວຂໃ າງວິຌຽຉີຽຌັຈ.
.edu.la ລາຣັຍວ຺ຄກາຌຈໄາຌກາຌລຶກລາ຋ີໃ ຅຺ຈຊຸຍຼຌເຌຎະຽ຋ຈຣາ຤.
.com ຦ງໄຠາ຅າກ commercial ໝາງຽຊິຄ ກາຌ຃ໄາ,ຍຣິລັຈ,ວ຺ຄກວຌ.
.net ຦ງໄຠາ຅າກ network ລາຣັຍວ຺ຄກວຌ຋ີໃ ກໃ ຼ຤ຂໄວຄກັຍຣະຍ຺ຍຽ຃ວຂໃ າງ຃ວຠພິ຤ຽຉີ.
.org ຦ງໄຠາ຅າກ organization ລາຣັຍວ຺ຄກວຌ຋ີໃ ຍໃ ຦຤ັຄຏ຺ຌກາແຣ.
.gov ລາຣັຍວ຺ຄກາຌຣັຈຊະຍາຌ.
.com.la ວ຺ຄກວຌ຋າຄ຋ຸຣະກິຈ຋ີໃ ຂຶໄຌຊະຍຼຌເຌຎະຽ຋ຈຣາ຤.

6. 5. ລິໃ ຄ຋ີໃ ຉໄວຄກະກຼຠຽຠໃ ວຉໄວຄກາຌຂຼຌຽ຤ັຍແຆ.
ກໃ ວຌ຅ະຣ຺ຄຠຂຼຌ຿ຎຢ຾ກຢຠພາລາ HTML ຽພໃ ວລໄາຄຽ຤ັຍຽພ຅ແຈໄຌັໄຌຉໄວຄກ຤ຈກາ຃຤າຠ ພໄວຠຈໄາຌ
ວຸຎະກວຌ,ຽ຃ໃ ວຄຠລາຣັຍກາຌລໄາຄ຤ໃ າຠີ຃຺ຍ຦ົຍໃ ຽຆັໃ ຌ:
- ຃ວຠພິ຤ຽຉີ CPU 486 ຦ົ Pentium ຂຶໄຌແຎ.
- ໜໃ ຤ງ຃຤າຠ຅າ຦ົັກ຦ົາງກ຤ໃ າ 8 MB.ຽຌໄວ຋ີໃ ຂວຄ Harddisk ຦ົາງກ຤ໃ າ 20 MB.
- ຿ຎຢ຾ກຢຠຎະຽພຈ ຽ຤ັຍຍຢາ຤ຽຆີ.
- ຿ຎຢ຾ກຢຠ Notepad,EditPus,Microsoft Office FrontPage,Macromedia Dreamweaver,
ວໃ ຌໂ຋ີໃ ກໃ ຼ຤ຂໄວຄ ຾ຣະຽໝາະລ຺ຠ.

7. ຍ຺ຈ຋ີ 3 ຽຣີໃ ຠຉ຺ໄຌ຃າລັໃ ຄພາລາ HTML
1. ຾຋ັກ(Tag)
຾຋ັກ຾ຠໃ ຌຣັກລະຌະລະຽພາະຂວຄພາລາ HTML ຋ີໃ ເຆໄເຌກາຌກາຌ຺ຈຨູຍ຾ຍຍ຃າລັໃ ຄ ຦ົຣະ຦ັຈ຃າລັໃ ຄ
຿ຈງຣະ຃າລັໃ ຄ຅ະຊກກາຌ຺ຈແ຤ໄພາງເຌຽ຃ໃ ວຄໝາງຌໄວງກ຤ໃ າ( < ) ຾ຣະຽ຃ໃ ວຄໝາງເ຦ງໃ ກ຤ໃ າ(> ) ຽຆິໃ ຄ຾຋ັກ຃າລັໃ ຄ
ພາລາ HTML ຾ຍໃ ຄວວກຽຎັຌ 2 ຣັກລະຌະ຃:
- ຾຋ັກຈໃ ຼ຤: ຽຎັຌ຾຋ັກ຋ີໃ ຍໃ ຠີ຾຋ັກຎິຈ ຽຆັໃ ຌ: <br> , <hr> .
- ຾຋ັກ຃ູໃ : ຾຋ັກ຃າລັໃ ຄໜຶໃ ຄ຅ະຎະກວຍຈໄ຤ງ຾຋ັກຽຎີຈ ຾ຣະຽ຋ັກຎິຈ ຿ຈງພາງເຌ຾຋ັກຎິຈ຅ະຠີຽ຃ໃ ວຄໝາງ / ຌາ
ໜໄາ຃າລັໃ ຄ ຽຆັໃ ຌ: <b> ຂໄ຃຤າຠ </b>
2. ຃ຸຌຣັກລະຌະ(Attributes).
ຽຎັຌລໃ ຤ຌ຋ີໃ ເຆໄຂະ຦ງາງ຃຤າຠລາຠາຈຂວຄ຾຋ັກ຃າລັໃ ຄ ຽຆິໃ ຄ຅ະຉໄວຄເລໃ ແ຤ໄພາງເຌຽ຃ໃ ວຄໝາງເ຦ງໃ ກ຤ໃ າ
຾ຣະຌໄວງກ຤ໃ າ ຾ຣະເຌລໃ ຤ຌ຾຋ັກຽຎີຈຽ຋຺ໃ າຌັໄຌ, ຿ຈງ຾ຉໃ ຣະ຾຋ັກ຃າລັໃ ຄ຅ະຠີ຃ຸຌຣັກລະຌະ຾ຉກຉໃ າຄກັຌແຎ ຾ຣະ
ຠີ຅າຌ຤ຌຍໃ ຽ຋຺ໃ າກັຌ ຽຆັໃ ຌ: ຃ຸຌຣັກລະຌະຂວຄ຾຋ັກ <p> ຠີຈັໃ ຄຌີໄ:
<p align="left">ຂໄ຃຤າຠເຈໂກໃແຈໄ</p>
<p align="center">ຂໄ຃຤າຠເຈໂກໃແຈໄ</p>
<p align="right">ຂໄ຃຤າຠເຈໂກໃແຈໄ</p>
<p align="justify">ຂໄ຃຤າຠເຈໂກໃແຈໄ</p>
3. ຿຃ຄລໄາຄຂວຄພາລາ HTML.

8. - ຾຋ັກ຃າລັໃ ຄ <html> ຾ຠໃ ຌ຾຋ັກຽຎີຈ ຽຆິໃ ຄຽຎັຌ຃າລັໃ ຄກາຌ຺ຈ຅ຸຈຽຣີໃ ຠຉ຺ໄຌເຌກາຌຂຼຌ຿ຎຢ຾ກຢຠ ຾ຣະ຃າລັໃ ຄ
</html> ຾ຠໃ ຌ຾຋ັກຎິຈ ຽຆິໃ ຄຽຎັຌ຾຋ັກກາຌ຺ຈ຅ຸຈລິໄຌລຸຈກາຌຂຼຌ຿ຎຢ຾ກຢຠ.
- ຾຋ັກ຃າລັໃ ຄ <head> ….</head> ຾ຠໃ ຌ຾຋ັກຽຎີຈ ຽຆິໃ ຄຽຎັຌ຃າລັໃ ຄລາຣັຍເລໃ ຂໄ຃຤າຠ຋ີໃ ຽຎັຌຆໃ ຽຌໄວເຌຂໄຠູຌເຌ
ໜໄາຽ຤ັຍຽພ຅ຌັໄຌ ຾ຣະຠີ຾຋ັກງໃ ວງວີກ຃າລັໃ ຄໜຶໃ ຄ຃: <title>….</title> .
- ຾຋ັກ຃າລັໃ ຄ <title> …. </title> ຽຎັຌ຾຋ັກ຃າລັໃ ຄ຋ີໃ ເຆໄລະ຾ຈຄຆໃ ຦ົ ຂໄ຃຤າຠ຋ີໃ ວະ຋ິຍຍາງຽຌໄວ຦າເຌໜໄາຽ຤ັຍ
ຽພ຅ຌັໄຌ ຾ຣະຂໄ຃຤າຠ຋ີໃ ກາຌ຺ຈພາງເຌ຾຋ັກ຃າລັໃ ຄຌີໄ຅ະລະ຾ຈຄເຌ Title Bar ຂວຄ຿ຎຢ຾ກຢຠ ຽ຤ັຍຍຢາ຤ຽຆີ.
- ຾຋ັກ຃າລັໃ ຄ <body> …. </body> ຽຎັຌລໃ ຤ຌ຋ີໃ ລາ຃ັຌເຌກາຌລະ຾ຈຄຏ຺ຌເຌໜໄາ຅຃຤າຠ ຦ົເຌ຿ຎຢ຾ກຢຠ
ຽ຤ັຍຍຢາ຤ຽຆີ ຽຆິໃ ຄພາງເຌ຅ະຎະກວຍຈໄ຤ງ຦ົາງ຾຋ັກ຃າລັໃ ຄ ຽຆັໃ ຌ: ກໃ ຼ຤ກັຍຉ຺຤ວັກລວຌ,ຨູຍພາຍ,ຉາຉະຣາຄ,຤ິຈີ
຿ວ ຾ຣະ ວໃ ຌໂ.

9. ຍ຺ຈ຋ີ 4 ຂັໄຌຉວຌກາຌລໄາຄຽວກະລາຌ HTML
- ຂັໄຌຉວຌ຋ີ1: ຽຎີຈ຿ຎຢ຾ກຢຠ Notepad.
ກ຺ຈຎຸໃ ຠ Start > All Programs > Accessories > Notepad ຾ຣໄ຤ພິຠ຃າລັໃ ຄຉໃ າຄໂ.

10. - ຂັໄຌຉວຌ຋ີ2: ຍັຌ຋ຶກຽວກະລາຌ HTML ຋ີໃ ຂຼຌ.
1) ຽຣວກຽຠຌູ File > Save As.
2) ຅ະຎະກ຺ຈໜໄາ຅ລາຣັຍກາຌ຺ຈຣັກລະຌະ ຾ຣະຨູຍ຾ຍຍກາຌຍັຌ຋ຶກຂຶໄຌຠາ.ເຌ຦ໄວຄ File name ຾ຠໃ ຌເ຦ໄຉັໄຄຆໃ
ຽວກະລາຌ ຿ຈງ຅ະຉໄວຄກາຌ຺ຈຌາຠລະກຸຌຽຎັຌ .html ຉໃ ຋ໄາງ ຿ຈງຍໃ ຉໄວຄຠີກາງງະ຤ໃ າຄ.
3) ເຌ຦ໄວຄ Save as type ເ຦ໄຽຣວກຽຎັຌ All files (*.*)
4) ກ຺ຈຎຸໃ ຠ Save
- ຂັໄຌຉວຌ຋ີ3: ລະ຾ຈຄຏ຺ຌຨັຍຏໃ າຌ຿ຎຢ຾ກຢຠຽ຤ັຍຍຢາ຤ຽຆີ.
1) ຽຎີຈ຿ຎຢ຾ກຢຠ Internet Explorer
ກ຺ຈຎຸໃ ຠ Start > All Programs > Internet Explorer
2) ຽຣວກຽຠຌູ File > Open.
3) ກ຺ຈຎຸໃ ຠ Browse.. ຾ຣໄ຤ຽຣວກຽວກະລາຌ HTML ຋ີໃ ຍັຌ຋ຶກແ຤ໄ.
4) ກ຺ຈຎຸໃ ຠ Open
5) ກ຺ຈຎຸໃ ຠ OK

11. ຏ຺ຌແຈໄຨັຍ

12. ຍ຺ຈ຋ີ 5 ຃າລັໃ ຄ຋ີໃ ເຆໄເຌກາຌ຅ັຈຽວກະລາຌ
1. ຃າລັໃ ຄຣ຺ຄ຾ຊ຤.
ຂໄ຃຤າຠ຋ີໃ ພິຠເຌຽວກະລາຌ HTML ຌັໄຌ຅ະຠີຣັກລະຌະຉໃ ກັຌແຎຽຎັຌ຾ຊ຤ຈຼ຤ ຾ຣະ຅ະຣ຺ຄ຾ຊ຤ກໃ
ຽຠວລຸຈຂວຍໜໄາ຅຃ວຠ ຈັໃ ຄຌັໄຌຊໄາຉໄວຄກາຌຣ຺ຄ຾ຊ຤ເໝໃ ຽຨ຺າ຅ະຉໄວຄກາຌ຺ຈຽວຄຈໄ຤ງກາຌເຆໄ຾຋ັກ຃າລັໃ ຄ <br>
(break line) ຃າລັໃ ຄຌີໄ຅ະເ຦ໄຏ຺ຌຨັຍ຃ກັຍກາຌກ຺ຈຎຸໃ ຠ Enter ເຌ຾ຎໄຌພິຠ
ຉ຺຤ມໃ າຄ:
<html>
<head>
<title>basic HTML</title>
</head>
<body>
1. ກາຌຣ຺ຄ຾ຊ຤ເໝໃ <br> ຂໄ຃຤າຠ຋ີໃ ພິຠເຌຽວກະລາຌ HTML ຌັໄຌ຅ະຠີຣັກລະຌະຉໃ ກັຌແຎ ຽຎັຌ຾ຊ຤
ຈຼ຤ ຾ຣະ຅ະຣ຺ຄ຾ຊ຤ກໃ ຽຠວລຸຈຂວຍໜໄາ຅຃ວຠ
</body>
</html>
2. ກາຌ຅ັຈຉາ຾ໜໃ ຄຂໄຠູຌເ຦ໄມູໃ ຽ຃ິໃ ຄກາຄໜໄາຽ຤ັຍຽພ຅.
຾ຠໃ ຌເຆໄ຾຋ັກ຃າລັໃ ຄ <center> ..... </center>
ຉ຺຤ມໃ າຄ:< center> ຂໄ຃຤າຠຌີໄ຅ະມູໃ ຽ຃ິໃ ຄກາຄໜໄາຽ຤ັຍຽພ຅</center>
3. ກາຌ຅ັຈພາຢາກຢາຍ(paragraph).
ພາຢາກຢາຍ ຅ະຽຎັຌລໃ ຤ຌ຋ີໃ ຽ຦ັຌກັຌ຋຺ໃ ຤ແຎເຌໜັຄລ ຦ົ຤າຣະລາຌຉໃ າຄໂ ຽຎັຌລໃ ຤ຌ຋ີໃ ຆໃ ຤ງເ຦ໄກາຌ຾ຍໃ ຄ
ຽຌໄວ຦າຌັໄຌເ຦ໄຽຎັຌລັຈລໃ ຤ຌ ຾ຣະຽຍິໃ ຄຄໃາງຂຶໄຌ ກາຌ຅ັຈຂໄ຃຤າຠເ຦ໄຽຎັຌພາຢາກຢາຍ຅ະເຆໄ຾຋ັກ຃າລັໃ ຄ <p> ຽຆິໃ ຄ
ຠີຨູຍ຾ຍຍກາຌ຅ັຈຈັໃ ຄຌີໄ:
ຨູຍ຾ຍຍ ຃າວະ຋ິຍາງ
Left ຉິຈຂວຍຽຍໄວຄຆໄາງ
Center ມູໃ ຽ຃ິໃ ຄກາຄ
Right ຉິຈຂວຍຽຍໄວຄຂ຤າ
ຨູຍ຾ຍຍ: <p align="right">ຂໄ຃຤າຠ຋ີໃ ຅ັຈມູໃ ເຌພາຢາກຢາຍ</p>
ຉ຺຤ມໃ າຄ:

13. <html>
<head>
<title>ກາຌ຅ັຈພາຢາກຢາຍ </title>
</head>
<body>
<p align=left> ຂໄ຃຤າຠ຋ີໃ ມູໃ ຉິຈຈໄາຌຆໄາງ </p>
<p align=center> ຂໄ຃຤າຠ຋ີໃ ມູໃ ຽ຃ິໃ ຄກາຄ </p>
<p align=right> ຂໄ຃຤າຠ຋ີໃ ມູໃ ຽຍໄວຄຂ຤າ </p>
</body>
</html>
4. ກາຌ຅ັຈຨູຍ຾ຍຍຽວກະລາຌຉາຠ຋ີໃ ກາຌ຺ຈ.
ຽຎັຌກາຌກາຌ຺ຈຉາ຾ໜໃ ຄກາຌະ຾ຈຄຏ຺ຌຉາຠຨູຍ຾ຍຍ຋ີໃ ຽຨ຺າພິຠເຌ຿ຎຢ຾ກຢຠ Notepad ຽຆິໃ ຄຽຨ຺າ
ລາຠາຈຽຨັຈແຈໄຉາຠ຋ີໃ ຽຨ຺າຉໄວຄກາຌ ຿ຈງ຅ະເຆໄ຾຋ັກ຃າລັໃ ຄ <pre> …. </pre>
ຉ຺຤ມໃ າຄ:
<pre>
ຣາງຨັຍ:
ຂາງຽ຃ໃ ວຄ 20000 ກີຍ
ຈວກຽຍໄຍ 30000 ກີຍ
ຣາງ຅ໃ າງ:
຃ໃ າຌໄາ 5000 ກີຍ
຃ໃ າແຟ 2000 ກີຍ
ຣ຤ຠ 7000 ກີຍ
</pre>
5. ກາຌເລໃ ຽລັໄຌຂັໄຌເຌຽວກະລາຌຉາຠຣ຤ຄຌວຌ(horizontal rule).
<hr> ຽຎັຌ຃າລັໃ ຄລະ຾ຈຄຽລັໄຌຂັໄຌຉາຠຣ຤ຄຌວຌ ຿ຈງ຅ະເຆໄຽຎັຌຽລັໄຌ຾ຍໃ ຄຽຌໄວ຦າຣະ຦຤ໃ າຄຍ຺ຈ ຦ົຽຎັຌ
ຽລັໄຌຂັໄຌຽພໃ ວ຃຤າຠລ຤ງຄາຠ ຾ຣະຽຎັຌຣະຍ຺ຍຣະຍຼຍຂວຄຽຌໄວ຦າ ຽຆິໃ ຄຽຎັຌ຃າລັໃ ຄຍໃ ຉໄວຄຠີ຃າລັໃ ຄຎິຈ ຌວກ຅າກ
ຌັໄຌງັຄລາຠາຈກາຌ຺ຈ຃ຸຌຣັກລະຌະແຈໄວີກຈໄ຤ງ ຽຆິໃ ຄຠີຨູຍ຾ຍຍຈັໃ ຄຣຸໃ ຠຌີໄ:
<hr color="ຆໃ ລີ ຦ົຣະ຦ັຈລີ" width="຃຤າຠກ຤ໄາຄ" align="ຆໄາງ,ຂ຤າ,ຽ຃ິໃ ຄກາຄ" noshade>
size ຂະໜາຈຂວຄຽລັໄຌຂັໄຌ
align ຉາ຾ໜໃ ຄລະ຾ຈຄຽລັໄຌຂັໄຌ ຽຆັໃ ຌ: ຆໄາງ,ຂ຤າ,ຽ຃ິໃ ຄກາຄ
color ລີຽລັໄຌຂັໄຌ
width ຃຤າຠກ຤ໄາຄຂວຄຽລັໄຌຂັໄຌ
noshade ກາຌ຺ຈເ຦ໄຽລັໄຌຂັໄຌຽຎັຌຽລັໄຌໜໄາ ຦ົຽຂັໄຠກ຤ໃ າຎ຺ກກະຉິ
ຉ຺຤ມໃ າຄ:

14. <html>
<head>
<title>ກາຌ຅ັຈພາຢາກຢາຍ </title>
</head>
<body>
ງິຌຈີຉໄວຌຨັຍ
<hr color="red" width="500" hieght="1" align="center" noshade>
ຍ຺ຈຨຼຌ຋ີ 3 ກາຌ຅ັຈກາຌກັຍຂໄ຃຤າຠ
</body>
</html>
6. ກາຌເລໃ ໝາງຽ຦ຈ(comment)ເຌຽວກະລາຌ.
ກາຌເລໃ ໝາງຽ຦ຈເຌຽວກະລາຌ html ຾ຠໃ ຌຉໄວຄກາຌເລໃ ຂໄ຃຤າຠ ຦ົຂໄຠູຌແ຤ໄເຌຽວກະລາຌ຾ຉໃ ຍໃ
ຉໄວຄກາຌເ຦ໄລະ຾ຈຄ຋າຄໜໄາ຅ ຽຆິໃ ຄຠີຨູຍ຾ຍຍ຃າລັໃ ຄຈັໃ ຄຌີໄ:
<! ຂໄ຃຤າຠ຋ີໃ ຽຎັຌໝາງຽ຦ຈ >
7. ກາຌງະ຦຤ໃ າຄເຌຽວກະລາຌ.
ກາຌພິຠຂໄຠູຌເຌຽວກະລາຌ HTML ຅ະຠີກາຌງະ຤ໃ າຄ຦ົາງຎາຌເຈກໃ ຉາຠ ຽ຤ຣາຌາແຎລະ຾ຈຄເຌໜໄາ຅
ຍຢາ຤ຽຆີ ກໃ ຅ະລະ຾ຈຄ຃຤ໃ າງະ຤ໃ າຄພຼຄ 1 ຉ຺຤ວັກລວຌຽ຋຺ໃ າຌັໄຌ ຈັໃ ຄຌັໄຌຊໄາຽຨ຺າຉໄວຄກາຌງະ຤ໃ າຄ຦ົາງໂ ເຌພາລາ
HTML ຅ະຠີ຃າລັໃ ຄແ຤ໄເ຦ໄ ຃: &nbsp; ຃າລັໃ ຄຌີໄ຅ະຽ຋຺ໃ າກັຍກາຌຽ຃າະງະ຤ໃ າຄ 1 ຍາຈ ເຌ຾ຎໄຌພິຠ.
ຉ຺຤ມໃ າຄ:
<html>
<head>
<title>ກາຌ຅ັຈພາຢາກຢາຍ </title>
</head>
<body>
ງິຌຈີຉໄວຌຨັຍ
<! ຂໄ຃຤າຠ຋ີໃ ຽຎັຌຌີໄ ຃ໝາງຽ຦ຈ>
<hr color="red" width="500" hieght="1" align="center" noshade>
ຍ຺ຈຨຼຌ຋ີ 3 &nbsp; &nbsp; &nbsp; &nbsp; ກາຌ຅ັຈກາຌກັຍຂໄ຃຤າຠ
</body>
</html>

15. ຍ຺ຈ຋ີ 6 ກາຌກາຌ຺ຈຣັກລະຌະຉ຺຤ວັກລວຌ
1. ຨູຍ຾ຍຍກາຌກາຌ຺ຈັກລະຌະຉ຺຤ວັກລວຌ.
຃າລັໃ ຄ ຃າວະ຋ິຍາງ
<b> ….. </b> ຉ຺຤ໜາ
<i> …… </i> ຉ຺຤ຽຌໄຄ
<u> …. </u> ຂີຈກໄວຄຉ຺຤ໜັຄລ
<tt> …. </tt> ຉ຺຤ວັກລວຌພິຠຈິຈ
<s> ….. </s> ຉ຺຤ວັກລວຌຂີຈຂໄາ
^….. ຉ຺຤ວັກລວຌຂຶໄຌກາຣັຄ
_….. ຉ຺຤ວັກລວຌ຦ໄວງ
ຉ຺຤ມໃ າຄ:

16. <html>
<head>
<title>ກາຌ຺ຈຣັກລະຌະຉ຺຤ວັກລວຌ</title>
</head>
<body>
<b>ຉ຺຤ວັກລວຌຽຂັໄຠ</b><br>
<I>ຉ຺຤ຽຌີໄຄ</I><br>
<u>ຉ຺຤ວັກລວຌຂີຈກໄວຄ</u><br>
<tt>ຉ຺຤ພິຠຈີ</tt><br>
<s>ຉ຺຤ວັກລວຌຂີຈຂໄາ</s><br>
^{ຂຶໄຌກາຣັຄ}<br>
_{ຉ຺຤຦ໄວງ}<br>
</body>
</html>
2. ກາຌ຺ຈຨູຍ຾ຍຍຉ຺຤ວັກລວຌ.
ຽຨ຺າລາຠາຈກາຌ຺ຈຨູຍ຾ຍຍຉ຺຤ວັກລວຌແຈໄຈໄ຤ງ຃ຸຌລ຺ຠຍັຈຆໃ ຤ໃ າ face ຾ຣໄ຤ກາຌ຺ຈ຃ໃ າເ຦ໄຽ຋຺ໃ າກັຍຨູຍ
຾ຍຍຉ຺຤ວັກລວຌ຋ີໃ ຽຨ຺າຉໄວຄກາຌ ຽວກະລາຌເຌຽ຤ັຍວະຌຸງາຈເ຦ໄກາຌ຺ຈ຾ຍຍຉ຺຤ວັກ ລວຌແຈໄ຦ົາງ຾ຍຍ ຿ຈງ
ຍຢາ຤ຽຆີ຅ະຠີກາຌກ຤ຈລວຍເ຦ໄວັຈຉະ຿ຌຠັຈ.
§ ຨູຍ຾ຍຍຉ຺຤ວັກລວຌພາລາຣາ຤຋ີໃ ຽໝາະລ຺ຠແຈໄ຾ກໃ : saysettha OT
§ ຨູຍ຾ຍຍຉ຺຤ວັກລວຌພາລາວັຄກິຈ຋ີໃ ຽໝາະລ຺ຠ຃: Arial,Helvetica,..
ຨູຍ຾ຍຍ຃າລັໃ ຄ: <font face="ຨູຍ຾ຍຍວັກລວຌ">welcome to my site</font>
ຉ຺຤ມໃ າຄ:
<html>
<head>
<title>ກາຌກາຌ຺ຈຨູຍ຾ຍຍວັກລວຌ</title>
</head>
<body>
<center>ກາຌກາຌ຺ຈ຾ຍຍຉ຺຤ວັກລວຌ</center>
<font face="Arial">Arial Font</font><br>
<font face="saysettha OT"> ຉ຺຤ວັກລວຌພາລາຣາ຤ເຌ຾ຍຍ saysetthaOT</font><br>
</body>
</html>
3. ກາຌກາຌ຺ຈຉ຺຤ວັກລວຌຽຎັຌ຦຺຤ຂໄຽຣໃ ວຄ(Heading).

17. ຠີຨູຍ຾ຍຍ຃າລັໃ ຄ:< Hn> ຂໄ຃຤າຠ </Hn>
ຂໄ຃຤າຠຣັກລະຌະ຦຺຤ຽຣໃ ວຄ຅ະ຃຤ຍ຃ຸຠຈໄ຤ງ຾຋ັກ <Hn> ຿ຈງ
n ຾ຠໃ ຌຉ຺຤ຽຣກລະ຾ຈຄຂະໜາຈຂວຄຉ຺຤ວັກລວຌ ຽຆິໃ ຄ຃ໃ າຂວຄ n ຅ະຠີ຃ໃ າ຾ຉໃ 1 – 6
ຉ຺຤ມໃ າຄ:
<H1> ຉ຺຤ວັກລວຌ຦຺຤ຽຣໃ ວຄຠີຂະໜາຈ- H1</H1>
<H2>ຉ຺຤ວັກລວຌ຦຺຤ຽຣໃ ວຄຠີຂະໜາຈ- H2</H2>
<H3>ຉ຺຤ວັກລວຌ຦຺຤ຽຣໃ ວຄຠີຂະໜາຈ- H3</H3>
<H4>ຉ຺຤ວັກລວຌ຦຺຤ຽຣໃ ວຄຠີຂະໜາຈ- H4</H4>
<H5>ຉ຺຤ວັກລວຌ຦຺຤ຽຣໃ ວຄຠີຂະໜາຈ- H5</H5>
<H6>ຉ຺຤ວັກລວຌ຦຺຤ຽຣໃ ວຄຠີຂະໜາຈ- H6</H6>
4. ກາຌກາຌ຺ຈຂະໜາຈຉ຺຤ວັກລວຌ.
ຊໄາຽຨ຺າຉໄວຄກາຌກາຌ຺ຈຂະໜາຈຉ຺຤ວັກລວຌ ກໃ ຅ະຠີ 7 ຂະໜາຈ ຃: 1 – 7 ຿ຈງຣຼຄ຅າກຌໄວງແຎ຦າ
ເ຦ງໃ ຠີຨູຍ຾ຍຍກາຌຂຼຌຈັໃ ຄຌີໄ:
ຨູຍ຾ຍຍກາຌຂຼຌ: <font size="ຂະໜາຈຉ຺຤ວັກລວຌ຋ີໃ ຉໄວຄກາຌ">ຂໄ຃຤າຠ</font>
5. ກາຌກາຌ຺ຈລີຉ຺຤ວັກລວຌ຋ັຄໝ຺ຈເຌຽ຤ັຍຽພ຅.
ກາຌກາຌ຺ຈລີຉ຺຤ວັກລວຌ຋ັຄໝ຺ຈເຌໜໄາຽ຤ັຍຌີໄ຅ະຽຨັຈແຈໄຈໄ຤ງກາຌກາຌ຺ຈ຃ຸຌຣັກລະຌະ text ແ຤ໄພາງ
ເຌ <body> ຠີຨູຍ຾ຍຍກາຌຂຼຌຈັໃ ຄຌີໄ:
<body text="ຆໃ ລີ ຦ົຣະ຦ັຈລີ">
6. ກາຌກາຌ຺ຈລີຉ຺຤ວັກລວຌລະຽພາະ.
ໝາງຽຊິຄ ຃າລັໃ ຄ຋ີໃ ຽຨ຺າເຆໄເຌກາຌຎໃ ຼຌລີຂວຄຉ຺຤ວັກລວຌເຌລໃ ຤ຌ຋ີໃ ຽຨ຺າຉໄວຄກາຌເ຦ໄຽກີຈລີລັຌ຾ຉກຉໃ າຄ
຅າກຉ຺຤ວັກລວຌວໃ ຌໂ
ຨູຍ຾ຍຍ຃າລັໃ ຄ: <font color="ຆໃ ລີ ຦ົຣະ຦ັຈລີ">ຂໄ຃຤າຠ</font>
7. ກາຌກາຌ຺ຈລີຉ຺຤ວັກລວຌ຋ີໃ ຽຎັຌ຅ຸຈກາຌຽຆໃ ວຠ຿ງຄ.
຾ຠໃ ຌຽຨ຺າ຅ະກາຌ຺ຈເຌລໃ ຤ຌຂວຄ <body> ຿ຈງຽພີໃ ຠ຃ຸຌຣັກລະຌະ link=ຆໃ ລີ ຦ົຣະ຦ັຈລີ, alink=ຆໃ ລີ
຦ົຣະ຦ັຈລີ, vlink= ຆໃ ລີ ຦ົຣະ຦ັຈລີ
<body text="#F0F0F0" link="#FFFF00" alink="#0077FF" vlink="#22AA22">

18. ຉ຺຤ມໃ າຄ:
<HTML>
<HEAD><TITLE>ກາຌກາຌ຺ຈຉ຺຤ວັກລວຌຽຎັຌ຦຺຤ຽຣໃ ວຄ</TITLE></HEAD>
<body bgcolor="#000000" text="orange" link="red" vlink="green"alink="yellow">
<marquee bgcolor="cyan"><font size="4">welcome</font></marquee>
<hr color="red">
<a href="#">Home</a>&nbsp;|&nbsp<a href="#">About us</a>&nbsp;|&nbsp;
<a href="#">Services</a>&nbsp;|&nbsp;<a href="#">Contact us</a>
<br><br><br>ຍ຺ຈຨຼຌພໄຌຊາຌເຌກາຌລໄາຄຽ຤ັຍຈໄ຤ງ຿ຎຢ຾ກຢຠພາລາ HTML
<h3>ຍ຺ຈ຋ີ 1</h3><font color="green">ພໄຌຊາຌ HTML</font>
<h3>ຍ຺ຈ຋ີ 1</h3><font color="purple">຃າລັໃ ຄຽຣີໃ ຠຉ຺ໄຌ</font>
<h3>ຍ຺ຈ຋ີ 1</h3><font color="blue">ຨູຍ຾ຍຍຉ຺຤ໜັຄລ</font>
</BODY>
</HTML>
ຉ຺຤ມໃ າຄຣະ຦ັຈລີ
ໝາງຽ຦ຈ: ກາຌເລໃ ຣະ຦ັຈລີ຋ຸກໂ຃ໃ າ຅ະຉໄວຄຂຶໄຌຉ຺ໄຌຈໄ຤ງຽ຃ໃ ວຄໝາງ #
ຍ຺ຈ຋ີ 7 ກາຌຽຨັຈເ຦ໄຂໄ຃຤າຠໜໄາລ຺ຌເ຅

19. 1. ກາຌກາຌ຺ຈຉ຺຤ວັກລວຌກະພິຍ.
ເຆໄ຾຋ັກ຃າລັໃ ຄ <blink> .......... </blink> ລາຣັຍ຾຋ັກ຃າລັໃ ຄຽຨັຈເ຦ໄຉ຺຤ວັກລວຌກະພິຍຌີໄ຅ະລະ
຾ຈຄຏ຺ຌແຈໄລະຽພາະ຿ຎຢ຾ກຢຠຍຢາ຤ຽຆີ Netscape ຽ຋຺ໃ າຌັໄຌ.
ຨູຍ຾ຍຍ: <blink> ຂໄ຃຤າຠກະພິຍ </blink>
2. ກາຌຽຨັຈເ຦ໄຉ຺຤ວັກລວຌຽຣໃ ວຌ.
ຨູຍ຾ຍຍ: <marquee> …. </marquee>
຾຋ັກ຃າລັໃ ຄ <marquee> ຅ະຽຨັຈເ຦ໄຉ຺຤ວັກລວຌ ຾ຣະຂໄ຃຤າຠຽຣໃ ວຌ ຽຆິໃ ຄ຅ະຽຨັຈເ຦ໄໜໄາຽ຤ັຍຠີ
຃຤າຠໜໄາລ຺ຌເ຅ ຿ຈງຎ຺ກກະຉິກາຌຽຣໃ ວຌ຅ະຽຣໃ ວຌ຅າກຂ຤າ຦າຆໄາງ ຃າລັໃ ຄຌີໄ຅ະລະ຾ຈຄຏ຺ຌແຈໄມໃ າຄຊກຉໄວຄເຌ
຿ຎຢ຾ກຢຠ Internet Explorer ຽ຋຺ໃ າຌັໄຌ.
຃ຸຌຣັກລະຌະກາຌຽຣໃ ວຌຂວຄຉ຺຤ວັກລວຌຠີຈັໃ ຄຌີໄ:
<marquee bgcolor="ຆໃ ລີ" direction="຋ິຈ຋າຄກາຌຽຣໃ ວຌ" width="຃຤າຠກ຤ໄາຄ" height="຃຤າຠ
ລູຄ" >
ຽຆິໃ ຄ຋ິຈ຋າຄກາຌຽຣໃ ວຌລາຠາຈກາຌ຺ຈແຈໄ຃:
຋ິຈ຋າຄ ຃າວະ຋ິຍາງ
Up ຽຣໃ ວຌ຅າກຣຸໃ ຠຂຶໄຌຽ຋ິຄ
Down ຽຣໃ ວຌ຅າກຽ຋ິຄຣ຺ຄຣຸໃ ຠ
Left ຽຣໃ ວຌ຅າກຂ຤າ຦າຆໄາງ
Right ຽຣໃ ວຌ຅າກຆໄາງ຦າຂ຤າ
ຌວກ຅າກຌັໄຌງັຄລາຠາຈກາຌ຺ຈເ຦ໄຉ຺຤ວັກລວຌ ຦ົຂໄ຃຤າຠຽຣໃ ວຌກັຍແຎກັຍຠາແຈໄ ຈໄ຤ງກາຌຽພີໃ ຠ຃ຸຌຣັກລະຌະ
behavior=alternate ແ຤ໄພາງເຌ <marquee> ຽຆັໃ ຌ:
<marquee bgcolor="yellow" behavior="alternate" width="200" height="20"> ຂໄ຃຤າຠ
ຽຣໃ ວຌ </marquee>
ຉ຺຤ມໃ າຄ:
<HTML>
<HEAD>
<TITLE>ກາຌກາຌ຺ຈຉ຺຤ວັກລວຌຽຎັຌ຦຺຤ຽຣໃ ວຄ</TITLE>
</HEAD>
<BODY bgcolor="#000000" text="orange" link="red" vlink="green" alink="yellow">
<marquee bgcolor="yellow" behavior="alternate" width="200" height="20"> ຂໄ຃຤າຠ
ຽຣໃ ວຌ </marquee>
<hr color="red">
<a href="#">Home</a>&nbsp;|&nbsp;
<a href="#">About us</a>&nbsp;|&nbsp;

20. <a href="#">Services</a>&nbsp;|&nbsp;
<a href="#">Contact us</a>
</BODY>
</HTML>

21. ຍ຺ຈ຋ີ 8 ກາຌກາຌ຺ຈລີພໄຌ຦ົັຄ ຾ຣະກາຌເລໃ ຨູຍເຌໜໄາຽ຤ັຍ
1. ກາຌກາຌ຺ຈພໄຌ຦ົັຄໜໄາຽ຤ັຍ.
ກາຌກາຌ຺ຈລີພໄຌ຦ົັຄຂວຄຽ຤ັຍຽພ຅ ຅ະກາຌ຺ຈ຃ຸຌລ຺ຠຍັຈຆໃ bgcolor ແ຤ໄພາຍເຌ຾຋ັກ <body> ຾ຣໄ຤
ກາຌ຺ຈ຃ໃ າເ຦ໄຽ຋຺ໃ າກັຍ ຆໃ ລີ ຦ົຣະ຦ັຈລີ ຽຆິໃ ຄຠີຨູຍ຾ຍຍກາຌຂຼຌຈັໃ ຄຌີໄ:
<body bgcolor="ຆໃ ລີ ຦ົຣະ຦ັຈລີ">
ຉ຺຤ມໃ າຄ:
<html>
<head><title>ກາຌເລໃ ລີພໄຌ຦ົັຄເ຦ໄກັຍໜໄາຽ຤ັຍ</title></head>
<body bgcolor="yellow">
ລີພໄຌ຦ົັຄໜໄາຽ຤ັຍ຅ະຽຎັຌລີຽ຦ົວຄ
</body>
</html>
ກາຌເລໃ ຨູຍພາຍຽຎັຌພໄຌ຦ົັຄຂວຄໜໄາຽ຤ັຍຽພ຅ ຾ຠໃ ຌ຅ະເຆໄ຃ຸຌລ຺ຠຍັຈ background ແ຤ໄພາງເຌ <body>
຾ຣໄ຤ກາຌ຺ຈ຃ໃ າຽຎັຌຆໃ ຦ົ຋ີໃ ມູໃ ຨູຍ ຽຆິໃ ຄຠີຨູຍ຾ຍຍກາຌຂຼຌຈັໃ ຄຌີໄ:
<body background="ຆໃ ຋ີໃ ມູໃ ຂວຄຨູຍ">
ຉ຺຤ມໃ າຄ:
<html>

22. <head><title>ກາຌ຺ຈຨູຍພາຍຽຎັຌພໄຌ຦ົັຄໜໄາຽ຤ັຍ</title></head>
<body background="bg_1.jpg">
ພໄຌ຦ົັຄໜໄາຽ຤ັຍ຅ະຽຎັຌຨູຍພາຍ
</body>
</html>
2. ກາຌຌາເຆໄຨູຍພາຍ.
ຨູຍພາຍ຋ີໃ ຌາຠາເຆໄເຌວິຌຽຉີຽຌັຈ຃຤ຌຽຎັຌພາຍ຋ີໃ ຠີຌາຠລະກຸຌ .GIF ຦ົ .JPG ຽ຋຺ໃ າຌັໄຌ ຿ຈງຠີ
຦ົັກກາຌພິ຅າຣະຌາຽຣວກ຃: ພາຍ຋ີໃ ຠີລີຌໄວງ ຦ົພາຍ຋ີໃ ຉໄວຄກາຌຽຨັຈເ຦ໄພໄຌ຦ົັຄ຿ຎໃ ຄເລ຃຤ຌ ຍັຌ຋ຶກຽຎັຌ
ຌາຠລະກຸຌ .GIF ຾ຣະ ກາຌ຺ຈ຃ໃ າຽພີໃ ຠຽຉີຠ(Option) ຽຎັຌ Interlaced ໝາງ຃຤າຠ຤ໃ າ ເຌກາຌລະ຾ຈຄພາຍ
຅ະ຃ໃ ວງໂຆັຈຽ຅ຌຂຶໄຌຠາ. ຾ຉໃ ຊໄາຉໄວຄກາຌພາຍ຋ີໃ ຠີ຃຤າຠຣະວຼຈ,ຆັຈຽ຅ຌ຃຤ຌຽຣວກພາຍ຋ີໃ ຠີຌາຠລະກຸຌ
.JPG ກາຌຌາຨູຍພາຍຠາຎະກວຍເຌໜໄາຽ຤ັຍຠີຨູຍ຾ຍຍ
ກາຌຂຼຌຈັໃ ຄຌີໄ:
<img src="ຆໃ ຨູຍ຋ີໃ ຽຎັຌຌາຠລະກຸຌ .GIF ຦ົ .JPG">
ຌວກ຅າກຌັໄຌຽຨ຺າງັຄລາຠາຈກາຌ຺ຈ຃ຸຌຣັກລະຌະເ຦ໄກັຍຨູຍພາຍແຈໄ ຽພໃ ວເ຦ໄຨູຍພາຍລາ ຠາຈລະ຾ຈຄຨໃ ຤ຠກັຍ
ຂໄ຃຤າຠ ຾ຣະຽຨັຈເ຦ໄໜໄາຽ຤ັຍຠີ຃຤າຠໜໄາລ຺ຌເ຅ຂຶໄຌຉໃ ຠຈໄ຤ງກາຌຽພີໃ ຃ຸຌຣັກລະຌະຉໃ າຄໂຈັໃ ຄຣຸໃ ຠຌີໄແ຤ໄພາງເຌ
<img>.
align=top ຽຎັຌກາຌກາຌ຺ຈເ຦ໄຂໄ຃຤າຠລະ຾ຈຄມູໃ ຽ຋ິຄຨູຍ.
align=middle ຽຎັຌກາຌກາຌ຺ຈຂໄ຃຤າຠລະ຾ຈຄມູໃ ຽ຃ິໃ ຄກາຄຂວຄຨູຍ.
align=bottim ຽຎັຌກາຌກາຌ຺ຈຂໄ຃຤າຠລະ຾ຈຄມູໃ ຈໄາຌຣຸໃ ຠຂວຄຨູຍ.
align=left ຽຎັຌກາຌກາຌ຺ຈຂໄ຃຤າຠລະ຾ຈຄມູໃ ຽຍໄວຄຆໄາງຂວຄຨູຍ.
align=right ຽຎັຌກາຌກາຌ຺ຈຂໄ຃຤າຠລະ຾ຈຄມູໃ ຽຍໄວຄຂ຤າຂວຄຨູຍ.
width ກາຌ຺ຈຂະໜາຈ຃຤າຠກ຤ໄາຄຂວຄຨູຍ ຠີ຃ໃ າຽຎັຌຉ຺຤ຽຣກ.
height ກາຌ຺ຈ຃຤າຠລູຄຂວຄຨູຍ ຠີ຃ໃ າຽຎັຌຉ຺຤ຽຣກ.
hspace ຽຎັຌກາຌກາຌ຺ຈແຣງະ຦ໃ າຄຣະ຤ໃ າຄຂວຍຈໄາຌຆໄາງຂວຄຨູຍກັຍຂໄ຃຤າຠ.
vspace ຽຎັຌກາຌກາຌ຺ຈແຣງະ຦ໃ າຄຣະ຤ໃ າຄຂວຍຈໄາຌຽ຋ິຄຂວຄຨູຍກັຍຂໄ຃຤າຠ.
border ຽຎັຌກາຌກາຌ຺ຈຽລັໄຌຂວຍຂວຄຨູຍ.
ຉ຺຤ມໃ າຄ:
<html>
<head><title>Test HTML 2</title></head>
<body leftmargin="0" topmargin="0">
<marquee behavior="alternate" scrolldelay="500">ລະຍາງຈີ</marquee>
<hr color="red">

23. <img src="koala.jpg" width="200" border="1" align="left" hspace="10">
align=top ຽຎັຌກາຌກາຌ຺ຈເ຦ໄຂໄ຃຤າຠລະ຾ຈຄມູໃ ຽ຋ິຄຨູຍ.<br>
align=middle ຽຎັຌກາຌກາຌ຺ຈຂໄ຃຤າຠລະ຾ຈຄມູໃ ຽ຃ິໃ ຄກາຄຂວຄຨູຍ.<br>
align=bottim ຽຎັຌກາຌກາຌ຺ຈຂໄ຃຤າຠລະ຾ຈຄມູໃ ຈໄາຌຣຸໃ ຠຂວຄຨູຍ.
</body>
</html
ຍ຺ຈ຋ີ 9 ກາຌຽຆໃ ວຠ຿ງຄຽ຤ັຍຽພ຅
ກາຌຽຆໃ ວຠ຿ງຄຽ຤ັຍຽພ຅(Hyperlink) ຾ຠໃ ຌກາຌກາຌ຺ຈຂໄ຃຤າຠ ຦ົຨູຍພາຍເ຦ໄຽຎັຌ຅ູຈຂວຄກາຌຽຆໃ ວຠ຿ງຄແຎ
ງັຄ
ຽຌໄວ຦າຉໃ າຄໂ ຽຆິໃ ຄຽຌໄວ຦າຌັໄຌວາຈ຅ະມູໃ ເຌໜໄາຽ຤ັຍຽພ຅ຈຼ຤ກັຌເຌຽ຤ັຍແຆຈຼ຤ ຦ົຽ຤ັຍຽພ຅຋ີໃ ມູໃ ຽ຤ັຍເຆໄວໃ ຌກໃແຈໄ
຿ຈງກາຌຽຂໃ ວຠ຿ງຄຽ຤ັຍຽພ຅຅ະຠີ 2 ຾ຍຍ຃: ກາຌຽຆໃ ວຠ຿ງຄພາງເຌຽ຤ັຍຽພ຅ຈຼ຤ກັຌ,ກາຌຽຆໃ ວຠ຿ງຄພາງເຌ
ຽ຤ັຍແຆຈຼ຤ກັຌ,ກາຌຽຆໃ ວຠ຿ງຄແຎງັຄຽ຤ັຍແຆວໃ ຌ,ກາຌຽຆໃ ວຠ຿ງຄຽພໃ ວລ຺ໃ ຄວີຽຠຣ,ກາຌຽຆໃ ວຠ຿ງຄຽພໃ ວຈາ຤຿຦ົຈ
9.1 ກາຌຽຆໃ ວຠ຿ງຄພາງເຌໜໄາຽ຤ັຍຽພ຅ຈຼ຤ກັຌ.
ເຌໜໄາຽ຤ັຍຽພ຅຋ີໃ ຠີກາຌຌາລະຽໜີຂໄຠູຌຽຎັຌ຅າຌ຤ຌ຦ົ຤ຄ຦ົາງເຌໜໄາຽ຤ັຍຈຼ຤ ຽຨັຈເ຦ໄໜໄາຽ຤ັຍຠີ຃຤າຠງາ຤
຾ຣະ
ຽ຤ຣາຽຍິໃ ຄຂໄຠູຌກໃ ຉໄວຄເຆໄຽຠ຺ໄາຽຣໃ ວຌ຾ຊຍຽຣໃ ວຌຽພໃ ວຽຍິໃ ຄຂໄຠູຌ.
ຌວກ຅າກກາຌເຆໄຽຠ຺ໄາຽຣໃ ວຌ຾ຊຍຽຣໃ ວຌ຾ຣໄ຤ ຌັກວວກ຾ຍຍຽ຤ັຍຽພ຅ວາຈ຅ະລໄາຄ຅ຸຈກາຌຽຆໃ ວຠ຿ງຄແ຤ໄເຌໜໄາ
ຽ຤ັຍ
ຍໃ ວຌເຈຍໃ ວຌໜຶໃ ຄ຋ີໃ ຽໝາະລ຺ຠ ຿ຈງກາຌລໄາຄ຅ະຉໄວຄກາຌ຺ຈ 2 ມໃ າຄ຃: ຅ຸຈຉ຺ໄຌ຋າຄຂວຄກາຌຽຆໃ ວຠ຿ງຄ຾ຣະ
ຎາງ຋າຄ
ກາຌຽຆໃ ວຠ຿ງຄຽຆິໃ ຄຠີ຤ິ຋ີກາຌລໄາຄຈັໃ ຄຌີໄ:
9.1.1 ກາຌລໄາຄຎາງ຋າຄຂວຄກາຌຽຆໃ ວຠ຿ງຄ.
ຽຨ຺າ຅ະເຆໄ຾຋ັກ(Tag) <a> ຿ຈງຽພີໃ ຠ຃າລັໃ ຄ(Attribute) ຋ີໃ ຆໃ ຤ໃ າ name ຾ຣໄ຤ກາຌ຺ຈ຃ໃ າຽຎັຌຆໃ ຎາງ຋າຄຂວຄ
ກາຌ

24. ຽຆໃ ວຠ຿ງຄ
<a name="ຆໃ ຎາງ຋າຄຂວຄກາຌຽຆໃ ວຠ຿ງຄ">
9.1.2 ກາຌລໄາຄຉ຺ໄຌ຋າຄຂວຄກາຌຽຆໃ ວຠ຿ງຄ.
຾ຠໃ ຌຽຨ຺າ຅ະເຆໄ຾຋ັກ <a> ຿ຈງກາຌຽພີໃ ຠ຃າລັໃ ຄ href ຾ຣໄ຤ກາຌ຺ຈ຃ໃ າຽຎັຌຆໃ ຎາງ຋າຄຂວຄກາຌຽຆໃ ວຠ຿ງຄພໄວຠ
ກັຍ
ພິຠຽ຃ໃ ວຄໝາງ # ຌາໜໄາ
<a href="#ຆໃ ຎາງ຋າຄຂວຄກາຌຽຆໃ ວຠ຿ງຄ">ຂໄ຃຤າຠ຋ີໃ ຽຎັຌ຅ຸຈກາຌຽຆໃ ວຠ຿ງຄ</a>
ຉ຺຤ມໃ າຄ:
<p>
<a href="#html">HTML ຾ຠໃ ຌ຦ງັຄ?</a><br />
<a href="#structure">຿຃ຄລໄາຄຂວຄພາລາ HTML ຠີ຃຾ຌ຤ເຈ?</a><br />
<a href="#tag">Tag ຃າລັໃ ຄພາລາ HTML ຠີ຦ງັຄ຾ຈໃ ?</a>
</p>
<p>HTML<a name="html"></a></p>
<p>ພາລາ HTML ຦ງໄຠາ຅າກ HyperText Markup Language ຽຎັຌພາລາ຃ວຠພິ຤ຽຉີວີກພາລາໜຶໃ ຄ຋ີໃ ຠີ
຿຃ຄ
ລໄາຄກາຌຂຼຌ຿ຈງວາເລຉ຺຤ກາກັຍ(Tag) ຽຎັຌຉ຺຤຃຤ຍ຃ຸຠກາຌລະ຾ຈຄຏ຺ຌຂໄ຃຤າຠ,ຨູຍພາຍ,ວ຺ຄຎະກວຍວໃ ຌໂ
ຏໃ າຌ຿ຎຢ຾ກຢຠຎະຽພຈ ຽ຤ັຍຍຢາ຤ຽຆີ. ເຌ຾ຉໃ ຣະ Tag ວາຈ຅ະຠີລໃ ຤ຌຂະ຦ງາງ(Attribute) ລາຣັຍກາຌ຺ຈ
຦ຣ ຃຤ຍ຃ຸຠກາຌລະ຾ຈຄຏ຺ຌຂວຄຽ຤ັຍເ຦ໄຽຎັຌແຎຉາຠ຋ີໃ ຏູໄວວກ຾ຍຍຽ຤ັຍແຆກາຌ຺ຈແ຤ໄ.</p>
<p>຿຃ຄລໄາຄຂວຄພາລາ HTML<a name="structure"></a></p>
<p>ລາຣັຍ຃າລັໃ ຄ ຦ົ Tag ເຌພາລາ HTML ຎະກວຍຈໄ຤ງຽ຃ໃ ວຄໝາງຌໄວງກ຤ໃ າ “&lt; ” ຉາຠຈໄ຤ງ຃າລັໃ ຄ
຾ຣະ ຎິຈ຋ໄາງຈໄ຤ງຽ຃ໃ ວຄໝາງເ຦ງໃ ກ຤ໃ າ “ &gt; ” ຽຎັຌລໃ ຤ຌ຋ີໃ ຽຨັຈໜໄາ຋ີໃ ຉ຺ຍ຾ຉໃ ຄຂໄ຃຤າຠຽພໃ ວລະ຾ຈຄຏ຺ຌ,
຿ຈງ຋຺ໃ ຤ແຎ຃າລັໃ ຄພາລາ HTML ຅ະມູໃ ຽຎັຌ຃ູໃ ,ຠີພຼຄຍາຄ຃າລັໃ ຄຽ຋຺ໃ າຌັໄຌ຋ີໃ ຠີພຼຄ຃າລັໃ ຄຈຼ຤,ເຌ຾ຉໃ ຣະ຃ູໃ ຃າລັໃ ຄ
຅ະຠີ຃າລັໃ ຄຽຎີຈ(Tag ຽຎີຈ) ຾ຣະ ຃າລັໃ ຄຎິຈ(Tag ຎິຈ) ຠີຨູຍ຾ຍຍຽໝວຌກັຌ ຉໃ າຄ຾ຉໃ ເຌລໃ ຤ຌຂວຄ
຃າລັໃ ຄຎິຈ຅ະຠີຽ຃ໃ ວຄໝາງ / ຌາໜໄາ຃າລັໃ ຄ ຾ຣະ ເຌ຾ຉໃ ຣະ຃າລັໃ ຄຽຎີຈວາຈ຅ະຠີລໃ ຤ຌຂະ຦ງາງ຋ີໃ ຂຼຌຈໄ຤ງ
຃າລັຍພາລາວັຄກິຈຉ຺຤ພິຠຌໄວງ ຦ົ ພິຠເ຦ງໃ ກໃ ແຈໄ</p>
<p>ຍັຌຈາ Tag ຃າລັໃ ຄພໄຌຊາຌຂວຄພາລາ HTML.<a name="tag"></a></p>
<p>ກາຌ຺ຈ຦຺຤ຂໄຽຣໃ ວຄ(Headings).</p>
<p>Heading ຽຎັຌກາຌກາຌ຺ຈ຦຺຤ຂໄຽຣໃ ວຄ ຿ຈງເຆໄ Tag &lt;h1&gt; ຽຊິຄ &lt;h6&gt; ຽຆິໃ ຄ &lt;h1&gt;
ຠີຂະໜາຈເ຦ງໃ ລຸຈ &lt;h6&gt; ຠີຂະໜາຈຌໄວຌລຸຈ ຠີຨູຍ຾ຍຍກາຌຂຼຌຈັໃ ຄຌີໄ:<br />

25. &lt;h1&gt;This is a heading&lt;/h1&gt;<br />
ຏ຺ຌແຈໄຨັຍ
9.2 ກາຌຽຆໃ ວຠ຿ງຄແຎງັຄຽ຤ັຍຽພ຅ວໃ ຌ ຦ົຽ຤ັຍແຆວໃ ຌ.
ຽຨ຺າ຅ະເຆໄ຾຋ັກ຃າລັໃ ຄ <a> ຾ຣໄ຤ຽພີໃ ຠ຃າລັໃ ຄ href ແ຤ໄພາງເຌ,຅າກຌັໄຌກາຌ຺ຈ຃ໃ າ href ເ຦ໄຽ຋຺ໃ າກັຍຆໃ ຾ຣະຍໃ ວຌມູໃ

26. ຂວຄຽ຤ັຍຽພ຅ ຦ົຽ຤ັຍແຆຌັໄຌໂ ລັຄຽກຈຨູຍ຾ຍຍກາຌຂຼຌຈັໃ ຄຣຸໃ ຠຌີໄ:
<a href="ຆໃ ຦ົຍໃ ວຌມູໃ ຂວຄຽ຤ັຍຽພ຅">ຂໄ຃຤າຠ຋ີໃ ຽຎັຌ຅ຸຈກາຌຽຆໃ ວຠ຿ງຄ</a>
ຉ຺຤ມໃ າຄ:
<p>
<strong>ຽຠຌູ຦ົັກ</strong><br>
<a href="history.html">history</a><br>
<a href="http://www.moe.gov.la">ຽ຤ັຍແຆກະຆ຤ຄລຶກລາ຋ິກາຌ ຾ຣະກິຣາ</a><br>
</p>
9.3 ກາຌຽຆໃ ວຠ຿ງຄແຎງັຄວີຽຠຣ.
ຽຨ຺າ຅ະເຆໄ຾຋ັກ຃າລັໃ ຄ <a> ຾ຣໄ຤ຽພີໃ ຠ຃າລັໃ ຄ href ແ຤ໄພາງເຌ,຅າກຌັໄຌກາຌ຺ຈ຃ໃ າ href ເ຦ໄຽ຋຺ໃ າກັຍ mailto:຋ີໃ ມູໃ ວີ
ຽຠຣ
຋ີໃ ຉໄວຄກາຌລ຺ໃ ຄຽຠຣແຎຽຊິຄ ລັຄຽກຈຨູຍ຾ຍຍກາຌຂຼຌຈັໃ ຄຣຸໃ ຠຌີໄ:
<a href="mailto:ngaviseth@live.com">ລວຍຊາຠຽພີໃ ຠຽຉີຠ</a>
9.3 ກາຌຽຆໃ ວຠ຿ງຄແຎງັຄຽວກະລາຌວໃ ຌໂ.
ຽຨ຺າ຅ະເຆໄ຾຋ັກ <a> ຃ກັຍກາຌຽຆໃ ວຠ຿ງຄ຾ຍຍວໃ ຌໂ ຉໃ າຄ຾ຉໃ ຽຨ຺າ຅ະກາຌ຺ຈ຃ໃ າຂວຄ຃າລັໃ ຄ href ຽ຋຺ໃ າກັຍຆໃ
ຽວກະລາຌ
຋ີໃ ຽຨ຺າຉໄວຄກາຌຽຆໃ ວຠ຿ງຄແຎຽຊິຄ
ຉ຺຤ມໃ າຄ:
<p>
<strong>ຈາ຤຿຦ົຈ</strong><br>
<a href="chapter1.doc">ຍ຺ຈຨຼຌງ຺ຈ຋ີ 1</a><br>
<a href="homework.pdf">຤ຼກຍໄາຌ</a><br>
</p>

27. ຏ຺ຌແຈໄຨັຍ

28. ຍ຺ຈ຋ີ 10 ກາຌລໄາຄຣາງກາຌ
10.1 ກາຌລໄາຄຣາງກາຌ຾ຍຍຠີຽຣກຣາຈັຍ(OL: Ordered List).
ກາຌລໄາຄຣາງກາຌ຾ຍຍຌີໄ຅ະເຆໄ Tag <ol> ຃ູໃ ກັຍ <li> ຽພໃ ວລະ຾ຈຄຏ຺ຌຣາງກາຌ ຽຆິໃ ຄຽຨ຺າລາຠາຈ
ກາຌ຺ຈຽຣກຣາຈັຍຽຎັຌ ຉ຺຤ຽຣກ,ຉ຺຤ວັກລວຌ ຦ົ ຽຣກ຿ຣ຾ຠັຄ ແຈໄຈັໃ ຄຌີໄ:

29. 10.2 ກາຌລໄາຄຣາງກາຌ຿ຈງຠີລັຌງາຣັກຌາໜໄາ(Unordered List ຦ົ Bullet List).
ກາຌລໄາຄຣາງກາຌ຾ຍຍຌີໄ ຾ຠໃ ຌຽຨ຺າ຅ະເຆໄ Tag <ul> ຃ູໃ ກັຍ <li> ຽຆິໃ ຄຽຨ຺າລາຠາຈກາຌ຺ຈລັຌງາຣັກມູໃ
ໜໄາຣາງກາຌແຈໄ຿ຈງເຆໄ attribute Type ຾ຣະ ກາຌ຺ຈ຃ໃ າ type ຽ຋຺ໃ າກັຍ disc, circle ຾ຣະ square ເ຦ໄລັຄ
ຽກຈຉ຺຤ມໃ າຄຣຸໃ ຠຌີໄ:

30. ຍ຺ຈ຋ີ 11 ກາຌລໄາຄຉາຉະຣາຄຂໄຠູຌ
຃າລັໃ ຄ຋ີໃ ເຆໄລາຣັຍລໄາຄຉາຉະຣາຄຠີມູໃ ຦ົາງ຃າລັໃ ຄ຃
ຆໃ Tag ຃຤າຠໝາງ
<table> </table> ລາຣັຍກາຌ຺ຈຂວຍຽຂຈກາຌລໄາຄຉາຉະຣາຄ
<th> </th> ລາຣັຍຂໄ຃຤າຠ຋ີໃ ຽຎັຌ຦຺຤ຽຣໃ ວຄຂວຄຊັຌຉາຉະຣາຄຂໄຠູຌ
<tr> </tr> ກາຌ຺ຈ຅າຌ຤ຌ຾ຊ຤ຂວຄຉາຉະຣາຄ
<td> </td> ກາຌ຺ຈ຅າຌ຤ຌຊັຌຂວຄຉາຉະຣາຄ
ຠີຨູຍ຾ຍຍ຿຃ຄລໄາຄກາຌຂຼຌຈັໃ ຄຌີໄ:
<table>
<tr> <th>….</th> ….</tr>
<tr><td>……</td>…..</tr>
</table>
ຉ຺຤ມໃ າຄ:
<table>
<tr>
<th>ຣະ຦ັຈພະຌັກຄາຌ</th>
<th>ຆໃ ຾ຣະ ຌາຠລະກຸຌ</th>
<th>ຽຄ ິຌຽຈວຌ (ກີຍ)</th>
</tr>
<tr>

31. <td>001</td>
<td>຋ໃ າຌ ຋ວຄຈີ ຠີແຆ</td>
<td>2,000,000 </td>
</tr>
<tr>
<td>002</td>
<td>ຌາຄ ຃າລວຌ ຠີ຿ຆກ</td>
<td>1,500,00</td>
</tr>
</table>
ຏ຺ຌແຈໄຨັຍ
ຌວກ຅າກຌັໄຌ ຽຨ຺າງັຄລາຠາຈກາຌ຺ຈ຃ຸຌລ຺ຠຍັຈເ຦ໄກັຍຉາຉະຣາຄແຈໄ ຿ຈງເຆໄ attribute ຉໃ າຄໂ຃:
1) Attribute ຋ີໃ ເຆໄເຌ Tag <table> ຠີ຃:
- align ລາຣັຍ຅ັຈຉາ຾ໜໃ ຄຆວຄຉາຉະຣາຄ ຿ຈງຠີ຃ໃ າຽ຋຺ໃ າກັຍ left,center,right.
- border ລາຣັຍກາຌ຺ຈ຃຤າຠໜາຂວຄຽລັໄຌຂວຍຉາຉະຣາຄ ຠີ຃ໃ າຽ຋຺ໃ າກັຍຉ຺຤ຽຣກ(ຠີ຦຺຤ໜໃ ຤ງ ຽຎັຌ pixel ຦ົ %).
- bordercolor ລາຣັຍກາຌ຺ຈລີຽລັໄຌຉາຉະຣາຄ ຠີ຃ໃ າຽຎັຌ ຣະ຦ັຈລີ ຦ົ ຆໃ ລີ(ພາລາວັຄກິຈ).
- width ລາຣັຍກາຌ຺ຈ຃຤າຠກ຤ໄາຄຂວຄຉາຉະຣາຄ ຠີ຃ໃ າຽຎັຌຉ຺຤ຽຣກ(຦຺຤ໜໃ ຤ງຽຎັຌ pixel ຦ົ %)
- bgcolor ລາຣັຍກາຌ຺ຈລີພໄຌ຦ຣັຄຂວຄຉາຉະຣາຄ ຠີ຃ໃ າຽຎັຌ ຣະ຦ັຈລີ ຦ົ ຆໃ ລີ.
- background ລາຣັຍກາຌ຺ຈພໄຌ຦ົັຄຂວຄຉາຉະຣາຄເ຦ໄຽຎັຌຨູຍພາຍ ຠີ຃ໃ າຽຎັຌ ຆໃ ຾ຣະ ຌາຠລະກຸຌຂວຄຨູຍຌັໄຌໂ.
- cellspacing ກາຌ຺ຈຆໃ ວຄ຤ໃ າຄຣະ຦຤ໃ າຄ຦ໄວຄຂວຄຉາຉະຣາຄ ຠີ຃ໃ າຽຎັຌຉ຺຤ຽຣກ.
- cellpadding ກາຌ຺ຈແຣງະ຦ໃ າຄຣະ຦຤ໃ າຄຂໄ຃຤າຠກັຍຽລັໄຌຂວຍເຌ຦ໄວຄຉາຉະຣາຄ ຠີ຃ໃ າຽຎັຌຉ຺຤ຽຣກ(຦຺຤ໝໃ ຤ງ
ຽຎັຌ pixel ຦ົ %).
2) Attribute ຋ີໃ ເຆໄເຌ Tag <tr> ຠີ຃:
- align ລາຣັຍ຅ັຈຉາ຾ໜໃ ຄຂໄ຃຤າຠເຌ຦ໄວຄຉາຉະຣາຄຉາຠຣ຤ຄຌວຌຠີ຃ໃ າຽຎັຌ left,center,right.
- valign ລາຣັຍ຅ັຈຉາ຾ໜໃ ຄຂໄຠູຌເຌ຦ໄວຄຉາຉະຣາຄຉາຠຣ຤ຄຉັໄຄຠີ຃ໃ າຽຎັຌ top,middle,bottom.
- bgcolor ລາຣັຍກາຌ຺ຈລີພໄຌຂວຄ຾ຊ຤ຉາຉະຣາຄ ຠີ຃ໃ າຽຎັຌ ຣະ຦ັຈລີ ຦ົ ຆໃ ລີ.
3) Attribute ຋ີໃ ເຆໄເຌ Tag <td> ຠີ຃:
- align ລາຣັຍ຅ັຈຉາ຾ໜໃ ຄຂໄ຃຤າຠເຌ຦ໄວຄຉາຉະຣາຄຉາຠຣ຤ຄຌວຌຠີ຃ໃ າຽຎັຌ left,center,right.
- valign ລາຣັຍ຅ັຈຉາ຾ໜໃ ຄຂໄຠູຌເຌ຦ໄວຄຉາຉະຣາຄຉາຠຣ຤ຄຉັໄຄຠີ຃ໃ າຽຎັຌ top,middle,bottom.
- width ກາຌ຺ຈ຃຤າຠກ຤ໄາຄຂວຄ຦ໄວຄຉາຉະຣາຄ ຠີ຃ໃ າຽຎັຌຉ຺຤ຽຣກ(຦຺຤ໜໃ ຤ງ pixel ຦ົ %).

32. - height ກາຌ຺ຈ຃຤າຠລູຄຂວຄ຦ໄວຄຉາຉະຣາຄ ຠີ຃ໃ າຽຎັຌຉ຺຤ຽຣກ(຦຺຤ໜໃ ຤ງ pixel ຦ົ %).
- colspan ກາຌຣ຤ຠ຦ໄວຄຉາຉະຣາຄ຦ົາງ຦ໄວຄຽຎັຌ຦ໄວຄຈຼ຤ຉາຠຊັຌ ຠີ຃ໃ າຽຎັຌຉ຺຤ຽຣກ.
- rowspan ກາຌຣ຤ຠ຦ໄວຄຉາຉະຣາຄ຦ົາງ຦ໄວຄຽຎັຌ຦ໄວຄຈຼ຤ຉາຠ຾ຊ຤ ຠີ຃ໃ າຽຎັຌຉ຺຤ຽຣກ.
- bgcolor ກາຌ຺ຈລີພໄຌ຦ົັຄຂວຄ຦ໄວຄຉາຉະຣາຄ.
ຉ຺຤ມໃ າຄ:
<table align="center" border="1" width="80%" bgcolor="#FFFF99">
<tr>
<th width="131">ຣະ຦ັຈພະຌັກຄາຌ</th>
<th width="186">ຆໃ ຾ຣະ ຌາຠລະກຸຌ</th>
<th width="135">ຽຄ ິຌຽຈວຌ (ກີຍ)</th>
</tr>
<tr>
<td>001</td>
<td>຋ໃ າຌ ຋ວຄຈີ ຠີແຆ</td>
<td>2,000,000 </td>
</tr>
<tr>
<td>002</td>
<td>ຌາຄ ຃າລວຌ ຠີ຿ຆກ</td>
<td>1,500,00</td>
</tr>
</table>

33. ຍ຺ຈ຋ີ 12 ກາຌລໄາຄ຾ຍຍຟວຠ(Form)
຾ຍຍຟວຠ຋ີໃ ລໄາຄຂຶໄຌເຌຽ຤ັຍແຆ຾ຠໃ ຌຽພໃ ວເຆໄລາຣັຍກາຌຨັຍ-ລ຺ໃ ຄຂໄຠູຌ຅າກຣະ຦຤ໃ າຄຏູໄເຆໄ ຾ຣະຽ຅຺ໄາຂວຄຽ຤ັຍແຆ
຾ຍຍຟວຠຉໃ າຄໂ຋ີໃ ພ຺ຍຽ຦ັຌເຌຽ຤ັຍແຆ ຽຆັໃ ຌ ຾ຍຍລວຍຊາຠ,ເຍລັໃ ຄຆໄ,ກາຌຣ຺ຄຊະຍຼຌຽຎັຌລະຠາຆິກ,
ລະໝຸຈມໄຼຠມາຠ,ລະ຾ຈຄ຃຤າຠ຃ິຈຽ຦ັຌ ຽຎັຌຉ຺ໄຌ.

34. ຿ຈງຎ຺ກກະຉິ຾ຣໄ຤ ກາຌຍັຌ຋ຶກຂໄຠູຌ຅າກ຾ຍຍຟວຠ຅ະເຆໄ຿ຎຢ຾ກຢຠຎະຽພຈ Server Script
ຽຆັໃ ຌ APS,PHP, ວໃ ຌໂ.
Tag ຃າລັໃ ຄເຌກາຌລໄາຄ form ຠີຈັໃ ຄຌີໄ:
<form name= “ຆໃ ຾ຍຍຟວຠ” method= “post/get” action= “URL” target= “ກາຌລະ຾ຈຄ”>
ຆໃ ວຄຨັຍຂໄຠູຌຎະຽພຈຉໃ າຄໂ...
......
</form>
ຽຆິໃ ຄພາງເຌ form ຅ະຠີວ຺ຄຎະກວຍ຋ີໃ ຽຎັຌຆໃ ວຄຨັຍຂໄຠູຌມູໃ 3 ຎະຽພຈ ຃:
12. ຆໃ ວຄຨັຍຂໄຠູຌຎະຽພຈ Input.
ຽຎັຌຨູຍ຾ຍຍ຋ີໃ ຠີແ຤ໄລາຣັຍກາຌ຺ຈຨູຍ຾ຍຍຂວຄຆະຌິຈຂໄຠູຌ຋ີໃ ຅ະຌາຽຂ຺ໄາແຎເຌ຾ຍຍຟວຠ ຽຆິໃ ຄຠີຨູຍ຾ຍຍກາຌຌາ
ເຆໄ
6 ຨູຍ຾ຍຍ ຃ຈັໃ ຄຉໃແຎຌີໄ:
12.1 ຆໃ ວຄຨັຍຂໄຠູຌ຾ຍຍ text.
ຽຎັຌຨູຍ຾ຍຍ຋ີໃ ຠີຣັກລະຌະຽຎັຌຂໄ຃຤າຠ ຠີຨູຍ຾ຍຍກາຌຂຼຌຈັໃ ຄຌີໄ:
<form>ຂໄຠູຌ຋ີໃ ຉໄວຄກາຌລະ຾ຈຄຏ຺ຌ
<input name="ຆໃ ຆໃ ວຄຨັຍຂໄຠູຌ" type="ຨູຍ຾ຍຍຆໃ ວຄຨັຍຂໄຠູຌ" size="຃຤າຠງາ຤ຂວຄຆໃ ວຄຨັຍຂໄຠູຌ"
maxlength="຅າຌ຤ຌຉ຺຤ວັກລວຌ" value="ຆໃ ຦ງໄຂວຄຂໄຠູຌ">
</form>
ຉ຺຤ມໃ າຄ:
<form>
username:<input type="text" name="user" size="25" maxlength="12">
</form>
ຏ຺ຌແຈໄຨັຍ
12.2 ຆໃ ວຄຨັຍຂໄຠູຌ຾ຍຍ password.
ຽຎັຌກາຌຨັຍຂໄຠູຌ຃ໄາງ຃ກັຍ text ຾ຉໃ ຅ະລະ຾ຈຄຂໄ຃຤າຠຽຎັຌຣະ຦ັຈ຾຋ຌຉ຺຤ວັກລວຌ ຽຆິໃ ຄຠີຨູຍ຾ຍຍກາຌຂຼຌ
ຈັໃ ຄຌີໄ:
ຉ຺຤ມໃ າຄ:

35. <form>
password:<input type="password" name="pwd" size="24" maxlength="12">
</form>
ຏ຺ຌແຈໄຨັຍ
12.3 ຆໃ ວຄຨັຍຂໄຠູຌ຾ຍຍ checkbox.
ຽຎັຌຂໄຠູຌ຋ີໃ ຠີຣັກລະຌະຽຎັຌຉ຺຤ຽຣວກ ຅ະລະ຾ຈຄຏ຺ຌຽຎັຌຍັວກລີໃ ຦ົໃ ຼຠ ຾ຣະລາຠາຈຽຣວກແຈໄ຦ົາງຉ຺຤ຽຣວກ
ຈໄ຤ງກາຌ
ເຆໄຽຠ຺ໄາ຃ຣິກເລໃ ຣາງກາຌ຋ີໃ ຉໄວຄກາຌ ຽຆິໃ ຄຠີຨູຍ຾ຍຍກາຌຂຼຌຈັໃ ຄຌີໄ:
< form>
<input type="checkbox" name="ຆໃ ຂວຄຂໄຠູຌ຋ີ1" value="຃ໃ າຂໄຠູຌ຋ີ1຋ີໃ ຅ະລ຺ໃ ຄແຎ">ຂໄຠູຌ຋ີໃ
ຉໄວຄກາຌລະ຾ຈຄ
<input type="checkbox" name="ຆໃ ຂວຄຂໄຠູຌ຋ີ2" value="຃ໃ າຂໄຠູຌ຋ີ2຋ີໃ ຅ະລ຺ໃ ຄແຎ">ຂໄຠູຌ຋ີໃ
ຉໄວຄກາຌລະ຾ຈຄ
</form>
ຉ຺຤ມໃ າຄ:
<form>ຣະຈັຍກາຌລຶກລາ:
<input type="checkbox" name="tech" value="technical">຤ິຆາຆີຍຆັໄຌກາຄ
<input type="checkbox" name="high" value="higher">຤ິຆາຆີຍຆັໄຌລູຄ
</form>
ຏ຺ຌແຈໄຨັຍ
12.4 ຆໃ ວຄຨັຍຂໄຠູຌ຾ຍຍ radio.
ຂໄຠູຌ຋ີໃ ຠີຣັກລະຌະຽຎັຌຉ຺຤ຽຣວກ ຿ຈງ຅ະລະ຾ຈຄຽຎັຌຨູຍ຤຺ຄຠ຺ຌຌໄວງໂ ຽພໃ ວເ຦ໄຽຣວກ຾ຣະລາຠາຈຽຣວກແຈໄ
ພຼຄ

36. ຉ຺຤ຽຣວກຈຼ຤ ລັຄຽກຈຨູຍ຾ຍຍກາຌຂຼຌຈັໃ ຄຣຸໃ ຠຌີໄ:
< form>
<input type="radio" name="ຆໃ ຂໄຠູຌ1" value="຃ໃ າຂວຄຂໄຠູຌ຋ີໃ ຅ະລ຺ໃ ຄ">ຂໄຠູຌ຋ີໃ ຉໄວຄກາຌລະ຾ຈຄ
<input type="radio" name="ຆໃ ຂໄຠູຌ2" value="຃ໃ າຂວຄຂໄຠູຌ຋ີໃ ຅ະລ຺ໃ ຄ">ຂໄຠູຌ຋ີໃ ຉໄວຄກາຌລະ຾ຈຄ
</form>
ຉ຺຤ມໃ າຄ:
<form>ຽຣວກຽພຈ:
<input type="radio" name="f" value="female">຾ຠໃ ງິຄ
<input type="radio" name="m" value="male">ຏູໄຆາງ
</form>
ຏ຺ຌແຈໄຨັຍ
12.5 ຆໃ ວຄຨັຍຂໄຠູຌ຾ຍຍ submit ຾ຣະ reset.
຾ຠໃ ຌຆໃ ວຄຨັຍຂໄຠູຌ຋ີໃ ຽຎັຌຎຸໃ ຠ ເຆໄແ຤ໄລາຣັຍກ຺ຈຽພໃ ວລ຺ໃ ຄຂໄຠູຌ(submit)ແຎງັຄ ຽຆີຍຽ຤ີ ຾ຣະຽຎັຌຎຸໃ ຠຽພໃ ວຣຶຍຂໄຠູຌ
຋ັຄໝ຺ຈ຋ີໃ ຎໄວຌແ຤ໄເຌ຾ຍຍຟວຠ(reset) ຿ຈງຠີຨູຍ຾ຍຍກາຌຂຼຌຈັໃ ຄຣຸໃ ຠຌີໄ:
< form>
<input type="submit" value="຃ໃ າຂວຄຂໄຠູຌ຋ີໃ ຎະກ຺ຈຽ຋ິຄຎຸໃ ຠ">
<input type="reset" value="຃ໃ າຂວຄຂໄຠູຌ຋ີໃ ຎະກ຺ຈຽ຋ິຄຎຸໃ ຠ">
< /form>
ຉ຺຤ມໃ າຄ:
<form>
username:<input type="text" name="user" size="25" maxlength="12"> <br>
password:<input type="password" name="pwd" size="24" maxlength="12"><br>
<input type="submit" value="ລ຺ໃ ຄຂໄຠູຌ">
<input type="reset" value="ງ຺ກຽຣີກ">
</form>

37. ຏ຺ຌແຈໄຨັຍ
13.ຆໃ ວຄຨັຍຂໄຠູຌຎະຽພຈ textarea.
ຽຎັຌຨູຍ຾ຍຍເຌກາຌລໄາຄຆໃ ວຄຨັຍຂໄຠູຌ຾ຍຍ຦ົາງ຾ຊ຤ຈໄ຤ງ຾຋ັກ຃າລັໃ ຄ <textarea> ຽຆິໃ ຄຠີຨູຍ຾ຍຍກາຌຂຼຌ
ຈັໃ ຄຌີໄ:
< form>
< textarea name="ຆໃ ຂໄຠູຌ" rows="຅າຌ຤ຌ຾ຊ຤" cols="຅າຌ຤ຌຊັຌ">
ຂໄຠູຌ຋ີໃ ຉໄວຄກາຌລະ຾ຈຄຏ຺ຌແ຤ໄເຌຆໃ ວຄຨັຍຂໄຠູຌ
</textarea>
< /form>
ຉ຺຤ມໃ າຄ:
<form>
ລະ຾ຈຄ຃າຽ຦ັຌ:<br>
<textarea name="text1" rows="5" cols="40">
ຂໄຠູຌ຋ີໃ ຉໄວຄກາຌລະ຾ຈຄຏ຺ຌແ຤ໄເຌຆໃ ວຄຨັຍຂໄຠູຌ
</textarea>
</form>
ຏ຺ຌແຈໄຨັຍ

38. 14. ຆໃ ວຄຨັຍຂໄຠູຌຎະຽພຈ select.
ເຌກາຌລໄາຄຉ຺຤ຽຣວກຈໄ຤ງ຾຋ັກ຃າລັໃ ຄ <select> ຾ຠໃ ຌກາຌລໄາຄຣາງກາຌ຾ຍຍ drop-down ຽຆິໃ ຄຠີຨູຍ຾ຍຍ
ກາຌຂຼຌ
ຈັໃ ຄຌີໄ:
<form>
<select name="ຆໃ ຂໄຠູຌ">
<option value="຃ໃ າຉ຺຤ຽຣວກ຋ີ1">ຉ຺຤ຽຣວກ຋ີ1</option>
<option value="຃ໃ າຉ຺຤ຽຣວກ຋ີ2">ຉ຺຤ຽຣວກ຋ີ2</option>
<option value="຃ໃ າຉ຺຤ຽຣວກ຋ີ3">ຉ຺຤ຽຣວກ຋ີ3</option>
..............
</select>
</form>
ຉ຺຤ມໃ າຄ:
<form>ຎະຽ຋ຈ:
<select name="country">
<option value="laos">ລ.ຎ.ຎ ຣາ຤</option>
<option value="vietnam">຦຤ຼຈຌາຠ</option>
<option value="japan">ມີໃ ຎຸໃ ຌ</option>
..............
</select>
</form>
ຏ຺ຌແຈໄຨັຍ