0:05
بسم الله الرحمن الرحيم والصلاة والسلام على أشرف المرسلين سيدنا محمد النهاردة ان شاء الله معانا كام عنصر كده سريع بإذن الله هتواجههم في حياتك ومحتاجين نتكلم عنهم وطبعا مش محتاج أقولك العناصر بسيطة جدا واستخداماتهم يعني ممكن ما تكونش كتيرة جدا
0:21
أول عنصر عندنا هو الكيو الكيو يا جماعة اللي هو الكوت واحد بيكتب حكمة حكمة كده صغيرة في وسط الكلام بتحتاج أن أنت تدفعها قبلها العلامتين اللي هي الكوتس دي فبتستعمل الكيو خلينا أقول لك this is مثلا wise word أي كلام فاضي طبعا رح نشوف الكيو بتاعتنا إيه الفرق بينها وبين البراجراف هتلاقي أن الكيو قبلها العلامتين اللي أنت شايفهم دول هعملك عليهم زوم اللي هم دول هم
0:52
هذه العلامة هي الأولى و هذه العلامة الثانية فقط لتوضيح أن هذا كود العنصر لدينا هو عنصر inline ستجد هنا مكتوب display: inline أحتاج أن أقول لك أننا في الفيديوهات الماضية قلنا أننا سنقوم بعمل فيديو عن الفرق بين inline و block العناصر فقط أميز بينهم ستجد أنه لم يكن لي داعي أبدا الفيديو لأن طول ما نعمل كل ما نحصل على عنصر سأقول لك أن هذا block أو inline لكي تكون عارف
1:17
يمكن أن نضع لينك في المرجع عن العناصر كائمة بالعناصر الإن لين وكائمة بالعناصر البلوك. طيب عظيم. كما أن هناك كود بهذا الشكل لدينا عنصر آخر يسمى بلوك كود. من هذا الاسم يا شباب هل ترون مكتوب بلوك؟ أي نفس الكود لكن هذه المرة عنصر بلوك. ستجد بلوك كود بهذا الشكل مختلف ويوجد هوامش حوله كما ترون. هذه الهوامش فقط لتتميز أنه عبارة عن حكاية
1:44
كبيرة واخداء السطر كله مش مجرد زي دي. طبعا في بعض قطر العمل اللي هتقابلها في حياتك لما تتعمق في المجال بازن الله بتنسك الكود ده بتحط قبليه كده علامتين زي دول بس كبار وبتخلي الخط ميل وبتعمل فيه شوية تنسيقات كده. انت بنفسك ان شاء الله لما تتعلم تقدر تغير في شكله وتعمل فيه اللي انت عايزه كله. حتى العلامات دي تقدر تغيرها بسور تغير لونها تكبرها تعمل فيها كل اللي انت عايزه. طيب.
2:12
لدينا عنصر يسمى button button هو زرار يستخدم في الـ JavaScript الـ button هو زرار ينفذ مجرد تحديث يمكنك استخدامه في الـ form لكن هذا ليس باست براكت لإستخدام الزرار في أغلب الأحيان ترى زرار ينفذ مجرد تحديث يوديك إلى صفحة و يفتح المنتج لترى ما فيه
2:41
عندنا حاجة ظريفة جدا أو عنصر اسمه WBR WBR اللي هو World Break Opportunity خلينا نقول إن انت لو عندك لينك طويل جدا زي مثلا لينك الخاص بالفيديوهات مثلا بتاعة اليوتيوب خلينا نوريك كده مثال ده لينك بالشكل ده اللينك اللي قدامك ده لو انت دخلت وعندك مثلا عنصر العرض بتاعه مثلا صغير اللينك ده بيبدأ ينزل لتحت زي ما انت شايف كده
3:07
لديك خاصية ستتعلمها في CSS الخاصة بالـ Word Break التي تقوم بعمل تلك الكلمات بسطر بعدها هل ترى ما الذي حدث يا شباب؟ إذا كان لدي حجم صغير، دعنا نعطيك مثال
3:21
لا أريد أن أقول لك أخيراً لا تركز في أي شيء يخص الـ CSS نحن نقوم بعمل فقط مثال هنا تجد أن لينك قام بعمل بريك من مكان معين بمزاجه أنت لم تتحكم في الموضوع لدينا شيء جميل جداً يسمى WBR
3:38
opportunity زي ما قولنا ال WBR عن طريقة تقدر تحدد اللينك يتعمل له بريك منين عشان ما تبوص الشكل هنا مثلاً هحط ال WBR دي يعني عايز اقول له كده انه اول بريك هيجي من بعد كلمة يوتيوب دوت كوم سلاش دي طيب عايز بريك تاني بعده من حتة معينة او من اول هنا مثلاً عايز برضو يعمل بريك والسطر الطويل ده ممكن هنا نيجي مثلاً في الحتة دي ونعمل بريك
4:03
بالشكل ده. تعالوا كده نتفرج مع بعض. هنا لما نغير حجم العنصر مسلا نخليه متين كده. شوف البريك بدأ ييجي من اين? اول حاجة لدوت كوم اهي. نيجي على اللي بعدها احنا قلنا له بعد البريليست بعد رقم تمانية اهو. شايفين يا شباب? رقم تمانية اهو عمل بريك من بعده. طيب نعمل كده زوم اوت شوية. طيب اللي بعده من اول فين? ننزل كده شوية لنشوف هيوصل لحد فين? لحد حرف الاي. تسعة اي اهو. هيبدأ يعمل بريك. بالزبط. تسعة اي اهو عمل بريك
4:31
هنا انت بالWBR بتحدد البريك من المكان اللي انت عايزه طيب عظيم الكلام ده والحمد لله وكله تمام وندخل على اللي بعده وعلى طول وهو اخر حاجة عندنا وهو عنصر اسمه PDI PDI اختصار لP-Directional Isolation اللي هو بيعزل مكان او بيعزل عنصر عن الاتجاه بتاع المحتوى بتاع الصفحة يعني ايه الكلام ده عندنا دلوقتي براجراف هكتب فيه كلمة
4:58
السلام بالعربي و رقم 2 و بعدها كلمة welcome الترتيب الصحيح يا جماعة لو الصفحة بتاعتي من الشمال لليمين المفروض يبقى ازاي المفروض يبقى السلام بعدها رقم 2 هنا بعدها welcome ليه رقم 2 جي هنا بسبب تداخل المحتوى العربي مع الانجليزي مع الارقام و بسبب ان الصفحة بتاعتنا دلوقتي left to right ازاي نعالج الموضوع ده
5:22
لتعالج هذا الموضوع أعزل الكلمة عن المحتوى. إذا كتبت السلام ها هو سأتركه و أخذ منه نسخة أخرى. و أخذت كلمة السلام و أضعها في PDI. هكذا أعزلتها عن الاتجاه الخاص بصفحتي. هل ترون الفرق؟ هنا لم أعزلها فدخلوا في بعضهم. هنا أعزلتها عن الاتجاه الخاص بصفحتي.
5:45
ايزوليتد معزولة فهنا كتب السلام وبعدها ترتيب الطبيعي للصفحة اتنين وبعدها كلمة ويلكم الموضوع ده مهم جدا وبينفع معاك لو انت عندك محتوى انجليزي مع عربي بتخلوا ببعض عنصر ممتاز جدا لحل المشكلة دي يا رب يا جماعة الدرس يكون بسيط وسهل وعجبكو اشوفكو ان شاء الله في درس جديد والسلام عليكم
