بناء أول صفحاتك - الجزء الأخير
9 أبريل 2008
أستطيع بطريقة شرحي أن أجعلك تترك عالم الويب و بناءه إعتماداً على أسلوب الملل و الحشو غير المفيد ( صدقني أستطيع ) . لكن إفادتك هي في أعلى أولوياتي فلذا سأحاول قدر المستطاع تبسيط و تسهيل العملية لك و لا تسأم . فأفضل مافي هذي الدروس و المقالات أنك تتعلم و حقاً ستستطيع بناء صفحاتك الأولى . أفضل مافي العلم هو إمكانية الإستفادة منه و الافضل من ذلك هو سرعة الإستفادة لذا قد تواجهك بعض الامور و قد تصعب عليك و لكن لا تقلق لأنه جديدة عليك و سرعان ما تختفي و تتوضح الامور و تتقن الامر .
الخطوة 1 : لنكتب بعض وسوم HTML
إفتح برنامج المفكرة Notepad و ضع به هذه الوسوم
<html> <head> <title>هذه أول صفحة لك</title> </head> <body> <h2>وسوم هتمل سهلة جداً </h2> <p> سأبني موقعي بإذن الله و سيكون أفضل موقع عربي </p> </body> </html>
الخطوة 2 : لنحفظه على هيئة HTML
الأن ببرنامج المفكرة حفظ بإسم Save As و سميه mypage.html . يمكنك تسميته بأي اسم شئت طالما لم يخالف أي من هذه الشروط :
- عدم وجود مساحة Spaces مثل my page.html و ذلك لان وجود المساحة تعطيه حالة سيئة بعكس عندما يكون عبارة كاملة.
- وجوب إنتهاء الصفحة بالإمتداد .html \ .htm و كلاهما صحيح و ذلك لكي يتعرف عليهما قارئ الصفحات أي المتصفح بشكل صحيح و يستعرضها على شكل صفحة .
- لا تدخل أي رموز مثل %$&# بل ابقى ثابتاً على الحروف و الارقام القياسية.
الخطوة 3 : مشاهدة ما قد بنيته
الأن بعد كتابة الوسوم و إنشاء الصفحة و تكوين ملف html ، لملا نشاهد ماقد بنيناه ؟؟
بكل بساطة قم بنقر على الملف مرتين و كأنك تفتح صورة أو فيديو و سيفتح لك مستعرضك الإفتراضي الصفحة و كأنها عبارة عن صفحة في الانترنت . و سوف تشاهد ماقد طبع إعتماداً على الوسوم التي أدخلتها في الملف ، يمكنك مشاهدة مصدر الصفحة و التأكد من الوسوم عن طريق المتصفح و ذلك بالنقر زر الفأرة الأيمن و اختيار View Source ( في الانترنت أكسبلورر ) و سيظهر لك المصدر . طبعاً هذه أول صفحة لك و قد يكون شكلها بسيط جداً و لكن ما المشكلة ؟ فهذه اول صفحة في حياتك و هذا دليل بأنك تستطيع أن تبني موقع أو مجتمع إنترنت متفاعل بكل إحترافية فكم أخذن من الوقت لقراءة هذا المقال ؟؟
بناء أول صفحاتك - الجزء الثاني
7 أبريل 2008
في هذا الجزء سنأخذ بعمق قليلاً في شرح فكرة وسوم HTML ، هذا مثال توضيحي لوسم HTML على نص و التصوير على المنظور البنائي للمصدر في الصفحة أي ترى الصفحة على طبيعتها قبل أن يترجمها المتصفح :
كما تلاحظ فأن وسوم HTML تأتي على عدد مزدوج عبارة عن وسم فتح <b> و ينتهي بوسم غلق <b/> . مع التأكد بأن هناك سلاش يأتي في وسم الغلق و يكون في المقدمة هكذا <b/> و ليس </b> . و بهذا التوضيح ستجد بأن عبارة التي باللون الازرق هي التي ستظهر تحت تأثير Bold لأنه تقع في حدود الوسم و بعكس النص الرمادي فهو خارج هذه الحدود و النتيجة :
! I Like The Arabian Web Alot
بعض الأمثلة الأخرى لتوضيح الفكرة أكثر
</b> سيعطي تأثير أكثر جرأة <b>
</i> يعطي تأثير مائل <i>
</h4> هذا التأثير يقوم بتكبير حجم الخط على مقاييس ثابتة معتمدة <h4>
</table> يمكنك من تكوين جدول <table>
لنرى شكل التأثيرات:
هذا التأثير يقوم بتكبير حجم الخط على مقاييس ثابتة معتمد
| يمكنك تكوين جدول |
ملاحظة : وسوم HTML ليست فقط لتنسيق الخطوط و الصفحات ، بل تستخدم كذلك لإدراج مقاطع متعددة الوسائط مثل الفيديو و الصوت و الفلاش و الكثير من الامور المتقدمة .
تركيبة صفحة الويب الأساسية
الأن و قد فهمنا طريقة تركيب الوسم و طريقة عمله ، لنتعرف على طريقة بناء الصفحة . تتكوين الصفحة بين هذين الوسمين ، و هنالك فقط وسمين أساسين هما :
- الرأس Head :
و هو الوسم الأساسي و كما هو موضح بالرأس . فكل شي يبدأ بالرأس فيحتوي هذا الوسم على المعلومات الأساسية عن الصفحة فمثلا يحتوي هذا الوسم على وسم التعريف باسم الصفحة و هو <title> فبدونه لن تستطيع من تسمية الصفحة . و كذلك تجد به وسوم METAا المهمة جداً للتعريف بالصفحة و التوثيق و الذي تعتمده محركات البحث . و بهذا الوسم يتم تعريف المتصفح بترميز البرمجي لهذه الصفحة ليترجم بشكلها الصحيح . و يمكنك به أن تخبر المتصفح بأن هذه الصفحة عربية و ذات أصل عربي و تم تكوينها باسم شخص معين و إلخ . ولكن لا شي يظهر أمام المستخدم أبداً و لكن هو من سيتحكم بما سيظهر و كيفية الظهور و الإستعراض .
- الجسم Body :
في هذا الوسم تقام الحفلة ، جميع ما سيظهر أمام الزائر على المتصفح سيكون تحت هذا الوسم ، و أنا أقصد كل شي من نصوص و صور و تطبيقات و جداول و تنسيقات للوسوم الاخرى نفسها و إلخ.
* ستلاحظ بأن كلا الوسمين يأتيان بهذا الشكل
<head></head> , <body></body>
لكن إذا كان وسم الجسم هو الأساس لمحتويات الموقع و كان وسم الرأس هو الأساس لتوثيق و تعريف الصفحة الـ HTML ، فمن الذي يتحكم بتعريف الصفحة بأنها HTML ؟؟ أجل بالتأكيد تساءلت و الإجابة هي :
<html> </html>
إن HTML هي أم جميع الوسوم و كأي وسم آخر فهي يجب أن تبدأ و تنتهي ، يجب على أي صفحة بالعالم أنت تحتوي على وسم HTML و إلا لن يتعرف المتصفح مثل الاكسبلورر على الصفحة و لن يعرضها على شكل صفحة بل ستظهر على شكل نص عادي Text.لذا في نهاية الأمر ستكون الصفحة بشكل المصدري هكذا :
<html> <head> <title/>عنوان الصفحة<title> <head/> <body> <p/>نصوص<p> <body/> <html/>
بناء أول صفحاتك - الجزء الأول
7 أبريل 2008
بعد حصولك على المساحة التخزينية و نطاق مهما كان فرعياً و أساسياً يأتي دور بناء الصفحات و هي اساس النشر و الإستعراض في الويب .
في هذا المقال ستتعلم كيفية بناء أول صفحاتك في الويب و في أقل وقت ممكن . و لكن قبل ذلك لنتعرف على بعض النقاط عن صفحات الويب قبل البدء في العمل .
3 طرق تستطيع بها بناء صفحة ويب
- إستخدام قالب " تمبلت - Template " جاهز , ماهو القالب ؟
قوالب الجاهزة أو ذات التسمية الشائعة التمبلتات هي عبارة عن صفحات أو سمات تم إعدادها و جاهزة للتركيب و الإنطلاق من قبل أناس متخصصين في تصميم صفحات الويب. و هدفها هو تجهيز و بناء الموقع بأقل أو عدم وجود أي معرفة في تصميم المواقع و تمكنك هذه القوالب من التعديل عليها لتلائم متطلبات موقعك أو تخصصه. و تأتي هذه القوالب بتناسيق متعددة مثل HTML أو الفوتوشوب . و يمكنك كذلك التعديل عليها بإستخدام بعض البرامج مثل مايكروسوف ويب أكسبرشن أو الدريم ويفر .
- إستخدام برنامج تحرير صفحات الويب مثل Microsoft Web Expression أو Adobe Dreamwaver .
تعد هذه البرامج محررات لملفات HTML أو مايسمى بصفحات الويب و هي متخصصة في هذه المجال . بإستخدامها تمنحك السهولة في التعامل و تحرير الصفحات بأقل جهد ممكن و كأنك تستخدم Microsoft Word لتكوين مستند .
- إنشاء و تنسيق صفحات الويب بالـ HTML بنفسك عن طريق المفكرة NotePad .
أجل ، يمكنك أن تصنع صفحة ويب بوسوم HTML عن طريق المفكرة NotePad و هذا يجعلك الشخص الوحيد الذي يمكنه التحكم بالصفحة لأنك انت الذي قمت برسم اللوحة . و هذا ما سنستخدمه في هذا المقال حيث إنك ستتعلم كيف تقوم بإستخدام وسوم HTML في بناء صفحاتك و تتعرف على أشهر الوسوم إستخداماً و تتعامل بها .
ماهي HTML و كيف يعمل ؟
HTML هي لغة بناء و صفحات الويب و عرضها ، و تتركب من وسوم تسمى وسوم HTML . هذه الوسوم عبارة عن نصوص text تتكون من كلمات أو اختصار لكلمات . و لبناء أي صفحة في الويب مهما كانت تعتمد على أي برمجة فيجب عليك إستخدام وسوم HTML لإستعراض المكونات و ذلك لأن المتصفحات تترجم هذه الوسوم لجهازك فيستعرضها على الشاشة على هيئة موقع أو صفحة .
تستخدم هذه الوسوم حول المحتويات من " نصوص , صور " و ذلك أما لتزيين عرضها أو لغرض خاص . و تكتب هذه الوسوم داخل أقواس محدبة بهذا الشكل <> و ذلك لتميّز النص العادي عن الوسم . و بهذه الطريقة يميّز المتصفح المواد التي تعرض بشكل خاص و التي تعرض بشكل عادي حسب المطلوب .
و كمثال على ذلك لنقم بإستخدام وسم Bold الخاص بالنصوص و الذي يعطي تأثير أكثر جرأة و ثقلاً بين النصوص ، و هذا الوسم هو <b> و يستخدم هكذا :
<b/> نص ثقيل الشكل <b>
و سيكون بهذا الشكل في صفحة حية : نص ثقيل الشكل
و هناك وسم آخر شائع الإستخدام و هو <p> دلالة على paragraph و يستخدم لكتابة قطع أو جمل من الكلمات بشكل أكثر تنسيقاً ، مثال :
<p/>الويب العربي موقع يقدم خدمة إستضافة المواقع و شعاره نحو ويب هادف<p>
وهو يعرّف المتصفح بأن يعرض هذي القطعة بشكل أكثر تنسيقاً و تماسكاً .
الويب العربي موقع يقدم خدمة إستضافة المواقع و شعاره نحو ويب هادف