Programming

ينقسم المجال ده لقسمين وهم
1- web design (frond end)
2- programming language (back end)

1- web design
الويب ديزاين بنستخدمها لنصمم شكل وهيكل الموقع من خلال بعض لغات التصميم وهي
1- html
https://www.w3.org/html/

https://www.w3schools.com/html/

https://developer.mozilla.org/en-US/docs/Web/HTML

https://www.tutorialspoint.com/html/index.htm
2- css
https://www.w3schools.com/css/

https://developer.mozilla.org/en-US/docs/Web/CSS

https://css-tricks.com/
3- javascript
https://www.w3schools.com/js/

https://developer.mozilla.org/en-US/docs/Web/JavaScript

https://javascript.info/
ملحوظة صغير لغة javascript لغة تصميم وبرمجه

HTML
Introduction:-
HTML هي اختصار لجملة Hypertext Markup Language
وهي عبارة عن لغة ترميز صفحات الويب حيث انها تكون هيكل الصفحة، وهي طريقة منظمة لاخبار المتصفح عن كيفية عرض صفحة الويب.
يعني ايه لغة ترميز؟؟؟ لانها تتكون من علامات ترميز وتستخدم هذه العلامات لوصف صفحات الويب عادة تاتي هذه العلامات علي شكل ازواج واحيانا فردي وهي عبارة عن علامة فتح واغلاق
هكذااااا
... او

Example:-
Greeting Webpage

 

    Greeting Webpage
 
 
    Welcome to my webpage
 

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

Prerequisites:-
لا يوجد اي متطالبات و معرفة مسبقة عن تصميم المواقع.

HTML Structure:-

 

   
 
 

...:-
بداية صفحة HTML علي الويب.

..:-
تحتوي بداخلاها علي علامات لا يراها المستخدم.
:-
يحتوي بداخله علي عنوان الصفحة.
:-
يحتوي بداخله علي محتوي الصفحة الذي سوف يظهر للمستخدم.
HTML tags:-
زي ما قولنا فوق ان دي وسوم تستخدم لتكون بداية او نهاية اي كود او اضافه احنا عايزين نكتبها في هذه اللغة
Example:-

...
وممكن انها تيجي ع شكل ازواج اي فيها بدايه ونهايا مثل هذا
...
او وسم بدايه فقط مثل

وغيرهم كتير ......
Example:-

 

   
 
 

Basic formatting:-
بعض التنسيقات في HTML.
تستخدم هذه العلامات لتنسيق صفحتك وجعلها اكثر اهتماما وقراءاااا مثل .....
Bold, italics, underline and strikeout:-
1- ...:-
تستخدم هذه لتضخيم الخط وجعله اكثر اهتماما.
Example:-
Bold text!
قم بوضع هذه الامثلة في محرر اكواد لتلاحظ الفرق.
2- ...:-
يستخدم هذا الوسم ليكون الخط مائل Italics
Example:-
This text is in italics

Nesting Tags:-
التداخل
ازاي اي يوجد وسم داخل وسم اخر 
Example:-
Not....
This is wrong
True...
Like this

Line breaks and horizontal rules:-
الخطوط والفواصل
1-

تتجاهل المتصفحات اي فواصل انت بتعملها وعشان تبدا سطر جديد يبقا لازم تستخدم هذا
حتي تبدا سطر جديد.
2-

---

ولو عايزين نعمل خط عرضي يبقا نستخدم هذه الوسم حتي نفصل بين المحتوي الصفحة
قم بوضع هذه الامثلة في محرر اكواد لتلاحظ الفرق.
Example:-
This is

HTML

---

Fonts and colours:-
..

...

وغيرهما بيستخدم في الخط
Changing font colours:-

html

html

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

Changing font size:-

html

html

Px:- هي ترميز للوحدة زي الكيلو

Changing font appearance:-

html

html

html

Links:-
واضح من الاسم انها ربط الصفحات ببعضها او الذهاب لصفحة معين مثل حسابك  علي الفيسبوك وهكذا
...
Example:-
Example

Lists:-
يوجد 3 انواع من القوائم في هذه اللغة
ordered lists
unordered lists
definition lists

1-ordered lists:-
القوائم المرتبة
Example:-

 
1. Item 1
 
2. Item 2
 
3. Item 3

2-unordered lists:-
القوائم غير المرتبة
Example:-

 
• Item 1
 
• Item 2
 
• Item 3

Nested list:-
تداخل القوائم
Example:-

 
1. Item 1   
      
   • Item 1.1
      
   • Item 1.2     
          
     • Item 1.2.1
          
     • Item 1.2.2
          
     • Item 1.2.3
         
        
     
    
 
2. Item 2
 
3. Item 3   
      
   • Item 3.1
      
   • Item 3.2
     
    

3-Definition lists:-
القوائم التعريف
اي قوائم تستخدمها لتعرف اشياء مصطلحات اي بيكون هناك معرف وتعريف
Example:-

   

Term 1

Definition of the first term

   

Term 2

Definition of the second term

   

Term 3

Definition of the third term

 

Tables:-
الجداول
Tags...

to end the table. انهاء عمل الجدول زي ماقولنل ان للوسوم بدايا ونهايااا to declare the start of a new row. صف جديد to declare the start of a new table header راس جدول جديد to declare the end of a table header to declare the end of a row. to declare a cell. خلية to close a cell. Example:-

---

Css هي اختصار ل Cascading Style Sheet.
اي
C  Cascading.
S  Style.
S  Sheet.
واي بقا هي الل CSS
هي لغة تستخدم لتصميم صفحات الويب مع HTML.
Syntax:-
ازاي بنبني جملة css
Introduction:-
تكتب جملة css كالتالي..
selector{property:value;}
selector ----» العنصر المراد التطبيق عليه هذه الخاصية
property ---» الخاصية
value ------» القيمة
Example:-
body{background-color:blue;}
/* Blue background color /
⬆⬆وهذاهو التعليق في CSS
/...*/
//....

Basic Selectors:-
المحددات الاساسية
المحددات هي بتكون عبار عن عناصر تستخدم للتطبيق علي الصفحة
ايه بقا المحددات دي ؟؟؟
1-  *  :Universal selector
يختار جميع عناصر الصفحة
Example:-

• {background-color:blue;}

Class/Id:
هم عبارة عن اسم نعطيه لعناصر HTML لننادي عليها في لغة CSS لنطبق عليها خصائص اللغة.

2- .myclass :Class selectors
HTML==> class="myclass"
Example:-

.....

CSS ==> .myclass
Example:-
.page {background-color:blue;}

3- #myid :Identifier selectors, they have to be unique

HTML==> id="myid"
Example:-

.....

CSS ==> #myid
Example:-

page {background-color:blue;}

ويوجد محدد اخر نستخدمه وهو ذكر عناصر لغة HTML
Example:-
body{background-color:blue;}

Colors:-
في تلات انواع ممكن نكتب بيهم كود اللون
1- By name
بستخدام الاسم
Example:-
body{background-color:blue;}

2- By code RGB (red, green, blue)
وهو تحديد اللون من خلال تلات اللوان
Example:-
h1{color:rgb(10,60,110);}

3- By hexadecimal value
وهنا بستخدام الشباك # وكود اللون
Example:-
p{color:#3300FF;}

Text styles:-
1- font-style:-
تستخد هذه الخاصية لتحديد شكل الخط ويوجد في هذه الخاصية ثلاث انواع وهما...
normal, italic, and oblique
Example:-
p#t1 { font-style: normal; }
p#t2 { font-style: italic; }
p#t3 { font-style: oblique; }

2- font-weight:-
وفي هذه الخاصية يوجد نوعين من التطبيق
normal, bold
او ممكن نستخدم الارقام في تحديد عرض الخط
p#t1 { font-weight: normal; }
p#t2 { font-weight: bold; }
p#t3 { font-weight: 100px; }

3- font-size:-
تحديد حجم الخط
p#t1 { font-size: 30px; }
p#t2 { font-size: 1.5em; }
p#t3 { font-size: 100px; }

Examples:-

• {color :blue ;} h1 {color :red ;} h1 h2 {color :yellow ;} p { font-size: 100px; } .page { font-style: italic; } #page { font-style: italic; }

---

JavaScript
استنو بوست لوحده عنهاا☺️☺️

---

2- programming language
البرمجه هي كل شي يحدث خلف الكواليس من خلاص استخدام بعض اللغات البسيطة السهله😂😂 طبعاا فمثلا
1- web
JavaScript
Java
https://www.java.com/en/

https://www.w3schools.com/java/

https://docs.oracle.com/javase/tutorial/

https://www.tutorialspoint.com/java/index.htm
Python
https://docs.python.org/3/tutorial/

https://www.w3schools.com/python/

https://www.tutorialspoint.com/python/index.htm
Php
https://www.learn-php.org/
Ruby
https://www.rubyguides.com/ruby-tutorial/
C++
http://www.cplusplus.com/doc/tutorial/
C
https://www.tutorialspoint.com/cprogramming/index.htm
Shell
C#
https://www.w3schools.com/cs/
R
https://www.statmethods.net/r-tutorial/index.html
Go
https://tour.golang.org/welcome/1
Perl.
https://www.perltutorial.org/
وغيرهما

2- smart phone
1- android

ودي بستخدم فيها لغة java و
kotlin
https://kotlinlang.org/docs/tutorials/
2- ios
اما بقا ده هي لغة
swift
https://docs.swift.org/swift-book/GuidedTour/GuidedTour.html

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