11, మే 2012, శుక్రవారం

HTML Elements


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

*
ఒక HTML Element ముఖ్యంగా మూడు అంశాలను తెలియజేస్తుంది. అవి 1. ఎలిమింట్ ప్రారంభించడానికి ఉపయోగించిన ట్యాగు 2. ఎలిమెంట్ లోపలి భాగంలోని కంటెంట్ 3. ఎలిమెంట్ ముగింపునకు ఉపయోగించిన ట్యాగు.

ఉదా:కు వెబ్ పేజీలో ఒక రీజన్లోని కంటెంట్ను మార్క్ చేసి అందులోని కంటెంటును ఒక పేరాగ్రాఫ్లా కనిపించేలా చేయడానికి <p> </p> అనే ఎలిమెంటును ఉపయోగిస్తున్నాము. ఇందులోని ముఖ్యమైన మూడు అంశాలు:
1.        <p> పేరాగ్రాఫ్ ప్రారంభించడానికి ఉపయోగించిన ట్యాగు
2.        Content of Paragraph: పేరాగ్రాఫ్ లోపలి భాగంలోని కంటెంట్
3.        </p> పేరాగ్రాఫ్ ముగింపునకు ఉపయోగించిన ట్యాగు


ప్రతీ వెబ్ పేజీకి నాలుగు ముఖ్యమైన ఎలిమెంట్స్ అవసరం. అవి html, head, title, మరియు body ఎలిమెంట్స్. కాబట్టి ముందుగా వీటి గురించి తెలుసుకుందాం.

html Element:
<html> </html>
ప్రతి వెబ్ పేజీ కూడా html ఎలిమెంట్ యొక్క ప్రారంభపు ట్యాగు <html>తో ప్రారంభించబడి, html ఎలిమెంట్ యొక్క ముగింపు ట్యాగు </html>తో ముగుస్తుంది. వెబ్ బ్రౌజర్ ప్రతి వెబ్ పేజిలోని html ఎలిమెంట్ను గుర్తించి అందులోని కోడ్ను మాత్రమే పరిగణలోకి తీస్కుంటుంది. కాబట్టి ప్రతి వెబ్ పేజీకి దీనిని ముఖ్యమైన ఎలిమెంట్గా చెప్పవచ్చు.

head Element:
<head> </head>
వెబ్ పేజీలో బయటకు కనపడకుండా పేజీని ప్రభావితం చేసే కొన్ని ముఖ్యమైన ట్యాగులను ఎలిమెంట్ లోపల యాడ్ చేస్తారు. అంటే పేజి యొక్క టైటిల్, మెటా సమాచారం, జావాస్క్రిప్ట్, css ఫార్మాటింగ్ మొదలగునవి అన్నీ head Element లోపల నిక్షిప్తమై ఉంటాయి. బ్రౌజర్ head Element లోపలి సమాచారాన్ని ముందుగా చదివి దాని ప్రకారం పేజీని రన్ చేస్తుంది. Rule: దీనిని html Element లోపల ఉపయోగించాలి.

title Element:
<title> </title>
ప్రతి వెబ్ పేజీ ఓపెన్ చేసినపుడు బ్రౌజర్ విండోకు అన్నింటికంటే పైన ఉండే టైటిల్ బార్లో వెబ్ పేజీ యొక్క టైటిల్ కనిపిస్తుంది కదా! అదే title Element. అంటే వెబ్ పేజిలో <title> </title> కు లోపల మనం టైపు చేసిన పదాలను బ్రౌజర్ దాన్ని వెబ్ పేజి యొక్క టైటిల్గా పరిగణించి టైటిల్ బార్లో ప్రచురిస్తుంది. Rule: దీనిని head Element లోపల మాత్రమే ఉపయోగించాలి.
ఉదా:కు <title>MahiGrafix HTML Tutorials in Telugu</title>

body Element:
<body> </body>
వెబ్ పేజీలో ఇన్సెర్ట్ చేయాలనకున్న మొత్తం కంటెంట్ (టెక్స్ట్, పేరాగ్రాప్స్, టేబుల్స్, ఇమేజెస్, వీడియోస్ లాంటివి) మొత్తం body Element లోపల ఇన్సెర్ట్ చేయాలి. ఇపుడు మీరు చూస్తున్న పేజీలో పైన మహిగ్రాఫిక్స్ బ్యానర్ నుండి, క్రింద ఫుటర్ వరకు కూడా body Element లో ఇన్సెర్ట్ చేసినవే. వెబ్ పేజీలో కనిపించగలిగే ప్రతి ఎలిమెంట్ body Element లోనే ఉపయోగించాలి. Rule: body Element ను html Element లోపల ఉపయోగించాలి.


*
ఒక వెబ్ పేజీకి కావలసిన ముఖ్యమైన ఎలిమెంట్స్ గురించి తెలుసుకున్నారు కదా! ఎలిమెంట్స్ మీరు మర్చిపోకుండా ఉండటానికి చిన్న శాంపిల్ వెబ్ పేజీ తయారు చేయండి. Notepad ఓపెన్ చేసి పైన చెప్పిన నాలుగు ఎలిమెంట్స్ టైప్ చేయండి.
[Image: htmltutorialtelugu01.jpg]

కానీ పైన టైప్ చేసిన ఎలిమెంట్స్ Rules ప్రకారం లేవు కదా! పైన ప్రతి ఎలిమెంటుకు చివర్లో ఉన్న Rule ను చదివి వాటి ప్రకారం ఎలిమెంట్స్ ను మూవ్ చేయండి. ఇపుడు క్రింది విధంగా ఉంటుంది.
[Image: htmltutorialtelugu02.jpg]

ఇపుడు టైటిల్ ఎలిమెంట్ మరియు బాడీ ఎలిమెంట్ లోపల మీకు నచ్చినది రాసేయండి క్రింది విధంగా.
Image has been scaled down 9% . Click this bar to view full image (653x136).
[Image: htmltutorialtelugu03.jpg]


Notepad
లో Save As ను క్లిక్ చేయండి.
[Image: htmltutorialtelugu04.jpg]

Save As Type
ను All files గా సెట్ చేసి, File name లో index.html అని టైప్ చేసి Save క్లిక్ చేయండి.
[Image: htmltutorialtelugu05.jpg]

మీరు సేవ్ చేసిన పేజీని ఓపెన్ చేసి చూడండి. అందులో మీరు యాడ్ చేసిన టైటిల్ బ్రౌజర్ యొక్క టైటిల్ బార్లో బాడీలో యాడ్ చేసిన కంటెంట్ వెబ్ పేజీలో కనిపిస్తుంది.

కామెంట్‌లు లేవు:

కామెంట్‌ను పోస్ట్ చేయండి