|
كيف تعمل صفحات الويب
هل تساءلت مرة
كيف تعمل صفحات الويب ؟ هل أردت أن تصنع صفحة ويب خاصة بك ؟ هل سمعت كلمة
" HTML "
ولم تفهم تماماً ماذا تعني ؟ إن حدث هذا , إذاً تابع معنا القراءة... سنطلع
على فنون وعلوم صفحات الويب , وسنرى كم هو سهل وممتع خلق صفحة الويب ( Web Page ) : صفحة الويب هي ملف نص بسيط يتضمن نصاً بالإضافة لمجموعة مؤثرات HTML تصف كيفية تنسيق النص عندما يعرضه المتصفح على الشاشة . هذه المؤثرات عبارة عن تعليمات بسيطة توجه المتصفح إلى الكيفية التي يجب أن تبدو عليها الصفحة عند عرضها . توجه المؤثرات المتصفح للقيام بأعمال مختلفة مثل تغيير حجم الخط وألوانه , أو ترتيب الأشياء ضمن أعمدة , يقاطع المتصفح هذه المؤثرات ليقرر كيفية تنسيق النص على الشاشة .www.tartoos.com HTML : اختصار لعبارة Hyper text Markup Language لغة تأشير النص المفعل . " Markup Language " لغة الحاسب التي تصف كيف يجب تنسيق الصفحة . إن كنت تريد عرض نص طويل اسود وأبيض وبدون أي تنسيق فست بحاجة إلى لغة الـ HTML . لكن إذا كنت تريد تغيير الخط إضافة ألوان , خلق عناوين , تضمين رسوم وصور في صفحتك ’ فلغة الـ HTML هي اللغة التي تساعد على القيام بذلك .www.tartoos.com متصفح الويب ( Web Browser ) :
متصفح الويب مثل Netscape Navigator أو Microsoft Internet Explorer , هو برنامج أو تطبيق حاسوبي يقوم بما يلي : - متصفح الويب يعرف كيف يتوجه لمخدم الويب ( Web Server ) على شبكة الانترنت ويطلب الصفحة , عندما يقوم بهذا فإن المتصفح يستطيع سحب الصفحة عبر الشبكة إلى جهازك . - متصفح الويب يعرف كيف يقاطع مؤثرات الـ HTML ضمن الصفحة بغية عرض الصفحة على شاشتك كما يريد مصممها أن تعرض .www.tartoos.com
مخدم الويب ( Web Server ) : مخدم الويب هو قطعة من البرمجيات الحاسوبية تستطيع الإجابة على طلب المتصفح للصفحة , وإيصال الصفحة لمتصفح الويب عبر الانترنت . يمكنك أن تتخيل مخدم الويب وكأنه عدة غرف , وكل غرفة تستقبل صفحة ويب خاصة بأحد الأشخاص . لحفظ صفحتك ضمن هذه العقدة , يجب أن تدفع أجرة المكان , الصفحات التي تبقى في هذه العقدة يمكن أن يتم عرضها وتصفحها من قبل أي شخص في كل أنحاء العالم . يدعى مالك هذه العقدة بالمضيف ( Host ) , والأجرة التي تدفعها تدعى تكاليف الضيافة ( Host Change ) . هناك كل يوم ملايين من مخدمات الويب تنقل الصفحة لمتصفحات عشرات الملايين من الأشخاص عبر شبكة ندعوها الانترنت . إنه من السهل جداً التدرب على تصميم صفحات الويب دون استخدام المخدم , المتصفح لديك يمكنه عرض صفحات الويب التي تصممها من خلال حاسبك الشخصي , حالما تفهم كيف تصمم صفحتك الخاصة , من المحتمل أن تفكر بوضعها على المخدم وبالتالي يتمكن جميع الناس حول العالم من تحميلها على حواسبهم وقراءتها . الآن لنتعلم ماذا تعني مؤثرات الـ HTML ولنبدأ بتصميم صفحة بسيطة .www.tartoos.com مؤثرات ال HTML : L1 مؤثر الـ HTML هو رمز عنصر يخبر متصفح الويب ماذا يفعل بالنص , كل مؤثر سيظهر كأحرف أو كلمات بين إشارتي أصغر > وأكبر < . مثال : <center> , <body> لإخبار المتصفح أنه ينهي العمل الذي طلبته منه , يتم استعمال إشارة / داخل المؤثر المغلق . مثال : </center> , </body> معظم المؤثرات تأتي زوجاً متوافق كبداية ونهاية , ولكن هذا ليس قاعدة عامة . أي صفحة ويب تصممها ستضم المؤثرات التالية في بداية الصفحة : -<HTML> : يخبر متصفح الويب إنها بداية مستند HTML . - < HEAD> : يخبر ذلك المتصفح أن هذا هو رأس الصفحة . - <TITLE> : يخبر متصفح الويب أن هذا هو عنوان الصفحة . < BODY> : يخبر متصفح الويب أن هذا هو بداية محتويات صفحة الويب – أي شيء تريد أن تراه وتقوله في صفحتك سيتبع هذا المؤثر . المؤثرات المطلوبة لنهاية أي صفحة ويب هي : </BODY> . </HTML> . تصميم صفحة بسيطة
أنت بالتأكيد تملك أحد البرامج أو التطبيقات التي يمكنها صنع ملفات نصوص في الحواسب التي تعمل بنظام Windows , لديك التطبيق الدفتر ( Notepad ) . وضمن نظام Macintosh لديك التطبيق Simple Text . إن لم تستطع إيجاد هذه لتطبيقات من الممكن أيضاً استخدام أحد برامج معالجة النصوص مثل Word Perfect أو Microsoft Word .
ملاحظــة : ضمن نظام Windows 95/98 , انقر زر ابدأ , انقر برامج , انقر ملحقات وانقر الدفتر . ضمن نظام Windows 3.1 انقر ملحقات وانقر الدفتر . ضمن نظام Macintosh , انقر HD Macintosh , انقر Application وانقر Text Simple . حالما يتم فتح البرنامج المطلوب على شاشتك اكتب ( أو قص والصق ) نص الـ HTML التالي في النافذة : <html> <head> <title>My First Page</title> </head> <body> Hello There . This is my first page ! </body> </html> سواء وضعت المؤثرات في النص جنباً إلى جنب , أو وضعتها مبعثرة فهذا لن يؤثر أبداً في كيفية عرض النص في نافذة المتصفح , وسواء استخدمت الأحرف الكبيرة أو الصغيرة ضمن المؤثرات فهذا أيضاً لن يؤدي إلى أية فوارق . الآن أنت بحاجة لحفظ هذا الملف بمكان ما حيث يمكن إيجاده في أي لحظة , احفظه على سطح المكتب , أو في أي مجلد تخصصه لحفظ جميع الصفحات التي ستقوم بتصميمها .www.tartoos.com احفظه باسم first.html . بعدها افتح الصفحة باستخدام متصفح الويب لديك ( Microsoft Internet Explorer أو Netscape Navigator ) . كل المتصفحات لها إمكانية فتح الملفات المحفوظة على نفس الحاسب . في برامج Netscape و Internet Explorer , اختر الأمر Open File من القائمة File . افتح الملف first.html . عندما تفتحه بواسطة المتصفح لديك , فإنه سيبدو شيئاً يشبه التالي : بالنظر لهذا الشكل نجد ثلاثة عناصر واضحة وجلية هي : - يمكنك أن ترى أن الصفحة تحمل العنوان " My First Page " . - يمكنك أن ترى أن جسم الصفحة يضم الكلمات " Hello there . This is my first page " - يمكنك أن ترى أن الـ URL المعروض في نافذة العنوان هو : C:\WINDOWS\DESKTOP\first.html من القرص الصلب المحلي بدلاً من الـ http://... الاعتيادي الذي كان سيتضمنه الـ URL فيما لو استقبلنا الصفحة من مخدم الانترنت .
بالنظر إلى نص الـ
HTML
الذي أنتج صفحتك الأولى , تستطيع أن ترى تماماً كيف حصلت الصفحة على عنوانها
وجسمها . الآن وبعد أن صممت وشاهدت صفحتك الويب الأولى , أنت على الطريق لتصبح محترف ويب , المفتاح لتعرف كل شيء عن كيفية عمل صفحة الويب هو التعلم أكثر فأكثر عن مؤثرات الـ HTML التي تجعلك تقولب وتهذب صفحاتك . ينبغي لك أن تتعلم عن الأدوات التي تساعدك في تصميم جداول , أطر ورسومات لصفحاتك . وهذا ما سنشرحه في عدد قادم . الفواصل والفقرات : بالرغم من أن النص يحوي علامات نهاية السطر , علامات الجدولة وفواصل إضافية , إلا أن المتصفح لا يراه , أنت مضطر لاستخدام المؤثرات بغية خلق الفواصل البيضاء في مستند HTML . <br> يخلق فاصلاً بين سطر وآخر . يمكن ان ترى العديد من هذه المؤثرات مجتمعة لخلق فراغ أبيض . مثال : This line is broken . This line is <br>broken . <p> يخلق فراغاً إضافياً بين سطرين من النص . إن وضعت <br> في سطر من النص , فإنه سوف يفصل السطر فقط , إن استخدمت <p> فإنه سيفصل السطر وسيخلق فراغاً إضافياً . مثال : This line is spaced . This line is <p> spaced . <hr> موجه أفقي , أو سطر أفقي . مثال : This is a horizontal rule: This is a horizontal rule:<hr> علامات الجدولة Tabs
خيار آخر هو مؤثر <pre> . يستخدم هذا المؤثر لعرض النص المسبق بالتنسيق , أي فراغ تم خلقه بواسطة المؤثرات <pre> و </pre> ستظهر بالمتصفح كما تظهر في النص المصدر .www.tartoos.com تغيير لون , نمط وحجم الخط : يتم تغيير لون أي نص باستخدام المؤثر : <font color="color">…</font> مثال : This is red . This is green . This is <font color="red">red</font>. This is <font color="green">green</font>. معظم الألوان القياسية ستستجيب لهذا المؤثر , جرب أيضاً الألوان الفاتحة والغامقة مثل الأزرق الفاتح " Lightblue" والأخضر الغامق " darkgreen " . يمكنك أيضاً تغيير لون محدد باستخدام رقم سداسي عشر دال على اللون , مثل : <font color="#864086"> . إن كنت ترغب بإسناد لوناً معيناً لكامل النص , مازلت تستطيع تغيير لون أي مقطع من النص باستخدام المؤثرات التي تعلمتها سابقاً . - يتم تغيير نمط الخط لأي نص باستخدام المؤثرات : <font face="font type">...</font> مثال : This is Arial . This is Geneva . This is <font face = "arial">arial</font> . This is <font face = "geneva"> geneva </font> . ملاحظــة : إذا لم يتوفر لديك نمط الخط الذي حددته , سيتم اختيار النمط المستخدم من قبل المتصفح , يكون عادة Courier أو Times new Roman . لذلك من الأفضل دوماً العودة للأنماط القياسية إن كنت تريد أن تكون قادراً على التحكم بما سيظهر على متصفح المستخدم . - يتم تغيير حجم أي نص باستخدام المؤثرات : <font size=value>…</font> مثال : <font size=4>
حجم الخط المعطى لأغلب
المتصفحات هو
"3"
, لذل فإن أي قيمة أكبر من 3 ستجعل الخط أكبر , وأي قيمة اصغر من 3 ستجعل يمكنك أيضاً تغيير حجم الخط بجمع أو طرح قيمة ما من القيمة الأولية المعطاة للحجم . <font size=+4>,or<font size=-2> مثال : This font is increased by 2. This font is increased by 1. This font is increased by 2. This font is increased by 1. This font is <font size=+2> increased by 2 </font> This font is <font size=+1> increased by 1 </font> This font is <font size=-2> increased by 2 </font> This font is <font size=-1> increased by 1 </font> تستطيع أيضاً تغيير حجم الخط باستخدام المؤثرات <small> أو <big> : مثال : This is a small text. This is a big text. This is a <small>small</small>text. This is a <big>big</ big >text. أيضاً المؤثر Heading يغير حجم الخط , يولد ترويسة للفقرة أو للقصة بخط عريض . مثال : This is an H1 heading. This is an H2 heading. This is an H3 heading. <h1> This an H1 heading.</h1> <h2> This an H2 heading.</h2> <h3> This an H3 heading.</h3> يتم إنهاء أي عملية تغيير على الخط باستخدام المؤثر : </font> , أو باستخدام مؤثر الإنهاء النظير للمؤثر الذي استخدمته : مثال : </small>,</big>,</H2> لتجريب جميع المؤثرات السابقة الذكر بسرعة , استعمل صفحة Try it! . ببساطة اكتب أو قص والصق أي قطعة من شيفرة HTML ضمن النافذة وشاهد مباشرة كيف ستعمل . سنتابع في الأعداد القادمة مناقشة بقية مؤثرات إذا HTML مثل خلق الخلفيات , خلق اللوائح , الارتباط مع مواقع أخرى , خلق نوافذ جديدة , الارتباط من أجل استقبال بريد الكتروني , خلق وصلات ارتباط لصفحتك الخاصة , إضافة صور ورسوم , خلق جداول , خلق الصور المتحركة , وضع صفحة الويب على الشبكة ودعم موقعك بالإعلان عنه من خلال محركات البحث الشهيرة .www.tartoos.com |
| PC school | مشاكل انترنت | الصفحة الثالثة | الصفحة الثانية | الصفحة الأولى |
 |
| Home | Syria | سورية | أرواد | Amrit | عمريت | المجلة الطبية | مدرسة الكمبيوتر | دليل المواقع العربية |
| للسيدات فقط | المعلومات | معجم الكمبيوتر | المجلة الطبية | لمحة عن طرطوس | صور من طرطوس | صور من سورية | دليل المواقع الأجنبية | |
|
© 2006 LBCI Corporation. All rights reserved Eng.Hanna Ata Lahoud |
||||||||
هذه الصفحات . لنتمكن من الكلام عن صفحات الويب وكيف تعمل , يجب علينا فهم
أربعة مصطلحات بسيطة 
ليس هناك مؤثر في لغة
الخط أصغر .