مشاريع برمجة جاهزة شرح تقني كامل لمشاريع جاهزة في اللغات المذكورة لغة HTML و CSS و JAVA Script
ملاحظة : قم بنسخ الكود البرمجي نسخ لصق من أعلى لأسفل دون القلق من كونه يظهر بشكل مرتب في هذا المقال لأن جميع الأكواد مجربه و تعمل بشكل سليم.. مشاريع برمجة جاهزة لغة HTML و CSS و JAVA Script
في سياق ذلك تعريفات اللغات:
- في البداية لغة ترميز النص الفائق (بالإنجليزية: HyperText Markup Language) (اختصار إتش تي إم إل HTML )، هي لغة ترميز تستخدم في إنشاء وتصميم صفحات ومواقع الويب، وتعتبر هذه اللّغة من أقدم اللّغات وأوسعها استخداما في تصميم صفحات الويب.
- صفحات التنسيق النمطية (بالإنجليزية: Cascading Style Sheets) اختصارًا: سي إس إس (بالإنجليزية: CSS)؛ هي لغة تنسيق لصفحات الويب تهتم بشكل وتصميم المواقع، صممت خصيصا لفصل التنسيق (الألوان – الخطوط – الأزرار….)
- ثالثاً جافا سكريبت أو في الغالب يطلق عليها اختصارًا JS هي لغة برمجة عالية المستوى تستخدم أساساً في متصفحات الويب لإنشاء صفحات أكثر تفاعلية. يتم تطويرها حالياً من طرف شركة موزيلا
معلومات عامة للشرح بالكامل :
- البرنامج المستخدم في كتابة الأكواد هو sublime إضغط للتحميل من هنا .
- وايضاً خذ الكود بالكامل نسخ لصق فقد ترك الموقع ميزة النسخ مفتوحة هنا لتسهيل الإستخدام على الزائر.
مشاريع جاهزة HTML و CSS و JAVA Script : ._.
1_ بإختصار مشروع إنشاء صفحة ويب و تقسيمها لعدة مناطق منها التروسية و التذييل للصفحة و الأقسام الجانبية و الوسطية.
الشكل العام للمشروع :
الكود البرمجي :
<!DOCTYPE html>
<html>
<head>
<title>Grid lay out</title>
<style type=”text/css”>
*{
font-size: 10
px;
}
.grid-container{
display: grid;
border-style: solid;
text-align: center;
grid-template-areas:
‘header header header header header header’
‘left middle middle middle middle right’
‘footer footer footer footer footer footer’;}
.left,
.middle,
.right{
padding: 5px;
border-style: solid;
height: 500px;
}.header{
grid-area: header;
background-color:green;
height: 100px;}
.left{
grid-area: left;
background-color: royalblue;}
.middle{
grid-area: middle;
background-color: yellowgreen;}
.right{
grid-area: right;
background-color: royalblue;}
.footer{
grid-area: footer;
background-color: lightblue;
height: 50px;
}</style>
</head>
<body>
<div class=”grid-container”>
<div class=”header”> Header
<img src=”free.png” style=”float:center;width: 100px;height: 150;”>
</div>
<div class=”left”> Left </div>
<div class=”middle”> Middle </div>
<div class=”right”>Right </div>
<div class=”footer”>Footer </div></div>
</body>
</html>
2_ مشروع جمع الأعداد من عدد معين لعدد معين أخر بإستخدام لغة html دالة sum .
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title></title></head>
<body>
<p id=”demo”></p>
<script >
var sum =0;
for (var i= 0;i<=10;i++){
sum=sum+i;
}
document.getElementById(“demo”).innerHTML= “The summation of 1 to 10 is :” + sum;</script>
</body>
</html
3_ مشروع صناعة جدول من صفوف و أعمدة و هو أول مشروع يحتاج الطالب تعلمه.
صورة من المشروع :
تعقيب يمكن التحكم في حجم و شكل الجدول عن طريق دالة المستخدمة في الكود :
grid-template-columns:AUTO AUTO AUTO;
grid-template-rows:AUTO AUTO AUTO;
الكود البرمجي:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title> the start editor</title>
<style>
.mohamed-hussein{
display:grid ;
grid-template-columns:AUTO AUTO AUTO;
grid-template-rows:AUTO AUTO AUTO;grid-gap: 10PX;
background-color:black ;
padding: 10px;}
.mohamed-hussein >div{
background-color:blue ;
color:rgba(255, 255, 100, 0.8) ;text-align:center;
padding: 20px ;
font-size: 30px;}
.m7{
grid-column: 1/4 ;}
</style>
</head>
<body>
<div class=”mohamed-hussein”>
<div class=”m m1″>0</div>
<div class=”m m2″>1</div>
<div class=”m m3″>2</div>
<div class=”m m4″>3</div>
<div class=”m m5″>4</div>
<div class=”m m6″>5</div>
<div class=”m m7″>6</div>
<div class=”m m8″>7</div>
<div class=”m m9″>8</div></body>
</html>
4_ مشروع إنشاء دالة إدخال للأسم الأول و ثم الثاني ثم طباعة الأسم الكامل.
صور التطبيق للمشروع:
الكود البرمجي للمشروع:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title></title>
</head>
<body>
<h1>Print out the tow names</h1>
<p id=”demo”></p>
<script>
var name1= prompt(“Enter First name:”);
var name2= prompt(“Enter Second name:”);
var name3 =name1 + name2;
alert(name3);
document.getElementById(“demo”).innerHTML= name3;
</script>
</body>
</html>
5_ إيجاد مضروب أي عدد عن طريق دالة إدخال مربع نصي factorial.
صورة المشروع:
كود برمجي للمضروب factorial:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>factorial n</title></head>
<body>
<p id=”demo”></||p>
<script>
function factorial(n){
var answer = 1;
if (n == 0 || n == 1){
return answer;
}else{
for(var i = n; i > 1; i–){
answer = answer * i;
}
return answer;
}
}
var n ;
n=prompt(“enter the number”);
answer = factorial(n)
document.getElementById(“demo”).innerHTML= “The factorial of ” + n + ” is ” + answer;</script>
</body></html>
6_ دالة document.write الإنتقال من الصفحة الحالية إلى صفحة جديدة و دالة الزر button:
صورة المشروع:
تعقيب صغير إستخدام document.write يفرق عن إستخدام document.getElementById في إن الأولى تنتقل إلى صفحة جديدة تماماً.
الكود البرمجي:
<!DOCTYPE html>
<html>
<head>
<title>javascript can change HTML content </title>
<h2>JavaScript in Body <br> what can java script do?</h2>
<script type=”text/javascript”>
function change_content(){
document.getElementById(“demo”).innerHTML=”Hello JavaScript!”;}
function change_content_using_write(){
document.write(‘using writ function_to display text Hello JavaScript! ‘);
}</script>
</head>
<body><p id=”demo”>JavaScript can change HTML content.</p>
<button type=”button” onclick=’change_content()’>click Me!</button>
<button type=”button” onclick=”change_content_using_write()”>click for using write!</button>
</body>
</html>
7_ مشروع إستخدام دالة الشرط if_condition للمقارنة و إخراج العدد الأكبر أو العكس.
صورة التطبيق:
كود برمجي :
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>if condition</title></head>
<body>
<p id=”demo”></p>
<p id=”demo1″></p>
<script>
var price1=20;
var price2=6;
var total=price1 + price2;document.getElementById(“demo”).innerHTML= “total=” + total;
if (price1 < price2) {
document.getElementById(“demo1”).innerHTML = “price2 is greater price1 and equal =” + price2 ;}
else{
document.getElementById(“demo1”).innerHTML = “price1 is greater price1 and equal =” + price1 ;
}
</script>
</body>
</html>
8_ أنواع الأزرار button الخاصة بالإدخال في لغة (html (input type:
صورة توضيح:
كود برمجي :
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title> input type</title></head>
<body><input type=”text” name=”input” size=”20px” placeholder=”enter your name”>
<input type=”submit” name=”name” value=”press”>
<input type=”checkbox” name=”name” value=”no”>no
<input type=”radio” name=”name” value=”male”>male
<br><textarea rows=”2″clos=”3″></textarea>
<select size=”2″ name=”option”>
<option>one</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select></body>
</html>
9_في مجال السياق إستخدام الأزرار للتحكم في ظهور صورة و التعديل عليها في الحجم للتكبير أو التصغير:
صور المشروع: تنبيه يجب أن يحتوي الملف الخاص بلغة html على الصورة المستخدمة في البرنامج.
الكود البرمجي الأول :
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>njidfhi</title>
<script type=”text/javascript”>
function function_name() {
document.getElementById(‘img’).src=’ pic_bulboff.gif’;}
function function_name2() {
document.getElementById(‘img’).src=’ pic_bulbon.gif’;
// body…
}</script>
</head>
<body>
<button type=”turn” onclick=”function_name()”> off</button>
<img id=”img” src=” pic_bulbonff.gif” width=”50px” align=”center”>
<button type=”turn” onclick=”function_name2()”> trun</button></body>
</html>
الكود البرمجي الخاص بالتحكم في حجم الصور بالمثل لما سبق.
صور المشروع: تنبيه يجب أن يحتوي الملف الخاص بلغة html على الصورة المستخدمة في البرنامج.
الكود البرمجي:
<html>
<body>
<img id=”image1″src=”balloon_PNG.png” width=”50″ height=”80″>
<button onclick=”fun()”>click me</button>
<script>
function fun(){
var w=document.getElementById(“image1”).width;
var h=document.getElementById(“image1”).height;
document.getElementById(“image1”).width=2*w;
document.getElementById(“image1”).height=2*h;
}
</script>
</body>
</html>
10_ بإختصار شديد دالة الإدخال في مربع منبثق prompt:
صورة المشروع:
كود البرمجة الخاص بها:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>Using prompt fuction</title>
</head>
<body>
<p id=”demo” ></p>
<script >
var name =prompt(“enter your name”);document.getElementById(“demo”).innerHTML= “hello ” + name + ” <br> how are you”
</script></body>
</html>
11_في البداية دالة الإخراج في صندوق منبثق alert:
صورة للتطبيق:
الكود البرمجي:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title></title>
</head>
<body>
<script>
alert(“I’m an \n alert”)
</script>
</body>
</html>
12_أولاً إستخدام أداة lable:
أداة العنوان Label Control. اسم يستخدم لتحديد أداة العنوان ، وعادة يبدأ بالحروف الثلاث lbl . العبارة التي سوف تظهر في أداة العنوان. يضبط أسلوب الخط ونوعه وحجمه الذي سوف يظهر في العنوان>>>
الكود البرمجي :
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>wiht css</title>
</head>
<body>
<forms action=”/action_page.php” name=”form20000″></form>
<label for=”firstname”>name:::</label>
<input type=”text”name=”los” id=”fname” placeholder=”enter”>
<input type=”submit” name=”name” value=”name”>
</body>
</html>
13_ علاوة على ذلك كود برمجي لإدخال عدد معين من الطالب ثم إدخال العلامات ثم إظهار المعدل لهم عن طريق المصفوفات Javascript array :
كود البرمجة :
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>Javascript array</title>
</head>
<body>
<p id =”demo”></p>
<script >
var i,sum = 0;
var average = 0;
var n = prompt(“enter number of students:”);var marks = new Array(n);
for (i=0;i<=n-1;i++){
marks[i]= prompt(“enter marks of student :”);
sum = sum+Number(marks[i]);
}
average = sum/n;
document.getElementById(“demo”).innerHTML= “The average of marks is = ” + average;
</script>
</body>
</html>
14_بالمثل يمكنك إستخدام الجداول في تنسيق صفحة تحتوي على أزرار التخكم كلها بجميع الأنواع:
صورة المشروع:
الكود البرمجي:
<!DOCTYPE html>
<html>
<head>
<style>
h1{
text-align: center;color: red;
}table {
float :right;
color: blue;
}</style>
</head>
<body><h1>ادوات التحكم الرئيسيه في جافاسكريبت</h1>
<table text-align: center;>
<tr>
<td ><input type = “text” name=”txt1″ value = “Check this checkbox”> </td>
<td> <input type = “checkbox” name =”btn1″ value =”checkbox”>check box</td>
</tr>
<tr>
<td ><input type = “text” name=”txt1″ value = “click this radio button”> </td>
<td> <input type = “radio” name =”btn1″ value =”checkbox”>radio button</td>
</tr>
<tr>
<td ><input type = “text” name=”txt1″ value = “Enter your password”> </td>
<td> <input type = “password” name =”pass1″ value =””></td>
</tr>
<tr>
<td ><input type = “button” name= “btn1” value = “This is a button control” > </td>
<td> <input type = “reset” name =”res1″ value =” click me!” ></td>
</tr>
</table>
<h1 ><br><br><br>هذه الصفحة تحتوي على ادوات التحكم الرئيسية منسقة بجدول </h1>
</body>
</html>
15_ إستخدام لغة css في تعديل شكل الصفحات ثم ربطها في الصفحة لإظهار التعديل :
حيث أننا نقوم بعمل صفحة برمجية بإمتداد css (أسم الصفحة .css) يمكن لنا أن نعدل الألوان و الشكل العام للصفحة ثم نقوم بربطها في صفحة html.
ثم نقوم بربطها في صفحة html :
صورة التنفيذ وهي طباعة كلمة css و اخذ اللون و الشكل من صفحة css أخرى:
الكود البرمجي للغة css :
p{font: 28px; color :red; font-size: 50px ;font-family: sans-serif;}
body{background-color: black;}الكود البرمجي للغة html كامل:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>css</title>
<link rel=”stylesheet” type=”text/css” href=”link.css”>
</head>
<body>
<p> css</p>
<p> css</p>
<p> css</p>
<p> css</p></body>
</html>
16_ دالة do _while في طباعة أعداد من رقم معين لرقم أخر سواء بالترتيب التنازلي أو التصاعدي:
صورة للتنفيذ:
كود البرمجة للتنفيذ :
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title></title>
</head>
<body>
<p id=”demo”></p>
<script>
var i=9;
var text =” “;
do{text=text +”<br> The number is ” + i;i–;}
while(i>=0);
document.getElementById(“demo”).innerHTML=text;
</script>
</body></html>
روابط داخلية لنفس الموقع في سياق الموضوع :
تحميل أي تطبيق أخر من التطبيقات التي تبحث عنها هواتف أندرويد من هنا click here
تحميل أي تطبيق أخر من التطبيقات التي تبحث عنها هواتف IOS من هنا click here
رابط شروحات تقنية و برمجية لباقي لغات البرمجة، click here
