This media is not supported in your browser
VIEW IN TELEGRAM
3 X 3 التصميم والتطوير
==============
html :
وهي اختصار ل
Hyper Text Markup Language
لغة html هى لغة تصميم مواقع وهى اول لغه تم استخدامها فى تصميم
صفحات المواقع وليس لها اى علاقة ببرمجة المواقع
وهى تتميز بالسهوله ويمكن لاى شخص تعلمها بسهوله
حيث يمكنك انشاء جداول وصور وعناوين وفقرات
وروابط وفيديوهات واغاني وتقسيم الصفحة ...الخ
css:
CSS هي اختصار لـ
Cascading Style Sheet
و هي تعني صفحات الأنماط الانسيابية
و تستخدم تقنية CSS في تصميم صفحات الويب
بحيث يتم من خلالها التحكم في شكل الموقع بالكامل
من حيث نوع الخط المستخدم أو لونه أو حجمه و ذلك دون الحاجة لكتابة تلك
الأكواد أو تكرارها في كل صفحة داخل الموقع
بالتالي فيمكن من خلال ملف واحد فقط إجراء أي تعديلات على كافة الملفات
javascript:
لغة JavaScript هي Object-base Scripting Language
وهي ليست لغة Java وإنما هي لغة مختلفة كُليًا تستخدم لمعالجة
او التلاعب (Maintaining) بالكائنات المرتبطة في صفحات الويبْ.
يستخدم لتحريك العناصر واضافة حيوية للموقع والتفاعل
python:
لغة Python هي لغة عالية المستوى مُفسَّرة ذات مجالٍ عام
وهي مرنةٌ وتحاول التعبير عن المفاهيم البرمجية بأقل قدر ممكن من الشيفرات
تدعم لغة Python البرمجة الكائنية والبرمجة الإجرائية
وفيها مكتبة قياسية كبيرة. بحيث يمكنك من خلال بايثون
1- برمجة مواقع عبر مكتبة دجانكو
2- تصميم تطبيقات اندرويد عبر مكتبة كيفي
3- برمجة برامج سطح المكتب عبر مكتبتي تكنتر وبايكيو5
4- يمكنك استخدام بايثون في مجال التحليل والهاكينج والامن والذكاء الاصطناعي
php :
لغة PHP (والتي هي اختصارٌ تعاودي للعبارة PHP: Hypertext Preprocessor)
هي لغةٌ مفتوحة المصدر شائعة الاستخدام لها مجال استخدامٍ عامٍ
لكنها تناسب تطوير الويب ودمج لغة HTML معها.
لذي يُميّز PHP عن الشيفرات التي تعمل في جهة العميل
مثل JavaScript هو أنَّ شيفرات PHP ستُنفَّذ على الخادم،
مما يولِّد شيفرة HTML التي ستُرسَل بعد ذلك إلى العميل
أي أنَّ العميل سيستلم ناتج تنفيذ شيفرة PHP ولن يعلم ما هي الشيفرة الأصلية التي ولَّدتها
sql:
SQL هي اختصارٌ للعبارة Structured Query Language (أي لغة الاستعلام البنوية)
وهي اللغة المستخدمة لإجراء عمليات على قواعد البيانات،
بما في ذلك إضافة أو تحديث أو حذف البيانات من قاعدة البيانات
أو لتعديل بينة قاعدة البيانات نفسها.
==============
html :
وهي اختصار ل
Hyper Text Markup Language
لغة html هى لغة تصميم مواقع وهى اول لغه تم استخدامها فى تصميم
صفحات المواقع وليس لها اى علاقة ببرمجة المواقع
وهى تتميز بالسهوله ويمكن لاى شخص تعلمها بسهوله
حيث يمكنك انشاء جداول وصور وعناوين وفقرات
وروابط وفيديوهات واغاني وتقسيم الصفحة ...الخ
css:
CSS هي اختصار لـ
Cascading Style Sheet
و هي تعني صفحات الأنماط الانسيابية
و تستخدم تقنية CSS في تصميم صفحات الويب
بحيث يتم من خلالها التحكم في شكل الموقع بالكامل
من حيث نوع الخط المستخدم أو لونه أو حجمه و ذلك دون الحاجة لكتابة تلك
الأكواد أو تكرارها في كل صفحة داخل الموقع
بالتالي فيمكن من خلال ملف واحد فقط إجراء أي تعديلات على كافة الملفات
javascript:
لغة JavaScript هي Object-base Scripting Language
وهي ليست لغة Java وإنما هي لغة مختلفة كُليًا تستخدم لمعالجة
او التلاعب (Maintaining) بالكائنات المرتبطة في صفحات الويبْ.
يستخدم لتحريك العناصر واضافة حيوية للموقع والتفاعل
python:
لغة Python هي لغة عالية المستوى مُفسَّرة ذات مجالٍ عام
وهي مرنةٌ وتحاول التعبير عن المفاهيم البرمجية بأقل قدر ممكن من الشيفرات
تدعم لغة Python البرمجة الكائنية والبرمجة الإجرائية
وفيها مكتبة قياسية كبيرة. بحيث يمكنك من خلال بايثون
1- برمجة مواقع عبر مكتبة دجانكو
2- تصميم تطبيقات اندرويد عبر مكتبة كيفي
3- برمجة برامج سطح المكتب عبر مكتبتي تكنتر وبايكيو5
4- يمكنك استخدام بايثون في مجال التحليل والهاكينج والامن والذكاء الاصطناعي
php :
لغة PHP (والتي هي اختصارٌ تعاودي للعبارة PHP: Hypertext Preprocessor)
هي لغةٌ مفتوحة المصدر شائعة الاستخدام لها مجال استخدامٍ عامٍ
لكنها تناسب تطوير الويب ودمج لغة HTML معها.
لذي يُميّز PHP عن الشيفرات التي تعمل في جهة العميل
مثل JavaScript هو أنَّ شيفرات PHP ستُنفَّذ على الخادم،
مما يولِّد شيفرة HTML التي ستُرسَل بعد ذلك إلى العميل
أي أنَّ العميل سيستلم ناتج تنفيذ شيفرة PHP ولن يعلم ما هي الشيفرة الأصلية التي ولَّدتها
sql:
SQL هي اختصارٌ للعبارة Structured Query Language (أي لغة الاستعلام البنوية)
وهي اللغة المستخدمة لإجراء عمليات على قواعد البيانات،
بما في ذلك إضافة أو تحديث أو حذف البيانات من قاعدة البيانات
أو لتعديل بينة قاعدة البيانات نفسها.
<!DOCTYPE html>
يحدد بيان وثيقه html5
يكون بدايه الصفحه ب
<html>
ولها تاج قفل لا ننساه
</html>
<head>
يحتوي عن المعلومات الوصفيه للصفحه
تاج القفل
</head>
<title></title>
يظهر غي شريط عنوان المتصفح
يكون داخل تاج ال head
<body></body>
العنصر الاساسي للصفحه
مثل العناوين و الفقرات والصور الخ..
<h1>
<h2>
<h3>
<h4>
<h5>
يحدد حجم العنصر من كبير الي صغير
<p></p>
لكتابه الفقرات
مثال
<p>
my frist paragraph
</P>
out:
my frist paragraph
مثلا نريد عمل مسافات
<p>
my
frist
paragraph
</p>
لو عمل هكذا لن يحدث مسافات سيكون المخرج هكذا
my frist paragraph
الطريقه الصحيحه نقوم باستخدام
<br>
هكذا
<p>
my <br> frist <br> paragraph
</p>
out:
my
frist
paragraph
استدعاء الصور
وهو من وسم
<img>
وليس له وسم اغلاق
<img src="photo.jpg" alt="photo" >
src مكان استدعاء الصورة
photo.jpg
اسم الصورة
مثلا الصورة داخل مجلد اسمه image
نستدعيها هكذا
<img src="image/photo.jpg">
وهكذا
alt
هكذا مثلا لو متصفحك لا يستطيع تحميل الصورة او حدث شي بالصورة يظهرلك لك كلمه photo الذي كتبتها
alt="photo"
الارتباط التشعبي
وسم
<a></a>
واختصار لكلمه
achor
يعني مرسل
مثال:
<a href="https://google.com" > google <a>
out:
سيكون مكتوب كلمه
google
وتحتها خط ازرق تضغط عليها تفتح goole
في نفس ال tab الي انت فيه
واذا تريد الرابط يفتح في tab اخر تستخدم _blank
هكذا
<a href="https://google.com" target="_blank"> google <a>
ووسم <a>
يستخدم في شي اخر
مثال
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<a href="#new"> chapter1 </a>
<a href="#new1"> chapter2 </a>
<h1>chapter 1<h1>
<P id="new">my frist paragraph</p>
<P>my frist paragraph</p>
<P>my frist paragraph</p>
<P>my frist paragraph</p>
<P>my frist paragraph</p>
<P>my frist paragraph</p>
<h1>chapter 2<h1>
<P id="new1">my frist paragraph</p>
<P>my frist paragraph</p>
<P>my frist paragraph</p>
<P>my frist paragraph</p>
<P>my frist paragraph</p>
<P>my frist paragraph</p>
<P>my frist paragraph</p>
</body>
</html>
عند تشغيله سيكون
مكتوب chpter1
chpter2
عند الضغط عليه ينقلك لهم
نتكلم عن الترميز العالمي
utf-8
الذي يدعم اللغه العربيه واللغه الانجليزية
يكون في وسم head
<head>
<meta charset="utf-8">
والنوع التاني يكون تحت الاسم عند البحث في الموقع يكون في الوصف
<meta name="descripion" contect="my frist project" >
نتكلم علي
link
لربط الصفحه بملف اخر
مثل css
<link rel="stylesheet" href="*">
مكان علامه *
نكتب الملف
نتكلم عن ال commant
<!--
هنا نكتب التعليق ولا يظهر في صفحة الويب
-->
#Html
@codedevelopment
يحدد بيان وثيقه html5
يكون بدايه الصفحه ب
<html>
ولها تاج قفل لا ننساه
</html>
<head>
يحتوي عن المعلومات الوصفيه للصفحه
تاج القفل
</head>
<title></title>
يظهر غي شريط عنوان المتصفح
يكون داخل تاج ال head
<body></body>
العنصر الاساسي للصفحه
مثل العناوين و الفقرات والصور الخ..
<h1>
<h2>
<h3>
<h4>
<h5>
يحدد حجم العنصر من كبير الي صغير
<p></p>
لكتابه الفقرات
مثال
<p>
my frist paragraph
</P>
out:
my frist paragraph
مثلا نريد عمل مسافات
<p>
my
frist
paragraph
</p>
لو عمل هكذا لن يحدث مسافات سيكون المخرج هكذا
my frist paragraph
الطريقه الصحيحه نقوم باستخدام
<br>
هكذا
<p>
my <br> frist <br> paragraph
</p>
out:
my
frist
paragraph
استدعاء الصور
وهو من وسم
<img>
وليس له وسم اغلاق
<img src="photo.jpg" alt="photo" >
src مكان استدعاء الصورة
photo.jpg
اسم الصورة
مثلا الصورة داخل مجلد اسمه image
نستدعيها هكذا
<img src="image/photo.jpg">
وهكذا
alt
هكذا مثلا لو متصفحك لا يستطيع تحميل الصورة او حدث شي بالصورة يظهرلك لك كلمه photo الذي كتبتها
alt="photo"
الارتباط التشعبي
وسم
<a></a>
واختصار لكلمه
achor
يعني مرسل
مثال:
<a href="https://google.com" > google <a>
out:
سيكون مكتوب كلمه
وتحتها خط ازرق تضغط عليها تفتح goole
في نفس ال tab الي انت فيه
واذا تريد الرابط يفتح في tab اخر تستخدم _blank
هكذا
<a href="https://google.com" target="_blank"> google <a>
ووسم <a>
يستخدم في شي اخر
مثال
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<a href="#new"> chapter1 </a>
<a href="#new1"> chapter2 </a>
<h1>chapter 1<h1>
<P id="new">my frist paragraph</p>
<P>my frist paragraph</p>
<P>my frist paragraph</p>
<P>my frist paragraph</p>
<P>my frist paragraph</p>
<P>my frist paragraph</p>
<h1>chapter 2<h1>
<P id="new1">my frist paragraph</p>
<P>my frist paragraph</p>
<P>my frist paragraph</p>
<P>my frist paragraph</p>
<P>my frist paragraph</p>
<P>my frist paragraph</p>
<P>my frist paragraph</p>
</body>
</html>
عند تشغيله سيكون
مكتوب chpter1
chpter2
عند الضغط عليه ينقلك لهم
نتكلم عن الترميز العالمي
utf-8
الذي يدعم اللغه العربيه واللغه الانجليزية
يكون في وسم head
<head>
<meta charset="utf-8">
والنوع التاني يكون تحت الاسم عند البحث في الموقع يكون في الوصف
<meta name="descripion" contect="my frist project" >
نتكلم علي
link
لربط الصفحه بملف اخر
مثل css
<link rel="stylesheet" href="*">
مكان علامه *
نكتب الملف
نتكلم عن ال commant
<!--
هنا نكتب التعليق ولا يظهر في صفحة الويب
-->
#Html
@codedevelopment
المدخلات input
تكتب هكذا </input>
طبعا مع اظافه type او نوع له
مثال :
<input type="text"/>
هنا نقول له ان المدخلات هي نص عادي
طبعا هناك انواع اخرى ل input
مثل :
email
password
checkbox
range
time
radio
number
file
submit
#Html
@codedevelopment
تكتب هكذا </input>
طبعا مع اظافه type او نوع له
مثال :
<input type="text"/>
هنا نقول له ان المدخلات هي نص عادي
طبعا هناك انواع اخرى ل input
مثل :
password
checkbox
range
time
radio
number
file
submit
#Html
@codedevelopment
<div></div>
وهو يستخدم لتنسيق الصفحه وكتابه اكواد ايضا بداخله لتكون منسقه
وهو يستخدم لتنسيق الصفحه وكتابه اكواد ايضا بداخله لتكون منسقه
شرح وسم
label
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
</style>
</head>
<body>
<form name="register">
<label><!--تسميه حقل الادخال-->
Username
</label>
<input type="text"><!--المدخلات-->
<label><!--تسميه حقل الادخال-->
Password
</label>
<input type="password"><!--المدخلات-->
</form>
</body>
</html>
#html
@codedevelopment
label
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
</style>
</head>
<body>
<form name="register">
<label><!--تسميه حقل الادخال-->
Username
</label>
<input type="text"><!--المدخلات-->
<label><!--تسميه حقل الادخال-->
Password
</label>
<input type="password"><!--المدخلات-->
</form>
</body>
</html>
#html
@codedevelopment
استخدام placeholder
بداخل المدخل
يظهر كما ف الصور ف صندوق الادخال
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
</style>
</head>
<body>
<form name="register">
<label><!--تسميه حقل الادخال-->
Username
</label>
<input type="text" name="username" placeholder="type your name" ><!--المدخلات-->
<label><!--تسميه حقل الادخال-->
Password
</label>
<input type="password" name="password" placeholder="type your pass"><!--المدخلات-->
</form>
</body>
</html>
#html
@codedevelopment
بداخل المدخل
يظهر كما ف الصور ف صندوق الادخال
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
</style>
</head>
<body>
<form name="register">
<label><!--تسميه حقل الادخال-->
Username
</label>
<input type="text" name="username" placeholder="type your name" ><!--المدخلات-->
<label><!--تسميه حقل الادخال-->
Password
</label>
<input type="password" name="password" placeholder="type your pass"><!--المدخلات-->
</form>
</body>
</html>
#html
@codedevelopment
استخدام
maxlength
لتحديد عدد المدخل
كما ف الصورة حدد له 5
ولا يستطيع ادخال اكثر من 5
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
</style>
</head>
<body>
<form name="register">
<label><!--تسميه حقل الادخال-->
Username
</label>
<input type="text" name="username" placeholder="type your name" maxlength="5" ><!--المدخلات-->
<label><!--تسميه حقل الادخال-->
Password
</label>
<input type="password" name="password" placeholder="type your pass" ><!--المدخلات-->
</form>
</body>
</html>
#Html
@codedevelopment
maxlength
لتحديد عدد المدخل
كما ف الصورة حدد له 5
ولا يستطيع ادخال اكثر من 5
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
</style>
</head>
<body>
<form name="register">
<label><!--تسميه حقل الادخال-->
Username
</label>
<input type="text" name="username" placeholder="type your name" maxlength="5" ><!--المدخلات-->
<label><!--تسميه حقل الادخال-->
Password
</label>
<input type="password" name="password" placeholder="type your pass" ><!--المدخلات-->
</form>
</body>
</html>
#Html
@codedevelopment
عمل زر submin
مثل زر singup
كما ف الصورة
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
</style>
</head>
<body>
<form name="register">
<label><!--تسميه حقل الادخال-->
Username
</label>
<input type="text" name="username" placeholder="type your name" ><!--المدخلات-->
<br>
<label><!--تسميه حقل الادخال-->
Password
</label>
<input type="password" name="password" placeholder="type your pass" ><!--المدخلات-->
<br>
<input type="checkbox">
<label>Remember name</label>
<br>
<input type="submit" value="sing up">
</form>
</body>
</html>
#html
@codedevelopment
مثل زر singup
كما ف الصورة
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
</style>
</head>
<body>
<form name="register">
<label><!--تسميه حقل الادخال-->
Username
</label>
<input type="text" name="username" placeholder="type your name" ><!--المدخلات-->
<br>
<label><!--تسميه حقل الادخال-->
Password
</label>
<input type="password" name="password" placeholder="type your pass" ><!--المدخلات-->
<br>
<input type="checkbox">
<label>Remember name</label>
<br>
<input type="submit" value="sing up">
</form>
</body>
</html>
#html
@codedevelopment
This media is not supported in your browser
VIEW IN TELEGRAM
اضافه زر reset
لمسح ما كتبته
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
</style>
</head>
<body>
<form name="register">
<label><!--تسميه حقل الادخال-->
Username
</label>
<input type="text" name="username" placeholder="type your name" ><!--المدخلات-->
<br>
<label><!--تسميه حقل الادخال-->
Password
</label>
<input type="password" name="password" placeholder="type your pass" ><!--المدخلات-->
<br>
<input type="checkbox">
<label>Remember name</label>
<br>
<input type="submit" value="sing up">
<input type="reset">
</form>
</body>
</html>
#Html
@codedevelopment
لمسح ما كتبته
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
</style>
</head>
<body>
<form name="register">
<label><!--تسميه حقل الادخال-->
Username
</label>
<input type="text" name="username" placeholder="type your name" ><!--المدخلات-->
<br>
<label><!--تسميه حقل الادخال-->
Password
</label>
<input type="password" name="password" placeholder="type your pass" ><!--المدخلات-->
<br>
<input type="checkbox">
<label>Remember name</label>
<br>
<input type="submit" value="sing up">
<input type="reset">
</form>
</body>
</html>
#Html
@codedevelopment
This media is not supported in your browser
VIEW IN TELEGRAM
اضافة
input
لرفع الملفات
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
</style>
</head>
<body>
<form name="register">
<label><!--تسميه حقل الادخال-->
Username
</label>
<input type="text" name="username" placeholder="type your name" ><!--المدخلات-->
<br>
<label><!--تسميه حقل الادخال-->
Password
</label>
<input type="password" name="password" placeholder="type your pass" ><!--المدخلات-->
<br>
<label>Upload your file</label>
<input type="file">
<br>
<input type="checkbox">
<label>Remember name</label>
<br>
<input type="submit" value="sing up">
<input type="reset">
</form>
</body>
</html>
#Html
@codedevelopment
input
لرفع الملفات
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
</style>
</head>
<body>
<form name="register">
<label><!--تسميه حقل الادخال-->
Username
</label>
<input type="text" name="username" placeholder="type your name" ><!--المدخلات-->
<br>
<label><!--تسميه حقل الادخال-->
Password
</label>
<input type="password" name="password" placeholder="type your pass" ><!--المدخلات-->
<br>
<label>Upload your file</label>
<input type="file">
<br>
<input type="checkbox">
<label>Remember name</label>
<br>
<input type="submit" value="sing up">
<input type="reset">
</form>
</body>
</html>
#Html
@codedevelopment