devlotec: html-css

مشروع بسيط بعدة لغات وهي Html & Css & java script

المشروع عبارة عن ثلاث اقسام
وهو عبارة عن موقع للألعاب مثلا او للأفلام او عرض منتجات او .......

كل شخص يستطيع تغيير بما يريد به وما وضعته إلا رغبة في نشر العلم

وهو مقسم الى اربعة اقسام

القسم الاول وهي الواجهة الرئيسية

القسم الثاني الاقسام الداخلية

القسم الثالث المواضيع التي بداخل لاقسام

والرابع صفحة الاتصال والتواصل

صفحة الاتصال تحتاج الى php لكي تعمل ولكنني تركتهها لعدم كفابة علمي بها واتمنا من اي شخص ان يطورها ويشرحها لنا

نبدأ بعون الله :

ساضع الصفحة والمثال ثم الكود وبعده الشرح وقد تجد اخي العزيز انيي اشرح اشياء بسيطة ولكنني احب ان اشرح كل شيئ لكي لا يواجه احد مشاكل واي سؤال انا حاضر وستجد اخي ان هناك بعض الاخطاء مثل :

اولا هناك صفات واضعها مباشرة في html وليس في css وانا قصدت ذلك لان هناك اناس لم تتعلم ال css بعد

يارب

اولا الصفحة الرئيسية وهي واجهة الموقع

مشروع بسيط بعدة لغات Html & Css & java script مع الشرح المفصل

مشروع بسيط بعدة لغات Html & Css & java script مع الشرح المفصل

الكود :

رمز 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:

</head>

ناتي الان الى جسم الصفحة اي الي البدي

رمز Code:

<body>

رمز 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>

الان عملت جدول صغير لكي اضع به الاتصال بنا وهو خانة واحدة بها صورة واحدة

رمز 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 درجة

هنا انتهيا من الصفحة الرئيسية الان سوف ننتقل الى الالقسام

وساشرح قسم لان لاقسام الثانية مشابهة له تماما ارجو من لله التوفيق

اولا الصفحة

مشروع بسيط بعدة لغات Html & Css & java script مع الشرح المفصل

رمز 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;
اي جعلته ان يكون على اليمين اجباري

انتهينا من الازرار ناتي الان الى المواضيع

اظن انن الجميع عرف كيف ساعمل المواضيع

ممتاز :
جدول + رابط + صورة

مشروع بسيط بعدة لغات Html & Css & java script مع الشرح المفصل

وهذه نهاية صفحة الموضوع

مشروع بسيط بعدة لغات Html & Css & java script مع الشرح المفصل

ههههههههه بسيط جدا فلننظر الى الكود

رمز 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>

هذا عبارة عن كود جافا سكريبت
مقسم الى قسمين

الاول رسالة ترحيبية بالزائر تطلب منه ملئ البيانات

مشروع بسيط بعدة لغات Html & Css & java script مع الشرح المفصل

والثاني فانكشن اسمه s
مربوط بزر سيتم شرحه في الاخر مهمته عند الضغط على هذا الزر تظهر رسالة تخبر الزائر انه تم ارسال الطلب

مشروع بسيط بعدة لغات Html & Css & java script مع الشرح المفصل

نتابع ...........

كما تعودنا ترويسة العنوان

ووضعت نص متحرك

رمز 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 & Css & java script مع الشرح المفصل

كود ال 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;
}

كود بسيط وجميل وضعت صورة للخلفية بدون تكرار والى لاعلى في الوسك
لالن وضعت طول وعرض ووضعت للاعلى من اجل ان آخذ نصف الصورة فقط

ووضعت هوفر

مشروع بسيط بعدة لغات Html & Css & java script مع الشرح المفصل

رمز Code:

.fb:hover
{
  background:url('images/fenix/fb.png') no-repeat bottom center;
  }

الى هنا انتهيت بعون الله سبحانه من المشروع كاملا

لمن استفاد من هدا الشرح يرجى زيارة صفحتنا فايسبوك وعمل لايك و شير
من هنا

devlotec

برمجة محرك بحث متصل بقواعد البيانات يصلح لاى اسكربت

Site Web agence de pub + coude source

Insérer une feuille de style css

Animez votre site avec CSS3

احتراف html من خلال هدا الكتاب بسرعة

تعلم html فى 90 دقيقه

مشروع بعدة لغات Html & Css & java script مع الشرح المفصل ستتعلم من الكتير

نص تجريبي

تابعنا على الفيسبوك

المشاركات الشائعة

التسميات

فيديو

تابعنا على الشبكات الاجتماعية