<style>
 body {
  font-family: Arial, sans-serif;
  padding: 20px;
  background-color: #fff;
  color: #222;
  max-width: 700px;
  margin: 0 auto;
 }

 h1, h2, h3 {
  text-align: right;
  margin: 10px 0;
 }

 p {
  line-height: 1.6;
 }
</style>

<h1>لماذا يُعدّ التوجه اليميني مهماً؟</h1>
<p>يُعد المحاذاة إلى اليمين من أكثر الطرق شيوعاً وفعالية لعرض النصوص على صفحات الويب.</p>

<h2>تناسق</h2>
<p>تُحقق محاذاة جميع العناوين والفقرات مع الهامش الأيمن تدفقاً منظماً ومتسقاً للقراءة.</p>

<h3>سهل الاتباع</h3>
<p>يمكن للمستخدمين مسح المحتوى ومتابعته بسهولة، دون أي ارتباك أو اختلال في المحاذاة.</p>
    

<style>
 body {
  font-family: Arial, sans-serif;
  padding: 20px;
  background-color: #fff;
  color: #222;
  max-width: 700px;
  margin: 0 auto;
 }

 h1, h2, h3 ,p {
  text-align: left;
  margin: 10px 0;
 }

 p {
  font-size: 16px;
  line-height: 1.5;
 }
</style>

<h1>المحاذاة لليسار في تصميم الويب</h1>
<p>يُستخدم المحاذاة إلى اليسار بشكل شائع لعرض محتوى إضافي أو ترويجي على مواقع الويب.</p>

<h2>محتوى ثانوي</h2>
<p>يمكن أن تساعد محاذاة النص مع الهامش الأيسر في فصله بصرياً عن المحتوى الرئيسي.</p>

<h3>استخدام ترويجي</h3>
<p>غالباً ما يُختار هذا المحاذاة للافتات، أو الإعلانات، أو الرسائل الموجودة في الشريط الجانبي.</p>
    

<style>
 body {
  font-family: Arial, sans-serif;
  padding: 20px;
  background-color: #fff;
  color: #222;
  max-width: 700px;
  margin: 0 auto;
 }

 h1, h2, h3, p {
  text-align: center;
  margin: 10px 0;
 }

 p {
  font-size: 16px;
  line-height: 1.5;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
 }
</style>

<h1>محاذاة مركزية لإحداث تأثير</h1>
<p>يُعد المحاذاة إلى المنتصف خياراً مثالياً لجذب الانتباه إلى العناوين والعناصر المهمة.</p>

<h2>تصميم لافت للنظر</h2>
<p>من خلال توسيط المحتوى الرئيسي، فإنك تبرزه وتخلق جاذبية بصرية متوازنة.</p>

<h3>الاستخدامات الشائعة</h3>
<p>غالباً ما تُستخدم هذه التقنية للشعارات، والعناوين الرئيسية البارزة، ورسائل الحث على اتخاذ إجراء.</p>
    

<style>
 body {
  font-family: Georgia, serif;
  padding: 20px;
  background-color: #fff;
  color: #222;
  max-width: 700px;
  margin: 0 auto;
 }

 h1 {
  text-align: center;
  margin-bottom: 20px;
 }

 p {
  text-align: justify;
  line-height: 1.7;
  margin-bottom: 20px;
 }
</style>

<h1>محاذاة مضبوطة (من الجانبين) لكتل ​​النصوص المنسقة</h1>
<p>
 
    يضمن محاذاة النص بنمط "الضبط" (Justified) امتداد كل سطر بشكل متساوٍ بين الهامشين الأيسر والأيمن؛ 
مما يضفي على النص مظهراً انسيابياً يشبه الكتلة المتماسكة، ويبدو في غاية الإتقان والاحترافية. 
ويُستخدم هذا النمط عادةً في الصحف والمجلات والوثائق الرسمية التي تتطلب مظهراً موحداً ومنظماً.
 
</p>
<p>

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

</p>
    

<style>
 body {
  font-family: Arial, sans-serif;
  padding: 20px;
  background-color: #fff;
  color: #222;
  max-width: 400px;
  margin: 0 auto;
 }

 form {
  display: flex;
  flex-direction: column;
  gap: 15px;
 }

 label {
  font-weight: bold;
  margin-bottom: 5px;
 }

 input, textarea {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
 }

 button {
  padding: 10px;
  background-color: #007bff;
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
 }

 button:hover {
  background-color: #0056b3;
 }
</style>

<form>
 <label for="name">الإسم</label>
 <input type="text" id="name" name="name" placeholder="على سبيل المثال: جين دو">

 <label for="email">البريد الإلكتروني</label>
 <input type="email" id="email" name="email" placeholder="janedoe@example.com">

 <label for="message">الرسالة</label>
 <textarea id="message" name="message" rows="4" placeholder="اكتب رسالتك هنا"></textarea>

 <button type="submit">قدم</button>
</form>