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.