Khmer Angkor Academy | សិក្សាបង្កើតគេហទំព័រជាភាសាខ្មែរ

`<head>`

<head> ត្រូវសរសេរនៅពីលើ <body> ។ អ្វីដែលសរសេរក្នុង <head> មិនមែនជារបស់ដែលត្រូវបង្ហាញលើទំព័របច្ចុប្បន្នទេ ។ វាត្រូវបានប្រើសំរាប់កំណត់ព័ត៌មាននានានៃទំព័របច្ចុប្បន្នដូចជា

ចំណងជើងនៃគេហទំព័រ
ការពិព៌ណនាអំពីគេហទំព័រ
កំណត់រូបតំណាងគេហទំព័រ (Favicon)
កំណត់រូបនៃទំព័រសម្រាប់បណ្តាញសង្គម
ភ្ជាប់កូដ CSS និង JavaScript
កំណត់ការបង្ហាញលើឧបករណ៍ចល័ត (Viewport)
ព័ត៌មានសម្រាប់ SEO និងម៉ាស៊ីនស្វែងរក

សំខាន់: ធាតុទាំងអស់ក្នុង <head> មិនបង្ហាញលើទំព័រទេ ប៉ុន្តែមានសារៈសំខាន់ណាស់សម្រាប់ការដំណើរការរបស់គេហទំព័រ ។

ចំណងជើងនៃគេហទំព័រ - `<title>`

ដើម្បីកំណត់ចំណងជើងទៅឲ្យទំព័រមួយ គឺត្រូវប្រើ <title> ដែលត្រូវកំណត់នៅក្នុង <head> ។ ចំណងជើងនេះនឹងបង្ហាញនៅលើ Tab របស់កម្មវិធីរុករក និងលើលទ្ធផលស្វែងរករបស់ Google ។

<!DOCTYPE html>
<html>
    <head>
        <title>Khmer Angkor Academy - រៀនកូដដោយឥតគិតថ្លៃ</title>
    </head>
    <body>
        <h1>ស្វាគមន៍មកកាន់ Khmer Angkor Academy</h1>
    </body>
</html>

គន្លឹះល្អៗសម្រាប់ Title:

ប្រើចំណងជើងដែលមានន័យច្បាស់លាស់ (50-60 តួអក្សរ)
ដាក់ពាក្យសំខាន់ៗនៅខាងមុខ
ជៀសវាងការប្រើពាក្យដដែលៗច្រើន

`<meta>` - ព័ត៌មានបន្ថែម

<meta> ប្រើសំរាប់កំណត់ការពិពណ៌នា អ្នកបង្កើត ពាក្យគន្លឹះ សំណុំតួអក្សរ និងព័ត៌មានសំខាន់ៗផ្សេងទៀតនៃទំព័របច្ចុប្បន្ន ។ <meta> ត្រូវសរសេរនៅក្នុង <head> ហើយវាមិនបង្ហាញលទ្ធផលលើទំព័រទេ ។ ការកំណត់ <meta> ត្រូវបានយកទៅប្រើដោយកម្មវិធីរុករកគេហទំព័រ ម៉ាស៊ីនស្វែងរក បណ្ដាញសង្គម និងឧបករណ៍ផ្សេងៗ ។

1. បញ្ជាក់សំណុំតួអក្សរ (Charset)

សំណុំតួអក្សរមួយចំនួន មិនទ្រទ្រង់អក្សរខ្មែរទេ ។ ដើម្បីឲ្យទំព័រអាចបង្ហាញអក្សរខ្មែរ និងអក្សរអន្តរជាតិផ្សេងៗបានល្អ ត្រូវប្រើសំណុំអក្សរប្រភេទ UTF-8 ។ នេះគឺជាធាតុដំបូងបង្អស់ដែលត្រូវសរសេរនៅក្នុង <head> ។

<meta charset="utf-8">

2. កំណត់ការបង្ហាញលើឧបករណ៍ចល័ត (Viewport)

ដើម្បីឲ្យគេហទំព័របង្ហាញបានល្អលើទូរសព្ទ និង Tablet ត្រូវកំណត់ viewport ។ នេះជាការសំខាន់ណាស់សម្រាប់ Responsive Design ។

<meta name="viewport" content="width=device-width, initial-scale=1.0">

ពន្យល់:

width=device-width - ទំព័រនឹងទទួលទំហំតាមទំហំអេក្រង់ឧបករណ៍
initial-scale=1.0 - កំណត់កម្រិត zoom ដំបូងទៅ 100%

3. កំណត់សេចក្ដីពណ៌នា (Description)

ការពណ៌នានេះនឹងបង្ហាញនៅលើលទ្ធផលស្វែងរករបស់ Google ។ វាជួយឲ្យអ្នកប្រើប្រាស់យល់ពីខ្លឹមសារនៃទំព័រមុនពេលចូលមើល ។

<meta name="description" content="Khmer Angkor Academy ផ្ដល់ការសិក្សាអំពី HTML, CSS, JavaScript, PHP ដោយឥតគិតថ្លៃ ជាភាសាខ្មែរ ។">

ចំណាំ: ការពណ៌នាគួរមានប្រវែង 150-160 តួអក្សរ ដើម្បីបង្ហាញបានពេញលេញលើលទ្ធផលស្វែងរក ។

4. កំណត់ពាក្យគន្លឹះ (Keywords)

ពាក្យគន្លឹះ គឺជាពាក្យសំខាន់ៗដែលពណ៌នាអំពីខ្លឹមសារនៃទំព័របច្ចុប្បន្ន ។ បើទោះបី Google មិនប្រើវាច្រើនក៏ដោយ ក៏វានៅតែមានប្រយោជន៍សម្រាប់ម៉ាស៊ីនស្វែងរកផ្សេងៗទៀត ។

<meta name="keywords" content="html, css, javascript, php, Khmer Angkor Academy, កូដ, webcode, khmer, ខ្មែរ, រៀនកូដ, មេរៀនកូដ">

5. កំណត់ឈ្មោះអ្នកបង្កើត (Author)

ការកំណត់ឈ្មោះអ្នកបង្កើតជួយឲ្យដឹងថានរណាជាអ្នកបង្កើតគេហទំព័រនេះ ។

<meta name="author" content="ផល ឧសភ័ក្ត្រា">

6. កំណត់ថាគេហទំព័រត្រូវបានផ្ទុកឡើងវិញរៀងរាល់ (Refresh)

ប្រើសំរាប់ធ្វើឲ្យទំព័រផ្ទុកឡើងវិញដោយស្វ័យប្រវត្តិ ឬប្តូរទៅទំព័រផ្សេងបន្ទាប់ពីរយៈពេលកំណត់ ។

<!-- ផ្ទុកឡើងវិញរៀងរាល់ 30 វិនាទី -->
<meta http-equiv="refresh" content="30">

<!-- ប្តូរទៅទំព័រផ្សេងបន្ទាប់ពី 5 វិនាទី -->
<meta http-equiv="refresh" content="5; url=https://www.Khmer Angkor Academy.academy">

Open Graph Meta Tags - សម្រាប់បណ្តាញសង្គម

Open Graph tags ជួយឲ្យគេហទំព័ររបស់អ្នកបង្ហាញខ្លឹមសារបានល្អនៅពេលចែករំលែកលើ Facebook, LinkedIn និងបណ្តាញសង្គមផ្សេងៗ ។

<!-- ចំណងជើងសម្រាប់បណ្តាញសង្គម -->
<meta property="og:title" content="រៀន HTML ដោយឥតគិតថ្លៃ | Khmer Angkor Academy">

<!-- ប្រភេទខ្លឹមសារ -->
<meta property="og:type" content="website">

<!-- URL នៃទំព័រ -->
<meta property="og:url" content="https://www.Khmer Angkor Academy.academy/html/head">

<!-- រូបភាពសម្រាប់បង្ហាញពេលចែករំលែក -->
<meta property="og:image" content="https://www.Khmer Angkor Academy.academy/images/html-lesson.jpg">

<!-- ការពណ៌នាសម្រាប់បណ្តាញសង្គម -->
<meta property="og:description" content="រៀនពី HTML Head ដើម្បីបង្កើតគេហទំព័រដែលល្អប្រសើរ">

<!-- ឈ្មោះគេហទំព័រ -->
<meta property="og:site_name" content="Khmer Angkor Academy">

Twitter Card Meta Tags

Twitter Cards ប្រើសំរាប់បង្ហាញខ្លឹមសារបានល្អនៅពេលចែករំលែកលើ Twitter/X ។

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@Khmer Angkor AcademyAcademy">
<meta name="twitter:title" content="រៀន HTML ដោយឥតគិតថ្លៃ">
<meta name="twitter:description" content="រៀនពី HTML Head Tags និងការប្រើប្រាស់របស់វា">
<meta name="twitter:image" content="https://www.Khmer Angkor Academy.academy/images/html.jpg">

ភ្ជាប់ធនធានផ្សេងៗ - `<link>`

<link> ប្រើសំរាប់ភ្ជាប់ធនធានខាងក្រៅដូចជា CSS, Favicon និងធនធានផ្សេងៗ ។

ភ្ជាប់ CSS Stylesheet

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">

កំណត់ Favicon (រូបតំណាងគេហទំព័រ)

Favicon គឺជារូបតូចៗដែលបង្ហាញនៅលើ Tab របស់កម្មវិធីរុករក ។

<link rel="icon" type="image/png" href="favicon.png" sizes="32x32">
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
<link rel="apple-touch-icon" href="apple-touch-icon.png">

ភ្ជាប់ JavaScript - `<script>`

អ្នកអាចភ្ជាប់ JavaScript ទាំងនៅក្នុង <head> ឬ <body> ។ ប៉ុន្តែជាទូទៅគេដាក់នៅខាងក្រោម <body> ដើម្បីឲ្យទំព័រផ្ទុកលឿន ។

<!-- JavaScript ខាងក្រៅ -->
<script src="script.js"></script>

<!-- JavaScript ដែលមិនរារាំងការផ្ទុកទំព័រ -->
<script src="script.js" defer></script>
<script src="script.js" async></script>

ឧទាហរណ៍ពេញលេញនៃ HTML Head

<!DOCTYPE html>
<html lang="km">
<head>
    <!-- Charset - ត្រូវតែមកមុនគេ -->
    <meta charset="utf-8">

    <!-- Viewport សម្រាប់ Responsive -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Title -->
    <title>រៀន HTML ដោយឥតគិតថ្លៃ | Khmer Angkor Academy</title>

    <!-- SEO Meta Tags -->
    <meta name="description" content="រៀន HTML ជាមួយនឹងមេរៀនជាច្រើនដោយឥតគិតថ្លៃ ជាភាសាខ្មែរ">
    <meta name="keywords" content="html, css, javascript, khmer, ខ្មែរ, រៀនកូដ">
    <meta name="author" content="Khmer Angkor Academy">

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://www.Khmer Angkor Academy.academy/html/">
    <meta property="og:title" content="រៀន HTML ដោយឥតគិតថ្លៃ">
    <meta property="og:description" content="មេរៀន HTML ពេញលេញជាភាសាខ្មែរ">
    <meta property="og:image" content="https://www.Khmer Angkor Academy.academy/images/html-og.jpg">

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="រៀន HTML ដោយឥតគិតថ្លៃ">
    <meta name="twitter:description" content="មេរៀន HTML ពេញលេញជាភាសាខ្មែរ">

    <!-- Favicon -->
    <link rel="icon" type="image/png" href="favicon.png">

    <!-- Stylesheets -->
    <link rel="stylesheet" href="style.css">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Hanuman&display=swap" rel="stylesheet">
</head>
<body>
    <h1>ខ្លឹមសាររបស់ទំព័រ</h1>
</body>
</html>

សេចក្តីសន្និដ្ឋាន

<head> ជាផ្នែកសំខាន់ណាស់នៃគេហទំព័រ ។ បើទោះបីវាមិនបង្ហាញខ្លឹមសារលើទំព័រក៏ដោយ ក៏វាជួយឲ្យគេហទំព័ររបស់អ្នក៖

បង្ហាញបានល្អលើម៉ាស៊ីនស្វែងរក (SEO)
មានរូបរាងល្អពេលចែករំលែកលើបណ្តាញសង្គម
ដំណើរការបានល្អលើឧបករណ៍ចល័ត
បង្ហាញអក្សរខ្មែរ និងអក្សរអន្តរជាតិបានត្រឹមត្រូវ

ក្បាល

<head>

ចំណងជើង​នៃ​គេហទំព័រ - <title>

<meta> - ព័ត៌មាន​បន្ថែម

1. បញ្ជាក់​សំណុំ​តួ​អក្សរ (Charset)

2. កំណត់​ការ​បង្ហាញ​លើ​ឧបករណ៍​ចល័ត (Viewport)

3. កំណត់​សេចក្ដី​ពណ៌នា (Description)

4. កំណត់​ពាក្យ​គន្លឹះ (Keywords)

5. កំណត់​ឈ្មោះ​អ្នក​បង្កើត (Author)

6. កំណត់​ថា​គេហទំព័រ​ត្រូវ​បាន​ផ្ទុក​ឡើង​វិញ​រៀងរាល់ (Refresh)

Open Graph Meta Tags - សម្រាប់​បណ្តាញ​សង្គម