Cours Complet HTML & CSS

République Algérienne Démocratique et Populaire
Ministère de l’Enseignement Supérieur et de la Recherche Scientifique

Université Ibn Khaldoun de Tiaret - Algérie
Faculté des Mathématiques et de l’Informatique, Département d’informatique
Formation des agents de la santé

Techniciens Supérieurs & Adjoints d’Ingénieurs
Enseignant : Dr. Cheikh KHERICI.

---- MCB ----
Juin 2022.
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Université Ibn Khaldoun de Tiaret, Faculté des Mathématiques et de l’Informatique, Tiaret - Algérie 14000.
E-mail: [email protected], Tel.: (+213) 46 22 57 49.
I. Introduction
II. Présentation du cours et de ses objectifs
III. 1ère Partie : Les Bases en HTML et en CSS.
IV. 2ème Partie : Formater du texte & positionner des éléments grâce au CSS.
V. 3ème Partie : Fonctionnalités Avancées.
VI. 4ème Partie : Aller plus loin.

Introduction
 HTML est l’abréviation de ‘’HyperText Markup Language’’, soit en français
‘’langage hypertexte de balisage’’.
 Ce langage a été créé en 1991 et a pour fonction de structurer et de donner du sens
à du contenu.
 CSS signifie ‘’Cascading Style Sheets’’, soit ‘’feuilles de style en cascade’’. Il a été
créé en 1996 et a pour rôle de mettre en forme du contenu en lui appliquant ce
qu’on appelle des styles.
 Le HTML sert, à indiquer aux navigateurs quel texte doit être considéré comme
un paragraphe, quel texte doit être considéré comme un titre, que tel contenu est
une image ou une vidéo.
 Le CSS, quant-à-lui, est utilisé pour appliquer des styles à un contenu, c’est-à-dire
à le mettre en forme.
 Ainsi, avec le CSS, on pourra changer la couleur ou la taille d’un texte,
positionner tel contenu à tel endroit de notre page web ou ajouter des bordures
ou des ombres autour d’un contenu.
Présentation du cours et de ses objectifs
 Le but du cours est de vous apprendre pas à pas à coder en HTML5 et en CSS3.
 A l’issue du cours « conception des sites Web » vous allez êtes capable de faire une
conception qui comporte des paragraphes, des menus, des images, des vidéos,
des articles de presse, …etc.
 Ce cours est divisé en trois parties, progressives :

 Une première partie avec un peu de théorie dans laquelle nous poserons les
bases pour un apprentissage solide ;
 Une deuxième partie dans laquelle nous verrons comment positionner les
différents éléments de notre site et comment personnaliser nos textes ;
 Une dernière partie où nous explorerons les fonctionnalités avancées du
HTML5 et du CSS3 (insertion de vidéos, formulaires, responsive design, etc.).
 Les langages HTML et CSS sont véritablement le socle de tout projet de
développement web par exemple : créer un site e-commerce, un blog, une
application mobile.
 Donc vous serez obligé de passer par les langages HTML et CSS.
Les bases d’un site Web
 Une page Web c’est …
 Un fichier HTML est un format de fichier « texte » éditable dont les éléments
ont du sens.
 Au format .html
 Peut contenir du texte, des images, des liens, des médias, etc.
 Peut être liée à une autre page via des liens.
 Un ensemble de pages liées entre elles.
 Accessible en ligne depuis n’importe où.
 Mettre votre site en ligne ….
 Le principe de « serveur web »
 Pour mettre en ligne on fait passer ses fichiers de la machine du créateur à un

serveur web.
 FTP : File Transfer Protocol, protocole de communication destiné à l'échange
de fichiers sur un réseau TCP / IP.
 Permet de « mettre en ligne » votre site web.
 Une sorte d’explorateur sur un serveur à distance (Ex : Filezilla).
 Souvent à l’aide d’un client FTP. Votre hébergeur vous fournira les logins et
mot de passe pour y accéder.
 Générer du HTML avec un éditeur
1. Bloc Note ou TextEdit : pas de coloration syntaxique.
2. Brackets : est un éditeur spécialisé dispose:
 Auto-complétion.
 Retour à la ligne.
 Coloration syntaxique, plugins etc.
 Gratuit pour Mac et Windows – open source.
3. Atom : est un éditeur spécialisé dispose:
 Coloration syntaxique, plugins etc.
 Gratuit pour Mac et Windows – open source.
4. Sublime Text : est un éditeur spécialisé dispose :
 Colorisation syntaxique, plugins.
 30 jours d’essai sur Windows/Mac/ Linux puis payant.
5. Coda : uniquement sur Mac (payant) http://panic.com/coda/
6. Geany (Windows) gratuit http://www.geany.org/Download/Releases
7. Notepad ++ : gratuit.
8. Komodo : (Windows et Mac) http://www.activestate.com/komodo-ide
9. Netbeans : (Windows et Mac) gratuit http://netbeans.org/
10. WYSIWYG : What You See Is What You Get:
 Permet de visualiser le rendu directement.
 Code parfois pas toujours propre ou optimisé, exp.: Dreamweaver
(payant), Blue Griffon (gratuit).
11. Autres éditeurs « visuels » sans avoir besoin de notions de code, exp.:
WordPress, Drupal, Joomla, Prestashop, …etc.
La syntaxe HTML :
balises, éléments et attributs
Le principe de balise :
 Les balises structurent le contenu de la page (texte, images, etc.)
 Chaque balise a un rôle et donne du sens au contenu présenté.
 On peut imbriquer les balises (on y reviendra) les unes dans les autres:
<p> Un bloc !! </p>

<div>
<p> Un joli paragraphe </p>
<p> Autre un joli paragraphe </p>
</div>
 Touche < du clavier pour ouvrir : <

 Touche maj + < pour fermer : >
 Le nom des balises est prédéfini dans les spécifications HTML, donc on ne peut
PAS en inventer !
 Quelques exemples : <html>, <body>, <img>, <p>, <div>, <a>, … etc.
 Par convention et pour faciliter la lecture du code, toute balise ouverte doit
être fermée (sauf exception).
 Certaines balises bien particulières n’ont pas besoin d’être fermées, on les dit
« auto-fermantes », elles n’ont ni contenu ni balise fermante.
Attributs et valeurs :
 Certaines balises peuvent être complétées par des attributs précisant
certains paramètres (l’adresse des liens, source d’une image à afficher, etc.).
 Une balise peut contenir plusieurs attributs.
<p id=‘’section1’’> Bonjour ! </p>
balise attribut valeur

Attributs et valeurs :
 Les attributs sont des éléments prédéfinis dans le HTML on ne peut en
« inventer ».
 On peut les mettre entre simple quote, double quote ou rien. Par convention
nous choisissons les doubles quotes " "
<div id="kittens"> // <div id=kittens>

 Les attributs sont toujours dans la balise ouvrante.
Exemples d’Attributs :
 src=" " : donner la source (d’une image par exemple):
<img src="C:\Users\Asus\Desktop\Formation Agents de santé\Sites
Web\Html5-css3.jpg" width="400" height="250" alt=“Logo d’HTML & CSS" />
 href=" " : donner la destination d’un lien:
<a href="http://www.google.fr"> Texte du lien </a>
 id=" " : donner un identifiant à l’élément que l’on pourra utiliser en CSS.
 Les Ids doivent être uniques par page
<p id="monid"> contenu </p>
 class=" " : donner une classe à l’élément que l’on pourra utiliser en CSS.
 Les classes peuvent être dupliquées sur la page
<p class="maclasse"> contenu </p>
Doctype, html, body :
Structure d'un document valide
 Décomposons balise par balise !
1 <!DOCTYPE html>
2 <html lang=‘’ar’’>
3 <head>
4 <meta charset="utf-8">
5 <title> Conception des sites Web </title>
6
7 </head>
8 <body>
9 <h1> Cours HTML5 & CSS3 </h1>
10 <p> mon premier pas d'HTML5 et CSS3 </p>
11 </body>
12 </html>
La notion de doctype :
 Permet au navigateur de savoir quelle version de HTML (ou XHTML) est
utilisée sur la page.
 Obligatoire pour valider une page (validateur W3C).
 Pas de doctype signifie que le navigateur fait ce qu’il peut avec ce qu’il trouve,
peut expliquer certains bugs.
<!doctype html>
----------------------------------------------------------------
W3C : World Wide Web Consortium (1994).
La balise <html>
 Tout document HTML commence par la balise <html> qui se ferme en fin
de document par la balise </html>
 La balise <html> contient nécessairement deux balises définissant l’entête
(<head>) et le corps (<body>) du document.
L'attribut lang
 Permet de spécifier la langue de traitement du document global :
 Indexation dans la bonne langue par les moteurs de recherche.
 Synthèse vocale.
 Vérification orthographique des formulaires.
<html lang="fr">
La balise <head>
 Détermine l’entête du document et contient les méta-informations.
La balise <title>
 On y trouve la balise <title> qui sera le titre du document:
 Sert en référencement (repris dans les résultats de recherche).
La balise <head> : les balises meta
 On y ajoutera également les appels pour les feuilles de style CSS et certains
JavaScripts.
 On peut y trouver des balises « meta » parmi lesquelles :
<meta charset="UTF-8"/>
 permet de définir l’encodage de caractère de la page (à mettre directement
sous le <head>).
<meta name="description" content="description pour le référencement"/>
 affiché dans les résultats de recherche.
La balise <body>
 Délimite le contenu de la page.
 Le contenu est constitué de texte, images et autres éléments qui seront
affichés.
<body>
Contenu de la page
</body>
En résumé
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title> Titre de ma page </title>
</head>
<body>
Contenu de la page
</body>
</html>
Les commentaires dans le HTML
<p> Du texte ici <! - - avec un commentaire invisible - -> </p>
NB: Il est possible d’écrire du texte qui ne sera visible que dans le code source
et non sur le site : un commentaire.
Les éléments de structuration
du contenu
La balise « division » <div>
<div> un bloc ici </div>

<div> un autre bloc ici </div>
<div>
Le but premier de ce cours est de vous apprendre pas à pas à coder en HTML5
et en CSS3. </br>
Outre cela, je vais également m’appliquer à vous montrer la logique et les
mécanismes derrière ces deux langages afin que vous compreniez ce que vous
faîtes et que vous deveniez vite autonomes.
</div>
La balise « division » <div>
 <div> : est un conteneur.

 Élément de type bloc qui peut inclure n’importe quel autre balise HTML.
 Suivi d’un passage à la ligne.
 Permet de regrouper d’autres blocs de HTML (paragraphes, tableaux, …etc.)
et de leur donner un style CSS commun.
Grille en div
div header
div
div Content sidebar
div footer
La balise paragraphe <p>
<p> un paragraphe ici </p>

<p> un autre paragraphe ici </p>
<p>
Le but premier de ce cours est de vous apprendre pas à pas à coder en HTML5
et en CSS3. </br> Outre cela, je vais également m’appliquer à vous montrer la
logique et les mécanismes derrière ces deux langages afin que vous compreniez
ce que vous faîtes et que vous deveniez vite autonomes.
</p>
La balise paragraphe <p>
 Les paragraphes sont des éléments de type « bloc », suivis d’un passage à la
ligne et d’une marge par défaut.
 On peut imbriquer un paragraphe dans un div.
 On ne doit PAS mettre un paragraphe dans un paragraphe.
Espaces insécables
<p> ce cours est de vous apprendre pas à pas à coder en HTML5 et en CSS3.
Outre cela, je vais également m’appliquer à vous montrer la logique et les
mécanismes derrière ces deux langages afin que : vous compreniez ce
que vous faîtes et que vous deveniez vite autonomes.
</p>
 Il existe des entités HTML pour encoder certains caractères spéciaux comme
les espaces insécables :
Autres entités HTML
------------------------------------------------
- url : copypastecharacter.com
Les titres h1 – h6
<h1> Titre niveau 1 H1 </h1>
Il existe six niveaux de titre <h1> <h2> <h3> <h4><h5> et
<h6> (pas un de plus ! ).
Un nouveau niveau provoque un passage à la ligne, les
éléments de titre étant des éléments de bloc.
L’hiérarchisation visuelle est automatique (peut être
modifiée via CSS).
Il est possible d’avoir plusieurs titres de même niveau.
On ne peut pas mettre un Hn dans un p, ou un p dans un
Hn.
Blockquote, une citation
<p> Une citation ci-dessous : </p>
<blockquote>
Mon médecin m’a recommandé d’arrêter les petits dîners
pour quatre. A moins qu’il n’y ait trois autres personnes.
</ blockquote >
<p> Carl Sébastien</p>
 La balise <blockquote> marque une

citation.
 Une citation est suivie d’un retour à
la ligne.
Les éléments
de « mise en forme » de texte
Éléments en ligne « inline »
 Ces éléments sont des éléments dit « inline ».
 On les place autour du contenu (et du texte).
 Ne crée pas de retour à la ligne.
 Servent à donner du sens aux parties du texte/contenu.
L’ élément <strong>
<p> Du texte normale et <strong> du texte fortement mis en valeur </strong> </p>
 <strong> élément sémantique qui marque du texte comme fortement mis en

valeur.
 « en gras » par défaut dans les navigateurs.
L’élément <em>
<p> Du texte normale et <em> du texte mis en emphatique </em> </p>
 <em> balise sémantique qui marque du texte comme en emphase (mis en

évidence) sert à « insister » sur une partie du texte.
 en « italique» par défaut.
L’élément <span>
<h2> Des livres <span class=‘’color_bleue’’> à la une </span> </h2>
 Est un élément « générique » structurant de type « inline ».

Autres éléments
 L'élément <sup> permet d’afficher un texte exposant.
E=mc<sup> 2 </sup>
 L'élément <sub> permet d’afficher un texte en indice.
H<sub> 2 </sub>O
 L'élément <small> représente des annotations et des petits caractères comme les
informations légales ou liées au copyright.
des petits caractères comme <small> les informations légales ou liées au copyright </small>
Les liens dans les documents
--- HTML ---
Fonction d’un lien
 Le lien est un élément cliquable qui renvoie l’utilisateur sur une nouvelle page
(ou lui permet de télécharger un fichier).
 Il est souvent stylé différemment (bleu souligné par défaut).
 Il peut renvoyer :
 vers un autre site (lien externe).
 vers une autre page du site (lien interne).
 vers des fichiers (image, .PDF, etc.).
La balise <a>
 On appelle « ancre de lien » le texte à l’intérieur de la balise.
 On ajoute l’attribut href="cible_du_lien" pour indiquer vers quelle page on veut
envoyer l’utilisateur.
 On peut ajouter l’attribut title="titre du lien" pour ajouter une info bulle au
survol et indiquer à l’utilisateur où il va arriver.
<a href="index.html" title="titre"> Ancre du lien</a>

La balise <a> pour les liens
<p> Bonjour, je suis <a href="http://www.google.fr"
title="Moteur de recherche"> un lien externe vers Google !</a></p>
Lien externe vers un autre site
 La cible sera l’url (ou adresse) complète du site, http:// ………
 Il s’agit d’un lien absolu car on indique l’adresse complète.
<a href="http://www.google.fr" title="Moteur de recherche google"> lien

externe vers google </a>
Liens internes et hiérarchisation du site
 Un site est constitué d’un ensemble de pages au sein d’un dossier (appelé
racine du site). Ces pages peuvent être organisées dans une hiérarchie de sous-
dossiers.
 Par convention, le fichier « racine » sera appelé index.html.
 C’est lui qui est affiché en priorité s’il existe quand l’utilisateur demande le
dossier.
Exercice !
 Créez un dossier « mon_premier_site »
 Créez y index.html
 Placez-y un second fichier appelé page1.html
Lien vers un fichier du même répertoire
 Lorsque deux fichiers sont dans le même répertoire, il suffit d’appeler le nom
du fichier comme cible.
 Ce sont des liens relatifs, car relatifs au site et dossier dans lequel ils se
trouvent.
<a href="page1.html" title="ma première page"> ma page</a>
<a href="index.html" title="accueil du site">l’accueil</a>
Exercice !
 Ouvrez index.html, ajoutez lui un titre h1 et ajoutez un lien vers la

page1.html
<h1> Mon index ! </h1>

<p>Lien vers<a href="page1.html" title="ma première page"> ma page</a></p>
Exercice !
 Ouvrez page1.html, ajoutez lui un titre h1 et ajoutez un lien de retour à

l’index
<h1> Ma page 1 </h1>

<p> Retour à <a href="index.html" title="accueil du site"> l’accueil</a></p>
Exercice !
 Ajouter un répertoire « page_interne ».
 Ajouter y une page « page2.html ».
Liens vers un autre répertoire

 On peut avoir des répertoires et sous-répertoires.
Descendre dans un sous répertoire
 Depuis la racine index vers page2 :
<a href="page_interne/page2.html">page 2</a>

 Si on avait d’autres sous-répertoires :
<a href="page_interne/autre_sous_rep/page2.html">page 2</a>

Remonter d’un répertoire
 Depuis la page2 vers la racine :
<a href="C:\Users\Asus\Desktop\Formation Agents de santé\Sites
Web\mon_premier_site\index.html">l’accueil</a>
Les éléments de liste
Les listes non ordonnées <ul>
<ul>
<li> élément de la liste 1 </li>
</ul>
 La balise <ul> permet de créer une liste non ordonnée (unordered list).
 Il faut l’ouvrir en début de liste et la fermer après le dernier élément de la
liste.
 La balise <li> permet de créer UN élément de la liste.
Les listes ordonnées <ol>
<ol>
<li> élément numéroté de liste 1 </li>
</ol>
 La balise <ol> permet de créer une liste ordonnée et numérotée (par défaut
dans le navigateur).
 Il faut l’ouvrir en début de liste et la fermer après le dernier élément de la
liste.
 La balise <li> permet de créer UN élément de la liste
Contenu d’une liste
 Les éléments <ul> et <ol> ne peuvent contenir que des éléments <li>.
 Chaque élément <li> peut contenir des éléments de bloc ou des éléments
incorporés (p, div, blockquote, h1, etc.).
 Les listes peuvent s'imbriquer.
 On peut mélanger <ul> et <ol> à condition de les fermer correctement.
Exemple d’imbrication
<ul>
<li> élément 1 de liste </li>
<li> élément 2 de liste
<ul>
<li> élément 1 de sous liste </li>
</ul>
</li>
</ul>
Exemple d’imbrication
<ul>
<li> <h1> Mes films préféres </h1>
<ol>
<li> Fiction </li>
<li> Horreur </li>
<li> Western </li>
</ol>
</li>
<li> Un autre objet de liste </li>
<li> ma music préférée
<ul>
<li> Symphonie </li>
<li> Saxophone </li>
<li> Flute </li>
</ul>
</li>
<li> Autres trucs </li>
</ul>
Les listes en pratique – les onglets
<ul>
<li><a href=‘’#home‘’>Home </a></li>
<li><a href=‘’#profile’’> Profile </a></li>
<li>
<a href=‘’#’’> Dropdown </a>
<ul>
<li> <a href=‘’#dropdown1’’> @fat </a></li>
<li> <a href=‘’#dropdown2’’> @mdo </a></li>
</ul>
</li>
</ul>
Les listes en pratique – les navigations
div class=‘’flexslider’’>
<<ul class=‘’slides’’>
<li>
<img scr=‘’slide1.jpg’’ />
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
Ajouter des images avec la balise <img>
 Le JPEG (.jpg, .jpeg) :
format compressé qui réduit le poids des images pour le web (donc temps de
chargement).
 Le format JPEG : ‘’Joint Photographic Experts Group’’
Pour la compression avec pertes très efficace pour des images
photographiques.
 Le format GIF - Graphics Interchange Format:
 Utilise 256 couleurs.
 Compression sans perte basée sur la succession de pixels de même couleur.
 Couleur de transparence sans couche alpha.
 Animation.
 Extension.gif
 Utilisé pour les logos.
‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐
https://bisouslescopains.tumblr.com/
 Le format PNG - Portable Network Graphics:
 PNG8 : 256 couleurs, utilisé pour les images nécessitant peu de couleurs et
motifs répétitifs.
 PNG24 : 16 millions de couleurs, transparence extension .png
 Utilisé pour les icônes, logos et fichiers qui ont besoin d’un fond Transparent.
 Le format BMP – Windows BitMap:
 Le format BMP est un des premiers formats d'image utilisé sous Windows. Il est
un des seul format à ne pas utiliser.
 Cette technologie à pour principal avantage la qualité des images fournies : pas
de compression = pas de perte de qualité.
En résumé
 Une photo : JPEG.
 Une illustration avec peu de couleurs sans transparence importante : PNG8.
 Une illustration avec beaucoup de couleurs : PNG24
 Une image animée : GIF
Compresser une image JPEG outils

 En ligne :
 https://imagify.io/ outil en ligne avec traitement par lots.
 https://tinypng.com/ jusqu’à 20 images en même temps.
 En Local :
 https://imageoptim.com/fr.html sur Mac PNG et JPG.
 http://luci.criosweb.ro/riot/ sur Windows, PNG et JPG.
 http://pnggauntlet.com/ sur Windows, PNG et JPG.
La balise <img>
 Balise de type inline : pas de retour à la ligne, peut-être insérée dans le corps du
texte.
 On la place généralement dans un <p> ou un <div> mais peut se placer
n’importe où dans le body.
 Balise auto-fermante :
<img src="ref_image" alt="description de l’image" />

La balise <img> et source de l'image
 Un attribut src="image.jpg" pour donner le chemin vers la source de l’image
 Chemin sur le serveur.
 url de stockage.
 Même principe que pour les liens.
La balise <img> et l’attribut « alt »

 Un attribut alt="description du contenu de l'image" texte alternatif qui décrit
le contenu de l’image.
 L'attribut est obligatoire, mais il peut être vide pour les images décoratives:
 Lu vocalement par les lecteurs d'écran.
 Aide les personnes en situation de déficience visuelle à comprendre.
Attributs Width et Height
 Les attributs width et height peuvent être ajoutés pour donner une taille à
l’image.
 Sans width/height le navigateur « devine » la taille ce qui crée des sauts de
page quand l’image se charge.
 En général, il vaut mieux la redimensionner avant dans un logiciel, plutôt que
charger une grande image et la rétrécir (performance).
 Attention à garder les proportions !
<img src="monimage.jpg" alt="description de l’image" width="300" height="450" />

Exemple
<p> Jelly a preparé un jolie gateau.
<img src=“cupcake.jpg“width="333" height=“500" alt=“cupcakes décorés“ tilte=‘’cupcakes décorés
faciles à réaliser’’ />
Intégrer une vidéo
<video width="320" height="240" controls autoplay> <source

src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
<source src="/build/videos/arcnet.io(7-sec).mp4" type=video/mp4>
</video>
Intégrer une vidéo
<iframe width="660" height="371"
src="https://www.youtube.com/embed/IyR_uYsRdPs" title="Photoshop for
Beginners | FREE COURSE" frameborder="0" allow="accelerometer; autoplay;
clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
intégrer du son
 Beaucoup de sites de partage audio proposent également une intégration via
iframe.
 Même principe que pour les vidéos : on récupère le code de l’iframe et on le
colle sur notre site.
<iframe width="320" height="240" src="C:\Users\Asus\Desktop\Formation

Agents de santé\Sites Web\Projet2\daily_download_20201019_128.mp3"
title="Ludwig Van Beethoven's 5th Symphony in C Minor (Full)"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-
media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Autres types d’iframe
 Généralement les sites qui vous proposent d’intégrer leur contenu vont
vous proposer une iframe.
 C’est le cas par exemple de :
 Google maps pour des cartes interactives.
 Slideshare pour partager des diaporamas et présentations.
 Vimeo, un autre service de partage de vidéos.
 Les boites de partages de réseaux sociaux comme Facebook.
Les tableaux HTML
Les tableaux, introduction
 Un tableau sert à organiser des informations structurées sous forme tabulaire.

 Il se compose de lignes organisées elles-mêmes en cellules.
Créer un tableau : <table>
 La balise <table> </table> permet d’indiquer le début et la fin du tableau.

 La balise <tr> caractérise une nouvelle ligne.
 La balise <td> marque le contenu d’une cellule dans une ligne.
Exemple de tableau simple
<table>
<tr>
<td>ligne 1 colonne 1</td>
</tr>
<tr>
</tr>
</table>
 Le nombre d'éléments <td> au sein des éléments <tr> doit rester le même
dans la mesure ou chaque ligne possède un même nombre de cellules,
nombre qui correspond au nombre de colonnes du tableau.
Un avant-goût de CSS
 Pour la suite et y voir plus clair, nous allons ajouter une bordure à notre
tableau avec la propriété CSS.
<table>
<tr>
<td style="border:1px solid black;">ligne 1 colonne 1</td>
</tr>
<tr>
</tr>
</table>
Ajouter une entête avec <th>
<table>
<tr>
<th style="border:1px solid black;">Fruits</th>
<th style="border:1px solid black;">Poids</th>
<th style="border:1px solid black;">Prix</th>
</tr>
<tr>
<td style="border:1px solid black;">Kiwi</td>
<td style="border:1px solid black;">3Kg</td>
<td style="border:1px solid black;">2$</td>
</tr>
<tr>
<td style="border:1px solid black;">Banane</td>
</tr>
</table>
Ajouter une entête avec <th>
 <th> peut remplacer <td> pour créer une cellule d’entête au tableau.
 Par défaut affiché en gras et centré dans les navigateurs.
Ajouter un titre au tableau
<table>
<caption>Prix du marché</caption>
<tr>
<th style="border:1px solid black;">Fruits</th>
<th style="border:1px solid black;">Poids</th>
<th style="border:1px solid black;">Prix</th>
</tr>
<tr>
<td style="border:1px solid black;">Kiwi</td>
</tr>
<tr>
<td style="border:1px solid black;">Banane</td>
</tr>
</table>
Ajouter un titre au tableau
 On utilise <caption> pour donner un titre au tableau.

 La balise se place au début du tableau.
Fusion de cellules
<table>
<tr>
<th style="border:1px solid black;" colspan="3">titre</th>
</tr>
<tr>
</tr>
</table>
Fusion de cellules
 Il est possible de fusionner certaines cellules entre elles avec l’attribut

colspan="nombre de cellules" qui se place sur la cellule (th ou td).
 La valeur numérique de cet attribut précise le nombre de colonnes du
tableau que couvre la cellule.
Fusion de lignes
<table>
<tr>
<td style="border:1px solid black;" rowspan="2">ligne 1 et 2 colonne 1</td>
<td style="border:1px solid black;" rowspan="3">ligne 1, 2 et 3 colonne 3</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
Fusion de lignes
 Il est possible de fusionner des lignes avec l’attribut rowspan="nombre de

lignes" qui se place sur la cellule (th ou td).
Les formulaires
Les formulaires
 Le formulaire sert à récupérer des données que l’utilisateur va entrer et
les envoyer au serveur pour un traitement (en PHP par exemple) : login,
formulaire de contact et même le chat de Facebook.
La balise <form>
 Balise principale du formulaire.
 Deux méthodes :
 method="get" : limitée à 255 caractères, informations passées dans la barre
d’adresse.
 method="post" : envoie les données dans le corps de la requête sans passer
par la barre d’adresse, c’est la méthode la plus utilisée.
 Action : l’adresse du fichier ou programme qui va traiter les données.
<form method="post" action="traitement.php">

Exemple de la balise form en action
Par défaut si elle est vide, c’est comme n’importe quel élément,
rien n’est affiché
<body>
<form method="post" action="traitement.php">

</form>
</body>
La zone de texte monoligne <input>
<input type="text" name="nom_de_balise"/>
 La balise input est auto-fermante.

 Ne génère pas de retour à la ligne.
 Il faut lui donner un nom avec l’attribut «name» pour que l’on puisse récupérer
sa valeur (éviter les espaces dans le name).
 Le nom n’est PAS visible sur la page.
Le label
<label for="nom">Votre nom</label>

<input type="text" id="nom" name="nom"/>
 Son rôle est de décrire à un être humain la fonction du champ (puisque

name est invisible).
 Ajouter un for="nom" au label.
 Ajouter id="nom" au champ.
Associer le label au champ
<label for="nom">Votre nom</label>

<input type="text" id="nom" name="nom"/>
 Permet à l’utilisateur de cliquer sur le label pour sélectionner le champ (le for
et l’id doivent être identiques mais peuvent être différents du name).
 Balise inline, pas de retour à la ligne.
L’attribut « value »
<label for="nom"> Votre nom </label>

<input value="KHERICI" type="text" id="nom" name="nom"/>
 value=" " : donne une valeur par défaut au champ.

 Vide (ou inexistant) si on n’a pas de données récupérées dans la base de donnée du
site
En résumé
 Un label (avec un for=" ").

 Un champ avec :
 Un id (qui a la même valeur que le for).
 Un name pour entrer la valeur dans la base de donnée.
 Facultatif : un attribut value (qui peut être vide) pour récupérer la valeur
dans la base de donnée
Attributs supplémentaires
 maxlength=" " : le nombre de caractères maximum acceptés dans le champ.
Les placeholder (ne sont pas des labels !)

<p>
<label for="nom"> Votre Nom </label>
<input value="KHERICI" type="text" id="nom" name="nom"/>
</p>
<p>
<label for="prénom">Votre Prénom </label>
<input placeholder="Cheikh" type="text" id="prénom" name="prénom"/>
</p>
 placeholder=" " : attribut HTML5, donne une indication de ce que devrait

contenir le champ. Attention, ne remplace PAS le label.
Zone de texte multiligne <textarea>
<label for="montext"> Que souhaitez-vous me dire?</label>

<textarea name="montext" id="montext"> <textarea/>
 Une balise qu’il faut ouvrir et fermer.

 Pas de retour à la ligne automatique.
Attributs utiles pour textarea

PAS de value= " ", le texte par défaut se met entre les deux balises
ouvrante et fermante.
Les cases à cocher <input type="checkbox">
<label for="montext"> Quel type de musique aimez vous?</label>
<p>
<input type="checkbox" name="jazz" id="jazz"/>
<label for="jazz">Le Jazz</label>
</p>
<p>
<input type="checkbox" name="techno" id="techno" checked="checked"/>
<label for="techno">La techno</label>
</p>
<p>
<input type="checkbox" name="rock" id="rock"/>
<label for="rock">Le rock</label>
</p>
 On peut pré-cocher une checkbox avec

checked="checked" ou just checked.
Les cases à cocher <input type="checkbox">
 Une case = une option = un input.
 Plusieurs cases, toutes peuvent être cochées.
 Éléments inline.
 On peut mettre le label à gauche ou à droite.
Les boutons radio <input type="radio">
<label for="montext">Vous êtes :</label>
<p>
<input type="radio" id="sexe" name="femme" />
<label for="femme">Une femme</label>
</p>
<p>
<input type="radio" id="sexe" name="homme" />
<label for="homme">Un homme</label>
</p>
<p>
<input type="radio" id="sexe" name="je préfère ne pas le dire" />
<label for="je préfère ne pas le dire">je préfère ne pas le dire</label>
</p>
 Une case = une option = un input.

 Un seul choix possible parmi tous les éléments.
 Éléments inline.
 La value est importante : c’est elle qui est renvoyée au serveur
 Value="femme" : on renvoie donc « femme » au serveur
Groupe de boutons radio:
<label for="montext">Vous êtes :</label>
<p>
<input type="radio" name="sexe" value="femme" id="femme"/>
<label for="femme">Une femme</label>
<input type="radio" name="sexe" value="homme" id="homme" checked="checked"/>
<label for="homme">Un homme</label>
<input type="radio" name="sexe" value="nsp" id="nsp"/>
<label for="nsp">je préfère ne pas le dire</label>
</p>
 Pour que le navigateur comprenne que des éléments forment un groupe, il

faut leur donner le même attribut name.
 On peut pré-cocher un bouton radio avec checked="checked".
Les listes déroulantes <select>:
<p>
<label for="pays">De quel pays venez vous ?</label>
<select name="pays" id="pays"/>
<option value="france">France</option>
<option value="espagne">Espagne</option>
<option value="royaume-uni">Royaume-Uni</option>
</select>
</p>
 La liste se trouve entre les éléments <select id="nomdeliste"> </select>.

 La balise <label for="nomdeliste"> permet de donner le nom de la liste et est
liée à <select>.
 On crée un objet de la liste avec la balise <option> Nom </option>.
 L’attribut value permet de donner la valeur de l'option de la liste.
Bouton d’envoi input type="submit"
<input type="submit" value="Envoyer"/>
 Pour envoyer le formulaire on utilise input type="submit".

 L’attribut value=" " est obligatoire et permet de donner le « titre » du bouton.
 Le formulaire est envoyé pour traitement au fichier que l’on a défini dans
action=" ".
Bouton de reset, input type="reset"
<p>
<input type="reset" value="Remettre à zéros"/> <input type="submit"
value="Envoyer"/>
</p>
 Pour remettre à zéro toutes les données du formulaire on utilise input

type="reset".
Bouton <button type="button">
<p>
<button type="button">Cliquez moi</button>
<button type="submit">Envoyer</button>
<button type="reset">Reset</button>
</p>
 Syntaxe différente de la balise input.

 Possibilité d'ajouter des images à l'intérieur (balise non auto-fermante).
 Trois types :
 button : bouton cliquable (utilisable en JavaScript).
 reset : remettre à zéro le formulaire.
 submit : envoyer le formulaire.
‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐
https://getbootstrap.com/docs/3.4/javascript/
Désactiver un champ : disabled="disabled"
<input type="submit" value="Envoyer" disabled= "disabled"/>
 L’attribut disabled="disabled" peut-être utilisé pour désactiver un champ.

 Exemple : désactiver le champ d’envoi jusqu’à ce que toutes les données
soient remplies.
 Note : on peut aussi juste mettre disabled en attribut.
<input type="submit" value="Envoyer" disabled/>

Les champs de mot de passe <input type="password">
<label for="montext">Mon mot password :</label>

<input type="password" id="password" name="password"/>
 input type="password" : permet de masquer un mot de passe.

Uploader un fichier : type=file
<input name="myfile" type="file"/>
 Pour télécharger vers le serveur un fichier on utilise input type="file".

 Si on envoie un fichier, il faut permettre au formulaire d’envoyer des
données avec l’attribut enctype="multipart/form-data" sur l’élément form.
Cacher un champ type="hidden"
<h2>Cachez moi ce champ!</h2>

<input type="hidden" name="key" value="ma clé secrète"/>
<label for="nom">Nom</label><input type="text" name="nom" id="nom"/>
 On peut cacher un champ avec input type="hidden".

 Permet d’envoyer des données sans que l’utilisateur ne doive les remplir ou ne
les voie.
http://fr.openclassrooms.com/informatique/cours/apprenez‐a‐creer‐votre‐site‐web‐avec‐html5‐et‐css3/memento‐des‐balises‐html
CSS :
Introduction et notions
de base

Cours Complet HTML & CSS

Transféré par

Droits d'auteur :

Formats disponibles

Cours Complet HTML & CSS

Transféré par

Informations du document

Titre original

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

Cours Complet HTML & CSS

Transféré par

Droits d'auteur :

Formats disponibles

République Algérienne Démocratique et Populaire

Ministère de l’Enseignement Supérieur et de la Recherche Scientifique

Formation des agents de la santé

Enseignant : Dr. Cheikh KHERICI.

II. Présentation du cours et de ses objectifs

III. 1ère Partie : Les Bases en HTML et en CSS.

V. 3ème Partie : Fonctionnalités Avancées.

VI. 4ème Partie : Aller plus loin.

 Ce cours est divisé en trois parties, progressives :

 Une page Web c’est …

 Pour mettre en ligne on fait passer ses fichiers de la machine du créateur à un

<p> Un bloc !! </p>

 Touche < du clavier pour ouvrir : <

<p id=‘’section1’’> Bonjour ! </p>

balise attribut valeur

<div id="kittens"> // <div id=kittens>

<p> Du texte ici <! - - avec un commentaire invisible - -> </p>

<div> un bloc ici </div>

 <div> : est un conteneur.

<p> un paragraphe ici </p>

 La balise <blockquote> marque une

 <strong> élément sémantique qui marque du texte comme fortement mis en

 <em> balise sémantique qui marque du texte comme en emphase (mis en

 Est un élément « générique » structurant de type « inline ».

<a href="index.html" title="titre"> Ancre du lien</a>

<a href="http://www.google.fr" title="Moteur de recherche google"> lien

Liens internes et hiérarchisation du site

 Ouvrez index.html, ajoutez lui un titre h1 et ajoutez un lien vers la

<h1> Mon index ! </h1>

 Ouvrez page1.html, ajoutez lui un titre h1 et ajoutez un lien de retour à

<h1> Ma page 1 </h1>

Liens vers un autre répertoire

<a href="page_interne/page2.html">page 2</a>

<a href="page_interne/autre_sous_rep/page2.html">page 2</a>

Compresser une image JPEG outils

<img src="ref_image" alt="description de l’image" />

La balise <img> et l’attribut « alt »

<img src="monimage.jpg" alt="description de l’image" width="300" height="450" />

<video width="320" height="240" controls autoplay> <source

<iframe width="320" height="240" src="C:\Users\Asus\Desktop\Formation

 Un tableau sert à organiser des informations structurées sous forme tabulaire.

 La balise <table> </table> permet d’indiquer le début et la fin du tableau.

 On utilise <caption> pour donner un titre au tableau.

 Il est possible de fusionner certaines cellules entre elles avec l’attribut

 Il est possible de fusionner des lignes avec l’attribut rowspan="nombre de

<form method="post" action="traitement.php">

<input type="text" name="nom_de_balise"/>

 La balise input est auto-fermante.

<label for="nom">Votre nom</label>

 Son rôle est de décrire à un être humain la fonction du champ (puisque

<label for="nom">Votre nom</label>

<label for="nom"> Votre nom </label>

 value=" " : donne une valeur par défaut au champ.

 Un label (avec un for=" ").

 maxlength=" " : le nombre de caractères maximum acceptés dans le champ.

Les placeholder (ne sont pas des labels !)

 placeholder=" " : attribut HTML5, donne une indication de ce que devrait

<label for="montext"> Que souhaitez-vous me dire?</label>

 Une balise qu’il faut ouvrir et fermer.