హెడ్లైన్స్ అలంకరించేందుకు ఫాంట్లు, బోర్డర్స్ మరియు చిత్రాలను ఉపయోగించండి
చాలా వెబ్ పేజీలలో ముఖ్యాంశాలు సర్వసాధారణం. నిజానికి, ఏవైనా టెక్స్ట్ పత్రం కనీసం ఒక శీర్షికను కలిగి ఉంటుంది, తద్వారా మీరు చదివేదానికి సంబంధించిన శీర్షిక మీకు తెలుస్తుంది. ఈ శీర్షికలు HTML శీర్షిక అంశాలు - h1, h2, h 3, h4, h5 మరియు h6 ను ఉపయోగించి కోడ్ చేయబడతాయి.
కొన్ని సైట్లలో, మీరు ముఖ్యాంశాలు ఈ అంశాలను ఉపయోగించకుండా కోడ్ చేయబడతారని మీరు కనుగొనవచ్చు. బదులుగా, ముఖ్యాంశాలు వాటికి జతచేయబడిన ప్రత్యేక తరగతి లక్షణాలతో లేదా క్లాస్ ఎలిమెంట్లతో విభజనలతో పేరాలను ఉపయోగించవచ్చు. ఈ తప్పు అభ్యాసాన్ని నేను తరచూ వినడానికి కారణమేమిటంటే, డిజైనర్ "శీర్షికలు కనిపించడం ఇష్టం లేదు". డిఫాల్ట్గా, శీర్షికలు బోల్డ్లో ప్రదర్శించబడతాయి మరియు అవి పెద్ద పరిమాణంలో ఉంటాయి, ప్రత్యేకించి h1 మరియు h2 మూలకాలు చాలా పెద్ద ఫాంట్ పరిమాణంలో ప్రదర్శించే పేజీ యొక్క టెక్స్ట్ కంటే. ఈ అంశాల డిఫాల్ట్ రూపం మాత్రమే గుర్తుంచుకోండి! CSS తో, మీరు మీకు కావలసిన అయితే లుక్ లుక్ చేయవచ్చు! మీరు ఫాంట్ పరిమాణాన్ని మార్చవచ్చు, బోల్డ్ను తీసివేయవచ్చు మరియు మరెన్నో చేయవచ్చు. హెడ్డింగులు ఒక పేజీ యొక్క ముఖ్యాంశాలను కోడ్ చేయడానికి సరైన మార్గం. ఇక్కడ ఎందుకు కొన్ని కారణాలు ఉన్నాయి.
ఎందుకు శీర్షిక టాగ్లు ఉపయోగించండి బదులుగా DIVs మరియు స్టైలింగ్ కంటే
శీర్షిక టాగ్లు వంటి శోధన ఇంజిన్లు
ఇది హెడ్డింగులు ఉపయోగించడానికి మరియు సరైన క్రమంలో (ie h1, తరువాత h2, తరువాత h3, మొదలైనవి) ఉపయోగించడానికి ఉత్తమ కారణం. శోధన ఇంజిన్లు టెక్స్ట్కు అత్యధిక ప్రాధాన్యత ఇస్తాయి, ఎందుకంటే ఈ శీర్షికకు ఒక సెమాంటిక్ విలువ ఉంది. ఇతర మాటలలో, మీ పేజీ శీర్షిక H1 లేబుల్ ద్వారా, మీరు శోధన ఇంజిన్ స్పైడర్ చెప్పండి ఆ పేజీ యొక్క # 1 దృష్టి. H2 శీర్షికలు # 2 ఉద్ఘాటన కలిగి ఉంటాయి, మరియు.
మీరు మీ వార్తలను నిర్వచించటానికి ఉపయోగించిన క్లాస్ ను గుర్తుంచుకోవాల్సిన అవసరం లేదు
మీ అన్ని వెబ్ పేజీలు బోల్డ్, 2 ఎమ్ మరియు పసుపు అని ఒక H1 కలిగివుంటాయని మీకు తెలిస్తే, అప్పుడు మీరు మీ స్టైల్షీట్లో ఒక్కసారి నిర్వచించవచ్చు మరియు పూర్తి చేయవచ్చు. 6 నెలల తరువాత, మీరు మరొక పేజీని జోడించినప్పుడు, మీరు మీ పేజీ పైన ఒక H1 ట్యాగ్ను జోడిస్తారు, మీరు ప్రధాన పేజీని నిర్వచించడానికి ఉపయోగించిన శైలి ID లేదా తరగతి తెలుసుకోవడానికి మీరు ఇతర పేజీలకు తిరిగి వెళ్లవలసిన అవసరం లేదు శీర్షిక మరియు ఉప శీర్షికలు.
వారు ఒక బలమైన పేజీ అవుట్లైన్ అందించండి
చదవడానికి పాఠం సులభతరం చేస్తుంది. అందువల్ల చాలా US పాఠశాలలు విద్యార్థులకు కాగితాన్ని రాయడానికి ముందే అవుట్లైన్ వ్రాసేందుకు నేర్పించాయి. మీరు అవుట్లైన్ ఫార్మాట్లో ట్యాగ్లను శీర్షిక చేసినప్పుడు, మీ టెక్స్ట్ స్పష్టమైన స్పష్టంగా ఉంటుంది, ఇది చాలా త్వరగా కనిపిస్తుంది. అదనంగా, సారాంశాన్ని అందించడానికి పేజీ అవుట్లైన్ను విశ్లేషించే సాధనాలు ఉన్నాయి మరియు ఇవి సరిహద్దు నిర్మాణం కోసం టాగ్లు శీర్షికకు ఆధారపడతాయి.
మీ పేజీ స్టైల్స్ ఆఫ్ తో కూడా సెన్స్ చేస్తుంది
ప్రతి ఒక్కరూ స్టైల్ షీట్లను వీక్షించలేరు లేదా ఉపయోగించలేరు (మరియు ఇది # 1 కు తిరిగి వస్తుంది - శోధన ఇంజిన్లు మీ పేజీ యొక్క కంటెంట్ను (టెక్స్ట్) వీక్షించడానికి కాదు, శైలి షీట్లు కాదు). శీర్షిక ట్యాగ్లను ఉపయోగించినట్లయితే, మీరు మీ పేజీలను మరింత యాక్సెస్ చేయగలుగుతారు, ఎందుకంటే ఒక DIV ట్యాగ్ కాదని సమాచారం అందించడం ముఖ్యాంశాలు.
ఇది స్క్రీన్ రీడర్స్ మరియు వెబ్సైట్ యాక్సెసిబిలిటీకి సహాయపడుతుంది
శీర్షికల సరైన ఉపయోగం ఒక పత్రానికి తార్కిక నిర్మాణం సృష్టిస్తుంది. వైకల్యాలున్న వ్యక్తులకు మీ సైట్కి ప్రాప్యతనిచ్చే దృశ్యమానతతో ఒక వినియోగదారుకు సైట్ను "చదవడానికి" స్క్రీన్ రీడర్లు ఉపయోగించడం ఇదే.
శైలి మీ టెక్స్ట్ యొక్క ఫాంట్ మరియు ఫాంట్
ట్యాగ్ల శీర్షిక యొక్క "పెద్ద, బోల్డ్ మరియు అగ్లీ" సమస్య నుండి దూరంగా తరలించడానికి సులభమైన మార్గం ఏమిటంటే టెక్స్ట్ వాటిని మీరు చూడాలనుకుంటున్న విధంగా శైలిలో ఉంది. నిజానికి, నేను ఒక కొత్త వెబ్ సైట్ లో పని చేస్తున్నప్పుడు, నేను సాధారణంగా పేరా, h1, h2, మరియు h3 శైలులు మొదటి విషయం వ్రాయండి. నేను సాధారణంగా ఫాంట్ కుటుంబం మరియు పరిమాణం / బరువు తో కర్ర. ఉదాహరణకు, ఇది క్రొత్త సైట్ కోసం ఒక ప్రాథమిక శైలి షీట్ కావచ్చు (ఇవి కేవలం కొన్ని ఉదాహరణ శైలులు మాత్రమే ఉపయోగించబడతాయి):
శరీరం, html {margin: 0; పాడింగ్: 0; } p {font: 1em ఏరియల్, జెనీవా, హెల్వెటికా, సాన్స్ సెరిఫ్; } h1 {font: bold 2em "Times న్యూ రోమన్", టైమ్స్, సెరిఫ్; } h2 {font: bold 1.5em "టైమ్స్ న్యూ రోమన్", టైమ్స్, సెరిఫ్; } h3 {font: bold 1.2em ఏరియల్, జెనీవా, హెల్వెటికా, సాన్స్-సెరిఫ్; }మీరు మీ శీర్షిక యొక్క ఫాంట్లను సవరించవచ్చు లేదా టెక్స్ట్ శైలిని లేదా టెక్స్ట్ రంగుని కూడా మార్చవచ్చు . ఇవన్నీ మీ "అగ్లీ" శీర్షికను మరింత శక్తివంతమైన మరియు మీ రూపకల్పనలో ఉంచుతాయి.
h1 {font: bold italic 2em / 1em "టైమ్స్ న్యూ రోమన్", "MS సెరిఫ్", "న్యూయార్క్", సెరిఫ్; మార్జిన్: 0; పాడింగ్: 0; రంగు: # e7ce00; }బోర్డర్స్ ముఖ్యాంశాలు అప్ వేషం చేయవచ్చు
హెడ్లైన్స్ మెరుగుపరచడానికి బోర్డర్స్ ఒక గొప్ప మార్గం. మరియు హద్దులను సులభంగా జోడించవచ్చు. కానీ సరిహద్దులతో ప్రయోగాలు చేయడం మర్చిపోవద్దు - మీరు మీ శీర్షిక యొక్క ప్రతి వైపు సరిహద్దు అవసరం లేదు. మరియు మీరు సాదా బోరింగ్ సరిహద్దుల కంటే ఎక్కువగా ఉపయోగించుకోవచ్చు.
h1 {font: bold italic 2em / 1em "టైమ్స్ న్యూ రోమన్", "MS సెరిఫ్", "న్యూయార్క్", సెరిఫ్; మార్జిన్: 0; పాడింగ్: 0; రంగు: # e7ce00; సరిహద్దు-టాప్: ఘన # e7ce00 మీడియం; సరిహద్దు-దిగువ: చుక్కలు # e7ce00 సన్నని; వెడల్పు: 600px; }నేను కొన్ని ఆసక్తికరమైన దృశ్య శైలులను పరిచయం చేయడానికి నా నమూనా శీర్షికకు ఒక ఎగువ మరియు దిగువ సరిహద్దుని జోడించాను. మీరు కోరుకున్న రూపకల్పన శైలిని మీరు సాధించాలని కోరుకున్న విధంగా సరిహద్దులను జోడించవచ్చు.
మరింత ముఖ్యాంశాలు కోసం మీ ముఖ్యాంశాలు నేపథ్య చిత్రాలు జోడించండి
చాలా వెబ్ సైట్లకు ఒక శీర్షికను కలిగి ఉన్న పేజీ ఎగువన శీర్షిక విభాగాన్ని కలిగి ఉంటుంది - సాధారణంగా సైట్ శీర్షిక మరియు గ్రాఫిక్. చాలామంది డిజైనర్లు దీనిని రెండు వేర్వేరు అంశంగా భావిస్తారు, కాని మీకు లేదు. గ్రాఫిక్ కేవలం శీర్షికను అలంకరించడానికి ఉంటే, అప్పుడు శీర్షిక శైలులకు ఎందుకు జోడించకూడదు?
h1 {font: bold italic 3em / 1em "టైమ్స్ న్యూ రోమన్", "MS సెరిఫ్", "న్యూయార్క్", సెరిఫ్; background: #ff url ("fancyheadline.jpg") రిపీట్-x క్రింద; padding: 0.5em 0 90px 0; టెక్స్ట్-సమలేఖనం: కేంద్రం; మార్జిన్: 0; సరిహద్దు-దిగువ: ఘన # e7ce00 0.25 ఎం; రంగు: # e7ce00; }ఈ శీర్షికకు ట్రిక్ ఏమిటంటే నా చిత్రం 90 పిక్సెల్స్ పొడవు ఉందని నాకు తెలుసు. నేను 90px (పాడింగ్: 0.5 0 90px 0p;) శీర్షిక యొక్క దిగువకు పాడింగ్ను జోడించాను. మీకు కావలసిన చోటును ఎక్కడ ప్రదర్శించాలో హెడ్ లైన్ యొక్క టెక్స్ట్ని పొందడానికి అంచులు, లైన్-ఎత్తు మరియు పాడింగ్లను ప్లే చేయవచ్చు.
చిత్రాలను ఉపయోగించినప్పుడు గుర్తుంచుకోవాల్సిన ఒక విషయం ఏమిటంటే, మీరు స్క్రీన్ పరిమాణాలు మరియు పరికరాల ఆధారంగా మారుతున్న ఒక లేఅవుట్తో మీరు ప్రతిస్పందించే వెబ్సైట్ (మీరు తప్పనిసరిగా) కలిగి ఉంటే, మీరు శీర్షిక ఎల్లప్పుడూ ఒకే పరిమాణంలో ఉండదు. మీకు ఖచ్చితమైన పరిమాణంగా మీ శీర్షిక అవసరమైతే, ఇది సమస్యలను కలిగిస్తుంది. నేను సాధారణంగా శీర్షికలను నేపథ్య శీర్షికలను నివారించడానికి ఎందుకు కారణాల్లో ఒకటి, కొన్నిసార్లు అవి కనిపించే విధంగా చల్లనిగా ఉంటాయి.
ముఖ్యాంశాలలో చిత్రం ప్రత్యామ్నాయం
వెబ్ డిజైనర్ల కోసం ఇది మరొక ప్రసిద్ధ పద్ధతి, ఎందుకంటే మీరు ఒక గ్రాఫికల్ శీర్షికని సృష్టించడానికి మరియు ఆ చిత్రంతో శీర్షిక ట్యాగ్ యొక్క టెక్స్ట్ను మార్చడానికి అనుమతిస్తుంది. ఇది వెబ్ డిజైనర్ల నుండి నిజాయితీగా ఉన్న పురాతన పద్ధతుల్లో చాలా తక్కువ ఫాంట్లకు ప్రాప్తిని కలిగి ఉంది మరియు వారి పనిలో మరింత అన్యదేశ ఫాంట్లను ఉపయోగించాలని కోరుకున్నారు. వెబ్ ఫాంట్ల పెరుగుదల నిజంగా డిజైనర్లు ఎలా సైట్లకు చేరుతుందో మార్చబడింది. ముడుచుకున్న ఆ ఫాంట్లతో ఇప్పుడు విస్తృత రకాల ఫాంట్లతో మరియు చిత్రాలకు హెడ్లైన్స్ అమర్చవచ్చు. అందువల్ల, పాత సైట్లలోని శీర్షికలకు బదులుగా CSS చిత్రాలు భర్తీ చేయబడతాయి, అవి ఇంకా ఆధునిక పద్ధతులకు నవీకరించబడలేదు.
జెన్నిఫర్ క్రిన్ని రచించిన అసలు వ్యాసం. జెరెమీ గిరార్డ్ 9/6/17 న సవరించబడింది