إعلان
دورة تطوير التطبيقات باستخدام لغة JavaScript في هذه الدورة ستتعلم لغة جافا سكريبت, استخدام مكتبة React.js, بناء API الموقع بواسطة Node.js, تطوير تطبيق جوال باستخدام React Native, و في نهاية الدورة ستتعلم تطوير تطبيق محادثة شبيه بتطبيق WhatsApp. تعلم الآن
دورة تطوير واجهات المستخدم في هذه الدورة ستتعلم لغة HTML و لغة CSS و لغة JavaScript. من ناحية التطبيق العملي ستتعلم طريقة بناء واجهة متجر إلكتروني مكون من ست صفحات, تحويل خمسة تصاميم PSD إلى صفحات ويب, بناء واجهة مستخدم تشبه موقع يوتيوب, بناء لوحة تحكم إحترافية. تعلم الآن
تطوير تطبيقات باستخدام لغة بايثون في هذه الدورة ستتعلم أساسيات البرمجة بلغة بايثون وصولاً إلى التعامل مع أشهر أطر العمل (Flask و Django) و ستتعلم كيف تبني متجر إلكتروني يمكن للمستخدمين البيع و الشراء من خلاله. تعلم الآن
دورة تطوير تطبيقات الويب باستخدام لغة PHP في هذه الدورة ستتعلم لغة PHP من الصفر, استخدام إطار العمل Laravel بشرح مفصّل و عملي, كيفية تطوير شبكة اجتماعية تشبه Instagram, بناء API لتطبيق جوال وفق أسلوب RESTful, تطوير موقع إعلانات مبوبة, تطوير نظام إدارة محتوى CMS كامل. تعلم الآن
دورة تطوير تطبيقات الويب باستخدام لغة Ruby في هذه الدورة ستتعلم البرمجة بلغة Ruby إنطلاقاً من أبسط المفاهيم وحتى بناء تطبيق حقيقي, إستخدام إطار العمل Ruby on Rails بشرح مفصّل و عملي, بناء تطبيق حقيقي عبارة عن شبكة اجتماعية تشبه تويتر, تطوير مجتمع الكتروني يشبه حسوب I/O. تعلم الآن
دورة علوم الحاسوب هذه الدورة معدة لتكون مدخل لعلوم الحاسوب و لغات البرمجة حيث ستتعرف فيها على أنظمة التشغيل و ستتعمق في نظام لينكس و في كيفية التعامل معه من خلال موجه الأوامر, بالإضافة إلى قواعد البيانات و أساسيات الشبكات و الخوادم و مبادئ الحماية والأمان في الويب. تعلم الآن

    HTML الفقرات

    مفهوم الفقرات

    الفقرة ( Paragraph ) عبارة عن مساحة يتم تخصيصها لعرض النص الذي نضعه فيها على سطر جديد.


    أنواع الفقرات

    هناك نوعين من الفقرات التي يمكن إضافتها في الصفحة:

    • فقرات مخصصة لعرض النص بالشكل المناسب.
    • فقرات مخصصة لعرض النص كما هو.

    الفرق بين النوعين هو أن الفقرة المخصصة لعرض النص بالشكل المناسب يتم عرض النص الموضوع فيها بشكل مناسب لحجم الشاشة حتى يتمكن المستخدم من رؤية كل النص الموضوع فيها بشكل سهل بالإضافة إلى أنها تقوم بإزالة أي مسافات فارغة تجد أنه لا داعي لها.

    الفقرات المخصصة لعرض النص بالشكل المناسب

    لعرض نص عادي في الصفحة نضع النص بداخل <p> </p>.
    معلومة: p إختصار لكلمة Paragraph التي تعني فقرة.

    عند عرض النص بواسطة هذا الوسم يقوم المتصفح بإزالة أي مسافات فارغة يجد أنه لا داعي لها ( Extra White Spaces ) على النحو التالي:

    • إذا وجد أكثر من مسافة بين الكلمات يبقي مسافة واحدة فقط.
    • إذا وجد أسطر فارغة, سيقوم بإزلتها عند عرض المحتوى في الصفحة.
    • إذا وجد النص موضوع على أكثر من سطر عمداً, سيقوم بعرض كل المحتوى على نفس السطر و ينزل على السطر عند الحاجة فقط.

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

    المثال الأول

    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    		

    جرب الكود



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

    المثال الثاني

    <p>   This  paragraph    contains  extra    spaces.</p>
    		

    جرب الكود



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

    المثال الثالث

    <p>Hello guys, my name is Mhamad.
    I start learning programming at 19.
    One year later I create harmash.com</p>
    		

    جرب الكود

    النزول على سطر جديد في الفقرة

    لإعلام المتصفح أنك تريد النزول على سطر جديد بداخل الفقرة, يجب وضع <br> في نهاية السطر.
    معلومة: br إختصار لكلمة Break التي يقصد بها في حالتنا إيقاف العرض على نفس السطر.


    في المثال التالي قمنا بإعلام المتصفح أنه من بعد كلمة paragraph. يجب عرض النص المتبقي على سطر جديد.

    مثال

    <p>Here we break the paragraph.<br>This will apear on a new line.</p>
    		

    جرب الكود

    عرض أكثر من مسافة بين الكلمات في الفقرة

    لإعلام المتصفح أنك تريد وضع أكثر من مسافة فارغة وراء بعض في النص, فالحل هو استخدام الرمز &nbsp; الذي يعني مسافة فارغة بالنسبة للمتصفح.
    كل رمز &nbsp; تضعه يفهمه المتصفح على أنه مسافة فارغة يجب عدم إزالتها.


    في المثال التالي قمنا بإضافة 4 مسافات فارغة في بداية النص.

    مثال

    <p>&nbsp;&nbsp;&nbsp;&nbsp;We add 4 white spaces at the beginning.</p>

    جرب الكود

    الفقرات المخصصة لعرض النص كما هو

    لعرض النص كما يظهر بالضبط في الكود نضع النص بداخل <pre> </pre>.
    معلومة: pre إختصار لعبارة Preformatted Text التي تعني نص منسق مسبقاً.

    مبدئياً النص الوحيد الذي نعرضه كما هو في العادة هو حين نعرض كود في صفحة الويب لأننا نريده أن يظهر بنفس الشكل الذي تم إدخاله فيه.


    في المثال التالي قمنا بكتابة نص بداخل <pre> </pre> حتى يتم عرضه كما هو في المتصفح.

    مثال

    <pre>
    Name: Mhamad Harmush
    Job:  Programmer
    Age:  26
    </pre>
    		

    جرب الكود

    طريقة عرض كود HTML في الصفحة

    الشيء الوحيد الذي عليك التفكير فيه هو أنه يجب جعل المتصفح يعتبر الكود الذي كتبته نص عادي حتى لا يقرؤه ككود عادي و يعرض نتيجته في الصفحة.

    لجعل المتصفح يعتبر الكود المكتوب كأحرف عادية فهناك شيئان يضمنا ذلك:

    • تحويل كل < موجود في الكود إلى &lt;.
    • تحويل كل & موجود في الكود إلى &amp;.

    في المثال التالي قمنا بعرض كود HTML في الصفحة من خلال تبديل كل < موجود في الكود إلى &lt;.
    ملاحظة: وضعنا الكود بداخل <pre> </pre> حتى يتم عرضه بنفس الشكل الذي وضعناه فيه.

    مثال

    <pre>
    &lt;!DOCTYPE html>
    &lt;html>
        &lt;body>
            &lt;p>HTML &amp; CSS are so easy to learn&lt;/p>
        &lt;/body>
    &lt;/html>
    </pre>

    جرب الكود

    طريقة عرض خط أفقي

    لعرض خط أفقي في الصفحة نضع <hr> فقط.
    معلومة: hr إختصار لكلمة Horizontal Rule التي تعني مسطرة أفقية.


    في المثال التالي قمنا بعرض خط أفقي بين الفقرتين.

    مثال

    <p>In Harmash.com you can learn every thing you need for free.</p>
    <hr>
    <p>You can learn Algorithms, Java, C++, Python, SQL etc..</p>
    		

    جرب الكود

    إعلان

    Eqla3Tech.com

    شروحات مكتوبة حول لغات البرمجة و تقنية المعلومات باللغة العربية مقدمة من إقلاع تك.

    لغة جافا لغة ++C قواعد البيانات نظام ويندوز نظام لينكس الشبكات تقنية المعلومات الأمن السيبراني

    الدورات

    أدوات مساعدة

    الأقسام

    دورات
    مقالات أسئلة مشاريع كتب