DY

02 Quelques structures

Mise en forme de règles

Première itération

Téléchargez le texte à l'exemple ci-avant en utilisant les balises suivantes:

<p>

<h1>
<h2>
<h3>

NB : la mise en forme sera différente, mais cherchez surtout à reproduire la structure logique du document.

Seconde itération

Téléchargez le modèle HTML correspondant à l'exemple, et recopiez votre code à l'intérieur de la balise <body> . Ce modèle contient un lien vers la feuille de style appropriée.

Dans les deux cas, ne tenez pas compte pour l'instant des mots en gras, italique et souligné.

Troisième itération

Améliorez votre version de l'exemple ci-avant en ajoutant les balises <section>.

Reprenez votre code HTML reproduisant l'exemple ci-avant, et ajoutez les balises manquantes. Le rendu doit maintenant être très proche de celui de l'exemple.

Quatrième itération

Dans l'exemple ci-avant pouvez-vous identifier une liste ? Reprenez votre code HTML reproduisant cet exemple et modifiez-le en conséquence.

Le rendu doit maintenant être identique à celui de l'exemple.

Structurons notre page

Au sein du corps du document défini lors du TP n°1 créez plusieurs articles de type actualités

N.B: Une actualité est à minima constitué d'un(e):

Exemple d'un article en HTML

<div>
    <h2>The Last Jedi trailer is out !</h2>
    <ul>
        <li>Written by Samy Delahaye</li>
        <li>On Thurday 21, sept. 2017</li>
    </ul>
    <p>Insert some fanboy text here !</p>
    <a href=".." title="..">Read more !</a>
</div>

P.S: SI vous cherchez du texte de remplissage pour vos tps, je vous conseille l'excellent site fillerama

Un menu de navigation

Un menu de navigation n'est rien d'autre qu'une liste de liens non ordonnée.

NB:

<div class="maclass"></div>

Règles 2 (bonus)

Si vous êtes en avance sur le reste du groupe.

Téléchargez l'archive suivante contenant une partie des règles du jeu citadelles.

Remettez le fichier de règles en forme comme précédemment. Toutefois le mot carte peut parfois être suivi de certains nom de personnage, de lieu, etc.. dans ce cas il convient de le remplacer par l'image correspondante présente dans le dossier img.