గూడు సైట్: నేపథ్య చిత్రాన్ని చేయడానికి ఎలా HTML

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

ప్రాథమిక HTML టాగ్లు నేపథ్య సృష్టించడానికి

కాబట్టి, మేము తెరపై html లో నేపథ్య చిత్రం చేయడానికి ఎలా ప్రశ్న వెళ్ళండి. అందమైన సైట్ చూడండి చేయడానికి, మీరు ఒక కాకుండా ముఖ్యమైన వివరాలు అర్థం ఉండాలి: అది ఒక ప్రవణత నేపధ్యం చేయడానికి లేదా ఒక ఘన రంగు పేయింట్ కేవలం తగినంత ఉంది, కానీ మీరు నేపథ్య చిత్రాన్ని ఇన్సర్ట్ అవసరం ఉంటే, ఇది మానిటర్ యొక్క పూర్తి వెడల్పు చాచు లేదు. చిత్రం తీయటానికి లేదా మీరు సైట్ యొక్క పేజీని ప్రదర్శించడానికి దీనిలో ఈ పొడిగింపు, మీ స్వంత రూపకల్పన చేయడానికి మొదట అవసరమైనది. నేపథ్య చిత్రం సిద్ధంగా ఉన్నప్పుడు మాత్రమే, అనే «చిత్రాలు» ఒక ఫోల్డర్ లోకి లాగండి. అది, మేము అన్ని ఉపయోగిస్తారు చిత్రాలు, యానిమేషన్లు మరియు ఇతర గ్రాఫిక్ ఫైళ్లు నిల్వ చేస్తుంది. ఈ ఫోల్డర్ అన్ని మీ html ఫైళ్ళతో రూట్ డైరెక్టరీలో ఉన్న చేయాలి. ఇప్పుడు మీరు మరియు కోడ్ తరలించవచ్చు. దీని ద్వారా నేపథ్య చిత్రాన్ని మారుతుంది రచన కోడ్ కోసం అనేక ఎంపికలు ఉన్నాయి.

1. ట్యాగ్ లక్షణం వ్రాయండి.
2. HTML కోడ్ లో CSS శైలి ద్వారా.
3. ఒక ప్రత్యేక ఫైలు CSS శైలులను వ్రాయండి.

HTML లో నేపథ్య చిత్రం చేయడానికి, మీరు నిర్ణయించుకుంటారు, కానీ నేను ఎలా చాలా సరైన ఉంటుంది గురించి కొన్ని పదాలు చెప్పటానికి కావాలనుకుంటున్నారని. మొదటి పద్ధతి ఒక ట్యాగ్ లక్షణం ద్వారా రాయడం ద్వారా దీర్ఘ వాడుకలో ఉంది. రెండవ ఎంపికను, చాలా అరుదుగా ఉపయోగిస్తారు ఆ అవుతుంది ఎందుకంటే అదే కోడ్ చాలా. మూడవ ఎంపికను అత్యంత సాధారణ మరియు సమర్థవంతమైన ఉంది. ఇక్కడ ఉదాహరణలు HTML టాగ్లు ఉన్నాయి:

1. index.htm ఫైలులో ట్యాగ్ లక్షణం (శరీరం) ద్వారా మొదటి రికార్డింగ్ పద్దతి. (శరీరం నేపథ్య = "FOLDER_NAME / Nazvanie_kartinki.rasshirenie") (/ శరీరం): ఈ రూపంలో నిల్వ చేయబడుతుంది. మేము శీర్షిక «పిక్చర్» మరియు పొడిగింపు JPG, మేము అనే «చిత్రాలు» ఆపై HTML కోడ్ ఎంట్రీ ఇలా కనిపిస్తుంది, ఫోల్డర్ తో ఒక చిత్రాన్ని కలిగి ఉంటే, ఉంది: (శరీరం నేపథ్య = "చిత్రాలు / Picture.jpg") ... (/ శరీరం) .
2. రెండవ పద్ధతి ఒక CSS శైలి రికార్డింగ్ ఉంటుంది, కాని ఈ పేరును index.htm తో ఒకే ఫైల్ లో రాస్తారు. (శరీర శైలి = "బ్యాక్ గ్రౌండ్: url ( '../ చిత్రాలు / Picture.jpg')").
3. రికార్డింగ్ మూడవ పద్ధతి రెండు ఫైళ్లు తయారు చేస్తారు. (తల) (లింక్ rel = "శైలి" రకం = "టెక్స్ట్ / css" href = "http: // సైట్ / వ్యాసం / 193110 /% D0% 9F పేరు index.htm ట్యాగ్ (తల) తో పత్రం అటువంటి లైన్ రాస్తారు % D1% 83% D1% 82% D1% 8C_% D0% BA CSS_faylu ") (/ తల). అనే ఫైల్ style.css శైలి ఇప్పటికే వ్రాయండి: శరీర {నేపధ్యం: url (చిత్రాలు / Picture.jpg ')}.

నేపథ్య చిత్రం చేయడానికి HTML వలె, మేము అర్థం చేసుకోగలం. ఇప్పుడు మీరు మొత్తం స్క్రీన్ వెడల్పు అంతటా చిత్రం చాచు ఎలా దొరుకుతుందని అవసరం.

విండో వెడల్పు నేపథ్య చిత్రాన్ని stretch మార్గాలను

మేము ఒక శాతం రూపంలో మన స్క్రీన్ సూచిస్తాయి. ఇది స్క్రీన్ మొత్తం వెడల్పు మరియు పొడవు × 100% 100% ఉంటుందని అవుతుంది. మేము ఈ వెడల్పుకు చిత్రాన్ని stretch అవసరం. మానిటర్ యొక్క మొత్తం వెడల్పు మరియు పొడవు పైగా చిత్రాన్ని stretch ఆ చిత్రం ఫైల్ రికార్డింగ్ style.css లైన్ జోడించండి. ఇది CSS శైలి లో వ్రాసిన వంటి? ఇది సులభం!

శరీర

{

నేపధ్యం: url (చిత్రాలు / Picture.jpg ')

background- పరిమాణం: 100%; / * ఈ పోస్ట్ అత్యంత ఆధునిక బ్రౌజర్లలో అనుకూలంగా ఉంటుంది * /

}

కాబట్టి మేము తెరపై html లో ఒక చిత్రాన్ని నేపధ్యం చేయడానికి ఎలా కనుగొన్నారు. index.htm ఫైలు లో రికార్డింగ్ ఒక పద్ధతి కూడా ఉంది. ఈ పద్ధతి మరియు పాతది అయినప్పటికీ, కానీ ప్రారంభ కోసం అది అవసరం తెలిసిన మరియు అర్థం చేసుకోవడం. ట్యాగ్ (తల) (శైలి) div {background- పరిమాణం: కవర్; } (/ శైలి) (/ తల), ఈ రికార్డు మేము విండో మొత్తం వెడల్పు పైగా స్థానంలో చేయబడే నేపథ్య కోసం ఒక ప్రత్యేక యూనిట్ కేటాయించాలని అర్థం. మేము చిత్రం ఆధునిక బ్రౌజర్లలో ఏ స్క్రీన్ మొత్తం వెడల్పు విస్తరించి తద్వారా, నేపథ్య చిత్రాన్ని html సైట్ చేయడానికి ఎలా రెండు మార్గాలు భావించారు.

ఒక స్థిర నేపధ్యం చేయడానికి ఎలా

మీరు భవిష్యత్తులో వెబ్ వనరు యొక్క నేపథ్యంగా చిత్రాన్ని ఉపయోగించడానికి నిర్ణయించుకుంటే, అప్పుడు మీరు దానిని స్థిర చేయడానికి ఎలా తెలుసుకోవాలి, అది పొడవు విస్తరించి మరియు సౌందర్య రూపాన్ని పాడు లేదు కాబట్టి అవసరం. కేవలం ఒక చిన్న అదనంగా నమోదు HTML కోడ్ ఉపయోగించి. మీరు నేపథ్య తరువాత ఒక పదబంధం జోడించడానికి style.css ఫైల్ అవసరం: url (చిత్రాలు / Picture.jpg ') పరిష్కరించబడింది; లేదా బదులుగా సెమికోలన్ ప్రత్యేక లైన్ తర్వాత జోడించారు - స్థానం: పరిష్కరించబడింది. అందువలన, మీ వాల్ పరిష్కరించబడుతుంది. సైట్ లోని కంటెంట్ స్క్రోలింగ్ సమయంలో, మీరు ఆ టెక్స్ట్ పంక్తులు తరలిస్తున్న చూస్తారు, కానీ నేపథ్య స్థానంలో ఉంది. కాబట్టి మీరు అనేక విధాలుగా, html నేపథ్య చిత్రం ఎలా చేయాలో నేర్చుకున్నాను.

HTML లో పట్టికలు పని

అనేక అనుభవం లేని వెబ్ డెవలపర్లు, పట్టికలు మరియు బ్లాక్స్ ఎదుర్కొన్నారు, తరచుగా html చిత్రం నేపథ్య పట్టిక చేయడానికి ఎలా అర్థం లేదు. అన్ని వంటి జట్లు HTML మరియు CSS శైలులు, వెబ్ ప్రోగ్రామింగ్ భాష నిరాడంబర ఉంది. మరియు ఈ సమస్యకు పరిష్కారం లైన్స్ ఆఫ్ కోడ్ ఒక జత వ్రాయండి. మీరు ఇప్పటికే ట్యాగ్లు (TR) మరియు (TD) ద్వారా సూచించిన, వరుసలు మరియు కాలమ్లను, వరుసగా పట్టిక రచన తెలుసు ఉండాలి. నేపథ్య = URL చిత్రాలు: ఒక చిత్రం రూపంలో పట్టిక నేపథ్య చేయడానికి, అది ట్యాగ్ (పట్టిక), (TR) లేదా (TD) సూచన చిత్రం సూచిస్తూ ఒక సాధారణ పదబంధం జోడించడానికి అవసరం. స్పష్టత కోసం, మేము ఉదాహరణలలో ఒక జంట ఇస్తాయి.

బదులుగా నేపథ్య చిత్రంతో పట్టిక: HTML ఉదాహరణలు

ఒక 2x3 పట్టిక గీయండి మరియు నేపథ్య చిత్రం లో ఫోల్డర్ "చిత్రాలు" నిల్వ చేయడానికి: (పట్టిక నేపథ్య = "చిత్రాలు / Picture.jpg") (TR) (td) 1 (/ td) (td) 2 (/ td) (TD) 3) (/ td) (/ tr) (TR) (td) 4 (/ td) (td) 5 (/ td) (TD) 6 (/ td) (/ tr) (/ పట్టిక). సో మా పట్టిక చిత్రం నేపథ్యంలో డ్రా అవుతుంది.

ఇప్పుడు 2x3 అదే ప్లేట్ పరిమాణాలు డ్రా, కానీ లెక్కించబడ్డాయి 1, 4, 5 మరియు 6 (పట్టిక) నిలువు (TR) లో ఒక చిత్రాన్ని (TD నేపథ్య = "చిత్రాలు / Picture.jpg") 1 (/ td) (td) 2 ఇన్సర్ట్ (/ td) (td) 3 (/ td) (/ tr) (TR) (td నేపథ్య = "చిత్రాలు / Picture.jpg") 4 (/ td) (td నేపథ్య = "చిత్రాలు / Picture.jpg") 5 ( = "చిత్రాలు / Picture.jpg") 6 (/ td) (/ tr) (/ పట్టిక) / td) (td నేపథ్య. మేము నేపథ్య మాత్రమే మేము నమోదు, మరియు మొత్తం పట్టిక దీనిలో ఆ కణాలలో కనిపించే చూడగలరు చూసాక.

క్రాస్ బ్రౌజర్ అనుకూలత సైట్

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