ఈ కథనం HTML మరియు CSSని ఉపయోగించి హెడర్‌ను సృష్టించే దశల వారీ ప్రక్రియను ప్రదర్శిస్తుంది:
- హెడర్ విభాగాన్ని సృష్టిస్తోంది
- నావిగేషన్ బార్‌ను సృష్టిస్తోంది
- Navbar అంశాలకు శైలులను వర్తింపజేయడం
- Navbar అంశాలకు హోవర్ ప్రభావాన్ని జోడిస్తోంది
HTML మరియు CSS ఉపయోగించి హెడర్‌ను సృష్టించే ప్రక్రియ ఏమిటి?
వెబ్‌సైట్ గురించిన అత్యంత ముఖ్యమైన సమాచారాన్ని హెడర్ నిర్వచిస్తుంది. ఇది ఎక్కువగా లోగో, వెబ్‌సైట్ యొక్క శీర్షిక, శోధన పట్టీ మరియు ఇతర పేజీలకు వెళ్లడానికి వినియోగదారుకు సహాయపడే నావిగేషన్ మెను అంశాలను కలిగి ఉంటుంది.
హెడర్‌ను రూపొందించడానికి దిగువ పేర్కొన్న దశలను అనుసరించండి:
దశ 1: హెడర్ విభాగాన్ని సృష్టించండి
HTML ఫైల్‌లో, “ <హెడర్> హెడర్ కోసం ఒక విభాగాన్ని సృష్టించడానికి ” ట్యాగ్ ఉపయోగించబడుతుంది. ది ' ఆ తర్వాత, 'ని ఎంచుకోండి <హెడర్> ” తరగతిని ట్యాగ్ చేసి, కింది శైలులను కేటాయించండి: పై కోడ్ యొక్క వివరణ క్రింద పేర్కొనబడింది: పై కోడ్‌ని అమలు చేసిన తర్వాత, వెబ్‌పేజీ ఇలా కనిపిస్తుంది: ఎగువ అవుట్‌పుట్ హెడర్ విభాగం సృష్టించబడిందని మరియు దానికి CSS శైలులు వర్తింపజేయబడిందని ప్రదర్శిస్తుంది. హెడర్ చాలా సందర్భాలలో నావిగేషన్ బార్‌ను కూడా కలిగి ఉంటుంది. నావ్‌బార్ సృష్టి కోసం HTML ' <లేదు> ” ట్యాగ్ చాలా ఉపయోగకరంగా ఉంటుంది. అందుకే, 'ని ఉపయోగించి navbar అంశాలను జోడించండి 'ట్యాగ్‌లు మరియు' యొక్క తరగతిని కేటాయించండి చట్టం ”: పై కోడ్‌ని అమలు చేసిన తర్వాత, వెబ్‌పేజీ ఇలా కనిపిస్తుంది: పై అవుట్‌పుట్, నావ్‌బార్ ఐటెమ్‌లను వివరిస్తుంది “ హోమ్ ',' సేవలు ',' మా గురించి ',' మమ్మల్ని సంప్రదించండి 'మరియు' కొత్తగా వచ్చిన ” సృష్టించబడ్డాయి. నావ్‌బార్ ఐటెమ్‌లను స్టైల్ చేయడానికి, 'ని ఎంచుకోండి చట్టం 'తరగతి మరియు క్రింది CSS శైలుల లక్షణాలను కేటాయించండి: పై కోడ్ యొక్క వివరణ: పై కోడ్‌ని అమలు చేసిన తర్వాత, వెబ్‌పేజీ ఇలా కనిపిస్తుంది: నావ్‌బార్ ఐటెమ్‌లు ఇప్పుడు స్టైల్ చేయబడ్డాయి అని పై అవుట్‌పుట్ వివరిస్తుంది. పై అవుట్‌పుట్‌లో వలె, నావ్‌బార్ ఐటెమ్‌పై హోవర్ ప్రభావం అందుబాటులో లేదు. రెండింటినీ జోడించడానికి, 'ని ఎంచుకోండి శీర్షిక 'కి కేటాయించబడిన తరగతి' ” ట్యాగ్. ఆ తర్వాత, ''ని జోడించండి : హోవర్ ''తో సెలెక్టర్ చట్టం ” నావ్‌బార్ ఐటెమ్‌లపై హోవర్ ప్రభావాన్ని వర్తింపజేయడానికి తరగతి: పై కోడ్ యొక్క వివరణ క్రింద అందించబడింది: పై కోడ్‌ని అమలు చేసిన తర్వాత, హెడర్ యొక్క తుది రూపం ఇలా కనిపిస్తుంది: హెడర్ HTML మరియు CSSని ఉపయోగించి సృష్టించబడిందని ఎగువ అవుట్‌పుట్ ప్రదర్శిస్తుంది. HTML ఫైల్‌లో, హెడర్ కోసం విభాగాన్ని సృష్టించడానికి “
<శీర్షిక తరగతి = 'హెడర్' >
< h1 తరగతి = 'శీర్షిక' > Linuxhintకి స్వాగతం! < / h1 >
< / శీర్షిక>
.హెడర్ {
నేపథ్య చిత్రం: url ( '../bg.jpg' ) ;
నేపథ్య- పరిమాణం : కవర్;
నేపథ్యం-పునరావృతం: నో-రిపీట్;
రంగు : తెల్లటి పొగ;
నేపథ్య-స్థానం: ఎగువ;
ప్యాడింగ్: 0px 20px 20px 20px;
}
దశ 2: నావిగేషన్ బార్‌ను సృష్టించండి
<లేదు>
< a తరగతి = 'చట్టం' href = '#' > హోమ్ < / a >
< a తరగతి = 'చట్టం' href = '#' >సేవలు< / a >
< a తరగతి = 'చట్టం' href = '#' >మా గురించి< / a >
< a తరగతి = 'చట్టం' href = '#' >మమ్మల్ని సంప్రదించండి< / a >
< a తరగతి = 'చట్టం' href = '#' >కొత్త రాకపోకలు< / a >
< / కాదు>
< br >< br >
< h1 తరగతి = 'శీర్షిక' > Linuxhintకి స్వాగతం! < / h1 >
< / శీర్షిక>
దశ 3: Navbar ఐటెమ్‌లకు స్టైల్స్‌ని వర్తింపజేయండి
వచన-అలంకరణ: ఏదీ లేదు;
రంగు : తెలుపు;
ప్రదర్శన: బ్లాక్;
పాడింగ్:15px;
ఫాంట్- పరిమాణం : పెద్ద;
ఫ్లోట్: ఎడమ;
మార్జిన్: 0px 20px;
}
దశ 4: Navbar అంశాలకు హోవర్ ప్రభావాన్ని జోడించండి
సరిహద్దు : 2px ఘన తెలుపు;
రంగు : బ్లూవైలెట్;
}
.శీర్షిక {
వచనం- సమలేఖనం : కేంద్రం;
అంచు: 18 % 0px;
}
ముగింపు