ប្រើពុម្ពអក្សរស៊ុមនិងរូបភាពដើម្បីតុបតែងចំណងជើង
ព័ត៌មានសំខាន់ៗនៅលើគេហទំព័រភាគច្រើន។ ជាការពិតណាស់ឯកសារអត្ថបទមួយចំនួនទំនងជាមានចំណងជើងយ៉ាងហោចណាស់មួយដូច្នេះអ្នកអាចស្គាល់ចំណងជើងនៃអ្វីដែលអ្នកកំពុងអាន។ ចំណងជើងទាំងនេះត្រូវបានសរសេរកូដដោយប្រើធាតុក្បាល HTML - h1, h2, h3, h4, h5 និង h6 ។
នៅលើគេហទំព័រមួយចំនួនអ្នកអាចរកចំណងជើងដែលត្រូវបានដាក់កូដដោយមិនប្រើធាតុទាំងនេះ។ ផ្ទុយទៅវិញចំណងជើងអាចប្រើកថាខណ្ឌដែលមានគុណលក្ខណៈថ្នាក់ជាក់លាក់ដែលបានបន្ថែមទៅពួកវាឬការបែកបាក់ជាមួយធាតុថ្នាក់។ មូលហេតុដែលខ្ញុំឮអំពីការអនុវត្តមិនត្រឹមត្រូវនេះគឺថាអ្នកច្នៃម៉ូដ "មិនចូលចិត្តក្បាលវិធីមើលទេ" ។ តាមលំនាំដើមក្បាលត្រូវបានបង្ហាញជាដិតហើយទំហំទាំងនោះធំជាងជាពិសេសធាតុ h1 និង h2 ដែលបង្ហាញនៅក្នុងទំហំពុម្ពអក្សរធំជាងអត្ថបទដែលនៅសល់របស់អត្ថបទ។ សូមចងចាំថានេះគ្រាន់តែជារូបរាងដើមនៃធាតុទាំងនេះប៉ុណ្ណោះ! ជាមួយនឹង CSS, អ្នកអាចធ្វើឱ្យក្បាលមើលទៅទោះជាយ៉ាងណាអ្នកចង់បាន! អ្នកអាចផ្លាស់ប្តូរទំហំពុម្ពអក្សរដកដិតនិងច្រើនទៀត។ ក្បាលគឺជាមធ្យោបាយត្រឹមត្រូវក្នុងការសរសេរកូដចំណងជើងរបស់ទំព័រមួយ។ នេះគឺជាហេតុផលមួយចំនួន។
ហេតុអ្វីចាំបាច់ប្រើស្លាកក្បាលជំនួសឱ្យ DIVs និងរចនាប័ទ្ម
ម៉ាស៊ីនស្វែងរកដូចជាស្លាកក្បាល
នេះជាហេតុផលដ៏ល្អបំផុតដើម្បីប្រើក្បាលនិងប្រើប្រាស់វាតាមលំដាប់ត្រឹមត្រូវ (ឧ។ h1 បន្ទាប់មក h2 បន្ទាប់មក h3 ។ ល។ ) ។ ម៉ាស៊ីនស្វែងរកផ្តល់នូវទំងន់ខ្ពស់បំផុតចំពោះអត្ថបទដែលបានរួមបញ្ចូលនៅក្នុងស្លាកក្បាលព្រោះវាមានតម្លៃសេណេទិកចំពោះអត្ថបទនោះ។ នៅក្នុងពាក្យផ្សេងទៀតដោយដាក់ស្លាកចំណងជើងទំព័រ H1 អ្នកប្រាប់អាយឃីម៉ាស៊ីនស្វែងរកថានេះជាចំណុចផ្តោត # 1 នៃទំព័រ។ ក្បាល H2 មានការសង្កត់ធ្ងន់ # 2 ហើយដូច្នេះនៅលើ។
អ្នកមិនត្រូវចាំអ្វីដែលថ្នាក់ដែលអ្នកប្រើដើម្បីកំណត់ចំណងជើងរបស់អ្នក
នៅពេលដែលអ្នកដឹងថាទំព័របណ្តាញទាំងអស់របស់អ្នកនឹងមាន H1 ដែលមានដិត 2 មនិងពណ៌លឿងអ្នកអាចកំណត់ថានៅក្នុងសន្លឹករចនាប័ទ្មរបស់អ្នករួចរាល់។ 6 ខែក្រោយមកនៅពេលអ្នកកំពុងបន្ថែមទំព័រផ្សេងអ្នកគ្រាន់តែបន្ថែមស្លាក H1 ទៅផ្នែកខាងលើនៃទំព័ររបស់អ្នកអ្នកមិនត្រូវត្រឡប់ទៅទំព័រផ្សេងទៀតដើម្បីរកឱ្យឃើញនូវរចនាប័ទ្មលេខសម្គាល់ឬថ្នាក់ដែលអ្នកប្រើដើម្បីកំណត់មេ ចំណងជើងនិងអនុក្បាល។
ពួកវាផ្តល់នូវគ្រោងទំព័រដ៏រឹងមាំ
បរិបទធ្វើឱ្យអក្សរងាយស្រួលអាន។ នោះហើយជាមូលហេតុដែលសាលារៀននៅសហរដ្ឋអាមេរិចភាគច្រើនបានបង្រៀនសិស្សឱ្យចេះសរសេរគ្រោងទុកមុនពេលពួកគេសរសេរក្រដាស។ ពេលអ្នកប្រើស្លាកក្បាលក្នុងទ្រង់ទ្រាយគ្រោងអត្ថបទរបស់អ្នកមានរចនាសម្ព័ន្ធច្បាស់លាស់ដែលបង្ហាញយ៉ាងរហ័ស។ លើសពីនេះមានឧបករណ៍ដែលអាចពិនិត្យគ្រោងទំព័រឡើងវិញដើម្បីផ្តល់ការសង្ខេបហើយទាំងនេះពឹងផ្អែកលើស្លាកក្បាលសម្រាប់រចនាសម្ព័ន្ធគ្រោង។
ទំព័ររបស់អ្នកនឹងធ្វើឱ្យអារម្មណ៍ទោះបីជារចនាប័ទ្មត្រូវបានបិទក៏ដោយ
មិនមែនគ្រប់ៗគ្នាអាចមើលឬប្រើសន្លឹករចនាប័ទ្ម (ហើយវាត្រឡប់ទៅលេខ 1 វិញទេ - ម៉ាស៊ីនស្វែងរកមើលមាតិកា (អត្ថបទ) នៃទំព័ររបស់អ្នកមិនមែនសន្លឹករចនាប័ទ្មទេ) ។ ប្រសិនបើអ្នកប្រើស្លាកចំណងជើងអ្នកកំពុងធ្វើឱ្យទំព័ររបស់អ្នកអាចចូលដំណើរការបានកាន់តែច្រើនព្រោះចំណងជើងផ្តល់ព័ត៌មានដែលស្លាក DIV នឹងមិនមាន។
វាមានប្រយោជន៍សម្រាប់អ្នកអានអេក្រង់និងភាពងាយស្រួលគេហទំព័រ
ការប្រើក្បាលត្រឹមត្រូវបង្កើតរចនាសម្ព័ន្ធឡូជីខលមួយទៅឯកសារមួយ។ នេះគឺជាអ្វីដែលអ្នកអានអេក្រង់នឹងប្រើដើម្បីអានគេហទំព័រមួយទៅអ្នកប្រើដែលមានការខូចខាតចក្ខុវិស័យដែលធ្វើឱ្យគេហទំព័ររបស់អ្នកអាចប្រើបានសម្រាប់ជនពិការ។
រចនាប័ទ្មអត្ថបទនិងពុម្ពអក្សរនៃចំណងជើងរបស់អ្នក
មធ្យោបាយងាយស្រួលបំផុតដើម្បីផ្លាស់ទីឆ្ងាយពីបញ្ហា "ធំធរណីនិងអាក្រក់" នៃស្លាកចំណងជើងគឺដើម្បីរចនាអត្ថបទតាមវិធីដែលអ្នកចង់ឱ្យពួកគេមើល។ តាមការពិតនៅពេលខ្ញុំធ្វើការនៅលើគេហទំព័រថ្មីខ្ញុំតែងសរសេរកថាខណ្ឌទី 1 គឺ h1, h2 និង h3 ។ ជាធម្មតាខ្ញុំជាប់នឹងគ្រួសារពុម្ពអក្សរនិងទំហំ / ទំងន់។ ឧទាហរណ៍វាអាចជាសន្លឹករចនាប័ទ្មបឋមសម្រាប់តំបន់បណ្ដាញថ្មី (ទាំងនេះគ្រាន់តែជារចនាប័ទ្មឧទាហរណ៍មួយប៉ុណ្ណោះដែលអាចប្រើបាន):
រាងកាយ, html {រឹម: 0; ចន្លោះ: 0; } p {ពុម្ពអក្សរ: 1em Arial, ទីក្រុងហ្សឺណែវ, Helvetica, sans-serif; } h1 {ពុម្ពអក្សរ: bold 2em "Times New Roman", Times, serif; } h2 {ពុម្ពអក្សរ: ដិតទី 1.5 "ពេលវេលាថ្មីរ៉ូម៉ាំង", ពេលវេលា, serif; } h3 {អក្សរ: bold 1.2em Arial, ទីក្រុងហ្សឺណែវ, Helvetica, sans-serif; }អ្នកអាចកែប្រែពុម្ពអក្សរនៃចំណងជើងរបស់អ្នកឬផ្លាស់ប្តូររចនាប័ទ្មអត្ថបទឬសូម្បីតែ ពណ៌អត្ថបទ ។ ទាំងអស់នេះនឹងក្លាយជាចំណងជើង "អាក្រក់" របស់អ្នកទៅជាអ្វីមួយដែលរស់រវើកបន្ថែមទៀតនិងនៅក្នុងការរក្សាជាមួយនឹងការរចនារបស់អ្នក។
h1 {ពុម្ពអក្សរ: ដិតទ្រេត 2em / 1em "Times New Roman", "MS Serif", "ញូវយ៉ក", serif; រឹម: 0; ចន្លោះ: 0; ពណ៌: # e7ce00; }ស៊ុមអាចស្លៀកក្រដាស
ស៊ុមគឺជាវិធីដ៏ល្អមួយដើម្បីកែលម្អចំណងជើងរបស់អ្នក។ ហើយស៊ុមងាយនឹងបន្ថែម។ ប៉ុន្តែកុំភ្លេចដកពិសោធន៍ជាមួយស៊ុម - អ្នកមិនត្រូវការស៊ុមនៅផ្នែកម្ខាងនៃចំណងជើងរបស់អ្នកទេ។ ហើយអ្នកអាចប្រើច្រើនជាងព្រំដែនធម្មតារាបស្មើ។
h1 {ពុម្ពអក្សរ: ដិតទ្រេត 2em / 1em "Times New Roman", "MS Serif", "ញូវយ៉ក", serif; រឹម: 0; ចន្លោះ: 0; ពណ៌: # e7ce00; border-top: មធ្យម # e7ce00 មធ្យម ស៊ុមបាត: ចំណុច # e7ce00 ស្តើង; ទទឹង: 600px; }ខ្ញុំបានបន្ថែមស៊ុមលើកំពូលនិងបាតទៅចំណងជើងគំរូរបស់ខ្ញុំដើម្បីណែនាំរចនាប័ទ្មដែលមើលឃើញគួរឱ្យចាប់អារម្មណ៍មួយចំនួន។ អ្នកអាចបន្ថែមស៊ុមនៅក្នុងវិធីណាមួយដែលអ្នកចង់សម្រេចបាននូវរចនាប័ទ្មរចនាដែលអ្នកចង់បាន។
បន្ថែមរូបភាពផ្ទៃខាងក្រោយទៅនឹងចំណងជើងរបស់អ្នកសម្រាប់ Pizazz កាន់តែច្រើន
គេហទំព័រជាច្រើនមានផ្នែកបឋមកថានៅផ្នែកខាងលើនៃទំព័រដែលមានចំណងជើង - ជាទូទៅចំណងជើងឋានៈនិងក្រាហ្វិក។ អ្នករចនាភាគច្រើនគិតថានេះជាធាតុដាច់ដោយឡែកពីរប៉ុន្តែអ្នកមិនចាំបាច់។ ប្រសិនបើក្រាហ្វិកគឺគ្រាន់តែដើម្បីតុបតែងចំណងជើងបន្ទាប់មកហេតុអ្វីមិនបន្ថែមវាទៅរចនាប័ទ្មក្បាល?
h1 {ពុម្ពអក្សរ: ដិតទ្រេត 3em / 1em "Times New Roman", "MS ស៊េរី", "ញូវយ៉ក", serif; ផ្ទៃខាងក្រោយ: #fff url ("fancyheadline.jpg") repeat-x bottom; ចន្លោះ: 0,5em 0 90px 0; text- align: center; រឹម: 0; border-bottom: solid # e7ce00 0.25em; ពណ៌: # e7ce00; }ល្បិចកលសម្រាប់ចំណងជើងនេះគឺថាខ្ញុំដឹងថារូបភាពរបស់ខ្ញុំមានកម្ពស់ 90 ភីកសែល។ ដូច្នេះខ្ញុំបានបន្ថែមចន្លោះទៅបាតនៃចំណងជើងនៃ 90px (ចន្លោះ: 0,5 0 90px 0p;) ។ អ្នកអាចលេងជាមួយរឹមបន្ទាត់កម្ពស់និងចន្លោះដើម្បីទទួលអត្ថបទនៃចំណងជើងដើម្បីបង្ហាញកន្លែងដែលអ្នកចង់បាន។
រឿងមួយដែលត្រូវចាំនៅពេលប្រើរូបភាពគឺថាប្រសិនបើអ្នកមាន គេហទំព័រឆ្លើយតប (ដែលអ្នកគួរតែ) ជាមួយនឹងប្លង់ដែលផ្លាស់ប្តូរដោយផ្អែកលើទំហំអេក្រង់និងឧបករណ៍អ្នកនឹងមានចំណងជើងដែលមិនមានទំហំដូចគ្នា។ ប្រសិនបើអ្នកត្រូវការចំណងជើងពិតប្រាកដរបស់អ្នកដើម្បីឱ្យមានទំហំច្បាស់លាស់វាអាចបណ្តាលឱ្យមានបញ្ហា។ វាជាមូលហេតុមួយក្នុងចំណោមហេតុផលដែលខ្ញុំជៀសវាងរូបភាពជាទូទៅក្នុងរូបភាពដែលត្រជាក់បំផុតដែលជួនកាលមើលទៅ។
ការជំនួសរូបភាពនៅក្នុងចំណងជើង
នេះគឺជាបច្ចេកទេសដ៏ពេញនិយមមួយផ្សេងទៀតសម្រាប់អ្នករចនាគេហទំព័រពីព្រោះវាអនុញ្ញាតឱ្យអ្នកបង្កើតចំណងជើងក្រាហ្វិកនិងជំនួសអត្ថបទនៃចំណងជើងក្បាលជាមួយនឹងរូបភាពនោះ។ នេះគឺជាការពិតដែលជាការអនុវត្តន៍ចាស់ពីអ្នករចនាគេហទំព័រដែលអាចចូលមើលពុម្ពអក្សរពីរបីតូចៗហើយចង់ប្រើពុម្ពអក្សរកម្រនិងអសកម្មជាច្រើននៅក្នុងការងាររបស់ពួកគេ។ ការកើនឡើងនៃ ពុម្ពអក្សរបណ្ដាញ បានផ្លាស់ប្តូរពិតជារបៀបអ្នករចនាវិបសាយចូល។ ឥឡូវចំណងជើងអាចត្រូវបានកំណត់នៅក្នុងពពួកពុម្ពអក្សរធំទូលាយនិងរូបភាពដែលមានពុម្ពអក្សរទាំងនោះដែលបានបង្កប់មិនត្រូវការ។ ដូច្នេះអ្នកនឹងរកឃើញការជំនួសរូបភាព CSS សម្រាប់ចំណងជើងនៅលើវិបសាយចាស់ៗដែលមិនទាន់ត្រូវបានធ្វើបច្ចុប្បន្នភាពទៅការអនុវត្តទំនើប ៗ បន្ថែមទៀត។
អត្ថបទដើមរបស់នាង Jennifer Krynin ។ កែសម្រួលដោយលោក Jeremy Girard នៅថ្ងៃទី 9 ខែមិថុនាឆ្នាំ 17