HTML دروس

by Obai Rezeq

متنزه الياسمين


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

ملاحظة هامة : إذا لم تفهم هذه المقدمة عن تصميم الصفحات فلا بأس و لا تخف فلن تؤثر هذه المقدمة على كتابة كود التصميم لكن كما قلنا يفضّل أن تقرأها بعناية و تحاول فهمها .
مقدمة في الإنترنت..

الإنترنت ..
و هي اختصار لـ International Network وهي شبكة عالمية ضخمة من أجهزة الحاسوب المتصلة فيما بينها حول العالم ، و تعتبر الآن من أهم وسائط الاتصال و تبادل المعلومات حيث يمكنك من خلالها تبادل العديد من أنواع البيانات مثل النصوص و الصور التسجيلات الصوتية مقابل مبلغ زهيد من المال و من أهم تلك الخدمات التي توفرها الإنترنت :
-البريد الإلكتروني E-mail : و هي أكثر الخدمات استخداماً في الإنترنت حيث يمكنك من خلالها تبادل الرسائل التي تحتوي مختلف البينات النصية و الصورية و الصوتية و غيرها.
-المحادثة Chat : و لقد أصبحت هذه الخدمة الأكثر شيوعاً بين الشباب حيث تقوم بكتابة رسالة تعرض مباشرة عند الطرف الآخر ليرد عليها مباشرة و بنفس الطريقة .
-مجموعات الأخبار News Group : مجموعة من الأشخاص لهم نفس الهوايات و الأفكار يقومون بالتحاور فيما بينهم لتبادل المعلومات المختلفة .
-القوائم البريدية Mailing List : و هي شكل آخر من أشكال مجموعات الأخبار ..
-الاتصال عن بعد Telnet : خدمة تستطيع من خلالها الاتصال مع أي كمبيوتر موجود على شبكة الإنترنت .
-محركات البحث Search Engines : و هي من الخدمات المتوفرة بقوة عبر الإنترنت و التي من خلالها تستطيع الحصول على المعلومة التي تريدها بعد وضع الكلمة المراد البحث عنها و من محركات البحث الشهيرة Google و Yahoo و AltaVista و Ayna و غيرها العديد .
-خدمة نقل الملفات : حيث يمكن من خلال هذه الخدمة نقل الملفات من جهاز إلى آخر من خلال بروتوكول FTP و الذي يحتوي على مكتبة هائلة من البيانات .

لمحة تاريخية عن الإنترنت
في عام 1957 : خلال الحرب الباردة بين الولايات المتحدة الأمريكية و روسيا قام الرئيسي الأمريكي في ذلك الوقت بإنشاء و كالة الأبحاث المتقدمة ARPA التابعة لوزارة الدفاع الأمريكية ، و خلال الستينات أرادت وزارة الدفاع استمرار الاتصال بين أجهزتها و حتى لو دمر بعضها و قامت بذلك من خلال إرسال رسائل صغيرة قسمت إلى حزم كل حزمة تحتوي على معلومات عن المرسل و المرسل إليه .
في عام 1969 : بدأت الجامعات و المعاهد الأمريكية بربط أجهزتها و سميت تلك الشبكة حينها ARPAnet .
في عام 1972 : قام لورنس روبرتس بتطوير خدمة البريد الإلكتروني .
في عام 1973 : تم تطوير خدمة البريد الإلكتروني لتصبح قادرة على إرسال و استقبال الرسائل .
في عام 1983 : تم استخدام بروتوكول TCP بين الشبكات .
في عام 1986 : تم إنشاء شبكة المؤسسة القومية للعلوم NSFnet .
في عام 1990 : تم إغلاق شبكة ARPAnet و استمرت شبكة NSFnet في عملها .
في عام 1993 : بدأ انتشار الإنترنت من خلال الأخبار و الصحف و أصبحت الشركات التجارية و مزودي الخدمة (ISP) هم الذين يوفرون الاتصال عبر الإنترنت من خلال بروتوكول TCP/IP .

ما هي أهم المتطلبات للوصول بشبكة الإنترنت ؟
1- جهاز كمبيوتر يفضّل أن يكون ذو سرعة عالية و ذاكرة كبيرة ..
2- جهاز مودم Internal modem أو External modem .
3- وسيلة اتصال مثل خطوط الهاتف .
4- مزوّد لخدمة الإنترنت ( ISP ) اختصار لـِ
Internet Service Provider لتوفير الاتصال مع الإنترنت و تقديم خدمة الإنترنت .
5- برمجيات الإنترنت مثل Internet Explorer أو Netscape و ما إلى ذلك .

ما هي أهم البروتوكولات المستخدمة في الإنترنت ؟
- بروتوكول TCP/IP: و هو البروتوكول المعتمد في شبكة الإنترنت ، حيث يقوم بتقسيم البيانات المرسلة إلى حزم صغيرة و من ثم تجميعها عند الطرفالمستقبل و تحتوي على حزمة صغيرة فيه على معلومات المرسل و المرسل إليه حيث ..
    TCP : اختصار لـِ
Transfer Control Protocol و هو مسؤول عن تقسيم البيانات و التأكد من صحة توزيع البيانات حيث    تكون معرضة للضياع عند توزيعها من خلال Routers و لذلك فإنه يراقب البيانات و يعيد توجيهها إذا تعرضت للضياع .
    IP : اختصار
Internet Protocol و هو مسؤول عن عنونة حزم البيانات و إدارتها و تمريرها و تحديد مساراتها عبر الشبكة .
- بروتوكول FTP : اختصار
File Trasfer Protocol و هو بروتوكول يقوم بنقل الملفات من جهاز إلى آخر ( و من جهاز لآخر عبر الشبكة ) .
- بروتوكول TelNet : و هو أحد بروتوكولات TCP/IP و هو اختصار لـِ
Tele Communiction Network و يوفر إمكانية الاتصال عن بعد بحيث تصبح قادر للاتصال عن بعد بحيث تصبح قادر للاتصال مع أي كمبيوتر موجود على الشبكة .
- بروتوكول http : اختصار لـِ
Hyper Text Transfer Protocol و هو بروتوكول نقل النصوص المترابطة المتفاعلة و الذي يستخدم في تطبيقات الويب .. حيث يقوم بنقل صفحات الإنترنت و تفسيرها .
- بروتوكول PPP : اختصار لـِ
Point-To-Point Protocol و هو أحدث البروتوكولات المستخدمة في الإنترنت و أسرعها أيضاً ، و يوفر وسيلة مرنة للاتصال بين حواسيب الشبكة .


وضّح آلية عمل المتصفح Browser في إظهار الصفحات (الموقع)؟
- يتم وضع العنوان المطلوب مثل http://www.ooobe.f2s.com في المكان المحدد له و هذا المكان يسمّى URL و هو اختصار لـِ Uniform resource Location و هو عبارة عن عنوان يسمح للمتصفح بمعرفة مكان البحث عن الملف أو الموقع المطلوب .
- بعد وضع العنوان المطلوب فإن البروتوكول يقوم بإرساله إلى الـ Web Server و هو المكان الحاضن لذلك الموقع ومن خلال ما يسمّى بالـ CGI يمرر العنوان إلى برنامج يسمّى سكريبت سواء Perl Script أو VbScript فيبحث فيه عن الصفحة أو الموقع المطلوب و عندما يجده يعيده إلى الـ Web Server و يعطي نتيجة البحث للمستعرض لتظهر أمامه النتيجة و هي عبارة عن الموقع أو الصفحة التي قمنا بكتابة عنوانها .

مم يتكون العنوان مثلاً http://www.Yahoo.com/Friends/boys.html ؟

http:// هو نوع البروتوكول المستخدم في نقل الملفات و البيانات و يمكن أن يكون FTP أو غيره .
www. اختصار لـِ world wild web و هو نظام عملاق من النصوص و المستندات المترابطة فيما بينها حول العالم.
Yahoo. اسم الموقع و هو حقيقة اسم الـ Web Serverالجهاز الحاضن للموقع .
Com/ و هو نوع الموقع أو امتداده و يمكن ان يكون .net أو .org أو .edu و ما إلى ذلك . 
Friends و هو الدليل أو الـ Folder الذي سيبحث فيه ال Web Server عن الصفحة المطلوبة .
Boys هو اسم الملف أو الصفحة التي نريد الوصول إليها و عرضها على المتصفح .
.html هو امتداد الملف المراد فتحه و عرضه و هنا هو عبارة عن صفحة ويب و يمكن أن يكون .gif أو jpg أو .zip أو .wav و ما إلى ذلك .
by Obai Rezeq

إضغط هنا

مقدمة في الـ HTML

HTML ..
و هي اللغة ( ليست لغة بمعنى لغة ) المستخدمة في تصميم صفحات الإنترنت أي تصميم صفحات مثل ما تنظر إليه الآن ..
و هي اختصار لـ
Hyper Text Markup Language و لا يوجد معنى حرفي لهذه الكلمات إلا أنه يمكن أن نقول أنها لغة النصوص المترابطة و المتفاعلة لأنها تنتقل من مكان لآخر و هناك ربط بين مكان و آخر أو هو نظام الترميز المستخدم لانشاء صفحات الويب..

لماذا لا تعتبر الـ HTML لغة برمجة ؟؟
فهي لا تحتاج إلى Compiler مترجم خاص بها .
غير مرتبطة بنظام تشغيل معين، لأنه يتم تفسيرها وتنفيذ تعليماتها مباشرة من قبل متصفح الإنترنت مثل Internet Explorer بدون أن يتدخل نظام التشغيل بذلك .
لا تحتوي على متغيرات و جمل دوران و تحكم و غيره من ما تقوم به لغات البرمجة لكن إذا أردنا أن نفعل ذلك نستخدم الـ JavaScript و الـ VbScript و الـ CGI و غيرها ..

ما الفرق بين الموقع Site و الصفحة Page ؟
الموقع : هو مجموعة من الصفحات المترابطة و التي يتم الوصول إليها من خلال عنوان خاص ..
الصفحة : هي مجموعة من النصوص و الوصلات التشعبية و الصور و الرسومات المترابطة فيما بينها .

ما هي أساسيات تصميم الصفحات ؟
1-تحديد الهدف الرئيسي من الصفحة أو الموقع .
2- ماهية المعلومات التي نريد تضمينها للصفحة أو الموقع .
4- معرفة المستقبل المتوقع للصفحة او الموقع .
5- من هم الأشخاص المتوقع زيارتهم للموقع ( أجناسهم ، أعمارهم ، لغاتهم ، هواياتهم .....).

ما هي أهم المقاييس التي تحدد نجاح و كمال و استمرارية الموقع أو الصفحة ..
- الوضوح Clearity : يجب مراعاة وضوح النصوص و محتويات الموقع .
- ثبات و متانة الموقع Consistency : يجب أن تكون صفحات الموقع منسجمة و متناسقة و تحقق الهدف الذي أُنشئت من أجله و تكون كل الصفحات بنفس التميز .
- الاستعارات Metaphor : وجوب استخدام الرموز و الرسوم و الصور للتعبير عن الأفكار التي وجد من أجلها الموقع .
-التقنيات المستخدمة Media Technical: وجوب استخدام محركات البحث و الصوت و الصورة المتحركة بالصورة المطلوبة .
- ترتيب الصفحات داخل الموقع بالشكل المطلوب . 

أين يتم كتابة كود صفحات الـ html ؟؟
يتم كتابة الكود بعدة طرق 
-على محرر نصوص مثل Notepad
-على برامج جاهزة مثل FrontPage أو Hotdog أو غيرها
-من خلال مواقع خاصة مثل Geocities و غيرها

كيف يتم تخزين صفحات الإنترنت ؟؟
بعد كتابة الكود و الشيفرات اللازمة و بأي طريقة كانت من الطرق السابقة و نحن سنستخدم بإذن الله محرر النصوص إذاً بعد كتابة الكود سنقوم بتخزين الملف بصيغة html أو htm أي html.اسم الملف أو htm.اسم الملف.

لقد ذكرنا الكود كثيراً فما المعنى الحقيقي للكود ؟؟
لا نقول في الـ html هذا الكود يفعل كذا و هذا كذا و إن كان جائزاً حيث أننا نسمي الشيفرة الخاصة بالـ html نسمّيها Tag و باللغة العربية وَسِـم و غالباً ما يكون له بداية و نهاية أي <TAG/>النص الذي سيتأثر بهذا الوسم <TAG> و قريباً إن شاء الله سيتضح ما نعنيه لكن بقي أن نقول أن الـ TAGS لا تتأثر بنوعية الحروف سواء كانت كبيرة أو صغيرة ، أي أنّ <TAG> هي نفسها <tag> مثلاً <Body> نفسها <BODY> و هكذا و هذا كله سيتضح في الدروس القادمة ..


إذا كان لديك أي سؤال على هذا الدرس إطرح ذلك في منتدى الموقع

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

جميع الحقوق محفوظة©2000-2002 لدى عالــم أوووبي