www.tartoos.com كيف تعمل صفحات الويب

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

كيف تعمل صفحات الويب

هل تساءلت مرة كيف تعمل صفحات الويب ؟ هل أردت أن تصنع صفحة ويب خاصة بك ؟ هل سمعت كلمة " HTML " ولم تفهم تماماً ماذا تعني ؟ إن حدث هذا , إذاً تابع معنا القراءة... سنطلع على فنون وعلوم صفحات الويب , وسنرى كم هو سهل وممتع خلق هذه الصفحات . لنتمكن من الكلام عن صفحات الويب وكيف تعمل , يجب علينا فهم أربعة مصطلحات بسيطة. www.tartoos.com

صفحة الويب ( 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 .

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

مثال :

This line is broken .

This line is broken .

يخلق فراغاً إضافياً بين سطرين من النص . إن وضعت في سطر من النص , فإنه سوف يفصل السطر فقط , إن استخدمت فإنه سيفصل السطر وسيخلق فراغاً إضافياً .

مثال :

This line is spaced .

This line is spaced .

<hr> موجه أفقي , أو سطر أفقي .

مثال :

This is a horizontal rule:

This is a horizontal rule:<hr>

علامات الجدولة Tabs

ليس هناك مؤثر في لغة HTML لخلق علامات الجدولة Tab ضمن المستند . العديد من مصممي صفحات ويب يخلقون جداول أو يستخدمون صوراً بيضاء لخلق فراغ . طريقة واحدة لفصل النص هي استخدام مؤثر <ul> لجعل المتصفح يعتقد أنك على وشك خلق سرد " List " , السرد يفصل النص آلياً , أنه باستخدام </ul> . المؤثرblodkquote>/ <blodkquote>….<سيفصل النص أيضاً .

خيار آخر هو مؤثر <pre> . يستخدم هذا المؤثر لعرض النص المسبق بالتنسيق , أي فراغ تم خلقه بواسطة المؤثرات <pre> و </pre> ستظهر بالمتصفح كما تظهر في النص المصدر .www.tartoos.com

تغيير لون , نمط وحجم الخط :

يتم تغيير لون أي نص باستخدام المؤثر :

…

مثال :

This is red .

This is green .

This is red.

This is green.

معظم الألوان القياسية ستستجيب لهذا المؤثر , جرب أيضاً الألوان الفاتحة والغامقة مثل الأزرق الفاتح " Lightblue" والأخضر الغامق " darkgreen " . يمكنك أيضاً تغيير لون محدد باستخدام رقم سداسي عشر دال على اللون , مثل : .

إن كنت ترغب بإسناد لوناً معيناً لكامل النص , مازلت تستطيع تغيير لون أي مقطع من النص باستخدام المؤثرات التي تعلمتها سابقاً .

- يتم تغيير نمط الخط لأي نص باستخدام المؤثرات :

...

مثال :

This is Arial .

This is Geneva .

This is arial .

This is geneva .

ملاحظــة : إذا لم يتوفر لديك نمط الخط الذي حددته , سيتم اختيار النمط المستخدم من قبل المتصفح , يكون عادة Courier أو Times new Roman . لذلك من الأفضل دوماً العودة للأنماط القياسية إن كنت تريد أن تكون قادراً على التحكم بما سيظهر على متصفح المستخدم .

- يتم تغيير حجم أي نص باستخدام المؤثرات :

…

مثال :

حجم الخط المعطى لأغلب المتصفحات هو "3" , لذل فإن أي قيمة أكبر من 3 ستجعل الخط أكبر , وأي قيمة اصغر من 3 ستجعل الخط أصغر .

يمكنك أيضاً تغيير حجم الخط بجمع أو طرح قيمة ما من القيمة الأولية المعطاة للحجم .

,or

مثال :

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 increased by 2

This font is increased by 1

This font is increased by 2

This font is increased by 1

تستطيع أيضاً تغيير حجم الخط باستخدام المؤثرات أو <big> :

مثال :

This is a small text.

This is a big text.

This is a smalltext.

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>

يتم إنهاء أي عملية تغيير على الخط باستخدام المؤثر : , أو باستخدام مؤثر الإنهاء النظير للمؤثر الذي استخدمته :

مثال : ,</big>,</H2>

لتجريب جميع المؤثرات السابقة الذكر بسرعة , استعمل صفحة Try it! . ببساطة اكتب أو قص والصق أي قطعة من شيفرة HTML ضمن النافذة وشاهد مباشرة كيف ستعمل .

سنتابع في الأعداد القادمة مناقشة بقية مؤثرات إذا HTML مثل خلق الخلفيات , خلق اللوائح , الارتباط مع مواقع أخرى , خلق نوافذ جديدة , الارتباط من أجل استقبال بريد الكتروني , خلق وصلات ارتباط لصفحتك الخاصة , إضافة صور ورسوم , خلق جداول , خلق الصور المتحركة , وضع صفحة الويب على الشبكة ودعم موقعك بالإعلان عنه من خلال محركات البحث الشهيرة .www.tartoos.com

طباعة المقال

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

Syria

سورية

Amrit

عمريت

أرواد

طرطوس

صور من طرطوس

صور من سورية

للسيدات فقط

معجم الكمبيوتر

أدب وفكر

المجلة الطبية

المعلومات العامة

لمحة عن طرطوس

الموضة النسائية

مدرسة الكمبيوتر