« Le langage HTML » : différence entre les versions

Contenu supprimé Contenu ajouté
Aucun résumé des modifications
Aucun résumé des modifications
Balises : Révoqué répétition de caractères Modification par mobile Modification par le web mobile
Ligne 1 :
<!DOCTYPE html>
{{Page de garde|image=HTML5 logo and wordmark.svg|description=
<html>
Le HTML ('''''H'''yper'''T'''ext '''M'''arkup '''L'''anguage'') est un langage de balisage dérivé du [[Le langage SGML|SGML]], un langage de balisage plus généraliste.
<head>
Il permet de créer et structurer des pages Web. Par définition, toutes les pages Web utilisent le format HTML, le langage hypertexte.
<title>Tic Tac Toe</title>
Ces pages HTML sont souvent générées en tout ou partie automatiquement, par exemple sur Wikilivres à partir de source au format wiki, ou par des applications serveurs (en [[Programmation PHP|PHP]] par exemple).
<style>
Dans le cas contraire, elles sont écrites avec un éditeur de texte.
table {
|avancement=Terminé
border-collapse: collapse;
|cdu=
margin: auto;
* {{CDU item|6/68/681|681.3/681.3.0}}
}
|versions=
td {
{{Version imprimable}}
width: 100px;
{{Version PDF}}
height: 100px;
{{moteur}}
border: 1px solid black;
}}
text-align: center;
font-size: 60px;
font-weight: bold;
cursor: pointer;
}
#message {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 100px;
font-weight: bold;
color: red;
z-index: 1;
}
</style>
</head>
<body>
<div id="message"></div>
<table>
<tr>
<td id="0"></td>
<td id="1"></td>
<td id="2"></td>
</tr>
<tr>
<td id="3"></td>
<td id="4"></td>
<td id="5"></td>
</tr>
<tr>
<td id="6"></td>
<td id="7"></td>
<td id="8"></td>
</tr>
</table>
<p>Score : X : <span id="scoreX">0</span> - O : <span id="scoreO">0</span></p>
<p id="timer">Temps restant : 15s</p>
 
<script>
Si le langage HTML permet d'afficher des pages d'une grande variété de contenus, de mise en forme, d'animations, ..., il a également la qualité de pouvoir être écrit avec un simple éditeur de texte, ce qui évite l'utilisation d'une application spécifique.
var turn = "X";
Cependant il faut respecter la syntaxe de balisage, même si certains écarts sont tolérés.
var moves = ["", "", "", "", "", "", "", "", ""];
Vous pouvez rédiger du HTML vous même dans le cas d'une page statique, ou bien laisser un script produire du HTML à la volée.
var scoreX = 0;
var scoreO = 0;
var timer;
var timeLeft = 15;
 
function makeMove(cell) {
Il suffit de créer un fichier portant le suffixe <code>.html</code> et de l'ouvrir dans un navigateur web, en donnant le chemin du fichier préfixé du protocole <code>file://</code> ou en effectuant un double-clic ou un clic droit et sélectionner ouvrir avec votre navigateur web.
if (moves[cell] == "") {
moves[cell] = turn;
document.getElementById(cell).innerHTML = turn;
if (checkWin()) {
showMessage("Victoire");
updateScore();
clearTimeout(timer);
setTimeout(resetGame, 3000);
} else if (checkTie()) {
showMessage("Match nul!");
clearTimeout(timer);
setTimeout(resetGame, 3000);
} else {
turn = (turn == "X") ? "O" : "X";
startTimer();
}
}
}
 
function checkWin() {
L'un de ses inconvénients est que l'affichage est dépendant du terminal, notamment, de la taille de l'écran, du navigateur, du niveau de zoom, des polices de caractères disponibles, etc.
return (checkRow(0, 1, 2) || checkRow(3, 4, 5) || checkRow(6, 7, 8) ||
checkRow(0, 3, 6) || checkRow(1, 4, 7) || checkRow(2, 5, 8) ||
checkRow(0, 4, 8) || checkRow(2, 4, 6));
}
 
function checkRow(a, b, c) {
Ceci nécessite donc de tester les pages avec différents terminaux.
return (moves[a] != "" && moves[a] == moves[b] && moves[b] == moves[c]);
Pour éviter les mauvaises surprises, veillez à respecter les [[w:standards du web|standards du Web]] !
}
 
function checkTie() {
 
== Sommaire ==