كيفية جعل النص غامقًا باستخدام HTML

مؤلف: Bobbie Johnson
تاريخ الخلق: 7 أبريل 2021
تاريخ التحديث: 26 يونيو 2024
Anonim
تنسيق النص فى صفحة الويب بلغة html
فيديو: تنسيق النص فى صفحة الويب بلغة html

المحتوى

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

خطوات

الطريقة الأولى من 2: إنشاء نص غامق باستخدام HTML

  1. 1 قوي> استخدم العلامة القوية / القوية>. في HTML5 ، وفقًا للمواصفات ، هذه هي أفضل طريقة لتمييز النص. ستجعل هذه العلامة دائمًا النص غامقًا.
    • ضع النص الذي تريد تمييزه داخل العلامات: strong>هنا/ قوي>.
  2. 2 استخدم العناوين عند الاقتضاء. عادةً ما يتم وضعها في أعلى الصفحة أو في بداية قسم جديد. بشكل افتراضي ، يتم عرض العناوين بشكل أكبر وأكثر جرأة من النص العادي ، على الرغم من وجود بعض التفاصيل الدقيقة هنا أيضًا. هناك ستة مستويات من العناوين ، من 1 إلى 6: h1> - h6>. اتبع هذه الإرشادات عند استخدامها:
    • تتم كتابة العنوان h1 على النحو التالي: h1> عنوان المستوى الأول / h1> ، وهذا هو أهم وأكبر عنوان في الصفحة.
    • h2> العنوان h2 / h2> - للعنوان الثاني الأكثر أهمية ، وهكذا حتى العنوان h6> العنوان h6 ، الأصغر من الكل / h6>.
    • تحتاج إلى استخدام العناوين بعناية ، باعتدال ، فقط لتنظيم محتوى الصفحة. يجب أن يكون المستخدم قادرًا على رؤية العنوان في أسرع وقت ممكن لفهم ما إذا كان المحتوى الذي يريده موجودًا تحته.
    • عند إنشاء عناوين فرعية ، يجدر النزول بمستوى واحد فقط في كل مرة. بمعنى آخر ، ليست هناك حاجة لوضع بعد h1> مباشرة h3>. بهذه الطريقة ، لن يفشل تنسيق الصفحة عند التحويل إلى تنسيق آخر.
  3. 3 b> كملاذ أخير ، استخدم العلامة b / b>. لا تزال العلامة b> مدعومة في HTML5 ، لكنها أفضل بكثير. يمكنك استخدام b> عندما يتم تمييز النص لأغراض أسلوبية وغير دلالية - على سبيل المثال ، لتمييز الكلمات الأساسية أو كلمات المفردات وأسماء المنتجات وما إلى ذلك.
    • مثل معظم العلامات ، b> هو زوج يتحكم في / b> النص الموجود بداخله.

الطريقة 2 من 2: إنشاء نص غامق باستخدام CSS

  1. 1 تذكر متى تستخدم CSS. CSS هي أداة قوية ومريحة للغاية لتحرير مظهر الصفحة. في الواقع ، CSS هي كيف "تبدو" الصفحة ، بينما HTML هي "معناها". بالطبع ، لا يوجد خطأ في علامات HTML ، حيث يمكن استخدامها ، ولكن من الأفضل العمل مع CSS - لديك المزيد من التحكم في الشكل الذي سيبدو عليه النص الخاص بك.
    • افتح صفحة HTML بسيطة في متصفحات مختلفة. لاحظ كيف يظهر بشكل مختلف قليلاً في كل واحدة؟ يمكن أن تساعد CSS في الحفاظ على هذا الاختلاف عند الحد الأدنى.
  2. 2 أضف علامة span> إلى النص. إذا لم تكن تمتلك CSS بالفعل ، فيجب أن تبدأ بما يسمى بـ "Inline CSS" - "inline Style Sheets" ، إذا كنت ترغب في ذلك. يمكن استخدام هذا بالطبع لتغيير مظهر العلامات مثل p> أو h1> ، ولكن في بعض الأحيان يمكنك أيضًا تغيير النص الذي لم يتم تضمينه بعد في أي علامات. تعتبر علامة span> / span> غلافًا ليس له تأثير أو تأثير في حد ذاته ، ولكنه يمنحنا الفرصة لإجراء التغييرات اللازمة على الصفحة. هذا مثال:
    • span> أتعلم كيفية جعل النص غامقًا باستخدام CSS ./span>
  3. 3 أضف سمة النمط. تتم كتابة السمات في HTML مباشرة في العلامة ، في مربعات الاختيار>. سمة النمط مطلوبة لإدراج CSS في علامة HTML ، لذا قم بإدراجها النمط = في علامة span:
    • span style => أتعلم كيفية جعل النص غامقًا باستخدام CSS المضمنة ../ span>
    • لماذا تضيف سمة نمط إذا لم تقم بإضافة النمط نفسه؟ فكر بشكل صحيح. ولكن هنا نضع كل شيء خطوة بخطوة!
  4. 4 أضف خاصية وزن الخط. تتم إضافة خصائص CSS كجزء من السمة ، في هذه الحالة كجزء من سمة النمط ، أي "وزن الخط" (الوزن الحرفي). يمكن استخدام هذه الخاصية لتحديد نمط الخط ، ليس فقط بالخط العريض ، ولكن أيضًا بالخط العريض أو الرفيع أو العادي. بعد علامة = ، اكتب "وزن الخط:"... يجب أن يبدو مثل هذا:
    • span style = "font-weight:"> أتعلم كيفية جعل النص عريضًا باستخدام CSS المضمنة ../ span>
    • توقف مؤقتًا ، لا تكتب أي شيء آخر (ونعم ، هناك المزيد في المستقبل).
    • لا تنس وضع علامات الاقتباس قبل وبعد وزن الخط:.
  5. 5 أضف القيمة الغامقة. ماذا تبقى؟ هذا صحيح ، اضبط خاصية السمة على قيمة! أين يتم إدخالها؟ هذا صحيح ، بين وزن الخط: واقتباس ختامي. هذه الخاصية لها العديد من الأصناف ، تختلف في الجرأة ، وأسهل طريقة هي استخدام القيمة بالخط العريض:
    • span style = "font-weight: bold"> أتعلم كيفية جعل النص غامقًا باستخدام CSS./span>
  6. 6 جرب القيم الأخرى. CSS أقوى بكثير من HTML ، لذلك لا تشعر أنك مقيد اليدين والقدمين. فيما يلي بعض البدائل للجريئة:
    • span style = "font-weight: bolder"> "Bolder" - بهذه الطريقة سيكون النص دائمًا أكثر سمكًا من العنصر الأصلي ، بغض النظر عن مدى خطه. / span> إذا تم تحديد الفقرة بأكملها بـ "bold" ، فحينئذٍ ستساعد كلمة "أكثر جرأة" في إبراز جملة منفصلة موجودة بداخلها ، على سبيل المثال.
    • span style = "font-weight: normal"> "عادي" - سيبدو هذا النص كالمعتاد ، حتى عندما تكون داخل علامة تجعل النص غامقًا. / span>
    • span style = "font-weight: 900"> لتعيين وزن النص ، يمكنك استخدام قيم من 100 إلى 900. 400 - نمط عادي ، غامق - من 700 وما فوق. / span>

نصائح

  • عند استخدام القيم الرقمية للوزن في CSS ، استخدم مضاعفات العدد 100. وسيظل تقريب جميع القيم الأخرى إلى الأعلى.
  • من المؤكد أن ملف CSS الخارجي أكثر ملاءمة مما هو موصوف في هذه المقالة - وبهذه الطريقة سيكون من الممكن التحكم في ظهور جميع صفحات الموقع من ملف واحد مرة واحدة!
  • لا يمكنك جعل الخط أكثر بدانة مما كان يقصده المطبعون في الأصل. عند العمل باستخدام CSS ، تذكر أن الخط سيتغير وفقًا للمعيار. وفقًا لذلك ، لن ترى الفرق بين خياري الخط الغامق (بتعبير أدق ، يمكنك رؤيته - ولكنه يعتمد بالفعل على الخط).