انتقلت منتديات لكِ النسائية إلى هذا الرابط:
منتديات لكِ النسائية
هذا المنتدى للقراءة فقط.


للبحث في شبكة لكِ النسائية:
الصفحة 1 من 2 12 الأخيرالأخير
عرض النتائج 1 الى 10 من 20

دورة HTML مجاناً .... ! * مُشارَكة متميّزة *

(ركن الكمبيوتر والإنترنت والتجارب - منتديات لكِ النسائية - الأرشيف)
...
  1. #1
    The Matrix's صورة
    The Matrix غير متواجد كبار الشخصيات "خبير حاسوب"
    تاريخ التسجيل
    Feb 2004
    الموقع
    قطر ( الدوحة ) بعيد عن أم الدنيا ( مصر )
    الردود
    7,497
    الجنس
    ذكر

    Exclamation دورة HTML مجاناً .... !





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

    مطلوب من كل الزوار : يجب عليكم تنفيذ هذا الدرس ووضعه في صفحة علي الأنتنرت ..
    وسنقوم بتصحيحة له ..و نعطي لكل متفوق وسام التفوق .

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


    يا أهلا ومرحبا بكل من أراد تعلم لغة HTML
    يا ترى ما هو السؤال الذي يراودك الآن ؟؟؟؟
    وبأي نقطة تود أن أبدأ بالشرح؟؟

    مهلا قبل أن تطرح أي سؤال ، وقبل أن تمر على كل الدروس ، ما هو معنى كلمة HTML؟
    من الطبيعي أن تعرف معناها ما دمت نويت تعلم هذه اللغة الرائعة السهلة .
    إن كلمة HTML هي اختصار لـ Hyper Text Markup Language
    ولغة HTML ليست كما تراها الآن أمام الشاشة ، بل هي عبارة عن رموز Tags<> ، ويوجد لكل رمز عمل معين يقوم به ليؤدي وظيفة ما .

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

    هل تحتاج لغة HTML إلى برنامج معين لكي اكتب فيه الرموز ؟
    لا تحتاج لغة HTML إلى برنامج معين بل كل ما تحتاجه هو في متناول اليد ، والذي هو عبارة عن محرر لكتابة النصوص مثل برنامج المفكرة Notepad ومتصفح لكي تظهر عليه النتيجة وترى ثمار تعبك والمتصفحات كثيرة ولكن أنصحك بانترنت اكسبلورر.

    هل هناك ملاحظة معينة قبل أن ابدأ بتعلم الدروس ؟
    نعم هنالك ملاحظة صغيرة ومهمة جدا جدا ، ألا وهي عند تخزين ملف HTML في المفكرة مثلا باسم lesson لا تنسى أن تخزنها بامتداد html أو htm>
    وهكذا اذهب بعدها للمتصفح وافتحه هناك لكي ترى النتيجة وبالطبع ليس شرطا أن تكون متصلا بالانترنت لكي ترى النتيجة .
    والآن هيا بنا ننطلق إلى الدرس لكي نرى أساسيات HTML .
    أهلاً وسهلاً بك إلى الدرس الأول من دروس HTML. سوف أقوم في هذا الدرس بسرد الوسوم الأساسية لصفحة الويب ومناقشتها معك واحداً تلو الآخر. لنصل في النهاية إلى إنشاء صفحة ويب بسيطة.

    لنأخذ الوسوم التالية:
    وسم البداية وسم النهاية
    <HTML> <‎/HTML>
    <HEAD> <‎/HEAD>
    <TITLE> <‎/TITLE>
    <BODY> <‎/BODY>
    ماذا تلاحظ؟ أن كل منها يتألف من زوج من الوسوم أحدهما وسم البداية، والآخر وسم النهاية. ويتميز وسم النهاية بوجود الرمز / . تأمل الرسم التالي، فهو يعطي فكرة عن تركيب ملف Html

    إذن فملف Html يبدأ دائماً بالوسم <HTML> وينتهي بالوسم <‎/HTML>. لا تنسى ذلك!
    أما الوسم <HEAD> فيحدد بداية المقطع الذي يحتوي على المعلومات الخاصة بتعريف الصفحة. كالعنوان الظاهر على شريط عنوان المتصفح. وهذا العنوان بدوره يحتاج لأن يوضع بين الوسمين: <TITLE> … <‎/TITLE> وبالطبع يجب كتابة الوسم <‎/HEAD> لكي ننهي هذا المقطع.
    نأتي إلى الوسم <BODY> والذي يتم كتابة نصوص صفحة الويب ضمنه، بالإضافة إلى إدراج الصور والجداول وباقي محتويات الصفحة. وهو أيضاً يحتاج إلى وسم الإنهاء <‎/BODY>
    ما رأيكم لو نبدأ بتطبيق هذه المعلومات بصورة عمليه؟ هيا… قم بفتح برنامج المفكرة واكتب ما يلي:
    <HTML>
    <HEAD>
    <TITLE>
    This is a test Webpage
    <‎/TITLE>
    <‎/HEAD>

    <BODY>
    Wow, I'm writing my first webpage
    <‎/BODY>
    <‎/HTML>
    والآن قم بحفظ ما كتبته في ملف وبأي اسم تختاره. ولا تنسى أن الامتداد المستخدم في أسماء ملفات HTML هو htm. أو html. مثلاً أنا اخترت الاسم ‎1st_file.htm ومن الأفضل أن تقوم بإنشاء مجلد مستقل على القرص الصلب لكي تحفظ به ملفاتك فهذا يسهل عليك عملية استرجاعها للعرض أو التحديث وليكن هذا المجلد مثلاً بالاسم C:\htmfiles (أو بأي اسم يحلو لك).
    حان وقت العرض، لكي نشاهد نتيجة ما كتبناه. قم بتشغيل متصفح الإنترنت الذي تستخدمه. فإذا كان Netscape Navigator اختر الأمر Open File… من قائمة File. أما في MS Internet Explorer فاختر الأمر Open… من قائمة File. ثم حدد المسار الذي يوجد به الملف. أنا شخصياً قمت بتحديد المسار التالي:
    C:\htmfiles\1st_file.htm
    وذلك طبعاً حسب الافتراضات السابقة التي اتبعتها عند تخزين الملف. وهذا ما حصلت عليه:

    وماذا عنك؟ هل حصلت على نفس النتيجة؟ إذن مبروك J لقد قمت بإنشاء أول صفحة ويب خاصة بك. (إلا، إذا لم تحصل على نفس النتيجة )
    وقبل أن نستمر أريد أن أنبهك إلى بعض الملاحظات عند كتابة صفحات الويب:
    •لا يوجد فرق بين كتابة الوسوم بالأحرف الإنجليزية الكبيرة UPPERCASE أو الأحرف الصغيرة lowercase. لذلك تستطيع الكتابة بأي شكل منهما أو حتى الكتابة بكليهما .
    •إن المتصفحات لا تأخذ بعين الاعتبار الفراغات الزائدة أو إشارات نهاية الفقرات (أي عندما تقوم بضغط مفتاح Enter) التي تجدها هذه المتصفحات في ملف Html. وبعبارة أخرى فإن باستطاعتك كتابة ملفك السابق بالشكل التالي:
    <HTML><HEAD><TITLE> This is a test Webpage </TITLE></HEAD><BODY>
    Wow, I'm writing my first webpage </BODY></HTML>‎
    أو بالشكل التالي:
    <HTML>
    <HEAD>
    <TITLE>
    This
    is a
    test
    Webpage
    <‎/TITLE>
    <‎/HEAD>
    <BODY>
    Wow,
    I'm
    writing
    my
    first
    webpage
    <‎/BODY>
    <‎/HTML>
    أو حتى بهذا الشكل:
    <HTML> <HEAD> <TITLE>
    This is a test Webpage
    <‎/TITLE>
    <‎/HEAD>
    <BODY>
    Wow, I'm writing my first webpage
    <‎/BODY>
    <‎/HTML>
    وفي كل الحالات ستحصل على نفس النتيجة. وإذا كنت من تلك النوعية من الناس التي لا تصدق كل ما يقال… تستطيع أن تجرب ذلك بنفسك!!! هيا جرب.

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

    والآن قد تتساءل، إذن كيف يمكن التحكم بمقدار النص المكتوب في كل سطر وكيف يمكن تحديد نهاية الفقرة وبداية الفقرة التي تليها؟ سؤال وجيه!!!
    والإجابة عليه هي: سوف نستخدم الوسم <BR> لتحديد النهاية للسطر. والبدء بسطر جديد (لاحظ أن هذا الوسم مفرد، أي ليس له وسم نهاية).
    ونعود إلى المثال السابق، قم بتعديل الملف لكي يصبح بالشكل التالي
    <HTML>
    <HEAD>
    <TITLE>
    This is a test Webpage
    <‎/TITLE>
    <‎/HEAD>
    <BODY>
    Wow, <BR> I'm writing my <BR>‎
    first webpage
    <‎/BODY>
    <‎/HTML>

    وهناك أيضا الوسم <P> الذي يقوم تقريباً بنفس عمل الوسم السابق أي أنه ينهي السطر أو الفقرة ويبدأ بسطر جديد لكن مع إضافة سطر إضافي فارغ بين الفقرات.
    المزيد عن هذا الوسم في الدرس الرابع الفقرات
    <HTML>
    <HEAD>
    <TITLE>
    This is a test Webpage
    <‎/TITLE>
    <‎/HEAD>
    <BODY>
    Wow, <P> I'm writing my <P>‎
    first webpage
    <‎/BODY>
    <‎/HTML>

    أما الفراغات فتعتبر رموزاً خاصة لذلك لا نستطيع التحكم بها وبعددها إلا باستخدام الوسم ‎& nbsp;‎ (والأحرف هي اختصار للعبارة Non Breakable Space). وإذا أردت إدخال عدة فراغات بين نص وآخر ما عليك إلا كتابة هذا الوسم بنفس عدد الفراغات المطلوب. كما يجب عليك التقيد بالأحرف الصغيرة هنا.
    إذن لنعد إلى المفكرة ونكتب ملفنا بالشكل التالي:
    <HTML>
    <HEAD>
    <TITLE>
    This is a test Webpage
    <‎/TITLE>
    <‎/HEAD>
    <BODY>
    Wow, &nbsp; &nbsp; &nbsp;‎
    I'm &nbsp; &nbsp; &nbsp;writing &nbsp; &nbsp;‎
    ‎&nbsp; my &nbsp; &nbsp; &nbsp; first &nbsp; &nbsp; &nbsp; webpage
    <‎/BODY>
    <‎/HTML>

    وبمناسبة الحديث عن الرموز الخاصة فهناك العديد من هذه الرموز والتي يجب أن تكتب بصورة معينة وباستخدام الوسوم وليس مباشرة بصورتها العادية. خذ مثلا إشارتي أكبر من وأصغر من وإشارة الاقتباس ". كل هذه الإشارات تستخدم أصلاً مع الوسوم فهي محجوزة ضمن مفردات لغة HTML ومن الخطأ استخدامها بصورتها الصريحة لئلا يؤدي ذلك إلى حدوث مشاكل في طريقة عرض الصفحة. كذلك فإن هناك رموزاً غير موجودة أساساً على لوحة المفاتيح كرمز حقوق الطبع © ورمز العلامة المسجلة ® ونحتاج إلى هذه الطريقة(طريقة الوسوم) لكتابتها. وإليك جدول ببعض هذه الرموز ووسومها المكافئة. وألفت نظرك إلى أنها تكتب كما هي في الجدول وبدون إشارتي <>
    وصلنا إلى النهاية... نهاية الدرس الأول. أتمنى أن تكون قد وجدت فيه من المتعة والفائدة .
    آخر مرة عدل بواسطة leema : 14-02-2004 في 12:49 AM





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

  2. #2
    غريبة الروح's صورة
    غريبة الروح غير متواجد "نجمة لكِ اللامعة " كبار الشخصيات
    تاريخ التسجيل
    Feb 2003
    الموقع
    في قلوب الأنقياء
    الردود
    6,635
    الجنس
    بارك الله فيك اخى الفاضل
    وجعل ما تقدمه هنا في ميزان حسناتك.

  3. #3
    lanloon's صورة
    lanloon غير متواجد كبار الشخصيات
    تاريخ التسجيل
    Sep 2003
    الموقع
    فلسطينيه بالغربه
    الردود
    5,572
    الجنس
    امرأة
    شكرا اخي و الله يجزيك الخير

  4. #4
    The Matrix's صورة
    The Matrix غير متواجد كبار الشخصيات "خبير حاسوب"
    تاريخ التسجيل
    Feb 2004
    الموقع
    قطر ( الدوحة ) بعيد عن أم الدنيا ( مصر )
    الردود
    7,497
    الجنس
    ذكر

    الدرس الثاني..HTML

    أهلا بكم في الدرس الثاني من دورة HTML

    هذا الدرس سيحوي أمورا تنظيمية أهملناها - عن قصد - في الدرس الأول .. لن نكتب اليوم صفحة جديدة , بل سنقوم بإضافة هذه الأكواد التنظيمية للصفحة التي كتبناها في الدرس الماضي ..
    * أفتح الصفحة التي حفظتها على هيئة صفحات الأنترنت ..
    * اذهب في متصفحك إلى view >> source .
    * ستظهر صفحة النوت باد التي كتبتها و التي هي أساس الصفحة ..
    * حاول خلق فراغ فوق كل الذي كتبته سابقا . ضع الماوس عند أول الكود و اضغط إنتر مرتين أو ثلاثة ..
    في هذه المرحلة من الدروس سوف نتعلم درس مهم جدا وممتع ألا وهو كيفية إضافة وإدراج أنواع من الخطوط وبأحجام مختلفة.
    والآن سوف تجد كل نوع من الخطوط مع الأمر الذي يجب أن تكتبه له .
    لكي تظهر لك العبارة في الوسط
    كما في المثال التالي
    * هنا سوف أتعلم كيفية إدراج الخطوط
    اكتب الأمر التالي
    <center>هنا سوف أتعلم كيفية إدراج الخطوط</center>

    * هنا سوف أتعلم كيفية إدراج الخطوط
    اكتب الأمر التالي
    <i>هنا سوف أتعلم كيفية إدراج الخطوط</i>

    * هنا سوف أتعلم كيفية إدراج الخطوط
    <b>هنا سوف أتعلم كيفية إدراج الخطوط</b>

    * هنا سوف أتعلم كيفية إدراج الخطوط
    <strike>هنا سوف أتعلم كيفية إدراج الخطوط</strike>

    * هنا سوف أتعلم كيفية إدراج الخطوط
    <u> هنا سوف أتعلم كيفية إدراج الخطوط</u>
    والآن ماذا عن حجم خط العناوين.....؟؟؟ الأمر بغاية السهولة ستجد الآن أنواع الأحجام مع الأمر الذي تكتبه له...واختر الذي يعجبك

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

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


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

    وبعد أن تعلمت كيفية التحكم بحجم الخط ، لا بد منك أن تتعلم كيفية تعيين نمط الخط الذي يعجبك، ومن الأفضل دائما أن تعين ثلاثة خطوط على الأقل ، وذلك لكي إذا وجد المتصفح صعوبة في إيجاد الخط الأول فهو ينتقل إلى الخط الثاني وهكذا
    ويتم ذلك من خلال هذا الأمر .
    <font face="Traditional Arabic, Arabic Transparent, Simplified Arabic">
    العبارات
    -------
    ------
    </font>

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





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

  5. #5
    The Matrix's صورة
    The Matrix غير متواجد كبار الشخصيات "خبير حاسوب"
    تاريخ التسجيل
    Feb 2004
    الموقع
    قطر ( الدوحة ) بعيد عن أم الدنيا ( مصر )
    الردود
    7,497
    الجنس
    ذكر

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

    أسمحوا لي بأن نقوم بعملة مراجعه سريعة علي ما سبق شرحه و الدخول في درس جديد ألا وهو الألوان ... تحياتي لكم
    يا ترى ما هي الفكرة التي أخذتها من الدروس السابقة التي كانت عبارة عن دردشة خفيفة في HTML؟
    أتمنى بالفعل أن تكونوا قد نويتم استكمال تعلم HTML ، والآن هيا بنا الآن لنشرح بطريقة عملية في HTML.
    ما هو التركيب الأساسي لأي ملف في HTML؟
    حينما تفتح المفكرة لكي تكتب فيها ، لا بد من أساس تطبق عليه كل الرموز، الأساس هو كالتالي:

    <html>
    <head>
    <title>
    هنا يكتب العنوان الذي سوف يظهر في شريط المتصفح
    </title>
    </head>
    <body>
    --------

    --------
    هنا نكتب كل ما نريد إدراجه في صفحات الموقع من صور ومواضيع
    --------
    --------
    </body>
    </html>

    والآن إليك هذا المثال البسيط :
    <html>
    <head>
    <title>
    صفحتي الأولى
    </title>
    </head>
    <body>
    ما زلت حتى الآن أتعلم الدرس الأول
    </body>
    </html>


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

    والآن ما هو الشيء الذي لم تتعلمه في الأساسيات؟؟؟
    إنها الفراغات وترك الأسطر، فلغة HTML لا تهتم بعدد الأسطر الفارغة التي تركتها ولا بعدد المسافات بين الكلمات ، فإذا كنت ترغب بترك سطر فهنالك وسم معين له ، وكذلك للفراغات .


    <br>
    يستخدم هذا الوسم لنهاية السطر والبدء بسطر جديد

    <p>
    يقوم هذا الوسم بنفس عمل الوسم السابق إلا انه يترك سطر فارغ بين الفقرات


    &nbsp;
    يقوم هذا الوسم بترك فراغ بين الكلمات ، وهو يمثل فراغ واحد وهكذا كلما كتبت هذا الوسم يترك فراغ واحد ولكن بالطبع فإنه ليس من الضروري كتابته بين كل كلمة وكلمة ، فتلقائيا سوف يترك فراغ بين الكلمات للتفريق بينها..ولكن هذا الوسم يستخدم إذا كنا نريد أكثر من فراغ واحد بين الكلمات



    و الآن إليك هذا المثال الذي سوف يوضح تلك الوسوم الثلاث التي تعلمتها الآن
    <html>
    <head>
    <title>
    صفحتي الأولى
    </title>
    </head>
    <body>

    تعلمت الآن كيفية ترك فراغات وسوف اترك أربعة فراغات باستخدام الأمر التالي &nbsp;&nbsp;&nbsp;&nbsp;

    والآن سوف انتقل إلى سطر جديد مع ترك سطر فارغ بهذا الأمر
    <p>
    والآن سوف انتقل إلى سطر جديد بدون ترك سطر فارغ
    وهكذا تعلمت تلك الوسوم الثلاث بكل سهولة
    </body>
    </html>



    والآن ما رأيك أن تطبق المثال السابق وترى بنفسك كيف سوف يظهر في متصفحك .
    و إرسالة لي حتى نري إبداعاتكم ..
    يا ترى ما الذي تريد تعلمه من هذا الدرس؟
    إنها الألوان وكيفية إدراجها كخلفية أو كلون للعبارات أو العناوين في صفحات الانترنت .
    في البداية هيا نتعلم كيفية إضافة لون كخلفية
    وهذا يأتي من خلال الأمر التالي :
    <body bgcolor=#ffffff>
    -------
    -------
    </body>
    ولقد استخدمت أنا اللون الأبيض وذلك من خلال الرمز ffffff كخلفية وهذا يأتي من الأمر السابق.
    وهكذا تستطيع اختيار لون الخلفية الذي يناسبك وتستبدله بذلك اللون الذي أنا اخترته مسبقا.
    ولكن تذكر دائما بأن تضع إشارة # قبل الرمز الذي اخترته لكي يتعرف المتصفح على اللون.
    إذن الآن تعلمت لون الخلفية فيا ترى ماذا عن لون العبارات والفقرات .
    انظر معي إلى هذا الأمر:

    <font color=#123123>

    ------
    ------

    </font>
    لقد تعاملنا مسبقا مع الرمز font ولكن هذه المرة أدخلنا كلمة color وهكذا اختر اللون الذي يعجبك وسوف ترى النتيجة بنفسك عند استخدامك لها .

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

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





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

  6. #6
    The Matrix's صورة
    The Matrix غير متواجد كبار الشخصيات "خبير حاسوب"
    تاريخ التسجيل
    Feb 2004
    الموقع
    قطر ( الدوحة ) بعيد عن أم الدنيا ( مصر )
    الردود
    7,497
    الجنس
    ذكر
    في هذا الدرس سوف نتعلم معا كيفية تنسيق الفقرات والقوائم
    وهنالك عدة أنواع للقوائم وسوف تتعلمها الآن معنا لتختار ما يناسبك .
    أولا: القوائم غير المتسلسلة
    Unordered Lists
    نفترض بأنك تريد أن تعدد المواد العلمية المقررة على القسم العلمي .


    القسم العلمي
    <ul>
    <li>الفيزياء
    <li>الكيمياء
    <li>الأحياء
    <li>الجيولوجيا
    </ul>

    وهكذا سوف يظهر لنا بهذه الطريقة .

    القسم العلمي
    •الفيزياء
    •الكيمياء
    •الأحياء
    •الجيولوجيا


    ثانيا: القوائم المتسلسلة
    Ordered Lists
    والآن في هذا النوع من القوائم سوف تتعلم كيفية كتابة قائمة متسلسلة كما في هذا المثال .
    المواد العلمية في القسم العلمي
    <ol>
    <li>الفيزياء
    <li>الكيمياء
    <li>الأحياء
    <li>الجيولوجيا
    </ol>
    سوف يظهر بهذه الطريقة.
    المواد العلمية في القسم العلمي
    1.الفيزياء
    2.الكيمياء
    3.الأحياء
    4.الجيولوجيا


    ثالثا: قوائم التعريفات
    Definition Lists

    في هذا النوع من القوائم نتعلم كيفية كتابة قائمة للكلمة وتعريفها .
    كما في هذا المثال :
    <dl>
    <dt>المواد العلمية في القسم العلمي
    <dd>الفيزياء
    <dd>الكيمياء
    <dd>الأحياء
    <dd>الجيولوجيا
    <dl>

    وسيكون بهذه الطريقة :
    المواد العلمية في القسم العلمي
    الفيزياء
    الكيمياء
    الأحياء
    الجيولوجيا



    والآن هيا معا نتعلم كيفية وضع حد فاصل بين الفقرات والجمل.
    ونستخدم لهذا الشيء الوسم
    <hr>

    ونستطيع التحكم في حجمه بعدة طرق.
    فهنالك خصائص نستطيع استعمالها مع ذلك الوسم لكي نزيد أو نقلل من حجمه وهذه الخصائص هي :
    width="رقم%"
    نستطيع ذكر رقم مئوي ليحدد حجم الحدود .

    width="رقم"
    نستطيع ذكر رقم ليحدد حجم الحدود.

    size="رقم"
    نستطيع ذكر رقم بالبيكسل ليحدد حجم الحدود.

    وأيضا تستطيع التحكم في اتجاه الحد سواء في الوسط أو اليمين أو اليسار بهذه الطريقة :
    align="center/right/left"

    وسوف أذكر لك عدة أمثلة لتتضح لك تلك الخصائص

    <hr width="40%">
    <hr width="41">
    <hr size="4">

    <hr width="50%" align="right">
    لقد تعلمت مسبقا في درس الجداول كيفية تنسيق الكلمة في خلايا الجدول لتكون في الوسط أو اليمين أو اليسار
    وسوف نستعمل معا نفس الوسم لكي ننسق الفقرات
    والوسم هو :
    <p>

    مع الخاصية
    Align
    وهي تحدد اتجاه الفقرة وسوف اذكر لك أمثلة لكي تتضح لك كل تلك الأمور:<p
    align="right">هنا موقع و منتدى لك من أفضل المنتديات العربية</p>

    موقع و منتدى لك من أفضل المنتديات العربية
    <p align="center">هنا موقع و منتدى لك من أفضل المنتديات العربية </p>

    موقع و منتدى لك من أفضل المنتديات العربية

    <p align="left"> موقع و منتدى لك</p>
    موقع و منتدى لك


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





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

  7. #7
    lilya غير متواجد عضو جديد
    تاريخ التسجيل
    Jan 2004
    الردود
    49
    الجنس
    بارك الله فيك

  8. #8
    أسيرة الغربة's صورة
    أسيرة الغربة غير متواجد درة العطاء - المشرفة العامة
    تاريخ التسجيل
    Sep 2000
    الموقع
    الرياض
    الردود
    23,982
    الجنس
    امرأة
    التدوينات
    2
    جهد كبير تستحق الشكر أخي الكريم ....ولغة ممتعة جدا فقد سبق لي ممارستها .

  9. #9
    The Matrix's صورة
    The Matrix غير متواجد كبار الشخصيات "خبير حاسوب"
    تاريخ التسجيل
    Feb 2004
    الموقع
    قطر ( الدوحة ) بعيد عن أم الدنيا ( مصر )
    الردود
    7,497
    الجنس
    ذكر
    السلام عليكم ورحمة الله وبركاته
    بسم الله الرحمن الرحيم
    أختنا : أسيرة الغربة
    شكرا علي ردك اللطيف . ومروك الكريم .
    أما بالنسبة لردك فأعتبرة من الأن وسام علي صدري .
    ومرور سيادتكم علي موضوعي . يعتبر شرف كبير جدااا.

    وشكرا .
    آخر مرة عدل بواسطة هنـــد : 17-02-2004 في 04:55 PM





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

  10. #10
    +هواجس+ غير متواجد عضو نشيط
    تاريخ التسجيل
    Nov 2002
    الموقع
    الإمارات العربية المتحدة
    الردود
    177
    الجنس
    امرأة
    بارك الله فيك ..


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

  1. ()()( كيف تنشر موقعك على الإنترنت :: شرح مصور )()() * مُشارَكة متميّزة *
    بواسطة هنـــد في ركن الكمبيوتر والإنترنت والتجارب
    الردود: 27
    اخر موضوع: 20-09-2009, 03:01 AM
  2. هام جدا الى كل عضوة او عضو في لكِ كيف تحمي نفسك(دروس خاصة)* مُشارَكة متميّزة *
    بواسطة ProFessionaL z في ركن الكمبيوتر والإنترنت والتجارب
    الردود: 27
    اخر موضوع: 30-06-2005, 03:57 AM
  3. شرح برنامج winrar لفك ضغط الملفات..! * مُشارَكة متميّزة *
    بواسطة صغيرونه في ركن الكمبيوتر والإنترنت والتجارب
    الردود: 8
    اخر موضوع: 24-12-2004, 04:11 PM
  4. جديد: لا تنس ذكر الله - الاصدار الثالث (برمجتي) * مُشارَكة متميّزة *
    بواسطة Wissam في ركن الكمبيوتر والإنترنت والتجارب
    الردود: 5
    اخر موضوع: 17-11-2004, 11:31 PM
  5. الردود: 50
    اخر موضوع: 20-01-2004, 02:53 PM

أعضاء قرؤوا هذا الموضوع: 0

There are no members to list at the moment.

الروابط المفضلة

الروابط المفضلة
لكِ | مطبخ لكِ | جمالكِ | طفلكِ | تحميل صور | تكرات | المجموعة البريدية | لكِ أطباق لاتقاوم

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96