يُمكننا وضع إعلانك هنا 🧡 ويُمكنك التواصل معنا عن طريق صفحة الفيس بوك
سعر الإعلان 50$ فى الشهر
منطقة إعلانية
يُمكننا وضع إعلانك هنا 🧡 ويُمكنك التواصل معنا عن طريق صفحة الفيس بوك
اهم وسوم لغة html
أهم وسوم لغة html من وجهه نظري هي الوسوم التي تُعطى مَعنى للمُتصفح مثال على ذلك هذا الوسم <div> لا يُعطى أي معنى للمُتصفح على عكس هذا الوسم <time> الذي يكون بداخله وقت معين.
أولا قبل الشرح؛ هل تتذكر هذا المُخطط البسيط لصفحة html الذي شرحناه في مقال سابق والذي سنقوم بشرح الوسوم المناسبة لكل مِكون من مكوناته:
هذا العنصر الذي غالبا ما يكون في اعلى الصفحة والذي يكون بداخلة مجموعة من الوسوم مثل: <h1> الى <h6> او لوجو الموقع او روابط لصفحات أخرى داخل الموقع في حالة موقعنا فان عنصر ال header يحتوي على:
وسم <h1> ومُحتواه هو courses 4 Arab
وسم <nav> الذي سنقوم بشرحه في هذا المقال. وأيضا بداخل وسم ال <nav> يوجد روابط لصفحات أخرى داخل الموقع
⚠ يُمكن ان تحتوي نفس الصفحة على أكثر من header2
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>
هذا العنصر الذي يكون دائما في أسفل الصفحة ويمكن ان يحتوي على:
روابط لصفحات التواصل الاجتماعي للموقع
روابط لصفحات داخل الموقع.
ويُمكن اضافة العديد من المُحتويات التى بناءَ على تصميم الموقع او رأى العميل
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>
عندما تريد وضع صورة في الموقع وتريد ان تَكتب جُملة توضيحية أسفل هذه الصورة ف الطريقة الصحيحة هي استخدام هؤلاء العناصر الثلاثة معاَ. مثال: يوجد لديك صورة اسمها pyramids.png للأهرامات وتريد ان تكتب اسفل الصورة (اهرامات الجيزة) فهذه الاكواد المناسبة لذلك:
عنصر مش محتاج شرح 😃 يعنى لو عاوز تكتب وقت مُعين فيجب عليك استخدام هذا العنصر؛ مثال : <time> 12:45 </time> وله attribute خاص به وهو datetime وكثيرا ما نستخدمه عند التعامل مع لغة JavaScript طريقة استخدام ال attribute:
<p>
<time datetime="1990-07-25 22:00"> يوم عيد ميلادى </time>
ياتى فى نفس المعاد كل عام ههخه
</p>
إذا كانت الإعلانات مزعجة بالنسبة لك، فيُمكنك التبرع ب50$ وسيتم إيقاف الإعلانات لمدة شهر لجميع زوار الموقع 🧡 ويُمكنك التواصل معنا عن طريق صفحة الفيس بوك