امانة موسة بن جغفر / قل اعوذو برب الفرق

NOTE: IF YOU DONT UNDRESTAND SOMETHING JUST COMPLETE SCROLLIG IN HERE UNTILL YOU'LL GET IT AT SOME POINT CAUSE I REPEAT EVERYTING IN HERE AT LEAST SIX OR SEVEN TIMES

نبدي باول شي وهو هيكل الموقع يعني حتى يتعرف المتصفح على لغة الموقع لازم يكون هذا الهيكل موجود الي هوه هذا الشي الثابت:ء

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ابو طقعة</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

</body>
</html>

هسه نفصخهن وحدة وحدة

<html lang="ar" dir="rtl">

هذا تمذرط يكله للموقع تره اللغة عربي لو امكليسي.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

هذه يكله للموقع اذا شاشة الزائرين صغيرة مثل مؤخرة نمجة سوي زوم اوت تلقائيا علشان يبين المحتوى طبعا مراح تستعملين ذني اتي بس عشان تفهميهن اوكيه.

<title>ابو طقعة</title>

هنانه تخلين عنوان الصفحة الي تطلع ليفوك وين مكتوب تعليم طيبة الزقة هوه هنانه.

</html>

هذا المحطوط عليه/ ينكتب باخير الصفحة يعني لازم جواه كلشي مامكتوب لان جاي يكله للمتصفح تره خلصت ماعندي شي بعد

هسه نكمل بالمهم بس قبل لانبدي ادري بيش مليتي وهلصت البطارية ف هاج شوفيلج شكم مكطع تكتوك وتعالي

اعتكد راح تنسين وماتجين الا بعد اسبوع هههه اصلاان عادي المهم

بهاي اللغة كل امر نكتبه لازم اكو فواصل وشارحات نبدي بأول وحدة وهي <> ؤ

راح اكتب بالانكليطي علمود مايزرب اتجاه الكلام هوشش

<> is used when we want the web to recognize something like <body> means every code we type inside of here is for the body and body means the main page like everything shows up in the web is typed in here if you don't get it just kill yourself or watch this at 8:07 or just check on the newest comments on the video and you'll find me there so...

also a very important thingy... when we typed <body> or any essential command like <style> or <head> and we start coding inside of it if you finished you have to close it by doing this shit </body>, </style> and </head> see </> means the end of that thing okayy
let me show you what i mean:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ابو طقعة</title>
    <link rel="stylesheet" href="style.css">
</head>
<body> <img src="pics/ksmlhala.png" class="iraq-flag">
<a href="www.google.com"> <img src="pics/nets.png"> </a>

</body>
</html>

as you see i added <img src="pics/ksmlhala.png" class="iraq-flag"> to the <body> section which it means i added a photo to the website by putting the url of that photo inside this code: <img src="here is the url of the photo and that's it">.... and i added something else which is a picture or gif but when you click on it it goes to any link you want it just like i did here nothing complex at all <a href="the link of the web that when someone click on that gif or picture goes to "> <img src="and here is the link of that photo orr gif that shows on your web"> hope you got it

هسه ميحتاج تجربين كلشي لان بعدنا بالاساسيات ف اخذيلش فرة بالتكتك مرة اللوخ وتعالي من وكت لان عدنا كومة تمذرط اوكيه يعنري.
هاي دكمة للتكتك هاف تردين وهاي دكمة لسينمانا عمين عالحاظر

هسه نبدي بالنصوص، واول وحدة وابسطهن هي الفقرة:

<p>Hello, this is a normal text</p>

حرف p اختصار لكلمة Paragraph يعني فقرة. اي كلام عادي تبغيت تكتبينه بالصفحة تحطينه بداخله وكل فقرة تنزل بسطر لوحدها تلقائي.

ملاحطة: اذا كتبتي الكلام بالخانة ونزلتي سطر يعني دستي انتر Enter، المتصفح يتجاهله ويكمل على نفس السطر. لازم تستعملين غير كود عشان ينزل سطر اوكيه، وهذا اللي راح نشوفه هسه.

الكود الثاني هو العناوين:

<h1>Biggest title</h1>
<h2>Smaller title</h2>
<h3>Smaller title</h3>
<h4>Smaller title</h4>
<h5>Smaller title</h5>
<h6>Tiny title</h6>

وهذا شكلهن بالصفحة:

Biggest title

Smaller title

Tiny title

حرف h اختصار لكلمة Heading يعني عنوان، والرقم من 1 لـ 6 يحدد حجمه. رقم 1 هوه الاكبر ورقم 6 هوه الاصغر. بالعاده نستعمل h1 مرة وحدة بس لعنوان الصفحة الرئيسي، والباقي للعناوين الفرعية.

وهسه شغلتين صغار نحتاشهن الي هنه شلةون انزل سطر بالكلام اذا الانتر مايسوي هاي الشخلة؟ هااا هنا يجي دور هذا الكورد:

<p>First line<br>Second line</p>

First line
Second line

الكود br ينزّل الكلام لسطر جديد داخل نفس الفقرة.

<hr>

هذا يرسم خط افقي يفصل بين الاقسام.

واجب:

سوي صفحة بيها عنوان رئيسي، وعنوانين فرعيات، وجوة كل عنوان فقرة. وبين القسمين حطي خط فاصل هن اشوف وش تعلمتي .

هسه تقولين مافيني حيل اروح لموقعي واضل رايحة راجعة عشان انسخ الاكواد واتعلم هع سويتلش محرر اكواد هنانه تقدرين تجربين تكتبين فيه اي شي ويشوفج الزراب القاعد تسوينه

نلاحظة: من تسوين الواشب ارسليلي النتيشة عالنستا بالله عليكي لان الكود التكتبينه هنانه ملاح يثبت مجرد كتابة فورية

Write your code here:

Result:

درس: الصور والـ GIFs

هسه نتعلم شاون نضيف صورة او GIF للموقع، وكلهن ينضفن بنفس الكود، يعني GIF والصورة العادية ما بينهن فرق بالكتابة.

<img src="https://tyba.neocities.org/pics/sandwich3.gif">

وهذا شكله بالصفحة:

img اختصار لكلمة Image يعني صورة. و src اختصار لكلمة Source يعني المصدر، يعني من وين المتصفح يجيب الصورة. ما اكو شي ثاني ضروري، هذا الكوده ها اها واصلا حجيت عنه فوك بس ينكن مافعمتي.

1. منين اجيب الرابط؟

اكو طريقتين لكتابة مكان الصورة:

الطريقة الاولى: رابط كامل من الانترنت. تروحين لأي صورة او GIF، تسوين كليك يمنة عليها، وتختارين Copy image address، وتلصقينه داخل src.

<img src="https://tyba.neocities.org/pics/sandwich4.gif">

الطريقة الثانية: صورة من ملفاتج اتي. ترفعيها على موقعج داخل ملف اسمه pics او اي اسم اتس تردينه، وبعدين تكتبين مسارها فقط:

<img src="pics/sandwich4.gif">

الفرق: الاولى تعتمد على موقع غيرج، واذا هو حذف الصورة تختفي عندج. الثانية الصورة عندج انتي فما تختفي. عدا هذا، لازم اسم الملف يكون مطابق بالحرف، يعني sandwich4.gif مو Sandwich4.GIF.

2. تغيير الحجم

<img src="https://tyba.neocities.org/pics/sandwich3.gif" width="100">

width يعني العرض، وينحسب بالبكسل. اذا حطيتي عرض بس، الارتفاع يتغير وحده ويحافظ على شكل الصورة. وتكدرين تغيرين الارتفاع بـ height، بس انتبهي هوووب اذا حطيتي الاثنين بقيم مو متناسبة الصورة تنمعط معط ف الاحسن تغيرين اتجاه واحد عرض او طول او تكعد تزب بالقياسات لحد ماتضبط هم كليشش عادي.

4. صورة تفتح رابط

<a href="https://www.tiktok.com/">
    <img src="https://tyba.neocities.org/pics/sandwich3.gif" width="100">
</a>

نفس اللي شفتي قبل. حطي الصورة داخل كود الرابط، واذا دستي عليها تفتح الموقع. انتبهي لازم تسدين الرابط بـ </a> مثل ما علمتج قبل.

5. الصورة ما طلعت، شنو اسوي؟

اذا بقى مربع فارغ او ايقونة مكسورة، افحصي هذي الاشياء بالترتيب:

١. كتبتي src صح؟ (مو scr او sec)

٢. هل الرابط ينفتح وحده اذا نسخته وفتحته بصفحة جديدة وحدها؟

٣. هل اسم الملف مطابق بالحرف، حتى الحروف الكبيرة والصغيرة؟

٤. كتبتي الامتداد؟ (.gif او .png او .jpg)؟

٥. اذا الصورة من ملفاتج، هل رفعتيها فعلاً على الموقع يو لاع، وبالملف الصح يو لاع؟

الواجب

افتحي المحرر الفوك وسوي ذني:

١. عنوان رئيسي بـ h1 وجواه فقرة تعرفين بنفسج.

٢. حطي GIF بحجم 100، وبعده صورة ثانية بحجم 200.

٣. سوي وحدة منهن تفتح رابط موقع تحبينه(بس مو تحطين ذاك الموقع الله يهديك هعغغ).

هسه اتحداش: انسخي الكود الجاي بالمحرر وبي غلطتين، الكيهن وصلحيهن:

<img scr="https://tyba.neocities.org/pics/sandwich3.gif" width="100">
<img src="https://tyba.neocities.org/pics/Sandwich4.GIF" width="100">

درس: الـ div

هسه نتعلم كود جديد، وهو من اهم الاكواد بالموقع كله. اسمه div، وهو عبارة عن صندوك نحط بيه اشياء حتى نرتبهن ونجمعهن سوه.

فائدة الصناديك الي نسويها بالموقع هي انها معزولة عن اكواد الصفحة العامة مثلا الصفحة العامة بيها خلفية وشكل خط معين ورسمات وصور وكيذا الديف او الصندوك اي كود ينكتب بداخله راح يتطبق بس عليه مثلا اريد صندوك بحدود عشرين بكسل طول وتسعين بكسل عرض واريد اخلي بداخل هذا الديف او الصندوك خلفية منفردة عن خلفية الصفحة العامة شلون فوك مسوي ويه اللفات اليفترن وبنفس الوقت مسوي تلاث صناديك عاليمنة واحد مسوي للدردشة وواحد للروابط وهيشي المهم الفكرة اتمنى الشرخ مفعوم

<div>
    <p>I am inside a box</p>
</div>

بس انتبهي، الصندوق لحاله ما يبين بالصفحة، لانه شفاف. شوفي شنو يصير اذا نكتبه هيج بدون شي ثاني، تحس ما اكو بيه شي ابداً. علمود نشوفه لازم نحط عليه شغلة صغيرة هسه:

<div style="border: 2px solid black; padding: 10px;">
    <p>I am inside a box</p>
</div>

وهذا شكله بالصفحة:

I am inside a box

شفتي؟ هسه صار صندوك بحدود. وكلمة div اختصار لكلمة Division يعني قسم او جزء، لان نقسم بيها الصفحة على اجزاء.

1. الصندوق ينسد

مثل ما علمتج، كل كود ينفتح لازم ينسد. الـ div ينفتح بـ <div> ينسد بـ </div>، وكل شي نريده يكون داخل الصندوق نحطه بيناتهم.

<div>
    ... everything here is inside the box ...
</div>

2. شنو نحط داخل الصندوك؟

اي شي. فقرة، عنوان، صورة، رابط، حتى صناديق ثانية.

لاحظي جوه بداخل الديف سويت بوردر يعني الصندوك بي حدود لانو هسه احنه ندري هذا الصندوك اي كود تكتب بداخله راح يتطبق بس على داخل الصندوك ايشي خارج عنه مراح يشتغل عليه وهذا الشي الحلو بال ديف وهمين تكدرين تسوين طول وعرض اكيد علمود تشوفين قياس الصندوك المثالي وبعدين مكانه المثالي علمود تبدين تخلين بداخله الاشياء

احلا شي بالديف مثلا مو خليتي بداخله كلام وسويتي القياسات مالته وبعدين خليتي صورة عاليمنه وفدشي عاليسرة وبعدين ماعجبش مكان الصندوك هنانه من تغيرين مكان الديف يعني الصندوك كلشي بداخله راح يجي وياه وبنفس القياسات والاماكن يوهيش الوضع

<div style="border: 2px solid black; padding: 10px;">
    <h3>My title</h3>
    <p>My text</p>
    <img src="https://tyba.neocities.org/pics/sandwich3.gif" width="80">
</div>

My title

My text

3. صندوق داخل صندوق

<div style="border: 2px solid black; padding: 10px;">
    <p>Big box</p>
    <div style="border: 2px solid black; padding: 10px;">
        <p>Small box inside</p>
    </div>
</div>

Big box

Small box inside

هذا بالضبط نفس تصميم هذا الموقع. الصندوق الجبير اللي بداخله كل الصفحة، وداخله صناديك اصغر (صندوك العنوان، والدردشة، والروابط وحتى خلفيات مختلفة تكدرين تخلين لكل صندوك) وكل واحد بي صناديق اصغر منه. انتبهي لكل div ينفتح، لازم يكون اله </div> يسده، واذا نسيتي وحدة الصفحة كلها تخرب.

4. ونكدر نلونه همين

<div style="background-color: black; color: #a4db51; padding: 10px;">
    <p>Green text on black</p>
</div>

Green text on black

الواجب

افتحي المحرر اللي فوك وسوي ذني:

١. صندوق بحدود، وداخله عنوان h2 وفقرة تعرفين بنفسج.

٢. صندوق ثاني جواه، بخلفية ملونة (غيري black لأي لون تحبينه).

٣. صندوق جبير داخله صندوكين صغار.

٤. حطي صورة او GIF داخل واحد من الصناديق.

تحدي: انسخي الكود الجاي ولزكيه بالمحرر الفوك بي غلطتين، الكيهم وصلحيهن:

<dvi style="border: 2px solid black; padding: 10px;">
    <p>Find my mistakes</p>
<div style="border: 2px solid black; padding: 10px;">
    <p>Small box</p>
</div>

درس: الـ CSS(بهذا الدريس اعتمدت عالاصطناعي للاسف بس انتهت طاكتي واله)

لحد هسه تعلمنا نسوي صفحة بيها عناوين وفقرات وصور وصناديك، بس اذا تلاحظين كلهن شكلهن مال دفتر مدرسة ابيض واسود. هنا يجي دور الـ CSS، وهو اللي يحول الموقع من "كلام مرمي" الى موقع حلو.

CSS اختصار لـ Cascading Style Sheets يعني "ورقة الستايلات". وببساطة: الـ HTML هوه العظام والهيكل، والـ CSS هوه اللبس والمكياج.

1. شوفي الفرق بعينج

هذا نفس الكود بالضبط، المرة الاولى HTML بس بدون ولا حرف CSS:

<h1>My Page</h1>
<p>Hello, I am learning CSS.</p>
<img src="https://tyba.neocities.org/pics/sandwich3.gif" width="80">
<h2>My favorite things</h2>
<p>Sandwiches and coding.</p>
<a href="#">My link</a>

وهذا شكله بالمتصفح من دون اي تصميم:

هسه نفس الصفحة بالضبط، بس ضفتلها هذا الكود من الاعلى، تره ما غيرت ولا حرف بالـ HTML:

<style>
    body {
        background-color: #8cc63f;
        font-family: monospace;
        text-align: center;
    }
    h1 {
        font-size: 40px;
    }
    h2 {
        color: white;
        background-color: black;
        padding: 8px;
    }
    p {
        font-size: 20px;
    }
    img {
        border: 3px solid black;
    }
    a {
        color: black;
        background-color: #a4db51;
        padding: 4px 10px;
        border: 2px solid black;
        text-decoration: none;
    }
</style>

<h1>My Page</h1>
<p>Hello, I am learning CSS.</p>
<img src="https://tyba.neocities.org/pics/sandwich3.gif" width="80">
<h2>My favorite things</h2>
<p>Sandwiches and coding.</p>
<a href="#">My link</a>

والنتيجة:

شفتي؟ نفس الكلام ونفس الصورة، بس صار كانه موقع ثاني. وهذا هو هدف الـ CSS: الـ HTML يقول شنو اكو بالصفحة، والـ CSS يقول شلون يبين.

وهذا الموقع الي انتي بيه هسه كله بنفس الطريقة. حتى اللون الاخضر بالخلفية هوه سطر واحد CSS:

body {
    background-color: #8cc63f;
}

وكل الصناديك الي بيها حدود سودة وظل هي نفس الكود مكرر، اسمها retro-box بالموقع وراح نتعلم شلون نسوي مثلهن بدرس الجاي.

2. لشنو الفايدة؟ (مو بس للحلاوة)

تخيلي عدج موقع بي 50 عنوان h2 وتريدين تخلين لونهن احمر. بدون CSS لازم تروحين لكل عنوان وتغيرينه واحد واحد. بالـ CSS تكتبين سطر واحد:

h2 {
    color: red;
}

وكل الخمسين عنوان يتغيرن بنفس اللحظة. وبكرة اذا تغير رايج وتريدينهن ازرق، تغيرين كلمة وحدة بس. هذا الفرق بين موقع تكدرين تديرينه وموقع تتعبين بيه.

3. وين نكتب الـ CSS؟ (ثلث طرق)

الطريقة الاولى: داخل العنصر نفسه. هذي انتي شفتيها عدنا بدرس الـ div:

<p style="color: red;">Red text</p>

تأثيرها بس على هذا العنصر. حلوة للتجارب السريعة، بس اذا استعملتيها بكل مكان الكود يصير زبالة.

الطريقة الثانية: داخل وسم style. هذي الي سويتها بالمثال فوك:

<style>
    p {
        color: red;
    }
</style>

تأثيرها على كل الفقرات بالصفحة. عادة تنكتب جوة <head>. وبالمحرر الي فوك تقدرين تكتبينها بأول الكود وتشتغل عادي.

الطريقة الثالثة: ملف لحاله. تسوين ملف اسمه style.css وتكتبين بيه الكود بدون وسم style:

p {
    color: red;
}

وبعدين تربطينه بالصفحة من <head> بهذا السطر، تذكرينه؟ هوه نفسه الي بأول درس:

<link rel="stylesheet" href="style.css">

هذي الطريقة الاحسن لان ملف واحد يتحكم بكل صفحات موقعج، وتصير الصفحة نظيفة. بس للتعلم هسه نستعمل الثانية لان الكود كله بمكان واحد.

4. الشكل العام للكود

selector {
    property: value;
}

ثلث اشياء:

١. selector يعني مين اريد اغير؟ مثلا h1 او p او img.

٢. property يعني شنو اريد اغير؟ مثلا color او font-size.

٣. value يعني لشنو اغيره؟ مثلا red او 40px.

مثال:

h1 {
    color: red;
    font-size: 40px;
}

Big red title

انتبهي لهذي التفاصيل لان اغلب الاخطاء منها:

١. بين الاسم والقيمة نقطتين فوك بعض (:) مو يساوي (=).

٢. كل سطر ينتهي بفاصلة منقوطة (;).

٣. القوس { ينفتح و } ينسد، مثل ما كل وسم لازم ينسد.

٤. اذا نسيتي فاصلة منقوطة وحدة، السطر الي بعدها ما يشتغل وتحارين ليش.

5. الالوان

اكو شغلتين للالوان: color يغير لون الكلام، و background-color يغير لون الخلفية.

div {
    color: white;
    background-color: black;
}

White text on black background

واللون نكتبه بثلث طرق:

color: red;                 /* by name */
color: #8cc63f;             /* hex code */
color: rgb(140, 198, 63);   /* rgb */

الاسم سهل بس محدود (red, blue, green, orange...). الـ hex هذا الكود الي يبدأ بـ # وهوه الاكثر استعمال، تدورين على "color picker" بالكوكل وتختارين اللون وينطيج الكود. ولون الموقع هذا مثلا #8cc63f.

6. الخطوط والكلام

p {
    font-size: 24px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    text-align: center;
}

Styled text

١. font-size حجم الخط، بالبكسل (px).

٢. font-family نوع الخط. نكتب اكثر من وحدة وبينهن فاصلة، اذا الجهاز ما عنده الاول يستعمل الي بعده.

٣. font-weight سمك الخط، bold يعني غامق.

٤. text-align مكان الكلام: left او right او center.

7. الصندوق (Box Model) وهنا يرجع درس الـ div

اي عنصر بالصفحة هوه صندوق، حتى الفقرة وحتى الصورة. والصندوق بي اربع اشياء من جوه لبرا:

١. المحتوى (الكلام او الصورة نفسها).

٢. padding: المسافة بين المحتوى والحدود (من جوه).

٣. border: الحدود.

٤. margin: المسافة بين الصندوق والاشياء الي حواليه (من برا).

div {
    border: 3px solid black;
    padding: 30px;
    margin-bottom: 40px;
    background-color: #8cc63f;
}

Big padding inside, big margin below me

Small padding

شوفي: الاول بي padding كبير فالكلام بعيد عن الحدود، وتحته margin فبعيد عن الصندوق الثاني. والحدود الي نكتبها بـ border مكتوبة بثلث اشياء: السمك، ونوع الخط (solid عادي، dashed متقطع، dotted نقط)، واللون.

border: 2px dashed red;

Dashed red border

وبعد نكدر نحدد حجم الصندوق نفسه:

div {
    width: 200px;
    height: 100px;
}

وتكدرين تستعملين % مثل width: 50% يعني نص عرض الشي الي جواه.

8. اذا اتنين تعاركوا

شنو يصير اذا كتبتي هيج؟

p {
    color: red;
}
p {
    color: blue;
}

الفقرة تصير زرقة، لان الاخير يفوز. وهذا معنى كلمة Cascading (تتالي) بالاسم. وبعد اذا كتبتي style داخل العنصر نفسه، يفوز على الي بوسم style حتى لو كان بعده. فاذا غيرتي شي وما اشتغل، شوفي هل اكو شي ثاني يغلبه.

الواجب

افتحي المحرر الي فوك وسوي ذني:

١. انسخي الكود الاول (الصفحة بدون CSS) من هذا الدرس، وضيفي له وسم style، وغيري لون الخلفية وحجم العنوان ولون الازرار على مزاجج.

٢. سوي صندوق (div) بحدود 2px سودة وخلفية #a4db51 وpadding 15px، وبيه عنوان وفقرة.

٣. سوي صندوقين جنب بعض، الاول بي margin-bottom والثاني لا، وشوفي الفرق.

٤. حاولي تسوين حدود متقطعة باللون الاحمر.

تحدي: انسخي الكود الجاي بالمحرر وبي غلطتين، الكيهن وصلحيهن:

<style>
    h1 {
        color: red
        font-size: 30px;
    }
    p {
        background-color = yellow;
    }
</style>

<h1>Find my mistakes</h1>
<p>Fix me please</p>

⚠ تنبيه اخذر
سويته مخفي لان اخوية شاف الطيز وكال لامي واناشيت

Chat

NO SIGNAL
PRESS POWER

التقدم ولو لاح يبقى فارغ مثلش ههههه 0 / 0

✔	الدرس	التاريخ	شنو تعلمتي اليوم؟