recent
أخبار ساخنة

الخطوط في HTML

Nusur Tech
الصفحة الرئيسية
الخطوط في HTML

الخطوط في HTML

المتصفح يعرض الخط font الإفتراضي له وهو من نوع Times new roman و الحجم الإفتراضي له هو "3" ,ماذا اذا كنا نريد إعطاء هذا الخط لون معين او حجم اكبر او نوع من انواع الخطوط غير الإفتراضي له ماذا نفعل ؟ إليك الحل html تعطيك التحكم الكامل بالخطوط من خلال الوسم font.

والوسم font يقوم بالتحكم في الخط من حيث اللون و الحجم و نوع الخط, قبل البدء في اي مثال سوف اعرفكم على الخصائص المستخدمه مع الوسم font.

الخصائص المستخدمة مع الوسم font الخطوط في HTML

ايضاً توجد عدة خصائص نستخدمها مع الوسم font ﻷجل اعطاء الخطوط جمالاً أكثر.

  1. خاصية face.
  2. خاصية color.
  3. خاصية size.

خاصية face الخطوط في HTML

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

خاصية face في HTML تستخدم لتعيين نمط الخط (font) المستخدم لعرض النص في عنصر HTML معين. يمكن استخدام هذه الخاصية لتحديد نوع الخط المراد استخدامه، سواء كان خطًا مضمونًا في النظام الأساسي لجهاز الكمبيوتر المستخدم أو خطًا مخصصًا.

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

<font face="arial">
page web
</font>

خاصية color الخطوط في HTML

خاصية color في HTML تستخدم لتعيين لون النص المراد عرضه في عنصر HTML معين. يمكن تحديد اللون باستخدام قيمة بسيطة مثل "red" أو "blue"، أو باستخدام رمز HEX للألوان، مثل "#FF0000" للأحمر.

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

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

<font color="ff00ff">
page web
</font>

خاصية size الخطوط في HTML

خاصية size في HTML تستخدم لتعيين حجم الخط (font size) المراد عرضه في عنصر HTML معين. يمكن تحديد حجم الخط باستخدام قيمة رقمية، مثل "1" أو "2" أو "3"، حيث يتم تحديد الحجم بناءً على الحجم الافتراضي للخط في المستعرض. يمكن أيضًا استخدام قيم أخرى مثل "small" أو "medium" أو "large"، والتي تتعلق بالحجم الافتراضي للخط.

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

<font size="5">
page web
</font>

سوف نستخدم كل ما سبق في مثال على كلمة Nusur Tech my page سوف نعطيها لون احمر و نوع خط arial وحجم الخط 7.

<font face = "arial" color = "ff0000" size="7">
Nusur Tech page web
</font>

النتيجة في المتصفح سوف تكون لون الخط أحمر و نوعه arial و حجمه 7.

يوجد ايضاً وسم آخر يقوم بنفس عمل الوسم font وهو وسم مفرد ليس له وسم نهاية لكنه يقوم بمثل النتائج وهو الوسم basefont ونستخدم به name بدل face كما في المثال التالي

<basefont name="arial" color="#909090" size="7">
.

لقد ذكرنا قبل قليل انه توجد وسوم تقوم بنفس اداء وسوم اخرى وسوف نتحدث عن الوسم h المشهور في تمييز العناوين. و ارقامه من 1 حتى الرقم 6 اكبرها الرقم 1 و اصغرها 6.

<h1>Nusur Tech</h1>
<h2>Nusur Tech</h2>
<h3>Nusur Tech</h3>
<h4>Nusur Tech</h4>
<h5>Nusur Tech</h5>
<h6>Nusur Tech</h6>

وتكون نتيجة المخرجات كما تعلمناها في درس العناوين و هي H1 اكبرها و اصغرها H6.

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

<body>
    <h1>Nusur Tech</h1>
    Muhammad and Ahmed Owner Nusur Tech website
    Muhammad and Ahmed Owner Nusur Tech website
    Muhammad and Ahmed Owner Nusur Tech website
    Muhammad and Ahmed Owner Nusur Tech website
    Muhammad and Ahmed Owner Nusur Tech website
    Muhammad and Ahmed Owner Nusur Tech website
</body>

الناتج للمثال السابق في المتصفح سوف تكون جميع الاسطر متلاصقة مع بعضها.

التنسيقات والتأثيرات المستخدمة مع النصوص الخطوط في HTML

تنسيق النصوص ( Text Formatting ) يقصد بتنسيق النصوص هو عرض النص على الشاشة بشكل أفضل مثلاً في حال كانت هنالك كلمة مهمة في النص المكتوب يمكننا عرضها بخط عريض او إن كان شيء تم حذفه يمكننا عرضه خط فوقه للإشارة إلى أنه محذوف و هكذا. و يمكن استخدام عدة تنسيقات وتأثيرات مع النصوص والخطوط في HTML ومن بين هذه التنسيقات:

عرض النص بخط عريض Bold الخطوط في HTML

الوسم <b></b> والوسم <strong></strong> يتم إستخدامهم لهذا الغرض و نستطيع استخدام إحداها, لأن الأثنين يقومان بنفس الغرض.

<b>Nusur Tech</b>
<strong>Nusur Tech</strong>

عرض النص مائل italic الخطوط في HTML

الوسم <i></i> و <em></em> يتم إستخدامهم لجعل النص مائل في صفحات الويب.

<i>Nusur Tech</i>
<em>Nusur Tech</em>

عرض خط أسفل النص Underline الخطوط في HTML

الوسم <u></u> يتم إستخدامه عندما نريد وضع خط اسفل النصوص.

<u>Nusur Tech</u>
.

عرض النص مرتفع للأعلى Super Script الخطوط في HTML

الوسم <sup></sup> يتم إستخدامه من أجل جعل النص مرتفع قليلاً للاعلى و يتم استخدامه في المعادلات الرياضية والفيزيائية و الكيميائية وغيرها.

<sup>النص</sup>
.

عرض النص منخفض للأسفل Sub Script الخطوط في HTML

الوسم <sub></sub> يُستخدَم من أجل جعل النص منخفض للأسفل قليلا و أيضاً يتم استخدامه في المعادلات الرياضية والكيميائية والفيزيائية.

<sub>النص</sub> 
.

عرض نص كبير big

الوسم <big></big> يستخدم من أجل جعل النص كبير في الصفحة

<big>النص</big>
.

عرض نص صغير small

الوسم <small></small> يستخدم من اجل جعل النصوص صغيرة في صفحات الويب اي اصغر من حجمها في الفقرات.

<small>النص</small>
.

عرض نص محدوف

الوسمين <strike></strike> و <s></s> يتم استخدامهم من اجل عرض نص محذوف اي يتم وضع خط بمنتصف الكلمات.

<strike>النص</strike>
<s>النص</s>

 

google-playkhamsatmostaqltradent