17 సాధారణ HTML కోడ్ ఉదాహరణలు మీరు 10 నిమిషాల్లో నేర్చుకోవచ్చు

17 సాధారణ HTML కోడ్ ఉదాహరణలు మీరు 10 నిమిషాల్లో నేర్చుకోవచ్చు

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





మేము చాలా ట్యాగ్‌ల కోసం అవుట్‌పుట్‌తో HTML కోడ్ ఉదాహరణలను అందించాము. మీరు వాటిని చర్యలో చూడాలనుకుంటే, వ్యాసం చివర నమూనా HTML ఫైల్‌ను డౌన్‌లోడ్ చేయండి. మీరు దానితో టెక్స్ట్ ఎడిటర్‌లో ప్లే చేయవచ్చు మరియు మీ మార్పులు ఏమి చేస్తాయో చూడటానికి బ్రౌజర్‌లో లోడ్ చేయవచ్చు.



1

మీరు సృష్టించే ప్రతి HTML డాక్యుమెంట్ ప్రారంభంలో మీకు ఈ ట్యాగ్ అవసరం. ఇది బ్రౌజర్ HTML చదువుతోందని మరియు HTML5, తాజా వెర్షన్‌ని ఆశిస్తుందని ఇది నిర్ధారిస్తుంది.





ఇది నిజానికి ఒక HTML ట్యాగ్ కానప్పటికీ, ఇది ఇంకా తెలుసుకోవడం మంచిది.

2

ఇది HTML చదువుతున్నట్లు బ్రౌజర్‌కి చెప్పే మరొక ట్యాగ్. DOCTYPE ట్యాగ్ తర్వాత ట్యాగ్ నేరుగా వెళుతుంది మరియు మీ ఫైల్ చివరన ఉన్న ట్యాగ్‌తో దాన్ని మూసివేయండి. మీ డాక్యుమెంట్‌లోని మిగతావన్నీ ఈ ట్యాగ్‌ల మధ్య వెళ్తాయి.



3.

ట్యాగ్ మీ ఫైల్ యొక్క హెడర్ విభాగాన్ని ప్రారంభిస్తుంది. ఇక్కడ వెళ్లే అంశాలు మీ వెబ్‌పేజీలో కనిపించవు. బదులుగా, ఇది సెర్చ్ ఇంజిన్‌ల మెటాడేటాను మరియు మీ బ్రౌజర్ కోసం సమాచారాన్ని కలిగి ఉంటుంది.

ప్రాథమిక పేజీల కోసం, ట్యాగ్‌లో మీ శీర్షిక ఉంటుంది, అంతే. కానీ మీరు చేర్చగల మరికొన్ని విషయాలు ఉన్నాయి, వీటిని మేము క్షణంలో పరిశీలిస్తాము.



నాలుగు

ఈ ట్యాగ్ మీ పేజీ యొక్క శీర్షికను సెట్ చేస్తుంది. మీరు చేయాల్సిందల్లా మీ శీర్షికను ట్యాగ్‌లో ఉంచి, దాన్ని మూసివేయడం, ఇలా (నేను సందర్భాన్ని చూపించడానికి హెడర్ ట్యాగ్‌లను కూడా చేర్చాను):


My Website

అది బ్రౌజర్‌లో తెరిచినప్పుడు ట్యాబ్ శీర్షికగా ప్రదర్శించబడే పేరు.



5

టైటిల్ ట్యాగ్ వలె, మెటాడేటా మీ పేజీ యొక్క హెడర్ ప్రాంతంలో ఉంచబడుతుంది. మెటాడేటా ప్రధానంగా సెర్చ్ ఇంజిన్‌ల ద్వారా ఉపయోగించబడుతుంది మరియు మీ పేజీలో ఉన్న వాటి గురించి సమాచారం. అనేక విభిన్న మెటా ఫీల్డ్‌లు ఉన్నాయి, కానీ ఇవి సాధారణంగా ఉపయోగించే కొన్ని:

  • వివరణ : మీ పేజీ యొక్క ప్రాథమిక వివరణ.
  • కీలకపదాలు : మీ పేజీకి వర్తించే కీలకపదాల ఎంపిక.
  • రచయిత : మీ పేజీ రచయిత.
  • వ్యూపోర్ట్ : అన్ని పరికరాల్లో మీ పేజీ బాగుంది అని నిర్ధారించడానికి ఒక ట్యాగ్.

ఈ పేజీకి వర్తించే ఒక ఉదాహరణ ఇక్కడ ఉంది:




మొబైల్ మరియు డెస్క్‌టాప్ పరికరాల్లో మీ పేజీ బాగా ప్రదర్శించబడుతుందని నిర్ధారించుకోవడానికి 'వ్యూపోర్ట్' ట్యాగ్ ఎల్లప్పుడూ 'వెడల్పు = పరికరం-వెడల్పు, ప్రారంభ-స్కేల్ = 1.0' కలిగి ఉండాలి.

6

మీరు హెడర్ విభాగాన్ని మూసివేసిన తర్వాత, మీరు బాడీకి చేరుకుంటారు. మీరు దీన్ని ట్యాగ్‌తో తెరిచి, దాన్ని ట్యాగ్‌తో మూసివేయండి. అది మీ ఫైల్ చివరలో, ట్యాగ్‌కు ముందుగానే వెళ్తుంది.

మీ వెబ్‌పేజీలోని మొత్తం కంటెంట్ ఈ ట్యాగ్‌ల మధ్య ఉంటుంది. ఇది వినబడినంత సులభం:


Everything you want displayed on your page.

7

కొంచెం తక్కువ పెద్ద శీర్షిక


సబ్-హెడర్

ఫలితం:

మీరు గమనిస్తే, అవి ప్రతి స్థాయిలో చిన్నవి అవుతాయి.

8

పేరాగ్రాఫ్ ట్యాగ్ కొత్త పేరాను ప్రారంభిస్తుంది. ఇది సాధారణంగా రెండు లైన్ బ్రేక్‌లను ఇన్సర్ట్ చేస్తుంది.

ఉదాహరణకు, మునుపటి లైన్ మరియు ఈ లైన్ మధ్య విరామంలో చూడండి. అది ఏ

ట్యాగ్ చేస్తుంది.

Your first paragraph.


Your second paragraph.

ఫలితం:

మీ మొదటి పేరా.

మీ రెండవ పేరా.

నువ్వు కూడా CSS శైలులను ఉపయోగించండి మీ పేరాగ్రాఫ్ ట్యాగ్‌లలో, వచన పరిమాణాన్ని మార్చేది:

This is 50% larger text.

ఫలితం:

9.

లైన్ బ్రేక్ ట్యాగ్ ఒకే లైన్ బ్రేక్‌ను చొప్పించింది:

The first line.

The second line (close to the first one).

ఫలితం:

ఇదే విధంగా పని చేయడం

ట్యాగ్. ఇది మీ పేజీలో క్షితిజ సమాంతర రేఖను గీస్తుంది మరియు టెక్స్ట్ విభాగాలను వేరు చేయడానికి మంచిది.

10.

ఈ ట్యాగ్ ముఖ్యమైన వచనాన్ని నిర్వచిస్తుంది. సాధారణంగా, ఇది బోల్డ్‌గా ఉంటుందని అర్థం. అయితే, తయారు చేయడానికి CSS ని ఉపయోగించడం సాధ్యమే టెక్స్ట్ డిస్‌ప్లే భిన్నంగా.

ఎయిర్‌పాడ్‌లను ఆండ్రాయిడ్‌కి జత చేయడం ఎలా

అయితే, మీరు సురక్షితంగా ఉపయోగించవచ్చు బోల్డ్ టెక్స్ట్.

Very important things you want to say.

ఫలితం:

మీరు చెప్పాలనుకుంటున్న చాలా ముఖ్యమైన విషయాలు.

మీకు తెలిసినట్లయితే బోల్డింగ్ టెక్స్ట్ కోసం ట్యాగ్ చేయండి, మీరు ఇప్పటికీ దాన్ని ఉపయోగించవచ్చు. భవిష్యత్ HTML వెర్షన్‌లలో ఇది పని చేస్తుందనే గ్యారెంటీ లేదు, కానీ ప్రస్తుతానికి ఇది పనిచేస్తుంది.

పదకొండు.

ఇష్టం మరియు , మరియు సంబంధించినవి. ది ట్యాగ్ నొక్కిచెప్పబడిన వచనాన్ని గుర్తిస్తుంది, అంటే సాధారణంగా అది ఇటాలిక్ చేయబడి ఉంటుంది. మళ్ళీ, CSS విభిన్నంగా నొక్కి వచన ప్రదర్శనను చేసే అవకాశం ఉంది.

An emphasized line.

ఫలితం:

నొక్కిచెప్పబడిన లైన్.

ది ట్యాగ్ ఇప్పటికీ పనిచేస్తుంది, కానీ మళ్లీ, ఇది HTML యొక్క భవిష్యత్తు వెర్షన్‌లలో తగ్గించబడే అవకాశం ఉంది.

12.

ది , లేదా యాంకర్, ట్యాగ్ లింక్‌లను సృష్టించడానికి మిమ్మల్ని అనుమతిస్తుంది. ఒక సాధారణ లింక్ ఇలా కనిపిస్తుంది:

MUO కి వెళ్లండి

లింక్ యొక్క గమ్యాన్ని 'href' లక్షణం గుర్తిస్తుంది. చాలా సందర్భాలలో, ఇది మరొక వెబ్‌సైట్ అవుతుంది. ఇది ఇమేజ్ లేదా పిడిఎఫ్ వంటి ఫైల్ కూడా కావచ్చు.

ఇతర ఉపయోగకరమైన లక్షణాలలో 'లక్ష్యం' మరియు 'శీర్షిక' ఉన్నాయి. లక్ష్య లక్షణం దాదాపుగా కొత్త ట్యాబ్ లేదా విండోలో లింక్‌ను తెరవడానికి ప్రత్యేకంగా ఉపయోగించబడుతుంది, ఇలా:

Go to MUO in a new tab

ఫలితం:

కొత్త ట్యాబ్‌లో MUO కి వెళ్లండి

'శీర్షిక' లక్షణం ఒక టూల్‌టిప్‌ను సృష్టిస్తుంది. ఇది ఎలా పని చేస్తుందో చూడటానికి క్రింది లింక్‌పై హోవర్ చేయండి:

Hover over this to see the tool tip

ఫలితం:

టూల్ చిట్కాను చూడటానికి దీని మీద హోవర్ చేయండి

13

మీరు మీ పేజీలో ఒక చిత్రాన్ని పొందుపరచాలనుకుంటే, మీరు ఇమేజ్ ట్యాగ్‌ని ఉపయోగించాలి. మీరు సాధారణంగా దీనిని 'src' లక్షణంతో కలిపి ఉపయోగిస్తారు. ఇది చిత్ర మూలాన్ని నిర్దేశిస్తుంది, ఇలా:

ఫలితం:

Android నుండి PC wifi కి ఫైల్‌లను బదిలీ చేయండి

'ఎత్తు,' 'వెడల్పు' మరియు 'ఆల్ట్' వంటి ఇతర లక్షణాలు అందుబాటులో ఉన్నాయి. ఇది ఎలా ఉంటుందో ఇక్కడ ఉంది:

the name of your image

మీరు ఊహించినట్లుగా, 'ఎత్తు' మరియు 'వెడల్పు' లక్షణాలు చిత్రం యొక్క ఎత్తు మరియు వెడల్పును సెట్ చేస్తాయి. సాధారణంగా, వాటిలో ఒకదాన్ని మాత్రమే సెట్ చేయడం మంచిది, కనుక ఇమేజ్ స్కేల్స్ సరిగ్గా ఉంటాయి. మీరు రెండింటినీ ఉపయోగిస్తే, మీరు సాగదీసిన లేదా చిరిగిన చిత్రంతో ముగుస్తుంది.

'ఆల్ట్' ట్యాగ్ బ్రౌజర్‌లో ఇమేజ్‌ను ప్రదర్శించలేకపోతే ఏ టెక్స్ట్‌ని ప్రదర్శించాలో తెలియజేస్తుంది మరియు ఏదైనా ఇమేజ్‌తో చేర్చడం మంచిది. ఎవరైనా ప్రత్యేకంగా నెమ్మదిగా కనెక్షన్ లేదా పాత బ్రౌజర్‌ని కలిగి ఉంటే, మీ పేజీలో ఏమి ఉండాలనే దాని గురించి వారు ఇప్పటికీ ఒక ఆలోచనను పొందవచ్చు.

14

    ఆర్డర్ చేసిన జాబితా ట్యాగ్ మీరు ఆర్డర్ చేసిన జాబితాను రూపొందించడానికి అనుమతిస్తుంది. సాధారణంగా, మీరు సంఖ్యా జాబితాను పొందుతారు. జాబితాలోని ప్రతి అంశానికి జాబితా అంశం ట్యాగ్ అవసరం (

  1. ), కాబట్టి మీ జాబితా ఇలా కనిపిస్తుంది:


    1. First thing

    2. Second thing

    3. Third thing

    ఫలితం:

    1. మొదటి అంశం
    2. రెండవ విషయం
    3. మూడవ విషయం

    HTML5 లో, మీరు ఉపయోగించవచ్చు

      సంఖ్యల క్రమాన్ని రివర్స్ చేయడానికి. మరియు మీరు ప్రారంభ లక్షణంతో ప్రారంభ విలువను సెట్ చేయవచ్చు.

      జాబితా అంశాల కోసం ఏ రకమైన చిహ్నాన్ని ఉపయోగించాలో బ్రౌజర్‌కు తెలియజేయడానికి 'రకం' లక్షణం మిమ్మల్ని అనుమతిస్తుంది. దీనిని '1,' 'A,' 'a,' 'I,' లేదా 'i' కి సెట్ చేయవచ్చు, సూచించబడిన గుర్తుతో ప్రదర్శించడానికి జాబితాను ఇలా సెట్ చేయండి:

        పదిహేను.

          క్రమం చేయని జాబితా దాని ఆదేశించిన ప్రతిరూపం కంటే చాలా సులభం. ఇది కేవలం బుల్లెట్ జాబితా.


          • First item

          • Second item

          • Third item

          ఫలితం:

          • మొదటి అంశం
          • రెండవ అంశం
          • మూడవ అంశం

          క్రమం చేయని జాబితాలలో 'టైప్' గుణాలు కూడా ఉన్నాయి మరియు మీరు దానిని 'డిస్క్,' 'సర్కిల్' లేదా 'స్క్వేర్' కు సెట్ చేయవచ్చు.

          16.

          ఆకృతీకరణ కోసం పట్టికలను ఉపయోగించినప్పుడు, మీ పేజీలోని సమాచారాన్ని విభజించడానికి మీరు వరుసలు మరియు నిలువు వరుసలను ఉపయోగించాలనుకునే సందర్భాలు చాలా ఉన్నాయి. టేబుల్ పని చేయడానికి అనేక ట్యాగ్‌లు అవసరం. నమూనా HTML కోడ్ ఇక్కడ ఉంది:














          1st column 2nd column
          Row 1, column 1 Row 1, column 2
          Row 2, column 1 Row 2, column 2

          ది

          మరియు
          ట్యాగ్‌లు పట్టిక ప్రారంభం మరియు ముగింపును పేర్కొంటాయి. దిట్యాగ్ మొత్తం పట్టిక కంటెంట్‌ను కలిగి ఉంది.

          పట్టికలోని ప్రతి అడ్డు వరుస a లో చేర్చబడిందిట్యాగ్. ప్రతి అడ్డు వరుసలోని ప్రతి కణం గాని చుట్టి ఉంటుందికాలమ్ శీర్షికల కోసం ట్యాగ్‌లు, లేదాకాలమ్ డేటా కోసం ట్యాగ్‌లు. ప్రతి వరుసలోని ప్రతి నిలువు వరుసకు మీకు వీటిలో ఒకటి అవసరం.

          ఫలితం:

          1 వ నిలువు వరుస2 వ నిలువు వరుస
          వరుస 1, కాలమ్ 1వరుస 1, కాలమ్ 2
          వరుస 2, కాలమ్ 1వరుస 2, కాలమ్ 2

          17.

          మీరు మరొక వెబ్‌సైట్ లేదా వ్యక్తిని ఉటంకించినప్పుడు మరియు మీ మిగిలిన డాక్యుమెంట్‌తో కాకుండా కోట్‌ను సెట్ చేయాలనుకున్నప్పుడు, బ్లాక్‌కోట్ ట్యాగ్‌ని ఉపయోగించండి. మీరు చేయాల్సిందల్లా బ్లాక్‌కోట్ ట్యాగ్‌లను తెరవడం మరియు మూసివేయడంలో కోట్‌ను జతపరచడం:

          The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.

          ఫలితం:

          నేను ఊహించినట్లుగా వెబ్, మేము ఇంకా చూడలేదు. గతం కంటే భవిష్యత్తు ఇంకా చాలా పెద్దది.

          ఉపయోగించిన ఖచ్చితమైన ఆకృతీకరణ మీరు ఉపయోగిస్తున్న బ్రౌజర్ లేదా మీ సైట్ యొక్క CSS పై ఆధారపడి ఉండవచ్చు. కానీ ట్యాగ్ అలాగే ఉంది.

          HTML కోడ్ నమూనాలు

          ఈ 17 HTML ఉదాహరణలతో, మీరు ఒక సాధారణ వెబ్‌సైట్‌ను సృష్టించగలగాలి. అవి ఎలా పనిచేస్తాయో తెలుసుకోవడానికి మీరు ఇప్పుడు ఆన్‌లైన్ టెక్స్ట్ ఎడిటర్‌లో వాటిని పరీక్షించవచ్చు.

          HTML లో మరిన్ని కాటు-పరిమాణ పాఠాల కోసం, కోడింగ్ కోసం కొన్ని మైక్రోలార్నింగ్ యాప్‌లను ప్రయత్నించండి. అవి మిమ్మల్ని త్వరగా వేగవంతం చేయడానికి సహాయపడతాయి.

          షేర్ చేయండి షేర్ చేయండి ట్వీట్ ఇమెయిల్ ప్రాథమిక కోడింగ్ నేర్చుకోవాలనుకుంటున్నారా? మీ ఖాళీ సమయంలో 5 కాటు సైజు కోడింగ్ యాప్‌లను ప్రయత్నించండి

          ప్రాథమిక కోడింగ్ నేర్చుకోవాలనుకుంటున్నారా కానీ తక్కువ సమయం ఉందా? ఈ కాటు-పరిమాణ కోడింగ్ యాప్‌లు మీ బిజీగా ఉన్న రోజులో కొన్ని నిమిషాలు మాత్రమే పడుతుంది.

          తదుపరి చదవండి           సంబంధిత అంశాలు
          • ప్రోగ్రామింగ్
          • WordPress
          • HTML
          • వెబ్ అభివృద్ధి
          • కోడింగ్ ట్యుటోరియల్స్
          రచయిత గురుంచి ఆండీ బెట్స్(221 కథనాలు ప్రచురించబడ్డాయి)

          ఆండీ మాజీ ప్రింట్ జర్నలిస్ట్ మరియు మ్యాగజైన్ ఎడిటర్, అతను 15 సంవత్సరాలుగా టెక్నాలజీ గురించి రాస్తున్నాడు. ఆ సమయంలో అతను లెక్కలేనన్ని ప్రచురణలకు సహకరించాడు మరియు పెద్ద టెక్ కంపెనీల కోసం కాపీ రైటింగ్ పనిని రూపొందించాడు. అతను మీడియా కోసం నిపుణుల వ్యాఖ్యను అందించాడు మరియు పరిశ్రమ కార్యక్రమాలలో ప్యానెల్‌లను హోస్ట్ చేశాడు.

          ఆండీ బెట్స్ నుండి మరిన్ని

          మా వార్తాలేఖకు సభ్యత్వాన్ని పొందండి

          టెక్ చిట్కాలు, సమీక్షలు, ఉచిత ఈబుక్‌లు మరియు ప్రత్యేకమైన డీల్స్ కోసం మా వార్తాలేఖలో చేరండి!

          సభ్యత్వం పొందడానికి ఇక్కడ క్లిక్ చేయండి