مختبر مدونة HTML · 01

ابنِ صفحة مدونة باستخدام HTML.

تمنح HTML كل فكرة موطناً. اليوم سنحول فكرة مدونة إلى صفحة واضحة ومرحبة — عنصراً واحداً ذا معنى في كل مرة.

يمكن للجميع المساهمة: ارسم، تحدث، اكتب، أشر، اطرح سؤالاً، أو اعمل في زوج.

01تخطيطاختر ما يحتاجه القراء أولاً.

02بناءاستخدم الوسوم لتشكيل الصفحة.

03اهتماماجعلها قابلة للاستخدام لعدد أكبر من الأشخاص.

الصفحة هي محادثة مع القارئ.

الخطوة 1 · الهيكل

ابدأ بـ هيكل.

تصف وسوم HTML وظيفة كل جزء. الهيكل الدلالي يساعد المتصفحات، وقارئات الشاشة، والزملاء في الفصل على فهم صفحتك.

جرب هذاأشر إلى كل وسم واذكر المسؤولية الموكلة إليه.

blog.htmlHTML

<!DOCTYPE html>
<html>
  <body>
    <header>
      <h1>ملاحظات ميدانية</h1>
      <nav>حول · الأرشيف</nav>
    </header>
    <main>
      <article>
        <h2>ما الذي يجعل الصفحة جيدة؟</h2>
      </article>
    </main>
  </body>
</html>

الوسوم ذات المعنى تجعل التنقل في الصفحة أسهل.

الخطوة 2 · المحتوى

امنح الصفحة صوت.

تحتوي الوسوم على المحتوى، لكن الأشخاص هم من يضفون وجهة النظر. أضف عنواناً، ورابطاً مفيداً، وصورة مع كلمات تروي القصة.

عنوان يحدد التوقعات

فقرة بفكرة واحدة واضحة

رابط يوضح وجهته

توجيه ثنائياقرأ عنوانك بصوت عالٍ. هل يجذب الآخرين؟

our-blog.local / journal

مذكرات مشتركة

كيف تبدو
صفحة الويب الجيدة؟

مجموعة من الملاحظات الصغيرة، من الاستوديو الخاص بنا إلى الاستوديو الخاص بكم.

الخطوة 3 · العناية والوصول

أفسحوا المجال لـ الجميع.

لغة HTML الجيدة لا تتعلق فقط بالمظهر الصحيح، بل تمنح المزيد من الأشخاص فرصة عادلة للقراءة والفهم والمشاركة في الحوار.

العناوينأنشئ مساراً واضحاً.

الروابطصف الوجهة.

الصورأضف نصاً بديلاً مفيداً.

دورك الآنارسم مخططاً لقسم واحد من المدونة، ثم اختر وسم HTML الذي يحدد مكانه.

ألاحظ...

أتساءل...

يمكنني تجربة...