منطقة إعلانية

يُمكننا وضع إعلانك هنا🧡ويُمكنك التواصل معنا عن طريق صفحةالفيس بوك

اهم وسوم لغة html

أهم وسوم لغة html من وجهه نظري هي الوسوم التي تُعطى مَعنى للمُتصفح مثال على ذلك هذا الوسم<div>لا يُعطى أي معنى للمُتصفح على عكس هذا الوسم<time>الذي يكون بداخله وقت معين.

أولا قبل الشرح؛ هل تتذكر هذا المُخطط البسيط لصفحة html الذي شرحناه في مقال سابق والذي سنقوم بشرح الوسوم المناسبة لكل مِكون من مكوناته:


Header
Navigation Bar
Sidebar
Main content
Footer



1

HTML header tag

<header> </header>

هذا العنصر الذي غالبا ما يكون في اعلى الصفحة والذي يكون بداخلة مجموعة من الوسوم مثل:<h1> الى <h6>او لوجو الموقع او روابط لصفحات أخرى داخل الموقع
في حالة موقعنا فان عنصر ال header يحتوي على:

  • وسم <h1> ومُحتواه هو courses 4 Arab
  • وسم <nav> الذي سنقوم بشرحه في هذا المقال. وأيضا بداخل وسم ال <nav> يوجد روابط لصفحات أخرى داخل الموقع
يُمكن ان تحتوي نفس الصفحة على أكثر من header
2

HTML nav tag

<nav> </nav>

هذا العنصر غالبا ما يكون داخل عنصر ال header ويحتوي على مجموعة من الروابط الذي تنقل زائر الموقع من الصفحة الحالية الى صفحة أخرى
مثال على ذلك

3

HTML a tag

<a> </a>

A اختصار ل Anchor و المعنى الحرفي (مرساه السفينة)
يُستخدم هذا العنصر لعمل الروابط للتنقل بين الصفحات؛ سواء لصفحات داخل الموقع او روابط خارجية لمواقع اخرى.
مثال على ذلك

4

HTML main tag

<main> </main>

هذا العنصر يكون بداخلة العديد من العناصر التي تُحدد المحتوى الأساسي للصفحة.
مثال على ذلك في هذه الصفحة؛ س/ ما هو المحتوى الرئيسي للصفحة؟
ج/ المحتوى الأساسي هو اهم وسوم لغة html
وبالتالي جميع المُحتوى المُتعلق بأهم وسوم لغة html يكون بداخل هذا العنصر

5

HTML aside tag

<aside> </aside>

Aside ترجمتها الحرفية هي مُلاحظة جانبية.
وبالتالي يكون بداخلها مُحتوى فرعى له علاقة بالمحتوى الرئيسي وهذا العنصر يكون غالباً ك sidebar كما في موقعنا ال sidebar هو عبارة عن فهرس جانبي لتعلم لغة html

6

HTML footer tag

<footer> </footer>

هذا العنصر الذي يكون دائما في أسفل الصفحة ويمكن ان يحتوي على:

  • روابط لصفحات التواصل الاجتماعي للموقع
  • روابط لصفحات داخل الموقع.
  • ويُمكن اضافة العديد من المُحتويات التى بناءَ على تصميم الموقع او رأى العميل
ولكن في حالة موقنا كما ترى عبارة عن جملة بسيطة

Designed and developed by Ali Hassan © 2020

7

HTML article tag

<article> </article>

Article ترجمتها الحرفية مقال.
ولكن ما الفرق بين وسم<p>ووسم<article> ؟
ال<p>عبارة عن فقرة في مقال ولكن ال<article>هو المقال نفسه
مثال على ذلك:


<article>
    <h2> المُلخص</h2>
    <p> ونلخص هذا المقال في 3 عناصر .... </p>
</article>


وهذا العنصر يتميز ب انه عنصر مستقل بذاته بمعنى أنك إذا حذفته من الصفحة فلا يؤثر ذلك في المعنى العام للصفحة
لذلك كثيرا ما يُستخدم هذا العنصر في عمل مُلخص المقال لأنه إذا قمنا بحذف مُلخص المقال من الصفحة فلا يؤثر ذلك في المعنى العام للصفحة

8

HTML section tag

<section> </section>

Section ترجمتها قِسم او مقطع وغالبا ما تُقسم الصفحة الى عده اقسام.

ولكن ما الفرق بين وسم ال<Section>و وسم ال<article> ؟

مثال على ذلك عندما يكون لديك موقع لعرض المقالات مثلا؛ ويوجد به قسمين:

  • القسم الأول المقالات الرياضية؛ نستخدم معها وسم ال<Section>
    • مقال 1 نستخدم وسم ال<article>
    • مقال 2 نستخدم وسم ال<article>
  • القسم الثاني المقالات الترفيهية؛ ونستخدم معها وسم ال<Section>
    • مقال 1 نستخدم وسم ال<article>
    • مقال 2 نستخدم وسم ال<article>
9

HTML figure, figcaption, img tags

<figure> </figure>
<figcaption> </figcaption>
<img src="example.jpg">

عندما تريد وضع صورة في الموقع وتريد ان تَكتب جُملة توضيحية أسفل هذه الصورة ف الطريقة الصحيحة هي استخدام هؤلاء العناصر الثلاثة معاَ.
مثال: يوجد لديك صورة اسمها pyramids.png للأهرامات وتريد ان تكتب اسفل الصورة (اهرامات الجيزة) :
فهذه الاكواد المناسبة لذلك:


<figure>
    <img src="pyramids.png">
    <figcaption> اهرامات الجيزة </figcaption>
</figure>

وبالتالي وسم ال<figure> هو الذي يحتوي على:

  • الصورة ونستخدم وسم<img>
  • شرح الصورة ونستخدم وسم<figcaption>
10

HTML time tag

<time> </time>

عنصر مش محتاج شرح😃
يعنى لو عاوز تكتب وقت مُعين فيجب عليك استخدام هذا العنصر؛ مثال :
<time> 12:45 </time>
وله attribute خاص به وهو datetime وكثيرا ما نستخدمه عند التعامل مع لغة JavaScript
طريقة استخدام ال attribute:


<p> 
<time datetime="1990-07-25 22:00"> يوم عيد ميلادى </time> 
ياتى فى نفس المعاد كل عام ههخه
</p>

المُلخص

هذه الأكواد


<!DOCTYPE html>
<html lang="ar">
  <head>
    <title>Courses 4 arab</title>
    <!-- التي سوف نتعلمها لاحقاً CSS  هذه اكواد لغة   -->
    <style>
      header, footer, aside {text-align: center;}

      aside {
        float: right;
        border: 2px solid;
        width: 30%;
        height: 235px;}

      section h1 {text-align: center;}
    </style>
    <!--  CSS  نهاية اكواد لغة   -->
  </head>

  <body>
    <header>
      <h1>courses 4 arab</h1>
      <nav>
        <a href="https://courses4arab.com/about">من نحن</a> <br />
        <a href="https://courses4arab.com/contact">اتصل بنا </a> <br />
        <a href="https://courses4arab.com/courses">الدورات التعليمية</a> <br />
      </nav>
    </header>

    <aside>الاعلانات</aside>

    <main>
    <h1>اخر المقالات</h1>
    <section>
        <h2>القسم الرياضى</h2>
        <article>
          <h3>عنوان المقالة</h3>
          <p>...........................مُحتوى المقالة</p>
        </article>
        <hr />
        <article>
          <h3>عنوان المقالة</h3>
          <p>...........................مُحتوى المقالة</p>
        </article>
        <hr />
      </section>
    </main>

    <footer> ... تم التصميم والبرمجة بواسطة</footer>
  </body>
</html>


تُعطى هذه النتيجة



html code example
اكواد HTML مع الشرح