سلسلة دروس الـ Html . الأولى

الكاتب : AliM   المشاهدات : 1,094   الردود : 9    ‏2005-06-24
      مشاركة رقم : 1    ‏2005-06-24
  1. AliM

    AliM عضو

    التسجيل :
    ‏2005-06-15
    المشاركات:
    102
    الإعجاب :
    0
    بسم الله الرحمن الرحيم

    السلام عليكم ورحمة الله وبركاتة
    والصلاة والسلام على اشرف المرسلين محمد بن عبدالله .
    ---------------------

    اليوم سوف نقوم بعمل بداية لدروس التي قلت عنها . واكررها هنا
    Html – CSS - SQL – PHP

    وسوف نتطرق لكل لغة بحدة . ونقوم بها بتطبيقات في كل نهاية درس ..

    اليوم سوف نتحدث عن الـ html ولكن بطريقتي . ولن اقول ماهي الـ html . واشرح معنها وكل حرف فيها فأكيد الكل قد قراء عنها . ويقراء عن المقدمة حتى نزهق منها .
    سنتحدث عن المهم . وهي لغة ا لـ html . لما ندرسها . لعدة أشياء .
    منها معرفة كيفية برمجة صفحات ا لويب . تستطيع تعديلها بأي برنامج محرر نصوص . فالشخص الذي يعتمد على برنامج الـ frontpage . سيكون أي يعمل سيقوم به عن طريق هذا البرنامج حتى ينسى كيفية كتابة كود معين . مثل تكبير خط . تلوين خط . وهذه من أصغر الأمور . فما بالك بتغيير جدول . دمج جدول . إضافة صف . . و هكذا من هذه الأمور .
    فمعرفة الكود تعطيك ثقة أكبر بنفسك ..
    لا أريد أن اتحدث طويلا ً عن ما سلف . والآن سـنبـداء .

    طبعـاً لا نحتاج إلي برنامج . أو ماشابة ذلك . سنستخدم فقط . برنامج المفكرة . او notepad باللغة الإنجليزية . ---
    دائمأ في كتابة كود الـ HTML .. يبـداء . بوسمين . همـا
    < html > هذا يسمى وسم البداية .
    ….. </html> وهذا يسمى وسم النهاية .

    طبعاً في كتابة أي كود في الـ html . يجب فتح الوسم وأغلاق الوسم .
    -----------
    الآن قم بفتح برنامج المفكرة . ( notepad ) . وسوف نقوم بإفتتاحية كتابة كود او بالأصح ببناء صفحة ويب صغيرة جداً .

    وتكتب فيها التالي .


    [​IMG]


    الآن نقوم بشرح الكود ا لذي عملناه ..

    كتبنا في بداية الكود <html> . وهو لنعرف أننا سوف نقوم بكتابة كود html .
    بعد ذلك . كتبنا <head> . وهو الـرأس وهو الذي سيكون بداخلة <title> وهو لعرض أسمك في المستعرض او في صفحة الأنترنت .
    ثم أغلقنا </title> . أولاً . لأننا كتبنا بداخلة الكلام الذي سيعرض في المتصفح عن طريق الـ <head> .
    فبعد ان نكتب كود الـ title . نغلقه . نغلق الآن كود <head> بهذه الطريقة </head> .

    الـ <body> .. من خلال أسمه . يقول لنا . الجسم . باللغة ا لإنجليزية . ومعنى برمجياً .

    محتويات الصفحة و التي ستكون مكوناتها كل شئ . صور . جداول . حدود . كل شئ .

    فعند فتحد وسم الـ <body> ينتظر أي شئ تكتبه بعده مباشرة . لكي يظهر في المتصفح أو في المستعرض . فبعد ما تنتهي . تغلقه </body>

    أنا كتبت بعد وسم الـ body . هذا الكود <body dir=rtl> ومعنى dir=rtl . أي أن يظهر الكلام من اليمين إلي اليسار . ولو كتبت dir=ltr . سيظهر الكلام من اليسار إلي اليمين .

    R= right ..
    T = to
    L = left
    .

    ----------
    وبعد ذلك كتبت في داخل الـ body . وسم <br> . وطبعاً بعض أكواد ا لـ html لا توجد لديها وسم أغلاق . وعمل هذا الكود هـو إنزال الكلام ا لذي سيأتي بعد ( بسم الله الرحمن الرحيم ) في السطر الثاني .
    -----------

    فبعد ما أنتهينا من كتابة كل شئ في الـ Body . نريد أن نغلق الآن كود الـ html .
    فنغلق الآن كود الـ <html> .

    الآن قم بحفظ العمل .
    file – save as

    ملف – حفظ بإسم

    ستظهر نافذة اين تريد أن تحفظها . فقم بتحديد المكان المناسب لك . أو أعمله بداخل مجلد معين .
    واكتب الأسم الذي تريدة . مثلاً بإسمك وأسمي صفحتي هذه بإسم index.html .



    [frame="7 80"]المطلوب منكم أحبتي
    كتابة ثلاثة تعبيرات . متتالية . و السطر الرابع يكون أسفلهم[/frame]--------------


    أنا أعلم أن بعض الأخوة لديهم معلومات عن الـ Html . فلذلك يرجى منهم أن يتتدرجوا معنى خطوة خطوة . ولا نريد إبراز المقدرات في مجال تعلمنا . .
    وأعلم كذلك أن هذا الدرس بسيط جـداً لبعض الأشخاص الذي لديهم خبرة في html . ولكن تذكر أنك بـدأت من الصفر فلنترك البقية يبـدأون كما بـدأنا



    مع خالص تحياتي

    أخوكم
    AliM ..
     
  2.   مشاركة رقم : 2    ‏2005-06-24
  3. سامر القباطي

    سامر القباطي مشرف سابق

    التسجيل :
    ‏2004-02-03
    المشاركات:
    1,894
    الإعجاب :
    0
    أبدعت جدا جدا جدا عزيزي اليم
    الدرس رائع جدا للمبتدئين والمحترفين معا
    فهناك من المحترفين في تصميم المواقع ولكن اعتمادهم على الفرونت بيج ينسيهم الأكواد وطريقة كتابتها والتعديل فيها
    عموما لا اطيل عليك
    واصل معنا روعة حضورك وعطائك
    ولن يضيع الله تعبك سدى
    بل ستحصل عليه جبالا من الحسنات يوم القيامة ان شاء الله

    بالنسبة لسؤالك لم افهمه
    هل تقصد نكتب ثلاث عبارات في جسم الصفحة في السطر الأول
    ونكتب عبارة رابعة في السطر الثاني
    ان كان كذلك فهذا هو تطبيقي

    كود:
    <html>
    <head>
    <title> صفحة نبراس اليماني 
    </title>
    </head>
    <body dir=rtl>
    بسم الله الرحمن الرحيم ، هذه صفحتي الأولى ، اتمنى أن تقضوا فيها وقتا ممتعا <br> محبكم في الله نبراس اليماني
    </body>
    </html>
    وهناك ملاحظة أخيرة
    في صورة الكود التي أرفقتها لعلك أخطأت حيث نسيت إغلاق منطقة الرأس
    لك تحياتي الحارة
    محبك في الله
    نبراس اليماني
     
  4.   مشاركة رقم : 3    ‏2005-06-24
  5. AliM

    AliM عضو

    التسجيل :
    ‏2005-06-15
    المشاركات:
    102
    الإعجاب :
    0
    أهلاً بك أخي العزيز نبراس اليماني ..

    وصحيح أخي كما اسلف سابقاً .

    ولقد كان التطبيق كما كتبت الكود صحيح .

    وأنا كذلك نسيت بدوري علامة أنهاء الوسم تبع الـ <head> .. إلا وهو </head>

    يداً بيد . سنتعلم سوياً .. من رأي منكم خطاء فاليراجعني . وبارك الله فيك أ خي العزيز نبراس ا ليماني على مشاركتك الجميلة ..

    تحياتي

    أخوك AliM
     
  6.   مشاركة رقم : 4    ‏2005-06-24
  7. العمراوي

    العمراوي مشرف سابق

    التسجيل :
    ‏2002-11-24
    المشاركات:
    7,510
    الإعجاب :
    4
    ما شاء الله ...


    جزاك الله خيرا في هذا الدرس الرائع ... وإن شاء الله تواصل البقية على نفس المستوى ...
     
  8.   مشاركة رقم : 5    ‏2005-06-25
  9. نسراليمن

    نسراليمن عضو متميّز

    التسجيل :
    ‏2003-09-30
    المشاركات:
    1,233
    الإعجاب :
    0
    بداية طيبة ورائعة
    بس اشتي اعرف المعني الكامل لــhtml ؟
     
  10.   مشاركة رقم : 6    ‏2005-06-25
  11. AliM

    AliM عضو

    التسجيل :
    ‏2005-06-15
    المشاركات:
    102
    الإعجاب :
    0
    كلمة HTML إختصار لـ Hyper Text Markup Language

    الـ Hyper Text هي الطريقة الخاصة بالتحرك علي صفحات الأنترنت بالضغط علي نص معين يدعي (Hyperlinks ) و هي وسيله للتنقل لأي مكان في شبكة الإنترنت عن طريق الضغط علي الوصلات ( الإرتباطات التشعبيه ) LINKS و تعتمد علي ماذا داخل الأوسمة (TAGS) بمعني أنها تحتوي علي أكواد كأي لغة أخري .
     
  12.   مشاركة رقم : 7    ‏2005-06-26
  13. وردةاليمن

    وردةاليمن عضو

    التسجيل :
    ‏2005-03-18
    المشاركات:
    70
    الإعجاب :
    0
    انا معك بدروس اليم وطبقها حتى اذا هذه الدروس اخذتها بس حلو الواحد يتذكر
     
  14.   مشاركة رقم : 8    ‏2005-06-26
  15. وردةاليمن

    وردةاليمن عضو

    التسجيل :
    ‏2005-03-18
    المشاركات:
    70
    الإعجاب :
    0
    اذا حبيت ان اضيف حاجه او رد على سأل عادي يا أليم؟؟
     
  16.   مشاركة رقم : 9    ‏2005-06-27
  17. AliM

    AliM عضو

    التسجيل :
    ‏2005-06-15
    المشاركات:
    102
    الإعجاب :
    0
    يا أخت وردة .. هذا يسعدني جداً . ويكون أفضل بأن يجد ا لسائل جوابة بأسرع وقت . حتى وأن لم يكن مني انا .. الشخص الذي يعرف ا لإجابة لا يبخل بها . بالعكس يطرحها .. أولاً لأنه مريح لي .

    ثانياً . مريح للعضو ا لي سئل ..

    ثالثاً .. أشكرك مع فائق إحترامي ..
     
  18.   مشاركة رقم : 10    ‏2005-06-27
  19. نسراليمن

    نسراليمن عضو متميّز

    التسجيل :
    ‏2003-09-30
    المشاركات:
    1,233
    الإعجاب :
    0
    منتظريـــــــــــــــــــــــــــنك :)
     

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