لمحة عن البرمجه 
Published: 2019-11-20 23:17:30

#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 
وهي عبارة عن لغة ترميز صفحات الويب حيث انها تكون هيكل الصفحة، وهي طريقة منظمة لاخبار المتصفح عن كيفية عرض صفحة الويب.
يعني ايه لغة ترميز؟؟؟ لانها تتكون من علامات ترميز وتستخدم هذه العلامات لوصف صفحات الويب عادة تاتي هذه العلامات علي شكل ازواج واحيانا فردي وهي عبارة عن علامة فتح واغلاق 
هكذااااا 
<tag>...</tag> او 
<tag>

Example:-
Greeting Webpage 

<html>
  <head>
    <title>Greeting Webpage</title>
  </head>
  <body>
    Welcome to my webpage
  </body>
</html>
في هذا البوست مصمم لتعلم لغة HTML لأي شخص يحاول ويرغب في التعلم، ضع في اعتبارك ان هذا ما زال عملا قيد التقدم وليس شاملا علي الإطلاق، وبالإضافة إلى ذلك انا اكتب هذا سريعا الي حد ما ويقترح علي المشاركين استخدام مصادر تعلم مختلفة لمساعدتهم في التعلم.
إذا كنت تشعر ان قسم معين يفتقر الي التفاصيل او هناك اي خطا فغيره في كومنت حتي نتعلم تعلم صحيح وشكرااا.

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

HTML Structure:-

<html>
  <head>
    <title></title>
  </head>
  <body></body>
</html>

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

<tag>...</tag>
وممكن انها تيجي ع شكل ازواج اي فيها بدايه ونهايا مثل هذا 
<html>...</html>
او وسم بدايه فقط مثل 
<img>
وغيرهم كتير ......
Example:-
<html>
  <head>
    <title></title>
  </head>
  <body></body>
</html>

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

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

Line breaks and horizontal rules:-
الخطوط والفواصل 
1- <br>
تتجاهل المتصفحات اي فواصل انت بتعملها وعشان تبدا سطر جديد يبقا لازم تستخدم هذا <br> حتي تبدا سطر جديد.
2- <hr>
ولو عايزين نعمل خط عرضي يبقا نستخدم هذه الوسم حتي نفصل بين المحتوي الصفحة 
قم بوضع هذه الامثلة في محرر اكواد لتلاحظ الفرق.
Example:-
This is <br />
HTML
<hr />

Fonts and colours:-
<font>..</font>
<p>...</p>
وغيرهما بيستخدم في الخط 
Changing font colours:-
<p color="red">html </p>
<p color="#000">html </p>
ممكن نستخدم اسم اللون باللغة الانجليزية او نضع رمز # وبعديه كود اللون زي ماواضح فوق 

Changing font size:-
<p>html </p>
<p size="100px">html </p>
Px:- هي ترميز للوحدة زي الكيلو 

Changing font appearance:-
<p>html </p>
<p font-family="Verdana">html </p>
<p font-family="Arial">html </p>

Links:-
واضح من الاسم انها ربط الصفحات ببعضها او الذهاب لصفحة معين مثل حسابك  علي الفيسبوك وهكذا 
<a>...</a>
Example:-
<a href="http://www.example.com">Example</a>

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

1-ordered lists:-
القوائم المرتبة 
Example:-
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

2-unordered lists:-
القوائم غير المرتبة 
Example:-
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Nested list:-
تداخل القوائم 
Example:-
<ol>
  <li>Item 1
   <ul>
    <li>Item 1.1</li>
    <li>Item 1.2
     <ul>
      <li>Item 1.2.1</li>
      <li>Item 1.2.2</li>
      <li>Item 1.2.3</li>
     </ul>
    </li>
   </ul>
  </li>
  <li>Item 2</li>
  <li>Item 3
   <ul>
    <li>Item 3.1</li>
    <li>Item 3.2</li>
   </ul>
  </li>
</ol>

3-Definition lists:-
القوائم التعريف 
اي قوائم تستخدمها لتعرف اشياء مصطلحات اي بيكون هناك معرف وتعريف
Example:-
<dl>
    <dt>Term 1</dt><dd>Definition of the first term</dd>
    <dt>Term 2</dt><dd>Definition of the second term</dd>
    <dt>Term 3</dt><dd>Definition of the third term</dd>
  </dl>

Tables:-
الجداول
Tags...
<table> to declare a table.
لعمل جدول 
</table> to end the table.
انهاء عمل الجدول زي ماقولنل ان للوسوم بدايا ونهايااا
<tr> to declare the start of a new row.
صف جديد
<th> to declare the start of a new table header
راس جدول جديد
</th> to declare the end of a table header

</tr> to declare the end of a row.

<td> to declare a cell.
خلية
</td> to close a cell.

Example:-
<table>
<tr>
<td>TITLE 1</td>
<td>TITLE 2</td>
</tr>
<tr>
<td>Contents 1</td>
<td>Contents 2</td>
</tr>
<tr>
<td>Contents 3</td>
<td>Contents 4</td>
</tr>
</table>
-------------------------------------------
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:-
<div class="page">.....</div>
CSS ==> .myclass
Example:-
.page {background-color:blue;}

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

HTML==> id="myid"
Example:-
<div id="page">.....</div>
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

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