Mémo STIC 1
Cette page est un résumé des différents cours de STIC I.
Elle est principalement faite pour m’aider à structurer ma pensée et à avoir une page regroupant toutes les informations qui pourraient m’être utiles.
Elle est réalisée à partir des données du cours, des exemples sur les pages wiki, de contenus trouvés sur internet et des discussions avec l’IA.
N’hésitez pas à modifier son contenu si vous voyez des termes erronés ou peu précis, ou tout simplement à le compléter avec des infos qui ne figurent pas sur cette page.
Références :
Html :
https://github.com/dinanathsj29/html5-essentials-tutorial/blob/master/README.md
https://facemweb.com/blog/creation-site/liste-balises-html/
https://www.pierre-giraud.com/html-css-apprendre-coder-cours/tableau-table/
HTML, CSS et JAVA SCRIPT
HTML représente la structure du document, son corps.
CSS permet de traiter son apparence
JavaScript permet de traiter les actions, les « comportements ».
Pour faire des commentaires
Les commentaires permettent de donner des explications sur le code. Tout ce qui est entre les balises de commentaires est ignoré par l’ordinateur et pas affiché sur la page web.
Les éléments de commentaires sont différents selon html, css ou js.
| html | css | js |
| < !- - qu’on ne souhaite pas faire apparaitre - - > | /* commentaire qu’on souhaite ne pas faire apparaitre */ | /* commentaire sur un paragraphe ou une fonction qu’on souhaite ne pas faire apparaitre */
|
HTML :
Structure
La page html a une structure bien spécifique, elle commence par des informations générales < ! DOCTYPE html > à inscrire tout en haut du document. C’est également dans cette partie que nous pourrons insérer les liens css des différentes librairies ainsi que le lien de notre page css.
Raccourcie clavier :
Raccourcie clavier pour créer rapidement et facilement cette section :
- Enregistrer une nouvelle page au format html.
- Dans la première ligne appuyer sur « ! » puis « entrer »
La mise en page s’affiche. Il suffit de changer la langue en fr si souhaité plutôt qu’en anglais.
La partie <title> correspond à ce qui va s’afficher dans les onglets lorsque votre page est ouverte.
Page :
Tout le reste du code s’écrit entre les balises <body> </body>
Pour une meilleure structure et faciliter la lecture du code, il est possible d’organiser sa page comme suit :
<body> <head> En tête </head> <nav> Menu </nav> <aside> Descriptif, résumé de la page </aside> <main> Contenu </main> <footer> Pied de page </footer> </body>
Mise en page :
Le code commence toujours par une balise ouvrante <…> et se termine par une balise fermante </….>
<p> permet de créer un paragraphe </p>
<h1> Gros titre </h1>
<h2> titre 2 </h2> etc…
<i> italique sans ref. sémantique </i>
<em> italique avec ref sémantique </em>
<b> gras sans ref. sémantique </b>
<strong> gras avec ref sémantique </strong>
<mark> surligne du texte</mark>
<ins> souligne un texte </ins>
<del> barre un texte </del>
Balises autofermante :
<br/> permet un saut de ligne
<hr/> permet de créer une ligne de séparation
<sup> et <sub> Permettent d’écrire des textes type fraction : le texte sup sera en haut. Le texte sub en bas.
Vous pouvez consulter ce site pour avoir une liste des différentes balises html [1]
Insérer des liens
L'attribut <a href> et <img src> permettent d'insérer des liens et des images.
<a href = « https…..lien du site » </a>
<img src = “https…..lien de l’image” alt =” information-description de l’image“ title= ”nom de l’image en survol avec la souris” />
alt : Permet de voir la description de l’image si le lien ne s’affiche pas. (mauvaise connexion ou lien cassé)
Il permet également de lire l’information de ce qui est écrit aux personnes aveugles.
Si vous souhaitez que le lien s’ouvre dans un nouvel onglet il suffit de rajouter l’indication :
target = "_blank” à la suite du lien.
<a href = « https….. target = "_blank” » </a>
Lien absolu :
Les chemins absolus représentent le lien depuis la base.
<a href =”https://etu.tecfa/mapage.html” >nom du lien</a>
<img src = “ /users/audrey/images/photo.png”>
Lien relatif :
Les chemins relatifs représentent une partie du lien.
<a href = “../nomdufichier.html”>titre du fichier</a>
<img src=”images/photo.png”>
→ dans un fichier, pour retourner en arrière on utilise “..” et “/” pour l’ouvrir.
Lien “bookmark” :
Ces liens permettent de faire des ancrages dans la page afin de permettre à l'utilisateur d'y revenir à n'importe quel moment.
- Inscrire à n’importe quel endroit qu’on souhaite cibler sur la page l’attribut “id" . exemple :
<h(1) id=”croco”> Les crocodiles </h1>
- Plus tard lorsqu'on souhaitera faire référence à ce passage et permettre au lecteur d’y accéder directement il suffira d’inscrire :
<a href = “croco” </a>.
Faire des listes et des tableaux
Faire une liste à puce
<ul> <li> mot </li> <li> mot </li> </ul>
Faire une liste ordonnée
<ol> <li> mot </li> <li> mot </li> </ol>
Faire des tableaux
<table> <tr> ligne du tableau </tr> <td> colonne du tableau </td> <th> cellule d’en-tête de la colonne en ligne.</th> </table>
Vous pouvez consulter ce site pour plus d'informations :
https://www.pierre-giraud.com/html-css-apprendre-coder-cours/tableau-table/
Créer des slides
<div class="slider"> <div class="slide">Slide 1</div> <div class="slide">Slide 2</div> </div>
Il est aussi possible d’utiliser la bibliothèque Reveal.js pour créer plus de transitions.
Créer des boutons et des formulaires
Créer des boutons :
<button> texte sur le bouton </button>
Utiliser le css pour styliser le bouton.
Les différents formulaires :
Forme de base :
<form>
<p>
<label> Prénom : </label>
<input type= “texte” name=”Prénom”/>
</p>
</form>
Formulaire à choix unique (radio) :
<p>Quel est votre âge ? </p> <input type="radio" name="my-radio" value="Moins de18 ans" /> Moins de18 ans<br/> <input type="radio" name="my-radio" value="Entre 19 et 40 ans"/>Entre 19 et 40 ans<br/> <input type="radio" name="my-radio" value="Entre 41 et 60 ans"/> Entre 41 et 60 ans <br/> <input type="radio" name="my-radio" value="Plus de 60 ans"/> Plus de 60 ans<br />
Formulaire à choix multiples (checkbox) :
<p>Sur quel.s continent.s êtes vous allé.e ? </p> <input type="checkbox" name="Afrique" value="Afrique"/> Afrique <br/> <input type="checkbox" name="Océanie" value="Océanie"/> Océanie <br/> <input type="checkbox" name="Europe" value="Europe"/> Europe <br/> <input type="checkbox" name="Amérique" value="Amérique"/> Amérique <br/> <input type="checkbox" name="Asie" value="Asie"/> Asie <br/>
Bouton “Envoyer le formulaire” :
<input type="submit" value="Envoyer"/>
Vous pouvez utiliser ce site pour plus d'informations : https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html5-et-css3/8061492-creez-des-formulaires
Et pour s'entraîner ?
https://htmlonline.org/fr/ est un éditeur en ligne de code.
Il permet de s’entraîner ou visionner ce que l’on souhaite coder.
Les vidéos
Cette section reprend des parties du code réalisé pour l’exercice 4 de stic.
Insérer une vidéo et des sous-titres
<div class="video"> <video id="movie1" controls="controls" preload="metadata" width="832" height="464"> <source src="https://tecfaetu.unige.ch/etu-maltt/freya/avogadr5/assets/video%20g%C3%A9othermie.mp4"/> <track kind="subtitles" label="Soustitre en FR" src="soustitre.vtt" srclang="fr" default/> </video> </div>
Sous-titres
Pour insérer des sous-titres à une vidéo il faut l’annoncer dans html et créer un fichier .vtt qu’on joindra dans la balise.
<track kind="subtitles" label="Soustitre en FR" src="soustitre.vtt" srclang="fr" default/>
Le fichier .vtt contient les phrases qu’on souhaite voir afficher à la seconde prêt. Il est possible d’utiliser des logiciels pour faciliter le processus (https://subtitle-editor.org/) .
- !- Ne pas oublier de déposer le fichier sur le serveur.
WEBVTT
1
00:00:01.340 --> 00:00:02.090
Sous nos pieds,
2
00:00:02.710 --> 00:00:04.950
la Terre dégage une chaleur constante.
3
00:00:05.800 --> 00:00:09.410
Et si cette chaleur pouvait chauffer nos maisons en continue…
Ancrage
Les ancrages sont des liens qui permettent à l’utilisateur d’atteindre directement la partie souhaitée dans la vidéo.
Dans html :
<a href="#movie1" onclick="pointTo(49)">Les différents types de géothermie</a> <a href="#movie1" onclick="pointTo(184)">La géothermie conventionnelle</a> <a href="#movie1" onclick="pointTo(215)">L'egs, Systèmes Géothermiques Améliorés</a> <a href="#movie1" onclick="pointTo(253)">L'ags, Systèmes Géothermiques Avancés</a> <a href="#movie1" onclick="pointTo(312)">Les projets pilotes en Suisse</a>
« Point to(49) » correspond à la 49ème seconde de la vidéo.
Lorsque l’utilisateur cliquera sur « les différents types de géothermie », la vidéo affichera le passage.
*Les liens sont stylisables avec css.
Dans JS :
1. Identifier votre vidéo
var video = document.getElementById("movie1");
2. Créer une fonction de pointage
function pointTo(seconds) {
//Déplacer la lecture au moment souhaité
video.currentTime = seconds;
//Faire démarrer la lecture
video.play(); }
Questions
Il est possible d’insérer des questions dans la vidéo afin d’interagir avec l’utilisateur.
Dans JS :
1. Identifier la vidéo dans le DOM
var movie1 = document.getElementById("movie1");
2. Choisir le temps souhaité pour l’affichage de la question
movie1.ontimeupdate = function () {
var currentTime = Math.floor(movie1.currentTime);
if(currentTime == 290) {
3. Mettre le film en pause et poser la question
movie1.pause();
var r = prompt("L'AGS provoque-t-il des risques sismiques ?");
4. Contrôler la réponse et agir
if(r.toLowerCase() == "non") {
movie1.currentTime = 291; //Ajouter une seconde sinon la question va s'afficher à nouveau;
movie1.play();
} else {
movie1.currentTime = 253; //Remettre la vidéo sur la partie explicative;
movie1.play();
}
}
}
Si la réponse de l’utilisateur est bonne la vidéo se poursuit. Si elle est fausse la vidéo retourne au passage explicatif.