HTML కి క్షితిజ సమాంతర రేఖను ఎలా జోడించాలి

రచయిత: Virginia Floyd
సృష్టి తేదీ: 14 ఆగస్టు 2021
నవీకరణ తేదీ: 1 జూలై 2024
Anonim
Ruby On Rails, by Gabriel Guimaraes
వీడియో: Ruby On Rails, by Gabriel Guimaraes

విషయము

HTML లో క్షితిజ సమాంతర రేఖను ఎలా జోడించాలో ఈ వ్యాసం మీకు చూపుతుంది. సైట్‌లోని కంటెంట్‌ను వేరు చేయడానికి క్షితిజ సమాంతర రేఖను ఉపయోగించవచ్చు. లైన్ సృష్టించడానికి కోడ్ చాలా సులభం. అయితే, HTML 4.01 లో, అంతర్గత ఆదేశాలను ఉపయోగించి ఒక లైన్ రూపకల్పనను మార్చడం సాధ్యమవుతుంది. HTML5 లో, లైన్ స్టైల్ చేయడానికి మీరు CSS ని ఉపయోగించాల్సి ఉంటుంది.

దశలు

2 వ పద్ధతి 1: HTML 4.01 లో పని చేస్తోంది

  1. 1 ఇప్పటికే ఉన్నదాన్ని తెరవండి లేదా కొత్త HTML పత్రాన్ని సృష్టించండి. HTML పత్రాలను నోట్‌ప్యాడ్ వంటి టెక్స్ట్ ఎడిటర్ లేదా అడోబ్ డ్రీమ్‌వీవర్ వంటి ప్రత్యేక కోడ్ ఎడిటర్‌తో సవరించవచ్చు. మీకు నచ్చిన ప్రోగ్రామ్‌లో ఒక HTML పత్రాన్ని తెరవడానికి ఈ దశలను అనుసరించండి:
    • నోట్‌ప్యాడ్ లేదా మరొక టెక్స్ట్ / కోడ్ ఎడిటర్‌ని తెరవండి.
    • మెనుని తెరవండి ఫైల్.
    • నొక్కండి తెరవండి.
    • HTML ఫైల్‌ని ఎంచుకోండి.
    • నొక్కండి తెరవండి
  2. 2 మీరు లైన్‌ని ఇన్సర్ట్ చేయాలనుకుంటున్న స్థానాన్ని ఎంచుకోండి. పంక్తి కనిపించే పైన ఉన్న పంక్తిని కనుగొనే వరకు క్రిందికి స్క్రోల్ చేయండి, ఆపై ఆ లైన్ యొక్క ఎడమ వైపున క్లిక్ చేయడం ద్వారా కర్సర్‌ని నేరుగా ఆ లైన్ ప్రారంభానికి తరలించండి.
  3. 3 ఖాళీ లైన్ జోడించండి. డబుల్ ట్యాప్ నమోదు చేయండిమీరు పంక్తిని ఇన్సర్ట్ చేయాలనుకుంటున్న టెక్స్ట్‌ని క్రిందికి తరలించడానికి, ఆపై కర్సర్‌ను ఖాళీ లైన్‌లో ఉంచండి.
  4. 4 Hr> ట్యాగ్ జోడించండి. నమోదు చేయండి గం> లైన్ ప్రారంభంలో ఖాళీ స్థలానికి. ట్యాగ్ చేయండి గం> మొత్తం పేజీలో క్షితిజ సమాంతర రేఖను గీయడానికి మిమ్మల్ని అనుమతిస్తుంది.
  5. 5 "Hr" ట్యాగ్ తర్వాత కర్సర్‌ని నొక్కడం ద్వారా కొత్త లైన్‌కు తరలించండి నమోదు చేయండి. ఇప్పుడు ట్యాగ్ గం> ప్రత్యేక లైన్‌లో ఉండాలి.
  6. 6 క్షితిజ సమాంతర రేఖకు లక్షణాలను జోడించండి (ఐచ్ఛికం). పొడవు, మందం, రంగు మరియు అమరిక వంటి లక్షణాలను జోడించండి. "Hr" తర్వాత వెంటనే వాటిని గిరజాల కలుపులతో మూసివేయండి. బహుళ లక్షణాలను జోడించడానికి, వాటిని ఖాళీతో వేరు చేయండి.
    • నమోదు చేయండి గం పరిమాణం = "#">లైన్ మందం మార్చడానికి. "#" ను సంఖ్యా మందం విలువతో భర్తీ చేయండి (ఉదాహరణకు, పరిమాణం = "10").
    • నమోదు చేయండి గం వెడల్పు = "#">లైన్ వెడల్పు మార్చడానికి. "#" ని పిక్సెల్‌ల సంఖ్యతో లేదా పేజీ వెడల్పు శాతంతో భర్తీ చేయండి (ఉదాహరణకు, వెడల్పు = "200" లేదా వెడల్పు = "75%").
    • నమోదు చేయండి hr రంగు = "#">లైన్ రంగు మార్చడానికి. "#" ని రంగు లేదా దాని హెక్సాడెసిమల్ కోడ్‌తో భర్తీ చేయండి (ఉదాహరణకు, రంగు = "ఎరుపు" లేదా రంగు = "# FF0000").
    • నమోదు చేయండి hr align = "#">లైన్ సమలేఖనం చేయడానికి. "#" ని "కుడి" (కుడి), "ఎడమ" (ఎడమ) లేదా "కేంద్రం" (మధ్య) తో భర్తీ చేయండి (ఉదాహరణకు, hr వెడల్పు = "50%" align = "centre">).
  7. 7 HTML ఫైల్‌ను సేవ్ చేయండి. ఒక టెక్స్ట్ ఫైల్‌ను HTML డాక్యుమెంట్‌గా సేవ్ చేయడానికి, మీరు ఫైల్ ఎక్స్‌టెన్షన్ (.txt, .docx) ని ".html" కి మార్చాలి. మీ HTML పత్రాన్ని సేవ్ చేయడానికి ఈ దశలను అనుసరించండి:
    • మెనుని తెరవండి ఫైల్.
    • నొక్కండి ఇలా సేవ్ చేయండి.
    • ఫైల్ పేరు ఫీల్డ్‌లో ఫైల్ కోసం ఒక పేరును నమోదు చేయండి.
    • జోడించు .html ఫైల్ పేరు తర్వాత.
    • నొక్కండి సేవ్ చేయండి.
  8. 8 మీ HTML పత్రాన్ని తనిఖీ చేయండి. HTML ఫైల్‌ని తనిఖీ చేయడానికి, దానిపై కుడి క్లిక్ చేసి, ఓపెన్ విత్ ఎంచుకోండి. అప్పుడు మీ వెబ్ బ్రౌజర్‌ని ఎంచుకోండి. మీరు "hr" ట్యాగ్ చొప్పించిన చోట ఒక ఘన గీత కనిపించాలి. HTML కోడ్ ఇలా కనిపిస్తుంది:

      ! DOCTYPE html> html> body> h1> Heading / h1> hr size = "6" width = "50%" align = "left" color = "green"> p1> ఈ లైన్ హెడింగ్ నుండి ఒక లైన్ ద్వారా వేరు చేయాలి . / P1> / బాడీ> / html>

2 వ పద్ధతి 2: CSS / HTML5 లో పని చేస్తోంది

  1. 1 ఇప్పటికే ఉన్నదాన్ని తెరవండి లేదా కొత్త HTML పత్రాన్ని సృష్టించండి. HTML పత్రాలను నోట్‌ప్యాడ్ వంటి టెక్స్ట్ ఎడిటర్ లేదా అడోబ్ డ్రీమ్‌వీవర్ వంటి ప్రత్యేక కోడ్ ఎడిటర్‌తో సవరించవచ్చు. మీకు నచ్చిన ప్రోగ్రామ్‌లో ఒక HTML పత్రాన్ని తెరవడానికి ఈ దశలను అనుసరించండి:
    • నోట్‌ప్యాడ్ లేదా మరొక టెక్స్ట్ / కోడ్ ఎడిటర్‌ని తెరవండి.
    • మెనుని తెరవండి ఫైల్.
    • నొక్కండి తెరవండి.
    • HTML ఫైల్‌ని ఎంచుకోండి.
    • నొక్కండి తెరవండి
  2. 2 మీ HTML పత్రానికి శీర్షికను జోడించండి. మీ HTML డాక్యుమెంట్‌కు ఇప్పటికే హెడ్డింగ్ లేకపోతే, ఒకదాన్ని జోడించడానికి ఈ దశలను అనుసరించండి. శీర్షిక తప్పనిసరిగా html> ట్యాగ్ మరియు శరీరం> ట్యాగ్ ముందు ఉండాలి.
    • నమోదు చేయండి తల> పత్రం ఎగువన.
    • డబుల్ ట్యాప్ నమోదు చేయండిరెండు కొత్త పంక్తులను జోడించడానికి.
    • నమోదు చేయండి / తల>శీర్షికను మూసివేయడానికి.
  3. 3 నమోదు చేయండి శైలి రకం = "టెక్స్ట్ / css"> హెడర్ లోపల. HTML డిజైన్‌ను సవరించడానికి మీరు CSS ను ఉపయోగించే స్థలాన్ని సృష్టించడానికి రెండు హెడ్డింగ్ ట్యాగ్‌ల మధ్య స్టైల్ ట్యాగ్ ఉంచబడుతుంది.
    • ప్రత్యామ్నాయంగా, మీరు బాహ్య శైలి షీట్‌ను ఉపయోగించవచ్చు. వ్యాసం చదవండి "HTML లోకి CSS ఫైల్‌ని ఎలా ఇన్సర్ట్ చేయాలి»బాహ్య CSS ఫైల్‌ను HTML ఫైల్‌కి ఎలా లింక్ చేయాలో తెలుసుకోవడానికి.
  4. 4 నమోదు చేయండి గం {. క్షితిజ సమాంతర రేఖను స్టైలింగ్ చేయడానికి ఇది CSS ట్యాగ్. మీ శీర్షిక లేదా బాహ్య CSS ఫైల్‌లోని "స్టైల్" ట్యాగ్ తర్వాత దాన్ని జోడించండి.
  5. 5 Hr> ట్యాగ్ కోసం CSS శైలులను జోడించండి. వారు తప్పనిసరిగా "hr {" ట్యాగ్ తర్వాత రావాలి. క్షితిజ సమాంతర రేఖను వివిధ మార్గాల్లో రూపొందించవచ్చు. వాటిలో కొన్ని క్రింద ఉన్నాయి.
    • నమోదు చేయండి వెడల్పు: ## px;లైన్ వెడల్పు సర్దుబాటు చేయడానికి. "##" ని పిక్సెల్‌లలో లైన్ వెడల్పుతో భర్తీ చేయండి. పిక్సెల్‌లకు (px) బదులుగా, మీరు శాతాన్ని (%) ఉపయోగించవచ్చు.
    • నమోదు చేయండి ఎత్తు: ## px;లైన్ బరువు సర్దుబాటు చేయడానికి. "##" ని పిక్సెల్‌లలో లైన్ వెడల్పుతో భర్తీ చేయండి.
    • నమోదు చేయండి నేపథ్య రంగు: ##;లైన్ రంగును పేర్కొనడానికి. హెక్సాడెసిమల్ కలర్ కోడ్‌తో "##" ను రంగు పేరు లేదా హాష్ (#) తో భర్తీ చేయండి.
    • నమోదు చేయండి మార్జిన్-రైట్: ## px;కుడి అంచు నుండి పిక్సెల్‌ల సంఖ్యను పేర్కొనడానికి. "##" ని సంఖ్యా సంఖ్య పిక్సెల్స్ లేదా కోడ్ "ఆటో" తో భర్తీ చేయండి. ఎడమవైపు లేదా మధ్యలో లైన్ సమలేఖనం చేయడానికి "ఆటో" ఎంటర్ చేయండి.
    • నమోదు చేయండి మార్జిన్-లెఫ్ట్: ## px;ఎడమ అంచు నుండి పిక్సెల్‌ల సంఖ్యను పేర్కొనడానికి. "##" ని సంఖ్యా సంఖ్య పిక్సెల్స్ లేదా కోడ్ "ఆటో" తో భర్తీ చేయండి. లైన్‌ను కుడివైపు లేదా మధ్యలో అమర్చడానికి "ఆటో" ని నమోదు చేయండి.
    • నమోదు చేయండి మార్జిన్-టాప్: ## px; లైన్ కోసం టాప్ పాడింగ్ పేర్కొనడానికి. "##" ని పిక్సెల్‌లలో ప్యాడింగ్‌కు సంబంధించిన సంఖ్యతో భర్తీ చేయండి.
    • నమోదు చేయండి మార్జిన్-బాటమ్: ## px;లైన్ కోసం దిగువ పాడింగ్‌ను పేర్కొనడానికి. "##" ని పిక్సెల్‌లలో ప్యాడింగ్‌కు సంబంధించిన సంఖ్యతో భర్తీ చేయండి.
    • నమోదు చేయండి సరిహద్దు వెడల్పు: ## px;రేఖ చుట్టూ ఒక పెట్టెను గీయడానికి (ఐచ్ఛికం). "##" ని సరిహద్దు వెడల్పుకు సంబంధించిన సంఖ్యతో పిక్సెల్‌లలో భర్తీ చేయండి.
    • నమోదు చేయండి సరిహద్దు రంగు: ##;సరిహద్దు రంగును పేర్కొనడానికి (ఐచ్ఛికం). హెక్సాడెసిమల్ కలర్ కోడ్‌తో "##" ను రంగు పేరు లేదా హాష్ (#) తో భర్తీ చేయండి.
  6. 6 నమోదు చేయండి } hr> ట్యాగ్ కోసం స్టైలింగ్ పూర్తి చేయడానికి స్టైల్ లక్షణాల తర్వాత.
  7. 7 నమోదు చేయండి గం> సమాంతర రేఖను జోడించడానికి HTML పత్రం యొక్క శరీరంలో ఎక్కడైనా. మీరు మీ HTML డాక్యుమెంట్‌లోని hr> ట్యాగ్‌ను ఉపయోగించే ప్రతిసారి CSS స్టైల్ సెట్టింగ్‌లు వర్తింపజేయబడతాయి. మీ కోడ్ ఇలా ఉండాలి:

      ! DOCTYPE html> html> head> style type = "text / css"> గం {వెడల్పు: 50%; ఎత్తు: 20px; నేపథ్య-రంగు: ఎరుపు; మార్జిన్-రైట్: ఆటో; మార్జిన్-లెఫ్ట్: ఆటో; మార్జిన్-టాప్: 5px; మార్జిన్-బాటమ్: 5px; సరిహద్దు వెడల్పు: 2px; సరిహద్దు రంగు: ఆకుపచ్చ; } / style> / head> body> h1> Heading / h1> hr> p1> ఈ లైన్ హెడ్డింగ్ నుండి క్షితిజ సమాంతర రేఖ / p1> / body> / html> ద్వారా వేరు చేయాలి