Speaker A
بسم الله الرحمن الرحيم والصلاه والسلام على اشرف المرسلين سيدنا محمد.
شرح مبسط للهيدنج في HTML من H1 إلى H6 مع توضيح الاستخدامات الصحيحة وأهميتها في التصميم والترتيب الشجري بالعربية.
Key Takeaways
- الهيدنجات تستخدم لتنظيم العناوين داخل الصفحة من الأكبر (H1) إلى الأصغر (H6).
- H1 يجب أن يكون عنواناً واحداً فقط في الصفحة لضمان تحسين محركات البحث.
- الترتيب الشجري للهيدنجات ضروري لتصميم موقع احترافي وصديق لمحركات البحث.
- المتصفح يوفر تنسيقات افتراضية للهيدنجات تعرف باليوزر ايجنت ستايل شيت.
- تعلم CSS ضروري للتحكم الكامل في مظهر الهيدنجات.
Summary
- مقدمة عن الهيدنج في HTML والفرق بين الهيدنج والهيد تاج.
- شرح مستويات الهيدنج من H1 إلى H6 وأهميتها في تنظيم المحتوى.
- عرض التنسيقات الافتراضية للهيدنج التي يوفرها اليوزر ايجنت (المتصفح).
- توضيح أن H1 هو العنوان الرئيسي ولا يجب تكراره لضمان صلاحية الموقع لمحركات البحث.
- شرح الترتيب الشجري الصحيح لاستخدام الهيدنجات داخل المحتوى (H1 ثم H2 ثم H3 وهكذا).
- أمثلة عملية على استخدام الهيدنجات كعناوين للكتاب، الفصول، القصص، والعناوين الفرعية.
- تحذير من الأخطاء الشائعة في ترتيب الهيدنجات وأثرها على قبول التصميمات في الأسواق العالمية.
- تأكيد أهمية تعلم CSS لاحقاً للتحكم في تنسيقات الهيدنجات الافتراضية.
- تشجيع على التطبيق العملي بعد تعلم باقي عناصر HTML وCSS.
- ختام الفيديو بالدعاء والتمني بأن يكون الدرس بسيط وسهل.
Full Transcript — Download SRT & Markdown
Speaker A
النهارده يا جماعه ان شاء الله هنتكلم مع بعض عن الهيدنج، الهيدنج يا جماعه غير الهيد تاج.
Speaker A
الهيدنج هي العناوين.
Speaker A
العناوين حاجه من الحاجات البسيطه جدا والهيفه اللي ممكن ما تاخدش 30 ثانيه عشان تشرحها، لكن هنستغل الفيديو في ان احنا نعرف شويه معلومات ظريفه وحاجات كان ناس بتقع فيها، يعني مشاكل كان ناس بتقع فيها.
Speaker A
عندنا يا جماعه في الهيدنج، خلينا نعمل كده كومنت، عندنا في الهيدنج ست مستويات H1 لحد H6.
Speaker A
H1 هو الهيدنج التوب بتاعهم، يعني اللي هو التوب ليفل في الهيدنج هو ال H1، ال H1 هو أكبر عنوان عندنا.
Speaker A
خلينا نشوف مع بعض كده لو جيت أنا دلوقتي على سبيل المثال مثلا والكلام اللي أنا كاتبه ده اللي هو This Is My Book Store.
Speaker A
عايزين نبص عليه كده في الصفحه شكله إيه؟
Speaker A
ونعمل عليه انسبكت زي ما اتعلمنا.
Speaker A
كليك يمين وانسبكت.
Speaker A
هنيجي دلوقتي عند الكلام بتاعنا اللي هو ده، هتلاحظ إنه مفيش أي تنسيقات للكلام.
Speaker A
مفيش تنسيقات تكبر الكلام، مفيش حاجه تخص خالص الحجم بتاع الكلام.
Speaker A
طيب خلينا كده هنا نبص على حاجه هنشرحها دلوقتي ونعرف معناها.
Speaker A
اللي هي دي.
Speaker A
يوزر ايجنت ستايل شيت.
Speaker A
خليك حافظ الجمله دي عشان هنشرحها دلوقتي ان شاء الله بالتفصيل.
Speaker A
بس بعد ما نعمل أول هيدنج عندنا.
Speaker A
خلينا نعمل عنصر ال H1 وبعدين سلاش H1.
Speaker A
ونكتب جواه بوك ستور.
Speaker A
بس كده.
Speaker A
ال H1 بتاعنا هتلاحظ فيه حاجه غريبه جدا فيه أول حاجه هتلاحظها.
Speaker A
إنه الكلام مختلف عن الكلام اللي احنا كتبناه ده.
Speaker A
ده الكلام العادي اللي احنا كتبناه.
Speaker A
اللي هو ده.
Speaker A
لكن ده ال H1 مختلف.
Speaker A
شايفين كميه التنسيقات، تنسيقات ال CSS اللي احنا اتفقنا هنتعلمها في كورس ال CSS بإذن الله.
Speaker A
التنسيقات دي جايه منين؟
Speaker A
أنا ما عملتهاش.
Speaker A
التنسيقات دي موجوده في اليوزر ايجنت.
Speaker A
مين حضرتك اليوزر ايجنت ده؟
Speaker A
اليوزر ايجنت ده اللي هو البراوزر اللي احنا شغالين عليه دلوقتي ده.
Speaker A
اللي هو جوجل كروم دلوقتي اللي قدامنا ده.
Speaker A
عمل إيه؟ حط لك تنسيقات كتير عشان يميز عنصر ال H1.
Speaker A
الله طب هو ليه بيميزه؟
Speaker A
عشان العناصر بتاعتك حضرتك كل العناصر مش زي بعض.
Speaker A
في عناصر ليها سلوك غير الثانيه.
Speaker A
في عنصر هيدنج كبير فبيكون حجم الخط كبير.
Speaker A
في هيدنج أصغر منه شويه بيكون حجم الخط أصغر شويه.
Speaker A
في عناصر بتكتبها مثلا عباره عن ليست فبيحط لك قبلها نقطه كده عشان يعرفك إن دي ليست.
Speaker A
العناصر بتاعتك ليها كاستم ستايلنج موجود في اليوزر ايجنت.
Speaker A
طيب ده كلام عظيم.
Speaker A
يعني معنى كلامك إن أنا دلوقتي في عناصر ليها اصلا تنسيقات افتراضيه؟
Speaker A
اه.
Speaker A
ولما تتعلم لغه CSS بإذن الله هتقدر تتحكم في التنسيقات دي وتغير فيها وتعمل اللي أنت عايزه كله.
Speaker A
طيب.
Speaker A
نيجي بقى لدواعي الاستخدام.
Speaker A
أنت قلت لي إن أنا عندي H1 وعندي H2 و3 و4 و5 و6.
Speaker A
هنشوفهم مع بعض كده دلوقتي سريعا.
Speaker A
ادي H2 وادي هنا H3 وادي هنا H4 وادي H5 وادي H6.
Speaker A
هنشوفهم مع بعض دلوقتي يا شباب.
Speaker A
إيه اللي بيحصل؟
Speaker A
هتلاقي هنا ده حجمه كبير.
Speaker A
لو رحت على اللي بعده هتلاقي بص الفونت سايز دي خاصيه من خواص ال CSS ان شاء الله هنتعلمها.
Speaker A
هتلاقي الخطوط عماله بتصغر، شايفين يا شباب؟
Speaker A
الحجم بيصغر عشان دي مستويات الهيدنج بتاعتنا.
Speaker A
طيب ده كلام عظيم وجميل.
Speaker A
ومفيش فيه أي مشكله خالص بإذن الله.
Speaker A
استخداماتهم السليمه بتكون إزاي؟
Speaker A
ال H1 ده يا جماعه خلينا نعتبر إنه هو عنوان الكتاب.
Speaker A
هل الكتاب بتاعك ممكن يتكتب له أكثر من عنوان؟
Speaker A
لا هو عنوان واحد بس بيكون مكتوب على الغلاف.
Speaker A
ال H1 هو عنوان الستور بتاعك.
Speaker A
ما بيتكررش تاني.
Speaker A
لو أنت حاولت تكرره بالكود هيتكرر.
Speaker A
بس هو مش منطقي.
Speaker A
وعشان موقعك يكون صديق لمحركات البحث ويكون فاليد ومعمول بشكل سليم واحترافي، ال H1 لازم يكون واحد بس بالشكل ده.
Speaker A
طيب.
Speaker A
خلصنا ال H1 ده البوك ستور.
Speaker A
ودخلنا مثلا لو افترضنا إن ده عباره عن كتاب، دخلنا على الكتاب ده لقينا فيه أكثر من شابتر.
Speaker A
اللي هو الفصل الأول والثاني والثالث وهكذا.
Speaker A
الفصل بتاعك ده بيكون ليه عنوان.
Speaker A
اللي هو مثلا إيه مسرح الجريمه.
Speaker A
ده عنوان الشابتر.
Speaker A
عنوان الشابتر بيبقى الهيدنج اللي بعد ال 1 على طول.
Speaker A
ترتيب شجري.
Speaker A
يبقى ده يا جماعه اللي هو الشابتر تايتل.
Speaker A
حلو جدا.
Speaker A
جوه الشابتر ده بقى فيه قصص.
Speaker A
أنا كتبت لك دلوقتي اسم الشابتر مسرح الجريمه.
Speaker A
جوه مسرح الجريمه حصل كام موقف كده.
Speaker A
كل موقف من المواقف دي بيكون ليه عنوان وتحته نص بقى وشويه حاجات مكتوبه فيه.
Speaker A
العنوان ده بيكون جوه الشابتر فبيكون الليفل اللي بعده على طول.
Speaker A
اللي هو H3.
Speaker A
يبقى H3 ده مثلا جوه التايتل نسميه ستوري تايتل مثلا.
Speaker A
بالشكل ده.
Speaker A
ستوري تايتل انسايد شابتر.
Speaker A
وهكذا.
Speaker A
وده الشابتر تايتل انسايد بوك.
Speaker A
عشان تكون عارف كل واحد مين تحته.
Speaker A
يعني ممكن نعملهم بالشكل ده.
Speaker A
بس مجرد بس إن أنا أوريك الترتيب مش أكثر.
Speaker A
عندك بقى جوه القصه دي ممكن تلاقي فيه حاجات فرعيه محتاجه تايتل.
Speaker A
يبقى تحط الليفل اللي بعده على طول.
Speaker A
لكن أكبر غلط.
Speaker A
إن أنت تروح تقول له H1 وعنوان الشابتر H3 وجواه بقى H2.
Speaker A
كده ده بيسموه الهيراركي.
Speaker A
أو الترتيب الشجري ده.
Speaker A
كده غلط.
Speaker A
الترتيب الشجري لازم يكون سليم ومحتاج أقول لك عشان تتأكد الموضوع مش سهل.
Speaker A
في بعض التصاميم في الأسواق العالميه لما الناس بتبيعها بيرفضوا التصميم بسبب الترتيب الشجري ده بيكون غلط.
Speaker A
النهارده يا شباب اتعلمنا من H1 ل H6 وعرفنا فكره الهيدنج وعرفنا الاستخدامات بتاعتهم.
Speaker A
ده بيستخدم كعنوان للفقره بتاعتك أو كعنوان لأي جزء في التصميم بتاعك وده هنشوفه مع بعض ان شاء الله بعد ما نتعلم باقي العناصر هنعمل بيهم تطبيقات عمليه بإذن الله.
Speaker A
يا رب يا جماعه الدرس يكون بسيط وسهل وأعجبكم.
Speaker A
أشوفكم ان شاء الله في درس جديد والسلام عليكم.
Topics:HTMLهيدنجعناوين HTMLH1H2CSSتنسيقات المتصفحالترتيب الشجريتصميم المواقعElzero Web School
