Home-theater-designers
మీరు కొత్త వెబ్‌సైట్‌ను రూపొందిస్తున్నప్పుడు, ఈ రోజుల్లో అది HTML5- అనుకూలమైనదిగా ఉండాలని మీరు కోరుకుంటారు. అయితే మీరు HTML5 యొక్క చిక్కులను మొదటి నుండి నేర్చుకోవడానికి అనవసరమైన సమయాన్ని వెచ్చించకూడదనుకుంటున్నారా?
అదృష్టవశాత్తూ, ది HTML5 బాయిలర్‌ప్లేట్ టెంప్లేట్ సహాయం చేయగలను. ఇది కేవలం కొన్ని నిమిషాల్లో ఒక HTML5 వెబ్‌సైట్‌ను సృష్టించడానికి మీరు ఉపయోగించే ఒక సాధారణ ఫ్రంట్-ఎండ్ టెంప్లేట్. కానీ ఇది సంక్లిష్టమైన, పూర్తిగా ఫీచర్ చేయబడిన సైట్ యొక్క పునాదిగా మీరు ఉపయోగించగలిగేంత శక్తివంతమైనది.
మీరు ఫేస్‌బుక్ లేకుండా మెసెంజర్‌ని ఉపయోగించవచ్చా?
ఈ HTML5 బాయిలర్‌ప్లేట్ ట్యుటోరియల్ టెంప్లేట్‌లో ఏమి వస్తుంది, దానిని ఎలా ఉపయోగించాలో మీరు తెలుసుకోవలసిన ప్రాథమిక అంశాలు మరియు తదుపరి అభ్యాసం కోసం కొన్ని వనరుల గురించి తెలియజేస్తుంది. HTML యొక్క కొన్ని లైన్లతో మాత్రమే చాలా ప్రాథమిక సైట్‌ను సృష్టించడానికి నేను టెంప్లేట్‌ను ఎలా ఉపయోగించానో కూడా నేను మీకు చూపుతాను.
HTML5 బాయిలర్‌ప్లేట్ మూస
మీరు HTML5 బాయిలర్‌ప్లేట్ నుండి టెంప్లేట్‌ను డౌన్‌లోడ్ చేసినప్పుడు, మీరు అనేక ఫోల్డర్‌లు మరియు ఫైల్‌లను పొందుతారు. జిప్ ఫైల్‌లోని విషయాలు ఇక్కడ ఉన్నాయి:
css
---main.css
---normalize.css
doc
img
js
---main.js
---plugins.js
---vendor
---jquery.min.js
---modernizr.min.js
.editorconfig
.htaccess
404.html
browserconfig.xml
favicon.ico
humans.txt
icon.png
index.html
robots.txt
site.webmanifest
tile.png
tile-wide.pngమేము ఇక్కడ టెంప్లేట్‌లోని ప్రతి మూలకాన్ని చూడము, ప్రాథమికాలు మాత్రమే. అన్ని ఫైల్‌లను ఉపయోగించడానికి మీ వద్ద వనరులు ఉన్నాయని నిర్ధారించుకోవడానికి, మేము సహాయ పత్రాలతో ప్రారంభిస్తాము.
HTML5 బాయిలర్‌ప్లేట్ సహాయ డాక్యుమెంటేషన్
బాయిలర్‌ప్లేట్ యొక్క సేకరణ ఉంది GitHub లో హోస్ట్ చేసిన సహాయ పత్రాలు . మీకు సాంకేతిక ప్రశ్నలు ఉన్నప్పుడు లేదా ఏదో ఒక విధంగా ఎందుకు రూపొందించబడిందో అని ఆశ్చర్యపోతున్నప్పుడు ఇది పెద్ద సహాయం.
డాక్యుమెంటేషన్‌లోని దాదాపు అన్నీ కూడా టెంప్లేట్ యొక్క డాక్ ఫోల్డర్‌లో చేర్చబడ్డాయి. మీ బాయిలర్‌ప్లేట్ సైట్‌ని ఎలా నిర్మించాలో గుర్తించడంలో మీకు సహాయపడే అనేక మార్క్‌డౌన్ (.md) ఫైల్‌లను మీరు చూస్తారు.
మీరు ప్రతిదీ చదవాలనుకుంటే, TOC.md తో ప్రారంభించండి మరియు అక్కడ నుండి ఇతర మార్క్‌డౌన్ ఫైల్‌లకు లింక్‌లను అనుసరించండి. మీరు ఒక నిర్దిష్ట సమస్యపై సహాయం కోసం చూస్తున్నట్లయితే, దానికి సంబంధించిన ఫైల్‌ని కనుగొనండి; use.md ప్రారంభించడానికి మంచి ప్రదేశం.
HTML5 బాయిలర్‌ప్లేట్ యొక్క CSS తో ప్రారంభమవుతుంది
HTML5 బాయిలర్‌ప్లేట్ టెంప్లేట్ రెండు CSS ఫైళ్లతో వస్తుంది: main.css మరియు normalize.css.
రెండవ ఫైల్, normalize.css, విభిన్న బ్రౌజర్‌లు మూలకాలను స్థిరమైన మార్గాల్లో అందించడంలో సహాయపడుతుంది. ఇది ఎలా పనిచేస్తుందనే దాని గురించి మరింత తెలుసుకోవడానికి, తనిఖీ చేయండి GitHub లో normalize.css ప్రాజెక్ట్ .
ఇంతలో, main.css అనేది మీకు అవసరమైన ఏదైనా కోడ్‌ని మీరు ఉంచుతారు మీ సైట్‌ను CSS తో ఫార్మాట్ చేయండి . టెంప్లేట్‌తో చేర్చబడిన ప్రామాణిక CSS డెవలపర్లు మరియు HTML5 బాయిలర్‌ప్లేట్ కమ్యూనిటీ నిర్వహించిన పరిశోధన ఫలితం. ఇది చదవదగినది మరియు విభిన్న బ్రౌజర్‌లలో చక్కగా ప్రదర్శించబడుతుంది.
మీరు మీ స్వంత CSS ని జోడించాలనుకుంటే, మీరు దానిని రచయిత యొక్క అనుకూల స్టైల్స్ విభాగానికి జోడించవచ్చు. మా ఉదాహరణ పేజీ కోసం నేను కొంచెం లింక్ స్టైలింగ్‌ను జోడిస్తాను:
బేస్ CSS లో చేర్చబడిన అనేక ఉపయోగకరమైన సహాయక తరగతులు కూడా ఉన్నాయి. వాటిలో కొన్ని ప్రామాణిక బ్రౌజర్‌లు మరియు స్క్రీన్ రీడర్‌ల (లేదా కొంత కలయిక) నుండి అంశాలను దాచిపెడతాయి.
Main.css లో కూడా మీరు ప్రతిస్పందించే డిజైన్ మరియు సహాయక ముద్రణ సెట్టింగ్‌లకు మద్దతునిస్తారు.
ఈ అంశాలన్నీ CSS లోని వ్యాఖ్యల ద్వారా స్పష్టంగా వివరించబడ్డాయి:
సాధారణంగా, మీరు బేస్ CSS తో ప్రారంభించవచ్చు.
టెంప్లేట్‌కు మీ స్వంత HTML జోడించడం
బాయిలర్‌ప్లేట్‌లో రెండు HTML ఫైల్‌లు ఉన్నాయి: 404.html మరియు index.html.
ఇండెక్స్ పేజీ మీరు మీ హోమ్‌పేజీని సృష్టిస్తుంది (లేదా మీ ఏకైక పేజీ, మీరు ఒక సాధారణ పేజర్ కోసం వెళ్తున్నట్లయితే).
మీరు బ్రౌజర్‌లో ఇండెక్స్ పేజీని తెరిస్తే, మీకు ఒకే లైన్ టెక్స్ట్ కనిపిస్తుంది. కానీ HTML లోకి చూస్తే కోడ్‌లో చాలా ఎక్కువ దాచబడినట్లు తెలుస్తుంది. మార్చడం గురించి మీరు నిజంగా ఆందోళన చెందాల్సిన ఏకైక విషయం Google Analytics కోడ్ ('UA-XXXXX-Y' అనే వచనాన్ని కనుగొని, దానిని మీ స్వంత ట్రాకింగ్ కోడ్‌తో భర్తీ చేయండి).
ఇండెక్స్ పేజీలోని మిగిలిన HTML లో వెబ్ యాప్‌ల సమాచారం, పాత బ్రౌజర్‌ల నోటిఫికేషన్‌లు మరియు ఉపయోగకరమైన జావాస్క్రిప్ట్‌లు ఉంటాయి. మీరు ప్రారంభించినప్పుడు, మీరు వీటిలో దేనితోనూ గందరగోళం చెందాల్సిన అవసరం లేదు.
అయితే, వాటిని ముందే జనాభా కలిగి ఉండటం, అయితే, మీ సైట్ HTML5 నుండి అత్యధిక ప్రయోజనాలను పొందడానికి సిద్ధంగా ఉందని నిర్ధారించుకోవడానికి మంచి మార్గం.
మీ పేజీని సృష్టించడానికి, ఫైల్‌లోని ట్యాగ్‌ల మధ్య మీ HTML ని చొప్పించండి. నా గురించి నేను జోడించే కొన్ని ప్రాథమిక సమాచారం ఇక్కడ ఉంది:
మరిన్ని పేజీలను సృష్టించాలనుకుంటున్నారా? ఈ ఫైల్ కాపీలను సృష్టించండి మరియు వాటికి పేరు మార్చండి, కాబట్టి మీరు HTML మొత్తాన్ని కాపీ చేసి అతికించాల్సిన అవసరం లేదు. అప్పుడు మీ కంటెంట్‌ను జోడించండి.
మీరు మీ 404 పేజీని అనుకూలీకరించాలనుకుంటే, HTML ఫైల్‌ని సవరించండి. మీ 404 పేజీలో ఏమి ఉంచాలో తెలియదా? ఈ గొప్ప 404 పేజీ డిజైన్ ఉదాహరణలను చూడండి.
ఫెవికాన్ (మరియు ఇతర చిహ్నాలు) జోడించడం
మీ ఫేవికాన్‌ను భర్తీ చేయాలనుకుంటున్నారా? అప్పుడు favicon.ico మీరు భర్తీ చేయాల్సిన ఫైల్.
మీకు ఇంకా ఒకటి లేకపోతే, మీరు దానిని సృష్టించాలి. మీరు ఆన్‌లైన్ ఫేవికాన్ జనరేటర్‌ని ఉపయోగించవచ్చు లేదా మీ స్వంతంగా డిజైన్ చేసుకోవచ్చు. ఇది 16 x 16 పిక్సెల్‌లు మరియు .ico ఫైల్ రకాన్ని కలిగి ఉందని నిర్ధారించుకోండి.
విండోస్‌లో పిప్ ఇన్‌స్టాల్ చేయడం ఎలా
మీ ఫేవికాన్‌లో కొంత ఆలోచన ఉంచడం మంచిది. మీ మేధస్సును గైడ్ చేయడానికి ఈ ప్రసిద్ధ ఫేవికాన్‌లను ఉపయోగించండి. మీరు కొత్త ఫేవికాన్‌ని జోడించినప్పుడు దాన్ని ఫేవికాన్.ఐకో అని పిలిచేలా చూసుకోండి.
మీ సైట్ యొక్క రూట్ డైరెక్టరీలో మరో మూడు చిత్రాలు ఉన్నాయని మీరు గమనించవచ్చు: icon.png, tile.png మరియు tile-wide.png. ఇవి దేని కోసం?
- icon.png ఆపిల్ టచ్ ఐకాన్‌ల కోసం ఉపయోగించబడుతుంది. మీరు వెబ్ యాప్‌ను రూపొందిస్తే, ఐఫోన్ లేదా ఐప్యాడ్ యూజర్ వారి హోమ్‌స్క్రీన్‌కు యాప్‌ను జోడించినప్పుడు ఈ ఐకాన్ ఉపయోగించబడుతుంది.
- tile.png మరియు tile-wide.png అనేది Windows '' పిన్ 'కార్యాచరణ కోసం, మరియు Windows 10 లో చూపబడుతుంది.
ఈ కేసులన్నింటికీ చిహ్నాలను అందించడం మంచిది --- కానీ మీరు వెబ్ యాప్‌ను రూపొందించకపోతే, అది తక్కువ ప్రాధాన్యతనిస్తుంది.
మరింత కార్యాచరణను జోడిస్తోంది
మీరు మీ HTML మరియు ఫేవికాన్‌ని జోడించిన తర్వాత (అలాగే మీరు చేర్చాలనుకునే ఏదైనా CSS), మీ సైట్ ప్రచురించడానికి సిద్ధంగా ఉంది. HTML5 బాయిలర్‌ప్లేట్‌ను ఉపయోగించడం ఎంత సులభం. దీన్ని మీ సర్వర్‌కు అప్‌లోడ్ చేయండి మరియు మీరు పూర్తి చేసారు!
మా పేజీ ఎలా ఉంటుందో ఇక్కడ ఉంది:
మీరు చూడగలిగినట్లుగా, టెక్స్ట్ యొక్క కొన్ని పంక్తులు పూర్తిగా పనిచేసే (కొంచెం చప్పగా ఉంటే) వెబ్‌సైట్‌ను సృష్టించాయి. ఇది ఎక్కువ కాదు, కానీ దీనికి కొన్ని నిమిషాలు మాత్రమే పట్టింది. మరియు ఇది HTML5 తో అత్యంత విస్తరించదగినది. అది బాయిలర్‌ప్లేట్ టెంప్లేట్ యొక్క శక్తి.
కానీ మీరు కావాలనుకుంటే బాయిలర్‌ప్లేట్ టెంప్లేట్‌తో ఇంకా చాలా చేయవచ్చు. మీరు వెతుకుతున్న నిర్దిష్ట విషయం ఏదైనా ఉంటే, సహాయ డాక్యుమెంటేషన్‌లో మీరు దానిని కనుగొనడానికి మంచి అవకాశం ఉంది.
మీరు HTML5 తో ఏమి చేయగలరో మీకు తెలియకపోతే, కానీ మీరు తెలుసుకోవాలనుకుంటే, మీకు సహాయం చేయడానికి అక్కడ చాలా వెబ్ డిజైన్ ట్యుటోరియల్స్ ఉన్నాయి.
షేర్ చేయండి షేర్ చేయండి ట్వీట్ ఇమెయిల్ అననుకూల PC లో Windows 11 ని ఇన్‌స్టాల్ చేయడం సరైందేనా?మీరు ఇప్పుడు అధికారిక ISO ఫైల్‌తో పాత PC లలో Windows 11 ని ఇన్‌స్టాల్ చేయవచ్చు ... కానీ అలా చేయడం మంచి ఆలోచన కాదా?
తదుపరి చదవండి సంబంధిత అంశాలు- ప్రోగ్రామింగ్
- HTML5
- కోడింగ్ ట్యుటోరియల్స్
డాన్ ఒక కంటెంట్ స్ట్రాటజీ మరియు మార్కెటింగ్ కన్సల్టెంట్, కంపెనీలకు డిమాండ్ మరియు లీడ్స్ ఉత్పత్తి చేయడంలో సహాయపడుతుంది. అతను dannalbright.com లో స్ట్రాటజీ మరియు కంటెంట్ మార్కెటింగ్ గురించి కూడా బ్లాగ్ చేస్తాడు.
డాన్ ఆల్బ్రైట్ నుండి మరిన్నిమా వార్తాలేఖకు సభ్యత్వాన్ని పొందండి
టెక్ చిట్కాలు, సమీక్షలు, ఉచిత ఈబుక్‌లు మరియు ప్రత్యేకమైన డీల్స్ కోసం మా వార్తాలేఖలో చేరండి!
సభ్యత్వం పొందడానికి ఇక్కడ క్లిక్ చేయండి