الشبكة العنكبوتية

سنتناول في هذا المقال مفهوم شبكة الانترنت ومفهوم الشبكة العنكبوتية (World Wide Web) وبعض المفاهيم والمصلحات المتعلقة بهما.

تمهيد:

كانت بداية الإنترنت في الأيام الأولى من ابتكار الحاسب الآلي وذلك في عام 1965م حيث تمّ إنشاء جهازي حاسب يتّصلان مع بعضهما البعض بواسطة تقنية تبديل الحزم ، وفي عام 1969م طوّر الباحثون في شبكة وكالة مشاريع الأبحاث المتقدّمة التّابعة لوزارة الدّفاع الأمريكية (ARPANET) العديد من البروتوكلات المستخدمة للاتّصال عبر الإنترنت في الوقت الحالي باستخدام طريقة إعادة التوجيه.

وفي 1973م تمّ التّواصل بين كلية لندن الجامعية في إنجلترا ومؤسّسة Royal Radar في النّرويج بواسطة ARPANET، ومن هنا وُلد مصطلح الإنترنت

ما هي شبكة الانترنت؟

شبكة الانترنت :هي شبكة عالمية تربط الملايين من أجهزة الكمبيوتر حول العالم بعضها ببعض، وتقوم هذه الأجهزة بإرسال وإستقبال المعلومات من أي جهازلأي جهاز آخر باستخدام برتوكول الانترنت.
تضم الشبكة عدة خدمات (بريد الكتروني- الدردشة- تصفح الشبكة العنكبوتية – مؤتمرات الفيديو.......)

ما هي الشبكة العنكبوتية؟

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

ما هو موقع الانترنت؟

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

ما هي الصفحة الرئيسية؟

الصفحة الرئيسية :هي أهم صفحة بالموقع وتعتبر بوابة ودليل الي كافة الخدمات والمعلومات وتكون مرتبطة بجميع الصفحات الاخري بالموقع.

ما هو الرابط التشعبي؟

الرابط التشعبى:هو ارتباط من صفحة الى آخري. عندم يقوم الزائر بالنقر فوق الارتباط التشعبى يتم عرض الوجهة أو فتحها في مستعرض ويب.
امثلة للرابط التشعبي:

الفصل الثاني: المفاهيم الأساسية لتصميم ونشر وإدارة مواقع الانترنت

درس تمهيدي للغة html

شرح وسم body

ما هو الحاسب الخادم؟

الحاسب الخادم: يطلق على الحاسب الذى يستخدم في تقديم خدمات تفيد مجموعة من المستخدمين العاملين على حاسبات أخري (مكتبة أو محمولة). 

بعض أنواع الحاسبات الخادمة:

1. الحاسبات الخادمة لمواقع الانترنت: يتم استخدامها في استضافة مواقع الانترنت وقد يستضيف الخادم موقع واحد أو أكثر، ويتيح لزوار الموقع تحميل صفحات الموقع على حاسبهم الشخصي.

2. الحاسبات الخادمة للبريد الالكترونى: تقدم خدمات البريد الالكترونى لمستخدمى الانترنت.

3. حاسبات الملفات الخادمة: يتم تخزين الملفات بها لكي يستطيع عدد من المستخدمين التعامل مع هذه الملفات في أي وقت. وتتميز بوحدات التخزين ذات السعات العالية.

يوجد العديد من الأجهزة الخادمة (خادم الطابعة – خادم قواعد البيانات وغيرها.....)

عنوان موقع الويب

عنوان موقع الويب: هو عنوان فريد لا يكرر أبدا يسمى العنوان الالكترونى ويستخدم في تحديد مصدر الموقع والمسار.

ويمكن ان يكتب على طريقتين

الاولي : أربعة أعداد تنفصل عن بعضها بنقاط.

الثانية: أحرف لغوية قد يكون معها ارقام وهى الطريقة المتبعة.مثال: http://www.google.com 

ويتكون هذا العنوان من الاجزاء الآتيه:

1. http : وهو برتوكول من برتكولات الانترنت
2. www : الموقع المبني وفق معايير الشبكة العنكبوتية
3. اسم الموقع : ويكون بالانجليزية وبدون مسافات.
4. .com : ويدل على نوعية مجال الموقع وهو موقع تجاري ويوجد نوعية اخري مثل (edu - تعليمي) (mil - عسكري) (net - شبكة أعمال ).

متصفح الانترنت

متصفح الانترنت: برنامج يسمح للمستخدم باستعراض النصوص والصور والملفات ومحتويات أخرى مختلفة مخزنة على الحواسب الخادمة. 

رقم الجهازIP Address

رقم الجهازIP Address: هو المعرف الرقمى لجهاز الحاسب الالى المتصل بالانترنت أو بالشبكة المحلية وكل جهاز له عنوان خاص به ويتميز بانفراده.

نظام أسماء النطاقات:

نظام أسماء النطاقات: هو نظام يخزن معلومات تتعلق بأسماء النطاقات في قاعدة بيانات موزعه علي الانترنت. 

تعريف آخر: هو نظام يقوم بترجمة أسماء النطاقات منكلمات الي أرقام تعرف باسم(ip address).

برتوكولات الانترنت

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

1- بروتوكول نقل النص الفائق(http): يستخدم في نقل ملفات المواقع من الخادم حيث يوجد الموقع الي جهازك للتصفح الموقع.

2- بروتوكول نقل الملفات(ftp): يستخدم لنقل الملفات من وإلي أي جهاز خادم عبر الانترنت.

3- بروتوكول smtp: يستخدم في إرسال رسائل البريد الالكتروني.

4- بروتوكول PoP3: يستخدم في إستقبال رسائل البريد الالكتروني.

5- بروتوكولSNMP: يستخدم في إدارة الشبكات البسيطة.

6- بروتوكول ARP: يستخدم لايجاد رقم كارت الشبكة الموجود بالحاسب المتصل بالانترنت.

7- بروتوكول telnet : يستخدم لتمكين أي شخص من الوصول لأي حاسب علي الانترنت والتحكم الكامل به باستخدام اسم الدخول وكلمة السر

كيفية الاتصال بالانترنت:

ما هي الوسائل المستخدمة للاصال بالانترنت؟

1- جهاز كمبيوتر يمكنه الاتصال بالانترنت.

2- مزود خدمة انترنت.

3- وسيلة اتصال.(خط هاتف ومودم – وصلة dsl – خط رقمي مستأجر – اتصال لاسلكي – هاتف محمول مدعم بالـ GPRS)

4- برامج الانترنت (تصفح – بريد الكتروني- مكافح فيروسات)

5- قد يقتضى الامر الي اسم مستخدم وكلمة مرور.

مجالات وتطبيقات استخدام الانترنت:

1- التصفح والبحث: التصفح هو الإطلاع علي الموقع والوصول الي المعلومة المطلوبة في حالة معرفة عنوان الموقع الموجود علي المعلومة ، أما في حالة عدم معرفة الموقع فيتم استخدام محركات البحث للبحث عن المعلومات علي الانترنت. ويتم البحث أما علي أساس الموضوع أو باستخدام الكلمات الاساسية.

محركات البحث: هي أنظمة خدمات مجانية متوفرة علي الانترنت تقدم خدمة البحث عن المعلومات على الانترنت. ويوجد العديد من محركات البحث

2- البريد الالكتروني: هو صندوق بريد خاص بك على الانترنت يمكنك من خلاله إرسال واستقبال الرسائل الالكترونية من والي أي شخص ويمكن ان ترفق مع الرسالة مرفقات(صور – مستندات – فيديو....)

يوجد نوعين من البريد الالكتروني ( قياسي – مبني علي الويب)

البريد القياسي: يتم الحصول عليه من مزود خدمة الانترنت.

المزايا:

1- مؤمن بشكل جيد.

2- تستطيع إرفاق ما تشاء من الملفات بأي عدد وبأي حجم.

3- مساحة الصندوق كبيرة.

4- لا توجد إعلانات.

العيوب :

1- لا تستطيع استخدامه إلا من جهازك.

2- التكلفة العالية.

البريد المبني علي الويب: هو الحصول علي بريد من أحدي الشركات المزودة لخدمة البريد بالمجان.

المزايا:

تسطيع استخدامه إينما كنت طالما توفر الانترنت.

العيوب:
· غير مؤمن.

· مساحة الصندوق محدودة.

· توجد إعلانات.

· لا تستطيع ارفاق ملفات كثيرة.

3- تبادل ونقل الملفات: يتم تبادل ونقل الملفات بين مستخدمين الانترنت وبعضهم البعض مباشرة أو من والي المواقع باستخدام برامج تبادل الملفات.

4- الدردشة: هي عملية تواصل مباشرة بين شخصين أو اكثرمتصلين في شبكة الانترنت في آن واحد من خلال برامج ومواقع خاصة بالدردشة.

أنواع الدردشة (محادثة نصوص – محادثة صوت – محادثة وسائط متعددة)

5- مؤتمرات الفيديو: هي أحد وسائل الاتصالات المرئية من خلال الانترنت حيث يتم نقل الصوت والصورة في مكان آخر في العالم.

المزايا:

1. يوفر الوقت والجهد والتكاليف.

2. إدارة الحوار بين مجموعة من الأشخاص يصعب تجميعهم في وقت واحد.

3. تكلفة زهيدة الي حد كبير.

4. تبادل الملفات والوثائق.

الأنواع: (مؤتمر بين شخصين – مؤتمر بين عدة أشخاص)

6- التعليم الالكتروني: هو طريقة للتعليم باستخدام وسائل الاتصالات الحديثة من حاسب وشبكات ووسائط متعددة ووسائل بحث ومكتبات الكترونية لإيصال المعلومة إلي المتعلم بأقصر وقت وأقل جهد. 

7- التجارة الالكترونية: تنفيذ كل ما يتصل بعمليات بيع وشراء السلع والخدمات والمعلومات بين المؤسسات والأفراد والحكومات باستخدام شبكة الانترنت. 

وتضم التجارة الالكترونية عدة انشطة:

1. عمليات توزيع وتسليم السلع ومتابعة الاجراءات
2. سداد الالتزامات المالية
3. ابرام العقود والصفقات
4. الاعلان عن السلع والبضائع والخدمات
5. تبادل البيانات الكترونياً (سداد الفواتير - كتالوجات الاسعار - الاستعلام عن السلع)
6. التفاوض بين البائع والمشتري

مثال شركة جوميا وشركة سوق دوت كوم

8- الطب : تم استخدام الانترنت في المجال الطبي حيث استخدمه الأطباء في التواصل فيما بينهم وتطوير البحوث الطبية وإجراء العمليات الجراحية وأخذ استشارة الأطباء من عدة دول.

الدرس الثاني في لغة HTML (وسم body)

الدرس الثاني في لغة HTML 

وسم الـ <body>

تحدثنا في الدرس السابق عن البنية الاساسية لملف HTML  الدرس الاول في لغة HTML في هذا الدرس سنتعلم كيفية التحكم في وسم <body> وتعديل خصائص الوسم المختلفة.

س: ما فائدة وسم الـ <body> داخل صفحة الويب؟

ج: وسم الـ <body> يعتبر اهم جزء في صفحة الويب حيث انه المتحكم الكامل في المظهر العام للصفحة واضافة تأثيرات جمالية للصفحة. وهذا الوسم يكتب في بداية الصفحة فقط وعند نهاية الصفحة نستخدم وسم النهاية <body/>

لكل وسم في لغة HTML  مجموع من الخصائص للتحكم في الكيفية الذي يعمل بها الوسم.

لنبدأ شرح خصائص وسم الـ <body>:

الخاصية الاولي bgcolor لوسم الـ <body> :تقوم بتحديد لون خليفة للصفحه

مثال1:

<body bgcolor="green">

.

.

.

</body>

في هذا المثال تم تغيير لون الصفحة من اللون الافتراضي الي اللون الاخضر باستخدام الخاصية "bgcolor="green

مثال2:

<body bgcolor="red">

.

.

.

</body>

في هذا المثال تم تغيير لون الصفحة من اللون الافتراضي الي اللون الاحمر باستخدام الخاصية "bgcolor="red

لاحظ اننا كتبنا الخاصية متبوعه بعلامة = ثم كتبنا قيمة الخاصية

مثال3:

<body bgcolor="ffffff">

.

.

.

</body>

في هذا المثال تم تغيير لون الصفحة الي اللون الابيض باستخدام الخاصية "bgcolor="ffffff

لاحظ اننا في هذا المثال تم استخدام كود بدلاً من استخدام اسم اللون فما يعني هذا الكود " الكود هو مزيح من الالوان الاساسية الاحمر والاخضر والازرق" لمعرفة المزيد راجع هذا المقال القليل عن الالوان في لغة HTML

الخاصية الثانية background لوسم الـ <body> :تقوم بتحديد صورة خليفة للصفحه

وتكتب كالتالي 

 background="اسم الصورة. امتدادالصورة"

مثال1:

<body background="input.jpg">

.

.

.

</body>

مثال 2:

<body background="output.gif">

.

.

.

</body>

قبل الشروع في العمل مع خاصية جديدة من خواص وسم الـ <body> نحتاج ان نعرف المزيد عن انواع الصور من اجل الالمام بالخاصية السابقة:

يزخر عالم الحاسب الآلي بالعديد من انواع الصور تختلف عن بعضها في الدقة وعدد الالوان التي تستوعبها الصورة والحجم لذلك يوجد العديد منها (.jpg, .jpeg, .bmp, gif ,وغيرها) 

الخاصية الثالثة text لوسم الـ <body> : تقوم بتغيرلون نص الصفحه الاساسي

مثال1:

<body text="blue">

.

.

.

</body>

الخاصية الرابعة link لوسم الـ <body> : تقوم بتغيرلون الارتباط التشعبي

الارتباط التشعبي هو الارتباط بملف او صوره او صفحة خارجية أو داخلية او ارتباط الي جزء من أجزاء الصفحة مثل الروابط الظاهرة في نتائج البحث لموقع جوجل

مثال1: لون الارتباط التشعبي الافتراضي ازرق قبل تعديله باستخدام الخاصية كما هو ظاهر بالصورة التالية:

مثال 2: تطبيق الخاصية link  

في هذا المثال تم تغير لون الارتباط التشعبي الي اللون الوردي بدلا من اللون الافتراضي (الازرق) كما في الصورة التالية

الخاصية الخامسة vlink لوسم الـ <body> : تقوم بتغيرلون الارتباط التشعبي الذي تم زيارته:

مثال: في هذا المثال يتم تغير لون الارتباط التشعبي الذي تم زيارته (اي الرابط الذي سننتقل اليه) الي اللون الرمادي 

الخاصية السادسة alink لوسم الـ <body> : تقوم بتغيرلون الارتباط التشعبي النشط:

مثال: في هذا المثال يتم تغير لون الارتباط التشعبي النشط (الذي يتم الضغط عليه الآن) الي اللون الاصفر

القليل عن الالوان في لغة HTML

تستخدم الالوان في لغة HTML لاضافة تاثيرات جمالية الي الصفحة.

ويوجد طريقتين لاستخدام الالوان في لغة HTML

1. استخدام اسم اللون المطلوب للخاصية. (red, green, black, pink,.....)
2. استخدام كود اللون و هي تستخدم رموز " hexadecimal "(يتم كتابة هذا الكود باستخدام النظام العددي السادس عشر) وهو خليط من الأحمر و الأخضر و الأزرق. وهذا ما يستخدمة العاملين في مجال الدهانات باستخدام الحاسب الآلي.

أسماء الألوان :

qua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, pink, and yellow

وهذه الالوان هي ما تدعمه" W3C CSS standard " اما باقي الالوان يتم استخدام نظام الكود hexadecimal وفي الصور التالية يظهر فيها الكود المخصص للون وهذا الكود مكون من ثلاثة خانات (خانة للون الاحمر - خانة للون الاخضر- خانة للون الازرق ) وكل لون من الالوان الثلاثة له قيمة تبدأ من 0 وتنتهي 255 والمزيج من هذه الالوان بدرجاتها نحصل علي الالوان الأخري.

الكود المخصص للون الازرق هو 0000ff نلاحظ اول رقمين من ناحية اليسار هو 00 للون الاحمر ويليها 00 للون الاخضر اما ff في هي اعلي قيمة للون الازرق

الكود المخصص للون الاخضرهو 00ff00 نلاحظ اول رقمين من ناحية اليسار هو 00 للون الاحمر ويليها ff للون الاخضر وهي اعلي درجة للون الاخضر اما 00 هي للون الازرق

نلاحظ أن أي لون هو مزيج وبنسبة معينة من درجات الالوان الثلاثة واليكم امثله لبعض الالوان كما بالصورة التاليه

نلاحظ من المثال السابق ان اللون الابيض يشار اليه بالكود ffffff# اما اللون الاسود يشار اليه بالكود 000000#

ملحوظة: عند استخدام نظام الاكواد داخل لغة HTML بعض المتصفحات لاتتعرف علي رموز الالوان الا عن طريق استخدام إشارة # لذلك من المفضل استخدامها مع الكود المخصص للون.

س: ما اقصى عدد من الالوان الموجودة؟

كما تحدثنا سابقاً أن الالوان المستخدمة ما هي الا مزيج من الالوان الثلاثة RGB الاحمر والاخضر والازرق بدرجاتها ولكل لون 256 درجة اي اننا نحصل علي عدد اجمالي 256*256*256=16777217 لون