الدرس الحادي عشر: المزيد من الجداول

الدرس الحادي عشر: المزيد حول الجداول

عنوان الدرس "المزيد حول الجداول" يبدو مملاً بعض الشيء، لكن أنظر للجانب الإيجابي، إذا تمكنت من إتقان إنشاء الجداول فلن يكون هناك أي شيء في HTML لن تستطيع معرفته واستخدامه.

ماذا بقي إذاً؟

خاصيتان هما colspan وrowspan تستخدمان لإنشاء جداول رائعة ومتقنة.

Colspan هي اختصار "column span"، Colspan تستخدم في الوسم <td> لتحدد عدد الأعمدة التي ستتمدد لها الخلية:

مثال 1:

<table border="1">
 <tr>
   <td colspan="3">Cell 1</td>
 </tr>
 <tr>
   <td>خلية 2</td>
   <td>خلية 3</td>
   <td>خلية 4</td>
 </tr>
</table>

سيظهر بهذا الشكل في متصفحك

خلية 1
خلية 2	خلية 3	خلية 4

بتحديد colspan بالقيمة "3" قامت الخلية في الصف الأول بالتمدد لثلاثة أعمدة، ولو قمنا بوضع "2" لقيمة colspan ستتمدد لعمودين اثنين، وسيتعين علينا إضافة خلية أخرى للصف الأول حتى تصبح الأعمدة متساوية

مثال 2:

<table border="1">
 <tr>
   <td colspan="2">خلية 1</td>
   <td>خلية 2</td>
 </tr>
 <tr>
   <td>خلية 3</td>
   <td>خلية 4</td>
   <td>خلية 5</td>
 </tr>
</table>

سيظهر بهذا الشكل في متصفحك

خلية 1		خلية 2
خلية 3	خلية 4	خلية 5

ما هي خاصية rowspan؟

كما ربما خمنت، rowspan تحدد عدد الصفوف التي ستقوم الخلية بالتمدد فوقها:

مثال 3:

<table border="1">
 <tr>
   <td rowspan="3">خلية 1</td>
   <td>خلية 2</td>
 </tr>
 <tr>
   <td>خلية 3</td>
 </tr>
 <tr>
   <td>خلية 4</td>
 </tr>
</table>

سيظهر بهذا الشكل في متصفحك

خلية 1	خلية 2
	خلية 3
	خلية 4

في المثال أعلاه أعطينا الخاصية rowspan القيمة "3" للخلية 1، هذا يعني أن الخلية يجب أن تتمدد فوق ثلاث صفوف، الصف الذي تقع فيه الخلية مع صفين آخرين أسفلها، الخلية 1 والخلية2 التان تقعان في نفس الصف، بينما الخلية 3 والخلية أربع تشكلان صفين منفصلين.

هل تشعر بالحيرة؟ حسناً، الأمر ليس معقداً لكن من السهل أن تضيع في التفاصيل في بعض الأحيان، لذلك من الأفضل أن ترسم الجدول أولاً على الورق قبل أن تطبقه على HTML.

ربما لا تشعر بالحيرة، إذا قم بإنشاء جدولين واستخدام كل من colspan وrowspan بنفسك.

الدرس العاشر: الجداول

الجداول تستخدم لعرض بيانات مجدولة مثل المعلومات التي تعرض بشكل منطقي من خلال أعمدة وصفوف.

هل هي صعبة؟

إنشاء الجداول في HTML قد يكون في البداية معقداً، لكن إذا بقيت هادئاً وراقبت ما تقوم به جيداً سترى أن الجداول بسيطة ومنطقية، تماماً كما هو كل شيء في HTML.

مثال 1:

<table>
 <tr>
   <td>خلية 1</td>
   <td>خلية 2</td>
 </tr>
 <tr>
   <td>خلية 3</td>
   <td>خلية 4</td>
 </tr>
</table>

سيظهر بهذا الشكل في متصفحك

خلية 1	خلية 2
خلية 3	خلية 4

ما الفرق بين <tr> و<td>؟

كما ترى في المثال أعلاه، هذا هو أكثر أمثلة HTML تعقيداً قمنا بعرضه في هذا الدرس حتى الآن، لنقم بتفكيك المثال وشرح كل وسم:

هناك ثلاث عناصر تستخدم لإنشاء أي جدول:

• وسم البداية <table> ووسم الإغلاق </table> يبدأ من بينهما الجدول وينتهي، منطقي.


• <tr> تعني "table row" وهي العنصر الذي تبدأ من خلاله الصفوف وتنتهي، لا زال الأمر منطقياً.


• <td> هي اختصار "table data". هذا الوسم يبدأ وينهي كل خلية في صفوف الجدول، كل هذا بسيط ومنطقي.

هذا ما يحدث في المثال الأول، الجدول يبدأ بوسم <table>، يتبعه وسم <tr> الذي يدل على بداية صف جديد، وهناك خليتان في هذا السطر: <td>خلية 1</td> و<td>خلية 2</td>، ثم نغلق الصف بوسم الإغلاق </tr> ونبدأ آخر <tr> الذي يحوي أيضاً خليتين، ثم نغلق الجدول </table>.

فقط لنوضح الأمر أكثر: الصفوف تظهر بشكل خط أفقي من الخلايا، والأعمدة على شكل خط رأسي من الخلايا:

خلية 1	خلية 2
خلية 3	خلية 4

خلية 1و خلية 2 تشكلان صفاً، خلية 1 وخلية 3 تشكلان عموداً

في المثال أعلاه الحدول يحوي صفين وعمودين، ويمكن للجدول أن يحوي عدداً لا نهائياً من الصفوف والأعمدة.

مثال 2:

<table>
 <tr>
   <td>خلية 1</td>
   <td>خلية 2</td>
   <td>خلية 3</td>
   <td>خلية 4</td>
 </tr>
 <tr>
   <td>خلية 5</td>
   <td>خلية 6</td>
   <td>خلية 7</td>
   <td>خلية 8</td>
 </tr>
 <tr>
   <td>خلية 9</td>
   <td>خلية 10</td>
   <td>خلية 11</td>
   <td>خلية 12</td>
 </tr>
</table>

سيظهر بهذا الشكل في متصفحك

خلية 1	خلية 2	خلية 3	خلية 4
خلية 5	خلية 6	خلية 7	خلية 8
خلية 9	خلية 10	خلية 11	خلية 12

هل هناك أية خصائص للجداول؟

بالطبع هناك خصائص للجداول، هناك مثلاً خاصية الإطار التي تستخدم لتحديد سمك الإطار حول الجدول:

مثال 3:

<table border="1">
 <tr>
   <td>خلية 1</td>
   <td>خلية 2</td>
 </tr>
 <tr>
   <td>خلية 3</td>
   <td>خلية 4</td>
 </tr>
</table>

سيظهر بهذا الشكل في متصفحك

خلية 1	خلية 2
خلية 3	خلية 4

سمك إطار الجدول يحدد بمقياس البكسل (انظر الدرس التاسع)

وكما هو الحال مع الصور، يمكنك أن تحدد عرض الجدول بالكبسل أو بالنسبة المؤية لمقياس الشاشة:

مثال 4:

<table border="1" width="30%">

هذا المثال سيعرض في المتصفح جدولاً بعرض 30% من مقياس الشاشة، جرب ذلك بنفسك.

المزيد من الخصائص

هناك خصائص كثيرة للجداول، هذان اثنان منها:

• align: يحدد المحاذاة لمحتويات الجدول، أو الصف أو في الخلية، فمثلاً يمكن محاذاة النص إلى اليمين أو اليسار أو في المنتصف.


• يحدد المحاذاة الرأسية لمحتويات الخلية، فيمكن محاذاة النص في الأعلى أو الأسفل أو المنتصف.

مثال 5:

<td align="right" valign="top">Cell 1</td>

ماذا يمكن أن أضع في الجداول؟

نظرياً يمكن أن تضع أي شيء في الجداول، النصوص والصور والروابط، لكن الجداول مخصصة لعرض البيانات مجدولة،، لذلك لا تستخدمها لوضع أي شيء لأنك تريد ببساطة أن تجعل الأشياء تظهر بجانب بعضها البعض،.

قبل سنوات معدودة كانت الجداول تستخدم غالباً كأداة للتصميم، لكن إذا أردت أن تتحكم بطريقة عرض النصوص والجداول هناك طريقة أفضل بكثير (تلميح: CSS) لكن هذا سنناقشه لاحقاً.

الآن قم بتطبيق ما تعلمته وصمم عدداً من الجداول بمختلف القياسات ومختلف الخصائص والمحتويات، هذا يمكن أن يبقيك مشغولاً لساعات.

الدرس التاسع: الصور

ألن يكون رائعاً إذا تمكنت من وضع صورة المغني والممثل الشهير ديفيد هاسلهوف في منتصف صفحتك؟

هذا يبدو كتحد...

ربما، لكن في الحقيقة يمكن فعل ذلك بسهولة، كل ما تحتاجه هو عنصر واحد:

مثال 1:

<img src="david.jpg" alt="David" />

ستظهر بهذا الشكل في متصفحك:

كل ما تحتاج أن تفعله هو إخبار المتصفح بأنك تريد وضع صورة، (img) وموقعها (src, هو اختصار "source")، هل فهمت ذلك؟

لاحظ كيف أن عنصر img هو في نفسه وسم البداية والإغلاق، مثل <br /> لا يرتبط بنص معين.

"david.jpg" هو اسم ملف الصورة الذي تريد وضعها في صفحتك، و".jpg" هو نوع ملف الصورة، تماماً مثل اللاحقة ".htm" تزظهر أن الملف هو وثيقة HTML، ".jpg" تخبر المتصفح أن الملف هو صورة، هناك أنواع مختلفة من ملفات الصور التي يمكنك إضافتها لصفحتك:

• GIF (Graphics Interchange Format)


• JPG / JPEG (Joint Photographic Experts Group)


• PNG (Portable Network Graphics)

صور GIF تستخدم عادة للرسومات، أما JPEG فتستخدم للصور الفوتوغرافية،هذا لسببين، الأول صور GIF يمكنها أن تحوي فقط 256 لوناً، بينما JPEG يمكنها أن تحوي ملايين الألوان، والسبب الثاني هو أن GIF هي صيغة ملف أفضل لضغط الصور البسيطة أما JPEG فهي أفضل للصور المعقدة التي تحوي تفاصيل كثيرة، وكلما زاد ضغط الصورة صغر حجمها، وهذا يعني أن صفحتك ستظهر بسرعة أكبر، وربما تعرف من خبرتك في المواقع أن الصفحات الثقيلة يمكنها أن تكون بطيئة بشكل كبير لدرجة تزعج الزائر.

في الماضي كانتا صيغة الصورة GIF وJPEG الأكثر استخداماً في صفحات المواقع، مؤخراً صيغة الصور PNG بدأت تكتسب شهرة أكثر وأكثر على حساب صيغة GIF، صيغة PNG تحوي عدة طرق تجمع بين مميزات GIF وJPEG، حيث يمكنها أن تحوي ملايين الصور وتقوم بضغطها بشكل فعال.

من أين آتي بالصور؟

إذا أردت أن تقوم بإنشاء صورك الخاصة فأنت بحاجة إلى برنامج محرر صور، محرر الصور هو أحد أهم الأدوات التي تحتاجها لإنشاء مواقع جميلة.

للأسف ليس هناك محرر صور يأتي مع نظام ويندوز أو مع أنظمة التشغيل الأخرى، لذلك عليك أن تشتري برنامج باينت شوب برو أو فوتوشوب أو مايكروميديا فايروركس، وهي أفضل محررات الصور في السوق.

عموماً، كما قلنا سابقاً، ليس من الضروري أن تشتري برامج غالية السعر لإنجاز هذا الدرس، الآن يمكنك إنزال برنامج جيد لتحرير الصور يسمى IfranView وهو برنامج مجاني ولا يكلف شيئاً.

أو يمكنك إنزال الصور من مواقع مختلفة، لكن احذر من مخالفة قوانين حقوق النشر، مع ذلك، من المفيد أن تعرف كيف تقوم بإنزال الصور:

1. إضغط بالزر الأيمن على أي صورة في أي موقع.


2. اختر "Save picture as..." في القائمة التي ستظهر لك.


3. اختر مكان حفظ الصورة في حاسوبك واضغط على "Save".

إفعل هذا للصورة أدناه، قم بحفظها في حاسوبك في نفس مكان ملفات HTML التي قمت بإنشاءها، لاحظ أن الشعار حفظ بصيغة PNG:

الآن يمكنك وضع الصورة في إحدة صفحاتك، جرب بنفسك.

هل هذا كل ما أحتاجه لمعرفته حول الصور؟

هناك أشياء أخرى يجب أن تعرفها حول الصور، أولاً يمكنك أن تقوم بإضافة صورة من مجلد آخر أو حتى من موقع آخر:

مثال 2:

<img src="images/logo.png" />

مثال 3:

<img src="http://www.ar.html.net/tutorials/html/logo.png" />

ثانياً، يمكن للصور أن تكون روابط:

مثال 4:

<a href="http://www.html.net">
<img src="logo.png" /></a>

ستظهر في المتصفح بهذا الشكل (جرب أن تضغط على الصورة):

هل هناك أية خصائص يجب أن أعرفها؟

عندما تريد وضع صورة فأنت تحتاج خاصية src التي تخبر المتصفح عن مكان الصور، بجانب ذلك هناك عدد من الخصائص التي يمكن أن تكون مفيدة عند إضافة الصور

خاصية alt تستخدم لتعطي وصفاً بديلاً للصورة إذا لم تظهر الصورة لأي سبب سيرى المستخدم نصاً بديلاً يشرح محتويات الصورة، هذه الخاصية مهمة خصوصاً لمن يعاني من أي إعاقة بصرية، وهي كذلك مفيدة في حال لم تظهر الصور بسرعة كافية، لذلك استخدم دائماً خاصية alt:

مثال 5:

<img src="logo.gif" alt="HTML.net logo" />

بعض المتصفحات تعرض النص البديل في مربع صغير يظهر للمستخدم عندما يضع مؤشر الفأرة على الصورة، لاحظ عند استخدام خاصية alt الهدف هو تقديم نص بديل يصف الصور، خاصية alt يجب ألا تستخدم لعرض الرسائل خاصة للمستخدم لأن الذين يعانون من الإعاقة البصرية سيسمعون النص البديل بدون أن يفهموا معناه أو يدركوا محتوى الصورة.

الخاصية title يمكن استخدامها لتقديم معلومات إضافية للصورة:

مثال 6:

<img src="logo.gif" title="Learn HTML from HTML.net" />

سيظهر بهذا الشكل في متصفحك

إذا وضعت مؤشر الفأرة بدون أن تنقر على الصورة سترى النص "Learn HTML from HTML.net" يظهر لك في مربع صغير.

هناك خاصيتان مهمتان وهما width وheight:

مثال 7:

<img src="logo.png" width="141" height="32" />

سيظهر بهذا الشكل في متصفحك

الخاصية width وheight يمكن استخدامها لتحديد طول وعرض الصورة، القيمة التي توضع للطول والعرض تقاس بالبكسل، والبكسل هو وحدة قياس دقة الشاشة، معظم الشاشات لها دقة 1024×768، وعلى عكس مقياس السنتميتر، البكسل يختلف حجمه بحسب دقة الشاشة، فمستخدم لديه شاشة ذات دقة عالية قد يكون السنتميتر يساوي في شاشته 25 بكسل، لكن في شاشة أخرى قد تساوي 1.5 سنتميتر.

إذا لم تضع مقياساً للعرض والطول فالصورة ستوضع بمقياسها، لكن بالخاصيتين يمكن التلاعب بحجم الصورة:

مثال 8:

<img src="logo.gif" width="32" height="32" />

سيظهر بهذا الشكل في متصفحك

عموماً، انتبه إلى أن حجم الصورة بالكيلوبايت سيبقى كما هو وستأخذ الصورة نفس الوقت لتظهر للمستخدم حتى لو كانت صغيرة الحجم من ناحية المظهر، لذلك عليك ألا تصغر مقياس صورة باستخدام خاصيتي الطول والعرض، بدلاً من ذلك قم بتصغير الصور من خلال برنامج محرر صور لكي تجعلها أصغر حجماً

مع ذلك، تظل فكرة جيدة أن تستخدم خاصيتي الطول والعرض لأن المتصفحات تستطيع أن تعرف كم مساحة الصورة التي يجب أن تظهر في الصفحة فتسرع بذلك ظهور الصفحة للمستخدم.

يكفينا الآن ما رأيناه من صور ديفيد هاسلهوف.

الدرس الثامن: الروابط

في هذا الدرس ستتعلم كيف تقوم بإنشاء رابط بين صفحتين.

ما الذي أحتاجه لإنشاء رابط؟

لإنشاء رابط ستستخدم ما تستخدمه دائماً عندم كتابة HTML: عنصر، عنصر بسيط مع خاصية واحدة وستتمكن من إنشاء رابط لأي شيء وكل شيء، إليك هذا المثال لرابط لموقع HTML.net وكيف سيكون شكله:

مثال 1:

<a href="http://www.html.net/">Here is a link to HTML.net</a>

سيظهر في المتصفح بهذا الشكل:

Here is a link to HTML.net

العنصر a هو اختصار "anchor" والخاصية href هي اختصار "hypertext reference"، وهي التي تحدد إلى أين سيذهب الرابط، غالباً عنوان في الإنترنت أو اسم ملف ما.

في المثال أعلاه الخاصية href تحوي القيمة "http://www.html.net"، وهي العنوان الكامل لموقع HTML.net ويسمى العنوان URL وهي اختصار "Uniform Resource Locator"، لاحظ أن "http://" يجب أن تضاف في أي عنوان، أما الجملة "Here is a link to HTML.net" فهي النص الذي سيظهر في المتصفح على شكل رابط، تذكر أن تقوم بإغلاق العنصر بوسم الإعلاق </a>.

ماذا عن الروابط بين الصفحات في موقعي؟

إذا أردت إنشاء رابط بين صفحتين في نفس الموقع فلا تحتاج إلى أن تضع كامل العنوان للصفحة، فمثلاً إذا قمت بإنشاء صفحتين ولنسمهما page1.htm وpage2.htm وقمت بحفظهما في نفس المجلد فيمكنك أن تربط من صفحة إلى أخرى بكتابة اسم الملف في الرابط، فمثلاً رابط من صفحة page1.htm يشير إلى page2.htm سيظهر بهذا الشكل:

مثال 2:

<a href="page2.htm">Click here to go to page 2</a>

إذا كانت الصفحة 2 وضعت في مجلد فرعي ولنسمه "subfolder" فالرابط سيظهر بهذا الشكل:

مثال 3:

<a href="subfolder/page2.htm">Click here to go to page 2</a>

لو أردنا أن نضع رابطاً معاكساً من الصفحة 2 في المجلد الفرعي إلى الصفحة 1 سيكون شكل الرابط هكذا:

مثال 4:

<a href="../page1.htm">A link to page 1</a>

">"../../".

هل فهمت هذا النظام؟ بإمكانك دائماً أن تكتب العنوان الكامل للملف إذا وجدت هذا النظام معقداً.

ماذا عن الروابط الداخلية في نفس الصفحة؟

بإمكانك إنشاء روابط داخلية ضمن الصفحة، فمثلاً يمكنك إنشاء جدول بالمحتويات اعلى الصفحة ويحوي روابط تشير إلى كل فصل في الصفحة، كل ما تحتاجه هي خاصية تسمى id أو "identification" والعلامة "#".

استخدم خاصية id لتضع إشارة للعنصر الذي تريد وضع رابط له، مثال:

<h1 id="heading1">heading 1</h1>

بإمكانك الآن إنشاء رابط لهذا العنصر باستخدام علامة "#" في خاصية الرابط، العلامة "#" يجب أن تتبع بقيمة id للعنصر الذي تريد الربط له، مثال:

<a href="#heading1">Link to heading 1</a>

كل هذا سيتضح مع هذا المثال:

مثال 5:

<html>

<head>
</head>

<body>

 <p><a href="#heading1">Link to heading 1</a></p>
 <p><a href="#heading2">Link to heading 2</a></p>

 <h1 id="heading1">heading 1</h1>
 <p>Text text text text</p>

 <h1 id="heading2">heading 2</h1>
 <p>Text text text text</p>

</body>

</html>

سيظهر بهذا الشكل في المتصفح (جرب أن تضغط على الرابطين):

Link to heading 1

Link to heading 2

Heading 1

Text text text text

Heading 2

Text text text text

ملاحظة: قيمة الخاصية id يجب أن تبدأ بحرف وليس برقم.

هل يمكن أن أضع رابطاً لأي شيء آخر؟

بإمكانك أيضاً أن تضع روابط لعناوين بريد إلكتروني، يمكنك فعل ذلك بطريقة مشابهة لطريقة وضع رابط لصفحة أخرى:

مثال 6:

<a href="mailto:nobody@html.net">Send an e-mail to nobody at HTML.net</a>

سيظهر بهذا الشكل في متصفحك

Send an e-mail to nobody at HTML.net

الاختلاف الوحيد بين الرابط لبريد إلكتروني ورابط لملف هو كتابة mailto: متبوعاً بعنوان البريد، عندما يضغط أحدهم على الرابط سيعمل برنامج البريد الإلكتروني ويعرض رسالة جديدة فارغة تحوي عنوان البريد الإلكتروني الذي وضعته في الرابط، سيحدث هذا في حال وجد برنامج بريد إلكتروني مثبت على الحاسوب، جرب ذلك الآن!

هل هناك خصائص أخرى يجب علي أن أعرفها؟

لإنشاء رابط استخدام دائماً الخاصية href بالإضافة إلى ذلك بإمكانك أن تضع خاصية title للرابط:

مثال 7:

<a href="http://www.html.net/" title="Visit HTML.net and learn HTML">HTML.net</a>

سيظهر بهذا الشكل في المتصفح:

HTML.net

خاصية title تستخدم لوضع شرح قصير عن الرابط، إذا وضعت مؤشر الفأرة على الرابط دون أن تضغط عليه سترى النص الذي كتبته في خاصية title يظهر لك.

الدرس السابع: الخصائص

هناك خصائص يمكنك أن تستخدمها لمعظم العناصر

ما هي الخاصية؟

أنت تتذكر أن العناصر تعطي هيكلية لصفحة HTML وتخبر المتصفح كيف تريد لموقعك أن يظهر، كمثال <br /> تخبر المتصفح أن يقوم بنقل ما بعدها من نص إلى سطر جديد، في بعض العناصر يمكنك أن تضيف المزيد من المعلومات، هذه المعلومات تسمى خصائص.

مثال 1:

<h2 style="background-color:#ff0000;">My friendship with HTML</h2>

الخصائص تكتب دائماً بنفس الطريقة، فهي تبدأ باسم الخاصية ثم يتبعها علامة يساوي "=" ثم قيمة الخاصية، الفاصلة المنقوطة في المثال تستخدم فقط في خاصية "style" ووظيفتها الفصل بين أوامر مختلفة، سنتحدث عن ذلك في وقت لاحق.

هناك خصائص كثيرة ومختلفة، سنتعلم أولاً واحدة منها وهي style، والتي يمكن استخدامها لإضافة تصميم لموقعك. فمثلاً يمكن إضافة لون خلفي للصفحة:

مثال 2:

<html>

<head>
</head>

<body style="background-color:#ff0000;">
</body>

</html>

هذه الخاصية ستجعل لون الصفحة أحمرا، انظر بنفسك، سنشرح أكثر عن الألوان في وقت لاحق.

لاحظ أن كتابة الوسوم والخصائص يجب أن تكون بالتهجأة الأمريكية، (مثال: color بدلاً من colour)، من المهم أن تكون منتبهاً عند كتابتك للأوامر وتستخدم نفس التهجأة التي تراها في الأمثلة وإلا فلن يعرض المتصفح صفحاتك بطريقة صحيحة.

كيف أصبحت الصفحة حمراء؟

في المثال أعلاه وضعنا قيمة "#ff0000" للون خلفية الصفحة، هذا الرقم يشير إلى اللون الأحمر، وهو يعتمد نظام عد سداسي عشر، ويسمى بالإنجليزية HEX، كل لون له رقم خاص وهذه بعض الأمثلة:

أبيض: #ffffff

أسود: #000000

أحمر: #ff0000

أزرق: #0000ff

أخضر: #00ff00

أصفر: #ffff00

نظام أرقام الألوان يأتي بشكل واحد، فهو يبدأ بعلامة # ثم ستة أرقام أو أحرف، هناك أكثر من ألف رقم للألوان وليس من السهل تذكر إلى أي لون يشير أي رقم، ولكي نبسط الأمر عليك، قمنا بعمل ملف يحوي 216 لون وهي من أكثر الألوان استعمالاً: 216 لون.

بإمكانك أيضاً استخدام أسماء الألوان باللغة الإنجليزية للألوان المعروفة مثل الأبيض والأسود والأحمر والأزرق والأصفر.

مثال 3:

<body style="background-color: red;">

نكتفي بهذا القدر حول الألوان لنعد إلى الخصائص.

أي العناصر تستطيع استخدام الخصائص؟

مجموعة مختلفة من الخصائص يمكن استخدامها لمعظم العناصر.

الخصائص تستخدم غالباً في الوسوم مثل body لكن ليس في وسوم أخرى مثل br، لأن وضع النص في سطر جديد لا يتطلب خصائص إضافية.

وكما هناك الكثير من العناصر فهناك أيضاً الكثير من الخصائص، بعض الخصائص صممت لتستخدم لعنصر محدد وبعضها الآخر يمكن استخدامها لعناصر مختلفة، وبعض العناصر يمكنه أن يحوي خصائص كثيرة بينما بعضها الآخر لا يمكنه سوى أن يحوي خاصية واحدة.

قد يبدو الأمر مثيراً للحيرة الآن، لكن ما أن تعتاد على التعامل مع الخصائص المختلفة لتجد أنها منطقية وسترى كم هي سهلة عند استخدامها.

هذا الدرس سيعرض عليك أهم الخصائص.

ما هي مكونات العناصر؟

بشكل عام العناصر تتكون من وسم بداية تحوي خاصية أو أكثر أو قد لا تحوي أي خاصية، ثم هناك بعض المحتويات ثم وسم الإغلاق، هذه ببساطة هي مكونات العناصر، انظر إلى الشكل التوضيحي.

الدرس السادس: بعض العناصر

الدرس السادس: المزيد من العناصر

هل قمت بإنشا المزيد من الصفحات بنفسك؟ إن لم تفعل فإليك هذا المثال:

<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>

الدرس الخامس: ماذا تعلمنا؟

إبدأ دائماً بالقالب الذي قمنا بإنشاءه في الدرس السابق:

<html>
<head>
<title></title>
</head>

<body>
</body>

</html>

في قسم رأس الصفحة اكتب دائماً العنوان: <title>عنوان صفحتك</title>. لاحظ كيف سيظهر العنوان في أعلى يسار نافذة المتصفح:

العنوان بشكل خاص مهم لأنه يستخدم في محركات البحث - مثل غوغل - لأرشفة موقعك وإظهاره في نتائج البحث.

في جسم الصفحة اكتب محتويات صفحتك، وأنت تعرف الآن بعض أهم العناصر:

<p>Is used for paragraphs.</p>
<em>Emphasis text.</b>
<h1>Heading</h1>
<h2>Subhead</h2>
<h3>Sub-subhead</h3>

تذكر أن الطريقة الوحيد لتعلم HTML هي بالتجربة والخطأ، لكن لا تقلق، لا يمكنك بأي طريقة أن تدمر حاسوبك أو الإنترنت! لذلك استمر في التجربة، هذه هي أفضل طريقة لاكتساب الخبرة.

ماذا يعني هذا؟

لا أحد يتقن تطوير المواقع بتعلم الأمثلة فقط في هذا الدرس، فهذا الدرس هو مجرد بداية بسيطة لفهم مكونات المواقع، ولكي تقوم بإنشاء موقع جيد عليك أن تستخدم المكونات بأسلوب جديد وإبداعي.

لذلك قم بتجربة ما تعلمته حتى الآن.

ما التالي؟

جرب إنشاء صفحات أخرى بنفسك، قم بإنشاء صفحة تحوي عنواناً للصفحة وعناوين فرعية مع بعض النصوص، جرب أن تفعل ذلك بدون الرجوع إلى هذ االدرس.