في هذا البرنامج التعليمي سنلقي نظرة على سمة العلامة الأخيرة ، الذي يحدد لون النص. بشكل افتراضي، يكون النص باللون الأسود، ويتم عرضه على خلفية بيضاء. بغرض تغيير لون النص في HTML، فأنت بحاجة إلى تطبيق سمة اللون للعلامة :
لتعيين اللون، ما عليك سوى تحديد اسمه، على سبيل المثال: الأحمر والأخضر والأزرق. دعونا نلقي نظرة على مثال صغير:
النص الأخضر
نص أحمر
النص الأرجواني
دعونا نرى النتيجة في المتصفح:
تحول النص الموجود في الفقرة الأولى إلى اللون الأخضر، والفقرة الثانية إلى اللون الأحمر، والفقرة الثالثة إلى اللون الأرجواني. في المجمل هناك 16 اسمًا للألوان الأساسية و130 لونًا إضافيًا. يمكنك رؤية القائمة الكاملة للألوان في جدول ألوان html.
هذه الطريقة للإشارة إلى اللون بسيطة جدًا، ولكنها محدودة جدًا. لذلك، من أجل تغيير اللون في تعليمات HTML البرمجية، غالبًا ما يستخدمون رقمًا سداسيًا عشريًا يسبقه علامة التجزئة (#)، على سبيل المثال:
باستخدام هذا التصنيف يمكنك الحصول على أكثر من 16 مليون لون وظلالها! يمكنك الحصول على رمز اللون باستخدام رمز اللون المتوفر في الموقع، أو باستخدام لوحة الألوان في Photoshop. دعونا نلقي نظرة على مثال ونكتب الكود التالي:
النص الأخضر
نص أحمر
النص الأرجواني
لنحفظ الملف وننظر إلى النتيجة:
كما ترون، أعطينا النص نفس الألوان كما في المثال الأول، هنا فقط استخدمنا نظام الأرقام السداسية العشرية، أو بمعنى آخر، قمنا بتعيين اللون بتنسيق HEX.
لقد تعلمت الآن كيفية تغيير لون النص في html وفي نهاية الدرس أقترح تكرار جميع سمات العلامة ، وقم بتعيين عدة معلمات للنص مرة واحدة، وهي: الخط والحجم واللون. اكتب مثالاً:
ضبط خط النص وحجمه ولونه
ضبط خط النص وحجمه ولونه
كيفية تغيير الخط؟
عند إنشاء موقع ويب، هناك دائمًا حاجة لتغيير خط النص لمجموعة متنوعة من أجزاء وعناصر صفحات HTML، لأن هذا لا يضيف التفرد والأسلوب إلى الموقع فحسب، بل يعمل أيضًا على تحسين جودة إدراك المعلومات. يوجد في HTML علامات خاصة لهذا، سنتحدث عنها في هذا الدرس، والتي ستكون واحدة من أكبر العلامات في هذا البرنامج التعليمي. ولكن، كما قلت لك سابقًا، لا تحاول حفظ كل شيء عن ظهر قلب، لا تفعل ذلك، الشيء الرئيسي هو فهم وفهم ما تتم مناقشته في كل مرحلة من مراحل الدرس.
تغيير أنماط الخطوط
هناك أكثر من طريقة لتغيير أنماط كتابة الخطوط في HTML، وسترى ذلك قريباً. الآن دعونا نلقي نظرة على بعض العلامات الجديدة:
...و ...- تسليط الضوء على النص عريضالخط.
...و ...- تسليط الضوء على النص مائل.
...- يعرض النص بخط مرتفع، على سبيل المثال E = mc 2 .
...- يعرض النص بالخط المنخفض، على سبيل المثال H 2 SO 4.
كل هذه العلامات هي مدمج (مضمن، مستوى الخط)أي أنها لا تنشئ فواصل أسطر قبلها وبعدها، ولكنها تقع على سطر واحد. ويمكن أيضًا أن تحتوي فقط على عناصر مدمجة، بحيث يمكن تداخلها بحرية داخل بعضها البعض. الشيء الأكثر أهمية هو عدم نسيان التداخل الصحيح: العلامة التي تم فتحها مسبقًا يجب إغلاقها لاحقًا.
أعتقد أنك لاحظت وجود علامتين لكل منهما بالخط العريض والمائل. والحقيقة هي أن المتصفحات العادية تعرض محتويات هذه العلامات بنفس الطريقة، ولكن المتصفحات غير المرئية (الصوتية) يمكنها بشكل خاص التركيز على النص الموجود بداخلها و . لذلك، إذا كنت تريد تسليط الضوء على كلمات أو عبارات معينة لجذب القارئ، فمن الأفضل استخدام هذه العلامات، على الرغم من عدم وجود فرق بشكل عام.
قد تتساءل: "ولكن هل العلامات المذكورة أعلاه هي كل ما يمكن استخدامه لتمييز النص في HTML؟" حسنا بالطبع لا! هناك أيضًا علامات و ، ووضع خط تحت النص وكذلك العلامة ، عرض نص يتوسطه خط. ولكن، كما ترى، أصبحت هذه العلامات قديمة في HTML، ومثل سمة المحاذاة، قد لا تتمكن المتصفحات من فهمها قريبًا. ولذلك سأعرض لك طريقة أخرى يمكنك استخدامها دون خوف. وهو عبارة عن استخدام خاصية النمط، ويجوز تحديدها داخل أي علامات. بناء الجملة العام هو كما يلي:
<тег نمط = "زخرفة النص: تسطير">... - يؤكد على النص.
<тег style= "زخرفة النص:خط علوي">... - يؤكد النص.
<тег النمط= "زخرفة النص: خط من خلال">... - يشطب النص.
مثال على تغيير أنماط الخطوط
الخط الغامق. مائل.
مائل غامق.
ح 2لذا 4- صيغة حمض الكبريتيك مكتوبة بالخط المائل.
الفقرة التي تحتها خط من النص.
نص عادي، شطب بالخط العريض.
النتيجة في المتصفح
الآن أود أن أقدم توضيحًا واحدًا حول سمة النمط. النمط هو سمة علامة عادية تمامًا، ولكنها تتعلق بأوراق الأنماط المتتالية (CSS). في الماضي البعيد، تم الاستيلاء على جميع وظائف هيكلة صفحة HTML ككل والعرض الخارجي لكل عنصر على حدة (اللون والشكل والموضع على الصفحة، وما إلى ذلك) بواسطة لغة HTML. ولكن بعد ذلك قرر مطورو اللغة فصل هذه الوظائف وأنشأوا CSS. وبناءً على ذلك، أصبحت العديد من العلامات أو سمات العلامات قديمة. لذلك، حتى لا تملأ رأسك بمعلومات غير ضرورية، قمت أيضًا في هذا البرنامج التعليمي باستبدالها بالأنماط، أي سمة النمط. بناء الجملة العام الخاص به هو كما يلي:
<тег النمط= "خاصية CSS: القيمة">...
باستخدام الأسلوب، لن تفقد أي شيء على الإطلاق، ولكنك ستتعلم كيفية كتابة لغة HTML المختصة، وكمكافأة، ستتقن أيضًا القليل من لغة CSS.
بطاقة شعار أو ماذا تفعل عندما لا تكون هناك علامات ضرورية
حسنًا، هل كل شيء واضح حتى الآن؟ حسنا، ثم سؤال. ماذا ستفعل، على سبيل المثال، إذا كنت بحاجة إلى شطب الفقرة بأكملها، ولكن نصف النص فقط، وعدم جعلها غامقة أو مائلة؟ حسنًا، لا تقلق، هناك علامة واحدة مريحة وضرورية جدًا ستساعدك هنا.
إذن التقيا -.... هذه العلامة أيضا مدمج (مضمن، مستوى الخط)ويمكن أن تحتوي على أي علامات مدمجة، ولكن هذا ليس الشيء الرئيسي. وحدي بدون سمات، لا يضيف أي تغييرات على النص أو العلامات الموجودة بداخله. وقد تم إنشاؤه خصيصًا للأنماط، أي بشكل أساسي لسمة النمط. وبفضل هذه السمة، أو بالأحرى معانيها المختلفة، يتم ذلك تظهر خصائص معينة. هذا كل شيء، الآن دعونا ندرس مثالا.
مثال على استخدام علامة SPAN
نص عادي بدون تغييرات.
المزيد من النص العادي. مضغوط. شطب.
النتيجة في المتصفح
نص عادي بدون تغييرات.
المزيد من النص العادي. مضغوط. شطب.
تغيير اسم (محرف) الخط
لا أعرف ما هو اسم الخط؟ من المؤكد أن العديد منكم قد كتبوا نصًا مرة واحدة على الأقل في Microsoft Word أو OpenOffice Writer وشاهدوا هذه القائمة:
هذه هي أسماء الخطوط المتوفرة على جهاز الكمبيوتر الخاص بك ولا يتم استخدامها بواسطة Word أو Writer فحسب، بل أيضًا بواسطة العديد من التطبيقات الأخرى، بما في ذلك المتصفحات. يحدد اسم (محرف) الخط تصميمه نفسه، وهو ما يميز الخط عن الآخر.
لا أوصي بشدة باستخدام أي خطوط غريبة، لأنها قد لا تكون موجودة على جهاز الكمبيوتر الخاص بالشخص الذي يزور موقعك، ثم بدلاً من الحروف سيرى رموزًا أو مربعات مختلفة غير مفهومة. فيما يلي قائمة بالخطوط الأكثر شيوعًا والتي من المؤكد تقريبًا وجودها على كمبيوتر كل مستخدم:
بشكل افتراضي، تستخدم جميع المتصفحات تقريبًا الخط "Times New Roman"، ولتغييره، يتم استخدام نفس سمة النمط، والتي يمكن تطبيقها داخل أي علامة. بناء الجملة العام للتحديد هو:
<тег النمط= "عائلة الخط: اسم الخط، العائلة">...
إذا كان اسم الخط يتكون من عدة كلمات، فيجب أن يكون محاطًا بعلامات اقتباس مفردة. يُسمح بتحديد ليس واحدًا، بل عدة أسماء خطوط مفصولة بفواصل، وبعد ذلك، إذا لم يكن الخط الأول موجودًا على الكمبيوتر، فسيتم استخدام الخط الثاني والثالث وما إلى ذلك. لكن في النهاية تأكد من وضع اسم عائلة الخطوط بأكملها، في هذه الحالة، إذا لم يكتشف المتصفح خطًا واحدًا، فسيستخدم الخط الأكثر ملاءمة لهذه العائلة.
لتغيير الخط في الصفحة بأكملها، ما عليك سوى تحديد سمة النمط في العلامة
. وإذا كنت بحاجة إلى تغيير الخط لجزء منفصل من النص، فقم بإحاطته بعلامة وتطبيق السمة عليه.مثال على تغيير أسماء الخطوط
هذا خط Arial، إذا لم يكن موجودًا، فهو Verdana، وإذا لم يكن موجودًا، أي sans-serif آخر.
هذا هو Comic Sans MS أو أي خط متصل.
هذا مرة أخرى Arial أو Verdana أو أي نوع sans-serif. وهذا هو الساعي أو أي مساحة أحادية.
النتيجة في المتصفح
حسنًا، هل عرفت المثال؟ سأقدم تفسيرا واحدا، وفهمه سيجعل حياتك أسهل بكثير في المستقبل، على الرغم من أنني أعتقد أن الكثيرين قد خمنوا بالفعل. لذلك، إذا كانت العلامات متداخلة داخل بعضها البعض والعديد منها إجراء تغييرات من نفس النوع(على سبيل المثال، يقومون بتغيير اسم الخط)، ثم تتجاوز العلامات التابعة خصائص علامات الأسلاف. إذا كانت العلامات المتداخلة تنفذ تغييرات مختلفة، فإنها تكمل بعضها البعض، هذا كل شيء.
تغيير حجم الخط
تقتصر لغة HTML على سبعة أحجام خطوط فقط، وهو، كما ترى، صغير جدًا بالنسبة لموقع ويب جيد. ولهذا السبب كان الجميع يستخدم CSS لتغيير الحجم لفترة طويلة، والآن ستتعلم ذلك أيضًا.
هناك حوالي عشر وحدات قياس في CSS، لكننا سننظر فقط إلى الوحدات الثلاث الأكثر شيوعًا - النقاط (pt)، والبكسل (px) والنسب المئوية (٪). لذا:
- نقطة- النقاط. النقطة الواحدة تساوي 1/72 من البوصة، والبوصة الواحدة تساوي 2.54 سم. وبالتالي، 1 نقطة = 0.03527778 سم. هذه قيمة مطلقة، لأن الحجم المحدد بالنقاط لا يعتمد على أي شيء.
- بكسل- بكسل. تقاس بالبكسل في شاشة الكمبيوتر. البكسل هو أصغر نقطة على الشاشة وهي قيمة نسبية، حيث يعتمد حجمها على دقة الشاشة الحالية وحجم الشاشة نفسها.
- % - اهتمام. ويتم حسابها كنسبة مئوية، حيث تؤخذ 100% كقيمة للعلامة الأصل، وإذا لم يتم تحديدها، فهي القيمة الافتراضية في المتصفح. هذه أيضًا قيمة نسبية، لأن حجم الخط الأصلي يمكن أن يكون مختلفًا تمامًا، ويمكن للمستخدمين تغيير حجم الخط بحرية في المتصفح.
لتحديد حجم الخط، يتم استخدام سمة النمط ويمكن تحديدها داخل أي علامة. بناء الجملة العام هو:
<тег النمط = "حجم الخط: الحجم">...
كما هو الحال مع أسماء الخطوط، لتغيير حجم الخط في الصفحة بأكملها، ما عليك سوى تحديد سمة النمط في العلامة
. وإذا كنت بحاجة إلى تغيير الخط لجزء من النص، فقم بإدراجه في علامة وتطبيق السمة عليه.مثال على تغيير أحجام الخطوط
حجم الخط هذا هو 90% من حجم المتصفح الافتراضي.
هذا الحجم هو 90% من الحجم الموجود في علامة الجسم.
حجم خط العنوان هو 120% من حجم الجسم.
وهذا يمثل مرة أخرى 90% من الحجم الافتراضي في المتصفح. حجم الخط هذا هو 15 نقطة.
النتيجة في المتصفح
حجم الخط هذا هو 90% من حجم المتصفح الافتراضي.
وهذا الحجم يمثل 90% من حجم الجسم.
حجم خط العنوان هو 120% من حجم الجسم.
وهذا يمثل مرة أخرى 90% من الحجم الافتراضي في المتصفح. حجم الخط هذا هو 15 نقطة.
لا يعتمد حجم الخط على الإشارة الصريحة إليه فحسب، بل يعتمد أيضًا على اسمه (محرف الكتابة) - يمكن أن تحتوي الخطوط المختلفة على ارتفاعات وعرضات مختلفة تمامًا للأحرف، بالإضافة إلى تباعد الأحرف.
المزيد عن سمة النمط
حان الوقت لإخبارك بسر آخر لهذه السمة الرائعة، ولكن مرة أخرى سأطرح عليك سؤالاً أولاً. ماذا ستفعل إذا اضطررت إلى تعيين فقرة بأكملها باسم خط Arial بحجم 80٪؟ وسأخبرك أنك ستكتب شيئًا مثل هذا:
نص الفقرة.
نص الفقرة.
أو حتى مثل هذا.
نص الفقرة.
أنا على حق؟ حسنًا، إذا كان الخياران الأولان صحيحين من حيث المبدأ، فإن الخيار الأخير يعد خطأً بشكل عام، لأنه، إذا كنت تتذكر، لا يمكن أن تحتوي علامة واحدة على سمتين متطابقتين. الآن حان الوقت لتذكر أن النمط ليس مجرد سمة، بل هو سمة CSS. أنظر إلى هذا:
نص الفقرة.
أسهل بكثير، أليس كذلك؟ الشيء الأكثر أهمية هو عدم نسيان وضع فاصلة منقوطة (؛) بين الأنماط المتجاورة ووضع كل هذه الأشياء بين علامتي اقتباس مزدوجتين ("")، وإلا فسيتم تطبيق النمط الأول فقط، وسيتجاهل المتصفح الباقي. حسنًا، نحن دائمًا نضع علامات الاقتباس المزدوجة، أليس كذلك؟
لذلك، تبين أن هذا الدرس مكثف للغاية، لذا قم بواجبك المنزلي واستريح قليلاً.
العمل في المنزل.
- قم بإنشاء عنوان للمقالة وقسميها، ولكن ضع خطًا تحت عناوين الأقسام أيضًا.
- تأكد من أنه عند تحريك مؤشر الماوس فوق عنوان المقالة، يظهر النقش المقابل.
- اكتب فقرة واحدة في بداية المقال واثنين في كل قسم.
- قم بتعيين الصفحة بأكملها على الخط Arial بنسبة 90% من حجم المتصفح الافتراضي.
- اضبط جميع العناوين على خط Times واضبط عنوان المقالة على حجم خط 150% والعناوين الفرعية على 120%.
- في الفقرة الأولى، قم بتمييز كلمتين بالخط العريض وواحدة بالخط المائل. في الثانية - عبارة من عدة كلمات بخط مائل غامق. وفي الثالثة ضع خطا تحت العبارة المكتوبة بالخط المائل. وفي الرابع، شطب نصف العبارة بالخط العريض.
- اكتب صيغة الكحول في الفقرة الأخيرة: C2H5OH.
