Speaker A
بسم الله الرحمن الرحيم والصلاه والسلام على اشرف المرسلين سيدنا محمد.
تعلم كيفية إنشاء أول صفحة HTML بشكل صحيح مع نصائح احترافية لبناء مشروع ويب من الصفر باستخدام فيجوال ستوديو كود.
Key Takeaways
- ابدأ مشروعك بتنظيم مجلدات وأسماء ملفات مناسبة لتجنب المشاكل التقنية.
- استخدام ملف index.html كملف رئيسي هو معيار متبع في تطوير الويب.
- تنسيق الكود باستخدام التاب مهم جداً لفهم هيكل الصفحة بسهولة.
- العناصر الأساسية في صفحة HTML هي head للمعلومات وbody للمحتوى المرئي.
- التعلم التدريجي مع الممارسة يضمن تأسيس قوي في تطوير صفحات الويب.
Summary
- مقدمة عن أهمية إنشاء مشروع منظم وعدم استخدام أسماء عربية أو مسافات في أسماء المجلدات.
- شرح كيفية فتح مجلد المشروع في محرر الأكواد مثل فيجوال ستوديو كود.
- إنشاء ملف index.html كملف رئيسي للصفحة وشرح أهمية التسمية والامتداد.
- تعريف عنصر HTML كجذر الصفحة وأهمية التنسيق باستخدام التاب لتسهيل قراءة الكود.
- شرح الفرق بين عناصر الهيد (head) والبادي (body) وأدوار كل منهما في الصفحة.
- كيفية إضافة عنوان الصفحة باستخدام عنصر title داخل الهيد.
- كتابة محتوى بسيط داخل البادي لعرضه في الصفحة.
- أهمية تنسيق الكود لجعله واضحاً وسهل الفهم للمبرمجين الآخرين.
- نصائح عامة لبداية مشروع ويب بشكل احترافي لتجنب المشاكل المستقبلية.
- تشجيع المتعلمين على الاستمرار ومتابعة الدروس القادمة.
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
يعني ما تمسكش ملف واحد بس تتعامل معاه كده وخلاص على جنب.
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مشروع ويبفيجوال ستوديو كودتنسيق الكودindex.htmlعناصر HTMLالصفحة الأولىتطوير الويبنصائح برمجةElzero Web School
