تطوير المواقع للمبتدئين

[bor=FFFFFF]مقدمة[/bor]
بسم الله الرحمن الرحيم

، الحمدلله والصلاة والسلام على رسول الله، وبعد:

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

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

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

أتمنى أن تستفيد من الكتاب، وإذا كان لديك أي استفسار أو ملاحظة أو مقترح فراسلني على بريدي الإلكتروني.

عبدالله المهيري
أبوظبي

[bor=FFFFFF]قبل أن نبدأ[/bor]
هل تشعر بالحماس؟ بالخوف؟! لا بأس، هكذا كنت أشعر عندما بدأت في تعلم تطوير المواقع، كنت أظن أن الأمر صعب لكن مع الأيام اكتشفت أن الأمر بسيط ويمكن تعلمه بسرعة، على أي حال، قبل أن نبدأ علينا أن نعد بعض الأدوات اللازمة لتطوير المواقع وسنلقي نظرة على ما سيحويه هذا الكتاب ولا بد أن نتعرف قليلاً على المواقع.

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

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


أما المتصفح فلديك إنترنت إكسبلورر، ويمكنك أن تستخدم متصفحات أخرى إن أردت، في نظامي ماك ولينكس هناك العديد من المتصفحات والعديد من المحررات النصية، اختر ما تشاء منها.

من الضروري أن تجد هذه الأدوات الآن قبل أن تكمل قراءة الكتاب، فهل وجدت هذه الأدوات في نظامك؟ جميل ... لنبدأ!

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

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

لماذا أكتب HTML بنفسي؟
لعلك تعرف برامج تقوم بإنشاء المواقع بدون أن تحتاج إلى رؤية لغة HTML مثل FrontPage أو غيره، ولعلك توقعت أن يشرح الكتاب استخدام أحد هذه البرامج، لكن الكتاب لن يفعل ذلك، لأنه كتاب تطوير المواقع وليس دليل استخدام هذا البرنامج أو ذاك.

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

ما هي المواقع؟
من الناحية التقنية المواقع ما هي إلا مجرد مجموعة من الملفات، هناك ملفات نصية كتبت بلغة HTML، وربما تحوي المواقع ملفات صور أو ملفات صوتية أو ألعاباً أو أي شيء، هي مجرد ملفات تقوم بجمعها عن طريق لغة HTML.

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

لو تعمقنا قليلاً وفكرنا في المواقع لوجدنا أن المواقع يمكنها أن تقدم أي شيء، هي مجرد أدوات لنشر المحتويات والتواصل مع الآخرين، الموقع يمكنه أن يكون محطة إذاعية أو قناة تلفاز، أو صحيفة يومية، يمكنه أن يكون كتاباً أو مذكرات شخصية، يمكننا أن نقول بأن المواقع هي وسائل إعلامية لكنها تختلف عن الوسائل الأخرى من عدة نواحي:

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

هل تريد أن تفتح لك أبواباً من الفرص؟ لنبدأ في تعلم تطوير المواقع إذاً!

[bor=FFFFFF]المحتويات أولاً[/bor]
في هذا الجزء سنتعلم اللغة الأساسية لتكوين صفحات المواقع وهي HTML، سنعرف ما هي هذه اللغة، وكيف تكتب، وسنتعرف على أنواع مختلفة من عناصرها، لكن بداية جهز أدواتك، شغل المتصفح والمحرر النصي، هل قمت بإنشاء مجلد لكي تضع فيه ملفات الموقع؟ إن لم تفعل ذلك من قبل فأنشئ واحداً الآن ... هل فعلت ذلك؟ جميل! لنبدأ.

في المحرر النصي أكتب أي شيء، أكتب "هذه صفحتي الأولى" مثلاً واحفظ الملف واختر له أي اسم، ليكن مثلاً playing.html، لاحظ أن عليك إضافة اللاحقة html إلى اسم الملف، إذا فعلت ذلك إذهب إلى المتصفح واستعراض الملف الذي قمت بإنشاءه قبل قليل، إذهب إلى قائمة ملف أو File ثم فتح أو Open واختر الملف الذي أنشأته، ماذا عرض لك المتصفح؟ الجملة التي كتبتها، رائع!

عد مرة أخرى إلى المحرر النصي وضع أسفل الجملة الأولى جملة ثانية تقول "يجب أن تظهر هذه الجملة في سطر ثاني" واحفظ الملف، عد مرة أخرى إلى المتصفح واضغط على زر إعادة عرض الصفحة أو زر F5 في لوحة المفاتيح، ماذا وجدت؟ الجملة الثانية لم تعرض في سطر لوحده، أليس كذلك؟ لماذا؟ لأن المتصفح بكل بساطة يتجاهل وجود الجملة الثانية في سطر لوحده، المتصفح لا يفهم أن عليه عرضها بشكل منفصل، ولكي نجعله يفهم علينا أن نتحدث بلغته التي يفهمها وهي HTML، عد إلى الملف وأضف التالي:

<p>هذه صفحتي الأولى</p>
<p>يجب أن تظهر هذه الجملة في سطر ثاني</p>لاحظ أننا أضفنا أحد عناصر لغة HTML لكل جملة، لا تقلق، سنشرح ماذا يعني كل هذا، لكن الآن احفظ الملف وعد إلى المتصفح وأعد عرض الصفحة، ماذا وجدت؟ نعم! كل جملة في سطر مختلف، لماذا؟ لأننا خاطبنا المتصفح باللغة التي يفهمها وقلنا له: هذه الجملة هي فقرة لوحدها، والجملة الثانية أيضاً فقرة أخرى.

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

دعنا الآن نلقي نظرة على إحدى الصفحات في أي موقع، زر موقع webstandars.org واستعرض مصدر الصفحة، إذا كنت تستخدم متصفح إكسبلورر ستجد هذه الخاصية هنا:


نفس الخاصية ستجدها في كل المتصفحات الأخرى، ففي متصفح فايرفوكس مثلاً يمكنك أن تجدها في قائمة View ثم اختر Page Source.

ستجد أن الصفحة تحوي العديد من العناصر، شخصياً كنت أغلق هذه النافذة بسرعة لأنني كنت أشعر بأنها معقدة أكثر من اللازم، لكن بعد أن تعلمت وجدت أنها بسيطة ومتكررة، فكل صفحات المواقع يجب أن تحوي عناصر تكون الصفحة، وهي:

Doctype
html
head
title
body
هذه هي العناصر الأساسية التي تكون الصفحة، لكي تقوم بإنشاء صفحة فارغة من المحتوى قم بنسخ هذا القالب إلى ملف جديد وسمه html-template.html:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>

<html dir="rtl">

<head>
<title></title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
</head>

<body>

هنا توضع محتويات الصفحة ... هذه مجرد ملاحظة، قم بحذفها.

</body>

</html>
لاحظ أننا أضفنا اللاحقة html لاسم الملف، ثم اخترنا UTF-8 لخانة Encoding

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

بعد ذلك لدينا العنصر html، هنا الأمر مختلف قليلاً، هناك قسمان لكل عنصر في HTML، فكل عنصر له وسم بداية ووسم نهاية.

الوسم هو ترجمة لكلمة tag، وهو يبدأ بعلامة < ثم تضع اسم العنصر وينتهي بعلامة > وكما قلنا هناك وسمان، وسم البداية وآخر للنهاية، ولا يختلفان عن بعضهما البعض إلا في كون وسم النهاية يحوي علامة / قبل اسم العنصر.

العنصر html يخبر المتصفح بأن محتويات الملف ستبدأ من هنا وستنتهي عند وسم النهاية </html>، يمكن تشبيه هذا العنصر بأنه صندوق يحوي كل محتويات الملف، في هذا الصندوق سنجد صناديق أخرى، فلدينا أولاً رأس الصفحة head، وهذا العنصر سيحوي كل المعلومات المتعلقة بالصفحة والتي لن تعرض للزائر، ففي رأس الصفحة هناك عنصر title الذي يخبر المتصفح عن اسم الصفحة، جرب أن تضع جملة "صفحتي الأولى" في هذا العنصر بالشكل التالي:

<title>صفحتي الأولى</title>احفظ الملف وأعد عرضه في المتصفح، هل لاحظت أي شيء؟ أنظر إلى الإطار العلوي للمتصفح، ستجد اسم الصفحة هناك، لكنك لن تجد أي شيء في نافذة المتصفح، هذه هي وظيفة العنصر title.

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

هناك العديد من العناصر الأخرى التي يمكنك أن تضعها في قسم head، لكن سأكتفي بهذا القدر الآن، نأتي إلى القسم الأهم وهو body أو جسم الصفحة، وهو المكان الذي ستضع فيه كل محتويات الصفحة، أكتب أي شيء هنا وسيعرضه المتصفح.

بقي شيء واحد متعلق بالعنصر html، وهي أن هناك خاصية له تسمى dir وقد وضعنا لها القيمة rtl، ماذا يعني ذلك؟ سنشرح ماذا تعني الخاصية والقيمة لاحقاً في هذا الدرس، المهم هنا أن تعلم أن rtl هي اختصار right to left، أي من اليمين إلى اليسار، وهذه الخاصية تخبر المتصفح بأن عليه عرض النص العربي بشكل صحيح، إن كنت ستقوم بإنشاء موقع باللغة الإنجليزية مثلاً فلن تحتاج لهذه الخاصية.

ملاحظة: عندما تقوم بإنشاء صفحات جديدة استخدم القالب لتكوين هذه الصفحات وضع المحتويات في جسم الصفحة أي بين وسمي البداية والنهاية body.

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

لدينا بعض العناصر التي تضيف معنى للنص مثل em وstrong، جرب أن تضع هذه الجملة في ملف وانظر إلى النتيجة في المتصفح:

<p>النقل يعني <em>التكرار والاجترار</em>،
النقل يعني <strong>الثبات والجمود</strong>.</p>ماذا تلاحظ؟ عنصري em وstrong يستخدمان للتأكيد على المعاني، فأنا مثلاً أريد أن أشدد على أن ممارسة النقل - أي نقل المواضيع في المنتديات - يعني أن الناقل يكرر ولا يجدد، فوضعت كلمتي "التكرار والاجترار" في عنصر em وهذا العنصر يجعل النص مائلاً، العنصر strong يؤدي نفس الوظيفة لكنه يعطي تأثيراً مختلفاً للنص.

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

لا يختلف الأمر كثيراً في المواقع، فاسم الموقع يجب أن يكون العنوان الرئيسي، ثم أسماء الأقسام أو المواضيع تكون عناوين أصغر حجماً، والعناوين الفرعية أصغر كذلك، في HTML هناك عنصر h الذي يستخدم لوصف العناوين والحرف h هو اختصار heading أي عنوان، وهناك ستة مستويات من العناوين في HTML، فحتى نصف العنوان الرئيسي علينا أن نستخدم العنصر h1 بهذا الشكل:

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

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

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

النقطة الأولى ...
النقطة الثانية ...
النقطة الثالثة ...
كيف تفعل ذلك في HTML؟ هكذا:

<ul>
<li>النقطة الأولى ...</li>
<li>النقطة الثانية ...</li>
<li>النقطة الثالثة ...</li>
</ul>لدينا هنا عنصران الأول هو ul وهو اختصار unordered list أي قائمة غير مرتبة وسنعرف لماذا هي غير مرتبة لاحقاً، العنصر ul يخبر المتصفح أن عليه عرض قائمة نقاط والتي ستكون محتوياتها بين وسم البداية <ul> ووسم النهاية </ul>، ثم لدينا العنصر li وهو اختصار list item أي بند في القائمة أو نقطة في القائمة، هذا العنصر تستخدمه لوصف كل نقطة، وإذا كانت القائمة مكونة من 20 نقطة فعليك أن تستخدمه عشرين مرة.

تصور أنك تريد إنشاء قائمة مرتبة من الخطوات، فمثلاً تتحدث عن وصفة كعكة شهية وتريد من القارئ اتباع قائمة تعليمات بترتيب معين، ماذا عليك أن تفعل؟ استخدم العنصر ol بدلاً من ul، فهذا العنصر يعني ordered list أي قائمة مرتبة، والفرق في شكل القائمة يكمن في كونها مرقمة:

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

الروابط
شبكة الويب لم تسمى شبكة إلا لأنها تستخدم الروابط، هذه الفكرة البسيطة التي تتيح للمرء الانتقال من مكان إلى آخر هي أساس الشبكة، أتذكر أول مرة قمت بإنشاء رابط بين صفحتين، كانت لحظة رائعة ولم أصدق أنني أنا أستطيع فعل ذلك، كنت أظن الأمر معقداً لكن مع الممارسة تبين لي أنه سهل بسيط.

قم بإنشاء ملفين، ليكن اسم الأول page1.html والثاني page2.html، ضع هذا السطر في ملف page1.html:

هذا الرابط سينقلني إلى الملف <a href="page2.html">الثاني</a>.
وضع هذا السطر في ملف page2.html:

وهذا سيعيدني إلى الملف <a href="page1.html">الأول</a>.
قم باستعراض الملف الأول page1.html في المتصفح واضغط على الرابط، ستنتقل إلى الملف الثاني، إضغط على الرابط الموجود في الملف الثاني وستعود إلى الملف الأول! لاحظ أن لدينا عنصر جديد يسمى a وهذا العنصر يستخدم لإنشاء الروابط، في وسم البداية هناك خاصية تسمى href وهي اختصار Hypertext REFerence، هذه الخاصية لها قيمة وهي page1.html.

بعض عناصر HTML تحتاج إلى خصائص لتحديد وظيفة العنصر، وكل خاصية تحتاج إلى قيمة:

<tag attribute="value">تصور أن لديك ثلاثة روابط في صفحة واحدة، كيف تخبر المتصفح بأن كل رابط يقود الزائر إلى صفحة مختلفة؟ عليك أن تستخدم الخاصية href، بعض عناصر HTML تحتاج إلى أكثر من خاصية واحدة، وبعضها لا يحتاج أي خاصية.

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

لإضافة الصور في صفحة HTML عليك أن تستخدم العنصر img مع خاصيتين، تصور أن لديك صورة في حاسوبك اسمها sunset.jpg وهي صورة لغروب الشمس، ولكي أختصر عليك الوقت هذه صورة لغروب الشمس:


احفظ الصورة لديك أولاً، لكي تعرضها في صفحة ما يجب عليك أن تكتب هذا السطر:

<img src="sunset.jpg" alt="صورة لغروب الشمس">هل لاحظت أن لدينا خاصيتان؟ الأولى src وهي اختصار يعني مصدر الصورة، ومصدر الصورة هو اسمها، من المفترض أن تكون الصورة في نفس المجلد الذي يحوي ملف HTML، إن كانت في مجلد آخر فلا بد من وضع المسار الكامل للصورة، تصور أنك قمت بإنشاء مجلد فرعي اسمه images لكي تضع فيه كل الصور، كيف تقوم بوضع مسار الصورة في خاصية src؟

<img src="images/sunset.jpg" alt="صورة لغروب الشمس">لاحظ أننا أضفنا اسم المجلد إلى مسار الصورة، ماذا لو قسمت مجلد images إلى مجلدات فرعية؟ تصور أن لديك أكثر من 100 صورة، ولكي تنظمها قمت بإنشاء مجلدات فرعية، فوضعت صور الطبيعة في مجلد سميته nature، وصور الأشياء في مجلد آخر وهكذا لكل نوع من الصور مجلد خاص، كيف تضع المسار الكامل للصورة؟

<img src="images/nature/sunset.jpg" alt="صورة لغروب الشمس">كل ما فعلناه هو إضافة اسم مجلد nature.

الخاصية الثانية هي alt وهي اختصار alternative أي بديل، وقد وضعت جملة "صورة لغروب الشمس" كقيمة لهذه الخاصية، هل خمنت وظيفة هذه الخاصية؟ هناك من يستخدم متصفحات نصية لا تعرض الصور، وهناك من يتصفح الشبكة بدون عرض الصور لكي يكون التصفح أكثر سرعة، وهناك أناس فقدوا نعمة البصر ويتصفحون المواقع باستخدام أجهزة وبرامج خاصة، هؤلاء وغيرهم سيقرأون أو يسمعون النص البديل الذي وضعته لخاصية alt، لذلك عليك أن تضع نصاً بديلاً لكل صورة بقدر الإمكان وحاول أن تجعل النص مفيداً يشرح محتويات الصورة، هناك حالات نادرة قد لا تستطيع فيها أن تضع نصاً بديلاً للصورة، فماذا عليك أن تفعل؟ قم بوضع خاصية alt ولا تضع لها أي قيمة، هكذا:

<img src="sunset.jpg" alt="">هكذا لن يظهر أي شيء لمن لا يستطيع مشاهدة الصورة، لكن أريد أن أشدد على أن النص البديل ضروري فحاول أن تضيفه لكل صورة.

هل هذا كل شيء؟!
نعم ولا، نعم لأننا لن نحتاج إلى المزيد من عناصر HTML الآن، سنحتاج إلى تعلم بعض العناصر والخصائص الجديدة في قسم CSS وفي قسم إنشاء المدونة الشخصية، هذا القسم هدفه أن تتعلم أساسيات HTML، وهي كما ترى سهلة بسيطة، إن لم تفهم شيئاً ما فعليك بالممارسة والتجربة.

[bor=FFFFFF]التصميم والألوان[/bor]
في الجزء السابق تحدثنا عن HTML، ولعلك لاحظت أننا لم نتحدث عن الألوان والخطوط وتنسيق النص، يمكنك إنشاء أي موقع باستخدام HTML فقط لكن لكي تضيف بعض اللمسات الجمالية عليك أن تستخدم تقنية CSS.

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

كيف؟ ببساطة عليك إنشاء ملف CSS ثم ربط كل صفحة HTML بهذا الملف، بعد ذلك يمكنك أن تتحكم بتصميم كل الموقع من خلال تعديل ملف واحد، قد يبدو هذا معقداً لكن لا تقلق، سنشرح كل هذا ونبسطه.

ملف CSS
لكي تقوم بإنشاء ملف CSS كل ما عليك فعله هو فتح ملف نصي جديد ثم احفظه باسم مثل style.css، لاحظ أنني أضفت اللاحقة css لاسم الملف.

أعلم أن الملف الآن فارغ، سنعود له لاحقاً، الآن قم بإنشاء ملف html وسمه مثلاً firstcss.html وضع فيه هذا القالب:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>

<html dir="rtl">

<head>
<title></title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
</head>

<body>
</body>
</html>
تذكر أن هذا القالب يجب أن يستخدم في كل الصفحات التي تقوم بإنشاءها، الآن أضف هذا السطر إلى قسم رأس الصفحة:

...
<head>
<title></title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link href="style.css" type="text/css">
</head>
....
هل خمنت ما يفعله هذا العنصر؟ باستخدام عنصر link يمكننا أن نخبر المتصفح بأن صفحة HTML التي يعرضها مرتبطة بملف آخر، وفي حالتنا هنا الصفحة مرتبطة بملف CSS، وقد وضعنا خاصية جديدة تسمى type وقيمتها text/css وهذه القيمة تخبر المتصفح عن نوع الملف، هكذا يفهم المتصفح أن عليه تطبيق أوامر CSS الموجودة في الملف على صفحة HTML.

ضع محتويات مختلفة للصفحة، ضع عنواناً رئيسياً باستخدام h1، ضع فقرات مختلفة وعناوين فرعية، المهم أن تحوي بضعة عناوين وفقرات.

استعراض ملف firstcss.html في متصفحك، وافتح بفتح ملف style.css في المحرر النصي، ستضيف أوامر CSS للملف وتحفظه ثم عليك أن تعود للمتصفح وتعيد عرض الصفحة أو الضغط على زر F5 لكي ترى تأثير أوامر CSS، وكلما أضفت أمراً جديداً قم بتحديث الصفحة.

تشريح CSS
دعنا نضيف أمراً بسيطاً في ملف CSS أنقل السطر التالي للملف واحفظه وانظر إلى النتيجة في المتصفح:

body {bacground-color: black;}
ماذا وجدت في المتصفح؟ أصبحت الصفحة سوداء، يمكنك أن تفهم عناصر أمر CSS بنفسك إن فكرت قليلاً، فالكلمة الأولى هي body وهذا هو اسم العنصر الذي نستخدمه في ملف HTML، أليس كذلك؟ نحن نقول للمتصفح بأننا نريد تعديل شكل العنصر body، ثم وضعنا قوس { والذي من بعده سنكتب الخصائص التي نريد تغييرها وسنضع لكل خاصية قيمة.

لدينا هنا خاصية واحدة وهي background-color أي لون خلفية الصفحة، وأعطيناها القيمة black أي اللون الأسود، ثم وضعنا فاصلة منقوطة، يمكن بعد الفاصلة أن نضع خاصية أخرى، عدل المثال السابق كما يلي:

body {background-color: lightblue; color: darkblue;}
يمكن أيضاً أن تكتب نفس السطر بهذا الشكل:

body {
background-color: lightblue;
color: darkblue;
}
أليس المثال أكثر وضوحاً الآن؟ في بعض الأحيان قد تضع أكثر من خمسة خصائص، وليس من العملي وضعها كلها في سطر واحد، لذلك بسط الأمر على نفسك وضع كل خاصية في سطر لوحده.

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

يمكن أن نضع القيمة الرقمية للألوان بدلاً من أسماءها كما في المثال التالي:

body {
background-color: #ADD8E6;
color: #00008B;
}
لن يختلف أي شيء في الصفحة، وليس هناك ما يميز طريقة عن أخرى، بشكل عام الأرقام تستخدم أكثر من الأسماء، وفي بعض الأحيان يمكن اختصار الأرقام، فاللون الأسود مثلاً رقمه 000000 ويمكن اختصاره إلى 000، وأسماء الألوان لا تقدم الكثير من الألوان، هناك ألوان لا يمكنك أن تضعها إلا باستخدام الأرقام.

هذه هي تقنية CSS باختصار، عليك أولاً أن تضع عنصر HTML الذي تريد تغيير شكله، ثم تضع الخصائص ولكل خاصية قيمة، في هذا الكتاب لن نحتاج للحديث عن معظم خصائص CSS، لذلك سأكتفي بشرح هذه الخصائص:

الخطوط: font وtext-align وline-height
الإطارات: border وpadding
المساحة: width وheight
الخطوط
تقنية CSS تعطيك إمكانيات كبيرة للتحكم بالخطوط لكننا هنا سنكتفي بحجم الخط ونوعه، كذلك بالمسافة بين السطور وبمحاذاة النص، ثلاثة خصائص يتكرر استخدامها كثيراً ويمكنها أن تجعل أي نص سهل القراءة.

أفترض أن لديك في ملف firstcss.html فقرة واحدة أو أكثر، سنتحكم بهذه الفقرات ونعدل خطوطها، دعنا أولاً نحدد حجم ونوع الخط:

p {font: 16px sans-serif;}
يمكنك أن تضع للخاصية font أكثر من أربعة قيم لكنني أكتفي هنا باثنتين، الأولى هي لحجم الخط والثانية لنوعه، sans-serif ليس بالضرورة اسم خط محدد بل نوع من الخطوط تسهل قراءته في شاشات الحواسيب، لنعدل القيم قليلاً:

p {font: 16px Tahoma* sans-serif;}
لدينا الآن نوعان من الخطوط، عندما يقرأ المتصفح ملف CSS سيبحث في الحاسوب عن خط Tahoma لكي يعرض النص بهذا الخط، فإن لم يجده سيعرض الخط التالي وهو sans-serif، يمكنك أن تضع عشرات الخطوط هنا إذا أرد، إفصل بين كل خط وآخر بفاصلة، لكن أنصحك بأن تكتفي بثلاثة خطوط لا أكثر.

في بعض الأحيان قد ترغب بزيادة المسافة بين السطور لكي تجعل عملية القراءة أكثر سهولة ولا تتعب عيني الزائر، لفعل ذلك أنت بحاجة لخاصية line-height:

p {
font: 16px Tahoma* sans-serif;
line-height: 1.5;
}
أنظر إلى النتيجة في المتصفح بعد إضافة هذا السطر إلى ملف CSS، سترى أن المسافة ازدادت بين سطور الفقرات لأننا وضعنا القيمة 1.5 لخاصية line-height، جرب أن تزيد الرقم أو تنقصه، جرب مثلاً أن تضع القيمة صفر، أو 0.5 أو 3.

أخيراً لدينا الخاصية text-align وهي مختصة بمحاذاة النص، ولها أربع قيم:

اليمين: right
اليسار: left
التوسيط: center
المحاذاة من الجانبين: justify
القيمة الأخيرة تحتاج إلى أن تشاهد تأثيرها لكي تفهمها، جرب أن تضع هذا السطر إلى ملف css:

p {
font: 16px Tahoma* sans-serif;
line-height: 1.5;
text-align: center;
}أنظر إلى النتيجة، ستجد أن نصوص الفقرات أصبحت في منتصف الصفحة، غير القيمة من center إلى القيم الأخرى وشاهد الاختلاف.

الإطارات
يمكنك من خلال CSS أن تضع إطاراً حول كل عنصر في HTML، تخيل معي أن كل عنصر في HTML هو عبارة عن صندوق، هذا الصندوق يمكنك أن تضع له إطاراً، كيف؟ افترض أن لديك في ملف firstcss.html عنوان h1 واحداً على الأقل، كيف يمكنك أن تضع له إطاراً؟ أضف السطر التالي إلى ملف css:

h1 {border: 1px solid black;}
خاصية border تعني الإطار، ولها ثلاث قيم، بعض خصائص CSS تحتاج إلى أكثر من قيمة واحدة، القيمة الأولى لدينا هي 1px وتعني أن سمك الإطار سيكون بمقياس 1 بكسل، حرفي px هما اختصار pixel، ثم لدينا القيمة solid وهي تعني أن خط الإطار سيكون بدون أي تأثير وبدون أي فراغات، يمكنك أن تضع قيماً أخرى بدلاً من solid مثل:

dotted
dashed
double
جرب كل واحدة وانظر إلى النتائج، ثم لدينا القيمة black هي تعني لون الإطار ويمكننا أن نضع القيمة الرقمية بدلاً من اسم اللون:

h1 {border: 1px solid #000;}
ماذا لو أردت أن تزيد المساحة بين العنوان والإطار؟ لعلك تريد مساحة فارغة أكبر، فكيف تفعل ذلك؟ لدينا الخاصية padding:

h1 {
border: 1px solid black;
padding: 30px;
}
ضع هذا السطر في ملف CSS وانظر إلى النتيجة في متصفحك، ستجد أن العنوان الآن يحوي مساحة أكبر بينه وبين الإطار، لكنك تستطيع أن تضيف المزيد من القيم لخاصية padding فتتحكم بالمسافة بين العنوان والإطار العلوي، وكذلك بالمساحة بين العنوان والإطار الأيمن، وبالتأكيد المسافة بين العنوان والإطار السفلي والأيسر:

h1 {
border: 1px solid black;
padding: 0 10px 20px 30px;
}
ما فعلناه هو إضافة أربع قيم لخاصية padding، كل قيمة تتحكم بجانب ما من المساحة بين العنوان والإطار، الأولى للجانب العلوي، والثانية للجانب الأيمن، والثالثة للجانب السفلي والرابعة للجانب الأيسر، يمكنك أن تحفظ هذا الترتيب بأن تتذكر دوران عقارب الساعة: الأعلى، الأيمن، الأسفل، الأيسر.

هذه القيم الأربع بهذا الترتيب ستتكرر مرات عديدة عندما تبدأ في تعلم المزيد من خصائص CSS.

المساحة
مع تعلمك المزيد من خصائص CSS ستحتاج إلى خاصية تحدد مساحة عناصر HTML، فقد ترغب في أن يظهر النص في مساحة صغيرة بدلاً من أن يغطي كل الصفحة، فكيف تفعل ذلك؟ لدنيا الخاصية width والتي تحدد عرض أي عنصر:

p {width: 400px;}
في المثال أعلاه وضعنا الخاصية width للعنصر p أي الفقرات، ووضعنا القيمة 400 بكسل للخاصية، أي أننا نريد أن يبلغ عرض الفقرة 400 بكسل، جرب أن تضع هذا السطر في ملف CSS وانظر إلى النتيجة، يمكنك أن تزيد القيمة أو تنقصها كما تشاء، لكن تذكر ألا تجعلها تزيد عن عرض نافذة المتصفح لديك.

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

[bor=FFFFFF]إنشاء مدونتك الشخصية[/bor]
في الجزئين السابقين تعلمنا أساسيات HTML وCSS، ولكن هذا لا يكفي إذ لا بد من وجود تطبيق عملي لما تعلمناه، ولا أرى أفضل من إنشاء مدونة شخصية لك لتطبيق ما تعلمته، لأنني شخصياً جربت ذلك فقد كانت مدونتي يدوية لمدة تزيد عن العام، كنت أكتب كل الصفحات بنفسي وأجد الأخطاء وأصححها وأكتسب خبرة من هذه العملية المتكررة، ليس بالضرورة أن تنشر مدونتك، فقط طبق عملياً وتعلم.

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

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

المدونات الآن لها أشكال وأنواع كثيرة، ومن الصعب وضع تعريف واحد لها.

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

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

سنتحتاج لإنشاء:

صفحة رئيسية.
ملف CSS لتصميم الموقع.
مجلد فرعي يحوي ملفات الأرشيف.
لنبدأ العمل!
لنبدأ بالملفات، قم بإنشاء ملف وسمه index.html، وملف للتصميم هو weblog-style.css، ومجلد للأرشيف سمه archive، سنبدأ بالعمل أولاً على الصفحة الرئيسية وهي index.html.

الصفحة الرئيسية ستحوي:

اسم المدونة.
قائمة بعناوين آخر خمسة أو عشرة مواضيع كتبتها وأسفل كل عنوان سنضع سطراً يلخص الموضوع.
لكي تفعل ذلك عليك بنقل قالب html الذي استخدمناه في الجزء الأول ووضعه في ملف index.html، القالب سيكون فارغاً، لذلك ضع اسم المدونة بين وسمي title، ثم ضع اسم المدونة مرة أخرى كعنوان في جسم الصفحة باستخدام العنصر h1، اختر أي اسم فهذا مجرد تدريب لن يطلع عليه أحد، إليك هذا المثال:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>

<html dir="rtl">

<head>
<title>مدونة ما وراء البحار</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
</head>

<body>

<h1>مدونة ما وراء البحار</h1>

</body>
</html>
احفظ الصفحة واستعرضها في المتصفح، ما ستراه هو عنوان المدونة فقط، لنضع عنواناً لموضوع مع ملخص قصير:

.....
<h1>مدونة ما وراء البحار</h1>

<h2><a href="archive/2008-05-13.html">عمالقة البحار</a><h2>
<p>نظرة على أكبر المخلوقات البحرية</p>
.....
ما فعلته في المثال هو إضافة عنوان لموضوع باستخدام العنصر h2 وجعلت هذا العنوان رابطاً لموضوع في الأرشيف، طبق المثال لديك، بالطبع الموضوع ليس موجوداً في الأرشيف الآن، لذلك اذهب إلى مجلد الأرشيف وأنشأ ملفاً باسم 2008-05-13.html، الاسم يشير إلى تاريخ اليوم الذي كتب فيه الموضوع، لا بد أن تضع نظاماً لتسمية ملفات الأرشيف لكي لا يتكرر أي اسم ولكي تستطيع المحافظة على تنظيم الملفات إذا زاد عددها، نظام تسمية الملفات حسب التاريخ جيد، لكن يمكنك أن تبتكر النظام المناسب لك.

في الملف ضع قالب html وعدله بالشكل التالي:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>

<html dir="rtl">

<head>
<title>مدونة ما وراء البحار</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
</head>

<body>

<h1>مدونة ما وراء البحار</h1>
<h2>عمالقة البحار</h2>
<p>ضع هنا العديد من الفقرات .. فقط للتدرب</p>
<p>ضع هنا العديد من الفقرات .. فقط للتدرب</p>

</body>
</html>
لدينا الآن ملف صفحة رئيسية يحوياً رابطاً لموضوع، ولدينا ملف في مجلد الأرشيف يحوي موضوعاً واحداً، لكن ما وظيفة ملف weblog-style.css؟ عد مرة أخرى إلى ملف الصفحة الرئيسية وأضف هذا السطر في رأس الصفحة:

....
<head>
<title>مدونة ما وراء البحار</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link href="weblog-style.css" type="text/css">
</head>
....
احفظ الملف ثم اذهب إلى ملف الموضوع الذي أنشأته قبل قليل، أضف له نفس السطر مع تعديل بسيط:

....
<head>
<title>مدونة ما وراء البحار</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link href="../weblog-style.css" type="text/css">
</head>
....
هل لاحظت التغيير؟ وضعنا نقطتين وخط مائل قبل اسم ملف css، لماذا؟ لأن ملف الموضوع في مجلد فرعي بينما ملف css في المجلد الرئيسي، علينا أن نضع علامة تخبر المتصفح بأن ملف css ليس موجوداً في نفس المجلد بل عليه أن يرجع للوراء ويعود للمجلد الرئيسي وهناك سيجد ملف CSS.

الآن عليك أن تضع المزيد من العناوين في الصفحة الرئيسية وتربطها بملفات للمواضيع في الأرشيف، افعل ذلك كتدريب وطبق كل ما تعلمته في الكتاب.

هناك تعديلات وإضافات مختلفة يمكنك تطبيقها:

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

[bor=FFFFFF]الجزء الرابع: متفرقات[/bor]
تطوير المواقع ليس صعباً لكن التفاصيل التي تحتاج لتعلمها تزداد عندما تبدأ بالتفكير الجدي في إنشاء موقع تضعه على الشبكة، لأنك عندها بحاجة إلى تعلم استئجار مساحة خاصة في حاسوب ما تضع فيه موقعك، ولا بد من شراء عنوان يدل الناس على مكان موقعك، وعليك تعلم نقل الملفات من حاسوبك إلى المساحة التي استأجرتها.

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

لنلقي نظرة على بعض ما يجب أن تتعلمه.

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

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

إليك هذا المثال:


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

برامج FTP كثيرة ومتنوعة وتختلف واجهاتها، لكنها كلها تقوم بنفس العمل، وإليك مقترحات لبرامج FTP لكل نظام:

لينكس: gFTP
ماك: Cyperduck
ويندوز: FileZilla، هذا البرنامج يعمل في لينكس أيضاً.
مساحة لموقعك
الاستضافة تعني ببساطة أن تستأجر مساحة في حاسوب ما متصل بالشبكة يمكن للناس الوصول له من خلال عنوان محدد، هذه هي الاستضافة، الصعوبة في موضوع الاستضافة تكمن في تعدد عروض الاستضافة واختلاف تفاصيلها، وكذلك في أمانة الشركات ومستوى الدعم الفني لديهم، من الصعب أن تعرف هذه الأشياء بدون أن تجرب، لكن هناك من جرب قبلك فحاول معرفة آراء الآخرين.

لكن قبل أن تفكر في استئجار مساحة لموقعك، فكر في الخدمات المجانية، إذا كان كل ما تريده هو إنشاء مدونة فلماذا لا تستخدم خدمة وورد بريس أو بولغر؟ كلاهما يدعمان العربية وكلاهما مجاني، وإن قمت باستخدام الخدمة فليس عليك أن تقلق حول المساحة أو العنوان أو إنشاء نسخ احتياطية من موقعك كل يوم.

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

إذا أردت أن تشتري مساحة خاصة لموقعك فتذكر التالي:

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

البرامج
عاجلاً أو آجلاً ستحتاج لبرامج لكي تدير لك محتويات موقعك، سواء كان الموقع مدونة أو منتدى أو موقع متخصص في مجال ما، قد تحتاج إلى تركيب أكثر من برنامج واحد، لذلك لا بد أن تتعلم وتمارس تركيب وتعديل البرامج.

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

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