HTML

Formation HTML
Hayder BOUAZIZ
Elève ingénieur en deuxième

année Data Science
Consultant pôle projet depuis 2021

fonctionnement du WEB
HTML, CSS, JS
HTML, CSS, JS
HTML (HyperText Markup Language)
Définition : HTML est le langage utilisé

pour représenter la structure et le contenu
d’une page web. C’est un langage
interprété et qui utilise des « balises » pour
annoter du texte, des images et d'autres
contenus.
Aperçu sur la structure du code

Langage interprété VS compilé
Un langage compilé, c'est un Un langage interprété est lui

langage qui est, avant de traduit au fur et à mesure de
pouvoir l'exécuter, est traduit l'exécution par l'interpréteur.
en langage machine (binaire) Exemple : HTML , Python
par un compilateur.
Exemple : C, Java Un langage compilé sera plus
rapide qu'un interprété.
Les balises
Une balise est un élément utilisé pour indiquer la nature du texte qu'elles
encadrent (texte, image, lien, etc.). Celles-ci sont invisibles à l'écran mais
elles permettent à l'ordinateur de comprendre ce qu'il doit afficher
Les balises en paires : <nom balise [listes d’attribut]>...</nom balise>

Les balises orphelines : <nom balise [listes d’attribut] >
Exemples :
<title>Titre</TITLE>
<h1 id=”titre numéro 1” class=”titre”>Bonjour et bienvenue sur mon site</h1>
<img>


Structure d’une page HTML
Doctype : elle indique qu'il s'agit
d'une page web HTML.
La balise <html> : Elle englobe tout

le contenu de votre page
L'en-tête <head> : donne quelques

informations générales sur la page
Le corps <body> : la partie

principale de la page
L'encodage (charset) : indique

l'encodage utilisé dans votre fichier
.html
L'en-tête <head>
La balise <title> : Sert à indiquer le titre de la page
<title>Titre</title>
La balise <meta> : Sert à indiquer les métadonnées
<meta charset="UTF-8">
<meta name="description" content="ceci est la description de
la page">
<meta name="author" content="optima">
<meta name="keywords" content="HTML, CSS, JavaScript">
L'en-tête <head>
La balise <link> :
<link rel="stylesheet" href="style.css">

<link rel="icon" href="favicon.ico">
La balise <style> :
<style>
CSS code
</style>
La balise <script> :
<script> JavaScript code </script>

<script src="script.js"></script>
Les textes
La balise <p> : pour les paragraphes
<p> paragraphe </p>
La balise <h1> à <h6> : pour les titres

<h1> Bonjour et bienvenue sur mon site </h1>
La balise <br/> : pour les sauts de lignes

<p> Ligne 1 <br/> Ligne 2</p>
Les textes
La balise <i> : pour mettre un texte en italique
<i> Italique</i>
La balise <em> : pour mettre un texte en italique

<em> Italique</em>
La balise <b> : pour mettre un texte en gras

<b> gras</b>
La balise <u> : pour souligner du texte

<u> souligner </u>
La balise <mark> : pour surligner du texte

<mark>surligner</mark>
Les liens
La balise <a> : pour les liens
<a href= chemin>text a afficher</a>
<a href="page2.html">lien local</a>
<a href="https://www.w3schools.com">lien externe</a>
<a href="#top">retourner en haut</a>
<a href="#titre2">aller au deuxième titre</a>
<a href="tel:+21698765432">appeler</a>
<a href="mailto:someone@example.com">envoyer mail</a>

Les listes
Les listes ordonnées :
<ol>
<li> premier élément </li>
<li> deuxième élément </li>
<li> troisième élément </li>
</ol>
Les listes
Les listes non ordonnées :
<ul>
<li> premier élément </li>
<li> deuxième élément </li>
<li> troisième élément </li>
</ul>
Les listes
Les listes descriptives :
<dl>
<dt> premier élément </dt>
<dd> première description </dd>
<dt> deuxième élément </dt>
<dd> deuxième description</dd>
</dl>
Application
Les formulaires
Structure de base :
<form>
champs à afficher
</form>
Les inputs
La balise <input type=”text” > : pour les champs text
<label for=”i1“> prenom </label> <br>

<input type=”text“ id=” i1 ” name=” prenom ”placeholder=” name ”>
La balise <input type=”radio” > : pour un choix unique
<label for=”i1“> css </label> <br>

<input type=”radio“ id=” i1” name=” web” value=”css”> <br>
<label for=”i2“> js</label> <br>

<input type=”radio“ id=” i2” name=” web” value=”js”> <br>
<label for=”i3“> html</label> <br>

<input type=”radio“ id=” i3” name=” web” value=”html”> <br>
Les inputs
La balise <input type=”checkbox” > : pour un choix multiple
<label for=”i1“> css </label> <br>

<input type=”checkbox“ id=” i1” name=” c” value=”css”> <br>
<label for=”i2“> js</label> <br>

<input type=”checkbox“ id=” i2” name=” j” value=”js”> <br>
<label for=”i3“> html</label> <br>

<input type=”checkbox“ id=” i3” name=” h” value=”html”> <br>
La balise <input type=”submit” >
<input type=”submit“ value=” valider ” >

Les inputs
La balise <select > : pour les listes déroulantes
<label for="options">choisir</label>
<select name="options" id="options">
<option value="3">option 3</option>
</select>
La balise <input type=”email” >
<label for="mail">mail</label><br />

<input type="email" id="mail" name="mail" />
Les inputs
La balise <input type=”password” > : pour un choix multiple
<label for=”pw“> mot de passe </label> <br>

<input type=”password“ id=” pw” name=” pw” >
La balise <input type=”reset” > : pour réinitialiser le formulaire
<input type=”reset“ >
La balise <input type=”file” > : pour déposer un fichier
<label for=”fichier“> déposer le fichier</label> <br>

<input type=”file“ accept=”image/png, image/jpeg, *.png, *.gif
“ id=” fichier” name=” fichier” >
Autres input types
La balise <input type=”button” > : pour ajouter un boutton
La balise <input type=”date” > : pour insérer une date
La balise <input type=”color” > : pour choisir une couleur
La balise <input type=”url” > : pour insérer une url
La balise <input type="range" > : pour choisir un intervalle
…
Application
Les tableaux
Structure de base :
<table>
<caption> tableaux des températures </caption>
<tr>
<th> mois </th>
<th> température moyenne </th>
</tr>
<tr>
<td> Novembre </td>
<td> 16.2 </td>
</tr>
<tr>
<td> Décembre </td>
<td> 12.7 </td>
</tr>
</table>
Les tableaux : colspan et rowspan
Structure de base :
<table >
<tr>
<td colspan=”2” > 1 </td>
<td> 2 </td>
</tr>
<tr>
<td>3 </td>
<td rowspan=”2”>4 </td>
<td> 5</td>
</tr>
<tr>
<td>6 </td>
<td>7 </td>
</tr>
</table>
Application
Les images
La balise <img > :
<img src=”tableau.jpg“ alt=”tableau : Un dimanche après-midi à l'Île de la Grande Jatte ”
width=”400” height=”300”>
Les figures
La balise <figure> :
<figure>
<img src=”tableau.jpg“ alt=”tableau width=”400” height=”300”>
<figcaption> Fig 1 : tableau de Georges Seurat </figcation>
</figure>
Les vidéos
La balise <video > :
<video controls autoplay muted width=”400” height=”300”>
<source src=”video.mp4“ type=”video/mp4” >

<source src=”video2.mp4“ type=”video/mp4” >
</video>
span VS div
La balise <div > : groupe des éléments reliées en blocs
<div >
…
</div>
La balise <span > : utilisé pour appliquer un style sur une partie in-line
<span >
…
</span>
span VS div
La balise <div > : groupe des éléments reliées en blocs
<div id=“paragraphes”>
<p>premier paragraphe</p>
<p>deuxième paragraphe</p>
<p> troisième paragraphe</p>
</div>
La balise <span > :
<p>pas intéressant <span id=“special”> important </span></span> pas intéressant </p>

Les balises sémantiques
La balise <header > : pour un titre, logo…
<header>
…
</header>
La balise <nav > : regroupe des liens de navigation

<nav>
…
</nav>
La balise <section > : pour les chapitres, contact info…
<section>
…
</section>
Les balises sémantiques
La balise <article > : pour un article, commentaire; post…
<article>
…
</article>
La balise <aside > : pour une colonne latérale

<aside>
…
</aside>
La balise <footer > : pour sitemap, copyrights …

<footer>
…
</footer>

HTML

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

HTML

Transféré par

Droits d'auteur :

Formats disponibles

Formation HTML

Elève ingénieur en deuxième

Consultant pôle projet depuis 2021

Définition : HTML est le langage utilisé

Aperçu sur la structure du code

Un langage compilé, c'est un Un langage interprété est lui

Les balises en paires : <nom balise [listes d’attribut]>...</nom balise>

<h1 id=”titre numéro 1” class=”titre”>Bonjour et bienvenue sur mon site</h1>

La balise <html> : Elle englobe tout

L'en-tête <head> : donne quelques

Le corps <body> : la partie

L'encodage (charset) : indique

La balise <meta> : Sert à indiquer les métadonnées

<link rel="stylesheet" href="style.css">

<script> JavaScript code </script>

<p> paragraphe </p>

La balise <h1> à <h6> : pour les titres

La balise <br/> : pour les sauts de lignes

La balise <em> : pour mettre un texte en italique

La balise <b> : pour mettre un texte en gras

La balise <u> : pour souligner du texte

La balise <mark> : pour surligner du texte

<a href= chemin>text a afficher</a>

<a href="page2.html">lien local</a>

<a href="https://www.w3schools.com">lien externe</a>

<a href="#top">retourner en haut</a>

<a href="#titre2">aller au deuxième titre</a>

<a href="mailto:someone@example.com">envoyer mail</a>

<label for=”i1“> prenom </label> <br>

La balise <input type=”radio” > : pour un choix unique

<label for=”i1“> css </label> <br>

<label for=”i2“> js</label> <br>

<label for=”i3“> html</label> <br>

<label for=”i1“> css </label> <br>

<label for=”i2“> js</label> <br>

<label for=”i3“> html</label> <br>

La balise <input type=”submit” >

<input type=”submit“ value=” valider ” >

La balise <input type=”email” >

<label for="mail">mail</label><br />

<label for=”pw“> mot de passe </label> <br>

La balise <input type=”reset” > : pour réinitialiser le formulaire

<input type=”reset“ >

La balise <input type=”file” > : pour déposer un fichier

<label for=”fichier“> déposer le fichier</label> <br>

<source src=”video.mp4“ type=”video/mp4” >

La balise <span > :

<p>pas intéressant <span id=“special”> important </span></span> pas intéressant </p>

La balise <nav > : regroupe des liens de navigation

La balise <section > : pour les chapitres, contact info…

La balise <aside > : pour une colonne latérale

La balise <footer > : pour sitemap, copyrights …

Vous aimerez peut-être aussi