lecture4

طيب يعطيكم العافيه. اليوم إن شاء الله حنأخذ أكثر من تاج متعلقين بلغة الاتش تي ام ال. أول حاجة بدنا نبدأ فيها اللي هو موضوع التيبل، كيف ندرج تيبل بالاتش تي ام ال.

كلنا عارفين إنه أي جدول عندي مكون من شو؟ ممتاز. هي مثلا لو أنا جيت طلعت، ححكي إنه عندي هذا الجدول، هي مثلا في ثلاث صفوف وفي ثلاث أعمدة. بحكي لي التاج الأساسي لإدراج الجدول في عندي تاج اسمه `<table>`. تمام؟ هذا التاج له بداية ونهاية. فباجي هنا عشان أدرج الجدول، أول شيء في عندي تاج أساسي اسمه `<table>` بهذا الشكل. بداخل هذا التيبل بدي أعمل تقسيمة للصفوف والأعمدة اللي موجودة فيها.

تمام؟ هل تطلعوا هنا على الجدول؟ نحن قلنا مكون من صفوف وأعمدة، عندي ثلاث صفوف وثلاث أعمدة. لإدراج الجدول في عندي طريقتين. الطريقة الأولى إنه هو إنه أنا بس أقسّم لصفوف وأعمدة، وأوكي والأمور تمام. ولكن في عنا طريقة ثانية وهي الأفضل، وعدنا حنحكي ليش. بحكي لي إنه قسم الجدول لثلاث أقسام. تمام؟ الجزء الجزء العلوي اللي هو الجزء الأول بنحكي عنه `<thead>`. إيش بيمثل؟ بمثل عناوين الجدول. عندي مش نحن الجدول بيكون عندي عناوين الأعمدة بالاول؟ مثلا الاسم، الرقم، المدينة، مش عارف إذا هيك. هذا العنوان بحكي لي مثليه في تاج اسمه `<thead>`. باقي الجدول ما عدا الـ... ما عدا الصف الأول والصف الأخير بنحكي عنه `<tbody>`. اللي هو بمثابة كل الصفوف ما عدا الصف الأول والصف الأخير بنحكي عنه `<tbody>`. الصف الأخير بنحكي عنه `<tfoot>`. هذه هي التقسيمة تبعت الجدول.

فباجي هون بعد تاج التيبل، بداخله حاحط. في عندي `<thead>` وفي عندي `<tbody>` وفي عندي `<tfoot>`. كمان مرة، الـ `<thead>` حكينا هو عبارة عن الصف الأول في الجدول اللي بيتكون من عناوين الجدول. الـ `<tbody>` اللي هو كل الجدول ما عدا الصف الأول والصف الأخير. الـ `<tfoot>` بيتكون من الصف الأخير. هذه الشغلة وين حتكون مهمة لنا؟ نحن عندنا الجدول أو بشكل عام أي كود بنكتبه في الاتش تي ام ال بينزل عندي بالترتيب، صح ولا لا؟ يعني اللي بكتبه بالاول هو اللي بيظهر عندي في الصف الأول. هلقيت إذا أنا كنت مقسمة الجدول بهذا الشكل `<thead>` و `<tbody>` و `<tfoot>`، واجيت غيرت في الترتيب تبعهم، حطيت الـ `<tfoot>` بالاول، بعدين الـ `<thead>`، بعدين الـ `<tbody>` وهكذا، بضل محافظ على الجدول بنفس التركيبة الرئيسية تبعته، بنفس الترتيب. عدنا حنشوف هذا الكلام ليش؟ لأنه أنا مقسمة الشيء لـ `<thead>` و `<tbody>` و `<tfoot>`، فهو خلص بيكون أوريدي فاهم إنه الـ `<thead>` عبارة عن الصف الأول، الـ `<tbody>` كل شيء، الـ `<tfoot>` آخر صف، وهكذا. تمام؟ هذه أول شغلة.

بعد هيك، الـ `<thead>` حكينا بيمثل العناوين تبعت الجدول، صح ولا لا؟ عناوين الجدول. التاج المسؤول عنها تاج اسمه `<th>` اختصار لـ "تيبل هيدينغ" عناوين الجدول. نحن عملنا هون جدول مكون من ثلاث أعمدة زي ما أنتم شايفين، فبدي أعمل ثلاثة `<th>`. مثلا اسمي "آي دي"، أعمل `<th>` ثانية أسميها "نيم"، وأعمل `<th>` ثالثة أسميها مثلا "كانتري". هذول بيمثلوا عناوين الجدول اللي موجود معي.

بعد هيك، الـ `<tbody>`. أنا في الـ `<tbody>` قلنا إنه عبارة عن كل الصفوف ما عدا الصف الأول والصف الأخير، صح ولا لا؟ عشان هيك بحكي لي بيلزمني بالاول تعملي تقسيمة للصفوف الموجودة عندكم. توي حكينا كم صف في عنا ه؟ ثلاثة. مضبوط. تقسيمة الصفوف في عندي تاج اسمه `<tr>` اختصار لكلمة "تيبل رو". أنا بحكي بدي أعمل ثلاث صفوف، فهي عملت ثلاث صفوف بهذا الشكل. تمام؟ `<tr>`، `<tr>`، `<tr>`. بعد هيك، هلقيت هي الجدول أنا قسمته لصفوف، هي واحد، اثنين، ثلاثة. بضل علي الأشياء اللي بدي تكون مكتوبة هنا، صح ولا لا؟ بنحكي عنها تعبئة الخلايا تبعت الجدول. تعبئة الخلايا المسؤول عنها تاج اسمه `<td>`، "تيبل ديتيلز". فأنا وعندي كل صف كم خلية بيلزمه؟ ثلاثة. مش عندي الصف في ثلاث خلايا؟ فلازم أعمل ثلاثة `<td>`. هي واحد، هي اثنين، هي ثلاثة. تمام؟ الـ `<td>` الأولى إيش المفروض يكون فيها؟ الآي دي. الـ `<td>` الثانية للنيم. الـ `<td>` الثالثة للكنتري. صح ولا لا؟ فحاجي هون على السريع مثلا أحط واحد، وهان أحط اسم، وهون أحط كانتري. بنفس هذه الطريقة. هي الـ `<tr>` الثانية. نفس الفكرة حيكون فيها `<td>` رقم اثنين، بعدين `<td>` نحط أي اسم، بعدين `<td>` أي شيء.

هلت أنا حكيت هون توي إنه عندي ثلاث صفوف. يفترض الصف الأخير مين يكون؟ الـ `<tfoot>`، صح ولا لا؟ مش `<tbody>`. فحامسك هذه وأحطها في الـ `<tfoot>`. بنفس الطريقة بعمل تعبئة للخلايا عن طريق تاج اسمه `<td>`. هي ثلاثة `<td>`، `<td>` اكس مثلا.

تعال نعمل ريفريش هان بهذا الشكل. هي الجدول زي ما حكينا. عندي ثلاث صفوف فوق. أول صف عندي اللي هو تعبئة الخلايا. بعدين عملنا اثنين `<td>` اللي هم للـ `<tbody>`. ثلاثة `<td>` للـ `<tfoot>` اللي هو كان آخر صف معنا. طبعا بتلاحظوا إنه شكل العناوين مختلف عن شكل البيانات اللي موجود، صح ولا لا؟ ليش؟ لأنه أنا حطاها بتاج اسمه `<th>`، فهو لحاله بيفهم بما إنها `<th>` عبارة عن عناوين الجدول الموجودة معنا، فزي بتلاحظوا حجم الخط فيها كبير والحجم تبعها بولد. صح ولا لا؟

إذا كمان مرة، إدراج الجدول حكينا عندي تاج أساسي له اسمه `<table>`. هيه، تاج أساسي اسمه `<table>`. بداخل هذا التاج حكينا في عندي ثلاث أشياء: في عندي `<thead>` وفي عندي `<tbody>` وفي عندي `<tfoot>`. هيها، هيهم قدامكم. مضبوط؟ الـ `<thead>` قلنا بمثل عناوين الجدول الموجودة معنا، عبارة عن تاج اسمه `<th>` بحط بداخله العناوين. بعد هيك الـ `<tbody>` بتمثل للصفوف اللي موجودة معي بناءً على كم صف أنا بعمل، فحأعمل `<tr>` بالاول. تمام؟ بعد ما أعمل الـ `<tr>` بعمل عدد الـ `<td>` حتكون حسب عدد الـ `<th>`. كم عمود عندي؟ بنعمل الـ `<td>` لأنه قلنا الـ `<td>` بتمثل تعبئة خلايا البيانات الموجودة عنا. آخر حاجة الـ `<tfoot>` قلنا بتمثل آخر صف معنا، بعملها بنفس طريقة الـ `<tbody>` اللي هي `<tr>` و `<td>`.

هل الفكرة اللي كنا نحكيها إنه إحنا عارفين إنه الكود قلنا هان ماشي معي بالتسلسل، صح ولا لا؟ إيش بكتب في البرنامج بيظهر معي على البراوزر. هلقيت لو أنا مسكت مثلا هي الـ `<tfoot>` ورحت حطيته بالاول، خليته بالاول هذا، هي بعد التيبل. يفترض زي ما نحن متعودين يجي عندي بالترتيب. صح ولا لا؟ يعني هان البيانات "محمد" و "اكس" الموجودة في آخر صف، يفترض تيجي معي في أول صف، لأن نحن عارفين إنه إيش بنكتب في البرنامج بيجي معي بالترتيب. ولو مسكت مثلا الـ `<thead>`، هيها عناوين الجدول، مسكتها زي هيك وهيني بدي أحطها بعد الـ `<tbody>`، آخر شيء. هيها. تعال نعمل ريفريش عنّا هان. لو أضل أعمل ريفريش لبكرة مش حيتغير. ليش؟ لأنه نحن مقسمين الشيء لـ `<thead>` و `<tbody>` و `<tfoot>`، فهو لحاله بيفهم إنه الـ `<thead>` وين ما أنا حطيته في البرنامج، دائما خلي لي إياه الصف الأول. الـ `<tfoot>` وين ما أنا حطيته في البرنامج، دائما خلي لي إياه الصف الأخير. تمام؟

هلت لو أنا ما كنت عاملة هذه التقسيمة `<thead>` و `<tbody>` و `<tfoot>`، وجيت زي هيك غيرت في البيانات، حتتغير معي مباشرة. إيش بكتب في برنامج الفيجوال ستوديو كود حتنعرض معي على البراوزر بالترتيب. لحتى الآن أمور تمام.

طيب، نحن شايفين هان إنه الجدول تم إنشاؤه بدون حدود، صح ولا لا؟ موضوع الحدود الـ "بوردر" حنأخذه في السي اس اس. حنأخذ الـ "بوردر" بشكل تفصيلي له. في عننا له "بوردر ستايل" و "بوردر ويت" و "بوردر كر" والأمور هذه. لكن مبدئيا، لما أجي أنشئ أي جدول، حكي لي في عندي "أتربيوت" اسمه "بوردر" بتقدري تضيفيه مع تاج التيبل مباشرة كاتربيوت. باجي بحكي له `border` بهذا الشكل وبعطيه قيمة واحد. فإيش بيعمل؟ بروح بينشئ "بوردر" بشكل افتراضي، حدود بشكل افتراضي بهذا الشكل. بيكون لونها أسود ونوع الـ "بوردر" فيها دبل. تمام؟ بينشئ لي "بوردر" بشكل افتراضي زي ما أنتم شايفين.

هلا لما ناخذ السي اس اس، في عننا أنواع كثير من الـ "بوردر". في عننا "جروب"، في عننا "دبل"، في عننا "موف"، في أكثر من نوع. فبصير أقدر أتحكم فيه من خلال خاصية الـ "بوردر ستايل". أتحكم في اللون تبعهم، أتحكم في الـ "ويت" تبعتهم. هذا الشيء لما نأخذه إن شاء الله في خاصية الـ "بوردر". مبدئيا عشان أنشئ "بوردر" زي ما قلنا، بنضيفه كاتربيوت مع تاج التيبل وبعطيه قيمة واحد، فبروح بينشئ لي حدود بشكل افتراضي.

هلا الجدول هذا أعطاني إياه بالشكل الافتراضي تبعه. الحجم تبعه حسب شو البيانات اللي أنا حطيتها فيه. بيعطيني حجم الجدول زي ما هو. نفس الشيء لو أنا بدي أتحكم في حجم الجدول، بقدر أضيف "أتربيوت" الـ `height` تساوي مثلا 100 بكسل. بدي طول الجدول 100 بكسل، والـ `width` عندي مثلا يكون يساوي 150 بكسل. هيك أنا بقدر أتحكم في الطول والعرض تبع الجدول بهذا الشكل. حتى ما كبر كثير، خلينا نزود شوية. هي 200، هي 250. ريفريش بهذا الشكل.

هلقيت أنا لما حطيت `height` و `width` للتيبل نفسه، زي ما أنتم شايفين، كل الجدول كبر بشكل عام. لكن الخلايا هذه بقدر برضه أنا أتحكم فيها عن طريق مين؟ تاج الـ `<td>`. مش أنا عندي الخلايا هذه الـ `<td>`؟ بقدر برضه أحكي لها الـ `height` كذا والـ `width` كذا. لو أنا بدي أتحكم في الصف نفسه، باجي على الـ `<tr>` وبحكي له `height` و `width`. ولكن هذا الشيء كله بشكل مبدئي لحد ما ناخذ السي اس اس اللي حأقدر من خلالها أتحكم في الشكل زي ما أنا عايزة. تمام؟

حتى الآن، إذا عرفنا كيف ننشئ جدول، كيف أعمل "بوردر" عليه حدود، كيف أتحكم في الـ `height` والـ `width` تبع هذا الجدول. عنا شغلة مهمة جدا، موضوع دمج الصفوف ودمج الأعمدة. تمام؟

هلا بحكي لي عشان تدمجي الصفوف، في عندي خاصية اسمها `rowspan`. بعملها لدمج الصفوف. `colspan` لدمج الأعمدة. كيف بنعمل هذا الكلام؟ لنفرض إنه أنا عندي جدول بهذا الشكل. هي مثلا هيك، وهي هي. هلا اطلعوا هذا الجدول. لو أنا بدي أجي أعمل التقسيمة تبعته، حأحكي عندي هي صف، هي اثنين، هي ثلاثة، هي أربعة. صح ولا لا؟ عندي أربع صفوف وكم عمود؟ اثنين. ممتاز. عمودين. فحأجي أعمل بالاول `<thead>`، `<tbody>`، `<tfoot>`. في الـ `<thead>` أحط عناوين الجدول، أوكي. في الـ `<tbody>` أعمل ثلاثة `<tr>` وبداخل كل واحدة `<td>`. وآخر شيء بالـ `<tfoot>` برضه أعمل `<tr>` بداخلها `<td>`. مضبوط.

بنيجي هلت للجزئية هذه إنه الصف الأول عامل دمج لعمودين. صح ولا لا؟ فباجي بقول له `colspan="2"`. بس إنه أنت إيش معنا دمج للصف الأول والصف الثاني؟ هلا حنجربكم. لو أنا أجيت مثلا بس أنا بدي أرجع كل شيء زي ما كان. هي الـ `<tfoot>` عشان ما تتخربطوش. هي الـ `<tfoot>` بالأخر. وهي الـ `<thead>` للأول. تمام؟ هيك الأمور تمام. هي عندي `<thead>` خلصنا منه. وهي الـ `<tbody>`، وهي الـ `<tfoot>`.

هلا لو أنا أجيت على الـ `<td>` فيها قديش فيها صفين؟ صح ولا لا؟ خليني أضيف كمان صف لها. `<tr>` على السريع بداخلها ثلاثة `<td>`. بحط مثلا رقم أربعة، أي شيء. تمام؟ بهذا الشكل. هلت لو أنا أجيت حكيت بدي أعمل دمج للصف الأول والصف الثاني. بدي أدمجهم مع بعض. يعني "أحمد" و "علي" أدمجهم مع بعض. إيش بروح بعمل؟ بروح على الـ `<td>` تبعت "أحمد" وبحكي له `rowspan="2"`. هلا شوفوا إيش حيصير معي. `rowspan="2"`. هي ريفريش. شفتوا إيش صار؟ هي "أحمد" و "علي" اندمجوا بنفس المكان. ولكن بصير إزاحة للبيانات على العمود الثاني. لأنه "علي" وين بدها تروح؟ بتروح على العمود الثاني. فبالتالي الزيادة حينعمل في عمود في عمود جديد. طيب إيش الحل لهي النقطة؟ إنه أنا أحذف كلمة "علي". صح ولا لا؟ بما إنه بدك تعملي الدمج لاثنين، فلقيت بنحذفها. نعمل ريفريش بهذا الشكل. هي الخليتين تبعت "أحمد" و "علي" تم دمجهم في صف واحد، وحافظت على التقسيمة أو التنسيق تبع الجدول بالشيء بنفس الشكل اللي أنا بدي إياه. واضحة هذه النقطة؟

إذا لما بدي أعمل دمج لأي صف أنا بدي إياه، وين البيانات هذه؟ بروح بروح على الـ `<td>` نفسها وبكتب `rowspan`. بدي أدمج ثلاثة بقول له `rowspan="3"`. بدي أدمج أربعة بقول له `rowspan="4"`. وبروح أحذف البيانات اللي موجودة بداخل هذا الصف عشان أحافظ على تنسيق الجدول. نفس الحاجة لو بدي أدمج عمودين. مثلا بدي أدمج "الآي دي" و "النيم" في عمود واحد. بروح على الـ `<th>`. بروح هان على الـ `<th>` وبحكي له `colspan="2"`. يعني دمج لي إياهم اثنين. هلت لما أعمل ريفريش حيصير دمج لهم، وزي ما حكينا، يصير إزاحة للبيانات. فعشان أشيل موضوع الإزاحة، يفترض إنه أنا أحذف الـ `<th>` تبع "نيم". صح ولا لا؟ عشان يضل الجدول محافظ على نفس التنسيقات اللي أنا بدي إياها. فهلقيت لما أعمل ريفريش زي ما أنتم شايفين، هي "الآي دي" و "النيم" أخذوا نفس هذه المساحة، وهي "الكنتري" في مساحة لحال. واضحة لحتى الآن؟ مين عنده سؤال في موضوع الجدول؟ الأمور تمام.

كيف ننشئ "بوردر"؟ كيف أعمل "هاي" و "ويد"؟ كيف نعمل دمج للصفوف والأعمدة؟ ممتاز. نيجي للشغلة اللي بعدها اللي بدنا نحكي فيها، اللي هو موضوع إدراج الميديا. إدراج الميديا. نحن إذا بتتذكروا، حكينا في عندي أنواع مختلفة من الميديا. أخذنا أول نوع منهم هي إدراج الصور. حكينا عشان أدرج صور في عندي تاج اسمه `<img>` اختصار لكلمة "إيج". معها تو "أتربيوت" `src` عشان أحط فيها مسار الصورة، ومعها "أتربيوت" `alt` عشان أحط نص بديل يغنيني عن الصورة. صح ولا لا؟ لو أنا جيت عملت `<img>`، بدي أحط أي صورة من الصور الموجودين معنا، زي ما نحن أخذنا قبل. هي الميديا، بداخله مجلد الـ "إيمجز". مثلا موجود معه هذه الصورة. هلقيت نعمل ريفريش، حيصير دمج، إدراج للصورة بنفس الشكل. بس بدي أغير الـ `height` والـ `width` تبعها. هي مثلا `height="150"` وهي `width="100"`. فتعال نعمل ريفريش. ممتاز.

هلت في عندي "أتربيوت" إضافي على الـ `<img>` ما حكينا فيه اسمه `title`. حدا بيعرف إيش بيعمل هذا الـ "أتربيوت" `title`؟ >> إيش؟ >> عنوان؟ >> ممتاز. لما بحط المؤشر على الصورة، إيش بكتب؟ عنوان بيظهر عندي. مثلا باجي بحكي له "ذس إز عنوان أنا بدي إياه". هي ريفريش. شوفوا لما باش هذه الحركة بنحكي عنها "هوفر". حناخذها لقدام إنه أنا أعمل تأشير على الماوس بهذا الشكل. فلو أنا بدي نص يظهر على العنصر، يأشر عليه لما أشير عليه، بحط هذا النص بداخل "أتربيوت" اسمه `title`. تمام؟ `title` يساوي إيش النص اللي أنا بدي إياه بضيفه هون بداخل الـ `title`. واضحة.

نيجي للنوع الثاني من إدراج الوسائط أو الميديا، اللي هو كيف ندرج فيديو. أول حاجة عشان أدرج فيديو، المفروض أجي هنا على مجلد المشروع، على مجلد الميديا، اللي موجود بداخله فيديوز، وأدرج الفيديو اللي أنا بدي إياه. تمام؟ أوريدي أنا حطيته بداخل الملف، لأنه نحن قلنا قبل هيك إنه أي شيء أنا بدي أدرسه في مجلد المشروع، عادي بقدر أحطه في المكان اللي أنا بدي إياه. ممكن يكون على موقع، ممكن يكون على الديسك توب، ممكن يكون على الـ "آي"، على السي. ولكن قلنا أفضل شيء إنه أنا أي ملف بدي إياه أو أي صورة بدي إياها، أحطها في مجلد المشروع تبعي. صح ولا لا؟ وحكينا عشان قلنا إذا انحذفت الصورة، إذا راحت من المكان تبعها، إذا تغير المسار تبعها، طالما هي موجودة في مجلد المشروع اللي أنا شغالة فيه، فإيش ما يصير في الصورة، بتضل محافظ عليها وبتظهر عندي في الموقع تبعي. تمام؟

فأنا جبت فيديو حطيته في مجلد الفيديو. عشان أدرج فيديو، عندي تاج اسمه `video`. تاج له بداية ونهاية. معه "أتربيوت" اسمه `src` عشان أحط بداخله مسار الفيديو اللي أنا بدي إياه. حاجي أحكي له إنه أنا في عندي مجلد اسمه "ميديا"، بداخله مجلد اسمه "فيديوز"، موجود بداخله فيديو اسمه "فيديو 1". الامتداد تبعه أو النوع تبعه "ام بي فور". تمام؟ هيك أنا أدرجت الفيديو. تعالوا نعمل ريفريش على الصفحة عندي. زي ما أنتم شايفين، هي الفيديو ظهر معي. ولما أعمل السكرول هيك، هي هذا الحجم الافتراضي تبع الفيديو عندنا. بنقدر نتحكم فيه بالـ `height` والـ `width`. لكن هل مبين عندكم إنه هذا فيديو؟ كيف بده يبين إنه فيديو؟ المفروض تبعون التشغيل، أزرار التشغيل تظهر معي، صح ولا لا؟ عشان تظهر معي أزرار التشغيل، بحكي لي لازم تضيفي "أتربيوت" اسمه `controls`. تمام؟ "أتربيوت" اسمه `controls`. بس وظيفته إنه يعمل إضافة أو يظهر لي أو يعرض لي أزرار التشغيل الخاصة بالفيديو. هلقيت لما نعمل ريفريش. شفتوا إيش ظهر ه تحت؟ هيهم. هدول كيف بيظهروا؟ من خلال الـ "أتربيوت" اللي اسمه `controls`. كمان بقدر أتحكم في الـ `height` والـ `width` تبعه. عادي ممكن أقول له إنه أنا بدي الـ `height` له 150 بكسل، وبدي الـ `width` مثلا 200 بكسل. هيك أنا تحكمت في حجم الفيديو اللي هو الـ `height` والـ `width` تبعه. هي 150 والـ `width` 200 بهذا الشكل. تمام؟

هي الفيديو. إذا إدراج الفيديو تاج اسمه `video`. معه "أتربيوت" اسمها `src` وظيفتها تشغل التاج. لأنه أنا مش حأقدر أدرج الفيديو إلا أحط حط المسار تبعه. عشان يبين إنه هذا فيديو للمستخدم، لازم أضيف معه "أتربيوت" اسمه `controls` عشان يضيف لي أزرار التشغيل زي ما أنتم شايفين. تمام؟ في "أتربيوت" ثانية بنستخدمها مع الفيديو. الـ "أتربيوت" الأول اسمه `autoplay`. إيش يعني `autoplay`؟ تشغيل تلقائي. إيش وظيفته؟ إنه أنا أول ما أفوت الموقع، الـ فيديو أوريدي يتشغل معي. تمام؟ فهذه وظيفة الـ `autoplay`. في عننا "أتربيوت" ثاني اسمه `loop`. إيش بيعمل الـ `loop`؟ بيعمل تكرار للفيديو. إيش يعني؟ لو أنا الـ فيديو مثلا مدته دقيقة، اللي حيصير حيخلص مدة دقيقة وخلص يوقف الفيديو عندي. طيب لو أنا بدي إياه يكون شغال طول ما أنا فاتحة الموقع تبع هذا، وهو غالبا أصلا بصير، فبنعمل معه `loop` عشان يعمل تكرار للفيديو اللي هو موجود معنا. هذا الشيء حنشوفه إن شاء الله بتطبيق عملي في هذا الموقع. بس ناخذ شوية خصائص في السي اس اس، حنطبقها. شوفوا الموقع هذا. لا. تمام؟ شوفوا هذا الموقع. أول ما فتحت الصفحة الرئيسية، زي ما أنتم شايفين، الفيديو جاي معي كامل على الصفحة وشغال بشكل تلقائي. وفي عندي كلام جاي فوق الفيديو. هذا كثير بنشوفه في مواقع الويب. ديروا بالكم. مواقع الويب، السكشن الأول اللي نحن اتفقنا اسمه "سكشن هيرو"، عادة يا إما بيكون عبارة عن صورة، يا إما بيكون عبارة عن فيديو، يا إما بيكون عبارة عن سلايدر. وحناخذهم الثلاثة كيف نعملهم. تمام؟ فهذا إن شاء الله بس ناخذ شوية في السي اس اس، حنأخذ كيف ندرجه. مبدئيا، اللي بدنا نكون عارفينه إنه إدراج الفيديو عبارة عن تاج اسمه `video`. `src` أحط الـ "أتربيوت" ومعه "أتربيوت" `src` أحط المسار. معه "أتربيوت" قلنا `controls` عشان يضيف لي أزرار التشغيل. `height` و `width` عشان أتحكم فيه. `autoplay` عشان يعمل تشغيل تلقائي. `loop` عشان الفيديو ما يوقف طول ما أنا شغالة في الموقع، الـ فيديو يضل شغال معي بدون ما يوقف، حتى لو انتهت مدة الفيديو. تمام؟ هذا إدراج الفيديو.

نيجي نشوف كيف بندرج صوت. بحكي لي عبارة عن تاج اسمه اسمه `audio`. معه برضه "أتربيوت" اسمها `src`. أنا أوريدي حطيت صوت في مجلد الصوت اللي نحن شغالين فيه. حاجي أحكي له إنه في عندي مجلد اسمه "ميديا"، بداخله مجلد اسمه "أوديو"، موجود بداخله هذا الصوت. بنفس الطريقة. بس الفرق إنه تاج اسمه `audio`. لقيت ريفريش. لو أضل أعمل لبكرة ريفريش، الصوت مش حيظهر معي. ليش؟ لازم أضيف معه "أتربيوت" اسمها `controls`. شوفوا هي `controls`. تعال نعمل ريفريش بهذا الشكل. يبقى إيش الفرق بين الـ `controls` تبعت الأوديو والـ `controls` تبعت الفيديو؟ >> إيش؟ >> ممتاز. إنه هان بتشغل الكود. الصوت ما رضيش يظهر معي إلا لما أضيف معه هذه الـ "أتربيوت". صح ولا لا؟ لكن في الفيديو، الصوت اشتغل معي، ولكن أزرار التشغيل هي اللي ما بينت معي. فهي شغلة كثير مهمة إنه إيش الفرق بين الـ `controls` في الأوديو والـ `controls` في الفيديو. الـ `controls` في الأوديو قلنا إيش بتعمل؟ بتشغل الكود. الـ `controls` في الفيديو بتميز الكود الموجود معنا. نفس الـ "أتربيوت" اللي حكيناهم في الأوديو، برضه موجودين معنا وين؟ بالفيديو. إنه أنا في عندي `autoplay` عشان يعمل تشغيل تلقائي للصوت. طول ما أنا شغالة في الموقع، وكثير بنفوت على مواقع بنلاقي فيها بتعرض موسيقى، صح ولا لا؟ طول ما أنا بتصفح في الموقع، الموسيقى هذه معروضة معي، فبيكون المسؤول عنها الـ `autoplay`. نفس الحاجة في عندي `loop` تكرار، عشان إذا الصوت مثلا كان له مدة معينة، ما يوقف طول ما هو بيخلص، بضل يعمل "لوب" تكرار للصوت الموجود. تمام؟ لحتى الآن حدا عنده سؤال بالنسبة لإدراج الملفات وإدراج إدراج الصوت وإدراج الفيديو؟ ممتاز.

نيجي نشوف كيف بندرج ملف. نحن المرة اللي فاتت أخذنا أول طريقة لادراج الملفات لما كان عنا ملف "بي دي اف". مين التاج اللي استخدمناه لإدراج هذا الملف؟ تاج الـ `<a>`. ممتاز. حطينا في الـ `href` مسار الملف. هذا قلنا اسم الملف دوت "بي دي اف" مثلا، أو دوت "وورد"، أو دوت "بي تي" إذا كان من نوع "باور بوينت". صح ولا لا؟ وحكينا بنضيف معه "أتربيوت" عشان يعرض لي هذا الملف وأقدر أطبعه، أقدر أنزله، أقدر أعمل "داونلود". إيش كان اسم الـ "أتربيوت" هذا؟ >> داونلود؟ >> داونلود. ممتاز. هذه أول طريقة أتعامل فيها مع الملفات، سواء كان عندي ملف "بي دي اف"، ملف "وورد"، ملف "باور بوينت". الطريقة الأولى إنه أنا أستخدم تاج اسمه `<a>` معه "أتربيوت" اسمها `href` أحط بداخلها مسار هذا الملف. وبحال أنا بدي أعرض هذا الملف عشان أتحكم فيه من ناحية طباعة، من ناحية تنزيل، قلنا بنضيف معه الـ "أتربيوت" اللي اسمه `download`. تمام؟

نيجي للطريقة الثانية لإدراج الملفات. في عننا تاج اسمه `embed`. حدا تعامل فيه أو سمع فيه؟ تاج الـ `embed` مسؤول برضه عن إدراج الملفات، سواء من نوع "بي دي اف"، من نوع "باور بوينت"، من نوع "وورد"، اللي بدكم إياه. فبع "أتربيوت" اسمها `src` عشان أحط فيها مسار الملف اللي عندي. فنحن عارفين إنه أنا في عندي مجلد اسمه "ميديا"، صح؟ موجود بداخله مجلد اسمه "فاز". حطيت بتاخوا الملف اللي اسمه "دوك 1 دوت بي دي اف". تمام؟ بداخل تاج الـ `embed`. فتعال نعمل ريفريش. زي ما أنتم شايفين بهذا الشكل. هيه، تاج الـ `embed` بيظهر لي الشكل بهذا الشيء. بعمل سكرول. لو كان الملف مثلا مكون من 50 صفحة، من 100 صفحة، بنعرض بهي الطريقة. طول ما أنا عاملة سكرول، بصير أقرأ في الملف اللي أنا بدي إياه. هذا التاج الأول هو المسؤول عن الملفات، اللي هو تاج اسمه `embed`.

في عندي تاج ثاني ومهم جدا اسمه `<iframe>`. حدا تعامل فيه أو بيعرف لايش بنستخدمه؟ بحكي لي تاج الـ `<iframe>` بنستخدمه لعملية تضمين الملفات، أو تضمين مواقع. وهذه كثير بنشوفها إنه أنا في عندي قاعدة بتصفح في موقع معين، لكن بيعرض لي إعلانات من موقع ثاني، أو بيعرض لي موقع ثاني. يعني كثير مثلا بتلاقوا مثلا متجر. تمام؟ المتجر هذا مربوط بموقعين أو بمتجرين. فكيف صاحب الموقع بده يزيد إعلانات الموقع الثاني، أو المتجر الثاني؟ بروح بيعمل تضمين لهذا الموقع بداخل الموقع اللي هو أوريدي موجود فيه. فبصير أي يوزر أو أي مستخدم دخل هذا الموقع، يشوف الموقعين. أو مثلا أنا بدي أضمن فيديو يوتيوب بداخل الـ بداخل المجلد تبعي، أو بداخل المشروع تبعي. فالتاج المسؤول عن هذا الكلام تاج اسمه `<iframe>`. بيعمل على تضمين ملفات، تضمين موقع بداخل الموقع، الموقع اللي أنت شغالة فيه. تضمين فيديو يوتيوب مثلا بداخل الموقع اللي أنت شغالة فيه. بنفس الطريقة بقول له `<iframe>`، `src`. بحط بداخلها مجلد المشروع اللي أنا بدي إياه. فلنفرض إنه أنا بدي أحكي له في عندي الميديا، بداخلها الفايز، بداخلها هذا الملف. هلقيت لما أجي أعمل ريفريش، حيعمل لي تضمين للملف زي ما أنتم شايفين. بنفس طريقة الـ `embed`. ولكن وين الفرق؟ قلنا الـ `<iframe>` إنه برضه بنستخدمها في عملية تضمين فيديو يوتيوب. لو أنا جيت هون فتحت اليوتيوب. تمام؟ وجبت أي رابط من الموجودين هون. مثلا هي هذا. هي أخذت الرابط تبعه. وباجي هان وين بضيفه؟ بداخل الـ `src`. صح؟ هي `<iframe>`، الـ `src` حأحط رابط الملف اللي أو رابط الفيديو اللي أنا جبته. فتعال نعمل ريفريش هنا. حيعرض لي فيديو اليوتيوب اللي أنا عرضته. ولكن في شغلة مهمة. في الـ `<iframe>`، إنه أحيانا فيديو اليوتيوب نفسه هذا بتكون سياسة من من صاحب الفيديو نفسها. تمام؟ إنه بيكون مانع إنه أنا أعمل تضمين للفيديو تبعه. ولكن هذه لها حل. في الـ "لابل" مبرمجين الـ "لابل" بيقدروا إنه يخلوا فيديو اليوتيوب حتى لو إنه كان مرفوض إنه عمل له تضمين، بروحوا بضمنوه ضمن الموقع هذا. تمام؟ لأنه أغلب فيديوهات اليوتيوب بتلاقي صاحب الموقع عامل منع لأنه أنا أعمل تضمين لها. تمام؟ فهذا شغل مبرمجين الـ "لابل". واضحة بالنسبة إيش الـ `embed` والـ `<iframe>`؟ الاثنين بنستخدمهم لتضمين الملفات في الموقع تبع تبعنا. والـ `<iframe>` برضه بنستخدمها إنه أنا أعمل تضمين لفيديو يوتيوب في الموقع اللي أنا شغالة فيه. لحتى الآن الأمور تمام.

ممتاز. نيجي نشوف كيف بندرج خريطة جوجل في الموقع تبع جوجل ماب. وهذه كثير بنشوفها. أغلب المواقع موجود فيها اللي هو موضوع كيف ندرج خريطة أو جوجل ماب عنا في الموقع. صح ولا لا؟ بحكي لي عشان تدرجي جوجل ماب، بتيجي هان على الكروم. تحكي له "جوجل ماب". تمام؟ هي جوجل ماب. قراءة. بروح على الموقع اللي أنا عشان فاتحاه قبل هيك. لا، أنا بدي أوريكم بالضبط. ثواني. هي جوجل. تمام؟ بهذا الشكل. بروح على الرابط. الرابط الأول اللي هو الموقع الرسمي تبع جوجل ماب. فبروح بيعرض لي خريطة جوجل. الشكل الافتراضي تبعها. تمام؟ بهذا الشكل. بس لسه بتحمل.

هلا عشان أعمل تضمين أو إدراج لخريطة جوجل في الموقع تبعي، باجي هان على المنيو اللي موجودة هان. تمام؟ بلاقي عندي خيار اسمه "مشاركة الخريطة" أو "تطبيق تضمينها". بضغط عليه. وبضغط هون على كلمة "تضمين خريطة". حتلاقوها أصلا هي عبارة عن تاج `<iframe>`. لأنه إحنا تو قلنا إيش الـ `<iframe>`؟ تاج مسؤول على تضمين موقع في موقع. فالجوجل ماب تعتبر موقع في موقع اللي أنا شغالة. أوريدي معها الـ `src` اللي هي رابط جوجل ماب. هيه أخذها كلها. ومعها هان "أتربيوت" عشان أقدر أنا أتحكم في جوجل ماب زي ما أنا بدي. بيحكي لي إنه الـ `width` لها 600، الـ `height` 450. بقدر أغيرها. مثلا خليه 300. أخليه مثلا 350. تعال نعمل ريفريش. حيتم عرض خريطة جوجل على الموقع تبعنا بهذا الشكل. تمام؟ بصير أتحكم في الـ `height` والـ `width` زي ما أنا. وهي شغلة كثير مهمة. كثير في عننا عنا مواقع بتظهر خريطة جوجل. فالمسؤول عنها تاج اسمه `<iframe>`. باخذه مباشرة تضمين من موقع جوجل ماب. كمان مرة، كيف الطريقة؟ سهلة جدا. ببحث على جوجل ماب، بفوت على الموقع الرسمي تبعهم، اللي هو أول رابط. حتظهر لي الخريطة بهذا الشكل. في عندي هان "منيو" قائمة. بضغط عليها. بلاقي في عندي خيار "مشاركة الخريطة" أو "تضمينها". بضغط عليه وبحكي له "تضمين الخريطة". وباخذ كود الـ "اتش تي ام ال". وباخذه كوبي. طبعا نحن هون بس عرضنا الخريطة. عرض على الموقع. كيف أتحكم في إنه يعمل لي تحكم؟ كيف مثلا لما أضغط على أي مكان يظهر لي شيء؟ هذا عبارة عن دمج شغل "جي إس" مع "بي اتش بي" لـ "لابل". تمام؟ كيف إنكم تحددوا الـ الموقع بالضبط زي ما أنتم. لحتى الآن تمام.

يلا، الان بدنا نحكي على اثنين تاجات من تاجات الاتش تي ام ال المهمين جدا. تاج اسمه `<div>` وتاج اسمه `<span>`. حدا بيعرف شيء عن هذول التاجات؟ شو الفرق بينهم؟ متى بنستخدمهم؟ >> إيش الـ `div`؟ >> بلوك؟ >> ممتاز. والـ `span`؟ >> إيش؟ >> أعدل؟ >> اه، لا زي بس بياخذ مكان؟ >> ممتاز.

هلا متذكرين المرة اللي فاتت حكينا إنه عندي أنواع العناصر في الاتش تي ام ال نوعين. عناصر اسمها "بلوك المنتس" وعناصر اسمها "إن لاين المنتس". حكينا الـ "بلوك المنتس" بتكون حاجزة المساحة كاملة تبعت هذا العنصر. بمعنى إنها ماخذة الـ "فول ويدث" تبع العنصر. حكينا الـ "إن لاين المنتس" بتاخذ مساحة على حسب المحتوى تبع هذا العنصر، حسب الـ "كونتنت". فبحكي لي إنه عنصر الـ `div` يعتبر من عناصر الـ "بلوك المنتس". ملك العناصر الـ "بلوك". يعني هو العنصر الأساسي في العناصر الـ "بلوك". الـ `span` يعتبر الـ "ملك العناصر اللي من نوع إن لاين". تمام؟

هلا وين بنستخدم هدول العناصر؟ الـ `div` بحكي لي بتستخدميهم في تقسيمة السكاشن اللي موجودة عندكم. نحن المرة اللي فاتت حكينا إنه صفحة الويب عندي مكونة من "هيدر" و "مين" وبداخل الـ "مين" مجموعة من السكشن و "فوتر". صح ولا لا؟ قلنا هذا الكلام موجود بالاتش تي ام ال فايف. الاتش تي ام ال اللي قبل كان تقسيمة الصفحة يقسموها لمجموعة من الـ "ديفات". يعني بدل الـ "هيدر" كانوا يحطوا `div`. بدل الـ "مين" يحطوا `div`. مجموعة السكشن تكون `div`. الـ "فوتر" يكون `div`. ولكن هذا الشيء. وحتى الشاب عبد الرحمن حكى إنه الـ "هيدر" والـ "مين" وهي الأمور حكى جديد أنا عرفتها. قبل كان كل استخدامي على الـ `div`. موضوع الـ `div` أوكي تمام وبيضبط معك كل الأمور. ولكن حتتغلبوا في موضوع تسمية. لأنه نحن قلنا تسمية الكلاسات وتسمية الـ "آي دي" لازم يكون اسم يونيك، اسم يدل عليها، مش عارفة إيش. فإذا أنا اعتمدت إنه كل صفحة الويب تبعتي كلها عبارة عن "ديفات"، حيجي وقت إنه أنا مش قادرة ألاقي اسم لهذا الـ `div` مناسب مع العنصر هذا. تمام؟ عشان هيك كل اتفاقنا بده يكون إنه "هيدر" و "مين" و "فوتر". تمام؟ والـ "مين" موجودة بداخلها السكشن. هلقيت بداخل الـ "هيدر"، بداخل السكشن، بداخل الـ "فوتر"، بصير أقسم لمجموعة من الـ "ديفات". تمام؟

وظيفة الـ `div` بتحكي لي إنه هي بتساعدني في في عملية تقسيم العناصر الموجود معي وترتيب العناصر في الصفحة تبعتي. كيف يعني؟ يعني لو فتحت على أي موقع مثلا. هلقيت حلاقي هذا الموقع في هي جزئية الـ "هيدر"، وهي الـ "مين" في مجموعة السكشن، وآخر حاجة الـ "فوتر". تمام؟ لو أنا جيت أطلعت على مثلا هذا السكشن، حلاقي هذا سكشن "الكونتاكت أس" مكون من كلام على اليمين عبارة عن فورم، وجزء على اليسار عبارة عن نص. صح ولا لا؟ كيف بعمل هذا الكلام؟ بنفس السكشن اللي موجود معي، ساعتها بقسم لـ `div` يمين و `div` يسار. بداخل `div` اليمين بحط الفورم. بداخل `div` اليسار بحط النص. لو أطلعت على السكشن اللي فوقه، بس نص. السكشن هذا عبارة عن مجموعة من الكارت. صح ولا لا؟ البطاقات. كل كارد من هذول بعملها في `div`. بداخل الـ `div` بحط صورة، بحط نص، بحط زر. تمام؟ هي خلصت عملتها لـ `div`. فالـ `div` هان ساعدتني إنه أنا أعمل تقسيم لعناصر الصفحة وترتيب للعناصر الموجودة. إيش يعني ترتيب؟ يعني العنصر إذا عندي على اليمين، اللي عندي على اليسار، بقسمه في مجموعة من الـ "ديفات" وبصير أصل لهي الـ `div` بالسي اس اس وأعمل عليها خصائص. كل هي الأمور إن شاء الله حنأخذها مع بعض.

نفس الشيء، هذا السكشن مثلا، هذا السكشن حأجي أحكي فيه `div` على اليمين عبارة عن مجموعة من الصور، و `div` على اليسار عبارة عن نصوص. بصير أحط الصور وأعمل التنسيقات تبعتهم، واللي على اليسار أعملها `<h3>` مثلا، `<h4>`، بي الأمور هذه. تمام؟ فـ الـ `div` هي عبارة عن وظيفتها عنصر "بلوك المنتس". حاجز المساحة كاملة. طبعا لما ناخذ السي اس اس، حأقدر أخلي العناصر الـ "بلوك" "إن لاين"، والعناصر الـ "إن لاين" "بلوك" من خلال خاصية الـ `display`. حناخذها. تمام؟ عشان هيك قلت كم في السي اس اس حتقدروا تتحكموا بالشكل اللي أنتم بدكم إياه وبالعنصر اللي أنتم بدكم إياه. تمام؟

هلقيت لو أنا على السريع عملت هذا الـ `div`، حطيت بداخله جملة "لوريم" ستة مثلا. وجيت هان كسي اس اس حكيت له الـ `div` هذه أعطيها "باك جراوند كر" مثلا هذا اللون. حلاقي إنه أخذ المساحة كاملة تبعت العنصر. أعطاها "باك جراوند كر" بهذا الشكل. مع إنه النص تبعها عند هان بوقف، ولكن لأنها عنصر `div` بيكون ماخذ المساحة كاملة. نفس الحاجة في عنصر `span`. الـ `span` لو أنا جيت قلت له "لوريم" خمسة. وجيت أعطيته "باك جراوند كر". لا، بروح بياخذها على قد المساحة تبعت هذا العنصر، حسب الـ "كونتنت". لأنه هو عنصر "إن لاين". إيش يعني "إن لاين"؟ يعني لو عملت أكثر من `span`، كلهم إيش مالهم؟ حيجوا على نفس السطر. بهذا الشكل. تمام؟ هي الـ `span` الأولى، هي الثانية، هي الثالثة. اجت على نفس السطر. لو جيت هان كستايل وقلت له `span` "باك جراوند كر" هذا اللون. حلاقي إنه بياخذ الـ "باك جراوند كر" على حسب العنصر اللي موجود معي بهذا الشكل. تمام؟ هذا بالنسبة للـ `div` والـ `span`.

طيب وين الـ `span` مهم بشكل كثير كبير؟ بنشوف مواقع موجود بداخلهم جملة، وبداخل هذه الجملة كلمة أو كلمتين ماخذين تنسيقات غير عن باقي العناصر. صح ولا لا؟ هلت الجملة هذه كلها مثلا "بي"، كلها مثلا `<h3>`. لو أنا بدي أعمل عليها خصائص في السي اس اس، حأعملها عن طريق "بي" أو `<h3>`. بقدر أتحكم في كلمة معينة فيهم؟ صح ولا لا؟ لأنه لما بقول له "بي" أو بقول له `<h3>`، بياخذ الخصائص على كل العنصر اللي موجود معنا. عشان هيك إجا عنصر الـ `span` حكى لي بتقدري النص اللي أنت بدك تميزي الـ "خصائص" تبعته عن باقي الجملة اللي موجودة معي، حطي الـ "خصائص"، حطي النص هذا بداخل الـ `span`. كيف يعني؟ لو أنا أجيت عملت `p`. كانت بداخلها جملة "لوريم" ستة. بدي كلمة "دولار" تكون ماخذة تنسيقات غير عن باقي النص اللي موجود في الـ `p`. تو قلنا لو أنا جيت هون على الستايل حكيت له `p` مثلا `color`، بدي اللون تبعها مثلا هذا اللون. اللي حيصير إنه كل الـ `p` حتاخذ هذا اللون. صح؟ ما بقدر أتحكم في كلمة معينة فيهم. عشان أتحكم في كلمة معينة، بيحكي لي حطيها بداخل الـ `span`. وهذه شغلة كثير بنشوفها في المواقع. امسكي كلمة "دولار" تمام وحطيها بداخل عنصر `span` بهذا الشكل. هلقيت بقدر أصل للـ `span` اللي موجودة في الـ `p`. يعني أحكي له `p span`. هيك معناتها. هذا حناخذه في شغل سي اس اس. الـ `span` اللي موجودة بداخل الـ `p`، خلي لي الـ `color` لها مثلا أحمر. خلي لي حجم الخط مثلا لها 25 بكسل. مثلا بدي إياها تكون "بولد" غامقة، `font-weight: bold`. هذه كل خصائص حناخذها في السي اس اس. المهم أشرح هلا فكرة الـ `span`. هلت لما أعمل ريفريش، حلاقي كلمة "دولار" زي ما أنتم شايفين، أخذت تنسيقات مختلفة عن باقي التنسيقات اللي موجودة في كل الجملة. تمام؟

إذا الاستخدام الرئيسي فيها إنه لما يكون في عندي كلمة بداخل عنصر معين ماخذة تنسيقات مختلفة عن باقي العنصر، بحطها بداخل الـ `span` وبصل لها بهي الطريقة. يعني.

انا ممكن في الموقع تبعي يكون عندي ثلاثة سبان مثلا. كيف بوصل لهم؟ بحكي السبان اللي موجودة بداخل هذا العنصر. مش ضروري يكون بي، ممكن هذه البي موجودة بداخل كلاس مثلا اسمه مين. فبقول له دوت مين كمثال زي هيك. موجودة بداخل الاي دي بحكي له هاش مثلا أي حاجة هيرو، البيم وهكذا. تمام. بسم توي حكيت دوت مان. حدا لاحظ شيء؟ دوت مان بينفع أحط اسم كلاس مين اسم محجوز، صح ولا لا؟ ممكن أسميه مين 1 مثلا. تمام، لأنه مين 1 مش محجوزة لحتى الآن. تمام، الأمور وضحت الفرق بين عنصر الدف وعنصر السبان. يعني يفترض أنه نحن هلقت فهمنا أو وصلتنا الفكرة أنه أي صفحة ويب بدنا نشتغلها وهذا الشيء حيبين معنا في التطبيق. تطبيقات يعني أول حاجة حاقسمها لهيدر ومين وفوتر. بعدين أصل للمين وأشوف كم سكشن عندي وأقسم لمجموعة من الفوتر. صح؟ بعدين كل عنصر من هذول هيدر، سكشن، فوتر المفروض إيش؟ أقسّمهم لمجموعة من الدب. صح ولا حسب التصميم اللي عندي؟ يعني لو جينا اطلعنا على الهيدر هذا مين يحكي لي كيف حنعمله؟ الهيدر بس كم دف؟ أول شيء يفترض ثلاثة دف. صح ولا لا؟ دف للوجو، دف للينكات هذه، وديف للأزرار. ليش أقول ثلاثة دف؟ لأنه هذه ماخذة خصائص مختلفة عن هذه، مختلفة عن هذه. فكل واحدة بدي أصل لها وأعمل عليها تنسيقات السي اس اس لحال. مضبوط؟ فهون حيكون عندي ثلاثة دف. لو نزلت على الفوتر مثلا، إيش برايكم حيكون؟ برضه ثلاثة دف. هي دف واحد، هي دف اثنين، هي دف ثلاثة. كل دف بصير أحط إيش العناصر اللي فيها. عندي إيج وعندي بي. الدف هذه عبارة عن مثلا اتش 3 واتش آر أو بوردر بوتوم لما ناخذها. وهذول مثلا عبارة عن اتش ف أو ممكن يكونوا لينكات. أي رابط هان نفس الحاجة. تمام؟ المهم التقسيمة الرئيسية تبعتهم حتكون عبارة عن مجموعة من الدب. ممتاز. هذا بالنسبة للدب والسبان. بدنا نحكي في موضوع مهم جدا وفيش موقع ويب بنعمله إلا بيكون موجود فيه اللي هي حاجة اسمها اسمها اتش تي ام ال إنتيتيز. وحدات الاتش تي ام ال أو رموز الاتش تي ام ال. حدا بيعرف إيش هم الاتش تي ام ال إنتيتيز؟ >> إيه؟ >> البكسل؟ لا أنا بحكي سي اس اس يونتس. السي اس اس يونتس هي اللي البكسل وفي اتش وار ورم واي ام والأمور هذ. هذه حنشرحها لقدام إن شاء الله. بحكي عن حاجة اسمها اتش تي ام ال إنتيتيز. رسوم وم أو رموز أو أشكال بنستخدمها في موقع الويب تبعنا ومش موجودة عننا في لوحة المفاتيح في الكيبورد. تمام؟ فبحكي لي الشكل العام تبع عشان تستخدميه لها رمز ببدا باشارة الـ "اند" اسم الاتش تي ام ال إنتيتيز وبعدين علامة السيمي كولون بهذا الشكل. تمام؟ زي مين؟ زي إشارة الكوبي رايت. صح ولا لا؟ اسم الرمز اسمه كوبي بهذا الشكل. هيك أنا قدرت أعمل الرمز هذا. كوبي سيمي كولون. اسم الهذا. طبعا هدول الاتش تي ام ال إنتيتيز مجموعة من الرموز موجودين في هذا الجدول. حبعث لكم الرابط اليوم. تمام؟ موجودين في هذا الجدول. بحكي لي مثلا لو بدك هي إشارة الكوبي اللي قلنا عنها عبارة عن "اند كوبي" سيميكولون. كلهم الشكل العام لهم "اند" بعدين اسم الاتش تي ام ال إنتيتي بعدين سيمي كولون. مثلا هذا احنا أغلب اللي بنستخدمه صراحة يا الأول يا الثاني. هدول الكوبي رايت والريجسترد تريد مارك اللي هي علامة مميزة أو علامة تجارية بنحكي عنها. فالاختصار تبعها "اند كوبي" "اند ريك". تعال نعملها نجربها معنا هون. هي ريفريش. زي ما أنتم شايفين هيها ظهرت معي بهذا الشكل. تمام؟ طبعا أنا ممكن أكون حطاها بداخل عنصر معين. كيف يعني؟ مثلا عنصر بي ومحطوط بداخله كلمة كوبي رايت. تمام؟ واجي أكتب الاتش تي ام إيتيز هذه أحكي له "اند" كلمة كوبي بعدين سيمي كولون. فحيروح يظهر لي كلمة كوبي رايت بعدين الإشارة هذه تبعت العلامة بهذا الشكل. تمام؟ لو أنا بدي أي اسم ثاني بقدر من هان أخذه. مثلا هذا الإشارة بقول اسمها "ان" عادي بحكيله سيمي كولون. ريفريش بهذا الشكل. أي رمز بدي إياه مش موجود في الكيبورد بقدر أستخدم الاتش تي ام ال إنتيز بهذا الشكل. هذه برضه التريد مارك أحيانا بنستخدمها "اند تريد". فباجي بحكي له "اند تريد" سيمي كولون. لما يصير لونها أحمر بتعرفوا أنه خلص أنه اسم الكوبي رايت اسم الاتش تي ام ال إنتتس بهذا الشكل. واضحة هذا مفهوم الاتش تي ام الانس؟ حبعث لكم الرابط تبعه.

طيب ممتاز جدا. حنحكي هلقيت على اتربيوت مهمة جدا ظهرت في الاتش تي ام ال فايف مش موجودة في الاتش تي ام ال اللي قبل. أول اتربيوت اسمه كونتنت إديتبل. حدا سمع فيه أو من معنى الاتربيوت إيش فهمته منه؟ لايش بنستخدمه؟ كونتنت إديتبل >> تعديل محتوى >> تعديل محتوى. تمام. إيش ممكن نستخدم خدمة؟ طيب ممتاز. هلت لو أنا جيت عملت جملة بي حطيت بداخلها لورم بهذا الشكل. تمام؟ نعمل ريفريش. بهذا الشكل. تعال نضغط على الكلمة هيك. إيش بصير لها؟ تحديد. صح ولا لا؟ بنفوت على مواقع بتكون بتسمح للمستخدم أنه يعمل تعديل للمحتوى اللي موجود. كيف بصير هذا الكلام؟ من خلال إضافة اتربيوت على العنصر نفسه اسمه كونتنت إديتبل. كونتنت إديتبل. اسمح للمستخدم أنه يعدل المحتوى اللي هو معروض عندي على الصفحة. هلت لما أعمل ريفريش وأرجع أحددها مرة ثانية. شفتوا إيش صار؟ قدرت أحدد المحتوى وأكتب أي محتوى أنا بدي إياه بهذا الشكل. وهي هيك. طبعا لما أعمل أرجع أفوت مرة ثانية على الموقع أو أعمل ريفريش برجع للوضع الطبيعي. صح ولا لا؟ عشان أخليه يحفظ الأشياء اللي المستخدم كتبها هذا الشغل شغل جي إس. لما ناخذ موضوع اللوكال ستورج. تمام؟ بس نحن نكون فاهمين بالاول الفكرة أنه أنا كيف أخلي المستخدم بس علي أضيف اتربيوت اسمه كونتنت إديتبول على العنصر اللي أنا بدي إياه. كيف أخليه يحفظ هذا الكلام لما يطلع من الموقع ويرجع يفوت عليه مرة ثانية يلاقي نفس الكلام اللي هو كتبه. هذا شغل جي إس. تمام؟ >> إيه؟ >> كثير أحيانا بحتاج أني أنا أخلي المستخدم يعدل القيمة الموجودة هنا أو يعدل النص اللي موجود هنا. يعني كمثال مثلا رفعت السي بي تبعتي وبيكون مكان الاسم الافتراضي اسمه علي مثلا. بدي إياه بعد ما المستخدم يرفع السي بي يغير لنفس الاسم تبعه. لأنه مثلا السي بي هذه بدي أخليها أوريدي مرفوعة على موقع. يعني كمثال مثلا أنا عاملة موقع للكورسات وفي أسماء المدربين. عاملة الشكل الافتراضي تبعهم أنه صورة المد المدرب هان اسم المدرب. حط أسماء من عندي وهمية. بدي أخلي المستخدم هو أنا كمدرب أنا أرفع الاسم تبعي والصورة تبعتي وكل هي الأمور. فبدي أعملها بالطريقة العادية أنه أرفق ملف هان مثلا انبوت موجود بداخله اسمك أبصر إيش حطه اسم افتراضي. وبدي إياه لما يعمل كليك عليه بهذا الشيء يغير الاسم اللي بده إياه. فبخليه يغير وببكون عاملة في الجي إس أنه لما يطلع من الموقع يرجع عليه مرة ثانية خلص يحفظ البيانات اللي هي أوريدي موجودة. تمام؟ هي بالنسبة للكونتنت إديتبل. طبعا هذا الشيء خلاني أستغني عن يعني كود جي إس ممكن أقعد يومين فيه. صح ولا لا؟ أنا أخلي المستخدم لما يضغط شوفوا لما يضغط على العنصر يكتب الكلمات. شوف لما يضغط أول شيء هذه عندنا إيفن في الجي اسمه أون كليك. لما يكتب اسمها أون كي أب. تمام؟ بعدين ياخذ الفالو القيمة اللي حطها المستخدم ويخزنها في اللوكال سترج. هذا كود كبير في الجي إس. أنا بعمل عمله. لكن هان الاتربيوت هذه خلا لي أستغني أنه هو يحدد وأنه هو يكتب. بس علي أعمل آخر خطوة أنه أنا أحفظه في اللوكال سريج. تمام؟ عشان هيك أصلا هي ظهرت الاتش تي ام ال فايف فيها تاجات وفيها اتربيوت جديدة خلتني أستغني أو تسهل علي الكود وتختصر شغل أنا كنت أعمله في أكثر من شغلة. واضحة الأمور؟ تمام. ممتاز. عنّا اتربيوت ثاني اسمه إنرت. شوفوا وين بنستخدمه. لو أنا عملت مثلا اتش فريم حطيت بداخلها كلمة ويلكم ورد. تعال نعمل ريفريش. هي ويلكم ورد. شوفوا هذه الحركة. التحديد. حددتها صح؟ لما أضيف الاتربيوت اللي اسمه إنرت على العنصر. تمام؟ وأجي أعمل ريفريش مرة ثانية وأجي أحدد. لو أضلني لبكرة مش حيحدد. وين هذه بنستخدمها؟ ممتاز كثير بتفوتوا على موديل أو على موقع بخليكم تمنعوا النسخ. صح ولا لا؟ وهذا أكيد بتعانوا فيه بال بالجامعة. بخليكم تمنعوا إيش الحركة بتكون؟ برضه شغل جي إس. ديروا بالكم. هذا الشيء بنعمل. ولكن إجى الاتربيوت اللي اسمه إنرت. بضيفه في المحتوى اللي أنا بدي إياه أمنع الشخص هذا أنه يعمل نسخ له. بس علي أضيف اتربيوت اسمه. فهنا لو أضلني لبكرة أعمل نسخ مش حينسخ معي. تمام؟ إذا الاتربيوت اللي اسمه إنرت بيمنع المستخدم من أنه يعمل نسخ للنص الموجود في الموقع. تمام؟ ممتاز. هي بالنسبة للإنرت والكونتنت اللي تبل.

طيب ظل علينا تو اتربيوت مهمين جدا. اتربيوت اس أو عفوا تاجين مش اتربيوت. تاج اسمه ميتر وتاج اسمه اسمه بروجريس. حدا بيعرف شو هذول العناصر؟ ميتر وبروجريس؟ تعال نعمل ريفريش. شوفوا هي الأول ميتر وهي الثاني بروجرس. هذا كثير بنشوفه في المواقع تبعتنا. بدي أعمل تحميل لشيء معين. بدي أعرض شي الحد الأدنى والحد الأعلى. كمثال مثلا موجود هان. اطلعوا شوية. هلا هي السي في الصراحة قديمة. يمكن لها أربع خمس سنين أنا عاملاها. كان فيها هذا الشكل. تمام؟ هي الحركة وهذا. هذا شغل أنيميشن حناخذه. بس أنا بيهمني هالت. هذا اللي هو شايفين كيف عارض الاتش تي ام ال أنه قديش خبرتك في الاتش تي ام ال. قديش خبرتك في السي اس اس. تمام؟ بهذا الشكل. هلا اطلعوا على هذا الشكل. لو أنا جيت ورجيتكم الكود. خليني أعمله إياه بالفحص. هذا أنا كيف عملت الكود تبعه؟ اطلعوا. عبارة عن ديف. شايفين؟ ديف موجود بداخلها ديف. الدف اللي بره عملتها باك جراوند كر لون رمادي. ماخذة هاي وف معينين وخاصية بوردر ريدس الانحناء هذا. بعدين عملت الدف اللي جوا. شايفين هيها؟ هي الكود مكتوب تحت. هذه الدف اللي جوا ماخذة هاي وي ولون ثاني والأمور هذه. ورحت عملت لها تنسيقات في السي اس اس والأمور هذه. ظهر عنّا تاج جديد اسمه الميتر والبروجريس. خلاني أستغني أن أنا أروح أعمل هذا الشكل من الصفر. أعمله لحالي. تمام؟ فبحكي لي تاج الميتر وتاج البروجريس. الفرق ما بينهم أنه الميتر بيكون ثابت. يعني لما أنا أعطيه قيمة معينة مثلا هون أحكي له 40. بروح بيفرض أنه كل الحجم عندي 100 وال 40 هذه من هي ريفريش. تمام؟ هلقيت في عندي اتربيوت ثانية بيتحكم فيهم الميتر والبروجس. هون البروجريس بس الفرق بينهم أنه الميتر ثابت. البروجريس متحرك. لكن هم نفس الشكل. طبعا بقدر أتحكم في الهاي والويث. هذه أمور سي اس اس بتحكم فيها. البروجريس أنا هان ماطيتهوش أي قيمة عشان هيك بتلاقوه هان متحرك معي على طول الهذا. بحكي لي في قيم بياخذها الميتال والبروجريس. حبعث لكم اياهم هون على الجروب إن شاء الله. خلينا بس نقراهم مع بعض. حكي لي أول شيء أنه عنصر الميتر بستخدمه عشان أمثل قيمة ضمن نطاق معين. كيف يعني؟ يعني بدي أقيس شيء معين له بس حد أدنى وحد أعلى. نقطة بداية ونقطة نهاية. فبهي الحالة بستخدم المثل لأنه أنتم تو شفتوا أنه هو ثابت. ف وما هو الاتربيوت اللي فالو كافتراضي معه اتربيوت اسمها فالو. فهو حاط مثلا 6. هذه معناتها أنه 6 أو 60 من اللي هو من الحجم الكلي تبعي. الميث بحكي لي أهم الخصائص اللي أنا بقدر أضيفها على الميث. فالو هي اللي نحن توي شفناها. باي ديفولت هو معطيني إياها الفالو لأنه عشان يبين لي إيش القيمة الحالية تبعت العنصر. بقدر أنا من عندي أضيف قيم ثانية أو اتربيوت ثانية اسمها من. اللي هي أقل قيمة يعني الحد الأدنى يعني نقطة البداية. هذه من ماكس. أعلى قيمة يعني أنا مثلا بدي يعرض الميتر من خمسة لع إيش؟ بروح بعمل بالمن بحط خمسة وبالماكس بحط 10. تمام؟ نقطة نقطة البداية ونقطة النهاية. أي اللي هو منه ماكس. لو وهاي لو أنا بدي أحدد البداية وأحدد النهاية. صراحة بنستخدمهم الأغلب خلص على المن وعلى الماكس. لو أنا بدي قيمة مثالية يعني قيمة وسط ما بينهم بحط اتربيوت اسمه أوبتيمم. أوبتيمم. تمام؟ بحكي لي بايش بنستخدمه؟ لو أنا عندي شكل هو بشكل عام بستخدمها المتر لما في عندي شيء بدي أعرضه يقيس شيء معين. زي مثلا بيحكي لي نسبة البطارية. أنه يكون الشكل معروض مثلا جزء منه في البطارية. مستوى الصوت مثلا. بدي أعرض جزء من مستوى الصوت. أي شيء بدي أعرض جزء منه مش زي البروجرس متحرك على كله بستخدم المثال. البروجريس معه اتربيوت اللي هي الفالو. أحدد القيمة. ماكس. لو أنا بدي أحدد القيمة النهائية تبعت البروجرس يعني أعلى حد لها. بستخدم البروجرس لعرض شيء مش لاني أقيس جزء من هذا العنصر زي المتر. تمام؟ معه اتربيوت اسمه فو. واتربيوت اسمه ماتش. فاهم فرق ما بينهم أنه الميتر بقص لقيمة معينة. البروجريس بيعرض تقدم عملية. زي ما هو كاتب بمعنى أنه مستوى التحرك تبع هذا العنصر. تمام؟ فأنتم بتصيروا حسب القيم اللي تحطوها للعنصر يظهر معي. لأنه لو أجيت قلت له بروجريس فالو ممكن أستخدم معه الميل والماكس حسب إيش اللي أنتم بدكم إياه. تمام؟ فاحنا صراحة بنستخدمهم لعرض القيم زي ما أنتم شايفين. بس بستخدم الميتول بروبريسي يعرض لي هذا الشكل. في السي اس اس بصير أتحكم فيه زي ما أنا بدي. سواء الهاي الوي. أتحكم في شكله نفسه. ممكن أغير البوردرس تبعه. بصير في السي اس اس أصل لعنصر البريكس أو عنصر ميتر زيه زي البي. زيه زي الاتش 1. زيه زي الاتش 3. وأي خاصية حناخذها في السي اس اس بس أطبقها عليهم. تمام؟ يعني أنا ممكن ما أتحكم في الماكس والميل والفالو تبعونها. هذول العناصر. واضحة بالنسبة لهم؟ تمام. نحن تو حكينا على الاتربيوت اللي اسمه التايتل. وين حكينا عنه؟ في الصورة. صح ولا لا؟ قلنا لما أحط مؤشر على الصورة يظهر لي هذا العنصر. كمان بنستخدمه مع تاج الاي. الروابط. لو أنا عندي أي. بداخل الاتشرف عادي بدي أحط أي شيء. www.facebook.com. قلنا الرابط عشان يظهر لازم أحط هون الاسم اللي يظهر عليه. ف لما أعمل ريفريش حيظهر عندي لينك الفيسبوك بهذا الشكل. كثير بنفوت على موقع بعمل زي هيك. بأشر على اللينك. بيكون كاتب لي مثلا كليك هير أو موف أون. يعني انتقل إلى إكس ويب سايت. شيء زي هيك. فهذا الكلام بيكون عبارة عن اتربيوت اسمه تايتل. بضيفه هان على التاج نفسه. هي تايتل. بدي أحط فيه الشيء اللي أنا بدي إياه. مثلا كليك هير. هلقيت لما أعمل ريفريش بمجرد ما أعمل تأشير على العنصر. شايفين؟ بيظهر معي في البوكس الأبيض. فهذا عبارة عن التاكل. تمام؟ ممتاز. آخر شيء ننهي فيها لقاء اليوم. في عنّا حاجة اسمها إيمت أبريفييشن. شو فكرتها؟ اختصارات موجودة في كود الاتش تي ام ال بتسهل علي وقت. يمكن لاحظت وأنا بكتب كنت أعملها. مثلا بدي أعمل ثلاث عناصر. بحكي له بي ضرب 3. فبيعطيني بدل ما أكتب كل واحد لحال بختصرها. تمام؟ فإيش فكرتها؟ أنه بتسهل علي طريقة كتابتي للكود. هي الاختصارات صراحة الفرونت إند المحترفين هم اللي بيستخدموها. من باب يختصروا وقت. يختصروا كود. حنبدأ نحن في الأسهل. بعدين نبدأ في الأصل. تمام؟ أول حاجة احنا حنأخذ لقدام أنه في عنّا كلاس أساسي اسمه كلاس كونتينر. وحنشوف إيش وظيفته. عشان هيك هو كاتب كونتينر. الفكرة اللي بدنا نوصلها. حكي لي إذا بدك تعملي عنصر وهذا العنصر تعطيه اسم كلاس. احنا قبل لو أنا عندي مثلا عنصر ديف. وبدي أعطيه اسم كلاس كنت أعمل زي هيك. ديف كلاس اسمي اسم الكلاس. بعدين أكتب المحتوى اللي بدي إياه بداخله. صح ولا لا؟ طريقة مملة صراحة وتقليدية. بحكي لي بتقدري مباشرة إذا أنت بدك عنصر وتعطيه اسم كلاس. بتكتبي اسم العنصر مثلا دي. دوت بتعطيه اسم الكلاس مباشرة وبتعملي إنتر. لحاله بينشئ لك العنصر وبنشئ لك الكلاس اللي أنت بدك إياه. تمام؟ يعني مثلا قلت بدي أعمل عنصر اتش 3 موجود بداخله كلاس اسمه هيدين 3. فباجي بقول له اتش 3 دوت هيدين 3 إنتر. فهي لحاله أنشأ لي التاج وأنشأ لي الكلاس اللي أنت بدك إياه. بدل ما أروح أنشئ التاج بعدين أحط بدخله اتربيوت اسم بلس بعدين أعطيه الاسم. طريقة مملة مضبوط. بحكي لي بتقدري تستخدمي هذا الكلام مع اسم العنصر. يعني أنا اتش 3 بي مش عارفة إيش بكتب اسم العنصر. دوت اسم الكلاس وبحط الاسم اللي أنا بدي إياه. هذه الطريقة بتزبط معي على كل العناصر. ولكن نحن تو قلنا عنصر الديف هو العنصر الكينج. صح ولا لا؟ الأساسي. أصلا ما فيش موقع ويب يعني كل تقسيمتي وكل ترتيب العناصر حتكون عبارة عن ديف. فبحكي لي الديف عشانه هو الكينج أوف إلمنت. مش ضروري تغلب حالك وتعملي ديف دوت مثلا إنتر ويعمل. لا تقدري مباشرة تحكي له دوت اسم الكلاس إنتر. لحاله حيفهم أنه هذا عبارة عن عنصر. فهذا الشيء برضه اختصر علي كود وسهل علي كود. تمام؟ إذا لو أنا عندي عنصر ديف بدي أعطيه مثلا كلاس اسمه مين 1. فبقول له دوت مين 1. لحاله بيفهم أنه أنشأ عنصر ديف معه كلاس اسمه مين 1. تمام؟ بهي الطريقة. واضحة. لو أنا بدي إياه عبارة عن أي دي. بكي لي استخدمي الهاش. يعني عندي عنصر ديف وبدي أعطيه أي دي اسمه مثلا بي. فبقول له هاش بي. بعمل إنتر. لحاله عمل لي اسم العنصر اللي هو دي. اسم الاتربيوت أي دي قيمته الص. نفس الحاجة بحكي لي أنت يعني مثلا اتش 2 هاش هيد اثنين. إنتر. هي زي ما أنتم شايفين. اتش 2 أي دي كذا. بحكي لي عنصر الدب نفس الشيء. بتقدري تعملي له هاش بي. مباشرة لحاله بيفهم أنه هذا عبارة عن عنصر ديف. يعني الديف تحديدا بقدر أنشئ فيها اسم الاي دي واسم الكلاس مباشرة بدون ما أكتب اسم التاج. باقي العناصر بكتب اسم التاج. إذا أنا بدي كلاس دوت اسم الكلاس. إذا أنا بدي أي دي هاش اسم الاي دي. تمام؟ هذه بالنسبة لأول طريقة. فهون ليش حاطط هان الاسم كونتينر؟ لأنه العنصر أو الكلاس الأساس اللي حنأخذ لقدام. عنّا كلاس اسمه كونتينر. فهان إيش بحكي لي سكيب ذا ديفت يو. يعني مش ضروري تحددي نوع العنصر للكلاس وللاي دي. مباشرة دوت اسم الكلاس. هاش اسم الاي. نيجي للي بعده. عندي أكثر من عنصر بدي أنشئهم مرة واحدة. اسم العنصر ضرب الرقم. كم مرة بدي إياه؟ فبحط الرقم هذا. يعني مثلا بدي أنشئ أربع أنواع من البي. بطريقة التقليدية كنت أعمل بي وأحط فيها الجملة زي هيك. بعدين أروح أعمل أعملها. أعمل البيان. الصراحة طريقة مملة. لا أنا بدي بخطوة واحدة. بدي بي أربع مرات. إيش بقول له؟ بي ضرب أربعة. إنتر. فهي أربعة بي. زي ما أنتم شايفين. تمام؟ اسم العنصر ضرب قديش بدي إياه يتكرر. هذا لما يكون من نفس العنصر. نفس العن يعني خمسة من البي. خمسة من الاتش 2. من نفس العنصر. اسم العنصر ضرب قديش بدي إياه يتكرر. تمام؟ طبعا حبعث لكم كمان هدول. نيجي هان. مستين المنتس. وهذه كثير بنستخدمها. عناصر موجودة في عناصر ثانية. كيف يعني؟ مثلا تو احنا قلنا أنه أنا عندي السكشن موجودة بداخل المين. صح ولا لا؟ فبدل ما أروح أكتب المين في السطر وأكتب السكشن في السطر. بقدر بطريقة واحدة أقول له مين. إشارة الأكبر. سكشن. هذ إيش معناتها؟ أنشئ لي سكشن بداخل المين. فهي هي التاج الأساسي مين. حط لي بداخله سكشن. مضبوط؟ لو أنا مثلا بدي أكبريها شوية أو خليها تحتها. مش مشكلة. بدي أحكي له الف موجودة بداخل الفوتر. هي فوتر. إشارة الأكبر. ديف. إنتر. عمل لي فوتر موجودة بداخلها ديف. تمام؟ إيش في عندي عناصر متداخلة؟ بحط إشارة الأكبر ما بينهم. مثلا بدي أحكي له في عندي مين. بداخلها سكشن. بداخل السكشن في عندي ديب. بهذا الشكل. شايفين؟ هي التاج الأساسي مين. بعدين عمل لي السكشن. حط لي بداخله الدب. لو بدي مثلا خمسة ديب داخل السكشن. بقول له مين أكبر من سكشن أكبر ديف ضرب خمسة. صح ولا لا؟ بنفس الطريقة. فه إيش بقول لي عندك سبان موجودة بداخل البي. فمباشرة بي أكبر من سبان. أعطاني هذا الشكل. نيجي للي بعده. سبلينز. إيش يعني سبلين؟ يعني مجموعة من العناصر المختلفة. بدي أحط حطهم تحت بعض. تو قلنا اللي زي بعض ضرب. صح ولا لا؟ اللي مش زي بعض يعني ديف تحتيها بي. تحتيها إيج. بس علي أحط إشارة الزائد ما بينهم. بروح بينشيل لي اياهم تحت بعض. يعني كمثال عندي بداخل السكشن ديف. وعندي كمان بي. بقول له زائد بي. وعندي كمان إيج. زائد إيج. وعندي كمان أوديو. مثلا. وهي إنتر. بروح بحط لي اياهم تحت. هي ديف. هي بي. هي إيج. هي أوديو. اسم العنصر زائد بدل ما أروح إشارة الأكبر. اسم التاج. إشارة. خلصت التاج. أنزل. مملة بصراحة الطريقة. وبتاخذ منكم وقت كبير. فضروري من لقاء اليوم لآخر الكورس ولطول العمر نتعود على هذه الطريقة. قمة أبريفيشن. تمام؟ طريقة مختصرة وأسهل وأسرع. حتى صراحة لما حدا يشوفكم زي هيك بتكتبوا سريع حيعرف أنه أنتم ممارسين اللغة. مش مبتدئين في المجال. ممتاز. نيجي للي بعده. هذه شوي بدها تركيز. جروبين. إيش يعني؟ يعني مثلا الهيدر موجود بداخله جزئين. ديف على اليمين ودف على اليسار. ودف اليمين موجود فيه عناصر. ودف اليسار موجود في عناصر. فبروح أعمل إشارة الأقواس ما بينهم. تمام؟ هي هون إيش عامل؟ العنصر الأساسي عندي هيدر وعنصر ثاني مين. نحن عارفين هذا الكلام. أنه الهيدر شيء والمين شيء. صح ولا لا؟ بداخل الهيدر في عندي يو ال. بداخلها اثنتين ال اي. فكيف عمل؟ فاللي كنت بحكي فيه أنه في عندي عنصرين. عنصر هيدر وعنصر مين. بداخل الهيدر في عندي يو ال فيها ال اي فيها أي فيها مش عارفة إيش. فبس علي أحط إشارة الأقواس وتو نحن قلنا عنصر وعنصر ثاني. فحطيت زائد عنصر الميل. فبكتب هذا الكود حيعطيني هذا الشكل. أنه الهيدر لحال والمين لحال. في الهيدر في جزئية حطيتها بداخل الأقواس تبعته. في المين في جزئية ثانية. عادي برضه بحط زائد وبحط الأقواس هذه وبحطها. تمام؟ نيجي هذه بنحكي عنها جروبين. أنه جمعت هذه اللي هي تو قلناها. عنصر اسم الكلاس. دوت اسم الكلاس. هاش اسم العنصر اللي أنا بدي إياه. طيب عندي عنصر معه اسم كلاس ومعه كونتنت محتوى. فكيف بنكتبها؟ بنفتح البراكتس وبنحط بداخلها المحتوى. كيف يعني؟ خلينا نبدأ بالطريقة البسيطة. أول شيء لو أنا عندي بي بدي أحط بداخلها جملة ويلكم. وهي إنتر. شفتوا إيش صار؟ فتحت البراكتس هذه. هي اتش 3. البراكتس هذه. هلو. إنتر. بدل ما أروح أكتب التاج لحال والنص الموجود بداخله لحال. لو أنا مثلا بدي أقول له اتش 3 دوت اسم الكلاس. هيدين 3. تمام؟ موجود بداخلها محتوى اسمه اسمه ويلكم. فري. هي إنتر. شفتوا كيف بخطوة واحدة بسيطة عملت اسم الكلاس. أول شيء اسم العنصر. اسم الكلاس. حطيت النص الموجود بداخل هذا العنصر. في حد شايف فيها صعوبة؟ الأمور تمام. ممتاز. نيجي للي بعده. هذه شوي بدها تركيز. نمبرين. إيش يعني؟ نحن تو قلنا أكثر من عنصر من نفس النوع ضرب. الاسم. صح ولا لا؟ أنا عندي مجموعة من الليست. القائمة. يعني أنا كنت في الوضع الطبيعي إيش أعمل زي هيك. يو ال. بعدين أجي ال اي الأولى. وأطلع وأحط مثلا هان الاسم مثلا اسمها آيتم 1 أو آيتم آيتم 1. بعدين أجي هون أعمل الـ آي آيتم اثنين. شايفين قديش بتاخذ مني وقت. بحكي لي لو عندك قائمة بدك تعملي لها ترتيب الكود تبعها. أول شيء احنا عارفين يو ال. آي موجودة بداخل اليو ال. يبقى إشارة الأكبر. تمام؟ بعدين بقول له ال اي. إشارة الدولار ساين. ضرب ثلاثة. إيش يعني؟ أنا بدي إياها ثلاث مرات. فبقول له إشارة الدولار ساين ضرب ثلاثة. اعمل لي إياها ثلاث مرات. لو أنا الـ آي بدي أعطيها اسم كلاس. إيش بقول له؟ دوت اسم الكلاس. عشان يعطيها إياه. فشوفوا إيش حنعمل. هي الأوساسيه موجود بداخلها ثلاثة ال اي. اللي هي هذه. ال اي ضرب 3. هي لها ثلاثة ال اي. عشان أعمل لهم ترقيم واحد اثنين ثلاثة بستخدم إشارة الدولار ساين. هل لو أنا كنت مباشرة عاملة ال اي دولار ساين ضرب ثلاثة مش حيعطيني شيء. لأنه الدولار ساين هذه بدها تعمل ترقيم للعنصر نفسه. عشان هيك ضفت عليه اسم كلاس آيتم. ولما حكيت له دولار ساين. فبيعتبر آيتم 1. آيتم اثنين. آيتم ثلاث. تمام؟ واضحة؟ ركزوا فيها شوية. عشان نعمل سكيب عليها. يو ال. موجود بداخلها ال اي. إشارة الأكبر. خلصنا منها. أنا بدي ثلاثة ال اي. فكتبت ال اي ضرب 3. عملت ثلاثة ال اي. بدي الـ آي الأولى الكلاس تبعها آيتم 1. والـ آي الثانية آيتم اثنين. آيتم ثلاثة وهكذا. فرحت أعطيت اسم الكلاس اللي أنا بدي إياه آيتم. بعدين إشارة الدولار ساين. فإشارة الدولار ساين هي اللي بتعمل لي الترقيم واحد اثنين. نستخدمها مع القوائم. تمام؟ مين عنده سؤال؟

طيب أنا هيك خلصت شرح. أخذنا اليوم موضوع التيبل. أخذنا الاتربيوت الجديدة الموجودة في الاتش تي ام ال. وأخذنا كيف إدراج الفيديو والصوت والملفات. عنصر الدب وعنصر الاسبان والامت ابليفيشن. أه بس ظل شغلة بسيطة. ثواني. لو أنا عندي عنصر مثلا اتش 3 بهذا الشكل وحاطه بداخله كلمة ويلكم. تمام؟ وبدي أعمل تكرار لنفس هذا العنصر. شوفوا إيش بعمل. الت السهم. هم اللي لتحت مع بعض. شايفين؟ بكرر لي نفس العنصر بنفس المحتوى الموجود. مثلا عندي بي معها شوف. هي كيف بدي أكتبها؟ بي معها لورم خمسة. تمام؟ زي هيك. وبدي هذه البي أكررها. شفت الت السهم اللي لتحت. مع بعض. بيعمل تكرار لنفس العنصر بنفس المحتوى. يعني مثلا تو اطلعنا على موقع كان موجود فيه ثلاثة ديف. ثلاثة كارد. أنا بدي أعمل ثلاثة ديف بنفس المحتوى. جيت قلت ديف موجود بداخلها مثلا إيج بهذا الشكل. وبدي أكرر هذا الكود. شفت الت السهم اللي تحت. بدل ما أروح أكمل كل واحدة آخذها وكوبي بيست وأكررها مثلا ثلاث مرات. لا. شفت الت السهم اللي تحت. مع بعض. باجي هون على نهاية التاج ها وبقول له شفت الت السهم اللي تحت. تمام؟ حليت معكم وقت 10 دقائق. مطلوب منكم تدرجوا لي جدول مكون من الصف العنوان الأساسي مع صفوف مع الفوتر. وتعملوا لي دمج للصفوف ودمج للأعمدة.