Learning HTML
Uploaded by
youssief.ana111Learning HTML
Uploaded by
youssief.ana111ﻣﻘﺪﻣﺔ :
ان ﺗﻌﻠﻢ ﺗﺼﻤﯿﻢ و ﺑﺮﻣﺠﺔ اﻟﻤﻮاﻗﻊ ﻟﯿﺲ ﺑﺎﻻﻣﺮ اﻟﺼﻌﺐ و اﻧﻤﺎ ﯾﺤﺘﺎج ﻓﻘﻂ ﻟﺒﻌﺾ
اﻟﺠﮭﺪ و اﻟﻤﺜﺎﺑﺮة ،وﻟﺬﻟﻚ اﻧﺼﺤﻚ ﻋﺰﯾﺰي اﻟﻘﺎرئ ان ﺗﻘﻮم ﺑﺘﻨﻔﯿﺬ اﻻﻣﺜﻠﺔ اﻟﻤﻮﺟﻮدة ﻓﻲ
ھﺬا اﻟﻜﺘﺎب ﺑﺸﻜﻞ ﻋﻤﻠﻲ ﻟﻜﻲ ﺗﺘﻌﻠﻢ ﻣﻦ اﻻﺧﻄﺎء و ﻟﻜﻲ ﺗﺮى ﺑﻨﻔﺴﻚ ﻣﺪى ﺳﮭﻮﻟﺔ اﻻﻣﺮ .
ﺑﺪاﯾﺔ اﺳﺘﻄﯿﻊ اﻟﻘﻮل ان اﻻﺳﻠﻮب اﻟﻤﻨﺎﺳﺐ ﻓﻲ ﺷﺮح ﻣﺜﻞ ھﺬه اﻟﻤﻮاﺿﯿﻊ ھﻮاﻟﺘﺮﻛﯿﺰ
ﻋﻠﻰ اﻟﺠﺎﻧﺐ اﻟﻌﻤﻠﻲ وﺿﺮب اﻻﻣﺜﻠﺔ وھﺬا ھﻮ اﻻﺳﻠﻮب اﻟﺬي ﺳﺎﺣﺎول ان اﺗﺒﻌﮫ ﻓﻲ
اﻟﺸﺮح.
ﻗﺪ ﯾﺘﺴﺎل اﻟﺒﻌﺾ ﻟﻤﺎذا ﻗﻠﺖ ﺗﺼﻤﯿﻢ و ﺑﺮﻣﺠﺔ ،ﻓﻲ اﻟﻮاﻗﻊ ان اﻟﻌﻤﻞ ﻋﻠﻰ اﻧﺸﺎء
ﻣﻮﻗﻊ ﻋﻠﻰ اﻻﻧﺘﺮﻧﺖ ﯾﻤﻜﻦ ﺗﻘﺴﯿﻤﮫ ﻋﻠﻰ ﻣﺮﺣﻠﺘﯿﻦ :اﻻوﻟﻰ و ھﻲ اﻟﺘﺼﻤﯿﻢ و ﺗﻜﻮن
ﺑﺘﺼﻤﯿﻢ اﻟﺠﺪاول واﻟﻔﻘﺮات و ادراج اﻟﺼﻮر و...اﻟﺦ وھﺬا اﻟﺠﺰء ﯾﻤﻜﻦ ﺗﻄﺒﯿﻘﮫ ﺑﺎﺳﺘﺨﺪام
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اﻟﺘﺎﻟﻲ:
;) >ﻻﺣﻆ اﻟﺒﺪاﯾﺔ ﺑـ & واﻟﻨﮭﺎﯾﺔ ﺑـ ; (
أو ﻣﺒﺎﺷﺮة
>
ﻟﻜﺘﺎﺑﺔ اﻟﻜﻮد :
ﻟﻜﺘﺎﺑﺔ ﻛﻮد ﺑﻠﻐﺔ اﻟﮭﺘﻤﻞ ﺗﺤﺘﺎج ﻓﻘﻂ ﻟﻠﺒﺮاﻣﺞ اﻟﺘﺎﻟﯿﺔ :
.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وذﻟﻚ ﻟﻄﺒﺎﻋﺔ ﺣﺮوف ﺧﺎﺻﺔ ﻣﺜﻞ ™>,<,&,©,
...........اﻟﺦ وﻣﻦ اھﻢ ھﺬه اﻟﺤﺮوف اﻟﺨﺎﺻﺔ "اﻟﻤﺴﺎﻓﺔ"
ﺗﻮﺿﯿﺢ:
ﻟﻮ اردﻧﺎ ان ﯾﻜﻮن اﻟﺒﻌﺪ ﺑﯿﻦ ﻛﻠﻤﺘﯿﻦ ﺑﻤﻘﺪار ﻣﺴﺎﻓﺘﯿﻦ ﻓﻤﺎذا ﻧﻌﻤﻞ؟
ھﻞ ﻧﻜﺘﺐ ﻣﺜﻼ اﻟﻜﻠﻤﺔ اﻻوﻟﻰ و ﻧﺒﺘﻌﺪ ﺑﻤﻘﺪار ﻣﺴﺎﻓﺘﯿﻦ وﻧﻜﺘﺐ اﻟﻜﻠﻤﺔ اﻟﺜﺎﻧﯿﺔ ﯾﻌﻨﻲ ﻣﺜﻼ
أﺣﻤﺪ راﻣﻲ؟
ﺑﻌﺪ ﺑﻤﻘﺪار ﻣﺴﺎﻓﺘﯿﻦ
ﻟﻼﺳﻒ ﻋﺰﯾﺰي اﻟﻘﺎرئ ﻟﻮ ﻓﻌﻠﺖ ذﻟﻚ او وﺿﻌﺖ ﻣﻠﯿﻮن ﻣﺴﺎﻓﺔ ﻓﺎﻟﻨﺘﯿﺠﺔ ﺳﻮف ﺗﻜﻮن ﻋﻠﻰ
اﻟﻤﺘﺼﻔﺢ ﻓﻘﻂ ﻣﺴﺎﻓﺔ واﺣﺪة ﻻ ﻏﯿﺮ وﻟﺬﻟﻚ ﺳﻮف ﻧﺤﺘﺎج اﻟﻰ اﻟﺤﺮوف اﻟﺨﺎﺻﺔ ﻟﺤﻞ ھﺬه
اﻟﻤﺸﻜﻠﺔ .
اﻟﯿﻚ اﻻن ﻋﺰﯾﺰي اﻟﻘﺎرئ اﺷﮭﺮ اﻟﺤﺮوف اﻟﺨﺎﺻﺔ اﻟﻤﺴﺘﺨﺪﻣﺔ ﻓﻲ ھﺬه اﻟﻠﻐﺔ :
;  ﻟﻌﻤﻞ ﻣﺴﺎﻓﺔ )(space
;< ﻟﻌﻤﻞ اﺷﺎرة اﺻﻐﺮ <
;> ﻟﻌﻤﻞ اﺷﺎرة اﻛﺒﺮ >
;© ﻟﻌﻤﻞ ﺷﺎرة ﺣﻘﻮق اﻟﻄﺒﻊ ©
;&trade ﻟﻌﻤﻞ اﺷﺎرة ﻋﻼﻣﺔ ﺗﺠﺎرﯾﺔ ™
;¾ ﻟﻌﻤﻞ رﻗﻢ ﻛﺴﺮي ﻓﻲ ﻣﺜﺎﻟﻨﺎ 3/4
;& ﻟﻌﻤﻞ اﺷﺎرة & AND
ﻣﻼﺣﻈﺔ :ﺑﺎﻟﻨﺴﺒﺔ اﻟﻰ اﺷﺎرات & >,<,ﯾﻤﻜﻨﻚ ﻛﺘﺎﺑﺘﮭﺎ ﻣﺒﺎﺷﺮة دون اﻟﺤﺎﺟﺔ اﻟﻰ اﺳﺘﺨﺪام
اﻟﺤﺮوف اﻟﺨﺎﺻﺔ .
اﻧﺘﺒﮫ اﻟﻰ ان اﺷﺎرات اﻻﺻﻐﺮ و اﻻﻛﺒﺮ ھﻨﺎ ھﻲ ﻟﻠﻐﺔ اﻻﻧﺠﻠﯿﺰﯾﺔ
ﻣﺜﺎل :6
ﺻﻤﻢ اﻟﺼﻔﺤﺔ اﻟﺘﺎﻟﯿﺔ :
><html
اﻟﻜﻮد :
><head
><title
ﺻﻔﺤﺘﻲ اﻻوﻟﻰ
></title
></head
><body
></pأھﻼ وﻣﺮﺣﺒﺎ ﺑﻜﻢ><p align=center
><p align=right
ﺗﻌﻠﻤﻨﺎ ﻓﻲ ھﺬا اﻟﺪرس ﺑﻌﻀﺎ ﻣﻦ اﻟﺤﺮوف اﻟﺨﺎﺻﺔ
;  
ﺳﻨﺬﻛﺮ ﻣﻨﮭﺎ ﻋﻠﻰ
><br
ﺳﺒﯿﻞ اﻟﻤﺜﺎل ﻻ اﻟﺤﺼﺮ ﻣﺎ ﯾﺄﺗﻲ
><br
اﺷﺎرة اﺻﻐﺮ
;<
><br
اﺷﺎرة اﻛﺒﺮ
;>
><br
اﺷﺎرة ﺣﻘﻮق اﻟﻄﺒﻊ
;©
><br
وﺗﻌﻠﻤﻨﺎ اﯾﻀﺎ اﻧﮫ ﯾﻤﻜﻦ ﻛﺘﺎﺑﺔ اﺷﺎرة اﻻﺻﻐﺮ و اﻻﻛﺒﺮ دون اﻟﺤﺎﺟﺔ اﻟﻰ
اﺳﺘﺨﺪام ﺣﺮوف ﺧﺎﺻﺔ
><br
ﻣﺜﻼ
><br
اﺷﺎرة اﺻﻐﺮ
<
><br
اﺷﺎرة اﻛﺒﺮ
>
></p
></body
></html
ﺷﺮح اﻟﻜﻮد:
ﺗﻌﻠﻤﻨﺎ ﻓﻲ ھﺬا اﻟﺪرس ﺑﻌﻀﺎ ﻣﻦ اﻟﺤﺮوف اﻟﺨﺎﺻﺔ
;  
ﺳﻨﺬﻛﺮ ﻣﻨﮭﺎ ﻋﻠﻰ
ﻟﻌﻤﻞ اﻟﻤﺴﺎﻓﺔ > --------------------
ﻻﺣﻆ ان اﻟﺒﻌﺪ ﺑﯿﻦ ﻛﻠﻤﺔ "ﺧﺎﺻﺔ" و ﻛﻠﻤﺔ "ﺳﻨﺬﻛﺮ"ﺑﻤﻘﺪار ارﺑﻊ ﻓﺮاﻏﺎت
اﺷﺎرة اﺻﻐﺮ
;<
)<(اﺷﺎرة اﺻﻐﺮ ﺑﺎﻻﻧﺠﻠﯿﺰي><----------------------
اﺷﺎرة اﻛﺒﺮ
;>
)>(اﺷﺎرة اﻛﺒﺮ ﺑﺎﻻﻧﺠﻠﯿﺰي >>-----------------------
اﺷﺎرة ﺣﻘﻮق اﻟﻄﺒﻊ
;©
اﺷﺎرة ﺣﻘﻮق اﻟﻄﺒﻊ ©>©--------------------
و اﻻن ﻋﺰﯾﺰي اﻟﻘﺎرئ ﻟﻨﻨﺘﻘﻞ اﻟﻰ ﺷﺮح اﻋﻤﻖ وﺗﻔﺼﯿﻞ أﻛﺜﺮ ﻟﮭﺬه اﻟﻠﻐﺔ اﻟﺴﮭﻠﺔ
إدراج اﻟﺼﻮر
ﻗﺪ ﻧﺮﻏﺐ ﺑﺎﺿﺎﻓﺔ ﺻﻮرة اﻟﻰ ﺻﻔﺤﺔ اﻟﻮﯾﺐ و ﻟﻌﻤﻞ ذﻟﻚ ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ اﻟﺘﺎﻟﻲ :
>……=<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:[email protected]
ﻛﻠﻤﺔ 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:[email protected]>[email protected]</a
></body
></html
اﻟﺴﻄﺮ اﻟﻤﻠﻮن ﯾﻤﺜﻞ ﻣﺜﺎﻻ ﻟﻌﻤﻞ ادراج ﺗﺸﻌﯿﺒﻲ ﻻﻣﯿﻞ ﻓﻌﻨﺪ اﻟﻨﻘﺮ ﻋﻠﻰ
[email protected]
ﯾﻔﺘﺢ ﻟﻨﺎ اﻟﺒﺮﻧﺎﻣﺞ اﻻﻓﺘﺮاﺿﻲ ﻟﺘﺤﺮﯾﺮ اﻻﻣﯿﻼت و ﻋﻨﺪ ﻛﻠﻤﺔ TOﯾﻜﺘﺐ
[email protected]ﻛﻤﺎ ﻓﻲ اﻟﺼﻮرة :
اﻟﺼﻔﺤﺔ اﻟﺜﺎﻧﯿﺔ ).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:[email protected]>[email protected]</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:[email protected]>[email protected]</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>
&nbs
</center>
p;
<form action=mailto:[email protected]
<select name=country>
method=post>
<option value=jo><اﻻردن/option>
اﻻﺳﻢ
<option value=ph><ﻓﻠﺴﻄﯿﻦ/option>
<option value=sr><ﺳﻮرﯾﺎ/option>
<input type=text name=txt1 size=100>
<option value=eg><ﻣﺼﺮ/option>
<br>
<option value=su><اﻟﺴﻌﻮدﯾﺔ/option>
ﻛﻠﻤﺔ اﻟﻤﺮور
</select>
<br>
<input type=password name=ps1 size=50 maxlength=12>
اﻟﺘﻌﻠﯿﻘﺎت
<br>
<textarea name=comm rows=10
اﻟﺠﻨﺲ
cols=80><اﻛﺘﺐ ﺗﻌﻠﯿﻘﻚ ھﻨﺎ/textarea>
<br>
<input type=radio name=r1 value=male checked>ذﻛﺮ
<input type=submit value=>ﺗﺴﺠﯿﻞ
<br>
&nbs
 
p;
;
<input type=reset value=" ﻣﺴﺢ
<input type=radio name=r1
>"اﻟﺤﻘﻮل
value=female>&اﻧﺜﻰnbsp;
</form>
<br>
</body>
اﻟﻤﻮاﻗﻊ اﻟﻤﻔﻀﻠﺔ
</html>
<input type=checkbox name=Yahoo checked>Yahoo
<br>
 
;
 
; 2
<input type=checkbox name=Google checked>Google
<br>
 
;
 
;
<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:[email protected] </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
ﻭ ﺑﻬﺬﺍ ﺍﻟﺪﺭﺱ ﻧﻜﻮﻥ ﻗﺪ ﺍﻧﻬﻴﻨﺎ ﺷﺮﺣﻨﺎ ﺍﻟﻤﺒﺴﻂ ﻟﻠﻐﺔ ﺍﻟﻬﺘﻤﻞ
ﻭﻟﻜﻦ ﻛﻨﺼﻴﺤﺔ ﺍﻗﺪﻣﻬﺎ ﻟﻚ ﻋﺰﻳﺰﻱ ﺍﻟﻘﺎﺭﺉ ﺍﻧﺼﺤﻚ ﺑﺘﺼﻤﻴﻢ ﻣﻮﻗﻊ ﺻﻐﻴﺮ
ﻛﺘﺪﺭﻳﺐ ﺗﺴﺘﺨﺪﻡ ﻓﻴﻪ ﺍﻫﻢ ﺍﻻﻭﺳﻤﺔ ﻭﺍﻟﺼﻔﺎﺕ ﻭﺍﻟﺤﺮﻭﻑ ﺍﻟﺨﺎﺻﺔ ﺍﻟﺘﻲ
ﺷﺮﺣﻨﺎﻫﺎ ﻭﺍﻥ ﻻ ﺗﻨﺘﻘﻞ ﻣﻦ ﺟﺰﺀ ﺍﻟﻰ ﺍﺧﺮ ﺍﻻ ﺍﺫﺍ ﻛﻨﺖ ﻗﺪ ﺍﺩﺭﻛﺘﻪ
ﻭﻓﻬﻤﺘﻪ ﺑﺸﻜﻞ ﺟﻴﺪ .
ﺍﺫﺍ ﻛﺎﻥ ﻟﻚ ﺍﻱ ﺍﺳﺘﻔﺴﺎﺭ ﺍﻭ ﺳﺆﺍﻝ ﻻ ﺗﺘﺮﺩﺩ ﻧﻬﺎﺋﻴﺎ ﻓﻲ ﺳﺆﺍﻟﻲ
ﻋﻦ ﻃﺮﻳﻖ ﺍﻻﻣﻴﻞ ﺍﻟﺘﺎﻟﻲ:
[email protected]
ﻭ ﻛﻤﺎ ﺗﻼﺣﻆ ﻓﺎﻥ ﻫﺬﺍ ﺍﻟﻜﺘﺎﺏ ﻣﺠﺎﻧﻲ ﻭﻗﺎﺑﻞ ﻟﻠﻄﺒﺎﻋﺔ ﻭ ﻣﺎ ﺍﺭﻳﺪﻩ
ﻓﻘﻂ ﻫﻮ ﺩﻋﻮﺓ ﺻﺎﻟﺤﺔ ﻟﻲ ﻓﻲ ﻇﻬﺮ ﺍﻟﻐﻴﺐ ﻓﻼ ﺗﻨﺴﻮﻧﺎ ﻣﻦ ﺩﻋﺎﺋﻜﻢ ﻟﻜﻦ
ﺍﺭﺟﻮ ﺫﻛﺮ ﺍﻟﻤﺼﺪﺭ ﺍﺫﺍ ﺗﻢ ﺍﻻﺳﺘﺸﻬﺎﺩ ﺑﺎﻱ ﺷﺊ ﻣﻦ ﺍﻟﻜﺘﺎﺏ .
ﻧﺮﺍﻛﻢ ﻗﺮﻳﺒﺎ ﻓﻲ ﺍﻟﺠﺰﺀ ﺍﻟﺜﺎﻧﻲ ﻣﻦ ﻫﺬﻩ ﺍﻟﻤﻮﺳﻮﻋﺔ ﻭﻫﻮ ﺑﺎﺫﻥ ﺍﷲ
ﺳﻮﻑ ﻳﺘﻨﺎﻭﻝ ﻟﻐﺔ ﺍﻟﺠﺎﻓﺎ ﺳﻜﺮﻳﺒﺖ .
ﻣﻠﺤﻖ 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و ﻟﻠﺘﻌﺪﯾﻞ ﻋﻠﻰ ﻃﻠﻮل اﻟﺠﺪول وﻋﺮﺿﮫ اذا ﻟﻢ ﺗﺴﺘﻄﻊ ﻋﻤﻞ ذﻟﻚ ﻣﻦ ﺻﻨﺪوق
اﻟﺤﻮار وھﻜﺬا....
ارﺟﻮ ان ﯾﻜﻮن ﻗﺼﺪي و ﻧﺼﯿﺤﺘﻲ ﻗﺪ وﺻﻠﺖ اﻟﯿﻚ ﻟﻜﻦ ﻓﻲ اﻟﻨﮭﺎﯾﺔ ﯾﻨﺒﻐﻲ ﻋﻠﻲ اﻟﺘﺎﻛﯿﺪ
ﻋﻠﻰ اھﻤﯿﺔ ﺗﻌﻠﻢ اﻟﻠﻐﺔ ﻋﻠﻰ اﻻﻗﻞ ﻟﻤﻦ ﯾﺮﯾﺪ ﺗﻌﻠﻢ ﻟﻐﺎت ﺑﺮﻣﺠﺔ اﻟﻤﻮاﻗﻊ.
ﰎ ﲝﻤﺪ ﺍﷲ
You might also like
- تعلم لغة HTML 5 تصميم المواقع الالكترونية شرح مبسط وشاملNo ratings yetتعلم لغة HTML 5 تصميم المواقع الالكترونية شرح مبسط وشامل46 pages
- Mzk0OTc2MQ6969كتاب مادة الحاسوب للصف التاسع الفصل الثاني 2019 المنهاج الاردني بصيغة PDFNo ratings yetMzk0OTc2MQ6969كتاب مادة الحاسوب للصف التاسع الفصل الثاني 2019 المنهاج الاردني بصيغة PDF137 pages
- html مدخل الى تعلم تطوير وتصميم الويب بلغة 2No ratings yethtml مدخل الى تعلم تطوير وتصميم الويب بلغة 243 pages
- موضوعات خاصة في هندسة الحاسوب والبرمجيات HTML CssNo ratings yetموضوعات خاصة في هندسة الحاسوب والبرمجيات HTML Css24 pages
- أوراق عمل تقنية رقمية 2 1 مسارات موقع منهجيNo ratings yetأوراق عمل تقنية رقمية 2 1 مسارات موقع منهجي8 pages
