شرح عمل الاقتباسات والتنسيقات الإضافية في HTML
أهلاً بيكم يا شباب، النهاردة هنتعلم مع بعض إزاي نعمل اقتباسات بأنواعها المختلفة داخل لغة HTML، وكمان إزاي نستخدم شوية تاجات تانية مفيدة في تنسيق النصوص والمحتوى بطريقة احترافية. الدرس ده مناسب لأي حد مهتم بتعلم HTML من البداية أو حتى لو عندك خلفية بسيطة وعايز تطور مستواك.
أولاً: استخدام عنصر الاقتباس الطويل
<blockquote>
تاج <blockquote> هو التاج المخصص لكتابة
اقتباسات طويلة داخل صفحة الويب. لو عندك جملة طويلة أو فقرة مقتبسة من مصدر
خارجي، يفضل تستخدم التاج ده.
طريقة الاستخدام:
<blockquote>
النص المقتبس الطويل بيكون هنا.
</blockquote>ملاحظات:
-
التاج ده عبارة عن عنصر بلوك، يعني بياخد مساحة مستقلة على السطر لوحده.
-
بيكون ليه Margin (مسافة فارغة) من كل الاتجاهات بشكل افتراضي، وده بيوضح إن ده اقتباس.
-
تقدر تضيف بعده عناصر تانية زي الفقرات أو الصور، وهيظهروا في سطر منفصل.
ثانياً: استخدام عنصر الاقتباس القصير
<q>
لو عندك اقتباس صغير، يفضل تستخدم تاج <q>،
وده تلقائياً بيضيف علامات اقتباس حول النص.
مثال:
<p>قال الكاتب: <q>العلم نور والجهل ظلام</q>.</p>ملاحظات:
-
التاج ده بيشتغل كعنصر inline، يعني بيظهر في نفس السطر مع النص اللي حواليه.
-
مش بيضيف أي مسافات أو فواصل زيه زي أي كلمة في النص.
ثالثاً: إضافة مصدر الاقتباس باستخدام cite كـ
Attribute
لو اقتبست نص من مصدر خارجي، ممكن تضيف مصدر الاقتباس داخل تاج
<blockquote> باستخدام Attribute اسمه
cite.
مثال:
<blockquote cite="https://example.com/source">
هذا النص مقتبس من مصدر خارجي.
</blockquote>ده بيساعد محركات البحث على فهم مصدر المحتوى، لكنه مش بيظهر للمستخدمين على الصفحة.
رابعاً: عمل اختصار باستخدام <abbr>
لو عندك اختصار لكلمة طويلة، استخدم تاج
<abbr> علشان توضح معناها الحقيقي.
مثال:
<abbr title="HyperText Markup Language">HTML</abbr>النتيجة:
لما المستخدم يحط المؤشر على الكلمة "HTML"، هيظهرله معنى الكلمة الكاملة كـ Tooltip.
ملاحظات:
-
العنصر ده برضه inline.
-
بيساعد محركات البحث ومستخدمي قارئات الشاشة.
خامساً: إضافة عنوان أو موقع باستخدام
<address>
تاج <address> بيستخدم لعرض معلومات العنوان،
زي اسم الكاتب أو الموقع أو البريد الإلكتروني.
مثال:
<address>
القاهرة، مصر<br>
example@example.com
</address>ملاحظات:
-
التاج ده block element.
-
بيدعم استخدام
<br>لتقسيم العنوان على أكتر من سطر. -
مفيد في الفوتر أو نهاية المقالات.
سادساً: وصف اسم عمل فني باستخدام
<cite> كتاج
تاج <cite> ممكن نستخدمه لوصف اسم عمل فني زي
لوحة، فيلم، أو كتاب.
مثال:
<p>أشهر لوحة فنية هي <cite>الموناليزا</cite>.</p>ملاحظات:
-
بيظهر غالبًا بخط مائل افتراضيًا.
-
بيفيد في توضيح إن النص ده اسم عمل.
سابعاً: عكس اتجاه النص باستخدام <bdo>
لو عندك نص بلغة بتكتب من اليسار لليمين (LTR) وعايز تعكسه ليبدأ من اليمين
لليسار (RTL)، استخدم تاج <bdo>.
مثال:
<bdo dir="rtl">Hello World</bdo>النتيجة:
هيتم عكس ترتيب الحروف، بحيث الكلمة تظهر من اليمين للشمال.
ملاحظات:
-
مفيد جدًا لو بتتعامل مع لغات مختلفة داخل نفس الصفحة.
-
dir="rtl"معناها من اليمين للشمال، وdir="ltr"معناها العكس.
خلاصة التاجات اللي شرحناها:
| التاج | الوظيفة | النوع |
|---|---|---|
<blockquote>
|
لعرض اقتباس طويل | Block Element |
<q>
|
لعرض اقتباس قصير داخل النص | Inline Element |
cite (Attribute)
|
لتحديد مصدر الاقتباس داخل blockquote | Attribute |
<abbr>
|
لعرض اختصار مع توضيح | Inline Element |
<address>
|
لعرض معلومات عنوان | Block Element |
<cite>
|
لتحديد اسم عمل فني | Inline Element |
<bdo>
|
لعكس اتجاه النص | Inline Element |