የባዶ አጥንት ድር ገጽ 10 ደረጃዎች

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

ዛሬ እኛ በጣም ቀላል ፣ እርቃናቸውን አጥንቶች ድር ገጽ ከባዶ እንፈጥራለን። የድር ገጽዎን (ቀለሞች ፣ ቅርጸ -ቁምፊዎች ፣ አሰላለፍ ፣ ወዘተ) በማስተካከል ፣ እና በመጨረሻም አንድ ምስል በድረ -ገጽዎ ውስጥ እንዴት እንደሚገባ ስለ ኤችቲኤምኤል አካላት እንነጋገራለን!

በዚህ አስተማሪ መጨረሻ ላይ አንድ ድረ -ገጽ ከባዶ የመፍጠር መሰረታዊ ክህሎቶች ይኖሩዎታል ፣ እና ኮድ መስሎ የታየውን ያህል ከባድ አለመሆኑን ይወቁ!

ደረጃ 1 - ማስታወሻ ደብተርን ይጠቀሙ

የመጀመሪያውን ድረ -ገፃችንን ለመፍጠር በመስኮቶች ላይ ማስታወሻ ደብተርን እንጠቀማለን። ምንም እንኳን ማንኛውም የጽሑፍ አርታኢ ቢሰራም ፣ የማስታወሻ ደብተር በዊንዶውስ ማሽኖች ላይ አስቀድሞ ተጭኖ ይመጣል ስለዚህ በጣም ጥሩ መነሻ ነጥብ ነው።

ማስታወሻ ደብተርን ለመክፈት በማያ ገጽዎ ታችኛው ግራ ጥግ ላይ ወዳለው የፍለጋ አሞሌዎ ይሂዱ እና “ማስታወሻ ደብተር” ብለው ይተይቡ። ከዚያ በፍለጋ ውጤቶች ውስጥ የሚገኘውን “የማስታወሻ ደብተር” መተግበሪያን ይምረጡ። አዲስ መስኮት መከፈት አለበት።

ደረጃ 2 - መሠረታዊ የኤችቲኤምኤል ሰነድ ዛፍ ማከል

የድር አሳሽዎ (Chrome ፣ Firefox ፣ Edge ፣ Internet Explorer ፣ Safari…) የድር ገጽዎን ለማስኬድ እና ለማሳየት ሁሉም የድር ገጾች መደበኛ የአፅም መዋቅርን መከተል አለባቸው።

ይህ የ html ሰነድ ዛፍ ይባላል። በማስታወሻ ደብተር ውስጥ በማያ ገጹ ላይ እንደሚታየው በኤችቲኤምኤል “አካላት” ወይም “መለያዎች” ውስጥ ይተይቡ። እንዲሁም ለመገልበጥ እና ለመለጠፍ ነፃነት ይሰማዎት-

ደረጃ 3 - እንደ.html ገጽ ማስቀመጥ

አሁን በማስታወሻ ደብተር ውስጥ የእኛ መሠረታዊ የኤችቲኤምኤል አወቃቀር ስላለን ፣ ማንኛውንም ሥራ እንዳናጣ ፣ እና በተማሪው ላይ እየገሰገስን ስንሄድ የእኛን ለውጦች ለማየት እንድንችል እናስቀምጠው።

1. ‹ፋይል›> ‹አስቀምጥ እንደ…› ይምረጡ (ቅጽበታዊ ገጽ እይታ 1)
2. የፋይሉን ዓይነት ወደ ‹ሁሉም ፋይሎች› ይለውጡ (ቅጽበታዊ ገጽ እይታ 2)
3. የመረጡትን ስም ፋይልዎን ይስጡ። በኋላ መክፈት እንዲችሉ ሰነዱን በኮምፒተርዎ ላይ የት እንደሚያከማቹ ልብ ይበሉ። ማስታወሻ - ይህን ፋይል የማስቀመጥ በጣም አስፈላጊው ክፍል “.html” ን እስከ ፋይል ስም መጨረሻ ድረስ ማያያዝ ነው። ይህ ኮምፒተርዎ እንደ ድረ -ገጽ እንዲያውቀው ያስችለዋል። ስለዚህ ፋይልዎን “my_webpage” መሰየም ከፈለጉ ፣ በዚያ መጨረሻ ላይ.html ማከልዎን ያረጋግጡ ፣ ለምሳሌ። "my_webpage.html"

ደረጃ 4 - በድር ገጽዎ ላይ ርዕስ ማከል

ስለዚህ የድር አሳሾች የድር ገፃችንን ለመተርጎም እና ለማሳየት የሚያስፈልጉት መሠረታዊ የኤችቲኤምኤል መዋቅር አለን ፣ ግን ምንም ይዘት የለንም። ያንን እንቀይረው!

ማድረግ ያለብን የመጀመሪያው ነገር ለድር ገፃችን ርዕስ መስጠት ነው። አብዛኛዎቹ ሁሉም የድር ገጾች ርዕስ አላቸው። በድር አሳሽዎ ውስጥ በትሩ ላይ የሚታየው ይህ ነው (የማያ ገጽ እይታን ይመልከቱ)። ለድር ገ page “የቴይለር ድር ጣቢያ” የሚለውን ርዕስ እሰጣለሁ። ይህንን ለማድረግ ‹የርዕስ› አካል ማከል አለብን።

የቴይለር ድር ጣቢያ

በዚህ ጊዜ እያንዳንዱ መለያ “የመክፈቻ” መለያ እና “የመዝጊያ” መለያ እንዳለው ያስተውላሉ። እንደ

እና.

ይህ ርዕሱ የት እንደሚጀመር ፣ የት እንደሚቆም ለመለየት ነው። ሁሉም የ html መለያዎች ማለት ይቻላል ይህንን ይከተላሉ ፣ ሆኖም ግን አንዳንድ ልዩነቶች አሉ።

ደረጃ 5 - ይዘት ወደ ድር ገጽዎ ማከል

ደህና ፣ ለድር ገፃችን ርዕስ አለን ፣ ግን አሁንም ለእሱ ምንም ትክክለኛ ይዘት የለንም። እስቲ ትንሽ ብልጫ እንጨምር!

እኛ ‹የርዕስ› አባልን በመጠቀም በድረ -ገፃችን ላይ አንድ ርዕስ አክለናል። የርዕስ አካል የሆነውን ‹h1› ኤለመንት በመጠቀም ለድር ጣቢያችን ትልቅ ትኩረት የሚስብ ራስጌ እንስጥ።

የቴይለር ድር ጣቢያ

ወደ የእኔ ድረ -ገጽ እንኳን በደህና መጡ

ደረጃ 6 - የእኛን ለውጦች እስካሁን ማየት

እኛ ርዕስ አለን ፣ የተወሰነ ይዘት አለን ፣ እስካሁን ድረስ እንዴት እየመጣ እንደሆነ የድር ገፃችንን እንፈትሽ።

1. በማስታወሻ ደብተር ውስጥ ፋይልዎን ያስቀምጡ
2. ፋይልዎን ወደሚያስቀምጡበት ይሂዱ እና ሁለቴ ጠቅ ያድርጉት። በነባሪ የድር አሳሽዎ ውስጥ በራስ -ሰር መከፈት አለበት። ጥሩ ይመስላል!

ደረጃ 7: የአንቀጽ መለያ ማከል

እኛ ርዕስ ፣ ርዕስ አለን ፣ አሁን ጥቂት ተጨማሪ ጽሑፍ ያለው አንድ አንቀጽ እንጨምር። የአንድ አንቀጽ አባል ስም ‹p› ነው። አጠቃቀሙን ከዚህ በታች ማየት ይችላሉ-

የቴይለር ድር ጣቢያ

ወደ የእኔ ድረ -ገጽ እንኳን በደህና መጡ

ዛሬ ይህንን በጣም ቀላል የድር ገጽ እንዴት መፍጠር እንደሚቻል እንማራለን!

ማሳሰቢያ -ማስታወሻ ደብተር በማስቀመጥ እና ፋይሉን በመክፈት በፈለጉት ጊዜ ለውጦችዎን ማየት ይችላሉ።

ደረጃ 8: የተወሰነ ቀለም ይስጡት

የእኛ ድረ -ገጽ በትክክል እየተንከባለለ አለን ፣ ግን በጣም ግልፅ ነው። የአንቀጽ መለያችን የተወሰነ ቀለም እንስጥ!

ከዚህ በታች በተዘረዘረው መሠረት ወደ ‹p› መለያ ‹የቅጥ› ባህሪን በማከል የተለያዩ ንጥረ ነገሮችን ቀለም መቀባት እንችላለን።

የቴይለር ድር ጣቢያ

ወደ የእኔ ድረ -ገጽ እንኳን በደህና መጡ

ዛሬ ይህንን በጣም ቀላል የድር ገጽ እንዴት መፍጠር እንደሚቻል እንማራለን!

ደረጃ 9: ስዕል ማከል

ስዕሎች የሌሉት ድር ጣቢያ ምንድነው? ለድር ጣቢያችን ስዕል እንጨምር!

የመጀመሪያው እርምጃ የሚወዱትን ምስል መፈለግ ነው። ወርቃማ ተመላላሽ ፍለጋ የ google ምስሎችን እጠቀም ነበር። ምስሉን ወደ ላይ ይጎትቱ እና ዩአርኤል በ-j.webp

አንዴ ምስልዎን ከመረጡ በኋላ ‹img› መለያ በመጠቀም ወደ html ገጽ ማከል አለብን። ምስሌዬ https://i.imgflip.com/4a8he-j.webp

በ ‹src› አይነታ ‹img› መለያ በመጠቀም ወደ ገጽዎ ያክሉት-

የቴይለር ድር ጣቢያ

ወደ የእኔ ድረ -ገጽ እንኳን በደህና መጡ

ዛሬ ይህንን በጣም ቀላል የድር ገጽ እንዴት መፍጠር እንደሚቻል እንማራለን!

ደረጃ 10 የመጨረሻውን ምርት ማየት

የማስታወሻ ደብተር ፋይሉን ያስቀምጡ እና የመጨረሻውን ምርት ይክፈቱ። የድር ገጽዎን ማየት አለብዎት!