• HTML అంటే ఏమిటి? HyperText Markup Language పదాల అర్థం మరియు వెబ్ బ్రౌజర్లు దీనిని ఎలా అర్థం చేసుకుంటాయి.
• చారిత్రక నేపథ్యం: 1989 లో CERN లాబొరేటరీలో సర్ టిమ్ బెర్నర్స్-లీ (Tim Berners-Lee) World Wide Web మరియు మొదటి వెబ్‌పేజీని ఎలా సృష్టించారు.
• వెబ్ త్రయం (The Web Trio): HTML, CSS, JavaScript ల మధ్య ఉన్న బలమైన సంబంధం (ఇల్లు మరియు మానవ శరీర ఉదాహరణలు).
• Web Standards కథ: బ్రౌజర్ వార్స్ (Browser Wars), W3C మరియు WHATWG లు HTML5 లివింగ్ స్టాండర్డ్‌ను ఎలా స్థాపించాయి.
• డెవలప్‌మెంట్ ఎన్విరాన్‌మెంట్ సెటప్: VS Code ఎడిటర్, అత్యవసర Extensions (Live Server) మరియు బ్రౌజర్ డెవలపర్ టూల్స్.
• మీ మొట్టమొదటి HTML5 పేజీ: కోడ్ రాయడం, లైన్ బై లైన్ సమగ్ర విశ్లేషణ మరియు ఆన్‌లైన్ ఎడిటర్‌లో లైవ్ రన్ చేయడం.
• బిగినర్స్ చేసే సాధారణ పొరపాట్లు & ప్రాక్టీస్ క్విజ్: ఇంటర్వ్యూలు మరియు పరీక్షలలో అడిగే కీలక ప్రశ్నలకు సమాధానాలు.

HTML యొక్క పూర్తి పేరు HyperText Markup Language. ఇది ఒక ప్రోగ్రామింగ్ లాంగ్వేజ్ కాదు, ఇదొక మార్కప్ లాంగ్వేజ్ (Markup Language). ఈ రెండు పదాల అసలు అంతరార్థాన్ని వివరంగా తెలుసుకుందాం:

బ్రౌజర్ పాత్ర ఏమిటి? (How Browsers Render HTML):

మనం రాసే HTML ఫైల్ కేవలం సాదా అక్షరాల టెక్స్ట్ ఫైల్ (Plain text file with .html extension). గూగుల్ క్రోమ్ (Chrome), మైక్రోసాఫ్ట్ ఎడ్జ్ (Edge) లేదా మొజిల్లా ఫైర్‌ఫాక్స్ (Firefox) లాంటి వెబ్ బ్రౌజర్లు ఈ ఫైల్‌ను చదివి, ట్యాగ్‌లను విశ్లేషించి (Parsing), DOM (Document Object Model) ట్రీగా మార్చి మన కంటికి అందమైన గ్రాఫికల్ వెబ్‌పేజీగా చూపిస్తాయి. బ్రౌజర్‌లో ట్యాగ్‌లు కంటికి కనిపించవు, వాటిలోని ఫలితం మాత్రమే కనిపిస్తుంది!

ఇంటర్నెట్ చరిత్రలోనే అత్యంత విప్లవాత్మకమైన కథ ఇది. 1989 లో స్విట్జర్లాండ్‌లోని జెనీవాలో ఉన్న CERN (యూరోపియన్ న్యూక్లియర్ రీసెర్చ్ ఆర్గనైజేషన్) లో పనిచేస్తున్న బ్రిటిష్ శాస్త్రవేత్త సర్ టిమ్ బెర్నర్స్-లీ (Sir Tim Berners-Lee) ఒక సమస్యను ఎదుర్కొన్నారు.

ప్రపంచవ్యాప్తంగా ఉన్న సైంటిస్టులు వేర్వేరు కంప్యూటర్లలో వేర్వేరు ఆపరేటింగ్ సిస్టమ్స్ (UNIX, Mac, Windows) వాడుతున్నారు. ఒక శాస్త్రవేత్త రాసిన పరిశోధనా పత్రం (Research Paper) మరొకరు చదవాలంటే ఫార్మాట్ మారేది, లింకులు ఉండేవి కావు. ఈ సమస్యను శాశ్వతంగా పరిష్కరించడానికి ఆయన 3 అద్భుతమైన ఆవిష్కరణలు చేశారు:

1. HTML: డాక్యుమెంట్లను రాయడానికి ఒక ఉమ్మడి మార్కప్ భాష.
2. HTTP (HyperText Transfer Protocol): ఇంటర్నెట్ ద్వారా డాక్యుమెంట్లను ఒక కంప్యూటర్ నుండి ఇంకో కంప్యూటర్‌కి పంపే ప్రొటోకాల్.
3. World Wide Web (WWW): లింకుల ద్వారా ప్రపంచం మొత్తాన్ని అనుసంధానించే సమాచార వ్యవస్థ.

1991 ఆగస్టు 6న ప్రపంచంలోనే మొట్టమొదటి వెబ్‌సైట్ http://info.cern.ch లైవ్ అయింది. అప్పట్లో రంగులు లేవు, వీడియోలు లేవు, కేవలం టెక్స్ట్ మరియు నీలిరంగు లింకులు మాత్రమే ఉండేవి. నేడు మనం చూస్తున్న ఆధునిక AI వెబ్ అప్లికేషన్లు, ఇ-కామర్స్ పోర్టల్స్ అన్నీ ఆ చిన్న ప్రయోగంపైనే నిర్మించబడ్డాయి!

వెబ్ డెవలప్‌మెంట్‌లో ప్రతి వెబ్‌సైట్ మూడు ప్రధాన పిల్లర్లపై నిలబడుతుంది. వీటిని రియల్ వరల్డ్ ఉదాహరణలతో పోల్చి చూస్తే ఎప్పటికీ మర్చిపోలేరు:

కేవలం HTML రాస్తే పేజీకి పక్కా నిర్మాణం వస్తుంది. దానికి CSS జోడిస్తే కంటికి ఇంపుగా మారుతుంది. JavaScript జోడిస్తే పేజీ సజీవంగా యూజర్ చర్యలకు స్పందిస్తుంది. ఈ మూడింటి కలయికే పూర్తి ఫ్రంట్-ఎండ్ డెవలప్‌మెంట్!

1990ల మధ్యలో జరిగిన మొదటి బ్రౌజర్ వార్స్ (Browser Wars) గురించి మీరు వినే ఉంటారు. Netscape Navigator మరియు Microsoft Internet Explorer సంస్థలు పోటీ పడి ఒకరిని మించి మరొకరు తమ సొంత ట్యాగ్స్ (ఉదాహరణకు <blink>, <marquee>) బ్రౌజర్లలో ప్రవేశపెట్టాయి. ఫలితంగా ఒక వెబ్‌సైట్ Netscape లో పని చేస్తే Internet Explorer లో క్రాష్ అయ్యేది! డెవలపర్లు నరకం చూశారు.

ఈ గందరగోళాన్ని ఆపడానికి 1994 లో టిమ్ బెర్నర్స్-లీ W3C (World Wide Web Consortium) ను స్థాపించారు. అన్ని బ్రౌజర్లు ఒకే నిబంధనలను పాటించాలని రూల్స్ తయారు చేశారు.

ముఖ్య గమనిక (No more HTML6): ఇప్పుడు HTML అనేది వెర్షన్లతో ఆగిపోయేది కాదు. దీనిని WHATWG HTML Living Standard అంటారు. అంటే ప్రతి సంవత్సరం అవసరమైన కొత్త ఫీచర్లు నిరంతరం యాడ్ అవుతూనే ఉంటాయి!

HTML నేర్చుకోవడానికి మీకు ఎలాంటి ఖరీదైన సాఫ్ట్‌వేర్ అవసరం లేదు. మీ కంప్యూటర్‌లో ఉండే ఉచిత టూల్స్ సరిపోతాయి:

1. Code Editor (కోడ్ ఎడిటర్): ప్రపంచవ్యాప్తంగా నంబర్ 1 ఎడిటర్ Visual Studio Code (VS Code). ఇది మైక్రోసాఫ్ట్ అందించే ఉచిత ఓపెన్-సోర్స్ ఎడిటర్. (విండోస్ నోట్‌ప్యాడ్‌లో కూడా రాయవచ్చు, కానీ సింటాక్స్ హైలైటింగ్ మరియు ఆటోకంప్లీట్ ఉండవు).
2. Web Browser (వెబ్ బ్రౌజర్): Google Chrome, Mozilla Firefox లేదా Brave. ఇందులో F12 నొక్కడం ద్వారా Developer Tools (DevTools) ని ఉపయోగించి లైవ్ DOM ని చూడవచ్చు.
3. Live Server Extension (మ్యాజికల్ టూల్): VS Code లో Extensions మార్కెట్‌ప్లేస్‌కి వెళ్లి "Live Server" (by Ritwick Dey) ఇన్‌స్టాల్ చేసుకోండి. మీరు కోడ్ రాసి సేవ్ చేయగానే పేజీ ఆటోమేటిక్‌గా బ్రౌజర్‌లో రిఫ్రెష్ అవుతుంది!

ఇప్పుడు మనం మన చేతులతో మొదటి వెబ్ పేజీని నిర్మిద్దాం. ఒక కంప్యూటర్‌లో ఫోల్డర్ క్రియేట్ చేసి index.html అనే ఫైల్ తయారు చేయండి. అందులో క్రింది ప్రామాణికమైన HTML5 కోడ్‌ను రాయండి:

<!DOCTYPE html>
<html lang="te">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>నా మొదటి వెబ్‌పేజీ | My First Web Page</title>
  </head>
  <body>
    <h1>నమస్కారం, ప్రపంచమా! (Hello World)</h1>
    <p>ఇది నా జీవితంలో నేను స్వయంగా రాసిన మొట్టమొదటి HTML5 వెబ్ పేజీ.</p>
    <p>Our Compiler ద్వారా నేను సులభంగా HTML5 మాస్టర్‌క్లాస్ నేర్చుకుంటున్నాను.</p>
  </body>
</html>

బ్రౌజర్‌లో ఇది ఎలా కనిపిస్తుంది? (Visual Browser Output):

అభినందనలు! మీరు విజయవంతంగా మీ మొదటి HTML5 డాక్యుమెంట్‌ను రూపొందించారు!

పై కోడ్‌లోని ప్రతి అక్షరానికి వెనుక ఒక స్పష్టమైన సాంకేతిక కారణం ఉంది. బ్రౌజర్ ప్రతి లైన్‌ను ఎలా అర్థం చేసుకుంటుందో చూద్దాం:

• <!DOCTYPE html>: ఇది అసలు ఒక HTML ట్యాగ్ కాదు! ఇదొక డాక్యుమెంట్ టైప్ డిక్లరేషన్ (Document Type Declaration). బ్రౌజర్‌కు "ఈ ఫైల్ ఆధునిక HTML5 ప్రమాణాలతో రాయబడింది, కాబట్టి Standards Mode లో ఎలాంటి పాత బగ్స్ లేకుండా రెండర్ చెయ్యి" అని చెబుతుంది.
• <html lang="te">: ఇది మొత్తం వెబ్‌పేజీకి రూట్ ఎలిమెంట్ (Root Element). పేజీలోని సమస్త కంటెంట్ దీని లోపలే ఉండాలి. lang="te" అనేది తెలుగు భాషను సూచిస్తుంది. స్క్రీన్ రీడర్స్ దృష్టిలోపం ఉన్నవారికి సరైన తెలుగు ఉచ్చారణతో చదివి వినిపించడానికి, Google సెర్చ్ ఇంజన్లకు ఇది అత్యవసరం.
• <head>: ఇది వెబ్‌పేజీ యొక్క మెదడు (Metadata Container) లాంటిది. ఇందులో ఉండే సమాచారం నేరుగా వెబ్ పేజీ స్క్రీన్ మీద కనిపించదు. కానీ పేజీ టైటిల్, క్యారెక్టర్ ఎన్‌కోడింగ్, మొబైల్ వ్యూపోర్ట్, CSS లింకులు అన్నీ ఇందులోనే ఉంటాయి.
• <meta charset="UTF-8" />: ప్రపంచంలోనే అత్యంత ముఖ్యమైన లైన్ ఇది! UTF-8 అనేది యూనివర్సల్ క్యారెక్టర్ ఎన్‌కోడింగ్. ఇది లేకపోతే మీ పేజీలోని తెలుగు అక్షరాలు లేదా ఎమోజీలు విరిగిపోయి అర్థం పర్థం లేని గుర్తులుగా (Mojibake: నమసà±) కనిపిస్తాయి.
• <meta name="viewport" content="width=device-width, initial-scale=1.0" />: మీ వెబ్‌సైట్ స్మార్ట్‌ఫోన్లు, టాబ్లెట్‌లు మరియు ల్యాప్‌టాప్‌లలో ఆటోమేటిక్‌గా స్క్రీన్ వెడల్పుకు తగ్గట్టుగా అడ్జస్ట్ కావడానికి (Responsive Web Design) ఈ ట్యాగ్ తప్పనిసరి.
• <title>: బ్రౌజర్ పైభాగంలో ఉన్న ట్యాబ్ మీద మరియు బుక్‌మార్క్‌లలో కనిపించే పేరును ఇది నిర్ణయిస్తుంది. SEO (Search Engine Optimization) లో దీనిది అగ్రస్థానం.
• <body>: వెబ్‌పేజీ యొక్క శరీరం. వినియోగదారుడి కంటికి స్క్రీన్ మీద కనిపించే హెడ్డింగ్స్, బొమ్మలు, వీడియోలు, పేరాగ్రాఫ్‌లు, బటన్లు అన్నీ కేవలం <body> లోపల మాత్రమే ఉండాలి.
• <h1>: Heading Level 1. పేజీలోని అన్నింటికంటే ముఖ్యమైన ప్రధాన శీర్షిక. ఒక పేజీకి ఒక్క h1 మాత్రమే ఉండడం ఉత్తమమైన పద్ధతి.
• <p>: Paragraph ట్యాగ్. సాధారణ టెక్స్ట్ పేరాగ్రాఫ్‌లను రాయడానికి దీనిని ఉపయోగిస్తారు.

బిగినర్స్ తరచుగా "ట్యాగ్", "ఎలిమెంట్", "ఆట్రిబ్యూట్" అనే పదాలను గందరగోళం చేసుకుంటారు. ఈ క్రింది చిత్రాన్ని స్పష్టంగా గమనించండి:

HTML నేర్చుకునే ప్రారంభంలో విద్యార్థులు తరచుగా చేసే 4 ప్రధాన పొరపాట్లు మరియు వాటిని సరిదిద్దే మార్గాలు:

❌ తప్పు 1: క్లోజింగ్ ట్యాగ్ మర్చిపోవడం (Unclosed Tags)

<!-- తప్పు: /p రాయడం మర్చిపోయారు -->
<p>మొదటి పేరాగ్రాఫ్
<p>రెండవ పేరాగ్రాఫ్

సరైన పద్ధతి: ప్రతి ఓపెనింగ్ ట్యాగ్‌కు సరిపోయే క్లోజింగ్ ట్యాగ్ తప్పక ఉండాలి: <p>మొదటి పేరాగ్రాఫ్</p>.

❌ తప్పు 2: నెస్టెడ్ ట్యాగ్స్ క్రమం తారుమారు చేయడం (Bad Nesting Order)

<!-- తప్పు: b లోపల i ఓపెన్ చేసి, ముందు b ని క్లోజ్ చేశారు -->
<p><b><i>ముఖ్యమైన సమాచారం</b></i></p>

సరైన పద్ధతి: LIFO (Last In First Out) సూత్రం పాటించాలి. చివరగా ఓపెన్ చేసిన ట్యాగ్‌ను ముందుగా క్లోజ్ చేయాలి: <p><b><i>ముఖ్యమైన సమాచారం</i></b></p>.

❌ తప్పు 3: DOCTYPE డిక్లరేషన్ రాయకపోవడం

మొదటి లైన్‌లో <!DOCTYPE html> రాయకపోతే బ్రౌజర్ "Quirks Mode" అనే పాతకాలపు బగ్గి మోడ్‌లోకి వెళ్ళిపోతుంది. దీనివల్ల ఆధునిక CSS Flexbox/Grid లేఅవుట్లు పూర్తిగా గందరగోళంగా మారిపోతాయి.

❌ తప్పు 4: కేస్ సెన్సిటివిటీ (Case Sensitivity) అలవాట్లు

HTML ట్యాగ్స్ కేస్-ఇన్‌సెన్సిటివ్ (Case-insensitive). అంటే <H1> రాసినా, <h1> రాసినా బ్రౌజర్ పని చేస్తుంది. కానీ ప్రపంచ వెబ్ ప్రమాణాల ప్రకారం ఎల్లప్పుడూ చిన్న అక్షరాలతోనే (lowercase) రాయాలి. క్లీన్ కోడ్ నియమం ఇది!

ఈ క్రింది ప్రశ్నలను సొంతంగా పరిష్కరించడానికి ప్రయత్నించండి. ఆ తర్వాత డ్రాప్‌డౌన్ తెరిచి సమాధానాలు సరిచూసుకోండి:

1. HTML ను ప్రోగ్రామింగ్ లాంగ్వేజ్ అని ఎందుకు అనకూడదు? ఒక స్పష్టమైన సాంకేతిక కారణం చెప్పండి.
2. <!DOCTYPE html> వెబ్‌పేజీలో ఏ పని చేస్తుంది? అది లేకపోతే బ్రౌజర్ ఏ మోడ్‌లోకి వెళుతుంది?
3. తెలుగు లేదా ఎమోజీలు వెబ్‌పేజీలో సరిగ్గా కనిపించాలంటే ఏ మెటా ట్యాగ్ ఉపయోగించాలి?
4. ఈ కోడ్‌లో తప్పు ఏమిటి: <h1>స్వాగతం<h1>?
5. Void Elements అంటే ఏమిటి? కనీసం 3 ఉదాహరణలు ఇవ్వండి.

• HTML (HyperText Markup Language): సమస్త ఇంటర్నెట్ ప్రపంచానికి మూల పునాది; బ్రౌజర్లు దీనిని చదివి వెబ్‌పేజీలుగా మారుస్తాయి.
• వెబ్ త్రయం: HTML నిర్మాణం (Structure), CSS అందం (Design), JavaScript ప్రవర్తన (Functionality).
• చరిత్ర: 1989 లో సర్ టిమ్ బెర్నర్స్-లీ CERN లో WWW మరియు మొదటి వెబ్‌పేజీని ఆవిష్కరించారు.
• Standards: W3C మరియు WHATWG లు నేడు HTML ను నిరంతరం వృద్ధి చెందే Living Standard గా నిర్వహిస్తున్నాయి.
• డాక్యుమెంట్ పునాది: <!DOCTYPE html>, <html>, <head> (మెటాడేటా), మరియు <body> (కంటికి కనిపించే కంటెంట్).
• UTF-8: తెలుగు అక్షరాలు సరిగ్గా రెండర్ కావడానికి <meta charset="UTF-8" /> అత్యంత ఆవశ్యకం.