⚠ تم إنشاء c4a.dev لمساعدتك على التركيز أثناء مُشاهدة الكورسات والإبتعاد عن إزعاج اليوتيوب
كيفية الشراء من الموقع
منطقة إعلانية
يُمكننا وضع إعلانك هنا 🧡 ويُمكنك التواصل معنا عن طريق صفحة الفيس بوك
سعر الإعلان 50$ فى الشهر
أهم وسوم لغة html من وجهه نظري هي الوسوم التي تُعطى مَعنى للمُتصفح مثال على ذلك هذا الوسم <div> لا يُعطى أي معنى للمُتصفح على عكس هذا الوسم <time> الذي يكون بداخله وقت معين.
أولا قبل الشرح؛ هل تتذكر هذا المُخطط البسيط لصفحة html الذي شرحناه في مقال سابق والذي سنقوم بشرح الوسوم المناسبة لكل مِكون من مكوناته:
هذا العنصر الذي غالبا ما يكون في اعلى الصفحة والذي يكون بداخلة مجموعة من الوسوم مثل: <h1> الى <h6> او لوجو الموقع او روابط لصفحات أخرى داخل الموقع
في حالة موقعنا فان عنصر ال header يحتوي على:
<h1> ومُحتواه هو courses 4 Arab<nav> الذي سنقوم بشرحه في هذا المقال. وأيضا بداخل وسم ال <nav> يوجد روابط لصفحات أخرى داخل الموقعهذا العنصر غالبا ما يكون داخل عنصر ال header ويحتوي على مجموعة من الروابط الذي تنقل زائر الموقع من الصفحة الحالية الى صفحة أخرى
مثال على ذلك
A اختصار ل Anchor و المعنى الحرفي (مرساه السفينة)
يُستخدم هذا العنصر لعمل الروابط للتنقل بين الصفحات؛ سواء لصفحات داخل الموقع او روابط خارجية لمواقع اخرى.
مثال على ذلك
هذا العنصر يكون بداخلة العديد من العناصر التي تُحدد المحتوى الأساسي للصفحة.
مثال على ذلك في هذه الصفحة؛ س/ ما هو المحتوى الرئيسي للصفحة؟
ج/ المحتوى الأساسي هو اهم وسوم لغة html
وبالتالي جميع المُحتوى المُتعلق ب أهم وسوم لغة html يكون بداخل هذا العنصر
Aside ترجمتها الحرفية هي مُلاحظة جانبية.
وبالتالي يكون بداخلها مُحتوى فرعى له علاقة بالمحتوى الرئيسي وهذا العنصر يكون غالباً ك sidebar كما في موقعنا ال sidebar هو عبارة عن فهرس جانبي لتعلم لغة html
هذا العنصر الذي يكون دائما في أسفل الصفحة ويمكن ان يحتوي على:
Designed and developed by Ali Hassan © 2020
Article ترجمتها الحرفية مقال.
ولكن ما الفرق بين وسم <p> ووسم <article> ؟
ال <p> عبارة عن فقرة في مقال ولكن ال <article> هو المقال نفسه
مثال على ذلك:
<article>
<h2> المُلخص</h2>
<p> ونلخص هذا المقال في 3 عناصر .... </p>
</article>
وهذا العنصر يتميز ب انه عنصر مستقل بذاته بمعنى أنك إذا حذفته من الصفحة فلا يؤثر ذلك في المعنى العام للصفحة
لذلك كثيرا ما يُستخدم هذا العنصر في عمل مُلخص المقال لأنه إذا قمنا بحذف مُلخص المقال من الصفحة فلا يؤثر ذلك في المعنى العام للصفحة
Section ترجمتها قِسم او مقطع وغالبا ما تُقسم الصفحة الى عده اقسام.
ولكن ما الفرق بين وسم ال <Section>و وسم ال <article> ؟
مثال على ذلك عندما يكون لديك موقع لعرض المقالات مثلا؛ ويوجد به قسمين:
<Section><article><article><Section><article><article>عندما تريد وضع صورة في الموقع وتريد ان تَكتب جُملة توضيحية أسفل هذه الصورة ف الطريقة الصحيحة هي استخدام هؤلاء العناصر الثلاثة معاَ.
مثال: يوجد لديك صورة اسمها pyramids.png للأهرامات وتريد ان تكتب اسفل الصورة (اهرامات الجيزة)
فهذه الاكواد المناسبة لذلك:
<figure>
<img src="pyramids.png">
<figcaption> اهرامات الجيزة </figcaption>
</figure>
وبالتالي وسم ال <figure> هو الذي يحتوي على:
<img><figcaption>عنصر مش محتاج شرح 😃
يعنى لو عاوز تكتب وقت مُعين فيجب عليك استخدام هذا العنصر؛ مثال :<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>
تُعطى هذه النتيجة
ياريت تقفله لوسمحت 😊 😊
تنبيه هام ✋
إذا كانت الإعلانات مزعجة بالنسبة لك، فيُمكنك التبرع ب50$ وسيتم إيقاف الإعلانات لمدة شهر لجميع زوار الموقع 🧡 ويُمكنك التواصل معنا عن طريق صفحة الفيس بوك