தலைப்புகள் அலங்கரிக்க எழுத்துருக்கள், எல்லைகள் மற்றும் படங்கள் பயன்படுத்தவும்
பெரும்பாலான வலைத்தளங்களில் தலைப்பு செய்திகள் பொதுவானவை. சொல்லப்போனால், எந்த உரை ஆவணமும் மிக குறைந்தது ஒரு தலைப்பைக் கொண்டிருக்கின்றது, எனவே நீங்கள் படித்துக்கொண்டிருக்கும் தலைப்பை உங்களுக்குத் தெரியும். இந்த தலைப்புகள் HTML தலைப்பு உறுப்புகள் - H1, H2, H3, H4, H5 மற்றும் H6 ஐ பயன்படுத்தி குறியிடப்படுகின்றன.
சில தளங்களில், இந்த உறுப்புகளைப் பயன்படுத்தாமல் மூடுவதன் மூலங்களை நீங்கள் காணலாம். அதற்கு பதிலாக, தலைப்புகள் அவற்றை சேர்க்க குறிப்பிட்ட வர்க்க பண்புகளை பத்திகள் பயன்படுத்தலாம், அல்லது வர்க்க கூறுகளை கொண்ட பிரிவுகள். இந்த தவறான நடைமுறையைப் பற்றி நான் அடிக்கடி கேட்கும் காரணம், வடிவமைப்பாளர் "தலைப்பகுதிகளைப் பார்க்க விரும்புவதில்லை". முன்னிருப்பாக, தலைப்புகள் தடிமனாக காட்டப்படும், அவை பெரிய அளவிலானவை, குறிப்பாக h1 மற்றும் h2 உறுப்புகள் ஒரு பக்கத்தின் உரைக்குப் பதிலாக மிக பெரிய எழுத்துரு அளவு காட்டப்படும். இந்த உறுப்புகளின் இயல்புநிலை தோற்றத்தை மட்டும் நினைவில் கொள்ளுங்கள்! CSS உடன், நீங்கள் விரும்பும் தோற்றத்தை உருவாக்கலாம்! நீங்கள் எழுத்துரு அளவு மாற்ற, தடித்த நீக்க, மற்றும் மிகவும் முடியும். தலைப்புகள் ஒரு பக்கத்தின் தலைவர்களுக்கான குறியீட்டுக்கு சரியான வழி. ஏன் சில காரணங்கள்.
ஏன் DIV கள் மற்றும் ஸ்டைலிங் ஆகியவற்றைக் காட்டிலும் தலைப்பு குறிச்சொற்களைப் பயன்படுத்துங்கள்
தலைப்பு குறிச்சொற்களை போல தேடு பொறிகள்
இது தலைப்புகள் பயன்படுத்த, மற்றும் சரியான வரிசையில் (ie h1, பின்னர் h2, பின்னர் h3, முதலியன) பயன்படுத்த சிறந்த காரணம் இது. அந்த உரைக்கு ஒரு சொற்பொருள் மதிப்பு இருப்பதால் தேடல் குறிச்சொற்களை குறிச்சொற்களை உள்ளே சேர்க்கப்பட்டுள்ளது உரை மிக அதிக எடை கொடுக்கின்றன. வேறு வார்த்தைகளில் கூறுவதானால், உங்கள் பக்கம் தலைப்பு H1 ஐ பெயரிடுவதன் மூலம், நீங்கள் தேடுபொறி சிலந்திக்கு பக்கத்தை # 1 மையமாகக் கூறுகிறீர்கள். H2 தலைப்புகள் # 2 முக்கியத்துவம், மற்றும் பல.
உங்கள் தலைப்புகள் வரையறுக்க நீங்கள் பயன்படுத்திய வகுப்புகளை நினைவில் கொள்ள வேண்டாம்
உங்கள் வலைப்பக்கங்கள் அனைத்தும் H1, தைலம் மற்றும் மஞ்சள் நிறமாக இருக்கும் என்று உங்களுக்குத் தெரியுமானால், அந்த முறை உங்கள் நடைதாளுடன் ஒருமுறை வரையறுக்கலாம். 6 மாதங்கள் கழித்து, நீங்கள் மற்றொரு பக்கத்தை சேர்க்கும்போது, உங்கள் பக்கத்தின் மேல் ஒரு H1 குறியைச் சேர்க்கும் போது, முக்கிய பக்கத்தை வரையறுக்க என்ன பாணி ID அல்லது வகுப்பைக் கண்டுபிடிக்க மற்ற பக்கங்களுக்கு நீங்கள் செல்ல வேண்டியதில்லை. தலைப்பு மற்றும் துணை தலைப்புகள்.
அவர்கள் ஒரு வலுவான பக்க வெளிப்பாடு வழங்க
உரையை வாசிக்க எளிதாக உரை எழுதுகிறது. அதனால்தான் பெரும்பாலான அமெரிக்க பள்ளிகள் மாணவர்கள் காகிதத்தை எழுத முன் ஒரு வெளிப்புறத்தை எழுதுவதற்கு மாணவர்களுக்கு கற்பித்தது. நீங்கள் வெளிப்புற வடிவத்தில் குறிச்சொற்களை தலைமுறை பயன்படுத்த போது, உங்கள் உரை ஒரு தெளிவான அமைப்பு மிகவும் தெளிவாக வெளிப்படையான ஆகிறது. பிளஸ், ஒரு சுருக்கம் வழங்க பக்க அவுட்லைனை மறுபரிசீலனை செய்யக்கூடிய கருவிகள் உள்ளன, மேலும் இவை வெளிப்புற கட்டமைப்பிற்கான குறிச்சொற்களை தலைகீழாகக் கொண்டிருக்கின்றன.
பாங்குகள் முடக்கப்பட்டாலும் கூட உங்கள் பக்கம் செழிப்புடன் இருக்கும்
அனைவருக்கும் ஸ்டைல் ஷீட்களைப் பார்க்கவோ அல்லது பயன்படுத்தவோ முடியாது (இது மீண்டும் # 1 ஆகிறது - தேடுபொறிகள் உங்கள் பக்கத்தின் உள்ளடக்கத்தை (உரை) பார்வையிடலாம், ஸ்டைல் ஷீட்கள் அல்ல). நீங்கள் தலைப்பு குறிச்சொற்களைப் பயன்படுத்தினால், உங்கள் பக்கங்களை அணுகுவதன் மூலம், நீங்கள் ஒரு டி.வி.
இது ஸ்கிரீன் ரீடர்கள் மற்றும் இணையத்தள அணுகல் ஆகியவற்றிற்கு உதவுகிறது
தலைப்புகள் சரியான பயன்பாடு ஒரு ஆவணத்தை ஒரு தருக்க கட்டமைப்பு உருவாக்குகிறது. இது ஸ்கிரீன் ரீடர்ஸ் ஒரு பயனருக்கு பார்வையாளர்களை ஒரு பார்வை குறைபாடுடன் பயன்படுத்துவதைப் பயன்படுத்துகிறது, இது குறைபாடுகள் உள்ளவர்களுக்கு உங்கள் தளத்தை அணுக உதவுகிறது.
உடை உங்கள் தலைப்பின் உரை மற்றும் எழுத்துரு
குறிச்சொற்களை தலைப்பு "பெரிய, தைரியமான, மற்றும் அசிங்கமான" பிரச்சினை இருந்து நகர்த்த எளிதான வழி உரை அவர்கள் நீங்கள் பார்க்க வேண்டும் என்று பாணி பாணியில் உள்ளது. உண்மையில், நான் ஒரு புதிய இணைய தளத்தில் பணிபுரிகிறேன், நான் பொதுவாக பத்தி, H1, H2, மற்றும் H3 பாணிகளை முதல் விஷயத்தை எழுதுகிறேன். நான் வழக்கமாக வெறும் எழுத்துரு குடும்பம் மற்றும் அளவு / எடை ஒட்டிக்கொள்கின்றன. உதாரணமாக, இது ஒரு புதிய தளத்திற்கு ஒரு ஆரம்ப நடை தாள் இருக்கலாம் (இவை சில பயன்படுத்தக்கூடிய பாணியாகும்):
உடல், html {margin: 0; திணிப்பு: 0; } p {font: 1em ஏரியல், ஜெனிவா, ஹெல்வெடிகா, சான்ஸ்-செரிஃப்; } h1 {font: bold 2em "Times New Roman", Times, serif; } h2 {font: bold 1.5em "Times New Roman", Times, Serif; } h3 {font: bold 1.2em ஏரியல், ஜெனிவா, ஹெல்வெடிகா, sans-serif; }நீங்கள் உங்கள் தலைப்பின் எழுத்துருக்களை மாற்றியமைக்கலாம் அல்லது உரை பாணியை அல்லது உரை வண்ணத்தை மாற்றலாம் . இந்த அனைத்து உங்கள் "அசிங்கமான" தலைப்பை இன்னும் துடிப்பான மற்றும் உங்கள் வடிவமைப்பு வைத்து ஒரு மாறும்.
h1 {font: bold italic 2em / 1em "Times New Roman", "MS Serif", "New York", Serif; விளிம்பு: 0; திணிப்பு: 0; நிறம்: # e7ce00; }எல்லைகள் தலைப்புகளை உடுத்தி முடியும்
எல்லைகள் உங்கள் தலைப்புகளை மேம்படுத்த சிறந்த வழியாகும். மற்றும் எல்லைகளை சேர்க்க எளிதானது. ஆனால் எல்லோருடனும் முயற்சிக்க மறக்காதே - உங்கள் தலைப்பின் ஒவ்வொரு பக்கத்திலும் ஒரு எல்லையை உங்களுக்கு தேவையில்லை. நீங்கள் சாதாரணமான போரிங் எல்லைகளை விட அதிகமாக பயன்படுத்தலாம்.
h1 {font: bold italic 2em / 1em "Times New Roman", "MS Serif", "New York", Serif; விளிம்பு: 0; திணிப்பு: 0; நிறம்: # e7ce00; எல்லை-மேல்: திட # e7ce00 ஊடகம்; எல்லை-கீழே: புள்ளி # e7ce00 மெல்லிய; அகலம்: 600px; }சில சுவாரஸ்யமான காட்சி பாணியை அறிமுகப்படுத்த என் மாதிரி தலைப்புக்கு மேல் மற்றும் கீழ் எல்லைகளைச் சேர்த்தேன். நீங்கள் விரும்பும் வடிவமைப்பு பாணி அடைய வேண்டும் என்று எந்த விதத்திலும் எல்லைகளை சேர்க்க முடியும்.
இன்னும் பிஸாஸ் உங்கள் தலைப்புக்கு பின்னணி படங்களை சேர்க்க
பல வலைத் தளங்களில் ஒரு தலைப்பை உள்ளடக்கிய பக்கத்தின் மேல் பகுதியில் ஒரு பகுதி உள்ளது - பொதுவாக தள தலைப்பு மற்றும் கிராஃபிக். பெரும்பாலான வடிவமைப்பாளர்கள் இதை இரு தனி கூறுகளாக கருதுகின்றனர், ஆனால் நீங்கள் இல்லை. கிராஃபிக் தலைப்பு இருந்தால் தான் தலைப்பை அலங்கரிக்க வேண்டும், பிறகு தலைப்பு பாணியை ஏன் சேர்க்கக்கூடாது?
h1 {font: bold italic 3em / 1em "Times New Roman", "MS Serif", "New York", serif; பின்னணி: #ff url ("fancyheadline.jpg") மீண்டும்-x கீழே; திணிப்பு: 0.5 0 0 90px 0; உரை-சீரமைப்பு: மையம்; விளிம்பு: 0; எல்லை-கீழே: திட # e7ce00 0.25 மணி; நிறம்: # e7ce00; }இந்த தலைப்புக்கு தந்திரம் என்பது என் படத்தின் 90 பிக்சல்கள் உயரம் என்று எனக்கு தெரியும். அதனால் நான் 90px (திணிப்பு: 0.5 0 90px 0p;) தலைப்பின் கீழ் திணிப்புகளை சேர்த்தேன். நீங்கள் எங்கு வேண்டுமானாலும் எங்கு வேண்டுமானாலும் காண்பிக்க தலைப்பு தலைப்பை பெற விளிம்புகள், வரிசை உயரம் மற்றும் திணிப்புடன் விளையாடலாம்.
படங்களை பயன்படுத்தும் போது நினைவில் கொள்ள வேண்டிய ஒன்று, நீங்கள் திரை அளவுகள் மற்றும் சாதனங்களின் அடிப்படையில் மாறும் ஒரு அமைப்பை கொண்ட ஒரு பதிலளிக்க வலைத்தளம் (இது நீங்கள் வேண்டும்) இருந்தால், தலைப்பில் எப்போதும் ஒரே அளவு இருக்காது. உங்களுடைய தலைப்பில் சரியான அளவு தேவைப்பட்டால், இது சிக்கல்களை ஏற்படுத்தும். இது ஒரு தலைப்பில் பின்னணி படங்களை தவிர்ப்பதற்கான காரணங்களில் ஒன்றாகும், அவை சில நேரங்களில் தோற்றமளிக்கும் விதமாக இருக்கும்.
தலைப்புகளில் பட இடமாற்றம்
இது வலை வடிவமைப்பாளர்களுக்கான மற்றொரு பிரபல நுட்பமாகும், ஏனெனில் இது ஒரு வரைகலை தலைப்பு உருவாக்கப்பட்டு அந்த படத்துடன் தலைப்பு குறிச்சொல்லின் உரைக்கு பதிலாக அனுமதிக்கிறது. இது உண்மையிலேயே இணைய வடிவமைப்பாளர்களிடமிருந்து பழமையான பழக்கவழக்கங்கள் மிகவும் குறைவான எழுத்துருக்களை அணுகுவதோடு அவர்களது வேலைகளில் கூடுதல் கவர்ச்சியான எழுத்துருக்களை பயன்படுத்த விரும்பின. வலை எழுத்துருக்கள் எழுச்சி உண்மையில் வடிவமைப்பாளர்கள் தளங்கள் அணுக எப்படி மாறிவிட்டது. இப்போது எழுத்துருக்கள் பல்வேறு எழுத்துருக்கள் மற்றும் படங்களில் அமைக்கப்படலாம், இதில் உட்பொதிக்கப்பட்ட எழுத்துருக்கள் இனி தேவைப்படாது. இன்னும், நீங்கள் பழைய தளங்களில் தலைப்புகளுக்கு பதிலாக CSS படங்களை மாற்றுவீர்கள், அவை இன்னும் நவீன நடைமுறைகளுக்கு புதுப்பிக்கப்படவில்லை.
ஜெனிபர் கிரைனின் அசல் கட்டுரை. 9/6/17 அன்று ஜெர்மி ஜாராரால் திருத்தப்பட்டது