Le HTML (HyperText Mackup Language) est un langage de balisage, c'est le langage de base du web.
Fonctionnement :
Ce langage est composé de balises (éléments dans une page) qui elles-même peuvent contenir des attributs (sorte de paramètres de la balise) sous la forme :
<balise attribut="valeur" deuxiemeattribut="valeur"></balise>
Le contenu d'une page est entre 3 balises <html>, <head> et <body> comme ceci :
<html> <!-- Ceci est un commentaire en html -->
<head> <!-- "Tête" du document -->
<title>Titre du document</title>
</head>
<body bgcolor=yellow> <!-- body corps du document, l'attribut bgcolor définissant la couleur de fond -->
Un texte à afficher à l'écran.
</body>
</html>
Les balises de base et leurs attributs (liste non-exhaustive) :
| Balise | Utilisation | Attributs |
| <body></body> | Corps du document | bgcolor="codecouleur" : couleur de fond text="codecouleur" : couleur du text alink(lien actif),vlink(lien visité),link : couleur des liens |
| <a>Texte ou autre où on clique</a> | Lien hypertexte | href="url" : definit l'url de destination target="_blank" : _blank pour ouvrir dans une autre fenetre ou nom d'une frame |
| <table><tr><td></td></tr></table> | table : ouvre un tableau tr : crée une nouvelle ligne td : crée une nouvelle cellule | bgcolor,height(hauteur en px),width(largeur en px), border(dans la balise table) : largeur de la bordure, bordercolor : couleur de la bordure |
| <div>texte</div> | définit l'emplacement du texte grâce à l'attribut align(left,center,right) | |
| font,b,i et u | Dans l'ordre, formatage du texte, gras, italique, souligné | Pour font, color : couleur du texte entre <font> et </font>, family : définit la police |
Le PHP est un langage dynamique, le script s'effectue côté serveur et celui-ci renvoie une page html.
Bases :
Pour consulter une page php, il faut que la page soit sur un serveur apache ou autre qui accepte le PHP.
L'extension est .php et le code se présente comme suit :
<?php
print("texte affiché <b>à</b> l'écran"); // commentaire
$variable="<br>contenu de la variable"; // le nom d'une variable est toujours précédé du signe $ (dollar)
print($variable); // affichage du contenu de $variable
?>
Comme vous l'avez sûrement remarqué, une fonction se présente comme suit : nom_de_la_fonction("paramètre1","paramètre2","param3");
Principales fonctions :
print : affiche du texte
echo : affiche du texte (sous la forme echo "texte"; SANS ())
date : retourne la date actuelle ( date("d-m-Y"); [day-month-years] )
addslashes : rajoute des antislashs devant les caractères comme ' et " (les antislashs empêchent une confusion avec le code php)
stripslashes : retire les antislashs
array : crée un tableau de données [ $tableau=array("hello"," ","I","'","m"," ","tchess"); (on recupère les données du tableau comme suit : $tableau[0]; pour "hello" [les ids commencent à 0] ) ]
fgets, fputs, fopen, ... : dans le chapitre 2
mysql_connect, mysql_select_db, mysql_query, ... : dans le chap 2 aussi ;-)
Manipulation des variables :
Les différents opérateurs sont "." pour les chaines de caracteres et "+", "-", "*", "/", "%"(modulo) pour les nombres.
$var = $var.$var2; : $var contient son propre contenu plus celui de $var2
$num = 1; : pas de " si c'est un nombre
$num++; et $num--; : incrementation/décrementation de $num
$num = $num+50; : ajoute 50 à $num
Les structures de contrôles :
If ("si" en francais) exécute un script uniquement si la condition est vraie. Si la condition est fausse, on exécute le contenu de else { contenu } (facultatif) :
if($var == "test") { // double égal car c'est une comparaison, on peut enchainer les conditions grâce à "&&" (et) et "||" (ou)
echo '$var contient test'; // on met des ' pour ne pas afficher le contenu de $var mais bien $var
}
else {
echo '$var ne contient pas test';
}
While (tant que) exécute ce qu'il y a entre les deux { } jusqu'à la réalisation de la condition :
$tableau = array("Hello"," ","I","'","m"," ","tchess");
Ceci affiche "Hello I'm tchess" à l'écran.
$num = 0;
while($num < 7) {
echo $tableau[$num];
$num++;
}
Les différents opérateurs de comparaison :
== : égal à
!= : différent de
< : plus petit que
<= : plus petit ou égal à
> et >= : idem que pour < et <= mais plus grand
Le JavaScript n'a rien à voir avec le java. Il s'appelait "LiveScript" à sa sortie, mais vu le succès du java, il a été transformé en JavaScript.
Fonctinnement :
Vous pouvez faire tourner du javascript dans une page html (.html) ou directement dans un fichier .js
Le javascript s'exécute côté client.
Pour l'insérer dans du code html, vous devez le placer entre <script> et </script>
Voici un exemple de code vous permettant de comprendre le fonctionnement du javascript :
<script>
function login() {
var pseudo, pass; // en javascript il faut déclarer les variables grâce à var
pseudo=document.formulaire.pseudo.value; // valeur du champ pseudo dans le formulaire 'formulaire' qui est dans le document(la page)
pass=document.formulaire.pass.value;
if(pseudo == "noxistes" && pass == "hacking") { // comme en php, on peut enchaîner les conditions grâce à "&&" (et) et "||" (ou)
alert("Mot de passe correct"); // alert permet de mettre un message dans une boite avec OK
document.location.href="page2.html"; // on modifie l'élément href contenu dans l'élément location contenu lui aussi dans l'élément document ce qui change l'url et donc redirige
}
else { alert("Mauvais password !!!"); }
}
</script>
<form method=post name=formulaire> <!-- form crée un fomulaire action permet de définir l'url ou seront envoyées les infos, ici on n'utilise pas de bouton submit mais on lance une fonction javascript -->
<input type=text name=pseudo><br>
<input type=text name=pass><br> <!-- input est la balise pour les champs et les boutons submit. name sert à définir le nom de la variable qui permettra de récuperer la valeur entrée. type permet de spécifier s'il s'agit d'un champ texte (text), d'un bouton d'envoi (submit), d'un champ caché (hidden), d'un champ de password (password) -->
<button onClick="javascript:login()">Login</button>
</form>
Voir chapitre 2 pour la suite des cours de développement web.