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

الموضوع: الدورة رقم 1 لغة (html)

  1. #1
    عضو
    تاريخ التسجيل
    Dec 2005
    المشاركات
    687
    معدل تقييم المستوى
    13

    الدورة رقم 1 لغة (html)



    بسم الله الرحمن الرحيم
    في هذه الدورة سنتعرف كيف يمكن لنا القيام بتصميم موقع بإستخدام لغة html
    وهي لغة سهلة ورائعة وضرورية للجميع ولا يمكن اتقان اللغات المتقدمة بدون ان يتم احتراف هذه اللغة البسطية والسهلة ..
    المطلوب برنامج تحرير الصفحات وانا سأستخدم برنامج Expression Web 2007

    ارجو مراجة مقال معلومات اكثر عن هذا القسم
    كما أرجو وضع اي استفسار في مناقشة الدورة الأولى

    بسم الله نبدأ
    فهرس الدورة الاولى
    - نقاط سريعة المشاركة رقم 2
    - تجربة عملية المشاركة رقم 3
    - ماذا يحدث بالضبط داخل الجهاز المشاركة رقم 4
    - بعض الأسئلة المفيدة للمتدئين مشاركة رقم 5
    -مكونات HTML مشاركة رقم 6
    - الـAttributes المشاركة رقم 7
    - صورة بسيطة عن البرنامج المشاركة رقم 8
    - المزيد من الوسوم المشاركة رقم 9 + 10
    - إضافة الصور المشاركة رقم 11
    - كيفية إضافة الروابط المشاركة رقم 13
    - وسائل الإدخال بلغة الـhtml المشاركة رقم 14
    - أشكال متعددة للـForms المشاركة رقم 15

    تم الإنتهاء من هذه الدورة
    سيتم البدء بدور جافا سكريبت ..
    قد يتم إضافة المزيد .

  2. #2
    عضو
    تاريخ التسجيل
    Dec 2005
    المشاركات
    687
    معدل تقييم المستوى
    13

    ما هو ملف الhtml

    نقاط سريعة ..

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

  3. #3
    عضو
    تاريخ التسجيل
    Dec 2005
    المشاركات
    687
    معدل تقييم المستوى
    13

    رد: الدورة رقم 1 لغة (html)

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

    كود PHP:
    <html>
    <
    head>
    <
    title>Title of page</title>
    </
    head>
    <
    body>
    This is my first homepage. <b>This text is bold</b>
    </
    body>
    </
    html
    احفظ هذه البيانات بأي اسم على ان يكون له امتداد .html
    يمكن تخزين الصفحة بإسم mypage.htm او اي اسم آخر .

    شرح جمل الHtml السابقة

    - الوسم هو كل ما يكون شكله على <????> وهذا الوسم له وظيفة معينة يؤديها في المستعرض كإظهار النص بلون معين أو تغير نوع الخط للنص أو إظهار عنوان الصفحة أو رسم جدول معين.
    - بداية الوسم تكون على الشكل <؟؟؟؟> والنهاية للوسم يكون <????/>
    - الجمل التي كانت بين <head> و الوسم <head/> هي الجمل الرأسية وهذه الجمل لا تظهر في المستعرض.
    - العبارة Title of page الموجود بين الوسم <title> و الوسم <title/> سوف تظهر على الشريط العلوي وكل ما يأتي في الوسم <title> سيظهر في الشريط العلوي للمستعرض .
    - الجمل التي بين وسم ال<body> هي الجمل التي ستظهر في مستعرض صفحات الإنترنت.
    - الجمل التي بين <b> والوسم <b/> تعني أن النص الذي يقع في منصف هذه الوسوم سيظهر باللون الغامق .

  4. #4
    عضو
    تاريخ التسجيل
    Dec 2005
    المشاركات
    687
    معدل تقييم المستوى
    13

    رد: الدورة رقم 1 لغة (html)

    ماذا يحدث بالضبط داخل الجهاز

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

    الوسوم الواقعة في منطقة <head> وهي المعلومات التي تظهر في رأس السفحة وتظهر في الشريط العلوي تماما .

    الوسم <title> يخبر المستعرض بكتابة النص في الشريط العلوي تماما.

    الوسم <body> المسؤول عن كل ما يظهر في صفحة الإنترنت ..

  5. #5
    عضو
    تاريخ التسجيل
    Dec 2005
    المشاركات
    687
    معدل تقييم المستوى
    13

    رد: الدورة رقم 1 لغة (html)

    إذا كانت هذه المرة الأولى لك في كتابة html فهذه إجابات ضرورية لك

    س: بعد أن كتبت الصفحة وخزنتها، لم يظهر شيء؟
    تأكد تماماً انك قد خزنت الصفحة بإسم مقبول وان يكون على شريط الرابط العنوان الصحيح لصفحة الإنترنت مثل c:\first_page.htm.

    س: لقد قمت بالتعديل على الصفحة، ولكن التعديل لم يظهر؟
    بالتأكيد التعديلات سوف تظهر عند الضغط على زر تحديث الصفحة بعد التعديلات.

    س: ما نوع المتصفح الذي يجب أن أستخدمه؟
    [COLOR="RoyalBlue"] لا يهم نوع المتصفح، جميع انواع المتصفحات تؤدي المهمة في التدريب.[/
    COLOR]

    س: هل هذه الدورة فقط لنظام ويندوز، ما هو حال الMac؟
    يمكنك ان تقوم بهذه الدورة على نظام الMac بنفس الطريقة.

  6. #6
    عضو
    تاريخ التسجيل
    Dec 2005
    المشاركات
    687
    معدل تقييم المستوى
    13

    رد: الدورة رقم 1 لغة (html)

    مكونات HTML

    يوجد هناك منطقة الhead ومنطقة الbody
    منطقة الhead التي تبدأ بوسم البداية <head> والتي تنتهي بوسم النهاية <head/>
    منطقة الbodu التي تبدأ بوسم البداية <body> تنتهي بوسم النهاية <body/>

    وقد بينت الفرق بين هذه المناطق بال head الجزء العلوي مثل الشريط العلوي جدا والذي يكتب عليه اسم الصفحة أما بجزء الbody فيظهر جميع ما يمكن ان تراه في الصفحة من نصوص وألوان وجداول وبيانات متعددة.

    سوف نأخذ الوسم التالي


    <b>This text is bold</b>


    عنصر الhtml يبدأ بـوسم البداية مثل <b>
    اما محتوى عنصر الhtml في جملة الhtml السابقة هو This text is bold
    اما عنصر الhtml ينتهي بوسم النهاية مثل <b/>
    أما الهدف من هذه الجملة هو أن يظهر النص This text is bold بالغط العريض.
    (يمكنك التجربة بوضع هذه الجملة في منطقة الbody).

  7. #7
    عضو
    تاريخ التسجيل
    Dec 2005
    المشاركات
    687
    معدل تقييم المستوى
    13

    رد: الدورة رقم 1 لغة (html)

    ال Attributes

    وهي صفات تكتب داخل وسم البداية لتوضيح بعض الخصائص للوسم مثل اللون او الحجم ...
    مثل

    <body bgcolor= "blue" > </body>

    فالـ Attributes هو bgcolor ومهمة هذا الـAttributes تحديد لون خلفية الشاشة
    أما كلمة blue التي جائت بين " " فهي لون الخلفية وهو اللون الأزرق.
    يمكنك الان التجربة ووضع صفة bgcolor في صفحة الإنترنت التي قمت بتخزينها مسبقا واستبدل القيمة blue بالقيم التالية yellow red green وشاهد الفرق.

  8. #8
    عضو
    تاريخ التسجيل
    Dec 2005
    المشاركات
    687
    معدل تقييم المستوى
    13

    رد: الدورة رقم 1 لغة (html)

    صورة (صورة عن برنامج بسيط جدا).




    اخذت هذه الصورة وانا اجهز الدورة بواسطة برنامج Microsoft Expression Web

  9. #9
    عضو
    تاريخ التسجيل
    Dec 2005
    المشاركات
    687
    معدل تقييم المستوى
    13

    رد: الدورة رقم 1 لغة (html)

    المزيد من الوسوم

    اعتقد الان قد اصبح لديك معلومات جيدة حول ترتيب صفحة الـHtml والان سنتحدث عن المزيد من الوسوم ولكن يجب ان تكون قد طبقت ما سبق بطريقة عملية ...

    وسم الـHeadings
    يمكن تعريف وسم العناوين بواسطة <h1> وهذا يعني ان يكون محتوى هذا الوسم عنوان وهناك 6 درجات لهذا الوسم من الرقم 1 حتى الرقم 6 .

    وسم الفقرة <p>
    يجب التميز بين الفقرات بالوسم <p> وهذا لضمان ترتيب وجمال الصفحة.

    وسم ال سطر جديد <br>
    يمكنك استعمال هذا الوسم عندما تريد الكتابة على سطر جديد دون انهاء الفقرة .

    أما الصورة التالية توضح لنا المزيد




    والصورة التالية هي عند الإستعراض على متصفح الإنترنت


  10. #10
    عضو
    تاريخ التسجيل
    Dec 2005
    المشاركات
    687
    معدل تقييم المستوى
    13

    رد: الدورة رقم 1 لغة (html)

    المزيد من الوسوم مع تعريفها

    يجب تجربتها بشكل عملي

    <b> كتابة نص غامق
    <big> كتابة نص كبير
    <i> كتابة نص مائل
    <small> كتابة نص صغير
    <strong> كتابة نص مميز
    <sub> النص يكون على مستوى اقل في السطر
    <sup> النص يكون على مستوى اعلى من السطر
    <ins> وضع سطر اسفل الكلمة
    <u> نفس الدالة السابقة وضع خط اسفل الكلام
    <del> وضع الكلام على هيئة حذف
    <s> نفس الدالة السابقة وضع خط في منتصف الكلمة
    <strike> نفس الدالة السابقة وضع خط اسفل الكلمة


    <code> كتابة النص على شكل كود برمجي
    <kbd> كتابة نص بنفس الخط الاساسي للكيبورد
    <samp> كتابة نص برمجي بسيط
    <tt> كتابة نص بخط الطابة
    <var> كتابة نص على شكل متغير

    <abbr> كتابة نص على شكل مختصر
    <address> كتابة النص على شكل عنوان
    <bdo> كتابة نص الإتجاهات
    <blockquote> كتابة نص مقتبس
    <q> نفس التعريف السابق

  11. #11
    عضو
    تاريخ التسجيل
    Dec 2005
    المشاركات
    687
    معدل تقييم المستوى
    13

    رد: الدورة رقم 1 لغة (html)

    إضافة صورة

    - يمكن إضافة الصورة للصفحة بواسطة الوسم <img> الخاص بالصور.
    - الوسم <img> وسم فارغ بمعنى لا يتم إضافة محتوى له وليس له نهاية.
    - من أحد الصفات(الـattribute) الخاصة بالوسم <img> الصفة src المسؤولة عن تحديد مكان الصورة.
    - يمكن الكتابة بهذا الشكل <img src="url"> حيث يجب استبدال "url" بمكان الصورة ولا تنسى ان يكون مكان الصورة بين " ".

    مثلا السطر التالي
    <img src="images/arabsoftware_up_01.gif">
    هو إضافة للصورة على الصفحة التي اسمها arabsoftware_up_01.gif ومكانها في المجلد images وهذا المجلد الاخير يوجد في نفس المجلد التي تم تخزين الصفحة فيه

    الصورة التالية توضح اكثر



    وهذه الصورة عند التفيذ على متصفح الويب

  12. #12
    عضو
    تاريخ التسجيل
    Dec 2005
    المشاركات
    687
    معدل تقييم المستوى
    13

    رد: الدورة رقم 1 لغة (html)

    المزيد عن الصور

    في هذا السطر <body background="background.jpg">
    هو جعل الصورة background.jpg خلفية الشاشة

  13. #13
    عضو
    تاريخ التسجيل
    Dec 2005
    المشاركات
    687
    معدل تقييم المستوى
    13

    رد: الدورة رقم 1 لغة (html)

    كيفية إضافة الروابط
    الروابط أو Links هي العبارات التي تنقلنا من صفحة لصفحة عند الضغط عليها..
    ويمكن إضافة الرابط بواسطة الوسم <a>.
    وهناك عدة أشكال للروابط
    والكود التالي يوضح شكل الرابط
    كود:
    <a href="www.arabsoftware.net">Arab Software Web site</a>
    يتم وضع الرابط في الصفة (الـAttributes) href
    في الكود البرمجي السابق
    الرابط الذي سيتم الإنتقال له هو www.arabsoftware.net
    والعبارة التي ستظهر على الشاشة للمستخدم Arab Software Web site

    أما كيفية اضافة رابط في صورة
    يتم جعل الصورة كرابط عند الضغط عليها تنقلنا لصفحة أخرى كما المثال التالي
    كود:
    <a href="lastpage.htm">
    <img border="0" src="buttonnext.gif" width="65" height="38">
    </a>
    قد تم في المثال السابق إضافة وسم الصورة بدلا في منطقة ما سيظهر على الشاشة من الرابط

  14. #14
    عضو
    تاريخ التسجيل
    Dec 2005
    المشاركات
    687
    معدل تقييم المستوى
    13

    رد: الدورة رقم 1 لغة (html)

    وسائل الإدخال المختلفة الـForms
    الForms هي المنطقة التي تتيح للمستخدم ادخال معلومات مختلفة وهناك عدة انواع مثل
    منطقة ادخال النص textarea fields، القائمة المنسدلة drop-down menus، تحديد خيار من عدة خيارات radio buttons، تحديد عدة خيارات checkboxes، إداخال كلمة سر أو نص ظاهر.

    الصورة التالية توضح كيف يمكنك استعمال جميع وسائل الادخال بواسطة اكسبريشن ويب أو مايكروسوفت اوفس شير بوينت


    يكون عادة الشكل البرمجي للـForms
    كود:
    <form>
      <input>
      <input>
    </form>
    ملاحظات من الكود السابق ..
    نبدأ الفورم بواسطة الوسم <form>
    الوسم <input> هو احد وسائل الإدخال المختلفة .
    يمكن وضع (وسيلة ادخال واحدة)<input> أو اكثر في الفورم الواحد.

  15. #15
    عضو
    تاريخ التسجيل
    Dec 2005
    المشاركات
    687
    معدل تقييم المستوى
    13

    رد: الدورة رقم 1 لغة (html)



    أشكال متعددة من الـForms
    هناك اشكال متعددة من الفورم لمعظم وسائل الادخال
    مثلا الـText Fields
    هذه الوسيلة تستخدم في ادخال اسم مستخدم أو ادخال الإسم الأول او الإسم الاخير
    ضع الكود التالي في الفورم لديك وشاهد النتيجة
    كود:
    <input type="text" name="firstname">
    وسيلة الإدخال Radio Buttons
    تستخدم عند الخيارات المتعددة التي لا تقبل إلا اجابة واحدة مثل الجنس (ذكر أم انثى)
    ضع الكود التالي في صفحتك السابقة وشاهد النتيجة
    كود:
    <form>
    <input type="radio" name="sex" value="male"> Male
    <br>
    <input type="radio" name="sex" value="female"> Female
    </form>
    وسيلة الإدخال Checkboxes
    والتي تستخدم عند الخيارات التي تقبل أكثر من إجابة مثل اختر خمسة اسماء مجلات تحبها من عشرة مجلات
    ضع الكود التالي في صفحتك وشاهد النتيجة
    كود:
    اختر اسماء المجلات التي تحبها
    <form>
    مجلة عرب سوفتوير 
    <input type="checkbox" name="vehicle" value="ArbS" />
    <br />
    مجلة عرب هاردوير 
    <input type="checkbox" name="vehicle" value="ArbH" />
    <br />
    مجلة بي سي مجازين
    <input type="checkbox" name="vehicle" value="PcM" />
    </form>

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

المواضيع المتشابهه

  1. تعليم لغة Html فيديو Lynda.com - HTML
    بواسطة seragsamy في المنتدى البرمجه والتصميمات الفنيه ( الجرافيكس )
    مشاركات: 4
    آخر مشاركة: 11-05-2013, 23:05
  2. دورة HTML : شرح إنشاء ملف إتش تي أم ال - how to create HTML File
    بواسطة عالم البرمجة في المنتدى البرمجه والتصميمات الفنيه ( الجرافيكس )
    مشاركات: 1
    آخر مشاركة: 17-03-2013, 13:15
  3. دورة HTML - شرح الأكواد الرئيسية داخل ملف HTML ( head,body,html )
    بواسطة عالم البرمجة في المنتدى البرمجه والتصميمات الفنيه ( الجرافيكس )
    مشاركات: 2
    آخر مشاركة: 26-03-2012, 01:09
  4. الدورة الكاملة ل Oracle 10g
    بواسطة flashking في المنتدى البرمجه والتصميمات الفنيه ( الجرافيكس )
    مشاركات: 14
    آخر مشاركة: 16-06-2010, 12:22
  5. الدورة رقم 2 لغة (JavaScript)
    بواسطة mzaila في المنتدى البرمجه والتصميمات الفنيه ( الجرافيكس )
    مشاركات: 7
    آخر مشاركة: 02-08-2007, 21:32

الكلمات الدلالية لهذا الموضوع

المفضلات

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

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