← المستوى 1 – البنّاء

الدرس 2 من 12 ⏱ 25 دقيقة

العناوين والفقرات والقوائم

املأ صفحتك بمحتوى حقيقي، وتعلّم كيف تنظّمه بوضوح.

شاهد معي: لكل محتوى وسمه الخاص

HTML لديه وسم مخصص لكل نوع من المحتوى. إليك الأكثر استخداماً:

<h1>Main heading – only once per page</h1>
<h2>A chapter heading</h2>
<h3>A smaller heading inside a chapter</h3>

<p>An ordinary paragraph of text.</p>
<p>Another paragraph. Every paragraph gets its own <p> tag.</p>

<p>You can <strong>make words bold</strong> or <em>italic</em>.</p>

العناوين تبدأ من <h1> (الأكبر) إلى <h6> (الأصغر). يعمل مثل دفتر ملاحظات: <h1> هو العنوان على الغلاف، <h2> هي الفصول، <h3> هي الأقسام الفرعية.

القوائم

<!-- A bulleted list (ul = unordered list) -->
<ul>
  <li>first thing</li>
  <li>second thing</li>
</ul>

<!-- A numbered list (ol = ordered list) -->
<ol>
  <li>step one</li>
  <li>step two</li>
</ol>

كل عنصر في القائمة هو <li>، وكلها ملفوفة إما في <ul> (نقاط) أو <ol> (أرقام).

💡

السطر الغريب <!— text —> هو تعليق – ملاحظة لك أنت فقط، المتصفح يتجاهله. المبرمجون يتركون لأنفسهم رسائل كهذه في الكود.

دورك الآن 💪

املأ صفحتك الرئيسية بالمحتوى. يجب أن تحتوي على:

  1. <h1> واحد (لديك هذا بالفعل)،
  2. فصلين على الأقل بعنوان <h2> وفقرة نص،
  3. قائمة واحدة على الأقل (<ul> أو <ol>
  4. شيء عريض باستخدام <strong>.

أفكار وحلول لمشروعك:

🏫 موقع المدرسة – أفكار وحل

الفصول يمكن أن تكون: عن مدرستنا، ما يحدث، وقائمة بالأندية.

<h1>Riverside Elementary School</h1>
<p>Welcome to our school's website.</p>

<h2>About Our School</h2>
<p>Our school has stood in Riverside for <strong>120 years</strong>. We have
350 students, a big gym, and a brand-new computer lab.</p>

<h2>Clubs</h2>
<ul>
  <li>floorball</li>
  <li>ceramics</li>
  <li>coding</li>
  <li>choir</li>
</ul>

<h2>Coming Up</h2>
<ol>
  <li>outdoor school (June)</li>
  <li>sports day</li>
  <li>winter fair</li>
</ol>
🙋 الموقع الشخصي – أفكار وحل

الفصول يمكن أن تكون: ما أحبه، ما أستطيع فعله، قائمة بألعاب أو كتب مفضلة.

<h1>Hi, I'm Jake</h1>
<p>I'm 10 years old and this is my website.</p>

<h2>What I Like</h2>
<p>More than anything, I love <strong>soccer</strong> – I play for the youth team.
At home I build worlds in Minecraft and I'm learning to code.</p>

<h2>My Top Games</h2>
<ol>
  <li>Minecraft</li>
  <li>Mario Kart</li>
  <li>Rocket League</li>
</ol>

<h2>What I Can Do</h2>
<ul>
  <li>juggle a soccer ball</li>
  <li>make pancakes</li>
  <li>build a website (right now!)</li>
</ul>
🌍 يوميات سفر – أفكار وحل

الفصول يمكن أن تكون: آخر رحلة، إلى أين نتجه، قائمة بالدول التي زرتها.

<h1>Where We've Been 🌍</h1>
<p>A journal of our trips and adventures.</p>

<h2>Last Trip: The Mountains</h2>
<p>Over the summer we hiked <strong>the whole ridge</strong>. Three days of
walking, one wrong turn, and a hundred wild berries.</p>

<h2>Countries I've Visited</h2>
<ul>
  <li>United States</li>
  <li>Canada</li>
  <li>Mexico</li>
  <li>Italy</li>
</ul>

<h2>Next Year's Plan</h2>
<ol>
  <li>camping by the lake</li>
  <li>mountains out west</li>
  <li>the beach in Greece</li>
</ol>
⚽ موقع النادي – أفكار وحل

الفصول يمكن أن تكون: عن النادي، النتائج الأخيرة، قائمة بالفريق.

<h1>Riverside Eagles FC</h1>
<p>The official website of our soccer club.</p>

<h2>About the Club</h2>
<p>We play in the district youth league. We train
<strong>Tuesdays and Thursdays at 5:00 PM</strong> on the field behind the school.</p>

<h2>Recent Results</h2>
<ol>
  <li>Eagles – Hawks 3 : 1</li>
  <li>Falcons – Eagles 2 : 2</li>
  <li>Eagles – Wildcats 4 : 0</li>
</ol>

<h2>Roster</h2>
<ul>
  <li>Jake – goalkeeper</li>
  <li>Matt – defense</li>
  <li>Owen – midfield</li>
  <li>Tom – forward</li>
</ul>

تحقق من نفسك: الصفحة لها عنوان كبير، عناوين فصول أصغر، فقرات، وقائمة واحدة على الأقل بنقاط أو أرقام. تبدو كموقع حقيقي (حتى لو لم يُزَيَّن بعد).

ما ستخرج به من هذا الدرس