ఒక చిత్రం చుట్టూ టెక్స్ట్ సర్దుబాటు ఎలా

ఏదైనా వెబ్ పేజీని చూడండి మరియు మీరు టెక్స్ట్ కంటెంట్ మరియు చిత్రాల కలయికను చూస్తారు. ఈ రెండు అంశాలూ ఒక వెబ్ సైట్ యొక్క విజయానికి అవసరమైన పదార్థాలు. వచనం కంటెంట్ సైట్ సందర్శకులు చదివేది మరియు ర్యాంకింగ్ అల్గోరిథంలలో భాగంగా ఏ శోధన ఇంజిన్లను ఉపయోగిస్తుందో . చిత్రాలు సైట్కు దృశ్యపరమైన ఆసక్తిని కలిపి టెక్స్ట్ కంటెంట్ను ప్రాధాన్యపరచడంలో సహాయపడతాయి.

వెబ్సైట్లు టెక్స్ట్ మరియు చిత్రాలను కలుపుతోంది సులభం. పేరాలు, శీర్షికలు మరియు జాబితాలు వంటి ప్రామాణిక HTML ట్యాగ్లతో టెక్స్ట్ జోడించబడింది, అయితే చిత్రాలు ఎలిమెంట్తో ఒక పేజీలో ఉంచుతారు. మీ వెబ్ పేజీలో మీరు ఒక చిత్రాన్ని జోడించిన తర్వాత, మీరు చిత్రానికి పక్కన టెక్స్ట్ ప్రవాహాన్ని కలిగి ఉండొచ్చు, దానికి బదులుగా దిగువ సమలేఖనం కాకుండా (ఇది HTML కోడ్కు జోడించిన చిత్రం డిఫాల్ట్గా బ్రౌజర్లో అందించబడుతుంది) కాకుండా ఉంటుంది. సాంకేతికంగా, CSS (సిఫార్సు చేయబడినది) లేదా HTML (సిఫార్సు చేయనిది కాదు, మీరు మీ వెబ్సైట్ కోసం శైలి మరియు నిర్మాణం యొక్క విభజనను నిర్వహించాలని కోరుకుంటున్నందున) నేరుగా దృశ్య సూచనలను జోడించడం ద్వారా మీరు ఈ రూపాన్ని పొందవచ్చు.

CSS ను ఉపయోగించడం

ఒక పేజీ యొక్క టెక్స్ట్ మరియు చిత్రాల రూపకల్పన మరియు బ్రౌజర్లో వారి దృశ్యమాన శైలులు ఎలా కనిపిస్తాయి అనేదానిని మార్చడానికి సరైన మార్గం CSS తో ఉంటుంది. జస్ట్ గుర్తుంచుకోండి, మేము పేజీలో ఒక దృశ్యమాన మార్పు గురించి మాట్లాడుతున్నాము (ఒక చిత్రం చుట్టూ టెక్స్ట్ ప్రవాహం తయారు), ఇది క్యాస్కేడింగ్ స్టైల్ షీట్స్ యొక్క డొమైన్.

1. మొదట, మీ చిత్రాన్ని మీ వెబ్ పేజీలో చేర్చండి. HTML నుండి ఏదైనా విజువల్ లక్షణాలు (వెడల్పు మరియు ఎత్తు విలువలు వంటివి) మినహాయించాలని గుర్తుంచుకోండి. ఇది ముఖ్యం, ముఖ్యంగా ప్రతిస్పందించే వెబ్ సైట్ కోసం చిత్రం పరిమాణాన్ని బ్రౌజర్ ఆధారంగా మారుతుంది. అడోబ్ డ్రీమ్వీవర్ వంటి కొన్ని సాఫ్ట్వేర్, ఆ సాధనంతో చొప్పించిన చిత్రాలకు వెడల్పు మరియు ఎత్తు సమాచారాన్ని జోడిస్తుంది, కాబట్టి HTML కోడ్ నుండి ఈ సమాచారాన్ని తీసివేయండి. అయితే, సరైన alt text చేర్చడానికి ఖచ్చితంగా ఉండండి. ఇక్కడ మీ HTML కోడ్ ఎలా కనిపించవచ్చు అనేదానికి ఉదాహరణ:
2. స్టైలింగ్ ప్రయోజనాల కోసం, మీరు ఒక చిత్రాన్ని ఒక తరగతికి కూడా జోడించవచ్చు. ఈ తరగతి విలువ మన CSS ఫైల్ లో వాడతాము. మేము ఇక్కడ ఉపయోగించే విలువ ఏకపక్షంగా ఉంటుంది, అయితే, ఈ ప్రత్యేక శైలి కోసం, మేము "ఎడమ" లేదా "కుడి" యొక్క విలువలను ఉపయోగిస్తాము, ఇది ఏ విధంగా ఆధారపడి మేము మా చిత్రాన్ని సమలేఖనం చేయాలనుకుంటున్నాము. సాధారణ వాక్యనిర్మాణం బాగా పనిచేయడం మరియు భవిష్యత్తులో ఒక సైట్ను అర్థం చేసుకునే ఇతరులకు సులభంగా ఉంటుంది, కానీ మీరు మీకు కావలసిన ఏవైనా తరగతి విలువను ఇవ్వవచ్చు.
   2. స్వయంగా, ఈ తరగతి విలువ ఏమీ చేయదు. వచనం యొక్క ఎడమవైపున చిత్రం స్వయంచాలకంగా సర్దుబాటు చేయబడదు. దీని కోసం ఇప్పుడు మన CSS ఫైల్ కు తిరుగుతున్నాము.

1. మీ శైలిలో, మీరు ఇప్పుడు ఈ క్రింది శైలిని జోడించవచ్చు:
   1. లెఫ్ట్ {
   2. ఫ్లోట్: ఎడమ;
   3. పాడింగ్: 0 20px 20px 0;
   4. }
   5. మీరు ఇక్కడ చేసిన సాధారణ పత్రం ప్రవాహం నుండి చిత్రం లాగండి ఇది చిత్రం "ఫ్లోట్" ఆస్తి ఉపయోగించుకుంటాయి (చిత్రం సాధారణంగా ప్రదర్శించబడుతుంది మార్గం, దాని క్రింద సర్దుబాటు టెక్స్ట్ తో) మరియు దాని కంటైనర్ యొక్క ఎడమ వైపు దానిని align ఉంటుంది . HTML మార్కప్లో దాని తరువాత వచ్చిన టెక్స్ట్ ఇప్పుడు దాని చుట్టూ చుట్టుకొని ఉంటుంది. మేము కొన్ని padding విలువలను కూడా చేర్చాము, తద్వారా ఈ టెక్స్ట్ నేరుగా చిత్రం నుండి కాదు. బదులుగా, ఇది పేజీ యొక్క డిజైన్ లో ఆకర్షణీయంగా ఉంటుంది కొన్ని nice అంతరం ఉంటుంది. పాడింగ్ కోసం CSS సంక్షిప్తలిపిలో, మేము చిత్రం యొక్క ఎగువ మరియు ఎడమ వైపుకు మరియు దాని ఎడమ మరియు దిగువ 20 పిక్సెల్లకు 0 విలువలను జోడించాము. గుర్తుంచుకోండి, మీరు కొన్ని పాడింగ్ ను ఎడమ సమలేఖన చిత్రపు కుడి వైపున జోడించాలి. ఒక కుడి సమలేఖనం చిత్రం (మేము ఒక క్షణం లో చూస్తారు ఇది) పాడింగ్ దాని ఎడమ వైపు వర్తించబడుతుంది ఉంటుంది.
2. మీరు మీ వెబ్పేజీను బ్రౌజరులో వీక్షించినట్లయితే, మీ చిత్రం పేజీ యొక్క ఎడమవైపుకు సమలేఖనం చేయబడిందని మీరు చూడాలి మరియు దాని చుట్టూ ఉన్న టెక్స్ట్ చక్కగా ఉంటుంది. ఈ విధంగా చెప్పాలంటే, చిత్రం "ఎడమవైపుకు ఆవిష్కరించబడింది".

1. మీరు ఈ చిత్రాన్ని కుడివైపుకి సమలేఖనం చేయాలని అనుకుంటే (ఈ వ్యాసంతో పాటుగా ఫోటో ఉదాహరణలో వలె), ఇది సరళంగా ఉంటుంది. మొదట, మీరు తప్పక, స్టైల్ పాటు మేము మా CSS జోడించబడింది "ఎడమ" యొక్క తరగతి విలువ, మేము కూడా కుడి అమరిక కోసం ఒకటి. ఇది ఇలా కనిపిస్తుంది:
   1. .హైట్ {
   2. ఫ్లోట్: కుడి;
   3. పాడింగ్: 0 0 20px 20px;
   4. }
   5. ఇది మేము వ్రాసిన మొదటి CSS కు దాదాపు సమానమని మీరు చూడవచ్చు. మాత్రమే తేడా మేము "ఫ్లోట్" ఆస్తి మరియు మేము ఉపయోగించే పాడింగ్ విలువలు కోసం ఉపయోగిస్తారు విలువ (కుడి బదులుగా మా చిత్రం యొక్క ఎడమ వైపు కొన్ని జోడించడం) ఉంది.
2. చివరగా, మీ HTML లో "ఎడమ" నుండి "కుడి" నుండి చిత్రం యొక్క తరగతి యొక్క విలువను మీరు మారుస్తారు:
3. బ్రౌజర్లో ఇప్పుడు మీ పేజీని చూడు మరియు మీ చిత్రం సరిగ్గా చుట్టుముట్టే వచనంతో సమలేఖనం చేయాలి. మేము వెబ్ పేజీలను రూపొందిస్తున్నప్పుడు ఈ దృశ్య శైలులను ఉపయోగించుకునే విధంగా ఈ శైలులు రెండింటినీ, "ఎడమ" మరియు "కుడి" మా స్టైల్షీట్లకు జోడించాము. ఈ రెండు శైలులు nice, రీసైజు చెయ్యదగిన లక్షణంగా మారుతాయి, మనము వాటి చుట్టూ టెక్స్ట్ చుట్టడంతో శైలి చిత్రాలు అవసరం కావాలి.

బదులుగా CSS యొక్క HTML ను ఉపయోగించడం (మరియు ఎందుకు మీరు దీన్ని చేయకూడదు)

HTML తో ఒక చిత్రం చుట్టూ సర్దుబాటు టెక్స్ట్ చేయడానికి సాధ్యమే అయినప్పటికీ, వెబ్ ప్రమాణాలు CSS (మరియు పైన సూచించిన దశలు) మేము నిర్మాణం (HTML) మరియు శైలి (CSS) యొక్క విభజన నిర్వహించడానికి విధంగా వెళ్ళడానికి మార్గం నిర్దేశిస్తాయి. కొన్ని పరికరాల మరియు లేఅవుట్ల, ఆ టెక్స్ట్ చిత్రం చుట్టూ ప్రవహించడం అవసరం ఉండదని మీరు భావించినప్పుడు ఇది చాలా ముఖ్యం. చిన్న స్క్రీన్లకు, ప్రతిస్పందించే వెబ్సైట్ యొక్క లేఅవుట్ టెక్స్ట్ నిజంగా చిత్రం క్రింద align మరియు స్క్రీన్ పూర్తి వెడల్పు విస్తరించింది అవసరం కావచ్చు. మీ శైలులు మీ HTML మార్కప్ నుండి వేరుగా ఉన్నట్లయితే ఇది సులభంగా మీడియా ప్రశ్నలతో చేయబడుతుంది. నేటి మల్టీ-పరికర ప్రపంచం లో, చిత్రాలను మరియు పాఠం వేర్వేరు సందర్శకులకు మరియు విభిన్న తెరలకు భిన్నంగా కనిపిస్తుంది, ఈ విభజన దీర్ఘకాలిక విజయానికి మరియు వెబ్ పేజీ నిర్వహణకు అవసరం.