مشاهدة النتائج 1 الى 10 من 10
  1. #1

    حساميات لامعة .. (( أساسيات إنشاء صفحات الويب .. Html )) خطوة بخطوة ..

    attachment



    attachment

    أحبتي .. في هذا الموضوع سنتعرف على أشياء مبهرة ومفيدة إن شاء الله .. لن تتوقعوا ماستتعلمونه .. هذا الموضوع خلاصة جهدي في مادتي التي درستها في تخصصي "الحاسب الآلي"..

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

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

    attachment



    ملاحظات مهمة :


    1- كما قلت لكم سنتعلم أساسيات وبدائيات هذه اللغة .. وفي نهاية الموضوع ساعطيكم روابط لمواقع متخصصة فيها ، الشرح فيها واضح وبسيط لمن أراد الاستزادة وتطوير صفحته .. ولو دخلتموها سترون العجب العجاب من الاضافات التي تزيد الصفحة جمال ورونق كما ترونها في مواقع النت .
    2- المواقع المتخصصة كثيرة جدا في تعليم هذه اللغة ، وما ترونه هنا هو من شرحي وعلى حسب فهمي لها .. وإن اقتبست من موقع خارجي فإن اقتباسي قليل جدا .. والاصل اني أشرح من فهمي لاني درست هذه المادة ..
    3- ستجدون في الموضوع مقدمه عن الـHTML ومن ثم تليها دروس تطبيقيه لانشاء الصفحات ، من يريد ان يتعلم الاساسيات فليطبق الدروس .. وليعلم ان الدروس التي انزلها مرتبطة ببعضها البعض ..


    attachment

    نبدأ على بركة الله


    attachment


    إنها اللغة المستخدمة لإنشاء صفحات الإنترنت. (والكلمة إختصار لـ Hyper Text Markup Language).
    تتكون مفردات لغة Html من شيفرات تسمى TAGS أي الوسوم. وهي تستخدم بشكل أزواج ، وتكتب بالصيغة التالية ..
    (من اليسار إلى اليمين) :-


    attachment

    فعلى سبيل المثال الوسم <B> يستخدم لكتابة الكلمات بخط أسود عريض Bold وذلك بالشكل التالي:
    كود الـ PHP:
    <Bالنص المراد تفخيمه </B
    ولنعلم أن صفحة الـHTML تحتوي على "وسوم أساسية" لابد من وجودها لكي تقوم الصفحة .. وهي ثلاث أزواج من الوسوم :
    <html></html> وهو بداية صفحة الويب ونهايتها
    <head></head> وهذا الوسم هو رأس الصفحة ، وفيها يكتب بالغالب عنوان الصفحة الذي ترونه فوق بالأعلى ..
    <body></body> وهذا الوسم هو جسم الصفحة ، وفيها كل ماترونه في صفحات النت من صور وتصاميم وكتابات وجداول ورسوم وغيره .. ودروسنا بالموضوع هذا ستكون فيه .. يعني وسوم الخط والالوان والتنسيقات كلها تكتب داخل الـbody ، فركزوا معي بوركتم ..
    شرح مصور للوسوم الاساسية :

    htsketsh

    attachment


    attachment


    1- اذهب وافتح برنامج "المفكرة" المعروف attachment..

    2- بعد فتحه اذهب الى "ملف" ثم الى "حفظ باسم" وقم بالحفظ بأي اسم ، بشرط ان يكون باللغة الانجليزية ، وأيضا أضف على الاسم (( html. )) ، مثلا انا حفظت باسم ahmed فيكون اسم الملف هكذا (( ahmed.html )) ، يعني قم بتغييره بدلا من صيغة txt قم بحفظه بصيغة html .. ثم اضغط OK


    attachment


    3- عندما قمت بالحفظ ستلاحظ انشاء صفحة ويب .. كما بالشكل

    attachment ..
    اذهب وانقر عليها لتفتح صفحة ويب فارغة .. ثم اذهب الى "عرض" ثم الى مصدر" ستفتح لك برنامج المفكرة ..

    attachment


    4- عندما يفتح برنامج المفكرة نكتب الوسوم الاساسية .. وكما قلنا في المقدمه ان صفحة الـHTML تحتوي على وسوم أساسية .. فلذلك نقوم بكتابتها هنا في المفكرة ..
    ملاحظه frown( إذا كانت الكتابة في المفكرة تبدا من اليمين فيفضل انك تضغط ctrl+shift لكي تنتقل بداية الكتابة من اليسار لاننا سنكتب غالبا باللغة الانجليزية ، والانجليزي أفضل من اليسار ))
    المهم نبدأ بكتابة الوسوم الاساسية كلها بهذا الشكل


    attachment

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


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


    كود الـ PHP:
    <titleالعنوان المراد للصفحة  </title
    نقوم بإدارجه ضمن داخلة الوسم الاساسي head
    ثم نقوم بالحفظ طبعا ..

    مثلا أنا استخدمت الوسم :


    كود الـ PHP:
    <title>موقع الحسام اللامع </title
    طبعا أدرجته ضمن الوسم الاساسي head كما بالشكل :


    attachment

    وبعد ما حفظنا وقمنا بتحديث الصفحة التي أنشأناها (( ahmed.html )) يظهر لنا :

    attachment



    attachment



    يتبع


    اخر تعديل كان بواسطة » AL EMPRATOOR في يوم » 01-07-2009 عند الساعة » 14:25
    وَسَتَظلُّ اشتِيَاقِي ..
    فإِن أَبيتَ .. فَسَأَكُونُ زَهـــرَتَــــكَ الذَّابِلَة ..
    تَنْتَظِرُ سُقْيَاكَ .. إِلَى أَنْ أَمُوتْ


  2. ...

  3. #2
    attachment



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

    ملحوظه مهمة :
    الان جميع الوسوم التي نستخدمها في الدروس القادمة نضعها ضمن الوسم الاساسي body اللي هو جسم الصفحه مثل ماقلنا سابقا ، وجسم الصفحة فيه الوان ورسومات ونصوص وما الى ذلك .. وسنتعلم الان كيفية تلوين الصفحة :

    نستخدم الكلمة bgcolor وندرجها داخل الوسم هذا <body> والطريقة الاساسية هي:




    attachment



    تلاحظون أضفنا علامة "#" الى رمز اللون لان بعض المتصفحات لاتعبره اذا لم يوجد هذا الرمز .. فمن الافضل اضافته ..
    نقوم بالحفظ والتحديث وسنرى ان خلفية المنتدى أصبح لونها كما اخترتوه .. وبامكانكم على ذوقكم اختيار اللون المناسب على مزاجكم .. ويكون العمل حتى الآن على هذا الشكل :
    attachment



    الى الدرس الثالث ..






    attachment


    attachment


    فمثلا لنأخذ هذه الصورة

    attachment

    ورابطها في مرفقات مكسات هو :
    attachment

    الان عرفنا مبدئيا كيف ندرج أي صورة .. والان تعالوا معي لكي نقوم بإضافة تنسيقات للصورة ..

    attachment

    attachment

    ولا ننسى الحفظ والتحديث




    attachment


    attachment

    attachment

    attachment

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

    attachment


    attachment

    attachment

    attachment

    نستطيع أيضا استخدام هذه الوسوم مع أي فقرة سواء كانت نص أو صورة أو غيرها .. وبإمكانكم أن تجربوا بأنفسكم ..


    انتهت الدروس



    يتبع آخر شيء
    اخر تعديل كان بواسطة » AL EMPRATOOR في يوم » 22-06-2009 عند الساعة » 08:23

  4. #3

    أخيرا .. لدي بعض النقاط المهمة أقولها لكم :

    1- مارأيتموه من دروس كان مجرد دروس أساسية بدائية ، لأجل أن يكون عندكم تصور فقط .. وأنا عندي استعداد تام لمواصلة الدروس إلى تبدعوا أكثر .. ولكن ليس الان ، لان عندي أرتباط هذه الفترة بالمشروع الدعوي باليوتيوب .. بالاضافة الى الاختبارات ..
    2- تفضلوا هذا الرابط .. وفيه تجدون دروس أساسية إلى حد الاحتراف .. والشرح الذي فيه شرح بسيط ومفهوم تماما .. وسترون العجب العجاب عندما تدخلونه .. فتستطيعون إضافة أشياء لم أذكرها .. لان ما ذكرته هنا في الموضوع ماهو إلا أساسيات قليلة .. ليكون عندكم تصور قليل بعض الشيء عن تصميم صفحات الويب وكيفية إنشائها ..
    3- بعد أن تتعلم أساسيات كثيرة في هذه اللغة عن طريق المفكرة وكما عملنا .. تستطيع بعدها أن تختصر جهودك المتعبة فتستعين ببرنامج الفرونت بيج frontbage الموجود من ضمن برامج الاوفيس وهو برنامج لإنشاء صفحات الويب ، وهو برنامج يشبه في شكله برنامج Word .. فمثلا عندما تقوم بإدراج الصورة ، تجد أن الوسوم تدرج تلقائيا من غير أن تكتبها .. وبهذه تستطيع التحكم بسهولة أكثر في متصفحك .. وإذا أردت ان تعرف برمجتها وشكل الوسوم ، تقوم بالضغط على زر (( html )) بالبرنامج نفسه لترى كل ماذكرناه موجودا بطريقة أكثر تنظيم ..
    وباختصار .. تستطيع الاستعانة بالفرونت بيج بعد فهمك ودراستك للوسوم وطريقة كتابتها كما في الدروس التي أخذناها ، حتى يكون عندك إلمام اكثر .. وتستطيع الابداع في متصفحك أكثر ..

    أخيرا ..

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


    كود الـ PHP:
    <html>

    <
    head>
    <
    title>موقع الحسام اللامع</title>
    </
    head>


    <
    BODY background="http://www.khayma.com/hpinarabic/images/back1.jpg">

    <
    center> <font face="Traditional Arabic" color="#070707" size="7"آمل أن يحوز الموضوع على رضاكم وتقبلوا تحيات اخوكم الحسام اللامع  </font> </center>
    <
    br><br><br>
    <
    center> <img src"http://mexat.com/vb/attachment.php?attachmentid=826939&d=1243699656"> </img> </center>
    <
    br>
    <
    center> <a href="http://mexat.com/vb/index.php"> <b><font color="#070707">اضغط هنا للإنتقال لصفحة مكسات الرئيسية </font></b></a> </center>

    </
    body>
    </
    html
    ثم أدرجوه في المفكرة .. ثم قوموا بالحفظ وتحديث الصفحة .. وسيظهر لكم شيئا .. هو هديتي إليكم أحبتي ..

    دمتم في رعاية الله وحفظه ..
    أخوكم الحسام اللامع

  5. #4

  6. #5
    إقتباس الرسالة الأصلية كتبت بواسطة iii-yugi-iii مشاهدة المشاركة
    بارك الله فيك شرح وافي ورائع ^^

    والله انك افدتني ~

    ^^
    حياك الله اخوي .. شكرا شكرا على مرورك العطر .. ولكن هل شفت هديتي اليك ؟!!!

  7. #6
    تــسلم ع الـشرح الوفي ياوفي
    أڌاِ أصِبٌت فـﮱ أح'ـدِ أطـ'ـرِآفـﮱ ﯜ قِـررِ آلطِبـِيبَ بـٌتـرِﮧ
    سِـﯜفِ أبتـِرﮧ لـِﮕـﮯ أع'ـيشِ
    ﯕذلِـﮏ أنتَ ] فَمِن أسآء لـِـﮱ - فأبٌتـرِﮎ
    فأنِ آلح'ـيآةِ - لـآ تَـتَـﯡقِفِ ع'ـليِـﮏ '

  8. #7
    تعبت وانا اقرى
    لكن لي عوده واكون فيها رايقه مررررررررررررررررره
    واقرى واطبق

    ...................

    ولكن ما شاء الله عليك شاطر في كل شي
    واذا ماعليك تكلفه طلع موضوع كيف نسوي ايميلات

    ......................

    ومشكوووور يا خوي
    normal_trktne

  9. #8
    واو موضوع رائع جدا مشكور على الشرح الرائع والبسيط
    سبحان الله وبحمده سبحان الله العظيم
    أدعوا لي بالنجاح في الدراسه

  10. #9
    mmmmmerciiiiiiiiiiiiiiiiii
    كلمتآن خفيفتآن على اللسآن .. ثقيلتان في الميزان .. حبيبتاآن الى الرحمـن
    (( سبحآآن اللهـ وبحمده -سبحآن اللهـ العظيم ))
    لا اله الا الله محمد رسول الله[SIGPIC][/SIGPIC]

  11. #10
    مرحبا ايها اللامع
    فعلا انت لامع ماشالله عليك
    مجهود تشكر عليه
    تشكر جزيل الشكر
    وجزاك الله كل خير
    1209783998f0d4d752a70d5c17dc4769


    إلى آحدهم : ♡ لآ آعلم مآ أكتب لك ، لكنني افتقدك وآشتفت إليك جدآ

بيانات عن الموضوع

الأعضاء الذين يشاهدون هذا الموضوع

عدد زوار الموضوع الآن 1 . (0 عضو و 1 ضيف)

المفضلات

collapse_40b قوانين المشاركة

  • غير مصرّح لك بنشر موضوع جديد
  • غير مصرّح بالرد على المواضيع
  • غير مصرّح لك بإرفاق ملفات
  • غير مصرّح لك بتعديل مشاركاتك
  •  

مكسات على ايفون  مكسات على اندرويد  Rss  Facebook  Twitter