‫ﺑﺴﻢ اﷲ اﻟﺮﺣﻤﻦ اﻟﺮﺣﯿﻢ‬

‫ﻣﻮﺳﻮﻋﺔ ﺗﺼﻤﯿﻢ و ﺑﺮﻣﺠﺔ ﻣﻮاﻗﻊ‬

‫اﻻﻧﺘﺮﻧﺖ‬
‫ﻃﺮﯾﻘﻚ ﻧﺤﻮ اﻟﺘﻤﯿﺰ‬

‫اﻟﺠﺰء اﻻول‪HTML:‬‬

‫اﻋﺪاد و ﺗﺄﻟﯿﻒ‪ :‬ودﯾﻊ اﺳﻌﺪ ودﯾﻊ ﺣﺠﺎوي‬

‫اﻻردن‪-‬ﻋﻤﺎن‬
 ‫ﻧﺒﺬة ﻋﻦ اﻟﻜﺎﺗﺐ ‪:‬‬
‫‪−‬ﻃﺎﻟﺐ ﺳﻨﺔ راﺑﻌﺔ ﻓﻲ ﺟﺎﻣﻌﺔ اﻻﺳﺮاء اﻟﺨﺎﺻﺔ ﺗﺨﺼﺺ ﻋﻠﻢ‬
‫ﺣﺎﺳﻮب‬
‫‪−‬ﻣﺸﺮف ﻗﺴﻢ اﻟﺒﺮاﻣﺞ اﻟﻤﻨﻮﻋﺔ ﻓﻲ ﻣﻨﺘﺪﯾﺎت ﻣﻤﻠﻜﺔ ﻧﺠﻮم اﻟﻌﺮب‬
‫‪−‬ﻣﺸﺮف ﺳﺎﺣﺔ اﻟﺒﺮﻣﺠﺔ ﻓﻲ ﻣﻨﺘﺪﯾﺎت اﻟﻜﻨﻎ ‪.‬‬
‫‪−‬ﻻي ﺳﺆال او اﺳﺘﻔﺴﺎر ﯾﺮﺟﻰ اﻻﺗﺼﺎل ﺑﺎﻟﻜﺎﺗﺐ ﻋﻦ ﻃﺮﯾﻖ اﻻﻣﯿﻞ‬
‫اﻟﺘﺎﻟﻲ ‪:‬‬
‫‪software_en2002@yahoo.com‬‬
 ‫ﻣﻘﺪﻣﺔ ‪:‬‬
‫ان ﺗﻌﻠﻢ ﺗﺼﻤﯿﻢ و ﺑﺮﻣﺠﺔ اﻟﻤﻮاﻗﻊ ﻟﯿﺲ ﺑﺎﻻﻣﺮ اﻟﺼﻌﺐ و اﻧﻤﺎ ﯾﺤﺘﺎج ﻓﻘﻂ ﻟﺒﻌﺾ‬
‫اﻟﺠﮭﺪ و اﻟﻤﺜﺎﺑﺮة ‪ ،‬وﻟﺬﻟﻚ اﻧﺼﺤﻚ ﻋﺰﯾﺰي اﻟﻘﺎرئ ان ﺗﻘﻮم ﺑﺘﻨﻔﯿﺬ اﻻﻣﺜﻠﺔ اﻟﻤﻮﺟﻮدة ﻓﻲ‬
‫ھﺬا اﻟﻜﺘﺎب ﺑﺸﻜﻞ ﻋﻤﻠﻲ ﻟﻜﻲ ﺗﺘﻌﻠﻢ ﻣﻦ اﻻﺧﻄﺎء و ﻟﻜﻲ ﺗﺮى ﺑﻨﻔﺴﻚ ﻣﺪى ﺳﮭﻮﻟﺔ اﻻﻣﺮ ‪.‬‬

‫ﺑﺪاﯾﺔ اﺳﺘﻄﯿﻊ اﻟﻘﻮل ان اﻻﺳﻠﻮب اﻟﻤﻨﺎﺳﺐ ﻓﻲ ﺷﺮح ﻣﺜﻞ ھﺬه اﻟﻤﻮاﺿﯿﻊ ھﻮاﻟﺘﺮﻛﯿﺰ‬
‫ﻋﻠﻰ اﻟﺠﺎﻧﺐ اﻟﻌﻤﻠﻲ وﺿﺮب اﻻﻣﺜﻠﺔ وھﺬا ھﻮ اﻻﺳﻠﻮب اﻟﺬي ﺳﺎﺣﺎول ان اﺗﺒﻌﮫ ﻓﻲ‬
‫اﻟﺸﺮح‪.‬‬

‫ﻗﺪ ﯾﺘﺴﺎل اﻟﺒﻌﺾ ﻟﻤﺎذا ﻗﻠﺖ ﺗﺼﻤﯿﻢ و ﺑﺮﻣﺠﺔ ‪ ،‬ﻓﻲ اﻟﻮاﻗﻊ ان اﻟﻌﻤﻞ ﻋﻠﻰ اﻧﺸﺎء‬
‫ﻣﻮﻗﻊ ﻋﻠﻰ اﻻﻧﺘﺮﻧﺖ ﯾﻤﻜﻦ ﺗﻘﺴﯿﻤﮫ ﻋﻠﻰ ﻣﺮﺣﻠﺘﯿﻦ ‪ :‬اﻻوﻟﻰ و ھﻲ اﻟﺘﺼﻤﯿﻢ و ﺗﻜﻮن‬
‫ﺑﺘﺼﻤﯿﻢ اﻟﺠﺪاول واﻟﻔﻘﺮات و ادراج اﻟﺼﻮر و‪...‬اﻟﺦ وھﺬا اﻟﺠﺰء ﯾﻤﻜﻦ ﺗﻄﺒﯿﻘﮫ ﺑﺎﺳﺘﺨﺪام‬
‫‪ HTML‬اﻣﺎ اﻟﻤﺮﺣﻠﺔ اﻟﺜﺎﻧﯿﺔ ﻓﮭﻲ اﻟﺒﺮﻣﺠﺔ و ﺗﻜﻮن ﺑﻌﻤﻞ اﻟﺤﺮﻛﺎت و )‪(dynamic‬‬
‫ﻋﻠﻰ اﻟﻤﻮﻗﻊ ﺑﺘﺤﺮك اﻟﺼﻮر وﺗﻐﯿﺮ اﻻﻟﻮان و اﻟﺘﺎﻛﺪ ﻣﻦ ﺻﺤﺔ اﻟﻤﻌﻠﻮﻣﺎت اﻟﻤﺒﻌﻮﺛﺔ ﻣﻦ‬
‫ﻧﻤﻮذج ﻣﻌﯿﻦ و‪...‬اﻟﺦ وﯾﻤﻜﻦ ﺗﻄﺒﯿﻖ ھﺬا اﻟﺠﺰء ﺑﻜﺜﯿﺮ ﻣﻦ ﻟﻐﺎت اﻟﺒﺮﻣﺠﺔ ﻟﻜﻦ ﻟﻌﻞ اﺷﮭﺮھﺎ‬
‫ھﻲ ‪Java script‬‬
‫و ‪. VB script‬‬

‫ﻗﺪ ﯾﻜﻮن ﻟﺪﯾﻚ اﻻن ﺑﻌﺾ ﻣﻦ اﻻﻣﻮر اﻟﻐﺎﻣﻀﺔ ﻟﻜﻦ ﺑﺎذن اﷲ ﺗﻌﺎﻟﻰ ﺳﻮف ﯾﺘﻀﺢ‬
‫ﻛﻞ ﺷﺊ ﻣﻊ اﻟﺸﺮح‬

‫اذا ﻓﺎﻟﻨﺒﺪأ ﻋﻠﻰ ﺑﺮﻛﺔ اﷲ ‪...‬وﻟﻨﺒﺪأ ﺑﻠﻐﺔ اﻟـ ‪HTML‬‬

 ‫ﺧﻄﻮط اﺳﺎﺳﯿﺔ ‪:‬‬
‫§ ھﻨﺎ ﺳﻮف ﻧﻘﻮم ﺑﺸﺮح ‪ HTML‬وﺳﻮف ﻧﺘﻄﺮق ﺧﻼل اﻟﺸﺮح اﻟﻰ‬
‫‪ XHTML,DHTML‬وﺳﻮف ﻧﺤﺎول ان ﻧﺒﯿﻦ اﻟﻔﺮوق اﻻﺳﺎﺳﯿﺔ‬
‫ﺑﯿﻨﮭﺎ‬
‫§ ﺗﻘﺴﻢ ﺷﺎﺷﺔ اﻻﻧﺘﺮﻧﺖ اﻛﺴﺒﻠﻮرر اﻟﻰ اﻻﺟﺰاء اﻟﺮﺋﯿﺴﯿﺔ اﻟﺘﺎﻟﯿﺔ ‪:‬‬
‫‪ .1‬اﻟﺮأس )‪(Head‬‬
‫‪ .2‬اﻟﺠﺴﻢ )‪(Body‬‬
‫‪ .3‬ﺷﺮﯾﻂ اﻟﺤﺎﻟﺔ )‪(status‬‬
‫ﻛﻤﺎ ھﻮ ﻣﺒﯿﻦ ﻓﻲ اﻟﺼﻮرة ‪:‬‬

‫و ﯾﺤﺘﻮي اﻟﺮأس)‪ (Head‬ﻋﻠﻰ ﻋﻨﻮان )‪ (Title‬وھﻮ اﻟﻤﻮﺿﺢ ﻓﻲ اﻟﺼﻮرة اﻟﺘﺎﻟﯿﺔ ‪:‬‬

‫و ﻓﻲ اﻟـ ‪ HTML‬ﺳﻮف ﻧﺴﺘﺨﺪم ﻓﻘﻂ ﺟﺰﺋﻲ اﻟﺮأس و اﻟﺠﺴﻢ‬

 ‫§ ﯾﻤﻜﻦ ﺗﻘﺴﯿﻢ ﻟﻐﺔ ‪ HTML‬اﻟﻰ اﻻﺟﺰاء اﻟﺮﺋﯿﺴﯿﺔ اﻟﺘﺎﻟﯿﺔ ‪:‬‬
‫‪ Tags.1‬وھﻲ ﺗﻘﺴﻢ ﺑﺪورھﺎ اﻟﻰ ‪:‬‬
‫‪Main Tags o‬‬
‫‪Tags o‬‬
‫‪Attribute .2‬‬
‫‪Special characters .3‬‬

‫ﺗﻮﺿﯿﺢ‪:‬‬
‫‪Tags. 1‬‬
‫اوﺳﻤﺔ ﻟﻠﻘﯿﺎم ﺑﻮﻇﺎﺋﻒ ﻣﻌﯿﻨﺔ ﻣﺜﻞ ﺗﻮﺳﯿﻂ اﻟﻜﻼم ‪ ،‬ﺟﻌﻞ اﻟﺨﻂ ﻣﺎﺋﻼ‪ ،‬ﺟﻌﻞ اﻟﺨﻂ ﻏﺎﻣﻘﺎ‪...،‬اﻟﺦ‬
‫وھﻮ ﯾﻘﺴﻢ اﻟﻰ ﻧﻮﻋﯿﻦ ‪:‬‬
‫§ ‪ :Main Tags‬وﯾﻜﺘﺐ ﺣﺴﺐ اﻟﺼﯿﻐﺔ اﻟﺘﺎﻟﯿﺔ‪:‬‬
‫> اﺳﻢ اﻟﻮﺳﻢ < أو >‪ /‬اﺳﻢ اﻟﻮﺳﻢ < ﻣﺜﻼ >‪<hr‬او >‪ <hr /‬وذﻟﻚ ﻟﻌﻤﻞ ﺧﻂ اﻓﻘﻲ‬

‫§ ‪ :Tags‬وﯾﻜﺘﺐ ﺣﺴﺐ اﻟﺼﯿﻐﺔ اﻟﺘﺎﻟﯿﺔ ‪:‬‬

‫> اﺳﻢ اﻟﻮﺳﻢ‪>~~~~~~~~~~~~~~</‬اﺳﻢ اﻟﻮﺳﻢ<‬
‫ﻣﺜﻼ‪:‬‬
‫>‪</center‬أﺣﻤﺪ >‪<center‬‬
‫وذﻟﻚ ﻟﺘﻮﺳﯿﻂ ﻛﻠﻤﺔ "أﺣﻤﺪ")ﺟﻌﻠﮭﺎ ﻓﻲ اﻟﻤﻨﺘﺼﻒ (‬
‫>‪ <center‬ﯾﺴﻤﻰ ھﺬا اﻟﺠﺰء ‪Tag‬‬
‫>‪ </center‬ﯾﺴﻤﻰ ھﺬا اﻟﺠﺰء ‪Anti Tag‬‬
‫)ﻻﺣﻆ ان اﻟﻔﺮق ﺑﯿﻦ اﻟﻨﻮﻋﯿﻦ ھﻮ ان اﻟﻨﻮع اﻻول ﻻ ﯾﺤﺘﻮي ﻋﻠﻰ ‪(Anti Tag‬‬
‫وﺳﻮف ﯾﺘﻀﺢ اﻛﺜﺮ ﻣﻔﮭﻮم اﻻوﺳﻤﺔ وﻋﻤﻠﮭﺎ وﻧﻮﻋﯿﮭﺎ ﻣﻦ ﺧﻼل اﻻﻣﺜﻠﺔ‪.‬‬
‫‪Attribute .2‬‬
‫ﻻﺿﺎﻓﺔ ﺧﺼﺎﺋﺺ ﻟﻼوﺳﻤﺔ ﻣﺜﻼ ﻟﻠﺘﺤﻜﻢ ﺑﻠﻮن اﻟﺨﻂ ﻧﺴﺘﺨﺪم اﻟـ ‪ Attribute‬اﻟﺘﺎﻟﻲ ‪:‬‬
‫>‪<font color = red > Text </font‬‬
‫‪Special Character .3‬‬
‫و ذﻟﻚ ﻟﻄﺒﺎﻋﺔ ﺣﺮوف ﺧﺎﺻﺔ ﻣﺜﻼ ﻟﻄﺒﺎﻋﺔ اﺷﺎرة اﻛﺒﺮ > ﻧﺴﺘﺨﺪم ‪ Special Character‬اﻟﺘﺎﻟﻲ‪:‬‬
‫;‪) &gt‬ﻻﺣﻆ اﻟﺒﺪاﯾﺔ ﺑـ & واﻟﻨﮭﺎﯾﺔ ﺑـ ; (‬
‫أو ﻣﺒﺎﺷﺮة‬
‫>‬
 ‫ﻟﻜﺘﺎﺑﺔ اﻟﻜﻮد ‪:‬‬
‫ﻟﻜﺘﺎﺑﺔ ﻛﻮد ﺑﻠﻐﺔ اﻟﮭﺘﻤﻞ ﺗﺤﺘﺎج ﻓﻘﻂ ﻟﻠﺒﺮاﻣﺞ اﻟﺘﺎﻟﯿﺔ ‪:‬‬
‫‪ .1‬اﻧﺘﺮﻧﺖ اﻛﺴﺒﻠﻮرر ) وﺳﻮف ﻧﺴﺘﺨﺪم ھﻨﺎ ‪(Microsoft internet explorer‬‬
‫و اﻟﺬي ﯾﻨﺰل ﺗﻠﻘﺎﺋﯿﺎ ﻋﻨﺪ ﺗﻨﺰﯾﻞ اﻟﻮﯾﻨﺪوز‬
‫‪ .2‬اي ﺑﺮﻧﺎﻣﺞ ﻟﺘﺤﺮﯾﺮ اﻟﻨﺼﻮص وﻟﺬﻟﻚ ﯾﻤﻜﻨﻚ اﺳﺘﺨﺪام ‪ Notepad‬اﯾﻀﺎ اﻟﺬي ﯾﻨﺰل‬
‫ﺗﻠﻘﺎﺋﯿﺎ ﻋﻨﺪ ﺗﻨﺰﯾﻞ اﻟﻮﯾﻨﺪوز وھﻨﺎك ﺑﺮاﻣﺞ اﺧﺮى ﻣﺜﻞ‬
‫‪ Text pad‬واﻟﺬي ﯾﻤﺘﺎز ﻋﻦ اﻟـ ‪ Notepad‬ﺑﻜﻮﻧﮫ ﯾﻌﻤﻞ ﻋﻠﻰ ﺗﻠﻮﯾﻦ اﻟﻌﻨﺎﺻﺮ‬
‫اﻻﺳﺎﺳﯿﺔ ﻟﻠﻐﺔ اﻟﮭﺘﻤﻞ و ﺑﺎﻟﺘﺎﻟﻲ اﻛﺘﺸﺎف اﻻﺧﻄﺎء اﻻﻣﻼﺋﯿﺔ ﺣﺎل ﺣﺪوﺛﮭﺎ و ﯾﻤﻜﻦ ﺗﻨﺰﯾﻞ‬
‫اﻟﺒﺮﻧﺎﻣﺞ ﻣﻦ اﻟﻤﻮﻗﻊ اﻟﺘﺎﻟﻲ‪:‬‬
‫‪www.textpad.com‬‬
‫و اﯾﻀﺎ ﯾﻤﻜﻨﻚ اﺳﺘﺨﺪام ﺑﺮﻧﺎﻣﺞ اﻟﻔﺮوﻧﺖ ﺑﯿﺞ اﻟﻤﺸﮭﻮر ﻟﻜﺘﺎﺑﺔ اﻟﻜﻮد واﻟﺘﻌﺪﯾﻞ ﻋﻠﻰ‬
‫اﻟﺘﺼﻤﯿﻢ‬

‫وﻛﻤﺎ ﺗﻼﺣﻆ ‪...‬‬

‫اذا اﺧﺘﺮت اﺳﺘﺨﺪام ‪ Microsoft internet explorer‬و ﺑﺮﻧﺎﻣﺞ اﻟـ‪ Notepad‬و‬
‫ﻟﺪﯾﻚ وﯾﻨﺪوز ﻓﺎﻧﻚ ﻟﺴﺖ ﺑﺤﺎﺟﺔ ﻟﺘﻨﺰﯾﻞ اي ﺑﺮﻧﺎﻣﺞ ‪.‬‬

‫و اﻻن ﻋﺰﯾﺰي اﻟﻘﺎرئ اﻧﺖ ﻗﺎدر ﻋﻠﻰ اﻟﺒﺪء ﺑﻜﺘﺎﺑﺔ اول ﻛﻮد ﻟﻨﺎ ﺑﮭﺬا اﻟﻠﻐﺔ اﻟﺴﮭﻠﺔ ‪...‬‬
 ‫ﻣﺜﺎل ‪: 1‬‬

‫ﻟﻜﺘﺎﺑﺔ اﻟﻜﻮد اﻟﻼزم ﻟﻌﻤﻞ ھﺬه اﻟﺼﻔﺤﺔ ‪:‬‬

‫اوﻻ‪ :‬اﻓﺘﺢ ﺑﺮﻧﺎﻣﺞ ﺗﺤﺮﯾﺮ اﻟﻨﺼﻮص) و ﻟﯿﻜﻦ ‪(Notepad‬‬
‫ﺛﺎﻧﯿﺎ ‪ :‬ﻣﻦ ﻗﺎﺋﻤﺔ ﻣﻠﻒ )‪ (File‬اﺧﺘﺮ ﺣﻔﻆ ﺑﺎﺳﻢ )‪ (save as‬او ﺣﻔﻆ )‪ (save‬و ﻓﻲ‬
‫ﺻﻨﺪوق اﻟﺤﻮار اﻛﺘﺐ اﻻﺳﻢ اﻟﺬي ﺗﺮﯾﺪ ان ﺗﺠﻌﻠﮫ ﻟﻠﺼﻔﺤﺔ و ﺗﺎﻛﺪ ﻣﻦ وﺿﻊ اﻻﻣﺘﺪاد‬
‫‪ .html‬او ‪ .htm‬ﻣﺜﻼ‬
‫‪Index.html‬‬
 ‫ﺛﺎﻟﺜﺎ ‪ :‬اﻛﺘﺐ اﻟﻜﻮد اﻟﺘﺎﻟﻲ ‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<title‬‬
‫ﺻﻔﺤﺘﻲ اﻷوﻟﻰ‬
‫>‪</title‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<center‬‬
‫أھﻼ وﺳﮭﻼ ﺑﻜﻢ‬
‫>‪<br‬‬
‫ﻓﻲ ﻣﻮﻗﻌﻲ‬
‫>‪</center‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫ﺷﺮح اﻟﻜﻮد ‪-:‬‬

‫>‪<html>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ </html‬‬
‫ﻣﺎ ﺑﯿﻦ >‪ <html‬وﺑﯿﻦ اﻟـ >‪ </html‬ﯾﻤﺜﻞ ﻛﻮد ‪HTML‬‬
‫ﻻﺣﻆ اﻧﮭﺎ ﻣﻦ اﻟﻨﻮع اﻟﺜﺎﻧﻲ ﻣﻦ اﻻوﺳﻤﺔ ﻓﮭﻲ ﺗﺤﺘﻮي ﻋﻠﻰ ‪ tag‬وﻋﻠﻰ ‪anti tag‬‬

‫>‪<head>~~~~~~~~~~~~~~~~~~~~~~</head‬‬
‫ﻣﺎ ﺑﯿﻦ >‪ <head‬و ﺑﯿﻦ اﻟـ >‪ </head‬ﯾﻤﺜﻞ ﻣﺎ ﺳﯿﻜﻮن ﻓﻲ ﺟﺰء اﻟﺮاس )‪(head‬‬
‫ﻻﺣﻆ اﻧﮭﺎ ﻣﻦ اﻟﻨﻮع اﻟﺜﺎﻧﻲ ﻣﻦ اﻻوﺳﻤﺔ ﻓﮭﻲ ﺗﺤﺘﻮي ﻋﻠﻰ ‪ tag‬وﻋﻠﻰ ‪anti tag‬‬

‫>‪<title>~~~~~~~~~~~~~~~~~~~~~~~~~~ </title‬‬
‫ﻣﺎ ﺑﯿﻦ >‪ <title‬و ﺑﯿﻦ اﻟـ >‪ </title‬ﯾﻤﺜﻞ اﻟﻌﻨﻮان و اﻟﺬي ﺳﻮف ﯾﻜﻮن ﻓﻲ اﻟﺮاس وﻓﻲ ﻣﺜﺎﻟﻨﺎ ﺳﻮف ﻧﻄﺒﻊ" ﺻﻔﺤﺘﻲ‬
‫اﻻوﻟﻰ"‬
‫ﻻﺣﻆ اﻧﮭﺎ ﻣﻦ اﻟﻨﻮع اﻟﺜﺎﻧﻲ ﻣﻦ اﻻوﺳﻤﺔ ﻓﮭﻲ ﺗﺤﺘﻮي ﻋﻠﻰ ‪ tag‬وﻋﻠﻰ ‪anti tag‬‬

‫>‪<body>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~</body‬‬
‫ﻣﺎ ﺑﯿﻦ >‪ <body‬و ﺑﯿﻦ اﻟـ >‪ </body‬ﯾﻤﺜﻞ ﻣﺎ ھﻮ ﻣﻮﺟﻮد ﻓﻲ ﺟﺰء اﻟﺠﺴﻢ )‪(body‬‬
‫ﻻﺣﻆ اﻧﮭﺎ ﻣﻦ اﻟﻨﻮع اﻟﺜﺎﻧﻲ ﻣﻦ اﻻوﺳﻤﺔ ﻓﮭﻲ ﺗﺤﺘﻮي ﻋﻠﻰ ‪ tag‬وﻋﻠﻰ ‪anti tag‬‬
 ‫>‪<center>~~~~~~~~~~~~~~~~~~~~~~~~~~</center‬‬
‫ﻣﺎ ﺑﯿﻦ >‪ <center‬وﺑﯿﻦ >‪ </center‬ﯾﺘﻢ ﻟﮫ ﻋﻤﻠﯿﺔ ﺗﻮﺳﯿﻂ‬
‫وھﻨﺎ ﻻﺣﻆ ان اﻟﻌﺒﺎرﺗﯿﻦ" أھﻼ وﺳﮭﻼ ﺑﻜﻢ " و ﻋﺒﺎرة" ﻓﻲ ﻣﻮﻗﻌﻲ" ﺗﻢ ﻃﺒﺎﻋﺘﮭﻦ ﻓﻲ ﻣﻨﺘﺼﻒ اﻟﺼﻔﺤﺔ‬
‫وﻻﺣﻆ اﻧﮭﺎ ﻣﻦ اﻟﻨﻮع اﻟﺜﺎﻧﻲ ﻣﻦ اﻻوﺳﻤﺔ ﻓﮭﻲ ﺗﺤﺘﻮي ﻋﻠﻰ ‪ tag‬وﻋﻠﻰ ‪anti tag‬‬

‫>‪<br‬‬
‫او‬
‫>‪<br /‬‬
‫وذﻟﻚ ﻟﻠﻨﺰول اﻟﻰ اﻟﺴﻄﺮ اﻟﺘﺎﻟﻲ ) اي ﺗﻌﻤﻞ ﻋﻤﻞ اﻟـ ‪(Enter‬‬
‫وﻻﺣﻆ اﻧﮭﺎ ﻻ ﺗﺤﺘﻮي ﻋﻠﻰ ‪anti tag‬‬
‫وﻟﺬﻟﻚ ﻓﺎن ھﺬا اﻟﻮﺳﻢ ﯾﻤﺜﻞ اﻟﻨﻮع اﻻول )‪(Main tags‬‬
‫و اﻟﺴﺆال اﻻن ‪ :‬ﻣﺎذا ﻟﻮ ﻛﺘﺒﻨﺎ اﻟﻜﻮد ﻛﻤﺎ ﯾﻠﻲ ‪:‬‬
‫أھﻼ وﺳﮭﻼ ﺑﻜﻢ‬
‫ﻓﻲ ﻣﻮﻗﻌﻲ‬
‫دون اﺳﺘﺨﺪام >‪ <br‬ھﻞ ﺳﯿﻄﺒﻊ" أھﻼ وﺳﮭﻼ ﺑﻜﻢ" ﺛﻢ ﯾﻨﺰل ﺳﻄﺮ اﻟﻰ اﻻﺳﻔﻞ ﻟﯿﻄﺒﻊ "ﻓﻲ ﻣﻮﻗﻌﻲ" ؟‬
‫اﻟﺠﻮاب‪ :‬ﻟﻼﺳﻒ ﻻ ﺳﻮف ﯾﻘﻮم ﺑﻄﺒﺎﻋﺔ اﻟﺠﻤﻠﺘﯿﻦ ﻓﻲ ﻧﻔﺲ اﻟﺴﻄﺮ و ﻟﺬﻟﻚ ﻧﺤﻦ ﻧﻘﻮم ﺑﺎﺳﺘﺨﺪام >‪ <br‬ﺑﺎﻻﺿﺎﻓﺔ‬
‫اﻟﻰ ﻃﺮق اﺧﺮى ﺳﻮف ﯾﺘﻢ ذﻛﺮھﺎ‬

‫راﺑﻌﺎ‪ :‬ﻣﻦ ﻗﺎﺋﻤﺔ ﻣﻠﻒ )‪ (File‬اﺧﺘﺮ ﺣﻔﻆ )‪(save‬‬

‫ﺧﺎﻣﺴﺎ ‪ :‬اذھﺐ اﻟﻰ اﻟﻤﻜﺎن اﻟﺬي ﺧﺰﻧﺖ ﺑﮫ اﻟﻤﻠﻒ ﺳﺘﺠﺪ ان ﻣﻠﻔﻚ‬

‫ﻣﻮﺟﻮد وھﻮ ﻋﻠﻰ ﺷﻜﻞ ﻣﻠﻔﺎت اﻧﺘﺮﻧﺖ‬
‫اﻓﺘﺤﮫ وﺳﺘﺮى اﻧﻨﺎ ﻗﻤﻨﺎ ﺑﺘﺼﻤﯿﻢ اﻟﺼﻔﺤﺔ اﻟﻤﻮﺟﻮدة ﻓﻲ ﻣﺜﺎﻟﻨﺎ‬

‫اﻻن ﻟﻮ اردﻧﺎ اﺟﺮاء ﺑﻌﺾ اﻟﺘﻌﺪﯾﻼت ﻋﻠﻰ اﻟﻜﻮد ھﻨﺎك ﻃﺮﯾﻘﺘﺎن ‪:‬‬
‫‪ .1‬ﻣﻦ ﺑﺮﻧﺎﻣﺞ ﺗﺤﺮﯾﺮ اﻟﻨﺼﻮص اﺧﺘﺮ ﻗﺎﺋﻤﺔ ﻣﻠﻒ ) ‪ (File‬و ﻣﻨﮭﺎ اﺧﺘﺮ ﻓﺘﺢ )‪(open‬‬
‫واﺧﺘﺮ اﻟﻤﻠﻒ اﻟﺬي ﺗﺮﯾﺪ اﻟﺘﻌﺪﯾﻞ ﻋﻠﯿﮫ‬
‫‪ .2‬ﻣﻦ ﺻﻔﺤﺔ اﻻﻧﺘﺮﻧﺖ اذھﺐ اﻟﻰ ﻋﺮض )‪ ( view‬وﻣﻦ اﻟﻘﺎﺋﻤﺔ اﻟﻤﻨﺴﺪﻟﺔ اﺧﺘﺮ‬
‫ﻣﺼﺪر)‪ (source‬أو اﻧﻘﺮ ﻧﻘﺮة ﯾﻤﯿﻦ ﻋﻠﻰ اي ﻣﻜﺎن ﻣﻦ اﻟﺼﻔﺤﺔ و اﺧﺘﺮ ﻋﺮض اﻟﻤﺼﺪر‬
‫)‪ (view source‬ﻓﻲ اﻟﺤﺎﻟﺘﯿﻦ ﺗﻔﺘﺢ ﻟﻚ ﻧﺎﻓﺬة ‪ Notepad‬و ھﻲ ﺗﺤﺘﻮي ﻋﻠﻰ ﻛﻮد‬
‫اﻟﺼﻔﺤﺔ‬
‫اﺟﺮي اﻟﺘﻌﺪﯾﻼت ﺛﻢ اﻋﻤﻞ ﺣﻔﻆ )‪(save‬‬
‫ﺛﻢ اذھﺐ اﻟﻰ ﺻﻔﺤﺔ اﻻﻧﺘﺮﻧﺖ و اﻋﻤﻞ ﺗﺤﺪﯾﺚ )‪ (refresh‬ﻣﻦ ﺧﻼل اﻻﯾﻘﻮﻧﺔ‬
‫وﻻﺣﻆ اﻟﺘﻐﯿﺮات اﻟﺘﻲ اﺟﺮﯾﺘﮭﺎ‬
 ‫ﻛﻤﺎ ﺗﻼﺣﻆ ﻣﻦ اﻟﻤﺜﺎل رﻗﻢ ‪ 1‬ﻓﺎن اﻟﺒﻨﯿﺔ اﻻﺳﺎﺳﯿﺔ ﻟﻜﺘﺎﺑﺔ اﻟﻜﻮد ﻓﻲ اﻟﮭﺘﻤﻞ ھﻲ‪:‬‬

‫>‪<html‬‬ ‫ﻣﻼﺣﻈﺔ‪:‬‬
‫>‪<head‬‬ ‫§ ﺟﻤﯿﻊ ھﺬه اﻻوﺳﻤﺔ اﺧﺘﯿﺎرﯾﺔ اي ﯾﻤﻜﻦ وﺿﻌﮭﺎ او ﻋﺪم‬
‫>‪<title‬‬ ‫وﺿﻌﮭﺎ ﻟﻜﻦ اﻻﻓﻀﻞ وﺿﻌﮭﺎ ﺣﺘﻰ ﺗﺴﮭﻞ ﻓﯿﻤﺎ ﺑﻌﺪ‬
‫ﻋﻤﻠﯿﺎت اﻟﺘﻌﺪﯾﻞ و اﻟﺼﯿﺎﻧﺔ‬
‫ﻟﻠﺘﻮﺿﯿﺢ ﯾﻤﻜﻦ ﻣﺜﻼ ﻛﺘﺎﺑﺔ ﻛﻮد ﻻ ﯾﺤﺘﻮي ﻋﻠﻰ ﺟﺰء‬
‫>‪</title‬‬
‫اﻟﺮأس )‪ (head‬و ﻻ ﯾﺤﺘﻮي ﻋﻠﻰ ﻋﻨﻮان )‪ ( Title‬او‬
‫>‪</head‬‬ ‫ﻗﺪ ﻻ ﯾﺤﺘﻮي ﻣﺜﻼ ﻋﻠﻰ ﺟﺰء اﻟﺠﺴﻢ )‪....(body‬اﻟﺦ ﻻ‬
‫>‪<body‬‬ ‫ﺗﺸﻐﻞ ﺑﺎﻟﻚ ﻛﺜﯿﺮا ﺑﮭﺬا اﻟﻤﻮﺿﻮع‬
‫اﻻﻓﻀﻞ ان ﺗﺤﺎﻓﻆ ﻋﻠﻰ ھﺬه اﻟﺒﻨﯿﺔ اﻻﺳﺎﺳﯿﺔ‬
‫>‪</body‬‬ ‫§ ﻗﺪ ﯾﺤﺘﻮي ﺟﺰء اﻟﺮاس ﻋﻠﻰ وﺳﺎم اﺧﺮ ﻏﯿﺮ اﻟﻌﻨﻮان‬
‫ﯾﺴﻤﻰ ‪ meta‬وھﻮ ﻻﻏﺮاض ﻣﺤﺮﻛﺎت اﻟﺒﺤﺚ وﺳﯿﺘﻢ‬
‫>‪</html‬‬ ‫ﺷﺮﺣﮫ ﻓﯿﻤﺎ ﺑﻌﺪ‬

‫و اﻻن ﻋﺰﯾﺰي اﻟﻘﺎرئ ﻗﺒﻞ اﻟﺒﺪء ﺑﺎﻟﻤﺜﺎل اﻟﺜﺎﻧﻲ ‪ ،‬ارﺟﻮ ان ﺗﻜﻮن ﻗﺪ ادرﻛﺖ ﻣﻔﮭﻮم‬
‫اﻻوﺳﻤﺔ )‪ (tags‬ﻻن ذﻟﻚ ﻣﮭﻢ ﺟﺪا ‪ ،‬ﻋﻠﻰ اﯾﺔ ﺣﺎل اذا ﻛﺎن ھﻨﺎك اي ﻧﻮع ﻣﻦ اﻟﻐﻤﻮض‬
‫ﻟﺪﯾﻚ ﻓﺎن اﻻﻣﺜﻠﺔ اﻟﻘﺎدﻣﺔ ان ﺷﺎء اﷲ ﺳﻮف ﺗﺒﺪد ھﺬا اﻟﻐﻤﻮض ‪.‬‬

‫ﻣﺜﺎل ‪:2‬‬
‫ﻋﺪل ﻋﻠﻰ اﻟﻜﻮد اﻟﻤﻮﺟﻮد ﻓﻲ اﻟﻤﺜﺎل اﻻول وذﻟﻚ ﻟﺘﺼﻤﯿﻢ اﻟﺼﻔﺤﺔ اﻟﺘﺎﻟﯿﺔ‪:‬‬
 : ‫اﻟﻜﻮد ﺑﻌﺪ اﻟﺘﻌﺪﯾﻞ‬

<html>
<head>
<title>
‫ﺻﻔﺤﺘﻲ اﻷوﻟﻰ‬
</title>
</head>
<body>
<center>
<h1>‫<أھﻼ وﺳﮭﻼ ﺑﻜﻢ‬/h1>
<br>
<b><u><i>‫<ﻓﻲ ﻣﻮﻗﻌﻲ‬/i></u></b>
</center>
</body>
</html>
 ‫ﻻﺣﻆ ان اﻟﻜﻮد ﻻ ﯾﺨﺘﻠﻒ ﻛﺜﯿﺮا ﻋﻦ اﻟﻤﺜﺎل اﻻول وﻟﺬﻟﻚ ﺳﻮف ﻧﺸﺮح اﻟﻔﺮوﻗﺎت ‪:‬‬
‫>‪</h1‬أھﻼ وﺳﮭﻼ ﺑﻜﻢ>‪<h1‬‬
‫اﻟﻤﻮﺟﻮد ﻣﺎ ﺑﯿﻦ >‪ <h1‬وﺑﯿﻦ >‪ </h1‬ﯾﺼﺒﺢ ﺧﻄﮫ ﻛﺒﯿﺮ و ﻏﺎﻣﻖ‬

‫>‪</i></u></b‬ﻓﻲ ﻣﻮﻗﻌﻲ>‪<b><u><i‬‬

‫اﻟﻤﻮﺟﻮد ﻣﺎ ﺑﯿﻦ >‪ <b‬وﺑﯿﻦ >‪ </b‬ﯾﺼﺒﺢ ﻏﺎﻣﻘﺎ‬

‫اﻟﻤﻮﺟﻮد ﻣﺎ ﺑﯿﻦ >‪ <u‬وﺑﯿﻦ >‪ </u‬ﯾﺼﺒﺢ ﺗﺤﺘﮫ ﺧﻂ‬
‫اﻟﻤﻮﺟﻮد ﻣﺎ ﺑﯿﻦ >‪ <i‬وﺑﯿﻦ >‪ </i‬ﯾﺼﺒﺢ ﺑﺨﻂ ﻣﺎﺋﻞ‬
‫وﻟﺬﻟﻚ ﻓﺎن ﻋﺒﺎرة " ﻓﻲ ﻣﻮﻗﻌﻲ " ﺗﻜﻮن ﺑﺨﻂ ﻏﺎﻣﻖ و ﻣﺎﺋﻞ و ﺗﺤﺘﮫ ﺧﻂ‬

‫ﻣﻼﺣﻈﺎت ‪:‬‬
‫‪ .1‬اذا ﻟﻢ ﯾﺘﻢ اﻏﻼق اﻟـ ‪ Tag‬ﺑـ ‪ anti tag‬ﯾﻌﻨﻲ ﻣﺜﻼ ‪:‬‬
‫ﻛﺘﺎﺑﺔ >‪ <b‬دون ﻛﺘﺎﺑﺔ >‪ </b‬ﻻ ﯾﺤﺪث اي ﺧﻄﺄ و ﯾﺘﻢ ﻋﻤﻞ اﻟﻤﻄﻠﻮب ﻟﻜﻦ ﻣﻦ ﻧﺎﺣﯿﺔ‬
‫اﻟﺒﺮﻣﺠﺔ واﻟﺘﺼﻤﯿﻢ ﻓﺎن ذﻟﻚ ﯾﻌﺘﺒﺮ ﺧﻄﺎ ﻓﺎدﺣﺎ وھﻮ ﯾﺰﯾﺪ ﻣﻦ ﺻﻌﻮﺑﺔ اﻟﺼﯿﺎﻧﺔ واﻟﺘﻌﺪﯾﻞ‬
‫‪ .2‬اذا ﻟﻢ ﯾﺘﻢ اﻻھﺘﻤﺎم ﺑﺎﻟﺘﺮﺗﯿﺐ ﯾﻌﻨﻲ ﻣﺜﻼ ‪:‬‬
‫>‪</u></b></i‬ﻓﻲ ﻣﻮﻗﻌﻲ>‪<b><u><i‬‬
‫اﯾﻀﺎ ﻻ ﯾﺤﺪث اي ﺧﻄﺎ و ﯾﺘﻢ ﻋﻤﻞ اﻟﻤﻄﻠﻮب ﻟﻜﻦ ذﻟﻚ اﯾﻀﺎ ﺳﻮف ﯾﺰﯾﺪ ﻣﻦ ﺻﻌﻮﺑﺔ‬
‫اﻟﺘﻌﺪﯾﻞ و اﻟﺼﯿﺎﻧﺔ‬
‫‪ .3‬ﻟﻘﺪ اﺳﺘﺨﺪﻣﻨﺎ ﻓﻲ ھﺬا اﻟﻤﺜﺎل اﻟﻮﺳﻢ >‪ <h1‬وﻗﻠﻨﺎ اﻧﮫ ﯾﺠﻌﻞ اﻟﺨﻂ ﻛﺒﯿﺮ وﻏﺎﻣﻖ‬
‫وھﻨﺎك اﯾﻀﺎ >‪ <h2>,<h3>,<h4>,<h5>,<h6‬و ﺟﻤﯿﻌﮭﺎ ﻟﻠﺘﺤﻜﻢ ﺑﺤﺠﻢ اﻟﺨﻂ‬
‫وﻏﻤﻘﮫ و اﻛﺒﺮھﺎ ﻋﻠﻰ اﻟﻄﻼق >‪ <h1‬واﺻﻐﺮھﺎ >‪<h6‬‬
‫‪ <h1>,<h2>,<h3>,<h4>,<h5>,<h6> .4‬ﺗﻌﻤﻞ اﯾﻀﺎ ﻋﻠﻰ اﻧﺰال اﻟﻤﺆﺷﺮ‬
‫اﻟﻰ اﻟﺴﻄﺮ اﻟﺘﺎﻟﻲ وﺑﺎﻟﺘﺎﻟﻲ ﻟﻢ ﯾﻜﻦ ھﻨﺎك داﻋﻲ ﻻﺳﺘﺨﺪام اﻟﻮﺳﻢ >‪ <br‬ﻓﻲ ﻣﺜﺎﻟﻨﺎ‬
‫اﻟﺜﺎﻧﻲ ‪ .‬ﺳﻮف ﺗﺘﻀﺢ اﻟﻨﻘﻄﺘﯿﻦ ‪ 3‬و‪ 4‬ﻣﻦ اﻟﻤﻼﺣﻈﺎت ﻋﻦ ﻃﺮﯾﻖ اﻟﻤﺜﺎل اﻟﺘﺎﻟﻲ ‪:‬‬
 ‫ﻣﺜﺎل ‪ : 3‬اﻛﺘﺐ اﻟﻜﻮد اﻟﺘﺎﻟﻲ ‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<title‬‬
‫ﺻﻔﺤﺘﻲ اﻷوﻟﻰ‬
‫>‪</title‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<center‬‬
‫>‪</h1‬ھﺬا ھﻮ ﺧﻂ‪<h1>1‬‬
‫>‪</h2‬ھﺬا ھﻮ ﺧﻂ‪<h2>2‬‬
‫>‪</h3‬ھﺬا ھﻮ ﺧﻂ‪<h3>3‬‬
‫>‪</h4‬ھﺬا ھﻮ ﺧﻂ‪<h4>4‬‬
‫>‪</h5‬ھﺬا ھﻮ ﺧﻂ‪<h5>5‬‬
‫>‪</h6‬ھﺬا ھﻮ ﺧﻂ‪<h6>6‬‬
‫>‪</center‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫ﻻﺣﻆ ﻛﯿﻒ ﺳﺘﻜﻮن اﻟﻨﺘﯿﺠﺔ‪:‬‬

 ‫ﻻﺣﻆ اﻟﻔﺮوق ﻣﺎ ﺑﯿﻦ >‪<h1>………………..<h6‬‬
‫وﻻﺣﻆ ان >‪ <h1‬اﻛﺒﺮھﺎ و ان >‪ <h6‬اﺻﻐﺮھﺎ‬
‫وﻻﺣﻆ ﻋﺪم اﻟﺤﺎﺟﺔ ﻟﻮﺟﻮد >‪ <br‬ﻟﻼﻧﺘﻘﺎل اﻟﻰ اﻟﺴﻄﺮ اﻟﺘﺎﻟﻲ ‪.‬‬

‫و اﻻن‪ ...‬ﻟﻌﻤﻞ ﻓﻘﺮﺗﯿﻦ ﻣﺜﻼ ‪:‬‬

‫اﻟﻔﻘﺮة اﻻوﻟﻰ‬ ‫أھﻼ وﺳﮭﻼ ﺑﻜﻢ‬
‫ﻓﻲ ﻣﻮﻗﻌﻨﺎ‬
‫اﻟﻔﻘﺮة اﻟﺜﺎﻧﯿﺔ‬
‫ھﻨﺎك ﺛﻼث ﻃﺮق اﺳﺎﺳﯿﺔ وھﻲ ‪:‬‬
‫‪ .1‬اﺳﺘﺨﺪم >‪ <br‬ﺑﻌﺪ اﻟﻔﻘﺮة اﻻوﻟﻰ ﻟﺘﺼﺒﺢ ‪:‬‬
‫>‪<body‬‬
‫أھﻼ و ﺳﮭﻼ ﺑﻜﻢ‬
‫>‪<br‬‬
‫ﻓﻲ ﻣﻮﻗﻌﻨﺎ‬
‫>‪</body‬‬
‫‪ .2‬اﺳﺘﺨﺪم اﻟﻮﺳﻢ >‪ <p>~~~~</p‬ﺣﯿﺚ اﻧﮫ ﻣﺎ ﯾﻮﺟﺪ ﺑﯿﻦ >‪ <p‬وﺑﯿﻦ >‪</p‬‬
‫ﯾﻤﺜﻞ ﻓﻘﺮة ﻓﻲ ﻣﺜﺎﻟﻨﺎ ﯾﺼﺒﺢ اﻟﻜﻮد‬
‫>‪<body‬‬
‫>‪ </p‬أھﻼ وﺳﮭﻼ ﺑﻜﻢ>‪<p‬‬
‫>‪</p‬ﻓﻲ ﻣﻮﻗﻌﻨﺎ>‪<p‬‬
‫>‪</body‬‬
‫‪ .3‬اﺳﺘﺨﺪم اﻟﻮﺳﻢ >‪ <pre>~~~~~~~</pre‬ﺣﯿﺚ اﻧﮫ ﻣﺎ ﯾﻮﺟﺪ ﺑﯿﻦ >‪<pre‬‬
‫وﺑﯿﻦ >‪ </pre‬ﯾﻜﺘﺐ ﻛﻤﺎ ھﻮ ﻣﻦ اﻟﻜﻮد اﻟﻰ ﺻﻔﺤﺔ اﻻﻧﺘﺮﻧﺖ اﻛﺴﺒﻠﻮرر ﻓﻲ‬
‫ﻣﺜﺎﻟﻨﺎ ﯾﺼﺒﺢ اﻟﻜﻮد‬
‫>‪<body‬‬
‫>‪<pre‬‬
‫أھﻼ وﺳﮭﻼ ﺑﻜﻢ‬

‫ﻓﻲ ﻣﻮﻗﻌﻨﺎ‬
‫>‪</pre‬‬
‫>‪</body‬‬
 ‫و اﻻن ﻟﻨﺎﺧﺬ ﻣﺠﻤﻮﻋﺔ أﺧﺮى ﻣﻦ اﻻوﺳﻤﺔ )‪ (tags‬و ﻧﺘﻌﺮف ﻋﻠﻰ وﻇﺎﺋﻔﮭﺎ ‪:‬‬

‫>‪</strike‬أھﻼ وﺳﮭﻼ>‪<srike‬‬
‫ﻟﻮﺿﻊ ﺧﻂ ﻋﻠﻰ اﻟﻜﻠﻤﺔ ﻓﻲ ﻣﺜﺎﻟﻨﺎ ﻣﺜﻼ‪ :‬أھﻼ وﺳﮭﻼ‬

‫>‪</em‬أھﻼ وﺳﮭﻼ>‪<em‬‬
‫ﯾﻘﻮم ﺑﻨﻔﺲ ﻋﻤﻞ >‪ <i‬أي ﺟﻌﻞ اﻟﺨﻂ ﻣﺎﺋﻼ ﻓﻲ ﻣﺜﺎﻟﻨﺎ ﻣﺜﻼ‪ :‬أھﻼ وﺳﮭﻼ‬

‫>‪</strong‬أھﻼ وﺳﮭﻼ >‪<strong‬‬

‫ﯾﻘﻮم ﺑﻨﻔﺲ ﻋﻤﻞ >‪ <b‬اي ﺟﻌﻞ اﻟﺨﻂ ﻏﺎﻣﻘﺎ ﻓﻲ ﻣﺜﺎﻟﻨﺎ ﻣﺜﻼ ‪ :‬أھﻼ و ﺳﮭﻼ‬

‫ﻣﺜﺎل ‪: 4‬‬
‫ﺻﻤﻢ اﻟﻨﺎﻓﺬة اﻟﺘﺎﻟﯿﺔ ‪:‬‬
 ‫ﻟﺘﺼﻤﯿﻢ اﻟﺼﻔﺤﺔ ﻗﻢ ﺑﻜﺘﺎﺑﺔ اﻟﻜﻮد اﻟﺘﺎﻟﻲ ‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<title‬‬
‫ﺻﻔﺤﺘﻲ اﻷوﻟﻰ‬
‫>‪</title‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<center‬‬
‫>‪ </h1‬اﻟﺴﻼم ﻋﻠﯿﻜﻢ ورﺣﻤﺔ اﷲ وﺑﺮﻛﺎﺗﮫ>‪<h1‬‬
‫أھﻼ وﺳﮭﻼ ﺑﻜﻢ ﻓﻲ ﻣﻮﻗﻌﻲ‬
‫>‪<br‬‬
‫>‪ </em‬ﻋﺎﻟﻢ اﻟﺴﯿﺎرات>‪<em‬‬
‫>‪ </p‬ﯾﻤﻜﻨﻚ ﻓﻲ ھﺬا اﻟﻤﻮﻗﻊ ان ﺗﺠﺪ ﻣﺎ ﺗﺮﯾﺪ ﻣﻦ ﺻﻮر اﻟﺴﯿﺎرات اﻟﺘﺎﻟﯿﺔ>‪<p‬‬
‫>‪<pre‬‬
‫‪BMW‬‬

‫‪Toyota‬‬

‫‪Nissan‬‬
‫>‪</pre‬‬
‫>‪</center‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫اﻗﺮا اﻟﻜﻮد ﺑﺘﻤﻌﻦ ﻓﮭﺬا اﻟﻤﺜﺎل ﯾﻌﺘﺒﺮ ﺗﻄﺒﯿﻖ ﻋﻤﻠﻲ ﻣﺒﺎﺷﺮ ﻟﻠﻄﺮق اﻟﺮﺋﯿﺴﯿﺔ اﻟﺜﻼث ﻟﻌﻤﻞ‬
‫اﻟﻔﻘﺮات و اﻟﺘﻲ ﺗﻢ ﺷﺮﺣﮭﺎ ﻣﻦ ﻗﺒﻞ ‪.‬‬

‫واﻻن ﺳﻮف ﻧﻘﻮم ﺑﺸﺮح اﻟﻌﻨﺼﺮ اﻟﺜﺎﻧﻲ ﻣﻦ ﻋﻨﺎﺻﺮ اﻟﮭﺘﻤﻞ اﻻ وھﻮ اﻟـ‬
‫‪Attributes‬‬
 ‫‪Attributes‬‬
‫ﺗﺴﺘﺨﺪم اﻟﺼﻔﺎت )‪ (Attributes‬وذﻟﻚ ﻻﺿﺎﻓﺔ ﺧﺼﺎﺋﺺ ﻟﻼوﺳﻤﺔ )‪(Tags‬‬
‫ﯾﻌﻨﻲ ﻣﺜﻼ ﻟﻠﺘﺤﻜﻢ ﺑﻠﻮن اﻟﺨﻂ ‪ ،‬ﻣﺤﺎذاة اﻟﻔﻘﺮة‪......،‬اﻟﺦ ‪.‬‬

‫ﺣﺘﻰ ﯾﺘﻀﺢ اﻻﻣﺮ اﻛﺜﺮ ﻟﻨﺎﺧﺬ اﻟﻤﺜﺎل اﻟﺘﺎﻟﻲ‪:‬‬

‫ﻣﺜﺎل ‪: 5‬‬
‫ﺻﻤﻢ اﻟﻨﺎﻓﺬة اﻟﺘﺎﻟﯿﺔ ‪:‬‬
 ‫ﻟﺘﺼﻤﯿﻢ ھﺬه اﻟﺼﻔﺤﺔ اﻛﺘﺐ اﻟﻜﻮد اﻟﺘﺎﻟﻲ ‪:‬‬
‫>‪<html dir=rtl‬‬
‫>‪<head‬‬
‫>‪<title‬‬
‫ﺻﻔﺤﺘﻲ اﻷوﻟﻰ‬
‫>‪</title‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<center‬‬
‫>‪ </font‬اﻟﺴﻼم ﻋﻠﯿﻜﻢ ورﺣﻤﺔ اﷲ وﺑﺮﻛﺎﺗﮫ>‪<font size=26pt color=red‬‬
‫>‪<br‬‬
‫أھﻼ وﺳﮭﻼ ﺑﻜﻢ ﻓﻲ ﻣﻮﻗﻌﻲ‬
‫>‪<br‬‬
‫>‪ </em‬ﻋﺎﻟﻢ اﻟﺴﯿﺎرات>‪<em‬‬
‫>‪ </p‬ﯾﻤﻜﻨﻚ ﻓﻲ ھﺬا اﻟﻤﻮﻗﻊ ان ﺗﺠﺪ ﻣﺎ ﺗﺮﯾﺪ ﻣﻦ ﺻﻮر اﻟﺴﯿﺎرات اﻟﺘﺎﻟﯿﺔ>‪<p‬‬
‫>‪<pre‬‬
‫‪BMW‬‬

‫‪Toyota‬‬

‫‪Nissan‬‬
‫>‪</pre‬‬
‫>‪</center‬‬
‫ارﺟﻮ ﻟﻚ ﻋﺰﯾﺰي اﻟﺰاﺋﺮ اﺟﻤﻞ اﻻوﻗﺎت‬
‫>‪</body‬‬
‫>‪</html‬‬
 ‫ﻻﺣﻆ ان اﻟﻜﻮد ﻓﻲ ھﺬا اﻟﻤﺜﺎل ﻻ ﯾﺨﺘﻠﻒ ﻛﺜﯿﺮا ﻋﻦ اﻟﻜﻮد اﻟﻤﻮﺟﻮد ﻓﻲ اﻟﻤﺜﺎل رﻗﻢ ‪ 4‬ﻟﻜﻦ‬
‫ھﻨﺎك اﻟﻔﺮوﻗﺎت اﻟﺘﺎﻟﯿﺔ ‪:‬‬
‫>‪<html dir = rtl‬‬
‫‪ <-------dir =rtl‬ﺗﻌﻤﻞ ﻋﻠﻰ ﻣﺤﺎذاة ﺟﻤﯿﻊ اﻟﻨﺺ اﻟﻰ اﻟﺠﮭﺔ اﻟﯿﻤﻨﻰ ﻣﺎ ﻟﻢ ﯾﺤﺪد ﻏﯿﺮ‬
‫ذﻟﻚ )ﻣﺜﻼ اﺳﺘﺨﺪام اﻟﺘﻮﺳﯿﻂ( وﻻﺣﻆ ﻋﻤﻠﮭﺎ ﻋﻠﻰ اﻟﺠﻤﻠﺔ "ارﺟﻮ ﻟﻚ ﻋﺰﯾﺰي اﻟﺰاﺋﺮ اﺟﻤﻞ‬
‫اﻻوﻗﺎت" ﻻﻧﮭﺎ ﺧﺎرج اﻟﺘﻮﺳﯿﻂ ‪.‬‬

‫>‪ </font‬اﻟﺴﻼم ﻋﻠﯿﻜﻢ ورﺣﻤﺔ اﷲ وﺑﺮﻛﺎﺗﮫ>‪<font size=26pt color=red‬‬

‫‪ <--------------Size=26pt‬ﺗﻌﻤﻞ ﻋﻠﻰ ﺗﺤﺪﯾﺪ ﺣﺠﻢ اﻟﺨﻂ ﻟﻠﻌﺒﺎرة اﻟﻤﻮﺟﻮدة ﻣﺎ ﺑﯿﻦ‬

‫>‪ <font‬و>‪ </font‬ﻟﯿﺼﺒﺢ ‪ 26‬ﻧﻘﻄﺔ ‪.‬‬
‫‪ <-------------Color=red‬ﺗﻌﻤﻞ ﻋﻠﻰ ﺗﺤﺪﯾﺪ ﻟﻮن اﻟﺨﻂ ﻟﻠﻌﺒﺎرة اﻟﻤﻮﺟﻮدة ﻣﺎ ﺑﯿﻦ‬
‫>‪ <font‬و>‪ </font‬ﻟﯿﺼﺒﺢ أﺣﻤﺮ)ﯾﻤﻜﻨﻚ اﺳﺘﺨﺪام رﻗﻢ ﻟﻠﻮن ﻣﺜﻼ ‪color= #4ff4‬‬
‫وﻻﺣﻆ ان اﻟﺮﻗﻢ ﯾﻜﻮن ﺑﺎﻟﻨﻈﺎم ‪ Hexadecimal‬وﻻﺣﻆ اﺳﺘﺨﺪام اﺷﺎرة ‪.(#‬‬

‫ﻣﻼﺣﻈﺔ‪ :‬اذا ﻛﺎن ﻣﺎ ﺑﻌﺪ اﺷﺎرة اﻟﻤﺴﺎواة ﻋﺒﺎرة ﻋﻦ ﺟﻤﻠﺔ )ﯾﻮﺟﺪ ﻣﺴﺎﻓﺎت( ﻓﯿﺠﺐ وﺿﻌﮭﺎ‬
‫ﻣﺎ ﺑﯿﻦ ’‘ او ﻣﺎ ﺑﯿﻦ ”“ ﻣﺜﻼ ‪:‬‬
‫>”‪ <p id= “wadea asad‬او >’‪ <p id = ‘wadea asad‬ﻻﺣﻆ ﻟﻮﺟﻮد اﻟﻔﺮاغ ﺑﯿﻦ‬
‫اﻟﻜﻠﻤﺘﯿﻦ ‪wadea‬و ‪ asad‬وﺿﻌﻨﺎ ’‘ او ”“ و ﺗﺴﺘﺨﺪم اﻟﺼﻔﺔ ‪ id‬ﻣﻊ اﻟﻮﺳﻢ >‪<p‬وذﻟﻚ‬
‫ﻻﻋﻄﺎء اﺳﻢ ﻟﻠﻔﻘﺮة ‪.‬‬

‫ارﺟﻮ ان ﯾﻜﻮن ﻣﻔﮭﻮم ‪ Attribute‬ﻗﺪ وﺿﺢ ﻟﺪﯾﻚ ﻋﺰﯾﺰي اﻟﻘﺎرئ ﻋﻠﻰ اﯾﺔ ﺣﺎل ﻣﻦ‬
‫ﺧﻼل اﻻﻣﺜﻠﺔ اﻟﻘﺎدﻣﺔ ﻓﻲ اﻟﻜﺘﺎب ﺳﻮف ﯾﺘﻀﺢ ﻟﻚ اﻟﻤﻔﮭﻮم اﻛﺜﺮ ﻓﺎﻛﺜﺮ‬

‫واﻻن ﺳﻮف ﻧﻘﻮم ﺑﺸﺮح اﻟﻌﻨﺼﺮ اﻟﺜﺎﻟﺚ ﻣﻦ ﻋﻨﺎﺻﺮ اﻟﮭﺘﻤﻞ اﻻ وھﻮ اﻟـ‬
‫‪Special Characters‬‬
 ‫‪Special Characters‬‬
‫ﻧﺴﺘﺨﺪم ‪ special characters‬وذﻟﻚ ﻟﻄﺒﺎﻋﺔ ﺣﺮوف ﺧﺎﺻﺔ ﻣﺜﻞ ™‪>,<,&,©,‬‬
‫‪...........‬اﻟﺦ وﻣﻦ اھﻢ ھﺬه اﻟﺤﺮوف اﻟﺨﺎﺻﺔ "اﻟﻤﺴﺎﻓﺔ"‬
‫ﺗﻮﺿﯿﺢ‪:‬‬
‫ﻟﻮ اردﻧﺎ ان ﯾﻜﻮن اﻟﺒﻌﺪ ﺑﯿﻦ ﻛﻠﻤﺘﯿﻦ ﺑﻤﻘﺪار ﻣﺴﺎﻓﺘﯿﻦ ﻓﻤﺎذا ﻧﻌﻤﻞ؟‬
‫ھﻞ ﻧﻜﺘﺐ ﻣﺜﻼ اﻟﻜﻠﻤﺔ اﻻوﻟﻰ و ﻧﺒﺘﻌﺪ ﺑﻤﻘﺪار ﻣﺴﺎﻓﺘﯿﻦ وﻧﻜﺘﺐ اﻟﻜﻠﻤﺔ اﻟﺜﺎﻧﯿﺔ ﯾﻌﻨﻲ ﻣﺜﻼ‬
‫أﺣﻤﺪ راﻣﻲ؟‬
‫ﺑﻌﺪ ﺑﻤﻘﺪار ﻣﺴﺎﻓﺘﯿﻦ‬
‫ﻟﻼﺳﻒ ﻋﺰﯾﺰي اﻟﻘﺎرئ ﻟﻮ ﻓﻌﻠﺖ ذﻟﻚ او وﺿﻌﺖ ﻣﻠﯿﻮن ﻣﺴﺎﻓﺔ ﻓﺎﻟﻨﺘﯿﺠﺔ ﺳﻮف ﺗﻜﻮن ﻋﻠﻰ‬
‫اﻟﻤﺘﺼﻔﺢ ﻓﻘﻂ ﻣﺴﺎﻓﺔ واﺣﺪة ﻻ ﻏﯿﺮ وﻟﺬﻟﻚ ﺳﻮف ﻧﺤﺘﺎج اﻟﻰ اﻟﺤﺮوف اﻟﺨﺎﺻﺔ ﻟﺤﻞ ھﺬه‬
‫اﻟﻤﺸﻜﻠﺔ ‪.‬‬
‫اﻟﯿﻚ اﻻن ﻋﺰﯾﺰي اﻟﻘﺎرئ اﺷﮭﺮ اﻟﺤﺮوف اﻟﺨﺎﺻﺔ اﻟﻤﺴﺘﺨﺪﻣﺔ ﻓﻲ ھﺬه اﻟﻠﻐﺔ ‪:‬‬
‫;‪&nbsp‬‬ ‫ﻟﻌﻤﻞ ﻣﺴﺎﻓﺔ )‪(space‬‬
‫;‪&lt‬‬ ‫ﻟﻌﻤﻞ اﺷﺎرة اﺻﻐﺮ <‬
‫;‪&gt‬‬ ‫ﻟﻌﻤﻞ اﺷﺎرة اﻛﺒﺮ >‬
‫;‪&copy‬‬ ‫ﻟﻌﻤﻞ ﺷﺎرة ﺣﻘﻮق اﻟﻄﺒﻊ ©‬
‫;‪&trade‬‬ ‫ﻟﻌﻤﻞ اﺷﺎرة ﻋﻼﻣﺔ ﺗﺠﺎرﯾﺔ ™‬
‫;‪&frac34‬‬ ‫ﻟﻌﻤﻞ رﻗﻢ ﻛﺴﺮي ﻓﻲ ﻣﺜﺎﻟﻨﺎ ‪3/4‬‬
‫;‪&amp‬‬ ‫ﻟﻌﻤﻞ اﺷﺎرة ‪& AND‬‬

‫ﻣﻼﺣﻈﺔ ‪ :‬ﺑﺎﻟﻨﺴﺒﺔ اﻟﻰ اﺷﺎرات &‪ >,<,‬ﯾﻤﻜﻨﻚ ﻛﺘﺎﺑﺘﮭﺎ ﻣﺒﺎﺷﺮة دون اﻟﺤﺎﺟﺔ اﻟﻰ اﺳﺘﺨﺪام‬
‫اﻟﺤﺮوف اﻟﺨﺎﺻﺔ ‪.‬‬
‫اﻧﺘﺒﮫ اﻟﻰ ان اﺷﺎرات اﻻﺻﻐﺮ و اﻻﻛﺒﺮ ھﻨﺎ ھﻲ ﻟﻠﻐﺔ اﻻﻧﺠﻠﯿﺰﯾﺔ‬
 ‫ﻣﺜﺎل ‪:6‬‬
‫ﺻﻤﻢ اﻟﺼﻔﺤﺔ اﻟﺘﺎﻟﯿﺔ ‪:‬‬
‫>‪<html‬‬
‫اﻟﻜﻮد ‪:‬‬
‫>‪<head‬‬
‫>‪<title‬‬
‫ﺻﻔﺤﺘﻲ اﻻوﻟﻰ‬
‫>‪</title‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪</p‬أھﻼ وﻣﺮﺣﺒﺎ ﺑﻜﻢ>‪<p align=center‬‬
‫>‪<p align=right‬‬
‫ﺗﻌﻠﻤﻨﺎ ﻓﻲ ھﺬا اﻟﺪرس ﺑﻌﻀﺎ ﻣﻦ اﻟﺤﺮوف اﻟﺨﺎﺻﺔ‬
‫;‪&nbsp;&nbsp;&nbsp;&nbsp‬‬
‫ﺳﻨﺬﻛﺮ ﻣﻨﮭﺎ ﻋﻠﻰ‬
‫>‪<br‬‬
‫ﺳﺒﯿﻞ اﻟﻤﺜﺎل ﻻ اﻟﺤﺼﺮ ﻣﺎ ﯾﺄﺗﻲ‬
‫>‪<br‬‬
‫اﺷﺎرة اﺻﻐﺮ‬
‫;‪&lt‬‬
‫>‪<br‬‬
‫اﺷﺎرة اﻛﺒﺮ‬
‫;‪&gt‬‬
‫>‪<br‬‬
‫اﺷﺎرة ﺣﻘﻮق اﻟﻄﺒﻊ‬
‫;‪&copy‬‬
‫>‪<br‬‬
‫وﺗﻌﻠﻤﻨﺎ اﯾﻀﺎ اﻧﮫ ﯾﻤﻜﻦ ﻛﺘﺎﺑﺔ اﺷﺎرة اﻻﺻﻐﺮ و اﻻﻛﺒﺮ دون اﻟﺤﺎﺟﺔ اﻟﻰ‬
‫اﺳﺘﺨﺪام ﺣﺮوف ﺧﺎﺻﺔ‬
‫>‪<br‬‬
‫ﻣﺜﻼ‬
‫>‪<br‬‬
‫اﺷﺎرة اﺻﻐﺮ‬
‫<‬
‫>‪<br‬‬
‫اﺷﺎرة اﻛﺒﺮ‬
‫>‬
‫>‪</p‬‬
‫>‪</body‬‬
‫>‪</html‬‬
 ‫ﺷﺮح اﻟﻜﻮد‪:‬‬
‫ﺗﻌﻠﻤﻨﺎ ﻓﻲ ھﺬا اﻟﺪرس ﺑﻌﻀﺎ ﻣﻦ اﻟﺤﺮوف اﻟﺨﺎﺻﺔ‬
‫;‪&nbsp;&nbsp;&nbsp;&nbsp‬‬
‫ﺳﻨﺬﻛﺮ ﻣﻨﮭﺎ ﻋﻠﻰ‬

‫ﻟﻌﻤﻞ اﻟﻤﺴﺎﻓﺔ >‪&nbsp;--------------------‬‬

‫ﻻﺣﻆ ان اﻟﺒﻌﺪ ﺑﯿﻦ ﻛﻠﻤﺔ "ﺧﺎﺻﺔ" و ﻛﻠﻤﺔ "ﺳﻨﺬﻛﺮ"ﺑﻤﻘﺪار ارﺑﻊ ﻓﺮاﻏﺎت‬

‫اﺷﺎرة اﺻﻐﺮ‬
‫;‪&lt‬‬
‫)<(اﺷﺎرة اﺻﻐﺮ ﺑﺎﻻﻧﺠﻠﯿﺰي>‪&lt;----------------------‬‬

‫اﺷﺎرة اﻛﺒﺮ‬
‫;‪&gt‬‬
‫)>(اﺷﺎرة اﻛﺒﺮ ﺑﺎﻻﻧﺠﻠﯿﺰي >‪&gt;-----------------------‬‬

‫اﺷﺎرة ﺣﻘﻮق اﻟﻄﺒﻊ‬

‫;‪&copy‬‬
‫اﺷﺎرة ﺣﻘﻮق اﻟﻄﺒﻊ ©>‪&copy;--------------------‬‬

‫و اﻻن ﻋﺰﯾﺰي اﻟﻘﺎرئ ﻟﻨﻨﺘﻘﻞ اﻟﻰ ﺷﺮح اﻋﻤﻖ وﺗﻔﺼﯿﻞ أﻛﺜﺮ ﻟﮭﺬه اﻟﻠﻐﺔ اﻟﺴﮭﻠﺔ‬
 ‫إدراج اﻟﺼﻮر‬
‫ﻗﺪ ﻧﺮﻏﺐ ﺑﺎﺿﺎﻓﺔ ﺻﻮرة اﻟﻰ ﺻﻔﺤﺔ اﻟﻮﯾﺐ و ﻟﻌﻤﻞ ذﻟﻚ ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ اﻟﺘﺎﻟﻲ ‪:‬‬
‫>……=‪<img src‬‬
‫وﺑﻌﺪ اﻟـ ‪ (src=) Attribute‬ﯾﻜﺘﺐ ﻋﻨﻮان اﻟﺼﻮرة وھﻮ ﻗﺪ ﯾﻜﻮن اﺣﺪى اﻟﺤﺎﻻت اﻟﺘﺎﻟﯿﺔ‬
‫‪:‬‬

‫§ ﻋﻠﻰ اﻻﻧﺘﺮﻧﺖ )‪URL(uniform resource location‬‬

‫ﻣﺜﻼ‪:‬‬
‫‪http//:www.stars4arab.net/uplo/wadea.GIF‬‬
‫أو‬
‫§ ﻋﻠﻰ اﻟﺸﺒﻜﺔ اﻟﻤﺤﻠﯿﺔ )‪ (LAN‬ﺑﻤﻌﻨﻰ آﺧﺮ‬
‫)‪UNC(universal naming conversion‬‬
‫ﻣﺜﻼ ‪:‬‬
‫‪\\itlib\mywebsite\wadea.GIF‬‬
‫أو‬
‫§ ﻋﻠﻰ ﺟﮭﺎز اﻟﺤﺎﺳﻮب )‪(local‬‬
‫ﻣﺜﻼ ‪:‬‬
‫‪C:\myweb\wadea.jpg‬‬
‫واذا ﻛﺎﻧﺖ اﻟﺼﻮرة ﻋﻠﻰ ﻧﻔﺲ ﻣﺴﺎر )‪ (directory‬ﺻﻔﺤﺔ اﻻﻧﺘﺮﻧﺖ ﺗﻜﺘﺐ اﺳﻢ‬
‫اﻟﺼﻮرة ﻣﺒﺎﺷﺮة‬
‫ﻣﺜﻼ‪ :‬ﻟﻮ ان ﺻﻔﺤﺔ اﻻﻧﺘﺮﻧﺖ اﻟﺘﻲ ﻧﻘﻮم ﻋﻠﻰ ﺗﺼﻤﯿﻤﮭﺎ ﺑﻨﻔﺲ اﻟﻤﺠﻠﺪ اﻟﺘﻲ ﺗﻮﺟﺪ ﻓﯿﮫ‬
‫اﻟﺼﻮر)‪ (wadea.bmp‬ﻧﻜﺘﺐ ﻣﺎ ﯾﻠﻲ ‪:‬‬
‫‪Wadea.bmp‬‬
‫و اذا ﻛﺎﻧﺖ اﻟﺼﻮرة ﻓﻲ ﻣﺠﻠﺪ وھﺬا اﻟﻤﺠﻠﺪ ﻋﻠﻰ ﻧﻔﺲ ﻣﺴﺎر ﺻﻔﺤﺔ اﻻﻧﺘﺮﻧﺖ ﻧﻜﺘﺐ‬
‫اﺳﻢ اﻟﻤﺠﻠﺪ ﺛﻢ اﺳﻢ اﻟﺼﻮرة‬
‫ﻣﺜﻼ‪:‬‬
‫‪Img/wadea.gif‬‬
‫ﻟﻨﺄﺧﺬ اﻻن ﻣﺜﺎﻻ و ﻧﻄﺒﻖ ﻋﻠﯿﮫ ﻣﺎ ﺷﺮح و ﻧﺎﺧﺬ ﺧﺼﺎﺋﺺ أﺧﺮى ﻟﻮﺳﻢ ادراج اﻟﺼﻮرة‬

‫ﻣﺜﺎل ‪: 7‬‬
‫ﻟﺪﯾﻨﺎ ﺻﻮرة اﺳﻤﮭﺎ ‪ DawnOverWater‬وھﻲ ذات اﻻﻣﺘﺪاد ‪ .jpg‬وھﻲ ﻣﻮﺟﻮدة‬
‫ﺑﻨﻔﺲ اﻟﻤﺠﻠﺪ اﻟﻤﻮﺟﻮد ﻓﯿﮫ ﺻﻔﺤﺔ اﻻﻧﺘﺮﻧﺖ اﻟﻤﺮاد ﺗﺼﻤﯿﻤﮭﺎ ‪ ،‬ﺳﻮف ﻧﻜﺘﺐ اﻟﻜﻮد‬
‫اﻻزم ﻟﺘﺼﻤﯿﻢ ھﺬه اﻟﺼﻔﺤﺔ ﻟﺘﻈﮭﺮ ﻛﻤﺎ ﯾﻠﻲ ‪:‬‬
 ‫اﻟﻜﻮد ‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<title‬‬
‫ﺻﻔﺤﺘﻲ اﻻوﻟﻰ‬
‫>‪</title‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫> ‪ width=30% hight=30%‬ﻣﺜﺎل‪<img src=DawnOverWater.jpg align=left alt=7‬‬
‫ﺻﻮرة ﻟﻤﺜﺎل رﻗﻢ ‪7‬‬
‫>‪<br‬‬
‫ﻻﺣﻆ ﻋﻨﺪ وﺿﻊ اﻟﻤﺆﺷﺮ ﻋﻠﻰ اﻟﺼﻮرة ﺗﻈﮭﺮ ﻟﻨﺎ ﻻﺋﺤﺔ ﺗﻮﺿﯿﺤﯿﺔ ﻟﻠﺼﻮرة‬
‫>‪<br‬‬
‫ﻓﻲ ﻣﺜﺎﻟﻨﺎ ﺗﻈﮭﺮ اﻟﻌﺒﺎرة ﻣﺜﺎل‪7‬‬

‫>‪</body‬‬
‫>‪</html‬‬
 ‫ﺷﺮح اﻟﻜﻮد‪:‬‬

‫‪ width=30%‬ﻣﺜﺎل‪<img src=DawnOverWater.jpg align=left alt=7‬‬

‫> ‪hight=30%‬‬

‫>‪img src= DawnOverWater.jpg ------------‬‬

‫ﻻدراج اﻟﺼﻮرة وﻻﺣﻆ ﻻن اﻟﺼﻮرة ﺑﻨﻔﺲ اﻟﻤﺴﺎر ذﻛﺮﻧﺎ اﺳﻢ اﻟﺼﻮرة ﻓﻘﻂ‬

‫ﻟﺠﻌﻞ ﻣﺤﺎذاة اﻟﺼﻮرة ﻟﺠﮭﺔ اﻟﯿﺴﺎر اي اﻧﮭﺎ ﯾﺴﺎر اﻟﻨﺺ >‪align=left -----------------‬‬

‫ﻋﻨﺪ وﺿﻊ اﻟﻤﺆﺷﺮ ﻋﻠﻰ اﻟﺼﻮرة ﺗﻈﮭﺮ ﻻﺋﺤﺔ ﺗﻮﺿﯿﺤﯿﺔ ﯾﻜﺘﺐ ﻓﯿﮭﺎ ﻣﺜﺎل‪---->7‬ﻣﺜﺎل‪alt=7‬‬

‫ﺗﺤﺪﯾﺪ ﻋﺮض ﻟﻠﺼﻮرة وھﻮ ‪ 30‬ﺑﺎﻟﻤﺌﺔ ﻣﻦ ﻋﺮﺿﮭﺎ اﻻﺻﻠﻲ >‪width=30%----‬‬

‫ﺗﺤﺪﯾﺪ ارﺗﻔﺎع اﻟﺼﻮرة وھﻮ ‪ 30‬ﺑﺎﻟﻤﺌﺔ ﻣﻦ ارﺗﻔﺎﻋﮭﺎ اﻻﺻﻠﻲ>‪hight=30%---------------‬‬

‫ﻣﻼﺣﻈﺎت‪:‬‬
‫‪ .1‬ﻟﻐﺔ اﻟﮭﺘﻤﻞ ﻏﯿﺮ ﺣﺴﺎﺳﺔ ﻟﺤﺎﻟﺔ اﻟﺤﺮوف)ﺻﻐﯿﺮة او ﻛﺒﯿﺮة( ﻓﻠﻮ ﻗﻠﻨﺎ ‪ IMG‬ﻻ ﺗﻔﺮق ﻋﻦ‬
‫‪ img‬و ﻛﺬﻟﻚ اﻻﻣﺮ ﺑﺎﻟﻨﺴﺒﺔ اﻟﻰ اﺳﻢ اﻟﺼﻮرة ﻓﻠﻮ ﻗﻠﻨﺎ ‪ DawnOverWater.jpg‬او ﻗﻠﻨﺎ‬
‫‪ dawnoverwater.jpg‬ﻧﻔﺲ اﻟﺸﺊ ‪.‬‬

‫‪.2‬ﯾﻤﻜﻦ ﻓﻲ اﻟﺼﻔﺎت ‪ width‬و ‪ hight‬ان ﯾﻜﻮن اﻟﻌﺮض و اﻻرﺗﻔﺎع ﺑﺎﻟﻨﺴﺒﺔ اﻟﻤﺌﻮﯾﺔ ﻛﻤﺎ ﻓﻲ‬
‫ﻣﺜﺎﻟﻨﺎ اﻟﺴﺎﺑﻖ او ﺑﺎﻟﺒﻜﺴﻞ ﻓﻨﺬﻛﺮ اﻟﺮﻗﻢ ﺑﺎﻟﺒﻜﺴﻞ ﻣﺒﺎﺷﺮة ﻣﺜﻼ‪:‬‬
‫اﻟﻌﺮض ‪ 50‬ﺑﯿﻜﺴﻞ>‪Width=50----------------------‬‬
‫اﻻرﺗﻔﺎع ‪ 100‬ﺑﯿﻜﺴﻞ >‪Hight=100-------------------‬‬
‫‪.3‬اﻟﺼﻔﺔ ‪ alt‬ﺗﻤﺜﻞ اﯾﻀﺎ ﻣﺎ ﺳﻮف ﯾﻈﮭﺮ اذا ﻟﻢ ﺗﻜﻦ ﻣﻮﺟﻮدة اﻟﺼﻮرة و اﻟﻤﺜﺎل اﻟﺘﺎﻟﻲ‬
‫ﻟﺘﻮﺿﯿﺢ ھﺬه اﻟﻨﻘﻄﺔ‪.‬‬

‫ﻣﺜﺎل ‪: 8‬‬
‫اذا ﻟﻢ ﺗﻜﻦ ﻟﺪﯾﻨﺎ اﻟﺼﻮرة ‪ DawnOverWater.jpg‬وﻛﺘﺒﻨﺎ اﻟﻜﻮد اﻟﻤﻮﺟﻮد ﻓﻲ اﻟﻤﺜﺎل رﻗﻢ ‪7‬‬
‫ﻓﺎن اﻟﺸﺎﺷﺔ ﺳﻮف ﺗﻈﮭﺮ ﻛﻤﺎ ﯾﻠﻲ ‪:‬‬
 ‫ادراج ﺧﻂ اﻓﻘﻲ‬

‫ﻻدراج ﺧﻂ اﻓﻘﻲ ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ >‪ <hr‬وﻗﺪ ﻧﺴﺘﺨﺪم ﻣﻌﮫ ﺑﻌﺾ اﻟﺼﻔﺎت)‪ (attribute‬اﻟﺘﺎﻟﯿﺔ ‪:‬‬

‫ﻟﺘﺤﺪﯾﺪ ﻟﻮن اﻟﺨﻂ وﯾﻜﺘﺐ اﺳﻢ اﻟﻠﻮن ﻣﺒﺎﺷﺮة او رﻗﻤﮫ ﺑﻌﺪ اﻻﺷﺎرة ‪color-----------> #‬‬
‫ﻟﺘﺤﺪﯾﺪ ﻣﺤﺎذاة اﻟﺨﻂ )ﯾﻤﯿﻦ ‪ ،‬وﺳﻂ‪،‬ﯾﺴﺎر(>‪align--------‬‬
‫ﻟﺘﺤﺪﯾﺪ ﻃﻮل اﻟﺨﻂ وھﻮ اﻣﺎ ان ﯾﻜﻮن ﺑﺎﻟﺒﻜﺴﻞ ﻓﯿﻜﺘﺐ اﻟﺮﻗﻢ ﻣﺒﺎﺷﺮة او >‪width-------‬‬
‫ﺑﺎﻟﻨﺴﺒﺔ اﻟﻤﺌﻮﯾﺔ ﺑﺎﻟﻨﺴﺒﺔ اﻟﻰ اﻟﺸﺎﺷﺔ)اﻟﺨﻂ ﻛﻢ ﯾﺤﺘﻞ ﻣﻦ ﻋﺮض اﻟﺸﺎﺷﺔ (ﻓﯿﻜﺘﺐ ﺑﻌﺪ اﻟﺮﻗﻢ‬
‫اﺷﺎرة اﻟﻨﺴﺒﺔ اﻟﻤﺆﯾﺔ ‪%‬‬
‫ﻟﺘﺤﺪﯾﺪ ﺳﻤﻚ اﻟﺨﻂ وھﻮ ﻓﻘﻂ ﺑﺎﻟﺒﻜﺴﻞ ﻓﯿﻜﺘﺐ اﻟﺮﻗﻢ ﻣﺒﺎﺷﺮة>‪size-------‬‬
‫ﻟﻨﺎﺧﺬ ﻣﺜﺎﻻ ﻟﻠﺘﻮﺿﯿﺢ‪:‬‬

‫ﻣﺜﺎل ‪: 9‬‬
 ‫اﻟﻜﻮد ‪:‬‬
‫>‪<html dir=rtl‬‬
‫>‪<head‬‬ ‫ﺗﻤﻌﻦ ﺟﯿﺪا ﻓﻲ اﻟﻤﺜﺎل‬
‫>‪<title‬‬ ‫وﻻﺣﻆ ﻋﻤﻠﯿﺔ ادراج‬
‫ﺻﻔﺤﺘﻲ اﻻوﻟﻰ‬ ‫اﻟﺨﻂ اﻻﻓﻘﻲ ‪.‬‬
‫>‪</title‬‬
‫>‪</head‬‬ ‫وﻻﺣﻆ اﺳﺘﺨﺪام‬
‫>‪<body‬‬ ‫اﻟﺼﻔﺎت اﻟﻤﺨﺘﻠﻔﺔ‬
‫ﺑﺴﻢ اﷲ اﻟﺮﺣﻤﻦ اﻟﺮﺣﯿﻢ >‪<center><font size=24pt‬‬ ‫ﻟﻠﺘﺤﻜﻢ ﺑﺎﻟﻠﻮن و‬
‫>‪<font></center‬‬ ‫اﻟﻤﺤﺎذاة و اﻟﻄﻮل‬
‫>‪<br‬‬ ‫واﻟﺴﻤﻚ ‪.‬‬
‫ﻗﺎﺋﻤﺔ اﻟﻤﺸﺘﺮﯾﺎت‬
‫>‪<br‬‬
‫>‪<hr color=red size=10‬‬
‫>‪<br‬‬
‫ﺗﻔﺎح‬
‫>‪<br‬‬
‫> ‪<hr color=#0000 width=50% align=right‬‬
‫>‪<br‬‬
‫ﺑﺮﺗﻘﺎل‬
‫>‪<br‬‬
‫> ‪<hr color=#0000 width=50% align=right‬‬
‫>‪<br‬‬
‫ﻟﯿﻤﻮن‬
‫>‪<br‬‬
‫>‪<hr color=red size=10‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫و اﻻن ﺳﻮف ﻧﺪرس ﻛﯿﻔﯿﺔ ادراج ارﺗﺒﺎط ﺗﺸﻌﯿﺒﻲ ) ﻋﻨﺪ اﻟﻨﻘﺮ ﻋﻠﻰ اﻻرﺗﺒﺎط اﻟﺘﺸﻌﯿﺒﻲ ﺗﺬھﺐ‬
‫اﻟﻰ ﺻﻔﺤﺔ أﺧﺮى او ﻣﻜﺎن ﻣﻌﯿﻦ ﻣﻦ ﻧﻔﺲ اﻟﺼﻔﺤﺔ(‪.‬‬
 ‫ادراج ارﺗﺒﺎط ﺗﺸﻌﯿﺒﻲ‬

‫أوﻻ‪ :‬ﻣﺎذا ﻧﻘﺼﺪ ﺑﺎﻹرﺗﺒﻂ اﻟﺘﺸﻌﯿﺒﻲ؟‬

‫اﻻرﺗﺒﺎط اﻟﺘﺸﻌﯿﺒﻲ ھﻮ ﻋﺒﺎرة ﻋﻦ وﺻﻠﺔ )اﻣﺎ ﻧﺺ او ﺻﻮرة ( ﻋﻨﺪ اﻟﻨﻘﺮ ﻋﻠﯿﮭﺎ ﻧﺬھﺐ‬
‫اﻟﻰ ﺻﻔﺤﺔ اﻧﺘﺮﻧﺖ اﺧﺮى او ﻣﻜﺎن ﻣﻌﯿﻦ ﻣﻦ ﻧﻔﺲ اﻟﺼﻔﺤﺔ ﻛﻤﺎ ﯾﻤﻜﻦ ﺗﺸﻐﯿﻞ و ﻓﺘﺢ اي ﻣﻠﻒ‬
‫ﯾﻤﻜﻦ ان ﯾﺸﻐﻠﮫ اﻟﻮﯾﻨﺪوز )ﺻﻮرة ‪ ،‬ﻓﯿﺪﯾﻮ‪،‬ﻣﻠﻒ ﻣﻀﻐﻮط‪.....،‬اﻟﺦ(او ﺣﺘﻰ ﺗﺸﻐﯿﻞ ﻣﺤﺮر‬
‫اﻻﻣﯿﻼت اﻻﻓﺘﺮاﺿﻲ ﻟﻜﺘﺎﺑﺔ رﺳﺎﻟﺔ اﻟﻜﺘﺮوﻧﯿﺔ ﻣﺜﻞ ﺑﺮﻧﺎﻣﺞ ‪. MS outlook‬‬

‫و ﯾﻤﻜﻦ ﺗﻘﺴﯿﻢ ھﺬا اﻟﺪرس اﻟﻰ ﻗﺴﻤﯿﻦ ‪:‬‬

‫‪.1‬ﻋﻤﻞ ارﺗﺒﺎط ﺗﺸﻌﯿﺒﻲ ﻟﺼﻔﺤﺔ اﻧﺘﺮﻧﺖ اﺧﺮى او ﺻﻮرة او ﻓﯿﺪﯾﻮ او‪....‬اﻟﺦ او اﻣﯿﻞ‬
‫‪.2‬ﻋﻤﻞ ارﺗﺒﺎط ﺗﺸﻌﯿﺒﻲ ﻟﻤﻜﺎن ﻣﻌﯿﻦ ﻣﻦ ﻧﻔﺲ اﻟﺼﻔﺤﺔ‬

‫وﻧﺒﺪأ اﻻن ﺑﺎﻟﻘﺴﻢ اﻻول‪:‬‬

‫ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ >‪ <a></a‬و اﻟﺼﻔﺔ ‪ href‬ﻛﻤﺎ ﯾﻠﻲ ‪:‬‬

‫~~~~~~~~~~~ > ‪<a href=…….‬‬ ‫>‪</a‬‬

‫‪1‬‬ ‫‪2‬‬

‫‪ .1‬ﯾﻜﺘﺐ ﻋﻨﻮان ﺻﻔﺤﺔ اﻻﻧﺘﺮﻧﺖ اﻟﻤﺮاد زﯾﺎرﺗﮭﺎ او ﻋﻨﻮان اﻟﻤﻠﻒ اﻟﻤﺮاد ﻓﺘﺤﮫ و ﻟﮭﺬا اﻟﻌﻨﻮان‬
‫ﻧﻔﺲ اﻟﺤﺎﻻت اﻟﺘﻲ ﺗﻢ ﺷﺮﺣﮭﺎ ﻓﻲ درس ادراج اﻟﺼﻮرة‬
‫ﻣﺜﻼ ‪http://www.stars4arab.net/uplo/wadea.zip‬‬
‫اوﯾﻜﺘﺐ اﻻﻣﯿﻞ اﻟﻤﺮاد ﻋﻤﻞ ارﺗﺒﺎط ﺗﺸﻌﯿﺒﻲ ﻟﮫ وذﻟﻚ ﻛﻤﺎ ﯾﻠﻲ‪:‬‬
‫‪mailto:software_en2002@yahoo.com‬‬
‫ﻛﻠﻤﺔ ‪ mailto:‬ﺿﺮورﯾﺔ وﻧﻜﺘﺐ ﺑﻌﺪھﺎ اﻻﻣﯿﻞ ‪.‬‬
‫‪.2‬ﺗﻜﺘﺐ ھﻨﺎ اﻟﻮﺻﻠﺔ )اﻟﻨﺺ او اﻟﺼﻮرة ( اﻟﺘﻲ ﻧﺮﯾﺪ ان ﻧﻨﻘﺮ ﻋﻠﯿﮭﺎ)ارﺟﻊ اﻟﻰ ﺗﻌﺮﯾﻒ‬
‫اﻻرﺗﺒﺎط اﻟﺘﺸﻌﯿﺒﻲ (‬
‫ﻓﻲ ﺣﺎﻟﺔ ان ﯾﻜﻮن اﻻرﺗﺒﺎط اﻟﺘﺸﻌﯿﺒﻲ ﻻﻣﯿﻞ ﻋﻨﺪ اﻟﻀﻐﻂ ﻋﻠﻰ اﻟﻨﺺ او اﻟﺼﻮرة ﯾﻔﺘﺢ ﻟﻨﺎ‬
‫ﺑﺮﻧﺎﻣﺞ ﻣﺤﺮر اﻻﻣﯿﻼت اﻻﻓﺘﺮاﺿﻲ وﻋﻨﺪ ﻛﻠﻤﺔ ‪ To:‬ﯾﻜﺘﺐ اﻻﻣﯿﻞ ﻛﻤﺎ ﻓﻲ اﻟﺼﻮرة ‪:‬‬
 ‫ﻣﺜﺎل ‪:10‬‬
‫ﻟﻨﻘﻮم ﺑﺘﺼﻤﯿﻢ اﻟﺼﻔﺤﺔ اﻟﺘﺎﻟﯿﺔ ‪:‬‬

‫ﺑﺤﯿﺚ ﻋﻨﺪ اﻟﻨﻘﺮ ﻋﻠﻰ ﻛﻠﻤﺔ ‪ Yahoo‬ﯾﺬھﺐ اﻟﻰ ﺻﻔﺤﺔ اﻟﺮﺋﯿﺴﯿﺔ ﻟﻤﻮﻗﻊ ‪Yahoo‬‬

‫وﻋﻨﺪ اﻟﻨﻘﺮ ﻋﻠﻰ ﻛﻠﻤﺔ ‪ All The Web‬ﯾﺬھﺐ اﻟﻰ اﻟﺼﻔﺤﺔ اﻟﺮﺋﯿﺴﯿﺔ ﻟﻤﻮﻗﻊ ‪All The‬‬
‫‪Web‬‬

‫وﻋﻨﺪ اﻟﻨﻘﺮ ﻋﻠﻰ اﻟﺼﻮرة ‪ Google‬ﯾﺬھﺐ اﻟﻰ اﻟﺼﻔﺤﺔ اﻟﺮﺋﯿﺴﯿﺔ ﻟﻤﻮﻗﻊ ‪Google‬‬

‫وﻋﻨﺪ اﻟﻨﻘﺮ ﻋﻠﻰ اﻟﺠﻤﻠﺔ " اﺳﺘﻤﻊ ﻟﺮواﺋﻊ اﻟﺸﯿﺦ ﻣﺸﺎري اﻟﻌﻔﺎﺳﻲ " ﯾﻘﻮم ﺑﻔﺘﺢ ﻣﻠﻒ ذو اﻻﻣﺘﺪاد‬
‫‪ rm‬اي ﻣﻠﻒ ﺻﻮﺗﻲ‪.‬‬
 :‫اﻟﻜﻮد‬
<html dir=rtl>
<head>
<title>
‫ﺻﻔﺤﺘﻲ اﻻوﻟﻰ‬
</title>
</head>
<body>
<center><font size=24pt> ‫< ﺑﺴﻢ اﷲ اﻟﺮﺣﻤﻦ اﻟﺮﺣﯿﻢ‬font></center>
<br>
<hr color=red size=10 >
‫أھﻢ ﻣﺤﺮﻛﺎت اﻟﺒﺤﺚ‬
<br>
<hr width=40% align=right>
<br>
<a href=http://www.yahoo.com>Yahoo</a>
<br>
<hr width=40% align=right>
<br>
<a href=http://www.alltheweb.com>All The Web</a>
<br>
<hr width=40% align=right>
<br>
<a href=http://www.google.com><img src=google.gif></a>
<br>
<hr color=red size=10 >
<a href=begin_alra7man.rm>‫< اﺳﺘﻤﻊ ﻟﺮواﺋﻊ اﻟﺸﯿﺦ ﻣﺸﺎري اﻟﻌﻔﺎﺳﻲ‬/a>
</body>
</html>
 ‫ﺷﺮح اﻟﻜﻮد‪:‬‬

‫>‪<a href=http://www.yahoo.com>Yahoo</a‬‬

‫اﻟﻜﻠﻤﺔ اﻟﺘﻲ ﺗﻈﮭﺮ ﻓﻲ اﻟﺸﺎﺷﺔ‬

‫اﻟﺼﻔﺤﺔ اﻟﻤﺮاد اﻟﺬھﺎب اﻟﯿﮭﺎ‬ ‫وﺳﻮف ﻧﻘﻮم ﺑﺎﻟﻨﻘﺮ ﻋﻠﯿﮭﺎ‬
‫)ﺻﻔﺤﺔ اﺧﺮى(‬ ‫)ﻧﺺ(‬

‫>‪<a href=http://www.google.com><img src=google.gif></a‬‬

‫اﻟﺼﻔﺤﺔ اﻟﻤﺮاد اﻟﺬھﺎب اﻟﯿﮭﺎ‬ ‫اﻟﺼﻮرة اﻟﺘﻲ ﺗﻈﮭﺮ ﻓﻲ اﻟﺸﺎﺷﺔ‬

‫)ﺻﻔﺤﺔ اﺧﺮى(‬ ‫وﺳﻮف ﻧﻘﻮم ﺑﺎﻟﻨﻘﺮ ﻋﻠﯿﮭﺎ‬
‫)ﺻﻮرة(‬

‫>‪ </a‬اﺳﺘﻤﻊ ﻟﺮواﺋﻊ اﻟﺸﯿﺦ ﻣﺸﺎري اﻟﻌﻔﺎﺳﻲ>‪<a href=begin_alra7man.rm‬‬

‫اﻟﻤﻠﻒ اﻟﻤﺮاد ﻓﺘﺤﮫ و ﺗﺸﻐﯿﻠﮫ و ھﻮ‬

‫ھﻨﺎ ﻣﻠﻒ ﺻﻮﺗﻲ ذو اﻻﻣﺘﺪاد ‪rm‬‬ ‫اﻟﺠﻤﻠﺔ اﻟﺘﻲ ﺗﻈﮭﺮ ﻓﻲ اﻟﺸﺎﺷﺔ‬
‫)ﻣﻠﻒ(‬ ‫وﺳﻮف ﻧﻘﻮم ﺑﺎﻟﻨﻘﺮ ﻋﻠﯿﮭﺎ‬
‫)ﻧﺺ(‬

‫ﻣﻼﺣﻈﺎت ‪:‬‬
‫‪.1‬ﻻﺣﻆ ان اﻟﻜﻼم )اﻟﻨﺺ( اﻟﺬي ﯾﻜﻮن ﻟﮫ ارﺗﺒﺎط ﺗﺸﻌﯿﺒﻲ ﯾﻜﻮن ﻟﻮﻧﮫ ازرق وﺗﺤﺘﮫ ﺧﻂ وﻋﻨﺪ وﺿﻊ‬
‫اﻟﻤﺆﺷﺮ ﻋﻠﯿﮫ ﯾﺼﺒﺢ ﺷﻜﻞ اﻟﻤﺆﺷﺮ ﻋﻠﻰ ﺷﻜﻞ ﯾﺪ‪.‬‬
‫‪.2‬وﻻﺣﻆ ان اﻟﺼﻮرة اﻟﺘﻲ ﯾﻜﻮن ﻟﮭﺎ ارﺗﺒﺎط ﺗﺸﻌﯿﺒﻲ ﺗﺤﺎط ﺑﻠﻮن ازرق وﻋﻨﺪ وﺿﻊ اﻟﻤﺆﺷﺮ ﻋﻠﯿﮭﺎ‬
‫ﯾﺼﺒﺢ ﺷﻜﻞ اﻟﻤﺆﺷﺮ ﻋﻠﻰ ﺷﻜﻞ ﯾﺪ ‪.‬‬
‫‪ .3‬ﻋﻨﺪ زﯾﺎرة اﻟﺮاﺑﻂ ) اي ﻋﻨﺪ اﻟﻨﻘﺮ ﻋﻠﻰ اﻻرﺗﺒﺎط اﻟﺘﺸﻌﯿﺒﻲ و اﻟﻌﻮدة اﻟﻰ اﻟﺼﻔﺤﺔ( ﯾﺼﺒﺢ ﻟﻮن‬
‫اﻟﻜﻼم ﻟﻮن ﻗﺮﻣﺰي ﻛﻤﺎ ﻓﻲ اﻟﺼﻮرة ‪:‬‬

‫وﻓﻲ ﺣﺎﻟﺔ اﻟﺼﻮرة ﯾﺼﺒﺢ اﻟﺨﻂ اﻟﻤﺤﯿﻂ ﺑﺎﻟﺼﻮرة ﺑﺎﻟﻠﻮن اﻟﻘﺮﻣﺰي ﻛﻤﺎ ﻓﻲ اﻟﺼﻮرة‪:‬‬
‫‪.4‬ﻋﻨﺪ اﻟﻀﻐﻂ ﻋﻠﻰ اﻟﺮاﺑﻂ "رواﺋﻊ اﻟﺸﯿﺦ ﻣﺸﺎري اﻟﻌﻔﺎﺳﻲ" ﺗﻈﮭﺮ ﻟﺪﯾﻚ اﻟﺸﺎﺷﺔ اﻟﺘﺎﻟﯿﺔ ﻟﻜﻮن‬
‫اﻟﺮاﺑﻂ ﯾﺆدي اﻟﻰ ﻣﻠﻒ ‪:‬‬

‫ﻟﯿﺴﺎﻟﻚ ھﻞ ﺗﺮﯾﺪ ﻓﺘﺢ اﻟﻤﻠﻒ ام ﺣﻔﻈﮫ؟‬

‫و اﻻن ﻟﻨﻨﻄﻠﻖ اﻟﻰ اﻟﻘﺴﻢ اﻟﺜﺎﻧﻲ اﻧﻘﻮم ﺑﻌﻤﻞ ارﺗﺒﺎط ﺗﺸﻌﯿﺒﻲ ﻟﻤﻜﺎن ﻣﻌﯿﻦ ﻣﻦ ﻧﻔﺲ اﻟﺼﻔﺤﺔ ‪:‬‬
‫ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ >‪ <a></a‬و اﻟﺼﻔﺔ ‪ href‬ﻣﻊ اﺳﺘﺨﺪام اﻻﺷﺎرة ‪ #‬ﻛﻤﺎ ﯾﻠﻲ ‪:‬‬

‫>‪<a href =#......> ~~~~~~~~~~~~~~ </a‬‬

‫وﻧﺎﺗﻲ ﻋﻨﺪ اﻟﻤﻜﺎن اﻟﺬي ﻧﺮﯾﺪ اﻟﺬھﺎب اﻟﯿﮫ ﻋﻨﺪ ﻧﻘﺮ اﻻرﺗﺒﺎط اﻟﺘﺸﻌﯿﺒﻲ‬
‫وﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ >‪ <a></a‬و اﻟﺼﻔﺔ ‪ name‬ﻛﻤﺎ ﯾﻠﻲ ‪:‬‬

‫>‪<a name =…….>~~~~~~~~~~~~</a‬‬

‫و اﻻﺳﻢ اﻟﺬي ﯾﻜﺘﺐ ﺑﻌﺪ اﻟﺼﻔﺔ ‪ name‬ﯾﻜﺘﺐ ﺑﻌﺪ اﺷﺎرة ‪#‬‬
‫اﻟﯿﻚ ﻋﺰﯾﺰي اﻟﻘﺎرئ اﻟﻤﺜﺎل اﻟﺘﺎﻟﻲ ﻟﺘﻮﺿﯿﺢ اﻻﻣﺮ ‪:‬‬
‫ﻟﻮ اردﻧﺎ ﺗﺼﻤﯿﻢ ﺻﻔﺤﺔ اﻧﺘﺮﻧﺖ ﺗﺤﺘﻮي ﻋﻠﻰ اﺳﻤﺎء اﻟﺪول اﻟﻌﺮﺑﯿﺔ وﻋﻨﺪ اﻟﻀﻐﻂ‬
‫ﻋﻠﻰ اﺳﻢ اﻟﺪوﻟﺔ ﻧﻨﺘﻘﻞ اﻟﻰ ﺟﺰء ﻣﻌﯿﻦ ﻣﻦ ﻧﻔﺲ اﻟﺼﻔﺤﺔ ﯾﺤﺘﻮي ﻋﻠﻰ ﻣﻌﻠﻮﻣﺎت ﻟﺘﻠﻚ اﻟﺪوﻟﺔ‬
‫ﯾﻌﻨﻲ ﻣﺜﻼ‪:‬‬
‫اﻷردن‬
‫ﻓﻠﺴﻄﯿﻦ‬
‫اﻟﻌﺮاق‬
‫ﺳﻮرﯾﺎ‬
‫ﻓﻌﻨﺪ اﻟﻀﻐﻂ ﻋﻠﻰ ﻛﻠﻤﺔ اﻻردن ﻧﻨﺘﻘﻞ اﻟﻰ ﺟﺰء ﻣﻌﯿﻦ ﻣﻦ ﻧﻔﺲ اﻟﺸﺎﺷﺔ ﯾﺤﺘﻮي ﻋﻠﻰ‬
‫ﻣﻌﻠﻮﻣﺎت ﻋﻦ اﻻردن ﻟﻌﻤﻞ ذﻟﻚ ﻧﻘﻮم ﺑﻤﺎ ﯾﻠﻲ ‪:‬‬
‫>‪</a‬اﻷردن> ‪<a href=#j‬‬
‫>‪</a‬ﻓﻠﺴﻄﯿﻦ> ‪<a href=#p‬‬
‫>‪</a‬اﻟﻌﺮاق>‪<a href=#i‬‬
‫>‪</a‬ﺳﻮرﯾﺎ>‪<a href=#s‬‬
‫‪.‬‬
‫‪.‬‬
‫‪.‬‬
‫>‪</a‬ﻣﻌﻠﻮﻣﺎت ﻋﻦ اﻻردن>‪< a name=j‬‬
‫وھﻜﺬا ﻓﺎﻧﮫ ﻋﻨﺪ اﻟﻨﻘﺮ ﻋﻠﻰ ﻛﻠﻤﺔ اﻻردن ﻧﺬھﺐ ﻣﺒﺎﺷﺮة اﻟﻰ اﻟﺠﻤﻠﺔ ﻣﻌﻠﻮﻣﺎت ﻋﻦ اﻻردن‬
‫وﻧﻌﻤﻞ ﻧﻔﺲ اﻟﺸﺊ ﻓﻲ ﺑﺎﻗﻲ اﻟﻮﺻﻼت‪.‬‬

‫و اﻻن ﻟﻨﺎﺧﺬ ﻣﺜﺎﻻ ﻋﻤﻠﯿﺎ ﻟﺘﻮﺿﯿﺢ اﻻﻣﺮ ‪.‬‬

‫ﻣﺜﺎل ‪: 11‬ﺻﻤﻢ اﻟﺼﻔﺤﺔ اﻟﺘﺎﻟﯿﺔ ‪:‬‬

‫‪1‬‬
 ‫‪2‬‬

‫)ﺣﯿﺚ ان ‪ 2‬ھﻲ ﺗﻜﻤﻠﺔ ﺻﻔﺤﺔ ‪ (1‬وﻋﻨﺪ اﻟﻀﻐﻂ ﻋﻠﻰ ﺟﻤﻠﺔ "ﺗﺼﻤﯿﻢ ﻣﻮاﻗﻊ اﻧﺘﺮﻧﺖ"‬
‫ﻧﺬھﺐ ﻣﺒﺎﺷﺮة اﻟﻰ ﺟﻤﻠﺔ "ﻣﻮﻋﺪ اﻻﻣﺘﺤﺎن"‪.‬‬

‫اﻟﻜﻮد ‪:‬‬
‫>‪<html dir=rtl‬‬
‫>‪<head‬‬
‫>‪</title‬اوﻗﺎت اﻻﻣﺘﺤﺎﻧﺎت>‪<title‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪</center‬ﺑﺴﻢ اﷲ اﻟﺮﺣﻤﻦ اﻟﺮﺣﯿﻢ>‪<center‬‬
‫>‪</a‬ﺗﺼﻤﯿﻢ ﻣﻮاﻗﻊ اﻧﺘﺮﻧﺖ>‪<a href=#d‬‬
‫>‪<br><br><br><br><br><br><br><br><br><br><br><br‬‬
‫>‪<br><br‬‬
‫>‪<br><br><br><br><br><br><br><br‬‬
‫>‪</a><br‬ﻣﻮﻋﺪ اﻻﻣﺘﺤﺎن>‪<a name=d‬‬
‫اﻻﺣﺪ ﻣﻦ اﻟﺴﺎﻋﺔ ‪ 11‬اﻟﻰ اﻟﺴﺎﻋﺔ ‪1‬‬
‫>‪</body‬‬
‫>‪</html‬‬
 ‫ادراج ﺟﺪول‬

‫ﻟﻤﻌﺮﻓﺔ ﻛﯿﻒ ﯾﻤﻜﻨﻨﺎ ان ﻧﺪرج ﺟﺪول ﯾﺠﺐ ﻋﻠﯿﻨﺎ ان ﻧﻔﮭﻢ اﻟﺤﻘﺎﺋﻖ اﻟﺘﺎﻟﯿﺔ ‪:‬‬

‫ﺟﺪول ﯾﺒﯿﻦ اﻟﻤﺎدة و ﺳﻌﺮھﺎ‬

‫اﻟﺴﻌﺮ‬ ‫اﻟﻤﺎدة‬
‫‪100‬‬ ‫ﻋﺼﯿﺮ‬
‫‪200‬‬ ‫ﻟﺒﻦ‬
‫‪100‬‬ ‫ﺣﻠﯿﺐ‬
‫‪400‬‬ ‫اﻟﻤﺠﻤﻮع‬

‫ﻋﺒﺎرة " ﺟﺪول ﯾﺒﯿﻦ اﻟﻤﺎدة و ﺳﻌﺮھﺎ" ﯾﺴﻤﻰ ﺗﻌﻠﯿﻖ )‪(Caption‬‬

‫اﻟﺼﻒ اﻟﺬي ﺑﺎﻟﻠﻮن اﻻﺧﻀﺮ ﻧﺴﻤﯿﮫ رأس اﻟﺠﺪول )‪(Table Head‬‬
‫اﻟﺼﻒ اﻟﺬي ﺑﺎﻟﻠﻮن اﻻﺣﻤﺮ ﻧﺴﻤﯿﮫ ﺟﺴﻢ اﻟﺠﺪول )‪(Table Body‬‬
‫اﻟﺼﻒ اﻟﺬي ﺑﺎﻟﻠﻮن اﻻزرق ﻧﺴﻤﯿﮫ ذﯾﻞ اﻟﺠﺪول )‪(Table Footer‬‬
‫وھﺬه اﻟﻨﻘﺎط اﻻرﺑﻌﺔ ﺗﻌﺘﺒﺮ اﻟﻌﻨﺎﺻﺮ اﻻﺳﺎﺳﯿﺔ ﻟﺘﻜﻮﯾﻦ ﺟﺪول‬

‫ﻟﻌﻤﻞ اﻟﺠﺪول ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ >‪<table></table‬‬ ‫§‬

‫ﻟﻌﻤﻞ ﺟﺰء اﻟﺘﻌﻠﯿﻖ ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ >‪<caption></caption‬‬ ‫§‬
‫ﻟﻌﻤﻞ ﺟﺰء راس اﻟﺠﺪول ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ >‪<thead></thead‬‬ ‫§‬
‫ﻟﻌﻤﻞ ﺟﺰء ﺟﺴﻢ اﻟﺠﺪول ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ >‪<tbody></tbody‬‬ ‫§‬
‫ﻟﻌﻤﻞ ﺟﺰء ذﯾﻞ اﻟﺠﺪول ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ >‪<tfoot></tfoot‬‬ ‫§‬
‫ﻟﻌﻤﻞ ﺳﻄﺮ ﻓﻲ أي ﺟﺰء ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ >‪<tr></tr‬‬ ‫§‬
‫ﻟﻌﻤﻞ ﺧﻠﯿﺔ ﻓﻲ اﻟﺮاس ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ >‪<th></th‬‬ ‫§‬
‫ﻟﻌﻤﻞ ﺧﻠﯿﺔ ﻓﻲ اﻟﺠﺴﻢ ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ >‪<td></td‬‬ ‫§‬
‫ﻟﻌﻤﻞ ﺧﻠﯿﺔ ﻓﻲ اﻟﺬﯾﻞ ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ >‪<th></th‬‬ ‫§‬
 ‫ﻣﻼﺣﻈﺔ‪:‬ﯾﻤﻜﻦ اﻻﺳﺘﻐﻨﺎء ﻋﻦ ﻋﺪد ﻣﻦ اﻟﻌﻨﺎﺻﺮ اﻻﺳﺎﺳﯿﺔ اﻟﻤﻜﻮﻧﺔ ﻟﻠﺠﺪول )ﯾﻤﻜﻦ ان‬
‫ﯾﻜﻮن اﻟﺠﺪول ﻓﻘﻂ ﻣﻜﻮن ﻣﻦ ﺟﺰء اﻟﺠﺴﻢ او اﻟﺮاس او اﻟﺬﯾﻞ وھﻜﺬا‪(...‬‬

‫ھﻨﺎك ﻣﻼﺣﻈﺔ ھﺎﻣﺔ ﺟﺪا ﺗﻘﻮل "ﯾﻌﺘﻤﺪ ﻋﻤﻞ اﻟﺼﻔﺔ)‪ (attribute‬ﻋﻠﻰ اﻟﻮﺳﻢ اﻟﺬي ﺗﺴﻨﺪ‬
‫اﻟﯿﮫ" و ﻣﻦ ھﻨﺎ ﻧﻘﻮل ﻓﻲ درﺳﻨﺎ ھﺬا ان اﻟﺼﻔﺔ اذا اﺳﻨﺪت اﻟﻰ >‪ <table‬ﻓﺎن ھﺬه اﻟﺼﻔﺔ‬
‫ﺗﺼﺒﺢ ﻟﻠﺠﺪول ﻛﺎﻣﻞ و اذا اﺳﻨﺪت اﻟﻰ >‪ <tr‬ﻓﺎن ھﺬه اﻟﺼﻔﺔ ﺗﺼﺒﺢ ﻟﮭﺬا اﻟﺴﻄﺮ وھﻜﺬ ا‪...‬‬
‫ﺳﯿﺘﻀﺢ ھﺬا اﻟﻤﻔﮭﻮم ﺑﺎذن اﷲ ﻣﻦ ﺧﻼل اﻻﻣﺜﻠﺔ اﻟﻘﺎدﻣﺔ‪.‬‬

‫و اﻻن ﻟﻨﺎﺧﺬ ﻣﺜﺎﻻ ﺑﺴﯿﻄﺎ ﺣﺘﻰ ﻧﺘﻌﺮف أﻛﺜﺮ ﻋﻠﻰ ﻋﻤﻠﯿﺔ ادراج اﻟﺠﺪاول ﺑﻠﻐﺔ‬
‫اﻟﮭﺘﻤﻞ وﻣﻦ ﺛﻢ ﺳﻮف ﻧﻨﺘﻘﻞ اﻟﻰ ﻣﺜﺎل اﻛﺜﺮ ﺗﻌﻘﯿﺪا وھﻜﺬا ‪...‬‬

‫ﻣﺜﺎل ‪: 12‬‬
‫ﻟﻨﻘﻢ ﺑﺘﺼﻤﯿﻢ اﻟﺼﻔﺤﺔ اﻟﺘﺎﻟﯿﺔ ‪:‬‬
‫>‪<html dir=rtl‬‬ ‫اﻟﻜﻮد ‪:‬‬
‫>‪<head‬‬ ‫ﻻﺣﻆ اﻻوﺳﻤﺔ اﻟﻤﺴﺘﺨﺪﻣﺔ ﻟﻌﻤﻞ‬
‫>‪<title‬‬ ‫ﻛﻞ ﻋﻨﺼﺮ ﻣﻦ ﻋﻨﺎﺻﺮ اﻟﺠﺪول‬
‫ﺻﻔﺤﺘﻲ اﻻوﻟﻰ‬
‫اﻟﺮﺋﯿﺴﯿﺔ‪:‬‬
‫>‪</title‬‬
‫>‪</head‬‬ ‫‪.1‬اﻟﺘﻌﻠﯿﻖ )‪(caption‬‬
‫>‪<body‬‬ ‫‪.2‬اﻟﺮاس )‪(head‬‬
‫>‪ </font></center‬ﺑﺴﻢ اﷲ اﻟﺮﺣﻤﻦ اﻟﺮﺣﯿﻢ >‪<center><font size=24pt‬‬ ‫‪.3‬اﻟﺠﺴﻢ )‪(body‬‬
‫>‪<br‬‬ ‫‪.4‬اﻟﺬﯾﻞ)‪(foot‬‬
‫>"‪<table border="1" width="186‬‬ ‫وﻻﺣﻆ ﻃﺮﯾﻘﺔ ﻋﻤﻞ اﻻﺳﻄﺮ‬
‫>‪ </caption‬ﻗﺎﺋﻤﺔ ﺑﺎﺳﻤﺎء اﻟﻤﻮاد واﺳﻌﺎرھﺎ>‪<caption‬‬ ‫واﻟﺨﻼﯾﺎ ﻓﻲ ﻛﻞ ﻗﺴﻢ‬
‫>‪<thead‬‬
‫ﻓﮭﺬا اﻟﻤﺜﺎل ﯾﻌﺪ ﺗﻄﺒﯿﻘﺎ ﻣﺒﺎﺷﺮ ﻋﻠﻰ‬
‫>‪<tr‬‬
‫>‪</th‬اﻟﻤﺎدة>‪<th‬‬ ‫ﻣﺎ ﺗﻢ ﺷﺮﺣﮫ‬
‫>‪</th‬اﻟﺴﻌﺮ>‪<th‬‬ ‫ﻟﻜﻦ‪...‬‬
‫>‪</tr‬‬ ‫ﻻﺣﻆ ﻣﺎ ﯾﻠﻲ‪:‬‬
‫>‪</thead‬‬ ‫‪<table‬‬
‫>‪<tbody‬‬ ‫>"‪border="1"width="186‬‬
‫>‪<tr‬‬
‫>‪</td‬ﻋﺼﯿﺮ>‪<td‬‬
‫>‪<td>100</td‬‬
‫ﺗﺴﺘﺨﺪم اﻟﺼﻔﺔ )‪ (border‬وذﻟﻚ‬
‫>‪</tr‬‬ ‫ﻟﺘﺤﺪﯾﺪ ﺳﻤﻚ اﻃﺎر اﻟﺠﺪول وﻟﻮ‬
‫>‪<tr‬‬ ‫اﻧﻨﺎ ﻟﻢ ﻧﻜﺘﺐ ھﺬه اﻟﺼﻔﺔ ﻓﺎن‬
‫>‪</td‬ﻟﺒﻦ>‪<td‬‬ ‫اﻟﮭﺘﻤﻞ ﺗﻌﺘﺒﺮه ﺻﻔﺮا و ﺑﺎﻟﺘﺎﻟﻲ‬
‫>‪<td>200</td‬‬ ‫ﯾﺼﺒﺢ اﻟﺠﺪول دون اﻃﺎر‬
‫>‪</tr‬‬
‫>‪<tr‬‬ ‫ﺗﺴﺘﺨﺪم اﻟﺼﻔﺔ )‪ (width‬وذﻟﻚ‬
‫>‪</td‬ﺣﻠﯿﺐ>‪<td‬‬
‫ﻟﺘﺤﺪﯾﺪ ﻋﺮض اﻟﺠﺪول‬
‫>‪<td>100</td‬‬
‫>‪</tr‬‬
‫>‪</tbody‬‬ ‫ﻻﺣﻆ اﯾﻀﺎ ان ﻣﺎ ﯾﻮﺟﺪ ﻓﻲ ﺟﺰء‬
‫>‪<tfoot‬‬ ‫اﻟﺮاس)‪ (head‬و ﺟﺰء اﻟﺬﯾﻞ‬
‫>‪<tr‬‬ ‫)‪ (foot‬ﯾﻌﻤﻞ ﻟﮫ ﺗﻠﻘﺎﺋﯿﺎ ﺗﻮﺳﯿﻂ‬
‫>‪</th‬اﻟﻤﺠﻤﻮع>‪<th‬‬ ‫)ﻻﺣﻆ ذﻟﻚ ﻋﻠﻰ ﻛﻠﻤﺔ اﻟﻤﺎدة‬
‫>‪<th>400</th‬‬ ‫وﻛﻠﻤﺔ اﻟﺴﻌﺮو ﻛﺬﻟﻚ ﻛﻠﻤﺔ‬
‫>‪</tr‬‬
‫>‪</tfoot‬‬
‫ﻣﺠﻤﻮع و ‪(400‬‬
‫>‪</table‬‬
‫>‪</body‬‬
‫>‪</html‬‬
 ‫ﻣﺜﺎل ‪: 13‬‬
‫ﺳﻮف ﻧﺮﻛﺰ ﻓﻲ ھﺬا اﻟﻤﺜﺎل ﻋﻠﻰ ﻛﯿﻔﯿﺔ اﻟﺘﺤﻜﻢ ﺑﺎﻟﻤﺤﺎذاة )ﯾﻤﯿﻦ ‪ ،‬ﻣﻨﺘﺼﻒ ‪ ،‬ﯾﺴﺎر(‬
‫ﻋﻠﻰ ﻣﺴﺘﻮى اﻟﺠﺪول ﻛﺎﻣﻞ وﻋﻠﻰ ﻣﺴﺘﻮى اﻟﺴﻄﺮ وﺣﺘﻰ ﻋﻠﻰ ﻣﺴﺘﻮى اﻟﺨﻠﯿﺔ ‪.‬‬
‫وﺳﻨﺘﻌﻠﻢ اﯾﻀﺎ ﻛﯿﻔﯿﺔ اﻟﺘﺤﻜﻢ ﺑﻠﻮن اﻻﻃﺎر اﻟﻤﺤﯿﻂ ﺑﺎﻟﺠﺪول و اﯾﻀﺎ اﻟﺘﺤﻜﻢ ﺑﺎرﺗﻔﺎع‬
‫اﻟﺠﺪول‪.‬‬
‫ﺻﻤﻢ اﻟﺼﻔﺤﺔ اﻟﺘﺎﻟﯿﺔ ‪:‬‬
 ‫اﻟﻜﻮد‪:‬‬
‫>‪<html dir=rtl‬‬
‫ﻻﺣﻆ اﻻﻣﻮر اﻟﺘﺎﻟﯿﺔ ‪:‬‬
‫>‪<head‬‬
‫>‪<title‬‬ ‫"‪<table border="1" width="186‬‬
‫ﺻﻔﺤﺘﻲ اﻻوﻟﻰ‬ ‫"‪align=center height="176‬‬
‫>‪</title‬‬ ‫>‪bordercolor=red‬‬
‫>‪</head‬‬
‫>‪<body‬‬ ‫ﺳﻤﻚ اﻻﻃﺎر>‪border------‬‬
‫>‪ </font></center‬ﺑﺴﻢ اﷲ اﻟﺮﺣﻤﻦ اﻟﺮﺣﯿﻢ >‪<center><font size=24pt‬‬ ‫ﻋﺮض اﻟﺠﺪول>‪width-------‬‬
‫>‪<br‬‬ ‫ﻣﺤﺎذاة اﻟﺠﺪول ﻛﻠﮫ>‪align------‬‬
‫"‪<table border="1" width="186" align=center height="176‬‬ ‫ارﺗﻔﺎع اﻟﺠﺪول>‪hight-------‬‬
‫>‪bordercolor=red‬‬ ‫ﻟﻮن اﻻﻃﺎر>‪bordercolor------‬‬
‫>‪ </caption‬ﻗﺎﺋﻤﺔ ﺑﺎﺳﻤﺎء اﻟﻤﻮاد واﺳﻌﺎرھﺎ>‪<caption‬‬
‫>‪<thead‬‬ ‫>‪<tr align=center‬‬
‫>‪<tr‬‬ ‫ﻣﺤﺎذاة اﻟﺴﻄﺮ>‪align------‬‬
‫>‪</th‬اﻟﻤﺎدة>‪<th‬‬
‫>‪</th‬اﻟﺴﻌﺮ>‪<th‬‬ ‫>‪<td align=center‬‬
‫>‪</tr‬‬ ‫ﻣﺤﺎذاة اﻟﻜﻼم ﻓﻲ اﻟﺨﻠﯿﺔ >‪align-------‬‬
‫>‪</thead‬‬
‫>‪<tbody‬‬ ‫ﻻﺣﻆ اذا ان ﻋﻤﻞ اﻟﺼﻔﺎت )‪(attribute‬‬
‫>‪<tr align=center‬‬ ‫ﺑﺸﻜﻞ ﻋﺎم ﯾﻌﺘﻤﺪ ﻋﻠﻰ اﻟﻮﺳﻢ اﻟﺬي ﯾﺴﻨﺪ اﻟﯿﮫ‬
‫>‪</td‬ﻋﺼﯿﺮ>‪<td‬‬ ‫‪ ،‬ﻓﮭﺬا ﻣﺎ ﻧﻼﺣﻈﮫ ﻓﻲ ﻣﺜﺎﻟﻨﺎ ﺣﯿﺚ ان اﻟﺼﻔﺔ‬
‫>‪<td>100</td‬‬ ‫)‪ (align‬اﺧﺘﻠﻒ ﻋﻤﻠﮭﺎ ﻣﻦ ﺣﯿﺚ اﻟﻤﺤﺎذاة‬
‫>‪</tr‬‬ ‫ﻟﻠﺠﺪول او اﻟﺴﻄﺮ او اﻟﺨﻠﯿﺔ وذﻟﻚ ﺑﺎﺧﺘﻼف‬
‫>‪<tr‬‬ ‫اﻟﻮﺳﻢ اﻟﺬي اﺳﻨﺪت اﻟﯿﮫ‬
‫>‪</td‬ﻟﺒﻦ>‪<td‬‬ ‫)‪(<table>,<tr>,<td>,..‬‬
‫>‪<td>200</td‬‬
‫>‪</tr‬‬ ‫ﻣﻼﺣﻈﺔ‪:‬ﯾﻤﻜﻦ ان ﻧﻀﻊ اﻟﺼﻔﺔ ‪ align‬ﻣﻊ‬
‫>‪<tr‬‬ ‫>‪ <thead‬ﻟﺘﺼﺒﺢ اﻟﻤﺤﺎذاة ﻟﻜﻞ ﺟﺰء‬
‫>‪</td‬ﺣﻠﯿﺐ>‪<td align=center‬‬ ‫‪ head‬وﻛﺬﻟﻚ اﻻﻣﺮ ﻣﻊ >‪<tbody‬‬
‫>‪<td align=center>100</td‬‬ ‫ﻟﺘﺼﺒﺢ اﻟﻤﺤﺎذاة ﻟﺠﺰء ‪ body‬ﻛﺎﻣﻞ و‬
‫>‪</tr‬‬ ‫ﻛﺬﻟﻚ اﻻﻣﺮﻣﻊ >‪ <tfoot‬ﻟﺘﺼﺒﺢ اﻟﻤﺤﺎذاة‬
‫>‪</tbody‬‬ ‫ﻟﺠﺰء ‪ foot‬ﻛﺎﻣﻞ‬
‫>‪<tfoot‬‬
‫>‪<tr‬‬
‫>‪</th‬اﻟﻤﺠﻤﻮع>‪<th‬‬
‫>‪<th>400</th‬‬
‫>‪</tr‬‬
‫>‪</tfoot‬‬
‫>‪</table‬‬
‫>‪</body‬‬
‫>‪</html‬‬
 ‫و اﻻن ﻗﺒﻞ ان ﻧﻨﺘﻘﻞ اﻟﻰ ﻣﺜﺎل اﺧﺮ ‪ ،‬ﺳﻮف اﻗﻮم ﺑﺘﻠﺨﯿﺺ اھﻢ اﻟﺼﻔﺎت ﻟﻜﻞ وﺳﻢ ﻣﻦ‬
‫اوﺳﻤﺔ ادراج اﻟﺠﺪول ‪.‬‬

‫>‪<table‬‬
‫ﺳﻤﻚ اﻻﻃﺎر>‪1.border----------‬‬
‫ﻋﺮض اﻟﺠﺪول>‪2.width-------‬‬
‫ﻣﺤﺎذاة اﻟﺠﺪول ﻛﻠﮫ>‪3.align------‬‬
‫ارﺗﻔﺎع اﻟﺠﺪول>‪4.hight-------‬‬
‫ﻟﻮن اﻻﻃﺎر>‪5.bordercolor------‬‬
‫وﺿﻊ ﻟﻮن ﻣﻌﯿﻦ ﻛﺨﻠﻔﯿﺔ ﻟﻠﺠﺪول>‪6.bgcolor-----------‬‬
‫وﺿﻊ ﺻﻮرة ﻛﺨﻠﻔﯿﺔ ﻟﻠﺠﺪول>‪7.background-------‬‬

‫>‪<caption‬‬
‫ﻣﺤﺎذاة اﻟﺘﻌﻠﯿﻖ )ﯾﻤﯿﻦ ‪ ،‬ﺗﻮﺳﯿﻂ‪،‬ﯾﺴﺎر‪،‬اﻋﻠﻰ اﻟﺠﺪول‪،‬اﺳﻔﻞ اﻟﺠﺪول(>‪1.align---------‬‬
‫ﻣﺤﺎذاة اﻟﺘﻌﻠﯿﻖ اﻟﻌﻤﻮدﯾﺔ )اﻋﻠﻰ اﻟﺠﺪول‪،‬اﺳﻔﻞ اﻟﺠﺪول(>‪2.valign-------‬‬

‫>‪<thead‬‬
‫ﻣﺤﺎذاة ﺟﺰء اﻟﺮاس ﻛﺎﻣﻞ >‪1.align---------‬‬
‫وﺿﻊ ﻟﻮن ﻣﻌﯿﻦ ﻛﺨﻠﻔﯿﺔ ﻟﺠﺰء اﻟﺮاس>‪2.bgcolor-------‬‬

‫>‪<tbody‬‬
‫ﻣﺤﺎذاة ﺟﺰء اﻟﺠﺴﻢ ﻛﺎﻣﻞ >‪1.align---------‬‬
‫وﺿﻊ ﻟﻮن ﻣﻌﯿﻦ ﻛﺨﻠﻔﯿﺔ ﻟﺠﺰء اﻟﺠﺴﻢ>‪2.bgcolor-------‬‬

‫>‪<tfoot‬‬
‫ﻣﺤﺎذاة ﺟﺰء اﻟﺬﯾﻞ ﻛﺎﻣﻞ >‪1.align---------‬‬
‫وﺿﻊ ﻟﻮن ﻣﻌﯿﻦ ﻛﺨﻠﻔﯿﺔ ﻟﺠﺰء اﻟﺬﯾﻞ>‪2.bgcolor-------‬‬

‫>‪<tr‬‬
‫ﻣﺤﺎذاة ﻟﻠﺴﻄﺮ ﻛﻠﮫ>‪1.align------‬‬
‫ﻟﻮن اﻻﻃﺎ راﻟﻤﺤﯿﻂ ﺑﺎﻟﺴﻄﺮ>‪2.bordercolor------‬‬
‫وﺿﻊ ﻟﻮن ﻣﻌﯿﻦ ﻛﺨﻠﻔﯿﺔ ﻟﻠﺴﻄﺮ>‪3.bgcolor-----------‬‬
‫>‪ <td‬و >‪<th‬‬
‫ﻋﺮض اﻟﺨﻠﯿﺔ>‪1.width-------‬‬
‫ﻣﺤﺎذاة اﻟﻜﻼم اﻟﻤﻮﺟﻮد ﻓﻲ اﻟﺨﻠﯿﺔ>‪2.align------‬‬
‫ارﺗﻔﺎع اﻟﺨﻠﯿﺔ>‪3.hight-------‬‬
‫ﻟﻮن اﻻﻃﺎر اﻟﻤﺤﯿﻂ ﺑﺎﻟﺨﻠﯿﺔ>‪4.bordercolor------‬‬
‫وﺿﻊ ﻟﻮن ﻣﻌﯿﻦ ﻛﺨﻠﻔﯿﺔ ﻟﻠﺨﻠﯿﺔ>‪5.bgcolor-----------‬‬
‫وﺿﻊ ﺻﻮرة ﻛﺨﻠﻔﯿﺔ ﻟﻠﺨﻠﯿﺔ>‪6.background-------‬‬
‫ﻣﻨﺢ اﻟﺨﻠﯿﺔ ﻋﺮض ﺑﻤﻘﺪارﻋﺪد ﻣﻌﯿﻦ ﻣﻦ اﻟﺨﻼﯾﺎ اﻓﻘﯿﺎ )اﻋﻤﺪة(>‪7.colspan------------‬‬
‫ﻣﻨﺢ اﻟﺨﻠﯿﺔ ارﺗﻔﺎع ﺑﻤﻘﺪار ﻋﺪد ﻣﻌﯿﻦ ﻣﻦ اﻟﺨﻼﯾﺎ ﻋﻤﻮدﯾﺎ )اﺳﻄﺮ(>‪8.rowspan--------‬‬

‫ﻣﻼﺣﻈﺔ‪ background :‬ﻓﻲ ﻛﻞ اﻟﺤﺎﻻت ﯾﻜﻮن ﺑﻌﺪھﺎ اﺳﻢ اﻟﺼﻮرة وﻟﺬﻟﻚ ﻓﮭﻲ ﺗﺤﺘﻤﻞ‬
‫ﻧﻔﺲ اﻟﺤﺎﻻت اﻟﺘﻲ ﺗﻢ ﺷﺮﺣﮭﺎ ﻓﻲ درس ادراج اﻟﺼﻮر ‪.‬‬

‫ﻣﺜﺎل ‪:14‬‬
‫ﻟﻨﻘﻢ ﺑﺘﺼﻤﯿﻢ اﻟﺼﻔﺤﺔ اﻟﺘﺎﻟﯿﺔ ‪:‬‬
<html dir=rtl>
<head> : ‫اﻟﻜﻮد‬
<title>
‫ﺻﻔﺤﺘﻲ اﻻوﻟﻰ‬
</title> ‫اﻧﻈﺮ اﻟﻰ اﻟﻤﺜﺎل و‬
</head> ‫ﺗﻤﻌﻦ ﺑﻤﺎ ھﻮ ﻣﻠﻮن‬
<body> ‫ﺑﺎﻟﻠﻮن اﻻﺣﻤﺮ ﻓﮭﺬا‬
<center><font size=24pt> ‫< ﺑﺴﻢ اﷲ اﻟﺮﺣﻤﻦ اﻟﺮﺣﯿﻢ‬/font></center> ‫اﻟﻤﺜﺎل ﺗﻄﺒﯿﻖ ﻣﺒﺎﺷﺮ‬
<br>
<table border="1" width="280" align=center height="176" >
.‫ﻟﻤﺎ ﺗﻢ ﺷﺮﺣﮫ‬
<caption align= center valign= bottom >‫ﻗﺎﺋﻤﺔ ﺑﺎﺳﻤﺎء اﻟﻤﻮاد واﺳﻌﺎرھﺎ‬
</caption> :‫ﻣﻼﺣﻈﺔ‬
<thead bgcolor=green align=right> valign=bottom
<tr> ‫وذﻟﻚ ﻟﺠﻌﻞ اﻟﺘﻌﻠﯿﻖ ﻓﻲ‬
<th ><font size=24pt>‫<اﻟﻤﺎدة‬/font></th> . ‫اﺳﻔﻞ اﻟﺠﺪول‬
<th><font size=24pt>‫<اﻟﺴﻌﺮ‬/font></th>
</tr>
</thead>
<tbody bgcolor=red align=right>
<tr >
<td >‫<ﻋﺼﯿﺮ‬/td>
<td>100</td>
</tr>
<tr >
<td >‫<ﻟﺒﻦ‬/td>
<td >200</td>
</tr>
<tr>
<td >‫<ﺣﻠﯿﺐ‬/td>
<td >100</td>
</tr>
</tbody>
<tfoot bgcolor=blue align=right>
<tr>
<th>‫<اﻟﻤﺠﻤﻮع‬/th>
<th>400</th>
</tr>
</tfoot>
</table>
</body>
</html>
 ‫ﻣﺜﺎل ‪: 15‬‬
‫ﻟﻨﻘﻢ ﺑﺘﺼﻤﯿﻢ اﻟﺼﻔﺤﺔ اﻟﺘﺎﻟﯿﺔ ‪:‬‬
 : ‫اﻟﻜﻮد‬

<html dir=rtl>
<head>
<title>
‫ﺻﻔﺤﺘﻲ اﻻوﻟﻰ‬
</title>
</head>
<body>
<center><font size=24pt> ‫< ﺑﺴﻢ اﷲ اﻟﺮﺣﻤﻦ اﻟﺮﺣﯿﻢ‬/font></center>
<br>
<table border="1" width="280" align=center height="176"
bgcolor="green" >
<caption align= center valign= top >‫< ﻗﺎﺋﻤﺔ ﺑﺎﺳﻤﺎء اﻟﻤﻮاد واﺳﻌﺎرھﺎ‬/caption>
<thead >
<tr>
<th >‫<اﻟﻤﺎدة‬/th>
<th>‫<اﻟﺴﻌﺮ‬/th>
</tr>
</thead>
<tbody >
<tr>
<td width=500 height=100>‫<ﻋﺼﯿﺮ‬/td>
<td>100</td>
</tr>
<tr >
<td >‫<ﻟﺒﻦ‬/td>
<td >200</td>
</tr>
<tr>
<td >‫<ﺣﻠﯿﺐ‬/td>
<td >100</td>
</tr>
</tbody>
</table>
</body>
</html>
 ‫ﻻﺣﻆ ان اﻟﺠﺪول ﻓﻲ ھﺬا اﻟﻤﺜﺎل ﯾﺘﻜﻮن ﻓﻘﻂ ﻣﻦ ﺟﺰﺋﻲ اﻟﺮاس واﻟﺠﺴﻢ )ﺗﻢ اھﻤﺎل ﺟﺰء‬
‫اﻟﺬﯾﻞ( و ﻛﻤﺎ ﻗﻠﻨﺎ ﺳﺎﺑﻘﺎ اﻧﮫ ﯾﺼﺢ ذﻟﻚ ‪.‬‬
‫ﺗﻤﻌﻦ ﻣﺎ ھﻮ ﻣﻠﻮن ﺑﺎﻻﺣﻤﺮ وﻻﺣﻆ ﻣﺎ ﯾﺎﺗﻲ‪:‬‬
‫§ ‪valign=top‬‬
‫ﻟﺠﻌﻞ اﻟﺘﻌﻠﯿﻖ ﻓﻲ اﻋﻠﻰ اﻟﺠﺪول‬
‫§ ‪width=500‬‬
‫ﻟﺘﺤﺪﯾﺪ ﻋﺮض اﻟﺨﻠﯿﺔ‪ .‬وﻻﺣﻆ اﻧﮫ ﺑﺘﻐﯿﺮ ﻋﺮض اﻟﺨﻠﯿﺔ ﺗﻐﯿﺮ ﻋﺮض اﻟﺨﻼﯾﺎ اﻟﺘﻲ ﺗﻘﻊ ﻓﻲ‬
‫ﻧﻔﺲ ﻋﻤﻮد ھﺬه اﻟﺨﻠﯿﺔ‪.‬‬
‫§ ‪height=100‬‬
‫ﻟﺘﺤﺪﯾﺪ ارﺗﻔﺎع اﻟﺨﻠﯿﺔ ‪.‬‬
‫وﻻﺣﻆ اﻧﮫ ﺑﺘﻐﯿﺮ ارﺗﻔﺎع اﻟﺨﻠﯿﺔ ﯾﺘﻐﯿﺮ ارﺗﻔﺎع اﻟﺨﻼﯾﺎ اﻟﺘﻲ ﺗﻘﻊ ﻓﻲ ﻧﻔﺲ ﺳﻄﺮ ھﺬه اﻟﺨﻠﯿﺔ ‪.‬‬

‫ﻣﺜﺎل ‪: 16‬‬
‫ﻟﻨﻘﻢ ﺑﺘﺼﻤﯿﻢ اﻟﺼﻔﺤﺔ اﻟﺘﺎﻟﯿﺔ ‪:‬‬
<html dir=rtl>
<head>
<title> :‫اﻟﻜﻮد‬
‫ﺻﻔﺤﺘﻲ اﻻوﻟﻰ‬
</title>
</head>
<body>
<center><font size=24pt> ‫< ﺑﺴﻢ اﷲ اﻟﺮﺣﻤﻦ اﻟﺮﺣﯿﻢ‬/font></center>
<br>
<table border="1" width="280" align=right height="176" background="Coffee
Bean.bmp" >
<caption align= center valign= top >‫< ﻗﺎﺋﻤﺔ ﺑﺎﺳﻤﺎء اﻟﻤﻮاد واﺳﻌﺎرھﺎ‬/caption>
<thead >
<tr>
<th ><font size=18pt color=white>‫<اﻟﻤﺎدة‬/font></th>
<th><font size=18pt color=white>‫<اﻟﺴﻌﺮ‬/font></th>
</tr>
</thead>
<tbody >
<tr>
<td ><font size=18pt color=white>‫<ﻋﺼﯿﺮ‬/font></td>
<td><font size=18pt color=white>100</font></td>
</tr>
<tr >
<td ><font size=18pt color=white>‫<ﻟﺒﻦ‬/font></td>
<td ><font size=18pt color=white>200</font></td>
</tr>
</tbody>
</table>
<!--‫اﻟﺠﺪول اﻟﺜﺎﻧﻲ‬- ->
<table border="10" width="280" align=center height="176">
<caption align=center>‫< اﺳﻤﺎء اﻟﺘﺨﺼﺼﺎت‬/caption>
<thead>
<tr bgcolor=blue>
<th colspan=4>‫<ﻛﻠﯿﺔ اﻟﻌﻠﻮم وﺗﻜﻨﻮﻟﻮﺟﯿﺎ اﻟﻤﻌﻠﻮﻣﺎت‬/th>
</tr>
</thead>
<tbody >
<tr bgcolor=green bordercolor=red>
<td rowspan=2>‫<ھﻨﺪﺳﺔ اﻟﺒﺮﻣﺠﯿﺎت‬/td>
<td rowspan=2>‫<ﻧﻈﻢ ﻣﻌﻠﻮﻣﺎت ﺣﺎﺳﻮﺑﯿﺔ‬/td>
<td rowspan=2>‫<ﻋﻠﻢ اﻟﺤﺎﺳﻮب‬/td>
</tr>
</tbody></table>
</body>
</html>
‫ﺗﻤﻌﻦ ﺟﯿﺪا ﻓﻲ اﻟﺼﻔﺤﺔ اﻟﺘﻲ ﻧﺮﯾﺪ ﺗﺼﻤﯿﻤﮭﺎ وﻓﻲ اﻟﻜﻮد اﻻزم ﻟﻌﻤﻞ ذﻟﻚ وﻻﺣﻆ ﻣﺎ ﯾﺄﺗﻲ‪:‬‬

‫§ >‪--‬اﻟﺠﺪول اﻟﺜﺎﻧﻲ ‪<!--‬‬

‫ﻣﺎ ﯾﻮﺿﻊ ﺑﯿﻦ ‪ <!--‬وﺑﯿﻦ >‪ --‬ﺗﻌﺘﺒﺮ ﺗﻌﻠﯿﻖ وﻻ ﺗﺆﺛﺮ ﻧﮭﺎﺋﯿﺎ ﻓﻲ ﻋﻤﻠﯿﺔ اﻟﺘﺼﻤﯿﻢ‬
‫§ ‪colspan=4‬‬
‫وذﻟﻚ ﻟﺠﻌﻞ اﻟﺨﻠﯿﺔ ﺑﻤﻘﺪار ارﺑﻊ ﺧﻼﯾﺎ اﻓﻘﯿﺎ )ﺑﻤﻘﺪار ارﺑﻊ اﻋﻤﺪة(‬
‫§ ‪bordercolor=red‬‬
‫ﻟﺠﻌﻞ ﻟﻮن اﻻﻃﺎر اﻟﻤﺤﯿﻂ ﺑﺎﻟﺴﻄﺮ ﺑﺎﻟﻠﻮن اﻻﺣﻤﺮ‬
‫)ﯾﻤﻜﻦ ﻣﻼﺣﻈﺔ ذﻟﻚ اذا ﻛﺒﺮت اﻟﺼﻮرة او اذا ﺗﻢ ﺗﻄﺒﯿﻖ اﻟﻤﺜﺎل ﻋﻤﻠﯿﺎ ﻋﻠﻰ ﺟﮭﺎزك(‬
‫§ ‪rowspan=2‬‬
‫وذﻟﻚ ﻟﺠﻌﻞ اﻟﺨﻠﯿﺔ ﺑﻤﻘﺪار ﺧﻠﯿﺘﯿﻦ ﻋﻤﻮدﯾﺎ )ﺑﻤﻘﺪار ﺳﻄﺮﯾﻦ (‬

‫ﻣﺜﺎل ‪: 17‬‬
<html dir=rtl>
<head>
<title>
‫ﺻﻔﺤﺘﻲ اﻻوﻟﻰ‬ : ‫اﻟﻜﻮد‬
</title>
</head>
<body>
<center><font size=24pt> ‫< ﺑﺴﻢ اﷲ اﻟﺮﺣﻤﻦ اﻟﺮﺣﯿﻢ‬/font></center>
<br>
<table border="1" width="280" align=right height="176" >
<caption align= center valign= top >‫< ﻗﺎﺋﻤﺔ ﺑﺎﺳﻤﺎء اﻟﻤﻮاد واﺳﻌﺎرھﺎ‬/caption>
<thead >
<tr >
<th bgcolor=red><font size=18pt >‫<اﻟﻤﺎدة‬/font></th>
<th bgcolor=blue><font size=18pt >‫<اﻟﺴﻌﺮ‬/font></th>
</tr>
</thead>
<tbody >
<tr>
<td background="Coffee Bean.bmp"><font size=18pt
color=white>‫<ﻋﺼﯿﺮ‬/font></td>
<td bordercolor=green><font size=18pt >100</font></td>
</tr>
<tr>
<td background="Coffee Bean.bmp"><font size=18pt color=white
>‫<ﻟﺒﻦ‬/font></td>
<td bordercolor=green><font size=18pt >200</font></td>
</tr>
</tbody>
</table>
</body>
</html>

‫ﺗﻤﻌﻦ ﺟﯿﺪا ﺑﻤﺎ ھﻮ ﻣﻠﻮن ﺑﺎﻻﺣﻤﺮ ﻓﮭﺬا اﻟﻤﺜﺎل ﺗﻄﺒﯿﻖ ﻣﺒﺎﺷﺮ ﻟﻤﺎ ﺗﻢ ﺷﺮﺣﮫ‬
‫ ﻗﺪ ﻻ ﺗﻼﺣﻆ ان ﺣﺪود اﻟﺨﻠﯿﺔ اﺻﺒﺢ ﺑﺎﻟﻠﻮن اﻻﺧﻀﺮ‬bordercolor=green : ‫)ﻣﻼﺣﻈﺔ‬
( ‫اﻻ اذا ﺗﻢ ﺗﻜﺒﯿﺮ اﻟﺼﻮرة او ﺗﻢ ﺗﻄﺒﯿﻖ اﻟﻤﺜﺎل ﻋﻤﻠﯿﺎ ﻋﻠﻰ ﺟﮭﺎزك‬

‫وﺑﮭﺬا اﻟﻤﺜﺎل ﻋﺰﯾﺰي اﻟﻘﺎرئ ﻧﻜﻮن ﻗﺪ ﻃﺮﺣﻨﺎ اﻣﺜﻠﺔ ﻛﺎﻓﯿﺔ ﺑﺎذن اﷲ ﻋﻠﻰ ﻣﻮﺿﻮع ادراج‬
‫( اﻟﺨﺎﺻﺔ ﺑﺎﻟﺠﺪاول واﻟﺘﻲ ﺗﻢ ذﻛﺮھﺎ‬attributes)‫اﻟﺠﺪاول وﻗﺪ ﺗﻢ اﺳﺘﺨﺪام ﺟﻤﯿﻊ اﻟﺼﻔﺎت‬
.‫ﺳﺎﺑﻘﺎ‬
 ‫ﺗﻐﯿﺮ ﺧﻠﻔﯿﺔ اﻟﺼﻔﺤﺔ‬
‫ﻋﻨﺪﻣﺎ ﻧﻘﻮل اﻧﻨﺎ ﻧﺮﯾﺪ ﺗﻐﯿﺮ ﺧﻠﻔﯿﺔ اﻟﺼﻔﺤﺔ ﻓﺎﻧﻨﺎ ﺑﺎﻟﺤﻘﯿﻘﺔ ﻧﺮﯾﺪ ﺗﻐﯿﺮ ﺧﻠﻔﯿﺔ ﺟﺰء اﻟﺠﺴﻢ‬
‫)‪ (body‬ﻣﻦ ﺻﻔﺤﺔ اﻻﻧﺘﺮﻧﺖ ‪ ،‬وﺑﺎﻟﺘﺎﻟﻲ ﻟﻌﻤﻞ ذﻟﻚ ﻧﺴﺘﺨﺪم اﻟﺼﻔﺘﯿﻦ‬
‫‪ bgcolor,background‬ﻣﻊ اﻟﻮﺳﻢ >‪. <body‬‬

‫‪ <---------- bgcolor‬ﻟﺘﺤﺪﯾﺪ ﻟﻮن ﯾﻜﻮن ﺧﻠﻔﯿﺔ ﻟﻠﺼﻔﺤﺔ وﯾﻜﻮن ﺗﺤﺪﯾﺪ اﻟﻠﻮن اﻣﺎ ﺑﺎﻻﺳﻢ‬
‫او ﺑﺮﻗﻤﮫ ﻣﺴﺒﻮﻗﺎ ﺑﺎﻻﺷﺎرة ‪#‬‬
‫ﻣﺜﻼ ‪<body bgcolor=red> :‬‬
‫>‪<body bgcolor=#648fd1‬‬

‫‪ <------background‬ﻟﺘﺤﺪﯾﺪ ﺻﻮرة ﻟﺘﻜﻮن ﺧﻠﻔﯿﺔ ﻟﻠﺼﻮرة وﯾﺎﺗﻲ ﺑﻌﺪ ھﺬه اﻟﺼﻔﺔ اﺳﻢ‬
‫اﻟﺼﻮرة وﺑﺬﻟﻚ ﻓﺎن ھﺬه اﻟﺼﻔﺤﺔ اﺣﺘﻤﻞ ﺟﻤﯿﻊ ﺣﺎﻻت اﻟﺘﻲ ﺗﻢ ﺷﺮﺣﮭﺎ ﻓﻲ درس ادراج‬
‫اﻟﺼﻮر‪.‬‬
‫ﻣﺜﻼ ‪<body background=renaldo.gif> :‬‬
‫>‪<body background=http://www.stars4arab.net/uplo/w.gif‬‬

‫ﻣﺜﺎل ‪:18‬‬
<html dir=rtl>
<head>
<title>
:‫اﻟﻜﻮد‬
‫ﺻﻔﺤﺘﻲ اﻻوﻟﻰ‬
</title>
</head>
<body bgcolor=#648fd1>
<center><font size=24pt> ‫< ﺑﺴﻢ اﷲ اﻟﺮﺣﻤﻦ اﻟﺮﺣﯿﻢ‬/font></center>
<br>
<font size=24pt>‫<أھﻼ وﺳﮭﻼ ﺑﻜﻢ ﻓﻲ ﻣﻮﻗﻌﻲ‬/font>
</body>
</html>

:19 ‫ﻣﺜﺎل‬
‫>‪<html dir=rtl‬‬
‫>‪<head‬‬
‫>‪<title‬‬
‫اﻟﻜﻮد ‪:‬‬
‫ﺻﻔﺤﺘﻲ اﻻوﻟﻰ‬
‫>‪</title‬‬
‫>‪</head‬‬
‫>‪<body background=bg.jpg‬‬
‫>‪ </font></center‬ﺑﺴﻢ اﷲ اﻟﺮﺣﻤﻦ اﻟﺮﺣﯿﻢ >‪<center><font size=24pt‬‬
‫>‪<br‬‬
‫>‪</font‬أھﻼ وﺳﮭﻼ ﺑﻜﻢ ﻓﻲ ﻣﻮﻗﻌﻲ>‪<font size=24pt‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫ﻣﻼﺣﻈﺔ ‪ :‬اﻟﺼﻮرة ﻓﻲ اﻟﻤﺜﺎل ﺗﻢ ﻣﻌﺎﻟﺠﺘﮭﺎ ﺑﺒﺮﻧﺎﻣﺞ ﻣﻌﺎﻟﺠﺔ ﺻﻮر وذﻟﻚ ﻟﺘﺨﻔﯿﻒ اﻟﺘﺒﺎﯾﻦ‬
‫ﺣﺘﻰ ﯾﺼﺒﺢ اﻟﻜﻼم ﻓﻲ اﻟﺼﻔﺤﺔ اﻟﻤﺮاد ﺗﺼﻤﯿﻤﮭﺎ واﺿﺤﺎ‪.‬‬
‫اﯾﻀﺎ اﻟﺼﻮرة ﻛﺒﯿﺮة اﻟﺤﺠﻢ وﻟﺬﻟﻚ ﻓﺎﻧﮭﺎ ﻣﻸت اﻟﺼﻔﺤﺔ ﻛﺎﻣﻠﺔ ﻟﻜﻦ ﻟﻮ ﻛﺎﻧﺖ اﻟﺼﻮرة‬
‫ﺻﻐﯿﺮة ﻓﺎن ﺗﻜﺮارا ﻓﻲ اﻟﺼﻮرة ﺳﻮف ﯾﺤﺪث ﺣﺘﻰ ﯾﻘﻮم ﺑﻤﻠﺊ ﻛﺎﻣﻞ اﻟﺼﻔﺤﺔ وﯾﻤﻜﻦ ﺣﻠﮭﺎ‬
‫ﻋﻦ ﻃﺮﯾﻖ ﻣﺎ ﯾﺴﻤﻰ ‪ css‬واﻟﺘﻲ ﺳﻮف ﯾﺘﻢ ﺷﺮﺣﮭﺎ ﻻﺣﻘﺎ ‪ ،‬ﻻﺣﻆ اﻟﺼﻮرة اﻟﺘﺎﻟﯿﺔ ‪:‬‬

‫ﺣﯿﺚ اﺳﺘﺨﺪﻣﻨﺎ ﻟﻌﻤﻞ اﻟﺨﻠﻔﯿﺔ اﻟﺼﻮرة اﻟﺘﺎﻟﯿﺔ ‪:‬‬

 ‫ادراج ﻗﺎﺋﻤﺔ‬

‫ھﻨﺎك ﻧﻮﻋﯿﻦ ﻣﻦ اﻟﻘﻮاﺋﻢ ‪ :‬اﻟﻤﺮﺗﺒﺔ وﻏﯿﺮ اﻟﻤﺮﺗﺒﺔ‬

‫اﻟﻘﻮاﺋﻢ اﻟﻤﺮﺗﺒﺔ ‪:‬‬

‫وھﻲ اﻟﻘﻮاﺋﻢ اﻟﺘﻲ ﺗﻌﻤﻞ ﺑﺎﺳﺘﺨﺪام اﻻرﻗﺎم )‪ (1,2,3,4‬او اﻻﺣﺮف اﻻﻧﺠﻠﯿﺰﯾﺔ‬
‫اﻟﻜﺒﯿﺮة)‪ (A,B,C,D‬او اﻻﺣﺮف اﻻﻧﺠﻠﯿﺰﯾﺔ اﻟﺼﻐﯿﺮة )‪ (a,b,c,d‬او اﻻرﻗﺎم اﻟﯿﻮﻧﺎﻧﯿﺔ‬
‫اﻟﻜﺒﯿﺮة )‪ (I,II,III,IV,V‬او اﻻرﻗﺎم اﻟﯿﻮﻧﺎﻧﯿﺔ اﻟﺼﻐﯿﺮة)‪.(i,ii,iii,iv,v‬واﻟﻘﯿﻤﺔ‬
‫اﻻﻓﺘﺮاﺿﯿﺔ ھﻨﺎ ھﻲ اﻻرﻗﺎم ‪.‬‬
‫ﻟﻌﻤﻞ ھﺬا اﻟﻨﻮع ﻣﻦ اﻟﻘﻮاﺋﻢ ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ >‪ <ol‬ﻣﻊ اﻟﻮﺳﻢ >‪ ol ، <li‬اﺧﺘﺼﺎر‬
‫‪) ordered list‬ﻗﺎﺋﻤﺔ ﻣﺮﺗﺒﺔ( و ‪ li‬اﺧﺘﺼﺎر ‪)list‬ﻗﺎﺋﻤﺔ(‪ ،‬ﻛﻤﺎ ﯾﻠﻲ ‪:‬‬
‫>‪<ol‬‬
‫>‪<li‬‬ ‫>‪</li‬‬ ‫ﻣﺎ ﺑﯿﻦ >‪ <li‬وﺑﯿﻦ >‪ </li‬ھﻮ‬
‫ﻧﻘﻄﺔ واﺣﺪة ﻣﻦ اﻟﻘﺎﺋﻤﺔ و ﺑﺎﻟﺘﺎﻟﻲ‬
‫>‪<li‬‬ ‫>‪</li‬‬ ‫ﻓﻲ ﺗﻮﺿﯿﺤﻨﺎ ھﺬا ﯾﻜﻮن ﻟﺪﯾﻨﺎ‬ ‫~~~~~~~~~~‬ ‫‪.1‬‬
‫>‪<li‬‬ ‫>‪</li‬‬ ‫ارﺑﻊ ﻧﻘﺎط‬ ‫~~~~~~~~~‬ ‫‪.2‬‬
‫>‪<li‬‬ ‫>‪</li‬‬ ‫~~~~~~~~‬ ‫‪.3‬‬
‫>‪</ol‬‬ ‫~~~~~~~~‬ ‫‪.4‬‬

‫ﻟﺘﺤﺪﯾﺪ ﻧﻮع اﻟﻘﺎﺋﻤﺔ وھﻲ ھﻨﺎ ﻗﺎﺋﻤﺔ ﻣﺮﺗﺒﺔ ﻓﻤﺎ‬

‫ﯾﻮﺟﺪ ﺑﯿﻦ >‪ <ol‬وﺑﯿﻦ >‪ </ol‬ھﻮ ﻋﺒﺎرة ﻋﻦ‬
‫ﻗﺎﺋﻤﺔ ﻣﺮﺗﺒﺔ‬

‫وﻻﺳﺘﺨﺪام اﻻﻧﻮاع اﻻﺧﺮى ﻣﻦ ھﺬا اﻟﻨﻮع ﻣﻦ اﻟﻘﻮاﺋﻢ )ﻏﯿﺮ اﻻرﻗﺎم (ﻧﺴﺘﺨﺪم اﻟﺼﻔﺔ ‪type‬‬
‫ﻣﻊ اﺣﺪى اﻟﻘﯿﻢ اﻟﺘﺎﻟﯿﺔ‪:‬‬
‫‪ <-----------A‬اذا اردﻧﺎ اﻟﻘﺎﺋﻤﺔ ﻣﻦ ﻧﻮع اﻻﺣﺮف اﻻﻧﺠﻠﯿﺰﯾﺔ اﻟﻜﺒﯿﺮة‬
‫‪ <------------a‬اذا اردﻧﺎ اﻟﻘﺎﺋﻤﺔ ﻣﻦ ﻧﻮع اﻻﺣﺮف اﻻﻧﺠﻠﯿﺰﯾﺔ اﻟﺼﻐﯿﺮة‬
‫‪ <------------I‬اذا اردﻧﺎ اﻟﻘﺎﺋﻤﺔ ﻣﻦ ﻧﻮع اﻻرﻗﺎم اﻟﯿﻮﻧﺎﻧﯿﺔ اﻟﻜﺒﯿﺮة‬
‫‪ <-----------i‬اذا اردﻧﺎ اﻟﻘﺎﺋﻤﺔ ﻣﻦ ﻧﻮع اﻻرﻗﺎم اﻟﯿﻮﻧﺎﻧﯿﺔ اﻟﺼﻐﯿﺮة‬

‫ﻣﺜﻼ ‪<ol type=A>:‬‬

‫‪~~~~~~~~~~~~~~.A‬‬ ‫>‪<li‬‬ ‫>‪</li‬‬
‫‪~~~~~~~~~~~~~~.B‬‬ ‫>‪<li> </li‬‬
‫>‪</ol‬‬
 ‫اﻟﻘﻮاﺋﻢ ﻏﯿﺮ اﻟﻤﺮﺗﺒﺔ‬
‫وھﻲ اﻟﻘﻮاﺋﻢ اﻟﺘﻲ ﺗﻌﻤﻞ ﺑﺎﺳﺘﺨﺪام اﺣﺪى اﻻﺷﻜﺎل اﻟﺘﺎﻟﯿﺔ ‪:‬‬
‫• ‪ <----------‬ﻗﺮص)‪(disc‬‬
‫§ ‪ <----------‬ﻣﺮﺑﻊ )‪(square‬‬
‫‪ <--------- o‬داﺋﺮة)‪(circle‬‬
‫واﻟﻘﯿﻤﺔ اﻻﻓﺘﺮاﺿﯿﺔ ھﻨﺎ ھﻲ ‪. disc‬‬
‫ﻟﻌﻤﻞ ھﺬا اﻟﻨﻮع ﻣﻦ اﻟﻘﻮاﺋﻢ ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ >‪ <ul‬ﻣﻊ اﻟﻮﺳﻢ >‪ ul ، <li‬اﺧﺘﺼﺎر‬
‫‪) unordered list‬ﻗﺎﺋﻤﺔ ﻏﯿﺮ ﻣﺮﺗﺒﺔ( و ‪ li‬اﺧﺘﺼﺎر ‪)list‬ﻗﺎﺋﻤﺔ(‪ ،‬ﻛﻤﺎ ﯾﻠﻲ ‪:‬‬

‫>‪<ul‬‬
‫>‪<li‬‬ ‫>‪</li‬‬ ‫ﻣﺎ ﺑﯿﻦ >‪ <li‬وﺑﯿﻦ >‪ </li‬ھﻮ‬
‫ﻧﻘﻄﺔ واﺣﺪة ﻣﻦ اﻟﻘﺎﺋﻤﺔ و ﺑﺎﻟﺘﺎﻟﻲ‬
‫>‪<li‬‬ ‫>‪</li‬‬ ‫ﻓﻲ ﺗﻮﺿﯿﺤﻨﺎ ھﺬا ﯾﻜﻮن ﻟﺪﯾﻨﺎ‬ ‫• ~~~~~~~~~‬
‫>‪<li‬‬ ‫>‪</li‬‬ ‫ارﺑﻊ ﻧﻘﺎط‬ ‫• ~~~~~~~~~‬
‫>‪<li‬‬ ‫>‪</li‬‬ ‫• ~~~~~~~~‬
‫>‪</ul‬‬
‫• ~~~~~~~~‬
‫ﻟﺘﺤﺪﯾﺪ ﻧﻮع اﻟﻘﺎﺋﻤﺔ وھﻲ ھﻨﺎ ﻗﺎﺋﻤﺔ ﻏﯿﺮ ﻣﺮﺗﺒﺔ‬
‫ﻓﻤﺎ ﯾﻮﺟﺪ ﺑﯿﻦ >‪ <ul‬وﺑﯿﻦ >‪ </ul‬ھﻮ ﻋﺒﺎرة‬
‫ﻋﻦ ﻗﺎﺋﻤﺔ ﻏﯿﺮ ﻣﺮﺗﺒﺔ‬

‫وﻻﺳﺘﺨﺪام اﻻﻧﻮاع اﻻﺧﺮى ﻣﻦ ھﺬا اﻟﻨﻮع ﻣﻦ اﻟﻘﻮاﺋﻢ )ﻏﯿﺮ اﻟﻘﺮص (ﻧﺴﺘﺨﺪم اﻟﺼﻔﺔ‬
‫‪ type‬ﻣﻊ اﺣﺪى اﻟﻘﯿﻢ اﻟﺘﺎﻟﯿﺔ‪:‬‬
‫‪ <--------square‬اذا اردﻧﺎ اﻟﻘﺎﺋﻤﺔ ﻣﻦ ﻧﻮع اﻟﻤﺮﺑﻊ‬
‫‪ <---------circle‬اردﻧﺎ اﻟﻘﺎﺋﻤﺔ ﻣﻦ ﻧﻮع اﻟﺪاﺋﺮة‬

‫~~~~~~~~~~~~~~~~‬ ‫§‬ ‫ﻣﺜﻼ ‪<ol type=square>:‬‬

‫~~~~~~~~~~~~~~~~‬ ‫§‬ ‫>‪<li‬‬ ‫>‪</li‬‬
‫>‪<li> </li‬‬
‫> ‪</ol‬‬
 ‫ﻣﺜﺎل ‪: 20‬‬

‫اﻟﻜﻮد‪:‬‬
‫>‪<html dir=rtl‬‬
‫>‪<head‬‬ ‫ﻻﺣﻆ اﻧﮫ ﻻﺣﺎﺟﺔ‬
‫>‪<title‬‬ ‫اﻟﻰ اﺳﺘﺨﺪام >‪<br‬‬
‫ﺻﻔﺤﺘﻲ اﻻوﻟﻰ‬
‫>‪</title‬‬
‫ﻋﻨﺪ ﻋﻤﻞ اﻟﻘﻮاﺋﻢ‬
‫>‪</head‬‬ ‫ﻓﺎﻟﻘﻮاﺋﻢ ﺗﻌﻤﻞ ﻟﻨﻔﺴﮭﺎ‬
‫> ‪<body‬‬ ‫ﻓﻘﺮة ﺧﺎﺻﺔ ﺑﮭﺎ‬
‫>‪ </font></center‬ﺑﺴﻢ اﷲ اﻟﺮﺣﻤﻦ اﻟﺮﺣﯿﻢ >‪<center><font size=24pt‬‬
‫ﺗﺤﺘﻮي اﻟﺠﺎﻣﻌﺔ ﻋﻠﻰ ﻋﺪد ﻣﻦ اﻟﻜﻠﯿﺎت ھﻲ>‪<ol‬‬ ‫وﻻﺣﻆ ان ﻋﺒﺎرة "‬
‫>‪</li‬ﻛﻠﯿﺔ اﻟﻌﻠﻮم وﺗﻜﻨﻮﻟﻮﺟﯿﺎ اﻟﻤﻌﻠﻮﻣﺎت>‪<li‬‬ ‫ﺗﺤﺘﻮي اﻟﺠﺎﻣﻌﺔ ﻋﻠﻰ‬
‫>‪</li‬ﻛﻠﯿﺔ اﻟﮭﻨﺪﺳﺔ>‪<li‬‬ ‫ﻋﺪد ﻣﻦ اﻟﻜﻠﯿﺎت‬
‫>‪</li‬ﻛﻠﯿﺔ اﻟﺼﯿﺪﻟﺔ>‪<li‬‬
‫ھﻲ" ﻟﯿﺴﺖ ﻣﺮﻗﻤﺔ‬
‫>‪</li‬ﻛﻠﯿﺔ اﻻداب>‪<li‬‬
‫>‪</ol‬‬ ‫ﻻﻧﮭﺎ ﻟﯿﺴﺖ ﺿﻤﻦ‬
‫>‪</body‬‬ ‫>‪ <li‬و >‪</li‬‬
‫>‪</html‬‬
 ‫ﻣﺜﺎل ‪:21‬‬

‫اﻟﻜﻮد‪:‬‬
‫>‪<html dir=rtl‬‬
‫>‪<head‬‬
‫>‪<title‬‬
‫ﺻﻔﺤﺘﻲ اﻻوﻟﻰ‬
‫>‪</title‬‬
‫>‪</head‬‬
‫> ‪<body‬‬
‫>‪ </font></center‬ﺑﺴﻢ اﷲ اﻟﺮﺣﻤﻦ اﻟﺮﺣﯿﻢ >‪<center><font size=24pt‬‬
‫ﺗﺤﺘﻮي اﻟﺠﺎﻣﻌﺔ ﻋﻠﻰ ﻋﺪد ﻣﻦ اﻟﻜﻠﯿﺎت ھﻲ>‪<ul‬‬
‫>‪</li‬ﻛﻠﯿﺔ اﻟﻌﻠﻮم وﺗﻜﻨﻮﻟﻮﺟﯿﺎ اﻟﻤﻌﻠﻮﻣﺎت>‪<li‬‬
‫>‪</li‬ﻛﻠﯿﺔ اﻟﮭﻨﺪﺳﺔ>‪<li‬‬
‫>‪</li‬ﻛﻠﯿﺔ اﻟﺼﯿﺪﻟﺔ>‪<li‬‬
‫>‪</li‬ﻛﻠﯿﺔ اﻻداب>‪<li‬‬
‫>‪</ul‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫و ﯾﻤﻜﻦ ان ﺗﻜﻮن اﻟﻘﺎﺋﻤﺔ ﺧﻠﯿﻄﺎ ﻣﺎ ﺑﯿﻦ اﻟﻨﻮﻋﯿﻦ اﻟﻤﺮﺗﺐ و ﻏﯿﺮ اﻟﻤﺮﺗﺐ ﻛﻤﺎ ﻓﻲ‬
‫اﻟﻤﺜﺎل اﻟﺘﺎﻟﻲ‪:‬‬
 ‫ﻣﺜﺎل ‪:22‬‬

‫اﻟﻜﻮد‪:‬‬
‫>‪<html dir=rtl‬‬
‫>‪<head‬‬
‫>‪<title‬‬
‫ﺻﻔﺤﺘﻲ اﻻوﻟﻰ‬
‫>‪</title‬‬
‫>‪</head‬‬
‫> ‪<body‬‬
‫>‪ </font></center‬ﺑﺴﻢ اﷲ اﻟﺮﺣﻤﻦ اﻟﺮﺣﯿﻢ >‪<center><font size=24pt‬‬
‫ﺗﺤﺘﻮي اﻟﺠﺎﻣﻌﺔ ﻋﻠﻰ ﻋﺪد ﻣﻦ اﻟﻜﻠﯿﺎت ھﻲ>‪<ol type=i‬‬
‫>‪</li‬ﻛﻠﯿﺔ اﻟﻌﻠﻮم وﺗﻜﻨﻮﻟﻮﺟﯿﺎ اﻟﻤﻌﻠﻮﻣﺎت>‪<li‬‬
‫>‪<ul type=square‬‬
‫>‪</li‬ھﻨﺪﺳﺔ اﻟﺒﺮﻣﺠﯿﺎت>‪<li‬‬
‫>‪</li‬ﻋﻠﻢ اﻟﺤﺎﺳﻮب>‪<li‬‬
‫>‪</li‬ﻧﻈﻢ ﻣﻌﻠﻮﻣﺎت ﺣﺎﺳﻮﺑﯿﺔ>‪<li‬‬
‫>‪</ul‬‬
‫>‪</li‬ﻛﻠﯿﺔ اﻟﮭﻨﺪﺳﺔ>‪<li‬‬
‫>‪</li‬ﻛﻠﯿﺔ اﻟﺼﯿﺪﻟﺔ>‪<li‬‬
‫>‪</li‬ﻛﻠﯿﺔ اﻻداب>‪<li‬‬
‫>‪</ol‬‬
‫>‪</body‬‬
‫>‪</html‬‬
 ‫ﺗﻘﺴﯿﻢ اﻟﺸﺎﺷﺔ‬
‫)اﺳﺘﺨﺪام ‪ div‬و ‪(span‬‬

‫ﻋﻨﺪ ﺗﺼﻤﯿﻢ اﻟﻤﻮاﻗﻊ ﻗﺪ ﻧﺤﺘﺎج اﻟﻰ ﺗﺨﺼﯿﺺ ﺟﺰء ﻣﻌﯿﻦ ﻣﻦ اﻟﺸﺎﺷﺔ ﻟﻨﻌﻄﯿﮫ ﺧﺼﺎﺋﺺ‬
‫ﻣﻌﯿﻨﺔ ﻣﺜﻼ ﺗﻐﯿﺮ ﻟﻮن اﻟﺨﻠﻔﯿﺔ ﻟﮭﺬا اﻟﺠﺰء‪ ،‬ﻋﻤﻞ اﻃﺎر ﻟﮫ ‪ ،‬ﺗﻐﯿﺮ ﻟﻮن اﻻﻃﺎر ‪ ،‬واﻟﻜﺜﯿﺮ‬
‫اﻟﻜﺜﯿﺮ ﻣﻦ اﻟﺨﺼﺎﺋﺺ ‪.‬‬
‫وﻟﻌﻤﻞ ذﻟﻚ ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ >‪ <div‬او اﻟﻮﺳﻢ >‪ <span‬و اﻟﻔﺮق ﺑﯿﻨﮭﻤﺎ ﻛﻤﺎ ﯾﻠﻲ ‪:‬‬
‫>‪<span‬‬ ‫>‪<div‬‬
‫ﯾﻌﻤﻞ ﻋﻠﻰ‬ ‫ﯾﻌﻤﻞ ﻓﻘﻂ ﻋﻠﻰ‬
‫‪Microsoft internet explorer‬‬ ‫‪Microsoft internet explorer‬‬
‫وﻋﻠﻰ ‪Netscape‬‬
‫ﻻ ﯾﻤﻜﻦ اﺳﺘﺨﺪام ‪.innerHTML‬‬ ‫ﯾﻤﻜﻦ اﺳﺘﺨﺪام ‪.innerHTML‬‬
‫)ﻓﻲ ﺣﺎﻟﺔ اﺳﺘﺨﺪام ﻟﻐﺔ ﺑﺮﻣﺠﺔ ﻣﺜﻞ اﻟﺠﺎﻓﺎ‬ ‫)ﻓﻲ ﺣﺎﻟﺔ اﺳﺘﺨﺪام ﻟﻐﺔ ﺑﺮﻣﺠﺔ ﻣﺜﻞ اﻟﺠﺎﻓﺎ‬
‫ﺳﻜﺮﯾﺒﺖ(‬ ‫ﺳﻜﺮﯾﺒﺖ(‬
‫اذا ﻻﺣﻆ ان اﻟﻔﺮق ﺑﯿﻨﮭﻤﺎ ﻻ ﯾﮭﻤﻨﺎ ھﻨﺎ ﻛﺜﯿﺮا واﻧﻤﺎ ھﻮ ﻣﻦ ﻣﺒﺪأ اﻟﻌﻠﻢ ﺑﺎﻟﺸﺊ‬

‫*ھﻨﺎ ﺳﻮف ﻧﻘﻮم ﺑﺎﺳﺘﺨﺪام اﻟﻮﺳﻢ اﻻول >‪* <div‬‬

‫واﻟﺸﻜﻞ اﻟﻌﺎم ﻟﻌﻤﻞ اﻟﺘﻘﺴﯿﻢ ھﻮ‪:‬‬

‫>‪<div> ~~~~~~~~~~~~~~~ </div‬‬

‫ﺳﻨﻘﻮم اﻻن ﺑﻀﺮب ﻣﺜﺎل ﺑﺴﯿﻂ ﺣﺘﻰ ﻧﻔﮭﻢ اﻛﺜﺮ اﺳﺘﺨﺪام ھﺬا اﻟﻮﺳﻢ اﻣﺎ اﻻﻣﺜﻠﺔ اﻻﻛﺜﺮ‬
‫ﺗﻌﻘﯿﺪا ﻓﺴﻮف ﺗﻀﺮب ﻋﻨﺪ ﺷﺮح ‪. css‬‬
 ‫ﻣﺜﺎل ‪:23‬‬

‫اﻟﻜﻮد‪:‬‬
‫>‪<html dir=rtl‬‬
‫‪align=center‬‬
‫>‪<head‬‬
‫ﻣﺤﺎذاة اﻟـ ‪ div‬ﻓﻲ‬
‫>‪<title‬‬
‫اﻟﻤﻨﺘﺼﻒ‬
‫ﺻﻔﺤﺘﻲ اﻻوﻟﻰ‬
‫>‪</title‬‬
‫‪id=div1‬‬
‫>‪</head‬‬
‫اﻋﻄﺎء اﺳﻢ ﻟﻠـ ‪div‬‬
‫> ‪<body‬‬
‫ﻓﺒﻌﺪ اﻟﺼﻔﺔ ‪ id‬ﯾﻤﻜﻦ‬
‫ﺑﺴﻢ اﷲ اﻟﺮﺣﻤﻦ اﻟﺮﺣﯿﻢ >‪<center><font size=20pt‬‬
‫ﻛﺘﺎﺑﺔ اي اﺳﻢ ﻧﺮﯾﺪ‬
‫>‪</font></center‬‬
‫>‪</font‬أھﻼ وﺳﮭﻼ ﺑﻜﻢ>‪<font size=20pt‬‬
‫ﻻﺣﻆ ان اﻟـ ‪div‬‬
‫>‪<div align=center id=div1‬‬
‫ﯾﻜﻮن ﻟﻨﻔﺴﮫ ﻓﻘﺮة‬
‫>‪</font‬ﻋﺎﻟﻢ اﻟﺴﯿﺎرات>‪<font size=20pt‬‬
‫ﺧﺎﺻﺔ ﺑﮫ ﻓﻼ ﯾﺤﺘﺎج‬
‫>‪</div‬‬
‫اﻟﻰ >‪<br‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫ﻟﻮ ﺗﻢ اﺳﺘﺨﺪام ‪span‬‬
‫ﺑﺪﻻ ﻣﻦ ‪ div‬ﺳﺘﻈﮭﺮ‬
‫ﻧﻔﺲ اﻟﻨﺘﯿﺠﺔ‬
‫و اﻻن ﺳﻮف ﻧﺎﺧﺬ ﻣﺜﺎﻻ ﯾﺸﻤﻞ ﻧﻮﻋﺎ ﻣﺎ ﺟﻤﯿﻊ اﻻﻓﻜﺎر اﻟﺘﻲ ﺗﻢ ﺷﺮﺣﮭﺎ ‪.‬‬
‫ﻣﺜﺎل ‪:24‬‬
‫ﻟﻨﻔﺮض اﻧﻨﺎ ﻧﺮﯾﺪ ﺗﺼﻤﯿﻢ ﻣﻮﻗﻊ ﺷﺨﺼﻲ ﻣﻜﻮن ﻣﻦ ﺛﻼث ﺻﻔﺤﺎت ﻛﻤﺎ ﯾﻠﻲ‪:‬‬
‫اﻟﺼﻔﺤﺔ اﻻوﻟﻰ ‪ :‬و ھﻲ اﻟﺼﻔﺤﺔ اﻟﺮﺋﯿﺴﯿﺔ و ﺑﺎﻟﺘﺎﻟﻲ ﻋﻨﻮاﻧﮭﺎ ﺳﻮف ﯾﻜﻮن"اﻟﺼﻔﺤﺔ‬
‫اﻟﺮﺋﯿﺴﯿﺔ " وھﻲ ﺗﺤﺘﻮي ﻋﻠﻰ ارﺗﺒﺎط ﺗﺸﻌﯿﺒﻲ ﻟﻠﺼﻔﺤﺘﯿﻦ اﻻﺧﺮﯾﺘﯿﻦ‪.‬‬
‫اﻟﺼﻔﺤﺔ اﻟﺜﺎﻧﯿﺔ ‪ :‬وﻋﻨﻮاﻧﮭﺎ "اﻟﺴﯿﺮة اﻟﺬاﺗﯿﺔ" وھﻲ ﺗﺤﺘﻮي ﻋﻠﻰ ﺑﻌﺾ اﻟﻤﻌﻠﻮﻣﺎت‬
‫اﻟﺸﺨﺼﯿﺔ ﻛﺎﻻﺳﻢ واﻟﻌﻤﺮ واﻟﻌﻤﻞ ‪..‬اﻟﺦ‬
‫اﻟﺼﻔﺤﺔ اﻟﺜﺎﻟﺜﺔ ‪ :‬وﻋﻨﻮاﻧﮭﺎ "درس ﻓﻲ ﺗﺼﻤﯿﻢ وﺑﺮﻣﺠﺔ اﻟﻤﻮاﻗﻊ" وھﻲ ﺗﺤﺘﻮي ﻋﻠﻰ درس‬
‫اﻓﺘﺮاﺿﻲ ﻟﺘﺼﻤﯿﻢ وﺑﺮﻣﺠﺔ اﻟﻤﻮاﻗﻊ ﻓﯿﻘﻮم اوﻻ ﺑﺘﻘﺴﯿﻢ اﻟﺪرس اﻟﻰ ﻋﺪة ﻓﺮوع وﻋﻤﻞ‬
‫ارﺗﺒﺎط ﺗﺸﻌﯿﺒﻲ ﻟﮭﺬه اﻟﻔﺮوع ﻻﯾﺼﺎﻟﻨﺎ اﻟﻰ ﻓﻘﺮات ﻣﺤﺪدة ﻣﻦ ﻧﻔﺲ اﻟﺼﻔﺤﺔ ‪.‬‬
‫ﻃﺒﻌﺎ ھﺬا ﻣﻊ ﻋﺪد ﻣﻦ ادراج اﻟﺨﻠﻔﯿﺎت و اﻟﺼﻮر وادراج اﻟﺠﺪاول وﻏﯿﺮ ذﻟﻚ وﻟﻨﻔﺘﺮض‬
‫ﻣﻦ اﻻن ان ﺟﻤﯿﻊ اﻟﺼﻮر ﻣﺨﺰﻧﺔ ﻓﻲ ﻣﺠﻠﺪ ﻋﻠﻰ ﻧﻔﺲ ﻣﺴﺎر اﻟﺼﻔﺤﺎت وان اﺳﻢ ھﺬا‬
‫اﻟﻤﺠﻠﺪ ﻣﺜﻼ "‪ ، "img‬وان اﻟﺜﻼث ﺻﻔﺤﺎت ﺗﻘﻊ ﻓﻲ ﻧﻔﺲ اﻟﻤﺴﺎر ‪.‬‬
‫ﻧﺒﺪأ ﺑﺎﻟﻌﻤﻞ ‪....‬‬

‫اﻟﺼﻔﺤﺔ اﻻوﻟﻰ )‪.htm‬اﻟﺮﺋﯿﺴﯿﺔ(‪:‬‬

 ‫اﻟﻜﻮد‪:‬‬
‫>‪<html dir=rtl‬‬
‫>‪<head‬‬
‫>‪</title‬اﻟﺼﻔﺤﺔ اﻟﺮﺋﯿﺴﯿﺔ>‪<title‬‬
‫>‪</head‬‬
‫>‪<body bgcolor= #009933‬‬
‫>‪<center‬‬
‫>‪</font‬ﻣﺤﻤﺪ ﺧﺎﻟﺪ>‪<font size=18pt‬‬
‫>‪</center‬‬
‫>‪<ul‬‬
‫>‪</a></li‬اﻟﺴﯿﺮة اﻟﺬاﺗﯿﺔ>‪.htm‬اﻟﺴﯿﺮة=‪<li><a href‬‬
‫>‪</a></li‬درس ﻓﻲ ﺗﺼﻤﯿﻢ اﻟﻤﻮاﻗﻊ>‪.htm‬اﻟﺘﺼﻤﯿﻢ=‪<li><a href‬‬
‫>‪</ul‬‬
‫ﻟﻼﺗﺼﺎل ﺑﻨﺎ‬
‫>‪<a href=mailto:moh_khalid@yahoo.com>moh_khalid@yahoo.com</a‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫اﻟﺴﻄﺮ اﻟﻤﻠﻮن ﯾﻤﺜﻞ ﻣﺜﺎﻻ ﻟﻌﻤﻞ ادراج ﺗﺸﻌﯿﺒﻲ ﻻﻣﯿﻞ ﻓﻌﻨﺪ اﻟﻨﻘﺮ ﻋﻠﻰ‬
‫‪moh_khalid@yahoo.com‬‬
‫ﯾﻔﺘﺢ ﻟﻨﺎ اﻟﺒﺮﻧﺎﻣﺞ اﻻﻓﺘﺮاﺿﻲ ﻟﺘﺤﺮﯾﺮ اﻻﻣﯿﻼت و ﻋﻨﺪ ﻛﻠﻤﺔ ‪ TO‬ﯾﻜﺘﺐ‬
‫‪ moh_khalid@yahoo.com‬ﻛﻤﺎ ﻓﻲ اﻟﺼﻮرة ‪:‬‬
 ‫اﻟﺼﻔﺤﺔ اﻟﺜﺎﻧﯿﺔ )‪.htm‬اﻟﺴﯿﺮة (‪:‬‬

‫ﻻﺣﻆ ان اﻟﺼﻮرة اﻟﻮاﺣﺪة ﻣﻦ اﻟﺼﻮر اﻟﻤﻮﺟﻮدة ﻓﻲ ھﺬه اﻟﺼﻔﺤﺔ)ﺻﻮرة ﺷﻌﺎر ‪Yahoo‬‬

‫وﺷﻌﺎر ‪ Google‬و ﺷﻌﺎر ‪ (MSN‬ھﻲ ﻋﺒﺎرة ﻋﻦ ﺻﻮرة ﻣﻮﺟﻮدة ﺿﻤﻦ ﺧﻠﯿﺔ ﺿﻤﻦ‬
‫ﺟﺪول و اﯾﻀﺎ ان ھﺬه اﻟﺼﻮرة ﻋﺒﺎرة ﻋﻦ ارﺗﺒﺎط ﺗﺸﻌﯿﺒﻲ ﻟﻤﻮﻗﻊ ﻣﺤﺮك اﻟﺒﺤﺚ‪.‬‬

‫و ﻗﺪ ﺗﻢ ﺗﻠﻮﯾﻦ ﺟﺰء اﻟﻜﻮد اﻟﺬي ﯾﺆدي ھﺬه اﻟﻮﻇﯿﻔﺔ ﺗﻤﻌﻦ ﺑﮫ ﺟﯿﺪا ﻓﻤﺎ ھﻮ اﻟﻰ ﺧﻠﯿﻂ ﻣﻦ‬
‫اﻟﻮﺳﻢ >‪ <td‬ﻻدراج اﻟﺨﻠﯿﺔ واﻟﻮﺳﻢ >‪ <img‬ﻻدراج اﻟﺼﻮرة واﻟﻮﺳﻢ >‪<a href=...‬‬
‫ﻻدراج ارﺗﺒﺎط ﺗﺸﻌﯿﺒﻲ ‪.‬‬
 :‫اﻟﻜﻮد‬
<html dir=rtl> <tbody>
<head> <tr>
<title>‫<اﻟﺴﯿﺮة اﻟﺬاﺗﯿﺔ‬/title> <td bgcolor=#009933>Yahoo</td>
</head> <td><a href=http://www.yahoo.com>
<body background=img/bg.bmp> <img src=img/yahoo.gif width="124"
<center> height="58" ></a></td>
<font size=18pt>‫<اﻟﺴﯿﺮة اﻟﺬاﺗﯿﺔ‬/font> </tr>
</center> <tr>
<div> <td bgcolor=#009933>Google</td>
<font color=red> <td><a href=http://www.google.com>
<h2> <img src=img/google.gif width="124"
‫ ﻣﺤﻤﺪ ﺧﺎﻟﺪ‬:‫اﻻﺳﻢ‬ height="58" ></a></td>
</h2> </tr>
<h2> <tr>
‫ﺳﻨﺔ‬20:‫اﻟﻌﻤﺮ‬ <td bgcolor=#009933>MSN</td>
</h2> <td><a href=http://www.msn.com><img
<h2> src=img/msn.gif width="124"
‫ﻣﺤﻠﻞ ﻧﻈﻢ‬:‫اﻟﻌﻤﻞ‬ height="58" ></a></td>
</h2> </tr>
</font> </tbody>
<table border=1 height="140" width="154"> </table>
<caption>‫<ﻣﺤﺮﻛﺎت اﻟﺒﺤﺚ اﻟﻤﻔﻀﻠﺔ‬/caption> </div>
<thead bgcolor=#33CCFF> </center>
<tr> <a href=‫اﻟﺮﺋﯿﺴﯿﺔ‬.htm>‫<اﻟﺼﻔﺤﺔ اﻟﺮﺋﯿﺴﯿﺔ‬/a>
<th> </body>
‫اﻟﻤﻮﻗﻊ‬ </html>
</th>
<th>
‫ﺷﻌﺎره‬
</th>
</tr>
</thead>

1
2
‫اﻟﺼﻔﺤﺔ اﻟﺜﺎﻟﺜﺔ )‪.htm‬اﻟﺘﺼﻤﯿﻢ(‪:‬‬
 ‫اﻟﻜﻮد‪:‬‬
‫>‪<html dir=rtl‬‬
‫>‪<head‬‬
‫>‪<title></title‬‬
‫>‪</head‬‬
‫>‪<body bgcolor=#648fd1‬‬
‫>‪<center‬‬
‫>‪</font‬ﻧﺼﻤﯿﻢ و ﺑﺮﻣﺠﺔ اﻟﻤﻮاﻗﻊ>‪<font size=18pt‬‬
‫>‪</center‬‬
‫>‪<br‬‬
‫>‪ </p‬ﯾﻤﻜﻦ ﺗﻘﺴﯿﻢ ھﺬا اﻟﺪرس اﻟﻰ ﻗﺴﻤﯿﻦ اﺳﺎﺳﯿﻦ ھﻤﺎ>‪<p‬‬
‫>‪<ol‬‬
‫>‪</li‬ﺗﺼﻤﯿﻢ اﻟﻤﻮاﻗﻊ>‪<li‬‬
‫>‪<ul type=square‬‬
‫>‪<a href=#h><li>HTML</li></a‬‬
‫>‪<a href=#x><li>XHTML</li></a‬‬
‫>‪</ul‬‬
‫>‪</li‬ﺑﺮﻣﺠﺔ اﻟﻤﻮاﻗﻊ>‪<li‬‬
‫>‪<ul type=square‬‬
‫>‪<a href=#j><li>Java Script</li></a‬‬
‫>‪<a href=#v><li>VB script</li></a‬‬
‫>‪</ul‬‬
‫>‪</ol‬‬
‫>‪<h3‬‬
‫>‪<hr align=center width=50% color=red‬‬
‫>‪<a name=h>HTML</a‬‬
‫>‪<br‬‬
‫ھﻲ ﻋﺒﺎرة ﻋﻦ ﻟﻐﺔ ﺳﮭﻠﺔ ﺟﺪا ﻟﺘﺼﻤﯿﻢ ﻣﻮاﻗﻊ اﻻﻧﺘﺮﻧﺖ وﺳﻮف ﻧﻘﻮم ﺑﺸﺮح اﻟﻌﺪﯾﺪ ﻣﻦ اﻟﻌﻤﻠﯿﺎت اﻟﺘﻲ ﯾﻤﻜﻦ اﺟﺮاءھﺎ ﺑﮭﺬه‬
‫اﻟﻠﻐﺔ‬
‫>‪<br‬‬
‫ﻛﺎدراج اﻟﺠﺪاول وادراج اﻻرﺗﺒﺎﻃﺎت اﻟﺘﺸﻌﯿﺒﯿﺔوادراج اﻟﺼﻮر واﻟﻜﺜﯿﺮ اﻟﻜﺜﯿﺮ‬
‫>‪<br‬‬
‫ﯾﻤﻜﻦ ﺗﻘﺴﯿﻢ اﻟﻠﻐﺔ ﺑﺸﻜﻞ رﺋﯿﺴﻲ اﻟﻰ ﺛﻼﺛﺔ اﻗﺴﺎم ھﻲ‬
‫>‪<br‬‬
‫اﻻوﺳﻤﺔ‬
‫>‪<br‬‬
‫اﻟﺼﻔﺎت‬
‫>‪<br‬‬
‫اﻟﺤﺮوف اﻟﺨﺎﺻﺔ‬
‫>‪<br‬‬
‫وﺑﺎﺗﻘﺎﻧﻚ ھﺬه اﻻﻗﺴﺎم اﻟﺜﻼﺛﺔ ﯾﻤﻜﻨﻚ اﻟﻘﯿﺎم ﺑﺘﺼﻤﯿﻢ اﻟﻜﺜﯿﺮ ﻣﻦ ﺻﻔﺤﺎت اﻻﻧﺘﺮﻧﺖ‬
‫>‪<br‬‬
‫وھﺬ ﺗﻮﺿﯿﺢ ﺑﺴﯿﻂ ﻟﺜﻼث اﻗﺴﺎم‬
‫>‪<br‬‬
‫اﻻوﺳﻤﺔ‪1.‬‬
‫>‪<br‬‬
‫اوﺳﻤﺔ ﻟﻠﻘﯿﺎم ﺑﻮﻇﺎﺋﻒ ﻣﻌﯿﻨﺔ ﻣﺜﻞ ﺗﻮﺳﯿﻂ اﻟﻜﻼم ‪ ،‬ﺟﻌﻞ اﻟﺨﻂ ﻣﺎﺋﻼ‪ ،‬ﺟﻌﻞ اﻟﺨﻂ ﻏﺎﻣﻘﺎ‪...،‬اﻟﺦ‬
‫>‪<br‬‬
‫وھﻲ ﺗﻘﺴﻢ ﺑﺪورھﺎ اﻟﻰ‬
‫>‪<br‬‬
‫‪Main Tags‬‬
‫>‪<br‬‬
‫‪Tags‬‬
‫>‪<br‬‬
‫‪2. Attribute‬‬
‫>‪<br‬‬
‫‪3. Special Character‬‬
‫>‪<br‬‬
‫>‪<hr align=center width=50% color=red‬‬
‫>‪<a name=x>XHTML</a‬‬
‫>‪<br‬‬
‫وھﻲ ﻋﺒﺎرة ﻋﻦ ﻟﻐﺔ ﻣﻄﻮرة ﻣﻦ ﻟﻐﺔ اﻟﮭﺘﻤﻞ اﻻ ان ھﻨﺎك ﻓﺮوق رﺋﯿﺴﯿﯿﺔ ﺳﻮف ﯾﺘﻢ اﻇﮭﺎره وﺗﺒﯿﺎﻧﮭﺎ ﻓﯿﻤﺎ ﺑﻌﺪ‬
‫>‪<br‬‬
‫>‪<hr align=center width=50% color=red‬‬
‫>‪<a name=j>Java Script</a‬‬
‫>‪<br‬‬
‫وھﻲ ﻟﻐﺔ ﺑﺮﻣﺠﺔ ﺳﮭﻠﺔ ﺟﺪا ﺗﺸﺒﮫ ﻓﻲ ﺑﻨﺎﺋﮭﺎ ﻟﻐﺔ اﻟﺠﺎﻓﺎ و اﻟﺴﻲ وھﻲ ﺗﻤﻜﻨﻨﺎ ﻣﻦ اﻟﻘﯿﺎم ﺑﺎﻟﺤﺮﻛﺔ واﻟﺪﯾﻨﺎﻣﻜﯿﺔ اﻟﻰ‬
‫ﺻﻔﺤﺔ اﻻﻧﺘﺮﻧﺖ‬
‫>‪<br‬‬
‫اﻟﻤﮭﺎم اﻟﺨﺎﺻﺔ ﻣﺜﻼ اﻟﺘﺎﻛﺪ ﻣﻦ ﺻﻼﺣﯿﺔ اﻟﻤﻌﻠﻮﻣﺎت ﻓﻲ ﻧﻤﻮذج ﻣﺎ‬
‫>‪<br‬‬
‫و ﺑﺘﻌﻠﻤﻨﺎ ھﺬا اﻟﻠﻐﺔ اﻟﺴﮭﻠﺔ ﯾﺼﺒﺢ ﺑﺎﻣﻜﺎﻧﻨﺎ اﻟﻘﯿﺎم ﺑﺎﻣﻮر ﺗﻀﯿﻒ اﻟﺠﻤﺎل واﻟﻘﻮة ﻟﻤﻮﻗﻌﻨﺎ‬
‫>‪<br‬‬
‫>‪<hr align=center width=50% color=red‬‬
‫>‪<a name=v>VB script</a‬‬
‫>‪<br‬‬
‫وھﻲ اﯾﻀﺎ ﻟﻐﺔ ﺑﺮﻣﺠﺔ ﺳﮭﻠﺔ ﺟﺪا ﻟﻜﻦ ﺑﻨﯿﺘﮭﺎ اﻟﺮﺋﯿﺴﯿﺔ ﺗﺸﺒﮫ ﻟﻐﺔ اﻟﻔﯿﺠﻮال ﺑﯿﺴﻚ‬
‫>‪<br‬‬
‫وھﻲ ﺗﺸﺒﮫ ﺑﻌﻤﻠﮭﺎ ﻋﻤﻞ اﻟﺠﺎﻓﺎ ﺳﻜﺮﯾﺒﺖ‬
‫>‪<hr align=center width=50% color=red‬‬
‫>‪</h3‬‬
‫>‪</a‬اﻟﺼﻔﺤﺔ اﻟﺮﺋﯿﺴﯿﺔ>‪.htm‬اﻟﺮﺋﯿﺴﯿﺔ=‪<a href‬‬
‫>‪</body‬‬
‫>‪</html‬‬
 ‫ﻻﺣﻆ ان ﻓﻲ ھﺬه اﻟﺼﻔﺤﺔ ارﺗﺒﺎﻃﺎت ﺗﺸﻌﯿﺒﯿﺔ ﻋﻠﻰ ﻓﻘﺮات ﻣﻌﯿﻨﺔ ﻣﻦ ﻧﻔﺲ اﻟﺼﻔﺤﺔ وھﺬه‬
‫اﻻرﺗﺒﺎﻃﺎت أﺗﯿﺔ ﻋﻠﻰ ﺷﻜﻞ ﻗﺎﺋﻤﺔ وﻗﺪ ﺗﻢ ﺗﻤﯿﺰ ذﻟﻚ ﺑﺘﻠﻮﯾﻨﮫ ﺑﺎﻟﻠﻮﻧﯿﻦ اﻻﺣﻤﺮ واﻻزرق‪.‬‬

‫ﻣﻼﺣﻈﺔ‪:‬‬
‫ھﺬا اﻟﻤﺜﺎل ﻻ ﯾﻌﺘﺒﺮ ﺻﺤﯿﺤﺎ ﻣﻦ ﻧﺎﺣﯿﺔ اﻟﺘﺼﻤﯿﻢ ﻓﻤﻦ اھﻢ ﻗﻮاﻋﺪ اﻟﺘﺼﻤﯿﻢ "اﻟﺜﺒﺎت ﻓﻲ‬
‫اﻟﺘﺼﻤﯿﻢ" ﯾﻌﻨﻲ ﻣﺜﻼ اﻟﺜﺒﺎت ﺑﺎﻟﻮان او ﺻﻮر اﻟﺨﻠﻔﯿﺎت ﻟﺠﻤﯿﻊ اﻟﺼﻔﺤﺎت واﻟﻰ ذﻟﻚ ﻣﻦ‬
‫اﻻﻣﻮر اﻟﺘﻲ ﯾﺠﺐ اﻟﺜﺒﺎت ﻓﯿﮭﺎ ‪.‬‬

‫ادراج اﻃﺎر‬
‫)‪(frame‬‬
‫ﻗﺪ ﻧﺤﺘﺎج اﺛﻨﺎء ﺗﺼﻤﯿﻤﻨﺎ ﻟﺼﻔﺤﺎت اﻻﻧﺘﺮﻧﺖ اﻟﻰ ﻓﺘﺢ اﻛﺜﺮ ﻣﻦ ﺻﻔﺤﺔ اﻧﺘﺮﻧﺖ ﻓﻲ ﻧﻔﺲ‬
‫اﻟﺼﻔﺤﺔ ﻛﻤﺎ ﻓﻲ اﻟﺼﻮرة اﻟﺘﺎﻟﯿﺔ ‪:‬‬

‫ﻓﻔﻲ ھﺬه اﻟﺼﻮرة ﯾﻮﺟﺪ ﺛﻼث ﺻﻔﺤﺎت )ﺟﺰﺋﯿﺔ(‪-‬ﻛﻤﺎ ھﻲ ﻣﺮﻗﻤﺔ ﻓﻲ اﻟﺼﻮرة‪-‬ﻣﻔﺘﻮﺣﺔ ﻓﻲ‬
‫ﻧﻔﺲ اﻟﺼﻔﺤﺔ )اﻟﻜﻠﯿﺔ(‬
‫وﻓﻲ ھﺬا اﻟﺪرس ﺳﻮف ﻧﺘﻌﻠﻢ ﻛﯿﻔﯿﺔ ﻋﻤﻞ ذﻟﻚ‪.‬‬
‫ﻧﺴﺘﻄﯿﻊ ان ﻧﻘﻮل اﻧﮫ ﻟﻌﻤﻞ اﻛﺜﺮ ﻣﻦ ﺻﻔﺤﺔ )ﺟﺰﺋﯿﺔ(ﺗﻔﺘﺢ ﻓﻲ ﻧﻔﺲ اﻟﺼﻔﺤﺔ )اﻟﻜﻠﯿﺔ( ﻓﺎﻧﻨﺎ‬
‫ﻧﺤﺘﺎج اﻟﻰ ﻋﻤﻞ اﻃﺎرات )‪ (frame‬ﻓﻲ اﻟﺼﻔﺤﺔ اﻟﻜﻠﯿﺔ و ﻛﻞ ﺻﻔﺤﺔ ﺟﺰﺋﯿﺔ ﺳﻮف ﺗﻜﻮن‬
‫ﻓﻲ اﻃﺎر ﻣﻌﯿﻦ وﯾﺠﺐ ﻗﺒﻞ ذﻟﻚ ان ﻧﺤﺪد ھﻞ ﻧﺮﯾﺪ ان ﺗﻜﻮن اﻻﻃﺎرات ﺑﺸﻜﻞ اﻓﻘﻲ او‬
‫ﻋﻤﻮدي ‪.‬‬

‫ﻓﻲ ﻟﻐﺔ اﻟﮭﺘﻤﻞ ﯾﺘﻢ ﻋﻤﻞ ذﻟﻚ ﻋﻦ ﻃﺮﯾﻖ اﻟﻮﺳﻢ >‪ <frameset‬واﻟﺬي ﯾﺤﺪد اﻣﺎ ان ﺗﻜﻮن‬
‫اﻻﻃﺎرات ﺑﺸﻜﻞ اﻓﻘﻲ ﻓﻨﺴﺘﺨﺪم اﻟﺼﻔﺔ ‪ rows‬او ﺑﺸﻜﻞ ﻋﻤﻮدي ﻓﻨﺴﺘﺨﺪم اﻟﺼﻔﺔ ‪cols‬‬
‫وﻣﻦ ﺛﻢ ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ >‪ <frame‬ﻟﻌﻤﻞ اﻃﺎر و ﻟﻨﺤﺪد اﻟﺼﻔﺤﺔ اﻻﻓﺘﺮاﺿﯿﺔ اﻟﺘﻲ ﺳﻮف‬
‫ﺗﻈﮭﺮ ﻓﻲ ھﺬا اﻻﻃﺎر ﻋﻦ ﻃﺮﯾﻖ اﻟﺼﻔﺔ ‪) src‬ﻛﻤﺎ ﻓﻲ ﺣﺎﻟﺔ ادراج اﻟﺼﻮر(‪ ،‬ﻛﻞ ھﺬا‬
‫ﺳﻮف ﯾﻜﻮن ﻓﻲ اﻟﺼﻔﺤﺔ اﻟﻜﻠﯿﺔ واﻟﺘﻲ ﯾﺠﺐ ان ﻻ ﺗﺤﺘﻮي ﻋﻠﻰ ﺟﺰء اﻟﺠﺴﻢ )>‪(<body‬‬

‫وﺣﺘﻰ ﻻ ﺗﺘﺸﺎﺑﻚ اﻻﻣﻮر ﻣﻊ ﺑﻌﻀﮭﺎ ﻧﺎﺧﺬ اﻻن اﻟﻤﺜﺎل اﻟﺘﺎﻟﻲ ‪:‬‬

‫ﻣﺜﺎل ‪:25‬‬
‫اﻋﺘﻤﺎدا ﻋﻠﻰ اﻟﺼﻔﺤﺎت اﻟﺘﻲ ﺗﻢ ﺗﺼﻤﯿﻤﮭﺎ ﻓﻲ ﻣﺜﺎل ‪ 24‬وھﻲ ‪:‬‬
‫‪.htm‬اﻟﺮﺋﯿﺴﯿﺔ‬
‫‪.htm‬اﻟﺘﺼﻤﯿﻢ‬
‫‪.htm‬اﻟﺴﯿﺮة‬
‫ﺳﻮف ﻧﻘﻮم ﺑﺘﺼﻤﯿﻢ ﺻﻔﺤﺔ اﺳﻤﮭﺎ ) ‪.htm‬اﻃﺎر( واﻟﺘﻲ ﯾﻈﮭﺮ ﻓﯿﮭﻤﺎ اﻟﺼﻔﺤﺘﯿﻦ‬
‫‪.htm‬اﻟﺮﺋﯿﺴﯿﺔ و ‪.htm‬اﻟﺘﺼﻤﯿﻢ ﻛﻤﺎ ﻓﻲ اﻟﺼﻮرة‪:‬‬
 ‫اﻟﻜﻮد‪:‬‬
‫>‪<html dir=rtl‬‬
‫>‪<head‬‬
‫>‪<title‬‬
‫اﻻﻃﺎر‬
‫>‪</title‬‬
‫>‪</head‬‬
‫>*‪<frameset cols=20%,‬‬
‫>‪.htm‬اﻟﺮﺋﯿﺴﯿﺔ=‪<frame src‬‬
‫>‪.htm‬اﻟﺘﺼﻤﯿﻢ=‪<frame src‬‬
‫>‪</frameset‬‬
‫>‪</html‬‬

‫ﺷﺮح اﻟﻜﻮد ‪:‬‬

‫ﻻﺣﻆ اوﻻ اﻧﮫ ﻻ ﯾﻮﺟﺪ ﺟﺰء اﻟﺠﺴﻢ >‪. <body‬‬

‫>*‪<frameset cols=20%,‬‬ ‫ﻣﺎ ﺑﯿﻦ >‪ <frameset‬وﺑﯿﻦ >‪ </frameset‬ھﻲ‬

‫‪.‬‬ ‫ﻋﺒﺎرة ﻋﻦ ﻣﺠﻤﻮﻋﺔ ﻣﻦ اﻻﻃﺎرات )‪(frame‬‬
‫‪.‬‬
‫‪.‬‬ ‫*‪cols=20%,‬‬
‫>‪</frameset‬‬ ‫ﻟﻌﻤﻞ اﻻﻃﺎرات ﺑﺸﻜﻞ ﻋﺎﻣﻮدي ﺣﯿﺚ ان ﺣﺼﺔ‬
‫اﻻﻃﺎر اﻻول ھﻲ ‪ 20‬ﺑﺎﻟﻤﺌﺔ وﺣﺼﺔ اﻻﻃﺎر‬
‫اﻟﺜﺎﻧﻲ ھﻲ ﻣﺎ ﺗﺒﻘﻰ )اي ‪ 80‬ﺑﺎﻟﻤﺌﺔ (‬

‫>‪.htm‬اﻟﺮﺋﯿﺴﯿﺔ=‪<frame src‬‬
‫ﻟﺘﻜﻮﯾﻦ اﻻﻃﺎر اﻻول وﻗﺪ وﺿﻌﻨﺎ اﻟﺼﻔﺤﺔ اﻟﺮﺋﯿﺴﯿﺔ ﻛﺼﻔﺤﺔ اﻓﺘﺮاﺿﯿﺔ ﻟﮭﺬا اﻻﻃﺎر‬

‫>‪.htm‬اﻟﺘﺼﻤﯿﻢ=‪<frame src‬‬
‫ﻟﺘﻜﻮﯾﻦ اﻻﻃﺎر اﻟﺜﺎﻧﻲ وﻗﺪ وﺿﻌﻨﺎ ﺻﻔﺤﺔ اﻟﺘﺼﻤﯿﻢ ﻛﺼﻔﺤﺔ اﻓﺘﺮاﺿﯿﺔ ﻟﮭﺬا اﻻﻃﺎر‬
 ‫ﻣﺜﺎل ‪: 26‬‬
‫ﻋﺪل ﻋﻠﻰ ﻛﻮد ﻣﺜﺎل ‪ 25‬ﻟﺘﺼﺒﺢ اﻟﺸﺎﺷﺔ ﻛﻤﺎ ﯾﻠﻲ ‪:‬‬

‫اﻟﻜﻮد ‪:‬‬

‫>‪<html dir=rtl‬‬
‫>‪<head‬‬
‫>‪<title‬‬
‫اﻻﻃﺎر‬
‫>‪</title‬‬
‫>‪</head‬‬
‫>*‪<frameset rows=20%,‬‬
‫>‪.htm‬اﻟﺮﺋﯿﺴﯿﺔ=‪<frame src‬‬
‫>‪.htm‬اﻟﺘﺼﻤﯿﻢ=‪<frame src‬‬
‫>‪</frameset‬‬
‫>‪</html‬‬
‫ﻻﺣﻆ اﻧﻨﺎ ﻓﻘﻂ اﺳﺘﺒﺪﻟﻨﺎ اﻟﺼﻔﺔ ‪ cols‬ﺑﺎﻟﺼﻔﺔ ‪ rows‬ﺣﺘﻰ ﺗﺼﺒﺢ اﻻﻃﺎرات اﻓﻘﯿﺔ ‪.‬‬
 ‫ﻣﺜﺎل ‪:27‬‬
‫اﻋﺘﻤﺎدا ﻋﻠﻰ ﻣﺜﺎل ‪ 24‬ﻋﺪل ﻋﻠﻰ ﻛﻮد ﻣﺜﺎل ‪ 25‬ﻟﺘﺼﺒﺢ اﻟﺸﺎﺷﺔ ﻛﻤﺎ ﯾﻠﻲ ‪:‬‬

‫اﻟﻜﻮد ‪:‬‬
‫>‪<html dir=rtl‬‬
‫ﻓﻲ ھﺬا اﻟﻤﺜﺎل ﻻﺣﻆ اﻧﻨﺎ ﻗﻤﻨﺎ ﺑﻌﻤﻞ اﻃﺎرات ﺑﺸﻜﻞ ﻋﻤﻮدي‬
‫>‪<head‬‬
‫وﺑﺸﻜﻞ اﻓﻘﻲ ﻣﻌﺎ ‪.‬‬
‫>‪<title‬‬
‫ﺑﺪاﯾﺔ ﺗﻢ ﺗﻘﺴﯿﻢ اﻟﺸﺎﺷﺔ اﻟﻰ اﻃﺎرﯾﻦ ﻋﻤﻮدﯾﻦ ﻣﻦ ﺧﻼل اﻟﺴﻄﺮ‬
‫اﻻﻃﺎر‬ ‫>*‪<frameset cols=20%,‬‬
‫>‪</title‬‬
‫وﻣﻦ ﺛﻢ ﺗﻜﻮﯾﻦ اﻻﻃﺎر اﻻول ﻣﻦ ﺧﻼل اﻟﺴﻄﺮ‬
‫>‪</head‬‬
‫>‪.htm‬اﻟﺮﺋﯿﺴﯿﺔ=‪<frame src‬‬
‫>*‪<frameset cols=20%,‬‬ ‫و ﻣﻦ ﺛﻢ ﺗﻘﺴﯿﻢ اﻻﻃﺎر اﻟﺜﺎﻧﻲ اﻟﻌﻤﻮدي اﻟﻰ اﻃﺎرﯾﻦ اﻓﻘﯿﻦ ﻣﻦ‬
‫>‪.htm‬اﻟﺮﺋﯿﺴﯿﺔ=‪<frame src‬‬
‫ﺧﻼل اﻟﺴﻄﺮ‬
‫>*‪<frameset rows=40%,‬‬
‫>*‪<frameset rows=40%,‬‬ ‫وﻣﻦ ﺛﻢ ﻋﻤﻞ اﻻﻃﺎر اﻻﻓﻘﻲ اﻻول واﻟﺜﺎﻧﻲ ﻣﻦ ﺧﻼل اﻟﺴﻄﺮﯾﻦ‬
‫>‪.htm‬اﻟﺘﺼﻤﯿﻢ=‪<frame src‬‬
‫>‪.htm‬اﻟﺘﺼﻤﯿﻢ=‪<frame src‬‬
‫>‪.htm‬اﻟﺴﯿﺮة=‪<frame src‬‬
‫>‪.htm‬اﻟﺴﯿﺮة=‪<frame src‬‬
‫>‪</frameset‬‬
‫وﻣﻦ ﺛﻢ اﻏﻼق وﺳﻢ ﻋﻤﻞ اﻻﻃﺎرات اﻻﻓﻘﯿﺔ‬
‫>‪</frameset‬‬
‫>‪</frameset‬‬
‫واﺧﯿﺮا اﻏﻼق وﺳﻢ ﻋﻤﻞ اﻃﺎرات ﻋﻤﻮدﯾﺔ‬
‫>‪</html‬‬ ‫>‪</frameset‬‬
 ‫و اﻻن ﻟﻨﻔﺘﺮض اﻧﻨﺎ ﻧﺮﯾﺪ ﻋﻤﻞ اﻟﺸﺎﺷﺔ اﻟﺘﺎﻟﯿﺔ ‪:‬‬

‫ﺑﺤﯿﺚ ﻋﻨﺪﻣﺎ ﻧﻀﻐﻂ ﻋﻠﻰ اﻻرﺗﺒﺎط اﻟﺘﺸﻌﯿﺒﻲ "اﻟﺴﯿﺮة اﻟﺬاﺗﯿﺔ" ﺗﻔﺘﺢ ﻟﻨﺎ ﺻﻔﺤﺔ اﻟﺴﯿﺮة‬
‫اﻟﺬاﺗﯿﺔ ﻓﻲ اﻻﻃﺎر رﻗﻢ ‪ 2‬وﻛﺬﻟﻚ اﻻﻣﺮ ﻋﻨﺪ اﻟﻀﻐﻂ ﻋﻠﻰ اﻻرﺗﺒﺎط اﻟﺘﺸﻌﯿﺒﻲ "درس ﻓﻲ‬
‫ﺗﺼﻤﯿﻢ اﻟﻤﻮاﻗﻊ " ﺗﻔﺘﺢ ﻟﻨﺎ ﺻﻔﺤﺔ ﺗﺼﻤﯿﻢ وﺑﺮﻣﺠﺔ اﻟﻤﻮاﻗﻊ ﻓﻲ اﻻﻃﺎر رﻗﻢ ‪. 2‬‬

‫ﻟﻌﻤﻞ ﻣﺜﻞ ذﻟﻚ ﻧﺴﺘﺨﺪم ﺻﻔﺔ ﺟﺪﯾﺪة ﻋﻨﺪ ﻛﻞ ﺗﺤﺪﯾﺪ اﻃﺎر وھﻲ ‪ name‬اي ﺑﻤﻌﻨﻰ اﺧﺮ‬
‫ﻧﺤﻦ ﻧﻄﻠﻖ اﺳﻤﺎ ﻟﮭﺬا اﻻﻃﺎر‬
‫واﯾﻀﺎ ﻧﻘﻮم ﺑﺎﺳﺘﺨﺪام ﺻﻔﺔ ﺟﺪﯾﺪة ﻋﻨﺪ ﻛﻞ ارﺗﺒﺎط ﺗﺸﻌﯿﺒﻲ وھﻲ ‪ target‬وﻧﻜﺘﺐ ﺑﻌﺪھﺎ‬
‫اﺳﻢ اﻻﻃﺎر اﻟﺬي ﺳﻮف ﯾﻔﺘﺢ ﺑﮫ اﻟﺼﻔﺤﺔ اﻟﺘﻲ ﻟﮭﺎ ارﺗﺒﺎط ﺗﺸﻌﯿﺒﻲ اي ﻧﺤﺪد اﻻﻃﺎر اﻟﮭﺪف‬
‫وﻟﻌﻞ اﻟﻤﺜﺎل اﻟﻘﺎدم ﺳﯿﻮﺿﺢ اﻻﻣﻮر ﺑﺸﻜﻞ اﻛﺒﺮ‪.‬‬
 :28 ‫ﻣﺜﺎل‬
. ‫ ﺻﻤﻢ اﻟﺼﻔﺤﺔ اﻟﻤﻮﺟﻮدة ﻓﻲ اﻟﺼﻔﺤﺔ اﻟﺴﺎﺑﻘﺔ‬24 ‫اﻋﺘﻤﺎدا ﻋﻠﻰ ﻣﺜﺎل‬

:‫اﻟﻜﻮد‬
(‫اﻃﺎر)اﻟﺼﻔﺤﺔ اﻟﻜﻠﯿﺔ‬.htm ‫ ﻧﻘﻮم ﺑﻜﺘﺎﺑﺔ اﻟﻜﻮد اﻟﺘﺎﻟﻲ ﻟﺼﻔﺤﺔ‬: ‫اوﻻ‬

<html dir=rtl>
<head>
<title>
‫اﻻﻃﺎر‬
</title>
</head>
<frameset cols=20%,*>
<frame src=‫اﻟﺮﺋﯿﺴﯿﺔ‬.htm name=content>
<frame src=‫اﻟﺘﺼﻤﯿﻢ‬.htm name=main>
</frameset>
</html>

: ‫ اﻟﺮﺋﯿﺴﯿﺔ ﻛﻤﺎ ﯾﻠﻲ‬.htm ‫ ﻧﻘﻮم ﺑﺎﻟﺘﻌﺪﯾﻞ ﻋﻠﻰ ﻛﻮد ﺻﻔﺤﺔ‬: ‫ﺛﺎﻧﯿﺎ‬

<html dir=rtl>
<head>
<title>‫<اﻟﺼﻔﺤﺔ اﻟﺮﺋﯿﺴﯿﺔ‬/title>
</head>
<body bgcolor= #009933>
<center>
<font size=18pt>‫<ﻣﺤﻤﺪ ﺧﺎﻟﺪ‬/font>
</center>
<ul>
<li><a href=‫اﻟﺴﯿﺮة‬.htm target=main>‫<اﻟﺴﯿﺮة اﻟﺬاﺗﯿﺔ‬/a></li>
<li><a href=‫اﻟﺘﺼﻤﯿﻢ‬.htm target=main>‫<درس ﻓﻲ ﺗﺼﻤﯿﻢ اﻟﻤﻮاﻗﻊ‬/a></li>
</ul>
‫ﻟﻼﺗﺼﺎل ﺑﻨﺎ‬:
<a href=mailto:moh_khalid@yahoo.com>moh_khalid@yahoo.com</a>
</body>
</html>
 ‫ﻓﻲ ﻣﺜﺎﻟﻨﺎ ھﺬا ﻻﺣﻆ ‪:‬‬

‫>‪.htm name=content‬اﻟﺮﺋﯿﺴﯿﺔ=‪<frame src‬‬

‫اﺳﻤﯿﻨﺎ اﻻﻃﺎر اﻻول ﺑﺎﻻﺳﻢ ‪ content‬ووﺿﻌﻨﺎ اﻟﺼﻔﺤﺔ اﻟﺮﺋﯿﺴﯿﺔ ﻛﺼﻔﺤﺔ اﻓﺘﺮاﺿﯿﺔ‬
‫ﻟﮭﺬا اﻻﻃﺎر‬
‫>‪.htm name=main‬اﻟﺘﺼﻤﯿﻢ=‪<frame src‬‬
‫اﺳﻤﯿﻨﺎ اﻻﻃﺎر اﻟﺜﺎﻧﻲ ﺑﺎﻻﺳﻢ ‪ main‬ووﺿﻌﻨﺎ ﺻﻔﺤﺔ اﻟﺘﺼﻤﯿﻢ ﻛﺼﻔﺤﺔ اﻓﺘﺮاﺿﯿﺔ ﻟﮭﺬا‬
‫اﻻﻃﺎر‬
‫>‪</a></li‬اﻟﺴﯿﺮة اﻟﺬاﺗﯿﺔ>‪.htm target=main‬اﻟﺴﯿﺮة=‪<li><a href‬‬
‫وﺿﻌﻨﺎ اﻟﮭﺪف ﻟﮭﺬا اﻻرﺗﺒﺎط اﻟﺘﺸﻌﯿﺒﻲ ھﻮ اﻻﻃﺎر اﻟﻤﺴﻤﻰ ‪main‬‬

‫>‪</a></li‬درس ﻓﻲ ﺗﺼﻤﯿﻢ اﻟﻤﻮاﻗﻊ>‪.htm target=main‬اﻟﺘﺼﻤﯿﻢ=‪<li><a href‬‬

‫وﺿﻌﻨﺎ اﻟﮭﺪف ﻟﮭﺬا اﻻرﺗﺒﺎط اﻟﺘﺸﻌﯿﺒﻲ ھﻮ اﻻﻃﺎر اﻟﻤﺴﻤﻰ ‪main‬‬

‫ﻃﺒﻖ اﻟﻤﺜﺎل ﻋﻤﻠﯿﺎ ﻋﻠﻰ ﺟﮭﺎزك و ﻻﺣﻆ اﻧﻨﺎ ﻗﺪ ﺣﻘﻘﻨﺎ اﻟﻐﺎﯾﺔ اﻟﻤﻨﺸﻮدة‬

‫اﻻن ﻟﻮ ﻛﺎن ﻟﺪﯾﻨﺎ ﻣﺎﺋﺔ ارﺗﺒﺎط ﺗﺸﻌﯿﺒﻲ ھﻞ ﺳﻨﺬھﺐ ﻟﻨﻜﺘﺐ ﻋﻨﺪ ﻛﻞ واﺣﺪ ﻣﻨﮭﺎ‬
‫‪target=main‬؟!‬
‫اﻟﺠﻮاب ھﻮ ﻻ ھﻨﺎك ﺣﻞ اﺳﺮع وھﻮ اﺳﺘﺨﺪام اﻟﻮﺳﻢ >‪ <base‬ﻣﻊ اﻟﺼﻔﺔ ‪ target‬واﻟﺘﻲ‬
‫ﺗﻠﺤﻖ ﺑﺪورھﺎ ﺑﺎﺳﻢ اﻻﻃﺎر اﻟﮭﺪف وﯾﻜﻮن ذﻟﻚ ﺑﺠﺰء راس اﻟﺼﻔﺤﺔ )ﺿﻤﻦ >‪(<head‬‬
‫وﻻﻧﻔﻌﻞ ﺷﯿﺌﺎ ﻋﻨﺪ اﻻرﺗﺒﺎط اﻟﺘﺸﻌﯿﺒﻲ‪.‬‬
‫ﻟﻨﻄﺒﻖ ذﻟﻚ ﻋﻠﻰ ﻣﺜﺎل ‪ 28‬ﻓﯿﺼﺒﺢ ﻛﻮد ﺻﻔﺤﺔ ‪ .htm‬اﻟﺮﺋﯿﺴﯿﺔ ﻛﻤﺎ ﯾﻠﻲ ‪:‬‬
‫>‪<html dir=rtl‬‬
‫>‪<head‬‬
‫>‪</title‬اﻟﺼﻔﺤﺔ اﻟﺮﺋﯿﺴﯿﺔ>‪<title‬‬
‫>‪<base target=main‬‬
‫>‪</head‬‬
‫>‪<body bgcolor= #009933‬‬
‫>‪<center‬‬
‫>‪</font‬ﻣﺤﻤﺪ ﺧﺎﻟﺪ>‪<font size=18pt‬‬
‫>‪</center‬‬
‫>‪<ul‬‬
‫>‪</a></li‬اﻟﺴﯿﺮة اﻟﺬاﺗﯿﺔ> ‪.htm‬اﻟﺴﯿﺮة=‪<li><a href‬‬
‫>‪</a></li‬درس ﻓﻲ ﺗﺼﻤﯿﻢ اﻟﻤﻮاﻗﻊ> ‪.htm‬اﻟﺘﺼﻤﯿﻢ=‪<li><a href‬‬
‫>‪</ul‬‬
‫‪:‬ﻟﻼﺗﺼﺎل ﺑﻨﺎ‬
‫>‪<a href=mailto:moh_khalid@yahoo.com>moh_khalid@yahoo.com</a‬‬
‫>‪</body‬‬
‫>‪</html‬‬
 ‫ادراج ﻧﻤﻮذج‬
‫)اﺳﺘﻌﻤﺎل ‪(Form‬‬
‫اﺛﻨﺎء ﻋﻤﻠﻨﺎ ﻋﻠﻰ ﺗﺼﻤﯿﻢ اﻟﻤﻮﻗﻊ ﻗﺪ ﻧﺤﺘﺎج اﻟﻰ ادراج ﻧﻤﻮذج اﺳﺘﺒﯿﺎن او ﻧﻤﻮذج ﺗﺴﺠﯿﻞ‬
‫او‪ ....‬اﻟﺦ ﺑﺤﯿﺚ ان اﻟﻤﺴﺘﺨﺪم ﺳﻮف ﯾﺪﺧﻞ ﺑﯿﺎﻧﺎت اﻟﻰ ھﺬا اﻟﻨﻤﻮذج ﻣﺜﻞ اﺳﻤﮫ و ﻋﻤﺮه‬
‫وﻋﻨﻮان ﺑﺮﯾﺪه اﻻﻟﻜﺘﺮوﻧﻲ ‪....‬اﻟﺦ‪.‬‬

‫وﻟﻌﻞ ﻣﻦ أھﻢ ﻋﻨﺼﺮ ﺗﻜﻮﯾﻦ اﻟﻨﻤﻮذج )‪ (form‬ﻣﺎ ﯾﻠﻲ‪:‬‬

‫‪ .1‬ﻧﺺ )‪ <--------------------------(text‬ودﯾﻊ أﺳﻌﺪ وﯾﺪﺧﻞ ﻓﯿﮫ ﻧﺺ‬
‫وﻣﻦ اﻻﻣﺜﻠﺔ ﻋﻠﯿﮭﺎ ادﺧﺎل اﻻﺳﻢ واﻟﺒﺮﯾﺪ اﻻﻟﻜﺘﺮوﻧﻲ ‪.‬‬

‫‪ .2‬ﻛﻠﻤﺔ ﺳﺮ ) ‪ ******* < ---------------(password‬وﯾﺪﺧﻞ ﻓﯿﮫ ﻧﺺ‬

‫ﻟﻜﻦ ﻣﺎ ﯾﻈﮭﺮ ھﻮ ﻋﺒﺎرة ﻋﻦ ﻧﺠﻮم وﻣﻦ اﻻﻣﺜﻠﺔ ﻋﻠﯿﮫ ادﺧﺎل ﻛﻠﻤﺔ اﻟﺴﺮ‬
‫ﺎ‬ ‫‪ .3‬ﻣﺴﺎﺣﺔ ﻧﺺ )‪<-----------(text area‬‬
‫وﯾﺪﺧﻞ ﻓﯿﮫ ﻧﺠﻤﻮﻋﺔ ﻧﺺ وﻣﻦ اﻻﻣﺜﻠﺔ‬
‫ﻋﻠﯿﮫ ﻛﺘﺎﺑﺔ اﻟﺘﻌﻠﯿﻖ او ﻛﺘﺎﺑﺔ اﻟﺮاي‬

‫اﺧﺘﺮ اﻟﺪوﻟﺔ‬ ‫‪ .4‬اﺧﺘﯿﺎر )‪<-----------(select‬‬

‫وﯾﺘﻢ ھﻨﺎ وﺿﻊ ﻋﺪة ﺧﯿﺎرات ﺣﺘﻰ ﯾﻘﻮم اﻟﻤﺴﺘﺨﺪم ﺑﺎﺧﺘﯿﺎر اﺣﺪى ھﺬه اﻟﺨﯿﺎرات وﻣﻦ‬
‫اﻻﻣﺜﻠﺔ ﻋﻠﯿﮭﺎ اﺧﺘﯿﺎر اﻟﺪوﻟﺔ او اﺧﺘﯿﺎر اﻟﻌﻤﺮ او اﺧﺘﯿﺎر ﻧﻮع اﻻﺗﺼﺎل ‪.‬‬
‫‪ .5‬ﺻﻨﺪوق ﻓﺤﺺ )‪Yahoo <------------(check box‬‬
‫وﯾﺘﻢ ھﻨﺎ وﺿﻊ ﺧﯿﺎر واﻟﻰ ﺟﺎﻧﺒﮫ ﻣﺮﺑﻊ ﯾﻤﻜﻦ وﺿﻊ ﻓﯿﮫ اﺷﺎرة ﺻﺢ )√( ﻓﯿﻘﻮم‬
‫اﻟﻤﺴﺘﺨﺪم ﺑﻮﺿﻊ اﻻﺷﺎرة اذا اراد اﻟﺨﯿﺎر وإﻵ ﻻ ﯾﻀﻊ اي ﺷﻲء وﻣﻦ اﻻﻣﺜﻠﺔ ﻋﻠﯿﮭﺎ‬
‫اﺧﺘﯿﺎر ﻋﺪد ﻣﻦ ﻣﺤﺮﻛﺎت اﻟﺒﺤﺚ اﻟﻤﻔﻀﻠﺔ )ﯾﻤﻜﻦ اﺧﺘﯿﺎر ﺟﯿﻤﯿﻊ اﻟﺨﯿﺎرات(‬
‫ذﻛﺮ‬ ‫‪ .6‬ﺻﻨﺪوق اﺧﺘﯿﺎر )‪<-----------(option)(radio‬‬
‫اﻧﺜﻰ‬
‫وﯾﺘﻢ ھﻨﺎ وﺿﻊ اﻟﺨﯿﺎر واﻟﻰ ﺟﺎﻧﺒﮫ داﺋﺮة ﯾﻤﻜﻦ وﺿﻊ ﻓﯿﮭﺎ اﺷﺎرة ﻧﻘﻄﺔ ﻓﯿﻘﻮم اﻟﻤﺴﺘﺨﺪم‬
‫ﺑﻮﺿﻊ اﻻﺷﺎرة اﻟﻰ ﺧﯿﺎر واﺣﺪ ﻓﻘﻂ وﻣﻦ اﻻﻣﺜﻠﺔ ﻋﻠﻰ ذﻟﻚ اﺧﺘﯿﺎر اﻟﺠﻨﺲ )ذﻛﺮ او اﻧﺜﻰ(‬
‫ﻓﯿﻘﻮم اﻟﻤﺴﺘﺨﺪم ﺑﺎﺧﺘﯿﺎر واﺣﺪ ﻣﻦ اﻟﺨﯿﺎرﯾﻦ ‪.‬‬
 ‫‪ .7‬زر)‪ :(button‬وھﻮ ﯾﻘﺴﻢ ﺑﺪوره اﻟﻰ ﺛﻼﺛﺔ اﻗﺴﺎم وھﻲ ‪:‬‬
‫وھﺬا اﻟﺰر ﯾﻮﺿﻊ‬ ‫ﻣﻮاﻓﻖ‬ ‫§ زر ﻣﻮاﻓﻘﺔ)‪<------------ (submit‬‬
‫اﺧﺮ اﻟﻨﻤﻮذج ﻟﻠﻤﻮاﻓﻘﺔ ﻋﻠﻰ ﺟﻤﯿﻊ اﻟﺒﯿﺎﻧﺎت اﻟﻤﺪﺧﻠﺔ ‪.‬‬
‫ﻣﺴﺢ اﻟﺤﻘﻮل‬
‫وھﺬا اﻟﺰر ﯾﻮﺿﻊ‬ ‫§ زر ﻣﺴﺢ )‪<------------ (reset‬‬
‫اﺧﺮ اﻟﻨﻤﻮذج ﻟﻤﺴﺢ ﺟﻤﯿﻊ اﻟﺤﻘﻮل )اﻟﺒﯿﺎﻧﺎت( ﻣﻦ اﻟﻨﻤﻮذج ‪.‬‬
‫§ زر ﻣﻦ ﺻﻨﻊ اﻟﻤﺼﻤﻢ )‪ <------ (user defined‬ﻗﺮاءة اﻟﺸﺮوط‬
‫وھﺬا اﻟﺰر ﯾﻀﻌﮫ اﻟﻤﺼﻤﻢ وذﻟﻚ ﻟﻠﻘﯿﺎم ﺑﻮﻇﺎﺋﻒ ﻣﻌﯿﻨﺔ ﻋﻨﺪ اﻟﻀﻐﻂ ﻋﻠﯿﮫ‬
‫ﻛﺎﻇﮭﺎر ﺷﺮوط اﻻﺳﺘﺨﺪام أو ﺑﺪء ﺗﺸﻐﯿﻞ ﺳﺎﻋﺔ او‪....‬اﻟﺦ‬

‫ھﺬه اﻟﻌﻨﺎﺻﺮ ﻣﺒﯿﻨﺔ ﻓﻲ اﻟﺼﻮرة اﻟﺘﺎﻟﯿﺔ ‪:‬‬

 ‫اﻻن ﻻدراج اﻟﻨﻤﺎذج ﻓﻲ ﻟﻐﺔ اﻟﮭﺘﻤﻞ ﯾﺠﺐ ان ﻧﻌﺮف اﻻﻣﻮر اﻟﺘﺎﻟﯿﺔ ‪:‬‬
‫‪ .1‬اﻟﻨﻤﻮذج اﻣﺎ ﯾﻜﻮن ﻟﺠﻠﺐ اﻟﺒﯿﺎﻧﺎت )‪ (get‬او ﻟﺒﻌﺚ اﻟﺒﯿﺎﻧﺎت )‪ (post‬وﻧﺤﻦ ﻣﻌﻈﻢ‬
‫ﺗﻌﺎﻣﻠﻨﺎ ﺳﻮف ﯾﻜﻮن ﻣﻊ ﺑﻌﺚ اﻟﺒﯿﺎﻧﺎت )‪.(post‬‬
‫‪ .2‬ﺗﺒﻌﺚ اﻟﺒﯿﺎﻧﺎت اﻟﻤﻌﺒﺌﺔ ﻓﻲ اﻟﻨﻤﻮذج اﻣﺎ ﻟﺼﻔﺤﺔ ﻣﺼﻤﻤﺔ ﺑﻠﻐﺔ ‪ ASP‬او اﻟﻰ اﻟﺒﺮﯾﺪ‬
‫اﻻﻟﻜﺘﺮوﻧﻲ وﻧﺤﻦ ھﻨﺎ ﺳﻮف ﻧﺘﻌﺎﻣﻞ ﻣﻊ ﺣﺎﻟﺔ اﻟﺒﺮﯾﺪ اﻻﻟﻜﺘﺮوﻧﻲ ‪.‬‬

‫اﻻن ﺳﻮف ﻧﺎﺧﺬ ﺷﺮﺣﺎ ﻣﻮﺟﺰا ﻋﻦ اھﻢ اﻻوﺳﻤﺔ واﻟﺼﻔﺎت اﻟﻤﺴﺘﺨﺪﻣﺔ ﻻدراج‬
‫اﻟﻨﻤﺎذج‪:‬‬

‫ﻟﻌﻤﻞ اﻟﻨﻤﻮذج ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ >‪ <form‬ﻛﻤﺎ ﯾﻠﻲ ‪:‬‬

‫‪<form name=…..‬‬ ‫……=‪1 method‬‬ ‫>……=‪2 action‬‬ ‫‪3‬‬

‫‪.‬‬
‫‪.‬‬
‫‪.‬‬
‫>‪</form‬‬
‫‪. 1‬ﯾﻮﺿﻊ ھﻨﺎ اﺳﻢ ﻟﻠﻨﻤﻮذج وھﺬا ﻋﺎدة ﯾﻜﻮن ﻻﻏﺮاض اﻟﺒﺮﻣﺠﺔ ‪.‬‬
‫‪.2‬ﯾﻮﺿﻊ ھﻨﺎ ﻧﻮع اﻟﻨﻤﻮذج ھﻞ ھﻮ ‪ post‬او ‪ get‬وﻛﻤﺎ ﻗﻠﻨﺎ اﻧﻨﺎ ﺳﻮف ﻧﺴﺘﺨﺪم ‪post‬‬
‫‪.3‬ﯾﻮﺿﻊ ھﻨﺎ ﻋﻨﻮان ﺻﻔﺤﺔ اﻟـ‪ ASP‬او اﻻﻣﯿﻞ ﻣﺴﺒﻮﻗﺎ ﺑﻜﻠﻤﺔ ‪ mailto:‬وﻛﻤﺎ ﻗﻠﻨﺎ‬
‫اﻧﻨﺎ ﺳﻮف ﻧﺴﺘﺨﺪم اﻻﻣﯿﻞ‬

‫ﻟﻌﻤﻞ ‪ text‬ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ >‪ <input‬ﻣﻊ اﻟﺼﻔﺔ ‪ type‬ﻣﺘﺒﻮﻋﺔ ﺑﺎﻟﻘﯿﻤﺔ ‪ text‬ﻛﻤﺎ‬

‫ﯾﻠﻲ‪:‬‬
‫‪1‬‬ ‫‪2‬‬
‫>……=‪<input type=text name=…… size‬‬
‫‪.1‬ﯾﻮﺿﻊ ھﻨﺎ اﺳﻢ ﻟﻠـ‪ text‬وھﺬا ﻋﺎدة ﯾﻜﻮن ﻻﻏﺮاض اﻟﺒﺮﻣﺠﺔ‪.‬‬
‫‪.2‬ﯾﻮﺿﻊ ھﻨﺎ رﻗﻢ ﯾﻤﺜﻞ ﻋﺪد اﻟﺤﺮوف واﻻرﻗﺎم اﻟﺘﻲ ﯾﺴﺘﻮﻋﺒﮭﺎ ھﺬا اﻟـ‪.text‬‬

‫ﻟﻌﻤﻞ ‪ password‬ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ >‪ <input‬ﻣﻊ اﻟﺼﻔﺔ ‪ type‬ﻣﺘﺒﻮﻋﺔ ﺑﺎﻟﻘﯿﻤﺔ‬

‫‪ password‬ﻛﻤﺎ ﯾﻠﻲ‪:‬‬
‫‪1‬‬
‫‪<input type=password name=…. maxlength=….‬‬ ‫>‪2 size==…..‬‬‫‪3‬‬
‫‪ .1‬ﯾﻮﺿﻊ ھﻨﺎ اﺳﻢ ﻟﻠـ ‪ password‬وھﺬا ﻋﺎدة ﯾﻜﻮن ﻻﻏﺮاض اﻟﺒﺮﻣﺠﺔ‪.‬‬
‫‪ .2‬ﯾﻮﺿﻊ ھﻨﺎ رﻗﻢ وھﻮ ﯾﻤﺜﻞ اﻛﺒﺮ ﻋﺪد ﻣﻦ اﻟﺤﺮوف واﻻرﻗﺎم ﯾﻤﻜﻦ وﺿﻌﮭﺎ ﻓﻲ‬
‫اﻟـ ‪. password‬‬
‫‪ .3‬ﯾﻮﺿﻊ ھﻨﺎ رﻗﻢ ﯾﻤﺜﻞ ﻋﺪد اﻟﺤﺮوف واﻻرﻗﺎم اﻟﺘﻲ ﯾﺴﺘﻮﻋﺒﮭﺎ ھﺬا اﻟـ‪. password‬‬
 ‫ﻟﻌﻤﻞ ‪ text area‬ﻧﺴﺘﺨﺪ اﻟﻮﺳﻢ >‪ <textarea‬ﻛﻤﺎ ﯾﻠﻲ ‪:‬‬

‫……=‪<textarea name‬‬ ‫‪1 rows=…..‬‬ ‫‪2 cols=… >…..‬‬ ‫>‪3 </textarea‬‬

‫‪4‬‬
‫‪.1‬ﻧﻀﻊ ھﻨﺎ اﺳﻤﺎ ﻟﻠـ ‪ textarea‬وھﺬا ﻋﺎدة ﯾﺴﺘﺨﺪم ﻓﻲ ﺣﺎﻻت اﻟﺒﺮﻣﺠﺔ‬
‫‪.2‬ﻧﻀﻊ ھﻨﺎ رﻗﻤﺎ ﯾﻤﺜﻞ ﻋﺪد اﻟﺴﻄﻮر ﻟـ ‪textarea‬‬
‫‪ .3‬ﻧﻀﻊ ھﻨﺎ رﻗﻤﺎ ﯾﻤﺜﻞ ﻋﺪد اﻻﻋﻤﺪة ﻟـ ‪textarea‬‬
‫‪.4‬ﻧﻀﻊ ھﻨﺎ ﻧﺼﺎ ﻟﯿﻜﻮن ﻛﻘﯿﻤﺔ اﺑﺘﺪاﺋﯿﺔ ﻟﮭﺬا اﻟـ‪ textarea‬ﻣﺜﻼ "اﻛﺘﺐ ﻣﻼﺣﻈﺎﺗﻚ‬
‫ھﻨﺎ"‪.‬‬

‫ﻟﻌﻤﻞ ‪ select‬ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ >‪ <select‬واﻟﻮﺳﻢ >‪ <option‬ﻟﻮﺿﻊ اﻟﺨﯿﺎرات ﻛﻤﺎ‬

‫ﯾﻠﻲ ‪:‬‬
‫‪1‬‬
‫> ‪<select name=…….‬‬
‫‪3‬‬
‫‪2‬‬
‫>‪<option value=…….>…………..</option‬‬
‫‪2‬‬ ‫‪3‬‬
‫>‪<option value=…….>……………</option‬‬
‫‪.‬‬
‫‪.‬‬
‫‪.‬‬
‫>‪</select‬‬
‫‪ .1‬ﯾﻮﺿﻊ ھﻨﺎ اﺳﻢ ﻟﻠـ ‪ select‬وھﻲ ﻋﺎدة ﻻﻏﺮاض اﻟﺒﺮﻣﺠﺔ‬
‫‪ .2‬ﯾﻮﺿﻊ ھﻨﺎ ﻗﯿﻤﺔ ﻟﻠﻮﺳﻢ >‪ <option‬وھﻲ ﺑﻤﺜﺎﺑﺔ اﺳﻢ ﻟﮭﺎ وﺗﺴﺘﺨﺪم ﻻﻏﺮاض‬
‫اﻟﺒﺮﻣﺠﺔ ‪.‬‬
‫‪ .3‬ﺗﻮﺿﻊ ھﻨﺎ اﻟﺨﯿﺎرات‬
‫اذا اردﻧﺎ ان ﺗﻜﻮن اﺣﺪى اﻻﺧﺘﯿﺎرات ﺗﻈﮭﺮ ﻛﻘﯿﻤﺔ اﺑﺘﺪاﺋﯿﺔ ﻧﻀﻊ ﻛﻠﻤﺔ ‪ selected‬ﺑﻌﺪ‬
‫اﻟﺼﻔﺔ ‪. value‬‬

‫ﻟﻌﻤﻞ اﻟـ ‪ check box‬ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ >‪ <input‬ﻣﺘﺒﻮﻋﺎ ﺑﺎﻟﺼﻔﺔ ‪ type‬واﻟﺘﻲ‬

‫ﺗﺘﺒﻊ ﺑﺎﻟﻘﯿﻤﺔ ‪ checkbox‬ﻛﻤﺎ ﯾﻠﻲ ‪:‬‬
‫‪<input type=checkbox name=…..‬‬ ‫‪1 >…………….‬‬ ‫‪2‬‬
‫‪.1‬ﻧﻀﻊ ھﻨﺎ اﺳﻤﺎ ﻟﻠـ ‪ checkbox‬وھﻲ ﻋﺎدة ﺗﺴﺘﺨﺪم ﻻﻏﺮاض اﻟﺒﺮﻣﺠﺔ‬
‫‪ .2‬ﻧﻀﻊ ھﻨﺎ اﻟﺨﯿﺎر‬
‫اذا اردﻧﺎ واﺣﺪ ﻣﻦ اﻟﺨﯿﺎرات او اﻛﺜﺮ ان ﯾﻜﻮن ﻣﻌﻠﻢ ﺑﺎﻟﻌﻼﻣﺔ ﻛﻘﯿﻤﺔ اﺑﺘﺪاﺋﯿﺔ ﻧﺴﺘﺨﺪم‬
‫ﻋﻨﺪﺋﺬ اﻟﻜﻠﻤﺔ ‪ checked‬ﺑﻌﺪ اﻟﺼﻔﺔ ‪. name‬‬
 ‫ﻟﻌﻤﻞ اﻟـ ‪ radio‬ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ >‪ <input‬ﻣﺘﺒﻮﻋﺎ ﺑﺎﻟﺼﻔﺔ ‪ type‬واﻟﺘﻲ ﺗﺘﺒﻊ ﺑﺎﻟﻘﯿﻤﺔ‬
‫‪ radio‬ﻛﻤﺎ ﯾﻠﻲ ‪:‬‬
‫‪1‬‬
‫‪<input type=radio name=……. value=……>………….‬‬ ‫‪2‬‬ ‫‪3‬‬
‫‪ .1‬ﻧﻀﻊ ھﻨﺎ اﺳﻤﺎ ﻟﻠـ ‪ radio‬و ﯾﺠﺐ ان ﯾﻜﻮن اﺳﻤﺎ واﺣﺪا ﻟﻜﻞ اﻟﺨﯿﺎرات وھﻮ‬
‫ﻻﻏﺮاض اﻟﺒﺮﻣﺠﺔ وﻧﺤﻦ ﻧﺴﺘﺨﺪم اﺳﻤﺎ ﻣﻮﺣﺪا ﺣﺘﻰ ﻧﺴﺘﻄﯿﻊ اﻟﻘﯿﺎم ﺑﺎﺧﺘﯿﺎر واﺣﺪ ﻻ‬
‫ﻏﯿﺮ ‪.‬‬
‫‪ .2‬ﻧﻀﻊ ھﻨﺎ ﻗﯿﻤﺔ ﻟﮭﺬا اﻟـ ‪ radio‬وذﻟﻚ ﻟﻠﺘﻤﯿﺰ ﺑﯿﻨﮭﺎ ﺑﻤﺎ ان اﻻﺳﻢ ﺳﯿﻜﻮن ﻣﻮﺣﺪا‪.‬‬
‫‪.3‬ﻧﻀﻊ ھﻨﺎ اﻻﺧﺘﯿﺎر ‪.‬‬
‫اذا اردﻧﺎ ان ﯾﻜﻮن اﺣﺪ اﻻﺧﺘﯿﺎرات ﻣﻌﻠﻢ ﺑﺎﻟﻌﻼﻣﺔ ﻛﻘﯿﻤﺔ اﺑﺘﺪاﺋﯿﺔ ﻧﺴﺘﺨﺪم اﻟﻜﻠﻤﺔ‬
‫‪ checked‬ﺑﻌﺪ اﻟﺼﻔﺔ ‪.value‬‬

‫ﻟﺘﺼﻤﯿﻢ زر ﻣﻮاﻓﻘﺔ )‪ (submit‬ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ >‪ <input‬ﻣﺘﺒﻮﻋﺎ ﺑﺎﻟﺼﻔﺔ ‪type‬‬

‫واﻟﺘﻲ ﺗﺘﺒﻌﮭﺎ اﻟﻘﯿﻤﺔ ‪ submit‬ﻛﻤﺎ ﯾﻠﻲ ‪:‬‬
‫>‪<input type=submit value=…..‬‬‫‪1‬‬
‫‪.1‬ﻧﻀﻊ ھﻨﺎ اﻟﻘﯿﻤﺔ اﻻﻓﺘﺮاﺿﯿﺔ ﻟﺰر اﻟﻤﻮاﻓﻘﺔ ﻓﺎﻟﻘﯿﻤﺔ اﻻﺑﺘﺪاﺋﯿﺔ ھﻲ ‪ submit query‬ﻓﺎذا‬
‫اردﻧﺎ ﺗﻐﯿﺮھﺎ ﻧﺴﺘﻌﻤﻞ ‪. value‬‬

‫ﻟﺘﺼﻤﯿﻢ زر ﻣﺴﺢ )‪ (reset‬ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ >‪ <input‬ﻣﺘﺒﻮﻋﺎ ﺑﺎﻟﺼﻔﺔ ‪ type‬واﻟﺘﻲ ﺗﺘﺒﻌﮭﺎ‬

‫اﻟﻘﯿﻤﺔ ‪ reset‬ﻛﻤﺎ ﯾﻠﻲ ‪:‬‬
‫>‪<input type=reset value=…..‬‬ ‫‪1‬‬
‫‪.1‬ﻧﻀﻊ ھﻨﺎ اﻟﻘﯿﻤﺔ اﻻﻓﺘﺮاﺿﯿﺔ ﻟﺰر اﻟﻤﻮاﻓﻘﺔ ﻓﺎﻟﻘﯿﻤﺔ اﻻﺑﺘﺪاﺋﯿﺔ ھﻲ ‪ reset‬ﻓﺎذا اردﻧﺎ‬
‫ﺗﻐﯿﺮھﺎ ﻧﺴﺘﻌﻤﻞ ‪. value‬‬

‫ﻟﺘﺼﻤﯿﻢ زر ﻣﻦ ﺻﻨﻊ اﻟﻤﺼﻤﻢ )‪ (user defind‬ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ >‪ <input‬ﻣﺘﺒﻮﻋﺎ‬

‫ﺑﺎﻟﺼﻔﺔ ‪ type‬واﻟﺘﻲ ﺗﺘﺒﻌﮭﺎ اﻟﻘﯿﻤﺔ ‪ button‬ﻛﻤﺎ ﯾﻠﻲ ‪:‬‬
‫>‪<input type=button value=…..‬‬‫‪1‬‬
‫‪.1‬ﻧﻀﻊ ھﻨﺎ اﻟﻘﯿﻤﺔ اﻻﻓﺘﺮاﺿﯿﺔ ﻟﮭﺬا اﻟﺰر ‪.‬‬

‫وﺳﻮف ﯾﺘﻀﺢ اﻻﻣﺮ أﻛﺜﺮ ﻋﻦ ﻃﺮﯾﻖ اﻟﻤﺜﺎل اﻟﺘﺎﻟﻲ‪:‬‬

 ‫ﻣﺜﺎل ‪: 29‬‬
‫ﺻﻤﻢ اﻟﺼﻔﺤﺔ اﻟﺘﺎﻟﯿﺔ ‪:‬‬

‫ﻻﺣﻆ‬
‫§ ﻋﺪد اﻟﺤﺮوف واﻻرﻗﺎم اﻟﺘﻲ ﯾﺴﺘﻮﻋﺒﮭﺎ اﻟـ‪ text‬اﻟﺘﺎﺑﻊ ﻟﻼﺳﻢ اﻛﺒﺮ ﻣﻦ ﻋﺪدھﺎ‬
‫اﻟﺘﻲ ﯾﺴﺘﻮﻋﺒﮭﺎ اﻟـ ‪ password‬اﻟﺘﺎﺑﻊ ﻟﻜﻠﻤﺔ اﻟﻤﺮور ‪.‬‬
‫§ اﻗﺼﻰ ﻋﺪد ﻣﻤﻜﻦ ﻣﻦ اﻟﺤﺮوف واﻻرﻗﺎم ﯾﻤﻜﻦ ﻛﺘﺎﺑﺘﮫ ﻟﻠـ ‪ password‬ھﻮ‬
‫‪12‬‬
‫§ ان اﺧﺘﯿﺎر "ذﻛﺮ" ﻣﻌﻠﻢ ﺑﺎﺷﺎرة اﻟﻨﻘﻄﺔ ﻛﻘﯿﻤﺔ اﺑﺘﺪاﺋﯿﺔ‪.‬‬
‫§ ان ﺟﻤﯿﻊ اﻻﺧﺘﯿﺎرات "‪ "yahoo‬و "‪ "Google‬و "‪ "MSN‬ﻣﻌﻠﻤﺔ ﺑﺎﺷﺎرة‬
‫اﻟﺼﺢ ﻛﻘﯿﻤﺔ اﺑﺘﺪاﺋﯿﺔ ‪.‬‬
‫§ اﻟﻘﯿﻤﺔ اﻻﺑﺘﺪاﺋﯿﺔ ﻟﺨﯿﺎرات "اﻟﺒﻠﺪ" ھﻲ "اﻻردن"‬
‫§ اﻟﻘﯿﻤﺔ اﻻﺑﺘﺪاﺋﯿﺔ ﻟﻠـ ‪ text area‬ھﻲ "اﻛﺘﺐ ﺗﻌﻠﯿﻘﻚ ھﻨﺎ"‬
‫§ اﻟﻘﯿﻤﺔ اﻻﻓﺘﺮاﺿﯿﺔ ﻟﺰر ‪ submit‬ھﻲ "ﺗﺴﺠﯿﻞ"‬
‫§ اﻟﻘﯿﻤﺔ اﻻﻓﺘﺮاﺿﯿﺔ ﻟﺰر ‪ reset‬ھﻲ "ﻣﺴﺢ اﻟﺤﻘﻮل"‪.‬‬
<html dir=rtl>
<head>
<title>‫<اﻟﺘﺴﺠﯿﻞ‬/title>
</head> :‫اﻟﻜﻮد‬
<body>
<br>
<center>
‫اﻟﺒﻠﺪ‬
<h1>‫<اﻟﺘﺴﺠﯿﻞ‬/h1>
&nbsp;&nbsp;&nbsp;&nbsp;&nbs
</center>
p;
<form action=mailto:software_en2002@yahoo.com
<select name=country>
method=post>
<option value=jo>‫<اﻻردن‬/option>
‫اﻻﺳﻢ‬
<option value=ph>‫<ﻓﻠﺴﻄﯿﻦ‬/option>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<option value=sr>‫<ﺳﻮرﯾﺎ‬/option>
<input type=text name=txt1 size=100>
<option value=eg>‫<ﻣﺼﺮ‬/option>
<br>
<option value=su>‫<اﻟﺴﻌﻮدﯾﺔ‬/option>
‫ﻛﻠﻤﺔ اﻟﻤﺮور‬
</select>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<br>
<input type=password name=ps1 size=50 maxlength=12>
‫اﻟﺘﻌﻠﯿﻘﺎت‬
<br>
<textarea name=comm rows=10
‫اﻟﺠﻨﺲ‬
cols=80>‫<اﻛﺘﺐ ﺗﻌﻠﯿﻘﻚ ھﻨﺎ‬/textarea>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<br>
<input type=radio name=r1 value=male checked>‫ذﻛﺮ‬
<input type=submit value=‫>ﺗﺴﺠﯿﻞ‬
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbs
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
p;
;&nbsp;&nbsp;&nbsp;&nbsp;
<input type=reset value=" ‫ﻣﺴﺢ‬
<input type=radio name=r1
‫>"اﻟﺤﻘﻮل‬
value=female>‫&اﻧﺜﻰ‬nbsp;&nbsp;
</form>
<br>
</body>
‫اﻟﻤﻮاﻗﻊ اﻟﻤﻔﻀﻠﺔ‬
</html>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;
<input type=checkbox name=Yahoo checked>Yahoo
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
;&nbsp;&nbsp;&nbsp; 2
<input type=checkbox name=Google checked>Google
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
;&nbsp;&nbsp;&nbsp;
<input type=checkbox name=MSN checked>MSN

1
 ‫ﻻﺣﻆ ان اﻟﻨﻤﻮذج ﻏﯿﺮ ﻣﺮﺗﺐ ﺑﺸﻜﻞ ﻻﺋﻖ ﻟﻮ اردﻧﺎ ﺗﺮﺗﯿﺒﮫ ﻓﺎﻧﻨﺎ ﺳﻮف ﻧﻀﻊ اﻟﻨﻤﻮذج‬
: ‫داﺧﻞ ﺟﺪول اي ﺳﻮف ﻧﻘﻮم ﺑﺎﻟﺘﻌﺪﯾﻞ ﻋﻠﻰ اﻟﻜﻮد ﻟﯿﺼﺒﺢ ﻛﻤﺎ ﯾﻠﻲ‬

<html dir=rtl> <td>‫<اﻟﺒﻠﺪ‬/td>

<head> <td><select name=country>
<title>‫<اﻟﺘﺴﺠﯿﻞ‬/title> <option value=jo>‫<اﻻردن‬/option>
</head> <option value=ph>‫<ﻓﻠﺴﻄﯿﻦ‬/option>
<body> <option value=sr>‫<ﺳﻮرﯾﺎ‬/option>
<center> <option value=eg>‫<ﻣﺼﺮ‬/option>
<h1>‫<اﻟﺘﺴﺠﯿﻞ‬/h1> <option value=su>‫<اﻟﺴﻌﻮدﯾﺔ‬/option>
</center> </select></td>
<form action=mailto:software_en2002@yahoo.com </tr>
method=post> <tr>
<table> <td>‫<اﻟﺘﻌﻠﯿﻘﺎت‬/td>
<tbody> <td><textarea name=comm rows=10
<tr> cols=80>‫<اﻛﺘﺐ ﺗﻌﻠﯿﻘﻚ ھﻨﺎ‬/textarea></td>
<td>‫<اﻻﺳﻢ‬/td> </tr>
<td><input type=text name=txt1 size=100></td> <tr>
</tr> <td><input type=submit
<tr> value=‫<>ﺗﺴﺠﯿﻞ‬/td>
<td>‫<ﻛﻠﻤﺔ اﻟﻤﺮور‬/td> <td><input type=reset value=" ‫ﻣﺴﺢ‬
<td><input type=password name=ps1 size=50 ‫<>"اﻟﺤﻘﻮل‬/td>
maxlength=12></td> </tr>
</tr> </tbody>
<tr> </table>
<td>‫<اﻟﺠﻨﺲ‬/td> </form>
<td><input type=radio name=r1 value=male </body>
checked>‫ذﻛﺮ‬ </html>
<br>
<input type=radio name=r1 value=female>‫<اﻧﺜﻰ‬/td>
</tr>
<tr>
<td>‫< اﻟﻤﻮاﻗﻊ اﻟﻤﻔﻀﻠﺔ‬/td>
<td><input type=checkbox name=Yahoo
checked>Yahoo<br>
<input type=checkbox name=Google
checked>Google<br>
<input type=checkbox name=MSN
checked>MSN</td>
</tr>
<tr>
2
1
 ‫ﻟﺘﺼﺒﺢ اﻟﺸﺎﺷﺔ ﻛﻤﺎ ﯾﻠﻲ ‪:‬‬

‫وﻋﻨﺪ ﺗﻌﺒﺌﺔ ھﺬا اﻟﻨﻤﻮذج ﯾﺼﺒﺢ ﻛﻤﺎ ﯾﻠﻲ ‪:‬‬

 ‫وﻋﻨﺪ اﻟﻀﻐﻂ ﻋﻠﻰ زر ﺗﺴﺠﯿﻞ )‪ (submit‬ﯾﻈﮭﺮ ﻟﻨﺎ ﺻﻨﺪوق اﻟﺤﻮار اﻟﺘﺎﻟﻲ‪:‬‬

‫ﻟﯿﺎﻛﺪ ﻟﻨﺎ ان اﻟﻨﻤﻮذج ﺳﻮف ﯾﺒﻌﺚ ﻻﻣﯿﻞ‪.‬‬

‫وﻋﻨﺪ اﻟﻀﻐﻂ ﻋﻠﻰ زر ﻣﺴﺢ اﻟﺤﻘﻮل)‪ (reset‬ﺗﻌﻮد اﻟﺸﺎﺷﺔ اﻟﻰ ﺣﺎﻟﺘﮭﺎ اﻻﺻﻠﯿﺔ ﻛﻤﺎ‬
‫ﻓﻲ اﻟﺼﻮرة ‪:‬‬

‫ﻣﻼﺣﻈﺔ ‪ :‬اذا اردﻧﺎ ﻣﺜﻼ ان ﺗﻜﻮن اﻟﻘﯿﻤﺔ اﻻﺑﺘﺪاﺋﯿﺔ ﻟﻠﺒﻠﺪ ھﻲ اﻟﺴﻌﻮدﯾﺔ ﻋﻮﺿﺎ ﻋﻦ‬
‫اﻻردن ﻓﺎﻧﻨﺎ ﻧﻐﯿﺮ ﻓﻲ اﻟﻜﻮد ﻣﺎ ﯾﻠﻲ ‪:‬‬
‫>‪</option‬اﻟﺴﻌﻮدﯾﺔ>‪<option value=su selected‬‬
 ‫ﻭ ﺑﻬﺬﺍ ﺍﻟﺪﺭﺱ ﻧﻜﻮﻥ ﻗﺪ ﺍﻧﻬﻴﻨﺎ ﺷﺮﺣﻨﺎ ﺍﻟﻤﺒﺴﻂ ﻟﻠﻐﺔ ﺍﻟﻬﺘﻤﻞ‬
‫ﻭﻟﻜﻦ ﻛﻨﺼﻴﺤﺔ ﺍﻗﺪﻣﻬﺎ ﻟﻚ ﻋﺰﻳﺰﻱ ﺍﻟﻘﺎﺭﺉ ﺍﻧﺼﺤﻚ ﺑﺘﺼﻤﻴﻢ ﻣﻮﻗﻊ ﺻﻐﻴﺮ‬
‫ﻛﺘﺪﺭﻳﺐ ﺗﺴﺘﺨﺪﻡ ﻓﻴﻪ ﺍﻫﻢ ﺍﻻﻭﺳﻤﺔ ﻭﺍﻟﺼﻔﺎﺕ ﻭﺍﻟﺤﺮﻭﻑ ﺍﻟﺨﺎﺻﺔ ﺍﻟﺘﻲ‬
‫ﺷﺮﺣﻨﺎﻫﺎ ﻭﺍﻥ ﻻ ﺗﻨﺘﻘﻞ ﻣﻦ ﺟﺰﺀ ﺍﻟﻰ ﺍﺧﺮ ﺍﻻ ﺍﺫﺍ ﻛﻨﺖ ﻗﺪ ﺍﺩﺭﻛﺘﻪ‬
‫ﻭﻓﻬﻤﺘﻪ ﺑﺸﻜﻞ ﺟﻴﺪ ‪.‬‬

‫ﺍﺫﺍ ﻛﺎﻥ ﻟﻚ ﺍﻱ ﺍﺳﺘﻔﺴﺎﺭ ﺍﻭ ﺳﺆﺍﻝ ﻻ ﺗﺘﺮﺩﺩ ﻧﻬﺎﺋﻴﺎ ﻓﻲ ﺳﺆﺍﻟﻲ‬

‫ﻋﻦ ﻃﺮﻳﻖ ﺍﻻﻣﻴﻞ ﺍﻟﺘﺎﻟﻲ‪:‬‬
‫‪software_en2002@yahoo.com‬‬

‫ﻭ ﻛﻤﺎ ﺗﻼﺣﻆ ﻓﺎﻥ ﻫﺬﺍ ﺍﻟﻜﺘﺎﺏ ﻣﺠﺎﻧﻲ ﻭﻗﺎﺑﻞ ﻟﻠﻄﺒﺎﻋﺔ ﻭ ﻣﺎ ﺍﺭﻳﺪﻩ‬

‫ﻓﻘﻂ ﻫﻮ ﺩﻋﻮﺓ ﺻﺎﻟﺤﺔ ﻟﻲ ﻓﻲ ﻇﻬﺮ ﺍﻟﻐﻴﺐ ﻓﻼ ﺗﻨﺴﻮﻧﺎ ﻣﻦ ﺩﻋﺎﺋﻜﻢ ﻟﻜﻦ‬
‫ﺍﺭﺟﻮ ﺫﻛﺮ ﺍﻟﻤﺼﺪﺭ ﺍﺫﺍ ﺗﻢ ﺍﻻﺳﺘﺸﻬﺎﺩ ﺑﺎﻱ ﺷﺊ ﻣﻦ ﺍﻟﻜﺘﺎﺏ ‪.‬‬

‫ﻧﺮﺍﻛﻢ ﻗﺮﻳﺒﺎ ﻓﻲ ﺍﻟﺠﺰﺀ ﺍﻟﺜﺎﻧﻲ ﻣﻦ ﻫﺬﻩ ﺍﻟﻤﻮﺳﻮﻋﺔ ﻭﻫﻮ ﺑﺎﺫﻥ ﺍﷲ‬

‫ﺳﻮﻑ ﻳﺘﻨﺎﻭﻝ ﻟﻐﺔ ﺍﻟﺠﺎﻓﺎ ﺳﻜﺮﻳﺒﺖ ‪.‬‬
 ‫ﻣﻠﺤﻖ ‪1‬‬

‫ﻣﺎ ھﻮ اﻟﻔﺮق ﻣﺎ ﺑﯿﻦ ‪ HTML‬و ﺑﯿﻦ ‪ DHTML‬؟‬

‫§ اﻟﻔﺮق ﺳﮭﻞ ﺟﺪا ان ﺟﻤﯿﻊ ﻣﺎ ﺗﻢ ﺷﺮﺣﮫ ﻓﻲ ھﺬا اﻟﻜﺘﺎب ھﻮ ﻋﺒﺎرة ﻋﻦ ‪ HTML‬اي‬
‫ﺑﻤﻌﻨﻰ اﺧﺮ ھﻲ ﻋﺒﺎرة ﻋﻦ اﻟﻠﻐﺔ اﻟﺘﻲ ﻣﻦ ﺧﻼﻟﮭﺎ ﯾﻤﻜﻨﻨﺎ ﺗﺼﻤﯿﻢ ﻣﻮاﻗﻊ اﻻﻧﺘﺮﻧﺖ‬
‫وھﻲ ﺗﺨﺘﻠﻒ ﻋﻦ ‪ DHTML‬ﻓﻲ ﻛﻮن ھﺬه اﻻﺧﯿﺮة ﺗﻌﺘﻤﺪ ﻋﻠﻰ وﺟﻮد‬
‫) ‪ (dynamic‬ﻓﻲ اﻟﺼﻔﺤﺔ وﯾﻜﻮن ذﻟﻚ ﯾﺎﻣﺎ ﻋﻦ ﻃﺮﯾﻖ اﻟﻨﻤﺎذج )‪ (form‬اﻟﺘﻲ ﺗﻢ‬
‫ﺷﺮﺣﮭﺎ ﻓﻲ ھﺬا اﻟﻜﺘﺎب او ﻋﻦ ﻃﺮﯾﻖ دﻣﺞ ﻟﻐﺔ ‪ HTML‬ﻣﻊ ﻟﻐﺎت ﺑﺮﻣﺠﺔ ﻣﺜﻞ‬
‫‪ Java script‬و ‪. VB script‬‬

‫ﻣﺎ ھﻮ اﻟﻔﺮق ﻣﺎ ﺑﯿﻦ ‪ HTML‬وﺑﯿﻦ ‪XHTML‬؟‬

‫§ ﻗﺪ ﯾﻌﺘﻔﺪ اﻟﺒﻌﺾ اﻧﮫ ھﻨﺎك ﻓﺮﻗﺎ ﻛﺒﯿﺮا ﺑﯿﻦ اﻟﻠﻐﺘﯿﻦ ﻟﻜﻦ ﯾﻤﻜﻨﻨﺎ اﻟﻘﻮل ان ھﺬا اﻻﻋﺘﻘﺎد‬
‫ﺧﺎﻃﺊ ﺣﯿﺚ ان ھﻨﺎك ﻓﻘﻂ اﺛﻨﻲ ﻋﺸﺮ ﻓﺮﻗﺎ ﺑﯿﻨﮭﻤﺎ ﺳﻮف ﻧﺬﻛﺮ ﺑﻌﻀﮭﺎ ھﻨﺎ وھﻲ‬
‫ﺗﻠﻚ اﻟﺘﻲ ﯾﻤﻜﻦ ﻓﮭﻤﮭﺎ اﺳﺘﻨﺎدا ﻟﻤﺎ ﺷﺮح ﻓﻲ ھﺬا اﻟﻜﺘﺎب اﻣﺎ ﻟﻤﻦ ﯾﺮﯾﺪ اﻻﺳﺘﺰادة ﻓﻠﯿﻘﻢ‬
‫ﺑﺰﯾﺎرة اﻟﻤﻮﻗﻊ اﻟﺘﺎﻟﻲ ‪:‬‬
‫‪http://www.w3.org/TR/xhtml1/#diffs‬‬
‫)اﻟﻔﻘﺮة اﻟﺮاﺑﻌﺔ ‪(4. Differences with HTML 4‬‬
‫وﻧﺬﻛﺮ اﻻن اﻟﻔﺮوق اﻟﺘﺎﻟﯿﺔ ‪:‬‬
‫‪. 1‬ﻋﻨﺪ ﻓﺘﺢ اﻟﻮﺳﻢ ﯾﺠﺐ اﻏﻼﻗﮫ ﻣﺜﻼ ‪:‬‬
‫>‪ <p>…………..</p‬ﻋﻨﺪ ﻛﺘﺎﺑﺔ >‪ <p‬ﯾﺠﺐ ﻛﺘﺎﺑﺔ >‪</p‬‬
‫اﯾﻀﺎ ﯾﺠﺐ اﻻھﺘﻤﺎم ﺑﺘﺮﺗﯿﺐ اﻻوﺳﻤﺔ ﻣﺜﻼ‪:‬‬
‫>‪ <p><em>………..</em></p‬ﻻﺣﻆ ان اﻟﺨﻄﻮط ﻻ ﺗﺘﻘﺎﻃﻊ‬

‫‪.2‬ﺟﻤﯿﻊ اﻻوﺳﻤﺔ و اﻟﺼﻔﺎت ﯾﺠﺐ ان ﺗﻜﺘﺐ ﺑﺤﺎﻟﺔ اﻟﺤﺮوف اﻟﺼﻐﯿﺮة‬

‫) ‪ (lower case‬ﻣﺜﻼ‪:‬‬
‫>‪ <li‬وﻟﯿﺲ >‪.<LI‬‬
‫‪.3‬ﺟﻤﯿﻊ ﻗﯿﻢ اﻟﺼﻔﺎت ﯾﺠﺐ ان ﺗﻮﺿﻊ ﺑﯿﻦ اﺷﺎرات اﻗﺘﺒﺎس " " ﺣﺘﻰ ﻟﻮ ﻛﺎﻧﺖ ﻗﯿﻢ‬
‫رﻗﻤﯿﺔ‬
‫>”‪ <table border=”1‬وﻟﯿﺲ >‪.<table border=1‬‬
‫‪.4‬ﺟﻤﯿﻊ اﻻوﺳﻤﺔ اﻟﺮﺋﯿﺴﯿﺔ )‪ (main tag‬ﯾﺠﺐ ان ﺗﻨﺘﮭﻲ ﺑـ) ‪ ( /‬ﻣﺜﻼ ‪:‬‬
‫>‪ <br /><hr /‬وﻟﯿﺲ >‪.<br><hr‬‬
 ‫ﻣﻠﺤﻖ ‪2‬‬
‫ﻣﺎ ھﻲ ﻟﻐﺔ ‪ CSS‬؟‬
‫‪ CSS‬وھﻲ اﺧﺘﺼﺎر ‪ Cascade Style Sheet‬وﯾﻌﺘﺒﺮھﺎ اﻟﺒﻌﺾ ﻟﻐﺔ ﺑﺮﻣﺠﺔ ﻗﺎﺋﻤﺔ‬
‫ﺑﺬاﺗﮭﺎ ووﻇﯿﻔﺘﮭﺎ اﻻﺳﺎﺳﯿﺔ ھﻲ اﻟﺘﺤﻜﻢ ﺑـ ‪ style‬ﺻﻔﺤﺔ اﻟﮭﺘﻤﻞ ﻣﻦ اﻟﺘﺤﻜﻢ ﺑﺎﻟﻤﺤﺎذاو‬
‫اﻟﻰ اﻟﺘﺤﻜﻢ ﺑﺼﻮرة ﺧﻠﻔﯿﺔ ﻓﻘﺮة او ‪ div‬اﻟﻰ اﻟﺘﺤﻜﻢ ﺑﻠﻮن ﻛﻞ ﺧﻂ ﻣﻦ ﺧﻄﻮط اﻃﺎر‬
‫)ﯾﻤﯿﻦ ‪ ،‬ﯾﺴﺎر ‪،‬اﻋﻠﻰ ‪ ،‬اﺳﻔﻞ(اﻟﻰ‪....‬اﻟﺦ‬

‫وھﺬا اﻟﻤﻮﺿﻮع ﺑﺎﻟﺘﺤﺪﯾﺪ ﻛﺒﯿﺮ ﺟﺪا وﯾﺤﺘﺎج اﻟﻰ ﻛﺘﺎب ﻛﺎﻣﻞ ﻻﻋﻄﺎﺋﮫ ﺣﻘﮫ وﺳﻮف‬
‫اﻗﻮم ﺑﺎﺻﺪار ﻛﺘﯿﺐ ﺻﻐﯿﺮ ﯾﺘﻨﺎول ھﺬه اﻟﻠﻐﺔ ؟!‬

‫اﻣﺎ اﻻن ﻓﺴﻨﺘﻨﺎول ﺟﺰء ﺑﺴﯿﻂ ﺟﺪا ﻣﻦ ‪ CSS‬وھﻮ اﺳﺘﺨﺪام ‪ CSS‬ﻛﺼﻔﺔ ﻣﻊ‬
‫اﻻوﺳﻤﺔ وﺧﺎﺻﺔ ﻣﻊ اﻟﻮﺳﻢ >‪.<div‬‬

‫اوﻻ ﻟﻨﺴﺘﺨﺪم اﻟـ ‪ CSS‬ﻛﺼﻔﺔ ﻓﺎﻧﻨﺎ ﻧﺴﺘﺨﺪم اﻟﺼﻔﺔ ‪ style‬ﻣﻊ اﻻوﺳﻤﺔ وﺗﻮﺿﻊ ﻗﯿﻢ‬
‫ھﺬه اﻟﺼﻔﺔ ﺑﯿﻦ اﺷﺎرﺗﻲ اﻗﺘﺒﺎس " " وﺗﻔﺼﻞ ﺑﯿﻨﮭﺎ ﻓﺎﺻﻠﺔ ﻣﻨﻘﻮﻃﺔ ‪ .‬ﻣﺜﻼ‪:‬‬

‫>”‪<p style=”font-weight=bold;font-size=30;font-style=italic‬‬
‫ﻻﺣﻆ اﺳﺘﺨﺪام اﻟﺼﻔﺔ ‪ style‬ﻣﻊ اﻟﻮﺳﻢ >‪ <p‬وﻻﺣﻆ ان ﻗﯿﻢ ھﺬه اﻟﺼﻔﺔ وﺿﻌﺖ ﻣﺎ‬
‫ﺑﯿﻦ اﺷﺎرﺗﻲ " " وﺗﻔﺼﻞ ﻓﯿﻤﺎ ﺑﯿﻨﮭﺎ ﻓﺎﺻﻠﺔ ﻣﻨﻘﻮﻃﺔ‪.‬‬
‫ﻻﺣﻆ ان اﻟﺼﻔﺔ ‪ style‬ﻛﺄﻧﮭﺎ ﺗﺤﺘﻮي ﻋﻠﻰ ﺻﻔﺎت ﺟﺰﺋﯿﺔ وھﻲ ‪ font-weight‬و‬
‫‪ font-size‬و‪. font-style‬‬
‫ﻟﺠﻌﻞ اﻟﺨﻂ ﻏﺎﻣﻘﺎ>‪font-weight=bold-------‬‬
‫ﻟﺠﻌﻞ ﺣﺠﻢ اﻟﺨﻂ ‪font-size=30---------->30‬‬
‫ﻟﺠﻌﻞ اﻟﺨﻂ ﻣﺎﺋﻼ>‪font-style=italic-------‬‬

‫ﻣﻼﺣﻈﺔ ‪ :‬ﯾﻤﻜﻦ اﺳﺘﺨﺪام ) ‪ ( :‬ﺑﺪﻻ ﻣﻦ )=( وھﻮ اﻻﻓﻀﻞ ‪.‬‬

‫ﺳﻮف ﻧﻨﺘﻘﻞ اﻻن ﻟﻤﺜﺎل ﻧﺴﺘﺨﺪم ﻓﯿﮫ ﻣﺠﻤﻮﻋﺔ ﻣﻦ اﻟﺼﻔﺎت اﻟﺠﺰﺋﯿﺔ ﻟﻠﺼﻔﺔ ‪. style‬‬
 : 30 ‫ﻣﺜﺎل‬
: ‫ﺻﻤﻢ اﻟﺸﺎﺷﺔ اﻟﺘﺎﻟﯿﺔ‬

:‫اﻟﻜﻮد‬
<html dir=rtl>
<head>
<title>
‫ﺻﻔﺤﺘﻲ اﻻوﻟﻰ‬
</title>
</head>
<body >
<center><font size=20pt> ‫< ﺑﺴﻢ اﷲ اﻟﺮﺣﻤﻦ اﻟﺮﺣﯿﻢ‬/font></center>
<div align=center id=div1 style="font:18pt arial;color:red;background-
color:pink">
‫ﻋﺎﻟﻢ اﻟﺴﯿﺎرات‬
</div>
<div align=center id=div2 style="background-image:url(DawnOverWater.jpg)">
‫<أھﻼ وﺳﮭﻼ ﺑﻜﻢ‬/div>
</body>
</html>
 ‫ﺷﺮح اﻟﻜﻮد ‪:‬‬
‫"‪style="font:18pt arial;color:red;background-color:pink‬‬

‫اﻟﺨﻂ ﺣﺠﻤﮫ ‪ 18‬وﻧﻮﻋﮫ‪font:18pt arial---------> arial‬‬

‫ﻟﻮن اﻟﺨﻂ اﺣﻤﺮ>‪color:red---------------‬‬
‫ﻟﻮن اﻟﺨﻠﻔﯿﺔ زھﺮي >‪background-color:pink------------‬‬

‫")‪style="background-image:url(DawnOverWater.jpg‬‬

‫وﺿﻊ ﺻﻮرة ﻛﺨﻠﻔﯿﺔ >‪background-image:url(DawnOverWater.jpg)------‬‬

‫ھﻲ اﻟﺼﻮرة اﻟﺘﻲ اﺳﻤﮭﺎ‪ DawnOverWater.jpg‬واﻟﺘﻲ ﺗﻘﻊ ﻓﻲ ﻧﻔﺲ ﻣﺴﺎر اﻟﺼﻔﺤﺔ‬

‫ﻣﻼﺣﻈﺔ‪:‬ﻛﻠﻤﺔ ‪ url‬ﺛﺎﺑﺘﺔ ﻻ ﺗﺘﻐﯿﺮ ﻓﻲ اي ﺣﺎﻟﺔ اﻟﺬي ﯾﺘﻐﯿﺮ ھﻮ ﻣﺎ ﺑﺪاﺧﻞ اﻟﻘﻮﺳﯿﻦ‬

‫وھﻲ ﺗﺤﺘﻤﻞ ﺟﻤﯿﻊ اﻟﺤﺎﻻت اﻟﺘﻲ ﺗﻢ ﺷﺮﺣﮭﺎ ﻓﻲ درس ادراج اﻟﺼﻮر ‪.‬‬

‫وھﻨﺎك اﻟﻜﺜﯿﺮ اﻟﻜﺜﯿﺮ ﯾﻤﻜﻦ ﻗﻮﻟﮫ ﻋﻦ ‪ CSS‬ﻟﻜﻦ ﻛﻤﺎ ﻗﻠﻨﺎ اﻧﻨﺎ ﺳﻨﺼﺪر ﻛﺘﯿﺐ ﺧﺎص ﺑﮫ ﻓﯿﻤﺎ‬
‫ﺑﻌﺪ ‪.‬‬
 ‫ﻣﻠﺤﻖ ‪3‬‬

‫اﺳﺘﺨﺪام اﻟﻮﺳﻢ >‪ <mata‬ﻻﻏﺮاض ﻣﺤﺮﻛﺎت اﻟﺒﺤﺚ‪:‬‬

‫ﻧﺴﺘﻄﯿﻊ ان ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ >‪ <mata‬وذﻟﻚ ﻻﻋﻄﺎء ﻣﺤﺮﻛﺎت اﻟﺒﺤﺚ ﻓﻜﺮة ﻋﻦ ﻣﺤﺘﻮﯾﺎت‬
‫ﺻﻔﺤﺎت ﻣﻮﻗﻌﻚ وﺑﺎﻟﺘﺎﻟﻲ ﯾﺴﮭﻞ اﯾﺠﺎد ﻣﻮﻗﻌﻚ ﺑﺎﺳﺘﺨﺪام اﺣﺪى ﻣﺤﺮﻛﺎت اﻟﺒﺤﺚ ‪.‬‬

‫وﯾﻜﻮن ذﻟﻚ اﻣﺎ ﺑﺎﻋﻄﺎء وﺻﻒ ﻋﻦ ﻣﺤﺘﻮﯾﺎت ﻛﻞ ﺻﻔﺤﺔ)‪ (description‬او اﻋﻄﺎء‬

‫ﻛﻠﻤﺎت ﻣﻔﺘﺎﺣﯿﺔ ﻟﻜﻞ ﺻﻔﺤﺔ)‪. (keywords‬‬

‫وﯾﻤﻜﻦ ﻋﻤﻞ ذﻟﻚ ﻓﻲ ﻟﻐﺔ اﻟﮭﺘﻤﻞ ﻛﻤﺎ ﯾﻠﻲ ‪:‬‬

‫>"ﺷﺮح ﻛﺎﻣﻞ ﻟﺘﺼﻤﯿﻢ وﺑﺮﻣﺠﺔ اﻟﻤﻮاﻗﻊ"=‪<meta name="description" content‬‬

‫ھﺬه اﻟﻄﺮﯾﻘﺔ ﺗﻤﺜﻞ اﻋﻄﺎء وﺻﻒ ﻋﻦ ﻣﺤﺘﻮﯾﺎت اﻟﺼﻔﺤﺔ)‪.(description‬‬

‫>"‪<meta name="keywords" content="HTML, DHTML, XHTML‬‬

‫ھﺬه اﻟﻄﺮﯾﻘﺔ ﺗﻤﺜﻞ اﻋﻄﺎء ﻛﻠﻤﺎت ﻣﻔﺘﺎﺣﯿﺔ ﻟﻠﺼﻔﺤﺔ)‪. (keywords‬‬

‫ﻻﺣﻆ اذا ان اﻻﻣﺮ ﯾﺤﺘﺎج ﻓﻘﻂ اﻟﻰ اﻟﻮﺳﻢ >‪ <meta‬و اﻟﺼﻔﺘﯿﻦ ‪ name‬و ‪content‬‬
‫ﺣﯿﺚ ان اﻟﺼﻔﺔ اﻻوﻟﻰ ﺗﻜﻮن ﻻﻋﻄﺎء اﺳﻢ ﻟﮭﺬا اﻟﻮﺳﻢ اﻣﺎ اﻟﺜﺎﻧﯿﺔ ﻓﮭﻲ ﺗﺤﺘﻮي ﻋﻠﻰ وﺻﻒ‬
‫ﻋﻦ ﻣﺤﺘﻮﯾﺎت اﻟﺼﻔﺤﺔ)‪ (description‬او ﻛﻠﻤﺎت ﻣﻔﺘﺎﺣﯿﺔ ﻟﻠﺼﻔﺤﺔ )‪.(keywords‬‬
 ‫ﻣﻠﺤﻖ ‪4‬‬

‫ﻧﺼﯿﺤﺔ‪:‬‬

‫ﻗﺪ ﯾﺠﻮل ﻓﻲ ﺧﺎﻃﺮ اﻟﺒﻌﺾ ﻣﺎ ھﻲ ﺿﺮورة ﺗﻌﻠﻢ ﻟﻐﺔ ﻣﺜﻞ اﻟﮭﺘﻤﻞ وھﻮ ﻣﻦ اﻟﻤﻤﻜﻦ‬
‫ﺗﺼﻤﯿﻢ ﺻﻔﺤﺎت ﻣﻮﻗﻊ ﻛﺎﻣﻞ ﺑﺎﺳﺘﺨﺪام ﺑﺮاﻣﺞ ﻣﺜﻞ اﻟﻔﺮوﻧﺖ ﺑﯿﺞ ‪.‬‬

‫اﻟﺠﻮاب ھﻮ اﻧﮫ ﻣﮭﻤﺎ ﻛﺎن اﻟﺸﺨﺺ ﺧﺒﯿﺮا ﻓﻲ ﺑﺮﻧﺎﻣﺞ اﻟﻔﺮوﻧﺖ ﺑﯿﺞ ﻣﺜﻼ اﻻ اﻧﮫ ﺳﯿﺘﻌﺮض‬
‫اﻟﻰ ﻋﺪة ﻣﻮاﻗﻒ ﯾﻀﻄﺮ ﻋﻨﺪھﺎ اﻟﻰ ﻓﺘﺢ اﻟﻜﻮد و اﻟﺘﻌﺪﯾﻞ ﻋﻠﯿﮫ )ھﺬا ﯾﺤﺪث ﻋﻨﺪ ﻣﻤﺎرﺳﺔ‬
‫اﻟﺘﺼﻤﯿﻢ ﻟﻔﺘﺮة ﻣﻦ اﻟﻮﻗﺖ( وھﺬا ﯾﺘﻄﻠﺐ ﻣﻌﺮﻓﺔ ﺟﯿﺪة ﺑﺎﻟﻠﻐﺔ ‪.‬اﯾﻀﺎ ﻟﺘﻄﻮﯾﺮ اﻟﻤﻮﻗﻊ واﺿﺎﻓﺔ‬
‫اﻟﺴﻜﺮﯾﺒﺘﺎت ﻋﻠﯿﮫ ﻓﺎﻧﻚ ﺗﺤﺘﺎج اﻟﻰ اﻟﺘﻌﺪﯾﻞ ﻋﻠﻰ اﻟﻜﻮد اذا ﻟﻢ ﯾﻜﻦ اﻋﺎدة ﻛﺘﺎﺑﺔ ﻣﻌﻈﻤﮫ ‪.‬‬

‫وﻟﺬﻟﻚ ﻓﺎن اﻟﺸﺨﺺ اﻟﺬي ﻟﺪﯾﮫ ﻣﻌﺮﻓﺔ ﻋﺎدﯾﺔ ﻋﻦ اﻟﺒﺮﻧﺎﻣﺞ ﺳﯿﻀﻄﺮ ﻛﺜﯿﺮا وﻛﺜﯿﺮا ﻟﻔﺘﺢ‬
‫اﻟﻜﻮد واﻟﺘﻌﺪﯾﻞ ﻋﻠﯿﮫ ھﺬا اذا ﻛﺎن ﻣﺘﻘﻦ ﻟﮭﺬه اﻟﻠﻐﺔ ﺑﺸﻜﻞ ﺟﯿﺪ ‪.‬‬

‫ﻋﻠﻰ اﯾﺔ ﺣﺎل اﻧﺎ ﻻ اﻧﺼﺢ ﺑﻜﺘﺎﺑﺔ اﻟﻜﻮد ﻛﺎﻣﻞ ﺑﺎﺳﺘﺨﺪام ﺑﺮﻧﺎﻣﺞ ‪ notepad‬اﻻ ﻟﻠﺘﻌﻠﻢ اﻣﺎ‬
‫ﻟﻤﻤﺎرﺳﺔ اﻟﺘﺼﻤﯿﻢ ﻓﯿﻤﻜﻨﻚ اﺳﺘﺨﺪام ﺑﺮﻧﺎﻣﺞ ﻓﺮوﻧﺖ ﺑﯿﺞ ‪ 2003‬ﻋﻠﻰ ﺳﺒﯿﻞ اﻟﻤﺜﺎل وﺑﺎﻟﺘﺎﻟﻲ‬
‫ﯾﻤﻜﻨﻚ اﻟﺘﺼﻤﯿﻢ وﻋﻨﺪ اﻟﺤﺎﺟﺔ اﻟﻌﻮدة اﻟﻰ اﻟﻜﻮد ﻓﺎﻟﺒﺮﻧﺎﻣﺞ ﯾﺤﺘﻮي ﻋﻠﻰ ﺗﺒﻮﯾﺐ ﻟﺮؤﯾﺔ اﻟﻜﻮد‬
‫ﻛﻤﺎ ﻓﻲ اﻟﺼﻮرة ‪:‬‬
 ‫ﻻﺣﻆ ﻓﻲ اﻟﺼﻮرة اﻟﺘﺎﻟﯿﺔ ﻛﯿﻒ ان اﻟﻜﻮد ﯾﺘﻢ ﺗﻠﻮﯾﻨﮫ ﻟﺘﻤﯿﺰ اﻻوﺳﻤﺔ ﻋﻦ اﻟﺼﻔﺎت ﻋﻦ اﻟﻘﯿﻢ‬
‫ﻋﻦ‪....‬اﻟﺦ واﯾﻀﺎ ﻻﺣﻆ ﻣﺠﺮد ﻛﺘﺎﺑﺔ < ﯾﻌﻄﯿﻚ ﻗﺎﺋﻤﺔ ﺑﺎﺷﮭﺮ اﻻوﺳﻤﺔ اﻟﻤﻮﺟﻮدة وﯾﺒﻘﻰ‬
‫ﻋﻠﯿﻚ اﻻﺧﺘﯿﺎر ﻓﻘﻂ ‪.‬‬

‫ﻻﺣﻆ اذا ﺣﺘﻰ ﻛﺘﺎﺑﺔ اﻟﻜﻮد ﻓﻲ ھﺬا اﻟﺒﺮﻧﺎﻣﺞ ﺳﻮف ﺗﺼﺒﺢ اﺳﮭﻞ و اﻛﺜﺮ ﻣﺘﻌﺔ ‪.‬‬

‫واﻻن ﺳﻮف ﻧﺎﺧﺬ ﻛﯿﻔﯿﺔ ﻋﻤﻞ ادراج اﻟﺠﺪاول ﻋﻦ ﻃﺮﯾﻖ اﻟﻘﺮوﻧﺖ ﺑﯿﺞ ‪ 2003‬ﻛﻤﺜﺎل ﻋﻠﻰ‬
‫اﺣﺪ اﻟﺪروس اﻟﺘﻲ ﺗﻢ ﺷﺮﺣﮭﺎ ﻓﻲ ھﺬا اﻟﻜﺘﺎب ‪.‬‬
‫ﻣﻦ ﻗﺎﺋﻤﺔ ‪ table‬اﺧﺘﺮ ‪ insert‬وﻣﻨﮭﺎ اﺧﺘﺮ ‪ table‬ﻛﻤﺎ ﻓﻲ اﻟﺼﻮرة‪:‬‬

‫ﺳﻮف ﯾﻈﮭﺮ ﺻﻨﺪوق‬

‫اﻟﺤﻮار اﻟﺘﺎﻟﻲ واﻟﺬي‬
‫ﻣﻦ ﺧﻼﻟﮫ ﯾﻤﻜﻦ ﺗﺤﺪﯾﺪ‬
‫ﻋﺪد اﻟﺴﻄﻮر واﻻﻋﻤﺪة‬
‫وﺗﺤﺪﯾﺪ ﺳﻤﻚ اﻻﻃﺎر‬
‫وﺗﺤﺪﯾﺪ ﺧﻠﻔﯿﺔ اﻟﺠﺪول‬
‫و ‪...‬اﻟﺦ ﻛﻤﺎ ﻓﻲ‬
‫اﻟﺼﻮرة‬

‫اﺧﺘﺮ ‪ok‬‬
‫ﻟﺘﻼﺣﻆ اﻧﮫ ﻗﺪ ﺗﻢ ادراج ﺟﺪول ﻣﻦ ﺳﻄﺮﯾﻦ وﻋﻤﻮدﯾﻦ ﻛﻤﺎ ﻓﻲ اﻟﺼﻮرة اﻟﺘﺎﻟﯿﺔ ‪:‬‬

‫واذا ﻗﻤﺖ ﺑﻔﺘﺢ ﻗﺴﻢ اﻟﻜﻮد ﺳﻮف ﺗﻼﺣﻆ ان اﻟﻜﻮد اﻟﺘﺎﻟﻲ ﻛﺘﺐ ﺗﻠﻘﺎﺋﯿﺎ‬
 ‫اذا ﻛﻤﺎ ﺗﻼﺣﻆ ﯾﻤﻜﻦ اﺳﺘﺨﺪام اﻟﺘﺼﻤﯿﻢ ﻋﻦ ﻃﺮﯾﻖ اﻟﺒﺮﻧﺎﻣﺞ ﻣﻊ اﺳﺘﺨﺪام ﺗﺒﻮﯾﺐ اﻟﻜﻮد‬
‫ﻟﻠﺘﻌﺪﯾﻞ ﻋﻠﻰ اﻟﻜﻮد‬

‫ﻓﻲ ﻣﺜﺎﻟﻨﺎ اﻟﺴﺎﺑﻖ ﯾﻤﻜﻦ اﻟﺘﻌﺪﯾﻞ ﻋﻠﻰ اﻟﻜﻮد ﻟﺘﻌﺪﯾﻞ اﻟﻌﻨﻮان >‪ <title‬وﻻﺿﺎﻓﺔ وﺳﻢ‬
‫>‪ <meta‬و ﻟﻠﺘﻌﺪﯾﻞ ﻋﻠﻰ ﻃﻠﻮل اﻟﺠﺪول وﻋﺮﺿﮫ اذا ﻟﻢ ﺗﺴﺘﻄﻊ ﻋﻤﻞ ذﻟﻚ ﻣﻦ ﺻﻨﺪوق‬
‫اﻟﺤﻮار وھﻜﺬا‪....‬‬

‫ارﺟﻮ ان ﯾﻜﻮن ﻗﺼﺪي و ﻧﺼﯿﺤﺘﻲ ﻗﺪ وﺻﻠﺖ اﻟﯿﻚ ﻟﻜﻦ ﻓﻲ اﻟﻨﮭﺎﯾﺔ ﯾﻨﺒﻐﻲ ﻋﻠﻲ اﻟﺘﺎﻛﯿﺪ‬
‫ﻋﻠﻰ اھﻤﯿﺔ ﺗﻌﻠﻢ اﻟﻠﻐﺔ ﻋﻠﻰ اﻻﻗﻞ ﻟﻤﻦ ﯾﺮﯾﺪ ﺗﻌﻠﻢ ﻟﻐﺎت ﺑﺮﻣﺠﺔ اﻟﻤﻮاﻗﻊ‪.‬‬
‫ﰎ ﲝﻤﺪ ﺍﷲ‬