Last Updated on January 31, 2019 by VJ
 |
| Website Designing Course | Lesson 04 | How to insert Images, Videos in HTML | Blogger VJ |
హాయ్ ఫ్రెండ్స్, మనం లాస్ట్ లెసన్ లో టెక్స్ట్ ఫార్మేషన్స్ గురించి, అలాగే attributes గురించి తెలుసుకున్నాం. మనం ఈ లెసన్ లో వెబ్ పేజెస్ లో ఇమేజెస్ ని ఎలా చేయాలో తెలుసుకుందాం. అదే విధంగా మనం వెబ్సైట్లలో ఉపయోగించే లింకులు ఎలా క్రియేట్ చేయాలో కూడా తెలుసుకుందాం. వెబ్ పేజెస్ లో ఇమేజెస్ ఇన్సర్ట్ చేయటం ఈజీ. ఇంకా ఆలస్యం చేయకుండా లెసన్ స్టార్ట్ చేద్దాం.
ఇమేజ్ ఇన్సర్ట్ చేయటం ఎలా?
ఈ బ్లాగ్ పోస్ట్ లో మీరు తెలిసుకునేవి
ముందుగా మనం ఒక వెబ్ పేజీ ని క్రియేట్ చేయాలి. Notepad ఓపెన్ విధంగా కొంత కోడింగ్ వ్రాస్తున్నాను.
ఇప్పుడు మనం ఇందులో <title></title>ల మధ్యలో మనం images in HTML అని ఇద్దాం, ఈ విధంగా.
ఇప్పుడు మనం బాడీలో ఇమేజ్ ని ఇన్సర్ట్ చేయటానికి <img> అనే టాగ్ ని వ్రాద్దాం. మనం ఇంతకూ ముందు లెసన్ లో attributes గురించి కొంత తెలుసుకున్నాం. ఇక నుండి ప్రతి టాగ్ లో ఉపయోగించే attributes గురించి తెలుసుకుందాం. ఇప్పుడు నేను ఈ విధంగా img టాగ్ వ్రాస్తున్నాను.
ఇక్కడ మనం వ్రాసిన కోడ్ లో <img> టాగ్ లో src అనే attribute అని వ్రాసాము. Src అంటే ఇమేజ్ ఫైల్ ఎక్కడ ఉంది అనేటువంటి ప్లేస్ లేదా పాత్ ఇవ్వాలి. ఇక్కడ నేను డెస్క్టాప్ పైన ఒక ఇమేజ్ ని సేవ్ చేశాను. దాని నేమ్ నేను image అని ఇచ్చాను. అది png ఫార్మటులో ఉంది. పైన కనిపించే ఇమేజ్ లో ఉన్న పాత్ (path) డెస్క్టాప్ లో ఉన్న ఫైల్ ని ఇండికేట్ చేస్తుంది. మనం ఇప్పుడు వెబ్ పేజీని సేవ్ చేసి ఓపెన్ చేద్దాం . ఆలా ఓపెన్ చేస్తే మీకు ఈ విధంగా కనిపిస్తుంది.
కోడ్ లో మనం ఖచ్చితంగా ఇమేజ్ ఫైల్ ఫార్మటు ఇవ్వాలి. అంటే అది jpg ఫైలా, png ఫైలా లేదా gif ఫైలా అని ఇవ్వాలి. ఆలా ఇచ్చినప్పుడు మాత్రమే కరెక్ట్ గా ఇమేజ్ డిస్ప్లే అవ్వటం జరుగుతుంది. ఇప్పుడు మనం పైన వ్రాసినట్టు కాకుండా ఇంకొక పద్దతిని ఉపయోగిద్దాం. మనం డెస్క్టాప్ పైన ఒక ఫోల్డర్ క్రియేట్ చేసి దానికి HTML అని నేమ్ ఇద్దాం.
మళ్ళి అందులో ఇంకొక ఫోల్డర్ క్రియేట్ చేసి దానికి images అని నేమ్ ఇవ్వండి.
ఇప్పుడు డెస్క్టాప్ పైన ఉన్న ఇమేజ్ ఫైల్ ని కాపీ చేసి ఈ ఫోల్డర్ లో పేస్ట్ చేయండి.
ఇప్పుడు HTML ఫోల్డర్ లో డెస్క్టాప్ పైన ఉన్న index ఫైల్ ని కట్ చేసి పేస్ట్ చేయండి.
ఇప్పుడు index ఫైల్ ని notepadలో ఓపెన్ చేయండి.
ఇప్పుడు src లోపల ఉన్న ఇనోటెడ్ కామాస్ మధ్యలో ఈ విధంగా వ్రాయండి.
సేవ్ చేసి బ్రౌసర్ లో ఓపెన్ చేయండి. మీకు రిజల్ట్ లో ఏమి తేడా ఉండదు.
అంటే మనం ముందు ఇచ్చిన images అనేది ఫోల్డర్ నేమ్. / తరువాత ఉన్నది ఫైల్ నేమ్. ఇది చాలా ఈజీ మెథడ్. ఇలా వ్రాయటం వలన మనకి సర్వర్ లో కూడా ఎలాంటి ప్రాబ్లెమ్స్ రావు.
లింక్స్ క్రియేట్ చేయటం ఎలా?
లింక్స్ అంటే మనల్ని ఒక పేజీ నుండి మరో పేజీకి రీడైరెక్ట్ చేయటానికి, ఇమేజ్స్ ఓపెన్ చేయటానికి, ఫైల్స్ డౌన్లోడ్ చేయటానికి ఉపయోగించటం జరుగుతుంది. మరి అలాంటి లింక్స్ ని మనం వెబ్ పేజీలో ఎలా క్రియేట్ చేస్తాం. ఇంకా ఆలస్యం చేయకుండా చెప్పేస్తాను.
ముందుగా notepad లో ఈ విధంగా కోడింగ్ వ్రాస్తున్నాను.
ఇది ఒక స్టాండార్ట్ స్ట్రక్చర్. కాబట్టి దాదాపుగా ప్రతి వెబ్ పేజీ లో ఇవి కామన్ గా ఉంటాయి. లింక్స్ ని క్రియేట్ చేయటానికి Anchor Tags ని ఉపయోగిస్తాము. పైన వ్రాసిన కోడింగ్ ఈ విధంగా వెబ్ పేజీ బ్రౌసర్ కనిపిస్తుంది.
ఇప్పుడు Anchor Tags వ్రాద్దాం.
సేవ్ చేసి వెబ్ పేజీ ని రిఫ్రెష్ చేయండి. అప్పుడు మీకు ఈ విధంగా కనిపిస్తుంది.
మీకు బాగా కనిపించటానికి బ్రౌసర్ లో జూమ్ చేసి చూపిస్తున్నాను. ఇక్కడ మీకు ఏ విధమైన తేడా కనిపించదు. మరి ఇప్పుడు ఏం చేయాలి? చూద్దాం. మనం వ్రాసిన కోడింగ్ లో మనం anchor tag వ్రాసాము, కానీ ఎలాంటి attribute మనం వ్రాయలేదు. ఇప్పుడు కొన్ని attributes ఈ విధంగా వ్రాద్దాం.
పైన కనిపించే ఇమేజ్ లో మీకు href అనే attribute వ్రాయటం జరిగింది. ఇందులో నేను గూగుల్ వెబ్సైటు url వ్రాసాను. ఇప్పుడు సేవ్ చేసి వెబ్ పేజీని రిఫ్రెష్ చేయండి. అప్పుడు మీకు ఈ విధంగా కనిపిస్తాయి.
పైన కనిపించే ఇమేజ్ లో Click Here అని ఉన్న టెక్స్ట్ మాత్రం బ్లూ కలర్ లో అండర్లైన్ చేయబడి ఉంది. మనం వ్రాసిన anchor tag పని చేస్తుందో లేదో చెక్ చేయటానికి దాని పైన ఒక్కసారి క్లిక్ చేయండి. అప్పుడు మీకు ఈ విధంగా గూగుల్ వెబ్సైటు ఓపెన్ అవుతుంది.
ఒకవేళ మీకు గూగుల్ పేజీ ఓపెన్ అవ్వకపోతే anchor tag లో వ్రాసిన url కరెక్ట్ గా వ్రాసి ఉండరు. మనం కచ్చితంగా http:// లేదా https:// లతో సహా ఉన్న url ని వ్రాయాలి. అప్పుడు మన లింక్ పని చేస్తుంది.
అదే విధంగా మనం లింక్స్ లో మనం ఇమేజ్స్ కూడా ఓపెన్ చేయవచ్చు. అది ఎలాగో చూద్దాం.
నేను ఈ విధంగా ఇమేజ్ url వ్రాసాను.
ఇప్పుడు సేవ్ చేసి రిఫ్రెష్ చేయండి. అప్పుడు మీకు ఈ విధంగా కనిపిస్తుంది.
ఇక్కడ కనిపించే click here పైన క్లిక్ చేస్తే మీకు ఈ విధంగా ఓపెన్ అవుతుంది.
అదే విధంగా ఇప్పుడు మనం ఇచ్చిన url అదే టాబ్ లో ఓపెన్ అవ్వకుండా కొత్త టాబ్ లో ఓపెన్ అవ్వలంటే ఏం చేయాలి. అందుకోసం మనం anchor tag లో target అనే attribute ఉపయోగిస్తాం. అది ఎలాగో చూద్దాం.
ఇప్పుడు సేవ్ చేసి వెబ్ పేజీ ని రిఫ్రెష్ చేయండి. ఇప్పుడు మళ్ళి click here పైన క్లిక్ చేయండి. అప్పుడు మీకు ఇంకొక టాబ్ లో ఇమేజ్ ఓపెన్ అవుతుంది.
ఈ విధంగా మనం లింక్స్ క్రియేట్ చేస్తాం. తరువాత లెసన్ లో HTML లో ఉండే లిస్టుల గురించి తెలుసుకుందాం.
ఈ లెసన్ ఇంకా బాగా అర్థం అవటం కోసం ఒక వీడియో లెసన్ కూడా చేయటం జరిగింది. దానిని కూడా ఈ లెసన్ లోనే ఇవ్వటం జరిగింది. ఒక్కసారి ఆ వీడియో చుస్తే మీకు ఇంకా బాగా అర్థం అవుతుంది. కాబట్టి మర్చిపోకుండా వీడియో కూడా చూడండి. ఈ కోర్స్ కనుక మీకు అర్థం అయితే మీ ఫ్రెండ్స్ కి కూడా షేర్ చేయండి. డౌట్స్ ఉంటె కామెంట్ చేయండి. ధన్యవాదాలు.
ఈ లెసన్ ఇంకా బాగా అర్థం అవటం కోసం ఒక వీడియో లెసన్ కూడా చేయటం జరిగింది. దానిని కూడా ఈ లెసన్ లోనే ఇవ్వటం జరిగింది. ఒక్కసారి ఆ వీడియో చుస్తే మీకు ఇంకా బాగా అర్థం అవుతుంది. కాబట్టి మర్చిపోకుండా వీడియో కూడా చూడండి. ఈ కోర్స్ కనుక మీకు అర్థం అయితే మీ ఫ్రెండ్స్ కి కూడా షేర్ చేయండి. డౌట్స్ ఉంటె కామెంట్ చేయండి. ధన్యవాదాలు.
తెలుగులో టాప్ 5 ప్రొఫెషనల్ బ్లాగర్స్ లో ఒకరు. గ్రాఫిక్ డిజైనింగ్, డిజిటల్ మార్కెటింగ్, వెబ్ డిజైనింగ్ ఇండస్ట్రీలో 8 ఏళ్ళ అనుభవంతో, ఆన్లైన్ ద్వారా మనీ ఎర్నింగ్ చేస్తూ ఎంతో మందికి తన అనుభవ పాఠాలను ఈ బ్లాగ్ ద్వారా ట్యుటోరియల్స్ గా చెప్తున్నారు. తెలుగులో పదివేల మంది బ్లాగర్స్ ని తయారు చేయాలి అని లక్ష్యం గా పెట్టుకున్నారు. అటువంటి వాళ్ళ కోసం తెలుగులో ఎటువంటి టెక్నికల్ బ్యాక్ గ్రౌండ్ లేకపోయినా వాళ్ళు బ్లాగింగ్ లో సక్సెస్ అవ్వాలి అనుకునేవారి కోసమే ఈ బ్లాగ్ స్టార్ట్ చేశారు.
Latest posts by VJ (see all)
- Website Design Formula for Small Businesses - October 27, 2021
- Digital Marketers Meetup in Hyderabad in 2021 - September 1, 2021
- How to Write Viral Blog Posts in Telugu - August 12, 2021