تصميم مواقع الانترنت بxhtml

web design with xhtml

تصميم مواقع الانترنت بxhtml، المؤثرات المساعدة على تنظيم الوثيقة، مؤثرات الروابط والقوائم والجداول، والواصفات الخاصة بها لتعديلها.


تصميم مواقع الانترنت بxhtml؛ أمر سهل، ويطلبه الكثير، وسنتابع في مقالنا هذا (الدرس الرابع)؛ كورس تصميم المواقع الذي بدأت به بمقالاتي السابقة، وصولاً إلى تصميم موقع ويب كامل.


مراجعة تصميم مواقع الانترنت بxhtml

كمراجعة بسيطة؛ فقد ذكرت في المقالات السابقة تعريفات هامة تتعلق بالمواقع، ثم ذكرت الشكل الأساسي لبعض المؤثرات، ومنها (مؤثرات البنية المعيارية، كسر السطر، الترويسات، الخطوط، أخيرًا الصور)، وسأذكر في هذا الدرس مؤثرات أخرى.


(الروابط Hypertext Links) بهدف تصميم موقع ويب كامل

الرابط هو اتجاه إلى مورد آخر، وهذا المورد قد يكون وثيقة ما على الويب، أو مكان معين ضمنها، أو مكان معين ضمن الوثيقة ذاتها، ويحتاج الرابط إلى المؤثر <a> الذي يحدد حدوث الارتباط، مع العلم أن هذا المؤثر يمتلك واصفة هي href، ومهمتها تحديد العنوان الهدف، كما أن الرابط يمكن أن يكون صورة أو عنوان أو محتوى نصي.

رابط وثيقة أخرى

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

<a href = “programming sites.html”>

أما عند الضغط على النص programming sites.html سوف يفتح الملف الحاوي على الوثيقة الهدف. وقد يكون الهدف مكان معين بالوثيقة، وليس بدايتها، هنا يجب أن يحدد هذا المكان.

إعطاء معرف هدف

لإعطاء معرف هدف نضع الواصفة id، وتستخدم بعدة أشكال:

  • مثلاً إذا منحنا الترويسة معرف كالتالي:

<h2 id = “Websites”> Websites </h2>

عندها من الممكن أن نستخدم هذا المعرف؛ في الرابط كالتالي: (ولكن نسبقه بمحرف #)

<a href = “#Websites”>What about websites </a>

  • بينما إذا كان المعرف في وثيقة أخرى، على المستخدم كتابة اسم الوثيقة، كما في المثال التالي:

 <a href = “programming sites.html#Websites”> Websites </a>

  • أما إذا كان الرابط صورة فيمكن أن تتم كما في المثال التالي:

<a href = “programming sites.html”>

<img src = “Websites.png” alt = ” code image ” />

إن التجهيز المسبق للعمل البرمجي، يستدعي تجهيز عناصر خطة العمل للمشروع، علمًا أن الفهم الجيد للروابط يزيد المشروع قوة.

اقرأ أيضًا: تصميم موقع بلغة xhtml


(القوائم) في تصميم المواقع

تتوفر في xhtml قوائم مرتبة وقوائم غير مرتبة وقوائم التعريف

القوائم المرتبة

نستخدم المؤثر <ol> من أجل تعريف القوائم المرتبة، مع العلم أنها ترتب بشكل متسلسل، وبصورة تلقائية، بالإضافة إلى ذلك نستخدم المؤثر <li> لكل عنصر بالقائمة، كما يتوضح في هذا المثال:

<body> كلمات انتقالية تدعم جودة المقالات < pr />

كلمة واحدة

<ol> <li> أيضا </ li>

<li>كذلك </ li>

<li> ولكن </ li>

</ ol>

أكثر من كلمة

<ol> <li> بالإضافة إلى </ li>

<li> على وجه الخصوص </ li>

<li> بصورة شاملة </ li>

</ ol> </body>

أما التنفيذ فيكون على الشكل التالي:

طريقة كتابة القوائم المرتبة
القوائم المرتبة

القوائم غير المرتبة

في الحقيقة نستخدم المؤثر <ul> لمحتوى القائمة، كذلك المؤثر <li> لكل عنصر من عناصرها، كما في المثال التالي:

<body>

<ul><li> كورس تصميم المواقع الأول </li>

<li>الكورس الثاني </li>

<li>  الثالث</li>

</ul></body>

أما التنفيذ على المتصفح فيكون على الشكل التالي:

القوائم بالتعداد النقطي
القوائم غير المرتبة

قوائم التعريف

على وجه الخصوص نستخدم القوائم لذكر مجموعة من التعاريف، باستخدام المؤثر <dl>، حيث نستخدم المؤثر<dt> لعنوان التعريف، والمؤثر <dd> لمحتوى التعريف، كما في المثال التالي:

<body>

<dl><dt> html</dt>

<dd> Hypertext Markup Language </dd>

<dt>xhtml</dt>

<dd> eXtensible Hypertext Markup Language </dd>

</dl></body>

وتظهر على المتصفح بالشكل التالي:

أكواد قوائم التعريف
قوائم التعريف

اقرأ أيضًا: أفضل 10 تطبيقات تعليم الأطفال البرمجة بسهولة ومتعة


الجداول

يتكون الجدول من مصفوفة خلايا، في كل منها محتوى معين.

مؤثرات الجدول الأساسية من أجل تصميم مواقع الانترنت ب xhtml

بالطبع مؤثر الجدول هو <table>، وله الواصفة border، حيث يمكن أن يحدد عرض الحدود الخاصة بالجدول؛ بوضع رقم عند الواصفة هذه، أما إذا أراد المستخدم وضع القيمة الافتراضية؛ فعليه أن يضع القيمة “border” ضمن الواصفة، بينما إذا لم توضع هذه الواصفة فإن الجدول يكون بلا حدود. بعد ذلك نكتب المؤثر <caption> ويكتب بعده عنوان الجدول، كذلك يعرف السطر بالمؤثر <tr>، والخلية بالمؤثر <td>، ولكن إذا أراد المستخدم وضع عنوان للخلية؛ عليه استخدام المؤثر <th>، على سبيل المثال تظهر هذه المؤثرات بالجدول التالي:

<body> <table border = “border”> <caption> سجل الدرجات </caption> <tr> <th> </th>

<th>  الرياضيات </th>

<th>  المعلوماتية </th>

<th> علم الأحياء </th></tr>

<tr> <th>  العلامة الكاملة </ th>

<td> 600 </td> <td>200 </td> <td>400 </td> </tr>

<tr > <th> حد النجاح </ th>

<td> 240 </td> <td> 80 </td> <td> 180 </td> </tr> <tr> <th> حد الرسوب </th> <td > 239 </td> <td> 79 </td> <td> 179 </td> </tr> </table> </body>

بينما تنفذ التعليمات على المتصفح كما يلي:

تصميم مواقع الانترنت بxhtml
جدول عادي

دمج الخلايا

بالطبع يمكن دمج عدة خلايا أعمدة بالواصفة colspan، وخلايا الصفوف بالواصفة rowspan، ولتوضيحهما سنضيفهما إلى أكواد الجدول السابق:

<body> <table border = “border”> <tr> <td rowspan = “2”> </td> <th colspan “3”> سجل الدرجات </ th>

<tr> <th> الرياضيات </ th >

<th> المعلوماتية </th>

<th>علم الأحياء </th> </tr>

<tr> <th> العلامة الكاملة</ th>

<td> 600 </td> <td> 200 </td> <td > 400 </td> </tr> </table> </body>

بينما يكون التنفيذ على المتصفح كما يلي:

كورس تصميم المواقع
الجدول بعد دمج الخلايا

المحاذاة في الجداول

في الحقيقة نستخدم الواصفة align، من أجل المحاذاة الأفقية، بالقيم left, right, center، ضمن المؤثرات <th><td><tr>، بينما نستخدم الواصفة valign للمحاذاة العمودية، بالقيم top, bottom, center، ضمن المؤثرين <td><th>، على سبيل المثال تظهر تأثيرات هذه الواصفات من خلال المثال التالي:

<body> <table border “border”> <caption> واصفات المحاذاة </caption>

<tr align  = “center”>

<th></th>

<th>وسم العمود </th><th>  وسم ثاني</th>

<th> وسم ثالث </th> </tr>

<tr> <th> align </th>

<td align = “left”> Left </td>

<td align = “center”> Center </td> <td align = “right”> Right </td </tr>

<tr><th> <br /> align <br /> <br /> </th>

<td> Default </td>

<td valign =”top”> Top</td>

 <td valign = “bottom”> Bottom </td></tr>

</table> </body>

أما التنفيذ فيكون بالشكل التالي:

الجداول في xhtml
المحاذاة في الجداول

التباعد

الواصفة cellspacing تباعد الخلايا عن بعضها البعض، وتظهر في المؤثر table، بينما تحدد الواصفة cellpading بعد المحتوى؛ في الخلية الواحدة عن حدودها، على سبيل المثال سأبينهما من خلال التالي:

<body>  <b>الجدول الأول(space = 10, pad = 30) </b><br /> <table border = “5” cellspacing = “10” cellpadding = “30”>

<tr><td> small space</td><td>big pading</td></tr></table>

<br /><br />

<b> الجدول الثاني(spsce =”30″ pad =10)</b><br />

<table border = “5” cellspacing = “30” cellpadding = “10”>

<tr><td>big space</td><td>small pading</td></tr></table>

نتويه: المؤثرات بلغة xhtml لا تكتب بcpaital letters

اقرأ أيضًا: عطل فني في مواقع التواصل


في نهاية المطاف؛ نكون قد نفذنا الروابط والجداول والقوائم؛ في كورس تصميم المواقع هذا، ليطبق المبتدئ تعليمات تصميم مواقع الإنترنت بxhtml، حتى يتمكن من تصميم موقع ويب كامل.

فهرس على قوقل نيوز

تابعنا الأن