وسم الفقرات في إتش تي ام ال paragraph tag
عنصر الفقرات في أتش تي ام ال
HTML Element Paragraphs
في عالم برمجة الويب، يلعب وسم الفقرة (<p>) دورًا أساسيًا في تنظيم وتنسيق النصوص على صفحات الويب. يُعد وسم الفقرة واحدًا من أهم العناصر في لغة ترميز النصوص الفائقة (HTML)، وهو يسمح بتحديد بداية ونهاية فقرة نصية.
لماذا وسم الفقرة مهم؟
تنظيم النصوص: يُستخدم وسم الفقرة لفصل النصوص وتنظيمها بشكل منطقي، مما يسهل فهم وقراءة المحتوى.
تحديد أنطقة النصوص: يمكنك استخدام وسم الفقرة لتحديد أجزاء محددة من النص، مما يتيح لك تطبيق أنماط وتنسيقات خاصة على هذه الأجزاء.
تعتبر وسم الفقرة في HTML من الوسوم الأساسية التي تستخدم لتنظيم وتنسيق المحتوى النصي على صفحات الويب. يُستخدم وسم الفقرة لإظهار فقرة نصية واحدة على الصفحة. لاستخدام وسم الفقرة، يتم استخدام العلامة <p>.
على سبيل المثال، إذا كنت تريد عرض فقرة نصية على صفحتك الويب، يمكنك استخدام وسم الفقرة كما يلي:
<p>هذا هو نص الفقرة الذي يظهر على صفحتي الويب.</p>
في هذا المثال، يتم فتح الوسم <p> في بداية النص ويتم إغلاقه في نهايته.
النص الذي يظهر بين الوسمين هو المحتوى النصي للفقرة.
يتم عرض هذا النص بشكل افتراضي بفصله عن النصوص الأخرى على الصفحة باستخدام مسافة فارغة من الأعلى والأسفل.
يمكنك استخدام وسم الفقرة في أماكن متعددة على صفحتك لتنظيم المحتوى النصي وتحديد فقرات مختلفة. تعتبر هذه الطريقة أساسية في بناء هيكل صفحات الويب باستخدام لغة HTML.
بالطبع، إليك مثال شامل يستخدم وسم الفقرة في صفحة HTML بسيطة:
<!DOCTYPE html> <html lang="ar"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>مثال على وسم الفقرة في HTML</title> </head> <body> <h1>مرحبًا بك في صفحتي الويب</h1> <p>هذا مثال بسيط يستخدم وسم الفقرة في HTML لعرض نص في فقرة واحدة.</p> <p>يمكنك استخدام وسم الفقرة لتنظيم المحتوى النصي على صفحتك بشكل أفضل وتحديد فقرات مختلفة.</p> <p>شكرًا لزيارتك!</p> </body> </html>
في هذا المثال، تم استخدام وسم الفقرة <p> لإنشاء ثلاث فقرات مختلفة تحت عنوان <h1>، والذي يمثل عنوان الصفحة.
يمكنك فتح هذا المثال في متصفح الويب لرؤية كيف يتم عرض النص في فقرات مختلفة على الصفحة.
استخدامات وسم الفقرة HTML
Uses HTML Paragraphs tag
يُستخدم لتنظيم وتشكيل النصوص في صفحات الويب.
يتم استخدام وسم الفقرة <p> لإظهار نص كفقرة منفصلة، وهو يفيد في جعل الصفحة أكثر تنظيمًا وسهولة قراءة.
إليك بعض الأمثلة التوضيحية على استخدام وسم الفقرة:
مثال
انشاء فقرة واحدة
<!DOCTYPE html> <html lang="ar"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>استخدام وسم الفقرة</title> </head> <body> <p>هذا نص في فقرة واحدة. يتم استخدام وسم الفقرة لتحديد بداية ونهاية النص في الفقرة.</p> </body> </html>
مثال
انشاء عدة فقرات
<!DOCTYPE html> <html lang="ar"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>استخدام وسم الفقرة</title> </head> <body> <p>هذا نص في فقرة أولى.</p> <p>وهذا نص في فقرة ثانية. يمكن أن تكون لديك عدة فقرات تحتوي على محتوى مختلف.</p> <p>وأخيرًا، هذه فقرة ثالثة تحتوي على نص آخر.</p> </body> </html>
استخدام النصوص التنسيقية
<!DOCTYPE html> <html lang="ar"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>استخدام وسم الفقرة</title> </head> <body> <p><strong>هذا نص مهم ومميز.</strong> يمكنك استخدام علامات التنسيق مثل <em>التشديد</em> و <u>التسطير</u> لتحسين المظهر.</p> </body> </html>
تتيح وسم الفقرة في HTML للمطورين تنظيم المحتوى النصي بشكل مناسب، سواء كان ذلك لكتابة فقرة بسيطة أو لتقديم معلومات متعددة في فقرات منفصلة.
سمات وخصائص وسم الفقرة
Attributes of HTML Paragraphs tag
وسم الفقرة في HTML (<p>) يمكن أن يحتوي على بعض السمات (Attributes) التي تساعد في تحديد خصائص الفقرة أو تزويدها بمعلومات إضافية. ولكن يجب أن نلاحظ أن وسم الفقرة عادةً لا يحتاج إلى سمات كثيرة، حيث يتم استخدامه بشكل أساسي لتقديم النص في فقرة منفصلة.
استخدام السمات العامة مع وسم الفقرة
Using global attributes with paragraph tag
السمات العامة (Global Attributes) في HTML هي سمات يمكن استخدامها مع أي وسم في HTML، بما في ذلك وسم الفقرة (<p>). هذه السمات توفر خصائص عامة يمكن تطبيقها على مختلف العناصر.
إليك شرحٌ لبعض السمات العامة مع أمثلة توضيحية:
class (الفئة)
يتيح لك تحديد الفئة التي ينتمي إليها الوسم.
يمكن استخدامها لتطبيق تنسيقات CSS محددة.
<p class="highlight">هذا نص في فقرة بفئة تسمى "highlight".</p>
id (المعرف)
يمكن استخدامه لتحديد مُعرِّف فريد للوسم، ويستخدم غالبًا في CSS أو JavaScript للرجوع إليه.
<p id="intro">هذا هو فقرة التقديم.</p>
style (النمط)
يمكنك استخدامه لتحديد تنسيقات CSS مباشرة داخل الوسم.
<p style="color: blue; font-size: 16px;">هذا نص مُنسّق مباشرة باستخدام السمة "style".</p>
dir (اتجاه النص)
يحدد اتجاه النص في الفقرة، ويمكن أن يكون “rtl” للنصوص من اليمين لليسار أو “ltr” للنصوص من اليسار لليمين .
هذه السمة مهمة جدا لو اردنا انشاء صفحة محتواه باللغة العربية فلابد من تحديد اتجاه الصفحة والا سيظهر المتحوي غير منسق.
<p dir="rtl">هذا نص باتجاه من اليمين لليسار.</p>
اللغة lang
يحدد لغة النص في الفقرة، ويساعد في تحديد اللغة لأغراض تخصيص العرض.
<p lang="en">This is a paragraph in English.</p>
هذه السمات تعتبر اختيارية وتعتمد على الاحتياجات الخاصة بالمشروع.
يمكنك استخدام هذه السمات لتعزيز تحكمك في التنسيق وتحديد الخصائص الإضافية للفقرة وتكاملها مع التنسيقات الأخرى في صفحتك.
العنوان title
تُستخدم لتوفير نص توضيحي يظهر عند تحوي مؤشر الماوس فوق العنصر.
<p title="توضيح: هذا النص في فقرة.">هذا نص في فقرة.</p>
مثال شامل يستخدم بعض السمات المشار إليها مع وسم الفقرة في HTML:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>استخدام سمات وسم الفقرة في HTML</title>
<style>
.highlight {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p id="intro" class="highlight" lang="ar" dir="rtl" style="font-size: 18px;">
هذا نص في فقرة بفئة تسمى "highlight". يتم استخدام السمات مثل id وclass وlang وdir وstyle لتحديد خصائص الفقرة.
</p>
<p>
وهذه فقرة أخرى بدون سمات، فقط لتوضيح الاستخدام الأساسي لوسم الفقرة.
</p>
</body>
</html>
في هذا المثال:
- تم استخدام id=”intro” لتحديد مُعرف للفقرة.
- تم استخدام class=”highlight” لتطبيق تنسيقات CSS محددة عبر الفئة “highlight”.
- تم استخدام lang=”ar” لتحديد لغة النص في الفقرة.
- تم استخدام dir=”rtl” لتحديد اتجاه النص من اليمين لليسار.
- تم استخدام style=”font-size: 18px;” لتحديد تنسيقات CSS مباشرة داخل الوسم.
يمكنك فتح هذا المثال في متصفح الويب لرؤية كيف يؤثر كل من هذه السمات على تنسيق وعرض النص في الصفحة.
مثال شامل:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>استخدام سمات وسم الفقرة في HTML</title>
<style>
.highlight {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p id="intro">هذا هو فقرة التقديم.</p>
<p id="intro" class="highlight" lang="ar" dir="rtl" style="font-size: 18px;">
هذا نص في فقرة بفئة تسمى "highlight". يتم استخدام السمات مثل id وclass وlang وdir وstyle لتحديد خصائص الفقرة.
</p>
<p style="color: blue; font-size: 16px;">هذا نص مُنسّق مباشرة باستخدام السمة "style".</p>
<p title="توضيح: هذا النص في فقرة.">هذا نص في فقرة.</p>
<p>
وهذه فقرة أخرى بدون سمات، فقط لتوضيح الاستخدام الأساسي لوسم الفقرة.
</p>
<p lang="en">This is a paragraph in English.</p>
<p dir="rtl">هذا نص باتجاه من اليمين لليسار.</p>
</body>
</html>
وسم الاقتباس
Blockquotes
وسم الاقتباس (<blockquote>) في HTML يستخدم لتحديد مقتطف من نص تم استعارته من مصدر خارجي، مثل مقولة أو فقرة من مقالة. يُستخدم لإبراز هذا النص وجعله يبرز عن بقية المحتوى.
إليك شرح مع مثال:
- فتح وسم الاقتباس <blockquote>: يُستخدم لبدء النص الذي نريد تحديده كاقتباس.
- إغلاق وسم الاقتباس </blockquote>: يُستخدم لإنهاء النص المحدد كاقتباس.
- استخدام وسم <p> داخل وسم الاقتباس (اختياري): يمكن استخدام وسم الفقرة <p> داخل وسم الاقتباس لتنظيم النص داخله.
مثال:
-
<!DOCTYPE html> <html lang="ar"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>وسم الاقتباس في HTML</title> </head> <body> <h1>مقولة اليوم</h1> <blockquote> <p>العقل هو ليس إلا ذلك الشيء الذي يُمكننا من تصور كل شيء.</p> <footer>ألبرت أينشتاين</footer> </blockquote> <p>يمكننا وضع محتوى آخر هنا، لا يتأثر بوسم الاقتباس.</p> </body> </html>
في هذا المثال، يتم استخدام وسم الاقتباس لتحديد مقولة ويتم تنظيمها بوسم الفقرة <p> داخل وسم الاقتباس.
- كما يتم استخدام وسم <footer> لتحديد المعلومات المتعلقة بالمصدر أو الشخص الذي قال المقولة.
- يمكنك رؤية كيف يمكن استخدام وسم الاقتباس لتمييز النص الذي يأتي من مصدر خارجي بطريقة أكثر بروزًا.
خيارات النص
Text Option
من الأمور المهمة التي يمكن القيام بها في HTML هي تحديد بعض الخيارات للنصوص، مثل تحديدها كنص عريض (Bold) أو مائل (Italic).
تستخدم عناصر <b> و <i> و <strong> و <em> لتحقيق هذه الخيارات.
إليك شرح مع أمثلة:
وسم النص العريض
<b> و <strong>
يتم استخدام <b> و <strong> لتحديد النص وجعله عريضًا.
و <strong> تعطي أهمية أكبر للنص من <b>.
الشرح:
<b>: تطبيق عرض النص العريض بشكل بسيط.
<strong>: يعبر عن أهمية كبيرة للنص، ويتم تظليله بشكل أكبر.
مثال:
<p>هذا نص <b>عريض</b> وهذا نص <strong>أهم</strong>.</p>
وسم النص المائل <i> و <em>
يتم استخدام <i> و <em> لتحديد النص وجعله مائلًا.
الشرح:
<i>: تطبيق عرض النص المائل بشكل بسيط.
<em>: يعبر عن التأكيد على النص بشكل مائل، ويعزز المغزى.
مثال:
<p>هذا نص <i>مائل</i> وهذا نص <em>تأكيد مائل</em>.</p>
في هذه الأمثلة، يمكنك استخدام عناصر <b>، <i>، <strong>، <em> لتحديد النص بشكل معين وتطبيق التنسيق المناسب وفقًا للغرض.
تعتبر هذه الخيارات أمورًا أساسية في تنسيق النصوص في صفحات الويب.
تسطير النص <u>
تستخدم <u> لتحديد النص وتسطيره.
مثال:
<p>هذا نص <u>مسطّر</u>.</p>
وسم نص مشطوب <s>
تستخدم <s> لتحديد النص وجعله مشطوبًا.
مثال:
<p>هذا نص <s>مشطوب</s>.</p>
وسم النص الفرعي والنص الفوقي
<sub> و <sup>
تستخدم <sub> لتقديم النص الفرعي (مثل الأسفل)، و<sup> لتقديم النص الفوقي (مثل الأعلى).
مثال:
<p>هذا <sub>نص فرعي</sub> وهذا <sup>نص فوقي</sup>.</p>
حذف النص <del>
تستخدم <del> لتحديد النص وتظهيره كمحتوى تم حذفه.
مثال:
<p>تم <del>حذف</del> هذا النص.</p>
إدراج النص <ins>
تستخدم <ins> لتحديد النص وتظهيره كمحتوى تم إدراجه.
مثال:
<p>تم <ins>إدراج</ins> هذا النص.</p>
تلك هي بعض الأمثلة على كيفية استخدام بعض العناصر في HTML لتنسيق النصوص.
يمكنك استخدام هذه العناصر بحرية لتحسين مظهر النصوص وتوفير التأكيد على المغزى أو الأهمية.
تحديد النص <mark>
تستخدم <mark> لتحديد النص وتظليله لجعله بارزًا.
مثال:
<p>هذا <mark>نص بارز</mark>.</p>
كود المصدر <code>
تستخدم <code> لتحديد النص وعرضه ككود المصدر.
مثال:
<p>يمكن استخدام الوسم <code><code></code> لتحديد نص الكود.</p>
الاختصار <abbr>
تستخدم <abbr> لتحديد النص كاختصار وتوفير توضيح عند تحوي مؤشر الماوس.
مثال:
<p><abbr title="World Health Organization">WHO</abbr> هي منظمة الصحة العالمية.</p>
الاقتباس <cite>
تستخدم <cite> لتحديد النص الذي يشير إلى عنوان مرجعي أو عمل.
مثال:
<p><cite>ألبرت أينشتاين</cite> قال: "الإبداع هو الذكاء يستمتع باللعب."</p>
اقتباس قصير <q>
تستخدم <q> لتحديد النص كاقتباس قصير ويتم تحديده بعلامات اقتباس تلقائيا.
مثال:
<p><q>العلم بلا دين مقلب، والدين بلا علم أعمى.</q></p>
نص صغير <small>
تستخدم <small> لتحديد النص وجعله أصغر حجمًا.
مثال:
<p><small>هذا نص بحجم صغير.</small></p>
نص قوي <strong>
تستخدم <strong> لتحديد النص وجعله أكثر قوة.
مثال:
<p>هذا <strong>نص قوي</strong>.</p>
نص فوقي ونص تحتي
<sup> و <sub>
تستخدم <sup> لرفع النص أعلى، و<sub> لخفض النص أسفل.
مثال:
<p>هذا <sup>نص فوقي</sup> وهذا <sub>نص تحتي</sub>.</p>
عنصر مستقل
<span>
تستخدم <span> لتحديد النص دون تغيير هيكل النص العام.
مثال:
<p>هذا <span style="color: red;">نص بلون أحمر</span>.</p>
الوقت <time>
تستخدم <time> لتحديد النص المرتبط بالوقت، مثل تاريخ أو وقت.
مثال:
<p>تم نشر هذا المقال في <time datetime="2023-01-01">1 يناير 2023</time>.</p>
مثال يستخدم مجموعة من العناصر لتنسيق النصوص في HTML:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>أمثلة على تنسيق النصوص في HTML</title>
<style>
/* تحديد أنماط الألوان للاستخدام في الأمثلة */
.highlight-text {
color: blue;
}
.important-text {
font-weight: bold;
}
.italic-text {
font-style: italic;
}
.underline-text {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>أمثلة على تنسيق النصوص</h1>
<p>هذا <span class="highlight-text">نص بلون أزرق</span> وهذا <span class="important-text">نص هام</span>.</p>
<p>هذا <strong>نص قوي</strong> وهذا <em>نص مائل</em> وهذا <u>نص مسطّر</u>.</p>
<p>يمكننا استخدام <span class="underline-text">التنسيقات</span> بشكل <span class="italic-text">مباشر</span> أو عبر <code>التنسيقات في CSS</code>.</p>
<p>تم نشر هذا المقال في <time datetime="2023-01-01">1 يناير 2023</time>.</p>
</body>
</html>
في هذا المثال:
- تم استخدام العديد من العناصر مثل <span> و <strong> و <em> و <u> لتحديد النص بشكل محدد.
- تم استخدام العنصر <time> لتحديد تاريخ النشر.
- تم استخدام الأنماط في CSS لتحديد بعض التنسيقات مثل لون النص والخط العريض.
يمكنك فتح هذا المثال في متصفح الويب الخاص بك لرؤية كيف يتم تنسيق النصوص باستخدام هذه العناصر والأنماط.
تطبيق أنماط على الفقرات
apply custom styles to paragraphs
لتطبيق أنماط مخصصة إلى فقرات HTML، يمكننا استخدام السمات العامة (Global Attributes) مع وسم الفقرة <p> أو استخدام CSS لتخصيص التنسيق. إليك شرح مع أمثلة:
استخدام السمات العامة
يمكنك استخدام السمات مثل class أو style لتطبيق أنماط مخصصة.
الشرح:
class: يمكن استخدامها لتحديد فئة CSS.
المثال:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>تطبيق أنماط مخصصة للفقرات</title>
<style>
.custom-paragraph {
color: green;
font-size: 18px;
font-weight: bold;
}
</style>
</head>
<body>
<p class="custom-paragraph">هذا نص في فقرة مخصصة.</p>
<p>وهذه فقرة أخرى بدون تأثيرات.</p>
</body>
</html>
استخدام CSS مباشرة
يمكنك استخدام CSS مباشرة داخل الوسم <style> لتخصيص تنسيق الفقرات.
مثال:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>تطبيق أنماط مخصصة للفقرات</title>
<style>
p.custom-paragraph {
color: blue;
font-size: 16px;
text-align: center;
}
</style>
</head>
<body>
<p class="custom-paragraph">هذا نص في فقرة مخصصة.</p>
<p>وهذه فقرة أخرى بدون تأثيرات.</p>
</body>
</html>
في هذين المثالين، يتم تعريف أنماط مخصصة للفقرات باستخدام السمات class أو CSS المباشرة. يمكنك تعديل الخصائص والأنماط حسب احتياجاتك لتحقيق التنسيق المرغوب.
المسافة البادئة للفقرة
:Indenting Text Option
ترتيب النصوص (Indentation) هو عملية إضافة مسافات أو همزات عند بداية سطر جديد لتحقيق تهذيب وتنظيم أفضل للنص. يمكن استخدام خيارات ترتيب النصوص لتحقيق هذا التأثير في HTML.
هنا توجد بعض الطرق المشتركة:
استخدام وسم <blockquote>
يمكنك استخدام وسم الاقتباس (<blockquote>) لترتيب النص بشكل تلقائي وإظهاره بمستوى أعلى عند عرضه في المتصفح.
الشرح:
<blockquote>: يستخدم لتحديد مقتطف النص وترتيبه.
مثال:
<!DOCTYPE html> <html lang="ar"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ترتيب النص باستخدام <blockquote></title> </head> <body> <blockquote> هذا نص مقتبس. يظهر بمستوى أعلى عند عرضه في المتصفح. </blockquote> <p>هذا نص آخر دون ترتيب.</p> </body> </html>
استخدام CSS للهمزة margin
يمكنك استخدام CSS لتحديد المسافة من الهمزة (margin) لتحقيق الترتيب.
الشرح:
margin: يستخدم لتحديد المسافة بين العنصر والعناصر الأخرى.
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ترتيب النص باستخدام CSS</title>
<style>
.indented-text {
margin-left: 20px;
}
</style>
</head>
<body>
<p class="indented-text">هذا نص مع همزة محددة باستخدام CSS.</p>
<p>هذا نص آخر دون ترتيب.</p>
</body>
</html>
يمكنك تعديل قيمة margin-left بحسب احتياجاتك لتحقيق الترتيب المرغوب.
إضافة هوامش ومسافات فاصلة للنص
Adding Margins and Padding Option
في HTML و CSS، يمكنك استخدام الهمزة (margins) والتباعد الداخلي (padding) لتحديد المسافات بين العناصر وتحسين تنسيق صفحتك. إليك شرح مع أمثلة:
الهوامش Margins)
الهامش هي المسافة بين الحدود الخارجية لعنصر والعناصر الأخرى. يمكنك تحديد الهمزة باستخدام خاصية margin في CSS.
الشرح:
margin: تحديد المسافة بين العنصر والعناصر الأخرى.
مثال:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>استخدام الهمزة (Margins)</title>
<style>
.margined-element {
margin: 20px;
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<div class="margined-element">
<p>هذا نص داخل عنصر مع همزة.</p>
</div>
<p>هذا نص بدون ترتيب.</p>
</body>
</html>
التباعد الداخلي Padding
التباعد الداخلي هو المسافة بين حاشية العنصر ومحتواه الداخلي. يمكنك تحديد التباعد الداخلي باستخدام خاصية padding في CSS.
الشرح:
padding: تحديد المسافة بين حاشية العنصر ومحتواه.
مثال:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>استخدام التباعد الداخلي (Padding)</title>
<style>
.padded-element {
padding: 20px;
border: 1px solid black;
margin: 10px;
}
</style>
</head>
<body>
<div class="padded-element">
<p>هذا نص داخل عنصر مع تباعد داخلي.</p>
</div>
<p>هذا نص بدون ترتيب.</p>
</body>
</html>
يمكنك تعديل قيم margin و padding حسب احتياجات تصميم صفحتك لتحقيق التنسيق المناسب.
الشرح:
الهوامش والتباعد الداخلي للجهات الأربع
margin و padding
يمكنك تحديد الهمزة والتباعد الداخلي للجهات الأربع (أعلى وأسفل واليسار واليمين) بشكل منفصل باستخدام الخصائص المحددة مثل margin-top و margin-bottom و margin-left و margin-right، ونفس الشيء ينطبق على padding.
مثال:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>الهمزة والتباعد الداخلي للجهات الأربع</title>
<style>
.custom-element {
margin-top: 10px;
margin-bottom: 20px;
margin-left: 30px;
margin-right: 40px;
padding-top: 15px;
padding-bottom: 25px;
padding-left: 35px;
padding-right: 45px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="custom-element">
<p>هذا نص داخل عنصر مع همزة وتباعد داخلي للجهات الأربع.</p>
</div>
<p>هذا نص بدون ترتيب.</p>
</body>
</html>
في هذا المثال، تم تحديد الهمزة والتباعد الداخلي للجهات الأربع باستخدام الخصائص المحددة. يمكنك تعديل القيم حسب احتياجات التصميم الخاصة بك.
الخط الفاصل
Line Breaks
في HTML، يمكنك استخدام عنصر <br> (وهو عبارة عن اختصار لـ “line break”) لإدراج فاصلة السطر، مما يتيح لك إنهاء السطر الحالي والبدء في سطر جديد.
دعنا نشرح ذلك بمثال:
الشرح:
<br>: يستخدم لإدراج فاصلة السطر
مثال:
<!DOCTYPE html> <html lang="ar"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>استخدام فاصلة السطر</title> </head> <body> <p>هذا نص يظهر في سطر واحد.</p> <!-- استخدام فاصلة السطر لإنهاء السطر والبدء في سطر جديد --> <p>هذا نص يظهر في سطر واحد.<br>وهذا نص في سطر جديد.</p> <p>وهنا نص آخر يظهر في سطر واحد.</p> </body> </html>
في هذا المثال، تم استخدام <br> لإدراج فاصلة السطر بين الجملة الثانية والثالثة، مما أدى إلى إظهار الجملة الثانية في سطر جديد. يُلاحظ أن هذا العنصر لا يحتاج إلى وسم إغلاق، ويمكن استخدامه داخل أي وسم نصي في HTML.
الاستخدامات الأخرى لفاصلة السطر
في النص:
يمكن استخدام <br> لإدراج فواصل بين الكلمات أو الجمل للحصول على تنسيق نصي محدد.
<p>أول سطر.<br>ثاني سطر.</p>
في العناوين
يمكن استخدام <br> لفرض سطر جديد داخل عناوين الصفحة.
<h1>عنوان رئيسي<br>بسطر جديد</h1>
في القوائم
يمكن استخدام <br> داخل القوائم لتقسيم العناصر على أكثر من سطر.
<ul> <li>عنصر 1<br>عنصر 2</li> </ul>
في العناصر الأخرى
يمكن استخدام <br> داخل العديد من العناصر لتحقيق التنسيق المطلوب.
<div> <p>فقرة 1</p> <p>فقرة 2<br>مع فاصلة السطر</p> </div>
يرجى ملاحظة أن استخدام <br> بشكل متكرر قد يؤدي إلى تعقيدات في صيانة الكود وقد لا يكون الحلا المثلى في بعض الحالات. في معظم الحالات، يُفضل استخدام CSS لتحقيق تنسيقات أفضل، مع الأخذ في اعتبارك أنه يعتمد على السياق والتصميم العام للصفحة.
مثال شامل
يستخدم فاصلة السطر (<br>) في سياقات مختلفة
<!DOCTYPE html>
< dir =rtl html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>مثال شامل على فاصلة السطر</title>
<style>
/* تخصيص الأسلوب لأغراض التوضيح */
body {
font-family: Arial, sans-serif;
}
.highlight-text {
color: blue;
}
</style>
</head>
<body>
<h1>مثال على فاصلة السطر</h1>
<p>هذا مثال على استخدام فاصلة السطر لتقسيم النص:</p>
<h2>فاصلة السطر في النص:</h2>
<p>هذا نص مكتوب في سطر واحد.<br>وهذا نص في سطر جديد بعد استخدام فاصلة السطر.</p>
<h2>فاصلة السطر في العنوان:</h2>
<h3>عنوان 1<br>عنوان 2</h3>
<h2>فاصلة السطر في القائمة:</h2>
<ul>
<li>عنصر 1<br>عنصر 2</li>
</ul>
<h2>فاصلة السطر في عناصر مختلفة:</h2>
<div>
<p>فقرة 1</p>
<p>فقرة 2<br>مع فاصلة السطر</p>
<p>فقرة 3</p>
</div>
<h2>فاصلة السطر مع تخصيص الأسلوب:</h2>
<p>يمكن تحديد <span class="highlight-text">فاصلة السطر</span> بألوان مختلفة أو أنماط.</p>
</body>
</html>
في هذا المثال، تم استخدام <br> في مواقف مختلفة لتحقيق فواصل بين العناصر. قد ترى كيف يمكن استخدامها في النصوص، العناوين، القوائم، وغيرها لتنسيق المحتوى بشكل مناسب.
استخدام الانماط الداخلية
Using Inline Styles
استخدام الأنماط المضمنة (Inline Styles) في HTML يتيح لك تخصيص تنسيق عناصر الصفحة مباشرة داخل العناصر نفسها. يتم تحديد الأنماط المضمنة باستخدام الخاصية style مع قيم CSS المناسبة.
تخصيص النص
يمكنك استخدام الأنماط المضمنة لتحديد تنسيق النص داخل العناصر.
الشرح:
color: تحديد لون النص.
font-size: تحديد حجم الخط.
المثال:
<p style="color: red; font-size: 18px;">هذا نص مخصص باستخدام الأنماط المضمنة.</p>
تخصيص الخلفية
يمكنك تخصيص خلفية العنصر باستخدام الأنماط المضمنة.
الشرح:
background-color: تحديد لون الخلفية.
المثال:
<div style="background-color: yellow; padding: 10px;">هذا عنصر مخصص بخلفية صفراء.</div>
تخصيص الحواف
يمكنك تحديد الحواف والحدود باستخدام الأنماط المضمنة.
الشرح:
border: تحديد حواف العنصر.
المثال:
<img src="example.jpg" alt="صورة" style="border: 2px solid blue;">
تخصيص العرض والارتفاع
يمكنك تحديد عرض وارتفاع العناصر باستخدام الأنماط المضمنة.
الشرح:
width: تحديد العرض.
height: تحديد الارتفاع.
المثال:
<div style="width: 200px; height: 100px; background-color: green;">عنصر مخصص بعرض وارتفاع.</div>
ملاحظات هامة:
يمكنك دمج الأنماط المضمنة مع أنماط CSS الخارجية أو الأنماط الداخلية.
يُفضل استخدام أنماط CSS الخارجية لتحقيق التنظيم والصيانة الأفضل.
استخدام الأنماط المضمنة يكون مناسبًا في الحالات التي تتطلب تخصيص سريع لعناصر محددة دون الحاجة إلى إنشاء أنماط CSS مستقلة.
انشاء فقرات باحجام خط مختلفة
:Creating Paragraphs with Different Fonts
يمكنك إنشاء فقرات في HTML بخطوط مختلفة باستخدام الأنماط المضمنة ووسم الفقرة <p>.
فيما يلي شرح مع أمثلة:
تخصيص فقرة بخط مختلف
يمكنك استخدام الأنماط المضمنة لتحديد نوع الخط لفقرة معينة.
الشرح:
font-family: تحديد نوع الخط.
المثال:
<p style="font-family: 'Times New Roman', Times, serif;">هذا نص بخط Times New Roman.</p>
تخصيص فقرة بحجم خط مختلف
يمكنك أيضاً تحديد حجم الخط لفقرة معينة.
الشرح:
font-size: تحديد حجم الخط.
المثال:
<p style="font-size: 20px;">هذا نص بحجم خط 20 بكسل.</p>
تخصيص فقرة بلون خط مختلف
يمكنك تحديد لون الخط لفقرة معينة.
الشرح:
color: تحديد لون الخط.
المثال:
<p style="color: green;">هذا نص بلون خط أخضر.</p>
تخصيص فقرة بسمك خط مختلف
يمكنك تحديد سمك الخط (العرض) لفقرة معينة.
الشرح:
font-weight: تحديد سمك الخط.
المثال:
<p style="font-weight: bold;">هذا نص بخط عريض وبولد.</p>
تخصيص فقرة بخط مائل
يمكنك تحديد إمالة الخط (تائج) لفقرة معينة.
الشرح:
font-style: تحديد نمط الخط.
المثال:
<p style="font-style: italic;">هذا نص بخط مائل.</p>
تجميع كل الأنماط في فقرة واحدة
يمكنك دمج جميع الأنماط المذكورة أعلاه في فقرة واحدة.
المثال:
<p style="font-family: 'Arial', sans-serif; font-size: 18px; color: blue; font-weight: bold; font-style: italic;">
هذا نص بخط Arial، بحجم 18 بكسل، بلون أزرق، بخط عريض ومائل.
</p>
تذكر أنه يمكنك تجميع وتعديل الأنماط حسب احتياجات التصميم الخاصة بك.
إضافة لون خلفية
Adding Background Color
إضافة لون خلفية (Background Color) في HTML يتيح لك تخصيص خلفية العناصر على صفحتك. يمكنك استخدام الأنماط المضمنة لتحديد لون الخلفية للعناصر. إليك شرح باللغة العربية:
استخدام الأنماط المضمنة
يمكنك استخدام خاصية background-color في الأنماط المضمنة لتحديد لون الخلفية.
المثال:
<p style="background-color: yellow;">هذا نص بلون خلفية أصفر.</p>
دمج مع خصائص أخرى
يمكنك دمج تحديد لون الخلفية مع خصائص أخرى مثل color لتحديد لون النص.
المثال:
<p style="background-color: lightblue; color: white;">هذا نص بلون خلفية أزرق فاتح ونص أبيض.</p>
تحديد لون الخلفية للعناصر الأخرى
يمكنك تحديد لون الخلفية لأي عنصر في HTML، سواء كانت صورة أو جدول أو قسم آخر.
المثال:
<div style="background-color: lightgreen; padding: 10px;"> <h2>عنوان القسم</h2> <p>هذا نص داخل قسم بلون خلفية أخضر فاتح.</p> </div>
ملاحظات هامة
يمكنك استخدام أسماء الألوان (مثل “red”، “blue”، “green”) أو رموز الألوان (مثل “#FF0000” للأحمر).
يمكنك تحديد لون الخلفية لأي عنصر HTML باستخدام هذه الطريقة.
استخدام ألوان مناسبة يمكن أن يعزز تجربة المستخدم وجاذبية الصفحة.
قم بتجربة مختلف ألوان الخلفية حسب احتياجات التصميم الخاصة بك لتحسين مظهر صفحتك.
إضافة حدود
Adding Borders
إضافة حدود (Borders) في HTML تسمح لك بتحديد حدود للعناصر على صفحتك، سواء كانت صورًا أو نصوصًا أو عناصر أخرى. يمكنك استخدام الأنماط المضمنة لتحديد الحدود.
استخدام الأنماط المضمنة
يمكنك استخدام خاصية border في الأنماط المضمنة لتحديد خصائص الحدود.
المثال:
<p style="border: 1px solid black;">هذا نص مع حدود سوداء.</p>
تخصيص خصائص الحدود
يمكنك تخصيص خصائص الحدود مثل العرض، والنوع، واللون.
المثال:
<p style="border: 2px dashed red;">هذا نص مع حدود متقطعة بلون أحمر.</p>
تحديد حدود للعناصر الأخرى
يمكنك تحديد حدود لأي عنصر HTML، سواء كانت صورة أو جدول أو قسم آخر.
المثال:
<div style="border: 1px solid blue; padding: 10px;"> <h2>عنوان القسم</h2> <p>هذا نص داخل قسم مع حدود زرقاء.</p> </div>
ملاحظات هامة
يمكنك تخصيص خصائص الحدود باستخدام border-width، border-style، و border-color بشكل منفصل.
يمكنك استخدام قيم مثل “solid” أو “dashed” لتحديد نوع الحدود.
يمكنك استخدام ألوان مناسبة لتناسب تصميم صفحتك.
قم بتجربة مختلف خصائص الحدود لتحقيق التصميم الذي يناسب مظهر صفحتك.
مثال شامل
يستخدم إضافة حدود وتخصيص خصائص الحدود في HTML:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>مثال شامل على إضافة حدود</title>
<style>
/* تخصيص الأسلوب لأغراض التوضيح */
body {
font-family: Arial, sans-serif;
}
.bordered-element {
border: 2px solid #3498db;
padding: 15px;
margin: 20px;
background-color: #f2f2f2;
}
.image-container {
border: 1px dashed #e74c3c;
padding: 10px;
margin: 20px;
background-color: #ecf0f1;
}
</style>
</head>
<body>
<div class="bordered-element">
<h1>عنوان الصفحة</h1>
<p>هذا نص داخل عنصر مع حدود. يمكن تخصيص لون الحدود وعرضها والخلفية أيضًا.</p>
</div>
<div class="image-container">
<img src="example.jpg" alt="صورة" style="width: 100%;">
<p>صورة مع حدود متقطعة وخلفية.</p>
</div>
</body>
</html>
في هذا المثال، تم إنشاء عنصر div وصورة مع إضافة حدود مخصصة. يتم تخصيص خصائص الحدود مثل العرض، ونوع الحدود، ولونها. كما تم إضافة تخصيص للخلفية والتباعد الداخلي لتحقيق تصميم مرئي أفضل. يمكنك تعديل هذا المثال حسب احتياجات تصميم صفحتك.
اختبار من متعدد الفقرات في اتش تي أم ال
بالطبع، إليك اختبار بسيط حول مواضيع HTML المتعلقة بإضافة خصائص مثل الأنماط والحدود والخلفية. يرجى اختيار الإجابات الصحيحة.
السؤال 1:
ما هي الطريقة التي يمكنك بها تحديد خلفية عنصر HTML باستخدام الأنماط المضمنة؟
أ) background-color
ب) color
ج) border
د) font-family
السؤال 2:
كيف يمكنك تحديد حدود ذات لون أحمر بعرض 3 بكسل لعنصر <div> باستخدام الأنماط المضمنة؟
أ) ;border: 3px red
ب) ;border-width: 3px; border-color: red
ج) ;border: 3px solid red
د); border-color: red; border-width: 3px
السؤال 3:
ما هي الطريقة الصحيحة لتحديد نوع الخط لنص داخل <p> باستخدام الأنماط المضمنة؟
أ) text-family
ب) font-type
ج) font-family
د) text-type
السؤال 4:
كيف يمكنك تحديد خلفية ذات لون أصفر ونص بلون أبيض لعنصر <div> باستخدام الأنماط المضمنة؟
أ) ;background-color: yellow; color: white
ب) ;background: yellow; text-color: white
ج) ;background-color: white; color: yellow
د) ;background: white; color: yellow
السؤال 5:
ما هو الخاصية التي يمكنك استخدامها لتحديد حدود ذات نمط متقطع ولون أخضر لعنصر <p> باستخدام الأنماط المضمنة؟
أ) ;border-style: dashed; border-color: green
ب) ;border: dashed green
ج) ;border-color: green; border-style: dashed
د) ;border-width: dashed; border-color: green
الإجابات:
أ) background-color
ج) ;border: 3px solid red
ج) font-family
أ) ;background-color: yellow; color: white
ج) ;border-color: green; border-style: dashed
يرجى التحقق من إجاباتك ومقارنتها مع الإجابات الصحيحة.
السؤال 6:
ما هو الوسم الذي يُستخدم لتحديد فقرة نص في HTML؟
أ) <paragraph>
ب) <p>
ج) <text>
د) <para>
السؤال 7:
كيف يمكنك تحديد لون النص داخل عنصر <h1> باستخدام الأنماط المضمنة؟
أ); text-color: red
ب) ;font-color: red
ج); color: red
د); text: red
السؤال 8:
ما هو السمة التي يمكن استخدامها لتحديد عرض خلفية عنصر <div> بوحدة نسبية؟
أ) background-width
ب) background-size
ج) width
د) background-width
السؤال 9:
ما هي الطريقة الصحيحة لتحديد سمك الحدود لعنصر <div> بقيمة 1 بكسل باستخدام الأنماط المضمنة؟
أ) ;border-thickness: 1px
ب) ;border-width: 1px
ج) ;border: 1px
د) ;thickness: 1px
السؤال 10:
كيف يمكنك تحديد تأثير مائل للنص داخل <p> باستخدام الأنماط المضمنة؟
أ) ;font-effect: italic
ب) ;text-style: italic
ج); font-style: italic
د); italic: true
الإجابات:
ب) <p>
ج) ;color: red
ج) width
ب) ;border-width: 1px
ج) ;font-style: italic
السؤال 11:
كيف يمكنك تحديد لون الخلفية للصفحة بأكملها باستخدام الأنماط المضمنة؟
أ) <body-color>
ب); background-color: blue
ج) ;page-background: blue
د) ;body-background: blue
السؤال 12:
كيف يمكنك إضافة هوامش للعنصر <div> باستخدام الأنماط المضمنة؟
أ) ;margin: 10px
ب) ;padding: 10px
ج) ;spacing: 10px
د) ;border-margin: 10px
السؤال 13:
ما هو الوسم الذي يُستخدم لإنشاء قائمة غير مرتبة في HTML؟
أ) <ul>
ب) <ol>
ج) <li>
د) <list>
السؤال 14:
كيف يمكنك تحديد حجم النص داخل <h2> باستخدام الأنماط المضمنة؟
أ) ;font-size: 16px
ب); text-size: 16px
ج); size: 16px
د); font: 16px
السؤال 15:
ما هو الوسم الذي يُستخدم لتضمين صورة في صفحة HTML؟
أ) <img>
ب) <image>
ج) <picture>
د) <photo>
الإجابات:
ب) background-color: blue;
أ) ;margin: 10px
أ) <ul>
أ) ;font-size: 16px
أ) <img>
السؤال 16:
ما هو الوسم الذي يستخدم لإضافة رابط نصي (رابط) في صفحة HTML؟
أ) <link>
ب) <a>
ج) <url>
د) <web>
السؤال 17:
كيف يمكنك إضافة فاصلة سطر في وسط النص باستخدام الأنماط المضمنة؟
أ) <break>
ب) <lb>
ج) <line-break>
د) <br>
السؤال 18:
ما الوسم الذي يستخدم لتحديد عنوان الصفحة في HTML؟
أ) <header>
ب) <title>
ج) <h1>
د) <heading>
السؤال 19:
كيف يمكنك تحديد خطوط النص لكل الصفحة باستخدام الأنماط المضمنة؟
أ) ;text: Arial, sans-serif
ب) ;font-family: Arial, sans-serif
ج); font: Arial, sans-serif
د); family: Arial, sans-serif
السؤال 20:
ما هي الطريقة الصحيحة لتحديد حدود بالأنماط المضمنة لعنصر <div> بلون أخضر وعرض 4 بكسل؟
أ) ;border: 4px solid green
ب) ;border-width: 4px; border-color: green
ج) ;border: 4px green
د); border-color: green; border-width: 4px
الإجابات:
ب) <a>
د) <br>
ب) <title>
ب); font-family: Arial, sans-serif
أ) ;border: 4px solid green