Mon memento HTML

Le texte

Le Texte

<h1>Mon titre H1-un seul par HTML</h1>
<h3>Mon titre </h3>
<h4>Mon titre h4</h4>
<h5>Mon titre H5</h5>
<h6>Mon titre H6</h6>

<abbr>        : Abréviation
<blockquote>  : Citation (longue)
<cite>        : Citation 
<q>           : Citation (courte)
<sup>         : Exposant
<sub>         : Indice
<strong>      : Mise en valeur forte
<em>          : Mise en valeur normale
<mark>        : Mise en valeur visuelle

<br /> : Retour à la ligne
<hr /> : Ligne 
<address> : Adresse de contact
<del> : Texte supprimé
<ins> : Texte inséré
<dfn> : Définition
<kbd> : Saisie clavier
<pre> : Affichage formaté 
<progress> : Barre de progression
<time> : Date ou heure  

texte préformaté

permet d'ecrire du code, on utilisera alors la balise pre et code

<pre>
<code class="language-html">
</code>
</pre>

Les Liens

<nav>
<a href="j1-cours.html"
target="_self"> 
J1-Structure HTML </a><a 
href="#"target="_self"> J2</a>
</nav>
<blank> : la page va s'ouvrir dans un nouvel onglet. 
<self> : s'ouvre dans la meme fenêtre. 
C'est le comportement par defaut.
<a href="https://www.google.fr/"
target="_blank">

Lien Ancres

<nav>
    <ul>
      <li><a href="#conteneur">Lien vers conteneur</a></li>
      <li><a href="#lien">Lien vers lien</a></li>
      <li><a href="#lienTel">Lien vers téléphone</a></li>
      <li><a href="#lienmail">Lien vers mail</a></li>
      <li><a href="#lienID">Lien vers ID</a></li>
     </ul>
 </nav>

Lien mail

<a href="mailto:salamoneraquel@gmail.com">
mon email</a>

Lien tel

<a href="tel:+"+336000000> 
Lancer l'appel</a>

Les listes

Les liste non ordonnés a puce

<ul>
<li>Chat</li>
<li>Chien</li>
<li>Souris</li>
</ul> 

Les liste ordonnés à puce

<ol>
<li>Chat</li>
<li>Chien</li>
<li>Souris</li>
</ol>

Liste de definitions

<ol>
<li>Chat</li>
<li>Chien</li>
<li>Souris</li>
</ol>

Les images

<img src="image/image.jpg">

attribut
width : largeur de l'image
height : hauteur de mon image
<img src="image/image.jpg" 
width="200">

attribut alt
<img src="image/image.jpg"
alt="illutration d'une femme" 
title="women">  

Les Médias

La vidéo

Intégrer une vidéo Youtube

<img src="image/image.jpg">

attribut
width : largeur de l'image
height : hauteur de mon image
<img src="image/image.jpg" 
width="200">

attribut alt
<img src="image/image.jpg"
alt="illutration d'une femme" 
title="women">  

Intégrer une vidéo stokée dans notre fichiers

<video src="media/video.mp4" 
controls width="560" autoplay muted></video> 

les video automatique et autolay

<video src="media/video.mp4" 
controls width="560" autoplay muted></video>
<video src="media/video.mp4" 
controls width="600" height="400" 
poster="image/image.jpg "></video>

L'audio

<audio src="media/NovaNoma-Gaia.mp3"
preload ="auto" controls loop></audio>

Formulaire de contact

<section>
<h2>Les formulaires</h2>
<form action="" 
method="">
<div>
<label for="prenom">
Votre prénom</label>
<input id="prenom" name="
prenom" type="text" 
size="30" minlength="4" 
maxlength="8" 
required placeholder="indication"> 
</div>
<div>
<label for="
email">E-mail</label>
<input id="email" 
name="email"
 type="email"
size="30"  
required placeholder="
test@gmail.com"> 
</div><
div>
<label for="mdp">
Mot de passe<
/label>
<input id="mdp" 
name="mdp" 
type="password"
size="30"  
required placeholder="
mot de passe">  
</div>
<div>
<label for="message">
Votre message</label>
<textarea id="message" 
name="message" rows="5" 
cols="15" placeholder="
votre message"></textarea>
</div>
<input type="submit" 
value="Envoyer le formulaire">
</form>
</section>

Font Awesome

<i class="fab fa-facebook"></i>
<i class="fab fa-instagram-square"></i>
changer la couleur de l'icon
<i style="color:red;"
class="fas fa-birthday-cake"></i>