ﺩﻭﺭﺓ ﺗﻌﻠﻢ ﻟﻐﺎﺕ ﺍﻟﺒﺮﻣﺠﺔ - ﺍﻟﺪﺭﺱ ﺍﻻﻭﻝ ‏( ﺍﺳﺎﺳﻴﺎﺕ

ﺍﻟﺴﻼﻡ ﻋﻠﻴﻜﻢ ﻭﺭﺣﻤﺔ ﺍﻟﻠﻪ ﻭﺑﺮﻛﺎﺗﻪ
ﺍﺣﺒﺘﻲ ﺍﻋﻀﺎﺀ ﻭﺯﻭﺍﺭ ﻣﻌﻬﺪ ﺗﺮﺍﻳﺪﻧﺖ ﺍﻟﻜﺮﺍﻡ
ﺍﻟﻴﻮﻡ ﺍﻥ ﺷﺎﺀ ﺍﻟﻠﻪ ﺳﻮﻑ ﻧﺘﻨﺎﻭﻝ ﺍﻭﻝ ﺩﺭﻭﺱ ﺗﻌﻠﻢ ﻟﻐﺎﺕ ﺍﻟﺒﺮﻣﺠﺔ ﻭﺍﻟﻴﻮﻡ ﺳﻮﻑ ﻧﺒﺪﺃ ﻣﻊ ﺍﻭﻝ ﺩﺭﺱ ﻓﻲ ﺍﻟﺪﻭﺭﺓ
ﺑﺎﻟﻨﺴﺒﺔ ﺍﻟﻰ ﻫﺬﻩ ﺍﻟﺪﻭﺭﺓ ﺳﻮﻑ ﺗﻜﻮﻥ ﺣﺼﺮﻳﺂ ﻋﻠﻰ ﻣﻌﻬﺪ ﺗﺮﺍﻳﺪﻧﺖ ﻭ
ﻣﺪﺭﺳﺔ ﺍﻟﻤعهد الإلكترونى
ﻟﺬﺍﻟﻚ ﻳﻤﻨﻊ ﻧﻘﻞ ﻫﺬﻩ ﺍﻟﺪﺭﻭﺱ ﺑﺪﻭﻥ ﻋﻠﻢ ﺍﺩﺍﺭﺓ المعهد الإلكترونى ﻭﻳﻤﻨﻊ ﺍﻟﻤﺘﺎﺟﺮﺓ ﻓﻴﻬﺎ ﺍﻭ ﺑﻴﻌﻬﺎ ﻋﻠﻰ ﺷﻜﻞ ﻛﺘﺎﺏ ﺍﻭ ﻏﻴﺮ ﺫﺍﻟﻚ ﻻﻧﻬﺎ ﺗﻘﺪﻡ ﺑﺸﻜﻞ ﻣﺠﺎﻧﻲ ﻭﻟﻠﺠﻤﻴﻊ .
ﻓﻲ ﺍﻟﺒﺪﺍﻳﺔ ﻟﻘﻴﺖ ﺑﻌﺾ ﺍﻟﺮﺩﻭﺩ ﺗﻄﻠﺐ ﻣﻨﻲ ﺍﻥ ﺗﻜﻮﻥ ﺩﺭﻭﺱ ﺍﻟﺪﻭﺭﺓ ﻓﻴﺪﻳﻮ
ﻭﺍﻧﺎ ﺍﻋﺘﺒﺮ ﺍﻟﺸﺮﺡ ﻛﺘﺎﺑﺔ ﻭﺻﻮﺭ ﺍﻓﻀﻞ ﻭﺍﻟﺴﺒﺐ ﻫﻮ ﺍﻟﺒﻌﺾ ﻟﺪﻳﻬﻢ ﺍﺗﺼﺎﻝ ﺍﻻﻧﺘﺮﻧﺖ ﻏﻴﺮ ﺟﻴﺪ
ﺍﻱ ﺳﻮﻑ ﻻﻳﺴﺘﻄﻴﻊ ﻣﺘﺎﺑﻌﺔ ﺍﻟﺪﻭﺭﺓ ﺍﻧﺎ ﺍﻟﺬﻱ ﻳﻬﻤﻨﻲ ﻫﻮ ﻓﺎﺋﺘﻜﻢ ﻭﺍﺳﺘﻄﻴﻊ ﺍﻥ ﺍﻋﻤﻞ ﻟﻜﻢ ﺍﻟﺪﺭﻭﺱ ﻓﻴﺪﻳﻮ
ﻭﺑﺎﻋﻠﻰ ﺟﻮﺩﺓ ﻟﻜﻦ ﻗﻠﺖ ﻟﻜﻢ ﺍﻟﺒﻌﺾ ﺍﺗﺼﺎﻝ ﺍﻻﻧﺘﺮﻧﺖ ﻟﺪﻳﻪ ﻏﻲ ﺟﻴﺪ
ﻟﺬﺍﻟﻚ ﺍﻧﺎ ﻗﻤﺖ ﺑﻌﻤﻞ ﺍﻭﻝ ﺩﺭﺱ ﻛﺘﺎﺑﺔ ﻭﺍﻟﺸﺮﺡ ﺗﻢ ﻋﻤﻠﻪ ﺑﺎﻟﺘﻔﺼﻴﻞ ﻭﺷﺮﺣﺖ ﻟﻜﻢ ﻛﻞ ﺻﻐﻴﺮﺓ ﻭﻛﺒﻴﺮﺓ
ﺑﺎﻟﻨﺴﺒﺔ ﻟﻠﺪﻭﺱ ﺳﻮﻑ ﺗﻜﻮﻥ ﻛﺎﻟﺘﺎﻟﻲ
html
css
php
ﺳﻮﻑ ﻧﺒﺪﺃ ﻋﻠﻰ ﺑﺮﻛﺔ ﺍﻟﻠﻪ ﻓﻲ html
ﻫﺬﺍ ﺍﻟﺪﺭﺱ ﻫﻮ ﺍﻟﺒﺪﺍﻳﺔ ﻭﺗﻢ ﺷﺮﺡ ﻓﻴﻪ ﺍﺳﺎﺳﻴﺎﺕ html ﺣﺎﻭﻝ ﺍﻥ ﺗﻘﺮﺃ ﺍﻟﺪﺭﺱ ﺑﺘﺮﻛﻴﺰ ﻭﻻ ﺗﻨﺴﻰ ﺍﻟﺘﻄﺒﻴﻖ ﻭﺍﻱ ﺍﺳﺘﻔﺴﺎﺭ ﺍﻧﺎ ﻣﻮﺟﻮﺩ ﺍﻥ ﺷﺎﺀ ﺍﻟﻠﻪ ﻭﺳﻮﻑ ﺍﺭﺩ ﻋﻠﻰ ﺍﺳﺘﻔﺴﺎﺭﺍﺗﻜﻢ ﺳﻮﺍﺀ ﻫﻨﺎ ﻓﻲ ﺍﻟﻤﻌﻬﺪ
ﺍﻭ ﺍﻟﻤﺪﺭﺳﺔ ﻭﺍﻟﻲ ﻭﺍﻟﺸﺨﺺ ﺍﻟﺬﻱ ﻳﻮﺍﺟﻪ ﺻﻌﻮﺑﺔ ﻓﻲ ﻓﻬﻢ ﺍﻟﺸﺮﺡ ﻳﻜﻠﻤﻨﻲ ﻛﺬﺍﻟﻚ
ﻧﺒﺪﺃ ﺍﻷﻥ ﺍﻟﺪﺭﺱ
ﺍﻟﻴﻮﻡ ﺳﻮﻑ ﻧﺘﻨﺎﻭﻝ ﺍﻭﻝ ﺩﺭﻭﺱ ﺗﻌﻠﻢ html ﻭﺳﻮﻑ ﻧﺘﻜﻠﻢ ﻓﻲ ﻫﺬﺍ ﺍﻟﺪﺭﺱ ﻋﻦ html ﻭﻛﻴﻔﻴﺔ ﻋﻤﻠﻬﺎ
ﻋﺰﻳﺰﻱ ﺍﻟﻄﺎﻟﺐ ﻟﻐﺔ html ﻣﻦ ﺍﻟﻐﺎﺕ ﺍﻟﺴﻬﻠﺔ ﺟﺪﺁ ﻭﻫﻲ ﻏﻴﺮ ﻣﻌﻘﺪﺓ ﻭﺳﻬﻠﺔ ﺍﻻﺳﺘﺨﺪﺍﻡ ﻭﺍﻟﺘﻌﻠﻢ ﻃﻴﺐ ﻟﻮ ﻛﻨﺖ ﻃﺎﻟﺐ ﻣﺒﺘﺪﺃ ﻭﺗﺮﻳﺪ ﺍﻥ ﺗﺘﻌﻠﻢ ﻳﺘﻮﺟﺐ ﻋﻠﻴﻚ ﺍﻥ ﺗﻔﻬﻢ ﻣﺎﻫﻲ html ﻭﺍﻳﻦ ﺗﺴﺘﺨﺪﻡ ﺍﻧﺖ ﺍﻻﻥ ﻟﻮ ﺩﺧﻠﺖ ﺍﻟﻰ ﻣﻮﻗﻊ ﻣﺜﺎﻝ ﻣﻮﻗﻊ ﻣﺪﺭﺳﺔ ﺍﻟﻤﺴﺘﻘﺒﻞ ﺍﻟﺘﻌﻠﻴﻤﻴﺔ ﺳﻮﻑ ﺗﻼﺣﻆ ﺍﻧﻪ ﺍﻟﻤﺪﺭﺳﺔ ﻓﻴﻬﺎ ﺗﺼﻤﻴﻢ ﻣﻜﻮﻥ ﻣﻦ ﺻﻮﺭ ﻭﺍﻻﻟﻮﺍﻥ ﻭﺍﻟﺨﻄﻮﻁ ﻭﺍﻟﻘﻮﺍﺋﻢ ﺍﻟﺠﺎﻧﺒﻴﺔ ﻫﺬﻩ ﻛﻠﻬﺎ ﺗﻢ ﻋﻤﻠﻬﺎ ﺑﻮﺍﺳﻄﺔ html ﺍﻱ ﺑﻤﻌﻨﻰ ﺍﻧﻪ html ﻫﻲ ﺍﻟﻬﻴﻜﻠﻴﺔ ﺍﻭ ﻫﻴﻜﻞ ﺍﻟﻤﻮﻗﻊ ﺍﻭ ﺍﻟﺸﻜﻞ ﺍﻟﻈﺎﻫﺮ ﻫﻨﺎﻙ ﺷﻲﺀ ﺍﺧﺮ ﻳﺘﻮﺟﺐ ﻋﻠﻴﻚ ﺍﻥ ﺗﻔﻬﻤﻪ ﻭﻫﻮ css ﺗﻌﺘﺒﺮ css ﺷﻲﺀ ﻣﻜﻤﻞ ﺍﻟﻰ html ﻻﻧﻪ css ﻣﺴﺆﻭﻝ ﻋﻦ ﺍﻻﻟﻮﺍﻥ ﻭﺍﻟﺨﻄﻮﻁ ﺍﻱ ﺍﻧﻪ ﻣﺴﺆﻭﻝ ﻋﻦ ﺟﻤﺎﻟﻴﺔ ﺍﻟﺘﺼﻤﻴﻢ ﻟﻜﻦ ﺍﻛﻮﺩ css ﺗﻜﻮﻥ ﻣﻔﺼﻮﻟﺔ ﻋﻦ ﺍﻛﻮﺍﺩ html ﺩﻋﻦ ﺍﻻﻥ ﻣﻦ css ﺳﻮﻑ ﻧﺘﻜﻠﻢ ﻋﻨﻬﺎ ﻭﻧﺘﻌﻠﻤﻬﺎ ﺑﻌﺪ ﺩﻭﺭﺓ html ﺍﻥ ﺷﺎﺀ ﺍﻟﻠﻪ ﺍﻻﻥ ﻧﺮﺟﻊ ﺍﻟﻰ html ﺳﻮﻑ ﻧﺘﻜﻠﻢ ﺍﻻﻥ ﻋﻦ ﻛﻞ ﻭﺳﻢ ﺧﺎﺹ ﻓﻲ html ﺗﺎﺑﻊ ﻣﻌﻲ .... ﺍﻧﺖ ﻟﻤﺎ ﺗﺸﺎﻫﺪ ﺍﻻﻥ ﺻﻔﺤﺔ ﺍﻟﻤﻮﻗﻊ ﺳﻮﻑ ﺗﺸﺎﻫﺪﻫﺎ ﻣﻜﻮﻧﺔ ﻣﻦ ﻫﻴﺪﺭ ‏( headr ‏) ﻭ ﺟﺴﻢ ﺍﻟﺼﻔﺤﺔ ‏( body ‏) ﻭ ﺫﻳﻞ ﺍﻟﺼﻔﺤﺔ ‏( footer ‏) ﺍﻻﻥ ﻧﺘﻄﺮﻕ ﺍﻟﻰ ﻛﺘﺎﺑﺔ ﺍﻻﻛﻮﺍﺩ ﺍﻟﺨﺎﺻﺔ ﻓﻲ ﺻﻔﺤﺔ html ﺍﻭﻝ ﺷﻲﺀ ﻳﺠﺐ ﺍﻥ ﺗﺒﺪﺁ ﺻﻔﺤﺔ html ﺑﻮﺳﻢ ﺍﻟﻔﺘﺢ ﺍﻟﺨﺎﺹ ﺏ html ﻭﻳﻜﺘﺐ ﺑﻬﺬﺍ ﺍﻟﺸﻜﻞ :
ﺗﺎﺑﻊ ﻣﻌﻲ ﺍﻟﻜﻮﺩ ﺍﻟﺘﺎﻟﻴﺔ :
ﺭﻣﺰ :PHP
< html > // 1
< head > // 2
< title > ﻋﻨﻮﺍﻥ ﺍﻟﺼﻔﺤﺔ // 3
// 4
< body > // 5
// 6
ﺍﻟﻜﻮﺩ ﺗﺒﻴﻦ ﻟﻚ ﻃﺮﻳﻘﺔ ﻛﺘﺎﺑﺔ ﻛﻞ ﻭﺳﻢ ﻓﻲ ﺻﻔﺤﺔ html ﺗﺎﺑﻊ
ﺍﻟﺮﻗﻢ 1 ﻓﻲ ﺍﻟﻜﻮﺩ ﻫﻮ ﺑﺪﺍﻳﺔ ﻭﺳﻢ ﺻﻔﺤﺔ html ﺍﻱ ﺑﻤﻌﻨﺎ ﺍﻧﻪ ﺍﺧﺒﺮﻧﺎ ﺍﻟﻤﺘﺼﻔﺢ ﺍﻧﻪ ﻫﺬﻩ ﺍﻟﺼﻔﺤﺔ ﺗﺤﺘﻮﻱ ﻋﻠﻰ ﺍﻛﻮﺍﺩ ﺗﻨﺘﻤﻲ ﺍﻟﻰ ﺻﻔﺤﺔ html ﺍﻣﺎ ﺍﻟﺮﻗﻢ 7 ﻫﻮ ﺍﻏﻼﻕ ﻭﺳﻢ html ﺍﻏﻠﺐ ﻭﺳﻮﻡ html ﻓﻴﻬﺎ ﺑﺪﺍﻳﺔ ﻟﻠﻮﺳﻢ ﻭﺍﻏﻼﻕ ﻟﻠﻮﺳﻢ ﻛﻤﺎ ﻋﻤﻠﻨﺎ ﻓﻲ ﺑﺪﺍﻳﺔ ﻛﺘﺎﺑﺔ html ﺍﻧﻈﺮ ﺍﻟﻰ ﺍﻟﻜﻮﺩ ﻭﺗﺎﺑﻊ ﻓﻴﻬﺎ ﺍﻻﺭﻗﺎﻡ 1 ﻭ 7 ﻃﻴﺐ ﺑﻌﺪ ﻣﺎ ﻛﺘﺒﻨﺎ ﻭﺳﻢ ﺑﺪﺍﻳﺔ ﻭﺍﻏﻼﻕ ﺻﻔﺤﺔ html ﻫﻨﺎﻙ ﺍﻣﻮﺭ ﺍﺧﺮﻯ ﻳﺠﺐ ﻛﺘﺎﺑﺘﻬﺎ ﻭﻫﻲ head ﻭ title ﻭ body ﺳﻮﻑ ﻧﺘﻜﻠﻢ ﻋﻦ head ﻭﺗﺎﺑﻊ ﻓﻲ ﺍﻟﻜﻮﺩ ﺍﻻﺭﻗﺎﻡ 2 ﻭ 4 ﻟﻮ ﺗﻼﺣﻆ ﻋﺰﻳﺰﻱ ﺍﻟﻄﺎﻟﺐ ﻭﺳﻢ head ﻳﺘﻜﻮﻥ ﻣﻦ ﻓﺘﺢ ﻭﺍﻏﻼﻕ ﺍﻟﻔﺘﺢ ﻓﻲ ﺍﻟﺮﻗﻢ 2 ﻭﺍﻻﻏﻼﻕ ﻓﻲ ﺍﻟﺮﻗﻢ 4 ﻃﻴﺐ ﺳﻮﻑ ﻧﺘﻌﺮﻑ ﺍﻻﻥ ﻋﻦ ﻭﺳﻢ head ﻫﺬﺍ ﺍﻟﻮﺳﻢ ﻳﻜﻮﻥ ﻓﻴﻪ ﺍﻛﻮﺍﺩ ﺍﻟﻤﻴﺘﺎ Meta ﻭﻫﻲ user meta variable ﻭ ﺍﻟﺘﺮﻣﻴﺰ encoding ﻭ ﺍﻭﺍﻣﺮ css ﺍﻟـ style ﻭ ﻋﻨﻮﺍﻥ ﺍﻟﺼﻔﺤﺔ .title
ﺍﻻﻥ ﻧﺸﺮﺡ ﻛﻞ ﻭﺍﺣﺪ ﻣﻨﻬﻢ : meta -:
ﻓﻲ ﻭﺳﻢ head ﻫﻨﺎﻙ meta ﻳﺘﻢ ﻭﺿﻌﻬﺎ ﻭﺳﻮﻑ ﺍﺷﺮﺡ ﻟﻜﻢ ﺍﻟﺸﻲﺀ ﺍﻟﻤﻬﻢ ﻓﻴﻬﺎ ﻭﻫﻮ user meta variable ﻭﺍﻻﻫﻢ ﻓﻲ user meta variable ﻫﻮ description ﻭ keywords ﺗﺎﺑﻊ ﻣﻌﻲ
ﺑﺎﻟﻨﺴﺒﺔ ﺍﻟﻰ description ﻓﻬﻲ ﻣﺴﺆﻭﻟﺔ ﻋﻦ ﺍﻟﻮﺻﻒ ﺍﻟﺨﺎﺹ ﻓﻲ ﺍﻟﻤﻮﻗﻊ ﻣﺜﻞ ﺍﻧﺎ ﻟﺪﻱ ﺻﻔﺤﺔ ﺍﺿﻊ ﻓﻴﻬﺎ ﺩﺭﻭﺱ ﻭﻫﺬﻩ ﺍﻟﺼﻔﺤﺔ ﺍﺭﻳﺪ ﺍﻥ ﺍﻋﻄﻴﻬﺎ ﻭﺻﻒ ﻟﺬﺍﻟﻚ ﺳﻮﻑ ﺍﺳﺘﺨﺪﻡ description ﻟﻮﺿﻊ ﻭﺻﻒ ﻟﻠﺼﻔﺤﺔ ﻟﻜﻦ ﻫﺬﺍ ﺍﻟﻮﺻﻒ ﻻﻳﻈﻬﺮ ﺍﻣﺎﻡ ﺍﻟﺰﺍﺋﺮ ﺍﻭ ﻣﻦ ﻳﺘﺼﻔﺢ ﻫﺬﻩ ﺍﻟﺼﻔﺤﺔ ﻭﺍﻧﻤﺎ ﻫﺬﺍ ﺍﻟﻮﺻﻒ ﺳﻮﻑ ﻳﻜﻮﻥ ﻣﻬﻢ ﻟﻤﺤﺮﻛﺎﺕ ﺍﻟﺒﺤﺚ ﺍﻱ ﺑﻤﻌﻨﻰ ﺍﻧﻨﺎ ﻗﻤﻨﺎ ﺑﻌﻤﻞ ﻭﺻﻒ ﻟﻤﺤﺮﻛﺎﺕ ﺍﻟﺒﺤﺚ ﻟﻜﻲ ﺗﺘﻌﺮﻑ ﻋﻠﻰ ﺍﻟﺼﻔﺤﺔ ﻭﺗﻢ ﻫﺬﺍ ﺍﻟﻮﺻﻒ ﻋﻦ ﻃﺮﻳﻖ description ﻭﻃﺮﻳﻘﺔ ﻛﺘﺎﺑﺔ ﻛﻮﺩ ﺍﻟﻤﻴﺘﺎ meta description ﻳﻜﻮﻥ ﺑﻬﺬﻩ ﺍﻟﻄﺮﻳﻘﺔ
ﺭﻣﺰ :PHP
< meta name = "description" content =
ﺷﺮﺡ ﺍﻟﻜﻮﺩ meta description : ﺗﻜﻠﻤﺖ ﺳﺎﺑﻘﺂ ﻋﻦ ﺍﻟﻔﺘﺢ ﻭﺍﻻﻏﻼﻕ ﺍﻋﻠﻢ ﻋﺰﻳﺰﻱ ﺍﻟﻄﺎﻟﺐ ﺍﻧﻪ ﺍﻛﻮﺍﺩ meta ﻛﺬﺍﻟﻚ ﻓﻴﻬﺎ ﻓﺘﺢ ﻭﺍﻏﻼﻕ ﻟﻜﻦ ﺗﺨﺘﻠﻒ ﻓﻲ ﺷﻲﺀ ﻭﺍﺣﺪ ﺍﻛﻮﺩ meta ﻭﻫﻮ ﺍﻻﻏﻼﻕ ﻃﻴﺐ ﻛﻴﻒ ﺗﺨﺘﻠﻒ ﺳﻮﻑ ﺍﺷﺮﺡ ﻟﻚ ﺍﻻﺧﺘﻼﻑ ﻧﺤﻦ ﻋﻨﺪﻣﺎ ﺗﻜﻠﻤﻨﺎ ﻋﻦ ﻓﺘﺢ ﻭﺍﻏﻼﻕ ﻭﺳﻢ html ﻗﻠﻨﺎ ﻳﺘﻢ ﺑﻬﺬﻩ ﺍﻟﻄﺮﻳﻘﺔ
ﺭﻣﺰ :PHP
< html > // ﺍﻟﻔﺘﺢ
// ﺍﻻﻏﻼﻕ
ﻟﻜﻦ ﺍﻛﻮﺩ meta ﺗﺨﺘﻠﻒ ﻋﻦ html ﻓﻲ ﺍﻟﻔﺘﺢ ﻭﺍﻻﻏﻼﻕ ﻭﻳﺘﻢ ﺍﻏﻼﻗﻬﺎ ﻓﻘﻂ ﺑﻬﺬﻩ ﺍﻟﻄﺮﻳﻘﺔ
ﺭﻣﺰ :PHP
/>
ﻻ ﺍﺭﻳﺪ ﺍﻥ ﺍﻃﻴﻞ ﻋﻠﻴﻜﻢ ﺍﻟﺪﺭﺱ ﻟﻜﻦ ﺍﺣﺎﻭﻝ ﺍﻥ ﺍﺷﺮﺡ ﻟﻚ ﺑﺎﻟﺘﻔﺼﻴﻞ ﺣﺘﻰ ﺗﻔﻬﻢ ﻓﺎﺋﺪﺓ ﺍﻟﻜﻮﺩ ﻭﻃﺮﻳﻘﺔ ﻛﺘﺎﺑﺘﻪ ﻧﻜﻤﻞ ﺩﺭﺳﻨﺎ ﻫﻨﺎ ﻋﺮﻓﻨﺎ meta ﻭ ﺍﺧﺒﺮﻧﺎ html ﺍﻧﻪ ﻫﺬﺍ ﻭﺳﻢ meta ﺍﻣﺎ name ﻓﻬﻮ ﺍﺳﻢ ﺍﻭ ﻧﻮﻉ ﺳﻄﺮ meta ﻭ content ﻫﻲ ﻣﺤﺘﻮﻯ ﺍﻭ ﻣﻀﻤﻮﻥ ﻫﺬﻩ meta ﻃﻴﺐ ﺑﻤﺎ ﻧﺤﻦ ﻋﺮﻓﻨﺎ ﺍﺳﻢ meta ﺑـ description ﺍﻱ ﻳﻌﻨﻲ ﺍﻧﻪ ﻫﺬﻩ meta ﻫﻲ ﻟﻠﻮﺻﻒ ﻭﻓﻲ ﺍﻻﺧﻴﺮ ﺍﻻﻏﻼﻕ ﻭﻫﻮ ﻛﺎﻟﺘﺎﻟﻲ
ﺭﻣﺰ :PHP
/>
ﻃﻴﺐ ﻟﺪﻳﻨﺎ meta ﺍﺧﺮﻯ ﻳﻜﻮﻥ ﺍﺳﻤﻬﺎ keywords ﻭﻫﻲ ﻟﻠﻜﻠﻤﺎﺕ ﺍﻟﺪﻟﻴﻠﻴﺔ ﻭﺗﻜﺘﺐ ﺑﻬﺬﺍ ﺍﻟﺸﻜﻞ
ﺭﻣﺰ :PHP
< meta name = "keywords" content= " ﻫﻨﺎ
ﻃﺮﻳﻘﺔ ﻛﺘﺎﺑﺔ ﻫﺬﻩ meta ﻫﻲ ﻧﻔﺲ ﻃﺮﻳﻘﺔ ﻛﺘﺎﺑﺔ meta description ﻟﻜﻦ ﺍﻻﺳﻢ ﺍﻟﺨﺎﺹ ﻓﻴﻬﺎ name ﻫﻮ keywords ﺍﻱ ﻳﻌﻨﻲ ﺍﻧﻪ ﺍﺧﺒﺮﻧﺎ html ﺍﻧﻪ ﻫﺬﻩ meta ﻫﻲ ﺧﺎﺻﺔ ﻓﻲ ﺍﻟﻜﻠﻤﺎﺕ ﺍﻟﺪﻟﻴﻠﻴﺔ ﻭﻫﻨﺎﻙ ﻓﺮﻕ ﺑﻴﻦ ﺍﻟﻮﺻﻒ ﻭﺍﻟﻜﻠﻤﺎﺕ ﺍﻟﺪﻟﻴﻠﻴﺔ ﻃﻴﺐ ﺍﻻﻥ ﻧﻨﺘﻘﻞ ﺍﻟﻰ ﺷﻲﺀ ﺍﺧﺮ ﻭﻫﻮ encoding ﺗﺎﺑﻊ ﻣﻌﻲ ...
encoding ﻫﻮ ﺧﺎﺹ ﺑﺎﻟﺘﺮﻣﻴﺰ ﻭﻫﻮ ﻣﻦ ﺍﻧﻮﺍﻉ meta ﻭﻣﻬﻢ ﺟﺪﺁ ﻓﻲ ﺻﻔﺤﺎﺕ html ﻟﻨﺘﻌﺮﻑ ﺍﻛﺜﺮ ﻋﻠﻰ encoding
encoding ﻫﻮ ﺗﺮﻣﻴﺰ ﺍﻟﺼﻔﺤﺔ ﻃﻴﺐ ﻛﻴﻒ ﻳﻌﻨﻲ ﺗﺮﻣﻴﺰ ﺍﻟﺼﻔﺤﺔ ﺍﻧﺎ ﺍﻗﻮﻟﻚ ﻛﻴﻒ ﺍﻟﺼﻔﺤﺔ ﺍﻧﺖ ﻟﻤﺎ ﺗﻜﺘﺐ ﻓﻴﻬﺎ ﺍﻟﻠﻐﺔ ﺍﻟﻌﺮﺑﻴﺔ ﺗﺤﺘﺎﺝ ﺍﻟﻰ ﺗﻌﺮﻳﻒ ﺍﻭ ﺗﺮﻣﻴﺰ ﻳﺴﻤﻰ encoding ﻫﺬﺍ ﺍﻟﺘﺮﻣﻴﺰ ﻳﺘﻮﺟﺐ ﻋﻠﻴﻚ ﻭﺿﻌﻪ ﻭﺍﻟﺴﺒﺐ ﻫﻮ ﺣﺘﻰ ﻻﺗﺤﺪﺙ ﻣﺸﺎﻛﻞ ﻓﻲ ﺍﻟﻠﻐﺔ ﺍﻭ ﺍﻟﻜﺘﺎﺑﺔ ﺍﻟﺘﻲ ﺗﺤﺘﻮﻳﻬﺎ ﺍﻟﺼﻔﺤﺔ ﺑﺎﻟﻨﺴﺒﺔ ﺍﻟﻰ encoding ﺍﻟﺘﺮﻣﻴﺰ ﻫﻨﺎﻙ ﺍﻛﺜﺮ ﻣﻦ ﻧﻮﻉ ﻭﻣﻦ ﺍﻧﻮﺍﻉ ﺍﻟﺘﺮﻣﻴﺰ windows-1256 ﻭﻫﻮ ﻣﺎﻳﺴﻤﻰ arabic windows ﻭﺍﻟﺘﺮﻣﻴﺰ iso-8859-2 ﻭﻫﻮ ﻣﺎﻳﺴﻤﻰ ISO ﻭﺍﻟﺘﺮﻣﻴﺰ utf-8 ﻫﻨﺎﻙ ﺍﻧﻮﺍﻉ ﺍﺧﺮﻯ ﻣﻦ ﺍﻟﺘﺮﻣﻴﺰ ﻟﻜﻦ ﺍﻧﺖ ﻏﻴﺮ ﻣﺠﺒﺮ ﺍﻧﻚ ﺗﺘﻌﻠﻤﻬﺎ ﺍﻭ ﺗﺘﻌﺮﻑ ﻋﻠﻴﻬﺎ ﺟﻤﻴﻌﻬﺎ ﻃﻴﺐ ﻣﺎﻫﻮ ﺍﻓﻀﻞ ﺗﺮﻣﻴﺰ encoding ﻋﺰﻳﺰﻱ ﺍﻟﻄﺎﻟﺐ ﺍﻓﻀﻞ ﺗﺮﻣﻴﺰ ﻟﻠﺼﻔﺤﺎﺕ ﻫﻮ utf-8 ﺗﺮﻣﻴﺰ ﺭﺍﺋﻊ ﺟﺪﺁ ﻻﻧﻪ ﻳﻌﻤﻞ ﻣﻌﻚ ﺑﺪﻭﻥ ﺍﻱ ﻣﺸﺎﻛﻞ ﻭﺑﺎﻻﺧﺺ ﻣﻊ ﺍﻟﻠﻐﺔ ﺍﻟﻌﺮﺑﻴﺔ ﻭﻃﺮﻳﻘﺔ ﻛﺘﺎﺑﺘﻪ ﺗﻜﻮﻥ ﻛﺎﻟﺘﺎﻟﻲ :
ﺭﻣﺰ :PHP
< meta http - equiv = "content-type" c
ﺳﻮﻑ ﺍﺷﺮﺡ ﻟﻚ ﻓﻘﻂ ﺍﻟﻤﻬﻢ ﻓﻲ ﺍﻟﻜﻮﺩ ﻭﻫﻮ content ﻭ charset
ﻟﻮ ﺗﻼﺣﻆ ﻋﺰﻳﺰﻱ ﺍﻟﻄﺎﻟﺐ ﺍﻧﻪ content ﻗﻴﻤﺘﻬﺎ ﻫﻲ text/html ﻫﺬﺍ ﻳﻌﻨﻲ ﻋﺮﻓﻨﺎ ﺍﻟﺘﺮﻣﻴﺰ ﻟﺼﻔﺤﺔ html ﻭﺍﻧﺎ ﻗﻠﺖ ﻟﻜﻢ ﻣﺎﻫﻲ content ﻭﻫﻲ ﺍﻟﻤﺤﺘﻮﻯ ﺍﻭ ﺍﻟﻤﻀﻤﻮﻥ ﺍﻣﺎ charset ﻓﻬﻲ ﻧﻮﻉ ﺍﻟﺘﺮﻣﻴﺰ ﻭﻟﻮ ﺗﻼﺣﻆ ﻧﻮﻉ ﺍﻟﺘﺮﻣﻴﺰ ﺍﻟﺬﻱ ﺗﻢ ﻭﺿﻌﻪ ﻫﻮ utf-8
ﺑﺎﻟﻨﺴﺒﺔ ﺍﻟﻰ meta ﻛﺒﺪﺍﻳﺔ ﻳﻜﺘﻔﻲ ﺍﻧﻚ ﺗﻌﺮﻑ ﻓﻘﻂ description ﻭ keywords ﻭ encoding ﻟﻴﺲ ﺑﻤﻌﻨﺎ ﺍﻧﻪ ﻓﻘﻂ ﻫﺬﻩ ﺍﻧﻮﺍﻉ meta ﻫﻨﺎﻙ ﺍﻧﻮﺍﻉ ﺍﺧﺮﻯ ﺳﻮﻑ ﻧﺘﻄﺮﻕ ﻟﻬﺎ ﻓﻲ ﺩﺭﻭﺱ ﺍﺧﺮﻯ ﻟﻜﻦ ﻫﺬﻩ meta ﺍﻟﺘﻲ ﺗﻜﻠﻤﻨﺎ ﻋﻨﻬﺎ ﻫﻲ ﻛﺸﻲﺀ ﺍﺳﺎﺳﻲ ﻓﻲ ﺻﻔﺤﺎﺕ .html
ﺍﻻﻥ ﻧﻨﺘﻘﻞ ﺍﻟﻰ ﻭﺳﻢ title ﻳﻜﺘﺐ ﻭﺳﻢ title ﺑﻬﺬﺍ ﺍﻟﺸﻜﻞ
ﺭﻣﺰ :PHP
< title >
ﻭﺳﻢ title ﻳﺎﺧﺬ ﻋﻨﻮﺍﻥ ﺍﻟﺼﻔﺤﺔ ﻣﺜﻞ ﺍﻧﺎ ﻟﺪﻱ ﺻﻔﺤﺔ ﻣﺨﺘﺼﺔ ﻓﻲ ﺗﻌﻠﻢ ﺩﺭﻭﺱ html ﻭﺍﺭﻳﺪ ﺍﻥ ﺍﻋﻄﻲ ﻟﻬﺬﻩ ﺍﻟﺼﻔﺤﺔ ﺍﺳﻢ ﺳﻮﻑ ﺍﺿﻊ ﺍﻻﺳﻢ ﺍﻟﺨﺎﺹ ﻓﻲ ﺍﻟﺼﻔﺤﺔ ﺑﻴﻦ ﻭﺳﻤﻲ title ﻭﻳﺘﻢ ﺑﻬﺬ ﺍﻟﺸﻜﻞ
ﺭﻣﺰ :PHP
< title > ﺍﺳﻢ ﺍﻟﺼﻔﺤﺔ ﻳﻜﺘﺐ ﻫﻨﺎ
ﻋﺰﻳﺰﻱ ﺍﻟﻄﺎﻟﺐ ﺍﻧﺖ ﺗﻌﻠﻤﺖ ﺍﻻﻥ ﺍﻫﻢ ﺍﻻﻛﻮﺍﺩ ﺍﻟﺘﻲ ﺗﻮﺿﻊ ﻓﻲ head ﻭﻫﻲ ﻓﺘﺢ ﻭﺍﻏﻼﻕ ﻛﻮﺩ head ﻭ ﻓﻲ ﺩﺍﺧﻠﻬﻤﺎ meta ﻭﺍﻟﺘﻲ ﺗﺘﻜﻮﻥ ﻣﻦ description ﻭﻫﻮ ﻭﺻﻒ ﺍﻟﺼﻔﺤﺔ ﻭ keywords ﺍﻟﻜﻠﻤﺎﺕ ﺍﻟﺪﻟﻴﻠﻴﺔ ﻟﻠﺼﻔﺤﺔ ﻭ encoding ﺗﺮﻣﻴﺰ ﺍﻟﺼﻔﺤﺔ ﻭ title ﻫﻮ ﻟﻌﻨﻮﺍﻥ ﺍﻟﺼﻔﺤﺔ ﻫﺬﻩ ﺍﻛﻮﺍﺩ meta ﺗﻮﺿﻊ ﺟﻤﻴﻌﻬﺎ ﺩﺍﺧﻞ ﻭﺳﻮﻡ head ﻭﻫﻲ ﻻﺗﻈﻬﺮ ﻟﻠﺰﺍﺋﺮ ﺍﻟﺬﻱ ﻳﺘﺼﻔﺢ ﺍﻟﺼﻔﺤﺔ ﻭﺍﻧﻤﺎ ﻫﻲ ﻓﻘﻂ ﺗﻌﺮﻳﻒ ﻟﻠﺼﻔﺤﺔ ﻭﻟﻠﻤﺘﺼﻔﺢ ﻭﻟﻤﺤﺮﻛﺎﺕ ﺍﻟﺒﺤﺚ ﻭﺍﻟﺬﻱ ﻳﻈﻬﺮ ﻓﻲ ﺍﻟﺼﻔﺤﺔ ﻓﻘﻂ ﻫﻮ title ﻭﻫﻮ ﺍﻟﺨﺎﺹ ﺑﻌﻨﻮﺍﻥ ﺍﻟﺼﻔﺤﺔ ﺍﻣﺎ ﺍﻟﺘﺮﻣﻴﺰ ﻭﺍﻟﻮﺻﻒ ﻭﺍﻟﻜﻠﻤﺎﺕ ﺍﻟﺪﻟﻴﻠﻴﺔ ﻻﺗﻈﻬﺮ ﻋﻠﻰ ﺍﻟﺼﻔﺤﺔ ﺑﻘﻰ ﺷﻲﺀ ﺍﺧﺮ ﻳﻮﺿﻊ ﺩﺍﺧﻞ ﻭﺳﻮﻡ head ﻭﻫﻮ style ﻫﺬﺍ ﺳﻮﻑ ﻧﺘﻌﺮﻑ ﻋﻠﻴﻪ ﻓﻲ ﺩﻭﺭﺓ css ﺍﻥ ﺷﺎﺀ ﺍﻟﻠﻪ .
ﻭﻓﻲ ﺍﻻﺧﻴﺮ ﻛﻮﺩ head ﻟﺪﻳﻨﺎ ﺍﻻﻥ ﻛﺎﻟﺘﺎﻟﻲ :
ﺭﻣﺰ :PHP
< head >
< meta http - equiv = "content-type" c
< meta name = "description" content =
< meta name = "keywords" content= " ﻟﻠﺼﻔ
< title < ﻋﻨﻮﺍﻥ ﺍﻟﺼﻔﺤﺔ
ﺍﻻﻥ ﺳﻮﻑ ﻧﻨﺘﻘﻞ ﺍﻟﻰ ﻭﺳﻤﻲ body ﺗﺎﺑﻊ ﺍﻟﻜﻮﺩ ﺍﻟﺘﺎﻟﻲ :
ﺭﻣﺰ :PHP
< body > < body/>
ﻭﺳﻮﻡ body ﻳﻜﻮﻥ ﺑﻴﻨﻬﻤﺎ ﻣﺤﺘﻮﻯ ﺍﻟﺼﻔﺤﺔ ﻃﻴﺐ ﻣﺎﻫﻮ ﻣﺤﺘﻮﻯ ﺍﻟﺼﻔﺤﺔ ؟؟ ﻣﺤﺘﻮﻯ ﺍﻟﺼﻔﺤﺔ ﻋﺰﻳﺰﻱ ﺍﻟﻄﺎﻟﺐ ﻫﻮ ﻣﺎ ﺗﺸﺎﻫﺪﻩ ﻋﻨﺪﻣﺎ ﺗﺪﺧﻞ ﺍﻟﻰ ﺍﻟﺼﻔﺤﺔ ﻭﻫﻮ ﺍﻟﻬﻴﺪﺭ header ﻭ ﺍﻟﻘﻮﺍﺋﻢ ﺍﻟﺠﺎﻧﺒﻴﺔ ﻗﺎﺋﻤﺔ ﻭﺍﻟﻮﺳﻂ ﻭﻫﺬﺍ ﻳﻌﻮﺩ ﺣﺴﺐ ﺗﻮﺯﻳﻌﻚ ﻟﻠﺘﺼﻤﻴﻢ ﺑﺎﻻﺿﺎﻓﺔ ﺍﻟﻰ ﺍﻟﻔﻮﺗﺮ footer ﻭﻫﻮ ﺫﻳﻞ ﺍﻟﺼﻔﺤﺔ ﺍﻟﺬﻱ ﻏﺎﻟﺒﺂ ﻳﻜﻮﻥ ﻓﻴﻪ ﺣﻘﻮﻕ ﺍﻟﻤﻮﻗﻊ ﺍﻻﺿﺎﻓﺔ ﺍﻟﻰ ﺫﺍﻟﻚ ﻋﺰﻳﺰﻱ ﺍﻟﻄﺎﻟﺐ ﺍﻧﺖ ﺗﺴﺘﻄﻴﻊ ﺍﻥ ﺗﻀﻊ ﺣﺘﻰ ﻭﻟﻮ ﻛﻠﻤﺔ ﻭﺍﺣﺪ ﺗﺤﺖ body ﻭﺗﻌﻄﻴﻬﺎ ﺗﻨﺴﻴﻖ ﻣﺜﻞ ﺍﻟﻮﻥ ﻭﺣﺠﻢ ﺍﻟﺨﻂ ﻭﺍﺗﺠﺎﻩ ﺍﻟﻨﺺ ﻭﻏﻴﺮ ﺫﺍﻟﻚ ﺍﻧﺖ ﻟﺴﺖ ﻣﺠﺒﺮ ﺍﻥ ﺗﻀﻊ ﻓﻘﻂ ﺍﻟﺠﺪﺍﻭﻝ ﻭﻏﻴﺮﻫﻢ ﻓﻲ body ﻭﺍﻥ ﺷﺎﺀ ﺍﻟﻠﻪ ﻫﺬﺍ ﺳﻮﻑ ﻳﻜﻮﻥ ﻓﻲ ﺍﻟﺪﺭﻭﺱ ﺍﻟﻘﺎﺩﻣﺔ ﺑﺄﺫﻥ ﺍﻟﻠﻪ ﻭﺍﻥ ﺷﺎﺀ ﺍﻟﻠﻪ ﺳﻮﻑ ﺗﻜﻮﻥ ﻣﺤﺘﺮﻑ ﻓﻲ html ﻃﻴﺐ ﺑﻘﻰ ﻟﺪﻳﻨﺎ ﺷﻲﺀ ﺍﺧﻴﺮ ﺣﺘﻰ ﻧﻨﺘﻬﻲ ﻣﻦ ﺍﻟﺪﺭﺱ ﺍﻻﻭﻝ ﻭﻫﻮ ﺍﻣﺘﺪﺍﺩ ﺍﻟﻤﻠﻔﺎﺕ ﻋﺰﻳﺰﻱ ﺍﻟﻄﺎﻟﺐ ﻋﻨﺪﻣﺎ ﺗﺮﻳﺪ ﺍﻥ ﺗﺤﻔﻆ ﻣﻠﻒ ﻣﻦ ﻧﻮﻉ html ﻳﺘﻮﺟﺐ ﻋﻠﻴﻚ ﺍﻥ ﺗﻀﻌﻪ ﺍﻻﻣﺘﺪﺍﺩ ﺍﻟﺨﺎﺹ ﻓﻴﻪ ﺍﻣﺎ html ﺍﻭ htm ﻫﺬﻩ ﻫﻲ ﺍﻻﻣﺘﺪﺍﺩﺍﺕ ﺍﻟﺨﺎﺻﺔ ﻓﻲ ﻣﻠﻔﺎﺕ html ﻭﻫﺬﺍ ﺷﺮﻁ ﻳﺘﻮﺟﺐ ﻋﻠﻴﻚ ﺍﻥ ﺗﻌﻤﻠﻪ ﻭﻫﻮ ﻋﻨﺪﻣﺎ ﺗﻘﻮﻡ ﺑﻌﻤﻞ ﺻﻔﺤﺔ ﻣﻦ ﻧﻮﻉ html ﻳﺠﺐ ﺍﻥ ﻳﻜﻮﻥ ﺍﻻﻣﺘﺪﺍﺩ ﺍﻟﺨﺎﺹ ﻓﻴﻬﺎ ﺍﻣﺎ html ﺍﻭ htm ﺍﻟﻰ ﻫﻨﺎ ﻳﻨﺘﻬﻲ ﺩﺭﺳﻨﺎ ﺍﻻﻭﻝ ﻣﻦ ﺳﻠﺴﻠﺔ ﺩﺭﻭﺱ ﺗﻌﻠﻢ html ﻭﺍﺳﻒ ﻋﻠﻰ ﺍﻻﻃﺎﻟﺔ ﻟﻜﻦ ﺍﻧﺎ ﺍﺭﻳﺪ ﺍﻧﺎ ﺍﻋﻠﻤﻜﻢ ﻛﻞ ﺻﻐﻴﺮﺓ ﻭﻛﺒﻴﺮﺓ ﻭﺑﺎﻟﺘﻔﺼﻴﻞ ﻭﺍﻥ ﺷﺎﺀ ﺍﻟﻠﻪ ﻳﻜﻮﻥ ﺍﻟﺸﺮﺡ ﺳﻬﻞ ﻭﺳﻠﺲ ﻭﺣﺘﻰ ﺗﻔﻬﻢ ﺍﻛﺜﺮ ﺭﺍﺟﻊ ﺍﻟﺪﺭﺱ ﺍﻛﺜﺮ ﻣﻦ ﻣﺮﺓ ﻭﻃﺒﻖ ﻣﻊ ﻛﻞ ﺩﺭﺱ ﻭﺣﺎﻭﻝ ﺍﻥ ﺗﺒﺘﻌﺪ ﻋﻦ ﻧﺴﺦ ﺍﻻﻛﻮﺍﺩ ﻭﺍﻋﺘﻤﺪ ﻋﻠﻰ ﻧﻔﺴﻚ ﺣﺘﻰ ﺗﺘﻌﻠﻢ ﺑﺸﻜﻞ ﺍﻟﺼﺤﻴﺢ ﻭﻓﻲ ﺍﻻﺧﻴﺮ ﺳﻮﻑ ﺍﻋﻄﻴﻜﻢ ﻛﻮﺩ ﺻﻔﺤﺔ html ﺑﺎﻟﻜﺎﻣﻞ ﻟﻠﻤﺮﺍﺟﻌﻪ
ﺗﺎﺑﻊ ﺍﻟﻜﻮﺩ ﺍﻟﺘﺎﻟﻲ :
ﺭﻣﺰ :PHP
< html >
< head >
< meta http - equiv = "content-type" c
< meta name = "description" content =
< meta name = "keywords" content= " ﻟﻠﺼﻔ
< title < ﻣﺪﺭﺳﺔ ﺍﻟﻤﺴﺘﻘﺒﻞ ﺍﻟﺘﻌﻠﻴﻤﻴﺔ

< body >
ﺑﺴﻢ ﺍﻟﻠﻪ ﺍﻟﺮﺣﻤﻦ ﺍﻟﺮﺣﻴﻢ
ﻣﺪﺭﺳﺔ ﺍﻟﻤﺴﺘﻘﺒﻞ ﺍﻟﺘﻌﻠﻴﻤﻴﺔ
ﺍﻟﻰ ﻫﻨﺎ ﻳﻨﺘﻬﻲ ﻫﺬﺍ ﺍﻟﺪﺭﺱ ﺍﻥ ﺷﺎﺀ ﺍﻟﻠﻪ ﻳﻜﻮﻥ ﺳﻬﻞ ﻋﻠﻴﻜﻢ ﻭﻫﺬﺍ ﺍﻟﺪﺭﺱ ﻣﺎﻫﻮ ﺍﻟﻰ ﺑﺪﺍﻳﺔ ﺍﻟﺪﺧﻮﻝ ﺍﻟﻰ html ﺍﻧﺘﻈﺮﻭﻧﺎ ﻓﻲ ﺍﻟﺪﺭﺱ ﺍﻟﻘﺎﺩﻡ ﺍﻥ ﺷﺎﺀ ﺍﻟﻠﻪ