Thursday, May 17, 2012

រៀនអំពី HTML


សេចក្ដីលម្អិត
បាន​ចេញ​ផ្សាយ​នា ព្រហស្បតិ៍, 10 វិច្ឆិកា 2011 07:20
និពន្ធ​ដោយ ជួន រតនា
ចុច​ដង៖ 4988
Description: http://www.itkonkhmer.com/images/article/html/logo-html.jpg
HTML មកពីពាក្យ Hypertext Markup Language HTML គឺជាភាសាដំបូងសម្រាប់ សរសេរ គេហទំព័រ។ក្នុង HTML គេប្រើ Tag សម្រាប់ធ្វើការកំណត់នានា។
ឧទាហរណ៍
Description: http://www.itkonkhmer.com/images/article/html/1.gif
សេចក្ដីលម្អិត
HTML មាន​ចែក​ជា​ពីរ​ផ្នែក​ធំ​ៗ គឺ tag Header និង tag Body ហើយ tag ទាំង​ពីរ​នេះ ត្រូវ​ស្ថិត​នៅ​ក្នុង tag HTML
ខាង​ក្រោម​នេះ គឺ​ជា​ទំរង់​ទូទៅ​របស់ HTML
1.<html>
2.<head><title>Name of Page</title></head>
3.<body>
4.// any text here
5.</body>
6.</html>
សំគាល់:
<html> គឺជា tag ដែល​យើង​ប្រើ​ដើម្បី​បើក​នៅ​ពេល​ដែល​ចាប់​ផ្តើម​ដំបូង​និង​នៅ​ពេល​បញ្ចប់​នៃ Page របស់​យើង​។
<body>
គឺ​ជា tag សម្រាប់​ឲ្យ​យើង​សរសេរ​កូដ​ផ្សេង​ដើម្បី​បង្ហាញ​នៅ​លើ​Page របស់​យើង ។
ឧទាហរណ៍
1.<html>
2.<head><title>Name of Page</title></head>
3.<body>
4.This is my first time with HTML.
5.</body>
6.</html>

៣. កម្មវិធីសម្រាប់សរសេរ HTML

សេចក្ដីលម្អិត
យើងមានកម្មវិធីជាច្រើនដែលប្រើសម្រាប់សរសេរ HTML មានដូចជា Dreamweaver, Notepad ,Notepad++ WordPad ជាដើម។
Description: http://www.itkonkhmer.com/images/article/html/notepad.pngDescription: http://www.itkonkhmer.com/images/article/html/npplogo.pngDescription: http://www.itkonkhmer.com/images/article/html/200x200.jpg

ទាញយក

កម្មវិធី Adobe Dreamweaver CS5
សេចក្ដីលម្អិត
ដើម្បី​បង្កើត​នូវ Page HTML យើង​អាច​បង្កើត​តាម​កម្ម​វិធី​ជា​ច្រើន​ដូច​ជា Dreamweaver, Notepad , Notepad++ WordPad ជា​ដើម តែ​ពេល​នេះ អាយ​ធី​កូន​ខ្មែរ សូម​លើក​យក​កម្ម​វិធី Notepad មក​បង្ហាញ។ Notepad គឺ​ជា​កម្ម​វិធី​តូច​មួយ​របស់​វីន​ដូ​ផ្ទាល់ ហើយ​ជា​ទូទៅ​សម្រាប់ អ្នក​ដែល​រៀន HTML គួរ​តែ​ប្រើ​វា។
១. បើកកម្មវិធី Notepad : Start -> Run -> Notepad
(
ឬចុច Mouse ស្តាំយក New -> Text Document )
២. ធ្វើការសរសេរ Code របស់ HTML
៣. រក្សាទុកវាជា File HTML ដែលមាន Extension .html
សេចក្ដីលម្អិត
HTML គឺជា Markup Language ដូច​នេះ​វាកើត​ឡើង​ពី​បណ្តុំ​នៃ tag ហើយ Tag របស់​វា​មាន​ពីរ​គឺ Open tag និង Close tag
ឧទាហរណ៍
1.This is my frist paragraph.
2.<h1>This is heading 1</h1>
ប៉ុន្តែ​ទន្ទឹម​នឹង​នោះ វា​ក៏​មាន tag មួយ​ចំនួន​ដែល​មិន​មាន Open tag ដូច​ឧទាហរណ៍​ខាង​ក្រោម:
1.<img src="path/image_name.extension" ... />
2.// new line
3.// insert a line
សំគាល់:
- <p> . . . </p> :គឺជា tag សម្រាប់កំណត់អត្ថបទរបស់យើងជាកថាខណ្ខ។
- <br/> :
គឺជា Tag ប្រើសម្រាប់ចុះបន្ទាត់។
- <hr/> :
គឺជា Tag ប្រើសម្រាប់ទាញយកនូវបន្ទាត់មកបង្ហាញនៅលើ Page របស់យើង។
សេចក្ដីលម្អិត
Tag របស់ HTML ភាគច្រើនតែងតែមាន Attribute ដើម្បីកំណត់លក្ខណៈបន្ថែមទៅលើ tags ទាំង នោះ។
Description: http://www.itkonkhmer.com/images/article/html/itkonkhmer-html-pic2.jpg
ឧទាហរណ៍
01.<html>
02.<head><title>Paragraph</title></head>
03.<body>
04. 
05.Welcome to itkonkhmer.Thanks for visiting and support us.
06.This is example how to use tag and attribute.
07. 
08.</body>
09.</html>
សំគាល់:
Align :ជា Attribute ប្រើសម្រាប់កំណត់ទំរង់របស់អត្ថបទរបស់យើង ដែលវាមានដូចជា Justify , Center,Leftនិង Right

៧. Headings

សេចក្ដីលម្អិត
Heading គេប្រើសម្រាប់កំណត់ម៉ូតអក្សរដែលមាន៦ប្រភេទ គឺពី <h1> ដល់ <h6> (ពីធំទៅតូច) ហើយ ជាទូទៅគេប្រើសម្រាប់កំណត់ទៅលើចំនងជើង នៃអត្ថបទរបស់យើង។
1.<h1> heading h1 </h1>
2..
3..
4..
5..
6.</h6> heading h6 </h6>
ឧទាហរណ៍
01.<html>
02.<head><title>Welcome to itkonkhmer</title></head>
03.<body>
04.<h1> this is heading h1 </h1>
05.<h2> this is heading h2 </h2>
06.<h3> this is heading h3 </h3>
07.<h4> this is heading h4 </h4>
08.<h5> this is heading h5 </h5>
09.<h6> this is heading h6 </h6>
10.</body>
11.</html>
លទ្ធផល

this is heading h1

this is heading h2

this is heading h3

this is heading h4

this is heading h5
this is heading h6
សេចក្ដីលម្អិត
- <b> ….</b> : សម្រាប់កំណត់អក្សរដិត
- <i>…..</i> :
សម្រាប់កំណត់អក្សរទ្រេត
- <u>….</u> :
សម្រាប់ដាក់បន្ទាត់ពីក្រោម
- <small>…</small> :
សម្រាប់កំណត់អក្សរឲ្យមានទំហំតូច
- <big>….</big> :
សម្រាប់កំណត់អក្សរឲ្យមានទំហំធំ
- <sup>…</sup> :
សម្រាប់សរសេរជាស្វ័យគុណ
- <sub>….</sub> :
សម្រាប់សរសេរជាសន្ទស្សន៍
ឧទាហរណ៍
01.<html>
02.<head><title>Text Style</title></head>
03.<body>
04.<b> Bold </b>
05. 
06.<i> Italic </i>
07. 
08.<u> Underline </u>
09. 
10.<small> Small </small>
11. 
12.<big> Big </big>
13. 
14.A <sup><small> 2 </small><sup> -B <sup><small> 2 </small></sup>
15.=(A-B)(A+B)
16. 
17.H <sub><small> 2 </small></sup> 0
18.</body>
19.</html>
លទ្ធផល
Bold
Italic
Underline
Small
Big

A
2-B2=(A-B)(A+B)
H
2O
សំគាល់ៈ
tag <br/>
គឺជា tag ប្រើសម្រាប់ចុះបន្ទាត់។វាជា tag ដែលមានតែបើកមិនមានបិទទេ។ គេអាច សរសេរ វាបានពីររបៀបគឺ <br> <br/>
សេចក្ដីលម្អិត
ដើម្បីកំណត់ពុម្ពអក្សរយើងប្រើ tag <font> ហើយនៅក្នុង tag <font> មាន attribute មួយចំនួន ដូចខាងក្រោម :
- Face: សំរាប់ដាក់ឈ្មោះពុម្ពអក្សរ
- Size:
សំរាប់កំណត់ទំហំរបស់អក្សរ
- Color:
សម្រាប់កំនត់ពណ៌របស់អក្សរ
ឧទាហរណ៍
Description: http://www.itkonkhmer.com/images/article/html/9.gif
លទ្ធផល
This is the first time for me to learning HTML. This is example how to use tag font.
សេចក្ដីលម្អិត
Link គឺជាការដាក់តំណភ្ជាប់ទៅកាន់ទំព័រណាផ្សេងទៀត ហើយយើងអាចដាក់ Link ទៅលើ អក្សរ ឬ លើរូបភាពក៏បាន។
Description: http://www.itkonkhmer.com/images/article/html/10.gif
ឧទាហរណ៍
Description: http://www.itkonkhmer.com/images/article/html/10-1.gif
សំគាល់
target="_blank" :
ប្រើសម្រាប់ចូលទៅកាន់ Page ដែលយើង Link ទៅ នៅ tab ថ្មីនៃ Browser របស់យើង។
សេចក្ដីលម្អិត
ដើម្បីយករូបភាពមកបង្ហាញនៅលើទំព័ររបស់យើង យើងប្រើ tag មួយដែលមានឈ្មោះថា <img> ខាងក្រោមនេះគឺជាទំរង់របស់ tag <img>
Description: http://www.itkonkhmer.com/images/article/html/11.gif
ឧទាហរណ៍
Description: http://www.itkonkhmer.com/images/article/html/11-1.gif
សំគាល់ :
- Border :សម្រាប់កំណត់កំរាស់របស់រូបភាព
- Title:
ជា Attribute ប្រើសម្រាប់ដាក់ title ទៅឲ្យរូបភាព ហើយពេលដែលយើងដាល់ Mouse លើ រូបភាព    ពេលនោះវានឹងចេញ title ដែលយើងបានដាក់។
- Width:
ជា Attribute ប្រើសម្រាប់កំណត់ ប្រវែងទទឹងរបស់រូបភាព
- Height:
ជា Attribute ប្រើសម្រាប់កំណត់កំពស់របស់រូបភាព
សេចក្ដីលម្អិត
ដើម្បីបង្កើត Table យើងមានទំរង់ដូចខាងក្រោម:
Description: http://www.itkonkhmer.com/images/article/html/12.gif
ឧទាហរណ៍ទី១
Description: http://www.itkonkhmer.com/images/article/html/12-1.gif
សំគាល់:
<th> : ប្រើចំពោះ Column ដែលជា Column Header
ឧទាហរណ៍ទី២
Description: http://www.itkonkhmer.com/images/article/html/12-2.gif
សំគាល់:
Rowspan : ជា Attribute ប្រើសម្រាប់ Merge Row នៃ Table
Colspan :
ជា Attribute ប្រើសម្រាប់ Merge Column នៃ Table
សេចក្ដីលម្អិត
Preformatted គឺជាវិធីសម្រាប់បង្ហាញទំរង់ដើមនូវអ្វីដែលយើងបានសរសេរនៅក្នុង code html
Description: http://www.itkonkhmer.com/images/article/html/13.gif
លទ្ធផល
******  **********
******  **********
  **        **
  **        **
  **        **
  **        **
  **        **
******      ** 
******      ** konkhmer.com

១៤. របៀបបង្កើត Number List

សេចក្ដីលម្អិត
ទំរង់ទូទៅ
Description: http://www.itkonkhmer.com/images/article/html/14.gif
ឧទាហរណ៍ទី១
Description: http://www.itkonkhmer.com/images/article/html/14-1.gif
លទ្ធផល

Web Development

  1. HTML
  2. Java Script
  3. CSS
  4. PHP & MySQL
ឧទាហរណ៍ទី២
Description: http://www.itkonkhmer.com/images/article/html/14-2.gif
សំគាល់:
Type :សំរាប់កំនត់ប្រភេទ List របស់យើងដែលមាន៖ 1 , a , A , I , i
Start :សំរាប់កំនត់តំលៃចាប់ផ្តើម (ដាក់តំលៃលេខជានិច្ច ) ។
លទ្ធផល

Web Development

  1. HTML
  2. Java Script
  3. CSS
  4. PHP & MySQL

Programming

  1. C program
  2. C++
  3. Java
  4. VB.NET

១៥. របៀបបង្កើតList ជានិមិត្តសញ្ញា

សេចក្ដីលម្អិត
ទំរង់ទូទៅ
Description: http://www.itkonkhmer.com/images/article/html/15.gif
ឧទាហរណ៍
Description: http://www.itkonkhmer.com/images/article/html/15-1.gif
សំគាល់
Type :សំរាប់កំនត់ប្រភេទ List ដែលមាន៖ square , circle , disc
លទ្ធផល

Symbol List

  • C program
  • C++
  • Java
  • VB.NET
សេចក្ដីលម្អិត
នៅក្នុងភាសា HTML គេប្រើប្រាស់ Form ដើម្បីធ្វើការបញ្ចូលទិន្នន័យដើម្បីបញ្ជូនទៅកាន់ Server
ទំរង់ទូទៅនៃការបង្កើត Form
Description: http://www.itkonkhmer.com/images/article/html/16.gif
ដើម្បីឲ្យយើងអាចបញ្ចូលទិន្នន័យបាន គឺយើងត្រូវពឹងអាស្រ័យទៅលើធាតុរបស់ Form ដែលមាន នៅចំនុចបន្ទាប់។
សេចក្ដីលម្អិត
Text Field គឺជាធាតុមួយរបស់ Form ដែលគេប្រើសម្រាប់បញ្ចូលទិន្នន័យជា Text
ទំរង់ទូទៅ
Description: http://www.itkonkhmer.com/images/article/html/17.gif
ឧទាហរណ៍
Description: http://www.itkonkhmer.com/images/article/html/17-1.gif
សំគាល់
Name:
គឺជា Attribute ប្រើសម្រាប់បញ្ជាក់ឈ្មោះទៅឲ្យ Text Field របស់យើង។
លទ្ធផល
Input information
Top of Form
Enter First Name
:
Enter Last Name
:
Bottom of Form
សេចក្ដីលម្អិត
Password Field គឺជាធាតុមួយរបស់ Form ដែលប្រើសម្រាប់បញ្ចូលលេខសំងាត់ ។
ទំរង់ទូទៅ
Description: http://www.itkonkhmer.com/images/article/html/18.gif
ឧទាហរណ៍
Description: http://www.itkonkhmer.com/images/article/html/18-1.gif
លទ្ធផល
Login Form
Top of Form
Username
:
Password
:
Bottom of Form
សេចក្ដីលម្អិត
Radio Buttons គឺជាធាតុមួយរបស់ Form ដែលគេប្រើសម្រាប់បញ្ចូលទិន្នន័យ ដោយធ្វើការ ជ្រើស រើសជំរើសដែលយើងបានដាក់ ហើយយើងអាចជ្រើសរើសបានតែមួយគត់។
ទំរង់ទូទៅ
Description: http://www.itkonkhmer.com/images/article/html/19.gif
ឧទាហរណ៍
Description: http://www.itkonkhmer.com/images/article/html/19-1.gif
សំគាល់
Value:
គឺជា Attribute ប្រើសម្រាប់រក្សាទុកតំលៃរបស់ Radio Button និមួយៗ។
ចំណាំ: Radio Button ដែលយើងប្រើសម្រាប់ឲ្យគេជ្រើសរើសនូវជំរើសអ្វីមួយ ត្រូវមានឈ្មោះដូច គ្នា។
លទ្ធផល
Radio Buttons
Top of Form
Sex
:
Male Female
Subject
:
Web Design Programming Network
Bottom of Form
សេចក្ដីលម្អិត
Check Box គឺជាធាតុមួយរបស់ Form វាមានលក្ខណៈស្រដៀងនឹង Radio Button ដែរគឺបញ្ចូល ទិន្នន័យតាមការជ្រើសរើស តែវាខុសត្រង់ Check Box គេប្រើចំពោះការបញ្ចូលទិន្នន័យដែលអាច មានជំរើសច្រើន។
ទំរង់ទូទៅ
Description: http://www.itkonkhmer.com/images/article/html/20.gif
ឧទាហរណ៍
Description: http://www.itkonkhmer.com/images/article/html/20-1.gif
លទ្ធផល
Favorite Programming
Top of Form
C Prgramming
C++
Java
VB.NET
C#
Bottom of Form
សេចក្ដីលម្អិត
Drop down list គឺជាធាតុមួយរបស់ Form ដែលគេប្រើសម្រាប់ឲ្យយើងជ្រើសរើសជំរើសណាមួយ ។
ទំរង់ទូទៅ
Description: http://www.itkonkhmer.com/images/article/html/21.gif
ឧទាហរណ៍
Description: http://www.itkonkhmer.com/images/article/html/21-1.gif
លទ្ធផល
Login Choose Language
Top of Form
Bottom of Form
សេចក្ដីលម្អិត
Submit Button គឺជាធាតុមួយរបស់ Form ដែលគេប្រើវាសម្រាប់បញ្ចូលទិន្នន័យដែលយើងបាន បញ្ចូលនៅក្នុង Text Box, Checkbox និងផ្សេងៗទៀតទៅកាន់ Server
ទំរង់ទូទៅ
Description: http://www.itkonkhmer.com/images/article/html/22.gif
សំគាល់:
Method:
ជា Attribute ប្រើសម្រាប់កំណត់ពីវិធីនៃការបញ្ចូលទិន្នន័យ។ ពេលណាដែលយើងប្រើ method get នោះទិន្នន័យដែលយើងបញ្ចូនវាមិនបង្ហាញនៅលើ Address bar ទេ ចំនែកឯ method post វាបង្ហាញនៅលើ Address bar
Action:
ជា Attribute ប្រើសម្រាប់កំណត់ Page ដែលយើងចង់បញ្ចូលទិន្នន័យទៅកាន់។
ឧទាហរណ៍
Description: http://www.itkonkhmer.com/images/article/html/22-1.gif
លទ្ធផល
Login
Top of Form
Username :
Password :
Bottom of Form



0 comments:

Post a Comment