النتائج 1 إلى 15 من 15

الموضوع: {[html]}الدرس الرابع الأنماط الأساسية والخطوط

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

    {[html]}الدرس الرابع الأنماط الأساسية والخطوط




    الأنماط الأساسية :

    أولا: العناوين وهي من ست مستويات ، الأول h1 والثاني h2 والثالث h3 ... والسادس h6

    كود HTML:
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>
    وستكون النتيجة كالتالي
    Heading 1
    Heading 2
    Heading 3
    Heading 4
    Heading 5
    Heading 6
    ************************************************** ****************************

    تكملنا في الدرس السابق عن الوسم P

    كود HTML:
    <p>فقرة نصية</p>
    والنتيجة
    فقرة نصية
    ************************************************** ****************************
    هيا لنجرب معا ما سبق من خلال المثال التالي:

    كود HTML:
    <html>
     
      <head>
      <title>منتديات ظفار المجد</title>
      </head>
     
      <body>
      <h1>قسم لغات البرمجة</h1>
      <p>يهتم بدروس ولغات البرمجة</p>
      <h2>الدرس الأول:مقدمة في html</h2>
      <p>ماهي html ؟ومتى أخترعت؟ ولماذا؟</p>
      </body>
     
    </html>
     
    الآن قم بحفظ الصفحة كما كنا نفعل في الدرس الماضي ومن ثم استعرضها في متصفحك وستكون النتيجة الآتي



    ************************************************** ****************************
    لتحدد اتجاه الفقة استخدم الخاصية align في الوسم p


    كود HTML:
    <html>
     
      <head>
      <title>منتديات ظفار المجد</title>
      </head>
     
      <body>
      <p align="left">فقرة جهة اليسار</p>
      <p align="center">فقرة في الوسط</p>
      <p align="right">فقرة جهة اليمين</p>
      </body>
     
    </html>
    والنتيجة



    ************************************************** ****************************

    الوسم Font

    يعمل الوسم font دائما مع مجموعة من الخصائص فهو لا يمتلك أي تأثير لوحده ، وأهم خصائصه هي التي تحدد نوع الخط والتي تحدد لونه والتي تحدد حجمه.

    أول خصائص الوسم font هي الخاصية face الي تحدد نوع الخط المستخدم

    كود HTML:
    <font face="verdana">Verdana Text</font><br />
    <font face="Courier New">Courier New Text</font>
    ************************************************** ****************************
    وبعد ذلك هنالك الخاصية color المستخدمة لتحديد لون الخط

    كود HTML:
    This is <font color="red">Red</font>and this is <font color="blue">Blue</font>
    ************************************************** ****************************
    هيا لنجرب ما سبق

    كود HTML:
    <html>
     
      <head>
      <title>نوع الخط</title>
      </head>
     
      <body>
      <font face="verdana">Verdana Text</font><br />
      <font face="Courier New">Courier New Text</font><br />
      This is <font color="red">Red</font>and this is <font color="blue">Blue</font>
      </body>
     
    </html>
    ستكون النتيجة كالتالي


    ************************************************** ****************************
    الخاصية الثالثة هي الخاصية size وهي تحدد حجم الخط ، توجد سبعة أحجام للخط ، والخط الأساسي في الصفحة يأخذ أحد هذه الأحجام وإذا أردت أن تغير حجم الخط في كلمة معينة أو جزء ما من النصوص استخدم الوسم font مع الخاصية size لزيادة حجم الخط أو إنقاصه بمقدار معين ،
    إذا كان الخط الأساسي هو 3 فإنه يمكنك زيادة الخط 4مرات حتى تصل إلى 7 وهو أكبر خط ويمكنك إنقاصه مرتين ليصبح 1 وهو أصغر حجم للخط
    الخط الأساسي القياسي هو 3 ما لم تقم بتغيره ، يتم تحديد أثر الرقم من حيث الزيادة أو النقصان بإضافة + قبل الرقم للزيادة و - قبل الرقم للنقصان
    ملاحظة : عند الزيادة فوق الرقم 7 سيعرض المتصفح النص بالحجم 7 وكذلك عند النقصان إلى أقل من 1 فسوف يتم اعتباره 1

    كود HTML:
    <html>
     
      <head>
      <title>حجم الخط</title>
      </head>
     
      <body>
      </ font size="+4">Size 7</font><br>
      </ font size="+3">Size 6</font><br>
      </ font size="+2">Size 5</font><br>
      </ font size="+1">Size 4</font><br>
      </ font size="0">Size 3</font><br>
      </ font size="-1">Size 2</font><br>
      </ font size="-2">Size 1</font><br>
      </body>
     
    </html>
    ************************************************** ****************************
    توجد طريقة سريعة لتكبير الخط خطوة واحدة أو تصغيره خطوة واحدة باستخدام الوسم <small>و<big>

    كود HTML:
    <html>
     
      <head>
      <title>تصغير الحجم وتكبيره بخطوة واحدة</title>
      </head>
     
      <body>
      <big>size 4</big><br>
      <small>size 2</small><br>
      <big><big>size 5</big></big><br>
      </body>
     
    </html>
    ************************************************** ****************************
    الطرق السابقة لتغيير الخط هي طرقا نسبية relative لأنك تقوم بتغيير الخط بالنسبة للخط الأساسي ، يمكنك أيضا تحديد الحجم الذي تريده للخط بالضبط دون الإعتماد على الخط الأساسي عن طريق الخاصية size ذاتها ولكن دون وضع اشارة + أو - مقابل الحجم المطلوب

    كود HTML:
    <html>
     
      <head>
      <title>تصغير الخط وتكبيره دون الإعتماد على الخط الأساسي</title>
      </head>
     
      <body>
      <font size="7">Size 7</font><br>
      <font size="6">Size 6</font><br>
      <font size="5">Size 5</font><br>
      <font size="4">Size 4</font><br>
      <font size="3">Size 3</font><br>
      <font size="2">Size 2</font><br>
      <font size="1">Size 1</font>
      </body>
     
    </html>

    ************************************************** ****************************
    يمكنك كذلك تغییر حجم الخط الأساسي في المستند كامل وھذا سیؤثر على جمیع الأماكن التي استخدمت فیھا الأحجام النسبیة للخطوط ، ويمكن استخدامه لتغییر حجم الخط الأساسي في المستند أو لون الخط ونغیر الخط الأساسي باستخدام وسم يدعى <basefont> الأساسي أو نوع الخط الأساسي، وھو لا يأخد قیم نسبیة في الحجم (لا ينسب إلى نفسه)، على سبیل المثال لتغییر الخط الأساسي بحجم 3 ولون أخضر والنوع إلى Verdana نضع الكود التالي في المستند

    كود HTML:
    <html>
     
      <head>
      <title>الخط الأساسي</title>
      </head>
     
      <body>
      <basefont color="Green" size="3" face="Verdana">
      <font>maxpclessons</font><br>
      <font>HTML</font><br>
      </body>
     
    </html>
    سيظھر تأثیره في الصفحة كلھا لذلك فھو لا يحتاج إلى وسم إغلاق HTML والوسم السابق لا يستخدم في جزء محدد من النصوص



    لنكتفي بهذا القدر سنتحدث في الدرس القادم
    عن المزيد من العناصر وعن القوائم ...







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



  2. #2
    الدعم الفني الصورة الرمزية شمـ الهداية ــس
    تاريخ التسجيل
    Jan 2007
    المشاركات
    13,842
    معدل تقييم المستوى
    486734

    جزاك الله خير أخوي ماكس

    إن شاء الله أكون من المتابعين لهذه الدروس
    ولي عودة بعد الإطلاع على بقية الدروس من البداية

    بارك الله فيك

    ،،الحمد لله~








    ~استغفر الله،،

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

    بجد شرح مميز

    تسلم خيو ^^

    .
    .
    .
    .
    .



    .
    .
    .
    .
    .

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

    مشكور عالدرس الممتع ماكس

    وهذي تطبيقاتي





    بس عندي استفسار

    ليش بعد ما نكتب الفونت في نهاية الجملة لما بنغلقها نكتب بي ار </ br>


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

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

    إن شاء الله أكون من المتابعين لهذه الدروس
    ولي عودة بعد الإطلاع على بقية الدروس من البداية

    بارك الله فيك

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







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



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

    اقتباس المشاركة الأصلية كتبت بواسطة oo طفلهــ بأحاسيسيــ oo مشاهدة المشاركة
    بجد شرح مميز

    تسلم خيو ^^
    الله يسلمش اختي
    وشكرا على مروركي







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



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

    اقتباس المشاركة الأصلية كتبت بواسطة مجردانسان مشاهدة المشاركة
    مشكور عالدرس الممتع ماكس

    وهذي تطبيقاتي





    بس عندي استفسار

    ليش بعد ما نكتب الفونت في نهاية الجملة لما بنغلقها نكتب بي ار </ br>
    عشت أخوي
    تطبيقات 10/10
    أتمنى أن تتابعني دائما
    أما بالنسبة لل br فارجع إلى الدرس الثاني وأنت تعرف معناها







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



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

    درس رائع

    لي عودة بعد التجربة و التطبيق

    شكرا لك أخي


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

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

    لي عودة بعد التجربة و التطبيق

    شكرا لك أخي
    العفو أختي
    وأنا أنتظر تطبيقكي







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



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

    بصراحة شرحك أسهل من الكتاب و الأستاذ الله يرحمه

    تسلم يا أستاذي جزاك الله خير


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

    اقتباس المشاركة الأصلية كتبت بواسطة m!xman مشاهدة المشاركة
    بصراحة شرحك أسهل من الكتاب و الأستاذ الله يرحمه

    تسلم يا أستاذي جزاك الله خير
    العفو أخوي
    وأتمنى أن تضيئ ردك بتطبيقاتك







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



  12. #12
    وَرآ بُرّودِ إنكِسآر .، الصورة الرمزية برُوّد اعّصَابْ ..♥َ
    تاريخ التسجيل
    Jun 2009
    المشاركات
    5,448
    معدل تقييم المستوى
    10360

    معد حجيت شي ><

    لي عوده


  13. #13
    سبحان الله الصورة الرمزية Jose mourinho
    تاريخ التسجيل
    Mar 2009
    المشاركات
    27,432
    معدل تقييم المستوى
    9554834

    شكرا على الدرس الجميل ..بس خاصيه basefont ما ظهرت عندي


  14. #14
    برب :) الصورة الرمزية [ شخبوطة ]
    تاريخ التسجيل
    Oct 2006
    العمر
    16
    المشاركات
    14,503
    معدل تقييم المستوى
    255115

    تقدر تعيد رفع الصور؟





    لا إله إلا الله وحده لا شريك له، له الملك وله الحمد وهو على كل شيء قدير
    .
    .
    سبحان الله عدد ما كان وعدد ما يكون وعدد الحركات والسكون


  15. #15
    صانع للمجد رمز للعطاء والمثابرة الصورة الرمزية (بنت العز)
    تاريخ التسجيل
    Nov 2012
    المشاركات
    3,042
    معدل تقييم المستوى
    4811973

    موفقين يا جماااعة
    تقبلوا مروري


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

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