إلى الدرس السابع من دروس HTML. هذا الدرس سيكون الأول من درسين حول الجداول. وقد فضلت تجزئتها إلى قسمين وذلك لأهمية هذا الموضوع وتعدد خصائص الجداول واحتمالات استخدامها في صفحات الويب.
تعد الجداول من أقوى الأدوات التي تتضمنها لغة HTML وأكاد أجزم بأنه لا يوجد موقع في الإنترنت إلا ويستخدمها بصورة أو بأخرى. والحقيقة أن وضع الجداول في صفحات الويب لا يقتصر على تلك القوائم من البيانات التي نحتاج لترتيبها في صفوف وأعمدة، بل يتعدى ذلك إلى استخدامها في تصميم الصفحات نفسها وتنظيمها، والتحكم بمظهرها بصورة قوية وفعالة لا يمكن أداؤها مهما استخدمنا من وسوم خاصة بتنسيق الصفحات.
إن التعامل مع الجداول وإدراجها في صفحات الويب سهل جداً مثله مثل أي أداة من أدوات HTML لكنه قد يبدو لك مربكاً بعض الشيء وخاصة في البداية، وذلك لتعدد الخصائص التي تستعمل معها وتعدد الأوجه التي نستطيع التصرف بها. لكن لا تقلق فكل شيء يبدو صعباً في بدايته ولكن سرعان ما يصبح سهلاً.
هل أنت مستعد؟ إذن هيّا بنا…
-------------------------------
بداية، إليك هذا الوصف البسيط للوسوم الأساسية الخاصة بالجداول
<TABLE>...</TABLE> وسوم تعريف الجدول
<TR>...</TR> Table Row وسوم تعريف الصف في الجدول
<TD> Cell Data </TD> Table Data وسوم تعريف الخلايا في الصف وتعريف محتويات كل خلية
والآن لنتكلم بصورة أكثر دقة وتفصيلاً:
هذه هي الوسوم التي نبدأ بها لإدراج جدول مكون من خلية واحدة أو من مليون خلية… الأمر سيان
<TABLE> ... </TABLE>
والآن بعد إدراج هذين الوسمين، هناك سؤالين ينبغي الإجابة عليهما. الأول: كم عدد الصفوف التي نريدها في الجدول؟ ثلاثة، أربعة، مائة؟ لا بأس، قم بإضافة الوسوم
<TR> ... </TR>
بنفس عدد الصفوف التي تريدها. ولنفترض هنا أنها ثلاثة.
<TABLE>
<TR>
</TR>
<TR>
</TR>
<TR>
</TR>
</TABLE>
والسؤال الثاني هو، كم عدد الخلايا (أو الأعمدة) التي نريدها في كل صف؟
وهنا نضيف الوسوم
<TD> ... </TD>
بنفس عدد الخلايا المطلوب. ومن البديهي أن نكتبها بين الوسوم <TR> ... </TR> طالما أن الخلايا هي جزء من الصفوف. وهنا سأفترض أننا نريد خليتين في كل صف، وبذلك يجب تكرار كتابتها مرتين لكل صف.
وأذكرك أن النص الذي نريد إدراجه في الخلية يكتب ضمن هذين الوسمين.
<TABLE>
<TR>
<TD> Data </TD>
<TD> Data </TD>
</TR>
<TR>
<TD> Data </TD>
<TD> Data </TD>
</TR>
<TR>
<TD> Data </TD>
<TD> Data </TD>
</TR>
</TABLE>
هل اتضحت لك الصورة الآن. أنظر إلى نتيجة العمل التي حصلنا عليها.
Data Data
Data Data
Data Data
هناك شيء ما ينقص. بالطبع ... الحدود. انتظر قليلاً وستعرف الخاصية التي تقوم بإضافة الحدود للجدول وغيرها من الخصائص الأخرى. لأنني قبل أن أستمر أود أن ألفت نظرك لمسألة معينة في الجداول. وهي أن طريقة التعامل معها تتم على ثلاثة مستويات:
مستوى الجدول ككل
مستوى الصفوف ككل أو كل واحد على حده
مستوى الخلايا ككل أو كل واحدة على حده.
ولكل من هذه المستويات خصائصه التي ينفرد بها كما أن هناك خصائص مشتركة تستخدم مع كل الوسوم.
------------------------------------------
نبدأ بمناقشة الخصائص التي تستخدم مع الوسوم <TABLE> ... </TABLE> وسأقوم أولاً بسردها لك، ومن ثم إدراج بعض الأمثلة التي توضحها.
BORDER تقوم هذه الخاصية بإضافة حدود للجدول وتحديد سماكتها، والقيمة الإفتراضية لها هي صفر أي لا حدود
<TABLE BORDER="5">
<TABLE BORDER="0">
WIDTH نستخدم هذه الخاصية لتحديد عرض الجدول ككل. وهناك أسلوبين لتحديد العرض: المطلق أي بكتابة الرقم الذي يمثل العرض بصورة مباشرة. والنسبي أي كتابة رقم نسبي مئوي يحدد عرض الجدول حسب عرض نافذة المتصفح. (أي أن عرض الجدول سيختلف باختلاف عرض نافذة المتصفح).
<TABLE WIDTH="600">
<TABLE WIDTH="80%">
HEIGHT لتحديد ارتفاع الجدول، ويكون تحديد هذا الإرتفاع من خلال قيمة مطلقة تحدد الإرتفاع بالبيكسل. أو قيمة نسبية تحدد ارتفاع الجدول بالنسبة لإرتفاع صفحة المتصفح
<TABLE HEIGHT="500">
<TABLE HEIGHT="100%">
CELLSPACING لتحديد المسافة بين كل خلية من خلايا الجدول
<TABLE CELLSPACING="10">
CELLPADDING لتحديد المسافة الفاصلة بين الحدود وبداية النص في كل خلية. أو لنقل: تحديد حجم الهوامش لخلايا الجدول.
<TABLE CELLPADDING="10">
ALIGN لتحديد محاذاة الجدول أفقياً على الصفحة يميناً أو يساراً. وهو يأخذ القيم right, left
<TABLE ALIGN="Left">
<TABLE ALIGN="Right">
BGCOLOR ويستخدم لتحديد لون الخلفية للجدول
<TABLE BGCOLOR="#00FFFF">
هذه هي الخصائص المستعملة مع الجدول. وسأقوم الآن بتطبيقها على المثال الوارد في بداية هذا الدرس وسأكتفي بكتابة وسم البداية أما باقي الوسوم فهي نفسها:
<TABLE BORDER="5">
Data Data
Data Data
Data Data
-------------------------------
<TABLE BORDER="5" CELLPADDING="5">
Data Data
Data Data
Data Data
-----------------------------------
<TABLE BORDER="5" CELLPADDING="5" CELLSPACING="10">
Data Data
Data Data
Data Data
--------------------------------------
<TABLE BORDER="5" CELLPADDING="5" CELLSPACING="10"
BGCOLOR="#FFFF00">
Data Data
Data Data
Data Data
-------------------------------------
<TABLE BORDER="5" CELLPADDING="5" CELLSPACING="10"
BGCOLOR="#FFFF00" HEIGHT="300">
Data Data
Data Data
Data Data
--------------------------------
<TABLE BORDER="5" CELLPADDING="5" CELLSPACING="10"
BGCOLOR="#FFFF00" HEIGHT="300" WIDTH="75%">
Data Data
Data Data
Data Data
-----------------------------
ونتكلم الآن عن الخصائص المستخدمة مع وسوم الصف <TR> ... </TR> ولا بأس من تذكيرك أن عدد الصفوف في الجدول يتحدد بعدد هذه الوسوم. أما أهم الخصائص التي تضاف لهذا الوسم فهي:
ALIGN لتحديد محاذاة النص أفقياً داخل الخلايا التي يتكون منها الصف، والقيم المحتملة لها هي Right, Left, Center والقيمة الإفتراضية هي Center
VALIGN لتحديد المحاذاة العمودية للنص داخل خلايا الصف، وذلك إما للأعلى أو للأسفل أو في المنتصف أو على امتداد الخط الأساسي للخلية. وقيمها على التوالي هي: Top, Bottom, Middle, Baseline
BGCOLOR لتحديد لون الخلفية للخلايا التي يتكون منها الصف. وهنا يتم تجاهل لون الخلفية المحدد ضمن وسم <TABLE> ويتم تطبيق اللون المحدد هنا.
ونعود الآن إلى جدولنا السابق لنطبق عليه هذه الخصائص من خلال الأمثلة التالية:
<TABLE BORDER="5" HEIGHT="300">
<TR ALIGN="Left">
<TD> Data </TD>
<TD> Data </TD>
</TR>
<TR ALIGN="Right">
<TD> Data </TD>
<TD> Data </TD>
</TR>
<TR ALIGN="Center">
<TD> Data </TD>
<TD> Data </TD>
</TR>
</TABLE>
Data Data
Data Data
Data Data
--------------------------------
<TABLE BORDER="5" HEIGHT="300">
<TR VALIGN="Top">
<TD> Data </TD>
<TD> Data </TD>
</TR>
<TR VALIGN="Bottom">
<TD> Data </TD>
<TD> Data </TD>
</TR>
<TR VALIGN="Baseline">
<TD> Data </TD>
<TD> Data </TD>
</TR>
</TABLE>
Data Data
Data Data
Data Data
---------------------------
<TABLE BORDER="5" HEIGHT="300" BGCOLOR="#FFFFFF">
<TR BGCOLOR="#808080">
<TD> Data </TD>
<TD> Data </TD>
</TR>
<TR BGCOLOR="#C0C0C0">
<TD> Data </TD>
<TD> Data </TD>
</TR>
<TR>
<TD> Data </TD>
<TD> Data </TD>
</TR>
</TABLE>
Data Data
Data Data
Data Data
-----------------------------------
<TABLE BORDER="0" HEIGHT="100%" WIDTH="100%">
<TR BGCOLOR="#808080">
<TD> Data </TD>
<TD> Data </TD>
</TR>
<TR BGCOLOR="#C0C0C0">
<TD> Data </TD>
<TD> Data </TD>
</TR>
<TR BGCOLOR="#FFFFFF">
<TD> Data </TD>
<TD> Data </TD>
</TR>
</TABLE>
Data Data
Data Data
Data Data
-------------------------------------
والآن ماذا بقي لدينا؟ بالطبع بقيت الوسوم الخاصة بالخلايا. وسوف أتابع الحديث عنها في الدرس القادم إن شاء الله.
*******
إلى الدرس الثامن من دروس HTML. نتابع معاً في هذا الدرس الحديث عن الجداول. وأنا أفترض أنك قد أنهيت الدرس السابق بنجاح، وأن لديك الآن فكرة جيدة جداً عن الجداول وكيفية إنشائها والتعامل مع خصائصها ومع الصفوف وخصائصها. ونكمل الآن من حيث توقفنا، أي مع خصائص الخلايا.
هل تذكر ما قلناه عن عدد الخلايا في الصف الواحد؟ إن عدد الخلايا المطلوب يتحدد من خلال كتابة الوسوم <TD> ... </TD> مرات بنفس العدد المطلوب. ومن الممكن أن تحتوي الخلية على أي عنصر من عناصر لغة HTML : نصوص، رسوم، قوائم، وصلات تشعبية، بل وحتى جداول. (نعم، تستطيع إدراج جدول داخل جدول آخر)
لنسترجع معا المثال الذي قمنا بالتدرب عليه في الدرس السابق، فسوف نكمل هذا الدرس معه. وهو جدول صغير مكون من ثلاثة صفوف وعمودين (أي خليتين في كل صف).
<TABLE>
<TR>
<TD> Data </TD>
<TD> Data </TD>
</TR>
<TR>
<TD> Data </TD>
<TD> Data </TD>
</TR>
<TR>
<TD> Data </TD>
<TD> Data </TD>
</TR>
</TABLE>
أما الخصائص المستخدمة مع الخلايا، فهذا جدول بها:
ALIGN تحدد محاذاة النص الموجود في الخلية أفقياً، والقيم المستخدمة هي Left, Center, Right
VALIGN تحدد المحاذاة العمودية للنص، وهو يأخذ القيم Top, Middle, Bottom, Baseline
WIDTH تحدد عرض الخلية، وذلك بكتابة القيمة المباشرة للعرض المطلوب بالبيكسل، أو بكتابة رقم يمثل النسبة المئوية. ويكفي تحديد العرض للخلايا في أحد الصفوف لكي يتم تطبيقه على كل الخلايا في كل الصفوف.
HEIGHT تحدد الإرتفاع المطلوب للخلية في الصف، وذلك بالطرق المباشرة أو النسبية. وقيامك بتحديد ارتفاع إحدى الخلايا في الصف يؤدي إلى تطبيقه على كل الخلايا فيه.
BGCOLOR تحدد لون خلفية الخلية
COLSPAN يقوم بدمج الخلية الحالية مع العدد المطلوب من الخلايا التي تليها أفقياً
<TD COLSPAN="n">
حيث n هو عدد الخلايا التي سيتم دمجها
ROWSPAN يقوم بدمج الخلية الحالية مع العدد المطلوب من الخلايا التي تليها عمودياً (أي أسفلها).
<TD ROWSPAN="n">
وبالطبع n هو عدد الخلايا التي سيتم دمجها
وقبل أن نستمر، يبدو لي أن هناك بعض الملاحظات المهمة التي ينبغي ذكرها:
كما تلاحظ هناك خصائص تتكرر مع جميع الوسوم. خذ مثلاً الخاصية BGCOLOR. كيف يتم التعامل معها إذا كررت مع جميع الوسوم؟ بكل بساطة يتم تطبيق اللون المحدد مع وسم الخلية، فإذا لم يكن محدداً يطبق اللون المحدد مع وسم الصف، فإذا لم يوجد يطبق اللون المحدد مع وسم الجدول. وإذا لم يكن هذا محدداً بدوره يتم إعتماد لون خلفية الصفحة المحدد في الوسم <BODY>.
الملاحظة الثانية تتعلق بالخصائص WIDTH, HEIGHT. يختلف أسلوب التعامل مع هذه الخصائص من متصفح لآخر، بل وتختلف أيضاً طريقة تفسير القيم المحددة معها وخصوصاً فيما يتعلق بالنسب المئوية. (راجع الموضوع: الوسوم الخاصة والمتصفحات ).
وبدون الخوض في تفاصيل هذه الإختلافات التي لن تؤدي إلا إلى المزيد من الإشكالات لديك... وبعد التجربة يبدو أن أفضل طريقة للتعامل مع هذه الخصائص هي قيامك بتحديد العرض (وكذلك الإرتفاع إذا أردت ذلك) للجدول ككل من خلال الوسم <TABLE>. ثم استخدام هذه الخصائص في وسوم الخلايا وتحديد العرض المطلوب لكل خلية على حده في الصف الأول، والارتفاع المطلوب لكل صف في الجدول.
وهذه برأيي أفضل طريقة تضمن بها أفضل مشاهدة للجدول لجميع زوار موقعك.
إذا أردت أن تحتوي بعض الصفوف في الجدول على عدد من الخلايا أقل من باقي الصفوف، فلا يكفي أن تقوم بحذف وسوم الخلايا منها. (كما ترى في الشيفرة التالية
<TABLE BORDER="5">
<TR>
<TD> Data </TD>
</TR>
<TR>
<TD> Data </TD>
<TD> Data </TD>
</TR>
<TR>
<TD> Data </TD>
</TR>
</TABLE>
لأن هذا ما ستحصل عليه:
Data
Data Data
Data
لقد بقي مكان الخلايا المحذوفة محجوزاً كما لو أنها لم تحذف. أما الخلايا الباقية فظلت محتفظة بنفس خصائصها، أي أننا لم نستفد من عملية الحذف. والحقيقة أن الطريقة المثلى لذلك هي أن تقوم بدمج الخلايا معاً وذلك باستخدام الخصائص COLSPAN, ROWSPAN.
----------------------------------
إذن لنقم بإعادة كتابة شيفرة الجدول مع استخدام هذه الخصائص:
<TABLE BORDER="5">
<TR>
<TD COLSPAN="2"> Data </TD>
</TR>
<TR>
<TD> Data </TD>
<TD> Data </TD>
</TR>
<TR>
<TD COLSPAN="2"> Data </TD>
</TR>
</TABLE>
Data
Data Data
Data
لاحظ أن العدد 2 هو عدد الخلايا التي قمنا بدمجها. ولاحظ أيضاً انني لم أقم بإعادة وسوم الخلايا المحذوفة لأننا أصلاً لا نحتاج لها بعد أن قمنا بالدمج. وكقاعدة أساسية: كل خلية يتم دمجها يجب بالمقابل حذف وسوم التعريف الخاصة بها. ما عدا تعريف الخلية الأساسية بالطبع.
مثال آخر: لنقم بدمج الخلايا الموجودة في العمود الأول
<TABLE BORDER="5">
<TR>
<TD ROWSPAN="3"> Data </TD>
<TD> Data </TD>
</TR>
<TR>
<TD> Data </TD>
</TR>
<TR>
<TD> Data </TD>
</TR>
</TABLE>
ومرة أخرى بعد تعريف خاصية الدمج العمودي، قمت بحذف تعريف الخلايا المدموجة من الصف الثاني والثالث. وهذا هو الجدول الناتج.
Data Data
Data
Data
------------------------------------
هناك نوع خاص من الخلايا التي يتم تعريفها باستخدام الوسوم <TH> ... </TH> وهي اختصار Table Header أي ترويسة الجدول.
والفرق الوحيد بينها وبين <TD> ... </TD> هو أن النص الذي تحتويه يظهر بخط أسود عريض ومحاذاته في منتصف الخلية بصورة إفتراضية. (ليس بالشيء المهم، كما أعتقد)، خاصة وأن الخصائص المستخدمة معها هي نفس خصائص <TD> وبنفس التفاصيل التي ذكرت.
-----------------------------------
الوسوم الأخيرة المستخدمة في الجداول هي <CAPTION> ... </CAPTION> وهي تختص بإضافة عنوان رئيسي للجدول ككل. لذلك فهي عندما تكتب يتم وضعها مباشرة بعد الوسم <TABLE> وبصورة مستقلة وليس ضمن وسوم الصفوف أو الخلايا.
<TABLE BORDER="5">
<CAPTION> Table Caption </CAPTION>
<TR>
<TD> Data </TD>
<TD> Data </TD>
</TR>
<TR>
<TD> Data </TD>
<TD> Data </TD>
</TR>
<TR>
<TD> Data </TD>
<TD> Data </TD>
</TR>
</TABLE>
Table Caption Data Data
Data Data
Data Data
----------------------------------------
وأخيراً... وصلنا إلى نهاية هذه الدرس. وما بقي لدي هو أن أحثـك على تطبيق ما قمت بشرحه فيه وفي الدرس السابق وباقي الدروس، وتجربة جميع الاحتمالات الواردة للخصائص والقيم.
******* يوجد لدينا ثلاثة أعمدة، أليس كذلك؟ إذن لنقم بتعريف صفحة إطارات ذات ثلاثة أعمدة (طبعاً لا يوجد أهمية للأحجام المذكورة، فأنا اخترتها حسب رغبتي وتستطيع أنت اختيار الأحجام التي تريدها).
<FRAMESET COLS="100,*,100">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
<FRAME SRC="frame3.html">
</FRAMESET>
العمود الأوسط من هذه الصفحة مقسم إلى صفين، إذن نستبدل تعريفه بتعريف آخر لصفحة إطارات مكونة من صفين (وهذا هو التعريف بصورة مستقلة)
<FRAMESET ROWS="80,*">
<FRAME SRC="frame2.html">
<FRAME SRC="frame4.html">
</FRAMESET>
وبعد دمج الشيفرتين السابقتين معاً نحصل على هذه الشيفرة النهائية:
<FRAMESET COLS="100,*,100">
<FRAME SRC="frame1.html">
<FRAMESET ROWS="80,*">
<FRAME SRC="frame2.html">
<FRAME SRC="frame4.html">
</FRAMESET>
<FRAME SRC="frame3.html">
</FRAMESET>
وصلنا الآن إلى نهاية هذا الدرس. وقد قمنا فيه بمناقشة أساسيات إدراج الإطارات، ولكن بقى هناك الكثير ليقال في هذا المجال.
*********
إلى الدرس العاشر من دروس HTML. والذي لا زلنا نناقش موضوع الإطارات فيه. لقد تعرفت في الدرس السابق على الأساسيات في هذا الموضوع، وتعلمت كيفية إنشاء صفحة ويب باستخدام مبدأ الإطارات. ونتابع معاً التعرف على باقي الخصائص والتحديدات المتعلقة بها.
بداية، أجد من الضروري أن أذكرك بالوسمين الأساسيين للإطارات واللذين ندرجهما في الملف الأساسي، وهما <FRAMESET> والذي يوضع بدلاً من <BODY> ويشكّل الوسم الأساسي لتحديد مجموعة الإطارات في الصفحة وخصائص هذه المجموعة ككل. و <FRAME> الذي يوضع داخل نطاق الوسم السابق ويعرّف الملف المصدر لكل إطار ويحدد خصائصه. ومن المهم جداُ أن نميز بين الخصائص المتعلقة بكل وسم وأن لا نخلط بينهما.
وعند الحديث عن الإطارات سوف نواجه تلك المشكلة العتيدة التي تؤرق دائماً مصممي صفحات الويب، ألا وهي مسألة توافق الوسوم والخصائص مع المتصفحات المختلفة (والتي قمت بتوضيحها هنا). فمثلاً لدينا أربع خصائص للوسم <FRAMESET> ، لكن واحدة منها فقط تعمل مع كلا المتصفحين الرئيسيين Netscape, MS Explorer. وكما إعتدنا سوف لن أركز على هذه الخصائص ، لكن على الأقل سأكتفي بذكرها وذكر عملها وأترك لك حرية تجربتها إن أردت.
أولى هذه الخصائص هي FRAMEBORDER وهي تقوم بتحديد ظهور أو عدم ظهور الحدود حول الإطارات وتأخذ القيم 1 للظهور، و0 لعدم الظهور. وهذا مثال عليها:
<FRAMESET ROWS="50,*,15%,20%" FRAMEBORDER="0">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
<FRAME SRC="frame3.html">
<FRAME SRC="frame4.html">
</FRAMESET>
*
أما الخصائص الثلاث الأخرى فهي:
BORDER: تحدد سمك الحدود الظاهرة حول الإطارات وهي تأخذ قيماً بالبيكسل. (BORDER="n") وتعمل فقط مع Netscape
BORDERCOLOR: لإضافة لون للحدود (BORDERCOLOR="rrggbb") وتعمل مع Netscape أيضاً.
FRAMESPACING: لتحديد مسافات فارغة إضافية حول الإطارات وتأخذ قيماً بالبيكسل (FRAMESPACING="n") وهي تعمل مع MS Explorer.
-------------------------------------
أما الخصائص المستخدمة مع الوسم <FRAME> فهي كالتالي:
MARGINHEIGHT: تحدد مقدار المسافة الفارغة المتروكة للهوامش العلوية والسفلية للإطار (بالبيكسل).
MARGINHEIGHT="n"
MARGINWIDTH: تحدد مقدار المسافة الفارغة المتروكة للهوامش اليمنى واليسرى للإطار (بالبيكسل).
MARGINWIDTH="n"
SCROLLING: تحدد إمكانية ظهور أو عدم ظهور أشرطة التصفح الأفقية والعمودية على جوانب أو أسفل الإطار. وتأخذ القيم yes للظهور. no لعدم الظهور. و auto التي تحدد ظهور الأشرطة أو عدمه تلقائياً بحسب الحاجة إليها. تماماً كما يحدث في معظم تطبيقات Windows
SCROLLING="yes"
SCROLLING="no"
SCROLLING="auto"
NORESIZE عند إضافة هذه الخاصية يتم منع عملية التحكم بحجم الإطار بالتصغير أو التكبير من خلال السحب والإفلات. وهي لا تأخذ أي قيم.
ولتوضيح مبدأ عمل هذه الخصائص إليك هذه الأمثلة، (سأقوم باستخدام الملف الرئيسي الذي أدرجت فيه الصورة في الدرس السابق، فهو أفضل مثال لتوضيحها). ولكي أذكرك به رجاءً أنقر هنا. وقم بتفحصه والتدقيق في تفاصيله لكي تقارنها بما سينتج عن الأمثلة التالية، كذلك حاول القيام بتكبير الإطار أو تصغيره بوضع المؤشر على الحد ثم استخدام السحب والإفلات بالإتجاه المطلوب. وذلك لكي تستطيع تمييز عمل الخاصية NORESIZE
------------------------------------
<FRAMESET COLS="50%,50%">
<FRAME SRC="thedome.jpg" MARGINHEIGHT="40">
<FRAME SRC="frame2.html">
</FRAMESET>
*
----------------------------------
<FRAMESET COLS="50%,50%">
<FRAME SRC="thedome.jpg" MARGINHEIGHT="40" MARGINWIDTH="30">
<FRAME SRC="frame2.html">
</FRAMESET>
*
--------------------------------------
<FRAMESET COLS="50%,50%">
<FRAME SRC="thedome.jpg" MARGINHEIGHT="40" MARGINWIDTH="30" SCROLLING="yes">
<FRAME SRC="frame2.html">
</FRAMESET>
*
-------------------------------
<FRAMESET COLS="50%,50%">
<FRAME SRC="thedome.jpg" MARGINHEIGHT="40" MARGINWIDTH="30" SCROLLING="yes" NORESIZE>
<FRAME SRC="frame2.html">
</FRAMESET>
*
----------------------------------
كذلك هناك الخصائص FRAMEBORDER, FRAMESPACING, BORDER, BORDERCOLOR التي تستخدم مع هذا الوسم وبنفس التفاصيل التي ذكرت مع <FRAMESET>. لكنها بالطبع تحدد خصائص الإطار وحده وليس مجموعة الإطارات ككل في الصفحة. وهي تعمل على متصفحات معينة دون غيرها.
بقي لدينا الخاصية NAME والتي تعتبر أهم خاصية لهذا الوسم، فهي التي تحدد طريقة تنسيق العمل بين الإطارات والصفحات وأسلوب عرضها لذلك فقد فضلت أن أفرد لها موضوعاً خاصاً وبصورة مستقلة عن باقي الخصائص، وذلك في الدرس التالي إن شاء الله.
-----------------------------------
هناك وسم ثالث يتعلق بالإطارات، ويتم إدراجه داخل الملف الرئيسي وعادة في النهاية وهو:
<NOFRAMES> ... </NOFRAMES>
يستخدم هذا الوسم لتوفير بديل معين عن صفحة الإطارات في حالة قيام أحد الزوار بدخول الموقع مستخدماً متصفحاً لا يدعم الإطارات. (بالمناسبة فإن هناك متصفحات لا يمكن لها أن تعرض الإطارات مثل الإصدارات القديمة لـِ Netscape, MS Explorer) لكنك حتماً تستطيع مشاهدتها وذلك لأن الإصدارات المعربة من هذه المتصفحات هي إصدارات حديثة نسبياً وتدعم الإطارات.
فإذا أردت أن تمنح زوار موقعك الذين لا يستخدمون متصفحاً حديثاً فرصة مشاهدة موقعك، فكل ما عليك فعله هو إدراج هذا الوسم في نهاية الملف الرئيسي للإطارات والبدء بكتابة صفحتك كما لو كانت صفحة ويب عادية.
<HTML>
<HEAD>
<TITLE>Main File</TITLE>
</HEAD>
<FRAMESET ROWS="50,*,15%,20%" FRAMEBORDER="0">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
<FRAME SRC="frame3.html">
<FRAME SRC="frame4.html">
</FRAMESET>
<NOFRAMES>
<BODY>
أكتب صفحتك
بالصورة
الإعتيادية هنا
</BODY>
</NOFRAMES>
</HTML>
أما إذا كنت مصراً على إطاراتك ولا تريد إنشاء نسخة أخرى للموقع بدونها، فلم لا تكتب ملاحظة بسيطة ضمن هذا الوسم تخبر فيها زائرك بأن الموقع يحتوي على هذه الإطارات وأنه يحتاج إلى متصفح مناسب (على الأقل لكي تخفف عنه الصدمة)!!
*****
إلى الدرس الحادي عشر من دروس HTML. كما ترى من العنوان لا زلنا نتابع في موضوع الإطارات، وفي القسم الثالث منه. وذلك لأهمية هذا الموضوع وتشابك خطوطه. وخصوصاً لأننا نحتاج إلى التعامل مع أكثر من وسم في نفس الوقت وداخل أكثر من ملف. مما يستدعي التركيز والتروي عندما نريد إنشاء صفحة إطارات.
لقد أنهينا في الدرسين الماضيين شرح كافة الوسوم والخصائص التي تتعلق بالإطارات، عدا واحدة هي NAME ووعدتك أن أقوم بشرحها بصورة وافية في درس مستقل. كما وعدتك أن نقوم بإجمال موضوع الإطارات والتدرب عليها من خلال مثال واقعي يتمثل بإنشاء صفحة إطارات لهذا الموقع وهاأنا ذا أفي بوعدي.
لقد قلت إن هذه الخاصية تعتبر من أهم خصائص الوسم <FRAME> لأنها تحدد طريقة تنسيق العمل بين الإطارات والصفحات وأسلوب عرضها. لنعتبر هذا تعريفاً مبدئياً. ولكي أوضح لك الهدف من هذه الخاصية، قم باستعراض المثال التالي ... الذي قمت فيه بتمثيل بعض الأجزاء من هذا الموقع (لنترك تلك الأمثلة المملة التي كنا نعمل عليها في هذا الدرسين السابقين ولنبدأ بالعمل الجدي). وأنقر على أزرار الوصلات التشعبية الموجودة في الإطار الأيسر ......وبالطبع لا تنسى النقر على زر BACK الموجود في متصفحك للعودة إلى هذه الصفحة. وقد تحتاج إلى نقره عدة مرات بحسب عدد المرات التي تنقلت فيها في صفحات الإطار.
ماذا وجدت؟!؟ إن الصفحات تظهر في نفس الإطار (أعرف أنك كنت تتوقع ظهورها في الإطار الآخر... فهل خيبت ظنّك؟). حسناً، لا زالت هذه الإطارات تحتاج إلى القليل من العمل لكي تعمل كما يجب. وقبل أن نكمل أود أن تتمعن في الشيفرات التالية، وهي في الواقع الشيفرات الخاصة بالملفات المستخدمة في هذا المثال. وأرجو أن تقوم بدراستها جيداً، على الأقل لكي تكون متأكداً من فهمك لكل الأفكار السابقة قبل أن تنتقل إلى النقاط التي ستلي.
--------------------------------------
شيفرة الملف الرئيسي الذي أسميته mainfile.html
<HTML>
<HEAD>
<TITLE>Main File</TITLE>
</HEAD>
<FRAMESET ROWS="60,*">
<FRAME SRC="header.html" NORESIZE SCROLLING="NO" MARGINHEIGHT="1" MARGINWIDTH="1">
<FRAMESET COLS="120,*">
<FRAME SRC="lftframe.html" NORESIZE SCROLLING="NO" MARGINHEIGHT="1" MARGINWIDTH="1">
<FRAME SRC="htmintro.html">
</FRAMESET>
</FRAMESET>
</HTML>
--------------------------------------
شيفرة الملف العلوي (الترويسة) الذي أسميته header.html
<HTML>
<HEAD>
<TITLE>Header File</TITLE>
</HEAD>
<BODY bgcolor="#BCD8EB">
<CENTER><IMG SRC="frambnr.jpg"></CENTER>
</BODY>
</HTML>
--------------------------------------
شيفرة الملف الذي يحتوي على الأزرار والوصلات التشعبية والذي أسميته lftframe.html
<HTML>
<HEAD>
<TITLE>Buttons</TITLE>
</HEAD>
<BODY BGCOLOR="#BCD8EB">
<A HREF="htutor01.html"><IMG SRC="lesson1.jpg"></A><BR>
<A HREF="htutor02.html"><IMG SRC="lesson2.jpg"></A><BR>
<A HREF="htutor03.html"><IMG SRC="lesson3.jpg"></A><BR>
<A HREF="htutor04.html"><IMG SRC="lesson4.jpg"></A><BR>
<A HREF="htutor05.html"><IMG SRC="lesson5.jpg"></A><BR>
</BODY>
</HTML>
------------------------------------
وبالطبع بقي لدينا الإطار الأكبر وهو لا يحتوي على ملف خاص لأنه الإطار العام الذي نريد إظهار الملفات فيه. ولن يتم إجراء أي تعديل على تلك الملفات. وبصورة مبدئية لقد شاهدت أنه يحتوى على صفحة المقدمة والمسماه htmintro.html
-----------------------------------
وهنا يأتي دور الخاصية NAME والتي نقوم من خلالها بتعيين اسم ما للإطار -أي الإطار الذي نرغب أن تظهر به الملفات عندما نقوم بالنقر على الوصلات التشعبية- حيث سيتم فيما بعد استخدام هذا الإسم من أجل استهداف هذا الإطار من قبل الوصلات التشعبية في الإطارات الأخرى أو حتى في الصفحات الأخرى.
وبالمناسبة فقد حان الآن ذكر خاصية جديدة من خصائص الوسم <A> ... </A> ( وهو وسم الوصلات التشعبية كما عرفت في الدرس السادس.) وهذه الخاصية هي TARGET. (انتظر قليلاً وستعرف لماذا)
دعنا نقوم بترتيب الأمور بصورة أكثر وضوحاً وتسلسلاً:
برأيك بأي من الملفات الثلاثة السابقة يجب أن نضع الخاصية NAME? سؤال سخيف! أليس كذلك؟ طالما أنها إحدى خصائص الوسم <FRAME> إذن من البديهي جداً أن ترد معه. وبما أن هذا الوسم يوضع فقط في الملف الرئيسي إذن هي توضع في الملف الرئيسي... هذه أصبحت واضحة! لكن مع أي وسم من وسوم <FRAME> الموجودة في الملف الرئيسي؟؟ بالطبع ليس مع الوسم الخاص بتعريف ملف الترويسة فهذا لا نريد استهدافه، وكذلك الأمر بالنسبة لتعريف ملف الوصلات التشعبية الذي لا نريد استهدافه أيضاً. إذن لم يبق لدينا إلا الوسم الخاص بتعريف الإطار العام الذي ستظهر به الملفات. وبافتراض أننا نريد تسمية هذا الإطار بالاسم mainwindow. وهو اسم اختلقته أنا حسب ما أريد وأستطيع إعطاءه أي اسم آخر أريده طالما أنه يبدأ بحرف أبحدي أو رقم وليس برمز خاص مثل /؟#$%^ (عدا الرمز _ الذي يستخدم في حالات خاصة سأذكرها لك لاحقاً في هذا الدرس).
إذن تصبح شيفرة الملف الأساسي هي:
<HTML>
<HEAD>
<TITLE>Main File</TITLE>
</HEAD>
<FRAMESET ROWS="60,*">
<FRAME SRC="header.html" NORESIZE SCROLLING="NO" MARGINHEIGHT="1" MARGINWIDTH="1">
<FRAMESET COLS="120,*">
<FRAME SRC="lftframe.html" NORESIZE SCROLLING="NO" MARGINHEIGHT="1" MARGINWIDTH="1">
<FRAME SRC="htmintro.html" NAME="mainwindow">
</FRAMESET>
</FRAMESET>
</HTML>
وبهذا نكون قد إنتهينا من إعداد الملف الرئيسي ليكون ملف إطارات فعال مائة بالمائة. ونستطيع الآن استهداف ذلك الإطار من أي مكان باستخدام الإسم الذي عرفناه به.
المرحلة الثانية هي تعريف الوصلات التشعبية بطريقة تجعل الملفات المتعلقة بهذه الوصلات تظهر في الإطار المحدد. وهنا يأتي دور الخاصية TARGET سالفة الذكر لكي تقوم على الرحب والسعة بأداء هذه الوظيفة. وسوف نعمل الآن على الملف المسمى lftframe.html. أليس هو الملف الذي يحتوي على الوصلات التشعبية؟! ليصبح بالشكل التالي:
<HTML>
<HEAD>
<TITLE>Buttons</TITLE>
</HEAD>
<BODY BGCOLOR="#BCD8EB">
<A HREF="htutor01.html" TARGET="mainwindow"><IMG SRC="lesson1.jpg"></A><BR>
<A HREF="htutor02.html" TARGET="mainwindow"><IMG SRC="lesson2.jpg"></A><BR>
<A HREF="htutor03.html" TARGET="mainwindow"><IMG SRC="lesson3.jpg"></A><BR>
<A HREF="htutor04.html" TARGET="mainwindow"><IMG SRC="lesson4.jpg"></A><BR>
<A HREF="htutor05.html" TARGET="mainwindow"><IMG SRC="lesson5.jpg"></A><BR>
</BODY>
</HTML>
والآن حان وقت العرض، أنقر هنا لنشاهد صفحة الإطارات بعد التعديل:
لقد نجحنا... أليس كذلك
الحقيقة أننا لم ننجح بصورة مطلقة، بل إلى حد ما... وأعتذر لك لأني نغصت عليك هذا النجاح. لكن طالما أننا نريد الوصول إلى أفضل مستوى وأعلى أداء لموقعنا فيجب علينا دائماً تطبيق القواعد التي تضمن ذلك. ولكي أوضح لك السبب الذي يجعلني أتكلم كالفلاسفة سوف أطلب منك العودة إلى الصفحة الرئيسية للإطارات بعد أن قمت بإضافة وصلات تشعبية إضافية لها، واحدة خاصة بالإنتقال إلى ... صفحة الإطارات نفسها، أي إعادة تحميل الصفحة على الشاشة. والثانية للإنتقال من طريقة العرض بالإطارات إلى العرض بدون إطارات. لذلك أنقر هنا رجاءً. وقم بتجربة النقر على هذه الوصلات الجديدة.
مشكلة جديدة، أليس كذلك؟ ففي الحالة الأولى تم تحميل الصفحة داخل الإطار نفسه، وبذلك أصبحت الصفحات متداخلة في ما بينها، وكذلك الأمر في الحالة الثانية. أي أننا بإختصار لا نستطيع إبقاء الوسم بالشكل:
<A HREF="filename.html" TARGET="mainwindow"> ... </A>
كما لا نستطيع كتابته بالشكل التالي:
<A HREF="filename.html"> ... </A>
وطبعاً أنت تعرف السبب في كلتا الحالتين.
لقد وقعنا في مصيدة الإطارات. إذن فما الحل؟ الحل توفره لغة HTML نفسها من خلال وضع قيمة معينة للخاصية TARGET وهي "_top" لتخبر المتصفح أن يقوم بتحميل الصفحة في المستوى الأعلى من الشاشة. أي ان يقوم بإلغاء أي إطارات أو صفحات عادية موجودة أصلاً وأن يحمل الصفحة الجديدة مكانها. وهذه القيمة معرفة بشكل مسبق في لغة HTML وليست من عندي كما في الإسم mainwindow.
والحقيقة أنه يوجد ثلاث قيم أخرى بالإضافة إلى _top معرفة بشكل مسبق في لغة HTML لتحدد موقع ظهور الصفحة المعنية. ويجب أن تتذكر دائماً أنها تكتب بالأحرف الصغيرة lowercase. فإذا كتبت بالأحرف الكبيرة فلن تحصل على النتيجة التي تريدها لأنها ستعتبر في هذه الحالة وكأنها أسماء عادية.
_top
تحمل الصفحة في أعلى مستوى للشاشة أي تلغي الإطارات الموجودة أصلاً
_blank
تقوم بفتح شاشة جديدة وفارغة للمتصفح وتعرض الصفحة المحملة فيه
_self
(الحالة الإفتراضية) تقوم بتحميل الصفحة في نفس الإطار الذي توجد به الوصلة التشعبية التي تم النقر عليها، (وبالطبع هذا ما يحدث دائما دون وجود هذه القيمة، أليس كذلك؟)
_parent
تقوم بعرض الإطار المحمل مكان الإطار الأب،
وتأمل الشكل التالي الذي يمثل صفحة إطارات مركبة.
أنت تعرف أننا نحتاج إلى ثلاثة أزواج من الوسوم <FRAMESET> ... </FRAMESET> لإخراج مثل هذه الصفحة.
الأول لتحديد الصفحة ككل
الثاني لتحديد الإطارين 2 و 3 المتفرعين من الصفحة الرئيسية
الثالث لتحديد الإطارين 4 و 5 المتفرعين من الإطار 3
وبالتالي نقول أن الصفحة الرئيسية هي الأب (أو الأم إذا أردت) للإطارين 2 و 3 وأن الإطار 3 هو الأب للإطارين 4 و 5. وعلى سبيل المثال إذا احتوى الإطار 5 أو 4 على وصلة تشعبية هدفها القيمة _parent لتم تحميلها مكان الإطار 3... وهكذا الأمر بالنسبة للإطارين 1 و 2 بمقابل الصفحة الرئيسية.
وللتمييز بين هذه القيمة والقيمة _top فإن القيمة _top تقوم بالتحميل في المستوى الأول (الأعلى) دائماً وبغض النظر عن موقع الوصلة التشعبية.
ونعود الآن إلى صفحتنا. فلو أضفنا السطرين التاليين إلى ملف الوصلات التشعبية:
<A HREF="mainfile.html" TARGET="_top"><IMG SRC="mainpage.jpg"></A><BR>
<A HREF="htmintro.html" TARGET="_top"><IMG SRC="noframes.jpg"></A><BR>
لحصلنا على النتيجة المرجوة.
******
إلى الدرس الثاني عشر من دروس HTML. كما ترى من العنوان فقد اخترت أن يكون هذا الدرس خارجاً قليلاً عن نطاق الدروس السابقة من حيث المحتوى. فلن تجد هنا وسوماً محددة تستطيع حصرها تحت موضوع معين، بل وسوماً عامة وخصائص إضافية لوسوم ذكرت سابقاً. وإن كان الهدف من معظمها ترتيب الصفحة والتحكم بشكل محتوياتها. ولا أخفي عليك أني قصدت تأجيل بعضها حتى هذا الدرس مع أنه كان من الممكن إدراجها ضمن دروس سابقة، وخاصة الدرس الرابع (الفقرات). لكن حجّتي في عدم إدراجها في حينه أن هذه الوسوم لن يتم استخدامها ولن تُفهم طريقة عملها إلاّ عند استخدام وسوم أخرى تمّ شرحها في وقت لاحق بعد الفقرات مثل الصور والجداول. أما البعض الآخر ففضلت عدم حصرها ضمن أي درس على اعتبار أنها وسوم عامة لا تختص بأي موضوع. على أية حال يكفينا هذه المقدمة وأترك لك حرية تصنيفها كما يحلو لك. والآن لندخل مباشرة في الموضوع.
------------------------------------------
أترى هذا الخط الذي فصلت به هذه الفقرة عن الفقرة السابقة؟ إنه يسمى بلغة HTML بالمسطرة الأفقية Horizontal Rule وتستطيع إدراجه لتقسيم صفحتك بكتابة الوسم <HR> فقط لا غير. أكتب:
<HR>
ليظهر لديك هذا الخط:
-------------------------------------------
لكن هذا ليس كل شيء. لأنك تستطيع تحديد سُمك هذا الخط إذا أضفت له الخاصية SIZE وأتبعتها برقم يمثل هذا السُمك مثلاً:
<HR SIZE="5">
-------------------------------------------
<HR SIZE="1">
-------------------------------------------
<HR SIZE="10">
--------------------------------------------
كذلك يمكنك تحديد عرض الخط باستخدام الخاصية WIDTH والتي من الممكن أن تأخذ قيمة مطلقة أو نسبية
<HR WIDTH="80%">
-------------------------------------------
<HR WIDTH="400">
-----------------------------------------
<HR SIZE="5" WIDTH="60%">
----------------------------------------
ومن الخصائص الأخرى لهذا الخط خاصية المحاذاه ALIGN والتي تأخذ القيم center, left, right
<HR WIDTH="80%" ALIGN="center">
----------------------------------------
<HR WIDTH="400" ALIGN="left">
------------------------------------------
<HR SIZE="5" WIDTH="60%" ALIGN="right">
-----------------------------------------
وكما تلاحظ فإن هذا الخط يكتسب مظهراً غائراً ثلاثي الأبعاد وإذا أردت خطاً عادياً غير غائر فقم بإضافة الخاصية NOSHADE
<HR SIZE="5" WIDTH="60%" ALIGN="center" NOSHADE>
----------------------------------------
أما إذا كان لون هذا الخط لا يعجبك، فما من مشكلة إذ أنك تستطيع اختيار اللون الذي يعحبك من خلال الخاصية COLOR (تعمل فقط مع MS Explorer)
<HR SIZE="5" WIDTH="60%" ALIGN="center" COLOR="#FF0000" NOSHADE>
----------------------------------------
الوسم التالي في هذه المجموعة هو وسم الملاحظات <!-- ... --> ونستخدمه عند الحاجة لكتابة بعض الملاحظات الخاصة أو العبارات التوضيحية ضمن الملف والتي يقصد أن لا تظهر عند استعراض هذا الملف في المتصفح.
This is line one<BR>
<!-- This is line two --><BR>
and, this is line three<BR>
وهذه هي النتيجة
This is line one
and, this is line three
-----------------------------------------
من المؤكد أنك تعرف الوسم <BR> والذي يقوم بالتحكم في نهايات الأسطر (أي أنه ينهي السطر الحالي بحيث يظهر النص الذي يليه في سطر جديد). فهل تعلم أنه يوجد خاصية لهذا الوسم وهي CLEAR؟
لكي تتوضح لك طبيعة عمل هذه الخاصية، قم بمراجعة ما ذكرناه في الدرس الخامس عن الصور والرسومات، واستخدام الخاصية ALIGN التي تحدد موقع هذه الصور على الصفحة. حسناً، لقد إتفقنا في حينه على أن القيمة right توجه الصورة إلى يمين الصفحة وأن النص الذي يليها يظهر ملتفاً بعدة أسطر على الجهة اليسرى. وكذلك الأمر (بصورة معكوسة) عند استخدام القيمة left. وحتى لو استخدمنا القيمة bottom أو لم نقم بإضافة الخاصية ALIGN أصلاً، فسوف نجد أن النص الذي يليها يظهر بمحاذاة الحافة السفلى للصورة.
يتلخص عمل الخاصية CLEAR في منع النص من الإلتفاف على أي من جانبي الصورة.
وهي تأخذ القيم right التي تمنع ظهور النص إلاّ عند بداية الهامش الأيمن الفارغ بعد الصورة (أي بمنتهى البساطة تمنع ظهور النص والتفافه على الجهة اليسرى للصورة... أليست هذه العبارة أسهل للفهم؟!!) وبالتالي فإن هذه القيمة تستخدم عندما تكون قيمة ALIGN للصورة هي right.
وبنفس المبدأ لكن بصورة معكوسة نستخدم القيمة left والتي في نتيجتها تمنع إلتفاف النص على الجهة اليمنى من الصورة. وذلك عندما تكون محاذاة الصورة هي left
منطق معكوس... أليس كذلك؟ على أية حال إذا كنت تكرة هذه التعقيدات وتحب الطرق المختصرة مثلي، فاستخدم القيمة all التي تمنع الإلتفاف من جميع الجوانب.
ما رأيك أن نقتبس بعض الأمثلة من الدرس الخامس لنشاهد كيف تعمل مع إضافة هذه الخاصية؟ وسوف أدرج هذه الأمثلة كما هي نصاً وحرفاً أما الإضافات فهي المميزة باللون الأحمر
RIGHT
أما هذه القيمة فتؤدي إلى محاذاة الصورة إلى أقصى اليمين. مع التفاف النص الذي يليها على الجهة اليسرى ولعدة أسطر حسب ارتفاع الصورة.
<IMG SRC="image.jpg" ALIGN="RIGHT">
<BR CLEAR="right">
فإذا أضفنا الوسم <BR> مع الخاصية CLEAR="right" لوجدنا أنها منعت النص من الإلتفاف
والآن لنجرب استخدام القيمة left مع هذا المثال نفسه
RIGHT
أما هذه القيمة فتؤدي إلى محاذاة الصورة إلى أقصى اليمين. مع التفاف النص الذي يليها على الجهة اليسرى ولعدة أسطر حسب ارتفاع الصورة.
<IMG SRC="image.jpg" ALIGN="RIGHT">
<BR CLEAR="left">
نلاحظ أن لا فائدة من استخدام الوسم <BR> مع الخاصية CLEAR="left" فكل ما فعلته هو إضافة سطر فارغ أعلى النص
حسناً لنستخدم القيمة left في مكانها الصحيح، أي مع المحاذاة left
LEFT
هذه القيمة تؤدي إلى محاذاة الصورة إلى أقصى اليسار. مع التفاف النص الذي يليها على الجهة اليمنى ولعدة أسطر حسب ارتفاع الصورة.
<IMG SRC="image.jpg" ALIGN="LEFT">
<BR CLEAR="left">
الآن تعمل هذه القيمة كما يجب (لا شيء أفضل من وضع الوسم المناسب في المكان المناسب )
وأترك لك المجال لكي تجرب القيمة all بنفسك
******
من القواعد الإفتراضية للمتصفحات أن الأسطر في كل فقرة تلتف وتنقسم بصورة تلقائية حسب إستبانة الشاشة وعرض نافذة المتصفح. (هذه نعرفها من الدرس الأول). لكن لنقل أننا نريد من أحد الأسطر أن لا ينقسم مهما كان مقدار الإستبانة وعرض النافذة.
حسناً، كل ما علينا فعله هو وضع هذا السطر ضمن الوسوم
<NOBR> ... </NOBR>
وهي إختصار لـِ NO BReak أي (لا إنقسام).