ﻫﻞ ﻗﻤﺖ ﺑﺈﻧﺸﺎ ﺍﻟﻤﺰﻳﺪ ﻣﻦ ﺍﻟﺼﻔﺤﺎﺕ ﺑﻨﻔﺴﻚ؟ ﺇﻥ ﻟﻢ ﺗﻔﻌﻞ ﻓﺈﻟﻴﻚ ﻫﺬﺍ ﺍﻟﻤﺜﺎﻝ :
<html>
<head>
<title>My website</title>
</head>
<body>
<h1>A Heading</h1>
<p>text, text text, text</p>
<h2>Subhead</h2>
<p>text, text text, text</p>
</body>
</html>
ﻣﺎ ﺍﻟﺘﺎﻟﻲ؟
ﺣﺎﻥ ﺍﻟﻮﻗﺖ ﺍﻵﻥ ﻟﺘﻌﻠﻢ ﺳﺒﻌﺔ ﻋﻨﺎﺻﺮ ﺟﺪﻳﺪﺓ .
ﺑﻨﻔﺲ ﺍﻟﻄﺮﻳﻘﺔ ﺍﻟﺘﻲ ﺗﺆﻛﺪ ﻓﻴﻬﺎ ﻋﻠﻰ ﻧﺺ ﻣﻌﻴﻦ ﻋﻨﺪﻣﺎ ﺗﻀﻌﻪ ﺑﻴﻦ ﻭﺳﻢ ﺍﻟﺒﺪﺍﻳﺔ <em> ﻭﻭﺳﻢ ﺍﻹﻏﻼﻕ </em> , ﻳﻤﻜﻨﻚ ﺃﻥ ﺗﻀﻴﻒ ﺗﺄﻛﻴﺪﺍً ﺃﻗﻮﻯ ﺑﺎﺳﺘﺨﺪﺍﻡ ﻭﺳﻢ ﺍﻟﺒﺪﺍﻳﺔ <strong> ﻭﻭﺳﻢ ﺍﻹﻏﻼﻕ </strong> .
ﻣﺜﺎﻝ :1
<strong>This should be stronger emphasis.</strong>
ﺳﻴﻈﻬﺮ ﺑﻬﺬﺍ ﺍﻟﺸﻜﻞ ﻓﻲ ﺍﻟﻤﺘﺼﻔﺢ :
This should be stronger .emphasis
ﺑﻄﺮﻳﻘﺔ ﻣﻤﺎﺛﻠﺔ ﻳﻤﻜﻨﻚ ﺗﺼﻐﻴﺮ ﺍﻟﻨﺺ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﻌﻨﺼﺮ
small :
ﻣﺜﺎﻝ :2
<small>This should be in small.</small>
ﺳﻴﻈﻬﺮ ﺑﻬﺬﺍ ﺍﻟﺸﻜﻞ ﻓﻲ ﻣﺘﺼﻔﺤﻚ
This should be in small .
ﻫﻞ ﺃﺳﺘﻄﻴﻊ ﺍﺳﺘﺨﺪﺍﻡ ﻋﺪﺓ ﻋﻨﺎﺻﺮ ﻓﻲ ﻧﻔﺲ ﺍﻟﻮﻗﺖ؟
ﺑﺈﻣﻜﺎﻧﻚ ﺍﺳﺘﺨﺪﺍﻡ ﻋﺪﺓ ﻋﻨﺎﺻﺮﺓ ﺑﺴﻬﻮﻟﺔ ﻓﻲ ﻧﻔﺲ ﺍﻟﻮﻗﺖ، ﻟﻜﻦ ﺗﺠﻨﺐ ﺗﺪﺍﺧﻞ ﺍﻟﻌﻨﺎﺻﺮ . ﻳﻤﻜﻦ ﺗﻮﺿﻴﺢ ﺫﻟﻚ ﺑﻬﺬﺍ ﺍﻟﻤﺜﺎﻝ :
ﻣﺜﺎﻝ :3
ﺇﺫﺍ ﺃﺭﺩﺕ ﺍﻟﺘﺄﻛﻴﺪ ﻋﻠﻰ ﻧﺺ ﺻﻐﻴﺮ ﺍﻟﺤﺠﻢ ﻳﺠﺐ ﺃﻥ ﺗﻔﻌﻞ ﺫﻟﻚ ﺑﻬﺬﻩ ﺍﻟﻄﺮﻳﻘﺔ :
<em><small>Emphasised small text</small></em>
ﻭﻟﻴﺲ ﺑﻬﺬﻩ ﺍﻟﻄﺮﻳﻘﺔ :
<em><small>Emphasise small text</em></small>
ﻭﺟﻪ ﺍﻻﺧﺘﻼﻑ ﻓﻲ ﺍﻟﻤﺜﺎﻝ ﺍﻷﻭﻝ ﻳﻜﻤﻦ ﻓﻲ ﺃﻧﻨﺎ ﺃﻏﻠﻘﻨﺎ ﺃﻭﻻً ﺍﻟﻮﺳﻢ ﺍﻟﺬﻱ ﻗﻤﻨﺎ ﺑﺎﻓﺘﺘﺎﺣﻪ ﺁﺧﺮﺍً، ﺑﻤﻌﻨﻰ ﺁﺧﺮ ﻭﺳﻢ ﺍﻟﺒﺪﺍﻳﺔ ﺍﻷﻭﻝ ﻳﻐﻠﻖ ﺁﺧﺮﺍً، ﻫﻜﺬﺍ ﻻ ﻧﺮﺑﻚ ﺃﻧﻔﺴﻨﺎ ﺃﻭ ﺍﻟﻤﺘﺼﻔﺢ .
ﺍﻟﻤﺰﻳﺪ ﻣﻦ ﺍﻟﻌﻨﺎﺻﺮ !
ﻛﻤﺎ ﺫﻛﺮﻧﺎ ﻓﻲ ﺍﻟﺪﺭﺱ ﺍﻟﺜﺎﻟﺚ ﻫﻨﺎﻙ ﻋﻨﺎﺻﺮ ﺗﺴﺘﺨﺪﻡ ﻭﺳﻢ ﺍﻟﺒﺪﺍﻳﺔ ﻭﻭﺳﻢ ﺍﻹﻏﻼﻕ ﻓﻲ ﻧﻔﺲ ﺍﻟﻮﻗﺖ . ﻫﺬﻩ ﻳﺴﻤﻮﻧﻬﺎ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﻔﺎﺭﻏﺔ ﻭﻫﻲ ﻋﻨﺎﺻﺮ ﻏﻴﺮ ﻣﺮﺗﺒﻄﺔ ﺑﺎﻟﻨﺺ ﺑﺄﻱ ﻃﺮﻳﻘﺔ، ﺑﻞ ﻫﻲ ﻣﻌﺰﻭﻟﺔ، ﻛﻤﺜﺎﻝ ﻟﻤﺜﻞ ﻫﺬﻩ ﺍﻟﻌﻨﺎﺻﺮ ﻫﻨﺎﻙ ﺍﻟﻮﺳﻢ
<br /> ﺍﻟﺬﻱ ﻳﺠﺒﺮ ﺍﻟﻨﺺ ﻋﻠﻰ ﺍﻟﻈﻬﻮﺭ ﻓﻲ ﺳﻄﺮ ﺟﺪﻳﺪ :
ﻣﺜﺎﻝ :4
Some text<br /> and some more text in a new line
ﺳﻴﻈﻬﺮ ﺑﻬﺬﺍ ﺍﻟﺸﻜﻞ ﻓﻲ ﻣﺘﺼﻔﺤﻚ
Some text
and some more text in a new line
ﻻﺣﻆ ﺃﻥ ﺍﻟﻮﺳﻢ ﻛﺘﺐ ﺑﻄﺮﻳﻘﺔ ﻳﺨﺘﺼﺮ ﻓﻴﻬﺎ ﻭﺳﻢ ﺍﻟﺒﺪﺍﻳﺔ ﻭﻭﺳﻢ ﺍﻹﻏﻼﻕ ﺑﻮﺿﻊ ﻣﺴﺎﻓﺔ ﻭﺷﺮﻃﺔ ﺃﻣﺎﻣﻴﺔ ﻓﻲ ﻧﻬﺎﻳﺘﻪ : <br /> .
ﻋﻨﺼﺮ ﺁﺧﺮ ﻣﺸﺎﺑﻪ ﻳﺤﻮﻱ ﻭﺳﻢ ﺍﻟﺒﺪﺍﻳﺔ ﻭﺍﻹﻏﻼﻕ ﻓﻲ ﻧﻔﺲ ﺍﻟﻮﻗﺖ ﻫﻮ <hr /> ﺍﻟﺬﻱ ﻳﺴﺘﺨﺪﻡ ﻓﻲ ﺭﺳﻢ ﺧﻂ ﺃﻓﻘﻲ، ﺣﺮﻓﻲ "hr" ﻳﻌﻨﻴﺎﻥ " horizontal rule :"
ﻣﺜﺎﻝ :5
<hr />
: ﺳﻴﻈﻬﺮ ﺑﻬﺬﺍ ﺍﻟﺸﻜﻞ ﻓﻲ ﻣﺘﺼﻔﺤﻚ
ﻫﻨﺎﻙ ﻋﻨﺎﺻﺮ ﺃﺧﺮﻯ ﺗﺤﺘﺎﺝ ﺇﻟﻰ ﻭﺳﻤﻲ ﺍﻟﺒﺪﺍﻳﺔ ﻭﺍﻹﻏﻼﻕ - ﻛﻤﺎ ﻫﻮ ﺣﺎﻝ ﻣﻌﻈﻢ ﺍﻟﻌﻨﺎﺻﺮ - ﻣﺜﻞ ul ﻭ ol ﻭ li . ﻫﺬﻩ ﺍﻟﻌﻨﺎﺻﺮ ﺗﺴﺘﺨﺪﻡ ﻋﻨﺪﻣﺎ ﺗﺮﻳﺪ ﺇﻧﺸﺎﺀ ﺍﻟﻘﻮﺍﺋﻢ .
ul ﻫﻲ ﺍﺧﺘﺼﺎﺭ " unordered list " ﻭﻫﻮ ﻋﻨﺼﺮ ﻳﻘﻮﻡ ﺑﻮﺿﻊ ﻧﻘﺎﻁ ﻟﻜﻞ ﺑﻨﺪ ﻓﻲ ﺍﻟﻘﺎﺋﻤﺔ، ﺃﻣﺎ ol ﻓﻬﻲ ﺍﺧﺘﺼﺎﺭ " ordered list " ﺃﻭ ﻗﺎﺋﻤﺔ ﻣﺮﺗﺒﺔ ﻓﻬﻮ ﻳﻀﻊ ﺭﻗﻤﺎً ﻟﻜﻞ ﺑﻨﺪ ﻓﻲ ﺍﻟﻘﺎﺋﻤﺔ، ﻭﻟﻜﻲ ﻧﻀﻊ ﺍﻟﺒﻨﻮﺩ ﻓﻲ ﺍﻟﻘﺎﺋﻤﺔ ﻋﻠﻴﻨﺎ ﺃﻥ ﻧﺴﺘﺨﺪﻡ ﺍﻟﻮﺳﻢ li ﺃﻭ " list item " ، ﻫﻞ ﺃﺻﺒﺤﺖ ﺑﺎﻟﺤﻴﺮﺓ، ﺷﺎﻫﺪ ﻫﺬﺍ ﺍﻟﻤﺜﺎﻝ :
ﻣﺜﺎﻝ :7
<ul>
<li>A list item</li>
<li>Another list item</li>
</ul>
ﺳﻴﻈﻬﺮ ﺑﻬﺬﺍ ﺍﻟﺸﻜﻞ ﻓﻲ ﻣﺘﺼﻔﺤﻚ
A list item
Another list item
ﻣﺜﺎﻝ :8
<ol>
<li>First list item</li>
<li>Second list item</li>
</ol>
ﺳﻴﻈﻬﺮ ﺑﻬﺬﺍ ﺍﻟﺸﻜﻞ ﻓﻲ ﻣﺘﺼﻔﺤﻚ
.1 First list item
.2 Second list item
ﻫﻞ ﻫﺬﺍ ﻛﻞ ﺷﻲﺀ؟
ﻧﻌﻢ ﻫﺬﺍ ﻛﻞ ﺷﻲﺀ، ﻭﻣﺮﺓ ﺃﺧﺮﻯ، ﻗﻢ ﺑﻌﻤﻞ ﺗﺠﺎﺭﺏ ﺑﻨﻔﺴﻚ ﻭﺟﺮﺏ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﺴﺒﻌﺔ ﺍﻟﺘﻲ ﺗﻌﻠﻤﺘﻬﺎ ﻓﻲ ﻫﺬﺍ ﺍﻟﺪﺭﺱ :
<strong>Stronger emphasis</strong>
<small>Small text</small>
<br /> Line shift
<hr /> Horizontal line
<ul>List</ul>
<ol>Ordered list</ol>
<li>List item</li>
