بوتستراب (Bootstrap)‏ كانت تسمى سابقا "تويتر بوتستراب" (Twitter Bootstrap) هي مجموعة من الأدوات مفتوحة المصدر لإنشاء مواقع الويب وتطبيقاته. قامت شركة تويتر بتطويرها مع Jacob Thornton. وأنشئت لمساعدة المصممين والمطورين على بناء منتجات مذهلة بسرعة وفعالية الهدف منها توفير مكتبة واسعة مرنة وموثقة بشكل جيد للتصاميم “مكررة الاستعمال” المبنية باستخدام HTML وCSS وJavaScript كي يقوم المطورون باستعمالها والإبداع باستخدامها. توسع المشروع ليصبح يعرف بـ Bootstrap ويستقل عن تويتر لأنه كما صرح المسؤولون أصبح مشروعا كبير يتضمن العشرات من العناصر حيث أصبح المشروع الأكثر شعبية على موقع GitHub بعد أن حصل على أكثر من 13,000 متابع و2000 تطوير فرعي.

 مميزات Bootstrap Framework :

انتشر اطار عمل بوتستراب Bootstrap بشكل كبير منذ إطلاقه عام 2011 بشكل مجاني، وأحبه المبرمجون حول العالم ولم يكن ذلك بمحض الصدفة بل وراء نجاح هذا الاطار الكثير من الميزات الهامة ومنها:

1. المرونة الكبيرة والسهولة في الاستخدام.
2. التصميم المتوافق مع جميع الأجهزة.
3. يتوافق مع كافة المتصفحات.
4. يقدم تصميم ثابت وقابل لإعادة الاستخدام.
5. يمكن تعلمه بشكل سهل وسريع.
6. قابلية كبيرة للتوسع باستخدام لغة JavaScript.
7. يحوي دعمًا مسبقًا للـ JQuery.
8. دعم للـ API الخاصة بلغة Javascript.
9. يمكن استخدامها ضمن أي محررٍ أو بيئة برمجية.
10. يتوافق مع أي تقنية أو لغة ضمن السيرفر مثل: ASP.NET – PHP – Ruby.

أهم الأسباب التي تجعلك تتعلم البوتستراب وتستعمله في مشاريعك :

1- التجاوب مع الأجهزة اللوحية و الهواتف الذكية :

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

2- التوافق مع جميع المتصفحات:

البوتستراب متوافق ليس فقط مع المتصفحات الحديثة , بل أيضا يشكل حلا لمستخدمي "interner explorer 8" .

تابع إرشادات البوتستراب و تقيد بها ليكون موقعك متوافقا مع كل المتصفحات .

3- مفتوح المصدر:

بوتستراب مشروع مفتوح المصدر Open Source .. تم إصداره تحت رخصة أم أي تي "MIT" .و هو مستضاف على github .

و هذه أسباب تجعل من البوتستراب أداة قد لا يمكن الإستغناء عنها عند عدد كبير جداً من مصممي المواقع الإليكترونية .

 

محتويات فريم ورك Bootstrap:

يحتوي فريم ورك بوتستراب ( Bootstrap ) على مجموعة من الملفات البرمجية الخاصة بالواجهات، من ملفات CSS وملفات JavaScript وعناصر مختلفة ضمنها بالإضافة إلى بعض الخطوط والمواضيع التي تساعد على بناء موقع متناسق، حيث يقوم المبرمج بتضمين  الفريم ورك في المشروع البرمجي الذي يعمل عليه ليستخدم كل تلك الملفات والميزات الموجودة فيها، ويمكن أيضًا نقلها إلى أي مكانٍ ضمن المشروع حسب الرغبة مع التأكيد على ضرورة وضع ملفات الخط في مجلد ملفات الـ CSS، وهنا الهيكل العام للإطار يحوي الملفات الأساسية فقط ومن الواضح أنه بسيط ويشرح نفسه بنفسه كما هو موضح بالصورة.

ملحوظة :
يعد Bootstrap 4 أحدث إصدار من Bootstrap ، وهو أكثر إطار عمل HTML و CSS و JavaScript شيوعًا لتطوير مواقع الويب سريعة الاستجابة والمتوافقة مع الأجهزة المحمولة. Bootstrap 4 مجاني تمامًا للتنزيل والاستخدام.

ديسمبر 09, 2020

مزيد من المعلومات »

 

HTML Paragraphs:

 * تبدأ الفقرة دائمًا بسطر جديد ، وعادةً ما تكون كتلة نصية (block of text)

حيث يحدد عنصر P> HTML> فقرة معينة.

*تبدأ الفقرة دائمًا بسطر جديد ، وتضيف المتصفحات تلقائيًا بعض المسافات البيضاء (هامش) قبل الفقرة وبعدها.

مثال :

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

HTML Display:

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

باستخدام HTML ، لا يمكنك تغيير العرض عن طريق إضافة مسافات إضافية أو سطور إضافية في كود ال HTML الخاص بك.
حيث سيقوم المتصفح تلقائيًا بإزالة أي مسافات وأسطر إضافية عند عرض الصفحة.

مثال :

<p> This paragraph contains a lot of lines in the source code, but the browser ignores it. </p> <p> This paragraph contains a lot of spaces in the source code, but the browser ignores it. </p>  

 قواعد HTML الأفقية :

 

تحدد العلامة <hr> فاصلًا موضوعيًا في صفحة HTML ، وغالبًا ما يتم عرضها كقاعدة أفقية.

يُستخدم العنصر <hr> لفصل المحتوى (أو تحديد تغيير) في صفحة HTML.

 

مثال :

 

<h1>This is heading 1</h1> <p>This is some text.</p> <hr> <h2>This is heading 2</h2> <p>This is some other text.</p> <hr>  

ملحوظة : تاج <hr> هو علامة فارغة ، مما يعني أنه لا يحتوي على تاج إغلاق.

فواصل أسطر HTML :

يحدد عنصر <br> فاصل الأسطر.

استخدم <br> إذا كنت تريد فاصل أسطر (سطر جديد) بدون بدء فقرة جديدة.

مثال :  

<p>This is<br>a paragraph<br>with line breaks.</p>   

ملحوظة : تاج <br> هو علامة فارغة ، مما يعني أنه لا يحتوي على تاج إغلاق.

 

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

 

نوفمبر 12, 2020

مزيد من المعلومات »

HTML Headings : هي العناوين أو الترجمات التي تريد عرضها على صفحة الويب.

مثال :

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

 

*يتم تعريف HTML Headings بعلامات من <h1> إلى <h6>.
حيث يحدد <h1> العنوان الأكثر أهمية في الموقع ويحدد <h6> العنوان الأقل أهمية.

مثال :

<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>  

 *ملحوظة : تضيف المتصفحات بعض المسافات البيضاء (margin) قبل العنوان وبعده تلقائياً.

 أهمية HTML Heading :

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

*ملحوظة 1 : يجب استخدام عناوين <h1> للعناوين الرئيسية ، متبوعة بالعناوين <h2> ، ثم الأقل أهمية <h3> ، وهكذا.

*ملحوظة 2 : استخدم HTML Headings للعناوين فقط . لا تستخدم ال Headings لجعل النص كبير أو عريض.

*ملحوظة 3 : كل HTML Heading له حجم افتراضي. ومع ذلك ، يمكنك تحديد حجم أي عنوان باستخدام style attribute ، باستخدام خاصية font-size في CSS.

 مثال : 

<h1 style="font-size:60px;">Heading 1</h1>  

* يمكنك ايضاً مشاهدة الدرس بشكل مفصل من قناتنا على اليوتيوب ، اخيراً لا تنسي مشاركة الفيديو والاشتراك بالقناة حتى يصلك كل جديد...

 

نوفمبر 03, 2020

مزيد من المعلومات »

ما هي لغة HTML : 

لغة HTML هي اختصار لمصطلح Hyper Text Markup Language او بمعني لغة ترميز النص التشعبي وهي ليست لغة برمجة انما هي لغة توصيفية تفهمها المتصفحات مثل متصفح جوجل كروم وفايرفوكس واوبرا وسفاري وغيرها من المتصفحات.

 

ما هو دور لغة HTML :

لغة HTML تستخدم بشكل اساسي في تشكيل وبناء المواقع الالكترونية، ولكي تستطيع فهم ذلك انظر الى هذه الصورة.

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

ما هى لغة CSS :

لغة CSS وهى اختصار لمصطلح Cascading Style Sheet او بمعني ورقة الانماط المتتالية وحتى تعرف تماماً ماهو دور ووظيفة هذه اللغة انظر الى هذه الصورة.

كما ترى بالصورة هذا ايضاً منزل ولكن بعد اضافة الفورم والالوان المطلوبة هذا هو بكل تأكيد دور لغة CSS داخل المواقع الالكترونية.

ملحوظة: الاصدارات الموجوده الآن من لغة HTML و CSS هي HTML5 و CSS3. 

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

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

 

رابط الفيديو السابق ماهي البرمجة وما هي افضل لغات البرمجة في 2021 : https://www.youtube.com/watch?v=156mu...

أكتوبر 20, 2020

مزيد من المعلومات »

 *توفر HTML Attributes معلومات إضافية حول عناصر HTML. 

أهم مايميز سمات لغة HTML :

1- تحتوي جميع عناصر HTML على سمات (Attributes )

2- توفر السمات معلومات إضافية حول العناصر ( Elements)
3- يتم تحديد السمات دائمًا في علامة البداية
4- تأتي السمات عادةً في أزواج الاسم / القيمة مثل:  "name="value

 سمة The href Attribute :

تحدد العلامة <a> الارتباط التشعبي. تحدد السمة href عنوان URL للصفحة التي ينتقل إليها الارتباط.

مثال :

<a href="https://almo7asba-barmagt-excel.blogspot.com">Visit almo7asba-barmagt-excel.blogspot.com</a>  

سمة The src Attribute
تُستخدم علامة <img> لتضمين صورة في صفحة HTML. تحدد السمة src مسار الصورة المراد عرضها.

سمات العرض والارتفاع

يجب أن تحتوي علامة <img> أيضًا على سمات العرض والارتفاع ، والتي تحدد عرض الصورة وارتفاعها (in pixels)

 مثال :

<img src="img_girl.jpg" width="500" height="600">  

سمة The alt Attribute :

تحدد سمة alt المطلوبة لعلامة <img> نصًا بديلاً للصورة ، إذا تعذر عرض الصورة لسبب ما. قد يكون هذا بسبب الاتصال البطيء ، أو خطأ في السمة src ، أو إذا كان المستخدم يستخدم (screen reader).

 مثال :

 

<img src="pic-bulbon.gif" alt="lamp">  

سمة The Style Attribute :

 

تُستخدم سمة style لإضافة أنماط إلى أي عنصر، مثل اللون والخط والحجم والمزيد.  

 مثال :

<p style="color:red;">This is a red paragraph.</p>  

سمة The Lang Attribute :
يجب عليك دائمًا تضمين سمة lang داخل علامة <html> للإعلان عن لغة صفحة الويب. هذا يهدف إلى مساعدة محركات البحث والمتصفحات.

يحدد المثال التالي اللغة الإنجليزية كلغه للموقع:

 

<!DOCTYPE html> <html lang="en"> <body> ... </body> </html>  

أكتوبر 10, 2020

مزيد من المعلومات »

*يتم تعريف عنصر HTML بواسطة علامة البداية ثم كتابة المحتوى ثم علامة النهاية.

 عناصر HTML:
يتم تعريف عنصر HTML بواسطة علامة البداية ثم المحتوى وعلامة النهاية:

 <tagname> المحتوى يوضع هنا ... </tagname>

عنصر HTML هو كل شيء من علامة البداية إلى علامة النهاية:
<h1> عنواني الأول </ h1>
<p> فقرتي الأولى </ p>

 ملاحظة: بعض عناصر HTML ليس لها محتوى (مثل عنصر <br>). تسمى هذه العناصر بالعناصر الفارغة. العناصر الفارغة ليس لها علامة نهاية!

 عناصر HTML المتداخلة
يمكن أن تتداخل عناصر HTML (وهذا يعني أن العناصر يمكن أن تحتوي على عناصر أخرى).
تتكون جميع ملفات HTML من عناصر HTML متداخلة.
 

يحتوي المثال التالي على أربعة عناصر HTML (<html> و <body> و <h1> و <p>):

<!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>  

شرح المثال
1- عنصر <html> هو عنصر الجذر ويحدد ملف HTML بالكامل. 

 هذا العنصر يحتوي على علامة بداية <html> وعلامة نهاية </ html>.
ثم يوجد داخل عنصر <html> عنصر <body>:

2- يحدد العنصر <body> جسم الموقع الاكتروني.
ويحتوي على علامة بداية <body> وعلامة نهاية </ body>.
ثم يوجد داخل عنصر <body> عنصران آخران: <h1> و <p>:

3- يحدد العنصر <h1> العنوان. 

حيث يحتوي على علامة البداية <h1> وعلامة النهاية </ h1>:

4- يحدد العنصر <p> فقرة معينة. 

حيث يحتوي على علامة البداية <p> وعلامة النهاية </ p>

عناصر HTML الفارغة
*تسمى عناصر HTML التي لا تحتوي على محتوى بالعناصر الفارغة.
*تحدد العلامة <br> فاصل أسطر ، وهي عنصر فارغ بدون علامة إغلاق.

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

 

أكتوبر 10, 2020

مزيد من المعلومات »