សូមមើលទំព័របណ្ដាញណាមួយនៅលើបណ្ដាញអ៊ីនធឺណិតនៅថ្ងៃនេះហើយអ្នកនឹងសម្គាល់ឃើញថាពួកគេចែករំលែករឿងមួយចំនួនដូចគ្នា។ លក្ខណៈមួយក្នុងចំណោមលក្ខណៈទាំងនោះរួមមានរូបភាព។ រូបភាពត្រឹមត្រូវបន្ថែមច្រើនទៅលើបទបង្ហាញរបស់គេហទំព័រ។ រូបភាពទាំងនោះមួយចំនួនដូចជានិមិត្តសញ្ញារបស់ក្រុមហ៊ុនជួយដាក់ឈ្មោះគេហទំព័រនេះហើយភ្ជាប់អង្គភាពឌីជីថលនេះទៅឱ្យក្រុមហ៊ុនរបស់អ្នក។
ដើម្បីបន្ថែមរូបភាពរូបតំណាងឬក្រាហ្វិកទៅទំព័រវ៉ិបសាយរបស់អ្នកអ្នកត្រូវប្រើស្លាកក្នុងកូដ HTML របស់ទំព័រ។ អ្នកដាក់ស្លាក IMG នៅក្នុង HTML របស់អ្នកដែលអ្នកចង់ឱ្យក្រាហ្វិកបង្ហាញ។ កម្មវិធីរុករកបណ្ដាញដែលបង្ហាញកូដរបស់ទំព័រនឹងជំនួសស្លាកនេះជាមួយក្រាហ្វិកដែលសមរម្យនៅពេលដែលទំព័រត្រូវបានមើល។ សូមត្រលប់ទៅឧទាហរណ៍និមិត្តសញ្ញារបស់ក្រុមហ៊ុនយើងនេះគឺជារបៀបដែលអ្នកអាចបន្ថែមរូបភាពនោះទៅវែបសាយត៍របស់អ្នក:
គុណលក្ខណៈរូបភាព
ក្រលេកមើលកូដ HTML ខាងលើអ្នកនឹងឃើញថាធាតុរួមមានគុណលក្ខណៈពីរ។ ពួកវានីមួយៗត្រូវបានទាមទារសម្រាប់រូបភាព។
គុណលក្ខណៈដំបូងគឺ "src" ។ នេះពិតជាឯកសាររូបភាពដែលអ្នកចង់បង្ហាញនៅលើទំព័រ។ ក្នុងឧទាហរណ៍របស់យើងគឺយើងប្រើឯកសារឈ្មោះ "logo.png" ។ នេះគឺជាក្រាហ្វិកដែលកម្មវិធីរុករកអ៊ីនធឺណិតនឹងបង្ហាញនៅពេលវាបង្ហាញគេហទំព័រ។
អ្នកនឹងកត់សម្គាល់ផងដែរថាមុនឈ្មោះឯកសារនេះយើងបានបន្ថែមព័ត៌មានបន្ថែមមួយចំនួន "/ images /" ។ នេះជាផ្លូវឯកសារ។ សញ្ញាបន្តមុនដំបូងប្រាប់ឱ្យម៉ាស៊ីនបម្រើមើលទៅថតឯកសារ root ។ បន្ទាប់មកវានឹងរកមើលថតមួយដែលហៅថា "រូបភាព" ហើយចុងក្រោយឯកសារឈ្មោះ "logo.png" ។ ការប្រើថតឯកសារដែលមានឈ្មោះថា "រូបភាព" ដើម្បីរក្សាទុកក្រាហ្វិចរបស់វែបសាយត៍គឺជាការអនុវត្តធម្មតាប៉ុន្តែផ្លូវឯកសាររបស់អ្នកនឹងត្រូវបានផ្លាស់ប្តូរទៅជាអ្វីដែលពាក់ព័ន្ធនឹងគេហទំព័ររបស់អ្នក។
គុណលក្ខណៈចាំបាច់ទីពីរគឺអត្ថបទ "alt" ។ នេះគឺជា "អត្ថបទជំនួស" ដែលត្រូវបានបង្ហាញប្រសិនបើរូបភាពបរាជ័យក្នុងការផ្ទុកសម្រាប់ហេតុផលណាមួយ។ អត្ថបទនេះដែលក្នុងឧទាហរណ៍របស់យើងអាន "រូបសញ្ញាក្រុមហ៊ុន" នឹងត្រូវបានបង្ហាញប្រសិនបើរូបភាពបរាជ័យក្នុងការផ្ទុក។ ហេតុអ្វីបានជាវាកើតឡើង? ហេតុផលផ្សេងៗគ្នាមួយ:
- ផ្លូវឯកសារមិនត្រឹមត្រូវ
- ឈ្មោះឯកសារមិនត្រឹមត្រូវឬកំហុសអក្ខរាវិរុទ្ធ
- កំហុសបញ្ជូន
- ឯកសារត្រូវបានលុបចេញពីម៉ាស៊ីនមេ
ទាំងនេះគឺគ្រាន់តែជាលទ្ធភាពមួយចំនួនសម្រាប់ហេតុផលដែលរូបភាពជាក់លាក់របស់យើងអាចនឹងបាត់។ ក្នុងករណីនេះអត្ថបទ alt របស់យើងនឹងបង្ហាញជំនួសវិញ។
អត្ថបទជំនួសត្រូវបានប្រើផងដែរដោយកម្មវិធីអានអេក្រង់ដើម្បីអានរូបភាពទៅអ្នកទស្សនាដែលមានចក្ខុវិស័យខ្សោយ។ ដោយសារតែពួកគេមិនអាចមើលឃើញរូបភាពដូចដែលយើងធ្វើនោះអត្ថបទនេះអនុញ្ញាតឱ្យពួកគេដឹងពីអ្វីដែលរូបភាពនោះ។ នេះជាមូលហេតុដែលត្រូវការអត្ថបទ alt និងហេតុអ្វីបានជាវាគួរបញ្ជាក់ច្បាស់នូវរូបភាពរបស់វា!
ការយល់ច្រឡំទូទៅនៃអត្ថបទ alt គឺថាវាមានន័យសម្រាប់គោលបំណងម៉ាស៊ីនស្វែងរក។ នេះគឺជាការមិនពិតទេ។ ខណៈពេលដែល Google និងម៉ាស៊ីនស្វែងរកផ្សេងៗទៀតអានអត្ថបទនេះដើម្បីកំណត់ថាតើរូបភាពនោះគឺជាអ្វី (ចងចាំពួកគេមិនអាច "មើលឃើញ" រូបភាពរបស់អ្នកទេ) អ្នកមិនគួរសរសេរអក្សរ alt ដើម្បីប្តឹងឧទាយទៅម៉ាស៊ីនស្វែងរក។ អ្នកនិពន្ធច្បាស់លាស់អត្ថបទដែលមានន័យសម្រាប់មនុស្ស។ ប្រសិនបើអ្នកក៏អាចបន្ថែមពាក្យគន្លឹះមួយចំនួនទៅក្នុងស្លាកដែលអំពាវនាវដល់ម៉ាស៊ីនស្វែងរកផងដែរនោះវាល្អប៉ុន្តែតែងតែត្រូវប្រាកដថាអត្ថបទ alt កំពុងបម្រើគោលបំណងចម្បងរបស់វាដោយបញ្ជាក់ថារូបភាពសម្រាប់នរណាម្នាក់ដែលមិនអាចមើលឃើញឯកសារក្រាហ្វិក។
គុណសម្បត្តិផ្សេងទៀត
ស្លាក IMG ក៏មានគុណលក្ខណៈពីរផ្សេងទៀតដែលអ្នកអាចមើលឃើញនៅពេលដែលអ្នកដាក់ក្រាហ្វិកនៅលើគេហទំព័ររបស់អ្នក - ទទឹងនិងកំពស់។ ឧទាហរណ៍ប្រសិនបើអ្នកប្រើកម្មវិធីនិពន្ធ WYSIWYG ដូចជា Dreamweaver វានឹងបន្ថែមព័ត៌មាននេះដោយស្វ័យប្រវត្តិសម្រាប់អ្នក។ នេះជាឧទាហរណ៍មួយ:
គុណលក្ខណៈ WIDTH និង HEIGHT ប្រាប់កម្មវិធីរុករកទំហំរបស់រូបភាព។ កម្មវិធីរុករកបន្ទាប់មកដឹងច្បាស់អំពីទំហំនៃទំហំនៅក្នុងប្លង់ដែលត្រូវបែងចែកហើយវាអាចផ្លាស់ប្តូរទៅកាន់ធាតុបន្ទាប់នៅលើទំព័រខណៈពេលដែលរូបភាពទាញយក។ បញ្ហាក្នុងការប្រើប្រាស់ព័ត៌មាននេះនៅក្នុង HTML របស់អ្នកគឺថាអ្នកប្រហែលជាមិនចង់ឱ្យរូបភាពរបស់អ្នកបង្ហាញនៅទំហំពិតប្រាកដនោះទេ។ ឧទាហរណ៍ប្រសិនបើអ្នកមាន វេបសាយឆ្លើយតប ដែលមានការផ្លាស់ប្តូរទំហំអាស្រ័យលើអេក្រង់និងទំហំរបស់អ្នកចូលមើលអ្នកនឹងចង់អោយរូបភាពរបស់អ្នកមានភាពបត់បែន។ ប្រសិនបើអ្នកបញ្ជាក់ពី HTML របស់អ្នកនូវទំហំថេរអ្នកនឹងពិបាកក្នុងការសរសេរជាន់ពីលើ សំណួរប្រព័ន្ធ CSS ឆ្លើយតប។ ដោយហេតុផលនេះហើយដើម្បីថែរក្សាការបែងចែករចនាប័ទ្ម (CSS) និងរចនាសម្ព័ន្ធ (HTML) វាត្រូវបានផ្ដល់អនុសាសន៍ថាអ្នកមិនបន្ថែមគុណលក្ខណៈទទឹងនិងកម្ពស់ទៅកូដ HTML របស់អ្នក។
ចំណាំមួយ: ប្រសិនបើអ្នកចាកចេញពីសេចក្តីណែនាំការកំណត់ទំហំទាំងនេះហើយកុំបញ្ជាក់ទំហំនៅក្នុង CSS កម្មវិធីរុករកនឹងបង្ហាញរូបភាពតាមលំនាំដើមរបស់វាទំហំដើមកំណើតយ៉ាងណាក៏ដោយ។
កែសម្រួលដោយលោក Jeremy Girard