HTML ఎలా పనిచేస్తుంది?

HTML అనేది వెబ్ పేజీ నిర్మాణాన్ని రూపొందించడానికి ఉపయోగించే markup language. మనం HTML source code రాసినప్పుడు, browser ఆ code ను చదివి web page గా చూపిస్తుంది.

HTML document లో ప్రతి భాగాన్ని సూచించడానికి elements మరియు tags ఉపయోగిస్తాము. ఉదాహరణకు, heading కోసం <h1> tag, paragraph కోసం <p> tag ఉపయోగిస్తారు.

Browser HTML ను ఎలా చదువుతుంది?

మొదట browser HTML file ను తెరుస్తుంది.
తర్వాత document లోని tags ను పై నుంచి క్రిందికి చదువుతుంది.
ప్రతి tag ఉద్దేశాన్ని అర్థం చేసుకుని page structure ను తయారు చేస్తుంది.
చివరగా ఆ structure ను screen పై కనిపించే web page గా చూపిస్తుంది.

HTML document యొక్క ప్రధాన భాగాలు

<!DOCTYPE html> browser కు ఇది HTML5 document అని తెలియజేస్తుంది.
<html> మొత్తం HTML document ను చుట్టి ఉంచుతుంది.
<head> page గురించి అవసరమైన సమాచారం ఉంచే భాగం.
<title> browser tab లో కనిపించే పేరును నిర్ణయిస్తుంది.
<body> browser window లో కనిపించే content ను కలిగి ఉంటుంది.

చాలా HTML elements కు opening tag మరియు closing tag ఉంటాయి. ఉదాహరణకు, <p> అనేది opening tag, </p> అనేది closing tag. ఈ రెండింటి మధ్య ఉన్న text paragraph గా కనిపిస్తుంది.

Simple Explanation

HTML ను ఒక ఇంటి నిర్మాణ పటంలా ఊహించవచ్చు. <h1> పెద్ద శీర్షికను, <p> సాధారణ వాక్యాలను, <body> కనిపించే మొత్తం content ను సూచిస్తాయి. Browser ఈ సూచనలను చదివి వాటి ఆధారంగా web page ను తయారు చేస్తుంది.

Real-Life Example

ఒక పుస్తకంలో chapter heading, paragraphs మరియు sections ఉంటాయి. అలాగే web page లో కూడా heading కోసం <h1>, వాక్యాల కోసం <p>, మొత్తం content కోసం <body> ఉపయోగిస్తాము. Browser ఈ structure ను పాఠకుడికి సులభంగా కనిపించే రూపంలో చూపిస్తుంది.

Code Examples

ఒక సాధారణ HTML document

<!DOCTYPE html>
<html lang="te">
<head>
    <title>My Web Page</title>
</head>
<body>
    <h1>Welcome to HTML</h1>
    <p>HTML creates the structure of a web page.</p>
</body>
</html>

ఈ code లో <!DOCTYPE html> HTML5 document ను సూచిస్తుంది. <html> మొత్తం document ను కలిగి ఉంటుంది. <head> లోని <title> browser tab పేరును నిర్ణయిస్తుంది. <body> లో ఉన్న <h1> మరియు <p> elements browser page పై కనిపిస్తాయి.

The browser displays Welcome to HTML as a large heading and HTML creates the structure of a web page as a paragraph.

Line-by-Line Explanation

<!DOCTYPE html>

ఈ declaration browser కు document HTML5 నియమాలను అనుసరిస్తుందని తెలియజేస్తుంది.

<html lang=”te”>

ఇది మొత్తం HTML document కు root element. lang attribute document భాషను సూచిస్తుంది.

<head>

<head> భాగంలో page గురించి browser కోసం అవసరమైన సమాచారం ఉంటుంది.

<title>My Web Page</title>

<title> element లోని text browser tab లో కనిపిస్తుంది.

</head>

ఇది <head> element ముగిసిందని సూచించే closing tag.

<body>

Browser page పై కనిపించే content ఈ <body> element లో ఉంచబడుతుంది.

<h1>Welcome to HTML</h1>

ఈ line పెద్ద ప్రధాన heading ను చూపిస్తుంది. <h1> opening tag, </h1> closing tag.

<p>HTML creates the structure of a web page.</p>

ఈ line ఒక paragraph ను చూపిస్తుంది. Paragraph text <p> మరియు </p> మధ్య ఉంటుంది.

</body>

ఇది కనిపించే page content ఉన్న <body> element ను ముగిస్తుంది.

</html>

ఇది మొత్తం HTML document ను ముగించే closing tag.

Try It

Try this HTML code:

Example

<!DOCTYPE html>
<html lang="te">
<head>
    <title>My First HTML Page</title>
</head>
<body>
    <h1>Welcome to HTML</h1>
    <p>HTML creates the structure of a web page.</p>
</body>
</html>

Try It Yourself »

Practice

Practice: ఒక పెద్ద heading కోసం <h1> tag మరియు మీ గురించి ఒక sentence కోసం <p> tag ఉపయోగించండి.

Hint: Opening మరియు closing tags సరైన జతగా ఉపయోగించండి: <h1>…</h1> మరియు <p>…</p>.

Common Mistakes

Browser లో కనిపించాల్సిన content ను <head> లో ఉంచడం.
కనిపించే headings మరియు paragraphs ను ఎల్లప్పుడూ <body> element లో ఉంచండి.

<p> వంటి element కు closing tag </p> రాయకపోవడం.
చాలా elements కోసం opening tag మరియు closing tag రెండింటినీ సరైన క్రమంలో రాయండి.

<title> లోని text page లో కనిపిస్తుందని అనుకోవడం.
<title> text సాధారణంగా browser tab లో కనిపిస్తుంది. Page content కోసం <body> లోని elements ఉపయోగించండి.

<!DOCTYPE html> declaration ను మర్చిపోవడం.
HTML5 document ప్రారంభంలో <!DOCTYPE html> ను ఉంచడం మంచి పద్ధతి.

Interview Questions

Browser HTML code తో ఏమి చేస్తుంది?

Answer: Browser HTML code ను చదివి, tags అర్థాన్ని గుర్తించి, వాటి ఆధారంగా web page structure ను screen పై చూపిస్తుంది.

<head> మరియు <body> మధ్య తేడా ఏమిటి?

Answer: <head> లో page metadata మరియు <title> వంటి browser కోసం అవసరమైన సమాచారం ఉంటుంది. <body> లో visitor కు కనిపించే content ఉంటుంది.

<!DOCTYPE html> ఎందుకు ఉపయోగిస్తారు?

Answer: Document HTML5 standard ను అనుసరిస్తుందని browser కు తెలియజేయడానికి <!DOCTYPE html> ఉపయోగిస్తారు.

Exam Questions

ఒక HTML document యొక్క ప్రాథమిక నిర్మాణాన్ని వివరించండి.

Answer:

HTML document సాధారణంగా <!DOCTYPE html> తో ప్రారంభమవుతుంది. మొత్తం document <html> లో ఉంటుంది. <head> లో page సమాచారం మరియు <title> ఉంటాయి. <body> లో browser పై కనిపించే headings, paragraphs మరియు ఇతర content ఉంటాయి.

Opening tag మరియు closing tag అంటే ఏమిటి? ఉదాహరణ ఇవ్వండి.

Answer:

Element ప్రారంభాన్ని సూచించేది opening tag. Element ముగింపును సూచించేది closing tag. ఉదాహరణకు <p> opening tag, </p> closing tag.

HTML browser లో ఎలా render అవుతుంది?

Answer:

Browser HTML file ను చదివి tags మరియు elements ను అర్థం చేసుకుంటుంది. ఆ structure ఆధారంగా headings, paragraphs మరియు ఇతర content ను visual web page గా render చేస్తుంది.

Quick Revision

HTML browser కు web page structure ను తెలియజేస్తుంది.
<!DOCTYPE html> document HTML5 అని సూచిస్తుంది.
<html> మొత్తం HTML document ను చుట్టి ఉంచుతుంది.
<head> లో page సమాచారం ఉంటుంది.
<title> browser tab పేరును నిర్ణయిస్తుంది.
<body> లో browser పై కనిపించే content ఉంటుంది.
చాలా elements కు opening tag మరియు closing tag ఉంటాయి.

HTML ఎలా పనిచేస్తుంది?