ድር ጣቢያ የሚገኝበትን የቡና ሱቅ ያድርጉ - 9 ደረጃዎች

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

በዚህ መመሪያ ውስጥ Google ካርታዎችን ፣ ኤችቲኤምኤልን እና ሲኤስኤስን በመጠቀም በአቅራቢያዎ ያሉ የቡና ሱቆችን የሚያሳይ ቀላል ድር ጣቢያ እንዴት እንደሚሠሩ አሳያችኋለሁ።

አቅርቦቶች

ኮምፒተር

የጽሑፍ አርታኢ (እኔ አቶምን እጠቀማለሁ)

የ wifi ግንኙነት

ደረጃ 1 የጽሑፍ አርታኢን ይምረጡ

እኔ እዚህ ማውረድ የሚችለውን አቶምን እጠቀማለሁ። አንዴ ከወረደ በኋላ አዲስ ፕሮጀክት ይሠራል

ደረጃ 2: አዲሱን ፕሮጀክትዎን ይፍጠሩ

1. አቶም ክፈት
2. ፋይል ያግኙ
3. ከፋይሉ ስር አዲስ ጠቅ ያድርጉ
4. ከታች በስተግራ (ማክ) አዲስ አቃፊ ለመሥራት አንድ አዝራር ይኖራል
5. አቃፊዎን “የካርታ ድር ጣቢያ” ብለው ይሰይሙ
6. ከታች በስተቀኝ በኩል ክፍት የሚለውን ይጫኑ

ደረጃ 3: የእርስዎን ማውጫ.html ይፍጠሩ

1. በአቃፊዎ ውስጥ አዲስ ፋይል ያክሉ (በአቶም ውስጥ አቃፊውን በቀኝ ጠቅ ያድርጉ እና አዲስ ይጫኑ)
2. ይህን ፋይል 'Index.html' ብለው ይሰይሙ
3. ይህንን መሠረታዊ የኤችቲኤምኤል መዋቅር ያክሉ ፣ ይህ በእያንዳንዱ የኤችቲኤምኤል ፕሮጀክት ውስጥ ጥቅም ላይ ውሏል

ደረጃ 4 ካርታዎን ያግኙ

1. የጉግል ካርታዎችን እዚህ ይጎብኙ - Google ካርታዎች
2. ቡና ይፈልጉ
3. በአጠቃላይ አካባቢዎ ውስጥ ሁሉንም የቡና ሱቆች ማግኘት አለብዎት
4. ከቡና ቀጥሎ ያሉትን ሶስት መስመሮች ጠቅ ያድርጉ
5. ካርታ ያጋሩ ወይም ያስገቡ
6. የተከተተ ካርታ ይምረጡ
7. የካርታውን መጠን ይምረጡ (እኔ ትልቅ ተጠቀምኩ) እና አካባቢዎን ያጠናቅቁ
8. ኤችቲኤምኤልን ቅዳ የሚለውን ይጫኑ

ደረጃ 5: ወደ ድር ጣቢያው ያክሉ

1. ወደ ኤችቲኤምኤል ፋይል ይመለሱ።
2. በሁለቱ”መለያዎች መካከል ይህንን ኮድ ያስገቡ

'

በአቅራቢያዎ የቡና ሱቆች

'ከጉግል ካርታዎች የተተከለው ኮድ'

'

ደረጃ 6 ቅድመ ዕይታ

ያ ክፍል አንድ ተከናውኗል!

ፋይሉን ያስቀምጡ እና በኮምፒተርዎ ላይ ያግኙት ፣ ሁለቴ ጠቅ ያድርጉት እና ቅድመ ዕይታ ለማድረግ በነባሪ አሳሽዎ ውስጥ ይከፈታል።

ደረጃ 7 - የተሻለ ሆኖ እንዲታይ ያድርጉ

1. በሁለቱ '' መለያዎች መካከል 'በአቅራቢያዬ ያሉ የቡና ሱቆች' ያክሉ
2. እርስዎ 'Index.html' ን በፈጠሩበት መንገድ አዲስ ፋይል ያክሉ ግን ‹Style.css› ብለው ይሰይሙት
3. ወደ ኤችቲኤምኤል ፋይልዎ ይመለሱ ፣ ይህንን ኮድ ከርዕስዎ በላይ ይፃፉ ፣"
4. ወደ ጉግል ምስሎች ይሂዱ እና አንድ የሚያምር የቡና ጽዋ ክሊፕን ያውርዱ
5. የተቀሩትን ፋይሎቻችንን ወደያዘው አቃፊ ምስሉን ያክሉ
6. በሲኤስኤስ ፋይል ውስጥ የሚከተለውን ኮድ ይፃፉ- 'body {
7. ዳራ-ምስል url (የምስሉ ስም);
8. የጀርባ መጠን-ሽፋን;
9. }'

ደረጃ 8: የተሻለ እንዲመስል ማድረግ Pt2

1. አሁን ብናስቀምጥ እና ቅድመ ዕይታ ካደረግን ፣ የድር ጣቢያዎቹ ዳራ አሁን በቡና ጽዋዎቻችን እንደተለጠፈ ማየት እንችላለን
2. በሚያሳዝን ሁኔታ የእኛን ርዕስ ለማንበብ አስቸጋሪ ነው
3. ስለዚህ በሲኤስኤስ ውስጥ ከ ‹አካል {}› በታች የሚከተለውን ኮድ ያክሉ - h1 {
4. ዳራ-ቀለም = rgb (255 ፣ 255 ፣ 255);
5. ቅርጸ-ቁምፊ-መጠን = 40 ፒክስል;
6. }

ደረጃ 9 ፦ ራእይ

ይሀው ነው! ጨርሰዋል። የኤችቲኤምኤል ፣ CSS እና የተከተተ ኮድ መሰረታዊ ነገሮችን ተምረዋል ፣ በደንብ ተከናውኗል። እርስዎ ጣዕምዎን እንዲስማማ እና የሚፈልጉትን ማንኛውንም ካርታ እንዲያሳይ ለማድረግ ኮዱን ማርትዕ ይችላሉ። ከዚያን ጊዜ ጀምሮ የድር ጣቢያዎን ግንባታ ጉዞ እና ለዘላለም ማሻሻልዎን መቀጠል ይችላሉ።