Skip to main content

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

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

HTML و CSS: ما هي؟

HTML (HyperText Markup Language) أو لغة التركيب الفائقة للنصوص هي العمود الفقري للويب. تُستخدم لتحديد هيكل ومحتوى صفحات الويب. بينما يُستخدم CSS (Cascading Style Sheets) أو ورقات التنسيق المتدرجة لتحديد مظهر هذا المحتوى. ببساطة، يمكننا القول أن HTML يُعطي الصفحة هيكلها، بينما يُضفي CSS عليها الأناقة.

هناك توازي جميل بين HTML و CSS وبين عمل البناء وعمل التصميم. تخيل أن HTML يمثل البنية التحتية للمبنى، مثل الجدران والأسقف. في الجانب الآخر، يعتبر CSS كالدهان والديكور، الذي يجعل المبنى جذاباً ومُرحبًا.

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

استخدام CSS

CSS، أو ورقات التنسيق المتدرجة (Cascading Style Sheets)، هو لغة التصميم التي تُستخدم لتحسين مظهر صفحات الويب. لكن كيف نبدأ في استخدامها؟

الطريقة المُضمنة (Inline): يُمكنك تضمين CSS مباشرة في عناصر HTML باستخدام السمة style.

HTML
<p style="color:blue;">هذا نص أزرق</p>

الطريقة الداخلية (Internal): يُمكنك كتابة كود CSS داخل وسم <style> في قسم <head> من صفحة

HTML
<style> p { color: blue; } </style>

الطريقة الخارجية (External): هي الطريقة الأكثر شيوعًا وتُستخدم لتنسيق موقع كامل بملف CSS واحد. يتم ربط هذا الملف بصفحة HTML باستخدام وسم <link>

HTML
<link rel="stylesheet" type="text/css" href="styles.css">

لكل طريقة مزايا وعيوبها. لكن في العمل الاحترافي، تُفضل الطريقة الخارجية لأنها تجعل الصفحات أكثر تنظيمًا ويُسهل صيانتها.

محاذاة النص (Text Alignment)

من العوامل التي تُضيف لمسة احترافية لتصميم الصفحة هي كيفية محاذاة النصوص. في CSS، يُمكننا استخدام خاصية text-align للتحكم في محاذاة النص.

محاذاة يسرى (Left Alignment): تُستخدم لمحاذاة النص إلى اليسار.

CSS
p { text-align: left; }

محاذاة يمنى (Right Alignment): تُستخدم لمحاذاة النص إلى اليمين، وهي شائعة في اللغات التي تُقرأ من اليمين لليسار مثل العربية.

CSS
p { text-align: right; }

توسيط (Center): تُستخدم لتوسيط النص.

CSS
p { text-align: center; }

المحاذاة العادلة (Justify): تُستخدم لجعل كل الخطوط في الفقرة تأخذ نفس العرض.

CSS
p { text-align: justify; }

باختصار، خاصية text-align تُعطيك القدرة على التحكم في محاذاة النص بطرق مختلفة تُعزز من جودة تصميم صفحتك. إذا كنت جديدًا في عالم تصميم UX/UI، فإن فهم هذه الخاصية سيكون خطوة كبيرة في تطوير مهاراتك.

صيغة السمة النمطية (The Style Attribute Syntax)

في هذا القسم، سنتناول كيفية كتابة السمات النمطية في HTML باستخدام CSS. معرفة صيغة السمة النمطية مهمة لأنها تُمكنك من التحكم في العناصر الفردية بدقة.

الخاصية والقيمة (Property and Value): كل سمة نمطية تتألف من خاصية وقيمة. تُفصل بينهما بواسطة علامة النقطتين (:).

CSS
<p style="color: red;">هذا نص أحمر</p>

الفاصلة المنقوطة (Semicolon): تُستخدم لفصل بين عدة سمات نمطية.

CSS
<p style="color: red; font-size: 16px;">نص أحمر بحجم 16 بكسل</p>

الوحدات (Units): يُمكن استخدام وحدات مختلفة لتحديد القيم، مثل البكسل (px) أو النسب المئوية (%).

CSS
<p style="font-size: 2em;">نص بحجم مضاعف</p>

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

لون النص (Text Color)

تغيير لون النص هو واحد من أبسط الطرق لإضافة تأثيرات بصرية على صفحتك. يُمكننا استخدام خاصية color في CSS للقيام بذلك.

الألوان الرمزية (Named Colors): يُمكن استخدام أسماء الألوان مثل “red”، “blue”، “green”، إلخ.

CSS
p { color: red; }

القيم العشرية (Hexadecimal Values): تُستخدم لتحديد اللون باستخدام قيمة عشرية مثل #FF0000 للأحمر.

CSS
p { color: #FF0000; }

RGB و RGBA: يُمكن استخدام القيم العشرية للأحمر والأخضر والأزرق، وحتى الشفافية.

CSS
p { color: rgba(255, 0, 0, 0.5); }

HSL و HSLA: تُستخدم لتحديد اللون باستخدام اللون والتشبع والإضاءة.

CSS
p { color: hsla(0, 100%, 50%, 0.5); }

الفهم الجيد لكيفية استخدام خاصية color سيُمكنك من تحسين التصميم وجعله أكثر جاذبية للمستخدمين. استخدام الألوان بطريقة تُعزز من قابلية القراءة والوضوح مهم جداً في تصميم تجربة المستخدم.

حجم الخط (Font Size)

تحديد حجم الخط في صفحات الويب هو أمر مهم لقراءة النص وتجربة المستخدم العامة. يُمكن استخدام خاصية font-size في CSS لتحديد حجم الخط.

بكسل (Pixel): الوحدة الأكثر شيوعاً لتحديد حجم الخط.

CSS
p { font-size: 16px; }

النسب المئوية (Percentage): يُمكن استخدام النسب المئوية لتحديد حجم الخط بالنسبة لحجم الخط الأصلي.

CSS
p { font-size: 150%; }

EM و REM: هما وحدتان نسبيتان تُستخدمان لتحديد حجم الخط بالنسبة لحجم الخط الأصلي أو حجم الخط الجذري للصفحة.

CSS
p { font-size: 1.5em; }

VW و VH: وحدات العرض والارتفاع العرضي تُمكنك من تحديد حجم الخط بالنسبة لأبعاد النافذة.

CSS
p { font-size: 2vw; }

فهم كيفية استخدام خاصية font-size سيُعطيك المرونة لإنشاء تصاميم قابلة للتكيف والتفاعل مع أحجام الشاشة المختلفة.

لون الخلفية (Background Color)

لون الخلفية للعناصر في صفحات الويب يمكن أن يكون له تأثير كبير على التصميم العام وتجربة المستخدم. يُمكننا استخدام خاصية background-color لتحديد لون الخلفية.

الألوان الرمزية (Named Colors): مثل “red”، “blue”، “yellow”، إلخ.

CSS
div { background-color: red; }

القيم العشرية (Hexadecimal): مثل #FF5733 للأحمر الزاهي.

CSS
div { background-color: #FF5733; }

RGB و RGBA: لإضافة شفافية للون الخلفية.

CSS
div { background-color: rgba(255, 87, 51, 0.5); }

HSL و HSLA: لتحديد اللون باستخدام اللون والتشبع والإضاءة.

CSS
div { background-color: hsl(9, 100%, 60%); }

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

عائلة الخط (Font Family)

اختيار الخط الصحيح يمكن أن يُحدث فارقًا كبيرًا في تجربة المستخدم وفي كيفية تفاعل الزوار مع محتوى الموقع. يُمكننا استخدام خاصية font-family في CSS لتحديد عائلة الخط.

الخطوط السيريفية (Serif Fonts): مثل “Times New Roman”, “Georgia” إلخ.

CSS
p { font-family: "Times New Roman", serif; }

الخطوط بدون السيريف (Sans-Serif Fonts): مثل “Arial”, “Verdana”, “Helvetica” إلخ.

CSS
p { font-family: Arial, sans-serif; }

الخطوط الأحادية المسافة (Monospace Fonts): مثل “Courier New”, “Monaco” إلخ.

CSS
code { font-family: "Courier New", monospace; }

الخطوط الزخرفية والكتابية (Cursive & Fantasy Fonts): مثل “Comic Sans MS”, “Zapf-Chancery” إلخ.

CSS
h1 { font-family: "Comic Sans MS", cursive, fantasy; }

فهم كيفية استخدام font-family يساعد في تحسين جودة تصميم الموقع ويجعله يظهر بشكل متسق عبر مختلف الأجهزة والمتصفحات.

التباعد الداخلي (Padding)

التباعد الداخلي، أو “الحشو” كما يُعرف، يُستخدم لإنشاء مسافة بين الحدود الداخلية للعنصر والمحتوى الذي يحتويه. يُمكن استخدام خاصية padding في CSS لتحديد هذه المسافة.

التباعد الداخلي للأربع جوانب (All Sides): لتحديد التباعد الداخلي لجميع جوانب العنصر.

CSS
div { padding: 10px; }

التباعد الداخلي لجوانب محددة (Specific Sides): لتحديد التباعد الداخلي لجوانب محددة.

CSS
div { padding-top: 10px; padding-right: 20px; }

استخدام وحدات مختلفة (Different Units): مثل النسب المئوية، البكسل، الإيم، الريم، الفيوبورت.

CSS
div { padding: 2%; }

التباعد الداخلي والتصميم الاستجابي (Responsive Design): يُمكن استخدام الاستفسارات الإعلامية لضبط التباعد الداخلي بناءً على حجم الشاشة.

CSS
@media (max-width: 600px) { div { padding: 5px; } }

معرفة كيفية استخدام التباعد الداخلي بشكل صحيح يُعزز من جودة التصميم ويُحسن من تجربة المستخدم.

عرض الحدود، نمط الحدود، ولون الحدود (Border Width, Style, and Color)

الحدود تُضفي مظهرًا جماليًا على العناصر وتُساعد في تحديد المساحات والتقسيمات داخل صفحة الويب. يُمكننا استخدام مجموعة من خصائص CSS لتحديد عرض الحدود، نمطها، ولونها.

عرض الحدود (Border Width): يُمكن استخدام البكسل، الإيم، أو النسب المئوية لتحديد عرض الحدود.

CSS
div { border-width: 2px; }

نمط الحدود (Border Style): يُمكن اختيار من بين عدة أنماط مثل “solid”, “dotted”, “dashed”, etc.

CSS
div { border-style: solid; }

لون الحدود (Border Color): يُمكن استخدام الألوان الرمزية، القيم العشرية، أو القيم RGB.

CSS
div { border-color: #FF5733; }

جمع الخصائص في خاصية واحدة (Shorthand):

CSS
div { border: 2px solid #FF5733; }

فهم كيفية استخدام خصائص الحدود يُمكنك من إنشاء تصميمات جذابة وواضحة، ويُعزز من جودة العرض البصري للموقع.

خاصية اللون (The Color Property)

اللون هو واحد من العناصر الأساسية في تصميم واجهة المستخدم ويُمكن أن يُؤثر بشكل كبير في تجربة المستخدم. يُستخدم اللون في الخلفيات، النصوص، الحدود، والعديد من العناصر الأخرى. في CSS، يُمكننا استخدام خاصية color لتحديد لون النص.

الألوان السداسية العشرية (Hex Colors): تحديد اللون باستخدام قيمة سداسية عشرية مثل #FF5733.

CSS
p { color: #FF5733; }

الألوان باستخدام RGB و RGBA: لإضافة شفافية، يُمكن استخدام RGBA

CSS
.p { color: rgba(255,87,51, 0.5); }

لإضافة شفافية، يُمكن استخدام RGBA.

CSS
p { color: rgba(255,87,51, 0.5); }

الألوان الاسمية (Named Colors): مثل “red”, “blue”, “green” إلخ.

CSS
p { color: red; }

الألوان باستخدام HSL:

CSS
p { color: hsl(9, 100%, 60%); }

إتقان استخدام الألوان في CSS يُمكنك من إنشاء تصميمات تُركز على تحسين تجربة المستخدم وجذب الانتباه.

خاصية حجم الخط (The Font Size Property)

في تصميم الويب، حجم الخط يلعب دوراً مهماً في قابلية القراءة وتجربة المستخدم. يُمكننا استخدام خاصية font-size في CSS لتحديد حجم النص.

بكسل (Pixels): يُعتبر البكسل وحدة قياس ثابتة وسهلة الاستخدام.p { font-size: 16px; }

إيم وريم (EM and REM): هذه الوحدات مرنة وتُعتمد على حجم الخط الأصلي للصفحة أو العنصر الأب.

CSS
p { font-size: 1em; /* Relative to parent's font size */ } h1 { font-size: 2rem; /* Relative to root font size */ }

نسب مئوية (Percentage): يُمكن استخدام النسب المئوية لتحديد حجم الخط بالنسبة للعنصر الأب.

CSS
p { font-size: 110%; }

وحدات الفيوبورت (Viewport Units): يُمكن استخدام وحدات مثل vw و vh لجعل حجم الخط متكيفًا مع حجم الشاشة.

CSS
p { font-size: 3vw; }

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

خاصية التوسيط النصي (The Text-Align Property)

التوسيط النصي هو عنصر تصميمي مهم لأغراض الجمالية والفهم. يُمكننا استخدام خاصية text-align في CSS لتحديد كيفية محاذاة النص داخل العنصر.

توسيط إلى اليسار (Left Align): هو الإعداد الافتراضي ويُفضل في اللغات التي تُقرأ من اليسار إلى اليمين.

CSS
p { text-align: left; }

توسيط إلى اليمين (Right Align): يُفضل في اللغات التي تُقرأ من اليمين إلى اليسار مثل العربية.

CSS
p { text-align: right; }

توسيط في الوسط (Center Align): يُستخدم عادةً للعناوين أو لجعل النص يظهر بشكل متماثل.

CSS
h1 { text-align: center; }

محاذاة مُعدلة (Justify Align): هذا النوع من التوسيط يُوزع النص بالتساوي عبر العرض الكامل للعنصر.

CSS
p { text-align: justify; }

الفهم الجيد لكيفية استخدام خاصية التوسيط النصي يُمكنك من تقديم محتوى مُنظم وجذاب بصرياً.

خاصية اللون الخلفي (The Background Color Property)

اللون الخلفي يعتبر واحد من العوامل المؤثرة في تجربة المستخدم ويُمكن استخدامه لجذب الانتباه أو التأكيد على معلومات معينة. لتعيين اللون الخلفي للعنصر في CSS، نستخدم خاصية background-color.

ألوان النص السداسية (Hex Colors):

CSS
div { background-color: #33CC33; }

ألوان RGB و RGBA:

CSS
div { background-color: rgb(51, 204, 51); }

  • لإضافة الشفافية، نستخدم RGBA.

CSS
div { background-color: rgba(51, 204, 51, 0.5); }

ألوان اسمية (Named Colors):

CSS
div { background-color: green; }

ألوان HSL:

CSS
div { background-color: hsl(120, 60%, 50%); }

اختيار اللون الخلفي يُمكن أن يُغير بشكل كبير من الشكل والإحساس العام للصفحة، لذا يُفضل دائماً اختيار الألوان التي تُناسب الهوية البصرية للموقع.

خاصية الحشو (The Padding Property)

الحشو هو المساحة التي تفصل العنصر عن محتواه الداخلي. خاصية padding في CSS تُمكننا من التحكم في هذه المساحة.

حشو من جميع الجهات (Uniform Padding): يُمكن تحديد الحشو من جميع الجهات باستخدام قيمة واحدة.

CSS
div { padding: 20px; }

حشو منفصل لكل جهة (Individual Padding): يُمكن تحديد الحشو لكل جهة على حدة.

CSS
div { padding-top: 20px; padding-right: 15px; padding-bottom: 20px; padding-left: 15px; }

اختصارات الحشو (Padding Shorthand): يُمكن استخدام الاختصارات لتحديد الحشو لجميع الجهات في سطر واحد.

CSS
div { padding: 20px 15px; }

الحشو باستخدام النسب المئوية (Percentage Padding): يُمكن استخدام نسب مئوية بناءً على العرض الكلي للعنصر الأب.

CSS
div { padding: 5%; }

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

الختام

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

الأسئلة الشائعة (FAQs)

ما هي HTML وCSS؟

HTML هي لغة العلامة التي تُستخدم لبناء هيكل الموقع، بينما يُستخدم CSS لتنسيق المظهر والتصميم.

كيف يمكنني تحديد لون النص في CSS؟

يُمكنك استخدام خاصية color وتحديد اللون المرغوب به.

ما هو الفرق بين em و rem في حجم الخط؟

الوحدة em تعتمد على حجم الخط للعنصر الأب، بينما rem تعتمد على حجم الخط للعنصر الجذر (عادة ما يكون ).

هل يُمكنني دمج خصائص الحدود في خاصية واحدة؟

نعم، يُمكنك استخدام الصيغة المختصرة border لدمج العرض، النمط، واللون.

كيف يُمكنني جعل الحدود مُستديرة؟

يُمكنك استخدام خاصية border-radius لتحديد مدى تقريب الحدود.

التحضير لمتجر التطبيقات (App Store) وجوجل بلاي (Google Play)

التحضير لمتجر التطبيقات (App Store) وجوجل بلاي (Google Play)

دليل شامل يرشدك خطوة بخطوة لتحضير تطبيقك للإطلاق على متجر التطبيقات وجوجل بلاي، بدءًا من…
تقنيات التفكير الإبداعي والتخطيط الأولي للأفكار: إجراءات سريعة لتوليد الأفكار

تقنيات التفكير الإبداعي والتخطيط الأولي للأفكار: إجراءات سريعة لتوليد الأفكار

استكشف تقنيات توليد الأفكار السريعة والتخطيط الأولي للأفكار، مثل تقطيع الفيل ورسم الخرائط الذهنية ورسم…
أدوات الوصول: كيف تجعل تصميمك متوافقًا مع WCAG

أدوات الوصول: كيف تجعل تصميمك متوافقًا مع WCAG

تعرّف على أفضل الأدوات التي يمكن استخدامها لضمان توافق موقعك الإلكتروني مع معايير WCAG للوصول.…