ምስሎችን ወደ የድር ገጾች በማከል ላይ

ዛሬ ማንኛውንም ድህረ ገጽ በኢንተርኔት ላይ ተመልከቱ እና አንዳንድ የጋራ ነገሮችን እንደሚያጋሩ ያስተውላሉ. ከነዚህ የተለዩ አይነቶች ውስጥ አንዱ ምስሎች ናቸው. ትክክለኛዎቹ ምስሎች ወደ አንድ የድር ጣቢያ አቀራረብ በጣም ይጨምራሉ. ከእነዚህ ምስሎች ውስጥ አንዳንዶቹ, እንደ የኩባንያ አርማ, ጣቢያውን ለመሰየም እና ዲጂታል ህጋዊ አካልዎን ለርስዎ ሥጋዊ ኩባንያ ለማገናኘት ያግዛሉ.

በድረ ገጽዎ ላይ ምስል, አዶ, ወይም ግራፊክስ ለማከል, በገፁ የ HTML ኮድ ውስጥ ያለውን መለያ መጠቀም ያስፈልግዎታል. እርስዎ ግራፊክ እንዲታይ በሚፈልጉበት የ IMG መለያን በኤችቲኤምዎ ላይ ያስቀምጣሉ. የገፁን ኮድ እያሳየ ያለው የድር አሳሽ ገጹ ከተታይ በኋላ ይህን ስያሜ በትክክለኛ ግራፊክ ይተካዋል. ወደ እኛ ኩባንያ አርማ ምሳሌ ሲመጣ, ያንን ምስል በጣቢያዎ ላይ እንዴት ማከል እንደሚችሉ እነሆ:

የምስል አይነቶች

ከላይ ያለውን የኤች.ቲ.ኤም.ኤል ኮድ በመመልከት, አባሉ ሁለት ባህሪዎችን ያካትታል. እያንዳንዱ ለሙሉ አስፈላጊ ነው.

የመጀመሪያው አይነታ "src" ነው. ይህ በቀጥታ ገጹ ላይ እንዲታይ የሚፈልጉትን የምስል ፋይል ነው. በምሳሌአታችን "logo.png" የተባለ ፋይልን እንጠቀማለን. ይሄ የድር ጣቢያው ሲሰራጭ የድር አሳሽ የሚያሳየው ግራፊክ ነው.

ከዚህ የፋይል ስም በፊት, አንዳንድ ተጨማሪ መረጃዎችን "/ images /" አክለው ያስተውሉ. ይህ የፋይል ዱካ ነው. የመጀመሪያው ማስታዎሻው ስረዛ ወደ አገልጋዩ የመዛወርውን ስርዓት እንዲመለከት ይነግረዋል. ከዚያም "ምስሎች" እና "logo.png" የሚባለውን አቃፊ ይፈልግ ይሆናል. ሁሉንም የጣቢያ ግራፊክስ ለማከማቸት "ምስሎች" የሚባል አቃፊ መጠቀም ቆንጆ የተለመደው ልምድ ነው, ነገር ግን የፋይልዎ ዱካ ለጣቢያዎ ማንኛውም ተገቢ ይሆናል.

ሁለተኛው አስፈላጊ ባህሪ "የ alt" ጽሑፍ ነው. ይህ በሆነ ምክንያት እንዲጫኑ ካላስፈለገ የሚታየው "ተለዋጭ ጽሑፍ" ነው. ምስሉ ለመጫን ካልቻለ በእኛ ምሳሌ ውስጥ «የኩባንያ አርማ» ን ያነባል. ለምን ይሆን? የተለያዩ ምክንያቶች

እነዚህ እኛ የተገለጸው ምስል የሚጎድለው ለምን ያህል እድሎች ብቻ ነው. በእነዚህ አጋጣሚዎች, የተተካከለው ጽሑፍ በእኛ ይታይ ይሆናል.

ተለዋዋጭ ጽሁፍ በማያ ገጽ አንባቢ ሶፍትዌርን በመጠቀም ምስሉ ላይ ጉዳት ለሚያይበት ጎብኚ ምስሉን "እንዲያነብ" ያገለግላል. እንደ እኛ አይነት ምስሉን ማየት ስለማይችሉ, ይህ ጽሑፍ ምስሉ ራሱ ምን እንደሆነ እንዲያውቁ ያስችላቸዋል. ለዚህ ነው የግርዓት ጽሑፍ የሚፈለገው እና ​​ለምንድነው ምስሉ ምን ማለት እንደሆነ በግልጽ መናገር አለበት!

የመለወጥ ጽሑፍ የተለመደው አለመግባባት ለፍለጋ ፍቃዶች ዓላማ ነው ለማለት ነው. ይህ እውነት አይደለም. Google እና ሌሎች የፍለጋ ሞተሮች ምስሉን ምን እንደሆነ ለመወሰን ይህን ጽሑፍ ሲያነቡ (አስታውሱ እነሱ ምስልዎን "ማየት" እንደማይችሉ ያስታውሱ), በፍለጋ ሞተሮች ላይ ብቻ ይግባኝ ለማለት ቀለል ያለ ጽሑፍ መጻፍ የለብዎትም. ደራሲ ለህፃናት ግልጽ የሆነ ጽሁፍ ነው. ለጥቂት የፍለጋ ፕሮግራሞች አንዳንድ ቁልፍ ቃላቶችን መጨመር ከቻሉ ጥሩ ነው, ነገር ግን ምስሉ ግራፊክስ ፋይሉን ለማየየት ለሚችል ለማመልከት የ alt text የመጀመሪያውን ዓላማ እያቀረበ መሆኑን ያረጋግጡ.

ሌሎች ባህሪያት

የ IMG መለያዎ በድር ገጽዎ ላይ ግራፊክን ሲያስቀምጡ ሊያዩት የሚችሏቸው ሌሎች ሁለት ባህሪያት - ስፋት እና ቁመቱ. ለምሳሌ, እንደ Dreamweaver የ WYSIWYG አርታዒን ከተጠቀሙ, ይህን መረጃ በራስ-ሰር ያክላል. አንድ ምሳሌ ይኸውልዎት:

የ WIDTH እና HEIGHT ባህሪያት ለአሳሹ የምስሉን መጠን ያሳያሉ. ከዚያም አሳሹ በአቀራቢው ውስጥ ስንት ቦታ እንደሚሰጥ በትክክል ያውቃል, እንዲሁም ምስሉ በሚወርድበት ጊዜ ወደ ገጹ ቀጣይ ክፍል ይንቀሳቀሳል. በኤች ቲ ኤም ኤል ውስጥ ይህንን መረጃ በመጠቀምዎ የተገኘው ችግር ምስሎችዎ በትክክለኛው መጠን እንዲታይ ሁልጊዜ ላይፈልጉ ይችላሉ. ለምሳሌ, የጎብኚዎች ለውጦች በእንግዳ ማያ ገጽ እና በመሣሪያ መጠን ላይ የተመረኮዘ ምላሽ ሰጪ ድር ጣቢያ ካለህ ምስሎችህ ተለዋዋጭ እንዲሆኑ ይፈልጋሉ. በርስዎ ኤችቲኤምኤል ውስጥ ቋሚነት ምን እንደሆነ ከተናገሩ, ለምላሽ የሲ ኤስ ሲ አማካሪያዊ መጠይቆችን ለመሻገር በጣም ከባድ ሆኖ ያገኙታል. በዚህ ምክንያት, እና ቅጥ (CSS) እና መዋቅር (ኤች ቲ ኤም ኤል) እንዲለያቸው ለማድረግ በ HTML ኮድዎ የርዝመት እና ከፍተኛ ቁምፊዎችን እንዲያክሉ ይበረታታሉ.

አንድ ማስታወሻ-እነዚህን የሽግግሮች መመሪያዎች ከተጥሉ እና በሲኤስኤል ውስጥ መጠኑን ካልገለፁ አሳሽ ነባሪውን መጠኑን በነባሪነት ያሳየዋል.

በጄረሚ ጊራር የተስተካከለው