تنظيم المحتوى

يمكنك تنظيم المحتوى في لغة HTML في عدة أشكال، يمكنك مثلا وضعه في صورة قائمة مرتبة، أو في صورة شجرة (مخطط هرمي) وأهم أنواع تنظيم المحتوى هي الجداول.

يمكنك عمل القائم المرتبه باستخدام الوسم ol والغير مرتبة ul بحيث توضع البنود بينهما وكل بند يحدد بالوسم li، ويمكنك تحديد نوع الترقيم في القوائم المرتبة بالحروف أو بالأقام العربية أو الرومانية وغيرها عبر الخاصية type وتأخذ أحد القيم التالية :

• 1 : 1, 2, 3, 4, ..
• a : a, b, c, d, ..
• A : A, B, C, D, ..
• i : i, ii, iii, iv, ..
• I : I, II, III, IV, ..

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

• circle :
• square :
• disc :

ويمكن وضع قائمة داخل قائمة لتشكيل المخططات الهرمية.

<ul type="circle">
<li>Pepsi
<li>Crash
<li>7 Up
</ul>

<ol type="I">
<li>Windows (85%)
<li>Linux (10%)
<li>Mac (3%)
<li>Other (2%)
</ol>


<ol>
  <li>American Companies
  <ol>
    <li>Microsoft
    <li>General Motors
  </ol>

  <li>German Companies
  <ol>
    <li>Dubian
    <li>BMW
      <ul>
        <li>6 Class
        <li>7 Class
      </ul>
  </ol>
</ol>

الجداول

تعتبر الجداول من أهم مكونات صفحات HTML، وجميع التصاميم الإحترافية تستفيد من الجداول لتصميم الصفحة وتوزيع الكائنات عليها وتشكيلها في القالب الذي يريدونه، يتم إدراج الجدول بالوسم table وداخل الجدول يجب إدراج صفوف tr وداخل الصفوف توجد البيانات td، يمكن وضع إطار للجدول بالخاصية border حيث نحدد فيه سماكة الإطار المطلوب 0 تعني دون إطار، القيمة الإفتراضية للإطار هي 0.

<table border="1">
  <tr>
    <td>First Row - First Data
    <td>First Row - Secound Data
  </tr>
  <tr>
    <td>Secound Raw - First Data
    <td>Secound Raw - Secound Data
  </tr>
</table>

يمكنك أيضا التحكم بالمسافة بين الخلايا بواسطة الخاصية cellspacing، والمسافة بين الحدود الداخلية للخلايا ومحتويات الخلايا بواسطة الخاصية cellpadding.

<table cellspacing="10" cellpadding="20" border="1">
  <tr>
    <td>First Cell</td>
    <td>Secound Cell</td>
  </tr>
</table>

يمكن التحكم بعرض الجدول بالخاصية width وارتفاعه بالخاصية height وكلاهما يأخذ قيما مطلقة أو نسب مؤية، ويمكن استخدام هذه الخصائص في الخلايا td أيضا وعند إعطاء الخلايا قيما نسبية فإنها تحسب بالنسبة للصف الذي هي فيه.

<table width="100%" height="100%" border="1">
  <tr>
    <td width="100" height="40%">First Cell
    <td width="100%" height="40%">Secound Cell
  </tr>
  <tr>
    <td width="100" height="60%">First Cell
    <td width="100%" height="60%">Secound Cell
  </tr>
</table>

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

<table border="1" background="sample.gif" width="90%" height="80%">
  <tr>
    <td bgcolor="Yellow">First Cell
    <td>Secound Cell
  </tr>
</table>

يمكن التحكم بمحاذاة محتوى الخلية أفقيا بالخاصية align ورأسيا بالخاصية valign، في الخاصية align القيمة left تعني محاذاة لليسار و rigth لليمين و center بالمنتصف و justify للضبط الكلي تجعل الأسطر مساوية في الطول، أما الخاصية valign فتأخد القيمة top للأعلى، bottom للأسفل middle للمنتصف.

<table border="1" width="90%" height="80%">
  <tr>
    <td align="right" valign="bottom">First Cell
    <td align="left" valign="top">Secound Cell
  </tr>
</table>

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

<table width="95%" border="1">
  <tr>
    <td>First Table - First Cell
    <td>
      <table border="1">
        <tr>
          <td>Secound Table - First Cell
          <td>Secound Table - Secound Cell
        </tr>
      </table>
  </tr>
  <tr>
    <td>
      <table border="1">
        <tr>
          <td>Third Table - First Cell
          <td>Third Table - Secound Cell
        </tr>
      </table>
    <td>First Table - Fourth Cell
  </tr>
</table>

يمكن أيض دمج الخلايا رأسيا بالخاصيةrawspan وأفقيا بالخاصية colspan، حيث تحدد في كل منهما عدد الخلايا التي يجب دمجها في الخلية الحالية، وتستخدم هذه الخصائص في الخلايا td.

<table border="1">
  <tr>
    <td rowspan="2" colspan="2">First Cell
    <td>Secound Cell
    <td>Third Cell
  </tr>
  <tr>
    <td rowspan="3">Fourth Cell
    <td colspan="2">Fifth Cell
  </tr>
  <tr>
    <td>Sixth Cell
    <td>Seventh Cell
    <td>Eighth Cell
    <td>Nineth Cell
  </tr>
</table>

الأطر

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

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

أول وسوم الإطارات هو الوسم frameset الذي يفتح مجموعة الإطارات، وفي هذه المجموعة يوجد عدد من وسوم الإطار frame المفردة ونضع فيها مصدر الصفحة في الخاصية src أو يمكننا وضع frameset أخرى داخل الـ frameset الأولى، ويوضع الوسم frameset خارج منطقة الجسم body دائما، نحدد في الوسم frameset إذا كنا سنقسم الصفحة أفقيا أو رأسيا، ونحدد حجم كل إطار، إذا كنا نريد تقسيم الصفحة رأسيا على شكل أعمدة نستخدم الخاصية cols ونضع فيها عرض كل إطار بحيث يفصل بين كل إطار والآخر فاصلة ( , ) وهذه الحجوم قد تكون نسبية أو مطلقة وتختلف في احتواء النسبية على علامة النسبة المؤوية، وإذا أردنا تقسيم الصفحة أفقيا نقوم بعمل نفس الشيء ولكن باستخدام الخاصية rows بدلا من cols، مثلا إذا أردنا تقسيم الصفحة رأسيا إلى ثلاثة أعمدة الأول بعرض 100 بكسل والثاني بعرض 10% من الشاشة والثالث يحتل باقي الشاشة تكون مجموعة الوسوم هكذا :

<frameset cols="100,10%,*">
<frame src="sample1.html">
<frame src="sample2.html">
<frame src="sample3.html">
</frameset>

وكما ذكرنا يمكنك وضع frameset آخر بدلا من أحد الإطارات frame

<frameset rows="50,*">
  <frame src="sample1.html">
  <frameset cols="100,*">
    <frame src="sample2.html">
    <frame src="sample3.html">
  </frameset>
</frameset>

يمكنك وضع أو إزالة الإطار الذي يظهر حول الألواح باستخدام الخاصية frameborder إذا ضبتها عند القيمة 0 لن يظهر الإطار و 1 يظهر الإطار، يمكنك التحكم بحجم الإطار عن طريق زيادة أو إنقاص المسافة بين الألواح وذلك عبر الخاصية framespacing فتضع فيها القيمة التي تريدها، يمكنك ضبط الخاصيتان السابقتان عند 0 لمنع المستخدم من تغيير حجم الألواح.

<frameset cols="50%,*" frameborder="0" framespacing="0">
<frame src="sample1.html">
<frame src="sample2.html">
</frameset>

يمكنك التحكم في ظهور أشرطة التمرير Scroll Bars في كل إطار من الإطارات عن طريق الخاصية scrolling وهي تأخذ القيمة yes لإظهار أشرطة التمرير دائما، والقيمة no لمنع ظهورها دائما، و auto لإظهارها وقت الحاجة إليها فقط.

<frameset rows="20,*">
  <frame src="sample1.html" scrolling="no">
  <frameset cols="100,*">
    <frame src="sample2.html" scrolling="yes">
    <frame src="sample3.html">
  </frameset>
</frameset>

لكي تستطيع أن ترسل أوامرك ووصلاتك من لوح إلى آخر، يجب أن تقوم بتسمية أو عنونة الألواح بواسطة الخاصية name، وبعد ذلك لعمل وصلة بواسطة الوسم a استخدم الخاصية target لتحديد وجهة الوصلة، يمكنك فتح الوصلة في شاشة متصفح جديدة _blank أو فتحها في الشاشة الحالية فوق مجموعة الألواح _top أو فتحها في اللوح الحالي _self أو فتحها في اللوح الأب (في حالة ألواح داخل ألواح) _parent أو فتحها في أي لوح بوضع إسم اللوح.

<!--    sample4.html    -->
<a href="sample1.html"
 target="_blank">Page 1</a><br>
<a href="sample3.html"
 target="_top">Page 3</a><br>
<a href="sample2.html"
 target="main">Page 2</a>
<a href="sample4.html"
 target="main">Page 4</a>

<frameset rows="20,*">
  <frame src="sample1.html">
  <frameset cols="200,*">
    <frame src="sample4.html">
    <frame src="sample3.html" name="main">
  </frameset>
</frameset>

إضافة إلى ما سبق، يوجد أيضا إطار من نوع خاص يكون عائما في المستند مثل الصورة، يتم إدراج هذا الإطار في أي مكان بالمستند تحت القسم body، ويقوم بعمل إطار ليعرض صفحة HTML خارجية، ووسمه هو iframe وأهم خصائصه الخاصية src التي تحدد المستند المصدر الذي يجب عرضه في الإطار، يمكنك أيضا عنونه بالخاصية name وعمل وصلات موجهة إليه تماما مثل الإطار العادي، وفيما بقي فهو مثل الإطار العادي، يمتلك أيضا خاصية width و height لتحديد حجمه.

<< الصور

النماذج >>