HTML, CSS និង PHP៖ សន្លឹកបន្លំចុងក្រោយ

📥 ទាញយករបស់ខ្ញុំ សន្លឹកបន្លំ HTML, CSS និង PHPបំពេញនូវអ្វីគ្រប់យ៉ាងដែលអ្នកត្រូវដឹង និងចងចាំទាក់ទងនឹងភាសាសរសេរកូដទាំងបីនេះ។

• តើ HTML ជាអ្វី?
• ឧទាហរណ៍ HTML5 (កូដ PlayGround)
• 📥 សន្លឹកបន្លំ HTML
• តើ CSS ជាអ្វី?
• 📥 សន្លឹកបន្លំ CSS
• តើ PHP ជាអ្វី?
• 📥 សន្លឹកបន្លំ PHP
• 📥 HTML CSS និង PHP Cheat Sheet

សិល្បៈនៃការសរសេរកូដអាចចំណាយពេលច្រើនឆ្នាំដើម្បីធ្វើជាម្ចាស់យ៉ាងពេញលេញជាមួយនឹងស្លាកទាំងអស់ វាក្យសម្ព័ន្ធ និងធាតុផ្សេងទៀតនៃភាសាសរសេរកម្មវិធីដែលតែងតែទាក់ទងគ្នា។

សូម្បីតែអ្នកអភិវឌ្ឍន៍ដែលមានបទពិសោធន៍ច្រើនក៏អាចធ្លាក់ចូលទៅក្នុងអន្ទាក់នៃការភ្លេចវាក្យសម្ព័ន្ធត្រឹមត្រូវសម្រាប់កិច្ចការជាក់លាក់។ ដូចនេះ វាមិនប្រាកដទេក្នុងការរំពឹងថានឹងមានពណ៌បៃតងកាន់តែច្រើន អ្នកអភិវឌ្ឍន៍បណ្ដាញ ដើម្បីចាប់យកសិល្បៈដោយគ្មានកំហុស។

នេះ​ជាហេតុ សន្លឹកបន្លំសម្រាប់ HTML, CSS និង PHP មានប្រយោជន៍ខ្លាំងណាស់ ដោយមិនគិតពីរយៈពេលដែលអ្នកបានអនុវត្ត។ វាបម្រើជាមគ្គុទ្ទេសក៍រហ័សក្នុងការស្វែងរកពាក្យបញ្ជា និងវាក្យសម្ព័ន្ធត្រឹមត្រូវ ដែលអនុញ្ញាតឱ្យអ្នកផ្តោតលើការអភិវឌ្ឍន៍គេហទំព័រពិតប្រាកដ។

ខាងក្រោមនេះ អ្នកនឹងឃើញសន្លឹកបន្លំដែលមានទំនោរមើលឃើញមុនដោយការធ្វើឱ្យស្រស់រហ័ស ដើម្បីជួយអ្នកក្នុងការខិតខំសរសេរកូដរបស់អ្នក។ ខ្ញុំក៏បានបង្កើតវាឱ្យងាយស្រួលចំណាំ រក្សាទុក ឬបោះពុម្ពសម្រាប់ភាពងាយស្រួលរបស់អ្នក។

តើ HTML ជាអ្វី?

HTML តំណាងឱ្យ Hypertext Markup Language - កូដដែលប្រើដើម្បីបង្កើតរចនាសម្ព័ន្ធសម្រាប់គេហទំព័រ និងខ្លឹមសាររបស់វា។

ភាសាសម្គាល់នេះមានធាតុផ្សំជាច្រើនដែលប្រើដើម្បីធ្វើឱ្យមាតិកាលេចឡើង ឬដំណើរការតាមវិធីជាក់លាក់មួយ ហើយជាផ្នែកសំខាន់នៃកូដខាងមុខនៃគេហទំព័រនីមួយៗ។

HTML គឺជាភាសាសម្រាប់ពណ៌នាអំពីរចនាសម្ព័ន្ធនៃគេហទំព័រ… ជាមួយនឹង HTML អ្នកនិពន្ធពណ៌នាអំពីរចនាសម្ព័ននៃទំព័រដោយប្រើការសម្គាល់។ ធាតុនៃភាសាដាក់ស្លាកបំណែកនៃខ្លឹមសារដូចជា កថាខណ្ឌ បញ្ជី តារាង។ល។ – ពី W3.org

ឧទាហរណ៍ អ្នកអាចរុំព័ទ្ធ ឬរុំផ្នែកផ្សេងៗនៃខ្លឹមសារ – ដែលស្លាកដែលបិទភ្ជាប់អាចបង្កើតពាក្យ ឬតំណខ្ពស់រូបភាពទៅកាន់ទំព័រផ្សេងទៀត។ អ្នកក៏អាចប្រើវាដើម្បីធ្វើអក្សរទ្រេត និងធ្វើឱ្យពុម្ពអក្សរធំជាង ឬតូចជាង ក្នុងចំណោមអ្នកដទៃទៀត។

ជាការកត់សម្គាល់ដោយ W3អ្វីផ្សេងទៀតដែល HTML អនុញ្ញាតឱ្យអ្នកធ្វើរួមមាន:

• ការបោះពុម្ពឯកសារតាមអ៊ីនធឺណិតជាមួយ ចំណងជើង អត្ថបទ តារាង បញ្ជី រូបថតល
• ការទាញយកព័ត៌មានតាមអ៊ីនធឺណិតដោយការចុចប៊ូតុងតាមរយៈ តំណភ្ជាប់ hypertext.
• រចនា ទម្រង់ សម្រាប់ធ្វើប្រតិបត្តិការជាមួយសេវាពីចម្ងាយទៅ ស្វែងរកព័ត៌មាន ធ្វើការកក់ទុក ឬបញ្ជាទិញផលិតផលក្នុងចំណោមមុខងារផ្សេងទៀត។
• រួមទាំង សៀវភៅបញ្ជី ឈុតវីដេអូ និងប្រព័ន្ធផ្សព្វផ្សាយផ្សេងទៀត។ និងកម្មវិធីរួចហើយនៅក្នុងឯកសាររបស់អ្នក។

ដូច្នេះប្រសិនបើអ្នកធ្វើបន្ទាត់ "ឆ្កែរបស់ខ្ញុំផ្អែមណាស់" ឈរ​ដោយ​ខ្លួន​ឯង អ្នក​អាច​បញ្ជាក់​ថា​វា​គឺ​ជា​កថាខណ្ឌ​ដោយ​បិទ​វា​ក្នុង​ស្លាក​កថាខណ្ឌ (បន្ថែម​ទៀត​នៅ​ពេល​ក្រោយ) ដែល​នឹង​មាន​រូបរាង​ដូច​ជា៖ ឆ្កែរបស់ខ្ញុំគឺផ្អែមណាស់។

តើអ្វីជាភាពខុសគ្នារវាង HTML និង HTML5?

ក្នុងនាមជាឈ្មោះដែលបានបង្ហាញ HTML5 គឺជាកំណែទីប្រាំនៃស្តង់ដារ HTML. វាគាំទ្រការរួមបញ្ចូលវីដេអូ និងអូឌីយ៉ូទៅក្នុងភាសា ដែលកាត់បន្ថយតម្រូវការសម្រាប់កម្មវិធីជំនួយ និងធាតុភាគីទីបី។

ខាងក្រោមនេះជាភាពខុសគ្នាសំខាន់ៗរវាង HTML និង HTML5៖

លើសពីនេះទៀត មានធាតុជាច្រើននៃ HTML ដែលត្រូវបានកែប្រែ ឬដកចេញពី HTML5 ។ ទាំងនេះ​រួម​បញ្ចូល​ទាំង:

• - បានប្តូរទៅ
• - បានប្តូរទៅ
• - បានប្តូរទៅ
• - ដកចេញ
• - ដកចេញ
• - ដកចេញ
• - មិនមានស្លាកថ្មី។ ប្រើ CSS ។
• - មិនមានស្លាកថ្មី។ ប្រើ CSS ។
• - មិនមានស្លាកថ្មី។ ប្រើ CSS ។
• - មិនមានស្លាកថ្មី។ ប្រើ CSS ។
• - មិនមានស្លាកថ្មី។ ប្រើ CSS ។

ទន្ទឹមនឹងនេះ HTML5 ក៏រួមបញ្ចូលនូវធាតុដែលបានបន្ថែមថ្មីៗមួយចំនួនផងដែរ។ ទាំងនេះ​រួម​បញ្ចូល​ទាំង:

ឧទាហរណ៍ HTML5 (កូដ PlayGround)

ឧទាហរណ៍នៃរចនាសម្ព័ន្ធ semantic

In HTML5 មានធាតុ semantic មួយចំនួនដែលអាចត្រូវបានប្រើដើម្បីកំណត់ផ្នែកផ្សេងៗនៃគេហទំព័រ។ ខាងក្រោម​នេះ​ជា​រឿង​ធម្មតា​បំផុត៖

<header>
  <h1>Guide to Search Engines</h1>
</header>

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<section>
  <h2>Internet Browsers</h2>
  <p>Google Chrome, Mozilla Firefox, Internet Explorer, Safari and Opera dominate the browser market.</p>
</section>

<article>
  <h3>Google Chrome</h3>
  <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>

<p>Google Chrome is a cross-platform web browser developed by Google.</p>

<aside>
  <h4>History of Mozilla</h4>
  <p>Mozilla is a free software community founded in 1998.</p>
</aside>

<footer>
  <p>Copyright Example.com. Read our <a href="#">privacy policy</a>.</p>
</footer>

ឧទាហរណ៍នៃការធ្វើទ្រង់ទ្រាយអត្ថបទមូលដ្ឋាន

<h1>Heading level 1</h1>
 <h2>Heading level 2</h2>
  <h3>Heading level 3</h3>
   <h4>Heading level 4</h4>
    <h5>Heading level 5</h5>
     <h6>Heading level 6</h6>

<p>Paragraph of text with a sentence of words.</p>

<p>Paragraph of text with a word that has <em>emphasis</em>.</p>

<p>Paragraph of text with a word that has <strong>importance</strong>.</p>

<ul>
  <li>HTML5</li>
  <li>CSS3</li>
  <li>PHP</li>
</ul>

<ol>
  <li>HTML5</li>
  <li>CSS3</li>
  <li>PHP</li>
</ol>

<blockquote cite="https://www.huxley.net/bnw/four.html">
  <p>Words can be like X-rays, if you use them properly – they'll go through anything. You read and you're pierced.</p>
</blockquote>
  <cite>– Aldous Huxley, Brave New World</cite>

<p>Search for it on <a href="https://www.google.com/" title="Google search engine">Google</a>

<button name="button">I am a Button. Click me!</button>

<p>The line break tag produces a<br> line break in<br> text (carriage-return)</p>

<p>This is the first paragraph of text.</p><hr><p>This is second paragraph of text.</p>

<address>
Acme Inc<br>
PO Box 555, New York, USA<br>
Call us: <a href="tel:+1-555-555-555">+1-555-555-555</a><br>
Email us: <a href="mailto:[email protected]">[email protected]</a>
</address>

<p>The chemical formula of water is H<sub>2</sub>O</p>

<p>This text is <sup>superscripted</sup></p>

<p><abbr title="Hypertext Markup Language">HTML</abbr> is easy to learn.</p>

<p>This is normal text. <code>This is code.</code> This is normal text.</p>

<p>The movie starts at <time>20:00</time>.</p>

<p>I am <del>wrong</del> right, you are <del>right</del> wrong.</p>

ឧទាហរណ៍តារាង

<table>
<thead>
     <tr> ...table header... </tr>
</thead>
<tfoot>
     <tr> ...table footer... </tr>
</tfoot>
<tbody>
     <tr> ...first row... </tr>
     <tr> ...second row... </tr>
</tbody>
<tbody>
     <tr> ...first row... </tr>
     <tr> ...second row... </tr>
     <tr> ...third row... </tr>
</tbody>
</table>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
    <td>34</td>
  </tr>
</table>

ឧទាហរណ៍ប្រព័ន្ធផ្សព្វផ្សាយ

<img src="images/dinosaur.png" 
     alt="The head and torso of a dinosaur skeleton;it has a large head with long sharp teeth"/>

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp">
  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
</picture>

<figure>
    <img src="/images/frog.png" alt="Tree frog" />
    <figcaption>Tree frog by David Clode on Unsplash</figcaption>
</figure>

<video controls width="400" height="400" autoplay loop muted poster="poster.png">
  <source src="rabbit.mp4" type="video/mp4">
  <source src="rabbit.webm" type="video/webm">
  <source src="rabbit.ogg" type="video/ogg"> 
  <source src="rabbit.mov" type="video/quicktime">
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit.mp4">link to the video</a> instead.</p>
</video>

បំពេញសន្លឹកបន្លំ HTML

មិន​ថា​អ្នក​ជា​អ្នក​អភិវឌ្ឍ​តាម​រដូវ​កាល ឬ​អ្នក​ដែល​គ្រាន់​តែ​ចង់​សើម​ជើង​ក្នុង​ឧស្សាហកម្ម​នោះ​ទេ វា​តែងតែ​ជួយ​ឱ្យ​មាន សន្លឹកបន្លំ HTML ងាយស្រួល។ ហើយខ្ញុំបានរចនាមួយដែលអាចជួយអ្នកគ្រប់ជំហាន។

ទាញយកសន្លឹកបន្លំ HTML

តើ CSS ជាអ្វី?

សន្លឹករចនាប័ទ្ម Cascading ឬ CSS ពិពណ៌នាអំពីរបៀបដែលធាតុ HTML នឹងត្រូវបានបង្ហាញនៅលើអេក្រង់។ ដោយសារតែវាអាចគ្រប់គ្រងប្លង់ទំព័រជាច្រើនក្នុងពេលតែមួយ វាអាចសន្សំសំចៃពេលវេលា និងការខិតខំប្រឹងប្រែងច្រើន។

CSS គឺជាភាសាសម្រាប់ពិពណ៌នាអំពីការបង្ហាញនៃគេហទំព័រ រួមទាំងពណ៌ ប្លង់ និងពុម្ពអក្សរ។ វាអនុញ្ញាតឱ្យមនុស្សម្នាក់សម្របបទបង្ហាញទៅនឹងប្រភេទផ្សេងៗនៃឧបករណ៍ ដូចជាអេក្រង់ធំ អេក្រង់តូច ឬម៉ាស៊ីនបោះពុម្ព។ – ពី W3.org

តើអ្វីជាភាពខុសគ្នារវាង HTML និង CSS?

ខណៈពេលដែល HTML និង CSS គឺជាភាសាទាំងពីរដែលប្រើសម្រាប់បង្កើតគេហទំព័រ និងកម្មវិធី ពួកគេមានមុខងារខុសៗគ្នា។

HTML គឺជាអ្វីដែលអ្នកប្រើដើម្បីកំណត់រចនាសម្ព័ន្ធ និងមាតិកាដែលនឹងត្រូវបានបង្ហាញនៅលើគេហទំព័រ។

ម៉្យាងវិញទៀត CSS ត្រូវបានប្រើសម្រាប់ការកែប្រែ ការរចនាបណ្ដាញ នៃធាតុ HTML នៅលើគេហទំព័រ (រួមទាំងប្លង់ បែបផែនមើលឃើញ និងពណ៌ផ្ទៃខាងក្រោយ)។

HTML បង្កើតរចនាសម្ព័ន្ធ និងមាតិកា CSS ធ្វើការរចនា ឬរចនាប័ទ្ម។ HTML និង CSS រួមគ្នាបង្កើតជាចំណុចប្រទាក់គេហទំព័រ។

វាក្យសម្ព័ន្ធ CSS ជាអ្វី?

វាក្យសម្ព័ន្ធ CSS ត្រូវបានបង្កើតឡើងដោយឧបករណ៍ជ្រើសរើស និងប្លុកប្រកាស។

ឧបករណ៍ជ្រើសរើសកំណត់ធាតុ HTML ដែលត្រូវកំណត់រចនាប័ទ្ម ខណៈដែលប្លុកប្រកាសមានសេចក្តីប្រកាសមួយ ឬច្រើន ឬគូនៃ CSS ឈ្មោះលក្ខណសម្បត្តិ និងតម្លៃដែលមានសញ្ញាសម្គាល់រវាងពួកវា។

សេចក្តីប្រកាសត្រូវបានបំបែកដោយសញ្ញាក្បៀស ហើយប្លុកប្រកាសតែងតែត្រូវបានរុំព័ទ្ធដោយដង្កៀបអង្កាញ់។

ឧទាហរណ៍ ប្រសិនបើអ្នកចង់កែប្រែរបៀបដែលក្បាល 1 របស់អ្នកមើលទៅ វាក្យសម្ព័ន្ធ CSS របស់អ្នកនឹងមើលទៅដូចនេះ៖ h1 {color:red; ទំហំពុម្ពអក្សរ៖ ១៦ កុំព្យូទ័រ។

បំពេញសន្លឹកបន្លំ CSS

CSS ងាយស្រួលប្រើ។ បញ្ហា​ប្រឈម​គឺ​មាន​អ្នក​ជ្រើសរើស និង​ការ​ប្រកាស​ជា​ច្រើន​ដែល​ការ​ចងចាំ​ពួកគេ​ទាំងអស់​គឺ​ពិបាក​ប្រសិន​បើ​មិន​អាច​ទៅ​រួច។ អ្នកមិនចាំបាច់ទន្ទេញចាំពួកគេទេ។

នៅទីនេះ សន្លឹកបន្លំសម្រាប់ CSS និង CSS3 ដែលអ្នកអាចប្រើបានគ្រប់ពេលវេលា។

ទាញយក CSS Cheat Sheet

តើ PHP ជាអ្វី?

PHP គឺជាអក្សរកាត់សម្រាប់ Hypertext Preprocessorដែលជាភាសាស្គ្រីបបង្កប់ HTML ដែលពេញនិយមដែលប្រើសម្រាប់បង្កើតគេហទំព័រថាមវន្ត កម្មវិធីគេហទំព័រ ឬគេហទំព័រឋិតិវន្ត។

ចាប់តាំងពីការ PHP គឺជាភាសាខាងម៉ាស៊ីនមេស្គ្រីបរបស់វាត្រូវបានប្រតិបត្តិនៅលើម៉ាស៊ីនមេ (មិនមែននៅក្នុងកម្មវិធីរុករកទេ) ហើយលទ្ធផលរបស់វាគឺ HTML ធម្មតានៅលើកម្មវិធីរុករក។

PHP គឺជាភាសាស្គ្រីបដែលមានគោលបំណងទូទៅដែលត្រូវបានប្រើប្រាស់យ៉ាងទូលំទូលាយ ដែលស័ក្តិសមជាពិសេសសម្រាប់ការអភិវឌ្ឍន៍គេហទំព័រ ហើយអាចបញ្ចូលទៅក្នុង HTML ។ – ពី PHP.net

ភាសាស្គ្រីបផ្នែកខាងម៉ាស៊ីនមេនេះដំណើរការលើប្រព័ន្ធប្រតិបត្តិការជាច្រើន រួមទាំង Windows, Mac OS, Linux និង Unix ។ វាក៏អាចប្រើបានជាមួយម៉ាស៊ីនមេភាគច្រើនដូចជា Apache និង IIS ផងដែរ។

បើប្រៀបធៀបទៅនឹងភាសាផ្សេងទៀតដូចជា ASP និង JSP PHP គឺងាយស្រួលរៀនសម្រាប់អ្នកចាប់ផ្តើមដំបូង។ PHP ក៏ផ្តល់នូវមុខងារជាច្រើនដែលអ្នកអភិវឌ្ឍន៍កម្រិតខ្ពស់ត្រូវការផងដែរ។

តើអ្វីជាភាពខុសគ្នារវាង PHP និង HTML?

ទោះបីជាភាសាទាំងពីរមានសារៈសំខាន់សម្រាប់ ការអភិវឌ្ឍបណ្ដាញ, PHP និង HTML មានភាពខុសគ្នាតាមវិធីជាច្រើន។

ភាពខុសគ្នាសំខាន់ស្ថិតនៅក្នុងអ្វីដែលភាសាទាំងពីរត្រូវបានប្រើប្រាស់។

HTML ត្រូវបានប្រើសម្រាប់ភាគីអតិថិជន ការអភិវឌ្ឍន៍ (ឬផ្នែកខាងមុខ) ខណៈពេលដែល PHP ត្រូវបានប្រើសម្រាប់ផ្នែកខាងម៉ាស៊ីនមេ ការអភិវឌ្ឍ។

HTML គឺជាភាសាដែលអ្នកអភិវឌ្ឍន៍ប្រើប្រាស់សម្រាប់រៀបចំមាតិកានៅលើគេហទំព័រ ដូចជាការបញ្ចូលអត្ថបទ រូបភាព តារាង និងតំណខ្ពស់ ការធ្វើទ្រង់ទ្រាយអត្ថបទ និងការបញ្ជាក់ពណ៌។

ទន្ទឹមនឹងនេះ PHP ត្រូវបានប្រើដើម្បីរក្សាទុក និងទាញយកទិន្នន័យពីមូលដ្ឋានទិន្នន័យ អនុវត្តប្រតិបត្តិការឡូជីខល ផ្ញើ និងឆ្លើយតបទៅអ៊ីមែល ផ្ទុកឡើង និងទាញយកឯកសារ បង្កើតកម្មវិធីកុំព្យូទ័រ និងអ្វីៗជាច្រើនទៀត។

នៅក្នុងលក្ខខណ្ឌនៃប្រភេទកូដ, HTML គឺឋិតិវន្តខណៈពេលដែល PHP គឺថាមវន្ត. កូដ HTML តែងតែដូចគ្នារាល់ពេលដែលវាត្រូវបានបើក ខណៈពេលដែលលទ្ធផល PHP ប្រែប្រួលអាស្រ័យលើកម្មវិធីរុករករបស់អ្នកប្រើប្រាស់។

សម្រាប់អ្នកអភិវឌ្ឍន៍ថ្មី ភាសាទាំងពីរមានភាពងាយស្រួលក្នុងការរៀន ទោះបីជាខ្សែកោងការរៀនខ្លីជាមួយ HTML ជាង PHP ក៏ដោយ។

បំពេញសន្លឹកបន្លំ PHP

ប្រសិនបើអ្នកជាអ្នកសរសេរកម្មវិធីថ្មីថ្មោងដែលចង់កាន់តែស្ទាត់ជំនាញក្នុង PHP ឬពង្រីកចំណេះដឹងរបស់អ្នកអំពីវា ខាងក្រោមនេះជា សន្លឹកបន្លំ PHP អ្នកអាចយោងទៅយ៉ាងរហ័ស។

សន្លឹកបន្លំនេះមានមុខងារ PHP - ដែលជាផ្លូវកាត់សម្រាប់កូដដែលប្រើយ៉ាងទូលំទូលាយ - ដែលត្រូវបានបង្កើតឡើងជាភាសាស្គ្រីប។

ទាញយកសន្លឹកកិច្ចការ PHP

សន្លឹកបន្លំ HTML, CSS និង PHP ចុងក្រោយ

មិនថាអ្នកជាអ្នកអភិវឌ្ឍន៍តាមរដូវកាល ឬគ្រាន់តែជាអ្នកចាប់ផ្តើមសរសេរកូដទេ វាជាការប្រសើរណាស់ដែលមានអ្វីមួយដែលអ្នកអាចត្រលប់មកវិញដើម្បីជាឯកសារយោង ឬគ្រាន់តែធ្វើឱ្យការចងចាំរបស់អ្នកឡើងវិញ។

និងជាអំណោយដល់អ្នកអភិវឌ្ឍន៍ដែលលេងល្បែងរវាង HTML, CSS និង PHP នេះគឺជាសន្លឹកបន្លំ ULTIMATEបំពេញនូវអ្វីគ្រប់យ៉ាងដែលអ្នកត្រូវដឹង និងចងចាំទាក់ទងនឹងភាសាសរសេរកូដទាំងបីនេះ៖

ទាញយកសន្លឹកបន្លំ HTML, CSS និង PHP រួមបញ្ចូលគ្នា