టూల్స్ అవసరం
HTML లో అలైన్‌మెంట్ కాన్సెప్ట్ గురించి వివరించడానికి, HTML కోడ్‌ని అమలు చేయడానికి అవసరమైన కొన్ని అవసరమైన టూల్‌లను మనం పేర్కొనాలి. ఒకటి టెక్స్ట్ ఎడిటర్, రెండవది బ్రౌజర్. టెక్స్ట్ ఎడిటర్ బహుశా నోట్‌ప్యాడ్, ఉత్కృష్టమైనది, నోట్‌ప్యాడ్ ++ లేదా ఏదైనా సహాయపడవచ్చు. ఈ గైడ్‌లో, మేము నోట్‌ప్యాడ్, విండోస్‌లో డిఫాల్ట్ అప్లికేషన్ మరియు గూగుల్ క్రోమ్‌ను బ్రౌజర్‌గా ఉపయోగించాము.
HTML ఫార్మాట్
అమరికను అర్థం చేసుకోవడానికి, మేము మొదట HTML బేసిక్స్ గురించి కొంత అవగాహన కలిగి ఉండాలి. మేము నమూనా కోడ్ స్క్రీన్‌షాట్‌ను అందించాము.
< html >
< తల >...</ తల >
< శరీరం >….</ శరీరం >
</ html >
HTML లో రెండు ప్రధాన భాగాలు ఉన్నాయి. ఒకటి తల, మరొకటి శరీరం. అన్ని ట్యాగ్‌లు కోణీయ బ్రాకెట్లలో వ్రాయబడ్డాయి. శీర్షిక భాగం ట్యాగ్‌ను ఉపయోగించి html పేజీకి నామకరణం చేస్తుంది. మరియు, తల లోపల శైలి ప్రకటన ఉపయోగించండి. మరోవైపు, శరీరం టెక్స్ట్, ఇమేజ్‌లు లేదా వీడియోలు మొదలైన అన్ని ఇతర ట్యాగ్‌లతో వ్యవహరిస్తుంది, మరో మాటలో చెప్పాలంటే, మీరు మీ html పేజీకి జోడించాలనుకుంటున్నది html యొక్క శరీర భాగంలో వ్రాయబడుతుంది.
నేను ఇక్కడ హైలైట్ చేయాల్సిన విషయం ఏమిటంటే ట్యాగ్ ఓపెనింగ్ మరియు క్లోజింగ్. వ్రాసిన ప్రతి ట్యాగ్ తప్పనిసరిగా మూసివేయబడాలి. ఉదాహరణకు, Html యొక్క ప్రారంభ ట్యాగ్ ఉంది మరియు ముగింపు ట్యాగ్. కాబట్టి ముగింపు ట్యాగ్‌కు ట్యాగ్ పేరు తర్వాత స్లాష్ ఉందని గమనించవచ్చు. అదేవిధంగా, అన్ని ఇతర ట్యాగ్‌లు కూడా అదే విధానాన్ని అనుసరిస్తాయి. ప్రతి టెక్స్ట్ ఎడిటర్ html పొడిగింపుతో సేవ్ చేయబడుతుంది. ఉదాహరణకు, మేము example.html పేరుతో ఫైల్‌ను ఉపయోగించాము. అప్పుడు మీరు నోట్‌ప్యాడ్ చిహ్నం బ్రౌజర్ చిహ్నంగా మారినట్లు చూస్తారు.
అమరిక అనేది స్టైలింగ్ యొక్క కంటెంట్. Html లో స్టైల్ మూడు రకాలు. ఇన్-లైన్ శైలి, అంతర్గత మరియు బాహ్య స్టైలింగ్. ట్యాగ్‌లో ఇలైన్ సూచిస్తుంది. తల లోపల లోపల వ్రాయబడింది. అదే సమయంలో, బాహ్య శైలి ప్రత్యేక CSS ఫైల్‌లో వ్రాయబడింది.
టెక్స్ట్ యొక్క ఇన్లైన్ స్టైలింగ్
ఉదాహరణ 1
ఇప్పుడు ఇక్కడ ఒక ఉదాహరణ గురించి చర్చించాల్సిన సమయం వచ్చింది. పైన ప్రదర్శించిన చిత్రాన్ని పరిగణించండి. నోట్‌ప్యాడ్ యొక్క ఆ ఫైల్‌లో, మేము ఒక సాధారణ వచనాన్ని వ్రాసాము. మేము దానిని బ్రౌజర్‌గా అమలు చేసినప్పుడు, అది దిగువ ఇచ్చిన అవుట్‌పుట్‌ను బ్రౌజర్‌లో చూపుతుంది.
ఈ వచనాన్ని మధ్యలో ప్రదర్శించాలనుకుంటే, మేము ట్యాగ్‌ని మారుస్తాము.
ఈ ట్యాగ్ ఇన్లైన్ ట్యాగ్. మేము html బాడీలో పేరాగ్రాఫ్ ట్యాగ్‌ని ప్రవేశపెట్టినప్పుడు మేము ఈ ట్యాగ్‌ను వ్రాస్తాము. టెక్స్ట్ తర్వాత, పేరాగ్రాఫ్ ట్యాగ్‌ను మూసివేయండి. బ్రౌజర్‌లో ఫైల్‌ను సేవ్ చేసి ఓపెన్ చేయండి.
పేరాగ్రాఫ్ బ్రౌజర్‌లో ప్రదర్శించబడుతున్నందున మధ్యలో అమర్చబడింది. ఈ ఉదాహరణలో ఉపయోగించిన ట్యాగ్ ఏదైనా అమరిక కోసం ఉపయోగించబడుతుంది, అనగా ఎడమ, కుడి మరియు మధ్యలో. కానీ మీరు టెక్స్ట్‌ను మధ్యలో మాత్రమే సమలేఖనం చేయాలనుకుంటే, ఈ ప్రయోజనం కోసం ఒక నిర్దిష్ట ట్యాగ్ ఉపయోగించబడుతుంది.
< కేంద్రం > …… ..</ కేంద్రం >టెక్స్ట్ ముందు మరియు తర్వాత సెంటర్ ట్యాగ్ ఉపయోగించబడుతుంది. ఇది మునుపటి ఉదాహరణ వలె అదే ఫలితాన్ని చూపుతుంది.
ఉదాహరణ 2
Html టెక్స్ట్‌లో పేరాగ్రాఫ్‌కు బదులుగా హెడ్డింగ్‌ని సమలేఖనం చేయడానికి ఇది ఒక ఉదాహరణ. శీర్షిక యొక్క ఈ అమరిక కోసం వాక్యనిర్మాణం ఒకటే. ఇది ట్యాగ్ రెండింటి ద్వారా లేదా ఇన్లైన్ స్టైలింగ్ ద్వారా లేదా హెడ్డింగ్ ట్యాగ్ లోపల అలైన్ ట్యాగ్‌ను జోడించడం ద్వారా చేయవచ్చు.
అవుట్‌పుట్ బ్రౌజర్‌లో చూపబడింది. హెడ్డింగ్ ట్యాగ్ సాదా వచనాన్ని హెడ్డింగ్‌గా మార్చింది మరియు ట్యాగ్ దానిని మధ్యలో సమలేఖనం చేసింది.
ఉదాహరణ 3
మధ్యలో వచనాన్ని సమలేఖనం చేయండి
బ్రౌజర్‌లో పేరా ప్రదర్శించబడే ఒక ఉదాహరణను పరిగణించండి. మేము దీనిని మధ్యలో సమలేఖనం చేయాలి.
మేము ఈ ఫైల్‌ని నోట్‌ప్యాడ్‌లో తెరిచి, ఆపై ట్యాగ్‌ని ఉపయోగించడం ద్వారా దాన్ని మధ్య స్థానంలో అమర్చుతాము.
< p శైలి =టెక్స్ట్-సమలేఖనం: కేంద్రం;>పేరాగ్రాఫ్ ట్యాగ్‌లో ఈ ట్యాగ్‌ను జోడించిన తర్వాత, దయచేసి ఫైల్‌ను సేవ్ చేసి బ్రౌజర్‌లో రన్ చేయండి. పేరా ఇప్పుడు కేంద్రీకృతమై సమలేఖనం చేయబడిందని మీరు చూస్తారు. క్రింది చిత్రాన్ని చూడండి.
వచనాన్ని కుడి వైపుకు సమలేఖనం చేయండి
వచనాన్ని కుడి వైపుకు వంచడం పేజీ మధ్యలో ఉంచడానికి సమానంగా ఉంటుంది. కేవలం పేరాగ్రాఫ్ ట్యాగ్‌లో కేవలం మధ్య పదం భర్తీ చేయబడుతుంది.
< p శైలి =టెక్స్ట్-సమలేఖనం: కుడి;> ……… ..</ p >దిగువ జతచేయబడిన చిత్రం ద్వారా మార్పులను చూడవచ్చు.
బ్రౌజర్‌లో వెబ్ పేజీని సేవ్ చేయండి మరియు రిఫ్రెష్ చేయండి. టెక్స్ట్ ఇప్పుడు పేజీకి కుడి వైపుకు తరలించబడింది.
టెక్స్ట్ యొక్క అంతర్గత స్టైలింగ్
ఉదాహరణ 1
పైన వివరించిన విధంగా అంతర్గత css (క్యాస్కేడింగ్ స్టైల్ షీట్) లేదా అంతర్గత స్టైలింగ్ అనేది పేజీ యొక్క html యొక్క తల భాగంలో నిర్వచించబడిన ఒక రకమైన css. ఇది అంతర్గత ట్యాగ్‌ల మాదిరిగానే పనిచేస్తుంది.
పైన చూపిన పేజీని పరిగణించండి; దానిలో శీర్షికలు మరియు పేరా ఉన్నాయి. మధ్యలో టెక్స్ట్ చూడాల్సిన అవసరం మాకు ఉంది. ఇన్లైన్ అలైన్‌మెంట్‌కు ప్రతి పేరా లోపల ట్యాగ్‌లను మాన్యువల్‌గా రాయడం అవసరం. కానీ స్టైల్ స్టేట్‌మెంట్‌లో p అని పేర్కొనడం ద్వారా టెక్స్ట్ యొక్క ప్రతి పేరాకు అంతర్గత స్టైలింగ్ స్వయంచాలకంగా వర్తించబడుతుంది. పేరాగ్రాఫ్ ట్యాగ్ లోపల ఏ ట్యాగ్ రాయాల్సిన అవసరం లేదు. ఇప్పుడు కోడ్‌ని గమనించండి మరియు అది పని చేస్తోంది.
< శైలి >పి{టెక్స్ట్-సమలేఖనం: కేంద్రం}
</ శైలి >
ఈ ట్యాగ్ హెడ్ పార్ట్‌లోని స్టైల్ ట్యాగ్‌లో వ్రాయబడింది. ఇప్పుడు కోడ్‌ను బ్రౌజర్‌లో అమలు చేయండి.
మీరు బ్రౌజర్‌లో పేజీని అమలు చేసినప్పుడు, అన్ని పేరాలు పేజీ మధ్యలో సమలేఖనం చేయబడినట్లు మీరు చూస్తారు. ఈ ట్యాగ్ టెక్స్ట్‌లో ఉన్న ప్రతి పేరాకు వర్తించబడుతుంది.
ఉదాహరణ 2
ఈ ఉదాహరణలో, పేరా లాగానే, మేము టెక్స్ట్‌లోని అన్ని శీర్షికలను కుడి వైపుకు సమలేఖనం చేస్తాము. ఈ ప్రయోజనం కోసం, మేము తల లోపల స్టైల్ స్టేట్‌మెంట్‌లో హెడ్డింగ్‌లను ప్రస్తావిస్తాము.
H2, h3{
టెక్స్ట్-సమలేఖనం: కుడి
}
ఇప్పుడు ఫైల్‌ను సేవ్ చేసిన తర్వాత, బ్రౌజర్‌లో నోట్‌ప్యాడ్ ఫైల్‌ని రన్ చేయండి. శీర్షికలు HTML పేజీకి కుడి వైపున సమలేఖనం చేయబడినట్లు మీరు చూస్తారు.
ఉదాహరణ 3
అంతర్గత స్టైలింగ్‌లో, టెక్స్ట్‌లో కొన్ని పేరాగ్రాఫ్‌ల వచనాన్ని మాత్రమే మీరు సమలేఖనం చేయాల్సిన పరిస్థితి ఉండవచ్చు, మరికొన్ని అలాగే ఉంటాయి. అందువల్ల, మేము తరగతి భావనను ఉపయోగిస్తున్నాము. మేము స్టైల్ ట్యాగ్ లోపల డాట్ మెథడ్‌తో క్లాస్‌ని పరిచయం చేస్తాము. మీరు సమలేఖనం చేయాలనుకుంటున్న పేరాగ్రాఫ్ ట్యాగ్ లోపల తరగతి పేరును జోడించడం అవసరం.
< శైలి >.కేంద్రం{
టెక్స్ట్-సమలేఖనం: కేంద్రం}
</ శైలి >
తరగతి =కేంద్రం> ……</ p >
మేము మొదటి మూడు పేరాల్లో క్లాస్‌ని జోడించాము. ఇప్పుడు కోడ్‌ని అమలు చేయండి. మొదటి మూడు పేరాగ్రాఫ్‌లు మధ్యలో సమలేఖనం చేయబడినట్లు మీరు అవుట్‌పుట్‌లో చూడవచ్చు, అయితే ఇతరులు అలా చేయరు.
ముగింపు
ఈ వ్యాసం ఇన్లైన్ మరియు అంతర్గత ట్యాగ్‌ల ద్వారా వివిధ మార్గాల్లో అమరిక చేయవచ్చని వివరించింది.