منتدي علم سوفت لشروحات
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.


ﻣﻮﻗﻊ ﺷﺎﻣﻞ ﻭ ﻣﺨﺘﺺ ﻓﻲ ﺍﻟﻤﺠﺎﻝ ﺍﻟﺘﻘﻨﻲ , ﻳﻀﻊ ﺩﺭﻭﺱ ﻓﻲ ﺍﻟﺒﺮﻣﺠﺔ ﻭ ﺗﺼﻤﻴﻢ ﺍﻟﻤﻮﺍﻗﻊ ﺛﻢ ﺩﺭﻭﺱ ﻓﻲ ﺗﻌﻠﻢ ﺇﺻﻼﺡ ﻣﺸﺎﻛﻞ
 
الرئيسيةأحدث الصورالتسجيلدخول

 

 ﺍﻟﺪﺭﺱ ﺍﻟﺘﺎﺳﻊ : ﺍﻟﺼﻮﺭ

اذهب الى الأسفل 
كاتب الموضوعرسالة
Admin
Admin
Admin


المساهمات : 38
نقودي : 2413
تاريخ التسجيل : 25/01/2018
العمر : 23
الموقع : https://eulim-sufat.rigala.net

ﺍﻟﺪﺭﺱ ﺍﻟﺘﺎﺳﻊ : ﺍﻟﺼﻮﺭ Empty
مُساهمةموضوع: ﺍﻟﺪﺭﺱ ﺍﻟﺘﺎﺳﻊ : ﺍﻟﺼﻮﺭ   ﺍﻟﺪﺭﺱ ﺍﻟﺘﺎﺳﻊ : ﺍﻟﺼﻮﺭ Emptyالجمعة فبراير 02, 2018 11:48 pm

ﺃﻟﻦ ﻳﻜﻮﻥ ﺭﺍﺋﻌﺎً ﺇﺫﺍ ﺗﻤﻜﻨﺖ ﻣﻦ ﻭﺿﻊ ﺻﻮﺭﺓ ﺍﻟﻤﻐﻨﻲ ﻭﺍﻟﻤﻤﺜﻞ ﺍﻟﺸﻬﻴﺮ ﺩﻳﻔﻴﺪ ﻫﺎﺳﻠﻬﻮﻑ ﻓﻲ ﻣﻨﺘﺼﻒ ﺻﻔﺤﺘﻚ؟
ﻫﺬﺍ ﻳﺒﺪﻭ ﻛﺘﺤﺪ ...
ﺭﺑﻤﺎ، ﻟﻜﻦ ﻓﻲ ﺍﻟﺤﻘﻴﻘﺔ ﻳﻤﻜﻦ ﻓﻌﻞ ﺫﻟﻚ ﺑﺴﻬﻮﻟﺔ، ﻛﻞ ﻣﺎ ﺗﺤﺘﺎﺟﻪ ﻫﻮ ﻋﻨﺼﺮ ﻭﺍﺣﺪ :
ﻣﺜﺎﻝ :1
<img src="david.jpg" alt="David" />
ﺳﺘﻈﻬﺮ ﺑﻬﺬﺍ ﺍﻟﺸﻜﻞ ﻓﻲ ﻣﺘﺼﻔﺤﻚ :
ﻛﻞ ﻣﺎ ﺗﺤﺘﺎﺝ ﺃﻥ ﺗﻔﻌﻠﻪ ﻫﻮ ﺇﺧﺒﺎﺭ ﺍﻟﻤﺘﺼﻔﺢ ﺑﺄﻧﻚ ﺗﺮﻳﺪ ﻭﺿﻊ ﺻﻮﺭﺓ، ‏( img ‏) ﻭﻣﻮﻗﻌﻬﺎ ‏( src , ﻫﻮ ﺍﺧﺘﺼﺎﺭ ("source" ، ﻫﻞ ﻓﻬﻤﺖ ﺫﻟﻚ؟
ﻻﺣﻆ ﻛﻴﻒ ﺃﻥ ﻋﻨﺼﺮ img ﻫﻮ ﻓﻲ ﻧﻔﺴﻪ ﻭﺳﻢ ﺍﻟﺒﺪﺍﻳﺔ ﻭﺍﻹﻏﻼﻕ، ﻣﺜﻞ <br /> ﻻ ﻳﺮﺗﺒﻂ ﺑﻨﺺ ﻣﻌﻴﻦ .
" david.jpg " ﻫﻮ ﺍﺳﻢ ﻣﻠﻒ ﺍﻟﺼﻮﺭﺓ ﺍﻟﺬﻱ ﺗﺮﻳﺪ ﻭﺿﻌﻬﺎ ﻓﻲ ﺻﻔﺤﺘﻚ، ﻭ "jpg." ﻫﻮ ﻧﻮﻉ ﻣﻠﻒ ﺍﻟﺼﻮﺭﺓ، ﺗﻤﺎﻣﺎً ﻣﺜﻞ ﺍﻟﻼﺣﻘﺔ "htm." ﺗﺰﻇﻬﺮ ﺃﻥ ﺍﻟﻤﻠﻒ ﻫﻮ ﻭﺛﻴﻘﺔ HTML ، ".jpg " ﺗﺨﺒﺮ ﺍﻟﻤﺘﺼﻔﺢ ﺃﻥ ﺍﻟﻤﻠﻒ ﻫﻮ ﺻﻮﺭﺓ، ﻫﻨﺎﻙ ﺃﻧﻮﺍﻉ ﻣﺨﺘﻠﻔﺔ ﻣﻦ ﻣﻠﻔﺎﺕ ﺍﻟﺼﻮﺭ ﺍﻟﺘﻲ ﻳﻤﻜﻨﻚ ﺇﺿﺎﻓﺘﻬﺎ ﻟﺼﻔﺤﺘﻚ :
GIF (Graphics Interchange Format)
JPG / JPEG (Joint Photographic Experts Group)
PNG (Portable Network Graphics)
ﺻﻮﺭ GIF ﺗﺴﺘﺨﺪﻡ ﻋﺎﺩﺓ ﻟﻠﺮﺳﻮﻣﺎﺕ، ﺃﻣﺎ JPEG ﻓﺘﺴﺘﺨﺪﻡ ﻟﻠﺼﻮﺭ ﺍﻟﻔﻮﺗﻮﻏﺮﺍﻓﻴﺔ ،ﻫﺬﺍ ﻟﺴﺒﺒﻴﻦ، ﺍﻷﻭﻝ ﺻﻮﺭ GIF ﻳﻤﻜﻨﻬﺎ ﺃﻥ ﺗﺤﻮﻱ ﻓﻘﻂ 256 ﻟﻮﻧﺎً، ﺑﻴﻨﻤﺎ JPEG ﻳﻤﻜﻨﻬﺎ ﺃﻥ ﺗﺤﻮﻱ ﻣﻼﻳﻴﻦ ﺍﻷﻟﻮﺍﻥ، ﻭﺍﻟﺴﺒﺐ ﺍﻟﺜﺎﻧﻲ ﻫﻮ ﺃﻥ GIF ﻫﻲ ﺻﻴﻐﺔ ﻣﻠﻒ ﺃﻓﻀﻞ ﻟﻀﻐﻂ ﺍﻟﺼﻮﺭ ﺍﻟﺒﺴﻴﻄﺔ ﺃﻣﺎ JPEG ﻓﻬﻲ ﺃﻓﻀﻞ ﻟﻠﺼﻮﺭ ﺍﻟﻤﻌﻘﺪﺓ ﺍﻟﺘﻲ ﺗﺤﻮﻱ ﺗﻔﺎﺻﻴﻞ ﻛﺜﻴﺮﺓ، ﻭﻛﻠﻤﺎ ﺯﺍﺩ ﺿﻐﻂ ﺍﻟﺼﻮﺭﺓ ﺻﻐﺮ ﺣﺠﻤﻬﺎ، ﻭﻫﺬﺍ ﻳﻌﻨﻲ ﺃﻥ ﺻﻔﺤﺘﻚ ﺳﺘﻈﻬﺮ ﺑﺴﺮﻋﺔ ﺃﻛﺒﺮ، ﻭﺭﺑﻤﺎ ﺗﻌﺮﻑ ﻣﻦ ﺧﺒﺮﺗﻚ ﻓﻲ ﺍﻟﻤﻮﺍﻗﻊ ﺃﻥ ﺍﻟﺼﻔﺤﺎﺕ ﺍﻟﺜﻘﻴﻠﺔ ﻳﻤﻜﻨﻬﺎ ﺃﻥ ﺗﻜﻮﻥ ﺑﻄﻴﺌﺔ ﺑﺸﻜﻞ ﻛﺒﻴﺮ ﻟﺪﺭﺟﺔ ﺗﺰﻋﺞ ﺍﻟﺰﺍﺋﺮ .
ﻓﻲ ﺍﻟﻤﺎﺿﻲ ﻛﺎﻧﺘﺎ ﺻﻴﻐﺔ ﺍﻟﺼﻮﺭﺓ GIF ﻭ JPEG ﺍﻷﻛﺜﺮ ﺍﺳﺘﺨﺪﺍﻣﺎً ﻓﻲ ﺻﻔﺤﺎﺕ ﺍﻟﻤﻮﺍﻗﻊ، ﻣﺆﺧﺮﺍً ﺻﻴﻐﺔ ﺍﻟﺼﻮﺭ PNG ﺑﺪﺃﺕ ﺗﻜﺘﺴﺐ ﺷﻬﺮﺓ ﺃﻛﺜﺮ ﻭﺃﻛﺜﺮ ﻋﻠﻰ ﺣﺴﺎﺏ ﺻﻴﻐﺔ GIF ،
ﺻﻴﻐﺔ PNG ﺗﺤﻮﻱ ﻋﺪﺓ ﻃﺮﻕ ﺗﺠﻤﻊ ﺑﻴﻦ ﻣﻤﻴﺰﺍﺕ GIF ﻭ JPEG ، ﺣﻴﺚ ﻳﻤﻜﻨﻬﺎ ﺃﻥ ﺗﺤﻮﻱ ﻣﻼﻳﻴﻦ ﺍﻟﺼﻮﺭ ﻭﺗﻘﻮﻡ ﺑﻀﻐﻄﻬﺎ ﺑﺸﻜﻞ ﻓﻌﺎﻝ .
ﻣﻦ ﺃﻳﻦ ﺁﺗﻲ ﺑﺎﻟﺼﻮﺭ؟
ﺇﺫﺍ ﺃﺭﺩﺕ ﺃﻥ ﺗﻘﻮﻡ ﺑﺈﻧﺸﺎﺀ ﺻﻮﺭﻙ ﺍﻟﺨﺎﺻﺔ ﻓﺄﻧﺖ ﺑﺤﺎﺟﺔ ﺇﻟﻰ ﺑﺮﻧﺎﻣﺞ ﻣﺤﺮﺭ ﺻﻮﺭ، ﻣﺤﺮﺭ ﺍﻟﺼﻮﺭ ﻫﻮ ﺃﺣﺪ ﺃﻫﻢ ﺍﻷﺩﻭﺍﺕ ﺍﻟﺘﻲ ﺗﺤﺘﺎﺟﻬﺎ ﻹﻧﺸﺎﺀ ﻣﻮﺍﻗﻊ ﺟﻤﻴﻠﺔ .
ﻟﻸﺳﻒ ﻟﻴﺲ ﻫﻨﺎﻙ ﻣﺤﺮﺭ ﺻﻮﺭ ﻳﺄﺗﻲ ﻣﻊ ﻧﻈﺎﻡ ﻭﻳﻨﺪﻭﺯ ﺃﻭ ﻣﻊ ﺃﻧﻈﻤﺔ ﺍﻟﺘﺸﻐﻴﻞ ﺍﻷﺧﺮﻯ، ﻟﺬﻟﻚ ﻋﻠﻴﻚ ﺃﻥ ﺗﺸﺘﺮﻱ ﺑﺮﻧﺎﻣﺞ ﺑﺎﻳﻨﺖ ﺷﻮﺏ ﺑﺮﻭ ﺃﻭ ﻓﻮﺗﻮﺷﻮﺏ ﺃﻭ ﻣﺎﻳﻜﺮﻭﻣﻴﺪﻳﺎ ﻓﺎﻳﺮﻭﺭﻛﺲ، ﻭﻫﻲ ﺃﻓﻀﻞ ﻣﺤﺮﺭﺍﺕ ﺍﻟﺼﻮﺭ ﻓﻲ ﺍﻟﺴﻮﻕ .
ﻋﻤﻮﻣﺎً، ﻛﻤﺎ ﻗﻠﻨﺎ ﺳﺎﺑﻘﺎً، ﻟﻴﺲ ﻣﻦ ﺍﻟﻀﺮﻭﺭﻱ ﺃﻥ ﺗﺸﺘﺮﻱ ﺑﺮﺍﻣﺞ ﻏﺎﻟﻴﺔ ﺍﻟﺴﻌﺮ ﻹﻧﺠﺎﺯ ﻫﺬﺍ ﺍﻟﺪﺭﺱ، ﺍﻵﻥ ﻳﻤﻜﻨﻚ ﺇﻧﺰﺍﻝ ﺑﺮﻧﺎﻣﺞ ﺟﻴﺪ ﻟﺘﺤﺮﻳﺮ ﺍﻟﺼﻮﺭ ﻳﺴﻤﻰ IrfanView ﻭﻫﻮ ﺑﺮﻧﺎﻣﺞ ﻣﺠﺎﻧﻲ ﻭﻻ ﻳﻜﻠﻒ ﺷﻴﺌﺎً .
ﺃﻭ ﻳﻤﻜﻨﻚ ﺇﻧﺰﺍﻝ ﺍﻟﺼﻮﺭ ﻣﻦ ﻣﻮﺍﻗﻊ ﻣﺨﺘﻠﻔﺔ، ﻟﻜﻦ ﺍﺣﺬﺭ ﻣﻦ ﻣﺨﺎﻟﻔﺔ ﻗﻮﺍﻧﻴﻦ ﺣﻘﻮﻕ ﺍﻟﻨﺸﺮ، ﻣﻊ ﺫﻟﻚ، ﻣﻦ ﺍﻟﻤﻔﻴﺪ ﺃﻥ ﺗﻌﺮﻑ ﻛﻴﻒ ﺗﻘﻮﻡ ﺑﺈﻧﺰﺍﻝ ﺍﻟﺼﻮﺭ :
.1 ﺇﺿﻐﻂ ﺑﺎﻟﺰﺭ ﺍﻷﻳﻤﻦ ﻋﻠﻰ ﺃﻱ ﺻﻮﺭﺓ ﻓﻲ ﺃﻱ ﻣﻮﻗﻊ .
.2 ﺍﺧﺘﺮ " Save picture as "... ﻓﻲ ﺍﻟﻘﺎﺋﻤﺔ ﺍﻟﺘﻲ ﺳﺘﻈﻬﺮ ﻟﻚ .
.3 ﺍﺧﺘﺮ ﻣﻜﺎﻥ ﺣﻔﻆ ﺍﻟﺼﻮﺭﺓ ﻓﻲ ﺣﺎﺳﻮﺑﻚ ﻭﺍﺿﻐﻂ ﻋﻠﻰ ."Save"
ﺇﻓﻌﻞ ﻫﺬﺍ ﻟﻠﺼﻮﺭﺓ ﺃﺩﻧﺎﻩ، ﻗﻢ ﺑﺤﻔﻈﻬﺎ ﻓﻲ ﺣﺎﺳﻮﺑﻚ ﻓﻲ ﻧﻔﺲ ﻣﻜﺎﻥ ﻣﻠﻔﺎﺕ HTML ﺍﻟﺘﻲ ﻗﻤﺖ ﺑﺈﻧﺸﺎﺀﻫﺎ، ﻻﺣﻆ ﺃﻥ ﺍﻟﺸﻌﺎﺭ ﺣﻔﻆ ﺑﺼﻴﻐﺔ :PNG
ﺍﻵﻥ ﻳﻤﻜﻨﻚ ﻭﺿﻊ ﺍﻟﺼﻮﺭﺓ ﻓﻲ ﺇﺣﺪﺓ ﺻﻔﺤﺎﺗﻚ، ﺟﺮﺏ ﺑﻨﻔﺴﻚ .
ﻫﻞ ﻫﺬﺍ ﻛﻞ ﻣﺎ ﺃﺣﺘﺎﺟﻪ ﻟﻤﻌﺮﻓﺘﻪ ﺣﻮﻝ ﺍﻟﺼﻮﺭ؟
ﻫﻨﺎﻙ ﺃﺷﻴﺎﺀ ﺃﺧﺮﻯ ﻳﺠﺐ ﺃﻥ ﺗﻌﺮﻓﻬﺎ ﺣﻮﻝ ﺍﻟﺼﻮﺭ، ﺃﻭﻻً ﻳﻤﻜﻨﻚ ﺃﻥ ﺗﻘﻮﻡ ﺑﺈﺿﺎﻓﺔ ﺻﻮﺭﺓ ﻣﻦ ﻣﺠﻠﺪ ﺁﺧﺮ ﺃﻭ ﺣﺘﻰ ﻣﻦ ﻣﻮﻗﻊ ﺁﺧﺮ :
ﻣﺜﺎﻝ :2
<img src="images/logo.png" />
ﻣﺜﺎﻝ :3
<img src="http://www.html.net/logo.png" />
ﺛﺎﻧﻴﺎً، ﻳﻤﻜﻦ ﻟﻠﺼﻮﺭ ﺃﻥ ﺗﻜﻮﻥ ﺭﻭﺍﺑﻂ :
ﻣﺜﺎﻝ :4
<a href="http://www.html.net">
<img src="logo.png" /></a>
ﺳﺘﻈﻬﺮ ﻓﻲ ﺍﻟﻤﺘﺼﻔﺢ ﺑﻬﺬﺍ ﺍﻟﺸﻜﻞ ‏( ﺟﺮﺏ ﺃﻥ ﺗﻀﻐﻂ ﻋﻠﻰ ﺍﻟﺼﻮﺭﺓ ‏) :
ﻫﻞ ﻫﻨﺎﻙ ﺃﻱ ﺧﺼﺎﺋﺺ ﻳﺠﺐ ﺃﻥ ﺃﻋﺮﻓﻬﺎ؟
ﻋﻨﺪﻣﺎ ﺗﺮﻳﺪ ﻭﺿﻊ ﺻﻮﺭﺓ ﻓﺄﻧﺖ ﺗﺤﺘﺎﺝ ﺧﺎﺻﻴﺔ src ﺍﻟﺘﻲ ﺗﺨﺒﺮ ﺍﻟﻤﺘﺼﻔﺢ ﻋﻦ ﻣﻜﺎﻥ ﺍﻟﺼﻮﺭ، ﺑﺠﺎﻧﺐ ﺫﻟﻚ ﻫﻨﺎﻙ ﻋﺪﺩ ﻣﻦ ﺍﻟﺨﺼﺎﺋﺺ ﺍﻟﺘﻲ ﻳﻤﻜﻦ ﺃﻥ ﺗﻜﻮﻥ ﻣﻔﻴﺪﺓ ﻋﻨﺪ ﺇﺿﺎﻓﺔ ﺍﻟﺼﻮﺭ
ﺧﺎﺻﻴﺔ alt ﺗﺴﺘﺨﺪﻡ ﻟﺘﻌﻄﻲ ﻭﺻﻔﺎً ﺑﺪﻳﻼً ﻟﻠﺼﻮﺭﺓ ﺇﺫﺍ ﻟﻢ ﺗﻈﻬﺮ ﺍﻟﺼﻮﺭﺓ ﻷﻱ ﺳﺒﺐ ﺳﻴﺮﻯ ﺍﻟﻤﺴﺘﺨﺪﻡ ﻧﺼﺎً ﺑﺪﻳﻼً ﻳﺸﺮﺡ ﻣﺤﺘﻮﻳﺎﺕ ﺍﻟﺼﻮﺭﺓ، ﻫﺬﻩ ﺍﻟﺨﺎﺻﻴﺔ ﻣﻬﻤﺔ ﺧﺼﻮﺻﺎً ﻟﻤﻦ ﻳﻌﺎﻧﻲ ﻣﻦ ﺃﻱ ﺇﻋﺎﻗﺔ ﺑﺼﺮﻳﺔ، ﻭﻫﻲ ﻛﺬﻟﻚ ﻣﻔﻴﺪﺓ ﻓﻲ ﺣﺎﻝ ﻟﻢ ﺗﻈﻬﺮ ﺍﻟﺼﻮﺭ ﺑﺴﺮﻋﺔ ﻛﺎﻓﻴﺔ، ﻟﺬﻟﻚ ﺍﺳﺘﺨﺪﻡ ﺩﺍﺋﻤﺎً ﺧﺎﺻﻴﺔ alt :
ﻣﺜﺎﻝ :5
<img src="logo.gif" alt="HTML.net logo" />
ﺑﻌﺾ ﺍﻟﻤﺘﺼﻔﺤﺎﺕ ﺗﻌﺮﺽ ﺍﻟﻨﺺ ﺍﻟﺒﺪﻳﻞ ﻓﻲ ﻣﺮﺑﻊ ﺻﻐﻴﺮ ﻳﻈﻬﺮ ﻟﻠﻤﺴﺘﺨﺪﻡ ﻋﻨﺪﻣﺎ ﻳﻀﻊ ﻣﺆﺷﺮ ﺍﻟﻔﺄﺭﺓ ﻋﻠﻰ ﺍﻟﺼﻮﺭﺓ، ﻻﺣﻆ ﻋﻨﺪ ﺍﺳﺘﺨﺪﺍﻡ ﺧﺎﺻﻴﺔ alt ﺍﻟﻬﺪﻑ ﻫﻮ ﺗﻘﺪﻳﻢ ﻧﺺ ﺑﺪﻳﻞ ﻳﺼﻒ ﺍﻟﺼﻮﺭ، ﺧﺎﺻﻴﺔ alt ﻳﺠﺐ ﺃﻻ ﺗﺴﺘﺨﺪﻡ ﻟﻌﺮﺽ ﺍﻟﺮﺳﺎﺋﻞ ﺧﺎﺻﺔ ﻟﻠﻤﺴﺘﺨﺪﻡ ﻷﻥ ﺍﻟﺬﻳﻦ ﻳﻌﺎﻧﻮﻥ ﻣﻦ ﺍﻹﻋﺎﻗﺔ ﺍﻟﺒﺼﺮﻳﺔ ﺳﻴﺴﻤﻌﻮﻥ ﺍﻟﻨﺺ ﺍﻟﺒﺪﻳﻞ ﺑﺪﻭﻥ ﺃﻥ ﻳﻔﻬﻤﻮﺍ ﻣﻌﻨﺎﻩ ﺃﻭ ﻳﺪﺭﻛﻮﺍ ﻣﺤﺘﻮﻯ ﺍﻟﺼﻮﺭﺓ .
ﺍﻟﺨﺎﺻﻴﺔ title ﻳﻤﻜﻦ ﺍﺳﺘﺨﺪﺍﻣﻬﺎ ﻟﺘﻘﺪﻳﻢ ﻣﻌﻠﻮﻣﺎﺕ ﺇﺿﺎﻓﻴﺔ ﻟﻠﺼﻮﺭﺓ :
ﻣﺜﺎﻝ :6
<img src="logo.gif" title="Learn HTML from HTML.net" />
ﺳﻴﻈﻬﺮ ﺑﻬﺬﺍ ﺍﻟﺸﻜﻞ ﻓﻲ ﻣﺘﺼﻔﺤﻚ
ﺇﺫﺍ ﻭﺿﻌﺖ ﻣﺆﺷﺮ ﺍﻟﻔﺄﺭﺓ ﺑﺪﻭﻥ ﺃﻥ ﺗﻨﻘﺮ ﻋﻠﻰ ﺍﻟﺼﻮﺭﺓ ﺳﺘﺮﻯ ﺍﻟﻨﺺ " Learn HTML from HTML.net " ﻳﻈﻬﺮ ﻟﻚ ﻓﻲ ﻣﺮﺑﻊ ﺻﻐﻴﺮ .
ﻫﻨﺎﻙ ﺧﺎﺻﻴﺘﺎﻥ ﻣﻬﻤﺘﺎﻥ ﻭﻫﻤﺎ width ﻭ height :
ﻣﺜﺎﻝ :7
<img src="logo.png" width="141" height="32" />
ﺳﻴﻈﻬﺮ ﺑﻬﺬﺍ ﺍﻟﺸﻜﻞ ﻓﻲ ﻣﺘﺼﻔﺤﻚ
ﺍﻟﺨﺎﺻﻴﺔ width ﻭ height ﻳﻤﻜﻦ ﺍﺳﺘﺨﺪﺍﻣﻬﺎ ﻟﺘﺤﺪﻳﺪ ﻃﻮﻝ ﻭﻋﺮﺽ ﺍﻟﺼﻮﺭﺓ، ﺍﻟﻘﻴﻤﺔ ﺍﻟﺘﻲ ﺗﻮﺿﻊ ﻟﻠﻄﻮﻝ ﻭﺍﻟﻌﺮﺽ ﺗﻘﺎﺱ ﺑﺎﻟﺒﻜﺴﻞ، ﻭﺍﻟﺒﻜﺴﻞ ﻫﻮ ﻭﺣﺪﺓ ﻗﻴﺎﺱ ﺩﻗﺔ ﺍﻟﺸﺎﺷﺔ، ﻣﻌﻈﻢ ﺍﻟﺸﺎﺷﺎﺕ ﻟﻬﺎ ﺩﻗﺔ 768×1024 ، ﻭﻋﻠﻰ ﻋﻜﺲ ﻣﻘﻴﺎﺱ ﺍﻟﺴﻨﺘﻤﻴﺘﺮ، ﺍﻟﺒﻜﺴﻞ ﻳﺨﺘﻠﻒ ﺣﺠﻤﻪ ﺑﺤﺴﺐ ﺩﻗﺔ ﺍﻟﺸﺎﺷﺔ، ﻓﻤﺴﺘﺨﺪﻡ ﻟﺪﻳﻪ ﺷﺎﺷﺔ ﺫﺍﺕ ﺩﻗﺔ ﻋﺎﻟﻴﺔ ﻗﺪ ﻳﻜﻮﻥ ﺍﻟﺴﻨﺘﻤﻴﺘﺮ ﻳﺴﺎﻭﻱ ﻓﻲ ﺷﺎﺷﺘﻪ 25 ﺑﻜﺴﻞ، ﻟﻜﻦ ﻓﻲ ﺷﺎﺷﺔ ﺃﺧﺮﻯ ﻗﺪ ﺗﺴﺎﻭﻱ 1.5 ﺳﻨﺘﻤﻴﺘﺮ .
ﺇﺫﺍ ﻟﻢ ﺗﻀﻊ ﻣﻘﻴﺎﺳﺎً ﻟﻠﻌﺮﺽ ﻭﺍﻟﻄﻮﻝ ﻓﺎﻟﺼﻮﺭﺓ ﺳﺘﻮﺿﻊ ﺑﻤﻘﻴﺎﺳﻬﺎ، ﻟﻜﻦ ﺑﺎﻟﺨﺎﺻﻴﺘﻴﻦ ﻳﻤﻜﻦ ﺍﻟﺘﻼﻋﺐ ﺑﺤﺠﻢ ﺍﻟﺼﻮﺭﺓ :
ﻣﺜﺎﻝ :8
<img src="logo.gif" width="32" height="32" />
ﺳﻴﻈﻬﺮ ﺑﻬﺬﺍ ﺍﻟﺸﻜﻞ ﻓﻲ ﻣﺘﺼﻔﺤﻚ
ﻋﻤﻮﻣﺎً، ﺍﻧﺘﺒﻪ ﺇﻟﻰ ﺃﻥ ﺣﺠﻢ ﺍﻟﺼﻮﺭﺓ ﺑﺎﻟﻜﻴﻠﻮﺑﺎﻳﺖ ﺳﻴﺒﻘﻰ ﻛﻤﺎ ﻫﻮ ﻭﺳﺘﺄﺧﺬ ﺍﻟﺼﻮﺭﺓ ﻧﻔﺲ ﺍﻟﻮﻗﺖ ﻟﺘﻈﻬﺮ ﻟﻠﻤﺴﺘﺨﺪﻡ ﺣﺘﻰ ﻟﻮ ﻛﺎﻧﺖ ﺻﻐﻴﺮﺓ ﺍﻟﺤﺠﻢ ﻣﻦ ﻧﺎﺣﻴﺔ ﺍﻟﻤﻈﻬﺮ، ﻟﺬﻟﻚ ﻋﻠﻴﻚ ﺃﻻ ﺗﺼﻐﺮ ﻣﻘﻴﺎﺱ ﺻﻮﺭﺓ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺧﺎﺻﻴﺘﻲ ﺍﻟﻄﻮﻝ ﻭﺍﻟﻌﺮﺽ ، ﺑﺪﻻً ﻣﻦ ﺫﻟﻚ ﻗﻢ ﺑﺘﺼﻐﻴﺮ ﺍﻟﺼﻮﺭ ﻣﻦ ﺧﻼﻝ ﺑﺮﻧﺎﻣﺞ ﻣﺤﺮﺭ ﺻﻮﺭ ﻟﻜﻲ ﺗﺠﻌﻠﻬﺎ ﺃﺻﻐﺮ ﺣﺠﻤﺎً
ﻣﻊ ﺫﻟﻚ، ﺗﻈﻞ ﻓﻜﺮﺓ ﺟﻴﺪﺓ ﺃﻥ ﺗﺴﺘﺨﺪﻡ ﺧﺎﺻﻴﺘﻲ ﺍﻟﻄﻮﻝ ﻭﺍﻟﻌﺮﺽ ﻷﻥ ﺍﻟﻤﺘﺼﻔﺤﺎﺕ ﺗﺴﺘﻄﻴﻊ ﺃﻥ ﺗﻌﺮﻑ ﻛﻢ ﻣﺴﺎﺣﺔ ﺍﻟﺼﻮﺭﺓ ﺍﻟﺘﻲ ﻳﺠﺐ ﺃﻥ ﺗﻈﻬﺮ ﻓﻲ ﺍﻟﺼﻔﺤﺔ ﻓﺘﺴﺮﻉ ﺑﺬﻟﻚ ﻇﻬﻮﺭ ﺍﻟﺼﻔﺤﺔ ﻟﻠﻤﺴﺘﺨﺪﻡ .
ﻳﻜﻔﻴﻨﺎ ﺍﻵﻥ ﻣﺎ ﺭﺃﻳﻨﺎﻩ ﻣﻦ ﺻﻮﺭ ﺩﻳﻔﻴﺪ ﻫﺎﺳﻠﻬﻮﻑ
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://eulim-sufat.rigala.net
 
ﺍﻟﺪﺭﺱ ﺍﻟﺘﺎﺳﻊ : ﺍﻟﺼﻮﺭ
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1
 مواضيع مماثلة
-
» ﺍﻟﺪﺭﺱ ﺍﻟﺜﺎﻣﻦ : ﺍﻟﺮﻭﺍﺑﻂ
» ﺍﻟﺪﺭﺱ ﺍﻟﺴﺎﺑﻊ : ﺍﻟﺨﺼﺎﺋﺺ
» ﺍﻟﺪﺭﺱ ﺍﻟﺜﺎﻧﻲ : ﻣﺎ ﻫﻲ HTML ؟
» ﺍﻟﺪﺭﺱ ﺍﻷﻭﻝ : ﻟﻨﺒﺪﺃ
» ﺍﻟﺪﺭﺱ ﺍﻟﻌﺎﺷﺮ : ﺍﻟﺠﺪﺍﻭﻝ

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتدي علم سوفت لشروحات :: المواضيع :: قسم خاص لتعليم HTML-
انتقل الى: