Professional Documents
Culture Documents
تعلم HTML من الإحتراف
تعلم HTML من الإحتراف
تعلم HTML من الإحتراف
com/vb3
1
www.dinaro.com/vb3
:ﺍﻟﺪﺭﺱ ﺍﻟﺜﺎﻧﻲ
2
www.dinaro.com/vb3
3
www.dinaro.com/vb3
ﻛﻠﻤﺔ ﺍﻟﻤﺆﻟﻒ
ان اﻟﺘﻄﻮر اﻟﺸﺪﯾﺪ اﻟﺬي ﺷﮭﺪﺗﮫ ﻟﻐﺔ ، HTMLواﻻﻋﺪاد اﻟﮭﺎﺋﻠﺔ اﻟﺘﻲ ﺗﺤﺎول ان ﺗﺘﻌﻠﻢ
ھﺬه اﻟﻠﻐﺔ اﻟﺠﻤﯿﻠﺔ واﻟﺴﮭﻠﺔ ﻛﺎن ﻻﺑﺪ ﻟﻲ ﻣﻦ اﻧﺸﺎء ﻛﺘﺎب ﯾﺘﺤﺪث ﻋﻦ ھﺬه اﻟﻠﻐﺔ.
وﻓﻲ اﻟﺤﻘﯿﻘﺔ ﺗﻮﺟﺪ ﻛﺜﯿﺮ ﻣﻦ اﻟﻜﺘﺐ ﺗﺘﺤﺪث ﻋﻦ ﻟﻐﺔ ، HTMLوﻟﻜﻦ ﻗﻠﯿﻞ ﻣﻨﮭﺎ ﯾﻌﻠﻤﻚ
ﻛﯿﻒ ﺗﺼﺒﺢ ﻣﺼﻤﻢ ﺻﻔﺤﺎت وﯾﺐ ﻧﺎﺟﺢ.
وﻟﻘﺪ اﻋﺘﻤﺪت ﻋﻠﻰ ﻋﺪة ﻣﺼﺎدر وﻛﺘﺐ .......................وادﻋﻮا ﻟﮭﻢ ﺑﺎﻟﺨﯿﺮ واﻟﺼﺤﺔ
واﻟﻌﻄﺎء اﻟﺪاﺋﻢ.
اﻟﻤﺆﻟﻒ!!
أﯾﻮب ﻣﻌﺘﺼﻢ
4
www.dinaro.com/vb3
وﻻ ﺗﻈﻦ ان اﺑﺪا ان اﻧﺸﺎء ﻣﻮاﻗﻊ ﻋﻤﻠﯿﺔ ﺻﻌﺒﺔ ھﺬا ﺧﺎﻃﺊ ھﺬا ﺧﺎﻃﺊ ھﺬا ﺧﺎﻃﺊ..........
واذا اﻛﻤﻠﺖ ﻗﺮاءة ھﺬا اﻟﻜﺘﺎب ﺟﯿﺪا ﺳﺘﺘﻤﻜﻦ ﻣﻦ ﺗﺼﻤﯿﻢ ﺻﻔﺤﺎت اﻟﻮﯾﺐ.
5
www.dinaro.com/vb3
ﯾﺎ ﻋﺰﯾﺰي اﻟﻤﺘﺪرب ﻟﻘﺪ ﻛﻨﺖ ﻣﺘﻠﻚ ﻣﺒﺘﺪئ ﻟﻜﻦ ﺑﻌﻮن اﷲ ورﻋﺎﯾﺘﮫ ﺻﺮت ﻣﺼﻤﻢ ﻣﻮاﻗﻊ
وﯾﺐ ﻧﺎﺟﺢ.
ﯾﻤﻨﻊ اﺳﺘﻐﻼل ھﺬا اﻟﻜﺘﺎب ﻓﻲ اي اﻣﻮر ﺗﺠﺎرﯾﺔ ﺑﺪون اﻻذن اﻟﺨﻄﻲ ﻣﻦ
اﻟﻤﺆﻟﻒ..........
ﻓﻲ ﺣﺎﻟﺔ وﺟﺪت اي اﺧﻄﺎء ﻓﻲ ھﺬا اﻟﻜﺘﺎب ﯾﻤﻜﻨﻚ ﻣﺮاﺳﻠﺘﻲ ﻋﻠﻰ اﻟﺒﺮﯾﺪ اﻟﺘﺎﻟﻲ :
Dinaro2Ayoub@gmail.com
أو
Dinaro_22@hotmail.com
ﺳﯿﻜﻮن ﻋﻤﺎ ﻗﺮﯾﺐ ﺑﺈذن اﷲ ﻛﺘﺐ ﺟﺪﯾﺪة ﻓﻲ ﻋﺪة ﻟﻐﺎت ﻣﻨﮭﺎ pascal :و phpو css
و visual basic 6و javascriptو .mysql
6
www.dinaro.com/vb3
ﺛﻤﻦ ﺍﻟﻜﺘﺎﺏ
ﺍﻟﺪﻋﺎﺀ ﻟﻲ ﻭﻟﻮﺍﻟﺪﻱ ﻭﻟﺠﻤﻴﻊ ﺍﻟﻤﺴﻠﻤﻴﻦ ﺑﺎﻟﺼﺤﺔ ﻭﺍﻟﻬﻨﺎﺀ ﻭﺍﻻﺯﺩﻫﺎﺭ ﻭﺍﻟﻨﻤﺎﺀ
ﻭﺍﻟﻌﻄﺎﺀ ﺍﻟﺪﺍﺋﻢ ﻭﺍﻟﺸﻔﺎﺀ...............................ﻭﺍﻟﻔﻮﺯ ﺑﺎﻟﺠﻨﺔ ﻭﺍﻟﻨﺠﺎﺓ ﻣﻦ ﺍﻟﻨﺎﺭ
ﻭﻫﺬﺍ ﻛﻞ ﻣﺎ ﺃﻃﻠﺒﻪ......ﻭﺷﻜﺮﺍ ﻟﻜﻢ...
7
www.dinaro.com/vb3
8
www.dinaro.com/vb3
ان ﻟﻐﺔ HTMLﻟﯿﺴﺖ ﻟﻐﺔ ﺑﺮﻣﺠﯿﺔ ﻛﻠﻐﺔ C++أو JAVAأو Cﻓﮭﻲ ﻟﻐﺔ ﺳﮭﻠﺔ
وﻏﯿﺮ ﻣﻌﻘﺪة وﻻ ﺗﺤﺘﻮي ﻋﻠﻰ ﺷﯿﻔﺮات ﻛﺜﯿﺮة ﻛﺬﻟﻚ ﻓﮭﻲ ﻻ ﺗﺤﺘﺎج إﻟﻰ ﻣﺘﺮﺟﻢ .ﻟﺬﻟﻚ ﻓﮭﻲ
ﻟﻐﺔ ﺑﺴﯿﻄﺔ ﺟﺪاً ،وﺳﮭﻠﺔ اﻟﻔﮭﻢ واﻟﺘﻌﻠﻢ وﻻ ﺗﺤﺘﺎج ﻟﻤﻌﺮﻓﺔ ﻣﺴﺒﻘﺔ ﺑﻠﻐﺎت اﻟﺒﺮﻣﺠﺔ
واﻟﮭﯿﻜﻠﯿﺔ اﻟﻤﺴﺘﺨﺪﻣﺔ ﻓﯿﮭﺎ.
ﺗﺤﺘﺎج داﺋﻤﺎً إﻟﻰ ﺗﻄﺒﯿﻖ ﻣﺎ ﺗﺘﻌﻠﻤﮫ ﺑﺼﻮرة ﻋﻤﻠﯿﺔ أﻛﺜﺮ ﻣﻦ ﻣﺠﺮد اﻷﻣﺜﻠﺔ اﻟﻤﺪرﺟﺔ ﻓﻲ
اﻟﻜﺘﺎب.
9
www.dinaro.com/vb3
ﺍﻟﺪﺭﺱ ﺍﻻﻭﻝ
ﺣﺴﻨﺎً ﻓﻠﻨﺒﺪأ اﻟﺸﺮح ﺗﻜﺘﺐ ﻟﻐﺔ HTMLﺑﺮﻣﻮز ﻏﺮﯾﺒﺔ وﻛﺜﯿﺮة اﺳﻤﮭﺎ ﺑﺎﻟﻠﻐﺔ اﻻﻧﺠﻠﯿﺰﯾﺔ
اﻟـ Tagsوﺗﺴﻤﻰ ﺑﺎﻟﻠﻐﺔ اﻟﻌﺮﺑﯿﺔ اﻟﻮﺳﻮم .
و ﻟﻜﻞ وﺳﻢ ﻣﻦ وﺳﻮم ﻟﻐﺔ اﻟـ HTMLوﺳﻢ ﺑﺪاﯾﺔ ووﺳﻢ ﻧﮭﺎﯾﺔ وﺳﻮف اﻣﺜﻠﮫ ﻟﻚ ﻣﻦ
ﺧﻼل اﻟﺮﺳﻢ اﻟﺘﺎﻟﻲ :
10
www.dinaro.com/vb3
واﻟﻮﺳﻢ اﻷول ھﻮ اﻟﻮﺳﻢ > < HTMLاﻟﺬي ﻛﻤﺎ ذﻛﺮت ﺳﺎﺑﻘﺎً أﻧﮫ أھﻢ اﻟﻮﺳﻮم
اﻟﻤﺴﺘﺨﺪﻣﺔ ﻓﻲ ﺑﻨﺎء اﻟﺼﻔﺤﺎت اﻟﻤﺴﺘﺨﺪم ﻓﯿﮭﺎ ﻟﻐﺔ اﻟـ ، HTMLﻷﻧﮫ ﯾﻘﻮم ﺑﺘﻌﺮﯾﻒ
ﻟﻠﻤﺘﺼﻔﺢ أن ھﺬه اﻟﺼﻔﺤﺔ ﻣﺼﻨﻮﻋﺔ ﺑﻠﻐﺔ اﻟـ HTMLوﯾﻮﺿﻊ ھﺬا اﻟﻮﺳﻢ ﻓﻲ أول
اﻟﻤﺴﺘﻨﺪ اﻟﻤﺼﻨﻮع ﺑﻠﻐﺔ اﻟـ HTMLوﻟﻮﻻ ھﺬا اﻟﻮﺳﻢ ﻟﻈﮭﺮت ﻣﺤﺘﻮﯾﺎت اﻟﺼﻔﺤﺔ ﺑﺼﻮرة
ﺑﺎھﺘﺔ وﻏﯿﺮ ﻣﻔﮭﻮﻣﺔ ،وﺳﻢ اﻟﻨﮭﺎﯾﺔ ھﻮ > < /HTMLاﻟﺬي ﯾﻮﺿﻊ أﺧﺮ اﻟﻤﺴﺘﻨﺪ
اﻟﻤﺼﻨﻮع ﺑﻠﻐﺔ اﻟـ. HTML
ﻓﻠﻨﺄﺗﻲ اﻵن ﻟﻠﻮﺳﻢ > < HEADاﻟﺬي ﯾﺴﺘﺨﺪم ﻟﺘﻌﺮﯾﻒ ﺻﺎﺣﺐ اﻟﺼﻔﺤﺔ واﻟﻠﻐﺔ واﻟﻌﺪﯾﺪ
ﻣﻦ اﻷﺷﯿﺎء اﻟﺘﻲ ﺳﻮف ﻧﺸﺮﺣﮭﺎ ﻓﻲ دروس ﻗﺎدﻣﺔ إﻧﺸﺎء اﷲ .وأذﻛﺮك أن وﺳﻢ اﻟﻨﮭﺎﯾﺔ
اﻟﺨﺎص ﺑﮫ ھﻮ > < /HEAD
ﻧﺄﺗﻲ اﻵن إﻟﻰ اﻟﻮﺳﻢ > < TITLEاﻟﺬي ﯾﻤﺜﻞ اﻟﺠﻤﻠﺔ اﻟﺘﻲ ﺗﻮﺿﻊ أﻋﻠﻰ اﻟﺸﺎﺷﺔ ﻋﻠﻰ
اﻟﯿﺴﺎر ،ووﺳﻢ اﻟﻨﮭﺎﯾﺔ اﻟﺨﺎص ﺑﮫ ھﻮ > ، < /TITLEﻣﻼﺣﻈﺔ ﯾﻮﺿﻊ ھﺬا اﻟﻮﺳﻢ ﺑﯿﻦ
اﻟﻮﺳﻤﯿﻦ > < HEADو > < /HEAD
ﻧﺄﺗﻲ اﻵن إﻟﻰ اﻟﻮﺳﻢ > < BODYاﻟﺬي ھﻮ ﻟﺐ اﻟﺪروس ﺑﺄﻛﻤﻠﮭﺎ ،ﺣﯿﺚ ﯾﻤﺜﻞ ھﺬا
اﻟﻮﺳﻢ ﻣﺤﺘﻮﯾﺎت اﻟﺼﻔﺤﺔ ﺑﺄﻛﻤﻠﮭﺎ ﺣﯿﺚ ﺗﻀﻊ ﻓﯿﮫ اﻟﺠﺪاول واﻟﺼﻮر و اﻟﻤﻮاﺿﯿﻊ وﻛﻞ
ﻣﺎﺗﺮﯾﺪه أن ﯾﻈﮭﺮ ﻋﻠﻰ اﻟﺼﻔﺤﺔ .
ﺳﻮف أﺑﺴﻂ ﻟﻚ ﻛﻞ ﻣﺎ ذﻛﺮت ﻓﻲ ھﺬا اﻟﺪرس داﺧﻞ ھﺬا اﻟﺮﺳﻢ اﻟﺘﺒﯿﺎﻧﻲ :
11
www.dinaro.com/vb3
12
www.dinaro.com/vb3
<BODY>
hello world !!
</BODY>
</HTML>
:اﻟﻨﺎﺗﺞ
13
www.dinaro.com/vb3
اﻟﻨﺎﺗﺞ:
ھﻞ ﺣﺼﻠﺖ ﻋﻠﻰ ﻧﻔﺲ اﻟﻨﺘﯿﺠﺔ؟ إذن ﻣﺒﺮوك ﻟﻘﺪ ﻗﻤﺖ ﺑﺈﻧﺸﺎء أول ﺻﻔﺤﺔ وﯾﺐ ﺧﺎﺻﺔ
ﺑﻚ.
14
www.dinaro.com/vb3
إن اﻟﻤﺘﺼﻔﺤﺎت ﻻ ﺗﺄﺧﺬ ﺑﻌﯿﻦ اﻻﻋﺘﺒﺎر اﻟﻔﺮاﻏﺎت اﻟﺰاﺋﺪة أو إﺷﺎرات ﻧﮭﺎﯾﺔ اﻟﻔﻘﺮات )أي
ﻋﻨﺪﻣﺎ ﺗﻘﻮم ﺑﻀﻐﻂ ﻣﻔﺘﺎح (Enterاﻟﺘﻲ ﺗﺠﺪھﺎ ھﺬه اﻟﻤﺘﺼﻔﺤﺎت ﻓﻲ ﻣﻠﻒ .Html
وﺑﻌﺒﺎرة أﺧﺮى ﻓﺈن ﺑﺎﺳﺘﻄﺎﻋﺘﻚ ﻛﺘﺎﺑﺔ ﻣﻠﻔﻚ اﻟﺴﺎﺑﻖ ﺑﺎﻟﺸﻜﻞ اﻟﺘﺎﻟﻲ:
15
www.dinaro.com/vb3
!!
></BODY
></HTML
وﻓﻲ ﻛﻞ اﻟﺤﺎﻻت ﺳﺘﺤﺼﻞ ﻋﻠﻰ ﻧﻔﺲ اﻟﻨﺘﯿﺠﺔ.
إذن ﻛﯿﻒ ﯾﻤﻜﻦ اﻟﺘﺤﻜﻢ ﺑﻤﻘﺪار اﻟﻨﺺ اﻟﻤﻜﺘﻮب ﻓﻲ ﻛﻞ ﺳﻄﺮ وﻛﯿﻒ ﯾﻤﻜﻦ ﺗﺤﺪﯾﺪ ﻧﮭﺎﯾﺔ
اﻟﻔﻘﺮة وﺑﺪاﯾﺔ اﻟﻔﻘﺮة اﻟﺘﻲ ﺗﻠﯿﮭﺎ؟
ﺳﻮف ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ > <BRﻟﺘﺤﺪﯾﺪ اﻟﻨﮭﺎﯾﺔ ﻟﻠﺴﻄﺮ .واﻟﺒﺪء ﺑﺴﻄﺮ ﺟﺪﯾﺪ )ﻻﺣﻆ أن ھﺬا
اﻟﻮﺳﻢ ﻣﻔﺮد ،أي ﻟﯿﺲ ﻟﮫ وﺳﻢ ﻧﮭﺎﯾﺔ(.
><BODY
!! >hello <BR> world <BR
></BODY
></HTML
اﻟﻨﺎﺗﺞ:
16
www.dinaro.com/vb3
وھﻨﺎك أﯾﻀﺎ اﻟﻮﺳﻢ > <Pاﻟﺬي ﯾﻘﻮم ﺗﻘﺮﯾﺒﺎً ﺑﻨﻔﺲ ﻋﻤﻞ اﻟﻮﺳﻢ اﻟﺴﺎﺑﻖ أي أﻧﮫ ﯾﻨﮭﻲ
اﻟﺴﻄﺮ أو اﻟﻔﻘﺮة وﯾﺒﺪأ ﺑﺴﻄﺮ ﺟﺪﯾﺪ ﻟﻜﻦ ﻣﻊ إﺿﺎﻓﺔ ﺳﻄﺮ إﺿﺎﻓﻲ ﻓﺎرغ ﺑﯿﻦ اﻟﻔﻘﺮات.
><HTML
><HEAD
><TITLE
first page web
></TITLE
></HEAD
><BODY
!! >hello <p> world <p
></BODY
></HTML
اﻟﻨﺎﺗﺞ:
17
www.dinaro.com/vb3
أﻣﺎ اﻟﻔﺮاﻏﺎت ﻓﺘﻌﺘﺒﺮ رﻣﻮزاً ﺧﺎﺻﺔ ﻟﺬﻟﻚ ﻻ ﻧﺴﺘﻄﯿﻊ اﻟﺘﺤﻜﻢ ﺑﮭﺎ وﺑﻌﺪدھﺎ إﻻ ﺑﺎﺳﺘﺨﺪام
اﻟﻮﺳﻢ &;) nbspواﻷﺣﺮف ھﻲ اﺧﺘﺼﺎر ﻟﻠﻌﺒﺎرة .(Non Breakable Spaceوإذا
أردت إدﺧﺎل ﻋﺪة ﻓﺮاﻏﺎت ﺑﯿﻦ ﻧﺺ وآﺧﺮ ﻣﺎ ﻋﻠﯿﻚ إﻻ ﻛﺘﺎﺑﺔ ھﺬا اﻟﻮﺳﻢ ﺑﻨﻔﺲ ﻋﺪد
اﻟﻔﺮاﻏﺎت اﻟﻤﻄﻠﻮب .ﻛﻤﺎ ﯾﺠﺐ ﻋﻠﯿﻚ اﻟﺘﻘﯿﺪ ﺑﺎﻷﺣﺮف اﻟﺼﻐﯿﺮة ھﻨﺎ.
ﻣﺜﺎل :
><HTML
><HEAD
><TITLE
first page web
></TITLE
></HEAD
><BODY
!! ;hello world  
></BODY
></HTML
18
www.dinaro.com/vb3
اﻟﻨﺎﺗﺞ:
ھﻨﺎك اﻟﻌﺪﯾﺪ ﻣﻦ ھﺬه اﻟﺮﻣﻮز واﻟﺘﻲ ﯾﺠﺐ أن ﺗﻜﺘﺐ ﺑﺼﻮرة ﻣﻌﯿﻨﺔ وﺑﺎﺳﺘﺨﺪام اﻟﻮﺳﻮم
وﻟﯿﺲ ﻣﺒﺎﺷﺮة ﺑﺼﻮرﺗﮭﺎ اﻟﻌﺎدﯾﺔ.
ﻛﻞ ھﺬه اﻹﺷﺎرات ﺗﺴﺘﺨﺪم أﺻﻼً ﻣﻊ اﻟﻮﺳﻮم ﻓﮭﻲ ﻣﺤﺠﻮزه ﺿﻤﻦ ﻣﻔﺮدات ﻟﻐﺔ HTML
وﻣﻦ اﻟﺨﻄﺄ اﺳﺘﺨﺪاﻣﮭﺎ ﺑﺼﻮرﺗﮭﺎ اﻟﺼﺮﯾﺤﺔ ﻟﺌﻼ ﯾﺆدي ذﻟﻚ إﻟﻰ ﺣﺪوث ﻣﺸﺎﻛﻞ ﻓﻲ ﻃﺮﯾﻘﺔ
ﻋﺮض اﻟﺼﻔﺤﺔ .ﻛﺬﻟﻚ ﻓﺈن ھﻨﺎك رﻣﻮزاً ﻏﯿﺮ ﻣﻮﺟﻮدة أﺳﺎﺳﺎً ﻋﻠﻰ ﻟﻮﺣﺔ اﻟﻤﻔﺎﺗﯿﺢ ﻛﺮﻣﺰ
ﺣﻘﻮق اﻟﻄﺒﻊ © ورﻣﺰ اﻟﻌﻼﻣﺔ اﻟﻤﺴﺠﻠﺔ ® وﻧﺤﺘﺎج إﻟﻰ ھﺬه اﻟﻄﺮﯾﻘﺔ)ﻃﺮﯾﻘﺔ اﻟﻮﺳﻮم(
ﻟﻜﺘﺎﺑﺘﮭﺎ.
وإﻟﯿﻚ ﺟﺪول ﺑﺒﻌﺾ ھﺬه اﻟﺮﻣﻮز ووﺳﻮﻣﮭﺎ اﻟﻤﻜﺎﻓﺌﺔ .وأﻟﻔﺖ ﻧﻈﺮك إﻟﻰ أﻧﮭﺎ ﺗﻜﺘﺐ ﻛﻤﺎ
ھﻲ ﻓﻲ اﻟﺠﺪول وﺑﺪون إﺷﺎرﺗﻲ > <
19
www.dinaro.com/vb3
20
www.dinaro.com/vb3
أﻟﯿﺲ ھﺬا
ﻣﻤﺘﻌﺎ
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
H
21
www.dinaro.com/vb3
ﺍﻟﺪﺭﺱ ﺍﻟﺜﺎﻧﻲ
ﺳﻮف ﻧﻘﻮم ﻓﻲ ھﺬا اﻟﺪرس ﺑﺎﻟﺘﻌﺮف ﻋﻠﻰ اﻟﺨﺼﺎﺋﺺ اﻟﺘﻲ ﯾﻤﻜﻦ إﺿﺎﻓﺘﮭﺎ إﻟﻰ اﻟﻮﺳﻢ
> <BODYﻣﻦ أﺟﻞ اﻟﺘﺤﻜﻢ ﺑﺎﻟﺸﻜﻞ اﻟﻌﺎم ﻟﻠﺼﻔﺤﺔ ،وﺧﺼﻮﺻﺎ ﻓﯿﻤﺎ ﯾﺘﻌﻠﻖ ﺑﺎﻷﻟﻮان.
ﻃﺒﻌﺎً أﻧﺖ ﻻ زﻟﺖ ﺗﺬﻛﺮ اﻟﺼﻔﺤﺔ اﻟﺘﻲ ﻗﻤﻨﺎ ﺑﻜﺘﺎﺑﺘﮭﺎ ﻓﻲ اﻟﺪرس اﻷول .ﺻﻔﺤﺔ ﺑﺴﯿﻄﺔ
ﺑﺨﻠﻔﯿﺔ رﻣﺎدﯾﺔ وﺧﻂ ﺻﻐﯿﺮ ﻧﺴﺒﯿﺎً ﻟﻮﻧﮫ أﺳﻮد .وھﺬه ھﻲ اﻹﻋﺪادات اﻹﻓﺘﺮاﺿﯿﺔ اﻟﺘﻲ
ﯾﻌﺘﻤﺪھﺎ اﻟﻤﺘﺼﻔﺢ ﻋﻨﺪﻣﺎ ﻻ ﻧﻘﻮم ﻧﺤﻦ ﺑﺘﺤﺪﯾﺪ إﻋﺪادات أﺧﺮى) .رﺑﻤﺎ ﺗﻘﻮل :أھﺬه ﺻﻔﺤﺔ
إﻧﺘﺮﻧﺖ! أﯾﻦ اﻷﻟﻮان واﻟﺮﺳﻮﻣﺎت واﻟﺨﻄﻮط اﻟﺠﻤﯿﻠﺔ واﻟﺘﻨﺴﯿﻘﺎت اﻟﺘﻲ ﻧﺮاھﺎ ﻓﻲ ﺻﻔﺤﺎت
اﻹﻧﺘﺮﻧﺖ؟ ﻣﻌﻚ ﺣﻖ ﻟﻜﻦ ﻣﮭﻼً ﻓﻤﺎ زﻟﻨﺎ ﻓﻲ اﻟﺒﺪاﯾﺔ(.
ﺳﻮف ﻧﺴﺘﻤﺮ ﺑﺎﺳﺘﺨﺪام ﺻﻔﺤﺘﻨﺎ ھﺬه ﻟﺘﻮﺿﯿﺢ أﻣﺜﻠﺔ ھﺬا اﻟﺪرس أﯾﻀﺎً ،ﻟﻜﻦ ﻟﻦ أﻗﻮم
ﺑﺘﻜﺮار ﻛﺘﺎﺑﺔ وﺳﻮم اﻟﺒﺪاﯾﺔ ﻃﺎﻟﻤﺎ أن ﻋﻤﻠﻨﺎ ﯾﺘﺮﻛﺰ ﻓﻲ اﻟﺠﺰء اﻟﻤﺨﺼﺺ ﻟﻤﺤﺘﻮﯾﺎت
اﻟﺼﻔﺤﺔ ﻧﻔﺴﮭﺎ أي ﺿﻤﻦ اﻟﻮﺳﻤﯿﻦ >.</BODY> ... <BODY
22
www.dinaro.com/vb3
ﻧﻄﻠﻖ ﻛﻠﻤﺔ ﺧﺎﺻﯿﺔ ) (Attributeﻋﻠﻰ اﻟﺘﻌﺎﺑﯿﺮ اﻟﺘﻲ ﺗﻀﺎف إﻟﻰ اﻟﻮﺳﻮم ،ﻣﻦ أﺟﻞ
ﺗﺤﺪﯾﺪ اﻟﻜﯿﻔﯿﺔ أو اﻟﺸﻜﻞ اﻟﺬي ﺗﻌﻤﻞ ﺑﮭﺎ ھﺬه اﻟﻮﺳﻮم .وﺑﻌﺒﺎرة أﺧﺮى ﻓﺈن اﻟﻮﺳﻢ ﯾﻘﻮم
ﺑﺈﺧﺒﺎر اﻟﻤﺘﺼﻔﺢ ﻋﻦ اﻟﻌﻤﻞ اﻟﺬي ﯾﺠﺐ اﻟﻘﯿﺎم ﺑﮫ أﻣﺎ اﻟﺨﺎﺻﯿﺔ ﻓﺘﺤﺪد اﻟﻜﯿﻔﯿﺔ اﻟﺘﻲ ﺳﯿﺘﻢ ﺑﮭﺎ
أداء ھﺬا اﻟﻌﻤﻞ.
ﻣﺜﺎل :
><HTML
><HEAD
><TITLE
first page web
></TITLE
></HEAD
>"<BODY BGCOLOR="#00FF00
!! hello world
></BODY
></HTML
اﻟﻨﺎﺗﺞ:
23
www.dinaro.com/vb3
اﻟﻘﻠﯿﻞ ﻋﻦ اﻷﻟﻮان...
ﺗﻼﺣﻆ أن اﻟﻘﯿﻢ اﻟﺴﺎﺑﻘﺔ ﻣﻜﻮﻧﺔ ﻣﻦ ﺳﺘﺔ رﻣﻮز ،وھﻲ ﻣﻜﺘﻮﺑﺔ ﺑﺎﻟﺼﯿﻐﺔ اﻟﺘﺎﻟﯿﺔ:
24
www.dinaro.com/vb3
ھﻨﺎك ﺛﻼﺛﺔ أﻟﻮان أﺳﺎﺳﯿﺔ ھﻲ اﻷﺣﻤﺮ واﻷﺧﻀﺮ واﻷزرق ،وﻟﻜﻞ ﻣﻨﮭﺎ ﯾﻮﺟﺪ 256درﺟﺔ
ﻟﻮﻧﯿﺔ وﯾﻌﺒﺮ ﻋﻦ ھﺬه اﻟﺪرﺟﺎت ﺑﺎﻷرﻗﺎم ﻣﻦ 000وﺣﺘﻰ .255وﻣﻦ ﺧﻼل ﻣﺰج ھﺬه
اﻷﻟﻮان ﺑﺪرﺟﺎﺗﮭﺎ اﻟﻠﻮﻧﯿﺔ اﻟﻤﺨﺘﻠﻔﺔ ﻧﺤﺼﻞ ﻋﻠﻰ اﻷﻟﻮان اﻷﺧﺮى.
ﺣﺴﻨﺎ ،ﻟﻜﻦ ﻣﻦ أي ﺟﺎءت اﻟﺮﻣﻮز FFFFFFواﻟﺘﻲ ﻋﺒﺮت ﻋﻦ اﻟﻠﻮن اﻷﺑﯿﺾ ﺑﮭﺎ .إﻧﮭﺎ
ﺑﺒﺴﺎﻃﺔ أرﻗﺎم… ﻣﻜﺘﻮﺑﺔ ﺑﺎﻟﻨﻈﺎم اﻟﺴﺪاس ﻋﺸﺮي )ﻧﻈﺎم ﻋﺪدي أﺳﺎﺳﮫ اﻟﺮﻗﻢ 16وﯾﻌﺒﺮ
ﻋﻨﮫ ﺑﺎﺳﺘﺨﺪام اﻷرﻗﺎم اﻟﻌﺎدﯾﺔ ﻣﻦ 0إﻟﻰ 9واﻟﺮﻣﻮز .( A,B,C,D,E,Fﻓﺎﻟﺮﻗﻢ 255
ﺑﺎﻟﻨﻈﺎم اﻟﻌﺸﺮي اﻟﻌﺎدي ﯾﻜﺎﻓﺌﮫ اﻟﺮﻗﻢ FFﺑﺎﻟﻨﻈﺎم اﻟﺴﺪاس ﻋﺸﺮي.
إذن ﻓﺎﻟﺮﻗﻢ اﻟﺴﺪاس ﻋﺸﺮي FFﻋﻠﻰ اﻟﯿﺴﺎر ﯾﻤﺜﻞ اﻟﺪرﺟﺔ 255ﻟﻠﻮن اﻷﺣﻤﺮ .واﻟﺮﻗﻢ
FFﻓﻲ اﻟﻮﺳﻂ ﯾﻤﺜﻞ اﻟﺪرﺟﺔ 255ﻣﻦ اﻟﻠﻮن اﻷﺧﻀﺮ .واﻟﺮﻗﻢ FFﻋﻠﻰ اﻟﯿﻤﯿﻦ ﯾﻤﺜﻞ
اﻟﺪرﺟﺔ 255ﻣﻦ اﻟﻠﻮن اﻷزرق.
وﻋﻠﻰ ھﺬا اﻟﻤﻨﻮال ﯾﻌﺒﺮ ﻋﻦ اﻟﻠﻮن اﻷزرق اﻟﻔﺎﺗﺢ ﺑﺎﻟﺮﻗﻢ اﻟﺴﺪاس ﻋﺸﺮيCC6699 :
أﻣﺎ اﻟﻠﻮن اﻷﺳﻮد ﻓﺮﻗﻤﮫ ھﻮ .000000
وھﺬا ﺟﺪول ﺑﺒﻌﺾ اﻷﻟﻮان ورﻣﻮزھﺎ اﻟﻤﻜﺎﻓﺌﺔ ﺑﺎﻟﻨﻈﺎم اﻟﺴﺪاس ﻋﺸﺮي.
25
www.dinaro.com/vb3
26
www.dinaro.com/vb3
27
www.dinaro.com/vb3
28
www.dinaro.com/vb3
29
www.dinaro.com/vb3
ﻣﻼﺣﻈﺔ ﻣﮭﻤﺔ:
ﺑﻌﺾ اﻟﻤﺘﺼﻔﺤﺎت ﻻ ﺗﺘﻌﺮف ﻋﻠﻰ رﻣﻮز اﻷﻟﻮان إﻻ ﺑﻮﺿﻊ إﺷﺎرة #ﻗﺒﻞ ھﺬه اﻟﺮﻣﻮز،
ﻟﺬﻟﻚ ﻣﻦ اﻷﻓﻀﻞ اﺳﺘﺨﺪاﻣﮭﺎ داﺋﻤﺎً.
وﺑﺎﻟﻨﺴﺒﺔ ﻟﺒﻌﺾ اﻷﻟﻮان اﻷﺳﺎﺳﯿﺔ واﻟﺪارﺟﺔ ،ﻣﻦ اﻟﻤﻤﻜﻦ اﺳﺘﺨﺪام أﺳﻤﺎء ھﺬه اﻷﻟﻮان
ﻣﺒﺎﺷﺮة ﺑﺪﻻً ﻣﻦ اﻷرﻗﺎم اﻟﺴﺪاس ﻋﺸﺮﯾﺔ .وھﺬا ﺟﺪول ﯾﻮﺿﺢ ھﺬه اﻷﻟﻮان وﻣﺴﻤﯿﺎﺗﮭﺎ:
ﻣﺜﺎل :
30
www.dinaro.com/vb3
<HTML>
<HEAD>
<TITLE>
first page web
</TITLE>
</HEAD>
<BODY BGCOLOR="#000000"
BACKGROUND=" maroc.jpg">
hello world !!
</BODY>
</HTML>
31
www.dinaro.com/vb3
32
www.dinaro.com/vb3
ﺗﻼﺣﻆ أن اﻟﻤﺘﺼﻔﺢ ﻗﺪ ﻗﺎم ﺑﺘﻜﺮار ﻋﺮض اﻟﺼﻮرة ﺑﻄﺮﯾﻘﺔ اﻟﺘﺠﺎﻧﺐ وأﻧﮭﺎ أﺻﺒﺤﺖ ﺗﻐﻄﻲ
ﻛﻞ اﻟﺸﺎﺷﺔ .ﺑﺤﯿﺚ ﺣﺠﺒﺖ أﯾﻀﺎً اﻟﻠﻮن اﻷﺑﯿﺾ اﻟﺬي ﺣﺪدﻧﺎه ﻛﻠﻮن اﻟﺨﻠﻔﯿﺔ )ﻣﻦ ﺧﻼل
اﻟﺨﺎﺻﯿﺔ (BGCOLORواﻟﺤﻘﯿﻘﺔ أن اﻟﻠﻮن ﯾﻈﮭﺮ ﻓﻘﻂ ﻋﻨﺪﻣﺎ ﻻ ﻧﻘﻮم ﺑﺎﺳﺘﺨﺪام
ﺻﻮرة ﻣﺎ ﻛﺨﻠﻔﯿﺔ .وﻣﻊ ذﻟﻚ ﯾﻔﻀﻞ ﺗﺤﺪﯾﺪه إﺣﺘﯿﺎﻃﺎً ﺧﺎﺻﺔ وأن ﺑﻌﺾ اﻟﻤﺘﺼﻔﺤﺎت اﻟﻘﺪﯾﻤﺔ
ﺗﻮﺻﻒ ﺑﺄﻧﮭﺎ ﻣﺘﺼﻔﺤﺎت ﻧﺼﯿﺔ ) Text-Based Browsersأي ﻟﯿﺲ ﺑﺈﻣﻜﺎﻧﮭﺎ ﻋﺮض
اﻟﺼﻮر( .أو رﺑﻤﺎ ھﻨﺎك ﺑﻌﺾ اﻟﻤﺴﺘﺨﺪﻣﯿﻦ اﻟﺬﯾﻦ ﻗﺎﻣﻮا ﺑﺈﻟﻐﺎء ﺧﯿﺎر ﻋﺮض اﻟﺼﻮر ﺗﻠﻘﺎﺋﯿﺎً
ﻣﻦ ﻣﺘﺼﻔﺤﺎﺗﮭﻢ .إذن ﻟﻨﻌﻄﮭﻢ ﻋﻠﻰ اﻷﻗﻞ ﻓﺮﺻﺔ ﻣﺸﺎھﺪة ﺑﻌﺾ اﻷﻟﻮان إن ﻟﻢ ﯾﺴﺘﻄﯿﻌﻮا
ﻣﺸﺎھﺪة اﻟﺼﻮر.
إﻧﻨﺎ ﻧﺴﺘﻄﯿﻊ اﺳﺘﺨﺪام اﻟﺼﻮر ﺑﺄﺣﺠﺎم ﻣﺨﺘﻠﻔﺔ ﻃﻮﻟﯿﺎً أو ﻋﺮﺿﯿﺎً ﻛﺨﻠﻔﯿﺎت ﻟﻠﺼﻔﺤﺔ،
واﻟﻤﺘﺼﻔﺢ ﻧﻔﺴﮫ ھﻮ اﻟﺬي ﯾﻘﻮم ﺗﻠﻘﺎﺋﯿﺎً ﺑﻌﺮﺿﮭﺎ ﻓﻲ وﺿﻊ اﻟﺘﺠﺎﻧﺐ ﻣﻤﺎ ﯾﻌﻄﻲ اﻻﻧﻄﺒﺎع
ﺑﺄﻧﮭﺎ ﺻﻮرة ﻛﺒﯿﺮة.
33
www.dinaro.com/vb3
واﻵن ،دﻋﻨﺎ ﻧﺠﻤﻞ اﻟﺨﺼﺎﺋﺺ اﻟﺴﺎﺑﻘﺔ ﻓﻲ ﻋﺒﺎرة واﺣﺪة .وﺳﻮف أﻛﺘﺐ اﻟﺮﻣﻮز اﻟﺨﺎﺻﺔ
ﺑﺎﻷﻟﻮان ﺑﻨﻔﺲ ﺗﻠﻚ اﻷﻟﻮان اﻟﺘﻲ ﺗﻤﺜﻠﮭﺎ .وأﻟﻔﺖ ﻧﻈﺮك إﻟﻰ أﻧﮫ ﻻ أھﻤﯿﺔ ﻟﻠﺘﺮﺗﯿﺐ ﻓﻲ ﻛﺘﺎﺑﺔ
ھﺬه اﻟﺨﺼﺎﺋﺺ داﺧﻞ اﻟﻌﺒﺎرة.
ﻣﺜﺎل :
><HTML
><HEAD
><TITLE
first page web
></TITLE
></HEAD
"<BODY BACKGROUND="dinaro.jpg
"BGCOLOR="#ff9900
"TEXT="#33ff66
"LINK="#6600ff
"VLINK="#ff0000
>"ALINK="#999999
!! hello world
></BODY
></HTML
اﻟﻨﺎﺗﺞ:
34
www.dinaro.com/vb3
إذا ﻛﺎﻧﺖ ھﺬه ھﻲ اﺳﺘﻨﺘﺎﺟﺎﺗﻚ ...ﻓﻤﺒﺮوك ،ﻟﻘﺪ ﻧﺠﺤﺖ .وﻛﻞ ﻣﺎ أﺗﻤﻨﺎه أن ﺗﻜﻮن ﻗﺪ ﻗﻀﯿﺖ
وﻗﺘﺎً ﻣﻠﻮﻧﺎً وزاھﯿﺎً ﻣﻊ ھﺬا اﻟﺪرس.
أﻟﯿﺲ ھﺬا
ﻣﻤﺘﻌﺎ
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!
HHHHHHHHHHHHHH
HHHHHHHHHHH
35
www.dinaro.com/vb3
ﺍﻟﺪﺭﺱ ﺍﻟﺜﺎﺙ
ﻻ زﻟﻨﺎ ﻧﻨﺎﻗﺶ ﻣﻌﺎً أﺳﺎﺳﯿﺎت ﺗﻨﺴﯿﻖ ﺻﻔﺤﺎت اﻹﻧﺘﺮﻧﺖ واﻟﺘﺤﻜﻢ ﺑﺨﺼﺎﺋﺼﮭﺎ .وﺳﻮف ﻧﺘﺎﺑﻊ
ذﻟﻚ ﻓﻲ ھﺬا اﻟﺪرس ﻣﻦ ﺧﻼل اﻟﺘﻌﺮف ﻋﻠﻰ اﻟﻮﺳﻮم اﻟﺨﺎﺻﺔ ﺑﺎﻟﺨﻄﻮط.
ﺳﻮف ﺗﻼﺣﻆ ﻓﻲ ھﺬا اﻟﺪرس واﻟﺪروس اﻟﻼﺣﻘﺔ أن ھﻨﺎك أﻛﺜﺮ ﻣﻦ ﻃﺮﯾﻘﺔ ﻷداء ﻧﻔﺲ
اﻟﻌﻤﻞ ،أو إﻋﻄﺎء ﻧﻔﺲ اﻟﺨﺼﺎﺋﺺ ﻟﺼﻔﺤﺎت اﻹﻧﺘﺮﻧﺖ .وﺑﺎﻟﻤﻘﺎﺑﻞ ﻗﺪ ﯾﺒﺪو ﻟﻚ أن ﺑﻌﺾ
اﻟﻮﺳﻮم واﻟﺨﺼﺎﺋﺺ ﻣﺘﺸﺎﺑﮭﺔ ﻓﻲ ﺗﺄﺛﯿﺮھﺎ ،ﻟﻜﻦ ﺑﺎﻟﻘﻠﯿﻞ ﻣﻦ اﻟﺘﺪﻗﯿﻖ واﻟﺘﺠﺮﺑﺔ ﺳﺘﻜﺘﺸﻒ
أن ﻟﻜﻞ وﺳﻢ ﺧﺼﻮﺻﯿﺘﮫ.
راﺟﻊ ﺻﻔﺤﺘﻨﺎ اﻟﺒﺴﯿﻄﺔ اﻟﺘﻲ ﻋﻤﻠﻨﺎ ﻓﯿﮭﺎ ﻓﻲ اﻟﺪرﺳﯿﻦ اﻟﺴﺎﺑﻘﯿﻦ .إﻧﻨﺎ ﻟﻢ ﻧﻘﻢ ﺑﺎﻟﺘﻌﺎﻣﻞ ﻣﻊ
اﻟﺨﻄﻮط ﻓﯿﮭﺎ وﻻ ﺑﺄي ﺷﻜﻞ ﻣﻦ اﻷﺷﻜﺎل .أي أﻧﻨﺎ ﺗﺮﻛﻨﺎھﺎ ﻋﻠﻰ إﻋﺪاداﺗﮭﺎ اﻻﻓﺘﺮاﺿﯿﺔ.
36
www.dinaro.com/vb3
وھﻮ ﯾﻘﻮم ﺑﺎﻟﺘﺤﻜﻢ ﺑﺎﻟﺨﻄﻮط ﻣﻦ ﺣﯿﺚ اﻟﻨﻮع واﻟﻠﻮن واﻟﺤﺠﻢ .أﻣﺎ اﻟﺨﺼﺎﺋﺺ اﻟﺘﻲ
ﻧﺴﺘﺨﺪﻣﮭﺎ ﻣﻊ ھﺬا اﻟﻮﺳﻢ واﻟﻮﺳﻮم اﻷﺧﺮى ﻟﻠﺨﻄﻮط ﻓﮭﻲ ﻛﺎﻟﺘﺎﻟﻲ:
37
www.dinaro.com/vb3
38
www.dinaro.com/vb3
واﻵن أﻋﺮف ﻣﺎذا ﺗﺮﯾﺪ أن ﺗﺴﺄل ،ﺳﺘﻘﻮل ﻟﻘﺪ ﺛﺒﺖ ﺣﺠﻢ اﻟﺨﻂ ﻋﻠﻰ ﺣﺪه اﻷدﻧﻰ ﻋﻨﺪ
اﻟﺪرﺟﺔ 2-وﻋﻠﻰ ﺣﺪه اﻷﻋﻠﻰ ﻋﻨﺪ اﻟﺪرﺟﺔ .4+إذن ﻣﺎ اﻟﻔﺎﺋﺪة ﻣﻦ وﺟﻮد اﻟﺪرﺟﺎت
اﻷﺧﺮى اﻷﻗﻞ ﻣﻦ 2-واﻷﻛﺒﺮ ﻣﻦ 4+؟
ﺣﺴﻨﺎ وأﻧﺎ أﺟﯿﺒﻚ ﺑﺴﺆال آﺧﺮ :ﻣﺎذا ﻟﻮ ﻗﻤﻨﺎ ﺑﺘﻐﯿﯿﺮ اﻟﺤﺠﻢ اﻻﻓﺘﺮاﺿﻲ ﻟﻠﺨﻂ ﻓﻲ ﻛﻞ
اﻟﺼﻔﺤﺔ إﻟﻰ 1ﺑﺪﻻً ﻣﻦ 3؟ )وﺳﻮف ﻧﻘﻮم ﺑﺬﻟﻚ ﻓﻌﻼً ﺑﻌﺪ ﻗﻠﯿﻞ( ،أﻻ ﻧﺤﺘﺎج ﻓﻲ ھﺬه اﻟﺤﺎﻟﺔ
إﻟﻰ اﻟﺪرﺟﺎت ﻣﻦ 1+إﻟﻰ 6+ﻟﺘﻤﺜﯿﻞ اﻷﺣﺠﺎم اﻷﻛﺒﺮ ﻣﻨﮫ؟ وإذا ﻗﻤﻨﺎ ﺑﺘﺤﺪﯾﺪ 7ﻛﺤﺠﻢ
إﻓﺘﺮاﺿﻲ أﻻ ﻧﺤﺘﺎج إﻟﻰ اﻟﺪرﺟﺎت ﻣﻦ 1-إﻟﻰ 6-ﻟﺘﻤﺜﯿﻞ اﻷﺣﺠﺎم اﻷﺻﻐﺮ ﻣﻨﮫ؟ إذن ﻧﺤﻦ
ﻧﺤﺘﺎج ﻓﻌﻼً إﻟﻰ ھﺬه اﻟﺪرﺟﺎت ﻟﻜﻲ ﻧﻐﻄﻲ ﺟﻤﯿﻊ اﻹﺣﺘﻤﺎﻻت اﻟﻮاردة.
وھﺬه ﺑﻌﺾ اﻷﻣﺜﻠﺔ ﻟﺘﻮﺿﺢ ﻟﻚ ﻛﯿﻔﯿﺔ اﺳﺘﺨﺪام ھﺬا اﻟﻮﺳﻢ ،وﺳﻮف أرﻓﻖ ﻧﺘﯿﺠﺔ ﻛﻞ ﻣﺜﺎل
ﺑﻌﺪه ﻣﺒﺎﺷﺮة.
>”<FONT FACE="arial" SIZE="6" COLOR="#6633ff
This font is Arial, Size is 6, Color is Red
></FONT
39
www.dinaro.com/vb3
COLORS
ﻧﻨﺘﻘﻞ اﻵن إﻟﻰ اﻟﻮﺳﻢ اﻟﺜﺎﻧﻲ ﻣﻦ اﻟﻮﺳﻮم اﻟﺨﺎﺻﺔ ﺑﺎﻟﺨﻄﻮط وھﻮ >.<BASEFONT
وﻋﻤﻠﮫ ھﻮ ﺗﺤﺪﯾﺪ ﻧﻮع اﻟﺨﻂ وﺧﺼﺎﺋﺼﮫ ﺑﺎﻟﻨﺴﺒﺔ ﻟﻠﺼﻔﺤﺔ ﻛﻠﮭﺎ .أي أﻧﮫ ﯾﻘﻮم ﺑﺘﻌﺮﯾﻒ
ﻧﻮع اﻟﺨﻂ اﻷﺳﺎﺳﻲ اﻟﺬي ﺳﯿﺴﺘﺨﺪم ﻓﻲ اﻟﺼﻔﺤﺔ ﻣﻦ ﺑﺪاﯾﺘﮭﺎ إﻟﻰ ﻧﮭﺎﯾﺘﮭﺎ وﯾﺤﺪد ﻟﻮﻧﮫ
وﺣﺠﻤﮫ.
ھﻞ ﻻﺣﻈﺖ اﻧﮫ وﺳﻢ ﻣﻔﺮد وﻻ ﯾﺤﺘﻮي ﻋﻠﻰ وﺳﻢ ﻟﻠﻨﮭﺎﯾﺔ؟ ﺑﺎﻟﻄﺒﻊ ﻣﺎ اﻟﺤﺎﺟﺔ إﻟﻰ وﺳﻢ
اﻟﻨﮭﺎﯾﺔ ﻃﺎﻟﻤﺎ أﻧﮫ ﯾﺘﻌﺎﻣﻞ ﻣﻊ اﻟﺼﻔﺤﺔ ﻛﻜﻞ وﻣﻊ اﻹﻋﺪادات اﻷﺳﺎﺳﯿﺔ ﻟﮭﺎ ،وﻟﯿﺲ ﻣﻊ ﻛﻠﻤﺔ
أو ﺳﻄﺮ أو ﻓﻘﺮة ﺑﺬاﺗﮭﺎ .ﻟﺬﻟﻚ ﻓﺈن ھﺬا اﻟﻮﺳﻢ ﯾﻜﺘﺐ ﻋﺎدة ﻓﻲ أول اﻟﻤﻠﻒ ،وﯾﻔﻀﻞ ﻣﺒﺎﺷﺮة
ﺑﻌﺪ وﺳﻢ > .<BODYأﻣﺎ اﻟﺨﺼﺎﺋﺺ اﻟﻤﺴﺘﺨﺪﻣﺔ ﻣﻌﮫ ﻓﮭﻲ ﻧﻔﺲ اﻟﺨﺼﺎﺋﺺ ﺳﺎﻟﻔﺔ
اﻟﺬﻛﺮ ﻣﻊ >) ، <FONTﻧﺴﺘﻄﯿﻊ اﺳﺘﺨﺪام اﻟﺨﺎﺻﯿﺔ Nameﻣﻌﮫ ﺑﺪﻻً ﻣﻦ .(Face
وﺑﻨﻔﺲ اﻟﻄﺮﯾﻘﺔ وﺑﺪون أي اﺧﺘﻼﻓﺎت .وإﻟﯿﻚ ھﺬه اﻟﺸﯿﻔﺮة ﻛﻤﺜﺎل:
41
www.dinaro.com/vb3
وﺑﺪراﺳﺔ ھﺬا اﻟﻤﺜﺎل ﻧﺴﺘﻨﺘﺞ أﻧﮫ ﯾﻘﻮم ﺑﺘﻌﺪﯾﻞ اﻟﺨﻂ اﻻﻓﺘﺮاﺿﻲ ﻟﻠﺼﻔﺤﺔ ﺑﺤﯿﺚ ﯾﺼﺒﺢ
ﻧﻮﻋﮫ Arialوﺣﺠﻤﮫ 5وﻟﻮﻧﮫ أﺣﻤﺮ .وﺑﺎﻟﺘﺎﻟﻲ ﻓﺈن ﻛﻞ اﻟﻨﺼﻮص اﻟﻤﻜﺘﻮﺑﺔ ﻓﻲ ﺗﻠﻚ
اﻟﺼﻔﺤﺔ ﺳﯿﻄﺒﻖ ﻋﻠﯿﮭﺎ ھﺬا اﻟﻨﻤﻂ ﻣﻦ اﻟﺨﻂ .ﻣﺎ ﻟﻢ ﻧﻘﻢ ﻃﺒﻌﺎ ﺑﺎﺳﺘﺨﺪام اﻟﻮﺳﻮم ><Font
<Font/> ...ﻟﺘﻌﺪﯾﻠﮭﺎ واﻟﺘﺤﻜﻢ ﺑﻤﻈﮭﺮھﺎ ﻛﻤﺎ ﻓﻌﻠﻨﺎ ﻓﻲ اﻷﻣﺜﻠﺔ اﻟﺴﺎﺑﻘﺔ ،ﻓﮭﻲ أﻛﺜﺮ ﺗﺤﺪﯾﺪاً
وأﻛﺜﺮ ﻣﺮوﻧﺔ ﻣﻦ اﻟﻮﺳﻢ >. <BASEFONT
وﺑﻤﻨﺎﺳﺒﺔ اﻟﺤﺪﯾﺚ ﻋﻦ اﻷﻟﻮان وﺗﻐﯿﯿﺮ اﻟﻠﻮن اﻷﺳﺎﺳﻲ ﻟﻨﺺ اﻟﺼﻔﺤﺔ .أﻻ ﺗﺬﻛﺮ أﻧﻨﺎ ﻓﻲ
اﻟﺪرس اﻟﺴﺎﺑﻖ ﺗﻜﻠﻤﻨﺎ ﻋﻦ اﻟﺨﺎﺻﯿﺔ Textاﻟﺘﻲ ﺗﻜﺘﺐ ﻣﻊ اﻟﻮﺳﻢ > <Bodyواﻟﺘﻲ
اﺳﺘﺨﺪﻣﻨﺎھﺎ ﻟﺘﺤﺪﯾﺪ ﻟﻮن ﻧﺺ اﻟﺼﻔﺤﺔ ...أﻧﺎ ﻻ زﻟﺖ أذﻛﺮ ذﻟﻚ.
42
www.dinaro.com/vb3
43
www.dinaro.com/vb3
وﻧﺄﺗﻲ اﻵن إﻟﻰ اﻟﺘﻨﺴﯿﻘﺎت واﻟﺘﺄﺛﯿﺮات اﻟﺘﻲ ﯾﻤﻜﻦ إﺿﺎﻓﺘﮭﺎ إﻟﻰ اﻟﻨﺼﻮص .وﻓﯿﻤﺎ ﯾﻠﻲ
اﻟﻮﺳﻮم اﻟﺨﺎﺻﺔ ﺑﮭﺎ ﻣﺘﺒﻮﻋﺔ ﺑﻤﺜﺎل وﻧﺘﯿﺠﺘﮫ:
üاﻟﺨﻂ اﻟﻤﺎﺋﻞ
><I> ... </I
><EM> ... </EM
üاﻟﺨﻂ اﻟﻤﺴﻄﺮ
><U> ... </U
üاﻟﺨﻂ اﻟﻤﺮﺗﻔﻊ
><SUP> ... </SUP
44
www.dinaro.com/vb3
اﻟﺨﻂ اﻟﻤﻨﺨﻔﺾü
<SUB> ... </SUB>
ﺧﻂ ﻛﺒﯿﺮü
<BIG> ... </BIG>
ﺧﻂ ﺻﻐﯿﺮü
<SMALL> ... </SMALL>
ﻧﺺ ﯾﻌﺘﺮﺿﮫ ﺧﻂü
<STRIKE> ... </STRIKE>
<S> ... </S>
45
www.dinaro.com/vb3
إذا أﺧﺬﻧﺎ اﻟﺤﺮﻓﯿﻦ m,iوﻛﺘﺒﻨﺎ ﻛﻞ ﻣﻨﮭﻤﺎ ﻋﺸﺮ ﻣﺮات ﻣﺘﺘﺎﻟﯿﺔ ﻧﻼﺣﻆ أن اﻟﻤﺴﺎﺣﺔ اﻟﺘﻲ
ﺷﻐﻠﮭﺎ اﻟﺤﺮف mھﻲ أﺿﻌﺎف اﻟﻤﺴﺎﺣﺔ اﻟﺘﻲ ﺷﻐﻠﮭﺎ اﻟﺤﺮف i
iiiiiiiiii
mmmmmmmmmm
أﻣﺎ ﻋﻨﺪ اﺳﺘﺨﺪام اﻟﻮﺳﻢ > </TT> ... <TTﻓﺈن اﻟﻤﺴﺎﺣﺔ اﻟﺘﻲ ﯾﺸﻐﻠﮭﺎ ﻛﻼ اﻟﺤﺮﻓﯿﻦ
ﺗﺼﺒﺢ ﻣﻮﺣﺪة
iiiiiiiiii
mmmmmmmmmm
><B><I><U
This is a Bold, Italic and Underlined Text
></U> </I> </B
46
www.dinaro.com/vb3
><FONT COLOR="#6633ff="+3"><U><I
This text is red, size +3, Italic, and Underlined
></I> </U> </FONT
وﻗﺪ أردت ﻣﻦ ھﺬه اﻷﻣﺜﻠﺔ ﺗﻮﺿﯿﺢ ﻣﺴﺎﺋﻞ ﻣﻌﯿﻨﺔ أوﻟﮭﺎ :أن ﺑﺈﻣﻜﺎﻧﻨﺎ اﺳﺘﺨﺪام ﻋﺪة وﺳﻮم
وﺗﻨﺴﯿﻘﺎت ﻣﻌﺎً ﻓﻲ ﻧﻔﺲ اﻟﻮﻗﺖ وﻟﻨﻔﺲ اﻟﻤﻘﻄﻊ ﻣﻦ اﻟﻨﺺ) .وذﻟﻚ ﻟﺠﻤﯿﻊ اﻟﻮﺳﻮم وﻟﯿﺲ
ﻓﻘﻂ ﻟﻮﺳﻮم اﻟﺨﻄﻮط( .وﻛﻤﺎ ذﻛﺮت ﺳﺎﺑﻘﺎً ،ﻻ أھﻤﯿﺔ ﻟﺘﺮﺗﯿﺐ ھﺬه اﻟﻮﺳﻮم وﻻ أﯾﮭﺎ ورد
أوﻻً ...ﻟﻜﻦ
ﻋﻨﺪ اﺳﺘﺨﺪام اﻟﻮﺳﻮم اﻟﻤﺘﻌﺪدة ﻓﻲ ﻣﻘﻄﻊ واﺣﺪ ﯾﺠﺐ ﻣﺮاﻋﺎة ﻋﺪم اﻟﺘﺪاﺧﻞ ﺑﯿﻨﮭﺎ! ...ﻛﯿﻒ؟
أﻧﻈﺮ إﻟﻰ اﻟﺮﺳﻢ اﻟﺘﺎﻟﻲ:
47
www.dinaro.com/vb3
><B><I><U
This is a Bold, Italic and Underlined Text
></B> </U> </I
أﻋﺮف أﻧﻚ ﻟﻢ ﺗﺼﺪﻗﻨﻲ وأﻧﻚ ﻗﻤﺖ ﺑﺘﺠﺮﺑﺔ ھﺬه اﻟﻮﺳﻮم ورﺑﻤﺎ ﺣﺼﻠﺖ ﻋﻠﻰ ﻧﺘﯿﺠﺔ
ﺻﺤﯿﺤﺔ .ﺣﺴﻨﺎً اﻟﻌﺒﺮة ﻟﯿﺴﺖ ﻓﻲ ﻋﺒﺎرة واﺣﺪة ﻣﻜﻮﻧﺔ ﻣﻦ وﺳﻤﯿﻦ أو ﺛﻼﺛﺔ ﺗﻜﺘﺒﮭﺎ ﻓﻲ
ﻣﻠﻒ ﺻﻐﯿﺮ ﺑﻞ ﻓﻲ ﺻﻔﺤﺔ إﻧﺘﺮﻧﺖ ﻛﺎﻣﻠﺔ ﻗﺪ ﺗﺘﺄﻟﻒ ﻣﻦ ﻣﺌﺎت أو ﺣﺘﻰ آﻻف اﻟﻮﺳﻮم ﻣﻜﺘﻮﺑﺔ
ﻓﻲ ﻣﻠﻒ ﺧﺎلٍ ﻣﻦ اﻷﺧﻄﺎء اﻟﻤﻨﻄﻘﯿﺔ واﻟﺘﺪاﺧﻼت اﻟﺘﻲ ﻗﺪ ﺗﺴﺒﺐ اﻹرﺑﺎك ﻟﻠﻤﺘﺼﻔﺤﺎت،
وﺗﺆدي إﻟﻰ ﻋﺪم ﻋﺮض ھﺬه اﻟﺼﻔﺤﺔ ﺑﺎﻟﺸﻜﻞ اﻟﻤﻨﺎﺳﺐ واﻟﻤﻄﻠﻮب.
ﻟﺬﻟﻚ ﻓﺄھﻤﯿﺔ أن ﺗﺘﺠﻨﺐ وﺟﻮد اﻟﻮﺳﻮم اﻟﻤﺘﺪاﺧﻠﺔ ﻓﻲ ﺻﻔﺤﺘﻚ ھﻮ ﺑﻨﻔﺲ اﻷھﻤﯿﺔ اﻟﺘﻲ ﯾﺠﺐ
أن ﺗﻮﻟﯿﮭﺎ ﻟﻜﺘﺎﺑﺔ ھﺬه اﻟﻮﺳﻮم ﺑﺎﻟﺼﻮرة اﻟﺼﺤﯿﺤﺔ إﻣﻼﺋﯿﺎً .وإﻻ ﻓﺎﻟﻤﺘﺼﻔﺤﺎت ﻻ ﺗﺮﺣﻢ.
وﻛﺜﯿﺮة ھﻲ اﻟﻤﺮات اﻟﺘﻲ ﺣﺼﻞ ﻓﯿﮭﺎ اﻟﻤﺼﻤﻤﻮن ﻋﻠﻰ ﺻﻔﺤﺎت ﻣﻨﮭﺎرة ﺑﺴﺒﺐ ﻧﺴﯿﺎن
ﺣﺮف واﺣﺪ أو إﺷﺎرة ﻣﺜﻞ > أو < أو "
ﺑﺈﺧﺘﺼﺎر ﺷﺪﯾﺪ ...وﻛﻘﺎﻋﺪة أﺳﺎﺳﯿﺔ ،اﻟﺼﻔﺤﺔ اﻟﻤﺼﻤﻤﺔ ﺟﯿﺪاً ھﻲ اﻟﺼﻔﺤﺔ ذات اﻟﻮﺳﻮم
اﻟﺼﺤﯿﺤﺔ وﻏﯿﺮ اﻟﻤﺘﺪاﺧﻠﺔ.
وﺻﻠﻨﺎ اﻵن إﻟﻰ ﻧﮭﺎﯾﺔ ھﺬا اﻟﺪرس .أﺗﻤﻨﻰ أن ﺗﻜﻮن ﻗﺪ ﻗﻀﯿﺖ وﻗﺘﺎً ﻣﻤﺘﻌﺎً ﻣﻌﮫ .وأن ﻻ
ﯾﻜﻮن ﻗﺪ أﺣﺪث ﺗﺪاﺧﻼً ﻓﻲ وﺳﻮم أﻓﻜﺎرك .أراك ﻓﻲ اﻟﺪرس اﻟﺘﺎﻟﻲ.
48
www.dinaro.com/vb3
أﻟﯿﺲ ھﺬا
ﻣﻤﺘﻌﺎ
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHHHHH
49
www.dinaro.com/vb3
ﺍﻟﺪﺭﺱ ﺍﻟﺮﺍﺑﻊ
ﻓﻲ ھﺬا اﻟﺪرس ﺳﻮف ﻧﻨﺎﻗﺶ اﻟﻮﺳﻮم اﻟﺨﺎﺻﺔ ﺑﺎﻟﻔﻘﺮات ﺑﺸﻜﻞ ﺧﺎص وﺗﺮﺗﯿﺐ اﻟﺼﻔﺤﺎت
وﺗﻨﺴﯿﻘﮭﺎ ﺑﺸﻜﻞ ﻋﺎم.
ﻟﻘﺪ ﻗﻤﺖ ﻓﻲ اﻟﺪرس اﻷول ﺑﺈﯾﻀﺎح ﺑﻌﺾ اﻟﻮﺳﻮم اﻟﺨﺎﺻﺔ ﺑﺎﻟﻔﻘﺮات .وﻻ ﺑﺄس ﻣﻦ ﺗﺬﻛﯿﺮك
ﺑﮭﺎ .ﻓﺎﻟﻮﺳﻢ > <Pﯾﻘﻮم ﺑﺈﻧﮭﺎء اﻟﻔﻘﺮة .واﻟﻮﺳﻢ > <BRﯾﻨﮭﻲ اﻟﺴﻄﺮ اﻟﺤﺎﻟﻲ وﯾﻨﻘﻞ
اﻟﻨﺺ إﻟﻰ ﺳﻄﺮ ﺟﺪﯾﺪ .واﻟﻮﺳﻢ &; nbspﯾﻘﻮم ﺑﺈﺿﺎﻓﺔ اﻟﻔﺮاﻏﺎت ،وﯾﺠﺐ ﺗﻜﺮار ﻛﺘﺎﺑﺘﮫ
ﺑﻨﻔﺲ ﻋﺪد اﻟﻔﺮاﻏﺎت اﻟﻤﻄﻠﻮب.
50
www.dinaro.com/vb3
... <P> < ھﻮ وﺳﻢ ﻣﻔﺮد ﻟﻜﻨﮫ ﯾﺴﺘﺨﺪم أﯾﻀﺎً ﻛﻮﺳﻢ ﻣﺰدوجP> ﻟﻘﺪ ﻗﻠﺖ إن اﻟﻮﺳﻢ
< وﻓﻲ ھﺬه اﻟﺤﺎﻟﺔ ﯾﻤﻜّﻨﻨﺎ ﻣﻦ ﺗﺤﺪﯾﺪ إﺗﺠﺎه اﻟﻔﻘﺮة وإﺗﺠﺎه اﻟﻨﺺ ﻓﯿﮭﺎ ﺣﯿﺚ ﯾﺴﺘﺨﺪم/P>
.DIR ،ALIGN ﻣﻌﮫ اﻟﺨﺼﺎﺋﺺ
Center, Right ،Left ﺗﺤﺪد ﻣﺤﺎذاة اﻟﻔﻘﺮة وھﻲ ﺗﺄﺧﺬ اﻟﻘﯿﻢALIGN ﻓﺎﻟﺨﺎﺻﯿﺔ
:وأوﺿﺤﮭﺎ ﺑﺎﻷﻣﺜﻠﺔ اﻟﺘﺎﻟﯿﺔ
ﻛﺬﻟﻚ ﻟﺘﻮﺳﯿﻂ اﻟﻔﻘﺮات أو اﻟﻜﺎﺋﻨﺎت ﺑﺸﻜﻞ ﻋﺎم ﻓﻲ اﻟﺼﻔﺤﺔ ﻧﺴﺘﻄﯿﻊ اﺳﺘﺨﺪام اﻟﻮﺳﻮم
<CENTER/> ... <CENTER>
51
www.dinaro.com/vb3
أﻣﺎ اﻟﺨﺎﺻﯿﺔ DIRواﻟﺘﻲ ﻧﺴﺘﺨﺪﻣﮭﺎ أﯾﻀﺎً ﻣﻊ > <Pﻓﺘﻘﻮم ﺑﺘﺤﺪﯾﺪ إﺗﺠﺎه ﻗﺮاءة اﻟﻨﺺ
وﺗﺄﺧﺬ اﻟﻘﯿﻢ
)ﺗﺬﻛﺮ ھﺬه اﻟﺨﺎﺻﯿﺔ ﺟﯿﺪاً ﻓﮭﻲ ﻣﮭﻤﺔ ﻋﻨﺪ ﻛﺘﺎﺑﺔ ﺻﻔﺤﺎت ﺑﺎﻟﻠﻐﺔ اﻟﻌﺮﺑﯿﺔ(
أﻧﻈﺮ إﻟﻰ اﻟﻔﻘﺮة اﻟﺘﺎﻟﯿﺔ اﻟﺘﻲ ﻗﻤﺖ )ﺑﺎﻗﺘﺒﺎﺳﮭﺎ( ﻣﻦ إﺣﺪى ﺻﻔﺤﺎت ھﺬا اﻟﻤﻮﻗﻊ .وﻣﻦ ﺛﻢ
وﺿﻌﺘﮭﺎ ﺿﻤﻦ ></BLOCKQUOTE> ... <BLOCKQUOTE
واﻟﺤﻘﯿﻘﺔ أﻧﻚ ﺗﺴﺘﻄﯿﻊ وﺿﻊ ﻋﺪة وﺳﻮم ﻣﻌﺎً إذا أردت إدراج ھﻮاﻣﺶ أﻛﺒﺮ .ﻛﻤﺎ ﻓﻲ
اﻟﻤﺜﺎل اﻟﺘﺎﻟﻲ:
52
www.dinaro.com/vb3
><BLOCKQUOTE
><BLOCKQUOTE
اﻟﻨﺺ ﯾﻜﺘﺐ ھﻨﺎ
></BLOCKQUOTE
></BLOCKQUOTE
وﺑﺎﻟﻄﺒﻊ ﻟﯿﺲ ﺷﺮﻃﺎً أن ﺗﺴﺘﺨﺪم ھﺬا اﻟﻮﺳﻮم ﻣﻊ اﻟﻔﻘﺮات اﻟﻤﻘﺘﺒﺴﺔ ﻓﻘﻂ .ﻓﺄﻧﺎ ﻣﺜ ً
ﻼ
أﺿﻌﮭﺎ ﻓﻲ ﺑﺪاﯾﺔ وﻧﮭﺎﯾﺔ ﻛﻞ ﺻﻔﺤﺔ ﻣﻦ ﺻﻔﺤﺎت ھﺬا اﻟﻤﻮﻗﻊ .وﺑﺎﻟﺘﺎﻟﻲ ﯾﻈﮭﺮ اﻟﻨﺺ ﺑﻌﯿﺪاً
ﻗﻠﯿﻼً ﻋﻦ ﺣﺎﺷﯿﺔ اﻟﺼﻔﺤﺔ ﻓﮭﺬا أﻓﻀﻞ ﻣﻦ أن ﯾﻜﻮن ﻣﻼﺻﻘﺎً ﻟﮭﺎ وأﺟﻤﻞ.
رﺑﻤﺎ ﺗﻮﺻﻠﺖ إﻟﻰ أﻧﻲ اﺳﺘﺨﺪﻣﺖ ﻋﺪداً ﻛﺒﯿﺮاً ﻣﻦ وﺳﻮم اﻟﻔﺮاﻏﺎت &; nbspوﻧﮭﺎﯾﺔ
اﻟﺴﻄﺮ >.<BR
ﺣﺴﻨﺎً ،إﺳﺘﻨﺘﺎﺟﻚ ﻻ ﺑﺄس ﺑﮫ وﻟﻜﻨﮫ ﻟﯿﺲ دﻗﯿﻘﺎً ﻓﺄﻧﺎ ﻟﻢ أﺳﺘﺨﺪم أﯾﺎً ﻣﻦ ھﺬه اﻟﻮﺳﻮم ھﻨﺎ.
وھﻤﺎ اﺧﺘﺼﺎر ﻟﻜﻠﻤﺔ Preformatedأي اﻟﻤﻨﺴﻖ ﻣﺴﺒﻘﺎً .وﺑﺎﻟﻔﻌﻞ ﻓﻘﺪ اﺣﺘﻔﻆ ھﺬا
اﻟﺸﻜﻞ ﺑﺎﻟﺘﻨﺴﯿﻖ اﻟﻤﺴﺒﻖ اﻟﺬي ﺗﻢ إﻋﺪاده ﺑﮫ .ﻟﻜﻦ ﺗﻢ ﺗﺤﻮﯾﻞ اﻟﺨﻂ إﻟﻰ ﺧﻂ ﻣﻮﺣﺪ
اﻟﻤﺴﺎﻓﺎت )راﺟﻊ اﻟﺪرس اﻟﺴﺎﺑﻖ( وﻟﻮ ﻟﻢ أﻗﻢ ﺑﻮﺿﻌﮫ ﺿﻤﻦ ھﺬه اﻟﻮﺳﻮم ﻟﻜﺎﻧﺖ اﻟﻨﺘﯿﺠﺔ
ﻛﺎﻟﺘﺎﻟﻲ:
ABCDEFGHIJKLMNOPQRST
ﻻﺣﻆ أن ھﺬا اﻟﻮﺳﻢ ﯾﺴﺘﺨﺪم ﻣﻊ اﻟﻔﻘﺮات اﻟﺘﻲ ﻻ ﻧﺤﺘﺎج ﻓﯿﮭﺎ إﻟﻰ ﺗﻨﺴﯿﻘﺎت ﻣﺘﻌﺪدة
ﻟﻠﺨﻄﻮط أو اﻷﻟﻮان .ﺑﻞ ﻓﻘﻂ ﻣﻊ اﻟﻔﻘﺮات اﻟﻌﺎدﯾﺔ ﻣﻮﺣﺪة اﻟﺨﻂ واﻟﺘﻨﺴﯿﻘﺎت.
اﻟﻘﻮاﺋﻢ
54
www.dinaro.com/vb3
اﻟﻘﺪس .1
ﻧﺎﺑﻠﺲ .2
رام اﷲ .3
اﻟﺨﻠﯿﻞ .4
ﺟﻨﯿﻦ .5
ﻃﻮﻟﻜﺮم .6
ﻋﻨﺪ اﻟﺘﻌﺎﻣﻞ ﻣﻊ اﻟﻘﻮاﺋﻢ ﺑﻨﻮﻋﯿﮭﻤﺎ ﻧﺤﺘﺎج إﻟﻰ وﺳﻮم ﺧﺎﺻﺔ ﺑﺘﺤﺪﯾﺪ ﺑﺪاﯾﺔ وﻧﮭﺎﯾﺔ اﻟﻘﺎﺋﻤﺔ
ووﺳﻮم ﺗﺤﺪد ﺑﻨﻮد ھﺬه اﻟﻘﺎﺋﻤﺔ.
وﻟﺘﻌﯿﯿﻦ ﻛﻞ ﺑﻨﺪ ﻣﻦ ﺑﻨﻮد اﻟﻘﺎﺋﻤﺔ ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ > <LIوھﻮ وﺳﻢ ﻣﻔﺮد ﯾﻜﺘﺐ
ﻓﻲ ﺑﺪاﯾﺔ اﻟﺴﻄﺮ اﻟﺨﺎص ﺑﻜﻞ ﺑﻨﺪ .List Item
><OL
اﻟﻘﺪس><LI
ﻧﺎﺑﻠﺲ><LI
اﷲ رام><LI
اﻟﺨﻠﯿﻞ><LI
ﺟﻨﯿﻦ><LI
ﻃﻮﻟﻜﺮم><LI
></OL
><UL
اﻟﻨﺠﺎح ﺟﺎﻣﻌﺔ><LI
ﺟﺎﻣﻌﺔ اﻟﻘﺪس اﻟﻤﻔﺘﻮﺣﺔ><LI
ﺑﯿﺮزﯾﺖ ﺟﺎﻣﻌﺔ><LI
ﺟﺎﻣﻌﺔ اﻟﺨﻠﯿﻞ><LI
></UL
56
www.dinaro.com/vb3
وﻟﻜﻦ ﻧﺴﺘﻄﯿﻊ اﺳﺘﺨﺪاﻣﮭﺎ أﯾﻀﺎً ﻣﻊ وﺳﻢ اﻟﺒﻨﻮد > <LIﻹﻋﻄﺎء ﺗﺤﻜﻢ أﻛﺒﺮ ﻓﻲ ﻣﻈﮭﺮ
اﻟﻘﺎﺋﻤﺔ ﻣﻦ ﺧﻼل ﺗﺤﺪﯾﺪ رﻣﺰ ﻣﺨﺘﻠﻒ ﻟﻜﻞ ﺑﻨﺪ.
ﻓﻌﻨﺪ وﺿﻌﮭﺎ ﺿﻤﻦ ﺗﻌﺮﯾﻒ اﻟﻘﻮاﺋﻢ اﻟﻤﺘﺴﻠﺴﻠﺔ ﺗﺄﺧﺬ اﻟﻘﯿﻢ A, a, I, i :اﻟﺘﻲ ﺗﻐﯿﺮ رﻣﻮز
اﻟﺘﺮﻗﯿﻢ ﻣﻦ اﻷرﻗﺎم اﻟﻌﺎدﯾﺔ اﻹﻓﺘﺮاﺿﯿﺔ )واﻟﺘﻲ رﻣﺰھﺎ (1إﻟﻰ ﺗﺮﻗﯿﻢ ﺑﺎﺳﺘﺨﺪام اﻷﺣﺮف
اﻟﻼﺗﯿﻨﯿﺔ اﻟﻜﺒﯿﺮة أو اﻟﺼﻐﯿﺮة ،أو ﺑﺎﺳﺘﺨﺪام اﻷرﻗﺎم اﻟﺮوﻣﺎﻧﯿﺔ ﻛﻤﺎ ﺗﺮى ﻓﻲ اﻟﺠﺪول
اﻟﺘﺎﻟﻲ:
واﻟﺤﺪﯾﺚ ﻋﻦ ھﺬه اﻟﺨﺎﺻﯿﺔ ﯾﻘﻮدﻧﻲ إﻟﻰ اﻟﺤﺪﯾﺚ ﻋﻦ ﻣﺴﺄﻟﺔ ﻣﮭﻤﺔ ﻓﻲ ﻟﻐﺔ HTML
وھﻲ ﻣﺴﺄﻟﺔ اﻟﻮﺳﻮم واﻟﺨﺼﺎﺋﺺ اﻟﻤﺤﺪدة ﺑﻤﺘﺼﻔﺢ ﻣﻌﯿﻦ دون ﻏﯿﺮه أي اﻟﺘﻲ ﺗﻌﻤﻞ ﻣﻊ
أﺣﺪ اﻟﻤﺘﺼﻔﺤﺎت وﻻ ﺗﻌﻤﻞ ﻣﻊ ﻏﯿﺮه.
57
www.dinaro.com/vb3
واﻟﺴﺒﺐ ﻓﻲ ذﻟﻚ أن ھﺬه اﻟﺨﺎﺻﯿﺔ ﺗﺴﺘﺨﺪم أﯾﻀﺎً ﻣﻊ اﻟﻘﻮاﺋﻢ ﻏﯿﺮ اﻟﻤﺘﺴﻠﺴﻠﺔ ،ﻟﻜﻦ ﻟﯿﺲ
ﺑﺼﻮرة ﻣﻄﻠﻘﺔ...ﻛﯿﻒ؟ أﻧﺖ ﺗﺮى أن اﻟﺮﻣﺰ اﻟﻤﻮﺟﻮد ﻋﻨﺪ ﻛﻞ ﺑﻨﺪ ﻓﻲ اﻟﻘﺎﺋﻤﺔ ھﻮ ﻋﺒﺎرة
ﻋﻦ ﻧﻘﻄﺔ ﺳﻮداء ﯾﻄﻠﻖ ﻋﻠﯿﮭﺎ اﺳﻢ Discوھﻲ اﻟﻤﻌﺮﻓﺔ ﺿﻤﻨﺎً ﻓﻲ ﺧﺎﺻﯿﺔ .TYPE
ﻟﻜﻦ ھﻨﺎك رﻣﻮز أﺧﺮى ﯾﻤﻜﻦ إﻇﮭﺎرھﺎ وھﻲ اﻟﻤﺮﺑﻊ ،squareواﻟﺪاﺋﺮة اﻟﻤﻔﺮﻏﺔ
circleوﺗﻌﺮف ﺑﺎﻟﺸﻜﻞ اﻟﺘﺎﻟﻲ:
>"<UL TYPE="square
>"<UL TYPE="circle
وﻟﻜﻦ ﻟﻸﺳﻒ ھﺬه اﻟﺨﺎﺻﯿﺔ ﻻ ﺗﻌﻤﻞ وﻻ ﯾﻈﮭﺮ ﺗﺄﺛﯿﺮھﺎ إﻻ ﻣﻊ ﻣﺘﺼﻔﺢ ﻧﯿﺘﺴﻜﯿﺐ وﻟﯿﺲ
ﻣﻊ ﻣﺎﯾﻜﺮوﺳﻮﻓﺖ إﻛﺴﺒﻠﻮرر اﻟﺬي ﯾﺘﻌﺎﻣﻞ ﻓﻘﻂ ﻣﻊ اﻟﻘﯿﻤﺔ اﻹﻓﺘﺮاﺿﯿﺔ ﻟﻠﺨﺎﺻﯿﺔ) .رﺟﺎءً ﻻ
ﯾﻐﻀﺐ ﻣﺴﺘﺨﺪﻣﻮ إﻛﺴﺒﻠﻮرر ﻓﮭﻨﺎك اﻟﻜﺜﯿﺮ ﻣﻦ اﻟﻮﺳﻮم واﻟﺨﺼﺎﺋﺺ اﻟﺘﻲ ﻻ ﯾﺴﺘﻄﯿﻊ
ﻧﯿﺘﺴﻜﯿﺐ ﻋﺮﺿﮭﺎ أﯾﻀﺎً(.
وﻹﺗﻤﺎم اﻟﺤﺪﯾﺚ ﻋﻦ اﻟﻘﻮاﺋﻢ ،أذﻛﺮ ﻟﻚ أن ھﻨﺎك وﺳﻮﻣﺎً أﺧﺮى ﺗﺴﺘﺨﺪم ﻹﻧﺸﺎء اﻟﻘﻮاﺋﻢ
ﻏﯿﺮ اﻟﻤﺘﺴﻠﺴﻠﺔ ،وﺑﻨﻔﺲ اﻟﻄﺮﯾﻘﺔ اﻟﻤﺴﺘﺨﺪﻣﺔ ﻣﻊ > </UL>...<ULوھﺬه اﻟﻮﺳﻮم
ھﻲ:
ھﻨﺎك ﻧﻮع ﺧﺎص ﻣﻦ اﻟﻘﻮاﺋﻢ ﯾﺪﻋﻰ ﻗﻮاﺋﻢ اﻟﺸﺮح أو اﻟﺘﻌﺮﯾﻔﺎت Definition Lists
وﻛﻤﺎ ﯾﺪل اﻹﺳﻢ ﺗﺴﺘﺨﺪم ﻋﻨﺪﻣﺎ ﻧﺮﯾﺪ إدراج ﻗﺎﺋﻤﺔ ﻣﻦ اﻟﻤﺼﻄﻠﺤﺎت ﯾﺘﺒﻊ ﻛﻞ واﺣﺪ ﻣﻨﮭﺎ
ﺷﺮح أو ﺗﻌﻠﯿﻖ.
58
www.dinaro.com/vb3
HTML
Hyper Text Markup Language
WWW
World Wide Web
FTP
File Transfer Protocol
GIF
Graphical Interchange Format
JPG, JPEG
Joint Photographic Experts Group
.< وھﻮ وﺳﻢ اﻟﺸﺮح أو اﻟﺘﻌﻠﯿﻖ وھﻮ أﯾﻀﺎ ﻣﻔﺮدDD> أﻣﺎ اﻟﺜﺎﻟﺚ ﻓﮭﻮ
59
www.dinaro.com/vb3
وﺻﻠﻨﺎ اﻵن إﻟﻰ ﻧﮭﺎﯾﺔ ھﺬا اﻟﺪرس ،واﻟﺬي ﻧﺎﻗﺸﻨﺎ ﻓﯿﮫ ﺗﺮﺗﯿﺐ اﻟﺼﻔﺤﺎت واﻟﻔﻘﺮات
واﻟﻘﻮاﺋﻢ .أﺗﻤﻨﻰ ﻟﻚ ﺻﻔﺤﺎت ﻣﺮﺗﺒﺔ داﺋﻤﺎً.
أﻟﯿﺲ ھﺬا
ﻣﻤﺘﻌﺎ
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHHHHHHH
60
www.dinaro.com/vb3
ﺍﻟﺪﺭﺱ ﺍﻟﺨﺎﻣﺲ
أھﻼً وﺳﮭﻼً ﺑﻚ إﻟﻰ اﻟﺪرس اﻟﺨﺎﻣﺲ ﻣﻦ ﻛﺘﺎب ﺗﻌﻠﻢ .HTML
ﻓﻲ ھﺬا اﻟﺪرس ﺳﻮف أﻗﻮم ﺑﺎﻟﺤﺪﯾﺚ ﻋﻦ اﻟﺼﻮر واﻟﺮﺳﻮﻣﺎت وﻣﺎ ﯾﺘﻌﻠﻖ ﺑﺎﻟﺘﻌﺎﻣﻞ ﻣﻌﮭﺎ،
ﺑﺎﻹﺿﺎﻓﺔ إﻟﻰ اﻟﺘﻌﺮﯾﻒ ﺑﺄﻧﻮاع اﻟﻤﻠﻔﺎت اﻟﺮﺳﻮﻣﯿﺔ اﻟﺪارﺟﺔ ﻓﻲ اﻹﻧﺘﺮﻧﺖ.
ﻟﻘﺪ اﻗﺘﺼﺮ ﺣﺪﯾﺜﻨﺎ ﻋﻦ اﻟﺼﻮر ﺣﺘﻰ اﻵن ﻋﻠﻰ إﺿﺎﻓﺔ ﺧﻠﻔﯿﺎت ﻟﻠﺼﻔﺤﺎت ،وﻛﺎن ذﻟﻚ ﻓﻲ
اﻟﺪرس اﻟﺜﺎﻧﻲ أﻣﺎ إدراج اﻟﺼﻮر ﺿﻤﻦ اﻟﺼﻔﺤﺎت ﻧﻔﺴﮭﺎ ﻓﻠﮫ ﺣﻜﺎﯾﺔ أﺧﺮى ،أﺑﺪأ ﺑﺮواﯾﺘﮭﺎ
ﻟﻚ اﻵن.
إن اﻟﻮﺳﻢ اﻟﺮﺋﯿﺴﻲ اﻟﻤﺴﺘﺨﺪم ﻟﺘﻌﺮﯾﻒ ﺻﻮرة ﻣﺎ داﺧﻞ اﻟﺼﻔﺤﺔ ھﻮ > <IMGوھﻮ
وﺳﻢ ﻣﻔﺮد .ﻟﻜﻦ ھﻞ ﯾﻜﻔﻲ ھﺬا ﻹدراج ﺻﻮرة؟ ﻛﻼ ،ﺑﺎﻟﻄﺒﻊ ﯾﺠﺐ أن ﻧﺤﺪد اﻟﺼﻮرة اﻟﺘﻲ
ﻧﺮﯾﺪھﺎ .ﻟﺬﻟﻚ ﻧﻀﯿﻒ اﻟﺨﺎﺻﯿﺔ ﻟﮫ SRCﻟﺘﺤﺪﯾﺪ ﻣﻮﻗﻊ واﺳﻢ اﻟﺼﻮرة.
اﻟﺼﻮرة اﻟﺘﺎﻟﯿﺔ إﺳﻤﮭﺎ alah.jpgوﻋﻨﺪﻣﺎ ﻗﻤﺖ ﺑﺈدراﺟﮭﺎ .ﻛﺎﻧﺖ اﻟﺸﯿﻔﺮة اﻟﺨﺎﺻﺔ ﺑﺬﻟﻚ
ھﻲ
:
>" <IMG SRC=" alah.jpg
61
www.dinaro.com/vb3
واﻟﺼﯿﻐﺔ ھﺬه ﺗﻔﺘﺮض أن اﻟﺼﻮرة ﻣﻮﺟﻮدة ﻓﻲ ﻧﻔﺲ اﻟﺪﻟﯿﻞ اﻟﻔﺮﻋﻲ أو اﻟﻤﺠﻠﺪ ﺣﯿﺚ
ﯾﺘﻮاﺟﺪ ﻣﻠﻒ HTMLاﻟﺬي أﻋﻤﻞ ﻋﻠﯿﮫ ،وﻗﻤﺖ ﺑﺎﺳﺘﺪﻋﺎء اﻟﺼﻮرة ﻣﻦ ﺧﻼﻟﮫ .ﻟﻜﻦ ﻣﺎذا
ﻟﻮ ﻛﺎﻧﺖ اﻟﺼﻮرة ﻓﻲ ﻣﺠﻠﺪ ﻓﺮﻋﻲ آﺧﺮ؟ ﺣﺴﻨﺎ ﺳﻮف اﻧﺎﻗﺶ ﻣﻌﻚ ﺣﺎﻟﺘﯿﻦ ﻟﮭﺬه اﻟﻤﺴﺄﻟﺔ.
اﻟﺤﺎﻟﺔ اﻷوﻟﻰ :أن ﺗﻜﻮن اﻟﺼﻮرة ﻣﻮﺟﻮدة ﻓﻲ ﻣﺠﻠﺪ ﻣﺘﻔﺮع ﻋﻦ اﻟﻤﺠﻠﺪ اﻟﻤﻮﺟﻮد ﺑﮫ
ﻣﻠﻒ HTMLﺣﺴﺐ اﻟﺸﻜﻞ اﻟﺘﺎﻟﻲ:
ﻧﻘﻮم ﻓﻲ ھﺬه اﻟﺤﺎﻟﺔ ﺑﻜﺘﺎﺑﺔ إﺳﻢ ھﺬا اﻟﻤﺠﻠﺪ ﺗﺘﺒﻌﮫ إﺷﺎرة /ﺛﻢ اﺳﻢ اﻟﺼﻮرة.
62
www.dinaro.com/vb3
اﻟﺤﺎﻟﺔ اﻟﺜﺎﻧﯿﺔ :أن ﯾﻜﻮن ﻣﻠﻒ HTMLﻣﻮﺟﻮداً ﻓﻲ ﻣﺠﻠﺪ ﻣﺎ وﺗﻜﻮن اﻟﺼﻮرة ﻣﻮﺟﻮدة
ﻓﻲ ﻣﺠﻠﺪ آﺧﺮ ﺑﻨﻔﺲ اﻟﻤﺴﺘﻮى .أي أﻧﮭﻤﺎ ﻣﺠﻠﺪﯾﻦ ﻣﺘﺠﺎورﯾﻦ وﻟﯿﺴﺎ ﻣﺘﻔﺮﻋﯿﻦ أﺣﺪھﻤﺎ ﻋﻦ
اﻵﺧﺮ.
وﻓﻲ ھﺬه اﻟﺤﺎﻟﺔ ﻧﻜﺘﺐ ) ..ﻧﻘﻄﺘﯿﻦ( ﻟﺘﻮﺟﯿﮫ اﻟﻤﺘﺼﻔﺢ ﻟﻠﺨﺮوج ﻣﻦ اﻟﻤﺠﻠﺪ اﻟﻔﺮﻋﻲ اﻟﺤﺎﻟﻲ
)ﺣﯿﺚ ﯾﻮﺟﺪ ﻣﻠﻒ (HTMLوﻣﻦ ﺛﻢ اﻟﺪﺧﻮل إﻟﻰ اﻟﻤﺠﻠﺪ imagesﺣﯿﺚ ﺗﻮﺟﺪ
اﻟﺼﻮرة.
وﺑﺸﻜﻞ ﻋﺎم ،ﻣﮭﻤﺎ ﻛﺎﻧﺖ ﻣﻮاﻗﻊ ﺗﻮاﺟﺪ اﻟﻤﻠﻔﺎت ﻓﺈن ﻋﻤﻠﯿﺔ ﺗﺤﺪﯾﺪ ﻣﻮاﻗﻌﮭﺎ واﻟﻮﺻﻮل
إﻟﯿﮭﺎ ﻻ ﺗﺨﺮج ﻋﻦ ﻧﻄﺎق ھﺬا اﻟﻨﻤﻂ ﻣﻦ اﻟﺸﯿﻔﺮة .أي ﻛﺘﺎﺑﺔ اﻟﻨﻘﻄﺘﯿﻦ ﻟﻠﺨﺮوج ﻣﻦ ﻣﺠﻠﺪ
ﻓﺮﻋﻲ ،وﻛﺘﺎﺑﺔ اﺳﻢ اﻟﻤﺠﻠﺪ اﻟﺬي ﯾﺠﺐ اﻟﺪﺧﻮل إﻟﯿﮫ.
63
www.dinaro.com/vb3
ﺗﺘﻌﺮف ﻓﯿﮭﺎ ﻋﻠﻰ ھﺬه اﻟﻮﺣﺪة( وﻛﻤﺎ ﺗﻼﺣﻆ ﺗﻢ إدراج اﻟﺼﻮرة ﻣﻊ اﻟﻤﺤﺎﻓﻈﺔ ﻋﻠﻰ ھﺬه
اﻷﺑﻌﺎد .وﻣﻊ ذﻟﻚ ﻓﻨﺤﻦ ﻧﺴﺘﻄﯿﻊ اﻟﺘﺤﻜﻢ أﯾﻀﺎً ﺑﮭﺎ وإﻇﮭﺎر اﻟﺼﻮرة ﺑﺎﻟﺤﺠﻢ اﻟﺬي ﻧﺮﯾﺪه
ﻣﻦ ﺧﻼل ھﺬا اﻟﻮﺳﻢ .ﻛﯿﻒ؟ ﺑﺈﺿﺎﻓﺔ اﻟﺨﺼﺎﺋﺺ HEIGHT, WIDTHﻣﺘﺒﻮﻋﺔ
ﺑﺄرﻗﺎم ﺗﻤﺜﻞ اﻹرﺗﻔﺎع واﻟﻌﺮض اﻟﻤﻄﻠﻮﺑﯿﻦ.
64
www.dinaro.com/vb3
اﻟﺨﺎﺻﯿﺔ اﻟﺘﺎﻟﯿﺔ اﻟﺘﻲ ﺗﺴﺘﺨﺪم ﻣﻊ > <IMGھﻲ ALTوﻓﯿﮭﺎ ﻧﺤﺪد ﻧﺼﺎً ﺑﺪﯾﻼً ﯾﻈﮭﺮ
ﻣﻜﺎن اﻟﺼﻮرة .وھﺬا اﻟﻨﺺ ﯾﻼﺣﻆ ﺧﺼﻮﺻﺎً ﻋﻨﺪﻣﺎ ﯾﻜﻮن ﺧﯿﺎر "إﻇﮭﺎر اﻟﺼﻮر ﺗﻠﻘﺎﺋﯿﺎً"
ﻏﯿﺮ ﻓﻌﺎل ﻓﻲ اﻟﻤﺘﺼﻔﺢ .ﻛﻤﺎ ﺗﺴﺘﻄﯿﻊ ﻣﻼﺣﻈﺘﮫ ﻓﻲ اﻟﻔﺘﺮة اﻟﺘﻲ ﺗﺴﺒﻖ ﺗﺤﻤﯿﻞ اﻟﺼﻮر
وﺧﺎﺻﺔ ﻓﻲ اﻟﻤﻮاﻗﻊ ﺑﻄﯿﺌﺔ اﻟﺘﺤﻤﯿﻞ.
ﻋﻨﺪﻣﺎ ﻧﻘﻮم ﺑﺈدراج ﺻﻮرة ﺿﻤﻦ ﻓﻘﺮة ﻓﺈن ﻣﻮﻗﻊ ﻇﮭﻮرھﺎ ﯾﺘﺤﺪد ﺑﺎﻟﻄﺒﻊ ﺣﺴﺐ ﺗﺮﺗﯿﺐ
ورودھﺎ ﻓﻲ اﻟﻔﻘﺮة ،ﻣﺜﻠﮭﺎ ﻣﺜﻞ أي ﻛﻠﻤﺔ أو ﻋﺒﺎرة أﺧﺮى .وﻧﺴﺘﺨﺪم اﻟﺨﺎﺻﯿﺔ ALIGN
ﻟﺘﺤﺪﯾﺪ ﻣﺤﺎذاة اﻟﺼﻮرة ﻣﻊ اﻟﻨﺺ اﻟﻤﺮاﻓﻖ ﻟﮭﺎ أو ﻟﻨﻘﻞ ﺑﻌﺒﺎرة أﺧﺮى :ﺗﺤﺪﯾﺪ ﻣﻮﻗﻊ اﻟﻨﺺ
اﻟﺬي ﯾﻠﯿﮭﺎ ﺑﺎﻟﻨﺴﺒﺔ ﻟﮭﺎ وھﻲ ﺗﺄﺧﺬ اﻟﻘﯿﻢBOTTOM, TOP, MIDDLE, :
RIGHT ،LEFTوأوﺿﺢ ﻟﻚ ﺗﺄﺛﯿﺮ ﻛﻞ ﻗﯿﻤﺔ ﻛﻤﺎ ﯾﻠﻲ:
65
www.dinaro.com/vb3
واﻵن ﺑﻌﺪ أن ﻗﻤﻨﺎ ﺑﺘﺤﺪﯾﺪ ﻣﺤﺎذاة اﻟﺼﻮرة ﻧﺤﺘﺎج إﻟﻰ ﺗﺤﺪﯾﺪ اﻟﻤﺴﺎﻓﺔ اﻟﻔﺎﺻﻠﺔ ﺑﯿﻨﮭﺎ
وﺑﯿﻦ اﻟﻨﺺ اﻟﺬي ﯾﺠﺎورھﺎ .وﻧﺴﺘﺨﺪم ﻟﺬﻟﻚ اﻟﺨﺼﺎﺋﺺ اﻟﺘﺎﻟﯿﺔ:
ﻣﺜﺎل :
واﻵن ﺣﺎن اﻟﻮﻗﺖ ﻟﻜﻲ ﻧﻨﺎﻗﺶ ﻣﻌﺎً ﺑﻌﺾ اﻷﻣﻮر اﻟﺘﻲ ﺗﺘﻌﻠﻖ ﺑﺎﻟﺼﻮر واﻟﺮﺳﻮﻣﺎت ﺑﺸﻜﻞ
ﻋﺎم.
üھﻞ ﺣﺎوﻟﺖ أن ﺗﺘﻌﺮف ﻋﻠﻰ أﻧﻮاع اﻟﻤﻠﻔﺎت اﻟﺮﺳﻮﻣﯿﺔ اﻟﺘﻲ ﺗﻘﻮم ﺑﺘﺤﻤﯿﻠﮭﺎ ﺧﻼل
ﺗﺼﻔﺤﻚ ﻟﻤﻮاﻗﻊ اﻹﻧﺘﺮﻧﺖ؟
67
www.dinaro.com/vb3
ﯾﺰﺧﺮ ﻋﺎﻟﻢ اﻟﻜﻤﺒﯿﻮﺗﺮ ﺑﺎﻟﻌﺸﺮات ﻣﻦ أﻧﻮاع اﻟﻤﻠﻔﺎت اﻟﺮﺳﻮﻣﯿﺔ وﺗﻨﺴﯿﻘﺎت اﻟﺼﻮر .وﻛﻞ
ﻣﻨﮭﺎ ﯾﺨﺘﻠﻒ ﻋﻦ ﻏﯿﺮه ﻣﻦ ﻋﺪة ﻧﻮاح ،أذﻛﺮ ﻟﻚ ﻣﻨﮭﺎ :اﻟﺪﻗﺔ ،وﻋﺪد اﻷﻟﻮان اﻟﺘﻲ
ﯾﺴﺘﻮﻋﺒﮭﺎ ،واﻟﺤﺠﻢ اﻟﺘﺨﺰﯾﻨﻲ ﻟﻠﻤﻠﻒ .ﻟﻜﻦ ھﻨﺎك ﻧﻮﻋﯿﻦ ﻓﻘﻂ ﻣﻦ ھﺬه اﻟﻤﻠﻔﺎت ﯾﺘﻢ
ﺗﺪاوﻟﮭﻤﺎ ﺣﺎﻟﯿﺎً ﻓﻲ اﻹﻧﺘﺮﻧﺖ وھﻤﺎ:
JPG, JPEG
إﺧﺘﺼﺎر ﻟـِ .Group Experts Photographic Jointوﯾﺪﻋﻢ ھﺬا اﻟﺘﻨﺴﯿﻖ ﺻﻮراً
ﺑﻌﯿﺎر 24ﺑﺖ )أي 16.7ﻣﻠﯿﻮن ﻟﻮن( .وﻣﯿﺰة ھﺬا اﻟﺘﻨﺴﯿﻖ ﺗﺘﻤﺜﻞ ﻓﻲ إﻣﻜﺎﻧﯿﺔ ﺿﻐﻂ
اﻟﺼﻮر ﺑﻨﺴﺐ ﻣﺨﺘﻠﻔﺔ ﻋﻨﺪ ﺗﺨﺰﯾﻨﮭﺎ وﺑﺎﻟﺘﺎﻟﻲ اﻟﺤﺼﻮل ﻋﻠﻰ ﺻﻮر ﺻﻐﯿﺮة اﻟﺤﺠﻢ
ﻧﺴﺒﯿﺎً).أﻋﻨﻲ ھﻨﺎ ﺣﺠﻢ اﻟﺘﺨﺰﯾﻦ ﺑﺎﻟﻜﯿﻠﻮﺑﺎﯾﺘﺎت وﻟﯿﺲ أﺑﻌﺎد اﻟﺼﻮرة( .ﻟﻜﻦ ﺑﺎﻟﻤﻘﺎﺑﻞ ﻛﻠﻤﺎ
إزدادت ﻧﺴﺒﺔ اﻟﻀﻐﻂ وﺻﻐﺮ ﺣﺠﻢ اﻟﻤﻠﻒ ﻛﺎن ذﻟﻚ ﻋﻠﻰ ﺣﺴﺎب اﻟﺠﻮدة واﻟﻮﺿﻮح.
GIF
إﺧﺘﺼﺎر ﻟـِ Format Interchange Graphicalوأﻗﺼﻰ ﻋﺪد ﻟﻸﻟﻮان ﻓﻲ ھﺬا
اﻟﺘﻨﺴﯿﻖ ھﻮ 265ﻟﻮن .وﻣﻊ ذﻟﻚ ﻓﺈن أﺣﺠﺎم اﻟﺼﻮر اﻟﻤﺨﺰﻧﺔ ﺑﮫ ﻛﺒﯿﺮ ﻧﺴﺒﯿﺎً ﻣﻘﺎرﻧﺔ
ﺑﺘﻨﺴﯿﻖ .JPGﻟﻜﻦ ھﻨﺎك ﻣﺰاﯾﺎ راﺋﻌﺔ ﯾﻨﻔﺮد ﺑﮭﺎ ﺗﻨﺴﯿﻖ GIFﻣﻤﺎ ﯾﺴﺘﺪﻋﻲ اﺳﺘﺨﺪاﻣﮫ
ﻓﻲ ﺻﻔﺤﺎت اﻟﻮﯾﺐ ،أوﻟﮭﺎ اﻟﻘﺪرة ﻋﻠﻰ ﺗﺨﺰﯾﻦ ﺻﻮر ﺑﺨﻠﻔﯿﺎت ﺷﻔﺎﻓﺔ Transparent
Imagesوﺛﺎﻧﯿﮭﺎ اﻟﺼﻮر اﻟﻤﺘﺤﺮﻛﺔ Animated Gifs
وﺗﺠﺪ ﻣﻌﻠﻮﻣﺎت واﻓﯿﺔ ودروﺳﺎً ﻣﻔﺼﻠﺔ ﺣﻮل ھﺬه اﻟﻤﻮاﺿﯿﻊ ﺿﻤﻦ دروس Paint
.Shop Pro
واﻵن ﻗﺪ ﺗﺴﺄل ،أي ﻣﻦ ھﺬﯾﻦ اﻟﺘﻨﺴﯿﻘﯿﻦ أﺳﺘﺨﺪم ﻓﻲ ﺻﻔﺤﺎﺗﻲ؟! ﻻ ﯾﻮﺟﺪ ﺟﻮاب ﻗﻄﻌﻲ
ﻟﮭﺬا اﻟﺴﺆال ﻟﻜﻦ إﻟﯿﻚ ھﺎﺗﯿﻦ اﻟﻤﻌﺎدﻟﺘﯿﻦ:
68
www.dinaro.com/vb3
üﻣﺎ ھﻲ درﺟﺔ إﺳﺘﺒﺎﻧﺔ ﺷﺎﺷﺘﻚ Resolution؟ إذا ﻛﻨﺖ ﻻ ﺗﻌﺮف اﻟﺠﻮاب ﻗﻢ ﺑﻔﺘﺢ
ﺗﻄﺒﯿﻖ ﻟﻮﺣﺔ اﻟﺘﺤﻜﻢ ﻓﻲ وﯾﻨﺪوز 95وإﺧﺘﺮ أﯾﻘﻮﻧﺔ)اﻟﻌﺮض( ﺛﻢ اﺧﺘﺮ اﻟﺘﺒﻮﯾﺐ )إﻋﺪادات(
وھﻨﺎك ﺳﻮف ﺗﺸﺎھﺪ "ﻣﺴﺎﺣﺔ ﺳﻄﺢ اﻟﻤﻜﺘﺐ" اﻟﺬي ﯾﺪل ﻋﻠﻰ درﺟﺔ إﺳﺘﺒﺎﻧﺔ اﻟﺸﺎﺷﺔ،
وﻋﻠﻰ اﻷﻏﻠﺐ ﺳﺘﻜﻮن 480×640أو ،600×800وھﻨﺎك درﺟﺎت أﻋﻠﻰ ﺗﻌﺘﻤﺪ ﻋﻠﻰ
ﻗﺪرة ﻣﺤﻮل اﻟﻌﺮض .ﻛﺬﻟﻚ ﺳﻮف ﺗﺸﺎھﺪ "ﻟﻮح اﻷﻟﻮان" اﻟﺬي ﯾﺪل ﻋﻠﻰ ﻋﺪد اﻷﻟﻮان
اﻟﺘﻲ ﯾﻤﻜﻦ ﻋﺮﺿﮭﺎ ﺑﺎﻹﻋﺪادات اﻟﺤﺎﻟﯿﺔ ﻟﻠﺸﺎﺷﺔ.
أﻣﺎ ﻓﻲ وﯾﻨﺪوز 3.11أو 3.1ﻓﺎﺧﺘﺮ أﯾﻘﻮﻧﺔ ﺑﺮﻧﺎﻣﺞ إﻋﺪاد Windowsﻣﻦ ﻟﻮﺣﺔ اﻟﺘﺤﻜﻢ
ﻓﺘﻈﮭﺮ ﻟﻚ ﻗﺎﺋﻤﺔ ﺗﺠﺪ ﺑﻀﻤﻨﮭﺎ ﻧﻮع وإﺳﺘﺒﺎﻧﺔ اﻟﺸﺎﺷﺔ.
ھﺬا اﻟﺤﺪﯾﺚ ﯾﻘﻮدﻧﻲ إﻟﻰ وﺣﺪة اﻟﺒﯿﻜﺴﻞ ) Pixelأﻟﻢ أﻋﺪك ﻣﺴﺒﻘﺎً ﺑﺘﻮﺿﯿﺤﮭﺎ( .وھﻲ
اﺧﺘﺼﺎر ﻟـِ .Picture Elementإذا ﻛﺎﻧﺖ ﺷﺎﺷﺘﻚ ﺑﺈﺳﺘﺒﺎﻧﺔ 480×640ﻓﮭﺬا ﯾﻌﻨﻲ
أﻧﮭﺎ ﻣﻘﺴﻤﺔ)ﻧﻈﺮﯾﺎً( إﻟﻰ ﺷﺒﻜﺔ ﻣﻦ 640ﻋﻤﻮد و 480ﺳﻄﺮ .وﺑﻤﻨﺘﮭﻰ اﻟﺒﺴﺎﻃﺔ ،إن ﻛﻞ
ﺧﻠﯿﺔ ﻣﻦ ھﺬه اﻟﺸﺒﻜﺔ ﺗﻤﺜﻞ ﺑﯿﻜﺴﻞ وﺑﺎﻟﻄﺒﻊ ﻛﻠﻤﺎ زادت اﻹﺳﺘﺒﺎﻧﺔ ﻛﻠﻤﺎ ﺻﻐﺮ ﺣﺠﻢ وﺣﺪة
اﻟﺒﯿﻜﺴﻞ.
ﻓﺎﻟﻤﻘﺼﻮد ﺣﻘﯿﻘﺔً ﺑﮭﺎ ھﻲ ﺗﻠﻚ اﻟﺼﻮرة اﻟﺼﻐﯿﺮة ﺟﺪاً اﻟﺘﻲ ﺗﻘﻮم ﺑﺎﻟﻨﻘﺮ ﻋﻠﯿﮭﺎ ﻓﺘﺆدي إﻟﻰ
ﻋﺮض ﺻﻮرة ﺑﺤﺠﻢ أﻛﺒﺮ .ﻟﺬﻟﻚ ﻗﺪ ﯾﻜﻮن اﻟﻤﺼﻄﻠﺢ اﻷﻧﺴﺐ ﻟﻮﺻﻔﮭﺎ ھﻮ "اﻟﻌﯿّﻨﺔ".
69
www.dinaro.com/vb3
)وإذا ﻛﻨﺖ ﻗﺪ زرت أﺣﺪ اﻟﻤﻮاﻗﻊ اﻹﺧﺒﺎرﯾﺔ ﻟﺮأﯾﺖ ﻛﯿﻒ ﯾﺘﻢ ﻋﺮض ﻋﯿﻨﺎت وﺻﻮر
ﻣﺼﻐﺮة ﻟﻠﻘﻄﺎت اﻷﺣﺪاث وﻋﻨﺪ اﻟﻨﻘﺮ ﻋﻠﻰ اﻟﻌﯿﻨﺔ ﺗﻈﮭﺮ اﻟﺼﻮرة اﻷﺻﻠﯿﺔ .إذن أﻧﺖ ﻟﺴﺖ
ﻣﺠﺒﺮاً ﻋﻠﻰ اﻹﻧﺘﻈﺎر ﻟﻮﻗﺖ ﻃﻮﯾﻞ ﻟﺤﯿﻦ ﻇﮭﻮر ﺻﻮرة ذات ﺣﺠﻢ ﻛﺒﯿﺮ ﻟﻠﻘﻄﺔ ﻟﺴﺖ ﻣﻌﻨﯿﺎً
ﺑﮭﺎ(.
وﻣﻦ اﻟﻮاﺿﺢ أن اﺳﺘﺨﺪام اﻟﻌﯿﻨﺎت ﻣﻔﯿﺪ وﻋﻤﻠﻲ ﺟﺪاً وأن وﺿﻌﮭﺎ ﻓﻲ اﻟﻤﻮاﻗﻊ اﻟﺘﻲ
ﺗﺤﺘﻮي ﻋﻠﻰ اﻟﻌﺪﯾﺪ ﻣﻦ اﻟﺼﻮر ﯾﺆدي إﻟﻰ ﺗﻘﻠﯿﻞ اﻟﺰﻣﻦ اﻟﻼزم ﻟﺘﺤﻤﯿﻞ اﻟﺼﻔﺤﺎت وﺗﺠﻨﺐ
ﺿﯿﺎع اﻟﻮﻗﺖ ﺑﺎﻧﺘﻈﺎر ﻇﮭﻮر اﻟﺼﻮر اﻷﺻﻠﯿﺔ ﻛﺒﯿﺮة اﻟﺤﺠﻢ .ﻷﻧﮭﺎ ﺗﻌﻄﻲ اﻟﺰاﺋﺮ اﻟﺤﺮﯾﺔ
ﻓﻲ اﻟﻨﻘﺮ ﻋﻠﯿﮭﺎ إذا رﻏﺐ ﻓﻲ رؤﯾﺔ اﻷﺻﻞ أو ﺗﺠﺎھﻠﮭﺎ .أﻣﺎ ﻛﯿﻒ ﯾﺘﻢ ﻋﻤﻞ ھﺬه اﻟﻌﯿﻨﺎت؟
ﻓﺬﻟﻚ ﺑﺎﺳﺘﺨﺪام أﺣﺪ ﺑﺮاﻣﺞ ﻣﻌﺎﻟﺠﺔ اﻟﺮﺳﻮم ﻛﺒﺮﻧﺎﻣﺞ .Pro Paint Shopﻣﻦ ﺧﻼل
ﺗﺼﻐﯿﺮ أﺑﻌﺎد اﻟﺼﻮر اﻷﺻﻠﯿﺔ إﻟﻰ اﻟﻨﺴﺒﺔ اﻟﻤﻄﻠﻮﺑﺔ.
أﻋﺮف ﻣﺎذا ﺳﺘﺴﺄل اﻵن ،ﺳﺘﻘﻮل أﻟﻢ ﻧﺘﻌﻠﻢ ﻗﺒﻞ ﻗﻠﯿﻞ ﻛﯿﻔﯿﺔ ﻋﺮض اﻟﺼﻮر ﻣﻊ اﻟﺘﺤﻜﻢ
ﺑﺄﺑﻌﺎدھﺎ؟ أﻻ ﯾﺆدي اﺳﺘﺨﺪام اﻟﺨﺼﺎﺋﺺ HEIGHT ،WIDTHإﻟﻰ اﻟﺘﺤﻜﻢ ﺑﺤﺠﻢ
اﻟﺼﻮر وﻋﺮﺿﮭﺎ ﺑﻨﺴﺐ ﻣﺼﻐﺮة ﺣﺴﺐ ﻣﺎ ھﻮ ﻣﻄﻠﻮب؟
إن اﺳﺘﺨﺪاﻣﻚ ﻟﮭﺬه اﻟﺨﺼﺎﺋﺺ ﯾﺆدي إﻟﻰ إﻇﮭﺎر اﻟﺼﻮرة ﺑﺤﯿﺚ ﺗﺒﺪو ﻣﺼﻐﺮة ،ﻟﻜﻨﻚ
ﻓﻌﻠﯿﺎً ﻗﻤﺖ ﺑﺈﺟﺒﺎر ﻣﺘﺼﻔﺢ اﻟﺰاﺋﺮ ﻋﻠﻰ ﺗﺤﻤﯿﻞ اﻟﺼﻮرة ﺑﺎﻟﺤﺠﻢ واﻷﺑﻌﺎد اﻷﺻﻠﯿﺔ ﺛﻢ
ﻋﺮﺿﮭﺎ ﺑﺎﻟﺤﺠﻢ اﻟﻤﺼﻐﺮ أي أﻧﻚ ﻓﻲ اﻟﻨﮭﺎﯾﺔ ﻟﻢ ﺗﺤﻘﻖ اﻟﻐﺎﯾﺔ ﻣﻦ وﺟﻮد ھﺬه اﻟﻌﯿﻨﺎت.
أﻟﯿﺲ ھﺬا
ﻣﻤﺘﻌﺎ
70
www.dinaro.com/vb3
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HH
71
www.dinaro.com/vb3
ﺍﻟﺪﺭﺱ ﺍﻟﺴﺎﺩﺱ
...Linksأو اﻟﻮﺻﻼت اﻟﺘﺸﻌﺒﯿﺔ ھﻲ روح اﻹﻧﺘﺮﻧﺖ .وإذا ﻛﺎﻧﺖ اﻹﻧﺘﺮﻧﺖ ﺑﻤﺠﻤﻠﮭﺎ ھﻲ
ﺷﺒﻜﺔ اﻟﻌﻨﻜﺒﻮت ﻓﺈن ھﺬه اﻟﻮﺻﻼت ھﻲ اﻟﺨﯿﻮط اﻟﺘﻲ ﺗﺸﻜﻞ ھﺬه اﻟﺸﺒﻜﺔ وﺗﺆﻟﻒ ﺣﻠﻘﺎت
اﻟﻮﺻﻞ ﺑﯿﻦ اﻟﻤﻼﯾﯿﻦ ﻣﻦ ﻣﻮاﻗﻌﮭﺎ .ﺗﻨﻘﺮ ﻋﻠﻰ وﺻﻠﺔ ﻣﺎ ﻓﺘﻨﻘﻠﻚ إﻟﻰ ﺻﻔﺤﺔ أﺧﺮى ﻓﻲ
ﻧﻔﺲ اﻟﻤﻮﻗﻊ ...وﺗﻨﻘﺮ ﻋﻠﻰ وﺻﻠﺔ أﺧﺮى ﻟﺘﻨﻘﻠﻚ ﻛﻠﯿﺎً إﻟﻰ أﺣﺪ اﻟﻤﻮاﻗﻊ ﻓﻲ اﻟﺠﺎﻧﺐ اﻵﺧﺮ
ﻣﻦ اﻟﻌﺎﻟﻢ ...وﺻﻠﺔ ﺗﺠﻌﻠﻚ ﺗﺤﻤّﻞ ﻣﻠﻔﺎً وأﺧﺮى ﺗﺠﻌﻠﻚ ﺗﺸﻐّﻞ ﻣﻘﻄﻌﺎ ﻣﻮﺳﯿﻘﯿﺎً وﺛﺎﻟﺜﺔ
ﺗﻌﺮض ﻟﻚ ﺻﻮرة...
ﺣﺴﻨﺎً ،ﻣﻦ اﻟﻤﺆﻛﺪ أﻧﻚ اﺳﺘﻨﺘﺠﺖ اﻵن ﻣﻦ ھﺬه اﻟﻤﻘﺪﻣﺔ أﻧﻚ ﺑﺼﺪد ﺗﻌﻠﻢ ﻛﯿﻔﯿﺔ إدراج
اﻟﻮﺻﻼت اﻟﺘﺸﻌﺒﯿﺔ ﻓﻲ ﺻﻔﺤﺎﺗﻚ ...ﻟﻘﺪ ﺻﺪق اﺳﺘﻨﺘﺎﺟﻚ ﻟﺬﻟﻚ ھﯿﺎ إﻟﻰ اﻟﻌﻤﻞ...
ھﻨﺎك ﻋﺪة ﺧﯿﺎرات ﻟﻠﻮﺻﻼت اﻟﺘﺸﻌﺒﯿﺔ ،ﻣﻨﮭﺎ أن ﺗﻜﻮن اﻟﻮﺻﻠﺔ ﻟﻤﻮﻗﻊ آﺧﺮ ،أو أن ﺗﻜﻮن
ﻟﺼﻔﺤﺔ أﺧﺮى داﺧﻞ اﻟﻤﻮﻗﻊ ﻧﻔﺴﮫ ،وﻣﻨﮭﺎ أن ﺗﻜﻮن ﻟﻤﻜﺎن آﺧﺮ ﻓﻲ ﻧﻔﺲ اﻟﺼﻔﺤﺔ )إﻟﻰ
أﻋﻠﻰ أو أﺳﻔﻞ ﻋﻠﻰ ﺳﺒﯿﻞ اﻟﻤﺜﺎل( أو أن ﺗﻜﻮن وﺻﻠﺔ ﻟﻌﻨﻮان ﺑﺮﯾﺪ إﻟﻜﺘﺮوﻧﻲ E-mail
وﻓﻲ ﺟﻤﯿﻊ اﻟﺤﺎﻻت ﻓﺈن اﻟﻤﺒﺪأ واﺣﺪ ﻟﻜﻦ ﺗﺨﺘﻠﻒ ﺑﻌﺾ اﻟﺘﻔﺎﺻﯿﻞ .وﺳﻮف أﻧﺎﻗﺶ ﻣﻌﻚ
ﻛﻞ ﺣﺎﻟﺔ ﻋﻠﻰ ﺣﺪة وﺑﺎﻟﺘﻔﺼﯿﻞ.
72
www.dinaro.com/vb3
ﻧﺴﺘﺨﺪم اﻟﻮﺳﻮم
></A> ... <A
HREF
اﻟﺘﻲ ﻧﺤﺪد ﻣﻦ ﺧﻼﻟﮭﺎ اﻟﻤﻮﻗﻊ اﻟﺬي ﻧﺮﯾﺪ اﻟﺪﻻﻟﺔ ﻋﻠﯿﮫ ،وﯾﺠﺐ أن ﯾﻜﺘﺐ ﻋﻨﻮان اﻟﻤﻮﻗﻊ
ﻛﺎﻣﻼً.
ﻟﻨﻘﻢ ﺑﺈدراج وﺻﻠﺔ ﺗﺸﻌﺒﯿﺔ إﻟﻰ أﺣﺪ اﻟﻤﻮاﻗﻊ اﻟﻌﺮﺑﯿﺔ اﻟﺮاﺋﺪة واﻟﺮاﺋﻌﺔ ،وھﻮ ﻣﻮﻗﻊ ﺷﺮﻛﺔ
ﺻﺨﺮ .وﻋﻨﻮاﻧﮫ http://www.Dinaro.com/vb3ﻓﻲ ھﺬه اﻟﺤﺎﻟﺔ ﯾﺘﻢ ﻛﺘﺎﺑﺔ
اﻟﺸﯿﻔﺮة ﺑﺎﻟﺸﻜﻞ اﻟﺘﺎﻟﻲ:
ﻟﻢ ﺗﻌﺠﺒﻚ؟ ﻟﯿﺲ ذﻟﻚ ﻣﺸﻜﻠﺔ ﻓﺄﻧﺖ ﺗﺴﺘﻄﯿﻊ ﻛﺘﺎﺑﺔ أي ﺷﻲء ﺗﺮﯾﺪه ﻛﻌﻨﻮان ﻟﻠﻮﺻﻠﺔ اﻟﺘﻲ
ﺗﺮﯾﺪھﺎ .ﻣﺎ رأﯾﻚ ﻟﻮ ﺟﻌﻠﻨﺎ ﻛﻠﻤﺔ Dinaroھﻲ ﻓﻘﻂ اﻟﻌﻨﻮان ﻟﮭﺬه اﻟﻮﺻﻠﺔ
Go To Dinaro
ﺑﻞ إﻧﻚ ﺗﺴﺘﻄﯿﻊ إدراج ﺻﻮرة أو )زر( ﻛﺒﺪﯾﻞ ﻋﻦ اﻟﻜﻠﻤﺎت -ﻛﻤﺎ ﺗﺸﺎھﺪ ﻓﻲ اﻟﻜﺜﯿﺮ ﻣﻦ
اﻟﻤﻮاﻗﻊ -وﻛﻞ ﻣﺎ ﻋﻠﯿﻚ ﻓﻌﻠﮫ ﻓﻲ ھﺬه اﻟﺤﺎﻟﺔ ھﻮ ﻛﺘﺎﺑﺔ اﻟﻮﺳﻢ اﻟﺨﺎص ﺑﺈدراج اﻟﺼﻮرة
ﺑﯿﻦ اﻟﻮﺳﻤﯿﻦ > </A> ... <Aﺑﺎﻟﺸﻜﻞ اﻟﺘﺎﻟﻲ:
واﻟﺬي ﯾﺆدي إﻟﻰ ﻇﮭﻮر اﻟﺼﻮرة اﻟﺘﺎﻟﯿﺔ ﻛﻮﺻﻠﺔ ﺗﺸﻌﺒﯿﺔ ﻟﻤﻮﻗﻊ دﯾﻨﺎروا
74
www.dinaro.com/vb3
وﺑﺸﻜﻞ ﻋﺎم ﻓﺈن أي ﺷﻲء ﯾﻮﺿﻊ ﺑﯿﻦ اﻟﻮﺳﻤﯿﻦ > </A> ... <Aﺳﻮف ﯾﻜﻮن اﻟﻮﺳﯿﻠﺔ
أو اﻟﻌﻨﻮان اﻟﺬي ﯾﻨﻘﻠﻨﺎ إﻟﻰ اﻟﻤﻮﻗﻊ اﻟﻤﺸﺎر إﻟﯿﮫ ﻓﻲ اﻟﻮﺻﻠﺔ اﻟﺘﺸﻌﺒﯿﺔ ،ﺳﻮاءً ﻛﺎن ھﺬا
اﻟﺸﻲء ﻧﺼﺎً أو ﺻﻮرة أو ﻛﻼھﻤﺎ ﻣﻌﺎً.
واﻵن ھﻞ ﺗﻼﺣﻆ اﻹﻃﺎر اﻟﻈﺎھﺮ ﺣﻮل اﻟﺼﻮرة؟ وھﻞ ﺗﺬﻛﺮ ﻣﺘﻰ ﻗﻤﻨﺎ ﺑﺎﻟﺤﺪﯾﺚ ﻋﻦ ھﺬا
اﻟﻨﻮع ﻣﻦ اﻹﻃﺎرات؟ ﻧﻌﻢ ،ﻓﻲ اﻟﺪرس اﻟﺴﺎﺑﻖ .ﻋﻨﺪ إدراج ﺻﻮرة ﻛﻮﺻﻠﺔ ﺗﺸﻌﺒﯿﺔ ﯾﻈﮭﺮ
ﺣﻮﻟﮭﺎ إﻃﺎر ﺳﻤﻜﮫ 2ﺑﯿﻜﺴﻞ وھﺬه ھﻲ اﻟﺤﺎﻟﺔ اﻹﻓﺘﺮاﺿﯿﺔ .وﺑﺎﻟﻄﺒﻊ ﻧﺴﺘﻄﯿﻊ إزاﻟﺘﮫ
ﺑﻜﺘﺎﺑﺔ اﻟﺨﺎﺻﯿﺔ " BORDER="0ﺿﻤﻦ وﺳﻢ اﻟﺼﻮرة.
ﻧﻨﺘﻘﻞ اﻵن إﻟﻰ اﻟﺤﺎﻟﺔ اﻟﺜﺎﻧﯿﺔ ،وھﻲ أن ﺗﺸﯿﺮ اﻟﻮﺻﻠﺔ اﻟﺘﺸﻌﺒﯿﺔ إﻟﻰ ﻣﻠﻒ ﻣﻮﺟﻮد ﻓﻲ ﻧﻔﺲ
اﻟﻤﻮﻗﻊ )أي ﻣﻠﻒ ﻣﺤﻠﻲ( ﺳﻮاءً ﻛﺎن ﻣﻠﻒ HTMLأو ﺻﻮرة أو ﻏﯿﺮ ذﻟﻚ .وﻓﻲ ھﺬه
اﻟﺤﺎﻟﺔ ﻓﺈن ﻣﺎ ﯾﻜﺘﺐ ﻣﻊ اﻟﺨﺎﺻﯿﺔ HREFھﻮ اﺳﻢ ھﺬا اﻟﻤﻠﻒ اﻟﻤﻄﻠﻮب اﻟﻮﺻﻮل إﻟﯿﮫ.
ﻟﻨﻘﻢ ﺑﺈﻧﺸﺎء وﺻﻠﺔ ﺗﺸﻌﺒﯿﺔ ﺗﻘﻮدﻧﺎ إﻟﻰ اﻟﺼﻔﺤﺔ اﻟﺮﺋﯿﺴﯿﺔ ﻟﮭﺬا اﻟﻤﻮﻗﻊ وﺑﺎﻟﻤﻨﺎﺳﺒﺔ ﻓﺈن
اﻟﻤﻠﻒ اﻟﺬي ﯾﺤﺘﻮﯾﮭﺎ اﺳﻤﮫ ، index.htmlواﻟﺸﯿﻔﺮة اﻟﺨﺎﺻﺔ ﺑﺬﻟﻚ ھﻲ:
Main Page
وأذﻛﺮك ﺑﺄﻧﻚ ﺗﺴﺘﻄﯿﻊ إدراج ﺻﻮرة ھﻨﺎ أﯾﻀﺎً ﻛﻌﻨﻮان ﻟﻠﻮﺻﻠﺔ اﻟﺘﺸﻌﺒﯿﺔ وذﻟﻚ ﺑﻨﻔﺲ
اﻟﺘﻔﺎﺻﯿﻞ اﻟﺘﻲ ﺷﺮﺣﺘﮭﺎ ﻓﻲ اﻟﺤﺎﻟﺔ اﻟﺴﺎﺑﻘﺔ.
ﻓﻲ ھﺬا اﻟﻤﺜﺎل ﻗﻤﺖ ﺑﺘﺤﺪﯾﺪ اﻟﺼﻮرة اﻟﻤﺼﻐﺮة اﻟﻤﺴﻤﺎه image _1.jpgﻛﻮﺻﻠﺔ ﺗﺸﻌﺒﯿﺔ
ﺗﺼﻠﻨﺎ إﻟﻰ اﻟﺼﻮرة اﻷﺻﻠﯿﺔ اﻟﻤﺴﻤﺎه image.jpg
76
www.dinaro.com/vb3
ﻟﻜﻦ إﻧﺘﺒﮫ إذا ﻛﺎن اﻟﻤﻠﻒ اﻟﻤﻄﻠﻮب واﻟﺬي ﺗﺮﯾﺪ اﻹﺷﺎرة إﻟﯿﮫ ﻣﻮﺟﻮداً ﻓﻲ ﻣﺠﻠﺪ ﻣﺨﺘﻠﻒ ﻋﻦ
اﻟﻤﺠﻠﺪ اﻟﺬي ﯾﻮﺟﺪ ﺑﮫ اﻟﻤﻠﻒ اﻟﺤﺎﻟﻲ ،ﻓﯿﺠﺐ ﻋﻠﯿﻚ ﺗﺤﺪﯾﺪ اﻟﻤﺴﺎر اﻟﻜﺎﻣﻞ ﻟﮭﺬا اﻟﻤﻠﻒ وذﻟﻚ
ﺑﻨﻔﺲ اﻟﻄﺮﯾﻘﺔ اﻟﺘﻲ ﻧﺎﻗﺸﻨﺎھﺎ ﻓﻲ اﻟﺪرس اﻟﺴﺎﺑﻖ ﻋﻨﺪﻣﺎ ﻗﻤﻨﺎ ﯾﺈدراج اﻟﺼﻮر.
اﻟﺤﺎﻟﺔ اﻟﺜﺎﻟﺜﺔ ھﻲ أن ﻧﻘﻮم ﺑﺎﻹﺷﺎرة إﻟﻰ ﻣﻜﺎن آﺧﺮ داﺧﻞ ﻧﻔﺲ اﻟﺼﻔﺤﺔ ،إﻟﻰ أوﻟﮭﺎ ﻣﺜﻼً أو
إﻟﻰ آﺧﺮھﺎ أو أي ﻣﻜﺎن آﺧﺮ ﻧﺮﯾﺪه...
ﻃﺒﻌﺎً ﻣﮭﻤﺎ ﺑﻠﻐﺖ درﺟﺔ اﻟﺬﻛﺎء واﻷﻟﻤﻌﯿﺔ اﻟﺘﻲ ﯾﺘﺼﻒ ﺑﮭﺎ اﻟﻜﻤﺒﯿﻮﺗﺮ وﻣﺘﺼﻔﺢ اﻹﻧﺘﺮﻧﺖ،
ﻓﮭﻤﺎ ﻻ ﯾﺴﺘﻄﯿﻌﺎن ﻣﻌﺮﻓﺔ ﻣﺎ ﯾﺪور ﺑﻔﻜﺮك وﺑﺎﻟﺘﺎﻟﻲ ﻻ ﯾﺴﺘﻄﯿﻌﺎن ﻣﻌﺮﻓﺔ اﻟﻤﻜﺎن اﻟﻤﻮﺟﻮد
ﻓﻲ ﻧﻔﺲ اﻟﺼﻔﺤﺔ واﻟﺬي ﺗﺮﯾﺪ ﻧﻘﻞ زاﺋﺮك إﻟﯿﮫ ﻣﻦ ﺧﻼل اﻟﻮﺻﻠﺔ اﻟﺘﺸﻌﺒﯿﺔ .ﻟﺬﻟﻚ ﯾﺠﺐ أن
ﺗﻘﻮم أﻧﺖ ﺑﺘﺤﺪﯾﺪه.
واﻟﻤﺒﺪأ ھﻨﺎ ھﻮ أن ﺗﻘﻮم ﺑﺘﻌﺮﯾﻒ أو ﺗﺴﻤﯿﺔ ھﺬا اﻟﻤﻜﺎن ﺑﺈﺳﻢ ﻣﻌﯿﻦ ﺳﻮف ﺗﻘﻮم ﻻﺣﻘﺎ
ﺑﺎﺳﺘﺨﺪاﻣﮫ ﻓﻲ اﻟﻮﺻﻠﺔ اﻟﺘﺸﻌﺒﯿﺔ .وﻓﻲ ھﺬه اﻟﺤﺎﻟﺔ ﯾﺘﺤﺘﻢ ﻋﻠﯿﻚ اﺳﺘﺨﺪام اﻟﺨﺎﺻﯿﺔ اﻟﺜﺎﻧﯿﺔ
ﻟﻠﻮﺳﻢ > <Aوھﻲ NAME
77
www.dinaro.com/vb3
ﻟﻨﻘﻢ ﻣﻌﺎً ﺑﺈدراج وﺻﻠﺔ ﺗﺸﻌﺒﯿﺔ داﺧﻞ ھﺬه اﻟﺼﻔﺤﺔ ﺗﻘﻮم ﺑﻨﻘﻞ اﻟﺰاﺋﺮ ﻣﻦ ﻣﻜﺎن وﺟﻮد ھﺬه
اﻟﻮﺻﻠﺔ إﻟﻰ اﻟﻔﻘﺮة اﻟﺜﺎﻟﺜﺔ ﻣﻦ ھﺬه اﻟﺼﻔﺤﺔ واﻟﺘﻲ ﺑﺪأﻧﺎ ﻓﯿﮭﺎ اﻟﺤﺪﯾﺚ ﻋﻦ اﻟﻮﺻﻼت
اﻟﺘﺸﻌﺒﯿﺔ Links
أول ﻣﺎ ﯾﺠﺐ ﻓﻌﻠﮫ ھﻮ اﻟﺬھﺎب إﻟﻰ ھﺬه اﻟﻔﻘﺮة واﺧﺘﯿﺎر أول ﻛﻠﻤﺔ ﻓﯿﮭﺎ ﺛﻢ وﺿﻌﮭﺎ داﺧﻞ
اﻟﻮﺳﻮم ></A> ... <A
><A>LINKS</A
واﻵن ﺣﺎن اﻟﻮﻗﺖ ﻻﺳﺘﺨﺪام اﻟﺨﺎﺻﯿﺔ NAMEﻓﺎﻟﺨﻄﻮة اﻟﺜﺎﻧﯿﺔ ھﻲ ﺗﻌﺮﯾﻒ ھﺬه اﻟﻜﻠﻤﺔ
ﺑﺄي اﺳﻢ ﻧﺮﯾﺪه )اﻟﻤﮭﻢ أن ﻧﺒﻘﻰ ﻣﺘﺬﻛﺮﯾﻦ ﻟﮫ( .ﺳﻮف أﻗﻮم ﺑﺈﻋﻄﺎء اﻻﺳﻢ attrib1
><A NAME="attrib1">LINKS</A
ﻟﻘﺪ أﺻﺒﺤﺖ ھﺬه اﻟﻔﻘﺮة ﺟﺎھﺰة ﻟﻜﻲ ﻧﻘﻮم ﺑﺈدراج وﺻﻼت ﺗﺸﻌﺒﯿﺔ إﻟﯿﮭﺎ ﻣﻦ أي ﻣﻜﺎن ﻓﻲ
ھﺬا اﻟﻤﻠﻒ ،ﺑﻞ وﻣﻦ أي ﻣﻠﻒ آﺧﺮ ...وأﻛﺜﺮ ﻣﻦ ذﻟﻚ أﻧﮫ إذا أراد أﺣﺪ ﻣﺎ ﻓﻲ أﺣﺪ اﻟﻤﻮاﻗﻊ
اﻷﺧﺮى أن ﯾﻀﻊ وﺻﻠﺔ ﺗﺸﻌﺒﯿﺔ ﻟﮭﺎ ﻣﻦ ﻣﻮﻗﻌﮫ ﻓﺈن ﺑﺎﺳﺘﻄﺎﻋﺘﮫ ذﻟﻚ ﺷﺮط أن ﯾﻌﺮف اﻹﺳﻢ
اﻟﺬي ﻋﺮّﻓﻨﺎھﺎ ﺑﮫ وھﺬا ﻟﯿﺲ ﺻﻌﺒﺎً ﺑﺎﻟﻄﺒﻊ.
وﯾﻠﺰﻣﻨﺎ ھﻨﺎ ﻣﻌﺮﻓﺔ اﺳﻢ اﻟﻤﻠﻒ اﻟﺬي ﺗﻮﺟﺪ ﺑﮫ ھﺬه اﻟﻔﻘﺮة )أي ھﺬا اﻟﻤﻠﻒ اﻟﺬي ﻧﻌﻤﻞ ﺑﮫ(
واﺳﻤﮫ htutor06.htmlﻷﻧﮫ ﺳﯿﺸﻜﻞ اﻟﻤﺪﺧﻞ اﻷﺳﺎﺳﻲ ﻟﻠﻮﺻﻮل إﻟﻰ اﻟﻔﻘﺮة اﻟﻤﺤﺪدة.
وﺗﻜﻮن ﺷﯿﻔﺮة اﻟﻮﺻﻮل إﻟﻰ ھﺬه اﻟﻔﻘﺮة ھﻲ ﻛﺎﻟﺘﺎﻟﻲ:
3rd Paragraph
ﻻﺣﻆ أﻧﻨﺎ ﻟﻢ ﻧﻜﺘﻒ ﺑﺬﻛﺮ اﺳﻢ اﻟﻔﻘﺮة ﻟﻮﺣﺪھﺎ ﺑﻞ ﯾﺠﺐ أن ﺗﻘﺮن ﺑﺎﺳﻢ اﻟﻤﻠﻒ اﻷب اﻟﺬي
ﯾﺘﻀﻤﻨﮭﺎ ﻣﻦ ﺧﻼل إﺷﺎرة #
أﻣﺎ اﻟﺤﺎﻟﺔ اﻷﺧﯿﺮة واﻟﺘﻲ ﻧﻘﻮم ﻓﯿﮭﺎ ﺑﺈدراج وﺻﻠﺔ ﺗﺸﻌﺒﯿﺔ ﻟﻌﻨﻮان ﺑﺮﯾﺪ إﻟﻜﺘﺮوﻧﻲ ،ﯾﺆدي
اﻟﻨﻘﺮ ﻋﻠﯿﮭﺎ إﻟﻰ إﻃﻼق ﺑﺮﻧﺎﻣﺞ اﻟﺒﺮﯾﺪ اﻹﻟﻜﺘﺮوﻧﻲ ﻟﻠﺰاﺋﺮ ﺑﺸﻜﻞ ﺗﻠﻘﺎﺋﻲ.
ﻓﺎﻹﺧﺘﻼف اﻟﻮﺣﯿﺪ اﻟﺬي ﯾﻄﺮأ ھﻨﺎ ھﻮ ﻛﺘﺎﺑﺔ ﻛﻠﻤﺔ DINAROﺑﻌﺪ ﺧﺎﺻﯿﺔ HREFﻟﻜﻲ
ﺗﺪل ﻋﻠﻰ أن اﻟﻌﻨﻮان اﻟﺬي ﯾﻠﻲ ھﻮ ﻋﻨﻮان GMAILوﻟﯿﺲ أي ﻋﻨﻮان آﺧﺮ
>"<A HREF="DINARO:DINARO2AYOUB@GMAIL.COM
>GMAIL</A
GMAIL
أﻟﯿﺲ ھﺬا
ﻣﻤﺘﻌﺎ
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
79
www.dinaro.com/vb3
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHH
80
www.dinaro.com/vb3
ﺍﻟﺪﺭﺱ ﺍﻟﺴﺎﺑﻊ
1
ھﺬا اﻟﺪرس ﺳﯿﻜﻮن اﻷول ﻣﻦ درﺳﯿﻦ ﺣﻮل اﻟﺠﺪاول .وﻗﺪ ﻓﻀﻠﺖ ﺗﺠﺰﺋﺘﮭﺎ إﻟﻰ ﻗﺴﻤﯿﻦ
وذﻟﻚ ﻷھﻤﯿﺔ ھﺬا اﻟﻤﻮﺿﻮع وﺗﻌﺪد ﺧﺼﺎﺋﺺ اﻟﺠﺪاول واﺣﺘﻤﺎﻻت اﺳﺘﺨﺪاﻣﮭﺎ ﻓﻲ ﺻﻔﺤﺎت
اﻟﻮﯾﺐ.
ﺗﻌﺪ اﻟﺠﺪاول ﻣﻦ أﻗﻮى اﻷدوات اﻟﺘﻲ ﺗﺘﻀﻤﻨﮭﺎ ﻟﻐﺔ HTMLوأﻛﺎد أﺟﺰم ﺑﺄﻧﮫ ﻻ ﯾﻮﺟﺪ
ﻣﻮﻗﻊ ﻓﻲ اﻹﻧﺘﺮﻧﺖ إﻻ وﯾﺴﺘﺨﺪﻣﮭﺎ ﺑﺼﻮرة أو ﺑﺄﺧﺮى .واﻟﺤﻘﯿﻘﺔ أن وﺿﻊ اﻟﺠﺪاول ﻓﻲ
ﺻﻔﺤﺎت اﻟﻮﯾﺐ ﻻ ﯾﻘﺘﺼﺮ ﻋﻠﻰ ﺗﻠﻚ اﻟﻘﻮاﺋﻢ ﻣﻦ اﻟﺒﯿﺎﻧﺎت اﻟﺘﻲ ﻧﺤﺘﺎج ﻟﺘﺮﺗﯿﺒﮭﺎ ﻓﻲ ﺻﻔﻮف
وأﻋﻤﺪة ،ﺑﻞ ﯾﺘﻌﺪى ذﻟﻚ إﻟﻰ اﺳﺘﺨﺪاﻣﮭﺎ ﻓﻲ ﺗﺼﻤﯿﻢ اﻟﺼﻔﺤﺎت ﻧﻔﺴﮭﺎ وﺗﻨﻈﯿﻤﮭﺎ ،واﻟﺘﺤﻜﻢ
ﺑﻤﻈﮭﺮھﺎ ﺑﺼﻮرة ﻗﻮﯾﺔ وﻓﻌﺎﻟﺔ ﻻ ﯾﻤﻜﻦ أداؤھﺎ ﻣﮭﻤﺎ اﺳﺘﺨﺪﻣﻨﺎ ﻣﻦ وﺳﻮم ﺧﺎﺻﺔ ﺑﺘﻨﺴﯿﻖ
اﻟﺼﻔﺤﺎت.
إن اﻟﺘﻌﺎﻣﻞ ﻣﻊ اﻟﺠﺪاول وإدراﺟﮭﺎ ﻓﻲ ﺻﻔﺤﺎت اﻟﻮﯾﺐ ﺳﮭﻞ ﺟﺪاً ﻣﺜﻠﮫ ﻣﺜﻞ أي أداة ﻣﻦ
أدوات HTMLﻟﻜﻨﮫ ﻗﺪ ﯾﺒﺪو ﻟﻚ ﻣﺮﺑﻜﺎً ﺑﻌﺾ اﻟﺸﻲء وﺧﺎﺻﺔ ﻓﻲ اﻟﺒﺪاﯾﺔ ،وذﻟﻚ ﻟﺘﻌﺪد
اﻟﺨﺼﺎﺋﺺ اﻟﺘﻲ ﺗﺴﺘﻌﻤﻞ ﻣﻌﮭﺎ وﺗﻌﺪد اﻷوﺟﮫ اﻟﺘﻲ ﻧﺴﺘﻄﯿﻊ اﻟﺘﺼﺮف ﺑﮭﺎ .ﻟﻜﻦ ﻻ ﺗﻘﻠﻖ ﻓﻜﻞ
ﺷﻲء ﯾﺒﺪو ﺻﻌﺒﺎً ﻓﻲ ﺑﺪاﯾﺘﮫ وﻟﻜﻦ ﺳﺮﻋﺎن ﻣﺎ ﯾﺼﺒﺢ ﺳﮭﻼً.
81
www.dinaro.com/vb3
ھﺬه ھﻲ اﻟﻮﺳﻮم اﻟﺘﻲ ﻧﺒﺪأ ﺑﮭﺎ ﻹدراج ﺟﺪول ﻣﻜﻮن ﻣﻦ ﺧﻠﯿﺔ واﺣﺪة أو ﻣﻦ ﻣﻠﯿﻮن
ﺧﻠﯿﺔ… اﻷﻣﺮ ﺳﯿﺎن
واﻵن ﺑﻌﺪ إدراج ھﺬﯾﻦ اﻟﻮﺳﻤﯿﻦ ،ھﻨﺎك ﺳﺆاﻟﯿﻦ ﯾﻨﺒﻐﻲ اﻹﺟﺎﺑﺔ ﻋﻠﯿﮭﻤﺎ .اﻷول :ﻛﻢ ﻋﺪد
اﻟﺼﻔﻮف اﻟﺘﻲ ﻧﺮﯾﺪھﺎ ﻓﻲ اﻟﺠﺪول؟ ﺛﻼﺛﺔ ،أرﺑﻌﺔ ،ﻣﺎﺋﺔ؟ ﻻ ﺑﺄس ،ﻗﻢ ﺑﺈﺿﺎﻓﺔ اﻟﻮﺳﻮم
82
www.dinaro.com/vb3
><TABLE
><TR
></TR
><TR
></TR
><TR
></TR
></TABLE
واﻟﺴﺆال اﻟﺜﺎﻧﻲ ھﻮ ،ﻛﻢ ﻋﺪد اﻟﺨﻼﯾﺎ )أو اﻷﻋﻤﺪة( اﻟﺘﻲ ﻧﺮﯾﺪھﺎ ﻓﻲ ﻛﻞ ﺻﻒ؟
ﺑﻨﻔﺲ ﻋﺪد اﻟﺨﻼﯾﺎ اﻟﻤﻄﻠﻮب .وﻣﻦ اﻟﺒﺪﯾﮭﻲ أن ﻧﻜﺘﺒﮭﺎ ﺑﯿﻦ اﻟﻮﺳﻮم ></TR> ... <TR
ﻃﺎﻟﻤﺎ أن اﻟﺨﻼﯾﺎ ھﻲ ﺟﺰء ﻣﻦ اﻟﺼﻔﻮف .وھﻨﺎ ﺳﺄﻓﺘﺮض أﻧﻨﺎ ﻧﺮﯾﺪ ﺧﻠﯿﺘﯿﻦ ﻓﻲ ﻛﻞ ﺻﻒ،
وﺑﺬﻟﻚ ﯾﺠﺐ ﺗﻜﺮار ﻛﺘﺎﺑﺘﮭﺎ ﻣﺮﺗﯿﻦ ﻟﻜﻞ ﺻﻒ.
وأذﻛﺮك أن اﻟﻨﺺ اﻟﺬي ﻧﺮﯾﺪ إدراﺟﮫ ﻓﻲ اﻟﺨﻠﯿﺔ ﯾﻜﺘﺐ ﺿﻤﻦ ھﺬﯾﻦ اﻟﻮﺳﻤﯿﻦ
><TABLE
><TR
><TD> Data </TD
><TD> Data </TD
83
www.dinaro.com/vb3
></TR
><TR
><TD> Data </TD
><TD> Data </TD
></TR
><TR
><TD> Data </TD
><TD> Data </TD
></TR
></TABLE
ھﻞ اﺗﻀﺤﺖ ﻟﻚ اﻟﺼﻮرة اﻵن .أﻧﻈﺮ إﻟﻰ ﻧﺘﯿﺠﺔ اﻟﻌﻤﻞ اﻟﺘﻲ ﺣﺼﻠﻨﺎ ﻋﻠﯿﮭﺎ.
ھﻨﺎك ﺷﻲء ﻣﺎ ﯾﻨﻘﺺ .ﺑﺎﻟﻄﺒﻊ ...اﻟﺤﺪود .اﻧﺘﻈﺮ ﻗﻠﯿﻼً وﺳﺘﻌﺮف اﻟﺨﺎﺻﯿﺔ اﻟﺘﻲ ﺗﻘﻮم
ﺑﺈﺿﺎﻓﺔ اﻟﺤﺪود ﻟﻠﺠﺪول وﻏﯿﺮھﺎ ﻣﻦ اﻟﺨﺼﺎﺋﺺ اﻷﺧﺮى .ﻷﻧﻨﻲ ﻗﺒﻞ أن أﺳﺘﻤﺮ أود أن
أﻟﻔﺖ ﻧﻈﺮك ﻟﻤﺴﺄﻟﺔ ﻣﻌﯿﻨﺔ ﻓﻲ اﻟﺠﺪاول .وھﻲ أن ﻃﺮﯾﻘﺔ اﻟﺘﻌﺎﻣﻞ ﻣﻌﮭﺎ ﺗﺘﻢ ﻋﻠﻰ ﺛﻼﺛﺔ
ﻣﺴﺘﻮﯾﺎت:
84
www.dinaro.com/vb3
وﻟﻜﻞ ﻣﻦ ھﺬه اﻟﻤﺴﺘﻮﯾﺎت ﺧﺼﺎﺋﺼﮫ اﻟﺘﻲ ﯾﻨﻔﺮد ﺑﮭﺎ ﻛﻤﺎ أن ھﻨﺎك ﺧﺼﺎﺋﺺ ﻣﺸﺘﺮﻛﺔ
ﺗﺴﺘﺨﺪم ﻣﻊ ﻛﻞ اﻟﻮﺳﻮم.
85
www.dinaro.com/vb3
ھﺬه ھﻲ اﻟﺨﺼﺎﺋﺺ اﻟﻤﺴﺘﻌﻤﻠﺔ ﻣﻊ اﻟﺠﺪول .وﺳﺄﻗﻮم اﻵن ﺑﺘﻄﺒﯿﻘﮭﺎ ﻋﻠﻰ اﻟﻤﺜﺎل اﻟﻮارد ﻓﻲ
ﺑﺪاﯾﺔ ھﺬا اﻟﺪرس وﺳﺄﻛﺘﻔﻲ ﺑﻜﺘﺎﺑﺔ وﺳﻢ اﻟﺒﺪاﯾﺔ أﻣﺎ ﺑﺎﻗﻲ اﻟﻮﺳﻮم ﻓﮭﻲ ﻧﻔﺴﮭﺎ:
>"<TABLE BORDER="5
86
www.dinaro.com/vb3
87
www.dinaro.com/vb3
88
www.dinaro.com/vb3
وﻧﺘﻜﻠﻢ اﻵن ﻋﻦ اﻟﺨﺼﺎﺋﺺ اﻟﻤﺴﺘﺨﺪﻣﺔ ﻣﻊ وﺳﻮم اﻟﺼﻒ > </TR> ... <TRوﻻ ﺑﺄس
ﻣﻦ ﺗﺬﻛﯿﺮك أن ﻋﺪد اﻟﺼﻔﻮف ﻓﻲ اﻟﺠﺪول ﯾﺘﺤﺪد ﺑﻌﺪد ھﺬه اﻟﻮﺳﻮم .أﻣﺎ أھﻢ اﻟﺨﺼﺎﺋﺺ
اﻟﺘﻲ ﺗﻀﺎف ﻟﮭﺬا اﻟﻮﺳﻢ ﻓﮭﻲ:
وﻧﻌﻮد اﻵن إﻟﻰ ﺟﺪوﻟﻨﺎ اﻟﺴﺎﺑﻖ ﻟﻨﻄﺒﻖ ﻋﻠﯿﮫ ھﺬه اﻟﺨﺼﺎﺋﺺ ﻣﻦ ﺧﻼل اﻷﻣﺜﻠﺔ اﻟﺘﺎﻟﯿﺔ:
>"<TR ALIGN="Right
><TD> Data </TD
><TD> Data </TD
></TR
>"<TR ALIGN="Center
><TD> Data </TD
><TD> Data </TD
></TR
></TABLE
89
www.dinaro.com/vb3
<TR VALIGN="Bottom">
<TD> Data </TD>
<TD> Data </TD>
</TR>
<TR VALIGN="Baseline">
<TD> Data </TD>
<TD> Data </TD>
</TR>
</TABLE>
90
www.dinaro.com/vb3
>"<TR BGCOLOR="#C0C0C0
><TD> Data </TD
><TD> Data </TD
></TR
><TR
><TD> Data </TD
><TD> Data </TD
></TR
></TABLE
واﻵن ﻣﺎذا ﺑﻘﻲ ﻟﺪﯾﻨﺎ؟ ﺑﺎﻟﻄﺒﻊ ﺑﻘﯿﺖ اﻟﻮﺳﻮم اﻟﺨﺎﺻﺔ ﺑﺎﻟﺨﻼﯾﺎ .وﺳﻮف أﺗﺎﺑﻊ اﻟﺤﺪﯾﺚ ﻋﻨﮭﺎ
ﻓﻲ اﻟﺪرس اﻟﻘﺎدم إن ﺷﺎء اﷲ .أراك ﻓﻲ اﻟﺪرس اﻟﺘﺎﻟﻲ ﻟﻨﺘﺎﺑﻊ اﻟﺤﺪﯾﺚ ﻋﻦ ﻣﻮﺿﻮع
اﻟﺠﺪاول.
91
www.dinaro.com/vb3
أﻟﯿﺲ ھﺬا
ﻣﻤﺘﻌﺎ
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHHHHHHHHHH
92
www.dinaro.com/vb3
ﺍﻟﺪﺭﺱ ﺍﻟﺜﺎﻣﻦ
2
ﻧﺘﺎﺑﻊ ﻣﻌﺎً ﻓﻲ ھﺬا اﻟﺪرس اﻟﺤﺪﯾﺚ ﻋﻦ اﻟﺠﺪاول .وأﻧﺎ أﻓﺘﺮض أﻧﻚ ﻗﺪ أﻧﮭﯿﺖ اﻟﺪرس اﻟﺴﺎﺑﻖ
ﺑﻨﺠﺎح ،وأن ﻟﺪﯾﻚ اﻵن ﻓﻜﺮة ﺟﯿﺪة ﺟﺪاً ﻋﻦ اﻟﺠﺪاول وﻛﯿﻔﯿﺔ إﻧﺸﺎﺋﮭﺎ واﻟﺘﻌﺎﻣﻞ ﻣﻊ
ﺧﺼﺎﺋﺼﮭﺎ وﻣﻊ اﻟﺼﻔﻮف وﺧﺼﺎﺋﺼﮭﺎ .وﻧﻜﻤﻞ اﻵن ﻣﻦ ﺣﯿﺚ ﺗﻮﻗﻔﻨﺎ ،أي ﻣﻊ ﺧﺼﺎﺋﺺ
اﻟﺨﻼﯾﺎ.
ھﻞ ﺗﺬﻛﺮ ﻣﺎ ﻗﻠﻨﺎه ﻋﻦ ﻋﺪد اﻟﺨﻼﯾﺎ ﻓﻲ اﻟﺼﻒ اﻟﻮاﺣﺪ؟ إن ﻋﺪد اﻟﺨﻼﯾﺎ اﻟﻤﻄﻠﻮب ﯾﺘﺤﺪد ﻣﻦ
ﺧﻼل ﻛﺘﺎﺑﺔ اﻟﻮﺳﻮم > </TD> ... <TDﻣﺮات ﺑﻨﻔﺲ اﻟﻌﺪد اﻟﻤﻄﻠﻮب .وﻣﻦ اﻟﻤﻤﻜﻦ أن
ﺗﺤﺘﻮي اﻟﺨﻠﯿﺔ ﻋﻠﻰ أي ﻋﻨﺼﺮ ﻣﻦ ﻋﻨﺎﺻﺮ ﻟﻐﺔ : HTMLﻧﺼﻮص ،رﺳﻮم ،ﻗﻮاﺋﻢ،
وﺻﻼت ﺗﺸﻌﺒﯿﺔ ،ﺑﻞ وﺣﺘﻰ ﺟﺪاول) .ﻧﻌﻢ ،ﺗﺴﺘﻄﯿﻊ إدراج ﺟﺪول داﺧﻞ ﺟﺪول آﺧﺮ(
ﻟﻨﺴﺘﺮﺟﻊ ﻣﻌﺎ اﻟﻤﺜﺎل اﻟﺬي ﻗﻤﻨﺎ ﺑﺎﻟﺘﺪرب ﻋﻠﯿﮫ ﻓﻲ اﻟﺪرس اﻟﺴﺎﺑﻖ ،ﻓﺴﻮف ﻧﻜﻤﻞ ھﺬا
اﻟﺪرس ﻣﻌﮫ .وھﻮ ﺟﺪول ﺻﻐﯿﺮ ﻣﻜﻮن ﻣﻦ ﺛﻼﺛﺔ ﺻﻔﻮف وﻋﻤﻮدﯾﻦ )أي ﺧﻠﯿﺘﯿﻦ ﻓﻲ ﻛﻞ
ﺻﻒ(.
93
www.dinaro.com/vb3
<TABLE>
<TR>
<TD> Data </TD>
<TD> Data </TD>
</TR>
<TR>
<TD> Data </TD>
<TD> Data </TD>
</TR>
<TR>
<TD> Data </TD>
<TD> Data </TD>
</TR>
</TABLE>
94
www.dinaro.com/vb3
95
www.dinaro.com/vb3
وﻗﺒﻞ أن ﻧﺴﺘﻤﺮ ،ﯾﺒﺪو ﻟﻲ أن ھﻨﺎك ﺑﻌﺾ اﻟﻤﻼﺣﻈﺎت اﻟﻤﮭﻤﺔ اﻟﺘﻲ ﯾﻨﺒﻐﻲ ذﻛﺮھﺎ:
ﻛﻤﺎ ﺗﻼﺣﻆ ھﻨﺎك ﺧﺼﺎﺋﺺ ﺗﺘﻜﺮر ﻣﻊ ﺟﻤﯿﻊ اﻟﻮﺳﻮم .ﺧﺬ ﻣﺜﻼً اﻟﺨﺎﺻﯿﺔ .BGCOLOR
ﻛﯿﻒ ﯾﺘﻢ اﻟﺘﻌﺎﻣﻞ ﻣﻌﮭﺎ إذا ﻛﺮرت ﻣﻊ ﺟﻤﯿﻊ اﻟﻮﺳﻮم؟ ﺑﻜﻞ ﺑﺴﺎﻃﺔ ﯾﺘﻢ ﺗﻄﺒﯿﻖ اﻟﻠﻮن اﻟﻤﺤﺪد
ﻣﻊ وﺳﻢ اﻟﺨﻠﯿﺔ ،ﻓﺈذا ﻟﻢ ﯾﻜﻦ ﻣﺤﺪداً ﯾﻄﺒﻖ اﻟﻠﻮن اﻟﻤﺤﺪد ﻣﻊ وﺳﻢ اﻟﺼﻒ ،ﻓﺈذا ﻟﻢ ﯾﻮﺟﺪ
ﯾﻄﺒﻖ اﻟﻠﻮن اﻟﻤﺤﺪد ﻣﻊ وﺳﻢ اﻟﺠﺪول .وإذا ﻟﻢ ﯾﻜﻦ ھﺬا ﻣﺤﺪداً ﺑﺪوره ﯾﺘﻢ إﻋﺘﻤﺎد ﻟﻮن
ﺧﻠﻔﯿﺔ اﻟﺼﻔﺤﺔ اﻟﻤﺤﺪد ﻓﻲ اﻟﻮﺳﻢ >.<BODY
وﺑﺪون اﻟﺨﻮض ﻓﻲ ﺗﻔﺎﺻﯿﻞ ھﺬه اﻹﺧﺘﻼﻓﺎت اﻟﺘﻲ ﻟﻦ ﺗﺆدي إﻻ إﻟﻰ اﻟﻤﺰﯾﺪ ﻣﻦ اﻹﺷﻜﺎﻻت
ﻟﺪﯾﻚ ...وﺑﻌﺪ اﻟﺘﺠﺮﺑﺔ ﯾﺒﺪو أن أﻓﻀﻞ ﻃﺮﯾﻘﺔ ﻟﻠﺘﻌﺎﻣﻞ ﻣﻊ ھﺬه اﻟﺨﺼﺎﺋﺺ ھﻲ ﻗﯿﺎﻣﻚ ﺑﺘﺤﺪﯾﺪ
اﻟﻌﺮض )وﻛﺬﻟﻚ اﻹرﺗﻔﺎع إذا أردت ذﻟﻚ( ﻟﻠﺠﺪول ﻛﻜﻞ ﻣﻦ ﺧﻼل اﻟﻮﺳﻢ > .<TABLEﺛﻢ
اﺳﺘﺨﺪام ھﺬه اﻟﺨﺼﺎﺋﺺ ﻓﻲ وﺳﻮم اﻟﺨﻼﯾﺎ وﺗﺤﺪﯾﺪ اﻟﻌﺮض اﻟﻤﻄﻠﻮب ﻟﻜﻞ ﺧﻠﯿﺔ ﻋﻠﻰ ﺣﺪه
ﻓﻲ اﻟﺼﻒ اﻷول ،واﻻرﺗﻔﺎع اﻟﻤﻄﻠﻮب ﻟﻜﻞ ﺻﻒ ﻓﻲ اﻟﺠﺪول.
وھﺬه ﺑﺮأﯾﻲ أﻓﻀﻞ ﻃﺮﯾﻘﺔ ﺗﻀﻤﻦ ﺑﮭﺎ أﻓﻀﻞ ﻣﺸﺎھﺪة ﻟﻠﺠﺪول ﻟﺠﻤﯿﻊ زوار ﻣﻮﻗﻌﻚ.
إذا أردت أن ﺗﺤﺘﻮي ﺑﻌﺾ اﻟﺼﻔﻮف ﻓﻲ اﻟﺠﺪول ﻋﻠﻰ ﻋﺪد ﻣﻦ اﻟﺨﻼﯾﺎ أﻗﻞ ﻣﻦ ﺑﺎﻗﻲ
اﻟﺼﻔﻮف ،ﻓﻼ ﯾﻜﻔﻲ أن ﺗﻘﻮم ﺑﺤﺬف وﺳﻮم اﻟﺨﻼﯾﺎ ﻣﻨﮭﺎ) .ﻛﻤﺎ ﺗﺮى ﻓﻲ اﻟﺸﯿﻔﺮة اﻟﺘﺎﻟﯿﺔ(:
96
www.dinaro.com/vb3
<TABLE BORDER="5">
<TR>
<TD> Data </TD>
<TD> Data </TD>
</TR>
<TR>
<TD> Data </TD>
<TD> Data </TD>
</TR>
<TR>
<TD> Data </TD>
<TD> Data </TD>
</TR>
</TABLE>
Data
Data Data
Data
97
www.dinaro.com/vb3
ﻟﻘﺪ ﺑﻘﻲ ﻣﻜﺎن اﻟﺨﻼﯾﺎ اﻟﻤﺤﺬوﻓﺔ ﻣﺤﺠﻮزاً ﻛﻤﺎ ﻟﻮ أﻧﮭﺎ ﻟﻢ ﺗﺤﺬف .أﻣﺎ اﻟﺨﻼﯾﺎ اﻟﺒﺎﻗﯿﺔ ﻓﻈﻠﺖ
ﻣﺤﺘﻔﻈﺔ ﺑﻨﻔﺲ ﺧﺼﺎﺋﺼﮭﺎ ،أي أﻧﻨﺎ ﻟﻢ ﻧﺴﺘﻔﺪ ﻣﻦ ﻋﻤﻠﯿﺔ اﻟﺤﺬف.
واﻟﺤﻘﯿﻘﺔ أن اﻟﻄﺮﯾﻘﺔ اﻟﻤﺜﻠﻰ ﻟﺬﻟﻚ ھﻲ أن ﺗﻘﻮم ﺑﺪﻣﺞ اﻟﺨﻼﯾﺎ ﻣﻌﺎً وذﻟﻚ ﺑﺎﺳﺘﺨﺪام
اﻟﺨﺼﺎﺋﺺ .ROWSPAN ،COLSPAN
>"<TABLE BORDER="5
><TR
><TD COLSPAN="2"> Data </TD
></TR
><TR
><TD> Data </TD
><TD> Data </TD
></TR
><TR
><TD COLSPAN="2"> Data </TD
></TR
></TABLE
98
www.dinaro.com/vb3
Data
Data Data
Data
ﻻﺣﻆ أن اﻟﻌﺪد 2ھﻮ ﻋﺪد اﻟﺨﻼﯾﺎ اﻟﺘﻲ ﻗﻤﻨﺎ ﺑﺪﻣﺠﮭﺎ .وﻻﺣﻆ أﯾﻀﺎً اﻧﻨﻲ ﻟﻢ أﻗﻢ ﺑﺈﻋﺎدة
وﺳﻮم اﻟﺨﻼﯾﺎ اﻟﻤﺤﺬوﻓﺔ ﻷﻧﻨﺎ أﺻﻼً ﻻ ﻧﺤﺘﺎج ﻟﮭﺎ ﺑﻌﺪ أن ﻗﻤﻨﺎ ﺑﺎﻟﺪﻣﺞ.
وﻛﻘﺎﻋﺪة أﺳﺎﺳﯿﺔ :ﻛﻞ ﺧﻠﯿﺔ ﯾﺘﻢ دﻣﺠﮭﺎ ﯾﺠﺐ ﺑﺎﻟﻤﻘﺎﺑﻞ ﺣﺬف وﺳﻮم اﻟﺘﻌﺮﯾﻒ اﻟﺨﺎﺻﺔ ﺑﮭﺎ.
ﻣﺎ ﻋﺪا ﺗﻌﺮﯾﻒ اﻟﺨﻠﯿﺔ اﻷﺳﺎﺳﯿﺔ ﺑﺎﻟﻄﺒﻊ.
>"<TABLE BORDER="5
><TR
><TD ROWSPAN="3"> Data </TD
><TD> Data </TD
></TR
><TR
><TD> Data </TD
99
www.dinaro.com/vb3
></TR
><TR
><TD> Data </TD
></TR
></TABLE
وﻣﺮة أﺧﺮى ﺑﻌﺪ ﺗﻌﺮﯾﻒ ﺧﺎﺻﯿﺔ اﻟﺪﻣﺞ اﻟﻌﻤﻮدي ،ﻗﻤﺖ ﺑﺤﺬف ﺗﻌﺮﯾﻒ اﻟﺨﻼﯾﺎ اﻟﻤﺪﻣﻮﺟﺔ
ﻣﻦ اﻟﺼﻒ اﻟﺜﺎﻧﻲ واﻟﺜﺎﻟﺚ .وھﺬا ھﻮ اﻟﺠﺪول اﻟﻨﺎﺗﺞ.
Data
Data Data
Data
ھﻨﺎك ﻧﻮع ﺧﺎص ﻣﻦ اﻟﺨﻼﯾﺎ اﻟﺘﻲ ﯾﺘﻢ ﺗﻌﺮﯾﻔﮭﺎ ﺑﺎﺳﺘﺨﺪام اﻟﻮﺳﻮم ></TH> ... <TH
وھﻲ اﺧﺘﺼﺎر Table Headerأي ﺗﺮوﯾﺴﺔ اﻟﺠﺪول.
واﻟﻔﺮق اﻟﻮﺣﯿﺪ ﺑﯿﻨﮭﺎ وﺑﯿﻦ > </TD> ... <TDھﻮ أن اﻟﻨﺺ اﻟﺬي ﺗﺤﺘﻮﯾﮫ ﯾﻈﮭﺮ ﺑﺨﻂ
أﺳﻮد ﻋﺮﯾﺾ وﻣﺤﺎذاﺗﮫ ﻓﻲ ﻣﻨﺘﺼﻒ اﻟﺨﻠﯿﺔ ﺑﺼﻮرة إﻓﺘﺮاﺿﯿﺔ) .ﻟﯿﺲ ﺑﺎﻟﺸﻲء اﻟﻤﮭﻢ ،ﻛﻤﺎ
أﻋﺘﻘﺪ( ،ﺧﺎﺻﺔ وأن اﻟﺨﺼﺎﺋﺺ اﻟﻤﺴﺘﺨﺪﻣﺔ ﻣﻌﮭﺎ ھﻲ ﻧﻔﺲ ﺧﺼﺎﺋﺺ > <TDوﺑﻨﻔﺲ
اﻟﺘﻔﺎﺻﯿﻞ اﻟﺘﻲ ذﻛﺮت.
100
www.dinaro.com/vb3
< وﺑﺼﻮرة ﻣﺴﺘﻘﻠﺔ وﻟﯿﺲ ﺿﻤﻦ وﺳﻮم اﻟﺼﻔﻮف أوTABLE> ﻣﺒﺎﺷﺮة ﺑﻌﺪ اﻟﻮﺳﻢ
.اﻟﺨﻼﯾﺎ
<TABLE BORDER="5">
<CAPTION> Table Caption </CAPTION>
<TR>
<TD> Data </TD>
<TD> Data </TD>
</TR>
<TR>
<TD> Data </TD>
<TD> Data </TD>
</TR>
<TR>
<TD> Data </TD>
<TD> Data </TD>
</TR>
</TABLE>
Table Caption
Data Data
Data Data
Data Data
101
www.dinaro.com/vb3
وأﺧﯿﺮاً ...وﺻﻠﻨﺎ إﻟﻰ ﻧﮭﺎﯾﺔ ھﺬه اﻟﺪرس .وﻣﺎ ﺑﻘﻲ ﻟﺪي ھﻮ أن أﺣﺜـﻚ ﻋﻠﻰ ﺗﻄﺒﯿﻖ ﻣﺎ ﻗﻤﺖ
ﺑﺸﺮﺣﮫ ﻓﯿﮫ وﻓﻲ اﻟﺪرس اﻟﺴﺎﺑﻖ وﺑﺎﻗﻲ اﻟﺪروس ،وﺗﺠﺮﺑﺔ ﺟﻤﯿﻊ اﻻﺣﺘﻤﺎﻻت اﻟﻮاردة
ﻟﻠﺨﺼﺎﺋﺺ واﻟﻘﯿﻢ.
أﻟﯿﺲ ھﺬا
ﻣﻤﺘﻌﺎ
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHH
102
www.dinaro.com/vb3
ﺍﻟﺪﺭﺱ ﺍﻟﺘﺎﺳﻊ
ﻓﻲ ھﺬا اﻟﺪرس ﺳﻮف ﻧﻘﻮم ﺑﺎﻟﺘﻌﺮف ﻋﻠﻰ اﻹﻃﺎرات Framesوﻃﺮﯾﻘﺔ ﻋﺮض ﺻﻔﺤﺎت
اﻟﻮﯾﺐ ﺑﺎﺳﺘﺨﺪاﻣﮭﺎ…
ﻓﮭﻞ ﺗﻌﺮف ﻣﺎ ھﻲ اﻹﻃﺎرات؟ ﺣﺴﻨﺎ ،ﺳﺄوﺿﺤﮭﺎ ﻟﻚ… ھﻞ ﺳﺒﻖ ﻟﻚ وأن زرت إﺣﺪى
اﻟﺼﻔﺤﺎت ﻟﺘﺸﺎھﺪ أﻧﮭﺎ ﻣﻘﺴﻤﺔ إﻟﻰ ﻋﺪة أﻗﺴﺎم ﺑﺤﯿﺚ ﯾﻈﮭﺮ ﻓﻲ ﻛﻞ ﻣﻨﮭﺎ ﺻﻔﺤﺔ ﻣﺴﺘﻘﻠﺔ،
وﺗﺒﺪو ﺑﺼﻮرة ﻣﻨﻔﺼﻠﺔ ﻋﻦ اﻷﻗﺴﺎم اﻷﺧﺮى .ورﺑﻤﺎ ﺗﻜﻮن ﻗﺪ ﻗﻤﺖ ﺑﺎﻟﻨﻘﺮ ﻋﻠﻰ إﺣﺪى
اﻟﻮﺻﻼت اﻟﺘﺸﻌﺒﯿﺔ اﻟﻤﻮﺟﻮدة ﻓﻲ أﺣﺪ اﻷﻗﺴﺎم ﻟﺘﻈﮭﺮ اﻟﺼﻔﺤﺔ اﻟﻤﺘﻌﻠﻘﺔ ﺑﮭﺎ ﻓﻲ اﻟﻘﺴﻢ
اﻵﺧﺮ.
إذا ﻛﻨﺖ ﻗﺪ ﺷﺎھﺪت ﻣﺜﻞ ھﺬه اﻟﺼﻔﺤﺎت ﻓﮭﺬا ﯾﻌﻨﻲ أن اﻹﻃﺎرات ﻣﺄﻟﻮﻓﺔ ﻟﺪﯾﻚ وإﻻ ﻓﺸﺎھﺪ
ﻣﺜﺎﻻً ﻋﻠﻰ ﺻﻔﺤﺔ ذات إﻃﺎرات
103
www.dinaro.com/vb3
ﻛﻤﺎ ﺷﺎھﺪت ،ﻓﺈن اﻟﺼﻔﺤﺔ ﻣﻜﻮﻧﺔ ﻣﻦ ﺛﻼﺛﺔ أﻗﺴﺎم :ﻋﻠﻮي وأﯾﺴﺮ وأﯾﻤﻦ… واﻟﺤﻘﯿﻘﺔ أن
ﻛﻞ ﻗﺴﻢ ﻣﻨﮭﺎ ھﻮ ﻋﺒﺎرة ﻋﻦ ﻣﻠﻒ Htmlﻛﺎﻣﻞ وﻣﺴﺘﻘﻞ ﺑﺤﺪ ذاﺗﮫ .وھﻲ ﻣﺠﺮد ﺻﻔﺤﺎت
ﻋﺎدﯾﺔ ﻻ ﺗﺨﺘﻠﻒ أﺑﺪاً ﻋﻦ ﺗﻠﻚ اﻟﺘﻲ ﺗﻌﻠﻤﺖ إﻧﺸﺎءھﺎ ﻓﻲ اﻟﺪروس اﻟﺴﺎﺑﻘﺔ ،وﻻ ﻋﻼﻗﺔ ﻟﻜﻞ
ﻣﻨﮭﺎ ﺑﺎﻟﺼﻔﺤﺎت اﻷﺧﺮى ﻣﻦ ﺣﯿﺚ اﻟﺘﺮﻛﯿﺐ واﻟﺘﻌﺮﯾﻒ.
أﻣﺎ ﻛﯿﻒ ﺗﻢ ﺟﻤﻌﮭﺎ ﻣﻌﺎ ﻟﺘﻈﮭﺮ ﺑﺎﻟﺸﻜﻞ اﻟﺬي ﺷﺎھﺪﺗﮫ؟ ﻓﮭﻨﺎ ﺑﯿﺖ اﻟﻘﺼﯿﺪ .ﻓﺒﺎﻹﺿﺎﻓﺔ إﻟﻰ
اﻟﺼﻔﺤﺎت واﻟﻤﻠﻔﺎت اﻹﻋﺘﯿﺎدﯾﺔ ﯾﻮﺟﺪ داﺋﻤﺎً ﻣﻠﻒ أﺳﺎﺳﻲ ﯾﺘﻢ إﻧﺸﺎؤه ﺧﺼﯿﺼﺎ ﻟﺘﻌﺮﯾﻒ
ﺻﻔﺤﺔ اﻹﻃﺎرات وﺗﺠﻤﯿﻌﮭﺎ وﺗﺤﺪﯾﺪ ﺧﺼﺎﺋﺼﮭﺎ .أي أن اﻟﻤﻌﺎدﻟﺔ ﺗﺘﻠﺨﺺ ﺑـِ:
ﻣﻜﻮﻧﺎت ﺻﻔﺤﺔ اﻹﻃﺎرات = ﻋﺪد ﻣﻠﻔﺎت اﻟﺼﻔﺤﺔ ﻧﻔﺴﮭﺎ +ﺻﻔﺤﺔ اﻟﻤﻠﻒ اﻷﺳﺎﺳﻲ اﻟﺬي ﯾﺠﻤﻌﮭﺎ.
104
www.dinaro.com/vb3
أي أﻧﻨﻲ ﻓﻲ اﻟﻤﺜﺎل اﻟﺴﺎﺑﻖ إﺣﺘﺠﺖ ﻓﻌﻠﯿﺎً إﻟﻰ أرﺑﻌﺔ ﻣﻠﻔﺎت ﻟﺘﻜﻮﯾﻦ اﻟﺼﻔﺤﺔ.
وﻗﺒﻞ أن ﻧﺒﺪأ ﯾﺎ ﻋﺰﯾﺰي اﻟﻤﺘﺪرب… ﻟﻨﻘﻢ ﺑﺎﻟﺘﺤﻀﯿﺮ ﻟﻸﻣﺜﻠﺔ اﻟﺘﻲ ﺳﺘﺮد ﻓﻲ ھﺬا اﻟﺪرس.
ﻟﺬﻟﻚ ﻗﻢ ﺑﺈﻧﺸﺎء ﺛﻼﺛﺔ أو أرﺑﻌﺔ ﻣﻠﻔﺎت ﺑﺴﯿﻄﺔ ﻟﻜﻲ ﺗﺴﺘﺨﺪﻣﮭﺎ ﻓﻲ ﺗﻄﺒﯿﻖ اﻷﻣﺜﻠﺔ أو
اﺳﺘﺨﺪم ﻣﻠﻔﺎﺗﻚ اﻟﻘﺪﯾﻤﺔ اﻟﺘﻲ ﻗﻤﺖ ﺑﺎﻟﺘﺪرب ﻋﻠﯿﮭﺎ ﻓﻲ اﻟﺪروس اﻟﺴﺎﺑﻘﺔ .أﻧﺎ ﻗﻤﺖ ﺑﺈﻧﺸﺎء
ﻣﻠﻔﺎت ﻋﻠﻰ اﻟﻨﻤﻂ اﻟﺘﺎﻟﻲ )وھﻲ اﻟﺘﻲ اﺳﺘﺨﺪﻣﺘﮭﺎ ﻓﻲ اﻟﻤﺜﺎل( وأﺳﻤﯿﺘﮭﺎ frame1.html,
frame2.html, frame3.html
><HTML
><HEAD
><TITLE>Frame1</TITLE
></HEAD
><BODY
Frame 1
></BODY
></HTML
وﻧﺒﺪأ اﻵن ﺑﺘﻌﺮﯾﻒ اﻟﻤﻠﻒ اﻟﺮﺋﯿﺴﻲ اﻟﺬي ﺳﯿﻀﻢ ﻛﺎﻓﺔ اﻹﻃﺎرات واﻟﻤﻠﻔﺎت .وھﻮ ﺑﺎﻟﻤﻨﺎﺳﺒﺔ
ﻣﻠﻒ ذو ﺣﺎﻟﺔ ﺧﺎﺻﺔ ﺣﯿﺚ ﻧﻘﻮم ﺑﺎﺳﺘﺨﺪام اﻟﻮﺳﻮم
105
www.dinaro.com/vb3
><HTML
><HEAD
><TITLE>Master File</TITLE
></HEAD
><FRAMESET
></FRAMESET
></HTML
ﻧﺄﺗﻲ اﻵن إﻟﻰ اﻟﺨﺼﺎﺋﺺ :واﻟﺨﺎﺻﯿﺔ اﻷوﻟﻰ اﻟﺘﻲ ﺗﺴﺘﺨﺪم ﻣﻊ ھﺬه اﻟﻮﺳﻮم ھﻲ COLS
وھﻲ ﺗﻌﺮّف ﻋﺪد وأﺣﺠﺎم اﻹﻃﺎرات اﻟﻌﻤﻮدﯾﺔ ﻟﻠﺼﻔﺤﺔ .وﺗُﺤﺪد اﻷﺣﺠﺎم ﺑﻄﺮﯾﻘﺘﯿﻦ )ھﻞ
ﻋﺮﻓﺘﮭﻤﺎ؟( ﻧﻌﻢ… إﻧﮭﻤﺎ اﻟﻄﺮﯾﻘﺔ اﻟﻤﺒﺎﺷﺮة واﻟﻄﺮﯾﻘﺔ اﻟﻨﺴﺒﯿﺔ...أو ﻛﻼھﻤﺎ ﻣﻌﺎ.
واﻵن إﻟﯿﻚ ھﺬه اﻷﻣﺜﻠﺔ اﻟﺘﻲ ﺗﻮﺿﺢ ﻣﻔﮭﻮم اﻷﻋﻤﺪة ...وأﻟﻔﺖ ﻧﻈﺮك إﻟﻰ أن ﻗﯿﺎﻣﻚ ﺑﺎﻟﻨﻘﺮ
ﻋﻠﻰ اﻟﺸﯿﻔﺮة ﻟﻜﻞ ﻣﺜﺎل ﺳﯿﺆدي ﺑﻚ إﻟﻰ ﻣﺸﺎھﺪة ھﺬا اﻟﻤﺜﺎل ﺑﺼﻮرة ﻋﻤﻠﯿﺔ ﻟﻜﻦ إﻧﺘﺒﮫ!
ﻓﮭﺬه اﻟﺸﯿﻔﺮة ﻏﯿﺮ ﻣﻜﺘﻤﻠﺔ وﻛﺘﺎﺑﺘﮭﺎ ﺑﮭﺬا اﻟﺸﻜﻞ ﻓﻘﻂ ﻟﻦ ﯾﺆدي إﻟﻰ أي
ﻧﺘﯿﺠﺔ وﻻ إﻟﻰ ﻇﮭﻮر أي إﻃﺎرات ﺣﯿﺚ ﯾﻨﻘﺼﮭﺎ وﺳﻮم أﺧﺮى ﺧﺎﺻﺔ ﺑﻤﺼﺪر
اﻟﻤﻠﻔﺎت اﻟﻈﺎھﺮة داﺧﻞ اﻹﻃﺎرات ،وﻗﺪ ﻗﻤﺖ ﺑﺈﻛﻤﺎﻟﮭﺎ ﻟﻐﺮض ﺗﻮﺿﯿﺢ اﻟﻨﺘﯿﺠﺔ ﻟﻚ ﻓﻘﻂ.
ﻟﺬﻟﻚ أرﺟﻮ أن ﺗﻜﺘﻔﻲ اﻵن ﺑﻤﻌﺎﯾﻨﺔ ﻛﻞ ﺷﯿﻔﺮة وﻧﺘﯿﺠﺘﮭﺎ إﻟﻰ أن أﻗﻮم ﺑﺴﺮد ﺑﺎﻗﻲ
اﻟﺨﺼﺎﺋﺺ اﻟﻤﮭﻤﺔ ﻻﺣﻘﺎً.
<FRAMESET
>"COLS="50%,50%
ﯾﺤﺪد إﻃﺎرﯾﻦ ﻋﻤﻮدﯾﯿﻦ ﺣﺠﻢ ﻛﻞ ﻣﻨﮭﻤﺎ %50ﻣﻦ ﺣﺠﻢ اﻟﺸﺎﺷﺔ ></FRAMESET
<FRAMESET
ﯾﺤﺪد ﺛﻼﺛﺔ إﻃﺎرات أﺣﺠﺎﻣﮭﺎ %20و %50و %30ﻋﻠﻰ اﻟﺘﻮاﻟﻲ >"COLS="20%,50%,30%
ﻣﻦ ﺣﺠﻢ اﻟﺸﺎﺷﺔ ></FRAMESET
106
www.dinaro.com/vb3
<FRAMESET
ﯾﺤﺪد ﺛﻼﺛﺔ إﻃﺎرات اﻷول ﺣﺠﻤﮫ 150ﺑﯿﻜﺴﻞ ....أﻣﺎ اﻟﻤﺴﺎﺣﺔ اﻟﻤﺘﺒﻘﯿﺔ >"*COLS="150,*,2
ﻓﺘﻘﺴﻢ ﻋﻠﻰ أﺳﺎس أن اﻹﻃﺎر اﻟﺜﺎﻟﺚ ﺣﺠﻤﮫ ھﻮ ﺿﻌﻔﻲ )* (2ﺣﺠﻢ ></FRAMESET
اﻹﻃﺎر اﻟﺜﺎﻧﻲ )*(
أﻣﺎ اﻟﺨﺎﺻﯿﺔ اﻟﺜﺎﻧﯿﺔ ﻓﮭﻲ ROWSوأﻋﺘﻘﺪ أﻧﻚ اﺳﺘﻨﺠﺖ ﻃﺒﯿﻌﺔ ﻋﻤﻠﮭﺎ .ﻧﻌﻢ ھﻲ ﺗﺤﺪد
ﻋﺪد وﺣﺠﻢ اﻹﻃﺎرات اﻷﻓﻘﯿﺔ )اﻟﺼﻔﻮف( داﺧﻞ اﻟﺼﻔﺤﺔ .وذﻟﻚ ﺑﻨﻔﺲ اﻷﺳﻠﻮب اﻟﻤﺘﺒﻊ ﻣﻊ
اﻷﻋﻤﺪة ،أي إﻣﺎ ﺑﺎﺳﺘﺨﺪام اﻟﻄﺮﯾﻘﺔ اﻟﻨﺴﺒﯿﺔ أو اﻟﻤﻄﻠﻘﺔ .وﺳﺄﻗﻮم ﺑﺴﺮد ﺑﻌﺾ اﻷﻣﺜﻠﺔ
ﻟﺘﻮﺿﯿﺤﮭﺎ )وأذﻛﺮك ﺛﺎﻧﯿﺔ أن ھﺬه اﻷﻣﺜﻠﺔ ﻏﯿﺮ ﻣﻜﺘﻤﻠﺔ(:
<FRAMESET
>"ROWS="50%,50%
ﯾﺤﺪد إﻃﺎرﯾﻦ أﻓﻘﯿﯿﻦ ارﺗﻔﺎع ﻛﻞ ﻣﻨﮭﻤﺎ %50ﻣﻦ ارﺗﻔﺎع اﻟﺸﺎﺷﺔ ></FRAMESET
<FRAMESET
ﯾﺤﺪد ﺛﻼﺛﺔ إﻃﺎرات أﻓﻘﯿﺔ ارﺗﻔﺎﻋﺎﺗﮭﺎ %20و %50و %30ﻋﻠﻰ >"ROWS="20%,50%,30%
اﻟﺘﻮاﻟﻲ ﻣﻦ ارﺗﻔﺎع اﻟﺸﺎﺷﺔ ></FRAMESET
<FRAMESET
ﯾﺤﺪد ﺛﻼﺛﺔ إﻃﺎرات أﻓﻘﯿﺔ اﻷول ارﺗﻔﺎﻋﮫ 50ﺑﯿﻜﺴﻞ ،واﻟﺜﺎﻧﻲ 120 >"*ROWS="50,120,
ﺑﯿﻜﺴﻞ ،واﻟﺜﺎﻟﺚ ﺳﯿﻜﻮن ﺑﺎﻹرﺗﻔﺎع اﻟﻤﺘﺒﻘﻲ ﻣﻦ اﻟﺸﺎﺷﺔ ></FRAMESET
ﯾﺤﺪد أرﺑﻌﺔ إﻃﺎرات أﻓﻘﯿﺔ ارﺗﻔﺎع اﻷول ھﻮ 50ﺑﯿﻜﺴﻞ ،واﻟﺜﺎﻟﺚ %15 <FRAMESET
>"ROWS="50,*,15%,20%
ﻣﻦ ارﺗﻔﺎع اﻟﺸﺎﺷﺔ ،واﻟﺮاﺑﻊ %20ﻣﻦ ارﺗﻔﺎع اﻟﺸﺎﺷﺔ أﻣﺎ اﻟﺜﺎﻧﻲ ﻓﺴﯿﻜﻮن ></FRAMESET
ارﺗﻔﺎﻋﮫ ﺑﻤﺎ ﺗﺒﻘﻰ ﻣﻦ ارﺗﻔﺎع اﻟﺸﺎﺷﺔ.
107
www.dinaro.com/vb3
>"*<FRAMESET COLS="*,2
ﯾﺤﺪد إﻃﺎرﯾﻦ اﻟﺜﺎﻧﻲ ارﺗﻔﺎﻋﮫ ﺿﻌﻔﻲ ارﺗﻔﺎع اﻷول ></FRAMESET
ﻟﻢ ﻧﻨﺘﮫ ﺑﻌﺪ ﻣﻦ ذﻛﺮ ﻛﻞ اﻟﺨﺼﺎﺋﺺ اﻟﻤﺘﻌﻠﻘﺔ ﺑﺎﻟﻮﺳﻮم > <FRAMESETﻓﻼ زال ھﻨﺎك
اﻟﻜﺜﯿﺮ .وﻟﻜﻦ ﻣﻦ اﻟﻀﺮوري أن ﻧﻘﻮم اﻵن ﺑﺎﻹﻧﺘﻘﺎل إﻟﻰ وﺳﻢ آﺧﺮ ﻟﻺﻃﺎرات ﻷﻧﮫ ﻣﺮﺗﺒﻂ
إرﺗﺒﺎﻃﺎً وﺛﯿﻘﺎً ﺑﺎﻟﻮﺳﻮم اﻟﺴﺎﺑﻘﺔ وﺧﺼﺎﺋﺼﮭﺎ اﻟﻤﺬﻛﻮرة أﻋﻼه ،وھﻲ > <FRAMEﻓﻤﺎ
ھﻮ ﻋﻤﻞ ھﺬا اﻟﻮﺳﻢ؟
ﺣﺴﻨﺎ ،ﻛﻞ ﻣﺎ ﻗﻤﻨﺎ ﺑﮫ ﺣﺘﻰ اﻵن ھﻮ ﺗﻌﺮﯾﻒ ﻣﺠﻤﻮﻋﺔ ﻣﻦ اﻹﻃﺎرات وﺧﺼﺎﺋﺼﮭﺎ )ﻓﻘﻂ
ﺗﻌﺮﯾﻒ اﻹﻃﺎرات( ﻟﻜﻦ ﻟﻢ ﻧﺤﺪد ﻣﺎھﯿﺔ ھﺬه اﻹﻃﺎرات وﻻ ﻣﺤﺘﻮﯾﺎﺗﮭﺎ وﻻ ﻣﺼﺎدرھﺎ .ﺗﻤﺎﻣﺎ
ﻛﻤﺎ ﻧﻘﻮم ﺑﺘﻌﺮﯾﻒ ﺻﻔﺤﺎت اﻟﻮﯾﺐ اﻹﻋﺘﯿﺎدﯾﺔ وﺧﺼﺎﺋﺼﮭﺎ ﻓﻲ اﻟﻮﺳﻢ > <BODYدون
أن ﯾﻌﻨﻲ ذﻟﻚ ﺗﺤﺪﯾﺪ ﻣﺤﺘﻮﯾﺎت ھﺬه اﻟﺼﻔﺤﺎت .ﻓﺈذا أردﻧﺎ ﻓﯿﻤﺎ ﺑﻌﺪ إدراج ﺻﻮرة ﻣﺜﻼً
ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ اﻟﺨﺎص ﺑﺬﻟﻚ وھﻮ ><"IMG SRC="imagname.ext
وﻓﻲ ﺣﺎﻟﺔ اﻹﻃﺎرات ﻓﺈﻧﻨﺎ ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ > <FRAMEوھﻮ وﺳﻢ ﻣﻔﺮد أي ﻟﯿﺲ ﻟﮫ
وﺳﻢ ﻧﮭﺎﯾﺔ ﺗﻤﺎﻣﺎً ﻣﺜﻞ > .<IMGوﻓﯿﮫ ﻧﻘﻮم ﺑﺘﺤﺪﯾﺪ ﻣﺼﺪر وﺧﺼﺎﺋﺺ ﻛﻞ ﻣﻠﻒ ﻧﺮﯾﺪ
إﻇﮭﺎره داﺧﻞ أﺣﺪ اﻹﻃﺎرات .وﯾﺘﻢ اﺳﺘﺨﺪام ھﺬا اﻟﻮﺳﻢ ﻣﺮات ﺑﻨﻔﺲ ﻋﺪد اﻹﻃﺎرات
اﻟﻤﺬﻛﻮرة داﺧﻞ > .<FRAMESETوﺳﻮف أﻗﻮم ﻣﺒﺎﺷﺮة ﺑﺎﺳﺘﺨﺪام اﻟﺨﺎﺻﯿﺔ SRC
ﻟﺘﺤﺪﯾﺪ ﻣﺼﺪر اﻟﻤﻠﻒ.
دﻋﻨﺎ ﻧﻘﻮم اﻵن ﺑﺈﺗﻤﺎم اﻟﺸﯿﻔﺮة ﻟﺒﻌﺾ اﻷﻣﺜﻠﺔ اﻟﻤﺬﻛﻮرة أﻋﻼه .وﻧﺒﺪأ ﺑﺎﻟﻤﺜﺎل اﻷول:
>"<FRAMESET COLS="50%,50%
>"<FRAME SRC="frame1.html
108
www.dinaro.com/vb3
<FRAME SRC="frame2.html">
</FRAMESET>
:ﻣﺜﺎل آﺧﺮ
<FRAMESET COLS="200,400,*">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
<FRAME SRC="frame3.html">
</FRAMESET>
:ﻣﺜﺎل ﺛﺎﻟﺚ
<FRAMESET ROWS="50,*,15%,20%">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
<FRAME SRC="frame3.html">
<FRAME SRC="frame4.html">
</FRAMESET>
:ﻣﺜﺎل راﺑﻊ
<FRAMESET COLS="*,2*">
<FRAME SRC="frame1.html">
109
www.dinaro.com/vb3
<FRAME SRC="frame2.html">
</FRAMESET
<FRAMESET COLS="50%,50%">
<FRAME SRC="frame1.html">
<FRAME SRC="alah.jpg">
</FRAMESET>
110
www.dinaro.com/vb3
واﻵن ﻟﻤﺎذا ﻻ ﻧﻘﻢ ﻣﻌﺎً ﺑﻤﺮاﺟﻌﺔ اﻷﻓﻜﺎر اﻷﺳﺎﺳﯿﺔ اﻟﺴﺎﺑﻘﺔ اﻟﺬﻛﺮ وﺗﻠﺨﯿﺼﮭﺎ؟ وھﺬه ھﻲ:
• ﻹدراج ﺻﻔﺤﺔ إﻃﺎرات ﻧﺤﺘﺎج إﻟﻰ ﻣﻠﻒ رﺋﯿﺴﻲ ﯾﻌﺘﺒﺮ ﺑﻤﺜﺎﺑﺔ اﻟﻮﻋﺎء اﻟﺬي ﺳﯿﻀﻢ ھﺬه
اﻹﻃﺎرات.
• اﻟﻤﻠﻔﺎت اﻟﻔﺮﻋﯿﺔ اﻟﺘﻲ ﺗﻈﮭﺮ ﺿﻤﻦ اﻹﻃﺎرات ھﻲ ﻣﻠﻔﺎت ﻋﺎدﯾﺔ ﻛﺎﻟﺘﻲ ﻗﻤﻨﺎ ﺑﺈﻧﺸﺎﺋﮭﺎ ﻓﻲ
اﻟﺪروس اﻟﺴﺎﺑﻘﺔ أو ﺻﻮراً .وﻻ ﺗﺤﺘﻮي ﻋﻠﻰ أي ﺗﻨﺴﯿﻖ أو وﺳﻮم ﺧﺎﺻﺔ.
• ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ > <FRAMEداﺧﻞ اﻟﻤﻠﻒ اﻟﺮﺋﯿﺴﻲ ﻟﻤﻨﺎداة اﻟﻤﻠﻔﺎت اﻟﻔﺮﻋﯿﺔ داﺧﻞ
اﻹﻃﺎرات ،وذﻟﻚ ﻣﻊ اﻟﺨﺎﺻﯿﺔ .SRCﺑﺎﻹﺿﺎﻓﺔ إﻟﻰ اﺳﺘﺨﺪاﻣﮫ ﻟﺘﺤﺪﯾﺪ ﺑﺎﻗﻲ اﻟﺨﺼﺎﺋﺺ .
111
www.dinaro.com/vb3
ﺣﺘﻰ اﻵن ﻗﻤﻨﺎ ﺑﺘﻘﺴﯿﻢ اﻟﺼﻔﺤﺔ إﻣﺎ ﻹﻃﺎرات أﻓﻘﯿﺔ أو ﻹﻃﺎرات ﻋﻤﻮدﯾﺔ .ﻟﻜﻦ ﻧﺤﺘﺎج
ﻟﻤﻌﺮﻓﺔ ﻛﯿﻔﯿﺔ إدراج ﻛﻼھﻤﺎ ﻓﻲ اﻟﺼﻔﺤﺔ .ﻛﻤﺎ ﻓﻲ اﻷﻣﺜﻠﺔ اﻟﺘﺎﻟﯿﺔ:
112
www.dinaro.com/vb3
113
www.dinaro.com/vb3
ﺑﻤﺎ أن اﻟﺼﻔﺤﺔ ﺗﺤﺘﻮي ﻋﻠﻰ ﺻﻔﯿﻦ ﻧﻘﻮم ﺑﺘﻌﺮﯾﻔﮭﻤﺎ أوﻻً ﺣﺴﺐ اﻹرﺗﻔﺎﻋﺎت اﻟﻤﺮﻏﻮب
ﺑﮭﺎ:
>"*<FRAMESET ROWS="100,
>"<FRAME SRC="frame1.html
>"<FRAME SRC="frame2.html
></FRAMESET
ﻟﻜﻦ اﻟﺼﻒ اﻟﺜﺎﻧﻲ ﻣﻘﺴﻢ إﻟﻰ ﻋﻤﻮدﯾﻦ وھﻨﺎ ﯾﻌﺘﺒﺮ ﺑﻤﻔﮭﻮم ﻟﻐﺔ HTMLوﻛﺄﻧﮫ ﺻﻔﺤﺔ
إﻃﺎرات ﺟﺪﯾﺪة ﻟﺬﻟﻚ ﻻ ﻧﺤﺘﺎج ﻟﺘﻌﺮﯾﻔﮫ ﻛﺼﻒ وﺑﺪﻻً ﻣﻦ ذﻟﻚ ﻧﻌﺎود اﺳﺘﺨﺪام ﺗﻌﺮﯾﻒ
اﻟﺼﻔﺤﺎت! أي > <FRAMESETﻣﺮة أﺧﺮى.
>"*<FRAMESET ROWS="100,
>"<FRAME SRC="frame1.html
><FRAMESET
></FRAMESET
></FRAMESET
وﺑﻤﺎ أن اﻟﺼﻒ اﻟﺜﺎﻧﻲ )أو ﻟﻨﻘﻞ اﻹﻃﺎر اﻟﺜﺎﻧﻲ( ﻣﻘﺴﻢ إﻟﻰ ﻋﻤﻮدﯾﻦ ،إذن ﺑﻘﻲ ﻋﻠﯿﻨﺎ إﺿﺎﻓﺔ
ﺗﻌﺮﯾﻒ ﻟﮭﺬه اﻷﻋﻤﺪة .وﺑﺬﻟﻚ ﺗﻜﻮن اﻟﺸﯿﻔﺮة اﻟﻨﮭﺎﺋﯿﺔ ﻛﺎﻟﺘﺎﻟﻲ:
114
www.dinaro.com/vb3
<FRAMESET ROWS="100,*">
<FRAME SRC="frame1.html">
<FRAMESET COLS="200,*">
<FRAME SRC="frame2.html">
<FRAME SRC="frame3.html">
</FRAMESET>
</FRAMESET>
115
www.dinaro.com/vb3
ﯾﻮﺟﺪ ﻟﺪﯾﻨﺎ ﺛﻼﺛﺔ أﻋﻤﺪة ،أﻟﯿﺲ ﻛﺬﻟﻚ؟ إذن ﻟﻨﻘﻢ ﺑﺘﻌﺮﯾﻒ ﺻﻔﺤﺔ إﻃﺎرات ذات ﺛﻼﺛﺔ أﻋﻤﺪة
)ﻃﺒﻌﺎً ﻻ ﯾﻮﺟﺪ أھﻤﯿﺔ ﻟﻸﺣﺠﺎم اﻟﻤﺬﻛﻮرة ،ﻓﺄﻧﺎ اﺧﺘﺮﺗﮭﺎ ﺣﺴﺐ رﻏﺒﺘﻲ وﺗﺴﺘﻄﯿﻊ أﻧﺖ
اﺧﺘﯿﺎر اﻷﺣﺠﺎم اﻟﺘﻲ ﺗﺮﯾﺪھﺎ(.
>"<FRAMESET COLS="100,*,100
>"<FRAME SRC="frame1.html
>"<FRAME SRC="frame2.html
>"<FRAME SRC="frame3.html
></FRAMESET
اﻟﻌﻤﻮد اﻷوﺳﻂ ﻣﻦ ھﺬه اﻟﺼﻔﺤﺔ ﻣﻘﺴﻢ إﻟﻰ ﺻﻔﯿﻦ ،إذن ﻧﺴﺘﺒﺪل ﺗﻌﺮﯾﻔﮫ ﺑﺘﻌﺮﯾﻒ آﺧﺮ
ﻟﺼﻔﺤﺔ إﻃﺎرات ﻣﻜﻮﻧﺔ ﻣﻦ ﺻﻔﯿﻦ )وھﺬا ھﻮ اﻟﺘﻌﺮﯾﻒ ﺑﺼﻮرة ﻣﺴﺘﻘﻠﺔ(
>"*<FRAMESET ROWS="80,
>"<FRAME SRC="frame2.html
>"<FRAME SRC="frame4.html
></FRAMESET
وﺑﻌﺪ دﻣﺞ اﻟﺸﯿﻔﺮﺗﯿﻦ اﻟﺴﺎﺑﻘﺘﯿﻦ ﻣﻌﺎً ﻧﺤﺼﻞ ﻋﻠﻰ ھﺬه اﻟﺸﯿﻔﺮة اﻟﻨﮭﺎﺋﯿﺔ:
>"<FRAMESET COLS="100,*,100
>"<FRAME SRC="frame1.html
>"*<FRAMESET ROWS="80,
>"<FRAME SRC="frame2.html
>"<FRAME SRC="frame4.html
></FRAMESET
116
www.dinaro.com/vb3
<FRAME SRC="frame3.html">
</FRAMESET>
. أراك ﻋﻠﻰ ﺧﯿﺮ ﻓﻲ اﻟﺪرس اﻟﺘﺎﻟﻲ.وﺻﻠﻨﺎ اﻵن إﻟﻰ ﻧﮭﺎﯾﺔ ھﺬا اﻟﺪرس
أﻟﯿﺲ ھﺬا
ﻣﻤﺘﻌﺎ
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHH
117
www.dinaro.com/vb3
ﺍﻟﺪﺭﺱ ﺍﻟﻌﺎﺷﺮ
ﻛﻤﺎ ﺗﺮى ﻣﻦ اﻟﻌﻨﻮان ﻓﻘﺪ اﺧﺘﺮت أن ﯾﻜﻮن ھﺬا اﻟﺪرس ﺧﺎرﺟﺎً ﻗﻠﯿﻼً ﻋﻦ ﻧﻄﺎق اﻟﺪروس
اﻟﺴﺎﺑﻘﺔ ﻣﻦ ﺣﯿﺚ اﻟﻤﺤﺘﻮى .ﻓﻠﻦ ﺗﺠﺪ ھﻨﺎ وﺳﻮﻣﺎً ﻣﺤﺪدة ﺗﺴﺘﻄﯿﻊ ﺣﺼﺮھﺎ ﺗﺤﺖ ﻣﻮﺿﻮع
ﻣﻌﯿﻦ ،ﺑﻞ وﺳﻮﻣﺎً ﻋﺎﻣﺔ وﺧﺼﺎﺋﺺ إﺿﺎﻓﯿﺔ ﻟﻮﺳﻮم ذﻛﺮت ﺳﺎﺑﻘﺎً .وإن ﻛﺎن اﻟﮭﺪف ﻣﻦ
ﻣﻌﻈﻤﮭﺎ ﺗﺮﺗﯿﺐ اﻟﺼﻔﺤﺔ واﻟﺘﺤﻜﻢ ﺑﺸﻜﻞ ﻣﺤﺘﻮﯾﺎﺗﮭﺎ .وﻻ أﺧﻔﻲ ﻋﻠﯿﻚ أﻧﻲ ﻗﺼﺪت ﺗﺄﺟﯿﻞ
ﺑﻌﻀﮭﺎ ﺣﺘﻰ ھﺬا اﻟﺪرس ﻣﻊ أﻧﮫ ﻛﺎن ﻣﻦ اﻟﻤﻤﻜﻦ إدراﺟﮭﺎ ﺿﻤﻦ دروس ﺳﺎﺑﻘﺔ ،وﺧﺎﺻﺔ
اﻟﺪرس اﻟﺮاﺑﻊ )اﻟﻔﻘﺮات( .ﻟﻜﻦ ﺣﺠّﺘﻲ ﻓﻲ ﻋﺪم إدراﺟﮭﺎ ﻓﻲ ﺣﯿﻨﮫ أن ھﺬه اﻟﻮﺳﻮم ﻟﻦ ﯾﺘﻢ
اﺳﺘﺨﺪاﻣﮭﺎ وﻟﻦ ﺗُﻔﮭﻢ ﻃﺮﯾﻘﺔ ﻋﻤﻠﮭﺎ إﻻّ ﻋﻨﺪ اﺳﺘﺨﺪام وﺳﻮم أﺧﺮى ﺗﻢّ ﺷﺮﺣﮭﺎ ﻓﻲ وﻗﺖ
ﻻﺣﻖ ﺑﻌﺪ اﻟﻔﻘﺮات ﻣﺜﻞ اﻟﺼﻮر واﻟﺠﺪاول .أﻣﺎ اﻟﺒﻌﺾ اﻵﺧﺮ ﻓﻔﻀﻠﺖ ﻋﺪم ﺣﺼﺮھﺎ ﺿﻤﻦ
أي درس ﻋﻠﻰ اﻋﺘﺒﺎر أﻧﮭﺎ وﺳﻮم ﻋﺎﻣﺔ ﻻ ﺗﺨﺘﺺ ﺑﺄي ﻣﻮﺿﻮع .ﻋﻠﻰ أﯾﺔ ﺣﺎل ﯾﻜﻔﯿﻨﺎ ھﺬه
اﻟﻤﻘﺪﻣﺔ وأﺗﺮك ﻟﻚ ﺣﺮﯾﺔ ﺗﺼﻨﯿﻔﮭﺎ ﻛﻤﺎ ﯾﺤﻠﻮ ﻟﻚ .واﻵن ﻟﻨﺪﺧﻞ ﻣﺒﺎﺷﺮة ﻓﻲ اﻟﻤﻮﺿﻮع.
أﺗﺮى ھﺬا اﻟﺨﻂ اﻟﺬي ﻓﺼﻠﺖ ﺑﮫ ھﺬه اﻟﻔﻘﺮة ﻋﻦ اﻟﻔﻘﺮة اﻟﺴﺎﺑﻘﺔ؟ إﻧﮫ ﯾﺴﻤﻰ ﺑﻠﻐﺔ
HTMLﺑﺎﻟﻤﺴﻄﺮة اﻷﻓﻘﯿﺔ Horizontal Ruleوﺗﺴﺘﻄﯿﻊ إدراﺟﮫ ﻟﺘﻘﺴﯿﻢ ﺻﻔﺤﺘﻚ
ﺑﻜﺘﺎﺑﺔ اﻟﻮﺳﻢ > <HRﻓﻘﻂ ﻻ ﻏﯿﺮ .أﻛﺘﺐ:
><HR
118
www.dinaro.com/vb3
ﻟﻜﻦ ھﺬا ﻟﯿﺲ ﻛﻞ ﺷﻲء .ﻷﻧﻚ ﺗﺴﺘﻄﯿﻊ ﺗﺤﺪﯾﺪ ﺳُﻤﻚ ھﺬا اﻟﺨﻂ إذا أﺿﻔﺖ ﻟﮫ اﻟﺨﺎﺻﯿﺔ
SIZEوأﺗﺒﻌﺘﮭﺎ ﺑﺮﻗﻢ ﯾﻤﺜﻞ ھﺬا اﻟﺴُﻤﻚ ﻣﺜﻼً:
>"<HR SIZE="5
>"<HR SIZE="1
>"<HR SIZE="10
ﻛﺬﻟﻚ ﯾﻤﻜﻨﻚ ﺗﺤﺪﯾﺪ ﻋﺮض اﻟﺨﻂ ﺑﺎﺳﺘﺨﺪام اﻟﺨﺎﺻﯿﺔ WIDTHواﻟﺘﻲ ﻣﻦ اﻟﻤﻤﻜﻦ أن
ﺗﺄﺧﺬ ﻗﯿﻤﺔ ﻣﻄﻠﻘﺔ أو ﻧﺴﺒﯿﺔ
>"<HR WIDTH="80%
119
www.dinaro.com/vb3
<HR WIDTH="400">
واﻟﺘﻲ ﺗﺄﺧﺬ اﻟﻘﯿﻢALIGN وﻣﻦ اﻟﺨﺼﺎﺋﺺ اﻷﺧﺮى ﻟﮭﺬا اﻟﺨﻂ ﺧﺎﺻﯿﺔ اﻟﻤﺤﺎذاه
left, right ،center
120
www.dinaro.com/vb3
وﻛﻤﺎ ﺗﻼﺣﻆ ﻓﺈن ھﺬا اﻟﺨﻂ ﯾﻜﺘﺴﺐ ﻣﻈﮭﺮاً ﻏﺎﺋﺮاً ﺛﻼﺛﻲ اﻷﺑﻌﺎد وإذا أردت ﺧﻄﺎً ﻋﺎدﯾﺎً ﻏﯿﺮ
ﻏﺎﺋﺮ ﻓﻘﻢ ﺑﺈﺿﺎﻓﺔ اﻟﺨﺎﺻﯿﺔ NOSHADE
أﻣﺎ إذا ﻛﺎن ﻟﻮن ھﺬا اﻟﺨﻂ ﻻ ﯾﻌﺠﺒﻚ ،ﻓﻤﺎ ﻣﻦ ﻣﺸﻜﻠﺔ إذ أﻧﻚ ﺗﺴﺘﻄﯿﻊ اﺧﺘﯿﺎر اﻟﻠﻮن اﻟﺬي
ﯾﻌﺤﺒﻚ ﻣﻦ ﺧﻼل اﻟﺨﺎﺻﯿﺔ ) COLORﺗﻌﻤﻞ ﻓﻘﻂ ﻣﻊ (MS Explorer
اﻟﻮﺳﻢ اﻟﺘﺎﻟﻲ ﻓﻲ ھﺬه اﻟﻤﺠﻤﻮﻋﺔ ھﻮ وﺳﻢ اﻟﻤﻼﺣﻈﺎت >! <-- ... --وﻧﺴﺘﺨﺪﻣﮫ ﻋﻨﺪ
اﻟﺤﺎﺟﺔ ﻟﻜﺘﺎﺑﺔ ﺑﻌﺾ اﻟﻤﻼﺣﻈﺎت اﻟﺨﺎﺻﺔ أو اﻟﻌﺒﺎرات اﻟﺘﻮﺿﯿﺤﯿﺔ ﺿﻤﻦ اﻟﻤﻠﻒ واﻟﺘﻲ
ﯾﻘﺼﺪ أن ﻻ ﺗﻈﮭﺮ ﻋﻨﺪ اﺳﺘﻌﺮاض ھﺬا اﻟﻤﻠﻒ ﻓﻲ اﻟﻤﺘﺼﻔﺢ.
وھﺬه ھﻲ اﻟﻨﺘﯿﺠﺔ
121
www.dinaro.com/vb3
ﻣﻦ اﻟﻤﺆﻛﺪ أﻧﻚ ﺗﻌﺮف اﻟﻮﺳﻢ > <BRواﻟﺬي ﯾﻘﻮم ﺑﺎﻟﺘﺤﻜﻢ ﻓﻲ ﻧﮭﺎﯾﺎت اﻷﺳﻄﺮ )أي أﻧﮫ
ﯾﻨﮭﻲ اﻟﺴﻄﺮ اﻟﺤﺎﻟﻲ ﺑﺤﯿﺚ ﯾﻈﮭﺮ اﻟﻨﺺ اﻟﺬي ﯾﻠﯿﮫ ﻓﻲ ﺳﻄﺮ ﺟﺪﯾﺪ( .ﻓﮭﻞ ﺗﻌﻠﻢ أﻧﮫ ﯾﻮﺟﺪ
ﺧﺎﺻﯿﺔ ﻟﮭﺬا اﻟﻮﺳﻢ وھﻲ CLEAR؟
ﻟﻜﻲ ﺗﺘﻮﺿﺢ ﻟﻚ ﻃﺒﯿﻌﺔ ﻋﻤﻞ ھﺬه اﻟﺨﺎﺻﯿﺔ ،ﻗﻢ ﺑﻤﺮاﺟﻌﺔ ﻣﺎ ذﻛﺮﻧﺎه ﻓﻲ اﻟﺪرس اﻟﺨﺎﻣﺲ
ﻋﻦ اﻟﺼﻮر واﻟﺮﺳﻮﻣﺎت ،واﺳﺘﺨﺪام اﻟﺨﺎﺻﯿﺔ ALIGNاﻟﺘﻲ ﺗﺤﺪد ﻣﻮﻗﻊ ھﺬه اﻟﺼﻮر
ﻋﻠﻰ اﻟﺼﻔﺤﺔ .ﺣﺴﻨﺎً ،ﻟﻘﺪ إﺗﻔﻘﻨﺎ ﻓﻲ ﺣﯿﻨﮫ ﻋﻠﻰ أن اﻟﻘﯿﻤﺔ rightﺗﻮﺟﮫ اﻟﺼﻮرة إﻟﻰ ﯾﻤﯿﻦ
اﻟﺼﻔﺤﺔ وأن اﻟﻨﺺ اﻟﺬي ﯾﻠﯿﮭﺎ ﯾﻈﮭﺮ ﻣﻠﺘﻔﺎً ﺑﻌﺪة أﺳﻄﺮ ﻋﻠﻰ اﻟﺠﮭﺔ اﻟﯿﺴﺮى .وﻛﺬﻟﻚ اﻷﻣﺮ
)ﺑﺼﻮرة ﻣﻌﻜﻮﺳﺔ( ﻋﻨﺪ اﺳﺘﺨﺪام اﻟﻘﯿﻤﺔ .leftوﺣﺘﻰ ﻟﻮ اﺳﺘﺨﺪﻣﻨﺎ اﻟﻘﯿﻤﺔ bottomأو ﻟﻢ
ﻧﻘﻢ ﺑﺈﺿﺎﻓﺔ اﻟﺨﺎﺻﯿﺔ ALIGNأﺻﻼً ،ﻓﺴﻮف ﻧﺠﺪ أن اﻟﻨﺺ اﻟﺬي ﯾﻠﯿﮭﺎ ﯾﻈﮭﺮ ﺑﻤﺤﺎذاة
اﻟﺤﺎﻓﺔ اﻟﺴﻔﻠﻰ ﻟﻠﺼﻮرة.
وھﻲ ﺗﺄﺧﺬ اﻟﻘﯿﻢ rightاﻟﺘﻲ ﺗﻤﻨﻊ ﻇﮭﻮر اﻟﻨﺺ إﻻّ ﻋﻨﺪ ﺑﺪاﯾﺔ اﻟﮭﺎﻣﺶ اﻷﯾﻤﻦ اﻟﻔﺎرغ ﺑﻌﺪ
اﻟﺼﻮرة )أي ﺑﻤﻨﺘﮭﻰ اﻟﺒﺴﺎﻃﺔ ﺗﻤﻨﻊ ﻇﮭﻮر اﻟﻨﺺ واﻟﺘﻔﺎﻓﮫ ﻋﻠﻰ اﻟﺠﮭﺔ اﻟﯿﺴﺮى
ﻟﻠﺼﻮرة ...أﻟﯿﺴﺖ ھﺬه اﻟﻌﺒﺎرة أﺳﮭﻞ ﻟﻠﻔﮭﻢ؟!!( وﺑﺎﻟﺘﺎﻟﻲ ﻓﺈن ھﺬه اﻟﻘﯿﻤﺔ ﺗﺴﺘﺨﺪم ﻋﻨﺪﻣﺎ
ﺗﻜﻮن ﻗﯿﻤﺔ ALIGNﻟﻠﺼﻮرة ھﻲ .right
وﺑﻨﻔﺲ اﻟﻤﺒﺪأ ﻟﻜﻦ ﺑﺼﻮرة ﻣﻌﻜﻮﺳﺔ ﻧﺴﺘﺨﺪم اﻟﻘﯿﻤﺔ leftواﻟﺘﻲ ﻓﻲ ﻧﺘﯿﺠﺘﮭﺎ ﺗﻤﻨﻊ إﻟﺘﻔﺎف
اﻟﻨﺺ ﻋﻠﻰ اﻟﺠﮭﺔ اﻟﯿﻤﻨﻰ ﻣﻦ اﻟﺼﻮرة .وذﻟﻚ ﻋﻨﺪﻣﺎ ﺗﻜﻮن ﻣﺤﺎذاة اﻟﺼﻮرة ھﻲ left
122
www.dinaro.com/vb3
ﻣﻨﻄﻖ ﻣﻌﻜﻮس ...أﻟﯿﺲ ﻛﺬﻟﻚ؟ ﻋﻠﻰ أﯾﺔ ﺣﺎل إذا ﻛﻨﺖ ﺗﻜﺮة ھﺬه اﻟﺘﻌﻘﯿﺪات وﺗﺤﺐ اﻟﻄﺮق
اﻟﻤﺨﺘﺼﺮة ﻣﺜﻠﻲ ،ﻓﺎﺳﺘﺨﺪم اﻟﻘﯿﻤﺔ allاﻟﺘﻲ ﺗﻤﻨﻊ اﻹﻟﺘﻔﺎف ﻣﻦ ﺟﻤﯿﻊ اﻟﺠﻮاﻧﺐ.
ﻣﺎ رأﯾﻚ أن ﻧﻘﺘﺒﺲ ﺑﻌﺾ اﻷﻣﺜﻠﺔ ﻣﻦ اﻟﺪرس اﻟﺨﺎﻣﺲ ﻟﻨﺸﺎھﺪ ﻛﯿﻒ ﺗﻌﻤﻞ ﻣﻊ إﺿﺎﻓﺔ ھﺬه
اﻟﺨﺎﺻﯿﺔ؟ وﺳﻮف أدرج ھﺬه اﻷﻣﺜﻠﺔ ﻛﻤﺎ ھﻲ ﻧﺼﺎً وﺣﺮﻓﺎً أﻣﺎ اﻹﺿﺎﻓﺎت ﻓﮭﻲ اﻟﻤﻤﯿﺰة
ﺑﺎﻟﻠﻮن اﻷﺣﻤﺮ
123
www.dinaro.com/vb3
ھﺎ ﻗﺪ وﺻﻠﻨﺎ إﻟﻰ ﻧﮭﺎﯾﺔ ھﺬا اﻟﺪرس واﻟﺬي ﻧﺎﻗﺸﻨﺎ ﻓﯿﮫ وﺳﻮﻣﺎً ﻣﻨﻮﻋﺔ ﺗﺘﻌﻠﻖ ﻓﻲ ﻣﺠﻤﻠﮭﺎ
ﺑﺘﻨﺴﯿﻖ اﻟﺼﻔﺤﺎت .أراك ﻋﻠﻰ ﺧﯿﺮ ﻓﻲ اﻟﺪرس اﻟﺘﺎﻟﻲ.
أﻟﯿﺲ ھﺬا
ﻣﻤﺘﻌﺎ
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHH
125
www.dinaro.com/vb3
ﺳﯿﻜﻮن ھﺬا اﻟﺪرس اﻷول ﻣﻦ درﺳﯿﻦ ﺳﻨﺘﺤﺪث ﻓﯿﮭﻤﺎ ﻋﻦ اﻟﻨﻤﺎذج وﻛﯿﻔﯿﺔ ﺗﻀﻤﯿﻨﮭﺎ ﻓﻲ
ﺻﻔﺤﺎت اﻟﻮﯾﺐ.
ﻣﻊ أن اﻟﻨﻤﺎذج ﺗﻌﺘﺒﺮ ﻣﻦ اﻟﻤﻮاﺿﯿﻊ اﻟﻤﺘﻘﺪﻣﺔ )وﻏﯿﺮ اﻟﺴﮭﻠﺔ( ﻧﻮﻋﺎً ﻣﺎ ﻓﻲ ﻟﻐﺔ HTML
إﻻ أن ﻣﻌﻈﻢ ﻣﻮاﻗﻊ اﻟﻮﯾﺐ ﺗﻜﺎد ﻻ ﺗﺨﻠﻮ ﻣﻦ وﺟﻮدھﺎ ،وذﻟﻚ ﻟﻌﺪة أﺳﺒﺎب ﻟﻌﻞ ﻣﻦ أھﻤﮭﺎ
إﯾﺠﺎد إﻣﻜﺎﻧﯿﺔ ﻟﻠﺘﻔﺎﻋﻞ ﺑﯿﻦ اﻟﻤﻮﻗﻊ وﺻﺎﺣﺒﮫ ﻣﻦ ﺟﮭﺔ واﻟﺰوار ﻣﻦ ﺟﮭﺔ أﺧﺮى...أﺣﯿﺎﻧﺎ ﻗﺪ
ﺗﺤﺘﺎج ﻛﻤﺼﻤﻢ ﻟﻤﻮﻗﻊ وﯾﺐ أن ﺗﻌﺮف آراء زوار ﻣﻮﻗﻌﻚ ﻓﻲ ﻣﺴﺎﺋﻞ ﻣﻌﯿﻨﺔ وﻗﺪ ﺗﻜﺘﻔﻲ
ﺑﺮﺳﺎﺋﻞ اﻟﺒﺮﯾﺪ اﻹﻟﻜﺘﺮوﻧﻲ اﻟﺘﻲ ﯾﺮﺳﻠﻮھﺎ ﻟﻚ ،ﻟﻜﻦ ﻋﻨﺪﻣﺎ ﺗﺮﯾﺪ ﻣﻌﺮﻓﺔ أﺷﯿﺎء ﻣﺤﺪدة ﺑﺬاﺗﮭﺎ
ﻓﺈن اﻟﻨﻤﺎذج ھﻲ اﻟﺨﯿﺎر اﻷﻓﻀﻞ ﻟﻚ .ﺑﺎﻹﺿﺎﻓﺔ إﻟﻰ إﻣﻜﺎﻧﯿﺔ ﺗﻨﻈﯿﻢ اﻟﺒﯿﺎﻧﺎت اﻟﻤﺪﺧﻠﺔ ﻣﻦ
ﺧﻼﻟﮭﺎ وﺳﮭﻮﻟﺔ وﺳﺮﻋﺔ اﺳﺘﺨﺪاﻣﮭﺎ ﻣﻦ ﻗﺒﻞ زوار اﻟﻤﻮﻗﻊ .وﻣﻦ أﺑﺮز اﻷﻣﺜﻠﺔ ﻋﻠﻰ
اﻟﻨﻤﺎذج ﻓﻲ ﻣﻮاﻗﻊ اﻟﻮﯾﺐ ھﻲ دﻓﺎﺗﺮ اﻟﺰوار وﺻﻔﺤﺎت اﻟﺒﺤﺚ ﻋﻦ اﻟﻜﻠﻤﺎت أو اﻟﻌﺒﺎرات
داﺧﻞ اﻟﻤﻮاﻗﻊ.
ﻻ ﺗﻜﻤﻦ ﺻﻌﻮﺑﺔ اﻟﺘﻌﺎﻣﻞ ﻣﻊ اﻟﻨﻤﺎذج ﻓﻲ ﻛﻮﻧﮭﺎ ﻣﻌﻘﺪة ﺑﺤﺪ ذاﺗﮭﺎ ،ﻛﻼ ...ﻓﮭﻲ إﺣﺪى
اﻟﻌﻨﺎﺻﺮ اﻟﺘﻲ ﺗﺪﻋﻤﮭﺎ ﻟﻐﺔ HTMLوھﻲ ﻣﺠﺮد وﺳﻮم ﻋﺎدﯾﺔ ﻣﺜﻠﮭﺎ ﻣﺜﻞ اﻟﻮﺳﻮم اﻟﺘﻲ
ﺗﻌﺎﻣﻠﻨﺎ ﻣﻌﮭﺎ ﻓﻲ ﺟﻤﯿﻊ اﻟﺪروس اﻟﺴﺎﺑﻘﺔ .وﺑﺈﻣﻜﺎﻧﻚ إﻧﺸﺎء اﻟﻨﻤﺎذج ﻓﻲ ﻣﻮﻗﻌﻚ ﺑﻨﻔﺲ
اﻟﺴﮭﻮﻟﺔ اﻟﺘﻲ ﺗﺪرج ﻓﯿﮭﺎ ﺟﺪوﻻً أو إﻃﺎراً )ھﺬا ﺑﺎﻟﻄﺒﻊ إذا ﻛﻨﺖ ﺗﻌﺘﻘﺪ أن اﻟﺠﺪاول
واﻹﻃﺎرات ﺳﮭﻠﺔ( ﻟﻜﻦ اﻟﺘﺪاﺧﻞ ﺑﯿﻨﮭﺎ )وأﻋﻨﻲ اﻟﻨﻤﺎذج( وﺑﯿﻦ ﻟﻐﺎت اﻟﺒﺮﻣﺠﺔ اﻟﻤﺘﻘﺪﻣﺔ ﻓﻲ
126
www.dinaro.com/vb3
ﻗﺒﻞ أن ﻧﺒﺪأ ،ﻣﺎ رأﯾﻚ ﺑﺰﯾﺎرة ﺻﻔﺤﺔ )دﻓﺘﺮ اﻟﺰوار( ﻓﻲ ھﺬا اﻟﻤﻮﻗﻊ ﻟﻺﻃﻼع ﻋﻠﻰ ﻣﺜﺎل
ﻟﻠﻨﻤﺎذج) ،ورﺑﻤﺎ ﺗﻮد أﯾﻀﺎً اﻟﺘﻮﻗﯿﻊ ﻓﯿﮫ(.
ﻛﻢ ﺷﻜﻼً ﻣﻦ أﺷﻜﺎل إدﺧﺎل اﻟﺒﯿﺎﻧﺎت ﯾﻮﺟﺪ ﻓﻲ ھﺬا اﻟﺪﻓﺘﺮ؟ اﻟﺤﻘﯿﻘﺔ أﻧﮫ ﯾﻮﺟﺪ ﺳﺘﺔ أﺷﻜﺎل
ھﻲ ﻛﺎﻟﺘﺎﻟﻲ:
Text
Option 1
أرﺳﻞ
اﻧﺴﻰ اﻷﻣﺮ
وھﻲ اﻷﺷﻜﺎل اﻟﻤﻮﺟﻮدة ﻓﻲ اﻟﺪﻓﺘﺮ ﻓﻘﻂ .وأود أن أﻟﻔﺖ ﻧﻈﺮك إﻟﻰ وﺟﻮد أﺷﻜﺎل أﺧﺮى
ﺳﻮف ﯾﺘﻢ اﻟﺘﻌﺎﻣﻞ ﻣﻌﮭﺎ ﻣﻦ ﺧﻼل ھﺬا اﻟﺪرس.
ﻣﻊ أن اﻷﺷﻜﺎل اﻟﺴﺎﺑﻘﺔ ﺗﺨﺘﻠﻒ ﻋﻦ ﺑﻌﻀﮭﺎ اﻟﺒﻌﺾ ﻣﻦ ﺣﯿﺚ اﻟﻤﺒﺪأ واﻟﻤﻈﮭﺮ )وﻃﺮﯾﻘﺔ
اﻟﺘﻌﺮﯾﻒ أﯾﻀﺎً( إﻻ أﻧﮭﺎ ﯾﺠﺐ أن ﺗﺪرج ﺟﻤﯿﻌﺎً ﺿﻤﻦ وﺳﻤﯿﻦ أﺳﺎﺳﯿﯿﻦ ﻟﻠﻨﻤﺎذج ھﻤﺎ:
وﻛﻤﺎ ﺟﺮت اﻟﻌﺎدة ﻧﺤﺘﺎج ﻟﺘﺤﺪﯾﺪ ﺑﻌﺾ اﻟﺨﺼﺎﺋﺺ اﻟﺘﻲ ﺗﺘﻌﻠﻖ ﺑﻄﺒﯿﻌﺔ ھﺬا اﻟﻨﻤﻮذج .وﻟﺪﯾﻨﺎ
ھﻨﺎ ﺛﻼث ﺧﺼﺎﺋﺺ:
ACTION
ﺗﺤﺪد اﻟﻌﻨﻮان اﻟﺬي ﺳﯿﺘﻢ إرﺳﺎل ﺑﯿﺎﻧﺎت اﻟﻨﻤﻮذج إﻟﯿﮫ ﻟﺘﺘﻢ ﻣﻌﺎﻟﺠﺘﮭﺎ ﺑﺎﻟﺼﻮرة اﻟﻤﻄﻠﻮﺑﺔ.
وﻋﺎدة ﯾﻜﻮن ھﺬا ﻋﻨﻮاﻧﺎً ﻟﺒﺮﯾﺪ إﻟﻜﺘﺮوﻧﻲ Emailﺳﻮف ﯾﺘﻢ إرﺳﺎل ﺑﯿﺎﻧﺎت اﻟﻨﻤﻮذج إﻟﯿﮫ.
أو ﻗﺪ ﯾﻜﻮن ﻋﻨﻮاﻧﺎً ﻟﺒﺮﻧﺎﻣﺞ CGIﻣﻮﺟﻮد ﻋﻠﻰ اﻟﻜﻤﺒﯿﻮﺗﺮ اﻟﺨﺎدم Serverاﻟﺬي ﺗﺘﻮاﺟﺪ
ﻋﻠﯿﮫ ﺻﻔﺤﺔ اﻟﻮﯾﺐ ،ﺣﯿﺚ ﯾﺴﺘﻘﺒﻞ ھﺬه اﻟﺒﯿﺎﻧﺎت وﯾﻌﺎﻟﺠﮭﺎ ﺣﺴﺐ اﻟﺘﻌﻠﯿﻤﺎت اﻟﻤﻮﺟﻮدة ﻓﯿﮫ
ﻛﺄن ﯾﻀﯿﻔﮭﺎ ﻣﺜﻼً إﻟﻰ إﺣﺪى اﻟﺼﻔﺤﺎت )ﻛﻤﺎ ﯾﺤﺪث ﻋﺎدة ﻓﻲ دﻓﺎﺗﺮ اﻟﺰوار( أو ﯾﺘﺤﻘﻖ ﻣﻦ
ﺻﺤﺔ ﺑﻌﺾ اﻟﺤﻘﻮل اﻟﻤﺪﺧﻠﺔ وﻣﻄﺎﺑﻘﺘﮭﺎ ﻟﻤﻌﺎﯾﯿﺮ ﻣﻌﯿﻨﺔ ،أو أن ﯾﻘﻮم ﺑﺎﻟﺒﺤﺚ ﻋﻦ ﻛﻠﻤﺔ أو
ﻋﺒﺎرة ﺿﻤﻦ ﺻﻔﺤﺎت اﻟﻤﻮﻗﻊ ﻛﻤﺎ ﻓﻲ ﻧﻤﺎذج اﻟﺒﺤﺚ اﻟﻤﻮﺟﻮدة ﻓﻲ ﻣﻮاﻗﻊ اﻟﻮﯾﺐ.
128
www.dinaro.com/vb3
METHOD
ﺗﺤﺪد اﻟﻄﺮﯾﻘﺔ اﻟﺘﻲ ﺳﯿﺘﻢ ﺑﮭﺎ اﻟﺘﻌﺎﻣﻞ ﻣﻊ اﻟﻌﻨﻮان اﻟﻤﺤﺪد ﻓﻲ اﻟﺨﺎﺻﯿﺔ اﻟﺴﺎﺑﻘﺔ
.ACTIONوھﻨﺎك ﻗﯿﻤﺘﯿﻦ ﻟﮭﺬه اﻟﺨﺎﺻﯿﺔ ھﻤﺎ GET :اﻟﺘﻲ ﺗﺴﺘﺨﺪم ﻓﻲ ﺣﺎﻟﺔ ﻛﻮن
ﻋﻤﻠﯿﺔ اﻟﻤﻌﺎﻟﺠﺔ داﺧﻠﯿﺔ أي ﺗﺘﻢ داﺧﻞ اﻟﺨﺎدم Serverﻧﻔﺴﮫ .ﻓﻔﻲ ﻣﺜﺎﻟﻨﺎ اﻟﺴﺎﺑﻖ ﻋﻨﺪﻣﺎ
ﻧﺴﺘﺨﺪم ﻧﻤﻮذج اﻟﺒﺤﺚ ﻋﻦ ﻛﻠﻤﺔ ﻓﻲ اﻟﻤﻮﻗﻊ ،ﻓﺈن ﻋﻤﻠﯿﺔ اﻟﻤﻌﺎﻟﺠﺔ )أي اﻟﺒﺤﺚ( ﺗﺠﺮي
ﻣﺒﺎﺷﺮة ﻓﻲ اﻟﻤﻮﻗﻊ .واﻟﻘﯿﻤﺔ اﻟﺜﺎﻧﯿﺔ ھﻲ Postوﺗﺴﺘﺨﺪم ﻋﻨﺪﻣﺎ ﺗﻜﻮن ﻋﻤﻠﯿﺔ اﻟﻤﻌﺎﻟﺠﺔ
ﺧﺎرﺟﯿﺔ ﻛﺄن ﯾﺘﻢ إرﺳﺎل اﻟﺒﯿﺎﻧﺎت إﻟﻰ ﻋﻨﻮان ﺑﺮﯾﺪ إﻟﻜﺘﺮوﻧﻲ.
"<FORM ACTION="mailto:someone@domain.com
>METHOD="post"> ... </FORM
"<FORM ACTION="name_and_address_of_CGI_script
>METHOD="get"> ... </FORM
ﻧﺒﺪأ اﻵن ﻓﻲ ﻋﻤﻠﯿﺔ ﺗﻌﺮﯾﻒ أﺷﻜﺎل اﻟﺒﯿﺎﻧﺎت ﻓﻲ اﻟﻨﻤﻮذج .وﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ ><INPUT
ﻟﺘﻌﺮﯾﻔﮭﺎ واﻟﺤﻘﯿﻘﺔ أن ھﺬه اﻷﺷﻜﺎل ھﻲ ﻣﺠﺮد ﺧﺼﺎﺋﺺ أو ﺑﺎﻷﺣﺮى ﻗﯿﻢ ﻟﺨﺼﺎﺋﺺ ﺗﺎﺑﻌﺔ
ﻟﮭﺬا اﻟﻮﺳﻢ .ﻛﯿﻒ؟ ...ﻟﻨﺄﺧﺬ ﻣﺜﺎﻻً ﻋﻠﻰ ذﻟﻚ ﻷوﺿﺢ ﻟﻚ ھﺬا اﻟﻤﻔﮭﻮم
ﻣﻼﺣﻈﺔ :إذا ﻛﻨﺖ ﺗﺴﺘﺨﺪم x.3 Sindbadﻓﺴﯿﺒﺪو اﻟﺤﻘﻞ واﻟﻨﺺ اﻟﻤﺠﺎور ﻟﮫ ﺑﺼﻮرة
ﻣﻌﻜﻮﺳﺔ ،وھﻲ ﻣﺸﻜﻠﺔ ﻧﺎﺗﺠﺔ ﻋﻦ ﺑﺮﻧﺎﻣﺞ Netscapeاﻟﺬي ﯾﻌﻤﻞ ﻣﻦ ﺧﻼﻟﮫ
129
www.dinaro.com/vb3
ﺣﺴﻨﺎً ،ﻟﻘﺪ اﺳﺘﺨﺪﻣﺖ اﻟﻮﺳﻢ > <INPUTﻟﺘﻌﺮﯾﻒ ھﺬا اﻟﺸﻜﻞ )ھﺬه إﺗﻔﻘﻨﺎ ﻋﻠﯿﮭﺎ ﻣﺴﺒﻘﺎً(
وﻣﻦ ﺛﻢ ﻗﻤﺖ ﺑﺈﺿﺎﻓﺔ اﻟﺨﺎﺻﯿﺔ TYPEﻟﮭﺬا اﻟﻮﺳﻢ ﻟﺘﺤﺪﯾﺪ ﻧﻮع اﻟﺸﻜﻞ اﻟﺬي أرﯾﺪه
وأﻋﻄﯿﺘﮭﺎ اﻟﻘﯿﻤﺔ TEXTأي
><FORM ...
>"<INPUT TYPE="text
></FORM
ﻓﻘﺮة ﻣﻌﺘﺮﺿﺔ:
إﻟﯿﻚ ﺟﻤﯿﻊ اﻷﺷﻜﺎل )اﻟﻘﯿﻢ( اﻟﻤﺴﺘﺨﺪﻣﺔ ﻣﻊ اﻟﺨﺎﺻﯿﺔ
TYPEوﺳﻮف أﺗﺮﻛﮭﺎ اﻵن ﺑﺪون ﺗﻌﻠﯿﻖ ﻟﺤﯿﻦ ﻣﻨﺎﻗﺸﮭﺎ
ﻻﺣﻘﺎً ﺑﺸﻜﻞ ﻣﻔﺼﻞ .ﻣﻊ ﻣﻼﺣﻈﺔ أن ھﻨﺎك ﺷﻜﻠﯿﻦ
آﺧﺮﯾﻦ ﻧﺪرﺟﮭﻤﺎ ﺑﺎﻟﻮﺳﻮم
><TEXTAREA> ،<SELECT
>"<INPUT TYPE="text
>"<INPUT TYPE="password
>"<INPUT TYPE="hidden
>"<INPUT TYPE="radio
>"<INPUT TYPE="checkbox
>"<INPUT TYPE="button
130
www.dinaro.com/vb3
وﻧﻌﻮد اﻵن إﻟﻰ ﻣﺜﺎﻟﻨﺎ ..اﻟﺨﺎﺻﯿﺔ اﻟﺜﺎﻧﯿﺔ اﻟﻤﺴﺘﺨﺪﻣﺔ ﻣﻊ > <INPUTھﻲ NAME
وﺗﺴﺘﺨﺪم ﻟﺘﺴﻤﯿﺔ ﺣﻘﻞ اﻟﺒﯿﺎﻧﺎت ﺣﯿﺚ ﻗﻤﺖ ﺑﺈﻋﻄﺎء اﻹﺳﻢ addressﻟﮭﺬا اﻟﺤﻘﻞ ﻓﻲ
اﻟﻤﺜﺎل) .ﻟﻚ ﻛﻞ اﻟﺤﺮﯾﺔ ﻓﻲ إﻋﻄﺎء اﻹﺳﻢ اﻟﺬي ﺗﺮﯾﺪه ﻟﻠﺤﻘﻞ( .واﻟﺤﻘﯿﻘﺔ أن ھﺬا اﻹﺳﻢ
ﯾﻌﺮّف اﻟﺤﻘﻞ ﻓﻲ داﺧﻞ اﻟﻨﻤﻮذج ﻧﻔﺴﮫ ،ﺑﺤﯿﺚ ﯾﻤﻜﻦ اﺳﺘﺨﺪاﻣﮫ ﻓﯿﻤﺎ ﺑﻌﺪ ﻟﻠﺤﺎﺟﺎت اﻟﺒﺮﻣﺠﯿﺔ
وﺿﺮورات اﻟﻤﻌﺎﻟﺠﺔ إن وﺟﺪت ﻣﻦ ﻗﺒﻞ اﻟﺒﺮاﻣﺞ اﻟﺘﻲ ﻗﺪ ﺗﻀﯿﻔﮭﺎ ﻛﻤﺼﻤﻢ ﻟﻠﻤﻮﻗﻊ .وﺣﺘﻰ
ﻋﻨﺪﻣﺎ ﺗﺮﯾﺪ أن ﯾُﺮﺳﻞ اﻟﻨﻤﻮذج إﻟﯿﻚ ﺑﺎﻟﺒﺮﯾﺪ ﻓﺈن ﺣﻘﻮﻟﮫ ﺗﻌﺮّف ﺑﺎﻻﺳﻢ اﻟﺬي أدرﺟﺘﮫ ﻟﮭﺎ ﻣﻦ
ﺧﻼل ھﺬه اﻟﺨﺎﺻﯿﺔ) .ﻻﺣﻆ ﻣﺎ ﻗﻠﺘُﮫ ﺳﺎﺑﻘﺎً ﻋﻦ ﺗﻌﺮﯾﻒ أﺳﻤﺎء اﻟﺤﻘﻮل ﻋﻨﺪﻣﺎ ﺗﺤﺪﺛﻨﺎ ﻋﻦ
اﻟﺘﺮﻣﯿﺰ واﻟﻄﺮق اﻟﺘﻲ ﺗﺼﻞ ﺑﮭﺎ ﻣﺤﺘﻮﯾﺎت اﻟﻨﻤﻮذج( .وﻛﻤﺎ ﺗﺮى ﻻ ﯾﻮﺟﺪ )ﺣﺘﻰ اﻵن( ﻣﺎ
ﯾﺪل ﻋﻠﻰ أن ھﺬا اﻟﺤﻘﻞ ﯾﺨﺘﺺ ﺑﺈدﺧﺎل اﻟﻌﻨﻮان.
><FORM ...
>"<INPUT TYPE="text" NAME="address
></FORM
أﻣﺎ اﻟﻌﺒﺎرة : Please enter your addressﻓﮭﻲ ﻣﺠﺮد ﻋﺒﺎرة ﺗﻮﺿﯿﺤﯿﺔ أﺿﻔﺘﮭﺎ
ﻟﯿﻌﺮف اﻟﺰاﺋﺮ ﻣﺎ اﻟﺬي ﯾﺠﺐ ﻋﻠﯿﮫ ﻛﺘﺎﺑﺘﮫ وﺗﺴﺘﻄﯿﻊ ﺻﯿﺎﻏﺔ ھﺬه اﻟﻌﺒﺎرة ﻛﻤﺎ ﺗﺮﯾﺪ .ﻓﻔﻲ ﻛﻞ
اﻷﺣﻮال ﻟﯿﺲ ﻟﮭﺎ ﻋﻼﻗﺔ ﺑﺠﻮھﺮ اﻟﻨﻤﻮذج ﻧﻔﺴﮫ ﺑﻌﻜﺲ اﻟﺨﺎﺻﯿﺔ .NAME
><FORM ...
"Please enter your address : <INPUT TYPE="text
131
www.dinaro.com/vb3
>"NAME="address
></FORM
: Please enter your address
ﻗﺪ ﻧﺤﺘﺎج أﺣﯿﺎﻧﺎً إﻟﻰ ﺗﺤﺪﯾﺪ ﺣﺠﻢ اﻟﺤﻘﻞ وﻟﺬﻟﻚ ﻧﺴﺘﺨﺪم اﻟﺨﺎﺻﯿﺔ SIZEﻣﻊ اﻟﺮﻗﻢ اﻟﺬي
ﻧﺮﯾﺪه ﻛﺤﺠﻢ ﻟﻠﺤﻘﻞ ،ﻟﻨﺠﺮب اﻟﺮﻗﻢ 40
><FORM ...
"Please enter your address : <INPUT TYPE="text
>"NAME="address" SIZE="40
></FORM
اﻟﺨﺎﺻﯿﺔ VALUEﺗﺴﺘﺨﺪم ﻓﻲ اﻟﺤﺎﻻت اﻟﺘﻲ ﻧﺘﻮﻗﻊ ﻓﯿﮭﺎ ﻛﺘﺎﺑﺔ ﻗﯿﻤﺔ دارﺟﺔ أو ﻣﺘﻜﺮرة
ﻣﻦ ﻗﺒﻞ ﻣﻌﻈﻢ اﻟﺰوار وﻟﻠﺘﺴﮭﯿﻞ ﻋﻠﯿﮭﻢ ﯾﺘﻢ ﺗﻌﯿﯿﻨﮭﺎ ﻛﻘﯿﻤﺔ إﻓﺘﺮاﺿﯿﺔ وﺑﺎﻟﻄﺒﻊ ﻣﻊ ﺗﻮﻓﺮ
إﻣﻜﺎﻧﯿﺔ ﺣﺬﻓﮭﺎ وﻛﺘﺎﺑﺔ ﻣﺎ ﯾﺮﯾﺪﻧﮫ ﺑﺪﻻً ﻣﻨﮭﺎ.
><FORM ...
"Please enter your address : <INPUT TYPE="text
>"NAME="address" VALUE="maroc
></FORM
maroc
: Please enter your address
132
www.dinaro.com/vb3
ﻻ ﯾﻮﺟﺪ ﻟﻠﺨﺎﺻﯿﺔ SIZEأي ﺻﻔﺔ ﺗﺤﻜﻤﯿﺔ ﺑﺎﻟﻨﺴﺒﺔ ﻟﺤﺠﻢ اﻟﻤﺪﺧﻼت اﻟﺘﻲ ﯾﻤﻜﻦ ﻟﻠﺰاﺋﺮ أن
ﯾﻜﺘﺒﮭﺎ داﺧﻞ اﻟﺤﻘﻞ .وﺑﻌﺒﺎرة أﺧﺮى :ﺻﺤﯿﺢ أﻧﻨﺎ ﺣﺪدﻧﺎ ﺣﺠﻢ اﻟﺤﻘﻞ ﻟﻜﻦ ذﻟﻚ ﯾﺴﺮي ﻓﻘﻂ
ﻋﻠﻰ ﻣﻈﮭﺮه ﻋﻠﻰ اﻟﺸﺎﺷﺔ .وﻻ ﯾﻮﺟﺪ ﻣﺎ ﯾﻤﻨﻊ اﻟﺰاﺋﺮ ﻣﻦ اﻟﻜﺘﺎﺑﺔ ﺑﺤﯿﺚ ﯾﺘﺠﺎوز اﻟﻨﺺ ﺣﺠﻢ
اﻟﺤﻘﻞ اﻟﻤﺤﺪد .وھﻨﺎ ﯾﺄﺗﻲ دور اﻟﺨﺎﺻﯿﺔ MAXLENGTHﻟﺘﺘﺤﻜﻢ ﺑﺎﻟﺤﺪ اﻷﻗﺼﻰ
ﻟﻠﻨﺺ اﻟﻤﺪﺧﻞ.
><FORM ...
"Please enter your address : <INPUT TYPE="text
"NAME="address" VALUE="maroc
>"SIZE="40" MAXLENGTH="30
></FORM
maroc
: Please enter your address
إﻧﺘﮭﯿﻨﺎ اﻵن ﻣﻦ ﺧﺼﺎﺋﺺ اﻟﻮﺳﻢ INPUTﻓﻤﺎ رأﯾﻚ ﺑﺈﺟﻤﺎﻟﮭﺎ ﻣﺮة أﺧﺮى؟ ﺣﺴﻨﺎً ،ھﺬه
ھﻲ:
133
www.dinaro.com/vb3
><FORM ...
Please enter your name :
""=<INPUT TYPE="text" NAME="the name" VALUE
>"SIZE="40" MAXLENGTH="30
Please enter your passwod :
""=<INPUT TYPE="password" NAME="the password" VALUE
>"SIZE="40" MAXLENGTH="30
></FORM
ﻻﺣﻆ أﻧﻨﻲ ﻟﻢ أرﻏﺐ ﻓﻲ ﻛﺘﺎﺑﺔ ﻗﯿﻢ إﻓﺘﺮاﺿﯿﺔ VALUESﻟﻠﺤﻘﻮل ،وﻟﺬﻟﻚ ﺗﺮﻛﺘﮭﺎ ﻓﺎرﻏﺔ
وأﺳﺘﻄﯿﻊ أﯾﻀﺎً أن أﻟﻐﯿﮭﺎ ﻧﮭﺎﺋﯿﺎً ﻣﻦ اﻟﺸﯿﻔﺮة .وأﻧﺎ ﻓﻲ ھﺬا اﻟﻤﺜﺎل أردت أن أوﺿﺢ ﻟﻚ ﻋﺪم
أھﻤﯿﺔ ﻛﺘﺎﺑﺔ ﻗﯿﻤﺔ إﻓﺘﺮاﺿﯿﺔ ﻟﻠﺤﻘﻮل ﻓﻲ ﺑﻌﺾ اﻟﺤﺎﻻت.
ﻧﺄﺗﻲ اﻵن إﻟﻰ اﻟﻨﻮع اﻟﺜﺎﻟﺚ ﻣﻦ أﻧﻮاع اﻟﺤﻘﻮل وھﻮ hiddenأي اﻟﺤﻘﻞ اﻟﻤﺨﻔﻲ .وﻛﻤﺎ
ﻧﺴﺘﻨﺘﺞ ﻣﻦ اﺳﻤﮫ ﻓﮭﻮ ﻟﻦ ﯾﻈﮭﺮ ﺿﻤﻦ اﻟﻨﻤﻮذج .وھﺬا ﻣﺜﺎل:
><FORM ...
Please enter your name :
""=<INPUT TYPE="text" NAME="the name" VALUE
134
www.dinaro.com/vb3
>"SIZE="40" MAXLENGTH="30
ﻻﺣﻆ ھﻨﺎ أن وﺟﻮد ھﺬا اﻟﺤﻘﻞ ﻣﺜﻞ ﻋﺪﻣﮫ ﺑﺎﻟﻨﺴﺒﺔ ﻟﻤﻈﮭﺮ اﻟﻨﻤﻮذج ،وأن اﻟﺰاﺋﺮ ﻟﻦ ﯾﺘﻌﺎﻣﻞ
ﻣﻌﮫ ﺑﻞ ورﺑﻤﺎ ﻟﻦ ﯾﻌﺮف أن ھﻨﺎك ﺣﻘﻼً ﻣﺨﻔﯿﺎً .واﻟﺴﺆال ھﻨﺎ :ﻣﺎ اﻟﻔﺎﺋﺪة ﻣﻦ وﺟﻮد ﺷﻲء
ﻣﺨﻔﻰ ﻻ إﻣﻜﺎﻧﯿﺔ ﻻﺳﺘﺨﺪاﻣﮫ؟ وﻟﻜﻲ أﺟﯿﺐ ﻋﻠﻰ ھﺬا اﻟﺴﺆال دﻋﻨﻲ أﻃﺮح ﻟﻚ ﻣﺜﺎﻻً أو ﺣﺎﻟﺔ
ﻗﺪ ﺗﻮاﺟﮭﻚ ﻛﻤﺼﻤﻢ ﺻﻔﺤﺎت وﯾﺐ...
ﻟﻨﻔﺮض أن ﻟﺪﯾﻚ ﺛﻼث ﺻﻔﺤﺎت ﺗﺘﻀﻤﻦ ﻛﻞ ﻣﻨﮭﺎ ﻧﻤﻮذﺟﺎً ﻣﺎ وأن ھﺬه اﻟﻨﻤﺎذج ﻣﺘﺸﺎﺑﮭﺔ.
وﺗﺤﺘﻮي ﻋﻠﻰ ﻧﻔﺲ اﻟﺤﻘﻮل .وﻋﻨﺪﻣﺎ ﺗﺼﻠﻚ اﻟﺒﯿﺎﻧﺎت ﻛﯿﻒ ﺳﺘﺴﺘﻄﯿﻊ ﺗﻤﯿﯿﺰ أي ﻣﻦ ھﺬه
اﻟﻨﻤﺎذج اﺳﺘﺨﺪم ﻹرﺳﺎل اﻟﺒﯿﺎﻧﺎت؟ ﺑﺈﻣﻜﺎﻧﻚ إﺿﺎﻓﺔ ھﺬا اﻟﺤﻘﻞ )اﻟﻮھﻤﻲ( وإﺳﻨﺎد أي اﺳﻢ
وأي ﻗﯿﻤﺔ ﻟﮫ ﻓﻲ ﻛﻞ ﻧﻤﻮذج.
135
www.dinaro.com/vb3
وﺑﺬﻟﻚ ﻋﻨﺪﻣﺎ ﺗﺼﻠﻚ اﻟﺒﯿﺎﻧﺎت اﻟﻤﺮﺳﻠﺔ ﻣﻦ ﻗﺒﻞ أي زاﺋﺮ اﺳﺘﺨﺪم أي ﻣﻦ اﻟﻨﻤﺎذج اﻟﺜﻼﺛﺔ
ﺳﯿﺼﻠﻚ أﯾﻀﺎ ﺣﻘﻞ إﺿﺎﻓﻲ ﻗﻤﺖ أﻧﺖ ﻧﻔﺴﻚ ﺑﺘﻌﺒﺌﺘﮫ ﺳﻠﻔﺎً ﻋﻨﺪﻣﺎ ﺻﻤﻤﺖ اﻟﻨﻤﻮذج وذﻟﻚ
ﺑﺄﺣﺪ اﻷﺷﻜﺎل اﻟﺘﺎﻟﯿﺔ:
my forms=form1أو
forms=form2 myأو
my forms=form3
إذن ﻧﺴﺘﻄﯿﻊ اﻟﻘﻮل أن اﻟﺤﻘﻞ اﻟﻤﺨﻔﻲ ھﻮ ﻻﺳﺘﺨﺪام اﻟﻤﺼﻤﻢ وﻟﯿﺲ اﻟﺰاﺋﺮ ،وأن ﻗﯿﻤﺘﮫ
ﺗﺪﺧﻞ ﻣﺒﺎﺷﺮة ﻋﻨﺪ اﻟﺘﺼﻤﯿﻢ .وﯾﺴﺘﺨﺪم ﺑﮭﺪف ﺗﻌﺮﯾﻒ ﻗﯿﻢ ﻣﺎ ﺳﯿﺘﻢ إرﺳﺎﻟﮭﺎ ﺟﻨﺒﺎً إﻟﻰ ﺟﻨﺐ
ﺿﻤﻦ ﺑﯿﺎﻧﺎت اﻟﻨﻤﻮذج اﻟﺘﻲ ﻗﺎم اﻟﺰاﺋﺮ ﺑﺘﻌﺒﺌﺘﮭﺎ.
ﻣﻼﺣﻈﺔ ﻣﮭﻤﺔ ﺑﺎﻟﻨﺴﺒﺔ ﻟﻠﻨﻤﺎذج ﺑﺸﻜﻞ ﻋﺎم .ﻣﻦ أﺟﻞ إﻇﮭﺎر اﻟﻨﻤﻮذج ﺑﺼﻮرة ﻣﺮﺗﺒﺔ
وﻣﻨﺴﻘﺔ واﻟﺘﺤﻜﻢ ﺑﻤﻮﻗﻊ اﻟﺤﻘﻮل ﻓﯿﮫ ﻓﻤﻦ اﻷﻓﻀﻞ داﺋﻤﺎً وﺿﻌﮫ داﺧﻞ ﺟﺪول ﻣﻊ ﺟﻌﻞ
اﻟﺠﺪول ﺑﻼ ﺣﺪود.
><FORM ...
>"<TABLE BORDER="0
136
www.dinaro.com/vb3
<TR>
<TD>Please enter your name : </TD>
<TD>
<INPUT TYPE="text" NAME="the name" VALUE=""
SIZE="40" MAXLENGTH="30">
</TD>
</TR>
<TR>
<TD>Please enter your password :</TD>
<TD>
<INPUT TYPE="password" NAME="the password" VALUE=""
SIZE="40" MAXLENGTH="30">
</TD>
</TR>
</TABLE>
</FORM>
وﻛﻤﺎ ﺗﺮى ﺗﺤﺘﺎج إﻟﻰ اﻟﻘﻠﯿﻞ ﻣﻦ اﻟﻌﻤﻞ اﻹﺿﺎﻓﻲ ﻟﻜﻨﻚ ﺑﺎﻟﻤﻘﺎﺑﻞ ﺳﺘﺤﺼﻞ ﻋﻠﻰ اﻟﻨﺘﯿﺠﺔ
اﻟﺘﺎﻟﯿﺔ
137
www.dinaro.com/vb3
ﻧﻜﻮن اﻵن ﻗﺪ وﺻﻠﻨﺎ إﻟﻰ ﻧﮭﺎﯾﺔ ھﺬا اﻟﺪرس .وأﺗﻤﻨﻰ أن أﻛﻮن ﻗﺪ ﻧﺠﺤﺖ ﻓﻲ ﺗﯿﺴﯿﺮ ﻋﻤﻠﯿﺔ
ﻓﮭﻤﮭﺎ واﻟﺘﻌﺎﻣﻞ ﻣﻌﮭﺎ ﺑﺎﻟﻨﺴﺒﺔ ﻟﻚ .وﻣﻊ ذﻟﻚ ﻓﻨﺤﻦ ﻟﻢ ﻧﻨﺘﮫ ﺑﻌﺪ ...ﻓﺴﻮف ﻧﻨﺎﻗﺶ ﻣﺎ ﺗﺒﻘﻰ
ﻓﻲ اﻟﺪرس اﻟﻘﺎدم ،أﻟﻘﺎك ھﻨﺎك.
أﻟﯿﺲ ھﺬا
ﻣﻤﺘﻌﺎ
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHHHHHHHHHHHH
138
www.dinaro.com/vb3
ھﺬا اﻟﺪرس ھﻮ اﻟﺜﺎﻧﻲ ﻣﻦ درﺳﯿﻦ ﺣﻮل اﻟﻨﻤﺎذج .ﻟﻘﺪ ﻗﻤﻨﺎ ﻓﻲ اﻟﺪرس اﻟﺴﺎﺑﻖ ﺑﻤﻨﺎﻗﺸﺔ
اﻟﻮﺳﻮم اﻷﺳﺎﺳﯿﺔ ﻟﻠﻨﻤﺎذج وﺗﻌﻠﻤﻨﺎ ﻛﯿﻔﯿﺔ إدراج اﻟﻨﻤﺎذج ﻓﻲ ﺻﻔﺤﺎت اﻟﻮﯾﺐ .ﻛﻤﺎ ﻗﻤﻨﺎ
ﺑﻤﻨﺎﻗﺸﺔ ﺑﻌﺾ أﺷﻜﺎل إدﺧﺎل اﻟﺒﯿﺎﻧﺎت ﻓﻲ اﻟﻨﻤﻮذج وھﻲ Text, Password, Hidden
ھﻞ ﺗﺬﻛﺮ ﻛﯿﻒ ﻧﻘﻮم ﺑﺘﻌﺮﯾﻔﮭﺎ؟ راﺟﻊ اﻟﺪرس اﻟﺴﺎﺑﻖ إن أردت اﻟﻤﺰﯾﺪ ﻣﻦ اﻟﺘﻮﺿﯿﺢ ،وإﻻ
ھﯿﺎ ﺑﻨﺎ ﻧﻜﻤﻞ وﻟﻨﺪﺧﻞ ﻓﻲ اﻟﻤﻮﺿﻮع ﻣﺒﺎﺷﺮة.
ﺳﻮف ﻧﺘﺎﺑﻊ اﻵن ﻣﻊ ﻣﺠﻤﻮﻋﺔ ﻣﻦ اﻷﺷﻜﺎل اﻟﺨﺎﺻﺔ ﺑﺎﻻﺧﺘﯿﺎر ﻣﻦ ﻣﺘﻌﺪد وھﻲ ﺑﺎﻟﻤﻨﺎﺳﺒﺔ
ﺛﻼﺛﺔ أﻧﻮاع Radio, Checkbox :وﻗﺎﺋﻤﺔ اﻹﺧﺘﯿﺎر
وﻛﻤﺜﺎل ،ﻟﻨﻔﺮض أﻧﻨﻲ أرﯾﺪ أن أﺳﺄل اﻟﺰاﺋﺮ ﻋﻦ اﻟﻤﺘﺼﻔﺢ اﻟﺬي ﯾﺴﺘﺨﺪﻣﮫ )ﻛﻤﺎ ھﻮ ﻣﻮﺟﻮد
ﻓﻲ دﻓﺘﺮ اﻟﺰوار ﻋﻠﻰ ﺷﻜﻞ ﻗﺎﺋﻤﺔ إﺧﺘﯿﺎر( ﻟﻜﻦ ﺑﺪﻻ ﻣﻦ أن ﯾﻜﻮن ﻋﻠﻰ ﺷﻜﻞ ﻗﺎﺋﻤﺔ إﺧﺘﯿﺎر
139
www.dinaro.com/vb3
Sindbad 3.0
Sindbad 4.0
Ms Explorer 3.0
Ms Explorer 4.0
ﻓﻜﯿﻒ ﻧﻨﺸﻲء ﻣﺜﻞ ھﺬه اﻟﻘﺎﺋﻤﺔ؟ ...ﺣﺴﻨﺎً ،ﻟﻨﺒﺪأ ﻣﻦ اﻟﺼﻔﺮ وﻧﻌﺮّف ﻧﻤﻮذﺟﺎً
><FORM
></FORM
ﺛﻢ ﻟﻨﻘﻢ ﺑﺘﻌﺮﯾﻒ ھﺬا اﻟﺸﻜﻞ ،ھﻞ ﺗﺬﻛﺮ اﻟﻮﺳﻢ اﻟﺨﺎص ﺑﺬﻟﻚ؟ إﻧﮫ ><INPUT
><FORM
>"<INPUT TYPE="radio
></FORM
ﻟﻜﻦ ﺑﻤﺎ أن ھﻨﺎك أرﺑﻌﺔ ﻣﺪﺧﻼت ،إذن ﻧﺤﺘﺎج إﻟﻰ أرﺑﻌﺔ وﺳﻮم
><FORM
><INPUT TYPE="radio"> <BR
><INPUT TYPE="radio"> <BR
><INPUT TYPE="radio"> <BR
140
www.dinaro.com/vb3
ﻧﺤﺘﺎج اﻵن إﻟﻰ ﺗﺴﻤﯿﺔ ھﺬه اﻟﻤﺪﺧﻼت ،أي أﻧﻨﺎ ﺳﻨﺴﺘﺨﺪم اﻟﺨﺎﺻﯿﺔ NAMEﻣﻌﮭﺎ .أﻣﺎ
اﻻﺳﻢ اﻟﻤﻌﻄﻰ ﺑﺤﺪ ذاﺗﮫ ﻓﻤﻦ اﻷﻓﻀﻞ أن ﯾﻜﻮن ﻣﺮﺗﺒﻄﺎً ﻧﻮﻋﺎً ﻣﺎ ﺑﻤﻮﺿﻮع اﻟﺴﺆال ،ﻟﯿﺲ
ﻷن ھﺬا ﺿﺮوري ﻟﻠﻨﻤﻮذج ﺑﻞ ھﻮ ﺿﺮوري ﻟﻚ ﻛﺸﺨﺺ ﺳﯿﻘﻮم ﺑﺎﺳﺘﻘﺒﺎل اﻟﺒﯿﺎﻧﺎت
اﻟﻤﺮﺳﻠﺔ ﻣﻦ ﺧﻼل اﻟﻨﻤﻮذج ،وﺑﺎﻟﺘﺎﻟﻲ ﻣﻦ اﻷﻓﻀﻞ أن ﯾﻮﺟﺪ ﻋﻨﻮان ﻣﻌﺒّﺮ ﻟﻠﺒﯿﺎﻧﺎت ﺑﻐﺮض
اﻟﺘﻤﯿﯿﺰ .وﺑﻤﺎ أﻧﻨﺎ ھﻨﺎ ﻧﺘﺤﺪث ﻋﻦ اﻟﻤﺘﺼﻔﺤﺎت ﻓﻠﯿﻜﻦ ھﺬا اﻻﺳﻢ ھﻮ browser
><FORM
><INPUT TYPE="radio" NAME="browser"> <BR
><INPUT TYPE="radio" NAME="browser"> <BR
><INPUT TYPE="radio" NAME="browser"> <BR
><INPUT TYPE="radio" NAME="browser"> <BR
></FORM
وﻛﻤﺎ ﺗﻼﺣﻆ ﻣﻦ اﻟﻨﺘﯿﺠﺔ أن ھﺬه اﻟﺘﺴﻤﯿﺔ ھﻲ ﺿﻤﻨﯿﺔ ﻓﻘﻂ وﻻ ﺗﺆﺛﺮ ﻋﻠﻰ ﺷﻜﻞ اﻟﻨﻤﻮذج
)راﺟﻊ اﻟﺪرس اﻟﺴﺎﺑﻖ( ﻟﻜﻦ أي إﺧﺘﯿﺎر ﺳﯿﻘﻮم ﺑﮫ اﻟﺰاﺋﺮ ﻣﻦ ھﺬه اﻷرﺑﻌﺔ ﺧﯿﺎرات ﺳﻮف
ﯾﺼﻠﻚ ﺗﺤﺖ اﻻﺳﻢ .browser
141
www.dinaro.com/vb3
اﻟﺨﻄﻮة اﻟﺘﺎﻟﯿﺔ ھﻲ إﻋﻄﺎء ﻗﯿﻤﺔ ﻟﻜﻞ ﻣﺪﺧﻠﺔ ﻓﻲ ھﺬه اﻟﻘﺎﺋﻤﺔ وذﻟﻚ ﺣﺴﺐ ﻣﺎ ﻧﺮاه ﻣﻨﺎﺳﺒﺎً،
إذن ﺣﺎن اﻟﻮﻗﺖ ﻻﺳﺘﺨﺪام اﻟﺨﺎﺻﯿﺔ :VALUE
><FORM
>"<INPUT TYPE="radio" NAME="browser" VALUE="Sind3
><BR
>"<INPUT TYPE="radio" NAME="browser" VALUE="Sind4
><BR
>"<INPUT TYPE="radio" NAME="browser" VALUE="Msie3
><BR
>"<INPUT TYPE="radio" NAME="browser" VALUE="Msie4
><BR
></FORM
وھﻨﺎ أﯾﻀﺎ ﻧﻼﺣﻆ أن ﻻ ﺗﻐﯿّﺮ ﻓﻲ ﺷﻜﻞ اﻟﻨﻤﻮذج ﻇﺎھﺮﯾﺎً ﻣﻊ إﺿﺎﻓﺔ ھﺬه اﻟﺨﺎﺻﯿﺔ .ﻟﻜﻦ ﻣﻊ
ذﻟﻚ ﻓﻘﺪ ﻗﻤﻨﺎ ﺣﺘﻰ اﻵن ﺑﺘﺴﻤﯿﺔ اﻟﺤﻘﻮل وإﻋﻄﺎء ﻛﻞ ﺣﻘﻞ ﻗﯿﻤﺔ ﻣﺤﺪدة .وﻓﻌﻠﯿﺎً ﻟﻘﺪ إﻧﺘﮭﯿﻨﺎ
ﻣﻦ ھﺬا اﻟﻨﻤﻮذج .ﻟﻜﻦ ﺑﺎﻟﻄﺒﻊ ﻧﺤﻦ ﻻ ﻧﺘﻮﻗﻊ أن ﯾﻜﻮن اﻟﺰاﺋﺮ ﻋﺎﻟﻤﺎً ﺑﺎﻟﻐﯿﺐ ﻟﻜﻲ ﯾﺨﻤﻦ أي
ﻣﻦ ھﺬه اﻟﺤﻘﻮل ﺗﺨﺘﺺ ﺑﻜﻞ ﻗﯿﻤﺔ .ﻟﺬﻟﻚ ﺑﻘﻰ ﻋﻠﯿﻨﺎ ﺗﻌﺮﯾﻒ ﻛﻞ ﺣﻘﻞ ﺑﺎﺳﻢ ﺻﺮﯾﺢ ﯾﻮﺿﺢ
ﻣﺤﺘﻮاه.
><FORM
>"<INPUT TYPE="radio" NAME="browser" VALUE="Sind3
>Sindbad 3.0 <BR
>"<INPUT TYPE="radio" NAME="browser" VALUE="Sind4
>Sindbad 4.0<BR
142
www.dinaro.com/vb3
Sindbad 3.0
Sindbad 4.0
MS Explorer 3.0
MS Explorer 4.0
وھﻲ أﻧﻚ إذا أردت أن ﯾﻈﮭﺮ أﺣﺪھﺎ وﻗﺪ ﺗﻢ،وھﻨﺎك ﺧﺎﺻﯿﺔ ﺗﺘﻌﻠﻖ ﺑﮭﺬا اﻟﻨﻮع ﻣﻦ اﻟﺤﻘﻮل
ﻣﻊ ﺗﺮك ﻛﻞ اﻟﺤﺮﯾﺔ، إﻟﯿﮫCHECKED اﺧﺘﯿﺎره ﺑﺸﻜﻞ ﺗﻠﻘﺎﺋﻲ ﻓﻌﻠﯿﻚ ﺑﺈﺿﺎﻓﺔ اﻟﺨﺎﺻﯿﺔ
.ﻟﻠﺰاﺋﺮ ﻓﻲ اﺧﺘﯿﺎر ﻣﺎ ﯾﺮﯾﺪه ﻓﯿﻤﺎ ﺑﻌﺪ
<FORM>
<INPUT TYPE="radio" NAME="browser" VALUE="Sind3">
Sindbad 3.0 <BR>
<INPUT TYPE="radio" NAME="browser" VALUE="Sind4"
CHECKED>
Sindbad 4.0<BR>
<INPUT TYPE="radio" NAME="browser" VALUE="Msie3">
MS Explorer 3.0<BR>
<INPUT TYPE="radio" NAME="browser" VALUE="Msie4">
MS Explorer 4.0<BR>
</FORM>
143
www.dinaro.com/vb3
Sindbad 3.0
Sindbad 4.0
MS Explorer 3.0
MS Explorer 4.0
وأﺧﯿﺮاً ...أود أن أوﺿﺢ ﻟﻚ اﻟﺼﻮرة اﻟﺘﻲ ﯾﺼﻠﻚ ﺑﮭﺎ اﻟﻨﻤﻮذج ﻋﻨﺪ اﺧﺘﯿﺎر أﺣﺪ ﺣﻘﻮﻟﮫ
)وﻟﻨﻔﺘﺮض أﻧﮫ اﻟﺨﯿﺎر اﻟﺜﺎﻟﺚ( .وھﻲ ﺑﺎﻟﺸﻜﻞ اﻟﺘﺎﻟﻲ:
browser=Msie3
ﻧﺄﺗﻲ اﻵن إﻟﻰ اﻟﺸﻜﻞ اﻟﺜﺎﻧﻲ ﻣﻦ أﺷﻜﺎل اﻹﺧﺘﯿﺎر ﻣﻦ ﻣﺘﻌﺪد واﻟﺬي ﯾﺪﻋﻰ
.CHECKBOXﻇﺎھﺮﯾﺎً ﻻ ﯾﺨﺘﻠﻒ ھﺬا اﻟﺸﻜﻞ ﻋﻦ اﻟﺸﻜﻞ اﻟﺬي ﺳﺒﻘﮫ ،ﻟﻜﻦ ﻋﻤﻠﯿﺎً ھﻨﺎك
اﺧﺘﻼﻓﺎت ﺟﺬرﯾﺔ ﻣﻦ ﺣﯿﺚ اﻟﻤﻔﮭﻮم واﻟﺘﻌﺮﯾﻒ .وأﻧﺎ أﻓﻀّﻞ أن ﻧﺒﻘﻰ ﻋﻠﻰ اﺳﺘﺨﺪاﻣﻨﺎ ﻟﻠﻤﺜﺎل
اﻟﺴﺎﺑﻖ ﺣﺘﻰ ﯾﺴﮭﻞ ﻋﻠﯿﻨﺎ ﺗﻤﯿﯿﺰ اﻟﻔﺮوق.
Sindbad 3.0
Sindbad 4.0
MS Explorer 3.0
MS Explorer 4.0
ﻗﺒﻞ أن ﻧﺴﺘﻤﺮ ﻗﻢ ﺑﺎﻟﻨﻘﺮ ﻋﻠﻰ أﻛﺜﺮ ﻣﻦ ﺣﻘﻞ ﻓﻲ اﻟﻘﺎﺋﻤﺔ اﻟﺴﺎﺑﻘﺔ وأﻧﻈﺮ ﻣﺎذا ﺳﯿﺤﺪث؟ إن
ﺑﺎﺳﺘﻄﺎﻋﺘﻚ اﺧﺘﯿﺎر أﻛﺜﺮ ﻣﻦ ﺣﻘﻞ ﻓﻲ ﻧﻔﺲ اﻟﻮﻗﺖ! وھﺬا ھﻮ اﻟﻔﺮق اﻷول ﺑﯿﻦ
CHECKBOXو RADIOﻓﻔﻲ RADIOﯾﻤﻜﻦ اﺧﺘﯿﺎر ﺣﻘﻞ واﺣﺪ ﻓﻘﻂ ﻟﯿﺲ أﻛﺜﺮ.
144
www.dinaro.com/vb3
><FORM
>"<INPUT TYPE="checkbox" NAME="Sind3" VALUE="Yes
>Sindbad 3.0 <BR
>"<INPUT TYPE="checkbox" NAME="Sind4" VALUE="Yes
>Sindbad 4.0 <BR
>"<INPUT TYPE="checkbox" NAME="Msie3" VALUE="Yes
>MS Explorer 3.0 <BR
>"<INPUT TYPE="checkbox" NAME="Msie4" VALUE="Yes
>MS Explorer 4.0 <BR
></FORM
ﻣﺎذا ﺗﻼﺣﻆ؟ أوﻻً ﻟﻘﺪ أﺳﻨﺪﻧﺎ اﻟﻘﯿﻤﺔ checkboxﻟﻠﺨﺎﺻﯿﺔ .TYPEﺛﻢ أﻋﻄﯿﻨﺎ ﻟﻜﻞ ﺣﻘﻞ
ﻓﻲ اﻟﻘﺎﺋﻤﺔ إﺳﻤﺎً ﻣﻤﯿﺰاً ﻓﻲ اﻟﺨﺎﺻﯿﺔ NAMEﯾﺨﺘﻠﻒ ﻋﻦ ﺑﺎﻗﻲ اﻟﺤﻘﻮل .أﻣﺎ اﻟﺨﺎﺻﯿﺔ
VALUEﻓﺄﻋﻄﯿﻨﺎھﺎ ﻗﯿﻤﺔ ﻣﻮﺣﺪة ﻟﺠﻤﯿﻊ اﻟﺤﻘﻮل .وﺑﺎﻟﻄﺒﻊ ﻗﻤﻨﺎ ﻓﻲ اﻟﻨﮭﺎﯾﺔ ﺑﻜﺘﺎﺑﺔ
اﻷﺳﻤﺎء اﻟﺘﻌﺮﯾﻔﯿﺔ ﻟﻜﻞ ﺣﻘﻞ.
ﻛﯿﻒ ﺳﺘﺼﻞ اﻟﺒﯿﺎﻧﺎت؟ ﺣﺴﻨﺎً ﻟﻨﻔﺮض أﻧﮫ ﺗﻢ اﺧﺘﯿﺎر اﻟﺤﻘﻠﯿﻦ اﻟﺜﺎﻧﻲ واﻟﺮاﺑﻊ ﻓﺴﻮف ﺗﺼﻠﻚ
اﻟﻨﺘﯿﺠﺔ ﺑﺎﻟﺸﻜﻞ اﻟﺘﺎﻟﻲ:
Sind4=Yes
Msie4=Yes
145
www.dinaro.com/vb3
ﺑﺎﺳﺘﺨﺪامRADIO ﻛﻤﺎ ﻧﺴﺘﻄﯿﻊ أﯾﻀﺎً ﺗﻌﻠﯿﻢ ﺑﻌﺾ اﻟﺤﻘﻮل ﺑﺼﻮرة ﺗﻠﻘﺎﺋﯿﺔ ﻛﻤﺎ ﻓﻌﻠﻨﺎ ﻣﻊ
CHECKED ﻧﻔﺲ اﻟﺨﺎﺻﯿﺔ
<FORM>
<INPUT TYPE="checkbox" NAME="Sind3" VALUE="Yes"
CHECKED>
Sindbad 3.0 <BR>
<INPUT TYPE="checkbox" NAME="Sind4" VALUE="Yes">
Sindbad 4.0 <BR>
<INPUT TYPE="checkbox" NAME="Msie3" VALUE="Yes"
CHECKED>
MS Explorer 3.0 <BR>
<INPUT TYPE="checkbox" NAME="Msie4" VALUE="Yes">
MS Explorer 4.0 <BR>
</FORM>
Sindbad 3.0
Sindbad 4.0
MS Explorer 3.0
MS Explorer 4.0
وھﺬا اﻟﻨﻮع ﺳﻮف ﯾﻘﻮدﻧﺎ،اﻟﻨﻮع اﻟﺜﺎﻟﺚ ﻣﻦ أﺷﻜﺎل اﻹﺧﺘﯿﺎر ﻣﻦ ﻣﺘﻌﺪد ھﻮ ﻗﻮاﺋﻢ اﻻﺧﺘﯿﺎر
< وھﻲINPUT> إﻟﻰ وﺳﻮم ﺟﺪﯾﺪة ﻣﻦ وﺳﻮم اﻟﺘﻌﺮﯾﻒ واﻟﺘﻲ ﺳﺘﺴﺘﺨﺪم ﺑﺪﻻً ﻣﻦ
<SELECT>
<OPTION>
<OPTION>
146
www.dinaro.com/vb3
><OPTION
.....
.....
></SELECT
><FORM
><SELECT
<OPTION> Sindbad 3.0
<OPTION> Sindbad 4.0
<OPTION> MS Explorer 3.0
<OPTION> MS Explorer 4.0
></SELECT
></FORM
Sindbad 3.0
وﻛﺎﻟﻤﻌﺘﺎد ﻻ ﯾﺨﻠﻮ اﻷﻣﺮ ﻣﻦ وﺟﻮد ﺧﺼﺎﺋﺺ ﺗﺤﺪد ﻃﺮﯾﻘﺔ ﻋﻤﻞ ھﺬه اﻟﻮﺳﻮم .وھﻨﺎك
ﺧﺼﺎﺋﺺ ﻣﺸﺘﺮﻛﺔ ﻋﺮﻓﻨﺎھﺎ ﻓﻲ اﻷﺷﻜﺎل اﻟﺴﺎﺑﻘﺔ ﺳﯿﺘﻢ اﺳﺘﺨﺪاﻣﮭﺎ ھﻨﺎ أﯾﻀﺎً ﻛﻤﺎ ﯾﻮﺟﺪ
ﺧﺼﺎﺋﺺ ﺟﺪﯾﺪة ﺗﺘﻌﻠﻖ ﻓﻘﻂ ﺑﮭﺬا اﻟﺸﻜﻞ ﻣﻦ ﺣﻘﻮل اﻟﺒﯿﺎﻧﺎت .ﻓﺒﺎﻟﻨﺴﺒﺔ ﻟـِ ><SELECT
ﯾﻮﺟﺪ اﻟﺨﺎﺻﯿﺔ NAMEوھﻲ ﻛﻤﺎ ﺗﻌﻠﻢ ﺗﺤﺪد اﺳﻢ اﻟﻘﺎﺋﻤﺔ .ﻛﻤﺎ ﺗﻮﺟﺪ اﻟﺨﺎﺻﯿﺔ SIZE
اﻟﺘﻲ ﺗﺤﺪد ﺣﺠﻢ )أو ﺑﺎﻷﺣﺮى( ارﺗﻔﺎع اﻟﻘﺎﺋﻤﺔ ،وﺑﺎﻟﺘﺎﻟﻲ ﻋﺪد اﻟﺒﯿﺎﻧﺎت اﻟﻈﺎھﺮة ﻓﯿﮭﺎ .وھﻲ
ﺗﺄﺧﺬ أي ﻗﯿﻤﺔ ﻋﺪدﯾﺔ ﺻﺤﯿﺤﺔ.
147
www.dinaro.com/vb3
><FORM
>"<SELECT NAME="browser" SIZE="2
<OPTION> Sindbad 3.0
<OPTION> Sindbad 4.0
<OPTION> MS Explorer 3.0
<OPTION> MS Explorer 4.0
></SELECT
></FORM
Sindbad 3.0
Sindbad 4.0
وﻃﺎﻟﻤﺎ ﺑﺎﻹﻣﻜﺎن ﻋﺮض اﻟﻘﺎﺋﻤﺔ ﺑﺄي ارﺗﻔﺎع ﻧﺮﯾﺪ ،وﻗﺪ ﯾﺼﻞ إﻟﻰ ﺣﺪ ﻋﺮض ﺟﻤﯿﻊ ﺑﯿﺎﻧﺎت
اﻟﻘﺎﺋﻤﺔ ﻣﻌﺎً ،ﻓﺈن ھﻨﺎك إﻣﻜﺎﻧﯿﺔ أﯾﻀﺎً ﻟﺠﻌﻞ اﺧﺘﯿﺎر اﻟﺒﯿﺎﻧﺎت ﻣﻦ ھﺬه اﻟﻘﺎﺋﻤﺔ ﻣﺘﻌﺪداً وﻟﯿﺲ
ﻓﻘﻂ ﻗﯿﻤﺔ واﺣﺪة ،ﻛﯿﻒ؟؟ ﺑﺈﺿﺎﻓﺔ اﻟﺨﺎﺻﯿﺔ .MULTIPLEﻟﻨﻘﻢ اﻵن ﺑﻌﺮض ﺟﻤﯿﻊ
اﻟﻘﯿﻢ )ﻟﺪﯾﻨﺎ أرﺑﻌﺔ ﻗﯿﻢ ،إذن اﻟﻘﯿﻤﺔ اﻟﻤﻜﺘﻮﺑﺔ ﻣﻊ SIZEﯾﺠﺐ أن ﺗﻜﻮن ،(4وﻣﻦ ﺛﻢ ﻟﻨﺘﺢ
اﻟﻤﺠﺎل أﻣﺎم اﻟﺰاﺋﺮ ﻻﺧﺘﯿﺎر أﻛﺜﺮ ﻣﻦ ﻗﯿﻤﺔ واﺣﺪة ﻓﻲ اﻟﻘﺎﺋﻤﺔ.
><FORM
><SELECT NAME="browser" SIZE="4" MULTIPLE
<OPTION> Sindbad 3.0
<OPTION> Sindbad 4.0
<OPTION> MS Explorer 3.0
<OPTION> MS Explorer 4.0
148
www.dinaro.com/vb3
></SELECT
></FORM
Sindbad 3.0
Sindbad 4.0
MS Explorer 3.0
MS Explorer 4.0
ﻻﺣﻆ أﻧﮫ ﻷداء ﻋﺪة اﺧﺘﯿﺎرات ﯾﺠﺐ أن ﺗﻘﻮم ﺑﺎﻟﻀﻐﻂ ﻋﻠﻰ اﻟﻤﻔﺘﺎح ctrlﺑﺼﻮرة
ﻣﺘﻮاﺻﻠﺔ أﺛﻨﺎء ﻋﻤﻠﯿﺔ اﻹﺧﺘﯿﺎر.
><FORM
><SELECT NAME="browser" SIZE="4" MULTIPLE
<OPTION VALUE="Sindbad 3.0"> Sindbad 3.0
<OPTION VALUE="Sindbad 4.0" SELECTED> Sindbad
4.0
<OPTION VALUE="MS Explorer 3.0"> MS Explorer 3.0
149
www.dinaro.com/vb3
Sindbad 3.0
Sindbad 4.0
MS Explorer 3.0
MS Explorer 4.0
وھﻮ اﻟﻤﺴﺘﺨﺪم ﻋﺎدة ﻟﻜﺘﺎﺑﺔ اﻟﺘﻌﻠﯿﻘﺎت اﻟﺤﺮة ﻓﻲ اﻟﻨﻤﻮذج وﯾﺘﻢ إدراﺟﮫ ﺑﻜﺘﺎﺑﺔ اﻟﻮﺳﻮم
150
www.dinaro.com/vb3
>"<TEXTAREA NAME="comments
)Hello, please write your comments here :-
></TEXTAREA
ﻛﻤﺎ ﺗﻮﺟﺪ ﺧﺼﺎﺋﺺ ﻟﺘﺤﺪﯾﺪ ﻣﺴﺎﺣﺔ ھﺬا اﻟﺤﻘﻞ ﻋﺮﺿﺎً وارﺗﻔﺎﻋﺎً ،وھﻲ COLSاﻟﺘﻲ
ﺗﺤﺪد اﻟﻌﺮض و ROWSاﻟﺘﻲ ﺗﺤﺪد اﻹرﺗﻔﺎع
أﻣﺎ اﻟﺨﺎﺻﯿﺔ اﻷﺧﯿﺮة ھﻨﺎ ﻓﮭﻲ WRAPاﻟﺘﻲ ﺗﺤﺪد ﻃﺮﯾﻘﺔ إﻟﺘﻔﺎف اﻟﻨﺺ اﻟﻤﻜﺘﻮب داﺧﻞ
اﻟﺤﻘﻞ )ﻻ ﺗﻌﻤﻞ ھﺬه اﻟﺨﺎﺻﯿﺔ ﻣﻊ (MS Explorer 3.0وھﻨﺎك ﺛﻼﺛﺔ ﻗﯿﻢ ﺗﺄﺧﺬھﺎ وھﻲ
ﻋﻠﻰ اﻟﻨﺤﻮ اﻟﺘﺎﻟﻲ:
: virtualاﻟﺘﻲ ﺗﻌﻨﻲ أن اﻟﻨﺺ ﺳﯿﻠﺘﻒ ﻋﻠﻰ ﻋﺪة أﺳﻄﺮ ﻋﻨﺪ ﻛﺘﺎﺑﺘﮫ وﻟﻜﻨﮫ ﺳﯿﺼﻠﻚ ﻋﻨﺪ
إرﺳﺎﻟﮫ ﻋﻠﻰ ﺷﻜﻞ ﺳﻄﺮ واﺣﺪ ﻣﺘﺘﺎﺑﻊ )ﺣﺎول اﻟﻜﺘﺎﺑﺔ داﺧﻞ اﻟﺤﻘﻮل وأﻧﻈﺮ ﻛﯿﻔﯿﺔ ﺗﺄﺛﯿﺮ ھﺬه
اﻟﺨﺎﺻﯿﺔ ﻋﻠﻰ ﻛﻞ ﻣﻨﮭﺎ(
151
www.dinaro.com/vb3
: physicalﺗﻌﻨﻲ أن اﻟﻨﺺ ﺳﯿﻠﺘﻒ ﻋﻠﻰ ﻋﺪة أﺳﻄﺮ وﺳﯿﺼﻠﻚ أﯾﻀﺎً ﻋﻠﻰ ھﺬا اﻟﻨﺤﻮ
ﻋﻨﺪ إرﺳﺎﻟﮫ
: offﺗﻌﻨﻲ أن اﻟﻨﺺ ﻟﻦ ﯾﻠﺘﻒ ﺑﺼﻮرة ﺗﻠﻘﺎﺋﯿﺔ ﻋﻠﻰ ﻋﺪة أﺳﻄﺮ ﻟﻜﻨﮫ ﻋﻠﻰ أﯾﺔ ﺣﺎل
ﺳﯿﺼﻠﻚ ﺑﻨﻔﺲ اﻟﺸﻜﻞ اﻟﺬي ﺗﻢ إدﺧﺎﻟﮫ ﺑﮫ
152
www.dinaro.com/vb3
ﺣﺴﻨﺎً ،ﺑﺎﻓﺘﺮاض أﻧﻨﺎ إﻧﺘﮭﯿﻨﺎ ﻣﻦ ﻛﺘﺎﺑﺔ اﻟﺸﯿﻔﺮة اﻟﺨﺎﺻﺔ ﺑﺎﻟﻨﻤﻮذج وﻧﻨﺘﻈﺮ ﻣﻦ أي زاﺋﺮ
ﻟﻠﻤﻮﻗﻊ أن ﯾﻤﻸه ،واﻟﺴﺆال ھﻮ ﻛﯿﻒ ﯾﻤﻜﻦ ﻟﮫ أن ﯾﺮﺳﻠﮫ ﻓﻌﻠﯿﺎً؟ ﻧﻌﻮد اﻵن إﻟﻰ اﻟﻮﺳﻢ
> <INPUTوھﺬه اﻟﻤﺮة ﻣﻊ اﻟﻨﻮع submitواﻟﺘﻲ ﺳﺘﻘﻮم ﺗﻠﻘﺎﺋﯿﺎً ﺑﺈﻧﺸﺎء زر ﺳﯿﻘﻮم
ﻋﻨﺪ اﻟﻨﻘﺮ ﻋﻠﯿﮫ ﺑﺈرﺳﺎل اﻟﺒﯿﺎﻧﺎت اﻟﺘﻲ ﺗﻢ ﻣﻠﺆھﺎ ﻓﻲ اﻟﻨﻤﻮذج.
>"<INPUT TYPE="submit
Soumettre la requête
153
www.dinaro.com/vb3
ﻓﻲ ﺣﺎﻟﺔ ﻛﺎن زوار ﻣﻮﻗﻌﻚ ﻣﻦ اﻟﻨﻮﻋﯿﺔ اﻟﻤﺘﺮددة ﻣﻦ اﻟﻨﺎس واﻟﺬﯾﻦ ﻗﺪ ﯾﻐﯿﺮون آراﺋﮭﻢ ﻓﻲ
آﺧﺮ ﻟﺤﻈﺔ ،ﯾﻤﻜﻨﻚ أن ﺗﺘﯿﺢ ﻟﮭﻢ إﻣﻜﺎﻧﯿﺔ ﻣﺴﺢ ﻣﺎ ﻛﺘﺒﻮه ﻓﻲ اﻟﻨﻤﻮذج وإﻟﻐﺎء اﻷﻣﺮ ،وذﻟﻚ
ﺑﺎﺳﺘﺨﺪام resetﻛﻨﻮع TYPEﻟﻠﻮﺳﻢ > <INPUTﺑﻨﻔﺲ ﻃﺮﯾﻘﺔ اﻟﺘﻌﺮﯾﻒ
واﻟﺨﺼﺎﺋﺺ اﻟﻤﺴﺘﺨﺪﻣﺔ ﻣﻊ .submit
وأﺧﯿﺮاً ...وﺻﻠﻨﺎ اﻵن إﻟﻰ ﻧﮭﺎﯾﺔ ﺣﺪﯾﺜﻨﺎ ﻋﻦ اﻟﻨﻤﺎذج .ﻓﻤﺎ رأﯾﻚ؟ ھﻞ ھﻮ ﻣﻦ اﻟﻤﻮاﺿﯿﻊ
اﻟﺴﮭﻠﺔ أم اﻟﺼﻌﺒﺔ؟ ﻻ ﺷﻲء ﺳﮭﻞ ﻓﻲ ﺑﺪاﯾﺘﮫ .ﻟﺬﻟﻚ ﻣﻦ اﻷﻓﻀﻞ ﻟﻚ أن ﺗﺤﺎول داﺋﻤﺎً اﻟﺘﺪرب
أوﻻً ﺑﺄول ﻋﻠﻰ اﻟﻮﺳﻮم اﻟﻤﺸﺮوﺣﺔ ،ﺑﻞ واﻟﻌﻮدة إﻟﻰ اﻟﺪروس اﻟﺴﺎﺑﻘﺔ إذا اﻗﺘﻀﻰ اﻷﻣﺮ
وﺧﺎﺻﺔ إذا ﺗﺪاﺧﻠﺖ ﺑﻌﻀﮭﺎ ﻣﻊ اﻟﺪروس اﻷﺣﺪث.
154
www.dinaro.com/vb3
أﻟﯿﺲ ھﺬا
ﻣﻤﺘﻌﺎ
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHHHHH
155
www.dinaro.com/vb3
واﻟﺬي ﺳﻨﻨﺎﻗﺶ ﻓﯿﮫ واﺣﺪاً ﻣﻦ اﻟﻤﻮاﺿﯿﻊ اﻟﻤﮭﻤﺔ ..واﻟﺸﺎﺋﻜﺔ ..واﻟﻤﺰﻋﺠﺔ ﻧﻮﻋﺎً ﻣﺎ ﻓﻲ
ھﺬه اﻟﻠﻐﺔ ،وﻓﻲ ﻣﺠﺎل ﺗﺼﻤﯿﻢ ﺻﻔﺤﺎت اﻟﻮﯾﺐ ﻋﻤﻮﻣﺎً .وھﻮ ﻣﻮﺿﻮع اﻟﻮﺳﻮم اﻟﺨﺎﺻﺔ...
ﻓﻤﺎ ھﻲ ھﺬه اﻟﻮﺳﻮم؟
ﻣﻼﺣﻈﺔ ﻣﮭﻤﺔ :ﺗﺤﺘﻮي ھﺬه اﻟﺼﻔﺤﺔ ﻋﻠﻰ وﺳﻮم ﺧﺎﺻﺔ ﺑﺎﻟﻤﺘﺼﻔﺢ MS Internet
Explorerﻓﺈذا ﻛﺎن ﻣﺘﺼﻔﺤﻚ ﺧﻼف ذﻟﻚ ﻓﻠﻦ ﺗﺴﺘﻄﯿﻊ ﻣﺸﺎھﺪة اﻟﺼﻔﺤﺔ ﺑﺎﻟﺼﻮرة
اﻟﻤﻨﺎﺳﺒﺔ
• ﻻﻓﺘﺎت ><MARQUEE
156
www.dinaro.com/vb3
><BGSOUND
ﺗﺴﺘﻄﯿﻊ ﺗﻌﯿﯿﻦ أي ﻣﻠﻒ ﺻﻮﺗﻲ ﯾﺤﻤﻞ اﻹﻣﺘﺪاد midأو wavأو auﺑﺤﯿﺚ ﯾﻌﻤﻞ ﺗﻠﻘﺎﺋﯿًﺎ
ﻋﻨﺪﻣﺎ ﯾﺘﻢ ﺗﺤﻤﯿﻞ اﻟﺼﻔﺤﺔ ﻓﻲ اﻟﻤﺘﺼﻔﺢ ،وذﻟﻚ ﺑﺎﺳﺘﺨﺪام اﻟﻮﺳﻢ >) <BGSOUNDأي
(Sound BackGroundﻓﻌﻠﻰ ﺳﺒﯿﻞ اﻟﻤﺜﺎل ،ﻗﻤﺖ ﺑﺈدراج اﻟﻤﻘﻄﻊ اﻟﻤﺴﻤﻰ lkl.mid
ﺑﺎﻟﻄﺮﯾﻘﺔ اﻟﺘﺎﻟﯿﺔ
>"<BGSOUND SRC="lkl.mid
إذن ھﻨﺎك اﻟﺨﺎﺻﯿﺔ SRCواﻟﺘﻲ ﺗﺴﺘﺨﺪم ﻛﻤﺎ ﺗﺮى ﻟﺘﺤﺪﯾﺪ اﺳﻢ اﻟﻤﻠﻒ اﻟﻤﺪرج .ﻛﻤﺎ ﯾﻮﺟﺪ
أﯾﻀﺎً اﻟﺨﺎﺻﯿﺔ LOOPاﻟﺘﻲ ﺗﺤﺪد ﻋﺪد ﻣﺮات ﺗﻜﺮار ﻋﺰف اﻟﻤﻘﻄﻮﻋﺔ أي أﻧﮭﺎ ﺗﺄﺧﺬ
أرﻗﺎﻣﺎً ﺻﺤﯿﺤﺔ ﻋﺎدة .أﻣﺎ ﻟﻮ ﻗﻤﺖ ﺑﺈﻋﻄﺎءھﺎ اﻟﻘﯿﻤﺔ -1أو اﻟﻘﯿﻤﺔ infiniteﻓﮭﺬا ﺳﻮف
ﯾﺆدي إﻟﻰ ﺗﻜﺮار ﻋﺰف اﻟﻤﻘﻄﻮﻋﺔ إﻟﻰ ﻣﺎ ﻻ ﻧﮭﺎﯾﺔ )ﻻ ﺗﺨﻒ ،ﻓﮭﺬا ﻻ ﯾﻌﻨﻲ أن اﻟﻌﺰف
ﺳﯿﺴﺘﻤﺮ ﺑﻌﺪ أن ﺗﻘﻮم ﺑﺈﻃﻔﺎء ﺟﮭﺎزك( ﻓﻘﻂ ﺳﻮف ﺗﺴﻤﻌﮭﺎ ﻃﺎﻟﻤﺎ أﻧﻚ ﻣﻮﺟﻮد ﻓﻲ اﻟﺼﻔﺤﺔ
وﺳﯿﺘﻮﻗﻒ ﺑﻤﺠﺮد اﻧﺘﻘﺎﻟﻚ ﻟﺼﻔﺤﺔ أﺧﺮى أو ﺧﺮوﺟﻚ ﻣﻦ اﻟﺒﺮﻧﺎﻣﺞ.
أﻣﺎ ﻓﻲ ﺣﺎﻟﺔ أردت إدراج وﺻﻼت ﺗﺸﻌﺒﯿﺔ ﻟﻤﻠﻔﺎت ﺻﻮﺗﯿﺔ ﻓﻲ ﻣﻮﻗﻌﻚ ﺑﺤﯿﺚ ﯾﻤﻜﻦ ﻟﻠﺰاﺋﺮ
أن ﯾﺤﻤّﻠﮭﺎ أو أن ﯾﻨﻘﺮ ﻋﻠﯿﮭﺎ إذا أراد ﺳﻤﺎﻋﮭﺎ ،ﻓﺬﻟﻚ ﯾﺘﻢ ﺑﺎﻟﻄﺮﯾﻘﺔ اﻹﻋﺘﯿﺎدﯾﺔ ﻹدراج
اﻟﻮﺻﻼت واﻟﺘﻲ ﺗﻌﻠﻤﻨﺎھﺎ ﻓﻲ اﻟﺪرس اﻟﺴﺎدس أي ﻛﻤﺎ ﯾﻠﻲ:
157
www.dinaro.com/vb3
ﻣﺎ رأﯾﻚ ﺑﮭﺬا اﻟﻨﺺ اﻟﻤﺘﺴﻜﻊ أﻣﺎﻣﻚ ﻋﻠﻰ اﻟﺸﺎﺷﺔ؟ ﺟﻤﯿﻞ ..أﻟﯿﺲ ﻛﺬﻟﻚ؟ ھﺬه اﻟﻼﻓﺘﺔ )إن
ﺟﺎز اﻟﺘﻌﺒﯿﺮ( ھﻲ إﺣﺪى اﻟﻤﺆﺛﺮات اﻟﺨﺎﺻﺔ اﻟﺘﻲ ﯾﻤﻜﻦ إﺣﺪاﺛﮭﺎ ﻓﻲ .MS Explorer
ﺑﻮاﺳﻄﺔ ھﺬه اﻟﻮﺳﻮم .وﺑﻜﻞ ﺑﺴﺎﻃﺔ ھﺬه ھﻲ اﻟﺸﯿﻔﺮة اﻟﺨﺎﺻﺔ ﺑﺬﻟﻚ
><MARQUEE
HTML
></MARQUEE
ﺑﺎﻟﻄﺒﻊ ﻻ ﯾﻤﻜﻦ أن ﺗﻤﺮ اﻷﻣﻮر ھﻨﺎ ﺑﺒﺴﺎﻃﺔ ﻓﻼ ﺑﺪ ﻣﻦ وﺟﻮد ﺧﺼﺎﺋﺺ ﻟﮭﺬه اﻟﻮﺳﻮم،
واﻟﺤﻘﯿﻘﺔ أن ھﻨﺎك إﺣﺪى ﻋﺸﺮة ﺧﺎﺻﯿﺔ ﻧﺴﺘﺨﺪﻣﮭﺎ )ﻋﺪد ﻟﯿﺲ ﺑﺎﻟﻘﻠﯿﻞ ﺑﺎﻟﻨﺴﺒﺔ ﻟﻮﺳﻮم
ﺧﺎﺻﺔ( .ﻟﻜﻨﮭﺎ ﻋﻠﻰ أﯾﺔ ﺣﺎل ﻟﯿﺴﺖ ﺻﻌﺒﺔ اﻟﺘﻄﺒﯿﻖ ﺑﻞ إﻧﻨﺎ ﺗﻌﺎﻣﻠﻨﺎ ﺑﺸﻜﻞ أو ﺑﺂﺧﺮ ﻣﻌﮭﺎ
ﻣﺴﺒﻘﺎً وﺧﺎﺻﺔ ﻣﻊ اﻟﻮﺳﻢ > <IMGوھﺬه ھﻲ اﻟﺨﺼﺎﺋﺺ أﺳﺮدھﺎ ﻟﻚ ﻣﻊ اﻷﻣﺜﻠﺔ:
>"<MARQUEE BGCOLOR="#FF0000
HTML
></MARQUEE
158
www.dinaro.com/vb3
:HEIGHTﻟﺘﺤﺪﯾﺪ إرﺗﻔﺎع اﻟﻼﻓﺘﺔ ،وھﻲ إﻣﺎ أن ﺗﺄﺧﺬ ﻗﯿﻤﺔ ﺛﺎﺑﺘﺔ أو ﻗﯿﻤﺔ ﻧﺴﺒﯿﺔ ﺣﺴﺐ
إرﺗﻔﺎع ﻧﺎﻓﺬة اﻟﻤﺘﺼﻔﺢ.
:WIDTHﻟﺘﺤﺪﯾﺪ ﻋﺮض اﻟﻼﻓﺘﺔ ،وھﻨﺎ أﯾﻀﺎً إﻣﺎ أن ﺗﺄﺧﺬ ﻗﯿﻤﺔ ﺛﺎﺑﺘﺔ أو ﻧﺴﺒﯿﺔ
:ALIGNﻟﺘﺤﺪﯾﺪ اﻟﻤﺤﺎذاة اﻟﻌﻤﻮدﯾﺔ ﻟﻠﻨﺺ اﻟﺬي ﻗﺪ ﯾﺘﻮاﺟﺪ ﻋﻠﻰ ﺟﺎﻧﺒﻲ اﻟﻼﻓﺘﺔ ،وھﻲ
ﺗﺄﺧﺬ اﻟﻘﯿﻢ top, middleو bottomوھﻲ اﻹﻓﺘﺮاﺿﯿﺔ أي اﻟﺘﻲ ﺗﻄﺒﻖ ﺗﻠﻘﺎﺋﯿﺎً ﻋﻨﺪ ﻋﺪم
إدراج ھﺬه اﻟﺨﺎﺻﯿﺔ
Welcome to
"<MARQUEE BGCOLOR="#FF0000" HEIGHT="80
>"WIDTH="40%
HTML
></MARQUEE
Have a good time.
159
www.dinaro.com/vb3
Welcome to
<MARQUEE BGCOLOR="#FF0000" HEIGHT="80"
WIDTH="40%" ALIGN="middle">
HTML
</MARQUEE>
Have a good time. Welcome to
<MARQUEE BGCOLOR="#FF0000" HEIGHT="80"
WIDTH="40%" ALIGN="middle">
H.P in arabic
</MARQUEE>
Have a good time.
Welcome to
<MARQUEE BGCOLOR="#FF0000" HEIGHT="80"
WIDTH="40%" ALIGN="top">
HTML
</MARQUEE>
Have a good time.
ﻟﺘﺤﺪﯾﺪ اﻟﻤﺴﺎﻓﺔ اﻟﻔﺎرﻏﺔ اﻟﺘﻲ ﺗﻔﺼﻞ ﺑﯿﻦ اﻟﻼﻓﺘﺔ وﺑﯿﻦ اﻟﻨﺺ اﻟﻤﻮﺟﻮد:HSPACE
ﻋﻠﻰ ﺟﺎﻧﺒﯿﮭﺎ
Welcome to
<MARQUEE BGCOLOR="#FF0000" HEIGHT="80"
WIDTH="40%" HSPACE="30">
HTML
</MARQUEE>
Have a good time
160
www.dinaro.com/vb3
:VSPACEﺗﻌﻤﻞ ﻣﺜﻞ اﻟﺨﺎﺻﯿﺔ اﻟﺴﺎﺑﻘﺔ ﻟﻜﻨﮭﺎ ﺗﺤﺪد اﻟﻤﺴﺎﻓﺔ اﻟﻔﺎرﻏﺔ ﻋﻤﻮدﯾﺎً ﻣﻦ
اﻷﻋﻠﻰ واﻷﺳﻔﻞ
ﺣﺘﻰ اﻵن ﻛﺎﻧﺖ اﻟﺨﺼﺎﺋﺺ اﻟﺘﻲ ﻧﺎﻗﺸﻨﺎھﺎ ﻣﺠﺮد ﺧﺼﺎﺋﺺ ﻣﻈﮭﺮﯾﺔ ﺗﺘﻌﻠﻖ ﺑﺸﻜﻞ وﻣﻈﮭﺮ
اﻟﻼﻓﺘﺔ دون ﺗﻐﯿﯿﺮ ﻃﺮﯾﻘﺔ ﻋﻤﻠﮭﺎ .واﻵن ﻧﺄﺗﻲ إﻟﻰ اﻟﺨﺼﺎﺋﺺ اﻟﻔﻨﯿﺔ:
BEHAVIORﺗﺤﺪد ﺳﻠﻮك اﻟﻨﺺ اﻟﻤﻮﺟﻮد ﻓﻲ اﻟﻼﻓﺘﺔ وﻃﺮﯾﻘﺔ ﻋﻤﻠﮫ وھﻨﺎك ﺛﻼﺛﺔ ﻗﯿﻢ
)أو ﺑﺎﻷﺣﺮى( ﺛﻼﺛﺔ أﺳﺎﻟﯿﺐ ﻟﺤﺮﻛﺔ اﻟﻨﺺ وھﻲ اﻟﺘﺎﻟﯿﺔ:
ﻣﻦ اﻟﻤﺤﺘﻤﻞ أن ﯾﻜﻮن اﻟﻨﺺ ﻓﻲ اﻟﻤﺜﺎل ﻣﺘﻮﻗﻔﺎً ﺑﻌﺪ أن ﯾﻜﻮن ﻗﺪ أﻛﻤﻞ ﺗﺤﺮﻛﮫ ،ﻟﺬﻟﻚ ﻗﻢ
ﺑﺎﻟﻨﻘﺮ ﻋﻠﻰ زر Refreshاﻟﻤﻮﺟﻮد ﻓﻲ ﻣﺘﺼﻔﺤﻚ ﻹﻋﺎدة ﺗﺤﻤﯿﻞ اﻟﺼﻔﺤﺔ وﺗﺤﺮﯾﻚ اﻟﻨﺺ
ﻣﺮة أﺧﺮى
161
www.dinaro.com/vb3
DIRECTIONﺗﺤﺪد إﺗﺠﺎه ﺳﯿﺮ اﻟﻨﺺ وذﻟﻚ ﻣﻦ ﺧﻼل اﻟﻘﯿﻢ leftاﻟﺘﻲ ﺗﺤﺮﻛﮫ إﻟﻰ
اﻟﯿﺴﺎر )وھﻲ اﻹﻓﺘﺮاﺿﯿﺔ( و rightاﻟﺘﻲ ﺗﺤﺮﻛﮫ إﻟﻰ اﻟﯿﻤﯿﻦ.
LOOPﺗﺤﺪد ﻋﺪد اﻟﻤﺮات اﻟﺘﻲ ﺳﯿﺘﺤﺮك ﻓﯿﮭﺎ اﻟﻨﺺ داﺧﻞ اﻟﻼﻓﺘﺔ .ﻓﺈذا أردت أن
ﺗﺴﺘﻤﺮ اﻟﺤﺮﻛﺔ إﻟﻰ ﻣﺎ ﻻ ﻧﮭﺎﯾﺔ ﻓﻀﻊ اﻟﻘﯿﻤﺔ -1أو infiniteوﺑﺨﻼف ذﻟﻚ ﺿﻊ ﻋﺪد
اﻟﻤﺮات اﻟﺘﻲ ﺗﺮﯾﺪھﺎ .واﻟﺸﯿﻔﺮة اﻟﺘﺎﻟﯿﺔ ﺗﺤﺪد ﻋﺪد ﻣﺮات اﻟﺤﺮﻛﺔ ﺑﺜﻼث) .إذا وﺟﺪت اﻟﻨﺺ
ﺳﺎﻛﻨﺎً أو ﻟﻢ ﺗﺠﺪ ﻧﺼﺎً ﻋﻠﻰ اﻹﻃﻼق ﻓﮭﺬا ﯾﻌﻨﻲ أﻧﮫ ﻗﺪ اﺳﺘﻨﻔﺬ ﺣﺮﻛﺎﺗﮫ اﻟﺜﻼث ﻟﺬﻟﻚ ﺗﺤﺘﺎج
ﻟﻠﻨﻘﺮ ﻋﻠﻰ Refreshﻹﻋﺎدة ﺗﺸﻐﯿﻠﮫ(
162
www.dinaro.com/vb3
ﺑﻘﻲ ﻟﺪﯾﻨﺎ اﻵن ﺧﺎﺻﯿﺘﯿﻦ ﺗﻘﻮﻣﺎن ﺑﺘﺤﺪﯾﺪ ﺳﺮﻋﺔ ﺗﺤﺮك اﻟﻨﺺ ﻓﻲ اﻟﻼﻓﺘﺔ
163
www.dinaro.com/vb3
ﻓﻲ اﻟﺤﺎﻟﺔ اﻷوﻟﻰ ﻓﺈن اﻟﻤﺴﺎﻓﺔ اﻟﺘﻲ ﺗﻘﻄﻌﮭﺎ ﻛﻠﻤﺔ HTMLﻓﻲ ﻛﻞ ﺣﺮﻛﺔ ﻟﮭﺎ ھﻲ 1
ﺑﯿﻜﺴﻞ .أﻣﺎ ﻓﻲ اﻟﻤﺜﺎل اﻟﺜﺎﻧﻲ ﻓﺎﻟﻤﺴﺎﻓﺔ ھﻲ 50ﺑﯿﻜﺴﻞ أي أن اﻟﻜﻠﻤﺔ ﺗﻘﻔﺰ 50ﺑﯿﻜﺴﻞ ﻓﻲ
ﻛﻞ ﺧﻄﻮة )أو ﻟﻘﻄﺔ( ﺑﻤﺎ ﯾﺴﺎوي 50ﺿﻌﻔﺎً ﻋﻦ اﻟﻤﺜﺎل اﻟﺴﺎﺑﻖ وھﺬا ﻣﺎ ﯾﻌﻄﻲ اﻹﻧﻄﺒﺎع
ﺑﺎﻟﺴﺮﻋﺔ ،وھﻜﺬا اﻷﻣﺮ ﻟﻠﻤﺜﺎﻟﯿﻦ اﻟﻼﺣﻘﯿﻦ وھﻤﺎ 100و 200ﺑﯿﻜﺴﻞ ﻋﻠﻰ اﻟﺘﻮاﻟﻲ.
ﺳﻮف أﺳﺘﺨﺪم ﻧﻔﺲ اﻷﻣﺜﻠﺔ اﻟﺴﺎﺑﻘﺔ ﻣﻊ ھﺬه اﻟﺨﺎﺻﯿﺔ ﻟﻨﻘﺎرن ﺑﯿﻦ اﻟﻨﺘﺎﺋﺞ ﻓﻲ اﻟﺤﺎﻟﺘﯿﻦ:
"<MARQUEE SCROLLAMOUNT="1
>SCROLLDELAY="500"> HTML </MARQUEE
"<MARQUEE SCROLLAMOUNT="50
>SCROLLDELAY="500"> HTML </MARQUEE
"<MARQUEE SCROLLAMOUNT="100
>SCROLLDELAY="500"> HTML </MARQUEE
164
www.dinaro.com/vb3
"<MARQUEE SCROLLAMOUNT="200
>SCROLLDELAY="500"> HTML </MARQUEE
ﻟﻘﺪ أﺳﻨﺪت اﻟﻘﯿﻤﺔ 500ﻟﮭﺬه اﻟﺨﺎﺻﯿﺔ ﻓﻲ ﺟﻤﯿﻊ اﻷﻣﺜﻠﺔ وھﻲ ﺗﻌﻨﻲ أن ھﻨﺎك ﻓﺘﺮة ﻧﺼﻒ
ﺛﺎﻧﯿﺔ )ﺑﺎﻟﺘﻤﺎم واﻟﻜﻤﺎل( ﺗﻔﺼﻞ ﺑﯿﻦ ﻛﻞ ﺧﻄﻮة وأﺧﺮى ﻟﻠﻜﻠﻤﺔ .وأﻋﺘﻘﺪ أن ﻣﺎ ﺗﺮاه اﻵن
ﯾﻮﺿﺢ ﻟﻚ ﻣﺒﺪأ ﻋﻤﻞ اﻟﺨﺎﺻﯿﺔ اﻟﺴﺎﺑﻘﺔ أﯾﻀﺎً .وﺑﺎﻟﻤﻨﺎﺳﺒﺔ ،ﻗﺪ ﺗﻀﻄﺮ ﻟﻺﻧﺘﻈﺎر دھﺮاً
ﻛﺎﻣﻼً ﻟﻜﻲ ﺗﺮى اﻟﻨﺺ ﻓﻲ اﻟﻤﺜﺎل اﻷول.
ﻧﻜﻮن اﻵن ﻗﺪ وﺻﻠﻨﺎ إﻟﻰ ﻧﮭﺎﯾﺔ ھﺬا اﻟﺪرس وھﺬا اﻟﻜﺘﺎب ،ﻣﻊ أﺻﺪق ﺗﻤﻨﯿﺎﺗﻲ ﺑﺄن ﯾﻜﻮن
ﻣﻮﻗﻌﻚ داﺋﻤﺎ ﻣﻨﯿﺮااااااااااااا ﺑﻌﻮن اﷲ.........
165
www.dinaro.com/vb3
ﺍﻟﻨﻬﺎﻳﺔ
ﺍﻟﻤﺮﺍﺟﻊ ﺍﻟﺘﻲ ﺇﺳﺘﻔﺪﺕ ﻣﻨﻬﺎ ﻫﺬﺍ ﺍﻟﻜﺘﺎﺏ :
ﻣﻮﻗﻊ :
www.khayma.com\HPINARABIC
167
www.dinaro.com/vb3
168
www.dinaro.com/vb3
169