Speaker A
بسم الله الرحمن الرحيم والصلاه والسلام على اشرف المرسلين سيدنا محمد النهارده ان شاء الله هنتكلم مع بعض عن عنصر الهيد والعناصر الموجوده جواه وهناخد شويه معلومات متقدمه باذن الله
تعلم أساسيات عنصر الهيد في HTML مع شرح مفصل للميتادات والستايل والسكريبت باللغة العربية.
Key Takeaways
- الميتا ديتا هي معلومات توجه المتصفح ولا تظهر مباشرة في الصفحة.
- استخدام الترميز UTF-8 ضروري لدعم النصوص العربية بشكل صحيح.
- الميتا ديسكربشن تساعد في تحسين ظهور الموقع في نتائج البحث.
- عناصر الستايل والسكريبت داخل الهيد تتحكم في تصميم وسلوك الصفحة.
- التعلم التدريجي لعناصر HTML والميتادات مهم لفهم تطوير الويب.
What the video covers
- شرح عنصر الهيد في HTML وأهميته في الصفحة.
- مفهوم الميتا ديتا وأنواعها مثل ميتا تشارست وميتا ديسكربشن.
- كيفية استخدام الترميز العالمي UTF-8 لدعم اللغة العربية.
- دور الميتا ديسكربشن في تحسين ظهور الموقع في محركات البحث.
- أمثلة على ميتا ديسكربشن والتايتل في مواقع شهيرة مثل سوق وأمازون.
- توضيح أن معلومات الهيد لا تظهر مباشرة في الصفحة بل توجه المتصفح.
- مقدمة لعناصر الستايل والسكريبت داخل الهيد ودورها في تنسيق الصفحة.
- شرح عنصر اللينك واستخدامه لاستدعاء ملفات CSS.
- تأكيد على أن تعلم الميتا والستايل والسكريبت ضروري لتطوير المواقع.
- تشجيع على متابعة الدروس القادمة لتعلم CSS وجافا سكريبت.
Full Transcript — Download SRT & Markdown
Speaker A
خلينا نعمل كنترول وبلاس عشان نزوم كده على الكود ونقفل الاكسبلورر تاب عشان نركز مع بعض هنا
Speaker A
في الفيديوهات اللي فاتت اتكلمنا عن كلمه اسمها ميتا ديتا ميتا ديتا هي معلومات عن المعلومات ده ترجمه او معنى كلمه ميتا ديتا
Speaker A
النهارده عندنا اول عنصر في الهيد عنصر اسمه ميتا اول حاجه محتاجين نعرفها عن الميتا قبل ما ادخل جواه واتكلم عنه واعمل اي حاجه انه ده عنصر من عناصر السيلف كلوزنج تاج العناصر اللي مالهاش كلوزنج تاج
Speaker A
هتلاقي ان التايتل ليه كلوزنج تاج عشان هو جواه كونتنت بالشكل ده البودي جواه كونتنت فليه كلوزنج تاج الاتش تي ام ال جواها كونتنت فليه كلوزنج تاج وهكذا
Speaker A
عنصر الميتا مالوش كلوزنج تاج عشان كده تلاقي انه بيتحط له سلاش في الاخر كده ودي بتدل على انه هو سيلف كلوزنج تاج من الاخر عنصر بيقفل نفسه
Speaker A
طيب عظيم جدا
Speaker A
جوه الميتا دي هنستعمل حاجه اسمها اتبيوتس الاتبيوتس دي هي سمات اضافيه في العنصر
Speaker A
بتعبر عن معلومات عنه بتميز عنصر عن الثاني وهكذا
Speaker A
هنتكلم عنها في فيديو كامل عن الاتبيوت باذن الله
Speaker A
طيب اول اتبيوت عندنا في الميتا اسمه تشارست
Speaker A
او كاركتر ست
Speaker A
ايه هو الكاركتر ست الكاركتر هي اي حرف من الحروف او الرموز
Speaker A
اللي انت بتكتبها في الكونتنت بتاعتك
Speaker A
كاركتر ست هو بيسموه بالعربي او في الفيديوهات اللي بتشرح الموضوع ده الترميز
Speaker A
نوع الترميز او نوع الكونتنت بتاعتك
Speaker A
الكاركترز الموجوده في الكونتنت بتاعتك
Speaker A
كنا زمان بنستعمل نوع ترميز اسمه ايزو مثلا
Speaker A
8859-1 ده نوع ترميز مش بيسبورت العربي
Speaker A
لو جينا كتبنا هنا السلام عليكم بالشكل ده ورحنا شفنا الموقع بتاعي
Speaker A
هتلاقي الحروف بالشكل ده
Speaker A
عشان هو مش بيسبورت الكاركترز دي
Speaker A
لو جينا دلوقتي نستعمل الترميز العالمي لكل المواقع بتستعمله اسمه يو تي اف 8
Speaker A
هتلاقيه بيسبورت الكلام ده
Speaker A
دي معلومه ادفانسد مش محتاج منك غير انت تعرف الترميز ده معناه ايه دلوقتي حاليا
Speaker A
طيب عظيم جدا الكلام ده وكله تمام والحمد لله
Speaker A
عندنا انواع تاني من الميتا زي الديسكربشن
Speaker A
هنكتب دلوقتي ميتا وهتكتب هنا النيم ده اسم الميتا بتاعتنا اسمه ديسكربشن
Speaker A
وبعد كده هتقوله محتوى بقى الديسكربشن بتاعك ده ايه
Speaker A
هكتب فيه ذس از اور بوك ستور
Speaker A
وتعالوا نبص بصه كده مع بعض
Speaker A
ذس از اور بوك ستور دي هتظهر فين
Speaker A
زي ما انتم شايفين ما ظهرتش هنا خالص
Speaker A
مش انا قلت لك المعلومات اللي في الهيد دي عباره عن ديتا معلومات عن الديتا بتاعتك
Speaker A
انستراكشنز او تعليمات بتديها للمتصفح عشان تقوله يروح فين ويجي منين
Speaker A
فدي مش معلومات هتظهر خالص
Speaker A
طب يا ترى بتظهر فين المعلومات دي
Speaker A
تعالوا نشوف مع بعض كده موقع زي امازون او مثلا موقع زي سوق
Speaker A
نبحث عن سوق
Speaker A
ده موقع سوق
Speaker A
هتلاقي مثلا هنا خلينا نجيب النتائج كده
Speaker A
تمام هتلاقي مثلا موقع زي ده ايجيبت دوت سوق دوت كوم
Speaker A
خلينا نفتح الموقع ده كده ونبحث في البيج سورس بتاعته عن حاجتين
Speaker A
اول حاجه نبحث عنها هو الديسكربشن
Speaker A
خلينا نكتب كده في البحث
Speaker A
ديسكربشن
Speaker A
اهي دي الميتا نيم بيساوي ديسكربشن الكونتنت ديسكفر اند باي ذا بيست ديلز الكترونكس
Speaker A
تعال نشوف مع بعض كده الكلمه دي
Speaker A
او الجمله دي شفناها فين
Speaker A
شايفين يا جماعه
Speaker A
ديسكفر اند باي ذا بيست ديلز
Speaker A
دي الجمله بتاعتنا ده الديسكربشن بتاع التطبيق بتاعك
Speaker A
فاللي انت بتكتبه في الميتا ديسكربشن بيظهر في الحته الظريفه دي
Speaker A
طب يا ترى الكلمه الاولانيه الكبيره دي
Speaker A
دي اللي هي ايه
Speaker A
ده اللي هو التايتل بتاع الصفحه
Speaker A
لو جينا هنا بحثنا كده عن التايتل او حتى من غير ما نبحث موجود فوق اهو بيست ديل اون سوق دوت كوم ايجيبت
Speaker A
وبعدين وايت فرايدي سيل
Speaker A
تعال نشوف مع بعض
Speaker A
بيست ديلز اون سوق دوت كوم ايجيبت وايت فرايدي سيل
Speaker A
يبقى احنا عندنا دلوقتي حاجتين بنشوفهم من الميتا بتاعتنا
Speaker A
عندك التايتل كاتبينه وعندك الميتا ديسكربشن
Speaker A
يبقى انا لما اعمل الديسكربشن بتاعتي بالشكل ده والكونتنت اهي هتلاقي انه اي حد هيبحث عن موقعي
Speaker A
هيلاقي مكتوب بوك ستور او الزيرو بوك ستور وده الديسكربشن اللي انت هتكون كاتبه هيكون تحت التايتل بتاعك
Speaker A
طيب عظيم جدا الكلام ده وكله تمام والحمد لله
Speaker A
هل في انواع ميتا تاني
Speaker A
كتير جدا
Speaker A
بس انت مش مطالب تتعلمها دلوقتي
Speaker A
تعالى كده لو جيت كتبت هنا ميتا زي كده وبحثت
Speaker A
هيطلع لي مقال اسمه مثلا كل ما تحتاج معرفته عن الميتا
Speaker A
هتلاقي شويه انواع ميتا كتير جدا ممكن تستعملها في يوم من الايام
Speaker A
ميتا خاصه بالكابيرايت لو عندك حاجه ليها حقوق ملكيه وعايز تقول للناس قبل ما ينسخوا منها
Speaker A
لو عايز تقول للناس مين اللي بيكتب المقالات
Speaker A
حاجات كتيره جدا
Speaker A
عندك موقع زي الفيسبوك عنده ميتا خاصه بيه عشان الناس اللي بتشير مثلا ارتكل من موقعها للفيسبوك تقدر تتحكم في الكلمه اللي هتطلع والكونتنت والصوره وهيوودي على فين وكل الكلام ده
Speaker A
فممكن بعد الكورس ده ما يخلص ان شاء الله يطلع موقع تاني مشهور
Speaker A
ويبقى ليه ميتا خاصه بيه والبراوزر تسبورت الميتا دي وتبدا تستخدمها
Speaker A
فانت مش محتاج خالص انك تعرف كل الميتا اللي في الدنيا
Speaker A
انت بتستعمل الميتا اللي انت عايزها
Speaker A
هتقولي طيب
Speaker A
يعني كل حد بيخترع فعلا
Speaker A
اقول لك اه
Speaker A
تعال نبص كده على الووردبريس
Speaker A
ده عباره عن نظام اداره محتوى
Speaker A
عنده ميتا خاصه بيه ممكن تلاقيها وانت مستحيل تستعملها في مكان تاني
Speaker A
اسمها على ما اعتقد اسمها جنريتور
Speaker A
اهي ميتا نيم جنريتور والكونتنت ووردبريس ده اصدار الووردبريس بتاعك
Speaker A
يعني عنده ميتا خاصه بيه بتعمل حاجه معينه
Speaker A
فمفيش مشكله خالص من قصه الميتا زي ما اتفقنا انت بتشوف الحاجه اللي انت هتستعملها
Speaker A
وبتبدا تتعلمها وتشتغل بيها باذن الله
Speaker A
طيب بعد ما خلصنا الميتا عندنا هنا عنصرين مهمين جدا
Speaker A
عنصر الستايل وده خاص بلغه السي اس اس
Speaker A
اللي هناخد كورس كامل فيها باذن الله
Speaker A
مش عايزك تركز هنا للاسف الكونتنت بتاع الكورسات اللي فاتت في الاتش تي ام ال
Speaker A
لما استعملت كود سي اس اس الناس اتلخبطت وخافت رغم ان اللغتين دول
Speaker A
مش هينفصلوا عن بعض نهائيا
Speaker A
طيب الستايل ده عباره عن تاج تخص
Speaker A
اكواد السي اس اس بتكتب جواها هنا اكواد سي اس اس
Speaker A
بالشكل ده مثلا هديك مثال
Speaker A
زي كده ان انا هقول له ان انا عايز الباك جراوند كلر بتاع الصفحه بتاعتي يبقى ريد
Speaker A
مش عايزك تركز في الكلام ده خالص
Speaker A
دي حاجات لسه هنتعلمها
Speaker A
يبقى انا عرفت بس ان انا هنا اقدر احط اكواد الستايلينج بتاعتي في المستقبل باذن الله لما اتعلم لغه سي اس اس
Speaker A
نفس القصه اول ما اتعلم لغه الجافا سكريبت
Speaker A
هقدر هنا احط السكريبت تاجز او السكريبت بتاعتي كلها
Speaker A
حد فيكم لاحظ انه برضه الستايلينج والسكريبت مش حاجات بتظهر في الصفحه
Speaker A
مش كونتنت بتظهر في الصفحه
Speaker A
دي معلومات بتعرف البراوزر ان انا عايز انصق البودي بلون احمر خلفيه
Speaker A
او اخلي الكلام ده كبير او اعمل كذا
Speaker A
نفس القصه في السكريبت بقول له ان انا عايز ادوس على زرار اعمل كذا
Speaker A
في النهايه مفيش محتوى دي معلومات كلها للمتصفح
Speaker A
طيب
Speaker A
نفس القصه عندنا عنصر اسمه لينك
Speaker A
عنصر اللينك ده ليه اتنين اتبيوت زي ما انتم شفتوهم اوتوماتيكلي اول ما كتبت لينك عملهم لي
Speaker A
الريل اللي هو الريليشن شيب اللي هو علاقه الملف ده بالصفحه اللي انا فيها
Speaker A
والاتش ريف ده اللي هنتكلم عنه بالتفصيل ان شاء الله
Speaker A
لما نيجي نتعلم الجزء بتاع السي اس اس والصور والحاجات دي كلها
Speaker A
هو بيقول لك فين الملف ده مكانه فين عشان استدعيه
Speaker A
كده يا جماعه الحمد لله خلصنا اهم العناصر في الهيد وفهمنا الدنيا باذن الله
Speaker A
يا رب يا جماعه الدرس يكون بسيط وسهل وعجبكم اشوفكم ان شاء الله في درس جديد والسلام
Topics:HTMLالميتا ديتاعنصر الهيدترميز UTF-8ميتا ديسكربشنCSSسكريبتتطوير الويبتعلم HTML بالعربيElzero Web School
