holly_smoke
04-03-2001, 09:06 PM
تأليف صفحات ويب
لابد أن معظمكم تجول حتى الآن، في كثير من مواقع شبكة ويب، ومر أثناء ذلك، بصفحات أو مواقع أنشأها أشخاص بهدف التعريف بأنفسهم، أو بنشاطاتهم المختلفة، فأعجبته بعض الصفحات، أو قرر عدم زيارة بعضها الآخر!
فإذا رغبت أنت أيضاً، في إنشاء موقع أو صفحة شخصية، وليس لديك خبرة سابقة في هذا المجال، وتتساءل عن كيفية عمل ذلك؟ ومن أين تبدأ؟ ندعوك هنا إلى متابعة الجزء الأول، من مقالين، يقدمان معلومات مختصرة عن كيفية إنشاء صفحة على شبكة ويب، ويمكن أن تعتبرها خطوتك الأولى على هذا الطريق، فهيا بنا!
يتضمن الموقع عادة، عدداً من الصفحات، يحفظ كل منها في ملف منفصل، وكنا نشرنا في عدد أكتوبر/تشرين الأول 1997 مقالة، بعنوان "أنشئ صفحتك الخاصة مجاناً"، تحدثنا فيها، عن الطرق المتوفرة لإنشاء صفحة أو موقع، على شبكة ويب، وركزنا على المواقع التي توفر صفحات مجانية، وبيّنا ميزات وعيوب بعض هذه المواقع، وقارنّا بين خدماتها المختلفة، من ناحية السعة المتوفرة للصفحة، وأسلوب تحديثها، وسهولة الوصول إليها، وأعطينا مثالاً سريعاً، عن إنشاء صفحة مجانية على أحد المواقع المشهورة، وهو http://www.geocities.com.
لكن حجز الصفحة بحد ذاته، سيكون بداية لعملية إدارتها، التي تتضمن شقين رئيسيين، هما: تأليف محتوياتها وتحديثها، ثم إرسال تلك المحتويات إلى المزود الموجود على شبكة إنترنت. وتتم هاتان المهمتان بأدوات وأساليب مختلفة، تطرقنا إلى بعضها، في المقال المشار إليه، إلا أننا لم نتوسع في شرح كيفية إنشاء محتويات صفحات إنترنت، لضيق المساحة المخصصة لها. لذلك، أركز في هذا المقال وفي العدد المقبل، على هذا الجانب، عبر مثال لإنشاء صفحة شخصية. لكن، لا بأس أولاً، من إعادة ذكر أهم المواقع التي توفر إمكانية إنشاء الصفحات الشخصية المجانية حالياً، مع سعة الصفحة المجانية التي توفرها:
الموقع
سعة الصفحة المجانية
http://www.angelfire.com
5 ميجابايت
http://www.geocities.com
11 ميجابايت
http://www.sprec.com
غير محدود
http://www.tripod.com
11 ميجابايت
http://www.wbs.net
7 ميجابايت
تأليف محتويات صفحة على شبكة ويب:
من أين أبدأ؟
تتوفر طريقتان لتأليف الصفحات على شبكة ويب، أولهما استخدام لغة HTML، والثانية استخدام أحد محررات صفحات ويب، فأيهما تختار؟
لا بد لك كمبتدئ، أن تختار الطريقة الأسهل، وهي استخدام أحد محررات صفحات ويب. لكن دعني أولاً أن أرضي فضولك لمعرفة ماذا تعني لغة HTML؟ وأبين لك لماذا يعتبر التعامل معها الطريقة الأصعب لتأليف صفحات ويب؟
عندما يجلب برنامج التصفح صفحة من موقع على شبكة ويب، ويعرضها على الشاشة، فإنه يجلب ملفاً نصياً، مكتوباً بلغة HTML، مع نص الصفحة ذاته، وبعض ملفات الصور والملتيميديا، أحياناً. يصف النص المكتوب بلغة HTML، للمتصفح، طريقة توضع نص الصفحة، وتتابع فقراته، وما هي عناوينه، وأماكن الصور فيه … إلخ، بواسطة ما يسمى "الواصفات" (tags)، وذلك بالشكل التالي:
<tag>text<\tag>
مثال ذلك السطر التالي:
<h1>صفحتي الشخصية<\h1>
تبين الواصفة <h1>، للمتصفح، كيف يظهر النص "صفحتي الشخصية"، ولهذا، يجب لتعلم تأليف الصفحات بلغة HTML، تعلم معنى عشرات الواصفات المختلفة. وهذا هو السبب الرئيسي الذي يجعل التأليف بهذه اللغة صعباً، إلا أنها توفر مرونة كبيرة وقوة في تأليف صفحات ويب، لذا يستخدمها المحترفون في هذا المجال.
استخدام محررات ويب أسهل، لأنها تسمح بتأليف الصفحات، بدون الدخول في تفاصيل استخدام الواصفات، وبشكل يشبه تنسيق الصفحات في أحد معالجات الكلمات. والواقع أن محررات ويب هي معالجات كلمات أصلاً، أضيفت لها بعض الإمكانيات الخاصة بتحرير صفحات ويب، بالإضافة إلى أنه توجد معالجات كلمات، يمكن استخدامها لتأليف صفحات ويب بسيطة، كبرنامج مايكروسوفت وورد، مثلاً.
أي محررات صفحات ويب أختار؟
يفضل، كمبتدئ، اختيار أبسط محرر لصفحات ويب، الذي يوفر الإمكانيات الأساسية، ويدعم استخدام اللغة العربية، ويفضل أيضاً، أن يكون مجانياً، أليس كذلك؟
وهذا ما جعلنا نختار استخدام برنامج تحرير صفحات ويب FrontPage Express، وهو إصدارة مجانية من برنامج FrontPage، يرفق بالإصدارة الكاملة من برنامج إنترنت إكسبلورر 4.0، التي وزعناها في القرص الهدية لعدد مايو/أيار 1998، والذي يمكن استجلابه أيضاً، من موقع مايكروسوفت التالي: http://www.microsoft.com/ie/download، (أو استجلاب تحديث للإصدارة المصغرة التي توجد لديك)، ويجب تركيب الإصدارة الكاملة من إنترنت إكسبلورر 4.0، حتى يتم تركيبه.
قبل أن تبدأ بتصميم الصفحة:
لابد من أن تخطط قليلاً، قبل أن تبدأ بتصميم الصفحة، وبما أننا نقترح عليك مثال، إنشاء صفحة شخصية، فكر ماذا يمكن أن تقدم من معلومات، وصنفها ضمن فقرات رئيسية، وسجل عناوين تلك الفقرات. يمكن أن تعرض نبذة عن سيرتك الشخصية، وتتحدث عن اهتماماتك وهواياتك، وتقدم لائحة ارتباطات بالصفحات المفضلة لديك، وتنشئ سجلاً لزوار صفحتك، وغير ذلك. إذا كنت تخطط لإنشاء صفحة أو موقع أعقد من ذلك، يفضل أن تضع مخططاً عاماً للموقع، وتفكر في عرض المعلومات ضمن عدة صفحات.
البدء بالعمل:
أولاً: ركب برنامج FrontPage Express، وشغله. لا حاجة لأن تكون متصلاً بإنترنت، أو حتى أن تكون حجزت صفحة مجانية أو مدفوعة على أحد المواقع، لكي تبدأ بتأليف صفحتك، إذ ستحفظها على القرص الصلب أولاً، لتجربتها قبل إرسالها إلى المزود على شبكة إنترنت. يفضل أن تنشئ مجلداً جديداً، تخصصه لحفظ ملفات صفحات ويب التي تؤلفها.
عندما تشغل برنامج FrontPage Express، ستلاحظ أن واجهته مشابهة لواجهات برامج معالجة الكلمات، والتعامل معه لا يختلف عنها مطلقاً. يفتح البرنامج عند تشغيله، ملفاً لصفحة HTML، باسم Untitled Normal Page.
تتلخص طريقة العمل أثناء تأليف الصفحات، بإدخال وتنسيق المعلومات، ثم حفظها في ملف HTML، عبر هذا البرنامج، ثم فتح الملف ذاته بالمتصفح، لمشاهدة شكل الصفحة كما ستظهر فعلياً على إنترنت، والتأكد أنها تعمل بشكل صحيح.
ابدأ بإدخال النص التالي:
صفحة أحمد شهم شريف (ضع اسمك بدلاً من اسمي طبعاً!)
المحتويات:
السيرة الذاتية
الاهتمامات والهوايات
المواقع المفضلة
اتصلوا بي
نسق العبارات السابقة بالشكل الذي تراه مناسباً، مستخدماً أزرار الأدوات، المشابهة لأزرار أدوات برنامج مايكروسوفت وورد. يبين (الشكل 1 ) مثالاً على إحدى طرق التنسيق المقترحة.
يمكنك أيضاً، إدخال العبارات باللغة الإنجليزية أو بلغة لاتينية أخرى إذا شئت، وتعبر هذه العبارات عن عنوان الصفحة، بالإضافة إلى عناوين محتوياتها. احفظ الصفحة باختيار File/Save، فيظهر البرنامج صندوق حوار يطلب فيه اسم الملف وموقعه في مربع Page Location، أدخل الاسم والموقع الذي تريده. أما مربع Page Title، فهو يطلب ما يسمى عنوان الصفحة (Title)، وهو النص القصير الذي يظهر على رأس نافذة المتصفح عندما تفتحها، ويظهر في لائحة العلامات المرجعية (bookmark)، ويجب اختياره بحيث يصف محتويات الصفحة الشخصية باختصار، (مثلاً، صفحة أحمد شهم شريف). لمشاهدة الصفحة كما ستظهر على ويب، شغل المتصفح الذي تستخدمه، (يجب أن تشغل متصفحاً يدعم اللغة العربية، إذا استخدمت اللغة العربية)، وافتح الصفحة من المجلد الذي حفظتها فيه، (باستخدام File/Open في برنامج إنترنت إكسبلورر، مثلاً)، فتشاهدها كما ستعرض على شبكة ويب.
مبروك!
لقد ألفت صفحتك الأولى، وهي محفوظة على قرصك المحلي، بانتظار أن ترسلها (upload) إلى موقع صفحتك لاحقاً.
لا تبدو تلك الصفحة مثيرة، حتى الآن، أليس كذلك؟! لنتابع إذاً، تأليف الصفحة، بإضافة محتويات جديدة إليها، وإعطائها شكلاً أكثر أناقة.
المزيد من الأناقة:
بما أن الصفحة التي تؤلفها باللغة العربية، فهي تقرأ من اليمين لليسار، وهذا ما يجب تعيينه، ليعرضها المتصفح بشكل صحيح، ولتسهيل إدخال المعلومات، وترتيب الكلمات وعلامات الترقيم فيها. انقر بالزر الأيمن على أي مكان في الصفحة، واختر Page Properties، من القائمة، ثم اختر من صندوق الحوار، لسان التبويب General، واختر اتجاه القراءة RTL، من اللائحة المنسدلة Document Reading Direction. اذهب إلى لسان تبويب Background، غير لون أرضية الصفحة، ولون النص إلى الألوان المرغوبة لديك، بالاختيار من اللائحتين المنسدلتين Background وText، ثم انقر زر "موافق". ضع المشيرة في السطر التالي لعنوان الصفحة، واختر من شريط القوائم Insert/Horizontal Line، ليظهر خط أفقي تحت العنوان. اختر مجموعة العناوين التي تبدأ من "السيرة الذاتية" حتى "اتصلوا بي"، ثم انقر على الزر الموجود على شريط الأدوات، والمسمى Bulleted List، فتصبح الصفحة كما تبدو في (الشكل 2).
أصبحت أفضل، أليس كذلك؟!
احفظ الملف بشكله الحالي بدون أن تغلقه، وبدل إلى برنامج التصفح الذي مازال يعرض النسخة السابقة من الصفحة. حدث الصفحة (بنقر زر Refresh، في إنترنت إكسبلورر)، وسيحمل المتصفح النسخة الجديدة مباشرة. لا تنس أن تكرر هذه الطريقة في المراحل التالية، كلما عدلت شيئاً على الصفحة، لتتأكد من أنها تعرض بالطريقة التي تتوقعها.
المزيد من المرح:
هل تريد أن تحيي زوار صفحتك بمقطع من موسيقى تحبها؟ وأن تعطي صفحتك جواً خاصاً بك، بإضافة أرضية معينة؟
بسيطة …!
عد إلى خصائص الصفحة مرة أخرى، ولسان التبويب General، واذهب إلى الإطار Background Sound، أدخل مسار وموقع ملف الصوت في المستطيل Location، أو انقر على زر Browse، ثم اختر From File، وانقر Browse، للوصول إليه عبر صندوق الحوار القياسي لفتح الملفات. يمكن أن يكون هيئة الملف الصوتي WAV، أوMIDI، أوAIFF، أو AU، وننصح باستخدام الهيئة MIDI، أو AU، لأن ملفاتها أقل حجماً من الملفات الصوتية الأخرى، بالنسبة لزمن العزف ذاته. يمكن تكرار عزف الملف الصوتي عدداً تختاره من المرات، بزيادة عدد الدورات في عداد Loop، ضمن إطار Background Sound، أو تكرار عزفه باستمرار، باختيار مربع الاختيار Forever. تذكر أنه يجب إرسال هذا الملف الصوتي إلى مزود إنترنت الذي سترسل إليه صفحتك، ويجب حفظه على الدليل ذاته الذي ستحفظها فيه.
لا بد أنك خمنت الآن من أين يمكن أن تضيف أرضية للصفحة!
نعم، عبر خصائص الصفحة أيضاً، ومن لسان التبويب Background. انقر مربع الاختيار Background Image، ثم أدخل مسار واسم ملف الصورة أو انقر الزر Browse للوصول إليه، ويمكن نقر مربع الاختيار Watermark، لجعل الصورة ثابتة بحيث ينزلق النص فوقها أثناء زلق الصورة، وهي ميزة تستخدم مع الصور الكبيرة التي تملأ كامل الشاشة. يجب أن يكون ملف صورة الأرضية بهيئة JPG أو GIF، لأنهما الهيئتان اللتان يمكن أن يقرأهما المتصفح، واختيرتا لصفحات ويب لأنهما تأخذان حجماً أقل، وترسمان بسرعة أكبر، وإذا لم تكن الصورة بإحدى هاتين الهيئتين، يوفر FronPage Express، إمكانية التحويل إلى هيئة GIF، عند حفظ الملف. اختر صورة صغيرة يمكن تكرارها، لأن البرنامج يطلي بها أرضية الصفحة تلقائياً. ولا تنس أنها يجب أن ترسل كملف مستقل إلى مزود ويب، الذي سيحفظ الصفحة.
هل نسيت محتويات الصفحة؟
جعلنا شكل الصفحة، أكثر جاذبية حتى الآن، وحان الوقت أن نلتفت إلى مضمونها قليلاً. سيتوقع زائر الصفحة، أن ينقر على عبارة "السيرة الذاتية"، مثلاً، للانتقال إلى معلومات عن السيرة الذاتية الخاصة بي، (أو سيرتك الذاتية، في صفحتك)، ومثل ذلك بالنسبة للعناوين الأخرى، فكيف تجعل الصفحة بهذا الشكل؟
خذ رشفة من فنجان قهوتك، ونفساً عميقاً، وتابع الخطوات التالية:
أدخل خطاً أفقياً آخر بعد قائمة العناوين، مشابهاً للخط الذي يلي العنوان الرئيسي.
أدخل عبارة "السيرة الذاتية"، بعد ذلك الخط الأفقي.
اختر عبارة "السيرة الذاتية" الجديدة، وانقرها بالزر الأيمن للماوس، واختر من القائمة Font Properties، ثم اختر ما تراه مناسباً من قياس الخط ولونه، عبر صفحة خصائص الخط.
تأكد أنك ما تزال تختار عبارة "السيرة الذاتية" الجديدة، ثم اختر من شريط القوائم، قائمة Edit، واختر منها Bookmark.
أدخل في صندوق الحوار اسم العلامة المرجعية MyCV، مثلاً، وانقر زر Ok. ستلاحظ ظهور خط منقط تحت عبارة "السيرة الذاتية".
انتقل إلى عبارة "سيرتي الذاتية" الأولى في الأعلى، واخترها، ثم انقر على قائمة Insert، واختر Hyperlinks، فيظهر صندوق حوار، اختر منه لسان التبويب Open Pages، اختر اسم الصفحة التي تحررها، من لائحة Open Pages، ثم اختر من اللائحة المنسدلة Bookmark، العلامة المرجعية MyCV، ثم انقر "موافق". ستلاحظ تغير لون العبارة إلى لون يشير إلى وجود ارتباط عند هذه العبارة، ويظهر تحتها خط متصل.
كرر هذا الإجراء بالنسبة للعبارات الباقية، مع اختيار أسماء مختلفة للعلامات المرجعية، وإدراج خطوط أفقية بين الفقرات المختلفة.
احفظ الملف، ثم اذهب إلى المتصفح الذي تستعمله، حدث الصفحة، ولاحظ النتيجة. سيؤدي النقر على أي من العناوين إلى الانتقال إلى الفقرات المتعلقة بها مباشرة.
لكن أين محتويات الفقرات ذاتها؟ أمر بسيط!، عد إلى ملف الصفحة في FrontPage Express، وأدخل النصوص التي تريدها، تحت عناوين الفقرات التي أنشأتها، ونسقها مثلما تفعل في أي معالج كلمات عادي، ثم احفظ الصفحة مرة أخرى.
لا، انتظر، مهلاً! نسينا أن نبين لك كيفية إنشاء لائحة الارتباطات بالمواقع المفضلة؟ وكيف يمكن إنشاء ارتباط بعنوان البريد الإلكتروني، في قسم "اتصلوا بي"؟
لإنشاء لائحة الارتباطات بالمواقع المفضلة، أدخل أسماء المواقع التي تريدها، على شكل لائحة، ثم كرر ما يلي بالنسبة لكل اسم منها:
اختر اسم الموقع، اسم المجلة "مجلة إنترنت العالم العربي"، مثلاً، ثم اخترInsert\Hyperlink من شريط القوائم.
اذهب إلى لسان التبويب World Wide Web، في صندوق الحوار الظاهر.
اختر http:، من لائحة Hyperlink Type،
أدخل في مستطيل URL، عنوان الموقع الذي حددت اسمه، أي العنوان http:\\www.iawmag.com، في هذا المثال، ثم انقر زر "موافق"، وتنتهي، بذلك، العملية. حدّث الصفحة في المتصفح ولاحظ النتيجة.
كي تنشئ ارتباطاً ببريدك الإلكتروني، في قسم "اتصلوا بي"، أدخل كلمة "بريدي الإلكتروني"، مثلاً، واخترها، ثم افتح صندوق حوار إنشاء ارتباط (Insert\Hyperlink) واذهب إلى لسان التبويب World Wide Web، واختر mailto: من لائحة Hyperlink Type، ثم أدخل عنوان بريدك الإلكتروني في مستطيل URL، وانقر "موافق".
وماذا إذا أردت إضافة صور، ومقاطع فيديو؟
الأمر بسيط، أيضاً!
يمكن أن تضيف بعض صورك الشخصية، أو صور عائلتك، أو بعض المواقع التي تعجبك، بالإضافة إلى بعض مقاطع الفيديو القصيرة. من الأفضل أن تجهز ملفات الصور بحيث تكون بهيئة JPG، أو GIF، أيضاً، وملفات مقاطع الفيديو، بهيئة AVI، فيجب إرسال هذه الملفات إلى مزود ويب، لاحقاً، عند إرسال الصفحة، لذلك تذكر أنه يجب أن لا يتجاوز مجموع حجم هذه الملفات، مع حجم ملف HTML، الخاص بالصفحة، وملفي الأرضية، والموسيقى المرافقة، حجم السعة المخصصة لك على مزود ويب.
ضع المشيرة في المكان الذي تريد أن تظهر الصورة فيه، واختر Insert/Image، ثم اختر From File، وأدخل مسار واسم الملف في المستطيل، أو انقر الزر Browse، لفتح صندوق حوار فتح ملف، والوصول إلى ملف الصورة بالانتقال إلى المجلد الذي يحتويه، أخيراً، انقر زر "موافق" لإدراج الصورة. إذا نقرت الصورة بعد إدراجها بزر الماوس الأيمن، يمكنك اختيار Image Properties من القائمة، لتظهر خصائص الصورة التي تسمح لك بالتحكم بقياسها، وجودتها.
لإدراج مقطع الفيديو في الصفحة، ضع المشيرة على المكان الذي تريد أن يظهر فيه المقطع، واختر Insert/Video، ثم أدخل اسم ملف الفيديو ومساره مباشرة، أو انتقل بعد النقر على زر Browse. انقر بالزر الأيمن على صورة ملف الفيديو، واختر خصائص الصورة، ثم اختر لسان التبويب Video، لتتمكن من تحديد خيارات تشغيل الملف، الموجودة ضمن إطار Repeat، كتشغيله باستمرار Forever، أو لعدد معين من المرات يفصل بينها تأخيرات زمنية معينة، أو تعيين بدء تشغيله من إطار Start، عند فتح الصفحة On file Open، أو عند مرور الماوس فوق صورته On Mouse Over (لا يدعم إنترنت إكسبلورر 3.02 هذه الميزة)
وماذا بعد؟
ما يزال بإمكانك تحسين صفحتك، بإضافة بعض المكونات الأخرى، كبريمجات جافا، وكائنات ActiveX، وأشياء أخرى، وهذا ما سنتركه للقائنا المقبل. لكن لا بد أنك ستتساءل: كيف يمكن أن أرسل صفحتي وملفاتها المرافقة إلى إنترنت؟
سنورد مثالاً على ذلك في العدد المقبل، أما إذا كنت مستعجلاً، وتريد أن تفعل ذلك الآن، اتصل بإنترنت أولاً، وزر المواقع التي توفر صفحات مجانية، وقرر الموقع الذي تريد أن تنشئ صفحتك لديه، وستجد لديه شرحاً عن كيفية إرسال الملفات إليه، وتأكد من قراءة الشروط التي تضعها الجهة صاحبة الموقع، لتسمح لك بنشر صفحتك على مزودها. فبعضها يفرض عليك المحافظة على إعلاناته، على صفحتك، وربما يتطلب منك ذلك إضافة بعض أسطر لغة HTML إليها!
لا تجزع! فعلى الرغم من أنك لم تؤلف صفحتك بهذه اللغة، فإن برنامج FrontPage Express، فعل ذلك نيابةً عنك. إذا كان ملف صفحتك مفتوحاً، اختر View/HTML من شريط القوائم، فيعرض البرنامج، نافذة فيها نص صفحتك بلغة HTML، يمكن أن تلصق فيها، أي نص بلغة HTML، كما يطلب الموقع الذي يوفر لك مكاناً مجانياً على إنترنت. أغلق النافذة بالنقر على زر Ok، ثم احفظ الملف بحالته الجديد، وأرسله إلى مكان الصفحة، بالطريقة الخاصة بالموقع الذي اخترته.
من خلال مثال إنشاء صفحة شخصية. واستخدمنا لذلك برنامج تحرير صفحات ويب Front Page Express المجاني، الذي تقدمه شركة مايكروسوفت مع رزمة المتصفح إنترنت إكسبلورر4، فبدأنا بإنشاء وتجريب الصفحة على القرص الصلب المحلي الموجود في الجهاز ذاته، بدون الاتصال بشبكة إنترنت. وتعلمنا كيف ننشئ قائمة رئيسية بمحتويات الصفحة، ونربط بين عناصر تلك القائمة ومحتويات الصفحة ذاتها، ثم ندرج في الصفحة ارتباطات بالمواقع المفضلة، وارتباطاً بعنوان البريد الإلكتروني. ولم ننس مظهر الصفحة والمؤثرات الأخرى، فرأينا كيف نعين خلفية رسومية وموسيقية لها، ونضيف إليها صورة أو مقطع فيديو. نظرنا أخيراً إلى نص لغة HTML، الذي ولده محرر صفحات ويب Front Page Express خلال تأليفنا للصفحة، وذكرنا أنه يمكن تعديله مباشرة عند الحاجة.
إرسال الصفحة إلى مزود ويب
قبل أن نتابع في تحسين وتطوير شكل الصفحة الشخصية ومحتوياتها، سنقدم مثالاً على كيفية حجز الدليل المجاني على مزود الجهة التي توفر خدمة استضافة الصفحات المجانية، ثم إرسال الصفحة إليه.
سنفترض أنك نفذت معظم الخطوات التي وردت في الجزء الأول المنشور في العدد السابق، فحصلت على ملف HTML، باسم معين، وليكن myhomepg.htm، واستخدمت ملفاً باسم backgndpic.gif كصورة لأرضية الصفحة، وملف خلفية موسيقية باسم music.mid. كل ما عليك اختياره الآن، هو الجهة التي ستستضيف صفحتك.
أوردنا في العدد السابق لائحة بعناوين بعض المواقع التي توفر خدمة استضافة الصفحات المجانية. بادر بزيارة تلك المواقع، واطلع على الخدمات التي تقدمها، والشروط التي تضعها، ولاحظ سعة الدليل الذي توفره. ولاحظ أسلوب تعيين عناوين الصفحات المجانية، إذ أن بعضها طويل، أو يحتوي على أرقام كثيرة، مما يجعلها صعبة الإدخال لمن يريد زيارة صفحتك. تختلف أساليب حجز الصفحة المجانية (أي إنشاء دليل جديد على أقراص المزود البعيد) وإرسالها من جهة إلى أخرى، إلا أن معظم المواقع التي توفر ذلك تطلب أولاً ملء نموذج معلومات عن طالب الخدمة، ثم ترسل له كلمة سر، تمكنه من الدخول إلى أدوات إدارة وتحديث صفحته. اخترنا الموقع http://www.tripod.com كمثال، لنشرح عملياً كيفية حجز صفحة شخصية، وهو يوفر لكل عضو من أعضائه، سعة 11 ميجابايت للصفحة مجاناً. عضوية الموقع مجانية أيضاً، وكل ما يجب فعله للحصول عليها، هو الاتصال بإنترنت، والانتقال إلى الموقع http://www.tripod.com، والنقر في صفحته الرئيسية على زر Free Membership، ثم تعبئة الحقول المطلوبة، التي تتضمن طلب عنوان البريد الإلكتروني، والنقر على زر Join. إذا فعلت ذلك، ستتلقى رسالة في صندوق بريدك الإلكتروني، تتضمن كلمة السر، التي تسمح لك بالدخول إلى الموقع كعضو من أعضائه.
ملأت نموذج الاشتراك، واخترت اسم المستخدم Shahem، فأصبحت أحد أعضاء الموقع وأصبح عنوان الدليل الخاص بي كالتالي: http://members.tripod.com/~Shahem. فإذا فعلت مثلي، وأصبحت أحد أعضاء الموقع، فأهلاً بك أولاً! ثانياً، استخدم كلمة السر التي وصلت إلى عنوان بريدك الإلكتروني، للدخول إلى الموقع كأحد أعضائه، وذلك بالنقر على Members: log in، وإدخال المعلومات المطلوبة، فتجد أنه حجز لك دليلاً بسعة أحد عشر ميجابايت، وعنوانه http://members.tripod.com/~XXXX، حيث XXXX اسم المستخدم الذي اخترته. إذا كنت جاهزاً لإرسال الصفحة إلى موقعك، انقر Free Home Builder، فتنتقل إلى صفحة أدوات تأليف وإدارة الصفحات المجانية التي يوفرها الموقع. لا حاجة لاستخدام أدوات تأليف الموقع، لأنها تجبرك على البقاء متصلاً بالشبكة، خلال وقت التأليف. يضاف إلى ذلك أنك اخترت سابقاً محرر Express Frontpage لتأليف صفحتك، (أو بالواقع نحن من اختار ذلك!)، وهو يؤدي تلك المهمة بأسلوب أفضل. انقر على الارتباط homepage housekeeper، للانتقال إلى صفحة إرسال الملفات إلى المزود البعيد، والتي ستظهر لك أيضاً، عنوان صفحتك، ومعلومات عن السعة التي استخدمتها، والسعة المتبقية، ولائحة أسماء الملفات الموجودة في دليلك حالياً، والتي يفترض أن تكون فارغة أول مرة، لأنك لم ترسل أي ملف إلى المزود البعيد حتى الآن.
هل أنت مستعد للحظة المنتظرة؟ لحظة وصول صفحتك إلى إنترنت؟! اختر إذاً من لائحة Things you can access from the Homepage Housekeeper، الوظيفة Upload files، ثم انقر الزر go!، وستنتقل إلى صفحة إرسال الملفات إلى المزود البعيد، التي تسمح بإرسال خمسة ملفات دفعة واحدة.
أدخل في المستطيل File1: اسم ملف الصفحة التي ألفتها (والتي افترض أن اسمها myhomepg.htm)، مع مساره، أو اختره من القرص الصلب بالنقر على زر Browse، والانتقال إلى مجلده، ثم أدخل بالطريقة ذاتها، اسم ملف صورة الخلفية (backgndpic.gif) في المستطيل File 2:، واسم ملف الموسيقى (music.mid) في المستطيل File3:، وغيرها من الملفات التي استخدمتها في المستطيلات File 4:، وFile 5:.
انقر الزر Upload، وانتظر قليلاً إلى أن يتم إرسال ملف الصفحة والملفات الأخرى. لقد أصبحت صفحتك على الشبكة! تأكد من ذلك بتشغيل نسخة أخرى من المتصفح الذي تستخدمه، وإدخال عنوان صفحتك، (http://members.tripod.com/~XXXX/myhomepg.htm، مثلاً) لتجدها جزءاً من إنترنت. ماذا تنتظر! أسرع واتصل بأصدقائك وأخبرهم عنها!
هل تلاحظ أن أرضية الصفحة أو بعض ملفات الصور، أو الخلفية الموسيقية لا تعمل عندما أصبحت صفحتك على المزود البعيد، بينما كانت تعمل بشكل جيد على قرصك المحلي؟ ماذا تفعل؟!
تأكد أولاً من أنك أرسلت جميع ملفات الصور والصوت التي استخدمتها إلى المزود البعيد، وتأكد أن المسارات في خصائص ملفات الصور والصوت، في الصفحة لا تتضمن سوى أسماء الملفات ذاتها، (أي يكفي ذكر الاسم backgndpic.gif، مثلاً، في المستطيل ضمن لسان التبويب Background، في خصائص الصفحة)، إذ يجب أن تقع تلك الملفات في دليل ملف الصفحة (myhomepg.htm) ذاته على المزود البعيد، وإذا حدد له مسارات مختلفة (كالمسارات الموجودة على قرص الصلب)، فإنه سوف يحاول إرسال ملفات الصور والصوت الموجودة في صفحتك من أدلة غير موجودة عليه أصلاً. عدل مسارات ملفات الصور والصوت في ملف myhomepg.htm من صندوق حوار الخصائص لكل منها، باستخدام برنامج Frontpage Express، بحيث لا تحتوي إلا على أسماء الملفات ذاتها، ثم أرسل الملف myhomepg.htm إلى المزود البعيد مرة أخرى.
هل تكفي صفحة واحدة؟
لابد أنك لاحظت أن معظم مواقع ويب لا تتألف من صفحة واحدة تحتوي على جميع المعلومات المتوفرة في الموقع، بل تبدأ بصفحة رئيسية (Homepage)، يمكن التفرع منها إلى الصفحات الأخرى (شكل 1)، والهدف من ذلك تسريع تحميل الصفحة الرئيسية، لأن محتوياتها في هذه الحالة، تقتصر على فهرس أو قائمة بارتباطات للصفحات الأخرى. يسهّل بناء الموقع بهذا الأسلوب من عملية تحديث معلوماته، وهو أمر لا بديل له بالنسبة للمواقع الكبيرة. يعطى ملف الصفحة الرئيسية، عادة، الاسم index.htm، أو default.htm، وهما اسما الملفين اللذين يبحث عنهما المزود البعيد، عندما يطلب منه الانتقال إلى دليل معين، بدون أن يذكر له اسم الملف الذي يطلب إرساله. فإذا أدخلنا، في حالة الموقع الذي أنشأناه، العنوان http://members.tripod.com/~Shahem فإن المزود البعيد سيحاول البحث عن ملف باسم index.htm، داخل هذا الدليل ويرسل محتوياته للمتصفح. فإذا لم يجده، فإنه يرسل قائمة ارتباطات بأسماء الملفات المتوفرة في ذلك الدليل، لكن من الأفضل الاستفادة من تلقائية البحث وإرسال محتويات ملف index.htm (بالنسبة لمزودات يونيكس)، أو ملف defualt.htm، (بالنسبة لمزودات ويندوز إن.تي)، وإعفاء زائري الموقع من ضرورة كتابة اسم ملف الصفحة الرئيسية، بالشكل members.tripod.com/~Shahem/myhomepg.htm، إذ يكفي عندها إدخال members.tripod.com/~Shahem.
لنبدأ بإعادة تنظيم الصفحة الشخصية بهذا الأسلوب، بحيث نجعل كل قسم من محتوياتها ضمن صفحة منفصلة. غير اسم الملف myhomepg.htm إلى index.htm على القرص الصلب، وشغل برنامج Frontpage Express، وحمله، ثم أنشئ ملفاً جديداً، باختيار File/New، من قائمة البرنامج، ثم اختيار النموذج Normal Page ثم OK. انقل محتويات القسم "سيرتي الذاتية" من الصفحة الرئيسية، إلى الصفحة الجديدة مستخدماً أوامر القص والنسخ من قائمة Edit، كما تفعل في برامج معالجة النصوص، ثم احفظ الصفحة الجديدة على القرص الصلب، باسم myvcpg.htm مثلاً، واحفظ التغييرات التي أجريتها على الملف index.htm. كرر الأمر ذاته بالنسبة لبقية أقسام الصفحة الرئيسية، فيصبح لديك الملفان: myhobbypg.htm لصفحة الاهتمامات والهوايات، وmyfavoritepg.htm للائحة الارتباطات، واترك الارتباط بعنوان بريدك الإلكتروني على الصفحة الرئيسية. لا تنس أن تعين عنوان صفحة (Title) مناسباً، لكل ملف HTML جديد أنشأته، وأن تغير تنسيق النصوص فيه، لكي يتناسب مع وضعه الجديد. اجعل العنوان "السيرة الذاتية" في ملف mycvpg.htm، في وسط السطر، مثلاً، وزد قياس خطه، واحذف العلامة المرجعية MyCV المرتبطة به، بالنقر بالزر الأيمن للماوس عليها، واختيار Bookmark Properties، وحذف كلمة MyCV من صندوق الحوار، ثم النقر على OK. يمكن اختيار أرضيات رسومية وخلفيات موسيقية للصفحات الفرعية تختلف عن أرضية وموسيقى الصفحة الرئيسية، ويتوفر على إنترنت عشرات المواقع التي توفر تلك الرسوميات والأصوات مجاناً. نورد بعض عناوين تلك المواقع في الجدول 1، لكن إذا لم تجد ضالتك فيها، يمكنك تصميم رسومياتك الخاصة، باستخدام أي من برامج الرسم المتوفرة، وحفظها بهيئة GIF، أو JPG، لكي تتمكن من استخدامها في تأليف صفحات ويب.
يجب تغيير الارتباطات الموجودة في قائمة المحتويات على الصفحة الرئيسية، لتشير إلى عناوين الصفحات، بدلاً من العلامات المرجعية التي كانت موجودة في الصفحة ذاتها. إليك مثال عن كيفية فعل ذلك لأحد الارتباطات:
انقر على الارتباط "السيرة الذاتية" بالزر الأيمن للماوس، واختر Hyperlink Properties.
اختر عنوان الصفحة الرئيسية من لسان التبويب Open Pages، ومن قائمة Open Pages.
انتقل إلى لسان التبويب World Wide Web، واختر نوع الارتباط Hyper Link Type، بحيث يكون http:.
أدخل عنوان URL، بحيث يبدأ بعنوان موقعك، وينتهي باسم ملف السيرة الذاتية، بالشكل التالي http://members.tripod.com/~XXXX/mycvpg.htm، مثلاً، إذا كنت مشركاً في موقع tripod، حيث XXXX، تعبر عن اسم المستخدم الذي اخترته.
كرر الإجراء ذاته لبقية الارتباطات، بحيث يشير كل منها إلى الملف الذي يخصه. واحفظ هذه التغيرات التي أجريتها على ملف الصفحة الرئيسية index.htm، ثم اتصل بإنترنت وأرسل ملفات الصفحات الجديدة mycvpg.htm، وmyhobbypg.htm، وmyfavoritepg.htm، إلى المزود البعيد، بالإضافة إلى الإصدارة الجديدة من ملف الصفحة الرئيسية index.htm، وأية ملفات رسومية أو صوتية أخرى استخدمتها، واحذف ملف الصفحة الرئيسية القديم myhomepg.htm من المزود البعيد، (مستخدماً أمر الحذف من صفحة homepage housekeeper، إذا كنت قد اشتركت في موقع Tripod). تأكد أخيراً، من صحة عمل تلك الارتباطات، بزيارة موقعك والانتقال من الصفحة الرئيسية إلى كل من الصفحات الفرعية. ألا يبدو موقعك الآن، أكثر احترافاً؟!
الأزرار
لا يكفي أن يحتوي موقعك على المعلومات الصحيحة والمرتبة، إذ أن مظهره ورسومياته أمران مهمان أيضاً، فماذا يمكن أن تفعل لتحسن من مظهر موقعك؟ إليك بعض الاقتراحات: لماذا لا تحول القائمة الموجودة على الصفحة الرئيسية إلى قائمة أزرار بدلاً من قائمة نصية؟ وتضيف رسوميات متحركة إلى بعض الصفحات؟ وأزرار رجوع من الصفحات الفرعية إلى الصفحة الرئيسية؟
هيا نفعل ذلك!
لنبدأ بالأزرار.. معظم الأزرار التي تراها على صفحات ويب رسوم مرتبطة بصفحات أخرى، يضيف إليها مؤلفو الصفحات شيفرة برمجية بلغة CGI (Common Gateway Interface)، أو JavaScript لمحاكاة حركة ضغط الزر الفيزيائي، بالتبديل بين رسمين مختلفين للزر ذاته. ويوجد نوع آخر من الأزرار تحاكي حركة ضغط الزر أيضاً، والتي تعتمد على ما يسمى بريمجات جافا (Jave Applets). لكن، لن ندخل في تفاصيل كيفية برمجة الأزرار المتحركة، فتلك مسألة تحتاج لشرح منفصل، يمكن أن نقدمه في أعداد مقبلة، وسنكتفي حالياً بالأزرار الساكنة. يمكن تصميم الأزرار بالشكل الذي ترغبه، باستخدام أي من برامج الرسوميات المتوفرة، إلا أننا ننصحك بجلب الأزرار من أحد مواقع إنترنت الذي يوفرها مجاناً (انظر جدول 1)، وتعديلها بالشكل الذي ترغبه.
جلبنا من الموقع http://www.webwider.com/syzone/test/button1.shtml مجموعة من ملفات الأزرار، ثم أضفنا عليها الكلمات العربية لقائمة الصفحة الشخصية باستخدام برنامج تحرير الرسوميات Paint Shop Pro، (لا تحتاج عملية جلب ملف الزر، سوى النقر على صورته بالزر الأيمن للماوس، واختيار Save as Picture، في متصفح إنترنت إكسبلورر). سمينا الملفات bttn_mycv.gif لزر "السيرة الذاتية" وbttn_hobby.gif لزر "الهوايات"، وbttn_myfav.gif، لزر المواقع المفضلة.
فإذا فعلت ذلك أيضاً، افتح الملف index.htm، ببرنامج Frontpage Express، واتبع الخطوات التالية لإضافة كل زر من الأزرار:
نفذ إجراء إدراج صورة، كما تعلمت سابقاً، اختر Insert/Image، ثم أدخل اسم ملف صورة الزر.
اختر خصائص صورة الزر بالنقر بالزر الأيمن للماوس، ثم اختر لسان التبويب General.
أدخل في الإطار Default Hyperlink، وضمن الحقل Location، عنوان الصفحة التي ترغب بالانتقال إليها عند النقر على صورة الزر، ولا تنس أن تدخل http:// أولاً. أدخلتُ العنوان التالي لارتباط زر صفحة السيرة الذاتية http://members.tripod.com/~Shahem/mycvpg.htm،
احذف الارتباطات النصية، ورتب الأزرار عمودياً أو أفقياً، حسب رغبتك، ثم احفظ التعديلات على ملف الصفحة الرئيسية index.htm.
ماذا؟! هل أصبحت تعرف كيفية إضافة زر عودة من الصفحات الفرعية إلى الصفحة الرئيسية، وتريد أن تشرح لي ذلك؟
موافق!
"سأجلب أولاً زر من أحد المواقع التي توفرها مجاناً، ثم سأستخدم أحد محررات الرسوميات، لأكتب عليه كلمة "الصفحة الرئيسية" وأحفظه بشكله الجديد. سأفتح كل ملف من ملفات الصفحات الفرعية وأضيف إليها ذلك الزر في موقع مناسب، في أسفل يسار الصفحة، مثلاً. ثم سأفتح خصائص صورة الزر في كل منها بالنقر بالزر الأيمن للماوس، واختار Image Propertise، (خصائص الصورة)، وأنتقل إلى لسان التبويب General، وأدخل عنوان الصفحة الرئيسية في الإطار Default Hyperlink، وضمن الحقل Location، بادئاً بـ http://:، ثم أحفظ هذه التعديلات في الملفات المعنية، أليس ذلك صحيحاً؟"
ممتاز! لقد قلت ما أريد قوله بالضبط!
لكن، هل تعرف الأزرار التي تظهر رسوماً متحركة؟
لا بد أنك رأيت كثيراً من الرسوم المتحركة على صفحات ويب، وترغب أن تجعل صفحاتك أكثر حيوية بإضافة بعضها. سنقتصر في هذه الحلقة على أبسط أنواعها، وهي ملفات بهيئة GIF، تسمى Animated GIF، وتحتوي على مجموعة من الرسوم التي يمثل تتابعها حركة معينة. تدعم معظم المتصفحات الحالية هذا النوع من الملفات، ويكفي إدراجها في الصفحة لكي تظهر حركة معينة، ويمكن تعيين ارتباط لها بحيث يؤدي النقر عليها إلى الانتقال إلى الصفحة المطلوبة. سنستبدل ارتباط عنوان البريد الإلكتروني، بزر رسوم متحركة مرتبط بالعنوان ذاته، وذلك بالطريقة التالية:
انتقل إلى الموقع http://www.elated.com/toolbox/buttonkits واجلب أحد الرسوم المتحركة التي تمثل البريد الإلكتروني، بالنقر بالزر الأيمن للماوس على الرسم المتحرك واختيار Save As Picture، وحفظ الملف على القرص الصلب.
افتح ملف الصفحة الرئيسية index.htm، وأدرج الصورة في اسفل الصفحة، ووسطها.
أدخل عنوان بريدك الإلكتروني في حقل Default Link، من خصائص الصورة، واسبقه بالعبارة mailto:، ثم احفظ التغييرات التي أجريتها.
يمكنك الآن تحميل ملف الصفحة الرئيسية ضمن المتصفح، لكي تشاهد الرسم المتحرك.
يمكن إضافة العديد من الصور المتحركة إلى صفحتك الرئيسية أو الصفحات الفرعية، لإضفاء جو من المرح، وهي متوفرة مجاناً في كثير من المواقع المذكورة في الجدول 1، لكن لا ننصحك بالإكثار منها في صفحتك، لأنها إذا استخدمت بإفراط تبطئ من سرعة تحميلها في المتصفح، وتصبح مزعجة للمستخدم.
إذ أردت أن تنشئ أو تعدل ملفات Animated GIF، يجب استخدام محررات رسوم خاصة بملفات GIF المتحركة، مثل GifShaker (www.imagelib.com/products/gifshkr.html)، وAnimated Screen 2.1 (www.pysoft.com/downloads_fr.html)، وXara3D 2.1 (www.xara.com/xara3d/download.htm)، وغيرها مما يمكن أن تجده مصنفاً في الموقع http://www.cnet.com، أو http://www.zdnet.com.
عدادات الزوار
ربما لا يبدو أمراً لطيفاً، أن تقابل زوار منزلك بالقول: أنت الزائر رقم 50 منذ 1/1/1998، بدلاً من القول: أهلاً وسهلاً!
لكن هذه العبارة أمر مألوف على صفحات ويب، وتوضع، عادة، على الصفحة الرئيسية للموقع بهدف إظهار مدى شعبيته (أو التفاخر بمدى شعبيته)، بالإضافة إلى أنها توفر لمدير الموقع وسيلة مباشرة لمعرفة عدد الزوار. لكن، لا يحتاج مديرو مواقع الجهات التي تملك أسماء نطاقات خاصة بها (domain name) لاستخدام عدادات الزوار هذه، إذ تتوفر لديهم أدوات أقوى توفر تحليلاً كاملاً لحالة الموقع، وتحدد عدد زواره بدون الحاجة لإظهار ذلك علناً.
تكتب معظم عدادات الزوار بلغة CGI (Common Gateway Interface) (راجع موضوع "التفاعل مع صفحات إنترنت باستخدام برامج واجهة البوابة العمومية"، المنشور في هذا العدد)، ويكتب بعضها الآخر بلغة جافا على شكل بريمجات جافا (Java Applets)، ولن ندخل بالطبع، في تفاصيل برمجة العدادات، فهو خارج نطاق بحثنا، وكل ما يهمنا هو استخدام العدادات الجاهزة. سنستخدم عداداً بلغة CGI، ونترك الحديث عن عدادات برمجيات جافا للحلقة المقبلة. يختلف تنفيذ برامج CGI على المزود البعيد، عن طلب إرسال معلومات بلغة HTML الوصفية منه، ولا تسمح معظم المزودات البعيدة التي توفر المواقع المجانية بتشغيل برامج بلغة CGI خاصة بالمستخدم، لأنه أمر خطر على أمنها، ولأنه يتيح للمستخدم إمكانية التحكم بعملها، إلا أنه توجد مواقع توفر خدمة تنفيذ برنامج عدادات CGI على مزوداتها الخاصة، لعد زوار مواقع أخرى مجاناً. يتوفر في الموقع http://webcom.net/~klg/counters.html، والموقع http://webcom.net/~klg/counters.html عشرات الارتباطات المتعلقة بمواقع العدادات. ويختلف أسلوب استخدام كل منها، فبعضها يحتاج إلى إضافة بعض السطور بلغة HTML فقط، لتشغيل برنامج العداد، وأخرى يمكن نسخها ولصقها في الصفحة المعنية، ولا يمكن لذلك تقديم طريقة عامة تصلح لكل الجهات التي توفر تلك الخدمة. وسنكتفي بأن نورد مثالاً عن أحد العدادات المتوفرة مجاناً. اخترنا أن نستخدم العداد الذي يوفره الموقع http://counters.qpt.com، الذي يطلب منك تسجيل حسابك المجاني، بإدخال عنوان موقعك، وعنوان بريدك الإلكتروني، فيرسل إلى صندوق بريدك الإلكتروني رقم الحساب، وكلمة المرور، ومقطعاً من شيفرة HTML يجب أن تنسخها إلى الملف الذي ترغب أن تضع فيه العداد (وهو الملف index.htm في هذه الحالة). أظهرنا نص HTML لملف index.htm، باختيار View/HTML من قائمة برنامج Frontpage Express، ونسخنا مقطع شيفرة HTML من الرسالة الإلكترونية التي وصلتنا إلى نهاية شيفرة HTML لملف الصفحة الرئيسية، وقبل الواصفتين </body>، و</html>، أغلقنا نافذة تحرير HTML بالنقر على OK، فظهر العداد على الصفحة، فأزحناه ووسطناه في المكان المناسب. تسمح الجهة صاحبة الخدمة باختيار شكل العداد، وإعداده عبر طريقة خاصة بها مشروحة في الموقع.
بعد كل هذه التغييرات أصبحت الصفحة الرئيسية كما في الشكل 2، وربما تختلف عن الشكل الذي وصلت إليه في صفحتك. تذكر أنه يجب أن ترسل ملفات الصفحات والأزرار والرسوم المتحركة التي استخدمتهاإلى موقعك أيضاً، وأن تتأكد من أن "صحة" صفحتك على ما يرام بزيارتها وتجربة فعالياتها.
لا بد أن لديك كثيراً من التعديلات والتطويرات التي ترغب أن تنفذها على صفحتك بعد هذه المقالة، لذلك لا بد لي من أن أتركك تجرب كل شيء بنفسك، وإلى اللقاء في العدد المقبل.
جدول 1 (الأرضيات الرسومية، الأزرار، الصور المتحركة)
http://www.ecn.bgu.edu/users/gas52r0/Jay
http://www.mangus.com
http://www.bellsnwhistles.com
http://www.ender-design.com/rg
members.aol.com/dcreelma/imagesite
http://www.netscape.com/assist/net_sites/bg/backgrounds.html
http://www.chenowith.wasco.k12.or.us/tech/design/buttons.html
http://www.innova.net/~goob/bits27.html
web.online-graphics.net
http://www.free-graphics.com
http://www.coolarchive.com
http://www.silverpoint.com/leo/lia
http://www.animationzone.com
http://www.fortunecity.com/boozers/dragon/28/
http://www.geocities.com/CollegePark/2883/
http://dome.communitech.net
http://www.webwider.com/syzone/
لا بد أنك لم تكتف بتنفيذ الأمثلة التي مرت في الجزءين السابقين، وبدأت بإضافة نصوصك وصورك الخاصة على صفحات ويب التي باشرت بتأليفها. وربما حاولت تنسيق تلك النصوص والصور، لكنك فوجئت بصعوبة تنسيق النص ومحاذاة الصور بالشكل الذي ترغبه تماماً، كما تفعل، عادة، في محررات النصوص، وأحسست بالضيق لذلك، وأرجعت الصعوبة إلى قلة خبرتك في تأليف صفحات ويب، والتعامل مع برنامج FrontPage Express. لكن الأمر ليس كما اعتقدت! إذ لا يمكن تنسيق النصوص أثناء تأليف صفحات ويب، بالطريقة ذاتها التي تنفذ عند التعامل معها من خلال محررات النصوص، ولا يمكن سوى تعيين جهة محاذاة النص والصورة، إلى اليمين أو اليسار أو في الوسط. والحل الوحيد لضبط النص بعد فراغ معين، أو ضمن مربع معين، استخدام إمكانية توفرها لغة HTML، وهي تنسيق محتويات الصفحة ضمن جداول (Tables).
تسمح لغة HTML بتعيين عدد أعمدة وصفوف الجداول، وضبط محاذاتها إلى يمين أو يسار أو وسط الصفحة، بالإضافة إلى العديد من الخصائص الأخرى. لكننا، كما فعلنا منذ البداية، سنستخدم برنامج FrontPage Express لتعيين تلك الخصائص للجداول، بدلاً من أن نعينها عبر واصفات HTML، إذ يوفر البرنامج قائمة خاصة للجداول، باسم Table. يمكن استخدام الجداول لتنسيق النصوص والصور بأسلوب معين، إلا أن الاستخدام الطبيعي لها هو في إظهار جداول على صفحات ويب، وهذا ما سنضرب مثالاً عليه أولاً، ثم سنرى كيفية استخدامها بأساليب أخرى.
تذكر أننا أنشأنا صفحة أدرجنا فيها لائحة الوصلات بالمواقع المفضلة… ما رأيك أن تظهر تلك الوصلات بشكل أكثر ترتيباً، بحيث نضعها ضمن جدول يتضمن ثلاثة أعمدة: الأول لعنوان الموقع، والثاني يصف محتوياته، والثالث يظهر مستوى جودته حسب تصنيفك الخاص، وعلى سلم مكون من خمسة نجوم؟!.
موافق!
إليك خطوات العمل:
افتح ملف صفحة وصلات المواقع المفضلة myfavoritepg.htm، مستخدماً برنامج FrontPage Express.
انتقل إلى نهاية الصفحة، ثم اختر من قائمة Table، الأمر Insert Table، فيظهر صندوق حوار يطلب عدد الصفوف والأعمدة، ضمن إطار Size، وهيئة الجدول، ضمن إطار Layout، وعرض الجدول، ضمن إطار Width.
غير عدد الأعمدة إلى ثلاثة (عنوان الموقع، المحتويات، التقييم)، وعدد الأسطر إلى عدد يساوي عدد المواقع المفضلة التي ترغب بإدراجها في الجدول. (يمكن لاحقاً تغيير عدد الصفوف والأعمدة حسب حاجتك، من قائمة Table ذاتها).
اختر من إطار Layout، ومن لائحة Column Order، الاتجاه RTL (من اليمين لليسار)، وهو اتجاه الانتقال من حقل إلى آخر، عند الضغط على الزر Tab أثناء إدخال المعلومات في الجدول، بالإضافة إلى أنه يضبط ضمنياً، المحاذاة إلى اليمين داخل خلايا الجدول، وهي المحاذاة الطبيعية في الصفحات العربية.
اختر محاذاة الجدول، في وسط الصفحة، من الإطار Layout، ومن لائحة Alignment.
غير عرض حواف الجدول الخارجية، إلى قيمة 2 بكسل، من مستطيل الإدخال Border Size، وضمن إطار Layout أيضاً. إذا أبقيت على قيمة عرض الحواف صفراً، فلن تظهر الحواف الخارجية، أو الحواف الداخلية، عند إظهار الجدول باستخدام المتصفح.
عين قيمة بطانة الخلية (Cell Padding)، وتباعد الخلايا (Cell Spacing) بحيث تساوي واحد، حيث تحدد قيمة بطانة الخلية بالبكسل بعد حواف خلية الجدول داخلاً عن محتوياتها من جميع الأطراف، بينما تحدد قيمة تباعد الخلايا المسافة بين حافة الخلية والخلية التي تجاورها بالاتجاه الأفقي أو الشاقولي، بالبكسل أيضاً.
تحدد محتويات الإطار Width عرض الجدول، وذلك حين النقر على مربع الاختيار Specify Width. يمكن عندها تعيين عرض الجدول كنسبة مئوية من الصفحة، عند اختيار in Percent، أو كقيمة محددة بالبكسل عند اختيار in Pixels. اختر in Percent، ثم أدخل قيمة 90 في مستطيل الإدخال، فيكون عرض الجدول المطلوب 90% من عرض الصفحة بغض النظر عن الكثافة النقطية المستخدمة في الإظهار.
انقر زر Ok، فيظهر FrontPage Express الجدول بالهيئة والمحاذاة التي حددتها. لاحظ أنه يمكن التنقل بين خلايا الجدول بالضغط على زر Tab، كما يحدث في برنامج وورد عادة.
إذا لم يعجبك شكل الجدول الظاهر أو أبعاده، يمكن أن تنقر بالزر الأيمن للماوس داخل الجدول وتختار Table Properties… (خواص الجدول)، فيظهر صندوق حوار يسمح بإجراء التغييرات التي تريدها في هيئة الجدول، أو عرضه، أو محاذاته، بالإضافة إلى أنه يوفر إمكانية تغيير لون أرضيته من داخل الإطار Custom Background، إذ يمكن اختيار اللون من لائحة Background Color. يمكن من خلال صندوق حوار خصائص الجدول تعيين صورة خلفية له، باختيار Use Background Image ثم إدخال اسم ملف الصورة، الذي يجب أن يكون من هيئة GIF أو JPG. إذا كانت أبعاد الصورة الخلفية أصغر من أبعاد الجدول، فإنها تتكرر حتى تملأ كامل أرضيته، أما إذا كانت أبعادها أكبر منه، فيظهر الجزء العلوي منها فقط، بمساحة تساوي مساحة الجدول. لاحظ أنه عند استخدام صورة خلفية فإنها تطغى على اللون المعين للأرضية. ويجب، عند تعيين صورة خلفية للجدول، إرسال ملف الصورة إلى المزود الذي يستضيف الصفحة التي تتضمن الجدول المعني. انتبه عند اختيار صورة خلفية، أن لا تعيق ألوانها وخطوطها قراءة النصوص الموجودة في خلايا الجدول. وينطبق الأمر ذاته عند اختيار لون أرضية للجدول، إذ يجب أن يكون لوناً يسهل تمييز النص الذي يتضمنه، بسهولة.
يمكنك تعيين ألوان حواف الجدول من ضمن إطار Custom Colors، وذلك باختيار اللون من قائمةBorder: ، أو اختيار لوني الظل الخفيف، والداكن من قائمتي Light Border وDark Border.
ضع المشيرة داخل الجدول، ثم اختر من قائمة Table الأمر Insert Caption لإدراج عنوان للجدول، ثم أدخل العنوان "جدول المواقع المفضلة" في تلك الخلية الجديدة التي أدرجت. إذا نقرت بالزر الأيمن للماوس داخل خلية عنوان الجدول، يمكنك إظهار خصائصها بأمر Caption Properties، ثم تحديد موقعها أعلى أو أسفل الجدول، بالخيارين Top of Table أو Bottom of Table.
أدخل عناوين أعمدة الجدول في الخلية الأولى من كل عمود… أدخل مثلاً "عنوان الموقع"، و"المحتويات"، و"التقييم".
املأ الجدول بقص ونسخ الوصلات الموجودة في الصفحة إلى خلايا العمود الأول "عنوان الموقع"، وأدخل الوصف الذي تعرفه عن كل موقع في العمود الثاني، وتقييمك له في العمود الثالث، على شكل سلم من خمسة نجوم.
احفظ الملف الناتج، ثم اعرضه مستخدماً متصفح إنترنت المتوفر لديك، لتتأكد من أنه يظهر الجدول بالشكل الذي تريده.
ليس هذا كل ما يمكن أن تفعله بالجداول، إذ لا تكتفي لغة HTML بتوفير إمكانية عرض الجداول على صفحات ويب، بل تضيف إلى ذلك إمكانية دمج خليتين متجاورتين، أو تقسيم خلية معينة إلى خليتين. ويخفي برنامج FrontPage Express تفاصيل ذلك عبر أمري Merge Cells و Split Cells، في قائمة Table، بشكل يشبه التعامل الجداول في محرر النصوص وورد. تسمح لغة HTML أيضاً، بتحديد مواصفات أية خلية من خلايا الجدول، وهذا ما يعكسه برنامج FrontPage Express من خلال صندوق حوار خصائص الخلية، الذي يظهر عند نقل المشيرة إلى خلية معينة، واختيار Cell Properties من قائمة Table، أو من القائمة المنبثقة التي تظهر عند النقر بالزر الأيمن ضمن الخلية. يتضمن صندوق حوار خصائص الخلية إمكانية تحديد لون أو صورة الأرضية، في إطار Custom Background، ولون الحواف في إطار Custom Color، بالإضافة إلى إمكانية اختيار محاذاة المعلومات داخلها في إطار Layout، واختيار عرضها الأدنى في إطار Minimum Width.
ويتيح برنامج FrontPage Express تغيير خصائص جميع الخلايا التي تخص صفاً أو عموداً في جدول، باختيار Select Row أو Select Column، ثم اختيار Cell Properties. جرب، مثلاً، أن تغير لون خلايا الصف الأول، من الجدول الموجود في ملف المواقع المفضلة.
يمكنك الآن إرسال الملف إلى المزود الذي يستضيف صفحاتك، ثم التأكد من أن النقر على زر "المواقع المفضلة" في الصفحة الرئيسية يؤدي إلى ظهوره، لكن لا تنس أن تعين لها ملف الصورة الأرضية، والعنوان، وأن تضيف إليها زر العودة إلى الصفحة الرئيسية.
الجداول أيضاً:
لا يقتصر استخدام الجداول في تأليف صفحات ويب على استخدامها كجداول فعلاً، إذ يمكن استخدامها كوسيلة لتنسيق النصوص والصور، كما ذكرنا، حيث يمكن أن تتضمن خلية الجدول صورة أو أكثر، أو حتى جداول أخرى.
لنفرض أنك ترغب بعرض صورتك على الصفحة الرئيسية، بجانب نص ترحيبي. يمكن، كي تنفذ ذلك بسهولة، أن تدرج جدولاً يتضمن صفاً واحداً، وعمودين، وتضبط عرض حواف الجدول ( Border Size) على القيمة صفر، أي بدون حواف مرئية، ثم تدخل النص الترحيبي الذي تريده في الخلية اليمنى، وتضع المشيرة في الخلية اليسرى، وتدرج فيها الصورة المرغوب، ثم تضبط قيمة عرض كل من الخليتين Minimum Width، (من خصائص كل خلية)، بحيث تجعل خلية النص أكبر من خلية الصورة، (70% للخلية اليمنى، 30% للخلية اليسرى، مثلاً) يجب أخيراً، كالعادة، حفظ الملف الناتج وإرساله مع ملف الصورة إلى المزود الذي يستضيف صفحتك، فتظهر الصفحة الرئيسية في المتصفح بهيئة تشبه الشكل 1.
يمكن أن تستفيد من الجداول أيضاً، إذا أردت إنشاء صفحة تتضمن مجموعة من الصور المصغرة المرتبة على شكل صفوف وأعمدة، والتي يؤدي النقر على كل منها إلى عرض الصورة ذاتها، لكن بأبعادها الأصلية. ويمكن أن تذيل كل مصغّر صورة بتعليق مناسب. يسمح هذا الأسلوب من عرض الصور بشكل مصغر، بإلقاء نظرة شاملة على مجموعة الصور كلها، ثم مشاهدة الصورة بأبعادها الأصلية عند الرغبة. يمكن تنفيذ ذلك لكي تعرض، صوراً للأماكن التي زرتها، مثلاً، أو للأماكن الشهيرة في مدينتك، أو حتى صور طفلك في سنواته الأولى. (يجب أن تكون تلك الصور متوفرة لديك بشكل إلكتروني على هيئة ملفات GIF أو JPG).
ابدأ العمل بأن تنشئ ملفاً جديداً من نوع htm، باستخدام برنامج FrontPage Express، وسمه myGalleryPg.htm، مثلاً، ثم أنشئ فيه جدولاً يتضمن عدداً من الخلايا مساوياً لعدد مصغرات الصور التي تريد إظهارها، وبترتيب مناسب لأشكال صورك، ثم أدرج في كل خلية صورة مختلفة، وصغر كل صورة إلى الأبعاد التي ترغبها بنقر الصورة، ثم اسحب وأفلت أحد مربعات التحكم، التي تظهر على زواياها الأربع في البرنامج. انقر بالزر الأيمن للماوس على كل صورة، ثم اختر خصائصها Image Properties، وأدخل في صندوق الحوار الظاهر، وضمن الإطار Default Hyperlink، وفي مستطيل النص Location، عنوان موقعك، مضافاً إليه اسم ملف الصورة ذاتها، (يبدو ذلك بالنسبة للصفحة التي أنشأناها في المقال السابق http://members.tripod.com/Shahem/Picture1.jpg، حيث Picture1.jpg اسم ملف الصورة مثلاً). أرسل ملف myGalleryPg.htm وملفات الصور إلى المزود البعيد الذي يستضيف صفحتك، ثم أنشئ زراً مرتبطاً به على ملف الصفحة الرئيسية واحفظه، ثم أرسله إلى المزود البعيد. انتقل إلى تلك الصفحة الجديدة واختبر النتيجة.
سجل الزوار (Guest Book)
تحتوي كثير من مواقع إنترنت سجلاً للزوار، وهو المكافئ الإنترنتي (ما رأيكم بهذا الاشتقاق؟!) لسجل الزوار، الذي تجده عادة في المتاحف أو المعارض، والذي يستطيع الزائر من خلاله، إبداء رأيه وملاحظاته في ما شاهده، أو يطلع على أراء من سبقه من الزوار. يتم إدخال التعليقات في السجل عادة، عبر صفحة تتضمن عدداً من مستطيلات الإدخال، أهمها مستطيل لإدخال اسم الزائر، وآخر لإدخال التعليق ذاته. وتتوفر، عادة، أيضاً، إمكانية عرض التعليقات السابقة حسب تسلسل ورودها. يحتاج إنشاء سجل للزوار إلى معرفة بلغة CGI، التي لا يعرفها معظم المبتدئين في هذا المجال، بالإضافة إلى توفر صلاحيات لدخول دليل CGI، وتنفيذ المزود الذي يستضيف الموقع للبرامج المكتوبة بها، وهذا مالا تسمح به الجهات التي تستضيف الصفحات المجانية. لكن، يمكن على الرغم من هذا، أن تضيف سجلاً للزوار إلى صفحتك، إذ تستضيف كثير من الجهات سجلات زوار مجانية لمن يرغب، بالأسلوب الذي تتوفر فيه الصفحات المجانية، حيث يجب الاشتراك أولاً، لدى الموقع الموفر للخدمة، عبر ملء نموذج تسجيل، يطلب عنوان البريد الإلكتروني، وعنوان الموقع الذي ترغب بإضافة سجل زوار إليه، ثم يرسل مقطعاً من الشيفرة بلغة HTML، تكفي إضافته إلى صفحتك الرئيسية، عبر فتح نافذة View/HTML ونسخ نص الشيفرة في نهاية النص وقبل إغلاق الواصفة body، ليظهر وصلتين: إحداهما لصفحة إدخال التعليق، والأخرى لصفحة عرض التعليقات السابقة.
سجلت في الموقع http://www.GuestWorld.com، فأرسل لي الشيفرة التالية:
<center><a href="http://titan.guestworld.tripod.lycos.com/wgb/wgbsign.dbm?owner=Shahem">Sign My Guestbook</a>
<a
href="http://GuestWorld.Tripod.Lycos.com"><img src="http://GuestWorld.Tripod.Lycos.com/gif/GuestWorldbutton.gif" height="31" width="87" alt="Guestbook by GuestWorld"></a>
<a href="http://titan.guestworld.tripod.lycos.com/wgb/wgbview.dbm?owner=Shahem">View My Guestbook</a>
</center>
لاحظ أنها تتضمن وصلةً لصفحة إدخال التعليق قبل عبارة Sign My Guestbook، ووصلة لصفحة عرض التعليقات قبل عبارة View My Guestbook. غيرت هاتين العبارتين بترجمتهما العربية ونسخت نص الشيفرة إلى شيفرة HTML للصفحة الرئيسية، ضمن نافذة View/HTML في برنامج FrontPage Express. يمكنك، بدلاً من ذلك، استبدال الوصلتين النصيتين بزرين أو صورتين متحركتين، مرتبطتين بالصفحتين ذاتهما.
زر الموقع http://home1.swipnet.se/~w-10344/ للوصول إلى جداول وصلات بعناوين عدد من المواقع التي توفر سجلات الزوار المجانية، والمواقع التي تستضيف الصفحات المجانية، والكثير من الوصلات المفيدة الأخرى.
إبرة في كومة قش!
هذه حال صفحتك في شبكة إنترنت، فكيف تجعل متصفحي إنترنت يجدونها أو يتعرفون عليها؟!
يستخدم معظم متصفحي إنترنت مواقع البحث، للوصول إلى المعلومات التي يريدونها، كموقع ألتافيستا أو ياهو، التي تفهرس باستمرار محتويات صفحات إنترنت المختلفة، لكنها لا تفعل ذلك إلا إذا أُخبرت بوجود تلك الصفحات، حيث تسمح لأصحاب المواقع الجديدة بأن يرسلوا عناوينها إلى مواقع البحث، كي تفهرس آلات البحث (Search Engine) محتوياتها خلال فترة تتراوح بين يوم أو عدة أيام. أرسلت عنوان الصفحة الشخصية التي أنشأتها إلى آلة بحث موقع ألتافيستا http://www.altavista.digital.com، بالنقر على الوصلة Add a Page ، الموجودة أسفل الصفحة الرئيسية فيه، فانتقلت إلى صفحة أخرى، أدخلت فيها عنوان URL لصفحتي الشخصية في المستطيل المخصص لذلك، ونقرت على زر Submit URL، فأظهر التقرير المبين في (الشكل 2) وأن صفحتي ستفهرس خلال يوم أو يومين.
إذا أردت أن تضيف لصفحاتك كلمات مفتاح (Keywords) بحيث يؤدي البحث عنها إلى ظهور عنوان صفحتك في نتائج البحث، يمكنك أن تدرج في صفحاتك ما يسمى
التعليقات Comments، وهي كلمات أو عبارات تضيفها على الصفحة لكن المتصفح يتجاهل عرضها. لإدراج تعليق باستخدام برنامج FrontPage Express، انقر Insert/Commnet وأدخل الكلمات المفتاحية في لصندوق الحوار الظاهر.
يمكنك أيضاً إضافة عنوان صفحتك إلى أحد الأدلة (Directory) الموجودة على إنترنت، والتي توفر وصلات بمئات المواقع مصنفة حسب موضوعها، فيضيف ذلك الدليل وصلة بعنوان موقعك، ويضعه تحت التصنيف الذي تختاره عند إرسال ذلك العنوان.
يمكنك من خلال الموقع http://www.liquidimaging.com/submit إضافة عنوان صفحتك إلى العديد من آلات البحث والأدلة، كألتافيستا، وAOL NetFind، وExite، وGoto.com، وHotBot وغيرها.
عودة إلى الشاطئ!
وصلنا معاً إلى نهاية هذا المقال وإلى نهاية هذه السلسلة عن تأليف صفحات ويب باستخدام برنامج FrontPage Express. وكان الهدف منها تعريف المبتدئين بالأمور الأساسية في هذا المجال، بحيث يتمكنون في نهاية المطاف، من إنشاء صفحات ويب بسيطة، بشكل سريع وسهل. أغفلنا عمداً بعض الميزات المتوفرة في لغة HTML، كإمكانية إظهار الإطارات أو تشغيل بريمجات جافا وشيفرة CGI، لأنها تتضمن معلومات تفوق مهارات المبتدئين، بالإضافة إلى أنهم لا يحتاجونها في تأليف صفحاتهم البسيطة.
لم ينته هذا الموضوع من جهتنا، وسنتابع الاهتمام به وتقديمه على صفحات مجلتنا في الأعداد المقبلة، لكن من زوايا أخرى. نود أخيراً، أن نشجعكم على تأليف صفحاتكم باللغة العربية بشكل خاص، لزيادة محتويات الشبكة من الصفحات العربية، ولا بأس أن ترافقها اللغة الإنجليزية أو غيرها، إذا كنتم ترغبون بتوجيه صفحاتكم إلى جميع متصفحي إنترنت. نذكركم أننا ننشر في كل عدد عرضاً لبعض الصفحات الشخصية الغنية بالمحتويات والحسنة التصميم، أدعوكم للاطلاع عليها، وإذا أنشأتم صفحات شخصية مميزة، أرجو أن ترسلوا عناوينها إلى زميلنا ماهر الجنيدي (maher@ditnet.co.ae)، ليشملها في مقالاته المقبلة.
صفحات جديدة
إذا ساعدتكم هذه السلسلة من المقالات في إنشاء صفحات خاصة بكم على شبكة ويب أرجو أن ترسلوا لي عناوينها إلى بريدي الإلكتروني shahem@ditnet.co.ae، لكي ننشرها ضمن المقالات المقبلة.
وصلنا إلى الآن عنوان القارئين مصطفى ياسين http://members.tripod.com/myassin، وطالب المقبالي http://www.geocities.com/TelevisionCity/Studio/2220/K اللذان أنشئا صفحتاهما بالاستعانة بالجزءين السابقين من هذه السلسلة.
لابد أن معظمكم تجول حتى الآن، في كثير من مواقع شبكة ويب، ومر أثناء ذلك، بصفحات أو مواقع أنشأها أشخاص بهدف التعريف بأنفسهم، أو بنشاطاتهم المختلفة، فأعجبته بعض الصفحات، أو قرر عدم زيارة بعضها الآخر!
فإذا رغبت أنت أيضاً، في إنشاء موقع أو صفحة شخصية، وليس لديك خبرة سابقة في هذا المجال، وتتساءل عن كيفية عمل ذلك؟ ومن أين تبدأ؟ ندعوك هنا إلى متابعة الجزء الأول، من مقالين، يقدمان معلومات مختصرة عن كيفية إنشاء صفحة على شبكة ويب، ويمكن أن تعتبرها خطوتك الأولى على هذا الطريق، فهيا بنا!
يتضمن الموقع عادة، عدداً من الصفحات، يحفظ كل منها في ملف منفصل، وكنا نشرنا في عدد أكتوبر/تشرين الأول 1997 مقالة، بعنوان "أنشئ صفحتك الخاصة مجاناً"، تحدثنا فيها، عن الطرق المتوفرة لإنشاء صفحة أو موقع، على شبكة ويب، وركزنا على المواقع التي توفر صفحات مجانية، وبيّنا ميزات وعيوب بعض هذه المواقع، وقارنّا بين خدماتها المختلفة، من ناحية السعة المتوفرة للصفحة، وأسلوب تحديثها، وسهولة الوصول إليها، وأعطينا مثالاً سريعاً، عن إنشاء صفحة مجانية على أحد المواقع المشهورة، وهو http://www.geocities.com.
لكن حجز الصفحة بحد ذاته، سيكون بداية لعملية إدارتها، التي تتضمن شقين رئيسيين، هما: تأليف محتوياتها وتحديثها، ثم إرسال تلك المحتويات إلى المزود الموجود على شبكة إنترنت. وتتم هاتان المهمتان بأدوات وأساليب مختلفة، تطرقنا إلى بعضها، في المقال المشار إليه، إلا أننا لم نتوسع في شرح كيفية إنشاء محتويات صفحات إنترنت، لضيق المساحة المخصصة لها. لذلك، أركز في هذا المقال وفي العدد المقبل، على هذا الجانب، عبر مثال لإنشاء صفحة شخصية. لكن، لا بأس أولاً، من إعادة ذكر أهم المواقع التي توفر إمكانية إنشاء الصفحات الشخصية المجانية حالياً، مع سعة الصفحة المجانية التي توفرها:
الموقع
سعة الصفحة المجانية
http://www.angelfire.com
5 ميجابايت
http://www.geocities.com
11 ميجابايت
http://www.sprec.com
غير محدود
http://www.tripod.com
11 ميجابايت
http://www.wbs.net
7 ميجابايت
تأليف محتويات صفحة على شبكة ويب:
من أين أبدأ؟
تتوفر طريقتان لتأليف الصفحات على شبكة ويب، أولهما استخدام لغة HTML، والثانية استخدام أحد محررات صفحات ويب، فأيهما تختار؟
لا بد لك كمبتدئ، أن تختار الطريقة الأسهل، وهي استخدام أحد محررات صفحات ويب. لكن دعني أولاً أن أرضي فضولك لمعرفة ماذا تعني لغة HTML؟ وأبين لك لماذا يعتبر التعامل معها الطريقة الأصعب لتأليف صفحات ويب؟
عندما يجلب برنامج التصفح صفحة من موقع على شبكة ويب، ويعرضها على الشاشة، فإنه يجلب ملفاً نصياً، مكتوباً بلغة HTML، مع نص الصفحة ذاته، وبعض ملفات الصور والملتيميديا، أحياناً. يصف النص المكتوب بلغة HTML، للمتصفح، طريقة توضع نص الصفحة، وتتابع فقراته، وما هي عناوينه، وأماكن الصور فيه … إلخ، بواسطة ما يسمى "الواصفات" (tags)، وذلك بالشكل التالي:
<tag>text<\tag>
مثال ذلك السطر التالي:
<h1>صفحتي الشخصية<\h1>
تبين الواصفة <h1>، للمتصفح، كيف يظهر النص "صفحتي الشخصية"، ولهذا، يجب لتعلم تأليف الصفحات بلغة HTML، تعلم معنى عشرات الواصفات المختلفة. وهذا هو السبب الرئيسي الذي يجعل التأليف بهذه اللغة صعباً، إلا أنها توفر مرونة كبيرة وقوة في تأليف صفحات ويب، لذا يستخدمها المحترفون في هذا المجال.
استخدام محررات ويب أسهل، لأنها تسمح بتأليف الصفحات، بدون الدخول في تفاصيل استخدام الواصفات، وبشكل يشبه تنسيق الصفحات في أحد معالجات الكلمات. والواقع أن محررات ويب هي معالجات كلمات أصلاً، أضيفت لها بعض الإمكانيات الخاصة بتحرير صفحات ويب، بالإضافة إلى أنه توجد معالجات كلمات، يمكن استخدامها لتأليف صفحات ويب بسيطة، كبرنامج مايكروسوفت وورد، مثلاً.
أي محررات صفحات ويب أختار؟
يفضل، كمبتدئ، اختيار أبسط محرر لصفحات ويب، الذي يوفر الإمكانيات الأساسية، ويدعم استخدام اللغة العربية، ويفضل أيضاً، أن يكون مجانياً، أليس كذلك؟
وهذا ما جعلنا نختار استخدام برنامج تحرير صفحات ويب FrontPage Express، وهو إصدارة مجانية من برنامج FrontPage، يرفق بالإصدارة الكاملة من برنامج إنترنت إكسبلورر 4.0، التي وزعناها في القرص الهدية لعدد مايو/أيار 1998، والذي يمكن استجلابه أيضاً، من موقع مايكروسوفت التالي: http://www.microsoft.com/ie/download، (أو استجلاب تحديث للإصدارة المصغرة التي توجد لديك)، ويجب تركيب الإصدارة الكاملة من إنترنت إكسبلورر 4.0، حتى يتم تركيبه.
قبل أن تبدأ بتصميم الصفحة:
لابد من أن تخطط قليلاً، قبل أن تبدأ بتصميم الصفحة، وبما أننا نقترح عليك مثال، إنشاء صفحة شخصية، فكر ماذا يمكن أن تقدم من معلومات، وصنفها ضمن فقرات رئيسية، وسجل عناوين تلك الفقرات. يمكن أن تعرض نبذة عن سيرتك الشخصية، وتتحدث عن اهتماماتك وهواياتك، وتقدم لائحة ارتباطات بالصفحات المفضلة لديك، وتنشئ سجلاً لزوار صفحتك، وغير ذلك. إذا كنت تخطط لإنشاء صفحة أو موقع أعقد من ذلك، يفضل أن تضع مخططاً عاماً للموقع، وتفكر في عرض المعلومات ضمن عدة صفحات.
البدء بالعمل:
أولاً: ركب برنامج FrontPage Express، وشغله. لا حاجة لأن تكون متصلاً بإنترنت، أو حتى أن تكون حجزت صفحة مجانية أو مدفوعة على أحد المواقع، لكي تبدأ بتأليف صفحتك، إذ ستحفظها على القرص الصلب أولاً، لتجربتها قبل إرسالها إلى المزود على شبكة إنترنت. يفضل أن تنشئ مجلداً جديداً، تخصصه لحفظ ملفات صفحات ويب التي تؤلفها.
عندما تشغل برنامج FrontPage Express، ستلاحظ أن واجهته مشابهة لواجهات برامج معالجة الكلمات، والتعامل معه لا يختلف عنها مطلقاً. يفتح البرنامج عند تشغيله، ملفاً لصفحة HTML، باسم Untitled Normal Page.
تتلخص طريقة العمل أثناء تأليف الصفحات، بإدخال وتنسيق المعلومات، ثم حفظها في ملف HTML، عبر هذا البرنامج، ثم فتح الملف ذاته بالمتصفح، لمشاهدة شكل الصفحة كما ستظهر فعلياً على إنترنت، والتأكد أنها تعمل بشكل صحيح.
ابدأ بإدخال النص التالي:
صفحة أحمد شهم شريف (ضع اسمك بدلاً من اسمي طبعاً!)
المحتويات:
السيرة الذاتية
الاهتمامات والهوايات
المواقع المفضلة
اتصلوا بي
نسق العبارات السابقة بالشكل الذي تراه مناسباً، مستخدماً أزرار الأدوات، المشابهة لأزرار أدوات برنامج مايكروسوفت وورد. يبين (الشكل 1 ) مثالاً على إحدى طرق التنسيق المقترحة.
يمكنك أيضاً، إدخال العبارات باللغة الإنجليزية أو بلغة لاتينية أخرى إذا شئت، وتعبر هذه العبارات عن عنوان الصفحة، بالإضافة إلى عناوين محتوياتها. احفظ الصفحة باختيار File/Save، فيظهر البرنامج صندوق حوار يطلب فيه اسم الملف وموقعه في مربع Page Location، أدخل الاسم والموقع الذي تريده. أما مربع Page Title، فهو يطلب ما يسمى عنوان الصفحة (Title)، وهو النص القصير الذي يظهر على رأس نافذة المتصفح عندما تفتحها، ويظهر في لائحة العلامات المرجعية (bookmark)، ويجب اختياره بحيث يصف محتويات الصفحة الشخصية باختصار، (مثلاً، صفحة أحمد شهم شريف). لمشاهدة الصفحة كما ستظهر على ويب، شغل المتصفح الذي تستخدمه، (يجب أن تشغل متصفحاً يدعم اللغة العربية، إذا استخدمت اللغة العربية)، وافتح الصفحة من المجلد الذي حفظتها فيه، (باستخدام File/Open في برنامج إنترنت إكسبلورر، مثلاً)، فتشاهدها كما ستعرض على شبكة ويب.
مبروك!
لقد ألفت صفحتك الأولى، وهي محفوظة على قرصك المحلي، بانتظار أن ترسلها (upload) إلى موقع صفحتك لاحقاً.
لا تبدو تلك الصفحة مثيرة، حتى الآن، أليس كذلك؟! لنتابع إذاً، تأليف الصفحة، بإضافة محتويات جديدة إليها، وإعطائها شكلاً أكثر أناقة.
المزيد من الأناقة:
بما أن الصفحة التي تؤلفها باللغة العربية، فهي تقرأ من اليمين لليسار، وهذا ما يجب تعيينه، ليعرضها المتصفح بشكل صحيح، ولتسهيل إدخال المعلومات، وترتيب الكلمات وعلامات الترقيم فيها. انقر بالزر الأيمن على أي مكان في الصفحة، واختر Page Properties، من القائمة، ثم اختر من صندوق الحوار، لسان التبويب General، واختر اتجاه القراءة RTL، من اللائحة المنسدلة Document Reading Direction. اذهب إلى لسان تبويب Background، غير لون أرضية الصفحة، ولون النص إلى الألوان المرغوبة لديك، بالاختيار من اللائحتين المنسدلتين Background وText، ثم انقر زر "موافق". ضع المشيرة في السطر التالي لعنوان الصفحة، واختر من شريط القوائم Insert/Horizontal Line، ليظهر خط أفقي تحت العنوان. اختر مجموعة العناوين التي تبدأ من "السيرة الذاتية" حتى "اتصلوا بي"، ثم انقر على الزر الموجود على شريط الأدوات، والمسمى Bulleted List، فتصبح الصفحة كما تبدو في (الشكل 2).
أصبحت أفضل، أليس كذلك؟!
احفظ الملف بشكله الحالي بدون أن تغلقه، وبدل إلى برنامج التصفح الذي مازال يعرض النسخة السابقة من الصفحة. حدث الصفحة (بنقر زر Refresh، في إنترنت إكسبلورر)، وسيحمل المتصفح النسخة الجديدة مباشرة. لا تنس أن تكرر هذه الطريقة في المراحل التالية، كلما عدلت شيئاً على الصفحة، لتتأكد من أنها تعرض بالطريقة التي تتوقعها.
المزيد من المرح:
هل تريد أن تحيي زوار صفحتك بمقطع من موسيقى تحبها؟ وأن تعطي صفحتك جواً خاصاً بك، بإضافة أرضية معينة؟
بسيطة …!
عد إلى خصائص الصفحة مرة أخرى، ولسان التبويب General، واذهب إلى الإطار Background Sound، أدخل مسار وموقع ملف الصوت في المستطيل Location، أو انقر على زر Browse، ثم اختر From File، وانقر Browse، للوصول إليه عبر صندوق الحوار القياسي لفتح الملفات. يمكن أن يكون هيئة الملف الصوتي WAV، أوMIDI، أوAIFF، أو AU، وننصح باستخدام الهيئة MIDI، أو AU، لأن ملفاتها أقل حجماً من الملفات الصوتية الأخرى، بالنسبة لزمن العزف ذاته. يمكن تكرار عزف الملف الصوتي عدداً تختاره من المرات، بزيادة عدد الدورات في عداد Loop، ضمن إطار Background Sound، أو تكرار عزفه باستمرار، باختيار مربع الاختيار Forever. تذكر أنه يجب إرسال هذا الملف الصوتي إلى مزود إنترنت الذي سترسل إليه صفحتك، ويجب حفظه على الدليل ذاته الذي ستحفظها فيه.
لا بد أنك خمنت الآن من أين يمكن أن تضيف أرضية للصفحة!
نعم، عبر خصائص الصفحة أيضاً، ومن لسان التبويب Background. انقر مربع الاختيار Background Image، ثم أدخل مسار واسم ملف الصورة أو انقر الزر Browse للوصول إليه، ويمكن نقر مربع الاختيار Watermark، لجعل الصورة ثابتة بحيث ينزلق النص فوقها أثناء زلق الصورة، وهي ميزة تستخدم مع الصور الكبيرة التي تملأ كامل الشاشة. يجب أن يكون ملف صورة الأرضية بهيئة JPG أو GIF، لأنهما الهيئتان اللتان يمكن أن يقرأهما المتصفح، واختيرتا لصفحات ويب لأنهما تأخذان حجماً أقل، وترسمان بسرعة أكبر، وإذا لم تكن الصورة بإحدى هاتين الهيئتين، يوفر FronPage Express، إمكانية التحويل إلى هيئة GIF، عند حفظ الملف. اختر صورة صغيرة يمكن تكرارها، لأن البرنامج يطلي بها أرضية الصفحة تلقائياً. ولا تنس أنها يجب أن ترسل كملف مستقل إلى مزود ويب، الذي سيحفظ الصفحة.
هل نسيت محتويات الصفحة؟
جعلنا شكل الصفحة، أكثر جاذبية حتى الآن، وحان الوقت أن نلتفت إلى مضمونها قليلاً. سيتوقع زائر الصفحة، أن ينقر على عبارة "السيرة الذاتية"، مثلاً، للانتقال إلى معلومات عن السيرة الذاتية الخاصة بي، (أو سيرتك الذاتية، في صفحتك)، ومثل ذلك بالنسبة للعناوين الأخرى، فكيف تجعل الصفحة بهذا الشكل؟
خذ رشفة من فنجان قهوتك، ونفساً عميقاً، وتابع الخطوات التالية:
أدخل خطاً أفقياً آخر بعد قائمة العناوين، مشابهاً للخط الذي يلي العنوان الرئيسي.
أدخل عبارة "السيرة الذاتية"، بعد ذلك الخط الأفقي.
اختر عبارة "السيرة الذاتية" الجديدة، وانقرها بالزر الأيمن للماوس، واختر من القائمة Font Properties، ثم اختر ما تراه مناسباً من قياس الخط ولونه، عبر صفحة خصائص الخط.
تأكد أنك ما تزال تختار عبارة "السيرة الذاتية" الجديدة، ثم اختر من شريط القوائم، قائمة Edit، واختر منها Bookmark.
أدخل في صندوق الحوار اسم العلامة المرجعية MyCV، مثلاً، وانقر زر Ok. ستلاحظ ظهور خط منقط تحت عبارة "السيرة الذاتية".
انتقل إلى عبارة "سيرتي الذاتية" الأولى في الأعلى، واخترها، ثم انقر على قائمة Insert، واختر Hyperlinks، فيظهر صندوق حوار، اختر منه لسان التبويب Open Pages، اختر اسم الصفحة التي تحررها، من لائحة Open Pages، ثم اختر من اللائحة المنسدلة Bookmark، العلامة المرجعية MyCV، ثم انقر "موافق". ستلاحظ تغير لون العبارة إلى لون يشير إلى وجود ارتباط عند هذه العبارة، ويظهر تحتها خط متصل.
كرر هذا الإجراء بالنسبة للعبارات الباقية، مع اختيار أسماء مختلفة للعلامات المرجعية، وإدراج خطوط أفقية بين الفقرات المختلفة.
احفظ الملف، ثم اذهب إلى المتصفح الذي تستعمله، حدث الصفحة، ولاحظ النتيجة. سيؤدي النقر على أي من العناوين إلى الانتقال إلى الفقرات المتعلقة بها مباشرة.
لكن أين محتويات الفقرات ذاتها؟ أمر بسيط!، عد إلى ملف الصفحة في FrontPage Express، وأدخل النصوص التي تريدها، تحت عناوين الفقرات التي أنشأتها، ونسقها مثلما تفعل في أي معالج كلمات عادي، ثم احفظ الصفحة مرة أخرى.
لا، انتظر، مهلاً! نسينا أن نبين لك كيفية إنشاء لائحة الارتباطات بالمواقع المفضلة؟ وكيف يمكن إنشاء ارتباط بعنوان البريد الإلكتروني، في قسم "اتصلوا بي"؟
لإنشاء لائحة الارتباطات بالمواقع المفضلة، أدخل أسماء المواقع التي تريدها، على شكل لائحة، ثم كرر ما يلي بالنسبة لكل اسم منها:
اختر اسم الموقع، اسم المجلة "مجلة إنترنت العالم العربي"، مثلاً، ثم اخترInsert\Hyperlink من شريط القوائم.
اذهب إلى لسان التبويب World Wide Web، في صندوق الحوار الظاهر.
اختر http:، من لائحة Hyperlink Type،
أدخل في مستطيل URL، عنوان الموقع الذي حددت اسمه، أي العنوان http:\\www.iawmag.com، في هذا المثال، ثم انقر زر "موافق"، وتنتهي، بذلك، العملية. حدّث الصفحة في المتصفح ولاحظ النتيجة.
كي تنشئ ارتباطاً ببريدك الإلكتروني، في قسم "اتصلوا بي"، أدخل كلمة "بريدي الإلكتروني"، مثلاً، واخترها، ثم افتح صندوق حوار إنشاء ارتباط (Insert\Hyperlink) واذهب إلى لسان التبويب World Wide Web، واختر mailto: من لائحة Hyperlink Type، ثم أدخل عنوان بريدك الإلكتروني في مستطيل URL، وانقر "موافق".
وماذا إذا أردت إضافة صور، ومقاطع فيديو؟
الأمر بسيط، أيضاً!
يمكن أن تضيف بعض صورك الشخصية، أو صور عائلتك، أو بعض المواقع التي تعجبك، بالإضافة إلى بعض مقاطع الفيديو القصيرة. من الأفضل أن تجهز ملفات الصور بحيث تكون بهيئة JPG، أو GIF، أيضاً، وملفات مقاطع الفيديو، بهيئة AVI، فيجب إرسال هذه الملفات إلى مزود ويب، لاحقاً، عند إرسال الصفحة، لذلك تذكر أنه يجب أن لا يتجاوز مجموع حجم هذه الملفات، مع حجم ملف HTML، الخاص بالصفحة، وملفي الأرضية، والموسيقى المرافقة، حجم السعة المخصصة لك على مزود ويب.
ضع المشيرة في المكان الذي تريد أن تظهر الصورة فيه، واختر Insert/Image، ثم اختر From File، وأدخل مسار واسم الملف في المستطيل، أو انقر الزر Browse، لفتح صندوق حوار فتح ملف، والوصول إلى ملف الصورة بالانتقال إلى المجلد الذي يحتويه، أخيراً، انقر زر "موافق" لإدراج الصورة. إذا نقرت الصورة بعد إدراجها بزر الماوس الأيمن، يمكنك اختيار Image Properties من القائمة، لتظهر خصائص الصورة التي تسمح لك بالتحكم بقياسها، وجودتها.
لإدراج مقطع الفيديو في الصفحة، ضع المشيرة على المكان الذي تريد أن يظهر فيه المقطع، واختر Insert/Video، ثم أدخل اسم ملف الفيديو ومساره مباشرة، أو انتقل بعد النقر على زر Browse. انقر بالزر الأيمن على صورة ملف الفيديو، واختر خصائص الصورة، ثم اختر لسان التبويب Video، لتتمكن من تحديد خيارات تشغيل الملف، الموجودة ضمن إطار Repeat، كتشغيله باستمرار Forever، أو لعدد معين من المرات يفصل بينها تأخيرات زمنية معينة، أو تعيين بدء تشغيله من إطار Start، عند فتح الصفحة On file Open، أو عند مرور الماوس فوق صورته On Mouse Over (لا يدعم إنترنت إكسبلورر 3.02 هذه الميزة)
وماذا بعد؟
ما يزال بإمكانك تحسين صفحتك، بإضافة بعض المكونات الأخرى، كبريمجات جافا، وكائنات ActiveX، وأشياء أخرى، وهذا ما سنتركه للقائنا المقبل. لكن لا بد أنك ستتساءل: كيف يمكن أن أرسل صفحتي وملفاتها المرافقة إلى إنترنت؟
سنورد مثالاً على ذلك في العدد المقبل، أما إذا كنت مستعجلاً، وتريد أن تفعل ذلك الآن، اتصل بإنترنت أولاً، وزر المواقع التي توفر صفحات مجانية، وقرر الموقع الذي تريد أن تنشئ صفحتك لديه، وستجد لديه شرحاً عن كيفية إرسال الملفات إليه، وتأكد من قراءة الشروط التي تضعها الجهة صاحبة الموقع، لتسمح لك بنشر صفحتك على مزودها. فبعضها يفرض عليك المحافظة على إعلاناته، على صفحتك، وربما يتطلب منك ذلك إضافة بعض أسطر لغة HTML إليها!
لا تجزع! فعلى الرغم من أنك لم تؤلف صفحتك بهذه اللغة، فإن برنامج FrontPage Express، فعل ذلك نيابةً عنك. إذا كان ملف صفحتك مفتوحاً، اختر View/HTML من شريط القوائم، فيعرض البرنامج، نافذة فيها نص صفحتك بلغة HTML، يمكن أن تلصق فيها، أي نص بلغة HTML، كما يطلب الموقع الذي يوفر لك مكاناً مجانياً على إنترنت. أغلق النافذة بالنقر على زر Ok، ثم احفظ الملف بحالته الجديد، وأرسله إلى مكان الصفحة، بالطريقة الخاصة بالموقع الذي اخترته.
من خلال مثال إنشاء صفحة شخصية. واستخدمنا لذلك برنامج تحرير صفحات ويب Front Page Express المجاني، الذي تقدمه شركة مايكروسوفت مع رزمة المتصفح إنترنت إكسبلورر4، فبدأنا بإنشاء وتجريب الصفحة على القرص الصلب المحلي الموجود في الجهاز ذاته، بدون الاتصال بشبكة إنترنت. وتعلمنا كيف ننشئ قائمة رئيسية بمحتويات الصفحة، ونربط بين عناصر تلك القائمة ومحتويات الصفحة ذاتها، ثم ندرج في الصفحة ارتباطات بالمواقع المفضلة، وارتباطاً بعنوان البريد الإلكتروني. ولم ننس مظهر الصفحة والمؤثرات الأخرى، فرأينا كيف نعين خلفية رسومية وموسيقية لها، ونضيف إليها صورة أو مقطع فيديو. نظرنا أخيراً إلى نص لغة HTML، الذي ولده محرر صفحات ويب Front Page Express خلال تأليفنا للصفحة، وذكرنا أنه يمكن تعديله مباشرة عند الحاجة.
إرسال الصفحة إلى مزود ويب
قبل أن نتابع في تحسين وتطوير شكل الصفحة الشخصية ومحتوياتها، سنقدم مثالاً على كيفية حجز الدليل المجاني على مزود الجهة التي توفر خدمة استضافة الصفحات المجانية، ثم إرسال الصفحة إليه.
سنفترض أنك نفذت معظم الخطوات التي وردت في الجزء الأول المنشور في العدد السابق، فحصلت على ملف HTML، باسم معين، وليكن myhomepg.htm، واستخدمت ملفاً باسم backgndpic.gif كصورة لأرضية الصفحة، وملف خلفية موسيقية باسم music.mid. كل ما عليك اختياره الآن، هو الجهة التي ستستضيف صفحتك.
أوردنا في العدد السابق لائحة بعناوين بعض المواقع التي توفر خدمة استضافة الصفحات المجانية. بادر بزيارة تلك المواقع، واطلع على الخدمات التي تقدمها، والشروط التي تضعها، ولاحظ سعة الدليل الذي توفره. ولاحظ أسلوب تعيين عناوين الصفحات المجانية، إذ أن بعضها طويل، أو يحتوي على أرقام كثيرة، مما يجعلها صعبة الإدخال لمن يريد زيارة صفحتك. تختلف أساليب حجز الصفحة المجانية (أي إنشاء دليل جديد على أقراص المزود البعيد) وإرسالها من جهة إلى أخرى، إلا أن معظم المواقع التي توفر ذلك تطلب أولاً ملء نموذج معلومات عن طالب الخدمة، ثم ترسل له كلمة سر، تمكنه من الدخول إلى أدوات إدارة وتحديث صفحته. اخترنا الموقع http://www.tripod.com كمثال، لنشرح عملياً كيفية حجز صفحة شخصية، وهو يوفر لكل عضو من أعضائه، سعة 11 ميجابايت للصفحة مجاناً. عضوية الموقع مجانية أيضاً، وكل ما يجب فعله للحصول عليها، هو الاتصال بإنترنت، والانتقال إلى الموقع http://www.tripod.com، والنقر في صفحته الرئيسية على زر Free Membership، ثم تعبئة الحقول المطلوبة، التي تتضمن طلب عنوان البريد الإلكتروني، والنقر على زر Join. إذا فعلت ذلك، ستتلقى رسالة في صندوق بريدك الإلكتروني، تتضمن كلمة السر، التي تسمح لك بالدخول إلى الموقع كعضو من أعضائه.
ملأت نموذج الاشتراك، واخترت اسم المستخدم Shahem، فأصبحت أحد أعضاء الموقع وأصبح عنوان الدليل الخاص بي كالتالي: http://members.tripod.com/~Shahem. فإذا فعلت مثلي، وأصبحت أحد أعضاء الموقع، فأهلاً بك أولاً! ثانياً، استخدم كلمة السر التي وصلت إلى عنوان بريدك الإلكتروني، للدخول إلى الموقع كأحد أعضائه، وذلك بالنقر على Members: log in، وإدخال المعلومات المطلوبة، فتجد أنه حجز لك دليلاً بسعة أحد عشر ميجابايت، وعنوانه http://members.tripod.com/~XXXX، حيث XXXX اسم المستخدم الذي اخترته. إذا كنت جاهزاً لإرسال الصفحة إلى موقعك، انقر Free Home Builder، فتنتقل إلى صفحة أدوات تأليف وإدارة الصفحات المجانية التي يوفرها الموقع. لا حاجة لاستخدام أدوات تأليف الموقع، لأنها تجبرك على البقاء متصلاً بالشبكة، خلال وقت التأليف. يضاف إلى ذلك أنك اخترت سابقاً محرر Express Frontpage لتأليف صفحتك، (أو بالواقع نحن من اختار ذلك!)، وهو يؤدي تلك المهمة بأسلوب أفضل. انقر على الارتباط homepage housekeeper، للانتقال إلى صفحة إرسال الملفات إلى المزود البعيد، والتي ستظهر لك أيضاً، عنوان صفحتك، ومعلومات عن السعة التي استخدمتها، والسعة المتبقية، ولائحة أسماء الملفات الموجودة في دليلك حالياً، والتي يفترض أن تكون فارغة أول مرة، لأنك لم ترسل أي ملف إلى المزود البعيد حتى الآن.
هل أنت مستعد للحظة المنتظرة؟ لحظة وصول صفحتك إلى إنترنت؟! اختر إذاً من لائحة Things you can access from the Homepage Housekeeper، الوظيفة Upload files، ثم انقر الزر go!، وستنتقل إلى صفحة إرسال الملفات إلى المزود البعيد، التي تسمح بإرسال خمسة ملفات دفعة واحدة.
أدخل في المستطيل File1: اسم ملف الصفحة التي ألفتها (والتي افترض أن اسمها myhomepg.htm)، مع مساره، أو اختره من القرص الصلب بالنقر على زر Browse، والانتقال إلى مجلده، ثم أدخل بالطريقة ذاتها، اسم ملف صورة الخلفية (backgndpic.gif) في المستطيل File 2:، واسم ملف الموسيقى (music.mid) في المستطيل File3:، وغيرها من الملفات التي استخدمتها في المستطيلات File 4:، وFile 5:.
انقر الزر Upload، وانتظر قليلاً إلى أن يتم إرسال ملف الصفحة والملفات الأخرى. لقد أصبحت صفحتك على الشبكة! تأكد من ذلك بتشغيل نسخة أخرى من المتصفح الذي تستخدمه، وإدخال عنوان صفحتك، (http://members.tripod.com/~XXXX/myhomepg.htm، مثلاً) لتجدها جزءاً من إنترنت. ماذا تنتظر! أسرع واتصل بأصدقائك وأخبرهم عنها!
هل تلاحظ أن أرضية الصفحة أو بعض ملفات الصور، أو الخلفية الموسيقية لا تعمل عندما أصبحت صفحتك على المزود البعيد، بينما كانت تعمل بشكل جيد على قرصك المحلي؟ ماذا تفعل؟!
تأكد أولاً من أنك أرسلت جميع ملفات الصور والصوت التي استخدمتها إلى المزود البعيد، وتأكد أن المسارات في خصائص ملفات الصور والصوت، في الصفحة لا تتضمن سوى أسماء الملفات ذاتها، (أي يكفي ذكر الاسم backgndpic.gif، مثلاً، في المستطيل ضمن لسان التبويب Background، في خصائص الصفحة)، إذ يجب أن تقع تلك الملفات في دليل ملف الصفحة (myhomepg.htm) ذاته على المزود البعيد، وإذا حدد له مسارات مختلفة (كالمسارات الموجودة على قرص الصلب)، فإنه سوف يحاول إرسال ملفات الصور والصوت الموجودة في صفحتك من أدلة غير موجودة عليه أصلاً. عدل مسارات ملفات الصور والصوت في ملف myhomepg.htm من صندوق حوار الخصائص لكل منها، باستخدام برنامج Frontpage Express، بحيث لا تحتوي إلا على أسماء الملفات ذاتها، ثم أرسل الملف myhomepg.htm إلى المزود البعيد مرة أخرى.
هل تكفي صفحة واحدة؟
لابد أنك لاحظت أن معظم مواقع ويب لا تتألف من صفحة واحدة تحتوي على جميع المعلومات المتوفرة في الموقع، بل تبدأ بصفحة رئيسية (Homepage)، يمكن التفرع منها إلى الصفحات الأخرى (شكل 1)، والهدف من ذلك تسريع تحميل الصفحة الرئيسية، لأن محتوياتها في هذه الحالة، تقتصر على فهرس أو قائمة بارتباطات للصفحات الأخرى. يسهّل بناء الموقع بهذا الأسلوب من عملية تحديث معلوماته، وهو أمر لا بديل له بالنسبة للمواقع الكبيرة. يعطى ملف الصفحة الرئيسية، عادة، الاسم index.htm، أو default.htm، وهما اسما الملفين اللذين يبحث عنهما المزود البعيد، عندما يطلب منه الانتقال إلى دليل معين، بدون أن يذكر له اسم الملف الذي يطلب إرساله. فإذا أدخلنا، في حالة الموقع الذي أنشأناه، العنوان http://members.tripod.com/~Shahem فإن المزود البعيد سيحاول البحث عن ملف باسم index.htm، داخل هذا الدليل ويرسل محتوياته للمتصفح. فإذا لم يجده، فإنه يرسل قائمة ارتباطات بأسماء الملفات المتوفرة في ذلك الدليل، لكن من الأفضل الاستفادة من تلقائية البحث وإرسال محتويات ملف index.htm (بالنسبة لمزودات يونيكس)، أو ملف defualt.htm، (بالنسبة لمزودات ويندوز إن.تي)، وإعفاء زائري الموقع من ضرورة كتابة اسم ملف الصفحة الرئيسية، بالشكل members.tripod.com/~Shahem/myhomepg.htm، إذ يكفي عندها إدخال members.tripod.com/~Shahem.
لنبدأ بإعادة تنظيم الصفحة الشخصية بهذا الأسلوب، بحيث نجعل كل قسم من محتوياتها ضمن صفحة منفصلة. غير اسم الملف myhomepg.htm إلى index.htm على القرص الصلب، وشغل برنامج Frontpage Express، وحمله، ثم أنشئ ملفاً جديداً، باختيار File/New، من قائمة البرنامج، ثم اختيار النموذج Normal Page ثم OK. انقل محتويات القسم "سيرتي الذاتية" من الصفحة الرئيسية، إلى الصفحة الجديدة مستخدماً أوامر القص والنسخ من قائمة Edit، كما تفعل في برامج معالجة النصوص، ثم احفظ الصفحة الجديدة على القرص الصلب، باسم myvcpg.htm مثلاً، واحفظ التغييرات التي أجريتها على الملف index.htm. كرر الأمر ذاته بالنسبة لبقية أقسام الصفحة الرئيسية، فيصبح لديك الملفان: myhobbypg.htm لصفحة الاهتمامات والهوايات، وmyfavoritepg.htm للائحة الارتباطات، واترك الارتباط بعنوان بريدك الإلكتروني على الصفحة الرئيسية. لا تنس أن تعين عنوان صفحة (Title) مناسباً، لكل ملف HTML جديد أنشأته، وأن تغير تنسيق النصوص فيه، لكي يتناسب مع وضعه الجديد. اجعل العنوان "السيرة الذاتية" في ملف mycvpg.htm، في وسط السطر، مثلاً، وزد قياس خطه، واحذف العلامة المرجعية MyCV المرتبطة به، بالنقر بالزر الأيمن للماوس عليها، واختيار Bookmark Properties، وحذف كلمة MyCV من صندوق الحوار، ثم النقر على OK. يمكن اختيار أرضيات رسومية وخلفيات موسيقية للصفحات الفرعية تختلف عن أرضية وموسيقى الصفحة الرئيسية، ويتوفر على إنترنت عشرات المواقع التي توفر تلك الرسوميات والأصوات مجاناً. نورد بعض عناوين تلك المواقع في الجدول 1، لكن إذا لم تجد ضالتك فيها، يمكنك تصميم رسومياتك الخاصة، باستخدام أي من برامج الرسم المتوفرة، وحفظها بهيئة GIF، أو JPG، لكي تتمكن من استخدامها في تأليف صفحات ويب.
يجب تغيير الارتباطات الموجودة في قائمة المحتويات على الصفحة الرئيسية، لتشير إلى عناوين الصفحات، بدلاً من العلامات المرجعية التي كانت موجودة في الصفحة ذاتها. إليك مثال عن كيفية فعل ذلك لأحد الارتباطات:
انقر على الارتباط "السيرة الذاتية" بالزر الأيمن للماوس، واختر Hyperlink Properties.
اختر عنوان الصفحة الرئيسية من لسان التبويب Open Pages، ومن قائمة Open Pages.
انتقل إلى لسان التبويب World Wide Web، واختر نوع الارتباط Hyper Link Type، بحيث يكون http:.
أدخل عنوان URL، بحيث يبدأ بعنوان موقعك، وينتهي باسم ملف السيرة الذاتية، بالشكل التالي http://members.tripod.com/~XXXX/mycvpg.htm، مثلاً، إذا كنت مشركاً في موقع tripod، حيث XXXX، تعبر عن اسم المستخدم الذي اخترته.
كرر الإجراء ذاته لبقية الارتباطات، بحيث يشير كل منها إلى الملف الذي يخصه. واحفظ هذه التغيرات التي أجريتها على ملف الصفحة الرئيسية index.htm، ثم اتصل بإنترنت وأرسل ملفات الصفحات الجديدة mycvpg.htm، وmyhobbypg.htm، وmyfavoritepg.htm، إلى المزود البعيد، بالإضافة إلى الإصدارة الجديدة من ملف الصفحة الرئيسية index.htm، وأية ملفات رسومية أو صوتية أخرى استخدمتها، واحذف ملف الصفحة الرئيسية القديم myhomepg.htm من المزود البعيد، (مستخدماً أمر الحذف من صفحة homepage housekeeper، إذا كنت قد اشتركت في موقع Tripod). تأكد أخيراً، من صحة عمل تلك الارتباطات، بزيارة موقعك والانتقال من الصفحة الرئيسية إلى كل من الصفحات الفرعية. ألا يبدو موقعك الآن، أكثر احترافاً؟!
الأزرار
لا يكفي أن يحتوي موقعك على المعلومات الصحيحة والمرتبة، إذ أن مظهره ورسومياته أمران مهمان أيضاً، فماذا يمكن أن تفعل لتحسن من مظهر موقعك؟ إليك بعض الاقتراحات: لماذا لا تحول القائمة الموجودة على الصفحة الرئيسية إلى قائمة أزرار بدلاً من قائمة نصية؟ وتضيف رسوميات متحركة إلى بعض الصفحات؟ وأزرار رجوع من الصفحات الفرعية إلى الصفحة الرئيسية؟
هيا نفعل ذلك!
لنبدأ بالأزرار.. معظم الأزرار التي تراها على صفحات ويب رسوم مرتبطة بصفحات أخرى، يضيف إليها مؤلفو الصفحات شيفرة برمجية بلغة CGI (Common Gateway Interface)، أو JavaScript لمحاكاة حركة ضغط الزر الفيزيائي، بالتبديل بين رسمين مختلفين للزر ذاته. ويوجد نوع آخر من الأزرار تحاكي حركة ضغط الزر أيضاً، والتي تعتمد على ما يسمى بريمجات جافا (Jave Applets). لكن، لن ندخل في تفاصيل كيفية برمجة الأزرار المتحركة، فتلك مسألة تحتاج لشرح منفصل، يمكن أن نقدمه في أعداد مقبلة، وسنكتفي حالياً بالأزرار الساكنة. يمكن تصميم الأزرار بالشكل الذي ترغبه، باستخدام أي من برامج الرسوميات المتوفرة، إلا أننا ننصحك بجلب الأزرار من أحد مواقع إنترنت الذي يوفرها مجاناً (انظر جدول 1)، وتعديلها بالشكل الذي ترغبه.
جلبنا من الموقع http://www.webwider.com/syzone/test/button1.shtml مجموعة من ملفات الأزرار، ثم أضفنا عليها الكلمات العربية لقائمة الصفحة الشخصية باستخدام برنامج تحرير الرسوميات Paint Shop Pro، (لا تحتاج عملية جلب ملف الزر، سوى النقر على صورته بالزر الأيمن للماوس، واختيار Save as Picture، في متصفح إنترنت إكسبلورر). سمينا الملفات bttn_mycv.gif لزر "السيرة الذاتية" وbttn_hobby.gif لزر "الهوايات"، وbttn_myfav.gif، لزر المواقع المفضلة.
فإذا فعلت ذلك أيضاً، افتح الملف index.htm، ببرنامج Frontpage Express، واتبع الخطوات التالية لإضافة كل زر من الأزرار:
نفذ إجراء إدراج صورة، كما تعلمت سابقاً، اختر Insert/Image، ثم أدخل اسم ملف صورة الزر.
اختر خصائص صورة الزر بالنقر بالزر الأيمن للماوس، ثم اختر لسان التبويب General.
أدخل في الإطار Default Hyperlink، وضمن الحقل Location، عنوان الصفحة التي ترغب بالانتقال إليها عند النقر على صورة الزر، ولا تنس أن تدخل http:// أولاً. أدخلتُ العنوان التالي لارتباط زر صفحة السيرة الذاتية http://members.tripod.com/~Shahem/mycvpg.htm،
احذف الارتباطات النصية، ورتب الأزرار عمودياً أو أفقياً، حسب رغبتك، ثم احفظ التعديلات على ملف الصفحة الرئيسية index.htm.
ماذا؟! هل أصبحت تعرف كيفية إضافة زر عودة من الصفحات الفرعية إلى الصفحة الرئيسية، وتريد أن تشرح لي ذلك؟
موافق!
"سأجلب أولاً زر من أحد المواقع التي توفرها مجاناً، ثم سأستخدم أحد محررات الرسوميات، لأكتب عليه كلمة "الصفحة الرئيسية" وأحفظه بشكله الجديد. سأفتح كل ملف من ملفات الصفحات الفرعية وأضيف إليها ذلك الزر في موقع مناسب، في أسفل يسار الصفحة، مثلاً. ثم سأفتح خصائص صورة الزر في كل منها بالنقر بالزر الأيمن للماوس، واختار Image Propertise، (خصائص الصورة)، وأنتقل إلى لسان التبويب General، وأدخل عنوان الصفحة الرئيسية في الإطار Default Hyperlink، وضمن الحقل Location، بادئاً بـ http://:، ثم أحفظ هذه التعديلات في الملفات المعنية، أليس ذلك صحيحاً؟"
ممتاز! لقد قلت ما أريد قوله بالضبط!
لكن، هل تعرف الأزرار التي تظهر رسوماً متحركة؟
لا بد أنك رأيت كثيراً من الرسوم المتحركة على صفحات ويب، وترغب أن تجعل صفحاتك أكثر حيوية بإضافة بعضها. سنقتصر في هذه الحلقة على أبسط أنواعها، وهي ملفات بهيئة GIF، تسمى Animated GIF، وتحتوي على مجموعة من الرسوم التي يمثل تتابعها حركة معينة. تدعم معظم المتصفحات الحالية هذا النوع من الملفات، ويكفي إدراجها في الصفحة لكي تظهر حركة معينة، ويمكن تعيين ارتباط لها بحيث يؤدي النقر عليها إلى الانتقال إلى الصفحة المطلوبة. سنستبدل ارتباط عنوان البريد الإلكتروني، بزر رسوم متحركة مرتبط بالعنوان ذاته، وذلك بالطريقة التالية:
انتقل إلى الموقع http://www.elated.com/toolbox/buttonkits واجلب أحد الرسوم المتحركة التي تمثل البريد الإلكتروني، بالنقر بالزر الأيمن للماوس على الرسم المتحرك واختيار Save As Picture، وحفظ الملف على القرص الصلب.
افتح ملف الصفحة الرئيسية index.htm، وأدرج الصورة في اسفل الصفحة، ووسطها.
أدخل عنوان بريدك الإلكتروني في حقل Default Link، من خصائص الصورة، واسبقه بالعبارة mailto:، ثم احفظ التغييرات التي أجريتها.
يمكنك الآن تحميل ملف الصفحة الرئيسية ضمن المتصفح، لكي تشاهد الرسم المتحرك.
يمكن إضافة العديد من الصور المتحركة إلى صفحتك الرئيسية أو الصفحات الفرعية، لإضفاء جو من المرح، وهي متوفرة مجاناً في كثير من المواقع المذكورة في الجدول 1، لكن لا ننصحك بالإكثار منها في صفحتك، لأنها إذا استخدمت بإفراط تبطئ من سرعة تحميلها في المتصفح، وتصبح مزعجة للمستخدم.
إذ أردت أن تنشئ أو تعدل ملفات Animated GIF، يجب استخدام محررات رسوم خاصة بملفات GIF المتحركة، مثل GifShaker (www.imagelib.com/products/gifshkr.html)، وAnimated Screen 2.1 (www.pysoft.com/downloads_fr.html)، وXara3D 2.1 (www.xara.com/xara3d/download.htm)، وغيرها مما يمكن أن تجده مصنفاً في الموقع http://www.cnet.com، أو http://www.zdnet.com.
عدادات الزوار
ربما لا يبدو أمراً لطيفاً، أن تقابل زوار منزلك بالقول: أنت الزائر رقم 50 منذ 1/1/1998، بدلاً من القول: أهلاً وسهلاً!
لكن هذه العبارة أمر مألوف على صفحات ويب، وتوضع، عادة، على الصفحة الرئيسية للموقع بهدف إظهار مدى شعبيته (أو التفاخر بمدى شعبيته)، بالإضافة إلى أنها توفر لمدير الموقع وسيلة مباشرة لمعرفة عدد الزوار. لكن، لا يحتاج مديرو مواقع الجهات التي تملك أسماء نطاقات خاصة بها (domain name) لاستخدام عدادات الزوار هذه، إذ تتوفر لديهم أدوات أقوى توفر تحليلاً كاملاً لحالة الموقع، وتحدد عدد زواره بدون الحاجة لإظهار ذلك علناً.
تكتب معظم عدادات الزوار بلغة CGI (Common Gateway Interface) (راجع موضوع "التفاعل مع صفحات إنترنت باستخدام برامج واجهة البوابة العمومية"، المنشور في هذا العدد)، ويكتب بعضها الآخر بلغة جافا على شكل بريمجات جافا (Java Applets)، ولن ندخل بالطبع، في تفاصيل برمجة العدادات، فهو خارج نطاق بحثنا، وكل ما يهمنا هو استخدام العدادات الجاهزة. سنستخدم عداداً بلغة CGI، ونترك الحديث عن عدادات برمجيات جافا للحلقة المقبلة. يختلف تنفيذ برامج CGI على المزود البعيد، عن طلب إرسال معلومات بلغة HTML الوصفية منه، ولا تسمح معظم المزودات البعيدة التي توفر المواقع المجانية بتشغيل برامج بلغة CGI خاصة بالمستخدم، لأنه أمر خطر على أمنها، ولأنه يتيح للمستخدم إمكانية التحكم بعملها، إلا أنه توجد مواقع توفر خدمة تنفيذ برنامج عدادات CGI على مزوداتها الخاصة، لعد زوار مواقع أخرى مجاناً. يتوفر في الموقع http://webcom.net/~klg/counters.html، والموقع http://webcom.net/~klg/counters.html عشرات الارتباطات المتعلقة بمواقع العدادات. ويختلف أسلوب استخدام كل منها، فبعضها يحتاج إلى إضافة بعض السطور بلغة HTML فقط، لتشغيل برنامج العداد، وأخرى يمكن نسخها ولصقها في الصفحة المعنية، ولا يمكن لذلك تقديم طريقة عامة تصلح لكل الجهات التي توفر تلك الخدمة. وسنكتفي بأن نورد مثالاً عن أحد العدادات المتوفرة مجاناً. اخترنا أن نستخدم العداد الذي يوفره الموقع http://counters.qpt.com، الذي يطلب منك تسجيل حسابك المجاني، بإدخال عنوان موقعك، وعنوان بريدك الإلكتروني، فيرسل إلى صندوق بريدك الإلكتروني رقم الحساب، وكلمة المرور، ومقطعاً من شيفرة HTML يجب أن تنسخها إلى الملف الذي ترغب أن تضع فيه العداد (وهو الملف index.htm في هذه الحالة). أظهرنا نص HTML لملف index.htm، باختيار View/HTML من قائمة برنامج Frontpage Express، ونسخنا مقطع شيفرة HTML من الرسالة الإلكترونية التي وصلتنا إلى نهاية شيفرة HTML لملف الصفحة الرئيسية، وقبل الواصفتين </body>، و</html>، أغلقنا نافذة تحرير HTML بالنقر على OK، فظهر العداد على الصفحة، فأزحناه ووسطناه في المكان المناسب. تسمح الجهة صاحبة الخدمة باختيار شكل العداد، وإعداده عبر طريقة خاصة بها مشروحة في الموقع.
بعد كل هذه التغييرات أصبحت الصفحة الرئيسية كما في الشكل 2، وربما تختلف عن الشكل الذي وصلت إليه في صفحتك. تذكر أنه يجب أن ترسل ملفات الصفحات والأزرار والرسوم المتحركة التي استخدمتهاإلى موقعك أيضاً، وأن تتأكد من أن "صحة" صفحتك على ما يرام بزيارتها وتجربة فعالياتها.
لا بد أن لديك كثيراً من التعديلات والتطويرات التي ترغب أن تنفذها على صفحتك بعد هذه المقالة، لذلك لا بد لي من أن أتركك تجرب كل شيء بنفسك، وإلى اللقاء في العدد المقبل.
جدول 1 (الأرضيات الرسومية، الأزرار، الصور المتحركة)
http://www.ecn.bgu.edu/users/gas52r0/Jay
http://www.mangus.com
http://www.bellsnwhistles.com
http://www.ender-design.com/rg
members.aol.com/dcreelma/imagesite
http://www.netscape.com/assist/net_sites/bg/backgrounds.html
http://www.chenowith.wasco.k12.or.us/tech/design/buttons.html
http://www.innova.net/~goob/bits27.html
web.online-graphics.net
http://www.free-graphics.com
http://www.coolarchive.com
http://www.silverpoint.com/leo/lia
http://www.animationzone.com
http://www.fortunecity.com/boozers/dragon/28/
http://www.geocities.com/CollegePark/2883/
http://dome.communitech.net
http://www.webwider.com/syzone/
لا بد أنك لم تكتف بتنفيذ الأمثلة التي مرت في الجزءين السابقين، وبدأت بإضافة نصوصك وصورك الخاصة على صفحات ويب التي باشرت بتأليفها. وربما حاولت تنسيق تلك النصوص والصور، لكنك فوجئت بصعوبة تنسيق النص ومحاذاة الصور بالشكل الذي ترغبه تماماً، كما تفعل، عادة، في محررات النصوص، وأحسست بالضيق لذلك، وأرجعت الصعوبة إلى قلة خبرتك في تأليف صفحات ويب، والتعامل مع برنامج FrontPage Express. لكن الأمر ليس كما اعتقدت! إذ لا يمكن تنسيق النصوص أثناء تأليف صفحات ويب، بالطريقة ذاتها التي تنفذ عند التعامل معها من خلال محررات النصوص، ولا يمكن سوى تعيين جهة محاذاة النص والصورة، إلى اليمين أو اليسار أو في الوسط. والحل الوحيد لضبط النص بعد فراغ معين، أو ضمن مربع معين، استخدام إمكانية توفرها لغة HTML، وهي تنسيق محتويات الصفحة ضمن جداول (Tables).
تسمح لغة HTML بتعيين عدد أعمدة وصفوف الجداول، وضبط محاذاتها إلى يمين أو يسار أو وسط الصفحة، بالإضافة إلى العديد من الخصائص الأخرى. لكننا، كما فعلنا منذ البداية، سنستخدم برنامج FrontPage Express لتعيين تلك الخصائص للجداول، بدلاً من أن نعينها عبر واصفات HTML، إذ يوفر البرنامج قائمة خاصة للجداول، باسم Table. يمكن استخدام الجداول لتنسيق النصوص والصور بأسلوب معين، إلا أن الاستخدام الطبيعي لها هو في إظهار جداول على صفحات ويب، وهذا ما سنضرب مثالاً عليه أولاً، ثم سنرى كيفية استخدامها بأساليب أخرى.
تذكر أننا أنشأنا صفحة أدرجنا فيها لائحة الوصلات بالمواقع المفضلة… ما رأيك أن تظهر تلك الوصلات بشكل أكثر ترتيباً، بحيث نضعها ضمن جدول يتضمن ثلاثة أعمدة: الأول لعنوان الموقع، والثاني يصف محتوياته، والثالث يظهر مستوى جودته حسب تصنيفك الخاص، وعلى سلم مكون من خمسة نجوم؟!.
موافق!
إليك خطوات العمل:
افتح ملف صفحة وصلات المواقع المفضلة myfavoritepg.htm، مستخدماً برنامج FrontPage Express.
انتقل إلى نهاية الصفحة، ثم اختر من قائمة Table، الأمر Insert Table، فيظهر صندوق حوار يطلب عدد الصفوف والأعمدة، ضمن إطار Size، وهيئة الجدول، ضمن إطار Layout، وعرض الجدول، ضمن إطار Width.
غير عدد الأعمدة إلى ثلاثة (عنوان الموقع، المحتويات، التقييم)، وعدد الأسطر إلى عدد يساوي عدد المواقع المفضلة التي ترغب بإدراجها في الجدول. (يمكن لاحقاً تغيير عدد الصفوف والأعمدة حسب حاجتك، من قائمة Table ذاتها).
اختر من إطار Layout، ومن لائحة Column Order، الاتجاه RTL (من اليمين لليسار)، وهو اتجاه الانتقال من حقل إلى آخر، عند الضغط على الزر Tab أثناء إدخال المعلومات في الجدول، بالإضافة إلى أنه يضبط ضمنياً، المحاذاة إلى اليمين داخل خلايا الجدول، وهي المحاذاة الطبيعية في الصفحات العربية.
اختر محاذاة الجدول، في وسط الصفحة، من الإطار Layout، ومن لائحة Alignment.
غير عرض حواف الجدول الخارجية، إلى قيمة 2 بكسل، من مستطيل الإدخال Border Size، وضمن إطار Layout أيضاً. إذا أبقيت على قيمة عرض الحواف صفراً، فلن تظهر الحواف الخارجية، أو الحواف الداخلية، عند إظهار الجدول باستخدام المتصفح.
عين قيمة بطانة الخلية (Cell Padding)، وتباعد الخلايا (Cell Spacing) بحيث تساوي واحد، حيث تحدد قيمة بطانة الخلية بالبكسل بعد حواف خلية الجدول داخلاً عن محتوياتها من جميع الأطراف، بينما تحدد قيمة تباعد الخلايا المسافة بين حافة الخلية والخلية التي تجاورها بالاتجاه الأفقي أو الشاقولي، بالبكسل أيضاً.
تحدد محتويات الإطار Width عرض الجدول، وذلك حين النقر على مربع الاختيار Specify Width. يمكن عندها تعيين عرض الجدول كنسبة مئوية من الصفحة، عند اختيار in Percent، أو كقيمة محددة بالبكسل عند اختيار in Pixels. اختر in Percent، ثم أدخل قيمة 90 في مستطيل الإدخال، فيكون عرض الجدول المطلوب 90% من عرض الصفحة بغض النظر عن الكثافة النقطية المستخدمة في الإظهار.
انقر زر Ok، فيظهر FrontPage Express الجدول بالهيئة والمحاذاة التي حددتها. لاحظ أنه يمكن التنقل بين خلايا الجدول بالضغط على زر Tab، كما يحدث في برنامج وورد عادة.
إذا لم يعجبك شكل الجدول الظاهر أو أبعاده، يمكن أن تنقر بالزر الأيمن للماوس داخل الجدول وتختار Table Properties… (خواص الجدول)، فيظهر صندوق حوار يسمح بإجراء التغييرات التي تريدها في هيئة الجدول، أو عرضه، أو محاذاته، بالإضافة إلى أنه يوفر إمكانية تغيير لون أرضيته من داخل الإطار Custom Background، إذ يمكن اختيار اللون من لائحة Background Color. يمكن من خلال صندوق حوار خصائص الجدول تعيين صورة خلفية له، باختيار Use Background Image ثم إدخال اسم ملف الصورة، الذي يجب أن يكون من هيئة GIF أو JPG. إذا كانت أبعاد الصورة الخلفية أصغر من أبعاد الجدول، فإنها تتكرر حتى تملأ كامل أرضيته، أما إذا كانت أبعادها أكبر منه، فيظهر الجزء العلوي منها فقط، بمساحة تساوي مساحة الجدول. لاحظ أنه عند استخدام صورة خلفية فإنها تطغى على اللون المعين للأرضية. ويجب، عند تعيين صورة خلفية للجدول، إرسال ملف الصورة إلى المزود الذي يستضيف الصفحة التي تتضمن الجدول المعني. انتبه عند اختيار صورة خلفية، أن لا تعيق ألوانها وخطوطها قراءة النصوص الموجودة في خلايا الجدول. وينطبق الأمر ذاته عند اختيار لون أرضية للجدول، إذ يجب أن يكون لوناً يسهل تمييز النص الذي يتضمنه، بسهولة.
يمكنك تعيين ألوان حواف الجدول من ضمن إطار Custom Colors، وذلك باختيار اللون من قائمةBorder: ، أو اختيار لوني الظل الخفيف، والداكن من قائمتي Light Border وDark Border.
ضع المشيرة داخل الجدول، ثم اختر من قائمة Table الأمر Insert Caption لإدراج عنوان للجدول، ثم أدخل العنوان "جدول المواقع المفضلة" في تلك الخلية الجديدة التي أدرجت. إذا نقرت بالزر الأيمن للماوس داخل خلية عنوان الجدول، يمكنك إظهار خصائصها بأمر Caption Properties، ثم تحديد موقعها أعلى أو أسفل الجدول، بالخيارين Top of Table أو Bottom of Table.
أدخل عناوين أعمدة الجدول في الخلية الأولى من كل عمود… أدخل مثلاً "عنوان الموقع"، و"المحتويات"، و"التقييم".
املأ الجدول بقص ونسخ الوصلات الموجودة في الصفحة إلى خلايا العمود الأول "عنوان الموقع"، وأدخل الوصف الذي تعرفه عن كل موقع في العمود الثاني، وتقييمك له في العمود الثالث، على شكل سلم من خمسة نجوم.
احفظ الملف الناتج، ثم اعرضه مستخدماً متصفح إنترنت المتوفر لديك، لتتأكد من أنه يظهر الجدول بالشكل الذي تريده.
ليس هذا كل ما يمكن أن تفعله بالجداول، إذ لا تكتفي لغة HTML بتوفير إمكانية عرض الجداول على صفحات ويب، بل تضيف إلى ذلك إمكانية دمج خليتين متجاورتين، أو تقسيم خلية معينة إلى خليتين. ويخفي برنامج FrontPage Express تفاصيل ذلك عبر أمري Merge Cells و Split Cells، في قائمة Table، بشكل يشبه التعامل الجداول في محرر النصوص وورد. تسمح لغة HTML أيضاً، بتحديد مواصفات أية خلية من خلايا الجدول، وهذا ما يعكسه برنامج FrontPage Express من خلال صندوق حوار خصائص الخلية، الذي يظهر عند نقل المشيرة إلى خلية معينة، واختيار Cell Properties من قائمة Table، أو من القائمة المنبثقة التي تظهر عند النقر بالزر الأيمن ضمن الخلية. يتضمن صندوق حوار خصائص الخلية إمكانية تحديد لون أو صورة الأرضية، في إطار Custom Background، ولون الحواف في إطار Custom Color، بالإضافة إلى إمكانية اختيار محاذاة المعلومات داخلها في إطار Layout، واختيار عرضها الأدنى في إطار Minimum Width.
ويتيح برنامج FrontPage Express تغيير خصائص جميع الخلايا التي تخص صفاً أو عموداً في جدول، باختيار Select Row أو Select Column، ثم اختيار Cell Properties. جرب، مثلاً، أن تغير لون خلايا الصف الأول، من الجدول الموجود في ملف المواقع المفضلة.
يمكنك الآن إرسال الملف إلى المزود الذي يستضيف صفحاتك، ثم التأكد من أن النقر على زر "المواقع المفضلة" في الصفحة الرئيسية يؤدي إلى ظهوره، لكن لا تنس أن تعين لها ملف الصورة الأرضية، والعنوان، وأن تضيف إليها زر العودة إلى الصفحة الرئيسية.
الجداول أيضاً:
لا يقتصر استخدام الجداول في تأليف صفحات ويب على استخدامها كجداول فعلاً، إذ يمكن استخدامها كوسيلة لتنسيق النصوص والصور، كما ذكرنا، حيث يمكن أن تتضمن خلية الجدول صورة أو أكثر، أو حتى جداول أخرى.
لنفرض أنك ترغب بعرض صورتك على الصفحة الرئيسية، بجانب نص ترحيبي. يمكن، كي تنفذ ذلك بسهولة، أن تدرج جدولاً يتضمن صفاً واحداً، وعمودين، وتضبط عرض حواف الجدول ( Border Size) على القيمة صفر، أي بدون حواف مرئية، ثم تدخل النص الترحيبي الذي تريده في الخلية اليمنى، وتضع المشيرة في الخلية اليسرى، وتدرج فيها الصورة المرغوب، ثم تضبط قيمة عرض كل من الخليتين Minimum Width، (من خصائص كل خلية)، بحيث تجعل خلية النص أكبر من خلية الصورة، (70% للخلية اليمنى، 30% للخلية اليسرى، مثلاً) يجب أخيراً، كالعادة، حفظ الملف الناتج وإرساله مع ملف الصورة إلى المزود الذي يستضيف صفحتك، فتظهر الصفحة الرئيسية في المتصفح بهيئة تشبه الشكل 1.
يمكن أن تستفيد من الجداول أيضاً، إذا أردت إنشاء صفحة تتضمن مجموعة من الصور المصغرة المرتبة على شكل صفوف وأعمدة، والتي يؤدي النقر على كل منها إلى عرض الصورة ذاتها، لكن بأبعادها الأصلية. ويمكن أن تذيل كل مصغّر صورة بتعليق مناسب. يسمح هذا الأسلوب من عرض الصور بشكل مصغر، بإلقاء نظرة شاملة على مجموعة الصور كلها، ثم مشاهدة الصورة بأبعادها الأصلية عند الرغبة. يمكن تنفيذ ذلك لكي تعرض، صوراً للأماكن التي زرتها، مثلاً، أو للأماكن الشهيرة في مدينتك، أو حتى صور طفلك في سنواته الأولى. (يجب أن تكون تلك الصور متوفرة لديك بشكل إلكتروني على هيئة ملفات GIF أو JPG).
ابدأ العمل بأن تنشئ ملفاً جديداً من نوع htm، باستخدام برنامج FrontPage Express، وسمه myGalleryPg.htm، مثلاً، ثم أنشئ فيه جدولاً يتضمن عدداً من الخلايا مساوياً لعدد مصغرات الصور التي تريد إظهارها، وبترتيب مناسب لأشكال صورك، ثم أدرج في كل خلية صورة مختلفة، وصغر كل صورة إلى الأبعاد التي ترغبها بنقر الصورة، ثم اسحب وأفلت أحد مربعات التحكم، التي تظهر على زواياها الأربع في البرنامج. انقر بالزر الأيمن للماوس على كل صورة، ثم اختر خصائصها Image Properties، وأدخل في صندوق الحوار الظاهر، وضمن الإطار Default Hyperlink، وفي مستطيل النص Location، عنوان موقعك، مضافاً إليه اسم ملف الصورة ذاتها، (يبدو ذلك بالنسبة للصفحة التي أنشأناها في المقال السابق http://members.tripod.com/Shahem/Picture1.jpg، حيث Picture1.jpg اسم ملف الصورة مثلاً). أرسل ملف myGalleryPg.htm وملفات الصور إلى المزود البعيد الذي يستضيف صفحتك، ثم أنشئ زراً مرتبطاً به على ملف الصفحة الرئيسية واحفظه، ثم أرسله إلى المزود البعيد. انتقل إلى تلك الصفحة الجديدة واختبر النتيجة.
سجل الزوار (Guest Book)
تحتوي كثير من مواقع إنترنت سجلاً للزوار، وهو المكافئ الإنترنتي (ما رأيكم بهذا الاشتقاق؟!) لسجل الزوار، الذي تجده عادة في المتاحف أو المعارض، والذي يستطيع الزائر من خلاله، إبداء رأيه وملاحظاته في ما شاهده، أو يطلع على أراء من سبقه من الزوار. يتم إدخال التعليقات في السجل عادة، عبر صفحة تتضمن عدداً من مستطيلات الإدخال، أهمها مستطيل لإدخال اسم الزائر، وآخر لإدخال التعليق ذاته. وتتوفر، عادة، أيضاً، إمكانية عرض التعليقات السابقة حسب تسلسل ورودها. يحتاج إنشاء سجل للزوار إلى معرفة بلغة CGI، التي لا يعرفها معظم المبتدئين في هذا المجال، بالإضافة إلى توفر صلاحيات لدخول دليل CGI، وتنفيذ المزود الذي يستضيف الموقع للبرامج المكتوبة بها، وهذا مالا تسمح به الجهات التي تستضيف الصفحات المجانية. لكن، يمكن على الرغم من هذا، أن تضيف سجلاً للزوار إلى صفحتك، إذ تستضيف كثير من الجهات سجلات زوار مجانية لمن يرغب، بالأسلوب الذي تتوفر فيه الصفحات المجانية، حيث يجب الاشتراك أولاً، لدى الموقع الموفر للخدمة، عبر ملء نموذج تسجيل، يطلب عنوان البريد الإلكتروني، وعنوان الموقع الذي ترغب بإضافة سجل زوار إليه، ثم يرسل مقطعاً من الشيفرة بلغة HTML، تكفي إضافته إلى صفحتك الرئيسية، عبر فتح نافذة View/HTML ونسخ نص الشيفرة في نهاية النص وقبل إغلاق الواصفة body، ليظهر وصلتين: إحداهما لصفحة إدخال التعليق، والأخرى لصفحة عرض التعليقات السابقة.
سجلت في الموقع http://www.GuestWorld.com، فأرسل لي الشيفرة التالية:
<center><a href="http://titan.guestworld.tripod.lycos.com/wgb/wgbsign.dbm?owner=Shahem">Sign My Guestbook</a>
<a
href="http://GuestWorld.Tripod.Lycos.com"><img src="http://GuestWorld.Tripod.Lycos.com/gif/GuestWorldbutton.gif" height="31" width="87" alt="Guestbook by GuestWorld"></a>
<a href="http://titan.guestworld.tripod.lycos.com/wgb/wgbview.dbm?owner=Shahem">View My Guestbook</a>
</center>
لاحظ أنها تتضمن وصلةً لصفحة إدخال التعليق قبل عبارة Sign My Guestbook، ووصلة لصفحة عرض التعليقات قبل عبارة View My Guestbook. غيرت هاتين العبارتين بترجمتهما العربية ونسخت نص الشيفرة إلى شيفرة HTML للصفحة الرئيسية، ضمن نافذة View/HTML في برنامج FrontPage Express. يمكنك، بدلاً من ذلك، استبدال الوصلتين النصيتين بزرين أو صورتين متحركتين، مرتبطتين بالصفحتين ذاتهما.
زر الموقع http://home1.swipnet.se/~w-10344/ للوصول إلى جداول وصلات بعناوين عدد من المواقع التي توفر سجلات الزوار المجانية، والمواقع التي تستضيف الصفحات المجانية، والكثير من الوصلات المفيدة الأخرى.
إبرة في كومة قش!
هذه حال صفحتك في شبكة إنترنت، فكيف تجعل متصفحي إنترنت يجدونها أو يتعرفون عليها؟!
يستخدم معظم متصفحي إنترنت مواقع البحث، للوصول إلى المعلومات التي يريدونها، كموقع ألتافيستا أو ياهو، التي تفهرس باستمرار محتويات صفحات إنترنت المختلفة، لكنها لا تفعل ذلك إلا إذا أُخبرت بوجود تلك الصفحات، حيث تسمح لأصحاب المواقع الجديدة بأن يرسلوا عناوينها إلى مواقع البحث، كي تفهرس آلات البحث (Search Engine) محتوياتها خلال فترة تتراوح بين يوم أو عدة أيام. أرسلت عنوان الصفحة الشخصية التي أنشأتها إلى آلة بحث موقع ألتافيستا http://www.altavista.digital.com، بالنقر على الوصلة Add a Page ، الموجودة أسفل الصفحة الرئيسية فيه، فانتقلت إلى صفحة أخرى، أدخلت فيها عنوان URL لصفحتي الشخصية في المستطيل المخصص لذلك، ونقرت على زر Submit URL، فأظهر التقرير المبين في (الشكل 2) وأن صفحتي ستفهرس خلال يوم أو يومين.
إذا أردت أن تضيف لصفحاتك كلمات مفتاح (Keywords) بحيث يؤدي البحث عنها إلى ظهور عنوان صفحتك في نتائج البحث، يمكنك أن تدرج في صفحاتك ما يسمى
التعليقات Comments، وهي كلمات أو عبارات تضيفها على الصفحة لكن المتصفح يتجاهل عرضها. لإدراج تعليق باستخدام برنامج FrontPage Express، انقر Insert/Commnet وأدخل الكلمات المفتاحية في لصندوق الحوار الظاهر.
يمكنك أيضاً إضافة عنوان صفحتك إلى أحد الأدلة (Directory) الموجودة على إنترنت، والتي توفر وصلات بمئات المواقع مصنفة حسب موضوعها، فيضيف ذلك الدليل وصلة بعنوان موقعك، ويضعه تحت التصنيف الذي تختاره عند إرسال ذلك العنوان.
يمكنك من خلال الموقع http://www.liquidimaging.com/submit إضافة عنوان صفحتك إلى العديد من آلات البحث والأدلة، كألتافيستا، وAOL NetFind، وExite، وGoto.com، وHotBot وغيرها.
عودة إلى الشاطئ!
وصلنا معاً إلى نهاية هذا المقال وإلى نهاية هذه السلسلة عن تأليف صفحات ويب باستخدام برنامج FrontPage Express. وكان الهدف منها تعريف المبتدئين بالأمور الأساسية في هذا المجال، بحيث يتمكنون في نهاية المطاف، من إنشاء صفحات ويب بسيطة، بشكل سريع وسهل. أغفلنا عمداً بعض الميزات المتوفرة في لغة HTML، كإمكانية إظهار الإطارات أو تشغيل بريمجات جافا وشيفرة CGI، لأنها تتضمن معلومات تفوق مهارات المبتدئين، بالإضافة إلى أنهم لا يحتاجونها في تأليف صفحاتهم البسيطة.
لم ينته هذا الموضوع من جهتنا، وسنتابع الاهتمام به وتقديمه على صفحات مجلتنا في الأعداد المقبلة، لكن من زوايا أخرى. نود أخيراً، أن نشجعكم على تأليف صفحاتكم باللغة العربية بشكل خاص، لزيادة محتويات الشبكة من الصفحات العربية، ولا بأس أن ترافقها اللغة الإنجليزية أو غيرها، إذا كنتم ترغبون بتوجيه صفحاتكم إلى جميع متصفحي إنترنت. نذكركم أننا ننشر في كل عدد عرضاً لبعض الصفحات الشخصية الغنية بالمحتويات والحسنة التصميم، أدعوكم للاطلاع عليها، وإذا أنشأتم صفحات شخصية مميزة، أرجو أن ترسلوا عناوينها إلى زميلنا ماهر الجنيدي (maher@ditnet.co.ae)، ليشملها في مقالاته المقبلة.
صفحات جديدة
إذا ساعدتكم هذه السلسلة من المقالات في إنشاء صفحات خاصة بكم على شبكة ويب أرجو أن ترسلوا لي عناوينها إلى بريدي الإلكتروني shahem@ditnet.co.ae، لكي ننشرها ضمن المقالات المقبلة.
وصلنا إلى الآن عنوان القارئين مصطفى ياسين http://members.tripod.com/myassin، وطالب المقبالي http://www.geocities.com/TelevisionCity/Studio/2220/K اللذان أنشئا صفحتاهما بالاستعانة بالجزءين السابقين من هذه السلسلة.