Web Programmin L3_٠٨١٧١١

رواﺑﻂ HTML ، ﺻﻮر HTML ، ﻗﻮاﺋﻢ HTML 2 رواﺑﻂ HTML ࿎ﺑﻨﻴﺔ اᆿﺮاﺑﻂ •ﻣﺜﻞ ﺟﻤﻴﻊ اﻟﻌﻼﻣﺎت، ﺗﺘﺒﻊ اﻟﺮواﺑﻂ ﺑﻨﻴﺔ، وﻟﻬﺎ ﻋﻼﻣﺎت ﺑﺪاﻳﺔ وﻋﻼﻣﺎت ﻧﻬﺎﻳﺔ. •ﺷﺮح࿎ • aᲔ a ﺗﺮﻣﺰ إﱃ Anchor ، واᆿﺘﻲ ﺗﻌﻨﻲ راﺑﻂዔ ﻫﺬه ﻫﻲ اᆿﻌﻼﻣﺔ اᆿﺘﻲ ﺗﺠﻌﻞ ﻛﻞ ﺷﻲء ﻳﺤﺪثዔ • href : ﺗﻌﻨﻲ ﻣﺮﺟﻊ اᆿﻨﺺ اᆿﻔﺎﺋﻖዔ ﺟﺰء href ﻫﻮ ﺳﻤﺔ أﺧﺮى، ﻣﻊ ﻣﻮﻗﻊ اᆿﺼﻔﺤﺔ اﻷﺧﺮى ﻛﻘﻴﻤﺘﻬﺎዔ ﻻ ﺗﻨﺲَ ﻋﻼﻣﺎت اﻻﻗﺘﺒﺎس (" "). •ﻣﺜﺎل > a hrefᲗ᱾httpᲔᲉᲉwwwᲈgoogleᲈcom᱾ < زﻳﺎرة ﺟﻮﺟﻞ >/a < ﻋﻨﻮان URL ﻧﺺ اﻟﺮاﺑﻂ 3 اﻟﺮﺑﻂ ﺑﻌﻨﺎوﻳﻦ اﻟﺒﺮﻳﺪ اﻹﻟﻜﺘﺮوﻧﻲ •إذا ﻛﻨﺖ ﺗﺮﻳﺪ اﻟﺴﻤﺎح ﻟﻸﺷﺨﺎص ﺑﻤﺮاﺳﻠﺘﻚ ﻋﺒﺮ اﻟﺒﺮﻳﺪ اﻹﻟﻜﺘﺮوﻧﻲ ﺑﺎﻟﻨﻘﺮ ﻋﲆ راﺑﻂ، ﻓﺎﺳﺘﺨﺪم ﻫﺬا اﻟﻜﻮد: > a hrefᲗ᱾mailtoᲔbruce@exampleᲈcom᱾ <راﺳᇁﻨﻲ>/a < ﻹﻧﺸﺎء ﻫﺬا -راﺳﻠﻨﻲ -اﻟﺬي ﺳﻴﻔﺘﺢ ﺑﺮﻧﺎﻣﺞ اﻟﺒﺮﻳﺪ اﻹﻟﻜﺘﺮوﻧﻲ ﻟﻠﻤﺴﺘﺨﺪم ﻣﻊ ﻋﻨﻮاﻧﻚ ﻓﻲ ﻣﺮﺑﻊ "إﱃ". 4 اﻟﺮﺑﻂ ﺑﺎﻟﺼﻮر •اﻻرﺗﺒﺎط ﺑﻤᇁﻒ ﺻﻮرة ﻫﻮ ﻋﻤᇁﻴًﺎ ﻧﻔﺲ اﻻرﺗﺒﺎط ﺑﻤᇁﻒ HTML . ﻓﻘﻂ ﻗﻢ ﺑﺘﻀﻤﻴﻦ اﺳﻢ اᆿﻤᇁﻒ، وﻻ ﺗﻨﺲَ اᆿﻼﺣﻘﺔ اᆿﺼﺤﻴﺤﺔ -أي إذا ﻛﺎن ﻣᇁﻔًﺎ ﻣﻦ ﻧﻮع gif أو jpg . >أ hrefᲗ᱾defaultᲈasp᱾ < 5 اﻟﺮﺑﻂ ﺑﺎﻟﻤﻠﻔﺎت •ﺗﻘﻮم ﺑﺮﺑﻂ ﻣﻠﻒ ﺗﻤﺎﻣًﺎ ﻛﻤﺎ ﺗﻔﻌﻞ ﻣﻊ ﺻﻮرة. اﻟﻔﺮق اﻟﻮﺣﻴﺪ ﻫﻮ أﻧﻪ ﻟﻦ ﻳُﻔﺘﺢ ﻓﻲ اﻟﻤﺘﺼﻔﺢ، ﺑﻞ ﺳﻴﺘﻢ ﺗﻨﺰﻳﻠﻪ إﱃ ﻣﻜﺎن ﻣﺤﺪد ﻋﲆ اﻟﻘﺮص اﻟﺼﻠﺐ ﻟﻠﻘﺎرئ. ﻣﺜﺎل: > a hrefᲗ᱾ambientᲈmp᲍᱾ <ﺗﺤﻤﻴﻞ اﻷﻏﻨﻴﺔ )ﻣᇁﻒ mp᲍ ﺑﺤﺠﻢ 2.6 ﻣﻴﻐﺎﺑﺎﻳﺖ(>/a < 6 رواﺑﻂ HTML - ﺳﻤﺔ اᆿﻬﺪف •ﺗﺤﺪد اᆿﺴﻤﺔ target ﻣﻜﺎن ﻓﺘﺢ اᆿﻤﺴﺘﻨﺪ اᆿﻤﺮﺗﺒﻂዔ •ﻳﻤﻜﻦ أن ﺗﺤﺘﻮي اᆿﺴﻤﺔ target ﻋﲆ إﺣﺪى اᆿﻘﻴﻢ اᆿﺘﺎᆿﻴﺔ࿎ • _blank - ﻳﻔﺘﺢ اᆿﻤﺴﺘﻨﺪ اᆿﻤﺮﺗﺒﻂ ﻓﻲ ﻧﺎﻓﺬة أو ﻋﻼﻣﺔ ﺗﺒﻮﻳﺐ ﺟﺪﻳﺪة • _ self - ﻳﻔﺘﺢ اᆿﻤﺴﺘﻨﺪ اᆿﻤﺮﺗﺒﻂ ﻓﻲ ﻧﻔﺲ اᆿﻨﺎﻓﺬة/ﻋﻼﻣﺔ اᆿﺘﺒﻮﻳﺐ اᆿﺘﻲ ﺗﻢ اᆿﻨﻘﺮ ﻓﻴﻬﺎ )ﻫﺬا ﻫﻮ اﻹﻋﺪاد اﻻﻓﺘﺮاﺿﻲ( > a hrefᲗ᱾httpᲔᲉᲉwwwᲈw᲍schoolsᲈcomᲉ᱾ targetᲗ᱾Პblank᱾ < زﻳﺎرة W3Schools! 7 ﺻﻮر HTML •ﻣﺜﺎل 1 : ﻛﻞ ﻣﺎ ﻋᇁﻴﻚ ﻓﻌᇁﻪ ﻫﻮ أوﻻً إﺧﺒﺎر اᆿﻤﺘﺼﻔﺢ ﺑﺄﻧﻚ ﺗﺮﻳﺪ إدراج ﺻﻮرة ) img ( ﺛﻢ ﺗﺤﺪﻳﺪ ﻣﻜﺎﻧﻬﺎ )src ، اﺧﺘﺼﺎرًا ᆿـ ᱾source᱾ (. •ﻻﺣﻆ ﻛﻴﻒ ﻳﺘﻢ ﻓﺘﺢ وإﻏﻼق ﻋﻨﺼﺮ اᆿﺼﻮرة ﺑﺎﺳﺘﺨﺪام ﻧﻔﺲ اᆿﻮﺳﻢዔ ﻣﺜﻞ وﺳﻢ ، ﻓﻬﻮ ﻏﻴﺮ ﻣﺮﺗﺒﻂ ﺑﺠﺰء ﻣﻦ اᆿﻨﺺዔ 8 اﺳﺘﻤﺮار: • ᱾Flowerᲈjpg᱾ ﻫﻮ اﺳﻢ ﻣᇁﻒ اᆿﺼﻮرة اᆿﺬي ﺗﺮﻳﺪ إدراﺟﻪ ﻓﻲ ﺻﻔﺤﺘﻚዔ ᲈ᱾jpg᱾ ﻫﻮ ﻧﻮع ﻣᇁﻒ اᆿﺼﻮرةዔ ﺗﻤﺎﻣًﺎ ﻛﻤﺎ ﻳﺸﻴﺮ اﻻﻣﺘﺪاد ᲈ᱾htm᱾ إﱃ أن اᆿﻤᇁﻒ ﻫﻮ ﻣﺴﺘﻨﺪ HTML ، ﻓﺈن ᲈ᱾jpg᱾ ﻳﺨﺒﺮ اᆿﻤﺘﺼﻔﺢ أن اᆿﻤᇁﻒ ﻫﻮ ﺻﻮرةዔ ﻫﻨﺎك ﺛﻼﺛﺔ أﻧﻮاع ﻣﺨﺘᇁﻔﺔ ﻣﻦ أﻧﻮاع ﻣᇁﻔﺎت اᆿﺼﻮر اᆿﺘﻲ ﻳﻤﻜﻨﻚ إدراﺟﻬﺎ ﻓﻲ ﺻﻔﺤﺎﺗﻚ࿎ • GIF )ﺗﻨﺴﻴﻖ ﺗﺒﺎدل اᆿﺮﺳﻮﻣﺎت( • JPG / JPEG )ﻣﺠﻤﻮﻋﺔ ﺧﺒﺮاء اᆿﺘﺼﻮﻳﺮ اᆿﻤﺸﺘﺮﻛﺔ( • PNG )رﺳﻮﻣﺎت اᆿﺸﺒﻜﺔ اᆿﻤﺤﻤﻮᆿﺔ( 9 ﻫﻨﺎك ﺑﻌﺾ اﻷﻣﻮر اﻹﺿﺎﻓﻴﺔ اﻟﺘﻲ ﻳﺠﺐ أن ﺗﻌﺮﻓﻬﺎ ﻋﻦ اﻟﺼﻮر. •أوﻻً، ﻳﻤﻜﻨﻚ ﺑﺴﻬﻮᆿﺔ إدراج اᆿﺼﻮر اᆿﻤﻮﺟﻮدة ﻓﻲ ﻣﺠᇁﺪات أﺧﺮى، أو ﺣﺘﻰ اᆿﺼﻮر اᆿﻤﻮﺟﻮدة ﻋﲆ ﻣﻮاﻗﻊ وﻳﺐ أﺧﺮى࿎ ﻣﺜﺎل 2 : > imgsrcᲗ᱾imagesᲉlogoᲈpng᱾ / < ﻣﺜﺎل 3 : ﻫﻞ ﻫﻨﺎك أي ﺳﻤﺎت أﺧﺮى ﻳﺠﺐ أن أﻋﺮﻓﻬﺎ؟ •ﻳﺠﺐ ﻋᇁﻴﻚ داﺋﻤًﺎ اﺳﺘﺨﺪام اᆿﺴﻤﺔ src ، اᆿﺘﻲ ﺗﺨﺒﺮ اᆿﻤﺘﺼﻔﺢ ﺑﻤﻜﺎن اᆿﺼﻮرةዔ •إﱃ ﺟﺎﻧﺐ ذᆿﻚ، ﻫﻨﺎك ﻋﺪد ﻣﻦ اᆿﺴﻤﺎت اﻷﺧﺮى اᆿﺘﻲ ﻳﻤﻜﻦ أن ﺗﻜﻮن ﻣﻔﻴﺪة ﻋﻨﺪ إدراج اᆿﺼﻮرዔ •ﻳﻤﻜﻦ اﺳﺘﺨﺪام اᆿﺴﻤﺔ title ﻹﺿﺎﻓﺔ ﻣﻌᇁﻮﻣﺎت إﱃ اᆿﺼﻮرة࿎ ﻣﺜﺎل 6 : > imgsrcᲗ᱾logoᲈgif᱾ titleᲗ᱾Learn HTML from HTMLᲈnet " / < إذا ﻗﻤﺖ، دون اᆿﻨﻘﺮ، ﺑﻮﺿﻊ اᆿﻤﺆﺷﺮ ﻓﻮق اᆿﺼﻮرة، ﻓﺴﺘﺮى اᆿﻨﺺ ᱾Learn HTML from HTMLᲈnet " ﻳﻈﻬﺮ ﻛﺼﻨﺪوق ﻣﻨﺒﺜﻖዔ 10