Ce site web a été entièrement réalisé en HTML par écrit, et donc sans aucuns logiciels annexes tels que Microsoft FrontPage par exemple, par Olivier BEGUIN. Tout d'abord, il a fallu créer le design général composé d'une barre de navigation supérieure, du corps du site web qui supporte le contenu écrit ainsi que les médias qui complètent le contenu comme les images par exemple, et d'une barre inférieur pour marquer la fin de la page, utilisée ici pour écrire les noms des élèves ayant travaillés sur ce projet. Une balise est un outil qui permet de définir une fonction et est toujours entre crochet <>. Par exemple, < strong > (sans les espaces) permet de mettre en valeur du texte, comme ceci, ce mot étant placé entre < strong > et < /strong > (sans les espaces).
<!DOCTYPE html>
<html>
<head>
< title>Projet TPE< /title>
< link rel="stylesheet" href="design/style.css" />
</head> .
Par exemple, ce code correspond aux premières lignes d'une page du site. Le < !DOCTYPE html > permet de définir le langage de la page, c'est à dire l'HTML. Ensuite vient la balise < html > (sans les espaces) qui permet de définir les limites du code, c'est donc entre cette balise et la balise < /html > (sans les espaces) qui se trouve au bas du site que s'écrit le code de la page. Ensuite vient la balise < head > (sans les espaces), qui permet de définir les informations non visibles sur la page comme le titre de la page (qui apparaît dans l'onglet) grâce à la balise < title > (sans les espaces) ou la page CSS qui est un autre langage utilisé pour mettre en forme la page avec la balise < link > (sans les espaces) et ses attributs rel="" qui définissent le genre de lien et href="" qui donne le chemin utilisé pour trouver le fichier CSS.
#header {
width: 100%;
height: 50px;
background-color: #007FFF;
border-bottom: solid 1px black;
position: fixed;
top: 0px;
}
#header h1 {
float: left;
font-family: impact;
color: white;
padding-left: 200px;
margin-top: 0px;
padding-top: 5px;
}
#header h1 a {
color: white;
}
Ici, nous avons un exemple de code CSS utilisé dans le fichier CSS qui définit la mise en forme du site. Le principe est de prendre un identifiant ou une classe de balise vu précédemment comme < div > qui est une balise permettant de créer un bloc (visible que lorsqu'on rajoute des bordures, comme celui au dessus qui est défini par un < div >) dans lequel nous écrirons du texte. Il suffit de rajouter un identifiant avec l'attribut id="" et lui donner un nom comme ceci < div id="header" >. Ensuite, dans le fichier CSS, il faut utiliser le symbole # pour montrer que c'est un identifiant suivi du nom donné. Dans ce cas, le "header" correspond à la barre de navigation supérieure permettant de regrouper les liens principaux. Les termes en anglais sont facilement traductibles comme "width: 100%" qui veut dire que la largeur du bloc doit occuper 100% de la page, et le "height: 50px" signifie que le bloc doit faire 50 pixels de hauteur. Les termes "margin" correspondentes aux marges, utilisées pour placer des espaces à l'extérieur du bloc. Le "background-color: #007FFF" donne la couleur du fond du bloc en hexadécimal.