تعلم بناء المواقع ( الجزء الثاني)

تأليف محتويات صفحة على شبكة ويب:

من أين أبدأ؟

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

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

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

text<\tag>

مثال ذلك السطر التالي:


صفحتي الشخصية<\h1>

تبين الواصفة <h1>، للمتصفح، كيف يظهر النص "صفحتي الشخصية"، ولهذا، يجب لتعلم تأليف الصفحات بلغة HTML، تعلم معنى عشرات الواصفات المختلفة. وهذا هو السبب الرئيسي الذي يجعل التأليف بهذه اللغة صعباً، إلا أنها توفر مرونة كبيرة وقوة في تأليف صفحات ويب، لذا يستخدمها المحترفون في هذا المجال.

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

أي محررات صفحات ويب أختار؟

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

وهذا ما جعلني أختار استخدام برنامج تحرير صفحات ويب FrontPage Express، وهو إصدارة مجانية من برنامج FrontPage، يرفق بالإصدارة الكاملة من برنامج إنترنت إكسبلورر 4.0، من موقع مايكروسوفت التالي: 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، في إنترنت إكسبلورر)، وسيحمل المتصفح النسخة الجديدة مباشرة. لا تنس أن تكرر هذه الطريقة في المراحل التالية، كلما عدلت شيئاً على الصفحة، لتتأكد من أنها تعرض بالطريقة التي تتوقعها

أقرب صاحب..
موضوع جميل..
لكني وبصراحه وللأسف..مهما حاولت لا أستطيع التطبيق
اهئ اهئ...

أختي فدك : قد يكون الأمر في بادئ الأمر صعب قليلا

ولكن أي شيء لا تعرفينه إسألي عنه وأنا بالخدمة وإنشاء الله سأنشر موقعي

على النت وقد صممته ووجدت أن الأمر سهل جدا

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

[c]

أخي الفاضل : أقرب صاحب

مجهود طيب و شرح حلو وواضح

التصميم بالفعل ممتع و خصوصاً اذا اذا أبحرت في عالمه و بقوة

لك و تقديري

[/c]