ጉግል ካርታዎችን በድር ጣቢያ ላይ እንዴት ማካተት እንደሚቻል -4 ደረጃዎች

2024 ደራሲ ደራሲ: John Day | [email protected]. ለመጨረሻ ጊዜ የተሻሻለው: 2024-01-30 07:30

በካርታዎች ውድድር ውስጥ ለእኔ ድምጽ ይስጡኝ!

በቅርቡ እኔ ጉግል ካርታዎችን የሚጠቀም ድር ጣቢያ ፈጠርኩ። ጉግል ካርታዎችን በድር ጣቢያዬ ላይ ማካተት በጣም ቀላል እና ይህን ለማድረግ ከባድ አልነበረም። በዚህ አስተማሪዎች ውስጥ ፣ ጉግል ካርታዎችን በድር ጣቢያዎ ላይ መክተት ምን ያህል ቀላል እንደሆነ አሳያችኋለሁ።

ለእርስዎ እውነት ለመናገር ፣ እኔ ለመዝናናት ብቻ የ Google ካርታዎችን በድር ጣቢያዬ ላይ አካትቻለሁ። በገለልተኛነት ውስጥ ብዙ የሚሠሩ ነገሮች የሉም ፣ ስለዚህ ጉግል ካርታዎችን የሚጠቀም ድር ጣቢያ ለምን አታድርጉ እና ከዚያ ይህንን ድር ጣቢያ በሚፈጥሩበት ጊዜ የወሰድኳቸውን እርምጃዎች ለሰዎች ያሳዩ።

አሁን እኔ ማለት አለብኝ ፣ ጉግል ካርታዎችን በድር ጣቢያዎ ላይ ለመክተት ስለ ኤችቲኤምኤል እና ሲኤስኤስ አንድ ወይም ሁለት ነገር ማወቅ አለብዎት። ስለ ኤችቲኤምኤል ወይም ሲኤስኤስ ምንም የማያውቁ ከሆነ ወደ https://www.w3schools.com/ ለመሄድ ይሞክሩ

ማሳሰቢያ: እኔ ከ W3Schools ጋር በማናቸውም ቅርፅ ወይም ቅርፅ አልተያያዝኩም። ኤችቲኤምኤል እና ሲኤስኤስ ሲማሩ አጋዥ ሆኖ ያገኘሁት ድር ጣቢያ ብቻ ነው።

አቅርቦቶች

• የጽሑፍ አርታኢ (ድር ጣቢያዎን ለማበጀት እና በድር ጣቢያዎ ላይ ያለውን ይዘት ለማቅረብ ጥቅም ላይ ይውላል)።
• ጉግል ካርታዎች (በድር ጣቢያዎ ላይ ምን እንደሚካተት)።
• የኤችቲኤምኤል እና የሲኤስኤስ መሠረታዊ ግንዛቤ (እነዚህ ድር ጣቢያዎን ሲያበጁ እና በድር ጣቢያዎ ላይ ይዘትን ሲያቀርቡ የሚጠቀሙባቸው የሚከተሉት የፕሮግራም ቋንቋዎች ናቸው)።

ደረጃ 1: በድር ጣቢያዎ ላይ ይዘት ያቅርቡ

በኮምፒተርዎ ላይ ወደ የጽሑፍ አርታኢ ሶፍትዌርዎ ይሂዱ። ለምሳሌ ፣ ዊንዶውስ ስላለኝ ወደ ማስታወሻ ደብተር መሄድ አለብኝ። በሚከተለው ውስጥ ወደ ማስታወሻ ደብተር ዓይነት ከሄዱ በኋላ

የጉግል ካርታዎች

የጉግል ካርታዎች

በማስታወሻ ደብተር ውስጥ የሚከተለውን መተየብ ከጨረሱ በኋላ ፣ በኋላ ላይ ጉግል ካርታዎችን በድር ጣቢያዎ ላይ ለመክተት የሚጠቀሙበትን ኮድ ወደሚያገኙበት ወደ Google ካርታዎች ይሂዱ።

ወደ ጉግል ካርታዎች የሚሄዱበት አገናኝ እዚህ አለ

ደረጃ 2 ጉግል ካርታዎችን ወደ ድር ጣቢያዎ ያስገቡ

ጉግል ካርታዎች ላይ ከገቡ በኋላ በ “ምናሌ” ቁልፍ ላይ ጠቅ ያድርጉ እና ከዚያ “ካርታ ያጋሩ ወይም ያካትቱ” ን ይፈልጉ። አንዴ «ካርታ አጋራ ወይም አካትት» ን ካየህ ጠቅ አድርግ። አንዴ ጠቅ ካደረጉ በኋላ “አገናኝ ይላኩ” እና “ካርታ ያክሉ” የሚለውን ማየት አለብዎት። አሁን ‹ካርታውን ክተት› ላይ ጠቅ ያድርጉ ፣ አንዴ ‹ካርታውን ክተት› ላይ ጠቅ ካደረጉ በኋላ ካርታው ምን ያህል ትልቅ ወይም ትንሽ እንደሚሆን ለመምረጥ የሚያገለግል የጽሑፍ ሣጥን በግራ በኩል ወደ ታች ቀስት ማየት አለብዎት። ጽሑፉን በሳጥኑ ውስጥ ይቅዱ። እና ጽሑፉን በድር ጣቢያዎ ኤችቲኤምኤል ውስጥ ይለጥፉ።

ደረጃ 3 ድር ጣቢያዎን ያብጁ

በኮምፒተርዎ ላይ ወደ የጽሑፍ አርታኢ ሶፍትዌርዎ ይመለሱ እና የሚከተለውን ይተይቡ

የጉግል ካርታዎች አካል {የጀርባ-ቀለም rgb (129 ፣ 207 ፣ 224 ፣ 1) ፤}

የጉግል ካርታዎች

ድር ጣቢያዎን ለማበጀት የቅጥ መለያው ጥቅም ላይ ይውላል። አሁን ፣ ይህ እርምጃ CSS ን እንዲጠቀም እመክርዎታለሁ። የእርስዎ ድር ጣቢያዬን በትክክል እንዲመስል የሚከተለውን መተየብ ይችላሉ።

አንዴ ከጨረሱ በኋላ ፋይልዎን እንደ "Google Maps.html" ያስቀምጡ። የ html ክፍልን አይርሱ ምክንያቱም ይህንን ክፍል ካላካተቱ ድር ጣቢያ ማድረግ አይችሉም።

ደረጃ 4 የመጨረሻውን ምርትዎን ይመልከቱ

በዚህ Instructables ውስጥ ያሉትን ሁሉንም ደረጃዎች ተከትለው ከጨረሱ በኋላ የመጨረሻውን ምርትዎን አንድ ጥሩ ይመልከቱ። በመጨረሻው ምርትዎ ደስተኛ ከሆኑ ፣ ያ በጣም ጥሩ ነው። ነገር ግን ፣ በመጨረሻው ምርትዎ ደስተኛ ካልሆኑ ፣ ወደ ማስታወሻ ደብተርዎ ይመለሱ እና በሚቀጥለው ጊዜ የመጨረሻውን ምርትዎን በጥሩ ሁኔታ ሲመለከቱ ፣ እርስዎ በፈጠሩት ነገር እንዲደሰቱ የመጨረሻውን ምርትዎን ለማስተካከል ይሞክሩ። እጆችህ.

የእኔን ምንጭ ኮድ ለማየት ከፈለጉ ፣ በዚህ አስተማሪ ዕቃዎች ታችኛው ክፍል ላይ ሊገኝ ይችላል። የእኔን የመማሪያ እና የደስታ ኮድ ስለተመለከቱ አመሰግናለሁ!

ለማስታወስ ያህል ፣ እባክዎን በካርታዎች ውድድር ውስጥ ድምጽ ይስጡኝ!