كيفية إنشاء صفحة على شبكة ويب - جديد العلم والمعرفة

    • كيفية إنشاء صفحة على شبكة ويب - جديد العلم والمعرفة


      لابد أن معظمكم تجول حتى الآن، في كثير من مواقع شبكة ويب، ومر أثناء ذلك، بصفحات أو مواقع أنشأها أشخاص بهدف التعريف بأنفسهم، أو بنشاطاتهم المختلفة، فأعجبته بعض الصفحات، أو قرر عدم زيارة بعضها الآخر! فإذا رغبت أنت أيضاً، في إنشاء موقع أو صفحة شخصية، وليس لديك خبرة سابقة في هذا المجال، وتتساءل عن كيفية عمل ذلك؟ ومن أين تبدأ؟ ندعوك هنا إلى متابعة الموضوع عن كيفية إنشاء صفحة على شبكة ويب، ويمكن أن تعتبرها خطوتك الأولى على هذا الطريق
      يتضمن الموقع عادة، عدداً من الصفحات، يحفظ كل منها في ملف منفصل، تحدثنا فيما سبق، عن الطرق المتوفرة لإنشاء صفحة أو موقع، على شبكة ويب، وركزنا على المواقع التي توفر صفحات مجانية، وبيّنا ميزات وعيوب بعض هذه المواقع، وقارنّا بين خدماتها المختلفة، من ناحية السعة المتوفرة للصفحة، وأسلوب تحديثها، وسهولة الوصول
      إليها، وأعطينا مثالاً سريعاً، عن إنشاء صفحة مجانية على أحد المواقع المشهورة، وهو
      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)، وذلك بالشكل التالي:
      text
      مثال ذلك السطر التالي:
      صفحتي الشخصية
      تبين الواصفة
      ، للمتصفح، كيف يظهر النص "صفحتي الشخصية"، ولهذا، يجب لتعلم تأليف الصفحات بلغة
      HTML
      تعلم معنى عشرات الواصفات المختلفة. وهذا هو السبب الرئيسي الذي يجعل التأليف بهذه اللغة صعباً، إلا أنها توفر مرونة كبيرة وقوة في تأليف صفحات ويب، لذا يستخدمها
      المحترفون في هذا المجال.
      استخدام محررات ويب أسهل، لأنها تسمح بتأليف الصفحات، بدون الدخول في تفاصيل استخدام الواصفات، وبشكل يشبه تنسيق الصفحات في أحد معالجات الكلمات. والواقع أن
      محررات ويب هي معالجات كلمات أصلاً، أضيفت لها بعض الإمكانيات الخاصة بتحرير صفحات ويب، بالإضافة إلى أنه توجد معالجات كلمات، يمكن استخدامها لتأليف صفحات ويب
      بسيطة، كبرنامج مايكروسوفت وورد، مثلاً.
      أي محررات صفحات ويب أختار؟
      يفضل، كمبتدئ، اختيار أبسط محرر لصفحات ويب، الذي يوفر الإمكانيات الأساسية، ويدعم استخدام اللغة العربية، ويفضل أيضاً، أن يكون مجانياً، أليس كذلك؟
      وهذا ما جعلنا نختار استخدام برنامج تحرير صفحات ويب FrontPage Express، وهو إصدارة مجانية من برنامج
      FrontPage
      يرفق بالإصدارة الكاملة من برنامج إنترنت إكسبلورر 5.0، والذي يمكن استجلابه من موقع مايكروسوفت التالي
      http://www.microsoft.com/ie/download
      (أو استجلاب تحديث للإصدارة المصغرة التي توجد لديك)، ويجب تركيب الإصدارة الكاملة من إنترنت إكسبلورر 5.0، حتى يتم تركيبه.
      قبل أن تبدأ بتصميم الصفحة:
      لابد من أن تخطط قليلاً، قبل أن تبدأ بتصميم الصفحة، وبما أننا نقترح عليك مثال، إنشاء صفحة شخصية، فكر ماذا يمكن أن تقدم من معلومات، وصنفها ضمن فقرات رئيسية،
      وسجل عناوين تلك الفقرات. يمكن أن تعرض نبذة عن سيرتك الشخصية، وتتحدث عن اهتماماتك وهواياتك، وتقدم لائحة ارتباطات بالصفحات المفضلة لديك، وتنشئ سجلاً لزوار
      صفحتك، وغير ذلك. إذا كنت تخطط لإنشاء صفحة أو موقع أعقد من ذلك، يفضل أن تضع مخططاً عاماً للموقع، وتفكر في عرض المعلومات ضمن عدة صفحات.
      البدء بالعمل
      أولاً: ركب برنامج
      FrontPage Express
      وشغله. لا حاجة لأن تكون متصلاً بإنترنت، أو حتى أن تكون حجزت صفحة مجانية أو مدفوعة على أحد المواقع، لكي تبدأ بتأليف صفحتك، إذ ستحفظها على القرص الصلب أولاً،
      لتجربتها قبل إرسالها إلى المزود على شبكة إنترنت. يفضل أن تنشئ مجلداً جديداً، تخصصه لحفظ ملفات صفحات ويب التي تؤلفها.
      عندما تشغل برنامج
      FrontPage Express
      ستلاحظ أن واجهته مشابهة لواجهات برامج معالجة الكلمات، والتعامل معه لا يختلف عنها مطلقاً. يفتح البرنامج عند تشغيله، ملفاً لصفحة
      HTML
      باسم
      Untitled Normal Page
      تتلخص طريقة العمل أثناء تأليف الصفحات، بإدخال وتنسيق المعلومات، ثم حفظها في ملف
      HTML
      عبر هذا البرنامج، ثم فتح الملف ذاته بالمتصفح، لمشاهدة شكل الصفحة كما ستظهر فعلياً على إنترنت، والتأكد أنها تعمل بشكل صحيح
      ابدأ بإدخال النص التالي
      صفحة السيد /تي(ضع اسمك بدلاً من اسمي طبعاً!)
      المحتويات
      السيرة الذاتية
      الاهتمامات والهوايات
      المواقع المفضلة
      اتصلوا بي
      نسق العبارات السابقة بالشكل الذي تراه مناسباً، مستخدماً أزرار الأدوات، المشابهة لأزرار أدوات برنامج مايكروسوفت وورد
      يمكنك أيضاً، إدخال العبارات باللغة الإنجليزية أو بلغة لاتينية أخرى إذا شئت، وتعبر هذه العبارات عن عنوان الصفحة، بالإضافة إلى عناوين محتوياتها. احفظ الصفحة
      باختيار 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
      أصبحت أفضل، أليس كذلك؟
      احفظ الملف بشكله الحالي بدون أن تغلقه، وبدل إلى برنامج التصفح الذي مازال يعرض النسخة السابقة من الصفحة. حدث الصفحة بنقر زر
      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
      ثم احفظ الملف بحالته الجديد، وأرسله إلى مكان الصفحة، بالطريقة الخاصة بالموقع الذي اخترته





      المصدر: مدونة العلم والمعرفة


      ¨°o.O ( على كف القدر نمشي ولا ندري عن المكتوب ) O.o°¨
      ---
      أتمنى لكم إقامة طيبة في الساحة العمانية

      وأدعوكم للإستفادة بمقالات متقدمة في مجال التقنية والأمن الإلكتروني
      رابط مباشر للمقالات هنا. ومن لديه الرغبة بتعلم البرمجة بلغات مختلفة أعرض لكم بعض
      المشاريع التي برمجتها مفتوحة المصدر ومجانا للجميع من هنا. تجدون أيضا بعض البرامج المجانية التي قمت بتطويرها بذات الموقع ..
      والكثير من أسرار التقنية في عالمي الثاني
      Eagle Eye Digital Solutions