February 7, 2019
Website Designing Course | Lesson 10 | How to create web layout using Table in HTML | Part -2
 |
| Website Designing Course in Telugu | How to create web layout using Table in HTML | Part -2 |
హాయ్ నమస్కారం, మనం లాస్ట్ లెసన్ లో ఒక వెబ్ లేఔట్ కేవలం HTML ద్వారా టేబుల్స్ ఉపయోగించి ఎలా క్రియేట్ చేయాలో తెలుసుకున్నాం. ఆ లెసన్ లో సింగల్ కాలమ్ వెబ్సైటు ఎలా చేయాలో చూసాం. ఈ లెసన్ లో మనం two కాలమ్ వెబ్సైటు ఎలా చేయాలో తెలుసుకుందాం. ఇది మీరు ఇంతకుముందు నేర్చుకున్న లెసన్ కి పార్ట్ 2 అని కూడా అనుకోవచ్చు. ఇంకా ఆలస్యం చేయకుండా లెసన్ స్టార్ట్ చేద్దాం.
ముందుగా మనం ఈ విధంగా కోడింగ్ చేసిన వెబ్ పేజీ ని క్రియేట్ చేద్దాం.
ఇప్పుడు నేను ఈ విధంగా కొంత కోడింగ్ ని వ్రాస్తున్నాను.
అప్పుడు మీకు ఈ విధంగా కనిపిస్తుంది.
ముందుగా నేను ఒక టేబుల్ టాగ్ వ్రాసాను. తరువాత అందులో ఒక tr టాగ్ వ్రాసాను. అందులో ఒక td వ్రాసి, దానిలో ఒక లోగో ని ఇన్సర్ట్ చేశాను. అప్పుడు మీకు పైన చూపించిన విధంగా కనిపిస్తుంది.
ఇప్పుడు నేను దాని ప్రక్కన ఒక మెనూ రావటం కోసం ఈ విధంగా వ్రాస్తున్నాను.
పైన కనిపించే ఇమేజ్ లో సెలెక్ట్ చేసిన కోడ్ వ్రాసిన తరువాత సేవ్ చేసి, వెబ్ పేజీ ని రిఫ్రెష్ చేయండి. అప్పుడు మీకు ఈ విధంగా కనిపిస్తుంది.
పైన కనిపించే ఇమేజ్ లో మీకు లోగో ప్రక్కన ఈ విధంగా ఒక మెనూ కనిపిస్తుంది. ఇలా ప్రక్కప్రక్కన నావిగేషన్ లింక్స్ రావటం కోసం నేను లోగో ఇన్సర్ట్ చేసిన td తరువాత ఇంకొక td లోపల ఒక table టాగ్ ని వ్రాసాను. అందులో నేను ఒక tr టాగ్ వ్రాసి, మళ్ళి అందులో 5 td లు వ్రాసాను. ఆ td లలో ప్రతి దానిలోని ఒక anchor టాగ్ ని వ్రాసాను. Href మాత్రం డమ్మి లింక్స్ గా # ఇవ్వటం జరిగింది.
Note: ఒక టేబుల్ లోపల ఎన్ని టేబుల్స్ అయినా ఇన్సర్ట్ చేయవచ్చు. కానీ వాటిని జాగ్రత్తగా మెయింటైన్ చేయాలి. ఎక్కడన్నా ఒక టాగ్ అయినా బ్రేక్ అయినా మొత్తం స్ట్రక్చర్ డిస్టర్బ్ అవుతుంది. కాబట్టి జాగ్రత్త!
ఇప్పుడు మీకు వెబ్ లేఔట్ స్ట్రక్చర్ రావటం కోసం నేను మొదట వ్రాసిన మెయిన్ టేబుల్ కి నేను బార్డర్, ఇంకా సెంటర్ align, టేబుల్ width attributes ఈ విధంగా వ్రాస్తున్నాను.
ఇప్పుడు సేవ్ చేసి, వెబ్ పేజీ ని రిఫ్రెష్ చేయండి. అప్పుడు మీకు ఈ విధంగా కనిపిస్తుంది.
మనం వ్రాసిన బార్డర్ attribute వలన మనకి బార్డర్ యొక్క width డిఫైన్ అవుతుంది. అదే మీరు వేల్యూ 2 ఇస్తే, బార్డర్ థిక్ నెస్ అనేది పెరుగుతుంది. కానీ మనకి 1 సరిపోతుంది. Align attribute ద్వారా మనం సెంటర్, లెఫ్ట్, రైట్ అలైన్మెంట్స్ చేయవచ్చు అని మీకు తెలుసు కదా! ఇక చివరగా width. మనం మనకి కావాల్సినంత width ఇవ్వవచ్చు. నేను మాత్రం ఈ లెసన్ లో 900 pixels ఇచ్చాను.
కానీ నాకు లోగో td width ఎక్కువగా ఉంది అని అనిపిస్తుంది. మీకు అలాగే అనిపిస్తుందా? అయితే ఆ td టాగ్ లో width attribute ఈ విధంగా వ్రాద్దాం.
నేను 30% width లోగో td కి అలాట్ చేశాను. ఇప్పుడు సేవ్ చేసి, వెబ్ పేజీని రిఫ్రెష్ చేయండి.
ఇప్పుడు మనకి మెనూ లెఫ్ట్ align అయినట్టు కనిపిస్తుంది.
మనం మెనూ లింక్స్ ని సెంటర్ align చేద్దాం. అందుకోసం ఈ విధంగా కోడింగ్ వ్రాద్దాం.
ఇందులో నేను మనం మెనూ కోసం వ్రాసిన టేబుల్ యొక్క width 100% అని, tr align center అని, ప్రతి td width 20% అని ఇచ్చాను. ఇప్పుడు సేవ్ చేసి, వెబ్ పేజీని రిఫ్రెష్ చేయండి.
మనకి పై విధంగా కనిపిస్తుంది. ఇపుడు ఈ కోడ్ ఎందుకు ఇలా వ్రాయాలి అని తెలుసుకుందాం.
మొదట మనం మెనూ కోసం వ్రాసిన టేబుల్ width 100% అని ఇచ్చాము. లోగో వ్రాసిన td width 30% అని వ్రాసాము, ఇంకా అందులో 70% ఉంది. ఆ మొతం స్పేస్ టేబుల్ కోసం మాత్రమే అని (ఆ టేబుల్ రో లో ) అక్కడ డిఫైన్ చేస్తున్నాం.
తరువాత tr align center చేసాం. ఇలా వ్రాయటం వలన tr టాగ్ లోపల వ్రాసే tdల అలైన్మెంట్ కూడా సెంటర్ అవుతుంది.
చివరగా ప్రతి td లోను width 20% అని వ్రాసాము. మనకి మొత్తం 5 నావిగేషనల్ లింక్స్ ఉన్నాయి. మొత్తం టేబుల్ యొక్క width 100% అయితే, మనకి ప్రతి td width 20% అయితేనే అన్ని tdలు సమానంగా ఉంటాయి.
ఇక్కడితో హెడర్ సెక్షన్ అయినట్లే. ఇక మెయిన్ బాడీ కంటెంట్ చూద్దాం.
(హెడర్ సెక్షన్ అంతా లాస్ట్ లెసన్ లో ఎలా క్రియేట్ చేసామో ఇక్కడ కూడా అలాగే చేయాలి, అందుకే సేమ్ కోడ్ పేస్ట్ చేయడం జరిగింది.)
ఇప్పుడు మనం టూ కాలమ్ వెబ్సైటు క్రియేట్ చేయాలి అని అనుకున్నాం కాబట్టి అందుకు సంబంధించిన కోడ్ ఈ విధంగా వ్రాస్తున్నాను.
పైన కనిపించే ఇమేజ్ లో మీకు సెలెక్ట్ అయ్యి ఉన్న కోడ్ మనం వెబ్ పేజీ లో వ్రాసి సేవ్ చేసి, వెబ్ పేజీని రిఫ్రెష్ చేయండి. అప్పుడు మీకు ఈ విధంగా కనిపిస్తుంది.
ఇప్పుడు వ్రాసిన కోడ్ ఏంటో చూద్దాం.
కామెంట్ తర్వాత ఒక tr వ్రాసాను. అందులో ఒక td వ్రాసి, ఆ td కి colspan అనే attribute వ్రాయటం జరిగింది. ఎందుకు colspan వ్రాస్తామో లాస్ట్ లెసన్ లో తెలుసుకున్నాం. ఇప్పుడు colspan వ్రాయకపోతే అలైన్మెంట్స్ మనకి కావాల్సినట్టుగా రావు (కుదరవు).
ఆ td లో ఒక హెడ్డింగ్ టాగ్ వ్రాసాను. ఇప్పుడు ఒక చిన్న పేరాగ్రాఫ్ యాడ్ చేస్తాను.
ఈ విధంగా పేరాగ్రాఫ్ టాగ్ యాడ్ చేసి, దానిని సెంటర్ align చేసి, ఫైల్ ని సేవ్ చేయండి. తరువాత వెబ్ పేజీ ని రిఫ్రెష్ చేయండి. అప్పుడు మీకు ఈ విధంగా కనిపిస్తుంది.
ఇప్పుడు ఈ విధంగా కోడ్ యాడ్ చేద్దాం.
ఇందులో నేను మరల ఒక టేబుల్ ఇన్సర్ట్ చేశాను. ఆ టేబుల్ కి width అనే attribute ద్వారా 100% అని ఇచ్చాను. ఆ టేబుల్ లోపల ఒక tr, దాని లోపల ఒక td వ్రాసాను. ఆ td కి కూడా width అనే attribute వ్రాసి 70% ఇచ్చాను.
ఇప్పుడు ఆ td లోపల ఇమేజ్ టాగ్ వ్రాసి ఒక టాగ్ వ్రాశాను. ఇప్పుడు సేవ్ చేసి, వెబ్ పేజీ ని రిఫ్రెష్ చేయండి. అప్పుడు మీకు ఈ విధముగా కనిపిస్తుంది.
ఇప్పుడు మళ్ళి ఈ విధంగా కోడ్ వ్రాయండి.
ఈ విధంగా నేను ఒక హెడ్డింగ్ టాగ్, ఒక పేరాగ్రాఫ్ టాగ్ వ్రాసాను. ఇప్పుడు ఈ ఫైల్ ని సేవ్ చేసి, వెబ్ పేజీ ని రిఫ్రెష్ చేయండి. అప్పుడు మీకు ఈ విధంగా కనిపిస్తుంది,
ఏంట్రా టూ కాలమ్ వెబ్సైటు అని సింగల్ కాలమ్ వెబ్సైటు చేస్తున్నాడు ఏంట్రా అనుకుంటున్నారా? ఆగండాగండి !
ఇప్పుడు మనం ఇంతవరకు వ్రాసిన td క్లోజ్ అయ్యాక ఇంకొక td టాగ్ వ్రాయండి. నేను ఈ విధంగా కోడ్ వ్రాస్తున్నాను.
నేను ఒక td లోపల ఒక హెడ్డింగ్ టాగ్, ఒక పేరాగ్రాఫ్ టాగ్ వ్రాసాను. సేవ్ చేసి, రిఫ్రెష్ చేస్తే మీకు ఈ విధంగా కనిపిస్తుంది.
ఇప్పుడు మనం వ్రాసిన హెడ్డింగ్ టాగ్, పేరాగ్రాఫ్ టాగ్ కాపీ చేసి, 2 సార్లు ఈ విధంగా పేస్ట్ చేస్తున్నాను.
సేవ్ చేసి రిఫ్రెష్ చేస్తే ఈ విధంగా కనిపిస్తుంది.
ఇప్పుడు మనకి కావాల్సిన విధంగా హెడ్డింగ్స్ మార్చుకోవచ్చు. ఒకవేళ మీరు మార్చుకోవాలి అనుకుంటే హెడ్డింగ్ టాగ్స్ లో ఉన్న రీసెంట్ పోస్ట్స్ ని మార్చండి. అప్పుడు మీకు ఈ విధంగా కనిపిస్తుంది.
ఇప్పుడు ఫుటర్ సెక్షన్ వ్రాయండి. ఆల్రెడీ మనం లాస్ట్ లెసన్ లో వ్రాసాము కదా, అదే సెక్షన్ వ్రాయండి.
అప్పుడు మీకు ఈ విధంగా కనిపిస్తుంది.
మనం లాస్ట్ క్లాస్ లో టేబుల్స్ ద్వారా ఒక వెబ్ లేఔట్ క్రియేట్ చేయాలో తెలుసుకున్నాం. ఈ లెసన్ ద్వారా టేబుల్స్ గురించి మరింత తెలియచేయాలి అని మరో వెబ్ లేఔట్ లెసన్ ప్లాన్ చేయటం జరిగింది.
ఈ లెసన్ ఇంకా బాగా అర్థం అవటం కోసం ఒక వీడియో లెసన్ కూడా చేయటం జరిగింది. దానిని కూడా ఈ లెసన్ లోనే ఇవ్వటం జరిగింది. ఒక్కసారి ఆ వీడియో చుస్తే మీకు ఇంకా బాగా అర్థం అవుతుంది. కాబట్టి మర్చిపోకుండా వీడియో కూడా చూడండి. ఈ కోర్స్ కనుక మీకు అర్థం అయితే మీ ఫ్రెండ్స్ కి కూడా షేర్ చేయండి. డౌట్స్ ఉంటె కామెంట్ చేయండి. ధన్యవాదాలు.
About Author
VJ
తెలుగులో టాప్ 5 ప్రొఫెషనల్ బ్లాగర్స్ లో ఒకరు. గ్రాఫిక్ డిజైనింగ్, డిజిటల్ మార్కెటింగ్, వెబ్ డిజైనింగ్ ఇండస్ట్రీలో 8 ఏళ్ళ అనుభవంతో, ఆన్లైన్ ద్వారా మనీ ఎర్నింగ్ చేస్తూ ఎంతో మందికి తన అనుభవ పాఠాలను ఈ బ్లాగ్ ద్వారా ట్యుటోరియల్స్ గా చెప్తున్నారు.