Speaker A
بسم الله الرحمن الرحيم والصلاه والسلام على اشرف المرسلين سيدنا محمد.
تعلم أساسيات عناصر لغة HTML وكيفية فحصها باستخدام أدوات المتصفح، مع مقدمة لتحميل محررات الأكواد Visual Studio Code وAtom.
Key Takeaways
- HTML هي لغة بناء الهيكل الأساسي لصفحات الويب.
- يمكن فحص عناصر الصفحة ومعرفة تفاصيلها باستخدام أدوات المتصفح.
- CSS تضيف التنسيق الجمالي للصفحات بينما HTML تحدد الهيكل فقط.
- يوجد عدة محررات أكواد مجانية مثل Visual Studio Code وAtom تناسب المبتدئين.
- الفهم التدريجي والتطبيق العملي أهم من الحفظ في تعلم البرمجة.
Summary
- مقدمة عن عناصر لغة HTML وأهميتها في بناء هيكل صفحات الويب.
- شرح كيفية عرض كود الصفحة المصدر باستخدام View Page Source.
- التعرف على أداة Developer Tools وكيفية فحص عناصر الصفحة باستخدام Inspect.
- مقارنة بين شكل صفحة الويب مع وبدون تنسيقات CSS لتوضيح دور HTML في الهيكل.
- توضيح الفرق بين الهيكل العظمي للصفحة والتنسيق الجمالي.
- نصائح لتحميل محررات الأكواد Visual Studio Code وAtom واختيار الأنسب.
- تشجيع المشاهدين على متابعة الدروس القادمة لإنشاء صفحات HTML.
- تأكيد على أن الهدف هو الفهم والاستكشاف وليس الحفظ فقط.
- تقديم محتوى تعليمي مبسط وموجه للمبتدئين في مجال تطوير الويب.
- استخدام أمثلة عملية من مواقع مثل جوجل وموقع Elzero لتوضيح المفاهيم.
Full Transcript — Download SRT & Markdown
Speaker A
النهارده ان شاء الله هنتكلم مع بعض عن الـ Elements او عناصر لغه الـ HTML.
Speaker A
اي معلومه من المعلومات اللي هقولها في الفيديو ده انت مش مطالب ابدا ابدا ابدا ان انت تفهم منها حاجه ولا تحفظها، دي معلومات استعراضيه عشان تتعمق في العالم ده وتفهمه قبل ما تبدا تكتب كود وقبل ما تبدا تنشئ العناصر دي بنفسك، يعني انا مش طالب منك غير ان انت تتفسح معايا وتتفرج بس كده.
Speaker A
طيب، النهارده هنشوف مع بعض موقع جوجل، موقع مثلا الزيرو دوت اورج، اي موقع تختاره بنفسك تطبق عليه اللي انا هعمله ده، الموقع بتاعنا عباره عن مجموعه عناصر خاصه بلغه الـ HTML بتكون الصفحه او شكل الصفحه اللي انت شايفه قدامك ده.
Speaker A
العناصر بتاعتنا دي كلها، كل عنصر ليه خواص، كل عنصر ليه اسم.
Speaker A
كل عنصر غير الثاني، كل العناصر دي هنتعلمها باذن الله بالتفصيل.
Speaker A
طيب، عشان تبدا تبص بصه على العناصر دي لان انت مش شايفها قدامك كده.
Speaker A
عندك حاجه بسيطه جدا ان انت تيجي في الموقع وتدوس كليك يمين وتقول له View Page Source او تدوس كنترول يو.
Speaker A
View Page Source بيجيب لك الـ Page Source او الـ Source بتاع الاكواد اللي في الصفحه اللي عن طريقها انشأنا الصفحه دي.
Speaker A
الكلام ده في اي موقع في الدنيا هتقدر تشوفه مفيش مشكله خالص.
Speaker A
عظيم.
Speaker A
مش بس كده.
Speaker A
عندنا حاجه اسمها Developer Tool هنتكلم عنها بالتفصيل.
Speaker A
تقدر مثلا في عنصر زي ده عايز تعرف العنصر ده نوعه ايه؟
Speaker A
تدوس عليه كليك يمين وتقول له Inspect.
Speaker A
Inspect دي اللي هو زي المحققين كده يعني بتقدر تفحص العنصر ده عباره عن ايه؟
Speaker A
هتلاقي العنصر بتاعنا اهو الكلام اللي جواه ونوع العنصر.
Speaker A
وادي عنصر ثاني وعن طريق السهم اللي فوق ده هروح مثلا كده ده عنصر ثاني صوره.
Speaker A
نفس القصه دي موجوده في جوجل.
Speaker A
نقدر نعمل الكلام ده برضه هنا عشان تتاكد.
Speaker A
دي صوره اهي.
Speaker A
ده عنصر ثاني اهو.
Speaker A
كل دي عناصر اللي بتكون صفحه الويب بتاعتنا.
Speaker A
اللي احنا اتفقنا يا شباب هنتكلم عنها بالتفصيل باذن الله.
Speaker A
طيب.
Speaker A
احنا قلنا في المقدمه بتاعه الكورس انه لغه الـ HTML بتبني الهيكل بتاع الويب.
Speaker A
بس انا مش شايف ده هيكل.
Speaker A
لو افترضنا ان صفحه الويب دي انسان دلوقتي انا مش شايف ان ده الهيكل العظمي ده كده انسان كامل ولحم ودم ولابس لبس كمان وطاقيه ونضاره ومروق نفسه على الاخر.
Speaker A
طيب.
Speaker A
هوريك شكل صفحه الويب بدون وجود اللغه اللي بتنسق صفحه الويب اللي هيكون معانا ليها كورس كامل مفصل باذن الله وهي لغه الـ CSS طبعا.
Speaker A
طيب، خلينا ننزل كده تحت شويه.
Speaker A
هنلاقي مثلا الملف بتاع الـ CSS.
Speaker A
انا بس هشيله وهوريك صفحه الويب بتاعتنا هيكون شكلها ايه؟
Speaker A
اللي هي من الاخر الهيكل العظمي بتاعها.
Speaker A
دي الصفحه بتاعتنا بدون وجود اللغات اللي بتنسق الصفحه.
Speaker A
ده شكل الصفحه بتاعتنا زي ما انتم شايفين عباره عن هيكل وفي كلام وصور.
Speaker A
مفيش ابدا تنسيقات، مفيش الشكل الجميل اللي انتم شفتوه من شويه.
Speaker A
وده نقدر نقول عليه الهيكل بتاع الصفحه.
Speaker A
طيب، جميل قوي الكلام ده وعظيم والحمد لله فهمنا الفكره وعرفنا المطلوب.
Speaker A
هتدخل جوجل وهتكتب Download Visual Studio Code.
Speaker A
Visual Studio Code هو اول Editor عندنا من الاثنين اللي احنا بنوصي بيهم.
Speaker A
والثاني هو Atom.
Speaker A
هتكتب برضه Download Atom.
Speaker A
والاثنين موجودين عندك.
Speaker A
في الـ Visual Studio Code عندك نسخه الويندوز واللينكس والماك.
Speaker A
تختار المناسب لنظام التشغيل بتاعك.
Speaker A
طبعا معظم الناس ويندوز فهتختار ويندوز.
Speaker A
وهنا ممكن تنزل ده جنبه والاثنين يكونوا معاك وتشتغل على الاثنين.
Speaker A
لحد ما تشوف مين فيهم مناسب.
Speaker A
هرجع واقول لك ثاني زي ما قلت في فيديو المقدمه.
Speaker A
اللي هتكتبه هنا او هتكتبه هنا هيطلع نفس النتيجه.
Speaker A
بس It's up to you في واحد مريح وواحد مش مريح.
Speaker A
الوانه جميله ده الوانه مش جميله.
Speaker A
ده عينيك مثلا كانت شايفه فيه كويس ده لا.
Speaker A
براحتك خالص وما عندكش اي مشكله.
Speaker A
ده شكل الايكون بتاعه Visual Studio Code وده شكل الايكون بتاعه Atom.
Speaker A
والاثنين عندك هتفتح مثلا ده.
Speaker A
هتلاقيه بالشكل اللي قدامك ده ومبروك عليك البدايه.
Speaker A
ان شاء الله نقدر نقول بسم الله من الفيديو الجاي.
Speaker A
عشان تنشئ صفحتك الاولى.
Speaker A
يا رب يا جماعه الدرس يكون بسيط وسهل وعجبكم.
Speaker A
اشوفكم ان شاء الله في الدرس الجاي والسلام عليكم.
Topics:HTMLعناصر HTMLتطوير الويبتعلم البرمجةVisual Studio CodeAtomDeveloper Toolsفحص العناصرCSSElzero Web School
