مشروع بسيط بعدة لغات وهي Html & Css & java script
المشروع عبارة عن ثلاث اقسام
وهو عبارة عن موقع للألعاب مثلا او للأفلام او عرض منتجات او .......
كل شخص يستطيع تغيير بما يريد به وما وضعته إلا رغبة في نشر العلم
وهو مقسم الى اربعة اقسام
القسم الاول وهي الواجهة الرئيسية
القسم الثاني الاقسام الداخلية
القسم الثالث المواضيع التي بداخل لاقسام
والرابع صفحة الاتصال والتواصل
صفحة الاتصال تحتاج الى php لكي تعمل ولكنني تركتهها لعدم كفابة علمي بها واتمنا من اي شخص ان يطورها ويشرحها لنا
نبدأ بعون الله :
ساضع الصفحة والمثال ثم الكود وبعده الشرح وقد تجد اخي العزيز انيي اشرح
اشياء بسيطة ولكنني احب ان اشرح كل شيئ لكي لا يواجه احد مشاكل واي سؤال
انا حاضر وستجد اخي ان هناك بعض الاخطاء مثل :
اولا هناك صفات واضعها مباشرة في html وليس في css وانا قصدت ذلك لان هناك اناس لم تتعلم ال css بعد
يارب
اولا الصفحة الرئيسية وهي واجهة الموقع
الكود :
رمز Code:
<html>
<head>
<!-- Title -->
<title>BEST MOVIES 2012</title>
<!-- meta -->
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<!-- javascript -->
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/custom.js" type="text/javascript"></script>
<script src="js/js.js" type="text/javascript"></script>
<!-- CSS -->
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<!-- body page -->
<body bgcolor="#333300" text="#FFFFFF" background="images/1.gif">
<!-- الترويسة -->
<h1 ><center>BEST MOVIES 2012</center></h1>
<marquee alien="center" bgcoloe="red" loof="10" hspace="4" vspace="4">
Coding and Desebin By :FENIX
</marquee><br />
<!-- الافلام -->
<br /><table cellpadding="4" cellspacing="4" align="center" border="3" background="images/body.gif">
<!-- Animation Movies -->
<tr>
<td align="center"><p>Animation Movies </p>
<br /><a href="Animation/index.html" target="_self" title="Animation"><img src="Animation/index.jpg" width="33%" height="33%" /></a>
</td>
<!-- Action Movies -->
<td align="center"><p>Action Movies</p>
<br /><a href="Action/index.html" target="_self" title="Action movies"><img src="Action/index.jpg" width="33%" height="33%" /></a>
</td>
<!-- Romance & comedian -->
<td align="center"><p>Romance & comedian</p>
<br /><a href="Romance & comedian/index.html" target="_self" title="Romance & comedian"><img src="Romance & comedian/index.jpg" width="33%" height="33%" /></a>
</td>
</tr>
</table> <br />
<table align="center">
<tr>
<td> <a href="Contact.html"><img class="con" /></a></td>
</tr>
</table>
<!-- نهاية الجدول -->
<br />
<span style="color: red"><center>Coding and Desebin By : FENIX <sup>®</sup></center></span>
<br />
</body>
</html>
بعون اله سأبدأ بشرح الاكواد :
اولا الهيد
رمز Code:
<html>
<head>
<!-- Title -->
<title>BEST MOVIES 2012</title>
<!-- meta -->
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<!-- javascript -->
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/custom.js" type="text/javascript"></script>
<script src="js/js.js" type="text/javascript"></script>
<!-- CSS -->
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
سنبدأ باول سطر :
رمز Code:
<title>BEST MOVIES 2012</title>
وهو عنوان المشروع
رمز Code:
<!-- meta -->
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
وهنا الترميز الخاص ووضعته بالترميز العالمي utf -8
الن بعد ذلك ضمنت ثلالث ملفات وهي
رمز Code:
<!-- javascript -->
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/custom.js" type="text/javascript"></script>
<script src="js/js.js" type="text/javascript"></script>
وهي ملفات جيكويري من اجل الحركات وسنشرحها عندما ياتي دورها
وبعد ذلك باستدعاء ملف css من اجل التصميم
رمز Code:
<link href="css.css" rel="stylesheet" type="text/css" />
وسأشرحه بعون الله
الى هنا انتهينا من الهيد
ناتي الان الى جسم الصفحة اي الي البدي
رمز Code:
<body bgcolor="#333300" text="#FFFFFF" background="images/1.gif">
الان هنا لم استخدم css فيه حيث وضعت لون للخلفية #333300
ولون للخط #FFFFFF
وصورة للخلفية
background="images/1.gif"
رمز Code:
<h1 >BEST MOVIES 2012</h1>
وهنا الترويسة والتي ستكون عنوان الصفحة ووضعتها بوسم h1
من اجل ان يكون حجمها كبير
الان في ال css الخاص بال body
رمز Code:
body{
font-family: "Hobo Std";
font-size: 14px;
border: 10px 10px 10px 10px;
}
الخط المستخدم من نوع :Hobo Std
وحجم الخط بالبكسل 14
والتباعدات 10بكسل من كل الاطراف
رمز Code:
h1{
color:red;
text-align: center;
هنا من اجل الترويسة
اللون احمر
وجعل المحاذاة في وسط الصفحة
الان
رمز Code:
<marquee alien="center" loof="10" hspace="4" vspace="4">
Coding and Desebin By :FENIX
</marquee><br />
وسم marquee قد لا يعرفه اغلبنا وهو وصف قديم يستخدم لجعل النص متحرك واستخدمت فيه عدة صفات مثل
alien="center" : المحاذاة في الوسط
loof="10" عدد مرات التكرار
hspace="4" التباعد الافقي
vspace="4 التباعد العامودي
وافي ملف ال css استخدمت له
رمز Code:
marquee{
color: blue;
direction: rtl;
margin: 10px 0px 20px 0px;
}
اللون ازرق
والمسار من اليمين الى اليسار
والمرجين 10px 0px 20px 0px
الان سنبدأ بمحتوى المشروع
قبل وضع الكودات ساعطي الفكرة
قمت بإنشاء جدول عبارة عن 3 اعمدة فقط وكل جدول سيكون للدخول الى قسم خاص
في الجدول قسمين الاول وسيكون العنوان وسيكون ترويسة H2
وفي الاسفل صورة عن الضغط عليها سيدخل الى القسم
لنشاهد الكودات
رمز Code:
<br /><table cellpadding="4" cellspacing="4" align="center" border="3" background="images/body.gif">
استخدمت وسم table ومعه الخصائص التالية :
cellpadding="4" و ellspacing="4"
يمكن وضع 3 ب 1 ولكن وضعته 4 من اجل اذا احب احد اي يضع اكثر من ثلاثة اقسام
سنبدء باول قسم والاقسام الثانية مشابهة تماما له
رمز Code:
<!-- Animation Movies -->
<tr>
<td align="center"><p>Animation Movies </p>
<br /><a href="Animation/index.html" target="_self" title="Animation"><img src="Animation/index.jpg" width="33%" height="33%" /></a>
</td>
<!-- Action Movies -->
<td align="center"><p>Action Movies</p>
<br /><a href="Action/index.html" target="_self" title="Action movies"><img src="Action/index.jpg" width="33%" height="33%" /></a>
</td>
سأبدء بالعنوان
رمز Code:
<td align="center">
<p>Animation Movies </p>
جعلت المحاذاة بالوسط
ووضعت الاسم بين وسمي p
وفي ملف css استخدمت
رمز Code:
p{
padding:2%;
display: block;
background-image: url(images/2.gif);
height: 33px;
background-repeat: repeat-x;
}
البايدنغ 2 في المية
وجعلته بلوك
وضعت صورة للخللفية
مع التكرار على x
ووحددت الارتفاع بقدر 33 بكسل
جعلت له هوفر عن مرور الماوس
رمز Code:
p:hover{
color: #0099FF;
background-image: url(images/4.gif);
background-repeat: repeat-x;
}
غيرت من الللون الى #0099FF
ووضعت رابط صورة الخلفية الجديدة
ووضعت التكرار على x
الان انتهينا من العنوان وسننتقل الى الصورة التي ستدخانا الى القسم عند الضغط عليها
رمز Code:
<br /><a href="Animation/index.html" target="_self" title="Animation"><img src="Animation/index.jpg" width="33%" height="33%" /></a>
وضع اولا وسم الرابط وهو <a>
وفي خياراته href وضعت رابط الذي اريد التوجه الليه عند الضغط
target="_self"
لكي يتم الفتح في نفس الصفحة ويمكن الاستغناء عنه
title
وهي للعنوان ويمكن استبدالها بالوسم alt
حيث عند تعذر الوصول للصورة يظهر
انتهينا من وسم لرابط <a>
الان الصورة وضعتها داخل للينك
استخدمت وصف الصورة <img>
وفيه الخصائص التالية src وهي رابط الصورة
width العرض
hieght الطول
وهكذا انتهينا من اول قسم
والااقسام الثانية مثلها
الان انتهينا من الجدول
الان عملت جدول صغير لكي اضع به الاتصال بنا وهو خانة واحدة بها صورة واحدة
رمز Code:
<table align="center">
<tr>
<td> <a href="Contact.html"><img class="con" /></a></td>
</tr>
</table>
وكما ترون الوصوق بسيطة ولكن
مع وسم ال img وضعت كلاس اسميته con
استدعيته في ملف الcss
رمز Code:
.con{
background-image: url(images/aa.png);
height: 60px;
width: 193px;
}
جعلت صورة للخلفية
حددت الارتفاع والطول
وجعلت للصورة هوفر
رمز Code:
.con:hover{
background-image: url(images/bb.png);
height: 60px;
width: 193px;
}
حيث عند مرور الماوس تظهر الصورة الثانية
الان الحقوق في الفوتور
رمز Code:
<span style="color: red"><center>Coding and Desebin By :FENIX <sup>®</sup></center></span>
استخدمت هنا عدو وسوم منها
span من اجل الفقرات ووضعت له في ال css خصائص هي
رمز Code:
span{
background-image: url(images/3.gif);
background-repeat: repeat-x;
}
الى هنا انتهينا من الصفحة الرئيسية
رمز Code:
<br />
</body>
</html>
ولكن يجب ان اشرح وسم داخل ال css
ونا استخدمت لا css3
حيث جعلت ترانسفير للصورة
واستخدمت وسم ال sup لرفع الاشارة اعلا من النص
رمز Code:
img{-moz-transition: all 1.1s ease-in-out;
-webkit-transition: all 1.1s ease-in-out;
-o-transition: all 1.1s ease-in-out;
-ms-transition: all 1.1s ease-in-out;
transition: all 1.1s ease-in-out;
border: medium;
display: table;
width: 300px;
height: 500px;
margin:-5px -5px 10px -5px;
}
وجعلت هوفر من اجل التدوير
رمز Code:
img:hover{
-moz-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
-o-transform: rotate(15deg);
-ms-transform: rotate(15deg);
transform: rotate(15deg);
box-shadow: 0 0px 20px #000;
border: medium;
display: table;
width: 300px;
height: 500px;
margin:-5px -5px 10px -5px;
}
حيث جعلت الدوران بزاوية 45 درجة
هنا انتهيا من الصفحة الرئيسية الان سوف ننتقل الى الالقسام
وساشرح قسم لان لاقسام الثانية مشابهة له تماما ارجو من لله التوفيق
اولا الصفحة
رمز Code:
<html>
<head>
<!-- Title -->
<title>BEST AcTion MOVIES 2012</title>
<!-- meta -->
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<!-- javascript -->
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/custom.js" type="text/javascript"></script>
<script src="../js/js.js" type="text/javascript"></script>
<link href="../css.css" rel="stylesheet" type="text/css" />
<!-- CSS -->
</head>
<!-- body page -->
<body bgcolor="#333300" text="#FFFFFF" background="1.gif">
<!-- الترويسة -->
<h1 ><center>BEST AcTion MOVIES 2012</center></h1>
<!-- الافلام -->
<table cellpadding="4" cellspacing="4" align="center" border="3" background="body.gif">
<tr>
<td> <a href="../Romance & comedian/index.html"><img class="memo1" /></a></td>
<td>
<center>
<a href="../index.html"><img class="memo2" /></a>
</center>
</td>
<td> <a href="../Animation/index.html"><img class="memo3" /></a>
</td>
</tr>
<!-- الصف الاول -->
<tr>
<td align="center"><p>INCEPTION 2010</p>
<br /><a href="INCEPTION.html" target="_self" title="INCEPTION 2010"><img src="INCEPTION 2010/poster.jpg" width="33%" height="33%" /></a>
</td>
<td align="center"><p>Killer Elite 2011</p>
<br /><a href="Killer.html" target="_self" title="Killer Elite 2011"><img src="Killer Elite 2011/poster.jpg" width="33%" height="33%" /></a>
</td>
<td align="center"><p>Let Me In 2010</p>
<br /><a href="Let.html" target="_self" title="Let Me In 2010"><img src="Let Me In 2010/poster.jpg" width="33%" height="33%" /></a>
</td>
</tr>
<!-- الصف الثاني -->
<tr>
<td align="center"><p>Percy Jackson and the Olympians (2010)</p>
<br /><a href="parcy.html" target="_self" title="Percy Jackson and the Olympians (2010)"><img src="Percy Jackson and the Olympians (2010)/poster.jpg" width="33%" height="33%" /></a>
</td>
<td align="center"><p>Red 2010</p>
<br /><a href="Red.html" target="_self" title="Red 2010"><img src="Red/poster.jpg" width="33%" height="33%" /></a>
</td>
<td align="center"><p>saw</p>
<br /><a href="saw.html" target="_self" title="saw"><img src="saw/poster.jpg" width="33%" height="33%" /></a>
</td>
</tr>
<!-- الصف الثالث -->
<tr>
<td align="center"><p>Shutter Island (2010)</p>
<br /><a href="Shutter.html" target="_self" title="Shutter Island (2010)"><img src="Shutter Island (2010)/poster.jpg" width="33%" height="33%" /></a>
</td>
<td align="center"><p>Stonehenge Apocalypse JA</p>
<br /><a href="Stonehenge.html" target="_self" title="Stonehenge Apocalypse JA"><img src="Stonehenge Apocalypse JA/poster.jpg" width="33%" height="33%" /></a>
</td>
<td align="center"><p>The Expendables</p>
<br /><a href="The Expendables.html" target="_self" title="The Expendables"><img src="The Expendables/poster.jpg" width="33%" height="33%" /></a>
</td>
</tr>
<!-- الصف الرابع -->
<tr>
<td align="center"><p>THE PUNISHER </p>
<br /><a href="THE PUNISHER.html" target="_self" title="THE PUNISHER"><img src="THE PUNISHER/poster.jpg" width="33%" height="33%" /></a>
</td>
<td align="center"><p>The Sorcerer and the White Snake 2011</p>
<br /><a href="The Sorcerer.html" target="_self" title="The Sorcerer and the White Snake 2011"><img src="The Sorcerer and the White Snake 2011/poster.jpg" width="33%" height="33%" /></a>
</td>
<td align="center"><p>THE SORCERER'S APPRENTICE</p>
<br /><a href="THE SORCERER'S.html" target="_self" title="THE SORCERER'S APPRENTICE"><img src="THE SORCERER'S APPRENTICE/poster.jpg" width="33%" height="33%" /></a>
</td>
</tr>
<!-- الصف الخامس -->
<tr>
<td align="center"><p>The Tourist 2010</p>
<br /><a href="The Tourist.html" target="_self" title="The Tourist 2010"><img src="The Tourist 2010/poster.jpg" width="33%" height="33%" /></a>
</td>
<td align="center"><p>TRANSPOTER</p>
<br /><a href="TRANSPOTER.html" target="_self" title="TRANSPOTER"><img src="TRANSPOTER/poster.jpg" width="33%" height="33%" /></a>
</td>
<td align="center"><p>Undisputed 3 Redemption 2010</p>
<br /><a href="Undisputed.html" target="_self" title="Undisputed 3 Redemption 2010"><img src="Undisputed 3 Redemption 2010/poster.jpg" width="33%" height="33%" /></a>
</td>
</tr>
</table>
<!-- نهاية الجدول -->
<br />
<span style="color: red"><center>Coding and Desebin By : Mohamad Khalaf <sup>®</sup></center></span>
<br />
</body>
</html>
اولا الهيد
رمز Code:
<html>
<head>
<!-- Title -->
<title>BEST ANIMATION MOVIES 2012</title>
<!-- meta -->
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<!-- javascript -->
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/custom.js" type="text/javascript"></script>
<script src="../js/js.js" type="text/javascript"></script>
<link href="../css.css" rel="stylesheet" type="text/css" />
<!-- CSS -->
</head>
سبق وان شرحته في الرئيسية ولكن هنا يوجد شيئ اريد شرحه مثلا
رمز Code:
<link href="../css.css" rel="stylesheet" type="text/css" />
وضعت في الرابط نقطتين ثم سلاش ثو الملف
واقصدب ../
ان يعود مجلد الى الخلف لكي يستدعي الملف
فانا وضعت ملف ال css في المجلد الرئيسي وليس في مجلد القسم
نبدأ بجسم الصفحة اي
رمز Code:
<body bgcolor="#333300" text="#FFFFFF" background="1.gif">
بسيطة وجميلة وتم شرحها منذ قليل
الان ترويسة القسم اي العنوان القسم
رمز Code:
<h1 ><center>BEST AcTion MOVIES 2012</center></h1>
تم شرحه ولكن اريد التنويه لمن يعرف css لن يحتاج وسم center
لان في تعرف ال css للوسك h1 وضعت
رمز Code:
h1{
color:red;
text-align: center;
}
نبدء بالصفحة
عملت جدول هنا عبارة عن 15 موضوع
3 مواضيع بالعرض و 5 بالطول
رمز Code:
<table cellpadding="4" cellspacing="4" align="center" border="3" background="../images/body.gif">
والكود تم شرحه
جعلت البوردر 3 من اجل ان يظهر الجدول
الان هناك في بداية الجدول 3 ازرار
الاول يأخذك للقسم السابق
الثاني ياخذك للرئيسية التي تحوي الاقسام
الثالث ياخذك للقسم التالي
رمز Code:
<tr>
<td> <a href="../Romance & comedian/index.html"><img class="memo1" /></a></td>
<td>
<center>
<a href="../index.html"><img class="memo2" /></a>
</center>
</td>
<td> <a href="../Action/index.html"><img class="memo3" /></a>
</td>
</tr>
الان سناخذ اول واحد وهو القسم السابق
رمز Code:
<td>
<a href="../Romance & comedian/index.html"><img class="memo1" />
</a>
</td>
الكود بسيط جدا ومشابه للكود الذي استخدمناه في الرئيسية حيث وضعنا رابط الى صورة والرابط هو رابط القسم السابق
وهنا وضعنا كلاس للصورة class="memo1"
اما خصائصه في ال css فهي
:
رمز Code:
.memo1{
background-image: url(images/last.png);
height: 33px;
width: 142px;
float: left;
background-repeat: no-repeat;
border: 0px;
margin: auto;
}
وضعت به صورة للخلفيه وارتفاع وعرض ووضعت تكرار للخلفيه على x
ولم اضع بوردر جعلت قيمته 0 والتباعد تلقائس ولكن هنا وضعت
float: left;
حيث اجبرت العنصر على ان يكون في الجهة اليسرى
ووضعت هوفر
رمز Code:
.memo1:hover{
background-image: url(images/last2.png);
height: 33px;
width: 142px;
float: left;
background-repeat: no-repeat;
margin: auto;
}
اما الرئيسية فهو كالتالي
رمز Code:
<center>
<a href="../index.html"><img class="memo2" /></a>
</center>
وهي الرئيسية وخصائص ال css
رمز Code:
.memo2{
background-image: url(images/home.png);
height: 33px;
width: 142px;
background-repeat: no-repeat;
border: 0px;
margin: auto;
}
نفس الكود السابق لكن هنا لم الزمه ان ياخذ اليسار او على اليمين فقد استخدمت في اهمتل <center>
وطبعا هوفر مع تغير الصورة
رمز Code:
.memo2:hover{
background-image: url(images/home2.png);
height: 33px;
width: 142px;
background-repeat: no-repeat;
margin: auto;
}
الان الى زر القسم التالي
رمز Code:
<td> <a href="../Action/index.html"><img class="memo3" /></a>
اصبح لكم واضح وبسيط وهذه خصائص كلاس الصورة مع الهوفر
رمز Code:
.memo3{
background-image: url(images/next.png);
height: 33px;
width: 142px;
background-repeat: no-repeat;
border: 0px;
float: right;
margin: auto;
}
.memo3:hover{
background-image: url(images/next2.png);
height: 33px;
width: 142px;
background-repeat: no-repeat;
margin: auto;
float: right;
}
ولكن هنا جعلت float:right;
اي جعلته ان يكون على اليمين اجباري
انتهينا من الازرار ناتي الان الى المواضيع
اظن انن الجميع عرف كيف ساعمل المواضيع
ممتاز :
جدول + رابط + صورة
وهذه نهاية صفحة الموضوع
ههههههههه بسيط جدا فلننظر الى الكود
رمز Code:
<!-- الصف الاول -->
<tr>
<td align="center"><p>Alvin and the Chipmunks The Squeakque</p>
<br /><a href="alvin.html" target="_self" title="Alvin 2012"><img src="Alvin and the Chipmunks The Squeakquel/2.jpg" width="33%" height="33%" /></a>
</td>
<td align="center"><p>BRAVE 212</p>
<br /><a href="BRAVE.html" target="_self" title="BRAVE 2012"><img src="BRAVE/boster.jpg" width="33%" height="33%" /></a>
</td>
<td align="center"><p>Frankenweenie</p>
<br /><a href="frankenweenie.html" target="_self" title="frankenweenie 2012"><img src="frankenweenie/poster.jpg" width="33%" height="33%" /></a>
</td>
</tr>
<!-- نهاية الصف الاول -->
بسيط جدا ولكن احب ان اشير انني في ملف ال css
قد ضبطت مقاس جميع الصور
رمز Code:
width: 300px;
height: 500px;
لان كل صورة لها مقاس وابعاد مختلفة لذلك وحدت جميع المقاسات
الا انتهينا من صفحة المواضيع فجميع الموااضيع كالسابق تماما
الان ننتقل الى صفحة الموضوع الداخلية
الصفحة بسيطة عبارة عن صفحة بها صور متنوعة لمحتوى الموضوع ووصف وتحميل وفي النهاية 3 ازرار مثل الازرار السابقة
الزر الاول الانتقال للموضوع السابق وليس للقسم السابق
والزر الثاني للعودة للقسم
والزر السابق للموضوع التالي
رمز Code:
<html>
<head>
<title>Alvin and the Chipmunks The Squeakque</title>
<!-- javascript -->
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/custom.js" type="text/javascript"></script>
<script src="../js/js.js" type="text/javascript"></script>
<link href="../css topic.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#333300" text="#FFFFFF" background="../images/3.gif">
<h2>Alvin and the Chipmunks The Squeakque</h2>
<br />
<center>
<table cellpadding="1" cellspacing="1" align="center" border="1" background="../images/body topic.gif" width="60%">
<tr>
<td>
<img src="Alvin and the Chipmunks The Squeakquel/2.jpg"/>
<h3>
<center>Alvin and the Chipmunks The Squeakque</center>
</h3>
<span>
<h4><center>THis movie toking about 5 mousees sing a song ....<br />
Movie rate :7/10 from Imdb</center></h4> <br />
</span>
<center> Screen shot :<br /><br />
<img src="Alvin and the Chipmunks The Squeakquel/1.jpg"/>
<br />
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<br /><br />
<img src="Alvin and the Chipmunks The Squeakquel/3.jpg"/>
<h4>You Can Download This Moive Free from Here
<br />
Just Click download now image
</h4>
<br />
<br />
<a href="#">DoWnlOad Now</a></center>
</td>
</tr>
</table>
</center>
<table cellpadding="3" cellspacing="3" width="100%">
<tr>
<td><a href="WALL·E.html"><img class="memo1" /></a></td>
<td><a href="index.html"><img class="memo2" /></a></td>
<td><a href="Barnyard.html"><img class="memo3" /></a></td>
</tr>
</table>
</body>
</html>
سنبدء بالازرار وهي كالتالي :
رمز Code:
<table cellpadding="3" cellspacing="3" width="100%">
<tr>
<td><a href="WALL·E.html"><img class="memo1" /></a></td>
<td><a href="index.html"><img class="memo2" /></a></td>
<td><a href="Barnyard.html"><img class="memo3" /></a></td>
</tr>
</table>
قد تسال لماذا وضعتهم في جدول
السبب في ذلك من اجل تحديد الاماكن فمثلا لزرا الاول سيكون على آخر يسار الخلية الاولى
والثاني في وسط الخلية الثانية
والثالث على يمين الخلية الثالثة
وتعاريف ال css نفسها
الصفحة بسيطة جدا وقم شرح جميع محتواها من خلال الاقسام السابقة
وبها خصائص css مثل
رمز Code:
a{
color: #FF0066;
border: 10px 10px 10px 10px;
font-size: 20px;
}
a:hover{
color: #FFFFFF;
}
وهي للروابط
اما الجدول فوضع ميرجن تلقائي
رمز Code:
table{
margin: auto;
}
وهكذا تم الانتهاء من شرح جميع الصفحات والاقسام والرئيسية
الان ساشرح صفحة الاتصال Contact.html
رمز Code:
<html dir="rtl">
<head>
<!-- Title -->
<title>Do you Need some One else ???</title>
<!-- meta -->
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<!-- javascript -->
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/custom.js" type="text/javascript"></script>
<script src="js/js.js" type="text/javascript"></script>
<!-- CSS -->
<link href="css Contact.css" rel="stylesheet" type="text/css" />
<!-- css social -->
<link href="soc.css" rel="stylesheet" type="text/css" />
<!-- css social -->
</head>
<!-- body -->
<body bgcolor="#333300" text="#FFFFFF" background="images/1.gif">
<script language="javascript">
alert ("مرحبا بك عزيزنا الزائر في صفحة الطلبات فقط املأ البيانات التالية ونحن في خدمتك")
function S(){
alert ("شكرا ... سيتم تلبية طلبك في اقرب وقت ممكن رضائكم يهمنا ")
}
</script>
<!-- ترويسة -->
<h1><center>Send A Movie Reacqest</center></h1>
<!-- النص المتحرك -->
<marquee alien="center" bgcoloe="red" loof="10" hspace="4" vspace="4">
مرحبا بكم عزيزنا الزائر
الموقع لك وصمم خصصيصا لاجلك
ولذلك نضع بين يدين خدمة طلب الافلام التي تريدها
فقط املأ الحقول التالية وسيتم تلبية طلبك
</marquee>
<!-- فورمات التسجيل او الطلب -->
<form class="form" action="#" method="post">
<!-- هنا يوجد جدول لتنسيق الحقول -->
<table align="center">
<!-- الجدول الاول الخاص بالاسم -->
<tr>
<td>Name :</td>
<td><input type="text" maxlength="100" value="اسمك" class="m1" /><br /> </td>
</tr>
<!-- الجدول الثاني الخاص بالايميل -->
<tr>
<td>E-Mail :</td>
<td><input type="text" maxlength="100" value="ضع هنا الايميل الخاص بك" class="m2" /> <br /></td>
</tr>
<!-- الجدول الثالث الخاص بختيار نوع الفلم -->
<tr>
<td>Movie type :</td>
<td>
<!-- هنا من اجل عمل قائمة منسدلة -->
<select>
<br />
<!-- انواع الافلام المتوفرة -->
<option>نوع الفلم</option>
<option>Animation Movie</option>
<option>ACtion Movie</option>
<option>Romance Movie</option>
</select>
</td>
</tr>
<!-- الجدول الثالث الخاص بختيار نوع الفلم -->
<tr>
<td>Tou are frome :</td>
<td>
<!-- هنا من اجل عمل قائمة منسدلة -->
<select>
<br />
<!-- البلدان-->
<option>chose your Country</option>
<option>Syria</option>
<option>U A E </option>
<option>Lebanon</option>
<option>Jordan</option>
<option>S K A</option>
<option>Yaman</option>
<option>china</option>
<option>Koria</option>
<option>U S A</option>
<option>other</option>
</select>
</td>
</tr>
<!-- تحديد ان كان ذكر او انثى -->
<tr>
<td>Yor are : </td>
<td>mail <input type="radio" readonly="readonly" />
femail <input type="radio" readonly="readonly" /></td>
</tr>
<!-- هنا مكان كتابة الرسالة او الطلب -->
<tr>
<td>your Reacqest or MsG : </td>
<td><textarea rows="10" cols="60"></textarea></td>
</tr>
<tr>
<!-- هنا للتأكيد -->
<td>Are you sure ??</td>
<td><input type="checkbox" /> Yes </td>
</tr>
</table>
<!-- نهاية الجدول -->
<!-- زر sumit -->
<input type="submit" name="s" value="Submit"/>
<!-- زر تفريغ الحقول -->
<input type="reset" value="Reset" />
<!-- زر الطلب -->
<input type="button" name="send" value="Order Now" onclick="S()" />
</form>
<!-- نهاية الفورم -->
<br />
<!-- هنا عبارة عن صور متحركة -->
<marquee loof="10" hspace="10" vspace="10">
<!-- الجدول الذي يضم الصور -->
<table align="center" border="1">
<tr>
<!-- الصور -->
<td><img src="Action/index.jpg" /></td>
<td><img src="Animation/index.jpg" /></td>
<td><img src="Romance & comedian/DEAR JOHN/poster.jpg" /></td>
<td><img src="Action/Red/poster.jpg" /></td>
<td><img src="Animation/Madagascar 3 Europe's Most Wanted/poster.jpg" /></td>
<td><img src="Romance & comedian/Titanic/poster.jpg" /></td>
<td><img src="Action/TRANSPOTER/poster.jpg" /></td>
<td><img src="Animation/Rio/poster.jpg" /></td>
<td><img src="Romance & comedian/Remember Me/poster.jpg" /></td>
</tr>
<!-- نهاية الجدول -->
</table>
<!-- نهاية الصور المتحركة -->
</marquee>
<!-- soc -->
<div class="icon">
<a href="https://www.facebook.com/FENIXPRO" title="قم يزيارة صفحتنا على الفيس بوك"><ins><div class="fb"></div></ins></a><br/>
<a href="location.href='http://twitter.com/fenixthelord" title="تابعنا على تويتر"><ins><div class="tw"></div></ins></a><br/>
<a href="http://www.youtube.com" title="قناتنا على اليوتيوب"><ins><div class="yt"></div></ins></a><br/>
<a href="http://www.mozilla.com/fr/firefox/" title="لافضل تصفح حمل آخر اصدار من فيرفوكس" ><ins><div class="fx"></div></ins></a>
</div>
<!-- soc -->
</body>
</html>
الصفحة بسيطة ساشرحها بعون لله
كما تعودنا سأبدء بالهيد
رمز Code:
<html dir="rtl">
<head>
<!-- Title -->
<title>Do you Need some One else ???</title>
<!-- meta -->
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<!-- javascript -->
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/custom.js" type="text/javascript"></script>
<script src="js/js.js" type="text/javascript"></script>
<!-- CSS -->
<link href="css Contact.css" rel="stylesheet" type="text/css" />
<!-- css social -->
<link href="soc.css" rel="stylesheet" type="text/css" />
<!-- css social -->
</head>
الكود بسيط عنوان + استدعاء ملفات جافا + ملفات سي اس اس
وهنا وضعت ملفين css الاول خاص بالصفحة والثاني خاص بالروابط التي على اليمين واقصد روابط مواقع التواصل
فلناخذ رالملف
"
js/
js.
js"
رمز Code:
$(function() {
$('img').mouseover(function() {
$(this).fadeTo('400' , 0.50);
$(this).fadeTo('400' , 1);
});
});
$(function() {
$('img.tiefa').mouseover(function() {
$(this).animate({rotate: '40deg'});
$(this).animate({rotate: '-=40deg'});
});
});
$(function() {
$('img.tiefa').mouseover(function() {
$(this).animate({rotate: '40deg'});
$(this).animate({rotate: '-=40deg'});
});
وهو كود جافا مهمته عمل خفوت للصورة عند مرور الماوس عليها
تعبت من الشرح هههههه
نتابع بعون الله
الان نبدء بالبدي اي جسم الصفحة
رمز Code:
<!-- body -->
<body bgcolor="#333300" text="#FFFFFF" background="images/1.gif">
<script language="javascript">
alert ("مرحبا بك عزيزنا الزائر في صفحة الطلبات فقط املأ البيانات التالية ونحن في خدمتك")
function S(){
alert ("شكرا ... سيتم تلبية طلبك في اقرب وقت ممكن رضائكم يهمنا ")
}
</script>
هذا عبارة عن كود جافا سكريبت
مقسم الى قسمين
الاول رسالة ترحيبية بالزائر تطلب منه ملئ البيانات
والثاني فانكشن اسمه s
مربوط بزر سيتم شرحه في الاخر مهمته عند الضغط على هذا الزر تظهر رسالة تخبر الزائر انه تم ارسال الطلب
نتابع ...........
كما تعودنا ترويسة العنوان
ووضعت نص متحرك
رمز Code:
<!-- ترويسة -->
<h1><center>Send A Movie Reacqest</center></h1>
<!-- النص المتحرك -->
<marquee alien="center" bgcoloe="red" loof="10" hspace="4" vspace="4">
مرحبا بكم عزيزنا الزائر
الموقع لك وصمم خصصيصا لاجلك
ولذلك نضع بين يدين خدمة طلب الافلام التي تريدها
فقط املأ الحقول التالية وسيتم تلبية طلبك
</marquee>
الان ناتي الى الفورم
قمت بانشاء فورم من اجل البيانات
رمز Code:
<!-- فورمات التسجيل او الطلب -->
<form class="form" action="#" method="post">
<!-- هنا يوجد جدول لتنسيق الحقول -->
وقمت باعطائه خصاءص في ال css وهي كالتالي
رمز Code:
.form{
text-align: center;
margin: auto;
color: #CC3366;
width: 95%;
border: #CC0099;
background-image: url(images/body topic.gif);
background-repeat: repeat-y;
background-color: #C0C0C0;
}
جعلت الجدول في الوسط
والتباعد تلقائي
وضعت له لون
وعرض يقدر ب 95% من حجم الصفحة الكلي
قد يسال البعض لماذا استخدمت % بدلا من البكسل والهدف من استخدامي انه تاخذ
% من حجم الصفحة مهما تغي رمقاش الشاشة او الصفحة او المتصفح
ووضعت صورة للخلفية وتكرار
بعد ذلك وضعت جدول والجدول من عمودين من اجل ان تظهر الصفحة بشكل متناسق الجدول الاول وضعت بع الكتابة والثاني الحقول
نشاهد اول خانة وهي الاسم
رمز Code:
<table align="center">
<!-- الجدول الاول الخاص بالاسم -->
<tr>
<td>Name :</td>
<td><input type="text" maxlength="100" value="اسمك" class="m1" /><br /> </td>
</tr>
الكود واضح ليدينا وشارح به نقطتين
رمز Code:
maxlength="100"
واقصد بها ان عدد الاحرف الاعظمي هي 10 حرف
ووضعت كلاس m1 من اجل لاستخدام عند البرمجة بال php
الحقل الثاني الايميل وهو مشابه تماما لسابقه
رمز Code:
<!-- الجدول الثاني الخاص بالايميل -->
<tr>
<td>E-Mail :</td>
<td><input type="text" maxlength="100" value="ضع هنا الايميل الخاص بك" class="m2" /> <br /></td>
</tr>
الان الجزء الثالث وهو قائمة منسدلة لنوع الفلبم حيث يختار النوع من هذه القائمة
رمز Code:
<!-- الجدول الثالث الخاص بختيار نوع الفلم -->
<tr>
<td>Movie type :</td>
<td>
<!-- هنا من اجل عمل قائمة منسدلة -->
<select>
<br />
<!-- انواع الافلام المتوفرة -->
<option>نوع الفلم</option>
<option>Animation Movie</option>
<option>ACtion Movie</option>
<option>Romance Movie</option>
</select>
</td>
</tr>
<!-- الجدول الثالث الخاص بختيار نوع الفلم -->
في البداية استخدمت وسم ال <secelct >
لانشاء القائمة ووضعت الخيارات ضمن وسم <option>
الان تحديد البلد وهو مشابه تماما لنوع الفلم
رمز Code:
<tr>
<td>you are frome :</td>
<td>
<!-- هنا من اجل عمل قائمة منسدلة -->
<select>
<br />
<!-- البلدان-->
<option>chose your Country</option>
<option>Syria</option>
<option>U A E </option>
<option>Lebanon</option>
<option>Jordan</option>
<option>S K A</option>
<option>Yaman</option>
<option>china</option>
<option>Koria</option>
<option>U S A</option>
<option>other</option>
</select>
</td>
</tr>
الان تحديد عن اذا كان ذكر او انثى وذلك لتبيان خاصية الراديو
رمز Code:
<!-- تحديد ان كان ذكر او انثى -->
<tr>
<td>Yor are : </td>
<td>mail <input type="radio" readonly="readonly" />
femail <input type="radio" readonly="readonly" /></td>
</tr>
قمت بانشاء حقل بوسم input مع النوع راديو type="radio"
الان منطقة لكتابة الطلب او الرسالة
رمز Code:
<!-- هنا مكان كتابة الرسالة او الطلب -->
<tr>
<td>your Reacqest or MsG : </td>
<td><textarea rows="10" cols="60"></textarea></td>
</tr>
<tr>
وهي وسم textarea
وخصائص css
رمز Code:
textarea{
background-color: #999999;
color: #fff;
width: 95%;
}
وهنا زر للتاكيد لاظهار خاصية التشيك بوكس
رمز Code:
<!-- هنا للتأكيد -->
<td>Are you sure ??</td>
<td><input type="checkbox" /> Yes </td>
</tr>
الان يوجد لدينا 3 ازار وهي كالتالي
رمز Code:
<!-- نهاية الجدول -->
<!-- زر sumit -->
<input type="submit" name="s" value="Submit"/>
<!-- زر تفريغ الحقول -->
<input type="reset" value="Reset" />
<!-- زر الطلب -->
<input type="button" name="send" value="Order Now" onclick="S()" />
</form>
<!-- نهاية الفورم -->
اول زر وهو زر ال Submit
ثاني زر وهو زر ال ريست حيث يفرغ الحقول
الزر الثالث وهو الاهم الطلب وهو الزر المساول عن الارسال حيث وضعت لهحدث في الجافا سكربت اسميته s()
وكما شاهدنا في بداية الصفحة عند الضغط يتم استدعاد الفانكشن s فتظهر الرسالة التي تخبر الزائر بانه تم ارسال الطلب
الان بعد الانتهاء من الفورم
قمت بعمل جدول متحرك يحوي مجموعة صور تعرض محتوى الموقع
والكود خلال لاشرح
رمز Code:
<!-- هنا عبارة عن صور متحركة -->
<marquee loof="10" hspace="10" vspace="10">
<!-- الجدول الذي يضم الصور -->
<table align="center" border="1">
<tr>
<!-- الصور -->
<td><img src="Action/index.jpg" /></td>
<td><img src="Animation/index.jpg" /></td>
<td><img src="Romance & comedian/DEAR JOHN/poster.jpg" /></td>
<td><img src="Action/Red/poster.jpg" /></td>
<td><img src="Animation/Madagascar 3 Europe's Most Wanted/poster.jpg" /></td>
<td><img src="Romance & comedian/Titanic/poster.jpg" /></td>
<td><img src="Action/TRANSPOTER/poster.jpg" /></td>
<td><img src="Animation/Rio/poster.jpg" /></td>
<td><img src="Romance & comedian/Remember Me/poster.jpg" /></td>
</tr>
<!-- نهاية الجدول -->
</table>
<!-- نهاية الصور المتحركة -->
</marquee>
لان ناتي الى شرح ايقونات التواصل الاجتماعي الظاهرة على اليمين
كود ال HTML بسيط جدا
وضعت ديف وروابط دخله
رمز Code:
<div class="icon">
<a href="https://www.facebook.com/FENIXPRO" title="قم يزيارة صفحتنا على الفيس بوك"><ins><div class="fb"></div></ins></a><br/>
<a href="location.href='http://twitter.com/fenixthelord" title="تابعنا على تويتر"><ins><div class="tw"></div></ins></a><br/>
<a href="http://www.youtube.com" title="قناتنا على اليوتيوب"><ins><div class="yt"></div></ins></a><br/>
<a href="http://www.mozilla.com/fr/firefox/" title="لافضل تصفح حمل آخر اصدار من فيرفوكس" ><ins><div class="fx"></div></ins></a>
</div>
ووضعت كلاس لكل موقع
الان من ال css استخدمنا ما يلي :
ملاحظة مواقغع التواصل لديهم ملف css خاص بهم اسميته soc
رمز Code:
.icon{
position:fixed;
top:20%;
left:0;
}
هذا الكود للديف الرئيسي حيث عملت مثل بوكس ثابت وضعت له قيمة ان يبقي من الاعلى بنسبة 20%
وجعلته ثابتا على اليسار
لان ناتي لكل ايقونة وساشرح واحدة لان الباقي نفس الشيئ
رمز Code:
.fb{
background:url('images/fenix/fb.png')no-repeat top center ;
width:150px;
height:70px;
background-repeat:no-repeat;
border:none;
}
كود بسيط وجميل وضعت صورة للخلفية بدون تكرار والى لاعلى في الوسك
لالن وضعت طول وعرض ووضعت للاعلى من اجل ان آخذ نصف الصورة فقط
ووضعت هوفر
رمز Code:
.fb:hover
{
background:url('images/fenix/fb.png') no-repeat bottom center;
}
الى هنا انتهيت بعون الله سبحانه من المشروع كاملا
لمن استفاد من هدا الشرح يرجى زيارة صفحتنا فايسبوك وعمل لايك و شير
من هنا
، وتعلمك لبرمجة شيء بسيط، عليك بالمرور إلى قراءة الكتب وهذا طبعا لكي
تطوّر مهاراتك أكثر، لهذا سوف أطرح عليك العديد من الكتب الخاصة بتعلّم هذه
اللغة باللغة العربية والإنجليزية كذلك!
