شرح واسع لأشهر العلامات في HTML

أهمية فهم العلامات في HTML

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

لمن هو هذا المقال؟

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

علامة الفقرة <p>

مُقدمة للعلامة

العلامة <p> هي اختصار لكلمة “Paragraph” (فقرة بالعربية). تُستخدم هذه العلامة لإنشاء فقرات نصية في صفحات الويب. إذا كنت تُريد تقديم معلومات بطريقة منظمة ومُقروءة، فإن فهم كيفية استخدام هذه العلامة يُعتبر أساسيًا.

كيفية استخدامها

لإنشاء فقرة، كل ما عليك فعله هو وضع النص الذي تُريد بين علامتي <p> و </p>. مثل:

<p>هذه فقرة نموذجية</p>

تلقائيًا، سيُضاف مسافة فوق وأسفل الفقرة لفصلها عن العناصر الأخرى في الصفحة.

أمثلة

<p>هذه الفقرة تحتوي على <b>نص عريض</b> و<i>نص مائل</i>.</p>

في هذا المثال، نستخدم العلامة <p> لإنشاء الفقرة، بالإضافة إلى استخدام علامات <b> و <i> للتأكيد على جزء من النص.

علامة النص العريض <b>

مُقدمة للعلامة

العلامة <b>، التي تُعتبر اختصارًا لكلمة “Bold” بالإنجليزية (عريض بالعربية), تُستخدم لجعل النص عريضًا. إذا كنت تُريد أن تُلفت الانتباه إلى جزء معين من النص، هذه العلامة ستكون مفيدة لك.

كيفية استخدامها

لجعل جزء من النص عريضًا، يُمكنك وضعه بين علامتي <b> و </b>. مثل:

<b>هذا النص عريض</b>

ستظهر الكلمات المُحاطة بهذه العلامة بشكل عريض على صفحة الويب.

أمثلة

<p>هذه فقرة تحتوي على <b>نص عريض</b> للتأكيد على جزء معين.</p>

في هذا المثال، تم استخدام العلامة <b> داخل علامة <p> لجعل جزء من الفقرة عريضًا وذلك للتأكيد على معناه.

علامة النص المائل <i>

مُقدمة للعلامة

العلامة <i> تُستخدم لجعل النص مائلًا وتُعتبر اختصارًا لكلمة “Italic” بالإنجليزية (مائل بالعربية). هذه العلامة مُفيدة عندما تُريد إضفاء لمسة تصميمية على النص أو للإشارة إلى أن هذا الجزء من النص يحمل معنى خاص.

كيفية استخدامها

لجعل جزء من النص مائلًا، يُمكنك وضعه بين علامتي <i> و </i>. مثل:

<i>هذا النص مائل</i>

النص الذي يُحاط بهذه العلامة سيظهر مائلًا على صفحة الويب.

أمثلة

<p>هذه الفقرة تحتوي على نص <i>مائل</i> لإضفاء لمسة فنية.</p>

في هذا المثال، نُستخدم العلامة <i> داخل الفقرة لجعل جزء من النص مائلًا، وذلك للتأكيد على أهميته أو لإضفاء لمسة فنية.

علامات العناوين من <h1> إلى <h6>

مُقدمة للعلامات

علامات العناوين في HTML تُستخدم لتوضيح هيكلية المحتوى وتنظيمه. تتراوح هذه العلامات من <h1> للعناوين الرئيسية وحتى <h6> للعناوين الفرعية.

كيفية استخدامها

لإنشاء عنوان، يُمكنك استخدام العلامات <h1>, <h2>, <h3>, <h4>, <h5>, أو <h6> بناءً على مستوى الأهمية. مثل:

<h1>العنوان الرئيسي</h1> <h2>العنوان الفرعي</h2>

ستظهر العلامة <h1> بحجم أكبر نسبياً مقارنةً بالعلامة <h6>.

أمثلة

<h1>مُقدمة للغة HTML</h1> <h2>العلامات الأساسية</h2> <h3>العلامة <i>Paragraph</i></h3>

في هذا المثال، نستخدم علامات العناوين لتوضيح هيكل المحتوى، بدءًا من العنوان الرئيسي <h1> وصولًا إلى العناوين الفرعية <h2> و <h3>.

علامة الرابط <a>

مُقدمة للعلامة

العلامة <a>، والتي تُعتبر اختصارًا لكلمة “Anchor” بالإنجليزية (مرساة بالعربية), تُستخدم لإنشاء روابط تُوجّه المستخدمين إلى صفحات ويب أخرى أو إلى مواقع داخل الصفحة نفسها.

كيفية استخدامها

لإنشاء رابط، يُمكنك استخدام العلامة <a> مع السمة href التي تُحدد وجهة الرابط. مثل:

<a href="https://www.example.com">زيارة الموقع</a>

في هذه الحالة، سيُعتبر “زيارة الموقع” كنص يُمكن النقر عليه، وسيُوجّه المستخدمين إلى الرابط المُحدد.

أمثلة

<p>للمزيد من المعلومات، يُمكنك <a href="https://www.example.com">زيارة هذا الموقع</a>.</p>

في هذا المثال، تم استخدام العلامة <a> داخل الفقرة لإنشاء رابط يُوجّه المستخدمين إلى موقع ويب خارجي.

علامة العنصر <li>

مُقدمة للعلامة

العلامة <li>، التي تُعتبر اختصارًا لكلمة “List Item” بالإنجليزية (عنصر قائمة بالعربية), تُستخدم لتقديم عناصر داخل قائمة مُرتبة أو غير مُرتبة.

كيفية استخدامها

لإنشاء عنصر في قائمة، يُمكنك استخدام العلامة <li> داخل العلامة <ul> لقائمة غير مُرتبة أو <ol> لقائمة مُرتبة. مثل:

<ul> <li>عنصر 1</li> <li>عنصر 2</li> </ul>

في هذه الحالة، سيظهر “عنصر 1” و “عنصر 2” كعناصر داخل قائمة غير مُرتبة.

أمثلة

<ol> <li>الخطوة الأولى</li> <li>الخطوة الثانية</li> <li>الخطوة الثالثة</li> </ol>

في هذا المثال، تم استخدام العلامة <li> داخل قائمة مُرتبة لتقديم تسلسل للخطوات.

علامة القائمة المُرتبة <ol>

مُقدمة للعلامة

العلامة <ol>، والتي تُعتبر اختصارًا لـ “Ordered List” بالإنجليزية (قائمة مُرتبة بالعربية), تُستخدم لإنشاء قوائم تحتوي على ترتيب أو تسلسل.

كيفية استخدامها

لإنشاء قائمة مُرتبة، يُمكنك استخدام العلامة <ol> وإضافة عناصر القائمة باستخدام العلامة <li>. مثل:

<ol> <li>الخطوة الأولى</li> <li>الخطوة الثانية</li> <li>الخطوة الثالثة</li> </ol>

في هذا المثال، العناصر ستظهر مُرقمةً بشكل تلقائي.

أمثلة

<ol> <li>فتح المُتصفح</li> <li>البحث عن الموقع</li> <li>النقر على الرابط</li> </ol>

هنا، نستخدم العلامة <ol> لتقديم سلسلة من الخطوات ينبغي اتباعها بترتيب معين.

علامة القائمة غير المُرتبة <ul>

مُقدمة للعلامة

العلامة <ul>، والتي تُعتبر اختصارًا لـ “Unordered List” بالإنجليزية (قائمة غير مُرتبة بالعربية), تُستخدم لإنشاء قوائم لا تحتاج إلى ترتيب خاص.

كيفية استخدامها

لإنشاء قائمة غير مُرتبة، يُمكنك استخدام العلامة <ul> وإضافة عناصر القائمة باستخدام العلامة <li>. مثل:

<ul> <li>فاكهة</li> <li>خضروات</li> <li>لحوم</li> </ul>

في هذا المثال، ستظهر العناصر مُحاطة بنقاط كإشارة للقائمة الغير مُرتبة.

أمثلة

<ul> <li>تفاح</li> <li>موز</li> <li>برتقال</li> </ul>

هنا، نستخدم العلامة <ul> لتقديم قائمة من الفاكهة بدون أي ترتيب محدد.

علامة المقطع أو القسم <div>

مُقدمة للعلامة

العلامة <div>، التي تُعتبر اختصارًا لـ “Division” بالإنجليزية (قسم أو مقطع بالعربية), تُستخدم بشكل رئيسي لتنظيم المحتوى داخل واجهة صفحة الويب.

كيفية استخدامها

العلامة <div> تُستخدم لتجميع عناصر HTML مختلفة وتطبيق التنسيقات عليها كمجموعة واحدة. مثل:

<div id="header"> <h1>العنوان الرئيسي</h1> <p>الشرح البسيط</p> </div>

في هذا المثال، تم تجميع العنوان والفقرة داخل مقطع واحد يُمكن التحكم فيه من خلال CSS.

أمثلة

<div class="container"> <div class="item">عنصر 1</div> <div class="item">عنصر 2</div> <div class="item">عنصر 3</div> </div>

هنا، نستخدم العلامة <div> لتقديم مجموعة من العناصر داخل “container” يُمكن التحكم في تنسيقها بسهولة.

علامة الحاوية <span>

مُقدمة للعلامة

العلامة <span> تُستخدم لتحديد نص أو جزء من النص داخل وثيقة HTML لأغراض التنسيق. لا تُضيف هذه العلامة أي تأثير خاص بمفردها، لكنها تُفيد في تحديد جزء من النص للتلاعب به من خلال CSS أو JavaScript.

كيفية استخدامها

لإنشاء حاوية بسيطة تحتوي على نص، يُمكنك استخدام العلامة <span> كالتالي:

<p>هذا <span class="highlight">نص</span> عادي.</p>

في هذا المثال، تم استخدام العلامة <span> لتحديد كلمة “نص” من أجل تنسيقها لاحقًا.

أمثلة

<p>الألوان: <span class="red">أحمر</span>, <span class="blue">أزرق</span>, <span class="green">أخضر</span>.</p>

في هذا المثال، يُمكننا استخدام العلامة <span> لتطبيق ألوان مختلفة على كل كلمة بشكل فردي.

علامة الصورة <img>

مُقدمة للعلامة

العلامة <img>، وهي اختصار لكلمة “image” بالإنجليزية (صورة بالعربية), تُستخدم لإدراج صور داخل صفحات الويب.

كيفية استخدامها

لإضافة صورة، يُمكنك استخدام العلامة <img> مع خصائص مثل src لتحديد مصدر الصورة و alt لتوفير نص بديل:

<img src="example.jpg" alt="صورة مثالية">

في هذا المثال، الصورة ستُظهر من ملف بالاسم “example.jpg”، والنص “صورة مثالية” سيظهر في حالة عدم تحميل الصورة.

أمثلة

<img src="logo.png" alt="شعار الشركة"> <img src="landscape.jpg" alt="منظر طبيعي">

هنا، نقدم مثالين لكيفية استخدام العلامة <img> لإدراج شعار شركة ومنظر طبيعي داخل صفحة ويب.

علامة الرسومات المتجهية (الفيكتور) <svg>

مُقدمة للعلامة

العلامة <svg> تُستخدم لعرض الرسومات المتجهية في صفحات الويب. SVG هو اختصار لـ “Scalable Vector Graphics” بالإنجليزية، ويُمكن ترجمتها إلى “رسومات متجهية قابلة للتحجيم” بالعربية.

كيفية استخدامها

يُمكن استخدام العلامة <svg> لإنشاء الأشكال الهندسية مثل الدوائر والمستطيلات، أو حتى لإنشاء رسومات معقدة. مثل:

<svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg>

في هذا المثال، تم إنشاء دائرة بإستخدام العلامة <svg>.

أمثلة

<svg height="210" width="400"> <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" /> </svg>

في هذا المثال، نستخدم العلامة <svg> لإنشاء مُضلع بواسطة تحديد النقاط.

علامة الإطار المضمن <iframe>

مُقدمة للعلامة

العلامة <iframe> تُستخدم لتضمين وثائق أو صفحات ويب أخرى داخل صفحة ويب حالية. “iFrame” هو اختصار لـ “Inline Frame” بالإنجليزية، ويُمكن ترجمتها إلى “إطار مضمن” بالعربية.

كيفية استخدامها

لإدراج صفحة ويب داخل صفحة أخرى، يُمكن استخدام العلامة <iframe> مع خاصية src لتحديد الرابط:

<iframe src="https://www.example.com" width="600" height="400"></iframe>

في هذا المثال، تم تضمين صفحة ويب من موقع “www.example.com” داخل الإطار المُضمن.

أمثلة

<iframe src="https://www.youtube.com/embed/example" width="800" height="450"></iframe>

في هذا المثال، نقوم بتضمين فيديو من YouTube داخل صفحة ويب باستخدام العلامة <iframe>.

علامة الجدول <table>

مُقدمة للعلامة

العلامة <table> تُستخدم لإنشاء جداول في صفحات HTML. تُستخدم الجداول عادةً لعرض البيانات المُنظمة بشكل صفوف وأعمدة.

كيفية استخدامها

لإنشاء جدول، يُمكنك استخدام مجموعة من العلامات المُكملة مثل <tr> للصفوف، <th> للعناوين، و <td> للخلايا:

<table> <tr> <th>الاسم</th> <th>العمر</th> </tr> <tr> <td>أحمد</td> <td>25</td> </tr> <tr> <td>فاطمة</td> <td>30</td> </tr> </table>

في هذا المثال، تم إنشاء جدول يحتوي على صفين وعمودين.

أمثلة

<table border="1"> <tr> <th>المادة</th> <th>الدرجة</th> </tr> <tr> <td>رياضيات</td> <td>90</td> </tr> <tr> <td>علوم</td> <td>85</td> </tr> </table>

في هذا المثال، نقدم جدول يُظهر درجات الطلاب في مواد مُختلفة.

الختام

أهمية العلامات في HTML

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

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