كيفية كتابة ال tag - تعلم Html

ازاي نكتب كود HTML بشكل صحيح

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

يعني إيه Syntax في HTML؟

علشان تبدأ تكتب كود HTML، لازم تكون فاهم حاجة اسمها Syntax، وده المقصود بيه "بناء الجملة" أو القواعد اللي بنمشي عليها واحنا بنكتب الأكواد. الـ HTML بيعتمد في الأساس على "التاجات" أو Tags، وهي اللي بنستخدمها علشان نحدد كل عنصر في الصفحة.

يعني الموقع بتاعك ممكن تلاقي فيه:

• عنوان

• نص

• صورة

• صوت

• فيديو
  وكل عنصر من دول له تاج معين بنستخدمه علشان يظهر بالشكل الصح في المتصفح.

---

إزاي نكتب التاج في HTML؟

التاج في HTML بيتكوّن من جزئين:

• تاج الفتح: وده بنكتبه كده: <tag>

• تاج الغلق: وده بنكتبه كده: </tag>

مثال:

لو عايز تكتب تاج خاص بالنص (Paragraph):

<p>Welcome</p>

لو عايز تكتب تاج عنوان (Heading):

<h1>Welcome</h1>

---

خطوات كتابة التاج:

1. تفتح الملف بتاع HTML اللي أنشأناه قبل كده.

2. تكتب علامة "أصغر من" < (من الكيبورد Shift + حرف الواو).

3. تكتب اسم التاج، زي p أو h1.

4. تقفل التاج بعلامة "أكبر من" > (Shift + حرف الزاي).

5. تكتب المحتوى بين تاج الفتح وتاج الغلق.

6. تكتب تاج الغلق بنفس اسم التاج، بس بتحط / قبله، زي </p> أو </h1>.

---

أدوات بتسهل علينا كتابة الأكواد

في محرر الأكواد اللي بنستخدمه (زي VS Code)، ممكن تضيف إضافات بتسهل عليك الشغل:

• Auto Close Tag: بتقفل التاج تلقائي.

• Auto Rename Tag: لو عدّلت اسم التاج المفتوح، بتعدل تلقائي في تاج الغلق.

علشان تنزل الإضافات دي:

1. افتح قسم الإضافات في VS Code.

2. اكتب في البحث:

Auto Rename Tag
Auto Close Tag

1. دوس "Install" وهيشتغلوا تلقائي.

---

إزاي نعرض نص في الصفحة؟

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

لو عايز تخلي المتصفح يعرف إن ده عنصر HTML، لازم تحط النص ده جوا تاج.

مثال:

<p>Welcome</p>

---

الفرق بين التاجات المختلفة (العناوين مثلاً)

في HTML عندنا تاجات العناوين من:

• h1 (أكبر حجم)

• لحد h6 (أصغر حجم)

مثال:

<h1>Title 1</h1>
<h2>Title 2</h2>
<h3>Title 3</h3>
<h4>Title 4</h4>
<h5>Title 5</h5>
<h6>Title 6</h6>

كل واحد منهم ليه حجم وتنسيق مختلف بيظهر تلقائي من المتصفح.

---

إيه الفرق بين النص العادي والنص جوا تاج؟

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

---

إيه هي العناصر البلوك (Block Elements)؟

زي:

• h1

• p

• div

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

---

طيب إيه الكود اللي مالهوش تاج غلق؟

في عناصر في HTML ما بتحتاجش تاج غلق. زي:

مثال:

<hr>

التاج <hr> بيضيف خط أفقي في الصفحة، ومش بيحتوي على أي محتوى، علشان كده مش محتاج تاج غلق.

---

المسافات في كود HTML

• لو عملت مسافات كبيرة بين تاج وتاج أو بين الكلمات، المتصفح مش هيعرض غير مسافة واحدة بس.

• حتى لو كتبت كل حاجة في سطر واحد أو في كذا سطر، النتيجة هي هي، لأن HTML مش بيهتم بالمسافات الكتيرة.

مثال:

<p>Welcome           to      my     website</p>

هتتعرض كده في المتصفح:

Welcome to my website

لو عايز تتحكم في التنسيقات والمسافات، ده هنتعلمه بعدين في CSS.

---

الخلاصة

• عرفنا يعني إيه تاج وSyntax في HTML.

• اتعلمنا إزاي نكتب التاجات، وإزاي نقفلها.

• شوفنا الفرق بين النص العادي والعناصر داخل تاج.

• اتعرفنا على العناصر البلوك، وإزاي بتتعرض في المتصفح.

• اتكلمنا عن التاجات اللي مش بتحتاج غلق زي <hr>.

• فهمنا نظام المسافات في HTML وإنه مش بيأثر في العرض.

شاهد فيديو توضيحي

وفي النهاية اشكرك علي القراءة واتمني منك متابعتي علي قناة اليوتيوب ليصلك كل جديد والي اللقاء