الكود HTML

الموضوع في 'لغات البرمجة' بواسطة Tuni23, بتاريخ ‏29 جويلية 2007.

حالة الموضوع:
مغلق
  1. Tuni23

    Tuni23 عضو فعال

    إنضم إلينا في:
    ‏17 جويلية 2007
    المشاركات:
    344
    الإعجابات المتلقاة:
    16
      29-07-2007 14:15
    [

    لنبدأ الدرس مباشرة :

    ماهي الشبكة العالمية World Wide Web ؟

    كلكم يكتب ثلاث حروف في بداية كل عناوين المواقع
    التي يزورها على الانترنت ألا وهي (www)
    وهذه الحروف هي اختصار لجملة World Wide Web أو ختصارا Web أو W3.


    الويب Web هي شبكة تربط جميع أجهزة العالم ، مما يتيح لجميع الأجهزة المربوطة مع بعضها البعض في الشبكة (الويب Web) للإتصال ببعضها ،

    وهذه الأجهزة مربوطة ببعضها عبر بروتوكول معتمد متعارف عليه في الشبكة Web ألا وهو HTTP والذي يرمز إلى Hyper Text Transfer Protocol.

    ولذلك نحن نكتب في بداية عنوان أي موقع نريد أن نزوره هذه الحروف ..
    http://www

    ثم نكتب اسم الموقع وامتداده ، فهذا السطر يعني .. أننا نريد الموقع الفلاني الموجود على الشبكة www والذي نود الاتصال به عبر البروتوكول http ،

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

    يوجد أيضا بروتوكولات أخرى تهم أصحاب المواقع مثل بروتوكول : FTP والتي ترمز إلى File Transfer Protocol وهو يستخدم لنقل الملفات من الجهاز إلى السيرفر والعكس.


    أما الجملة التي نقوم بكتابتها بعد http://www على سبيل المثال :
    http://www.islammen.net تنقسم إلى قسمين ، القسم الأول هو اسم النطاق الدومين islammen والقسم الثاني هو الامتداد .com وهو عبارة عن تصانيف لفهرسة المواقع وتمييزها عن بعضها:

    فمثلا com يرمز إلى commercial أي (تجارة) و net ترمز إلى network أي (شبكة) و org ترمز إلى organization أي (منظمة) و edu أي (education) أي تعليم ..


    وهناك الكثير من الامتدادات التي يمكن استخدامها.
    وأخيرا يسمى هذا السطر كله URL اختصارا لـ Uniform Resource Locator.



    كيف تعمل الـ(WWW)؟


    والآن بعد أن عرفنا ما هي الـWWW وما هو HTTP

    نود أن نعرف كيف تعمل الشبكة ، فكما وضحنا سابقا أن WWW :

    هي عبارة عن مجموعة كبيرة من الأجهزة حول العالم مربوطة مع بعضها البعض ،
    وقد اعتمد أصحاب هذه الأجهزة بروتوكول HTTP للاتصال ببعضهم البعض ،
    ولكن بعض الأجهزة خصصها أصحابها ليضعوا عليها بيانات وملفات تستطيع الأجهزة الأخرى المربوطة بالشبكة استعراضها ،
    وهذه الأجهزة تسمى بالخوادم أو السيرفرات Server وهي أجهزة كمبيوتر عادية لكن مواصفاتها ضخمة ، يعني أن الرام يكون ضخم والمساحة تكون عملاقة والمعالج البروسيسور يكون سريع جدا وهكذا ..


    أما الأجهزة التي تقوم بتصفح البيانات الموجودة في أجهزة السيرفر تسمى العميل Client ، وأجهزة العميل حتى تتصفح البيانات الموجودة على الخوادم (السيرفرات) تحتاج إلى برنامج يسمى المتصفح Explorer وهناك عدة أنواع من المتصفحات ،

    منها Internet Explorer التابع لشركة مايكروسوفت ويوجد Netscape ويوجد Mozilla ، حيث يستخدم المتصفح لإرسال عنوان الموقع URL إلى الشبكة Web ،

    حيث تبحث الشبكة عن هذا العنوان والذي يكون مربوطا بالسيرفر ، فكل سيرفر على الانترنت له عنوان رقمي يسمى IP Address اختصارا لـ Internet Protocol ، يتم ربطه باسم النطاق الـ URL عبر وسيلة تسمى DNS اختصارا لـ Domain Name System ، وبعد أن تجد الشبكة web العنوان المطلوب تقوم بالدخول إلى السيرفر وإرسال البيانات المطلوبة إلى الجهاز العميل وتظهر له البيانات ضمن شاشة المتصفح ،

    هذا هو مبدأ عمل الانترنت ، نحن ما يهمنا هنا هو شيء واحد فقط ، هو السيرفر ، فنحن بكوننا سنتعلم البرمجة بلغة HTML وPHP فنحن سنكون الطرف السيرفر ضمن هذه الشبكة ، حيث سنقوم بعمل مواقع وبرامج نعرضها على سيرفر حتى يستطيع العملاء تصفح هذه البيانات ، أما باقي الأطراف فلا يهمنا الخوض في تفاصيلها إنما ذكرناها للمعرفة فقط ، فهي متوفرة ضمن أي نظام تشغيل كأساسيات لا يمكن الاستغناء عنها.





    كيف يعرض المتصفح البيانات ؟

    هنا يأتي دور لغة HTML والتي ترمز إلى Hyper Text Markup Language ، فهي المسئولة عن عرض البيانات على شكل صفحات في المتصفح أو المستعرض ، فلغة HTML هي عبارة عن مجموعة من الأوامر التي يفهمها المتصفح بطريقة خاصة ويحولها إلى صفحة بيانات يعرضها بشكل منسق وجميل للعميل.


    وهذه الأوامر تسمى Tags (الأوسمة) فنحن عندما نريد تعلم البرمجة بواسطة HTML إنما نقوم بحفظ هذه الأوسمة Tags ومعرفة وظيفة كل وسم ، أي ما الناتج الذي سيظهر في المتصفح إذا كتبنا وسما معينا.





    ما هو ملف HTML ؟

    هو ملف نصي يحتوي على أوسمة HTML التي تخبر المتصفح كيف يعرض الصفحة ويكون امتداد ملفات HTML كما يلي : PAGE.html أو PAGE.htm ..

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

    الأول: أن المحررات المتخصصة هذه تقوم بتلوين الأكواد مما يسهل علينا قرائتها لاحقا
    لتعديلها أو إصلاحها ،

    وثانيا: تحتوي هذه المحررات على مرجع لأوسمة HTML
    وذلك ليسهل عليك الرجوع إليها بدلا من حفظها ، فحفظها مستحيل على ما أظن!


    لنبدأ البرمجة !

    قم بتشغيل المحرر الذي تستخدمه ، ويفضل أن يكون PHP Coder .. اكتب الشفرة التالية :

    كود PHP:
    <html>
    <head>
    <title>موضوع الصفحة</title>
    </head>

    <body>
    أول صفحة أكتبها بلغة HTML. <b> هذا النص عريض.</b>
    </body>
    </html>


    احفظ الصفحة باسم mypage.html ،
    داخل المجلد www الموجود داخل مجلد wamp الموجود في القرص C..



    ملاحظة هامة: ( أهم شيء في الحياة هو التنظيم ،
    ولقد أصبح الكمبيوتر جزءا من حياتنا ،
    فيجب على كل واحد منا أن يكون منظما حتى في كمبيوتره ،
    لذا يستحسن أن تقوم بعمل مجلد خاص لكل درس داخل المجلد www ،
    وعليك أن تحفظ الملفات التي تقوم بكتابتها بأحرف انجليزية صغيرة وواضحة وتعبر عن الكود المكتوب بداخلها وتكون بنفس النسق أو الإمتداد ، حتى يسهل عليك لاحقا إذا كثرت ملفاتك أن تميزها من بعضها فتطورها أو تصلح أخطاء معينة فيها ).

    عند حفظ الملف لا تنسى أن تكتب اسم الملف مع الامتداد ..



    لنشرح الأوسام التي كتبناها !

    أول وسم تكتبه في ملف HTML هو <html> ، هذا الوسم يخبر المتصفح أن هذه هي بداية ملف HTML ، بينما تكون نهاية ملف HTML دائما بالوسم </html> ، فهذا الوسم يخبر المتصفح أن هذه هي نهاية ملف HTML.


    هذين هما الوسمين الذين يجب أن تكتب جميع أوسام وشفرات HTML داخلهما ، أي شفرة خارج هذين الوسمين يعني أن المتصفح لن يعتبرها شفرة HTML.


    الآن ينقسم كود HTML المكتوب داخل الوسمين <html></html> إلى قسمين رئيسيين :


    1-قسم الهيدر (الرأس) header ويبدأ بالوسم <head> وينتهي بالوسم </head> ، الكود المكتوب داخل هذين الوسمين لن يظهر في المتصفح ، وهو عبارة عن معلومات وبيانات عن الملف المكتوب لا تظهر على الشاشة وتكون مخفية.



    2-قسم البودي (الجسم) body ويبدأ بالوسم <body> وينتهي بالوسم </body> ، الكود المكتوب داخل هذين الوسمين هو الكود الذي سيظهر على شاشة المتصفح ، ويحتوي النصوص والصور والجداول والروابط التشعبية والنماذج وكل ما إلى ذلك من الأمور التي تظهر للعميل.


    لنعطيكم مثال واحد للشفرات التي تكتب في كل قسم :
    أولا قسم الهيدر : لقد كتبنا الوسم : <title>موضوع الصفحة</title> داخل الوسم <head></head> ، ووظيفة هذا الوسم هو إظهار اسم أو موضوع الصفحة على رأس المتصفح في عمود الموضوع Title Bar.



    ثانيا قسم البودي : لقد كتبنا في البداية نصا عاديا ، وسيظهر كما كتب ألا وهو : أول صفحة أكتبها بلغة HTML ، ثم استخدمنا الوسم : <b>هذا النص عريض</b> ، وذلك لجعل النص يظهر عريضا.



    قم بتشغيل سيرفر الأباتشي وافتح المتصفح إكسبلورر ثم اكتب عنوان الصفحة
    في المكان الذي حفظتها به ..
    http://localhost/mypage.html





    يجب أن نخلص إلى ثلاث نتائج مهمة جدا ، ستنبني عليها دراستك للغة HTML كلها ،
    وهي كما يلي :
    أولا: جميع أوسام HTML تكتب داخل قوسين مثلثين < اسم الوسم >.



    ثانيا: جميع أوسام HTML عبارة عن جزئين ، جزء يبدأ الوسم وجزء ينهيه ، الجزء الي ينهي الوسم هو نفس الجزء الذي يبدأ الوسم ولكن بفارق واحد بسيط هو وجود الشرطة المائلة قبل إسم الوسم.
    البداية : <html> ، النهاية : </html>.



    ثالثا: الأوسام تحوي بعضها حسب الأسبقية ، يعني وسم <b></b> موجود داخل وسم <body></body> والذي بدوره موجود داخل وسم <html></html> وهو أكبر أوسام HTML ولا يحويه أي وسم آخر إلا في حالات معينة سنشرحها لاحقا ، فيجب الانتباه متى تبدأ الوسم ومتى تنهيه ، انظر الشكل التالي :




    إلى هنا نأتي لنهاية درسنا الثاني في سلسلة دورة PHP الشاملة ،
    وما زلنا في المرحلة الأولى : دورة سريعة في HTML ...

    أتمنى أن تكونوا قد استفدتم من الدرس الحالي ، وانتظرونا في الدرس القادم إن شاء الله ..






    .
    [/FONT]



    [​IMG]
     
  2. grirahichem

    grirahichem عضو فعال

    إنضم إلينا في:
    ‏24 جانفي 2007
    المشاركات:
    379
    الإعجابات المتلقاة:
    19
      03-08-2007 15:42
    WALLAH M3ALEM
    :frown::klap::klap::klap::frown:
     
  3. Tuni23

    Tuni23 عضو فعال

    إنضم إلينا في:
    ‏17 جويلية 2007
    المشاركات:
    344
    الإعجابات المتلقاة:
    16
      03-08-2007 15:48

    شكرا

    [​IMG]
     
  4. Tuni23

    Tuni23 عضو فعال

    إنضم إلينا في:
    ‏17 جويلية 2007
    المشاركات:
    344
    الإعجابات المتلقاة:
    16
      03-08-2007 16:50
    içi pour vous
    [​IMG]
     
  5. fouzi

    fouzi عضو نشيط

    إنضم إلينا في:
    ‏5 ماي 2006
    المشاركات:
    153
    الإعجابات المتلقاة:
    6
      12-12-2007 13:36
    بارك الله فيك
     
  6. SLIMON

    SLIMON مسؤول سابق

    إنضم إلينا في:
    ‏20 نوفمبر 2005
    المشاركات:
    12.399
    الإعجابات المتلقاة:
    19.728
      12-12-2007 14:49
    بارك الله فيك يا غالي

    درس جميل

    ننتظر بقية الدروس
     
  7. barbarous_03

    barbarous_03 نجم المنتدى

    إنضم إلينا في:
    ‏28 أكتوبر 2006
    المشاركات:
    2.105
    الإعجابات المتلقاة:
    551
      12-12-2007 15:11
    [​IMG]
     
  8. khattab

    khattab عضو مميز

    إنضم إلينا في:
    ‏15 نوفمبر 2007
    المشاركات:
    790
    الإعجابات المتلقاة:
    1.379
      13-12-2007 16:53
    شكرا على الدرس
     
  9. hamma gsouma

    hamma gsouma نجم المنتدى

    إنضم إلينا في:
    ‏30 سبتمبر 2006
    المشاركات:
    4.520
    الإعجابات المتلقاة:
    2.254
      13-12-2007 19:51
    WALLAH M3ALEM
     
جاري تحميل الصفحة...
مواضيع مشابهة التاريخ
Execution of command line with HTA (HTML APPLICATION) by Hackoo ‏13 فيفري 2016
شرح windev Web service RSS to HTML ‏10 مارس 2016
حالة الموضوع:
مغلق

مشاركة هذه الصفحة

جاري تحميل الصفحة...