admin@deltaclic.comAdmin sales@deltaclic.comSales
الخميس 24 يوليو 2014 - 1:03 مساءًDate
en_lang
مهووس الويب

قريبا

شرفونا بزيارتكم من هنا

السلام عليكم و رحمة الله و بركاته،

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

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

  • العناوين Headings :

تعتبر عناوين الـ HTML من أهم الوسوم التي يغفل عنها الكثير من مصممي مواقع الويب، و هي مكونة من ست مستويات : H1، H2، H3، H4، H5، H6، باعتبار H1 هو الحجم الأكبر، و H6 هو الحجم الأصغر، توضع بين وسمي البداية و النهاية على الشكل التالي : <hx></hx>، باعتبار أن الحرف x يمثل حجم الخط، و المثال التالي يوضح الأمر :

<h1>العنوان الأول</h1>
<h2>العنوان الثاني</h2>
<h3>العنوان الثالث</h3>
<h4>العنوان الرابع</h4>
<h5>العنوان الخامس</h5>
<h6>العنوان السادس</h6>

نتيجة تطبيق المثال السابق ستكون بهذا الشكل، اضغط هنا.

لاحظ أن العنوان الأول هو العنوان الأكبر لأننا استخدمنا في تنسيقه المستوى رقم 1، أي <h1>، و أن العنوان السادس يمثل العنوان الأصغر، لأننا استخدمنا المستوى 6 في تنسيقه، أي <h6>.

إشارة : استخدم وسوم الـ Headings فقط لتعيين العناوين و رؤوس الأقلام، و لا تستخدمها لتحديد حجم الخط.

ملاحظة : المتصفح سيقوم بترك مسافة قبل وبعد العناوين Heading.

  • الوسم Font :

يعتبر أهم وسم مسؤول عن تنسيق الخط داخل وثيقة الإش تي إم إل – <font>…</font> -، يأتي دائما مع مجموعة من الخصائص التابعة، تكتب داخل علامتي الاقتباس المزدوجة “…”، لأنه لا يملك أي تأثير لوحده، حيث يمكنك من خلاله التحكم بنوع، حجم، و لون الخط بشكل أفضل و أوسع، و من أهم الخصائص المستخدمة مع هذا الوسم :

  • الخاصية Face :

تعبر الخاصية Face عن نوع الخط المستخدم، و كمثال على ذلك :

<font face="Arial">بسم الله الرحمن الرحيم</font>
<font face="Andalus">بسم الله الرحمن الرحيم</font>

عند تطبيق المثال السابق ستلاحظ أن الخط الأول يختلف عن الخط الثاني من حيث النوعية، لرؤية المثال المباشر، اضغط هنا.

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

<font face="Arial, Andalus, Arabic Transparent">بسم الله الرحمن الرحيم</font>

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

من أشهر أنواع الخطوط المستخدمة نجد :

Andalus
Arial
Helvetica
sans-serif
Verdana
Geneva
Times New Roman
Times
serif
Garamond
Palatino
Courier New
Courier
  • الخاصية Size :

تستخدم الخاصية Size لحديد حجم الخط، عموما هناك 7 أحجام تستطيع المتصفحات التعرف عليها، مرتبة من 1 إلى 7، أي من الأصغر إلى الأكبر، و يمثل الرقم 3 الحجم الافتراضي للخط ما لم يتم تغييره. المثال التالي يوضح كيفية استخدام هذه الخاصية :

<font size="1">السلام عليكم و رحمة الله و بركاته</font>
<font size="2">السلام عليكم و رحمة الله و بركاته</font>
<font size="3">السلام عليكم و رحمة الله و بركاته</font>
<font size="4">السلام عليكم و رحمة الله و بركاته</font>
<font size="5">السلام عليكم و رحمة الله و بركاته</font>
<font size="6">السلام عليكم و رحمة الله و بركاته</font>
<font size="7">السلام عليكم و رحمة الله و بركاته</font>

نتيجة تطبيق المثال، من هنا.

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

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

<font size="+3">مدونة دلتا كلك</font>
<font size="-1">مدونة دلتا كلك</font>

نتيجة المثال السابق هنا.

  • الخاصية Color :

الخاصية Color هي الخاصية المسؤولة عن تحديد لون الخط. المثال التالي يوضح الأمر أكثر :

<font color="green">نص باللون الأخضر</font>
<font color="red">نص باللون الأحمر</font>
<font color="blue">نص باللون الأزرق</font>

فلو اخذنا المثال السابق، فالنتيجة ستكون بهذا الشكل، اضغط هنا.

إفادة : لاحظ أننا قمنا بتحديد لون الخط باستخدام الاسم الذي يشير إلى اللون المختار، فمثلا لتحديد اللون الأخضر استعملنا العبارة green، و للون الأحمر red، و للون الأزرق blue. سنتعرض لمسألة الألوان بالتفصيل في درسنا القادم إن شاء الله.

انتبه ! تحديد اللون عن طريق الاسم يكون باللغة الإنجليزية.

يمكن أيضا التحكم في لون الخط بشكل أدق باستخدام أكواد الـ HEX، و هي أكواد مكونة من ستة أرقام مسبوقة بعلامة #، و كمثال على ذلك :

<font color="#008000">نص باللون الأخضر</font>
<font color="#0000FF">نص باللون الأحمر</font>
<font color="#FF0000">نص باللون الأزرق</font>

إن نتيجة تطبيق المثال ستكون هي هي، فقط كل ما في الأمر أننا قمنا بغيير قيمة اللون من green مثلا إلى 008000#، و هو الكود الذي يمثل اللون الأخضر و هكذا.

تساؤل : هل يمكنني مثلا تغيير لون، و حجم، و نوع الخط لكلمتين أو أكثر داخل الجملة الواحدة ؟ الإجابة ستكون بنعم. إليك المثال التالي :

<font face="Tahoma" size="3" color="red"> مدونة </font><font face="Andalus" size="5" color="green"> دلتا </font><font face="Arial" size="7" color="blue"> كلك </font>

لرؤية نتيجة التطبيق السابق، اضغط هنا.

  • تنسيقات إضافية للخط :

للكتابة بخط غامق عريض نستخدم الوسم <b> أو <strong> :

<b>خط عريض</b>
<strong>خط عريض</strong>

للكتابة بخط مائل نستخدم الوسم <i> أو <em> :

<i>خط مائل</i>
<em>خط مائل</em>

لوضع سطر تحت الخط نستخدم الوسم <u> :

<u>خط مسطر</u>

للكتابة بخط كبير نستخدم الوسم <big> :

<big>خط كبير</big>

للكتابة بخط صغير نستخدم الوسم <small> :

<small>خط صغير</small>

لوضع سطر وسط الخط نستخدم الوسم <s> أو <strike> :

<s>خط يعترضه سطر</s>
<strike>خط يعترضه سطر</strike>

لمشاهدة مثال مباشر لجميع التنسيقات السابقة، اضغط هنا.

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

مصنفة في قسم : إش تي إم إل HTML
جميع الحقوق محفوظـة © 2014 تنسيق الخطوط بلغة الـ HTML - المرجو عند نقل أو مشاركة التدوينة مع الآخرين ذكر المصدر الأصلي للموضوع مع رابطه, جزاكم الله كل خير.

ورقة تعريفية -

عماد لبرين، مشرف مدونة DeltaClic، من مواليد 1981 بالعاصمة الاقتصادية للمغرب (الدار البيضاء)، حاصل على دبلوم تقني متخصص في البرمجة، أعمل حاليا كمصمم و مطور مواقع ويب حر Freelance، لدي إهتمامات عدة خاصة تطوير مواقع الويب و التصميم و البرمجة و أنظمة التشغيل، أتقن مجموعة من اللغات البرمجية كـ : HTML، CSS، PHP، JavaScript، و لدي أيضا دراية ببعض اللغات الأخرى كـ : VB.NET، JAVA، C، J2EE…، و لدي خبرة واسعة بنظام المدونات الشهير (الوورد بريس WordPress).

مجموع مقالات الكاتب: 956

2 تعليق حتى الآن.

  1. خالد قال:

    شكرا جزيلا لقد بحثت كثيرا عن مواقع لتعليم هذه اللغات …اشكرك مره اخرى على هذا الموقع الرائع

  2. alia قال:

    شكرا جزيلا الله يجزاك خير افدتنا افادك الله

أكتب تعليق


إبحث عـن منتـج بواسطـة

نوعية المنتـج

مجاني / غير مجاني

البرامج المستخدمة

طابـع النسخـة

صـفة المنتـج

تحديد سعر المنتـج