KEMO DEV

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

رابط الدعوة :- https://t.me/+jQdl6YIz57FmZTY0

اسألة حول البرمجة

مجموعة اسألة حول البرمجة و نقاشات ✨

👍2

930 viewsكامل الطالب, 19:47

KEMO DEV

مائة_تطبيق_واستخدام_عملي_للذكاء_الاصطناعي_التوليدي_ـ_موقع_الفريد.pdf

7.7 MB

كتاب به ١٠٠ تطبيق (برنامج) للذكاء الاصطناعي مع شرح طريقة الاستخدام

878 viewsكامل الطالب, 03:23

KEMO DEV

يعد CustomTkinter مكتبة تتيح لك إنشاء واجهات مستخدم رسومية (GUI) مخصصة باستخدام مكتبة tkinter الأساسية في لغة البرمجة بايثون. يمكن للمطورين استخدام CustomTkinter لتصميم تطبيقات بمظهر أكثر جاذبية وتحكم أكبر في العناصر الرسومية.

## مقدمة عن CustomTkinter

CustomTkinter هو إطار عمل مفتوح المصدر يهدف إلى تحسين وتبسيط تصميم واجهات المستخدم الرسومية في بايثون. يتميز بسهولة الاستخدام والمرونة العالية، مما يجعله خيارًا مثاليًا للمشاريع التي تتطلب تصميمات مخصصة. باستخدام CustomTkinter، يمكنك التحكم في الألوان والأشكال والخطوط وتطبيق تأثيرات متقدمة.

## الميزات الرئيسية

### 1. التصميم المخصص
يمكن للمطورين تخصيص كل عنصر من عناصر الواجهة الرسومية، بما في ذلك الأزرار والقوائم والنوافذ والمربعات النصية. يمكنك تطبيق أنماط CSS لتحديد مظهر العناصر.

### 2. سهولة الاستخدام
تعد مكتبة CustomTkinter سهلة التعلم والاستخدام، خاصةً إذا كنت على دراية بـ tkinter. يمكنك بسهولة تحويل مشروع tkinter الحالي إلى CustomTkinter من خلال تغييرات بسيطة في الكود.

### 3. مجتمع ودعم قوي
تحتوي مكتبة CustomTkinter على مجتمع نشط يوفر دعمًا وتحديثات دورية. يمكنك العثور على العديد من الأمثلة والبرامج التعليمية لمساعدتك في البدء.

## كيفية البدء باستخدام CustomTkinter

### الخطوة الأولى: تثبيت المكتبة
يمكنك تثبيت CustomTkinter باستخدام مدير الحزم pip:

pip install customtkinter

### الخطوة الثانية: كتابة كود بسيط

import customtkinter as ctk

# إنشاء نافذة
root = ctk.CTk()

# إنشاء زر مخصص
button = ctk.CTkButton(master=root, text="اضغط هنا")
button.pack(pady=20)

# بدء الحلقة الرئيسية
root.mainloop()

## المصادر العربية للتعلم

إليك بعض المصادر العربية التي يمكن أن تساعدك في تعلم CustomTkinter و tkinter:

1. موقع برمج.كوم - يقدم دروسًا شاملة ومفصلة عن أساسيات البرمجة باستخدام بايثون ومكتبة tkinter.
- [رابط الموقع](https://www.barmej.com)

2. قناة الزيرو ويب سكول على يوتيوب - تحتوي على سلسلة من الدروس المرئية حول برمجة واجهات المستخدم باستخدام بايثون.
- [رابط القناة](https://www.youtube.com/c/ElzeroWebSchool)

3. منتديات بايثون العربية - منتدى يحتوي على نقاشات ومقالات حول مختلف مكتبات بايثون بما في ذلك tkinter و CustomTkinter.
- [رابط المنتدى](https://arabicpython.net)

4. مدونة عبد الله عيد - يقدم دورات تعليمية متقدمة في البرمجة باستخدام بايثون.
- [رابط المدونة](https://abdullaheid.net)

باستخدام هذه المصادر، يمكنك بناء معرفة قوية حول كيفية استخدام CustomTkinter لإنشاء واجهات مستخدم رسومية مخصصة وجذابة.

Barmej

برمج — رفيق التعلّم الذكي

كل شي كنت تنوي تعلمه يصبح أخيراً مسار تعلّم حقيقي. برمج يبني، يدرّسك، ويختبرك.

❤2👍2

1.09K viewsكامل الطالب, 02:57

KEMO DEV

المنشور للاسئلة عن البرمجة و لغات البرمجة 🌹🚶
اسأل و انا اجاوب في التعليقات 👇🔥🤝

863 viewsكامل الطالب, 06:27

KEMO DEV

السلام عليكم شباب 👋❣️ ان شاء الله اليوم سوف نبدأ سلسلة تعلم HTML التي سوف نتعلم فيها هذة اللغة و طريقة بناء صفحات الويب بها
كل العليك انك تتباع الحساب و بعديها تعمل متابعة للهاشتاغ بتاع السلسة #تعلم_HTML_مع_كيمو_تكنولوجي و اتفاعل مع المنشورات 😁❣️🔥🔥 و كل يوم ان شاء الله بنزل شرح جديد

❤4

671 viewsكامل الطالب, 04:06

KEMO DEV

سلسلة من المقالات المبسطة لتعلم HTML. سأقسم الكورس إلى مقالات تغطي الأساسيات والتقنيات الأكثر شيوعًا في HTML. إليك خطة مبدئية:

1. مقدمة إلى HTML
- ما هي HTML؟
- هيكلية وثيقة HTML الأساسية
- أدوات تطوير الويب

2. العناصر الأساسية في HTML
- العناصر والعلامات
- العناوين والفقرات
- القوائم (مرتبة وغير مرتبة)

3. الروابط والصور
- الروابط التشعبية
- إضافة الصور

4. الجداول
- إنشاء الجداول
- تنسيق الجداول

5. النماذج
- مدخلات النماذج (نص، زر، صندوق اختيار، قائمة منسدلة)
- إرسال البيانات

6. وسوم التصفيف والتنسيق
- الوسوم القوية والمائلة (Bold & Italic)
- التعليقات

7. الوسائط المتعددة
- تضمين الفيديو والصوت
- الوسوم الحديثة مثل <audio> و<video>

8. مقدمة إلى HTML5
- وسوم HTML5 الجديدة
- خصائص جديدة في HTML5

سأبدأ الآن بمقالة الأولى: مقدمة إلى HTML.

---

المقالة الأولى: مقدمة إلى HTML

ما هي HTML؟
HTML (لغة توصيف النصوص التشعبية) هي لغة ترميز تستخدم لإنشاء صفحات الويب. تسمح لك بإضافة النصوص والصور والروابط والنماذج وغيرها من العناصر إلى صفحات الويب.

هيكلية وثيقة HTML الأساسية
وثيقة HTML تتكون من عناصر (Tags) مرتبة بطريقة معينة. لكل وثيقة HTML هيكلية أساسية تتكون من التالي:

<!DOCTYPE html>
<html>
<head>
    <title>عنوان الصفحة</title>
</head>
<body>
    <h1>مرحباً بكم في موقعي</h1>
    <p>هذه فقرة نصية.</p>
</body>
</html>

- `<!DOCTYPE html>

: يخبر المتصفح بأن هذه وثيقة HTML5.
-

<html>

: العنصر الجذري الذي يحتوي على جميع عناصر HTML.
-

<head>

: يحتوي على معلومات حول الوثيقة (الميتاداتا)، مثل العنوان (title) وملفات الستايل الخارجية.
-

<body>`: يحتوي على محتوى الوثيقة الذي يظهر في المتصفح، مثل النصوص والصور.

أدوات تطوير الويب
لبدء كتابة HTML، تحتاج إلى:
- محرر نصوص: يمكنك استخدام محرر نصوص بسيط مثل Notepad على Windows أو محررات نصوص أكثر تقدماً مثل VSCode أو Sublime Text.
- متصفح ويب: لمعاينة صفحات HTML التي تقوم بإنشائها. جميع المتصفحات الحديثة تدعم HTML5.
لو عندك اي سؤال او استفسار اتفضل في التعلقات 👇😁
#كيموتكنلوجي
#تعلم_HTML_مع_كيمو_تكنولوجي

👍5❤1

751 viewsكامل الطالب, 04:07

KEMO DEV

المقالة الثانية: العناصر الأساسية في HTML

العناصر والعلامات
HTML يتكون من مجموعة من العناصر (Tags) التي تُستخدم لتحديد محتوى الصفحة. كل عنصر يتكون من علامة افتتاحية وعلامة إغلاق، وفي بعض الأحيان، لا يحتاج العنصر إلى علامة إغلاق.

مثال على عنصر يتضمن علامة افتتاحية وعلامة إغلاق:

<p>هذه فقرة نصية.</p>

- `<p>

: علامة افتتاحية لعنصر الفقرة.
-

</p>

: علامة إغلاق لعنصر الفقرة.

 العناوين والفقرات
العناوين تُستخدم لتحديد النصوص الكبيرة والمهمة في الصفحة. هناك ستة مستويات من العناوين، من

<h1> إلى <h6>. <h1> هو الأكبر والأكثر أهمية، بينما <h6>

 هو الأصغر والأقل أهمية.

مثال على العناوين:
``

html
<h1>هذا عنوان رئيسي</h1>
<h2>هذا عنوان فرعي</h2>
<h3>هذا عنوان فرعي أقل أهمية</h3>


الفقرات تُستخدم لإضافة النصوص العادية في الصفحة:

html
<p>هذه فقرة نصية توضح كيفية استخدام عنصر الفقرة في HTML.</p>


 القوائم (مرتبة وغير مرتبة)
القوائم تُستخدم لتجميع العناصر ذات الصلة ببعضها البعض. هناك نوعان من القوائم في HTML: القوائم المرتبة والقوائم غير المرتبة.

القائمة غير المرتبة (Unordered List):

html
<ul>
<li>العنصر الأول</li>
<li>العنصر الثاني</li>
<li>العنصر الثالث</li>
</ul>

- `<ul>`: علامة القائمة غير المرتبة.
- `<li>`: علامة العنصر في القائمة.

القائمة المرتبة (Ordered List):

html
<ol>
<li>العنصر الأول</li>
<li>العنصر الثاني</li>
<li>العنصر الثالث</li>
</ol>

- `<ol>`: علامة القائمة المرتبة.

 مثال كامل:

html
<!DOCTYPE html>
<html>
<head>
<title>العناصر الأساسية في HTML</title>
</head>
<body>
<h1>هذا عنوان رئيسي</h1>
<p>هذه فقرة نصية توضح كيفية استخدام عنصر الفقرة في HTML.</p>
<h2>قائمة غير مرتبة</h2>
<ul>
<li>العنصر الأول</li>
<li>العنصر الثاني</li>
<li>العنصر الثالث</li>
</ul>
<h2>قائمة مرتبة</h2>
<ol>
<li>العنصر الأول</li>
<li>العنصر الثاني</li>
<li>العنصر الثالث</li>
</ol>
</body>
</html>
`

بذلك نكون قد غطينا العناصر الأساسية في HTML. يمكنك الآن الانتقال إلى المقالة التالية: الروابط والصور.

#تعلم_HTML_مع_كيمو_تكنولوجي
#كيمو_تكنولوجي

❤3👍3

722 viewsكامل الطالب, 04:12

KEMO DEV

المقالة الثالثة: الروابط والصور

الروابط التشعبية
الروابط التشعبية تسمح للمستخدمين بالانتقال من صفحة إلى أخرى أو إلى جزء معين من الصفحة. يتم إنشاء الروابط باستخدام عنصر <a>.

مثال على إنشاء رابط تشعبي:

<a href="https://www.example.com">اذهب إلى Example</a>

- `href

: خاصية تحدد عنوان URL الذي سينتقل إليه المستخدم عند النقر على الرابط.
-

اذهب إلى Example

: النص الذي يظهر كجزء من الرابط.

يمكنك أيضًا استخدام الروابط للانتقال إلى جزء معين من نفس الصفحة:

<a href="#section1">اذهب إلى القسم 1</a>

<h2 id="section1">القسم 1</h2>
<p>هذه فقرة في القسم 1.</p>

- `id

: خاصية تحدد هوية العنصر المستهدف.
-

#section1: يشير إلى العنصر الذي يحمل الهوية section1

.

إضافة الصور
يمكنك إضافة الصور إلى صفحات HTML باستخدام عنصر

<img>

. هذا العنصر لا يحتاج إلى علامة إغلاق.

مثال على إضافة صورة:
``

html
<img src="image.jpg" alt="وصف للصورة">

- `src`: خاصية تحدد مصدر الصورة (مسار الملف).
- `alt`: خاصية توفر نصًا بديلًا يظهر إذا لم تتمكن المتصفح من عرض الصورة.

أمثلة على استخدام الروابط والصور:

html
<!DOCTYPE html>
<html>
<head>
    <title>الروابط والصور في HTML</title>
</head>
<body>
    <h1>الروابط والصور في HTML</h1>
    <h2>روابط تشعبية</h2>
    <p>لزيارة Google، انقر على الرابط التالي:</p>
    <a href="https://www.google.com">اذهب إلى Google</a>

    <h2>إضافة الصور</h2>
    <p>هذه صورة مثالية:</p>
    <img src="https://www.example.com/image.jpg" alt="صورة مثالية">
</body>
</html>
`

في هذا المثال:
- لدينا رابط تشعبي يؤدي إلى موقع Google.
- لدينا صورة تُعرض باستخدام رابط صورة.

بذلك نكون قد غطينا كيفية استخدام الروابط والصور في HTML
#تعلم_HTML_مع_كيمو_تكنولوجي

672 viewsكامل الطالب, edited 04:22

KEMO DEV

المقالة الرابعة: الجداول

إنشاء الجداول
الجداول تُستخدم لتنظيم البيانات في صفوف وأعمدة. يتم إنشاء الجداول باستخدام عنصر <table>. داخل الجدول، تُستخدم عناصر <tr> (صف)، <td> (خلية بيانات)، و <th> (خلية عنوان).

مثال على جدول بسيط:

<table>
    <tr>
        <th>الاسم</th>
        <th>العمر</th>
    </tr>
    <tr>
        <td>محمد</td>
        <td>25</td>
    </tr>
    <tr>
        <td>علي</td>
        <td>30</td>
    </tr>
</table>

تنسيق الجداول
يمكنك إضافة حدود وتنسيقات أخرى للجداول باستخدام خصائص CSS. إليك مثال يوضح كيفية تنسيق الجدول:

<style>
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid black;
        padding: 8px;
        text-align: left;
    }
    th {
        background-color: #f2f2f2;
    }
</style>

<table>
    <tr>
        <th>الاسم</th>
        <th>العمر</th>
    </tr>
    <tr>
        <td>محمد</td>
        <td>25</td>
    </tr>
    <tr>
        <td>علي</td>
        <td>30</td>
    </tr>
</table>

أمثلة كاملة:

<!DOCTYPE html>
<html>
<head>
    <title>الجداول في HTML</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: f2f2f2;
        }
    </style>
</head>
<body>
    <h1>الجداول في HTML</h1>
    <table>
        <tr>
            <th>الاسم</th>
            <th>العمر</th>
        </tr>
        <tr>
            <td>محمد</td>
            <td>25</td>
        </tr>
        <tr>
            <td>علي</td>
            <td>30</td>
        </tr>
    </table>
</body>
</html>

#تعلم_HTML_مع_كيمو_تكنولوجي

👍2

751 viewsكامل الطالب, 04:24

KEMO DEV

المقالة الخامسة: النماذج
مدخلات النماذج
النماذج تُستخدم لجمع البيانات من المستخدمين. يتم إنشاء النماذج باستخدام عنصر <form> داخل النماذج، تُستخدم عناصر مثل <input>,<textarea>,<select> لجمع البيانات

أنواع مدخلات النماذج
يمكنك استخدام أنواع مختلفة من المدخلات لجمع بيانات مختلفة:
- نص: <input type="text">
- بريد إلكتروني: <input type="email">
- كلمة مرور: <input type="password">
- أزرار الاختيار: <input type="radio">
- مربعات الاختيار: <input type="checkbox">
- قوائم منسدلة: <select><option></option></select>
أمثلة كاملة:

<!DOCTYPE html>
<html>
<head>
    <title>النماذج في HTML</title>
</head>
<body>
    <h1>النماذج في HTML</h1>
    <form action="/submit" method="post">
        <label for="name">الاسم:</label>
        <input type="text" id="name" name="name"><br><br>
        <label for="age">العمر:</label>
        <input type="number" id="age" name="age"><br><br>
        <label for="gender">الجنس:</label>
        <input type="radio" id="male" name="gender" value="male">
        <label for="male">ذكر</label>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">أنثى</label><br><br>
        <label for="hobbies">الهوايات:</label>
        <input type="checkbox" id="reading" name="hobbies" value="reading">
        <label for="reading">القراءة</label>
        <input type="checkbox" id="sports" name="hobbies" value="sports">
        <label for="sports">الرياضة</label><br><br>
        <label for="country">البلد:</label>
        <select id="country" name="country">
            <option value="egypt">مصر</option>
            <option value="ksa">السعودية</option>
            <option value="uae">الإمارات</option>
        </select><br><br>
        <input type="submit" value="إرسال">
    </form>
</body>
</html>

#تعلم_HTML_مع_كيمو_تكنولوجي

646 viewsكامل الطالب, 04:01

KEMO DEV

المقالة السادسة: وسوم التصفيف والتنسيق

الوسوم القوية والمائلة
وسوم التصفيف تُستخدم لتنسيق النصوص داخل صفحات HTML. من بين هذه الوسوم:
- الوسم القوي (Bold): <strong>
- الوسم المائل (Italic): <em>

مثال:

<p>هذا نص <strong>قوي</strong> و <em>مائل</em>.</p>

التعليقات
التعليقات تُستخدم لكتابة ملاحظات داخل شفرة HTML دون أن تظهر في المتصفح. يتم إنشاء التعليقات باستخدام .

مثال:

<!-- هذا تعليق -->
<p>هذا نص عادي.</p>

أمثلة كاملة:

<!DOCTYPE html>
<html>
<head>
    <title>وسوم التصفيف والتنسيق في HTML</title>
</head>
<body>
    <h1>وسوم التصفيف والتنسيق في HTML</h1>
    <p>هذا نص <strong>قوي</strong> و <em>مائل</em>.</p>
    <!-- هذا تعليق -->
    <p>هذا نص عادي.</p>
</body>
</html>

#تعلم_HTML_مع_كيمو_تكنولوجي

624 viewsكامل الطالب, 04:01

KEMO DEV

المقالة السابعة: الوسائط المتعددة

تضمين الفيديو والصوت
يمكنك تضمين الفيديو والصوت في صفحات HTML باستخدام وسوم HTML5 مثل <video> و <audio>.

مثال على تضمين فيديو:

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    المتصفح لا يدعم عنصر الفيديو.
</video>

مثال على تضمين صوت:

<audio controls>
    <source src="audio.mp3" type="audio/mp3">
    المتصفح لا يدعم عنصر الصوت.
</audio>

أمثلة كاملة:

<!DOCTYPE html>
<html>
<head>
    <title>الوسائط المتعددة في HTML</title>
</head>
<body>
    <h1>الوسائط المتعددة في HTML</h1>
    <h2>تضمين فيديو</h2>
    <video width="320" height="240" controls>
        <source src="movie.mp4" type="video/mp4">
        المتصفح لا يدعم عنصر الفيديو.
    </video>
    <h2>تضمين صوت</h2>
    <audio controls>
        <source src="audio.mp3" type="audio/mp3">
        المتصفح لا يدعم عنصر الصوت.
    </audio>
</body>
</html>

#تعلم_HTML_مع_كيمو_تكنولوجي

695 viewsكامل الطالب, 04:01

KEMO DEV

كتب برمجة 🔥✨🏃

PHP & MYSQL
https://t.me/KimoTechnology/437

PHP Syntax
https://t.me/KimoTechnology/435

تمارين Python
https://t.me/KimoTechnology/365

الامن المعلوماتي و الهاكر الاخلاقي
https://t.me/KimoTechnology/256

Laravel
https://t.me/KimoTechnology/140

Flutter
https://t.me/KimoTechnology/138

CSS
https://t.me/KimoTechnology/139

JavaScript
https://t.me/KimoTechnology/115

الخوازميات في البرمجه
https://t.me/KimoTechnology/114

HTML
https://t.me/KimoTechnology/50

Python بالعربي
https://t.me/KimoTechnology/78

لا تنسي متابعتنا ليصلك كل ما هو جديد حول البرمحة 😘🌹✨ حيث ننشر مشاريع برمجة و كتب و معلومات مهمة كل يوم

KEMO DEV

‏مستند من ❣️ سبحان الله و بحمد ❣️

818 viewsكامل الطالب, 04:03

KEMO DEV

المقالة الثامنة: مقدمة إلى وسوم HTML5 الجديدة

وسوم HTML5 الجديدة HTML5 أضافت العديد من الوسوم الجديدة لتحسين الهيكلية الدلالية للصفحات. بعض هذه الوسوم تشمل:
<header>: لعنوان الصفحة أو القسم.
<footer>: لتذييل الصفحة أو القسم.
<article>: لمقال أو محتوى مستقل.
<section>: لقسم داخل صفحة.
<nav>: لقائمة تنقل.
خصائص جديدة في HTML5 جلبت خصائص جديدة للوسوم الحالية لتحسين تجربتها:
مكان الصورة البديلة (placeholder) للمدخلات.التحقق من الأنماط (pattern) للمدخلات.نوع مدخلات جديد مثل (date)، (email) و (url).

أمثلة كاملة (متابعة):

<!DOCTYPE html>
<html>
<head>
    <title>مقدمة إلى HTML5</title>
</head>
<body>
    <header>
        <h1>مرحباً بكم في HTML5</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#home">الرئيسية</a></li>
            <li><a href="#about">حول</a></li>
            <li><a href="#contact">اتصل بنا</a></li>
        </ul>
    </nav>
    <section id="home">
        <h2>الرئيسية</h2>
        <p>هذه الصفحة الرئيسية لموقعنا.</p>
    </section>
    <section id="about">
        <h2>حول</h2>
        <article>
            <h3>من نحن؟</h3>
            <p>نحن فريق متخصص في تطوير الويب.</p>
        </article>
    </section>
    <section id="contact">
        <h2>اتصل بنا</h2>
        <form action="/submit" method="post">
            <label for="name">الاسم:</label>
            <input type="text" id="name" name="name" placeholder="أدخل اسمك"><br><br>
            <label for="email">البريد الإلكتروني:</label>
            <input type="email" id="email" name="email" placeholder="أدخل بريدك الإلكتروني"><br><br>
            <label for="message">الرسالة:</label>
            <textarea id="message" name="message" placeholder="أدخل رسالتك"></textarea><br><br>
            <input type="submit" value="إرسال">
        </form>
    </section>
    <footer>
        <p>&copy; 2024 شركتنا. جميع الحقوق محفوظة.</p>
    </footer>
</body>
</html>

شرح العناصر الجديدة:
- <header>: يستخدم لإنشاء رأس الصفحة أو القسم. يحتوي عادةً على عناوين أو شعارات.
- <nav>: يستخدم لإنشاء قائمة تنقل تحتوي على روابط للتنقل بين أجزاء مختلفة من الصفحة أو الموقع.
- <section>: يستخدم لتحديد قسم معين في الصفحة. يمكن أن يحتوي على عدة مقالات أو أقسام فرعية.
- <article>: يستخدم لإنشاء مقال مستقل يمكن أن يحتوي على عنوان ومحتوى مستقل.
- <footer>: يستخدم لإنشاء تذييل الصفحة أو القسم، ويحتوي عادةً على معلومات حقوق النشر أو روابط تذييل.

خصائص جديدة:
- placeholder: يعرض نصًا تلميحيًا داخل مدخلات النموذج لمساعدة المستخدم على فهم المعلومات المطلوبة.
- type="email": يحدد أن المدخل يجب أن يكون عنوان بريد إلكتروني صحيحًا.
- <textarea>: يتيح إدخال نصوص متعددة الأسطر.

بذلك نكون قد غطينا أساسيات HTML وتعرفنا على التحديثات الجديدة في HTML5. هذه السلسلة تمنحك الأساسيات لبناء صفحات ويب بسيطة. يمكنك الآن متابعة المزيد من الموارد أو الدروس المتقدمة لتعزيز معرفتك وتطبيق مهاراتك في مشاريع عملية.

إذا كان لديك أي أسئلة أو تحتاج إلى مزيد من التوضيحات حول أي من هذه المواضيع، فلا تتردد في السؤال!
#تعلم_HTML_مع_كيمو_تكنولوجي

👍1

812 viewsكامل الطالب, 04:13

KEMO DEV

افضل ثلاثة كورسات لغة بايثون علي يوتيوب 😍🔥❣️

قناة عبد الرحمن جمال
https://youtube.com/playlist?list=PLknwEmKsW8OsG8dnisr_-2WGyx7lpgGEE&si=D0CUtYW3Uyf_mfbW

قناة كودزيلا
https://youtube.com/playlist?list=PLuXY3ddo_8nzrO74UeZQVZOb5-wIS6krJ&si=xGrJpNZ0zjiXoYS1

اكادمية ترميز
https://youtube.com/playlist?list=PLYyqC4bNbCIcxKO_r77w5MN1SRRnnfvNQ&si=yGRSiaFfplzZbYkh

YouTube

دورة تعلم بايثون من الصفر كاملة للمبتدئين - Master Python from Beginner to Advanced in Arabic

دورة تعلم لغة البرمجة بايثون من الصفر حتي الاحتراف [python full course 2020]

👍1

867 viewsكامل الطالب, 05:04

KEMO DEV

السلام عليكم 👋❣️
جار الان التجهيز لكورس اساسيات CSS و سوف يكون مبسط الشرح و لن اتعمق لان css كبيرة و تحتاج الي اكثر من هذا تابعونا و ترقبو كل جديد ولا تنسي الايك و التعليق الجميل
تابع الهاشتاغ عشان ما يروح عليك درس
#تعلم_CSS_مع_كيمو_تكنولوجي

👍6

704 viewsكامل الطالب, 04:16

KEMO DEV

مضمون كورس اساسيات CSS

المقالة الأولى: مقدمة إلى CSS
- تعريف CSS وأهميتها.
- كيفية إضافة CSS إلى HTML: Inline, Internal, External.
- القواعد الأساسية في CSS (المحددات والإعلانات).
- كيفية كتابة التعليقات في CSS.

المقالة الثانية: المحددات (Selectors) في CSS
- ما هي المحددات.
- محددات العناصر (Element Selectors).
- المحددات المعرفية (ID Selectors).
- المحددات الصنفية (Class Selectors).
- المحددات الشاملة (Universal Selectors).
- محددات النسبية (Descendant Selectors).

المقالة الثالثة: الخصائص الأساسية في CSS
- ألوان النصوص (Colors).
- خطوط النصوص (Fonts).
- الخلفيات (Backgrounds).
- الحدود (Borders).

المقالة الرابعة: نموذج الصندوق (Box Model)
- ما هو نموذج الصندوق.
- المحتوى (Content).
- الحشو (Padding).
- الحدود (Border).
- الهامش (Margin).
- كيفية حساب الأبعاد باستخدام نموذج الصندوق.

المقالة الخامسة: تخطيط الصفحة (Layout)
- التخطيط باستخدام الكتل (Block) والعناصر الداخلية (Inline).
- الخصائص display وposition.
- النمط العائم (Float).
- نمط Flexbox.
- نمط Grid.

المقالة السادسة: التصميم المتجاوب (Responsive Design)
- أهمية التصميم المتجاوب.
- وحدات القياس النسبية مثل em, rem, %.
- استخدام الوسائط المستجيبة (Media Queries).
- تصميم تخطيطات متجاوبة.

المقالة السابعة: استعراض مكتبات CSS
- مقدمة إلى مكتبات CSS مثل Bootstrap.
- كيفية استخدام مكتبات CSS لتسريع عملية التصميم.
- أمثلة عملية.

كل مقالة ستتضمن شرحًا مبسطًا للمفاهيم، أمثلة عملية، وتحديات تطبيقية لمساعدة المبتدئين على فهم الموضوعات بشكل أفضل.
#تعلم_css_مع_كيمو_تكنولوجي
#تعلم_البرمجة
#CSS

❤5👍5

806 viewsكامل الطالب, 04:16

KEMO DEV

المقالة الأولى: مقدمة إلى CSS

ما هي CSS؟
CSS (أوراق الأنماط المتتالية) هي لغة تستخدم لوصف مظهر وتنسيق مستند مكتوب بلغة HTML. تسمح CSS بفصل المحتوى عن التصميم، مما يسهل عملية تصميم الصفحات وتحديثها.

كيفية إضافة CSS إلى HTML؟
يمكن إضافة CSS إلى HTML بثلاث طرق رئيسية:

1. Inline CSS: داخل وسم HTML باستخدام السمة style.

   <p style="color: red;">هذا نص أحمر اللون.</p>

2. Internal CSS: داخل وسم <style> في قسم <head>.

   <head>
     <style>
       p {
         color: blue;
       }
     </style>
   </head>

3. External CSS: في ملف منفصل بامتداد .css وربطه بالصفحة باستخدام وسم <link>.

   <head>
     <link rel="stylesheet" href="styles.css">
   </head>

وفي ملف styles.css:

   p {
     color: green;
   }

القواعد الأساسية في CSS
كل قاعدة في CSS تتكون من:
- المحدد (Selector): يحدد العنصر الذي سيتم تطبيق الأنماط عليه.
- الإعلانات (Declarations): تحدد الأنماط المراد تطبيقها، وتحتوي على خاصية (Property) وقيمة (Value).

مثال:

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

- المحدد هو h1.
- الإعلانات هي color: red; و font-size: 20px;.

التعليقات في CSS
يمكنك إضافة تعليقات في CSS باستخدام /* تعليق */. التعليقات لا تؤثر على الكود وتساعد في فهمه.

/* هذا تعليق */
p {
  color: blue; /* تغيير لون النص إلى الأزرق */
}

التحدي
استخدم ملف HTML بسيط وأضف إليه ملف CSS خارجي. في ملف CSS، أضف بعض الأنماط لتغيير لون النص وحجم الخط لعناصر مختلفة مثل <p>, <h1>, و<div>.

مثال:
1. أنشئ ملف HTML باسم index.html:

   <!DOCTYPE html>
   <html lang="ar">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="styles.css">
     <title>مقدمة إلى CSS</title>
   </head>
   <body>
     <h1>مرحبًا بك في CSS</h1>
     <p>هذا مثال على نص في CSS.</p>
     <div>هذا صندوق محتوى.</div>
   </body>
   </html>

2. أنشئ ملف CSS باسم styles.css:

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

   p {
     color: blue;
     font-size: 18px;
   }

   div {
     background-color: lightgrey;
     padding: 10px;
     border: 1px solid black;
   }

بهذا تكون قد أنهيت المقالة الأولى من كورس CSS. نلتقي في المقالة الثانية للحديث عن المحددات (Selectors) في CSS.
لا تنسي متابة الهاشتاغ لمشاهدة جميع الدروس فقط اضغط علي 👈 #تعلم_css_مع_كيمو_تكنولوجي

❤2

810 viewsكامل الطالب, 06:30

KEMO DEV

المقالة الثانية: المحددات (Selectors) في CSS

ما هي المحددات؟
المحددات في CSS تستخدم لتحديد العناصر التي سيتم تطبيق الأنماط عليها. هناك أنواع مختلفة من المحددات التي تساعدك في استهداف العناصر بطرق مختلفة.

أنواع المحددات:

1. محددات العناصر (Element Selectors):
تستهدف جميع العناصر من نوع معين.

   p {
     color: blue;
   }

   سيجعل جميع عناصر <p> لون النص باللون الأزرق.

2. المحددات المعرفية (ID Selectors):
   تستهدف عنصراً واحداً باستخدام السمة id. يجب أن يكون معرف العنصر فريداً في الصفحة.

   #header {
     background-color: lightgrey;
   }

يجب استخدام id في HTML:

   <div id="header">هذا هو الهيدر</div>

3. المحددات الصنفية (Class Selectors):
تستهدف مجموعة من العناصر باستخدام السمة class.

   .highlight {
     color: red;
   }

يجب استخدام class في HTML:

   <p class="highlight">هذا نص مميز باللون الأحمر</p>

4. المحددات الشاملة (Universal Selectors):
تستهدف جميع العناصر في الصفحة.

   * {
     margin: 0;
     padding: 0;
   }

5. محددات النسبية (Descendant Selectors):
تستهدف العناصر التي تقع داخل عناصر أخرى.

   div p {
     color: green;
   }

سيجعل جميع عناصر <p> داخل <div> باللون الأخضر.

   <div>
     <p>هذا نص أخضر</p>
   </div>

6. محددات النسب المباشرة (Child Selectors):
تستهدف العناصر التي تقع مباشرة داخل عنصر آخر.

   ul > li {
     list-style-type: none;
   }

   ستزيل النقاط من جميع عناصر <li> التي هي أطفال مباشرة لـ <ul>.

7. المحددات الأخوية (Adjacent Sibling Selectors):
   تستهدف العناصر التي تقع بجوار عناصر أخرى مباشرة.

   h1 + p {
     margin-top: 0;
   }

سيجعل الهامش العلوي لعناصر <p> التي تأتي مباشرة بعد <h1> صفر.

التحدي
استخدم ملف HTML بسيط وملف CSS خارجي. في ملف CSS، أضف بعض الأنماط لاستخدام مختلف أنواع المحددات التي تعلمتها.

مثال:
1. أنشئ ملف HTML باسم index.html:

   <!DOCTYPE html>
   <html lang="ar">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="styles.css">
     <title>محددات CSS</title>
   </head>
   <body>
     <h1 id="main-title">مرحبًا بك في CSS</h1>
     <p class="highlight">هذا مثال على نص مميز.</p>
     <div>
       <p>هذا نص داخل div.</p>
       <p class="highlight">هذا نص مميز داخل div.</p>
     </div>
     <ul>
       <li>عنصر قائمة</li>
       <li>عنصر قائمة</li>
     </ul>
   </body>
   </html>

2. أنشئ ملف CSS باسم styles.css:

   /* محدد العنصر */
   p {
     color: blue;
   }

   /* محدد المعرف */
   #main-title {
     background-color: lightgrey;
     padding: 10px;
   }

   /* محدد الصنف */
   .highlight {
     color: red;
     font-weight: bold;
   }

   /* المحدد الشامل */
   * {
     margin: 0;
     padding: 0;
   }

   /* محدد النسبية */
   div p {
     color: green;
   }

   /* محدد النسب المباشرة */
   ul > li {
     list-style-type: none;
   }

   /* محدد الأخوية المجاورة */
   h1 + p {
     margin-top: 0;
   }

بهذا تكون قد أنهيت المقالة الثانية من كورس CSS. نلتقي في المقالة الثالثة للحديث عن الخصائص الأساسية في CSS.
لا تنسي متابة الهاشتاغ لمشاهدة جميع الدروس فقط اضغط علي 👈 #تعلم_css_مع_كيمو_تكنولوجي

❤1

808 viewsكامل الطالب, 05:01

KEMO DEV

المقالة الثالثة: الخصائص الأساسية في CSS

في هذه المقالة، سنتعرف على بعض الخصائص الأساسية في CSS التي تستخدم بشكل شائع لتنسيق النصوص والخلفيات والحدود.

ألوان النصوص (Colors)
تستخدم خاصية color لتغيير لون النص. يمكن تعيين الألوان باستخدام الأسماء (مثل red)، أو القيم الست عشرية (مثل #ff0000)، أو قيم RGB (مثل rgb(255, 0, 0)).

p {
  color: blue; /* اسم اللون */
}

h1 {
  color: #ff0000; /* القيمة الست عشرية */
}

h2 {
  color: rgb(0, 128, 0); /* قيمة RGB */
}

خطوط النصوص (Fonts)
تستخدم عدة خصائص لتنسيق خطوط النصوص:

1. font-family: تحديد نوع الخط.

   p {
     font-family: Arial, sans-serif;
   }

2. font-size: تحديد حجم الخط.

   p {
     font-size: 16px;
   }

3. font-weight: تحديد سمك الخط.

   p {
     font-weight: bold;
   }

4. font-style: تحديد نمط الخط (عادي أو مائل).

   p {
     font-style: italic;
   }

الخلفيات (Backgrounds)
يمكنك تغيير خلفية العناصر باستخدام خصائص الخلفية المتعددة:

1. background-color: لتحديد لون الخلفية.

   div {
     background-color: lightgrey;
   }

2. background-image: لتحديد صورة خلفية.

   div {
     background-image: url('background.jpg');
   }

3. background-repeat: لتحديد كيفية تكرار الصورة (أفقيًا، عموديًا، أو عدم التكرار).

   div {
     background-repeat: no-repeat;
   }

4. background-position: لتحديد موضع الصورة في الخلفية.

   div {
     background-position: center;
   }

الحدود (Borders)
تستخدم عدة خصائص لتنسيق الحدود حول العناصر:

1. border-width: لتحديد عرض الحدود.

   p {
     border-width: 2px;
   }

2. border-style: لتحديد نمط الحدود (مثل solid, dashed, dotted).

   p {
     border-style: solid;
   }

3. border-color: لتحديد لون الحدود.

   p {
     border-color: black;
   }

4. border: خاصية مختصرة لتحديد كل من عرض، نمط، ولون الحدود في وقت واحد.

   p {
     border: 2px solid black;
   }

التحدي
استخدم ملف HTML بسيط وملف CSS خارجي. في ملف CSS، أضف بعض الأنماط لتنسيق النصوص والخلفيات والحدود باستخدام الخصائص التي تعلمتها.

مثال:
1. أنشئ ملف HTML باسم index.html:

   <!DOCTYPE html>
   <html lang="ar">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="styles.css">
     <title>الخصائص الأساسية في CSS</title>
   </head>
   <body>
     <h1>مرحبًا بك في CSS</h1>
     <p>هذا مثال على نص في CSS.</p>
     <div>هذا صندوق محتوى.</div>
   </body>
   </html>

2. أنشئ ملف CSS باسم styles.css:

   /* تغيير لون النص */
   p {
     color: blue;
   }

   /* تنسيق الخط */
   h1 {
     font-family: Arial, sans-serif;
     font-size: 24px;
     font-weight: bold;
     font-style: italic;
   }

   /* تغيير الخلفية */
   div {
     background-color: lightgrey;
     background-image: url('background.jpg');
     background-repeat: no-repeat;
     background-position: center;
     padding: 10px;
   }

   /* تنسيق الحدود */
   p {
     border: 2px solid black;
     padding: 5px;
   }

بهذا تكون قد أنهيت المقالة الثالثة من كورس CSS. نلتقي في المقالة الرابعة للحديث عن نموذج الصندوق (Box Model).
لا تنسي متابة الهاشتاغ لمشاهدة جميع الدروس فقط اضغط علي 👈 #تعلم_css_مع_كيمو_تكنولوجي

👍1👎1

760 viewsكامل الطالب, 05:01

KEMO DEV

المقالة الرابعة: نموذج الصندوق (Box Model)

نموذج الصندوق (Box Model) هو مفهوم أساسي في CSS، ويحدد كيف يتم حساب الأبعاد والتباعد لعناصر HTML. كل عنصر HTML يعتبر صندوقًا يحتوي على أربع مناطق رئيسية: المحتوى، الحشو، الحدود، والهامش.

أجزاء نموذج الصندوق:

1. المحتوى (Content):
المنطقة التي تحتوي على النصوص أو العناصر الأخرى. يمكن التحكم في أبعاد المحتوى باستخدام الخصائص width وheight.

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

2. الحشو (Padding):
المسافة بين المحتوى وحدود العنصر. يمكن تحديد الحشو باستخدام خاصية padding أو الخصائص الفرعية مثل padding-top, padding-right, padding-bottom, وpadding-left.

   div {
     padding: 10px;
   }

3. الحدود (Border):
الخط المحيط بالحشو والمحتوى. يمكن تحديد عرض ونمط ولون الحدود باستخدام خصائص مثل border-width, border-style, وborder-color. كما يمكن استخدام خاصية border لتحديد جميع القيم دفعة واحدة.

   div {
     border: 2px solid black;
   }

4. الهامش (Margin):
المسافة بين حدود العنصر والعناصر المجاورة له. يمكن تحديد الهامش باستخدام خاصية margin أو الخصائص الفرعية مثل margin-top, margin-right, margin-bottom, وmargin-left.

   div {
     margin: 20px;
   }

مثال عملي لنموذج الصندوق:
لنفترض أنك ترغب في تنسيق عنصر <div> بحيث يحتوي على نص، مع حشو، وحدود، وهامش محدد.

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>نموذج الصندوق في CSS</title>
</head>
<body>
  <div class="box">هذا هو مثال على نموذج الصندوق.</div>
</body>
</html>

وفي ملف styles.css:

.box {
  width: 300px; /* عرض المحتوى */
  height: 150px; /* ارتفاع المحتوى */
  padding: 20px; /* الحشو */
  border: 2px solid black; /* الحدود */
  margin: 30px; /* الهامش */
  background-color: lightgrey; /* لون الخلفية لتمييز العنصر */
}

كيفية حساب الأبعاد باستخدام نموذج الصندوق:
عند حساب الأبعاد الكلية للعنصر، يجب جمع القيم التالية:
- عرض أو ارتفاع المحتوى.
- عرض أو ارتفاع الحشو (القيمة على الجانبين الأيسر والأيمن أو الأعلى والأسفل).
- عرض أو ارتفاع الحدود (القيمة على الجانبين الأيسر والأيمن أو الأعلى والأسفل).

على سبيل المثال، إذا كان لدينا:
- عرض المحتوى: 300px.
- الحشو: 20px (على الجانبين الأيسر والأيمن).
- الحدود: 2px (على الجانبين الأيسر والأيمن).

فإن العرض الكلي سيكون:

300px (المحتوى) + 20px (الحشو الأيسر) + 20px (الحشو الأيمن) + 2px (الحدود اليسرى) + 2px (الحدود اليمنى) = 344px

التحدي
استخدم ملف HTML بسيط وملف CSS خارجي. في ملف CSS، قم بإنشاء صناديق متعددة مع تطبيق مختلف القيم للحشو والحدود والهامش لرؤية كيفية تأثير هذه القيم على الأبعاد الكلية للعناصر.

مثال:
1. أنشئ ملف HTML باسم index.html:

   <!DOCTYPE html>
   <html lang="ar">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="styles.css">
     <title>نموذج الصندوق في CSS</title>
   </head>
   <body>
     <div class="box1">صندوق 1</div>
     <div class="box2">صندوق 2</div>
     <div class="box3">صندوق 3</div>
   </body>
   </html>

2. أنشئ ملف CSS باسم styles.css:

   .box1 {
     width: 200px;
     height: 100px;
     padding: 10px;
     border: 5px solid red;
     margin: 20px;
     background-color: lightblue;
   }

   .box2 {
     width: 150px;
     height: 75px;
     padding: 15px;
     border: 3px dashed green;
     margin: 25px;
     background-color: lightgreen;
   }

   .box3 {
     width: 250px;
     height: 125px;
     padding: 20px;
     border: 2px dotted blue;
     margin: 30px;
     background-color: lightcoral;
   }

بهذا تكون قد أنهيت المقالة الرابعة من كورس CSS. نلتقي في المقالة الخامسة للحديث عن تخطيط الصفحة (Layout).
لا تنسي متابة الهاشتاغ لمشاهدة جميع الدروس فقط اضغط علي 👈 #تعلم_css_مع_كيمو_تكنولوجي

👍2❤1

737 viewsكامل الطالب, 05:00

About

Blog

Apps

Platform