Application Web de gestion des annonces en J2EE + coude source + rapport de projet

Description

Application WEB Réalisé avec la technonologie J2EE.

Cette application a pour but de faire la gestion des annonces, auquelle l'internaute peut publier, consulter des annonces aprés une inscription pour la 1ere fois et un authentifiaction a chaque nouvelle connexion. 

JAVA : Les boucles

 

En guise de présentation, vous allez réaliser un petit exercice pour faire connaissance avec les boucles.

Votre mission, si toutefois vous l'acceptez : afficher la liste de tous les nombres plus petits que 10 (une boite de dialogue par nombre).

Vous vous dites : "ça va être un jeu d'enfant". En effet...

alert(1);

alert(2);

alert(3);

alert(4);

alert(5);

alert(6);

alert(7);

alert(8);

alert(9);

Mais c'est un peu long et très ennuyant .

Pour éviter de s'ennuyer en programmant (on est quand même là pour s'amuser ), nous allons apprendre une autre méthode, beaucoup plus puissante, pour arriver au même résultat.
Utiliser une boucle

Ce qu'il faudrait, c'est pouvoir demander à l'ordinateur de "compter", et tant qu'il n'a pas atteint 10, d'afficher la valeur.

Eh bien c'est sur ce modèle que sont conçues ce qu'on appelle les boucles : on répète une action tant que une condition est satisfaite.

Pourquoi les boucles ? Car il en existe plusieurs différentes, qui s'utilisent dans des situations elles aussi différentes.

Télécharger le cours 

password winrar : progduzero.com

Java : les fonctions

Une fonction est une suite d'instructions ayant un rôle précis (pour ne pas dire une fonction précise...).

·        On lui donne (éventuellement) des arguments (également appelés paramètres) entre les parenthèses qui suivent le nom de cette fonction.

·        Certaines fonctions nous renvoient une valeur, que l'on peut par exemple enregistrer dans une variable.

Un petit exemple :

var message = prompt('Entrez un texte');

Télécharger le cours 

password winrar : progduzero.com

JAVA : Création des objets

Lorsque l'on crée un objet, étant donné que c'est toujours la même classe qui est utilisée pour le même type d'objets (si vous avez une classe rectangle et que vous souhaitez créer deux rectangles, vous n'utiliserez qu'une seule classe rectangle mais deux objets de type Rectangle), on parle d'instance. Une instance de classe correspond à un objet. Chaque objet doit être stocké dans une variable différente.

Pour créer un objet, il faut tout d'abord déclarer une variable du type de la classe. Si vous avez une classe qui se nomme Test, votre variable sera de type Test.

Télécharger le cours 

password winrar : progduzero.com

JAVA - Constructeurs et destructeurs

Les constructeurs : Lorsque vous créez un objet (instanciation d'une classe), vous faites automatiquement appel à une méthode générique appelée constructeur. Cette méthode permet généralement d'assigner des valeurs aux variables définies dans la classe.

Le destructeur est une méthode spéciale qui sera appelée (si elle est redéfinie dans la classe) lorsque l'objet sera nettoyé de la mémoire par le garbage collector. Le garbage collector est un "ramasse-miettes" chargé de faciliter la tâche des programmeurs en libérant les ressources prises en mémoire automatiquement. Cette méthode n'est pas forcément appelée lorsque vous supprimez l'objet.

Télécharger le cours 

password winrar : progduzero.com

Java script : Les classes

JAVA est un langage entièrement orienté objet. Tout votre code doit donc être inclus dans ce qu'on appelle des classes (il vous en faudra au moins une quelle que soit l'application désirée). On décompose chaque classe en un fichier texte qui obéit aux conventions de codage JAVA.

Les classes :

Conventions de codage en JAVA

Afin que votre programme JAVA soit compréhensible le plus simplement par tous, et si vous souhaitez rendre votre application facilement distribuable, il convient d'adopter certaines règles standards de nommage.

Quelques conventions généralement utilisées pour la programmation en langage JAVA. N'hésitez pas à suivre ces recommandations pour faciliter la relecture ou modification ultérieure de votre code.

Les classes et interfaces :

Les noms de classes correspondent aux noms de leurs fichiers .java. On écrit les classes en minuscules avec chaque première lettre des mots composant le nom de la classe en majuscules. Ici, pour cet exemple, la classe MaClasse sera enregistrée sous le nom MaClasse.java

public class MaClasse
{
//code}

Les attributs :

On adopte la règle suivante : les noms d'attributs sont écrits en minuscules. Chaque première lettre d'un mot s'écrit en majuscules, sauf pour le premier mot. En pratique cela donne ceci :

public type monAttribut;

Les constantes :

Les constantes sont écrites en majuscules. On utilise l'underscore _ pour séparer les mots :

public final type MA_CONSTANTE = valeur;

Les méthodes :

Il n'y a pas de règle particulière en ce qui concerne les méthodes. En revanche, la plupart du temps les conventions utilisées pour les classes sont également utilisées pour les méthodes. Essayez d'être le plus descriptif possible dans le nom de votre méthode. Si vous utilisez une langue particulière, essayez de vous y tenir (n'écrivez pas une partie de votre code en Français et l'autre partie en Anglais par exemple).

JAVA - Attributs statiques, constantes

Un attribut permet de stocker des données à l'intérieur d'une classe. Un attribut se note comme ceci dans la classe (ou dans une méthode) :

[droits d'accès] [type de l'attribut] [nom de l'attribut] [éventuellement une définition ici]

Droits d'accès :

Les droits d'accès à un attribut peuvent être de trois types :

• private : seules les méthodes de la classe dans laquelle est définit l'attribut peuvent y accéder et le modifier
• protected : seules les méthodes de la classe et des éventuelles classes héritées peuvent accéder à l'attribut et le modifier
• public : tout le monde peut accéder à l'attribut en question.

Type de l'attribut :

Les types correspondent aux types de données vus auparavant. 

Nom de l'attribut :

Le nom que vous souhaitez donner à votre attribut. Il vaut mieux qu'il se compose de caractères alphanumériques. L'underscore est autorisé, toutefois évitez de le placer en premier.

Définition de l'attribut :

La définition d'un attribut indique que vous lui avez attribué une valeur. Ceci est facultatif. Si vous n'attribuez pas de valeur à votre attribut, il y aura simplement une zone mémoire réservée, cette zone ne contiendra aucune valeur tant que vous n'aurez pas attribué de valeur à votre attribut.

Exemple :

public class Test
{
    private float nombre;
    public double attribut_public;
    protected int nb;

    public Test()
    {
        nombre = 3.14f;
        nb = (int) 8.14;
    }
}

Pour l'instant rien ne change ou presque de ce que vous avez eu l'occasion de voir jusqu'à présent. 

Les tableaux :

Un tableau va vous permettre de stocker plusieurs données au sein d'une seule variable. Les données sont accessibles via des indices numériques. Pour dire que telle variable est un tableau, on fait succéder le type de la variable par deux crochets : []

Si vous souhaitez attribuer une taille fixe à votre tableau (pour qu'il ne puisse contenir plus d'éléments que spécifié), vous devez utiliser la syntaxe suivante (on prendra un tableau d'entiers pour notre exemple) : public int[] tableau;
tableau = new int[10];

Ce tableau aura 10 cases numérotées de 0 à 9 (le premier indice étant 0).

Exemple de tableau ayant une taille indéfinie :

public class Test
{
    public int[] compteur;
   
    public Test()
    {
        compteur[0] = 0;
        compteur[1] = 1;
       
        System.out.println(compteur.length);
    }
}

Si vous souhaitez récupérer la taille d'un tableau, il faut utiliser l'attribut length comme ceci :

System.out.println("taille : " + tableau.length);

Constantes :

Les constantes diffèrent des attributs "normaux" par le fait qu'elles sont définies une fois pour toutes. C'est pourquoi vous devez obligatoirement sur la même ligne déclarer et définir la constante qui ne pourra avoir une valeur variable au cours du temps. On ajoute le mot clé final pour dire que l'attribut en question est une constante :

public class Test
{
    private final float NOMBRE = 3.14f;

    public Test()
    {
        System.out.println("Le nombre flottant vaut : " + NOMBRE);
    }
}

Attributs statiques :

Un attribut statique est un attribut qui est commun à tous les objets que vous pourrez créer. On peut par exemple citer un compteur du nombres d'instances de classe que vous aurez lancées. Si vous souhaitez compter le nombre de fois où vous avez instancié la classe "Test" vous pourrez écrire ceci :

public class Test
{
    public static int nombre;
    public static final int nb = 5;

    public Test()
    {
        nombre++;

        System.out.println("Nombre d'instances crées : " + nombre);
    }
}

L'avantage des attributs statiques est que vous pouvez y accéder même si vous n'avez pas créé d'instance de votre classe. Ainsi, vous pourrez écrire si vous le souhaitez n'importe où dans une méthode ceci :

System.out.println("Nombre d'instances crées : " + Test.nb);

Ce code affichera 5.

JAVA : Les conditions if / else / else if / switch case en

Une condition va vous permettre d'exécuter une portion de code ou non en fonction du résultat de variables booléennes, c'est à dire que vous pourrez dire "si X est faux alors je fais ça, sinon ceci et si aucune des conditions précédentes n'est remplie, je ferais plutôt cela".

Tout ça se code en JAVA avec différentes instructions. Les plus courantes sont les instructions if / else.

Les instructions if / else :

L'instruction if se traduit en français par "si". Elle va vous permettre d'effectuer une action si une condition est vraie ou fausse :

if(condition)
{
     //code
}

Exemple d'instruction if :

public class Test
{
    public int variable = 20;
  
    public Test()
    {
        if(variable == 20)
        {
            System.out.println("La variable 'variable' est bien égale à 20");  
        }
    }
}

Dans notre exemple, on affichera bien le texte car la variable est bien égale à 20. Notez que l'on utilise l'opérateur == pour les comparaisons de données avec des types primitifs. Le simple signe égal est un signe d'affectation.

L'instruction else se traduit en français par "sinon". Elle va vous permettre d'exécuter une action si la première condition située dans le "if" n'est pas réalisée. Voici un exemple dans lequel on affichera que la variable n'est pas égale à 20

Exemple d'instruction else :

public class Test
{
    public int variable = 15;
  
    public Test()
    {
        if(variable == 20)
        {
            System.out.println("La variable 'variable' est bien égale à 20");  
        }
        else
        {
            System.out.println("La variable 'variable' n'est pas égale à 20");
        }
    }
}

L'instruction else if :

Voici un exemple d'instruction else if qui sera je pense plus explicite qu'un long discours :

public class Test
{
    public int variable = 15;
  
    public Test()
    {
        if(variable == 20)
        {
            System.out.println("La variable 'variable' est bien égale à 20");  
        }
        else if(variable == 15)
        {
            System.out.println("La variable 'variable' n'est pas égale à 20 et est égale à 15");
        }
        else if(variable == 10)
        {
            System.out.println("La variable 'variable' n'est pas égale à 20 ni à 15 et est égale à 10");
        }
        else
        {
            System.out.println("La variable 'variable' n'est ni égale à 20 ni à 15 ni à 10");
        }
    }
}

L'instruction Switch / case :

L'instruction Switch est utile quand vous devez gérer beaucoup de if / else if / else. Elle a une syntaxe plus courte et est plus appropriée pour ce type de cas.

Fonctionnement :

        switch(variable)
        {
            case 'valeur1':
                action1;
            break;
            case 'valeur2':
                action2;
            break;
            case 'valeur3':'valeur4':
                action3;
            break;
            default:
                action4;
            break;
        }

Ici dans notre exemple de fonctionnement de cette instruction, on remarque la ligne case 'valeur3' : 'valeur4' :. Cette ligne veut dire que si la variable variable vaut soit 'valeur3' soit 'valeur4', alors on exécutera "action4". Vous pouvez mettre autant de valeurs que vous souhaitez. Si aucune valeur ne correspond, la ou les instructions contenues dans le bloc default s'exécute(nt).

Voici notre exemple précédent (basé sur des else if) traduit avec l'instruction switch / case :

public class Test
{
    public int variable = 15;
  
    public Test()
    {
        switch(variable)
        {
            case 20 :
                System.out.println("La variable 'variable' est bien égale à 20");
            break;
            case 15 :
                System.out.println("La variable 'variable' n'est pas égale à 20 et est égale à 15");
            break;
            case 10 :
                System.out.println("La variable 'variable' n'est pas égale à 20 ni à 15 et est égale à 10");
            break;
            default:
                System.out.println("La variable 'variable' n'est ni égale à 20 ni à 15 ni à 10");
            break;
        }
    }
}

La négation :

La négation s'utilise quand on souhaite par exemple dire "si telle variable n'est pas égale à". On peut utiliser l'opérateur != (qui veut dire "différent de") mais on peut utiliser aussi tout simplement le point d'exclamation, qui veut dire "non". Attention, le point d'exclamation s'applique à une variable booléenne (true ou false), vous devrez donc mettre parfois des parenthèses.

Exemple :

public class Test
{
    public int variable = 15;
  
    public Test()
    {
        if(!(variable == 20))
        {
                System.out.println("La variable 'variable' n'est pas égale à 20");
        }
    }
}

Contactez moi sur ma page facebook : https://www.facebook.com/imasft

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

مشروع بسيط بعدة لغات وهي 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:

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


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

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


اولا الصفحة

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

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


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