Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.
For the best experience please use the latest Chrome, Safari or Firefox browser.
Vous allez créer une page qui permet d'afficher le texte ci-joint en partant de ce fichier de départ.
Pour cela vous ouvrirez un éditeur de texte de votre choix et sauvegarderez votre document HTML dans le répertoire Documents de votre compte personnel. La plupart des éditeurs peuvent colorier le code en mettant en couleur les mots-clés. Utilisez un validateur.
Le résultat doit être identique à cet exemple de correction.
Voici le code source correspondant.
Vous veillerez à utiliser des niveaux de titre, des paragraphes, du code, de l'affichage, des indications de saisie clavier, de la mise en relief et de l'emphase, ainsi que les cassures données dans le cours.
En vous servant du fichier vierge comme point de départ (changez le title), présentez les joueurs du match PSG-AS Monaco du 20 novembre 2020 dans un document.
Liste des joueurs du PSG
Liste des joueurs de l'AS Monaco
Le résultat de l'exercice précédent doit ressembler plus ou moins à ceci (code-source) (vous pouvez avoir mis un titre h1 en plus, par exemple).
Maintenant, faites une autre version du fichier où vous listez les deux équipes dans une liste numérotée, dans chaque équipe les cinq types de poste dans une liste non-numérotée, et dans chaque type de poste une liste (éventuellement avec une seule personne).
Le résultat de la deuxième partie doit ressembler plus ou moins à ceci (code-source). Vous porterez une grande attention à la façon dont s'imbriquent les trois niveaux de liste.
À partir d'un document dont l'URL est http://www.example.com/new/search.php?term=info&cat=2, quelle est l'URL absolue du document atteint avec les URL (relatives ou absolues) ci-dessous :
https://www.google.fr//www.google.fr/old/migration.htmllogo.png?term=info&cat=3/?term=info&cat=2#res4www.google.frLa solution est visible ici.
Prenez le document de base (source) et mettez-le dans votre répertoire ~/public_html en lui donnant le nom agrumes.html.
Créez un répertoire assets dans public_html, et téléchargez-y l'image du cours (clic-droit sur l'image).
Modifiez le fichier de façon à faire apparaître l'image entre les deux paragraphes. Que constatez-vous ?
Ajoutez un attribut height ou width pour avoir une image en adéquation avec le texte. Que se passe-t-il si on fixe les deux en même-temps (par exemple à 100) ? Et si on met l'image (avec une petite hauteur par ex. 20) à l'intérieur d'un des deux paragraphes de texte au lieu de son propre paragraphe ?
N'oubliez pas l'attribut alt. Vérifiez avec un validateur ce qui se passe si on l'omet.
Voici une correction.
Si vous êtes à l'IUT, un serveur web est installé sur votre machine. Entrez l'URL http://localhost/~1234567890/agrumes.html en remplaçant 1234567890 par votre identifiant.
Une fois la page ouverte, ouvrez les outils de développement F12, activez l'onglet Réseau, rechargez la page avec Ctrl+Shift+R. Observez les chargements qui ont lieu.
Allez sur https://sequencediagram.org/, et montrez les échanges HTTP observés lors d'un rechargement complet (début de fichier).
Voici une correction. Discutez aussi ce qui se passe lorsqu'on fait juste un Ctrl+R.
Reprenez le résultat de l'exercice 2. Faites-en deux fichiers (un pour chaque équipe).
Maintenant, faites un troisième fichier qui présente le match : lieu (stade Louis II à Monaco), score (3-2) et des liens vers la composition des deux équipes. Vous ferez un lien vers la page Wikipédia du stade aussi.
Vous ajouterez une liste des postes avec des liens à l'intérieur des deux fichiers d'équipe.
NB: pour bien voir l'effet des ancres, il faut que le texte dépasse de la fenêtre. Vous pouvez réduire la taille de votre fenêtre, ou rajouter dans la balise head la ligne :
Le résultat doit ressembler à ce fichier (source ; source du PSG ; source de l'ASM).
Reprenez le résultat de l'exercice 4. Tracez sur une feuille de papier l'arbre du document, d'abord sans les nœuds attributs ou textes, puis en rajoutant les nœuds attributs, puis les nœuds texte (juste leur présence).
Pour les nœuds texte, toutefois, vous supprimerez tous les blancs superflus et les commentaires (ça crée beaucoup de nœuds supplémentaires sans rien apporter à l'exercice, mais ils existent dans les fichiers réels).
Voici la solution avec uniquement les balises, la solution sans nœuds texte et la solution complète.
Use a spacebar or arrow keys to navigate.
Press 'P' to launch speaker console.
Reprenez le résultat de l'exercice 6 (source ; source du PSG ; source de l'ASM). Rajoutez des sélecteurs et propriétés pour obtenir que les rôles des joueurs soient affichés en rouge et les noms des joueurs soient affichés en bleu. Vous pouvez enlever l'agrandissement de la police de caractère. Le reste du fichier n'a pas besoin d'être modifié.
Voici une solution pour le PSG (source).
