របៀបរុំអត្ថបទនៅជុំវិញរូបភាព

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

ការបន្ថែមអត្ថបទនិងរូបភាពទៅគេហទំព័រគឺងាយស្រួល។ អត្ថបទត្រូវបានបន្ថែមជាមួយស្លាក HTML ស្តង់ដារដូចកថាខណ្ឌក្បាលនិងបញ្ជីខណៈរូបភាពត្រូវបានដាក់នៅលើទំព័រដែលមានធាតុ ។ ទោះយ៉ាងណាក៏ដោយនៅពេលអ្នកបានបន្ថែមរូបភាពទៅទំព័រវ៉ិបសាយរបស់អ្នកអ្នកប្រហែលជាចង់មានលំហូរអត្ថបទនៅជាប់នឹងរូបភាពជាជាងតម្រឹមនៅខាងក្រោមវា (ដែលជាវិធីលំនាំដើមរូបភាពដែលបានបន្ថែមទៅកូដ HTML នឹងបង្ហាញនៅក្នុងកម្មវិធីរុករក) ។ តាមបច្ចេកទេសមានវិធីពីរយ៉ាងដែលអ្នកអាចសម្រេចបាននូវរូបរាងនេះដោយប្រើប្រាស់ CSS (ណែនាំ) ឬដោយការបញ្ចូលការណែនាំដែលមើលឃើញដោយផ្ទាល់ទៅក្នុង HTML (មិនត្រូវបានណែនាំទេព្រោះអ្នកចង់រក្សាការបំបែករចនាប័ទ្មនិងរចនាសម្ព័ន្ធសម្រាប់គេហទំព័ររបស់អ្នក) ។

ប្រើ CSS

វិធីត្រឹមត្រូវដើម្បីផ្លាស់ប្តូររបៀបប្លង់អត្ថបទនិងរូបភាពរបស់ទំព័រនិងរបៀបដែលស្ទីលមើលឃើញរបស់វាលេចឡើងក្នុងកម្មវិធីរុករកគឺជាមួយ CSS ។ គ្រាន់តែចាំថាចាប់តាំងពីយើងកំពុងនិយាយអំពីការផ្លាស់ប្តូរដែលមើលឃើញនៅលើទំព័រ (ធ្វើឱ្យលំហូរអត្ថបទជុំវិញរូបភាព) នេះមានន័យថាវាជាដែននៃសន្លឹករចនាប័ទ្មល្បែង។

1. ដំបូងបន្ថែមរូបភាពរបស់អ្នកទៅទំព័រវ៉ិបសាយរបស់អ្នក។ ចងចាំថាមិនរាប់បញ្ចូលលក្ខណៈដែលមើលឃើញ (ដូចជាទទឹងនិងកម្ពស់) ពី HTML នោះ។ នេះមានសារៈសំខាន់ជាពិសេសសម្រាប់ គេហទំព័រឆ្លើយតប ដែលទំហំរូបភាពនឹងប្រែប្រួលទៅតាមកម្មវិធីរុករក។ កម្មវិធីមួយចំនួនដូចជា Adobe Dreamweaver នឹងបន្ថែមព័ត៌មានទទឹងនិងកំពស់រូបភាពដែលត្រូវបានបញ្ចូលជាមួយឧបករណ៍នោះដូច្នេះត្រូវប្រាកដថាយកព័ត៌មាននេះចេញពីកូដ HTML! សូមប្រាកដ, ទោះជាយ៉ាងណា, ដើម្បីរួមបញ្ចូល អត្ថបទ alt សមរម្យ ។ នេះជាឧទាហរណ៍អំពីរបៀបដែលកូដ HTML របស់អ្នកអាចមើលទៅ:
2. សម្រាប់គោលបំណងរចនាប័ទ្មអ្នកក៏អាចបន្ថែមថ្នាក់មួយទៅជារូបភាព។ តម្លៃថ្នាក់នេះគឺជាអ្វីដែលយើងនឹងប្រើក្នុងឯកសារ CSS របស់យើង។ ចំណាំថាតម្លៃដែលយើងប្រើនៅទីនេះគឺមានភាពមិនអរៈទោះយ៉ាងណាសម្រាប់រចនាប័ទ្មពិសេសនេះយើងប្រើនិមិត្តសញ្ញា "ឆ្វេង" ឬ "ស្ដាំ" អាស្រ័យលើវិធីដែលយើងចង់ឱ្យរូបភាពរបស់យើងតម្រឹម។ យើងរកឃើញវិធីសាស្រ្តសាមញ្ញដើម្បីដំណើរការល្អនិងងាយស្រួលសម្រាប់អ្នកដទៃដែលអាចគ្រប់គ្រងវែបសាយត៍ក្នុងពេលអនាគតដើម្បីឱ្យយល់ប៉ុន្តែអ្នកអាចផ្តល់នូវតម្លៃថ្នាក់ណាមួយដែលអ្នកចង់បាន។
   2. ដោយខ្លួនឯងតម្លៃថ្នាក់នេះនឹងមិនធ្វើអ្វីទេ។ រូបភាពនឹងមិនត្រូវបានតម្រឹមទៅខាងឆ្វេងដោយស្វ័យប្រវត្តិទេ។ ចំពោះបញ្ហានេះយើងត្រូវប្តូរទៅជាឯកសារ CSS របស់យើង។

1. នៅក្នុងសន្លឹករចនាប័ទ្មរបស់អ្នកឥឡូវនេះអ្នកអាចបន្ថែមរចនាប័ទ្មដូចខាងក្រោម:
   1. .left {
   2. float: left;
   3. ចន្លោះ: 0 20px 20px 0;
   4. }
   5. អ្វីដែលអ្នកបានធ្វើនៅទីនេះគឺប្រើ លក្ខណសម្បត្តិ CSS "float" ដែលនឹងទាញរូបភាពពីលំហូរឯកសារធម្មតា (របៀបដែលរូបភាពនឹងបង្ហាញជាធម្មតាជាមួយអត្ថបទដែលនៅខាងក្រោមវា) ហើយវានឹងតម្រឹមវាទៅផ្នែកខាងឆ្វេងនៃឧបករណ៍ផ្ទុករបស់វា។ ។ អត្ថបទដែលចេញបន្ទាប់ពីវានៅក្នុងការសម្គាល់ HTML ដែលឥឡូវនេះរុំព័ទ្ធវា។ យើងក៏បានបន្ថែមតម្លៃចន្លោះមួយចំនួនផងដែរដូច្នេះអត្ថបទនេះនឹងមិនកើតឡើងដោយផ្ទាល់ទេ។ ផ្ទុយទៅវិញវានឹងមានគម្លាតល្អ ៗ មួយចំនួនដែលនឹងមានភាពទាក់ទាញនៅក្នុងការរចនាទំព័រ។ នៅក្នុង CSS អក្សរកាត់សម្រាប់ចន្លោះយើងបានបន្ថែម 0 តម្លៃទៅផ្នែកខាងលើនិងខាងឆ្វេងនៃរូបភាពនិង 20 ភីកសែលទៅខាងឆ្វេងនិងបាតរបស់វា។ សូមចាំថាអ្នកត្រូវបន្ថែមបន្ទះមួយចំនួននៅផ្នែកខាងស្តាំនៃរូបភាពតម្រឹមឆ្វេង។ រូបភាពតម្រឹមស្ដាំ (ដែលយើងនឹងមើលនៅក្នុងពេល) នឹងមានគែមត្រូវបានអនុវត្តទៅខាងឆ្វេងរបស់វា។
2. ប្រសិនបើអ្នកមើលទំព័រវ៉ិបសាយរបស់អ្នកនៅក្នុងកម្មវិធីរុករកអ្នកគួរតែឃើញថារូបភាពរបស់អ្នកត្រូវបានតម្រឹមទៅផ្នែកខាងឆ្វេងនៃទំព័រហើយអត្ថបទនោះនឹងបិទបាំងវា។ វិធីមួយទៀតដើម្បីនិយាយថានេះគឺថារូបភាពនេះត្រូវបាន "អណ្តែតទៅខាងឆ្វេង" ។

1. ប្រសិនបើអ្នកចង់ផ្លាស់ប្តូររូបភាពនេះត្រូវបានតម្រឹមទៅខាងស្ដាំ (ដូចក្នុងឧទាហរណ៍រូបថតដែលភ្ជាប់ជាមួយអត្ថបទនេះ) វានឹងមានលក្ខណៈសាមញ្ញ។ ដំបូងអ្នកត្រូវប្រាកដថាបន្ថែមលើរចនាប័ទ្មដែលយើងគ្រាន់តែបន្ថែម CSS របស់យើងសម្រាប់តម្លៃថ្នាក់នៃ "ខាងឆ្វេង" យើងក៏មានមួយសម្រាប់តម្រឹមស្តាំ។ វានឹងមើលទៅដូចនេះ:
   1. .right {
   2. float: right;
   3. ចន្លោះ: 0 0 20px 20px;
   4. }
   5. អ្នកអាចមើលឃើញថានេះគឺស្ទើរតែដូចគ្នាទៅនឹង CSS ដំបូងដែលយើងបានសរសេរ។ ភាពខុសគ្នាតែមួយគត់គឺតម្លៃដែលយើងប្រើសម្រាប់លក្ខណសម្បត្តិ "float" និងតម្លៃចន្លោះដែលយើងប្រើ (បន្ថែមមួយចំនួនទៅខាងឆ្វេងនៃរូបភាពរបស់យើងជំនួសឱ្យខាងស្ដាំ) ។
2. ជាចុងក្រោយអ្នកនឹងផ្លាស់ប្តូរតម្លៃនៃថ្នាក់រូបភាពពី "ឆ្វេង" ទៅ "ស្តាំ" នៅក្នុង HTML របស់អ្នក:
3. មើលទំព័ររបស់អ្នកនៅក្នុងកម្មវិធីរុករកឥឡូវនេះហើយរូបភាពរបស់អ្នកគួរតែត្រូវបានតម្រឹមទៅខាងស្ដាំដោយអត្ថបទរុំព័ទ្ធជុំវិញវា។ យើងមាននិន្នាការបន្ថែមរចនាប័ទ្មទាំងនេះ "ឆ្វេង" និង "ស្តាំ" ទៅសន្លឹករចនាប័ទ្មទាំងអស់របស់យើងដូច្នេះយើងអាចប្រើរចនាប័ទ្មដែលមើលឃើញទាំងនេះតាមតម្រូវការនៅពេលយើងបង្កើតគេហទំព័រ។ រចនាប័ទ្មទាំងពីរនេះក្លាយជាលក្ខណៈពិសេសដែលអាចប្រើឡើងវិញបានដែលយើងអាចបើកទៅគ្រប់ពេលដែលយើងត្រូវការរចនាប័ទ្មរូបភាពជាមួយនឹងការរុំអត្ថបទនៅជុំវិញពួកគេ។

ប្រើ HTML ជំនួសឱ្យ CSS (ហើយហេតុអ្វីអ្នកមិនគួរធ្វើដូច្នេះ)

ទោះបីជាវាអាចធ្វើរុំអត្ថបទនៅជុំវិញរូបភាពជាមួយ HTML ក៏ដោយស្តង់ដារតាមអ៊ីនធឺណិតកំណត់ថា CSS (និងជំហានដែលបានបង្ហាញខាងលើ) គឺជាវិធីដែលត្រូវដំណើរការដូច្នេះយើងអាចថែរក្សាការបែងចែករចនាសម្ព័ន្ធ (HTML) និងរចនាប័ទ្ម (CSS) ។ នេះមានសារៈសំខាន់ជាពិសេសនៅពេលអ្នកពិចារណាថាសម្រាប់ឧបករណ៍និងប្លង់មួយចំនួនអត្ថបទនោះ ប្រហែលជាមិន ត្រូវហូរនៅជុំវិញរូបភាពនោះទេ។ សម្រាប់អេក្រង់តូចជាងប្លង់វេបសាយដែលឆ្លើយតបអាចតម្រូវឱ្យអត្ថបទស្ថិតនៅត្រង់រូបភាពខាងក្រោមហើយរូបភាពនោះលាតសន្ធឹងទទឹងពេញអេក្រង់។ នេះត្រូវបានធ្វើយ៉ាងងាយស្រួលជាមួយ សំណួរប្រព័ន្ធផ្សព្វផ្សាយ ប្រសិនបើរចនាប័ទ្មរបស់អ្នកគឺដាច់ដោយឡែកពីការសម្គាល់ HTML របស់អ្នក។ នៅក្នុងពិភពលោកពហុឧបករណ៍នាពេលបច្ចុប្បន្ននេះដែលរូបភាពនិងអត្ថបទនឹងលេចឡើងខុសៗគ្នាសម្រាប់អ្នកទស្សនាខុសគ្នានិងនៅលើអេក្រង់ខុសគ្នាការបែងចែកនេះគឺសំខាន់ចំពោះការជោគជ័យរយៈពេលវែងនិងការគ្រប់គ្រងគេហទំព័រ។