విషయము

• దశలు
• 1 వ పద్ధతి 1: ఒక HTML పేజీ వ్రాయడం
• చిట్కాలు
• హెచ్చరికలు
• మీకు ఏమి కావాలి

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

దశలు

1 వ పద్ధతి 1: ఒక HTML పేజీ వ్రాయడం

1. 1 మీరు ఇక్కడ అందించిన దశలలో ఒకదానితో మిమ్మల్ని పరిచయం చేసుకోవడానికి ముందు, "మీకు ఏమి కావాలి" విభాగాన్ని చూడండి.
2. 2 మీరు ఈ సమస్యను అర్థం చేసుకోవడానికి ముందు మీరు తెలుసుకోవలసినది:
3. 3 ప్రాథాన్యాలు. ట్యాగ్ గురించి మీరు ఎప్పుడైనా విన్నారా? ట్యాగ్ లోపల పదంతో, యాంగిల్ బ్రాకెట్‌ల చుట్టూ ఉంది. ముగింపు ట్యాగ్ అదే రూపంలో వ్రాయబడింది, కానీ మొదటి యాంగిల్ బ్రాకెట్ తర్వాత ఒక స్లాష్ జోడించబడింది. లక్షణం అనేది ట్యాగ్‌లోని ఐచ్ఛిక పదం, ఇది ట్యాగ్‌కు వివరాలను జోడించడానికి ఉపయోగించబడుతుంది.
4. 4 పత్రం ప్రారంభం. మీరు ఉపయోగిస్తున్న టెక్స్ట్ ఎడిటర్‌లో, కింది వాటిని అతికించండి:
   html> తల> శీర్షిక> వికీహౌ / శీర్షిక> / తల> శరీరం> హలో వరల్డ్ / బాడీ> / html> పెద్ద> / పెద్ద>
   ట్యాగ్ తప్పనిసరిగా ఒకే ట్యాగ్‌తో మూసివేయబడాలి, కానీ మొదటి యాంగిల్ బ్రాకెట్ తర్వాత స్లాష్‌తో మూసివేయాలి. ట్యాగ్‌లు వంటి మినహాయింపులు ఉన్నాయి మెటా లేదా DOCTYPE.
5. 5 DOCTYPE
   • సాధారణంగా, చాలా వెబ్ పేజీలు సెట్ చేయబడతాయి డాక్టిప్ ". ఇది ఎన్‌కోడింగ్‌ని అలాగే వెబ్ బ్రౌజర్‌ల ద్వారా ఎలా గ్రహించబడుతుందో గుర్తించడంలో సహాయపడుతుంది. చాలా పేజీలు అది లేకుండా పని చేస్తాయి, “కానీ మీరు సరిపోలాలనుకుంటే ఇది అవసరం (అవి ఇంటర్నెట్‌లోని ఎన్‌కోడింగ్‌ల రకాలను నియంత్రిస్తాయి మరియు అవి ఎలా ఉపయోగించబడతాయి)... HTML 4.01 కొరకు DOCTYPE క్రింద ప్రదర్శించబడింది: DOCTYPE html పబ్లిక్ "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> ఇది ఒకటి అత్యంత సాధారణమైనవి DOCTYPE ఇంటర్నెట్ అంతటా పేజీలలో ఉపయోగించబడుతుంది.ముందుగా, ఇది 'html' ని వివరించే పేజీ రకాన్ని సూచిస్తుంది, తర్వాత అది ఎన్‌కోడింగ్ రకాన్ని హైలైట్ చేస్తుంది మరియు చివరకు, DOCTYPE యొక్క స్థానం, ఫలితంగా, వెబ్ బ్రౌజర్ కోసం పేజీని వివరిస్తుంది.
   • వివిధ రకాల HTML (సంవత్సరాలుగా అభివృద్ధి చేయబడిన వివిధ వెర్షన్‌లు) ఉన్నాయి, ఉదాహరణకు కొత్త ట్యాగ్‌లు లేదా నిర్దిష్ట ట్యాగ్‌లను ఉపయోగించడం. కొన్ని ట్యాగ్‌లు నిలిపివేయబడ్డాయి (బదులుగా ఇతర ఉపయోగకరమైన ట్యాగ్‌లు ఉపయోగించబడతాయి).
   • b> మరియు i> - ఇది ప్రస్తుతం ట్యాగ్‌లపై విధించబడింది, ఎందుకంటే అవి టెక్స్ట్‌ని మార్చడానికి ఉపయోగించబడతాయి, కానీ స్పెసిఫికేషన్‌లు కాదు, ఫలితంగా, ఇతర ట్యాగ్‌లు వాటి స్థానంలో వస్తాయి. ట్యాగ్ చేయండి బలమైన> కోసం ఒక ప్రత్యామ్నాయం b>, మరియు em>, ఒక భర్తీ i>.
   • మునుపటి ట్యాగ్‌లను ఫార్మాటింగ్ కంటే ఎక్కువగా ఉన్న ట్యాగ్‌లతో భర్తీ చేయడం ముఖ్యం. వచనాన్ని అనువదిస్తే, ఫార్మాటింగ్ మాత్రమే కాదు, దాని అర్థం కూడా అలాగే ఉంటుంది. ఇది అర్థపరంగా సరైనది.
   • XHTML వెర్షన్ 2.0 లో, b> మరియు i> HTML వెర్షన్ 3+ లాగా ఉపయోగించబడలేదు.
6. 6 HTML "ఎన్‌క్యాప్సులేషన్ రూల్".
   • ప్రస్తుతం వాడుకలో ఉన్న ముఖ్యమైన ట్యాగ్‌లను చూద్దాం. పేజీ సృష్టి సమయంలో, ఒక సాధారణ నిర్మాణం ఉపయోగించబడుతుంది. ఒక ట్యాగ్ తెరవబడితే, ఫలితంగా, అది మూసివేయబడాలి... ఇది మొత్తం నిర్మాణానికి వర్తిస్తుంది. XHTML లేఅవుట్ నిర్మాణం యొక్క చెల్లుబాటు అయ్యే ఉదాహరణ ఇక్కడ ఉంది:
   • ! DOCTYPE html పబ్లిక్ "- // W3C // DTD XHTML 1.0 స్ట్రిక్ట్ // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   • html xmlns = "http://www.w3.org/1999/xhtml">
   • తల>
   • మెటా http-equiv = "కంటెంట్-టైప్" కంటెంట్ = "టెక్స్ట్ / html; charset = utf-8" />
   • శీర్షిక> హలో వరల్డ్! / శీర్షిక>
   • / తల>
   • శరీరం>
   • h1> హలో వరల్డ్! / h1>
   • / శరీరం>
   • / html>
   • సందేశాన్ని అందించే నమూనా కోడ్ హలో వరల్డ్... దీనిని పరీక్ష అంటారు హలో వరల్డ్.
7. 7 శీర్షిక
   • వెబ్ పేజీ శీర్షిక అనేది ట్యాగ్ మధ్య ఉన్న కంటెంట్ తల>... ఈ కంటెంట్‌ని యూజర్ చూడలేరు (పేజీ టైటిల్‌లో చూపిన టైటిల్ మాత్రమే). ట్యాగ్‌ల మధ్య సమాచారం తల>, వంటి ఇతర ట్యాగ్‌లను జత చేయవచ్చు:
     
     
     • సెర్చ్ ఇంజన్లు మరియు ఇతర యుటిలిటీలకు ఉపయోగపడే సమాచారం కోసం మెటా ట్యాగ్ ఉపయోగించబడుతుంది.
     • పత్రాల మధ్య లింక్‌ను సృష్టించే లింక్ ట్యాగ్, ఉదాహరణకు స్టైల్స్ (CSS) కోసం.
     • SCRIPT ట్యాగ్, ఇందులో దాదాపు ఏదైనా వెబ్ కోడింగ్ ఉంటుంది, రిమోట్‌గా యాక్సెస్ చేయగల సామర్థ్యం (మరొక డాక్యుమెంట్ నుండి).
     • స్టైల్ ట్యాగ్, ఇది తప్పనిసరిగా ఒక పేజీకి వర్తించే శైలి.
     • TITLE ట్యాగ్ అనేది మీ వెబ్ బ్రౌజర్‌లో పేజీ యొక్క శీర్షికగా కనిపించే శీర్షిక.
   • ఈ వెబ్‌సైట్ నుండి తీసిన ఉదాహరణ హెడర్‌లో వీటిలో కొన్ని డెమో చూద్దాం (ఇది తగ్గించబడింది):
     • తల>
     • శీర్షిక> ... / శీర్షిక>
     • మెటా పేరు = "వివరణ" కంటెంట్ = "..." />
     • లింక్ rel = "స్టైల్‌షీట్" రకం = "టెక్స్ట్ / css" href = "..." />
     • మెటా http-equiv = "content-type" content = "text / html; charset = UTF-8" />
     • శైలి రకం = "టెక్స్ట్ / css" మీడియా = "అన్నీ"> ... / శైలి>
     • స్క్రిప్ట్ రకం = "టెక్స్ట్ / జావాస్క్రిప్ట్" src = "..."> / script>
     • / తల>
       
       ఒకవేళ మీరు గమనించనట్లయితే, వ్యక్తిగత సమాచారం తీసివేయబడి, వ్యక్తిగత ట్యాగ్‌లు హైలైట్ చేయబడ్డాయి. ఉదాహరణ చాలా చిన్నది, ఇందులో కనిపించే దాదాపు ప్రతి ట్యాగ్‌ను చూపుతుంది తల>HTML వ్యాఖ్య మినహా (మేము దీని గురించి సాధారణ ట్యాగ్‌లలో మాట్లాడుతాము).
8. 8 ప్రతిచోటా సాధారణ ట్యాగ్‌లు
   • ముందుకు వెళ్దాం మరియు ఇతర ట్యాగ్‌లను చూద్దాం. మీ ట్యాగింగ్‌తో జాగ్రత్తగా ఉండండి మరియు "ఎన్‌క్యాప్సులేషన్" నియమాన్ని గుర్తుంచుకోండి.
     
     
     • బలమైన> ముఖ్యమైన వచనాన్ని నొక్కి చెబుతుంది.
     • చిన్న> వచనాన్ని చిన్నదిగా చేస్తుంది. ఫాంట్ పరిమాణం 1 నుండి 7 వరకు ప్రామాణిక యూనిట్లలో కొలుస్తారు, 3 డిఫాల్ట్ టెక్స్ట్ పరిమాణం. ...
     • ప్రీ> రిచ్ టెక్స్ట్ బ్లాక్‌ను నిర్వచిస్తుంది. ఇది సరైనది కాబట్టి, అలాంటి టెక్స్ట్ ఒకే పరిమాణంలోని ఫాంట్‌లో మరియు పదాల మధ్య అన్ని ఖాళీలతో టైప్ చేయబడుతుంది.
     • em> వచనాన్ని పదబంధంగా చూపుతుంది.
     • డెల్> స్ట్రైక్ అవుట్ టెక్స్ట్.
     • ఇన్స్> డాక్యుమెంట్‌లో చొప్పించిన టెక్స్ట్‌ను నిర్వచిస్తుంది.
     • h1> అనేక శీర్షిక ట్యాగ్‌లలో ఒకటి. ఈ విధమైన ట్యాగ్‌లు 'h' తో మొదలవుతాయి, సంఖ్యలో వ్యత్యాసంతో. అదే నంబర్‌తో ట్యాగ్‌ను మూసివేసేలా చూసుకోండి.
     • p> పేరాను నిర్వచిస్తుంది.
     • ! --- ... ---> ఇతర ట్యాగ్‌ల వలె కాకుండా, వ్యాఖ్య తప్పనిసరిగా ట్యాగ్ లోపలనే ఉండాలి. కోడ్ చూసినప్పుడు మాత్రమే ఈ సమాచారం కనిపిస్తుంది.
     • blockquote> కోట్ చూపుతుంది, cite> tag తో ఉపయోగించవచ్చు.
     • పైన ఉన్న కొన్ని ఉదాహరణలు ఇప్పటికే ఉన్న ట్యాగ్‌ల పూర్తి జాబితా కాదు. ఇతరుల గురించి తెలుసుకోవడానికి, సందర్శించండి.
9. 9 స్పష్టమైన నిర్మాణాన్ని సృష్టించడం
   • డేటాను సాధారణ ట్యాగ్‌లలో ఉంచడానికి పేజీలు రూపొందించబడ్డాయి, తద్వారా మేము సమాచారాన్ని పేరాగ్రాఫ్‌లుగా అన్వయించవచ్చు. కంప్యూటర్ డేటాను గుర్తిస్తుంది; దానికి సందర్భం లేదా సంభావిత కనెక్షన్ గురించి తెలియదు. మేము కంప్యూటర్-స్నేహపూర్వక HTML పేజీలను సృష్టించాలి. డివి ట్యాగ్ ఉపయోగించి దీనిని సాధించవచ్చు. ఇది భారీ సంఖ్యలో పేజీలను సృష్టించడానికి సహాయపడుతుంది. ఇది CSS తో స్టైల్ చేయబడుతుంది మరియు లేఅవుట్ కోసం పెద్ద కోడ్ టేబుల్స్ సృష్టించడం కంటే సులభం.
     • div> ఈ ట్యాగ్ ప్రత్యేకమైనది ఎందుకంటే దీనిని స్టైల్ చేయవచ్చు మరియు యూజర్ మరియు కంప్యూటర్ ఇద్దరూ అర్థం చేసుకోగల ప్రత్యేక సమాచార బ్లాక్‌లను ఉపయోగించవచ్చు.
   • డివి ట్యాగ్‌ని ఉపయోగించే ఒక సాధారణ HTML లేఅవుట్‌ను చూద్దాం.
     • ! DOCTYPE html పబ్లిక్ "- // W3C // DTD XHTML 1.0 స్ట్రిక్ట్ // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     • html xmlns = "http://www.w3.org/1999/xhtml">
     • తల>
     • మెటా http-equiv = "కంటెంట్-టైప్" కంటెంట్ = "టెక్స్ట్ / html; charset = utf-8" />
     • శీర్షిక> హలో వరల్డ్! / శీర్షిక>
     • / తల>
     • శరీరం>
     • h1> హలో వరల్డ్! / h1>
     • div id = "contentOne">
     • p> ఇది div # contentOne. / p> లో కొంత టెక్స్ట్
     • div>
     • p> div # contentOne / p> యొక్క ఉప విభాగంలో ఒక పేరా
     • / div>
     • / div>
     • / శరీరం>
     • / html>
   • CSS మరియు Javascript తో పని చేస్తున్నప్పుడు div> ట్యాగ్‌లను ఉపయోగించడం స్టైల్స్‌ని కనుగొనడంలో మరియు సవరించడంలో సహాయపడుతుంది. మెరుగైన మరియు మరింత ప్రతిస్పందించే వినియోగదారు అనుభవాన్ని సృష్టించడానికి CSS స్టైల్స్ మరియు జావాస్క్రిప్ట్‌తో పని చేయడానికి HTML విభిన్న ఎన్‌కోడింగ్‌ని ఉపయోగిస్తుంది.

చిట్కాలు

• ఈ ఆర్టికల్ చదివిన తర్వాత, ఆగిపోకండి మరియు మీరు తెలుసుకోవలసిన ప్రతిదాన్ని మీరు నేర్చుకున్నారని అనుకోకండి. ముఖ్యంగా ఈ టెక్నాలజీలో నేర్చుకోవడానికి ఏదో ఒకటి ఉంటుంది.
• కోడ్‌ని నేర్చుకోండి, అర్థం చేసుకోండి మరియు వ్రాయండి.
• కొన్ని ట్యాగ్‌లు మాత్రమే ఉపయోగిస్తాయని గమనించండి>. పారా మరియు బ్ర కొన్ని ఉదాహరణలు. > తో తెరవబడిన ఇతర ట్యాగ్‌లు మరింత మూసివేయబడాలి. ఉదాహరణకు, "div> / div>".
• ప్రజలు కొత్త ఆవిష్కరణలను ఆశిస్తారు, కాబట్టి మళ్లీ ఆవిష్కరించండి, డిజైన్ చేయండి లేదా కోడ్ చేయండి.
• మీరు చాలా నేర్చుకున్న తర్వాత, సర్వర్ ప్రోగ్రామింగ్ నేర్చుకోవడానికి ప్రయత్నించండి.
• CSS తో పాటు జావాస్క్రిప్ట్‌తో పనిచేయడం నేర్చుకోండి.

హెచ్చరికలు

• గుర్తుంచుకోండి, HTML అనేది కంటెంట్‌ను సవరించడం గురించి. దీని అర్థం HTML గుర్తింపు పొందిన ఆకృతిలో కంటెంట్‌ను నిల్వ చేయడానికి మాత్రమే ఉపయోగించబడుతుంది. CSS వంటి ఇతర టెక్నాలజీలను ఉపయోగించి ఇతర మార్పులు చేయాలి. దీని అర్థం “అర్థవంతంగా సరిచేయడంఇతరులు ఒప్పుకోకపోయినా. ఇతర ప్రోగ్రామింగ్ భాషలు వెబ్ పేజీలను (CSS, Javascript మరియు XML) రూపొందించడంలో సహాయపడతాయి. HTML అనేది కంటెంట్ కన్స్ట్రక్టర్.

మీకు ఏమి కావాలి

• ANSI ఎన్‌కోడింగ్‌కు మద్దతు ఇచ్చే టెక్స్ట్ ఎడిటర్
• ఇంటర్నెట్ ఎక్స్‌ప్లోరర్ లేదా మొజిల్లా ఫైర్‌ఫాక్స్ వంటి వెబ్ బ్రౌజర్
• (ఐచ్ఛికం) అడోబ్ డ్రీమ్‌వీవర్, ఆప్తానా స్టూడియో లేదా మైక్రోసాఫ్ట్ ఎక్స్‌ప్రెషన్ వెబ్ వంటి wysiwyg లేదా wykiwyg HTML ఎడిటర్.