ﺍﻟﺪﺭﺱ ﺍﻟﺮﺍﺑﻊ : ﺇﻧﺸﺎﺀ ﻣﻮﻗﻌﻚ ﺍﻷﻭﻝ
ﻣﻊ ﻛﻞ ﻣﺎ ﺗﻌﻠﻤﺘﻪ ﻓﻲ ﺍﻟﺪﺭﻭﺱ ﺍﻟﺴﺎﺑﻘﺔ ﺃﺻﺒﺤﺖ ﺍﻵﻥ ﻋﻠﻰ ﺑﻌﺪ ﺩﻗﺎﺋﻖ ﻣﻦ ﺇﻧﺸﺎﺀ ﺃﻭﻝ ﻣﻮﻗﻊ ﻟﻚ .
ﻛﻴﻒ؟
ﻓﻲ ﺍﻟﺪﺭﺱ ﺍﻷﻭﻝ ﺃﻟﻘﻴﻨﺎ ﻧﻈﺮﺓ ﻋﻠﻰ ﺍﻷﺩﻭﺍﺕ ﺍﻟﺘﻲ ﻧﺤﺘﺎﺟﻬﺎ ﻹﻧﺸﺎﺀ ﻣﻮﻗﻊ : ﻣﺘﺼﻔﺢ ﻭﺑﺮﻧﺎﻣﺞ ﺍﻟﻤﻔﻜﺮﺓ ﺃﻭ ﺃﻱ ﻣﺤﺮﺭ ﻧﺼﻲ ﻣﻤﺎﺛﻞ، ﻭﺑﻤﺎ ﺃﻧﻚ ﺗﻘﺮﺃ ﻫﺬﻩ ﺍﻟﺼﻔﺤﺔ ﻓﺄﻧﺖ ﺗﺴﺘﺨﺪﻡ ﺍﻵﻥ ﻣﺘﺼﻔﺤﺎً، ﻣﺎ ﺗﺤﺘﺎﺟﻪ ﺍﻵﻥ ﻫﻮ ﺃﻥ ﺗﻔﺘﺢ ﻧﺎﻓﺬﺓ ﺟﺪﻳﺪﺓ ﻣﻦ ﺍﻟﻤﺘﺼﻔﺢ ﻟﻜﻲ ﺗﺴﺘﻄﻴﻊ ﻗﺮﺍﺀﺓ ﻫﺬﺍ ﺍﻟﺪﺭﺱ ﺑﻴﻨﻤﺎ ﺗﺴﺘﺨﺪﻡ ﺍﻟﻨﺎﻓﺬﺓ ﺍﻷﺧﺮﻯ ﻟﺘﺮﻯ ﻓﻴﻬﺎ ﻣﻮﻗﻌﻚ .
ﺃﻳﻀﺎً ﻋﻠﻴﻚ ﺃﻥ ﺗﻔﺘﺢ ﺑﺮﻧﺎﻣﺞ ﺍﻟﻤﻔﻜﺮﺓ "Notepad" ﻭﺍﻟﺬﻱ ﺳﺘﺠﺪﻩ ﻓﻲ ﻗﺎﺋﻤﺔ ﺇﺑﺪﺃ ﺛﻢ ﺑﺮﺍﻣﺞ ﺛﻢ ﺃﺩﻭﺍﺕ :
ﺃﻧﺖ ﺟﺎﻫﺰ ﺍﻵﻥ !
ﻣﺎﺫﺍ ﺃﻓﻌﻞ؟
ﻟﻨﺒﺪﺃ ﺑﺸﻲﺀ ﺑﺴﻴﻂ، ﺳﻨﻘﻮﻡ ﺑﺈﻧﺸﺎﺀ ﺻﻔﺤﺔ ﺗﻘﻮﻝ " ﻣﺮﺣﻰ ! ﻫﺬﺍ ﻫﻮ ﻣﻮﻗﻌﻲ ﺍﻷﻭﻝ ". ﺃﻛﻤﻞ ﺍﻟﻘﺮﺍﺀﺓ ﻭﺳﺘﻌﺮﻑ ﻛﻢ ﻫﻮ ﺑﺴﻴﻂ ﻓﻌﻞ ﺫﻟﻚ .
ﻟﻐﺔ HTML ﺑﺴﻴﻄﺔ ﻭﻣﻨﻄﻘﻴﺔ، ﺍﻟﻤﺘﺼﻔﺢ ﻳﻘﺮﺃ HTML ﻛﻤﺎ ﺗﻘﺮﺃ ﺃﻧﺖ ﺍﻟﻠﻐﺔ ﺍﻹﻧﺠﻠﻴﺰﻳﺔ : ﻣﻦ ﺍﻷﻋﻠﻰ ﺇﻟﻰ ﺍﻷﺳﻔﻞ ﻭﻣﻦ ﺍﻟﻴﺴﺎﺭ ﺇﻟﻰ ﺍﻟﻴﻤﻴﻦ ، ﻟﺬﻟﻚ ﺻﻔﺤﺔ HTML ﺑﺴﻴﻄﺔ ﺗﺒﺪﺃ ﺑﻤﺎ ﻳﺠﺐ ﺃﻥ ﺗﺒﺪﺃ ﺑﻪ ﺃﻱ ﺻﻔﺤﺔ HTML ﻭﺗﻨﺘﻬﻲ ﺑﻤﺎ ﻳﺠﺐ ﺃﻥ ﻳﺄﺗﻲ ﻓﻲ ﻧﻬﺎﻳﺔ ﺍﻟﺼﻔﺤﺔ .
ﺃﻭﻝ ﺷﻲﺀ ﻋﻠﻴﻚ ﻓﻌﻠﻪ ﻫﻮ ﺃﻥ ﺗﺨﺒﺮ ﺍﻟﻤﺘﺼﻔﺢ ﺑﺄﻧﻚ " ﺳﺘﺘﺤﺪﺙ " ﻣﻌﻪ ﺑﻠﻐﺔ HTML ، ﻳﻤﻜﻨﻚ ﻓﻌﻞ ﺫﻟﻚ ﻋﻦ ﻃﺮﻳﻖ ﻭﺳﻢ
<html> ﻻ ﺗﻮﺟﺪ ﺃﻱ ﻣﻔﺎﺟﺌﺔ ﻫﻨﺎ، ﻟﺬﻟﻚ ﻗﺒﻞ ﺃﻥ ﺗﺒﺪﺃ ﺃﻱ ﺷﻲﺀ ﺃﻛﺘﺐ " <html> " ﻓﻲ ﺃﻭﻝ ﺳﻄﺮ ﻓﻲ ﺑﺮﻧﺎﻣﺞ ﺍﻟﻤﻔﻜﺮﺓ .
ﻛﻤﺎ ﺗﺘﺬﻛﺮ ﻣﻦ ﺍﻟﺪﺭﻭﺱ ﺍﻟﻤﺎﺿﻴﺔ، <html> ﻫﻮ ﻭﺳﻢ ﺍﻟﺒﺪﺍﻳﺔ ﻭﻳﺤﺘﺎﺝ ﺇﻟﻰ ﻭﺳﻢ ﺇﻏﻼﻕ ﻟﺬﻟﻚ ﻻ ﺗﻨﺴﻰ ﻛﺘﺎﺑﺔ ﻭﺳﻢ ﺍﻹﻏﻼﻕ ﺑﻌﺪ ﺳﻄﺮﻳﻦ ﻓﺎﺭﻏﻴﻦ، ﻭﺑﻘﻴﺔ ﺍﻟﻮﺛﻴﻘﺔ ﺳﺘﻜﺘﺒﻬﺎ ﺑﻴﻦ <html> ﻭ </html> .
ﺍﻟﺸﻲﺀ ﺍﻟﺘﺎﻟﻲ ﺍﻟﺬﻱ ﺗﺤﺘﺎﺟﻪ ﺻﻔﺤﺘﻚ ﻫﻮ ﺃﻣﺮ ﺭﺃﺱ ﺍﻟﺼﻔﺤﺔ "head" ﻭﺍﻟﺬﻱ ﻳﻘﺪﻡ ﻣﻌﻠﻮﻣﺎﺕ ﺣﻮﻝ ﺍﻟﺼﻔﺤﺔ ﻟﻠﻤﺘﺼﻔﺢ، ﻭﻛﺬﻟﻚ ﺗﺤﺘﺎﺝ ﺇﻟﻰ ﺃﻣﺮ "body" ﻭﺍﻟﺬﻱ ﺳﻴﺤﻮﻱ ﺍﻟﻤﺤﺘﻮﻳﺎﺕ ﺍﻟﺘﻲ ﺗﺮﻳﺪ ﺍﻥ ﺗﻀﻌﻬﺎ ﻓﻲ ﺍﻟﺼﻔﺤﺔ، ﺃﻣﺮ head ﺃﻭ ﺭﺃﺱ ﺍﻟﺼﻔﺤﺔ ( <head> ﻭ </head> ) ﻳﻮﺿﻊ ﻓﻮﻕ ﺃﻣﺮ body ﺃﻭ " ﻣﺘﻦ ﺍﻟﺼﻔﺤﺔ " ( <body> ﻭ </body> ) .
ﺻﻔﺤﺘﻚ ﻳﺠﺐ ﺃﻥ ﺗﻜﻮﻥ ﺑﻬﺬﺍ ﺍﻟﺸﻜﻞ :
<html>
<head>
</head>
<body>
</body>
</html>
ﻻﺣﻆ ﻛﻴﻒ ﻧﺴﻘﻨﺎ ﺍﻟﺼﻔﺤﺔ ﺑﻄﺮﻳﻘﺔ ﻣﻨﻄﻘﻴﺔ ﺣﻴﺚ ﻭﺿﻌﻨﺎ ﻛﻞ ﻭﺳﻢ ﻓﻲ ﺳﻄﺮ ﺟﺪﻳﺪ ﻭﻭﺿﻌﻨﺎ ﻣﺴﺎﻓﺎﺕ ﻓﺎﺭﻏﺔ ﻗﺒﻞ ﺑﻌﻀﻬﺎ، ﻛﻘﺎﻋﺪﺓ، ﻻ ﻳﻬﻢ ﻛﻴﻒ ﺗﻘﻮﻡ ﺑﺘﻨﺴﻴﻖ ﺍﻷﻭﺍﻣﺮ ﻓﻲ ﺻﻔﺤﺔ HTML ، ﻟﻜﻦ ﻟﻜﻲ ﺗﺠﻌﻞ ﺍﻟﺼﻔﺤﺔ ﺳﻬﻠﺔ ﺍﻟﻘﺮﺍﺀﺓ ﻟﻚ ﻭﻟﻶﺧﺮﻳﻦ ﻳﻨﺼﺢ ﺑﺄﻥ ﺗﻨﺴﻖ ﺍﻟﺼﻔﺤﺔ ﺑﻄﺮﻳﻘﺔ ﻫﻴﻜﻠﻴﺔ ﻣﻨﻄﻘﻴﺔ ﺳﻬﻠﺔ ﺍﻟﻔﻬﻢ ﻛﻤﺎ ﺗﺮﻯ ﻓﻲ ﺍﻟﻤﺜﺎﻝ ﺃﻋﻼﻩ .
ﺇﺫﺍ ﻛﺎﻧﺖ ﺻﻔﺤﺘﻚ ﺗﺸﺒﻪ ﺍﻟﻤﺜﺎﻝ ﺃﻋﻼﻩ ﻓﻘﺪ ﻗﻤﺖ ﺑﺈﻧﺸﺎﺀ ﻣﻮﻗﻌﻚ ﺍﻷﻭﻝ، ﻋﻤﻠﻴﺎً ﺍﻟﻤﻮﻗﻊ ﻣﻤﻞ ﻭﻻ ﻳﺤﻮﻱ ﺷﻴﺌﺎً ﻭﻏﺎﻟﺒﺎً ﻟﻦ ﻳﻜﻮﻥ ﺍﻟﻤﻮﻗﻊ ﺍﻟﺬﻱ ﺗﺤﻠﻢ ﺑﻪ ﻋﻨﺪﻣﺎ ﺑﺪﺃﺕ ﻓﻲ ﻗﺮﺍﺀﺓ ﻫﺬﺍ ﺍﻟﺪﺭﺱ، ﻣﻊ ﺫﻟﻚ ﻫﻮ ﻣﻮﻗﻊ ﻭﻣﺎ ﻗﻤﺖ ﺑﺈﻧﺠﺎﺯﻩ ﺍﻵﻥ ﺳﻴﻜﻮﻥ ﻗﺎﻟﺒﺎً ﻟﺒﻘﻴﺔ ﺻﻔﺤﺎﺕ HTML ﺍﻟﺘﻲ ﺳﺘﻜﺘﺒﻬﺎ ﻓﻲ ﺍﻟﻤﺴﺘﻘﺒﻞ .
ﺟﻤﻴﻞ , ﻟﻜﻦ ﻛﻴﻒ ﺃﺿﻴﻒ ﺍﻟﻤﺤﺘﻮﻳﺎﺕ ﻟﻠﻤﻮﻗﻊ؟
ﻛﻤﺎ ﺗﻌﻠﻤﺖ ﺳﺎﺑﻘﺎً، ﺻﻔﺤﺔ HTML ﺗﺤﻮﻱ ﺟﺰﺋﻴﺎً، ﺭﺃﺱ ﺍﻟﺼﻔﺤﺔ ﻭﻣﺘﻦ ﺍﻟﺼﻔﺤﺔ، ﻓﻲ ﺭﺃﺱ ﺍﻟﺼﻔﺤﺔ ﺗﻜﺘﺐ ﻣﻌﻠﻮﻣﺎﺕ ﻋﻦ ﺍﻟﺼﻔﺤﺔ ﻧﻔﺴﻬﺎ، ﺃﻣﺎ ﺍﻟﻤﺘﻦ ﻓﻴﻀﻢ ﺍﻟﻤﺤﺘﻮﻳﺎﺕ ﺍﻟﺘﻲ ﺗﺸﻜﻞ ﺍﻟﺼﻔﺤﺔ . .
ﻣﺜﻼً، ﺇﺫﺍ ﺃﺭﺩﺕ ﺃﻥ ﺗﻀﻊ ﻋﻨﻮﺍﻧﺎً ﻟﻠﺼﻔﺤﺔ ﻳﻈﻬﺮ ﻓﻲ ﺍﻟﺸﺮﻳﻂ ﺍﻟﻌﻠﻮﻱ ﻟﻠﻤﺘﺼﻔﺢ ﻓﻴﺠﺐ ﺃﻥ ﺗﻔﻌﻞ ﺫﻟﻚ ﻓﻲ ﺭﺃﺱ ﺍﻟﺼﻔﺤﺔ، ﺍﻟﻌﻨﺼﺮ ﺍﻟﻤﺴﺘﺨﺪﻡ ﻟﻔﻌﻞ ﺫﻟﻚ ﻫﻮ title . ﺍﻛﺘﺐ ﻋﻨﻮﺍﻧﺎً ﻟﻠﺼﻔﺤﺔ ﺑﻴﻦ ﻭﺳﻢ ﺍﻟﺒﺪﺍﻳﺔ <title> ﻭﻭﺳﻢ ﺍﻹﻏﻼﻕ </title> :
<title> ﻣﻮﻗﻌﻲ ﺍﻷﻭﻝ </title>
ﻻﺣﻆ ﺃﻥ ﺍﻟﻌﻨﻮﺍﻥ ﻟﻦ ﻳﻈﻬﺮ ﻓﻲ ﺍﻟﺼﻔﺤﺔ ﻧﻔﺴﻬﺎ، ﺃﻱ ﺷﻲﺀ ﺗﺮﻳﺪﻩ ﺃﻥ ﻳﻈﻬﺮ ﻓﻲ ﺍﻟﺼﻔﺤﺔ ﻳﺠﺐ ﺃﻥ ﻳﻀﺎﻑ ﺑﻴﻦ ﻭﺳﻤﻲ ﻣﺘﻦ ﺍﻟﺼﻔﺤﺔ
ﻛﻤﺎ ﻗﻠﻨﺎ ﺳﺎﺑﻘﺎً، ﻧﺮﻳﺪ ﻟﻠﺼﻔﺤﺔ ﺃﻥ ﺗﻘﻮﻝ " ﻣﺮﺣﻰ ! ﻫﺬﺍ ﻫﻮ ﻣﻮﻗﻌﻲ ﺍﻷﻭﻝ " ، ﻫﺬﺍ ﺍﻟﻨﺺ ﺍﻟﺬﻱ ﻧﺮﻳﺪ ﻭﺿﻌﻪ ﻓﻲ ﺍﻟﺼﻔﺤﺔ، ﻟﺬﻟﻚ ﻋﻠﻴﻨﺎ ﺃﻥ ﻧﻜﺘﺐ ﻓﻲ ﻣﺘﻦ ﺍﻟﺼﻔﺤﺔ ﻣﺎ ﻳﻠﻲ ::
<p> ﻣﺮﺣﻰ ! ﻫﺬﺍ ﻫﻮ ﻣﻮﻗﻌﻲ ﺍﻷﻭﻝ .</p>
ﺍﻟﺤﺮﻑ p ﻓﻲ <p> ﻫﻮ ﺍﺧﺘﺼﺎﺭ "paragraph" ﺃﻭ ﻓﻘﺮﺓ، ﻭﻫﻮ ﺃﻣﺮ ﺑﺴﻴﻂ ﻹﻧﺸﺎﺀ ﻓﻘﺮﺍﺕ ﻧﺼﻴﺔ .
ﺻﻔﺤﺔ HTML ﻳﺠﺐ ﺃﻥ ﺗﻜﻮﻥ ﻟﺪﻳﻚ ﺑﺎﻟﺸﻜﻞ ﺍﻟﺘﺎﻟﻲ :
<html>
<head>
<title> ﻣﻮﻗﻌﻲ ﺍﻷﻭﻝ </title>
</head>
<body>
<p> ﻣﺮﺣﻰ ! ﻫﺬﺍ ﻫﻮ ﻣﻮﻗﻌﻲ ﺍﻷﻭﻝ .</p>
</body>
</html>
ﺍﻧﺘﻬﻴﻨﺎ ! ﻟﺪﻳﻚ ﺍﻵﻥ ﺃﻭﻝ ﻣﻮﻗﻊ ﺣﻘﻴﻘﻲ !
ﻛﻞ ﻣﺎ ﻋﻠﻴﻚ ﻓﻌﻠﻪ ﺍﻵﻥ ﻫﻮ ﺣﻔﻆ ﺍﻟﺼﻔﺤﺔ ﻋﻠﻰ ﺍﻟﻘﺮﺹ ﺍﻟﺼﻠﺐ ﺛﻢ ﻋﻠﻴﻚ ﺃﻥ ﺗﺴﺘﻌﺮﺿﻬﺎ ﻓﻲ ﻣﺘﺼﻔﺤﻚ :
ﻓﻲ ﺑﺮﻧﺎﻣﺞ ﺍﻟﻤﻔﻜﺮﺓ ﺍﺧﺘﺮ " Save as "... ﻣﻦ ﻗﺎﺋﻤﺔ "File" ﻓﻲ ﺍﻟﻘﺎﺋﻤﺔ ﺍﻟﻌﻠﻮﻳﺔ .
ﺍﺧﺘﺮ " All Files " ﻓﻲ ﻧﺎﻓﺬﺓ " Save as type ." ﻫﺬﺍ ﻣﻬﻢ ﺟﺪﺍً، ﻷﻧﻚ ﺇﻥ ﻟﻢ ﺗﻔﻌﻞ ﺫﻟﻚ ﺳﺘﻘﻮﻡ ﺑﺤﻔﻈﻪ ﻛﻤﻠﻒ ﻧﺼﻲ ﻭﻟﻴﺲ ﻛﻤﻠﻒ .HTML
ﺍﺣﻔﻆ ﺍﻟﺼﻔﺤﺔ ﺑﺎﺳﻢ " page1.htm " ﺍﻷﺣﺮﻑ ﺍﻟﺜﻼﺛﺔ ﺍﻷﺧﻴﺮﺓ htm. ﺗﺸﻴﺮ ﺇﻟﻰ ﺃﻥ ﺍﻟﻤﻠﻒ ﻫﻮ ﻣﻦ ﻧﻮﻉ HTML ، ﺑﺈﻣﻜﺎﻧﻚ ﺃﻥ ﺗﺤﻔﻆ ﺗﻀﻊ ﺑﺪﻻً ﻣﻨﻬﺎ "html." ﻭﺳﺘﻜﻮﻥ ﺍﻟﻨﺘﻴﺠﺔ ﻣﺘﻤﺎﺛﻠﺔ، ﺷﺨﺼﻴﺎً ﺃﺳﺘﺨﺪﻡ "htm." ﺩﺍﺋﻤﺎً، ﻟﻜﻦ ﺑﺈﻣﻜﺎﻧﻚ ﺃﻥ ﺗﺨﺘﺎﺭ ﺑﻴﻨﻬﻤﺎ ﻣﺎ ﺗﺸﺎﺀ، ﻓﻼ ﻓﺮﻕ ﺑﻴﻨﻬﻤﺎ، ﻭﻻ ﻳﻬﻢ ﺃﻳﻦ ﺗﺤﻔﻆ ﺍﻟﻤﻠﻒ ﻓﻲ ﺍﻟﻘﺮﺹ ﺍﻟﺼﻠﺐ، ﻣﺎ ﺩﻣﺖ ﺗﺘﺬﻛﺮ ﺃﻳﻦ ﺣﻔﻈﺘﻪ ﻟﻜﻲ ﺗﺴﺘﻄﻴﻊ ﺇﻳﺠﺎﺩﻩ ﻣﺮﺓ ﺃﺧﺮﻯ .
ﺍﻵﻥ ﺇﺫﻫﺐ ﺇﻟﻰ ﻣﺘﺼﻔﺤﻚ :
ﻓﻲ ﺍﻟﻘﺎﺋﻤﺔ ﺍﻟﻌﻠﻮﻳﺔ ﺍﺧﺘﺮ "Open" ﻣﻦ ﻗﺎﺋﻤﺔ
"File" (CTRL+O) .
ﺇﺿﻐﻂ ﻋﻠﻰ "Browse" ﻓﻲ ﺍﻟﻨﺎﻓﺬﺓ ﺍﻟﺘﻲ ﺳﺘﻈﻬﺮ ﻟﻚ .
ﺇﺑﺤﺚ ﻋﻦ ﺍﻟﻤﻠﻒ ﺍﻟﺬﻱ ﻗﻤﺖ ﺑﺈﻧﺸﺎﺀﻩ ﻭﺍﺿﻐﻂ ﻋﻠﻰ ."Open"
ﺍﻵﻥ ﻳﺠﺐ ﺃﻥ ﺗﺤﻮﻱ ﺍﻟﺼﻔﺤﺔ ﺟﻤﻠﺔ " ﻣﺮﺣﻰ ! ﻫﺬﺍ ﻫﻮ ﻣﻮﻗﻌﻲ ﺍﻷﻭﻝ ". ﺗﻬﺎﻧﻴﻨﺎ !
ﺇﺫﺍ ﺃﺭﺩﺕ ﺃﻥ ﻳﻌﺮﻑ ﺍﻟﻌﺎﻟﻢ ﻛﻠﻪ ﻋﻦ ﻫﺬﻩ ﺍﻟﺼﻔﺤﺔ ﺑﺈﻣﻜﺎﻧﻚ ﺃﻥ ﺗﻘﻔﺰ ﻟﻠﺪﺭﺱ ﺍﻟﺜﺎﻟﺚ ﻋﺸﺮ ﻭﺗﺘﻌﻠﻢ ﻛﻴﻔﻴﺔ ﻭﺿﻊ ﻫﺬﻩ ﺍﻟﺼﻔﺤﺔ ﻋﻠﻰ ﺷﺒﻜﺔ ﺇﻧﺘﺮﻧﺖ، ﺧﻼﻓﺎً ﻟﺬﻟﻚ ﺍﺻﺒﺮ ﻭﺃﻛﻤﻞ ﻗﺮﺍﺀﺓ ﺍﻟﺪﺭﻭﺱ
