درس ¦₪¦الدرس الثالث¦₪¦• ¦₪¦ سلسلة دروس لغة hmtl ¦₪¦الخطوط 1¦₪¦•

الموضوع في 'التصاميم و الجرافيكس' بواسطة aliain13, بتاريخ ‏ابريل 16, 2011.

  1. aliain13

    aliain13 معاً من أجل الرقي بالمستوى العربي

    إنضم إلينا في:
    ‏يناير 29, 2011
    المشاركات:
    1,957
    الإعجابات المتلقاة:
    124
    نقاط الجوائز:
    78
    الجنس:
    ذكر
    مكان الإقامة:
    المملكة العربية السعودية


    [​IMG]

    [​IMG]


    الحمدلله الواحدِ الأحدِ الفردِ الصمد الذي لم يلد ولم يولد ولم يكن لهكفواً أحد

    صاحبِ المننِ السابغة والآلاءِ الوازعة والرحمةِ الواسعة والقدرةِ الجامعة

    والنعمِ الجسيمة والعطايا الجزيلة الذي سما في العزِ ففاتَ نواظرَ الأبصارِ

    ودنا في اللطفِ فجازَ هواجزَ الأفكار الذي توحدَ بالملكِ فلا ندَ له في ملكوتِ

    سلطانه وتفرّد بالآلاءِ والكبرياء فلا ضدَ له في جبروتِ شأنه الذي حارت في

    كبرياءِ هيبتهِ دقائقُ لطائفِ الأنام الذي خضعتِ الرقابُ لعظمته ووجِلتِ القلوبُ

    من خيفته وعنتِ الوجوهُ لهيبته وصلِّ اللهم على حبيبك وخيرتك من خلقك

    سيدِ المرسلين محمد بن عبد الله صلى الله عليه وآله وسلم الدليلِ إليك في

    الليلِ الأليل والماسكِ من أسبابك بحبلِ الشرف الأطول والناصعِ الحَسب في

    ذَروةِ الكاهلِ الأعبل والثابت القَدَم على زحاليفها في الزمن الأول وعلى آله

    وصحبه الأخيار المصطفِين الأبرار​


    [​IMG]


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

    ولنبدأ

    راجع صفحتنا البسيطة التي عملنا فيها في الدرسين السابقين. إننا لم نقم بالتعامل مع الخطوط فيها ولا بأي شكل من الأشكال. أي أننا تركناها على إعداداتها الافتراضية.
    وبالمناسبة فإن هذه الإعدادات هي خط عادي، نوعه Times New Roman وحجمه 3 (بمقياس متصفحات الإنترنت).

    الوسم الأول الخاص بالخطوط هو <FONT> ... </FONT>
    وهو يقوم بالتحكم بالخطوط من حيث النوع واللون والحجم. أما الخصائص التي نستخدمها مع هذا الوسم والوسوم الأخرى للخطوط فهي كالتالي:


    [​IMG]
    [​IMG]
    Face
    تقوم هذه الخاصية بتحديد نوع الخط الذي نريده، وقد نقوم بتحديد أكثر من نوع معاً. وفي هذه الحالة إذا لم يتواجد الخط المحدد أولاً على جهاز الشخص الذي يتصفح الموقع يتم إعتماد الخط الثاني ... وهكذا

    <FONT FACE="Traditional Arabic, Arabic Transparent, Simplified Arabic">‎
    ... Text ...
    <‎/FONT>


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

    [​IMG]
    Color
    أما هذه الخاصية فتحدد لون الخط، وذلك بنفس مبادئ تحديد الألوان التي تحدثنا في الدرس السابق

    <FONT COLOR="#FF0000">‎
    ... Text ...
    <‎/FONT>


    [​IMG]
    Size
    ولتحديد حجم الخط نستخدم هذه الخاصية. وفقط هناك سبعة أحجام لأي خط تستطيع المتصفحات التعرف عليها.
    ونقوم بتحديد الحجم المطلوب بأسلوبين: أولهما المباشر. حيث يتم كتابة رقم يتراوح ما بين 1-7. أي أننا نختار الحجم الذي نريده مباشرة.


    <FONT SIZE="4">‎
    ... Text ...
    <‎/FONT>




    وإليك نماذج بأحجام الخطوط

    خط بحجم 1
    خط بحجم 2
    خط بحجم 3
    خط بحجم 4
    خط بحجم 5
    خط بحجم 6
    خط بحجم 7



    أما الأسلوب الثاني فهو النسبي: حيث تكتب الأرقام من 1 إلى 6 مرفقة إما بإشارة + أو بإشارة -

    <FONT SIZE="+4">‎
    ... Text ...
    <‎/FONT>



    وفي هذه الطريقة فإن الأرقام 1-6 تمثل درجات التكبير (+) أو التصغير (-) للخط وذلك نسبةً إلى الحجم الافتراضي. فمثلا الرقم +4 يعني تكبير الخط أربع درجات عن الحجم الافتراضي وهو 3، أي أنه يصبح بالحجم 7. بالمقابل فأن الرقم -1 يعني تصغير الخط درجة واحدة أي يصبح بالحجم 2.

    ولتوضيح هذا الأسلوب، إليك هذه النماذج:


    [SIZE=-3]خط بحجم -3[/SIZE]
    [SIZE=-2]خط بحجم -2[/SIZE]
    [SIZE=-1]خط بحجم -1[/SIZE]
    [SIZE=+0]خط بحجم +0[/SIZE]
    [SIZE=+1]خط بحجم +1[/SIZE]
    [SIZE=+2]خط بحجم +2[/SIZE]
    [SIZE=+3]خط بحجم +3[/SIZE]
    [SIZE=+4]خط بحجم +4[/SIZE]
    [SIZE=+5]خط بحجم +5[/SIZE]

    لاحظ أنه حتى في الأسلوب النسبي لا نستطيع الحصول على أكثر من سبعة أحجام للخطوط. حتى وإن حاولنا كتابة أرقام أكبر أو أصغر كما فعلت هنا بكتابة الحجم -3 أو +5


    والآن أعرف ماذا تريد أن تسأل، ستقول لقد ثبت حجم الخط على حده الأدنى عند الدرجة -2 وعلى حده الأعلى عند الدرجة +4. إذن ما الفائدة من وجود الدرجات الأخرى الأقل من -2 والأكبر من +4؟
    حسنا وأنا أجيبك بسؤال آخر: ماذا لو قمنا بتغيير الحجم الافتراضي للخط في كل الصفحة إلى 1 بدلاً من 3؟ (وسوف نقوم بذلك فعلاً بعد قليل)، ألا نحتاج في هذه الحالة إلى الدرجات من +1 إلى +6 لتمثيل الأحجام الأكبر منه؟ وإذا قمنا بتحديد 7 كحجم إفتراضي ألا نحتاج إلى الدرجات من -1 إلى -6 لتمثيل الأحجام الأصغر منه؟ إذن نحن نحتاج فعلاً إلى هذه الدرجات لكي نغطي جميع الإحتمالات الواردة.
    أرجو أن يكون هذا الجواب قد أقنعك :)


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

    <FONT FACE="arial" SIZE="6" COLOR="#FF0000">‎
    This font is Arial, Size is 6, Color is Red
    <‎/FONT>

    This font is Arial, Size is 6, Color is Red


    <FONT FACE="arial" SIZE="+3" COLOR="#FF0000">‎
    This font is Arial, Size is +3, Color is Red
    <‎/FONT>

    This font is Arial, Size is +3, Color is Red


    <FONT FACE="Times New Roman" SIZE="5" COLOR="#0000FF">‎
    This font is Times New Roman, Size is 5, Color is Blue
    <‎/FONT>

    This font is Times New Roman, Size is 5, Color is Blue



    <FONT FACE="courier" SIZE="2" COLOR="#800000">‎
    This font is Courier, Size is 2, Color is Maroon
    <‎/FONT>

    This font is Courier, Size is 2, Color is Maroon



    <FONT FACE="Arial" SIZE="5" COLOR="#00FF00"> This <‎/FONT>
    <FONT FACE="Times New Roman" SIZE="7" COLOR="#FF00FF"> is <‎/FONT>
    <FONT FACE="Arial" SIZE="2" COLOR="#FF0000"> multi <‎/FONT>
    <FONT FACE="Impact" SIZE="4" COLOR="#000000"> colors, <‎/FONT>
    <FONT FACE="Courier" SIZE="2" COLOR="#0000FF"> multi <‎/FONT>
    <FONT FACE="Times New Roman" SIZE="3" COLOR="#008080"> faces, <‎/FONT>
    <FONT FACE="Courier" SIZE="6" COLOR="#FFFF00"> and <‎/FONT>
    <FONT FACE="Arial" SIZE="5" COLOR="#808080"> multi <‎/FONT>
    <FONT FACE="Impact" SIZE="2" COLOR="#800000"> sizes <‎/FONT>
    <FONT FACE="Times New Roman" SIZE="7" COLOR="#00FFFF"> text <‎/FONT>

    This is multi colors, multi faces, and multi sizes text

    <FONT FACE="Impact" SIZE="6" COLOR="#000000">C <‎/FONT>
    <FONT FACE="Impact" SIZE="6" COLOR="#008080">O<‎/FONT>
    <FONT FACE="Impact" SIZE="6" COLOR="#FF0000">L<‎/FONT>
    <FONT FACE="Impact" SIZE="6" COLOR="#0000FF">O<‎/FONT>
    <FONT FACE="Impact" SIZE="6" COLOR="#800000">R<‎/FONT>
    <FONT FACE="Impact" SIZE="6" COLOR="#FF00FF">S<‎/FONT>


    C O L O R S

    [​IMG]

    [​IMG]

    وها نحن نأتي وإياكم إلى ختام جولتنا المباركة

    بين أفياء حديقتنا وزهرات بساتيننا

    وشذا زهراتنا الفواحة

    بعد أن طـّوفنا فيها سوياَ

    فرأينا ما يعجب العين

    وسمعنا ما يشنف الآذان ويطرب الفؤاد

    وإنه ليعز علينا الفراق بعد اجتماع والبعد بعد لقاء

    يا من يعـز عـلـيـنـا أن نـفـارقـهـم وجـدانــنـا كل شيء بـعـدكـم عـــدم

    ولا يسعنا أحبتنا الكرام في هذا

    إلا أن ندعو الله لنا ولكم التوفيق الذي جمّع شملنا في معهدنا

    وهاهو وقت الوداع حان .. وزمان البين آن وإلى لقاء قريب وعلى الإبداع نجتمع

    وسلام على المرسلين والحمد لله رب العالمين


    [​IMG]
     
  2. max_net

    max_net Well-Known Member

    إنضم إلينا في:
    ‏يناير 3, 2011
    المشاركات:
    6,354
    الإعجابات المتلقاة:
    30
    نقاط الجوائز:
    63


    يسلمووووو على الدرس
    :sm136:
    ننتظر الدرس القادم

    خااااااالص شكري وتقديري
    :3:
     
  3. DeleGnT

    DeleGnT Delegnt.net Moderator

    إنضم إلينا في:
    ‏أغسطس 25, 2010
    المشاركات:
    25,789
    الإعجابات المتلقاة:
    157
    نقاط الجوائز:
    78
    الجنس:
    ذكر
    الوظيفة:
    FREE
    مكان الإقامة:
    DeleGnT.NeT


    بوركت يمناك عزيزي ..

    منتظر جديدك المشوق ..

    \\
     
  4. aliain13

    aliain13 معاً من أجل الرقي بالمستوى العربي

    إنضم إلينا في:
    ‏يناير 29, 2011
    المشاركات:
    1,957
    الإعجابات المتلقاة:
    124
    نقاط الجوائز:
    78
    الجنس:
    ذكر
    مكان الإقامة:
    المملكة العربية السعودية


    يسلموووووووو ع المرور الرائع
    والردود الاروع منك يالغلا
    :3:
    \\\
     
  5. داق الكيف

    داق الكيف عضو مميّز

    إنضم إلينا في:
    ‏مارس 30, 2012
    المشاركات:
    2,789
    الإعجابات المتلقاة:
    54
    نقاط الجوائز:
    63
    الجنس:
    ذكر
    الوظيفة:
    .~. طالَََبَ في جأَمِْعَة إِلاَمَأَمْ .~.
    مكان الإقامة:
    .~. مَدِيِنَّة الرِيّاض .~.


    .~. :314471::314471: لآلآلآلآهنت لببى قلبككككك :314471::314471: .~.
     
  6. ذيب 2001

    ذيب 2001 Active Member

    إنضم إلينا في:
    ‏فبراير 9, 2012
    المشاركات:
    833
    الإعجابات المتلقاة:
    11
    نقاط الجوائز:
    33
    الوظيفة:
    ماذا تتوقع .. ؟ *
    مكان الإقامة:
    ღ فيـ قلب مغلــيـة ღ


    ,

    بارك الله فيك ..
    والله يع ـطيك الف ع ــافية ..
    لاهنت ..
     

مشاركة هذه الصفحة