exemple Intro Projet (bac)
Pour ceux qui veulent une vidéo comme le video suivante , nous contacter sur notre page facebook ou sur l'email : iyed07@gmail.com
un exemple Intro pour un projet :
Notre Application Android
Notre Application Android
Lien de Téléchargement : ici Les tableaux en HTML
Les tableaux sont des éléments permettant de ranger des informations de façon ordonnés. Par exemple nous allons créer un tableau dans lequel nous allons insérer des matières, des notes et des éléves. Pour chaque matière, chaque éléves aura une noe.
Un tableau est donc composé de plusieurs éléments :
Les lignes du tableau : Elles sont déclarées avec la balise et
Les cellules du tableau : Ce sont les cases à l'intérieur des lignes. Elle sont déclarées avec la balise et
Reprenons notre exemple précédent et commençons par créer notre tableau. Vous pouvez si vous le souhaitez recopier le code suivant :
Que fait notre code ici ?
La balise
permet de déclarer notre tableau. Vous pouvez remarquer que tous le code du tableau se place entre les balise
et
. Maintenant, on va construire la première ligne du tableau grâce à la balise et dans laquelle on va placer plusieurs cellules qui vont être les balises et . Dans cette première, on inscrit les matières. Une fois la première ligne, construite, on va construire la deuxième ligne du tableau avec la balise et . Cette fois dans les cellules que l'on va construire avec les balises et , on va insérer les élèves ainsi que les notes de ces élèves. Et vous continue comme ça tant que vous le voulez. Les bordures
Pour mettre une bordure à votre tableau, vous devez rajouter l'attribut border à la balise
. Exemple
. Ici, nous ajoutons une bordure de 3 pixels à notre tableau. Ajoutons cette bordure au tableau précédent, regardons l'évolution du tableau :
C'est tout de même mieux ? N'est-ce pas ? :-)
Vous pouvez aussi si vous le souhaitez changer la couleur de la bordure en associant un nouvel attribut à la balise
. Exemple :
La taille du tableau et des cellules : Les tableaux et les cellules peuvent se mesurer en pixel noté px ou en pourcentage noté %. Les pixels ou les pourcentages vont correspondre à la taille de votre tableau sur votre écran. Par exemple, si je veux faire un tableau qui entre sur tout l'écran, je vais mettre la taille du tableau à 90 % mais je peux faire aussi un tableau de 200 px. La largeur d'un tableau se définit avec l'attribut "width" de la balise
Exemple : Les 2 exemples suivants vous montre le tableau avec une largeur de 90 % et une largeur de 200 px
OU
Automatiquement, le navigateur adopte le tableau au dimension demandée.
Vous pouvez, bien entendu, modifier la hauteur du tableau avec l'attribut "height". Tout ce qu'on vient de voir pour le tableau s'adapte aussi pour les lignes et les cellules du tableau.
D'autres attribut pour les tablaux :
L'attribut cellpading : définit l'espace en pixel entre le bord d'une celulle et son contenu
L'attribut cellspacing : définit l'espace entre les celulles du tableau
L'attribut colspan : permet de faire fusionner des celulles d'une même ligne. Il faut y préciser le nombre de celulles à fusionner.
L'attribut rowspan: permet de faire fusionner des cellules d'une même colonne. Il faut y préciser le nombre de celulles.
L'attribut align : précise l'alignement sur un axe horizontal du tableau ou du contenu de la celulle. (valeur possible : "left" par défaut, "right", "center").
L'attribut valign : précise l'alignement du contenu des celulles sur un axe vertical. (valeur possible : "middle", "bottom", "top").
- Le tableau en lui-même : il est déclaré avec la balise
et
Reprenons notre exemple précédent et commençons par créer notre tableau. Vous pouvez si vous le souhaitez recopier le code suivant :
| Mathématique | Français | Histoire-Géo | |
| Pierre | 12 | 5 | 18 |
| Paul | 14 | 16 | 8 |
| Mathématique | Français | Histoire-Géo | |
| Pierre | 12 | 5 | 18 |
| Paul | 14 | 16 | 8 |
La balise
permet de déclarer notre tableau. Vous pouvez remarquer que tous le code du tableau se place entre les balise
Pour mettre une bordure à votre tableau, vous devez rajouter l'attribut border à la balise
. Exemple
| Mathématique | Français | Histoire-Géo | |
| Pierre | 12 | 5 | 18 |
| Paul | 14 | 16 | 8 |
Vous pouvez aussi si vous le souhaitez changer la couleur de la bordure en associant un nouvel attribut à la balise
. Exemple :
| Mathématique | Français | Histoire-Géo | |
| Pierre | 12 | 5 | 18 |
| Paul | 14 | 16 | 8 |
| Mathématique | Français | Histoire-Géo | |
| Pierre | 12 | 5 | 18 |
| Paul | 14 | 16 | 8 |
Vous pouvez, bien entendu, modifier la hauteur du tableau avec l'attribut "height". Tout ce qu'on vient de voir pour le tableau s'adapte aussi pour les lignes et les cellules du tableau.
D'autres attribut pour les tablaux :
L'attribut cellpading : définit l'espace en pixel entre le bord d'une celulle et son contenu
L'attribut cellspacing : définit l'espace entre les celulles du tableau
L'attribut colspan : permet de faire fusionner des celulles d'une même ligne. Il faut y préciser le nombre de celulles à fusionner.
L'attribut rowspan: permet de faire fusionner des cellules d'une même colonne. Il faut y préciser le nombre de celulles.
L'attribut align : précise l'alignement sur un axe horizontal du tableau ou du contenu de la celulle. (valeur possible : "left" par défaut, "right", "center").
L'attribut valign : précise l'alignement du contenu des celulles sur un axe vertical. (valeur possible : "middle", "bottom", "top").
Les formulaires en HTML
Les formulaires permettent à vos visiteurs de saisir des informations sur votre site Internet. Vous avez donc de l'interactivité entre le visiteur du site et votre site. Les formulaires sont très souvent utilisés sur des sites Internet. On trouve des formulaires pour s'inscrire sur un site, posté des messages sur un forum de discussion, signer par exemple un livre d'or.
Sur le site que vous visitez http://aiprogrammingacademy.blogspot.com, j'utilise différents formulaires. Pour créer un formulaire, il faut utiliser un mélange de HTML et de PHP. Pour le moment, je me contenterai de faire la construction du formulaire en HTML. Le PHP permettra d'envoyer les informations saisient dans un formulaire dans une base de données MySQL.
ATTENTION : N'exécutez pas tous les script suivant car ici, on ne voit que du HTML. Vos différents formulaires s'afficheront mais ne pourront pas être exécuter car sur tous les boutons, je n'ai pas mis le code PHP qui va avec. On verra se code dans la partie "Les formulaires et le PHP".
En HTML, pour dire qu'on va insérer un formulaire on se sert de la balise et . On l'utilise de la manière suivante :
method="post" action="ajout.php"> |
- method : il faut savoir qu'il y a 2 moyens d'envoyer le formulaire. La méthode POST ou la méthode GET. Lorsque vous utilisez la méthode POST, les informations sont envoyés en caché. Lorsque vous utilisez la méthode GET, les informations sont envoyés dans la barre d'adresse. Ne retenez que la méthode "POST", c'est la seule qui nous intéressera en PHP.
- action : C'est le nom de la page qui sera appelée lorsque l'utilisateur aura envoyé son formulaire. Nous verrons en php comment récupérer les informations transmises par le formulaire.
Les zones de texte :
Les zones de texte permettent de saisir un petit nombre de caractères. Par exemple, dans une zone de texte, vous pouvez saisir votre pseudo. Voici le code pour créer une zone de texte :
method="post" action="ajout.php"> Pseudo : "text" name="pseudo" value="toto"> |
En HTML, on insére une zone de texte grâce à la balise . Si vous voulez mettre un mot de passe, donc des caractères protégés, il faut utiliser la balise
Dans ce code, vous allez trouver 2 attributs qui sont très important :
- name : C'est le nom de la zone de texte. Ce nom est important. On s'en servira pour récupérer les informations saisies en PHP
- value : C'est ce que contient la zone de texte au départ. Ici, la zone de texte contiendra "toto". Vous pouvez laisser cet attribut vide si vous le souhaitez.
Les boutons :
Pour valider votre saisi et transmettre les données saisies, il vous faut un bouton "valider". Nous allons utiliser une balise avec comme attribut value ="OK"
method="post" action="ajout.php"> Pseudo : "text" name="pseudo" value="toto"> ="submit" value="OK"> |
Ces grosses zones de texte permettent de saisir beaucoup de texte. Elles sont souvent utilsées pour écrire des commentaires, des messages sur un livre d'or ou un forum. Voici le code pour créer un textarea :
method="post" action="ajout.php"> Pseudo : "text" name="pseudo" value="toto"> Commentaire : ="submit" value="OK"> |
Les listes déroulantes :
Vous choisissez des informations parmi une liste. Voici le code permettant de créer une liste déroulante :
method="post" action="ajout.php"> Pseudo : "text" name="pseudo" value="toto"> Commentaire : Ville : Fait-il beau ? : "radio" name="temps" value="Oui"> Oui "radio" name="temps" value="Non"> Non ="submit" value="OK"> |
Les champs cachés :
Les champs cachés permettent au créateur de cacher certains éléments aux visiteurs d'un site. Ces éléments seront quand même transmis à la base de données grâce au langage PHP. On va supposer que l'on souhaite retenir, le pseudo du visiteur qui est helpclic. Voici le code qui permet de cacher certains champs :
method="post" action="ajout.php"> Pseudo : "text" name="pseudo" value="toto"> Commentaire : Ville : Fait-il beau ? : "radio" name="temps" value="Oui"> Oui "radio" name="temps" value="Non"> Non "hidden" name="pseudo2" value="helpclic"> ="submit" value="OK"> |
Inscription à :
Commentaires (Atom)
À PROPOS DE NOUS
AI Programming Academy is all about development design, ideas, web trends, and tutorials. AI Programming Academy is a great place for any Programmer and designers around the world.
