Home-theater-designers
మనకు తెలిసినట్లుగా HTML అనేది వెబ్‌లో కీలక భాగం. మరియు కొంతమంది వెబ్ డిజైనర్లు HTML ని మాన్యువల్‌గా టైప్ చేయడం ద్వారా పేజీలను సృష్టిస్తుండగా, దాని గురించి కొంచెం తెలుసుకోవడం ఇంకా సులభమే.
మేము నిజంగా HTML అంటే ఏమిటి, కొన్ని ప్రాథమిక అంశాలు మరియు అది ఇతర భాషలతో ఎలా సంకర్షణ చెందుతుందనే దానితో సహా భాష యొక్క కొన్ని ప్రాథమికాలను చూడబోతున్నాం. దీనిని 'HTML కోసం డమ్మీస్' క్రాష్ కోర్సుగా భావించండి.
HTML బేసిక్స్: HTML అంటే ఏమిటి?
HTML అంటే హైపర్ టెక్స్ట్ మార్కప్ లాంగ్వేజ్ . మరియు ఇది కొన్నిసార్లు ప్రోగ్రామింగ్ భాషలతో ముడిపడి ఉన్నప్పటికీ, ఇది ఖచ్చితమైనది కాదు.
గా మార్కప్ లాంగ్వేజ్ , పేజీల డిస్‌ప్లే లేఅవుట్‌ను రూపొందించడానికి HTML మాత్రమే మిమ్మల్ని అనుమతిస్తుంది. ఒక నిజం ప్రోగ్రామింగ్ భాష , జావా లేదా C ++ లాగా, అమలు చేయబడిన లాజిక్ మరియు ఆదేశాలను కలిగి ఉంటుంది.
ఇది సరళంగా ఉన్నప్పటికీ, వెబ్‌లోని ప్రతి పేజీకి HTML వెన్నెముకగా ఉంటుంది. ఏ టెక్స్ట్ బోల్డ్‌గా కనిపిస్తుందో, ఇమేజ్‌లను జోడిస్తుందో మరియు ఇతర పేజీలకు లింక్ చేస్తుందో దానికి ఇది బాధ్యత వహిస్తుంది. మాకు మరింత వివరించే ఒక HTML FAQ ఉంది.
మీరు మీ బ్రౌజర్‌లోని చాలా వెబ్‌పేజీలపై కుడి క్లిక్ చేసి ఎంచుకోవచ్చు పుట మూలాన్ని చూడండి లేదా వాటి వెనుక ఉన్న HTML చూడటానికి సమానంగా ఉంటుంది. ఇది HTML లేని కోడ్‌ను కూడా కలిగి ఉండవచ్చు, కానీ మీరు దానిని జల్లెడ పట్టవచ్చు.
మీకు మార్కప్ లేదా ప్రోగ్రామింగ్ లాంగ్వేజ్‌లతో సున్నా అనుభవం లేకపోయినా, HTML గురించి కొంచెం నేర్చుకోవడం మీకు మరింత సమాచారం అందించే వెబ్ యూజర్‌ని చేస్తుంది. HTML ఎలా పని చేస్తుందో అర్థం చేసుకోవడంలో మీకు సహాయపడటానికి ఐదు ప్రాథమిక దశల ద్వారా నడుద్దాం. మేము మార్గం వెంట ఉదాహరణలు అందిస్తాము.
దశ 1: ట్యాగ్‌ల భావనను అర్థం చేసుకోవడం
HTML ఒక వ్యవస్థను ఉపయోగిస్తుంది టాగ్లు పత్రం యొక్క విభిన్న అంశాలను వర్గీకరించడానికి.
ప్రభావిత వచనాన్ని వాటి లోపల మూసివేయడానికి చాలా ట్యాగ్‌లు జంటగా వస్తాయి. ఇక్కడ ఒక సాధారణ ఉదాహరణ (ది
ట్యాగ్ టెక్స్ట్ చేస్తుంది బోల్డ్ ; మేము దీనిని క్షణంలో మరింత చర్చిస్తాము.)
This is some bold text .క్లోజింగ్ ట్యాగ్ ఫార్వర్డ్ స్లాష్ (/) తో ఎలా మొదలవుతుందో గమనించండి. ఇది క్లోజింగ్ ట్యాగ్‌ను సూచిస్తుంది, ఇది ముఖ్యమైనది. మీరు ఒక ట్యాగ్‌ను మూసివేయకపోతే, మొదటి నుండి ప్రతిదానికి ఆ లక్షణం ఉంటుంది.
ట్రాష్ నుండి టైమ్ మెషిన్ బ్యాకప్‌లను తొలగించండి
అయితే, అన్ని ట్యాగ్‌లకు జత ఉండదు. అని పిలువబడే కొన్ని HTML అంశాలు ఖాళీ అంశాలు , ఏ కంటెంట్ లేదు మరియు వారి స్వంత ఉనికిలో. ఒక ఉదాహరణ
ట్యాగ్, ఇది లైన్ బ్రేక్. స్లాష్‌ని జోడించడం ద్వారా మీరు అలాంటి ట్యాగ్‌లను 'క్లోజ్' చేయవచ్చు (వంటివి
) కానీ ఇది ఖచ్చితంగా అవసరం లేదు.
దశ 2: అస్థిపంజరం HTML లేఅవుట్
సరైన HTML డాక్యుమెంట్ తప్పనిసరిగా నిర్దిష్ట ట్యాగ్‌లను కలిగి ఉండాలి కాబట్టి అది సరిగ్గా వేయబడింది. ఇవి అవసరమైన భాగాలు:
- ప్రతి HTML డాక్యుమెంట్ తప్పనిసరిగా | _+_ | తో ప్రారంభం కావాలి తనను తాను అలా ప్రకటించడానికి. అందువలన, దాని ముగింపు ట్యాగ్, | _+_ | , ఒక HTML ఫైల్‌లోని చివరి అంశం.
- తరువాత, ది | _+_ | విభాగంలో పేజీ శీర్షిక, పేజీలో రన్ అయ్యే వివిధ స్క్రిప్ట్‌లు మరియు ఇలాంటి సమాచారం ఉంటుంది. పేరు సూచించినట్లుగా, ఇది సాధారణంగా ప్రారంభ తర్వాత వస్తుంది _ _+_ | ట్యాగ్. తుది వినియోగదారు ఈ ట్యాగ్‌లలోని ఎక్కువ కంటెంట్‌ను చూడలేరు.
- చివరగా, ది | _+_ | రీడర్ చూసే పేజీ యొక్క వచనాన్ని ట్యాగ్ కలిగి ఉంది (ఇంకా చాలా ఎక్కువ). ఇక్కడ మీరు చిత్రాలు, లింక్‌లు మరియు మరిన్నింటిని కనుగొంటారు.
అప్పటినుంచి
విభాగం ఒక HTML డాక్యుమెంట్‌లో ఎక్కువ భాగం చేస్తుంది, మా మిగిలిన వాక్‌థ్రూ దానికి సంబంధించిన అంశాలను చూస్తుంది.
దశ 3: ఫార్మాటింగ్ కోసం ప్రాథమిక HTML ట్యాగ్‌లు
తరువాత, HTML పత్రాలను రూపొందించే కొన్ని సాధారణ ట్యాగ్‌లను చూద్దాం. వాస్తవానికి, ప్రతి మూలకాన్ని కవర్ చేయడం సాధ్యం కాదు, కాబట్టి మేము కొన్ని ముఖ్యమైన వాటిని సమీక్షిస్తాము. మేము కవర్ చేసాము మరిన్ని HTML ఉదాహరణలు ఒకవేళ ఇవి మీకు సంతృప్తి కలిగించకపోతే.
ఈ ట్యాగ్‌లు చాలా ప్రాథమికంగా అనిపిస్తే, HTML 1993 లో సృష్టించబడిందని గుర్తుంచుకోండి. వెబ్ దాని ప్రారంభ దశలో చాలా టెక్స్ట్ ఆధారితమైనది.
సాధారణ టెక్స్ట్ ఫార్మాటింగ్
మైక్రోసాఫ్ట్ వర్డ్‌లో మీరు కనుగొనే ప్రాథమిక టెక్స్ట్ స్టైల్‌లకు HTML మద్దతు ఇస్తుంది:
- | _+_ | ట్యాగ్‌లు వచనాన్ని తయారు చేస్తాయి బోల్డ్ .
- | _+_ | ట్యాగ్‌లు (ఇది 'ఉద్ఘాటన'ని సూచిస్తుంది) రెడీ ఇటాలిక్ చేయండి టెక్స్ట్
HTML కూడా పాత వాటికి మద్దతు ఇస్తుంది
బోల్డ్ మరియు కోసం ట్యాగ్ చేయండి
ఇటాలిక్స్ కోసం. అయితే, పైన ఉన్న వాటిని ఉపయోగించడం ఉత్తమం.
సంక్షిప్తంగా,
మరియు
ఏదైనా ఎలా అర్థం చేసుకోవాలో చూపించు, రెండో ట్యాగ్‌లు ఎలా కనిపించాలో మాత్రమే తెలియజేస్తాయి. ఈ మాజీ ట్యాగ్‌లు దృష్టి లోపం ఉన్నవారు ఉపయోగించే స్క్రీన్ రీడర్‌లకు మరింత అందుబాటులో ఉంటాయి.
పేరాగ్రాఫ్ మరియు ఇతర విభాగాలు
HTML లు
డాక్యుమెంట్‌లోని ఒక విభాగాన్ని నిర్వచించడానికి ట్యాగ్ మిమ్మల్ని అనుమతిస్తుంది. సాధారణంగా, ఇది CSS తో జతచేయబడుతుంది (దిగువ చూడండి) ఒక విభాగాన్ని నిర్దిష్ట మార్గంలో ఫార్మాట్ చేయడానికి.
ది
వచనాన్ని పేరాగ్రాఫ్‌లుగా విభజించడానికి ట్యాగ్ మిమ్మల్ని అనుమతిస్తుంది. బ్రౌజర్‌లు స్వయంచాలకంగా వీటికి ముందు మరియు తరువాత కొంత స్థలాన్ని ఇస్తాయి, సహజంగా టెక్స్ట్‌ను విచ్ఛిన్నం చేయడానికి మిమ్మల్ని అనుమతిస్తుంది.
మీరు మీ డాక్యుమెంట్‌కు హెడర్‌లను జోడించవచ్చు మరియు దానిని ఉపయోగించి అనుసరించడం సులభం చేయవచ్చు
ద్వారా
టాగ్లు. H1 అతి ముఖ్యమైన శీర్షిక అయితే, H6 కనీసం ముఖ్యమైనది. దాదాపు ప్రతి MakeUseOf కథనం సమాచారాన్ని నిర్వహించడానికి H2 మరియు H3 శీర్షికలను ఉపయోగిస్తుంది.
కొట్టడం నమోదు చేయండి మీ HTML డాక్యుమెంట్‌లో లైన్ బ్రేక్‌లను జోడించడానికి వాస్తవానికి వాటిని ప్రదర్శించదు. బదులుగా, మీరు ఉపయోగించవచ్చు
లైన్ బ్రేక్ జోడించడానికి.
వీటన్నింటినీ ఉపయోగించే ఒక ఉదాహరణ ఇక్కడ ఉంది:
దశ 4: చిత్రాలను చొప్పించడం
చిత్రాలు చాలా వెబ్‌పేజీలలో ముఖ్యమైన భాగం. మీరు వాటిని HTML తో సులభంగా జోడించవచ్చు మరియు వాటి కోసం విభిన్న లక్షణాలను కూడా సెట్ చేయవచ్చు.
మీరు దాన్ని ఉపయోగించి చిత్రాన్ని చొప్పించండి
ట్యాగ్. దీనితో కలపడం
మీరు చిత్రాన్ని ఎక్కడ నుండి లోడ్ చేయాలనుకుంటున్నారో పేర్కొనడానికి లక్షణం మిమ్మల్ని అనుమతిస్తుంది.
మరొక ముఖ్యమైన లక్షణం
గూగుల్ మ్యాప్స్‌లో పిన్‌ను ఎలా జోడించాలి
ట్యాగ్‌లు
. స్క్రీన్ రీడర్‌ల కోసం లేదా ఇమేజ్ సరిగ్గా లోడ్ కానట్లయితే చిత్రాన్ని వివరించడానికి Alt టెక్స్ట్ మిమ్మల్ని అనుమతిస్తుంది. చిత్రం యొక్క ఆల్ట్ టెక్స్ట్‌ను చూడటానికి మీరు దానిపై మౌస్ చేయవచ్చు.
ఉపయోగించడానికి
మరియు
చిత్రం కనిపించే పిక్సెల్‌ల సంఖ్యను పేర్కొనడానికి అంశాలు.
ఇవన్నీ కలిపి, ఇమేజ్ ట్యాగ్ ఇలా కనిపిస్తుంది:
Example Heading
This is one paragraph.
This is a second
paragraph split between two lines.
దశ 5: లింక్‌లను జోడించడం
వరల్డ్ వైడ్ వెబ్ ఇతర పేజీలకు లింక్‌లు లేకుండా వెబ్‌గా ఉండదు. ఉపయోగించి
![]()
ట్యాగ్, మీరు ఏదైనా టెక్స్ట్‌లోని ఇతర పేజీలకు లింక్ చేయవచ్చు.
లోపల
srcట్యాగ్, ది
![]()
మీరు ఎక్కడ లింక్ చేస్తున్నారో లక్షణం చెబుతుంది. URL ని అతికించడం బాగా పని చేస్తుంది. మీరు దీనిని ఉపయోగించవచ్చు
altలింక్‌పై ఎవరైనా హోవర్ చేసినప్పుడు కనిపించే కొంత వచనాన్ని జోడించడానికి మూలకం.
ప్రాథమిక లింక్ ఇలా కనిపిస్తుంది:
widthది
heightట్యాగ్‌లో అనేక ఇతర అంశాలు ఉన్నాయి, కానీ మేము వాటిని ఇక్కడ డైవ్ చేయము.
CSS మరియు JavaScript తో HTML ఎలా కనెక్ట్ అవుతుంది
మేము HTML ప్రాథమిక మరియు వెబ్‌పేజీని ఎలా స్థాపించాలో చూశాము. కానీ మీరు ఊహించినట్లుగా, HTML మాత్రమే ఆధునిక వెబ్ కోసం దానిని తగ్గించదు. చాలా వెబ్‌సైట్‌లు స్టాటిక్ టెక్స్ట్ కంటే మరేమీ కానప్పుడు, 'వెబ్ 1.0' రోజుల్లో సాధారణ HTML వెబ్‌పేజీలు సాధారణం.
కానీ ఇప్పుడు, మన దగ్గర ఇంకా చాలా ఉన్నాయి. CSS (క్యాస్కేడింగ్ స్టైల్ షీట్స్) అనేది HTML లో మీరు తయారు చేసిన టెక్స్ట్ ఎలా ఉండాలో వివరించడానికి ఉపయోగించే భాష. గుర్తుంచుకోండి
మేము చర్చించిన ట్యాగ్? దీని లోపల (మరియు ఇతర ట్యాగ్‌లు), మీరు a ని నిర్వచించవచ్చు
గుణం. అప్పుడు, మీతో పాటు వచ్చే CSS డాక్యుమెంట్‌లో, అది ఎలాగో మీరు సూచనలను వ్రాయవచ్చు
చూడాలి.
మీరు మీ HTML కోడ్‌లో ఈ స్టైల్ ఎలిమెంట్‌లను ఇన్‌లైన్‌గా నిర్వచించవచ్చు, అయితే దీనిని నిర్వహించడం చాలా కష్టం కనుక ఇది పేలవమైన అభ్యాసంగా పరిగణించబడుతుంది. దీనితో మరింత తెలుసుకోండి ఈ సాధారణ CSS ఉదాహరణలు . కూడా తనిఖీ చేయండి మీ CSS ఫైల్‌లను ఎలా ఆప్టిమైజ్ చేయాలి .
జావాస్క్రిప్ట్
HTML కంటెంట్‌ను నిర్వచిస్తుందని మరియు CSS రూపాన్ని నిర్ణయిస్తుందని మేము చూశాము. వెబ్‌కు కీలకమైన త్రయం యొక్క చివరి సభ్యుడు జావాస్క్రిప్ట్, ప్రతిసారీ కొత్త పేజీని లోడ్ చేయకుండా ప్రజల చర్యలకు ప్రతిస్పందించడానికి వెబ్ పేజీలను అనుమతిస్తుంది.
ఉదాహరణకు, మీరు సమర్పించడానికి ప్రయత్నించే ముందు మీరు నమోదు చేసిన పాస్‌వర్డ్ దాని అవసరాలకు అనుగుణంగా లేదని హెచ్చరించడానికి జావాస్క్రిప్ట్ వెబ్‌సైట్‌ను అనుమతిస్తుంది. వెబ్ డిజైనర్ స్లైడ్‌షోలోని చిత్రాల ద్వారా సైకిల్ చేయడానికి లేదా ఇన్‌పుట్ కోసం వినియోగదారుని ప్రాంప్ట్ చేయడానికి జావాస్క్రిప్ట్‌ను ఉపయోగించవచ్చు.
ఇవి కొన్ని ప్రాథమిక ఉదాహరణలు. జావాస్క్రిప్ట్ అనేది స్క్రిప్టింగ్ లాంగ్వేజ్, ఇది చాలా ఎక్కువ చేయగల సామర్థ్యం కలిగి ఉంది మరియు ఇది HTML మరియు CSS కంటే చాలా క్లిష్టంగా ఉంటుంది. చూడండి జావాస్క్రిప్ట్ గురించి మా అవలోకనం చాలా ఎక్కువ కోసం.
వెబ్ డిజైన్ యొక్క పూర్తి పరిధిని చూడటం ఈ వ్యాసం యొక్క పరిధికి మించినది, కానీ ఈ రోజు మనకు తెలిసిన వెబ్‌పేజీలను రూపొందించడానికి HTML ఇతర భాషలతో సంకర్షణ చెందుతుందని చెప్పడం సరిపోతుంది.
HTML యొక్క పరిణామం
HTML స్టాటిక్ కాదని గమనించడం ముఖ్యం. HTML అనేక పునర్విమర్శల ద్వారా వెళ్ళింది, ఇటీవలిది HTML 5. ముఖ్యంగా, ఈ ప్రమాణం Adobe Flash వంటి యాజమాన్య ఫార్మాట్‌లపై ఆధారపడకుండా స్థానిక వీడియో ఎంబెడ్డింగ్‌కు మద్దతు ఇస్తుంది.
HTML యొక్క కొత్త పునరావృత్తులు కూడా కొన్ని పురాతన ట్యాగ్‌లను ఎప్పటికప్పుడు తగ్గించినట్లు ప్రకటించాయి. వీటిలో భయంకరమైన ట్యాగ్‌లు ఉన్నాయి
hrefమరియు
title(వరుసగా స్క్రోల్ మరియు ఫ్లాష్ టెక్స్ట్) 1990 ల వెబ్‌సైట్ డిజైన్‌లో సాధారణంగా కనిపిస్తుంది. కాబట్టి కాలక్రమేణా ప్రమాణాలు మారుతున్నాయని గుర్తుంచుకోండి.
ఒక చిన్న HTML నాలెడ్జ్ చాలా దూరం వెళ్తుంది
మేము ఒక HTML పత్రం ఎలా పనిచేస్తుందో క్లుప్త పర్యటన చేసాము. వెబ్‌పేజీలు ఎలా నిర్మాణాత్మకంగా ఉన్నాయో ఇప్పుడు మీకు తెలుసు. మీరు వెబ్‌పేజీలను నిర్మించకపోయినా, మీరు ప్రతిరోజూ ఉపయోగించే వెబ్ గురించి మీకు కొంచెం ఎక్కువ అవగాహన ఉంటుంది.
విండోస్ 10 కోసం ఐకాన్ ఎలా తయారు చేయాలి
మరింత తెలుసుకోవడానికి, అవసరమైన సాధనాలతో మీ వెబ్ అభివృద్ధి నైపుణ్యాలను అప్‌గ్రేడ్ చేసి, ఆపై తనిఖీ చేయండి మీ మొదటి వెబ్‌సైట్‌ను ఎలా డిజైన్ చేయాలో మా గైడ్ .
చిత్ర క్రెడిట్: Belyaevskiy/ డిపాజిట్‌ఫోటోలు
షేర్ చేయండి షేర్ చేయండి ట్వీట్ ఇమెయిల్ మీ వర్చువల్‌బాక్స్ లైనక్స్ మెషిన్‌లను సూపర్‌ఛార్జ్ చేయడానికి 5 చిట్కాలువర్చువల్ మెషీన్స్ అందించే పేలవమైన పనితీరుతో విసిగిపోయారా? మీ వర్చువల్‌బాక్స్ పనితీరును పెంచడానికి మీరు ఏమి చేయాలో ఇక్కడ ఉంది.
తదుపరి చదవండి సంబంధిత అంశాలు- ప్రోగ్రామింగ్
- HTML
- వెబ్ అభివృద్ధి
- జావాస్క్రిప్ట్
- వెబ్‌మాస్టర్ సాధనాలు
- ప్రోగ్రామింగ్
- HTML5
బెన్ డిప్యూటీ ఎడిటర్ మరియు మేక్‌యూస్ఆఫ్‌లో ఆన్‌బోర్డింగ్ మేనేజర్. అతను 2016 లో పూర్తి సమయం రాయడం కోసం తన IT ఉద్యోగాన్ని విడిచిపెట్టాడు మరియు వెనక్కి తిరిగి చూడలేదు. అతను టెక్ ట్యుటోరియల్స్, వీడియో గేమ్ సిఫార్సులు మరియు మరిన్నింటిని ఏడు సంవత్సరాలుగా ప్రొఫెషనల్ రైటర్‌గా కవర్ చేస్తున్నాడు.
బెన్ స్టెగ్నర్ నుండి మరిన్నిమా వార్తాలేఖకు సభ్యత్వాన్ని పొందండి
టెక్ చిట్కాలు, సమీక్షలు, ఉచిత ఈబుక్‌లు మరియు ప్రత్యేకమైన డీల్స్ కోసం మా వార్తాలేఖలో చేరండి!
సభ్యత్వం పొందడానికి ఇక్కడ క్లిక్ చేయండి