صفحة 1 من 2 1 2 الأخيرةالأخيرة
النتائج 1 إلى 15 من 21

الموضوع: {[html]}الدرس الثالث إنشاء أول صفحة

  1. #1
    -{][ مدير التصاميم ][}- الصورة الرمزية احمد حسن
    تاريخ التسجيل
    Jun 2009
    العمر
    32
    المشاركات
    5,610
    معدل تقييم المستوى
    215245

    {[html]}الدرس الثالث إنشاء أول صفحة




    مع كل ما تعلمته في الدروس السابقة أصبحت الآن على بعد دقائق من إنشاء أول موقع لك.

    كيف؟

    في الدروس السابقة ألقينا نظرة على الأدوات التي نحتاجها لإنشاء موقع:
    متصفح وبرنامج المفكرة أو أي محرر نصي مماثل، وبما أنك تقرأ هذه الصفحة فأنت تستخدم الآن متصفحاً،
    ما تحتاجه الآن هو أن تفتح نافذة جديدة من المتصفح لكي تستطيع قراءة هذا الدرس بينما تستخدم النافذة الأخرى لترى فيها موقعك.
    أيضاً عليك أن تفتح برنامج المفكرة "Notepad" والذي ستجده في قائمة إبدأ ثم برامج ثم أدوات:





    أنت جاهز الآن!

    ماذا أفعل؟

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

    أول شيء عليك فعله هو أن تخبر المتصفح بأنك "ستتحدث" معه بلغة HTML، يمكنك فعل ذلك عن طريق وسم <html> لا توجد أي مفاجئة هنا، لذلك قبل أن تبدأ أي شيء أكتب "<html>" في أول سطر في برنامج المفكرة.

    كما تتذكر من الدروس الماضية، <html> هو وسم البداية ويحتاج إلى وسم إغلاق لذلك لا تنسى كتابة وسم الإغلاق بعد سطرين فارغين، وبقية الوثيقة ستكتبها بين <html> و</html>.

    الشيء التالي الذي تحتاجه صفحتك هو أمر رأس الصفحة "head" والذي يقدم معلومات حول الصفحة للمتصفح، وكذلك تحتاج إلى أمر "body" والذي سيحوي المحتويات التي تريد ان تضعها في الصفحة، أمر head أو رأس الصفحة (<head> و</head>) يوضع فوق أمر body أو "متن الصفحة" (<body> و</body>).
    صفحتك يجب أن تكون بهذا الشكل:



    كود HTML:
    <html>
     
      <head>
      </head>
     
      <body>
      </body>
     
    </html>
     


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

    إذا كانت صفحتك تشبه المثال أعلاه فقد قمت بإنشاء موقعك الأول، عملياً الموقع ممل ولا يحوي شيئاً وغالباً لن يكون الموقع الذي تحلم به عندما بدأت في قراءة هذا الدرس، مع ذلك هو موقع وما قمت بإنجازه الآن سيكون قالباً لبقية صفحات HTML التي ستكتبها في المستقبل.


    جميل, لكن كيف أضيف المحتويات للموقع؟

    كما تعلمت سابقاً، صفحة HTML تحوي جزئياً، رأس الصفحة ومتن الصفحة، في رأس الصفحة تكتب معلومات عن الصفحة نفسها، أما المتن فيضم المحتويات التي تشكل الصفحة..

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


    كود HTML:
    <title>موقعي الأول</title>


    لاحظ أن العنوان لن يظهر في الصفحة نفسها، أي شيء تريده أن يظهر في الصفحة يجب أن يضاف بين وسمي متن الصفحة

    كما قلنا سابقاً، نريد للصفحة أن تقول "مرحى! هذا هو موقعي الأول"، هذا النص الذي نريد وضعه في الصفحة، لذلك علينا أن نكتب في متن الصفحة ما يلي:

    كود HTML:
    <p>مرحى! هذا هو موقعي الأول.</p>
    الحرف p في <p> هو اختصار "paragraph" أو فقرة، وهو أمر بسيط لإنشاء فقرات نصية.

    صفحة HTML يجب أن تكون لديك بالشكل التالي:

    كود HTML:
    <html>
     
      <head>
      <title>موقعي الأول</title>
      </head>
     
      <body>
      <p>مرحى! هذا هو موقعي الأول.</p>
      </body>
     
    </html>
    انتهينا! لديك الآن أول موقع حقيقي!

    كل ما عليك فعله الآن هو حفظ الصفحة على القرص الصلب ثم عليك أن تستعرضها في متصفحك

    في برنامج المفكرة اختر "Save as..." من قائمة "File" في القائمة العلوية.اختر "All Files" في نافذة "Save as type". هذا مهم جداً، لأنك إن لم تفعل ذلك ستقوم بحفظه كملف نصي وليس كملف HTML.
    احفظ الصفحة باسم "page1.htm" الأحرف الثلاثة الأخيرة .htm تشير إلى أن الملف هو من نوع HTML، بإمكانك أن تحفظ تضع بدلاً منها ".html" وستكون النتيجة متماثلة، شخصياً أستخدم ".htm" دائماً، لكن بإمكانك أن تختار بينهما ما تشاء، فلا فرق بينهما، ولا يهم أين تحفظ الملف في القرص الصلب، ما دمت تتذكر أين حفظته لكي تستطيع إيجاده مرة أخرى.




    الآن إذهب إلى متصفحك:

    في القائمة العلوية اختر "Open" من قائمة "File".إضغط على "Browse" في النافذة التي ستظهر لك.إبحث عن الملف الذي قمت بإنشاءه واضغط على "Open".






    الآن يجب أن تحوي الصفحة جملة "مرحى! هذا هو موقعي الأول." تهانينا!


    ماذا تعلمنا حتى الآن؟

    إبدأ دائماً بالقالب الذي قمنا بإنشاءه سابقاً


    كود HTML:
    <html>
      <head>
      <title></title>
      </head>
     
      <body>
      </body>
     
    </html>
     

    في قسم رأس الصفحة اكتب دائماً العنوان: <title>عنوان صفحتك</title>. لاحظ كيف سيظهر العنوان في أعلى يسار نافذة المتصفح:


    سأكتب أنا عنوان الصفحة maxpclessons






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

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






    الآن أعد المحاولة وقم بفتح المفكرة مرة أخرى وأكتب فيها ما كتبته سابقا ولكن قم بإضافة أي شيء في متن الصفحة body عن طريق الوسم <p>

    سأكتب أنا مثلا قسم لغات البرمجة


    كود HTML:
    <html>
      <head>
      <title>maxpclessons</title>
      </head>
      <body>
        <p>قسم لغات البرمجة</p>
      </body>
    </html>

    لاحظ الصورة التالية






    تذكر أن الطريقة الوحيد لتعلم HTML هي بالتجربة والخطأ، لكن لا تقلق، لا يمكنك بأي طريقة أن تدمر حاسوبك أو الإنترنت! لذلك استمر في التجربة، هذه هي أفضل طريقة لاكتساب الخبرة.

    ماذا يعني هذا؟

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

    لذلك قم بتجربة ما تعلمته حتى الآن.

    ما التالي؟

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


    هذا يكفي سنتكلم في الدرس القادم عن الأنماط الأساسية والخطوط والألوان ...







    [ Everyday ...I hope to learn today ... More than yesterday ]
    [ كل يوم أتمنى أن أتعلم أكثر من الأمس ]



  2. #2
    المُنـــــــــــاضــــل الصورة الرمزية المفكر الفطن
    تاريخ التسجيل
    Jun 2007
    المشاركات
    2,230
    معدل تقييم المستوى
    82

    جـــــــزاك الله الخير على معلوماتك القيمة أيها التقني الفـــذ


    دائماً تتحفنا بالجديد والمفيد وهــذا ليس بغريب عليك



    ألــف شكر


  3. #3
    لجفة الصورة الرمزية فراشة
    تاريخ التسجيل
    Sep 2003
    المشاركات
    1,196
    معدل تقييم المستوى
    47

    جزاك الله كل خير اخي ماكس على الدرس الممتع

    " اللهم إجعلنا خير مما يظنون ..وإغفر لي مما يعملون ..ولا تأخذني مما يقولون... "


    [flash=http://dc03.arabsh.com/i/01751/5vx3cejah516.swf]WIDTH=500 HEIGHT=360[/flash]

  4. #4
    صانع للمجد متميز الصورة الرمزية مجردانسان
    تاريخ التسجيل
    Jul 2009
    العمر
    34
    المشاركات
    738
    معدل تقييم المستوى
    29

    الف شكر اخوي ماكس على الدرس

    والشرح الممتع

    انا ما تركت الدرس لين ما خلصته للآخر من متعة الشرح المبسط

    تسلم اخوي

    وربنا يجعله في ميزان حسناتك

    وهذه تطبيقي



    أرجوا أن يكون جيدا

    ومنتظر الدرس التالي


  5. #5
    احاسيس طفله الصورة الرمزية طفلهـ بأحاسيسيـ
    تاريخ التسجيل
    May 2009
    العمر
    29
    المشاركات
    3,673
    معدل تقييم المستوى
    153

    بصراحه اسعدني قراءة هالدرس

    تنفع مدرس ف كليه ^^

    بالتوفيق خيو ^^

    .
    .
    .
    .
    .



    .
    .
    .
    .
    .

  6. #6
    -{][ مدير التصاميم ][}- الصورة الرمزية احمد حسن
    تاريخ التسجيل
    Jun 2009
    العمر
    32
    المشاركات
    5,610
    معدل تقييم المستوى
    215245

    المفكر الفطن
    فرشة
    مجرد انسان
    طفلة باحاسيسي
    اشكركم جميعا على المرور
    متابعتكم تحفزني لبذل المزيد من الجهد







    [ Everyday ...I hope to learn today ... More than yesterday ]
    [ كل يوم أتمنى أن أتعلم أكثر من الأمس ]



  7. #7
    صانع للمجد جديد الصورة الرمزية عـبـيـر
    تاريخ التسجيل
    Aug 2007
    المشاركات
    160
    معدل تقييم المستوى
    15

    شكرا لك أخوي على الدرس

    وهذا تطبيقي


  8. #8
    -{][ مدير التصاميم ][}- الصورة الرمزية احمد حسن
    تاريخ التسجيل
    Jun 2009
    العمر
    32
    المشاركات
    5,610
    معدل تقييم المستوى
    215245

    اقتباس المشاركة الأصلية كتبت بواسطة عـبـيـر مشاهدة المشاركة
    شكرا لك أخوي على الدرس


    وهذا تطبيقي


    عشتي أختي
    تطبيق 10/10
    بالتوفيق إن شاء الله دائما







    [ Everyday ...I hope to learn today ... More than yesterday ]
    [ كل يوم أتمنى أن أتعلم أكثر من الأمس ]



  9. #9
    نائب رئيس المشناعة الصورة الرمزية M!XmAn
    تاريخ التسجيل
    Mar 2008
    المشاركات
    5,979
    معدل تقييم المستوى
    863342

    جـــــــزاك الله الخير على معلوماتك القيمة يا أستاذي ماكس


  10. #10
    صانع للمجد رمز للعطاء والمثابرة
    تاريخ التسجيل
    Jun 2009
    المشاركات
    2,654
    معدل تقييم المستوى
    126

    طبقت بس طلع لي صفحة فاضية !!!

    ان شاء الله بجرب مرة ثانية اليوم بوقت آخر ،،

    ألف شكر لك ،،


  11. #11
    صانع للمجد رمز للعطاء والمثابرة
    تاريخ التسجيل
    Jun 2009
    المشاركات
    2,654
    معدل تقييم المستوى
    126

    هذا التطبيق اللي سويته ايش فيه خطأ ؟



    لأني يوم حفظته وفتحته طلع لي صفحة فاضية مثل ما ذكرت أول ،،


  12. #12
    -{][ مدير التصاميم ][}- الصورة الرمزية احمد حسن
    تاريخ التسجيل
    Jun 2009
    العمر
    32
    المشاركات
    5,610
    معدل تقييم المستوى
    215245

    اقتباس المشاركة الأصلية كتبت بواسطة m!xman مشاهدة المشاركة
    جـــــــزاك الله الخير على معلوماتك القيمة يا أستاذي ماكس
    أشكرك على المرور







    [ Everyday ...I hope to learn today ... More than yesterday ]
    [ كل يوم أتمنى أن أتعلم أكثر من الأمس ]



  13. #13
    -{][ مدير التصاميم ][}- الصورة الرمزية احمد حسن
    تاريخ التسجيل
    Jun 2009
    العمر
    32
    المشاركات
    5,610
    معدل تقييم المستوى
    215245

    اقتباس المشاركة الأصلية كتبت بواسطة صبا ..~ مشاهدة المشاركة
    هذا التطبيق اللي سويته ايش فيه خطأ ؟



    لأني يوم حفظته وفتحته طلع لي صفحة فاضية مثل ما ذكرت أول ،،

    أقولك إيش خطأك وهو المسافات بين الكلمات والوسوم
    يجب أن يكون الكود الصحيح كالتالي
    كود HTML:
    <html>
      <head>
        <title>موقعي الأول<title/>
      <head/>
      <body>
        <p>مرحى هذا موقعي الأول<p/>
      <body/>
    <html/>







    [ Everyday ...I hope to learn today ... More than yesterday ]
    [ كل يوم أتمنى أن أتعلم أكثر من الأمس ]



  14. #14
    صانع للمجد رمز للعطاء والمثابرة
    تاريخ التسجيل
    Jun 2009
    المشاركات
    2,654
    معدل تقييم المستوى
    126

    اهاااااا ،،

    الحين بجرب مرة ثانية ،،


  15. #15
    صانع للمجد رمز للعطاء والمثابرة
    تاريخ التسجيل
    Jun 2009
    المشاركات
    2,654
    معدل تقييم المستوى
    126

    ما نفع طلع صفحة فاضية

    وهذا تطبيقي هل فيه غلط الحين ؟


صفحة 1 من 2 1 2 الأخيرةالأخيرة

ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •