اختبار على القوائم HTML
.png)
...
...
.png)
سيتم مراجعة بياناتك من قبل فريق العمل، وفي حال قبولك سيتم تفعيل حسابك وإبلاغك بذلك عبر البريد الإلكتروني المسجل.
سيتم مراجعة بياناتك من قبل فريق العمل، وفي حال قبولك سيتم تفعيل حسابك وإبلاغك بذلك عبر البريد الإلكتروني المسجل.
القوائم هي جزء أساسي من أي صفحة ويب تقريبًا. فكر فيها كطريقة لتنظيم وعرض المعلومات بشكل مرتب وسهل القراءة. لما يكون عندك مجموعة من العناصر المترابطة، زي قائمة بأسماء المنتجات، أو خطوات وصفة أكل، أو نقاط في مقال، استخدام القوائم بيخلي المحتوى بتاعك منظم أكتر للمستخدم ولمحركات البحث كمان.
في HTML، عندنا نوعين أساسيين من القوائم هنتعلمهم النهاردة بالتفصيل:
والعنصر المشترك اللي بنستخدمه جوه النوعين دول هو وسم العنصر <li>، اللي بيمثل كل عنصر لوحده في القائمة. يلا بينا نتعمق في كل نوع ونشوف بيتكتب إزاي وبنستخدمه إمتى.
القائمة غير المرتبة، أو "Unordered List"، بنستخدمها لما نعرض مجموعة عناصر ترتيبها مش مهم. يعني لو غيرت ترتيب العناصر، المعنى مش هيتغير. زي قائمة المشتريات، أو قائمة مميزات منتج معين.
عشان ننشئ قائمة غير مرتبة، بنستخدم الوسم <ul> كحاوية للقائمة كلها. وجوه الوسم ده، بنحط كل عنصر من عناصر القائمة داخل وسم <li> (اختصار لـ "List Item").
<h3>قائمة المشتريات</h3>
<ul>
<li>خبز</li>
<li>حليب</li>
<li>بيض</li>
<li>جبنة</li>
</ul>المتصفح هيعرض الكود اللي فات بالشكل ده، بعلامات تنقيط افتراضية (عادةً بتكون دايرة سودا):
1. دايمًا حط وسوم <li> مباشرة جوه وسم <ul>. مينفعش تحط نصوص أو وسوم تانية زي <p> بين <ul> و <li> مباشرة.
2. ممكن تحط أي محتوى جوه الـ <li> نفسه، زي نصوص، صور، أو حتى روابط.
<h3>قائمة التنقل في الموقع</h3>
<ul>
<li><a href="/home">الصفحة الرئيسية</a></li>
<li><a href="/about">عن الموقع</a></li>
<li><a href="/contact">اتصل بنا</a></li>
</ul>دي الطريقة الشائعة جدًا لعمل قوائم التنقل (Navigation Menus) في المواقع. القائمة غير المرتبة هي الأساس الهيكلي، وبعدين بنستخدم CSS عشان نديها الشكل الجمالي اللي إحنا عايزينه.
على عكس القائمة غير المرتبة، القائمة المرتبة "Ordered List" بنستخدمها لما يكون فيه تسلسل أو ترتيب منطقي ومهم للعناصر. زي خطوات عمل حاجة معينة، أو قائمة أفضل اللاعبين، أو مراحل مشروع. لو غيرت ترتيب العناصر هنا، المعنى هيختل.
طريقة كتابتها شبه الـ <ul> بالظبط، لكن بنستخدم الوسم <ol> كحاوية، وبرضه بنستخدم <li> لكل عنصر جوه القائمة. المتصفح تلقائيًا بيرقم العناصر دي.
<h3>خطوات تحضير القهوة</h3>
<ol>
<li>اغلي الماء.</li>
<li>أضف القهوة المطحونة إلى الكوب.</li>
<li>صب الماء الساخن فوق القهوة.</li>
<li>قلّب جيدًا وأضف السكر حسب الرغبة.</li>
</ol>مش لازم الترقيم يكون بالأرقام (1, 2, 3) بس. نقدر نغير شكل الترقيم باستخدام خاصية `type` جوه وسم <ol>. الخاصية دي بتاخد قيم مختلفة:
type="1": الترقيم بالأرقام (ده الافتراضي).type="A": الترقيم بالحروف الإنجليزية الكبيرة (A, B, C).type="a": الترقيم بالحروف الإنجليزية الصغيرة (a, b, c).type="I": الترقيم بالأرقام الرومانية الكبيرة (I, II, III).type="i": الترقيم بالأرقام الرومانية الصغيرة (i, ii, iii).
<h3>محاور الدرس (باستخدام الحروف)</h3>
<ol type="a">
<li>مقدمة عن HTML.</li>
<li>الوسوم الأساسية.</li>
<li>إنشاء القوائم.</li>
</ol>قوة القوائم الحقيقية بتظهر لما نبدأ نعمل قوائم جوه قوائم. دي بنسميها "Nested Lists" أو القوائم المتداخلة. دي مفيدة جدًا لتقسيم المواضيع الكبيرة لنقاط فرعية أصغر.
القاعدة بسيطة جدًا: عشان تعمل قائمة فرعية، بتحط وسم <ul> أو <ol> جديد بالكامل داخل وسم <li> بتاع القائمة الرئيسية.
هنا هنعمل قائمة لمحتويات كورس برمجة، وكل لغة ليها قائمة فرعية بالمواضيع بتاعتها.
<h3>محتويات كورس تطوير الويب</h3>
<ul>
<li>HTML
<!-- بداية القائمة الفرعية -->
<ul>
<li>الوسوم الأساسية</li>
<li>القوائم والجداول</li>
<li>النماذج (Forms)</li>
</ul>
<!-- نهاية القائمة الفرعية -->
</li>
<li>CSS
<ul>
<li>المحددات (Selectors)</li>
<li>الـ Box Model</li>
<li>التصميم المتجاوب (Responsive)</li>
</ul>
</li>
<li>JavaScript</li>
</ul>المتصفح هيعرض القائمة الفرعية بمسافة بادئة (indentation) وشكل نقطة مختلف عشان يميزها عن القائمة الرئيسية.
ممكن كمان نعمل قائمة مرتبة رئيسية، وجواها قوائم فرعية غير مرتبة، والعكس صحيح.
<h3>خطة السفر</h3>
<ol>
<li>اليوم الأول: الوصول والاستقرار
<ul>
<li>الذهاب إلى الفندق</li>
<li>جولة حرة في المساء</li>
</ul>
</li>
<li>اليوم الثاني: زيارة المعالم السياحية
<ul>
<li>زيارة المتحف</li>
<li>زيارة القلعة التاريخية</li>
</ul>
</li>
<li>اليوم الثالث: العودة</li>
</ol>دلوقتي بعد ما فهمنا الأساسيات، تعالوا نشوف إزاي ممكن نستخدم القوائم دي في سياقات مختلفة على صفحات الويب.
لما بتعرض منتج على موقع تجارة إلكترونية، قائمة المواصفات بتكون مهمة جدًا. استخدام <ul> هنا هو الأنسب لأن ترتيب المواصفات مش مهم.
<h2>مواصفات اللابتوب طراز X-200</h2>
<ul>
<li><strong>المعالج:</strong> Intel Core i7 الجيل العاشر</li>
<li><strong>الذاكرة العشوائية (RAM):</strong> 16 جيجابايت DDR4</li>
<li><strong>التخزين:</strong> 512 جيجابايت SSD فائق السرعة</li>
<li><strong>الشاشة:</strong> 15.6 بوصة بدقة Full HD</li>
<li><strong>نظام التشغيل:</strong> Windows 11</li>
</ul>في صفحات الأسئلة الشائعة، من الشائع استخدام قائمة مرتبة لعرض الأسئلة والأجوبة بترتيب معين.
<h2>الأسئلة الشائعة</h2>
<ol>
<li>
<h3>كيف يمكنني تتبع طلبي؟</h3>
<p>يمكنك تتبع طلبك من خلال صفحة "طلباتي" بعد تسجيل الدخول إلى حسابك.</p>
</li>
<li>
<h3>ما هي مدة الشحن؟</h3>
<p>مدة الشحن تتراوح بين 3 إلى 5 أيام عمل داخل المدن الرئيسية.</p>
</li>
<li>
<h3>هل يمكنني إرجاع المنتج؟</h3>
<p>نعم، يمكنك إرجاع المنتج خلال 14 يومًا من تاريخ الاستلام. يرجى مراجعة سياسة الإرجاع.</p>
</li>
</ol>لاحظ هنا كيف أننا وضعنا عناوين وفقرات نصية كاملة داخل كل عنصر <li>، وهذا يوضح مرونة وقوة القوائم في تنظيم المحتوى المعقد.
الآن حان دورك لتطبيق ما تعلمته. أفضل طريقة لتعلم البرمجة هي الممارسة.
1. افتح محرر الأكواد بتاعك (زي VS Code) وأنشئ ملف جديد باسم lists-practice.html.
2. ابدأ بكتابة الهيكل الأساسي لصفحة HTML.
3. داخل وسم <body>، قم بإنشاء المحتوى التالي:
<h1>صفحتي الشخصية عن الهوايات</h1>
<h2>هواياتي المفضلة</h2>
<!-- أنشئ هنا قائمة غير مرتبة (ul) تحتوي على 3 من هواياتك المفضلة -->
<h2>أهدافي للعام الحالي</h2>
<!-- أنشئ هنا قائمة مرتبة (ol) تحتوي على 3 أهداف تريد تحقيقها بالترتيب -->
4. بعد ما تكمل الكود، احفظ الملف وافتحه في المتصفح عشان تشوف النتيجة.
5. جرّب تعدل على القوائم، ضيف عناصر جديدة، وغير `type` بتاع القائمة المرتبة.
حاول تعديل التمرين السابق لإنشاء قائمة متداخلة. تحت كل هواية في القائمة غير المرتبة، أضف قائمة فرعية تشرح فيها ليه بتحب الهواية دي أو بعض الأنشطة المتعلقة بيها.
تهانينا! لقد أكملت درس القوائم بنجاح. الآن أصبحت لديك أداة قوية لتنظيم وعرض المحتوى بشكل احترافي في صفحات الويب. القوائم هي حجر أساس في HTML، وفهمها جيدًا سيساعدك كثيرًا في رحلتك لتعلم تطوير الويب.
بعد ما تعلمنا ازاي ننظم النصوص والعناوين، جه الوقت نضيف لمسة بصرية وجمالية لصفحاتنا. صفحات الويب من غير صور بتكون مملة جدًا، زي الجرنال القديم. وسم <img> هو الأداة السحرية اللي بتسمحلنا نعرض الصور.
حاجة مهمة جدًا لازم تعرفها عن وسم <img>: هو وسم "فارغ" أو "ذاتي الإغلاق" (self-closing). يعني مش محتاج وسم إغلاق زي </img>. هو بيتكتب كده وخلاص. المعلومات اللي بيحتاجها عشان يعرض الصورة بتتحط جواه على هيئة "خصائص" أو attributes. أهم خاصيتين، واللي من غيرهم الوسم مالوش لازمة، هما src و alt.
<img src="مسار_الصورة_هنا" alt="وصف_للصورة_هنا">زي ما أنت شايف، الوسم بسيط جدًا. كل السحر بيحصل في الخصائص اللي جواه. يلا بينا نتعمق في كل خاصية ونفهمها بالتفصيل.
كلمة src هي اختصار لكلمة "Source" يعني "المصدر". الخاصية دي هي اللي بتقول للمتصفح مكان الصورة فين عشان يقدر يجيبها ويعرضها. من غيرها، المتصفح مش هيعرف يعرض إيه. عندنا طريقتين نحدد بيهم مصدر الصورة:
ده بيكون رابط كامل لصورة موجودة على الإنترنت. بتبدأ بـ http:// أو https://. الطريقة دي سهلة لو عايز تعرض صورة من موقع تاني.
<h2>صورة قطة من الإنترنت</h2>
<img src="https://placekitten.com/400/300" alt="صورة قطة جميلة">تحذير: لما تستخدم صور من مواقع تانية، اتأكد إنك عندك الحق تستخدمها عشان تتجنب مشاكل حقوق الملكية. كمان لو الموقع ده حذف الصورة، هتختفي من عندك.
دي الطريقة الأفضل والأكثر احترافية. هنا الصورة بتكون جزء من ملفات موقعك. الرابط بيكون "نسبي" لمكان ملف الـ HTML اللي أنت فيه.
لو ملف الصورة موجود في نفس المجلد مع ملف الـ HTML، بتكتب اسمها بس.
<!-- نفترض وجود صورة اسمها "car.jpg" في نفس المجلد -->
<img src="car.jpg" alt="سيارة رياضية حمراء">عادة بننظم شغلنا وبنحط كل الصور في مجلد اسمه "images" أو "img". عشان توصل للصورة، بتكتب اسم المجلد الأول وبعدين شرطة مايلة / وبعدين اسم الصورة.
<!-- نفترض وجود مجلد "images" وبداخله صورة "laptop.png" -->
<img src="images/laptop.png" alt="لابتوب على مكتب خشبي">كلمة alt هي اختصار لكلمة "Alternative" يعني "بديل". الخاصية دي بتقدم وصف نصي للصورة. قد تظن أنها غير مهمة، لكنها في الحقيقة من أهم الخصائص في HTML لسببين رئيسيين:
alt عشان يوصف الصورة للمستخدم. من غيرها، المستخدم مش هيفهم الصورة دي عن إيه.alt. ده بيدي للمستخدم فكرة عن الصورة اللي كانت المفروض تظهر.alt بيساعد صورك تظهر في نتائج بحث الصور.
<!-- رابط صورة غير صحيح عمدًا -->
<img src="images/صورة_مش_موجودة.jpg" alt="شعار شركة جوجل ملون">
<!-- جرب تشيل خاصية alt وشوف الفرق -->
<img src="images/صورة_مش_موجودة.jpg">
نصيحة ذهبية: دائمًا اكتب وصف واضح ومختصر ومفيد في خاصية alt. تخيل إنك بتوصف الصورة لواحد صاحبك على التليفون.
أحيانًا بتكون الصورة اللي عندك حجمها كبير جدًا أو صغير جدًا على المكان اللي عايز تحطها فيه. تقدر تتحكم في عرض (width) وارتفاع (height) الصورة مباشرة من خلال خصائص HTML. القيم بتتكتب بالبيكسل (px) من غير ما تكتب الوحدة.
<!-- الصورة دي هتظهر بعرض 200 بيكسل وارتفاع 150 بيكسل -->
<img src="images/laptop.png" alt="لابتوب" width="200" height="150">انتبه: لو حددت العرض والارتفاع بقيم لا تتناسب مع أبعاد الصورة الأصلية، الصورة هتتمط أو تنضغط وشكلها هيبوظ.
أفضل طريقة هي إنك تحدد خاصية واحدة بس (العرض width غالبًا)، والمتصفح هيحسب القيمة التانية تلقائيًا عشان يحافظ على أبعاد الصورة الأصلية (Aspect Ratio) وشكلها ميبوظش.
<!-- المتصفح هيخلي عرض الصورة 300 بيكسل ويظبط ارتفاعها بنفسه -->
<img src="images/laptop.png" alt="لابتوب" width="300">ملاحظة متقدمة: في عالم تطوير الويب الحديث، من الأفضل دائمًا التحكم في أحجام الصور باستخدام لغة CSS بدلًا من خصائص HTML، لأنها بتدينا تحكم أكبر وبتخلي الموقع متجاوب مع كل الشاشات. لكن معرفة هذه الخصائص مهمة للأساسيات.
إيه رأيك لما المستخدم يضغط على صورة، توديه على صفحة تانية؟ ده سهل جدًا. كل اللي عليك تعمله هو إنك تحط وسم <img> بالكامل جوه وسم الرابط <a> اللي اتعلمناه في الدرس اللي فات.
<h3>اضغط على اللوجو لزيارة جوجل</h3>
<a href="https://www.google.com">
<img src="images/google-logo.png" alt="شعار جوجل" width="250">
</a>لما تعمل كده، المتصفح هيضيف حدود زرقاء حوالين الصورة (في بعض المتصفحات القديمة) وهيحول مؤشر الماوس لشكل اليد لما تقف عليها، وده معناه إنها بقت رابط تقدر تضغط عليه.
أحيانًا بتحتاج تضيف تعليق توضيحي تحت الصورة، زي "صورة الأهرامات بالجيزة" أو "الرئيس التنفيذي للشركة". HTML5 قدمتلنا وسوم مخصصة للموضوع ده عشان تخلي الكود منظم وله معنى أكتر.
<figure>: ده وسم بيستخدم كحاوية للمحتوى المرئي (زي صورة أو رسم بياني) والتعليق بتاعه.<figcaption>: ده وسم بيتحط جواه النص التوضيحي أو التعليق (Caption) الخاص بالـ figure.استخدامهم مع بعض بيعرف المتصفح ومحركات البحث إن الصورة دي والتعليق ده مرتبطين ببعض كوحدة واحدة.
<figure>
<img src="images/pyramids.jpg" alt="الأهرامات الثلاثة وأبو الهول في الجيزة" width="500">
<figcaption>صورة بانورامية لأهرامات الجيزة في مصر.</figcaption>
</figure>دلوقتي يلا نجمع كل اللي اتعلمناه عن النصوص والصور والروابط عشان نعمل أجزاء من صفحة ويب حقيقية.
<h2>أحدث هواتفنا الذكية</h2>
<figure>
<img src="images/smartphone.jpg" alt="هاتف ذكي بشاشة كبيرة" width="250">
<figcaption>هاتف "Future X" بمعالج فائق السرعة.</figcaption>
</figure>
<p>
تعرف على أحدث إصداراتنا، هاتف Future X الذي يجمع بين التصميم الأنيق والأداء القوي.
</p>
<a href="details.html">اقرأ المزيد من التفاصيل</a><h1>معرض صور الطبيعة</h1>
<p>مجموعة من أجمل الصور التي التقطناها حول العالم.</p>
<hr>
<!-- الصورة الأولى كرابط يفتح الصورة بحجمها الكامل -->
<a href="images/forest-full.jpg">
<img src="images/forest-thumb.jpg" alt="غابة كثيفة الأشجار" width="200">
</a>
<!-- الصورة الثانية -->
<a href="images/ocean-full.jpg">
<img src="images/ocean-thumb.jpg" alt="أمواج المحيط الزرقاء" width="200">
</a>
<!-- الصورة الثالثة -->
<a href="images/desert-full.jpg">
<img src="images/desert-thumb.jpg" alt="كثبان رملية في الصحراء" width="200">
</a>
حان وقت التطبيق! في هذا التمرين ستقوم بإنشاء صفحة ويب بسيطة عن حيوانك المفضل، وستستخدم فيها كل ما تعلمته عن الصور والروابط والنصوص.
animal.html.<!DOCTYPE html>, <html>, <head>, <body>).<title>، اكتب اسم الحيوان.<body>، ابدأ في بناء محتوى الصفحة كالتالي:
<h1> باسم الحيوان.<p> قصيرة تقدم فيها معلومات عامة عن هذا الحيوان.<h2> بعنوان "معرض الصور".<img>. تأكد من استخدام المسار النسبي الصحيح (images/اسم_الصورة.jpg) واكتب وصفًا جيدًا في خاصية alt. حدد عرض الصورة ليكون 300 بيكسل.<h2> بعنوان "لمعرفة المزيد".<a> يبحث عن هذا الحيوان في جوجل. (الرابط يمكن أن يكون: https://www.google.com/search?q=اسم+الحيوان). اجعل نص الرابط "ابحث في جوجل عن المزيد من المعلومات".تهانينا! لقد أكملت درس الصور بنجاح. الآن أصبحت قادرًا على إضافة العناصر البصرية لصفحاتك، وربطها بصفحات أخرى، وتنظيمها بشكل احترافي. أنت الآن تقطع شوطًا كبيرًا في رحلتك لتعلم تطوير الويب.
تخيل الإنترنت كمدينة ضخمة جدًا، وصفحات الويب هي المباني والمعالم في هذه المدينة. كيف يمكنك التنقل من مبنى لآخر؟ تحتاج إلى شوارع وجسور. في عالم الويب، هذه الشوارع والجسور هي **الروابط (Hyperlinks)**.
الروابط هي التي تجعل الويب "شبكة"، فهي تسمح لنا بالقفز من صفحة إلى أخرى، ومن موقع إلى موقع آخر، أو حتى إلى جزء معين في نفس الصفحة بمجرد نقرة واحدة. بدون الروابط، سيكون كل موقع عبارة عن جزيرة معزولة.
في HTML، نستخدم وسمًا خاصًا لإنشاء هذه الروابط، وهو وسم <a>. كلمة "a" هي اختصار لكلمة **"Anchor"** والتي تعني "مرساة"، لأنه يرسو أو يربط بين نقطتين على الويب.
وسم الرابط له تركيبة بسيطة لكنها قوية جدًا. يتكون من ثلاثة أجزاء أساسية:
<a> وبه خاصية مهمة جدًا اسمها href.</a>.
خاصية href هي اختصار لـ "Hypertext Reference" وهي أهم جزء في الرابط، لأنها تحدد وجهة الرابط أو المكان الذي سينتقل إليه المستخدم بعد النقر.
<a href="https://www.google.com">اضغط هنا للذهاب إلى جوجل</a>
في هذا المثال، https://www.google.com هو العنوان الذي سيذهب إليه المستخدم، وعبارة "اضغط هنا للذهاب إلى جوجل" هي النص الذي سيظهر باللون الأزرق وتحته خط في العادة، وعندما يضغط عليه المستخدم، يتم توجيهه إلى موقع جوجل.
الروابط الخارجية هي أكثر أنواع الروابط شيوعًا، وهي ببساطة روابط توجه المستخدم إلى موقع ويب مختلف تمامًا عن الموقع الذي يتصفحه حاليًا. على سبيل المثال، إذا كان لديك مدونة وتود أن تضع رابطًا لمقال في ويكيبيديا، فهذا يعتبر رابطًا خارجيًا.
عند إنشاء رابط خارجي، من الضروري جدًا كتابة **العنوان الكامل (Full URL)** للموقع، بما في ذلك https:// في البداية. إذا نسيت هذا الجزء، قد لا يعمل الرابط بشكل صحيح لأن المتصفح سيعتقد أنك تحاول الانتقال إلى صفحة داخل موقعك.
لنجرب إنشاء روابط لبعض المواقع الشهيرة.
<h3>مواقع مفيدة:</h3>
<p>يمكنك البحث عن أي شيء تريده باستخدام <a href="https://www.google.com">محرك بحث جوجل</a>.</p>
<p>لمشاهدة مقاطع الفيديو، أفضل مكان هو <a href="https://www.youtube.com">يوتيوب</a>.</p>
<p>للتواصل مع الأصدقاء، يمكنك استخدام <a href="https://www.facebook.com">فيسبوك</a>.</p>الروابط الداخلية هي التي تربط بين صفحات مختلفة ولكن **داخل نفس الموقع**. على سبيل المثال، في موقعك الشخصي، قد يكون لديك صفحة رئيسية، صفحة "من أنا"، وصفحة "اتصل بي". الروابط التي تضعها في الصفحة الرئيسية للتنقل إلى الصفحتين الأخريين هي روابط داخلية.
عند استخدام الروابط الداخلية، لا تحتاج إلى كتابة النطاق الكامل (مثل https://www.mysite.com). يمكنك فقط كتابة اسم الملف مباشرة إذا كان في نفس المجلد، أو تحديد مساره. هذا يسمى **المسار النسبي (Relative Path)**.
لنفترض أن لديك مجلدًا لموقعك يحتوي على ثلاثة ملفات:
- index.html (الصفحة الرئيسية)
- about.html (صفحة من أنا)
- contact.html (صفحة اتصل بي)
في ملف index.html، يمكنك وضع الروابط كالتالي:
<h1>أهلاً بكم في موقعي</h1>
<p>هذه هي الصفحة الرئيسية.</p>
<nav>
<a href="index.html">الرئيسية</a> |
<a href="about.html">من أنا؟</a> |
<a href="contact.html">اتصل بي</a>
</nav>
لاحظ أننا كتبنا فقط about.html و contact.html مباشرة. المتصفح يفهم أن هذه الملفات موجودة في نفس المكان الذي يوجد فيه ملف index.html.
هذا النوع من الروابط مفيد جدًا في الصفحات الطويلة جدًا. الروابط المرجعية تسمح للمستخدم بالقفز مباشرة إلى قسم معين **في نفس الصفحة** التي يتصفحها، بدلاً من الاضطرار إلى التمرير (scroll) للأسفل.
لإنشاء رابط مرجعي، تحتاج إلى خطوتين:
1. تحديد الوجهة: يجب أن تعطي للقسم الذي تريد القفز إليه معرفًا فريدًا (id). عادةً ما نضع هذا الـ id على العناوين مثل <h2>.
2. إنشاء الرابط: في خاصية href، تضع علامة الهاش (#) متبوعة بالـ id الذي حددته في الخطوة الأولى.
<h3>فهرس المقال:</h3>
<ul>
<li><a href="#section1">القفز إلى القسم الأول</a></li>
<li><a href="#section2">القفز إلى القسم الثاني</a></li>
<li><a href="#section3">القفز إلى الخاتمة</a></li>
</ul>
<!-- محتوى طويل جدًا هنا -->
<br><br><br><br><br><br><br><br>
<h2 id="section1">القسم الأول: المقدمة</h2>
<p>هنا محتوى القسم الأول من المقال...</p>
<br><br><br><br><br><br><br><br>
<h2 id="section2">القسم الثاني: التفاصيل</h2>
<p>هنا محتوى القسم الثاني من المقال...</p>
<br><br><br><br><br><br><br><br>
<h2 id="section3">القسم الثالث: الخاتمة</h2>
<p>هنا خاتمة المقال...</p>
جرب هذا الكود في ملف HTML. عندما تضغط على "القفز إلى القسم الأول"، ستجد أن الصفحة تتحرك تلقائيًا للأسفل لتُظهر لك العنوان الذي يحمل id="section1".
بالإضافة إلى التنقل بين الصفحات، يمكن لوسم <a> أن يقوم بوظائف أخرى مفيدة جدًا.
يمكنك إنشاء رابط عند النقر عليه، يفتح برنامج البريد الإلكتروني الافتراضي لدى المستخدم (مثل Outlook أو Gmail) مع تعبئة حقل "إلى" بعنوان بريدك الإلكتروني. هذا يتم باستخدام mailto: داخل خاصية href.
<p>للتواصل معنا، أرسل بريدًا إلكترونيًا إلى: <a href="mailto:support@mywebsite.com">فريق الدعم</a></p>
في بعض الأحيان، تريد أن يقوم المستخدم بتحميل ملف (مثل ملف PDF أو صورة) بدلاً من أن يفتحه المتصفح. يمكنك إجبار المتصفح على بدء التحميل عن طريق إضافة خاصية download إلى وسم الرابط.
<p>يمكنك تحميل تقريرنا السنوي من هنا: <a href="/files/report-2024.pdf" download>تحميل التقرير</a>.</p>
<p>حمّل هذه الصورة الرائعة: <a href="/images/wallpaper.jpg" download>تحميل الصورة</a>.</p>هناك خاصيتان إضافيتان مهمتان جدًا لتحسين تجربة المستخدم والتحكم في سلوك الروابط.
هذه الخاصية تحدد **أين** سيتم فتح الرابط. القيمة الأكثر شيوعًا هي _blank، والتي تخبر المتصفح أن يفتح الرابط في **نافذة أو علامة تبويب جديدة**. هذا مفيد جدًا للروابط الخارجية، لأنه يبقي المستخدم في موقعك بينما يفتح الموقع الآخر في تبويب جديد.
<!-- هذا الرابط سيفتح في تبويب جديد -->
<p>تابع آخر الأخبار على <a href="https://www.bbc.com/arabic" target="_blank">موقع بي بي سي</a>.</p>
<!-- هذا الرابط سيفتح في نفس التبويب (السلوك الافتراضي) -->
<p>اذهب إلى <a href="about.html">صفحة من أنا</a>.</p>تُستخدم هذه الخاصية لإضافة **معلومات إضافية** عن الرابط. هذه المعلومات تظهر كتلميح صغير (tooltip) عندما يمرر المستخدم مؤشر الفأرة فوق الرابط دون أن يضغط عليه. هذا يحسن من تجربة المستخدم وإمكانية الوصول (Accessibility).
<p>تصفح <a href="https://developer.mozilla.org" target="_blank" title="أفضل مصدر لتعلم تطوير الويب">موسوعة موزيلا للمطورين</a> لمعلومات تقنية دقيقة.</p>جرّب الكود أعلاه، ومرر الماوس فوق الرابط لترى الرسالة "أفضل مصدر لتعلم تطوير الويب" تظهر.
ليس فقط النص هو ما يمكن أن يكون رابطًا. يمكنك تحويل أي عنصر تقريبًا إلى رابط، وأحد أشهر الاستخدامات هو جعل **الصور قابلة للنقر**. الفكرة بسيطة جدًا: بدلاً من وضع نص بين وسمي الفتح والإغلاق <a> و </a>، نضع وسم الصورة <img>.
<h3>اضغط على الشعار للذهاب إلى الصفحة الرئيسية</h3>
<a href="index.html">
<img src="images/logo.png" alt="شعار الموقع" width="150">
</a>
<h3>اضغط على الصورة لزيارة حسابنا على انستغرام</h3>
<a href="https://www.instagram.com" target="_blank">
<img src="images/instagram-icon.png" alt="أيقونة انستغرام" width="50">
</a>
ملاحظة هامة: عند استخدام الصور كروابط، يصبح من الضروري جدًا استخدام خاصية alt في وسم الصورة لوصف الصورة والغرض من الرابط. هذا يساعد المكفوفين ومحركات البحث على فهم محتوى الرابط.
حان وقت التطبيق! أفضل طريقة لترسيخ المعلومات هي الممارسة. سنقوم الآن بإنشاء صفحة ويب بسيطة تطبق كل ما تعلمناه عن الروابط.
أنشئ ملف HTML جديد، وانسخ الكود التالي فيه. هذا الكود يمثل صفحة شخصية بسيطة تحتوي على كل أنواع الروابط التي تعلمناها.
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<title>صفحة التمرين على الروابط</title>
</head>
<body>
<h1>صفحتي الشخصية</h1>
<p>مرحبًا بكم في صفحتي. هنا ستجدون معلومات عني ومشاريعي.</p>
<h2>فهرس سريع:</h2>
<ul>
<li><a href="#about-me">نبذة عني</a></li>
<li><a href="#my-projects">مشاريعي</a></li>
<li><a href="#contact-info">معلومات التواصل</a></li>
</ul>
<hr>
<h2 id="about-me">نبذة عني</h2>
<p>أنا مطور ويب مبتدئ، أتعلم حاليًا HTML. أحب القراءة والبرمجة.</p>
<p>
أحد مصادري المفضلة للتعلم هو
<a href="https://www.w3schools.com/" target="_blank" title="موقع رائع لتعلم البرمجة">موقع EgQuiz</a>.
</p>
<hr>
<h2 id="my-projects">مشاريعي</h2>
<p>حاليًا، أعمل على مشروعي الأول. يمكنك تحميل ملخص فكرة المشروع من هنا:</p>
<p>
<a href="project-summary.pdf" download>تحميل ملخص المشروع (ملف PDF وهمي)</a>
</p>
<hr>
<h2 id="contact-info">معلومات التواصل</h2>
<p>يمكنك التواصل معي عبر البريد الإلكتروني:</p>
<p>
<a href="mailto:my-email@example.com">أرسل لي بريدًا إلكترونيًا</a>
</p>
<p>أو تابعني على تويتر (حساب وهمي):</p>
<a href="https://twitter.com" target="_blank">
<img src="twitter-logo.png" alt="شعار تويتر" width="40">
</a>
</body>
</html>
تهانينا! لقد أكملت درس الروابط بنجاح. أنت الآن تتقن واحدة من أهم وأقوى المهارات في HTML. في الدروس القادمة، سنتعلم كيفية إضافة الصور والفيديوهات والقوائم لجعل صفحاتك أكثر ثراءً.
في HTML، نستخدم وسوم العناوين من <h1> إلى <h6> لإنشاء عناوين ذات مستويات مختلفة. وسوم العناوين هذه ضرورية لتنظيم المحتوى وتعزيز تجربة المستخدم وتحسين محركات البحث (SEO).
<h1>هذا عنوان رئيسي كبير (المستوى الأول)</h1>
<h2>هذا عنوان فرعي (المستوى الثاني)</h2>
<h3>هذا عنوان أصغر (المستوى الثالث)</h3>
<h4>هذا عنوان (المستوى الرابع)</h4>
<h5>هذا عنوان (المستوى الخامس)</h5>
<h6>هذا عنوان صغير (المستوى السادس)</h6>
1. يجب استخدام <h1> مرة واحدة فقط في الصفحة كعنوان رئيسي
2. الحفاظ على تسلسل منطقي للعناوين (لا تنتقل من h1 إلى h3 مباشرة)
3. استخدام العناوين لتنظيم المحتوى وليس فقط لتغيير حجم النص
4. جعل العناوين وصيفة للمحتوى الذي يليها
<h1>عنوان المقال الرئيسي</h1>
<h2>القسم الأول من المقال</h2>
<h3>فرع داخل القسم الأول</h3>
<h2>القسم الثاني من المقال</h2>وسم <p> يُستخدم لإنشاء فقرات نصية في HTML. يقوم المتصفح تلقائيًا بإضافة مسافة (هامش) قبل وبعد كل فقرة.
<p>هذه فقرة نصية عادية. يمكن أن تحتوي على أي amount من النصوص والكلمات.</p>
<p>هذه فقرة نصية أخرى. لاحظ المسافة التي يضيفها المتصفح تلقائيًا بين الفقرات.</p><h1>مقال عن تعلم HTML</h1>
<p>HTML هي لغة ترميز تستخدم لإنشاء صفحات الويب.</p>
<h2>مزايا تعلم HTML</h2>
<p>تعلم HTML يمنحك القدرة على إنشاء مواقع الويب الخاصة بك.</p>
<p>كما أنه يمثل الخطوة الأولى في رحلة تعلم تطوير الويب.</p>
<h2>الوسوم الأساسية في HTML</h2>
<p>هناك العديد من الوسوم في HTML، each with its own purpose.</p>لاحظ كيف أن كل فقرة تبدأ بوسم <p> وتنتهي بوسم </p>. هذه هي الطريقة الصحيحة لإنشاء الفقرات النصية.
وسم <br> يُستخدم لإدراج فواصل أسطر داخل النص. وهو من الوسوم الفارغة (لا تحتاج إلى وسم إغلاق في HTML5).
<p> يُنشئ فقرة جديدة مع مسافات قبلها وبعدها، بينما <br> ينتقل فقط إلى السطر التالي دون إضافة مسافات.
<p>
هذا السطر الأول.<br>
هذا السطر الثاني بعد كسر السطر.<br><br>
سطر فارغ بيني وبين السطر السابق.<br>
وهذا آخر سطر.
</p><h3>معلومات الاتصال</h3>
<p>
الاسم: أحمد محمد<br>
البريد الإلكتروني: ahmed@example.com<br>
الهاتف: 0123456789
</p>ملاحظة: لا تستخدم <br> repeatedly لإنشاء مسافات كبيرة بين العناصر. استخدم CSS للتحكم في المسافات.
وسم <hr> يُستخدم لإدراج خط أفقي فاصل بين أقسام المحتوى. وهو أيضًا من الوسوم الفارغة.
<h2>القسم الأول</h2>
<p>هذا محتوى القسم الأول من الصفحة.</p>
<hr>
<h2>القسم الثاني</h2>
<p>هذا محتوى القسم الثاني من الصفحة.</p>
<hr>
<h2>القسم الثالث</h2>
<p>هذا محتوى القسم الثالث من الصفحة.</p><article>
<h1>عنوان المقال الرئيسي</h1>
<p>مقدمة المقال.</p>
<hr>
<h2>الجزء الأول من المقال</h2>
<p>محتوى الجزء الأول.</p>
<hr>
<h2>الجزء الثاني من المقال</h2>
<p>محتوى الجزء الثاني.</p>
<hr>
<h2>خاتمة المقال</h2>
<p>الخاتمة والاستنتاجات.</p>
</article>يُستخدم <hr> لفصل between different thematic sections of content. وهو أكثر من مجرد خط decorational، فهو يحمل meaning semantique.
بالإضافة إلى العناوين والفقرات، تقدم HTML وسومًا خاصة لتنسيق النص:
<p>
هذا نص <strong>مهم جدًا</strong>.<br>
هذا نص <em>مائل</em>.<br>
هذا <mark>نص مميز</mark>.<br>
هذا <small>نص صغير</small>.<br>
هذا <del>نص محذوف</del>.<br>
هذا <ins>نص مضاف</ins>.<br>
هذا <sub>نص منخفض</sub> وهذا <sup>نص مرتفع</sup>.
</p><h3>وصفة كعك الشوكولاتة</h3>
<p>
<strong>المقادير:</strong><br>
- 2 كوب دقيق<br>
- 1 <sup>1</sup>/<sub>2</sub> كوب سكر<br>
- 3 بيضات<br>
- <em>رشة ملح</em><br>
</p>
<p>
<mark>ملاحظة:</mark> يجب تسخين الفرن مسبقًا إلى 180 <sup>o</sup>C.
</p>هذه الوسوم تساعد في إضافة emphasis ودلالات إضافية للنص، مما يحسن accessibility وسهولة القراءة.
الآن لنطبق كل ما تعلمناه في مثال متكامل يوضح كيفية استخدام العناوين والفقرات ووسوم التنسيق معًا.
<h1>العادات السبع للناس الأكثر فعالية</h1>
<h2>بقلم ستيفن كوفي</h2>
<hr>
<h3>ملخص الكتاب</h3>
<p>
هذا الكتاب يُعد من أشهر الكتب في مجال تطوير الذات والقيادة.
يقدم الكاتب <strong>سبع عادات</strong> يمكن أن transform حياة الأشخاص
وتجعلهم أكثر فعالية في حياتهم الشخصية والمهنية.
</p>
<h3>العادات الأساسية</h3>
<p>
<strong>العادة الأولى: كن proactive</strong><br>
التركيز على الدائرة التي يمكنك التأثير فيها بدلاً من الانشغال بما هو beyond سيطرتك.
</p>
<p>
<strong>العادة الثانية: ابدأ والنهاية في ذهنك</strong><br>
حدد أهدافك وvision لحياتك قبل أن تبدأ في العمل towards تحقيقها.
</p>
<hr>
<p><small>جميع الحقوق محفوظة للناشر الأصلي</small></p><h1>السيرة الذاتية</h1>
<h2>أحمد محمد</h2>
<hr>
<h3>معلومات شخصية</h3>
<p>
البريد الإلكتروني: ahmed@example.com<br>
الهاتف: 0123456789<br>
العنوان: القاهرة، مصر
</p>
<h3>المؤهلات العلمية</h3>
<p>
<strong>بكالوريوس في علوم الحاسب</strong><br>
جامعة القاهرة - 2015-2019<br>
التقدير: جيد جدًا
</p>
<h3>المهارات</h3>
<p>
- HTML & CSS<br>
- JavaScript<br>
- React<br>
- Node.js
</p>
<hr>
<p><em>آخر تحديث: يناير 2023</em></p>الآن حان وقت التطبيق العملي. ستقوم بإنشاء صفحة ويب كاملة باستخدام كل ما تعلمته في هذا الدرس.
1. افتح محرر النصوص الخاص بك وأنشئ ملفًا جديدًا.
2. ابدأ ببنية HTML الأساسية (html, head, body).
3. inside الجزء body، أنشئ المحتوى التالي:
<h1>مدونتي الشخصية</h1>
<h2>مرحبًا بكم في مدونتي</h2>
<hr>
<h3>عن المدونة</h3>
<p>
هذه المدونة شخصية أكتب فيها about مواضيع تهمني في مجالات التكنولوجيا،
البرمجة، وتطوير الذات. أشارك فيها تجاربي وآرائي وخبراتي.
</p>
<h3>أحدث المقالات</h3>
<h4>كيفية تعلم البرمجة من الصفر</h4>
<p>
في هذا المقال، أشارك نصائح واستراتيجيات لأي شخص يريد بدء رحلة تعلم البرمجة
بدون خبرة مسبقة. سأحدثك عن المصادر والأدوات والخطوات التي يمكنك اتباعها.
</p>
<h4>أهمية إدارة الوقت للعاملين في المجال الرقمي</h4>
<p>
إدارة الوقت من المهارات الأساسية لأي شخص يعمل في المجال الرقمي.
في هذا المقال، أستعرض بعض التقنيات والأدوات التي تساعد على تحسين إنتاجيتك.
</p>
<hr>
<p>
<small>جميع الحقوق محفوظة © 2023</small>
</p>
4. احفظ الملف باسم blog.html.
5. افتح الملف في المتصفح وشاهد النتيجة.
6. قم بالتعديلات التي ترغب فيها وأضف محتوى من عندك.
حاول إنشاء صفحة سيرة ذاتية كاملة لك، تتضمن:
تهانينا! لقد أكملت الدرس الثاني بنجاح. الآن أصبحت تعرف كيفية إنشاء العناوين والفقرات وإضافة فواصل الأسطر والخطوط الأفقية في HTML. في الدروس القادمة، سنتعلم المزيد من الوسوم لإثراء صفحاتنا بمحتوى أكثر تنوعًا.