X

اتش.تي.إم.إل الدلالية

٧. إنشاء صفحة مدونة قطط

ورشة عمل

في هذه الورشة، ستتدرب على العمل مع لغة HTML الدلالية من خلال إنشاء صفحة مدونة مخصصة للسيد ويسكرز القط.

نموذج "اتش.تي.إم.إل" The HTML boilerplate.


<!DOCTYPE html>
<html lang="ar" dir="rtl">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>مدونة السيد ويسكرز</title>
    </head>

    <body>

	<!-- هنا تضع اكواد التطبيق -->

    </body>

</html>

الخطوة 1 :

أول قسم section ستقوم بإنشائه هو رأس الصفحة the page header.

يُستخدم عنصر header لتمثيل المحتوى التمهيدي introductory content مثل التنقل بين الصفحات page navigation والمعلومات التمهيدية introductory information الأخرى.

إليك مثال باستخدام عنصر header :


<header>
 <h1>عنوان الصفحة الرئيسية هنا</h1>
 <img src="example-logo.png" alt="Example logo"/>
</header>
  • أضف عنصر header داخل عنصر body.

الخطوة 2 :

سيكون header مسؤولاً عن عرض العنوان الرئيسي main title والصورة وقائمة التنقل بين صفحات المدونة.

  • داخل عنصر header، أضف عنوانًا من المستوى الأول h1 يحتوي على النص التالي:

    • مرحبًا بكم في صفحة مدونة السيد ويسكرز!

الخطوة 3 :

في هذا المحتوى التمهيدي، ستحتاج إلى عرض صورة image للسيد ويسكرز مع تعليق a caption.

  • أسفل عنصر h1، ابدأ بإضافة عنصر figure.
  • داخل عنصر figure، أضف عنصر img .
  • يجب أن تكون قيمة السمة src للصورة img هي:

    • "https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"

  • ويجب أن يكون للنص البديل alt قيمة "قطة في الحديقة".
  • أسفل عنصر img، أضف تعليقًا figcaption يحتوي على النص : "السيد ويسكرز في الحديقة"

الخطوة 4 :

بالنسبة لمدونتك your blog، يجب أن تكون هناك طريقة للمستخدمين للتنقل to navigate بين الأقسام المختلفة different sections في الصفحة.

يُستخدم عنصر التنقل nav لتوفير روابط تنقل navigation links إلى أقسام sections أخرى في المستند document أو أقسام أخرى في الموقع الإلكتروني the website . في كثير من الأحيان، يُستخدم عنصر التنقل nav للقوائم menus أو جداول المحتويات table of contents.

إليك مثال على استخدام عنصر nav :


<nav>
 <ul>
  <li><a href="#">الصفحة الرئيسية</a></li>
  <li><a href="#about">نبذة عنا</a></li>
  <li><a href="#contact">الاتصال</a></li>
 </ul>
</nav>
  • أسفل عنصر figure الخاص بك، أضف عنصر nav مع عنصر ul متداخل بداخله nested inside.
  • داخل عنصر ul، أضف ثلاثة عناصر li.

الخطوة 5 :

  • داخل كل عنصر من عناصر li، ستحتاج إلى عنصر رابط an anchor element.
  • بالنسبة لعنصر الرابط الأول، يجب أن يكون النص نبذة عنا وقيمة سمة href هي about#. يمثل رمز الهاش # أمام كلمة about اسم معرف id يمكن إضافته لاحقًا في المشروع.
  • بالنسبة لعنصر الرابط الثاني، يجب أن يكون النص منشورات وقيمة سمة href هي posts#.
  • بالنسبة لعنصر الرابط الثالث، يجب أن يكون النص اتصل بنا ويجب أن تكون قيمة سمة href هي contact#.

الخطوة 6 :

الآن وقد انتهيت من إنشاء رأس الصفحة page header، ستحتاج إلى البدء في إضافة المحتوى الرئيسي main content.

  • أسفل header، أضف عنصر main.

الخطوة 7 :

سيكون القسم الأول The first section في الصفحة هو قسم "نبذة عنا". سيقدم هذا القسم section السيد ويسكرز ويعطي المستخدمين فكرة عن محتوى هذه المدونة.

  • داخل العنصر main، أضف عنصر section مع تعيين سمة المعرف id إلى "about".
  • داخل عنصر section، أضف عنوانًا من المستوى الثاني h2 بنص نبذة عنا.

الخطوة 8 :

  • أسفل عنصر h2، أضف عنصر فقرة يحتوي على النص التالي: مرحباً! أنا جين دو، كاتبة شغوفة أجد إلهاماً لا ينضب في تصرفات قطي المحبوب، السيد ويسكرز..
  • أسفل عنصر الفقرة الخاص بك، أضف عنصر فقرة آخر يحتوي على النص التالي: طبيعته المرحة وطاقته التي لا تنضب تجعلني دائماً في حالة تأهب. أحبه كثيراً.

الخطوة 9 :

الآن بعد أن أضفت قسم "نبذة عنا"، حاول النقر على رابط نبذة عنا لمشاهدة الصفحة وهي تنتقل إلى ذلك القسم.

القسم التالي The next section في صفحة المدونة the blog page سيكون عبارة عن قائمة بالمنشورات posts التي تتحدث عن السيد ويسكرز.

  • أضف عنصر section آخر مع تعيين المعرف id إلى "posts"
  • أضف عنصر h2 داخل عنصر section مع نص المنشورات.

الخطوة 10 :

بالنسبة لأول منشور في المدونة، ستستخدم عنصر المقالة article element.

يمثل عنصر article محتوى مكتفياً ذاتياً على صفحة ويب.

مثال :


<article>
 <h1>مثال لعنوان المقالة</h1>
 <p>مثال لنص المقال</p>
</article>
  • أسفل عنصر h2، أضف عنصر article.
  • داخل عنصر article، أضف عنصر h3 يحتوي على النص : اليوم الأول للسيد ويسكرز في المنزل.

يُستخدم عنصر h3 هنا لأن الحفاظ على التسلسل الهرمي الصحيح a proper structural hierarchy لعناصر العناوين for heading elements أمرٌ بالغ الأهمية. وبما أن العنوان الفرعي للمنشور هو عنصر h2، فإن المستوى التالي في التسلسل الهرمي سيكون h3.

الخطوة 11 :

ستحتوي هذه المدونة This blog على فقرتين بنص "لوريم إيبسوم" lorem ipsum.

يُستخدم نص لوريم إيبسوم lorem ipsum عادةً في تطوير مواقع الويب كنص تجريبي as placeholder text. وهو مفيد عندما ترغب في التركيز to focus على بناء الهيكل الأساسي the basic structure لصفحات الويب الخاصة بك دون الحاجة إلى القلق بشأن المحتوى الفعلي في الوقت الحالي.

فيما يلي مثال على استخدام "لوريم إيبسوم":


<p>
 انه كل تعديل وأزيز, أعلنت السيء واستمرت قام ثم.
 مسرح وعلى جديدة أم كان, من الى تكبّد ترتيب لتقليعة.
 إيو كل فبعد الأوروبيّون.
</p>
  • أسفل عنصر h3 الخاص بك، أضف فقرتين من نص لوريم إيبسوم lorem ipsum.

الخطوة 12 :

  • بالنسبة للمنشور الثاني في المدونة the second blog post، ستحتاج إلى إضافة عنصر article آخر.
  • أضف عنصر h3 داخل عنصر article مع نص : أول حمام للسيد ويسكرز .
  • أسفل عنصر h3 الخاص بك، أضف فقرتين من نص "لوريم إيبسوم" lorem ipsum .

الخطوة 13 :

  • بالنسبة للمنشور الثالث في المدونة the third blog post، ستحتاج إلى إضافة عنصر article آخر.
  • داخل عنصر article، أضف عنصر h3 يحتوي على نص : حفل عيد ميلاد السيد ويسكرز الأول.
  • أسفل عنصر h3 الخاص بك، أضف فقرتين من نص "لوريم إيبسوم" lorem ipsum .

الخطوة 14 :

الآن وقد انتهيت من إضافة جميع منشورات المدونة، حاول النقر clicking على رابط "المنشورات" وسترى أن الصفحة ستنتقل إلى قسم "المنشورات".

آخر عنصر يجب إضافته إلى صفحة مدونتك هو قسم الاتصال contact section.

  • أسفل عنصر main، أضف عنصر footer.

الخطوة 15 :

  • داخل عنصر footer، أضف عنصر section مع تعيين المعرف id إلى "contact".
  • داخل عنصر section، أضف عنصر h2 بنص : اتصل بنا .

الخطوة 16 :

في قسم "الاتصال" contact section، ستحتاج إلى عرض معلومات الاتصال contact information بمؤلف المدونة. ستستخدم عنصر "عنوان" address element لهذا الغرض.

يُستخدم عنصر address لتمثيل معلومات الاتصال بشخص أو مؤسسة.

فيما يلي مثال على استخدام عنصر العنوان address لكتابة عنوان فعلي. يُستخدم عنصر br هنا لإنشاء فاصل أسطر بين سطور النص.


<address>
 1234 شارع الخيال <br />
 مدينة وهمية، الولايات المتحدة الأمريكية
</address>
  • أسفل عنصر h2 الخاص بك، أضف عنصر address.

الخطوة 17 :

في هذه الخطوة، ستحتاج إلى إضافة رقم الهاتف phone number وعنوان البريد الإلكتروني email address لمؤلف المدونة.

  • أضف عنصر فقرة داخل عنصر address يحتوي على النص التالي: الهاتف: 555-555-5555.
  • أسفل عنصر الفقرة هذا، أضف عنصر فقرة آخر بنص : البريد الإلكتروني: fake@email.com

الخطوة 18 :

لتحسين تجربة المستخدم، ستحتاج إلى تحسين enhance رقم الهاتف بحيث ينقر المستخدمون users tap عليه ويبدأون مكالمة.

إليك كيفية جعل أرقام الهواتف قابلة للنقر clickable :


<a href="tel:2345678912">234-567-8912</a>
  • قم بتغليف النص 5555-555-555 في عنصر رابط an anchor element واستخدم :tel لجعله رقم هاتف قابل للنقر.

الخطوة الأخيرة :

وبالمثل، ينبغي أن يكون المستخدمون قادرين على النقر click على عنوان البريد الإلكتروني وإرسال send بريد إلكتروني من برنامج البريد الإلكتروني الافتراضي الخاص بهم.

إليك كيفية جعل عناوين البريد الإلكتروني قابلة للنقر clickable :


<a href="mailto:contact@company.com">contact@company.com</a>

في هذه الخطوة الأخيرة، قم بتغليف النص fake@email.com في عنصر رابط an anchor element واستخدم :mailto لجعله عنوان بريد إلكتروني قابل للنقر.

وبهذا التغيير، أصبحت صفحة مدونتك الآن مكتملة.

حل التطبيق :


<!DOCTYPE html>
<html lang="ar" dir="rtl">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>مدونة السيد ويسكرز</title>
 </head>

 <body>

  <header>
   <h1>!مرحبًا بكم في صفحة مدونة السيد ويسكرز</h1>
   <figure>
    <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg" alt="قطة في الحديقة"/>
    <figcaption>السيد ويسكرز في الحديقة</figcaption>
   </figure>
   <nav>
    <ul>
     <li><a href="#about">نبذة عنا</a></li>
     <li><a href="#posts">منشورات</a></li>
     <li><a href="#contact">اتصل بنا</a></li>
    </ul>
   </nav>
  </header>
 
  <main>
  <section id="about">
   <h2>نبذة عنا</h2>
   <p>.مرحباً! أنا جين دو، كاتبة شغوفة أجد إلهاماً لا ينضب في تصرفات قطي المحبوب، السيد ويسكرز</p>
   <p>.طبيعته المرحة وطاقته التي لا تنضب تجعلني دائماً في حالة تأهب. أحبه كثيراً</p>
  </section>
  <section id="posts">
   <h2>المنشورات</h2>
   <article>
    <h3>اليوم الأول للسيد ويسكرز في المنزل</h3>
	<p>
     انه كل تعديل وأزيز, أعلنت السيء واستمرت قام ثم.
 	مسرح وعلى جديدة أم كان, من الى تكبّد ترتيب لتقليعة. 
	إيو كل فبعد الأوروبيّون. 
	</p>
	<p>
	 انه كل تعديل وأزيز, أعلنت السيء واستمرت قام ثم.
     مسرح وعلى جديدة أم كان, من الى تكبّد ترتيب لتقليعة.
 إيو كل فبعد الأوروبيّون.    
	</p>
   </article>
   <article>
    <h3>أول حمام للسيد ويسكرز</h3>
	<p>
     انه كل تعديل وأزيز, أعلنت السيء واستمرت قام ثم.
 	مسرح وعلى جديدة أم كان, من الى تكبّد ترتيب لتقليعة. 
	إيو كل فبعد الأوروبيّون. 
	</p>
	<p>
	 انه كل تعديل وأزيز, أعلنت السيء واستمرت قام ثم.
     مسرح وعلى جديدة أم كان, من الى تكبّد ترتيب لتقليعة.
 إيو كل فبعد الأوروبيّون.    
	</p>
   </article>
   <article>
    <h3>حفل عيد ميلاد السيد ويسكرز الأول</h3>
	<p>
     انه كل تعديل وأزيز, أعلنت السيء واستمرت قام ثم.
 	مسرح وعلى جديدة أم كان, من الى تكبّد ترتيب لتقليعة. 
	إيو كل فبعد الأوروبيّون. 
	</p>
	<p>
	 انه كل تعديل وأزيز, أعلنت السيء واستمرت قام ثم.
     مسرح وعلى جديدة أم كان, من الى تكبّد ترتيب لتقليعة.
 إيو كل فبعد الأوروبيّون.    
	</p>
   </article>
  </section>
  </main>

  <footer>
   <section id="contact">
   <h2>اتصل بنا</h2>
   <address>
    <p><a href="tel:5555555555">555-555-5555</a>:الهاتف</p>
    <p><a href="mailto:fake@email.com">fake@email.com</a>:البريد الإلكتروني</p>
   </address>
  </section>
  </footer>

 </body>

</html>

معاينة التطبيق :