Scribd
Importer
7 vues171 pages

HTML

Ce document présente une formation d'initiation au HTML et CSS, visant à enseigner les bases nécessaires à la création de sites web. Il couvre des sujets tels que la structure des documents HTML, les balises, les attributs, ainsi que les principes de mise en forme avec CSS. Des outils et éditeurs de texte pour la création de code sont également mentionnés, ainsi que des méthodes pour mettre un site en ligne.

Transféré par

Choisie Itoua Ibara
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
7 vues171 pages

HTML

Ce document présente une formation d'initiation au HTML et CSS, visant à enseigner les bases nécessaires à la création de sites web. Il couvre des sujets tels que la structure des documents HTML, les balises, les attributs, ainsi que les principes de mise en forme avec CSS. Des outils et éditeurs de texte pour la création de code sont également mentionnés, ainsi que des méthodes pour mettre un site en ligne.

Transféré par

Choisie Itoua Ibara
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Initiation HTML et CSS

Apprendre les bases du langage


pour créer des sites web

1
1 Initiation HTML et CSS
Description du formation

• Le but de ce cours de formation initiation au HTML et CSS est de


permettre aux étudiants d’appréhender les bases du HTML et CSS
afin de pouvoir ensuite créer de manière autonome des sites web.
Le cours est une initiation, nous n’aurons pas le temps de voir en
détail toutes les balises et positionnement mais des liens seront
fournis afin de permettre aux étudiants d’approfondir leur expertise.

2
4
Programme initiation au HTML

• Les bases d’un site web • Les éléments de structuration du contenu


• Le HTML – généralités – La balise division <div>
– HTML et définition – La balise paragraphe <p>
– W3C et le WHATWG
– Présentation rapide de quelques outils : éditeurs de
– Espaces insécables Titres <h1> à <h6>
texte, wysiwyg et clients FTP – La balise <blockquote>
• La syntaxe HTML : balises, éléments et attributs • Les liens hypertexte
– Le principe de balise et d'élément – Fonction d'un lien
– Attributs et valeurs
– La balise <a>
– Quelques exemples d'attributs
• Doctype, html, body : structure d'un document – Liens externes
valide – Liens internes et hiérarchisation du site
– Le doctype – Ouvrir un lien dans un nouvel onglet ou
– Les balises <html>, <head> et <body> laisser l'utilisateur choisir ?
– Les commentaires – Les liens spéciaux : mailto, ancres, etc.

3
3
Programme initiation au HTML

• Les éléments de « mise en forme » • Les tableaux HTML


– Créer un tableau : <table> <tr> <td>
de texte
– Un exemple de tableau simple
– Les balises <strong> et <em> – Ajout d'en-têtes avec <th>
– Légende de tableau
– La balise <span>
– Attributs avancés, dont colspan, rowspan
– D'autres balises (<sup>, <sub>, etc.)
• Les formulaires
• Les éléments de liste – Les formulaires sont partout autour de nous
– La balise <form>
– Listes ordonnées
– Le champ <input>
– Listes non ordonnées – Ajout de libellés avec <label>
– Les placeholder HTML5
• Ajouter des images avec la balise
– Zone de texte multiligne <textarea>
<img> – Bouton de validation <input type="submit">
– Guide des formats d'image pour le web et – Présentation des autres éléments (checkbox, radio,
outils de compression <select>)

– La balise <img> et ses attributs

4
4
Programme initiation au CSS

•• Généalogie
CSS : introductionetetdifférents
notions de base
types
– de dusélecteurs
Ajoutez style à vos pages !
– CSS : Cascading Style Sheets, une définition
–
– Le
Lessélecteur
CSS, un peu usuel d'élément HTML
d'histoire
–
– Hiérarchie et généalogie
Différents rendus : notion d'enfants,
entre les navigateurs : le pixel
de parent, de descendance
perfect n'existe pas
• Appliquer un style,
– Sélecteur oui mais
de groupe, de où ?
classe
– Le CSS inline et inconvénients
– L'id ou identifiant
– Le CSS "interne" intégré au document et
– Espace entre sélecteurs, ou pas ?
inconvénients
– Les pseudos-classes
Feuille de style externe etsur les<link>
balise liens
• Syntaxe
– LesCSS
autres pseudo-classes
– La syntaxe de base : selecteur, propriété, valeur
• Couleurs
–
et unités
La déclaration CSS
–
– Notation des couleurs
Les commentaires CSS en CSS
– Les unités fixes en CSS
– Les unités fluides en CSS
– En web, quelle unité utiliser ?

5
5
Programme initiation au CSS

• Propriétés de typographie, polices et • Dimensions, margin et padding


– Différences entre inline et block
puces – Largeur et hauteur avec width et height

– Font-family et polices utilisables – Dimensions maximum et minimum


– Marge extérieure margin
– Propriété typographiques (gras, italique, – Centrer horizontalement à l'aide de margin
interlignage, etc.) – Marge intérieure padding
– Calcul des dimensions réelles d'un élément
– Changer la couleur du texte
– S'affranchir du calcul avec box-sizing: border-box
– Alignements de texte – Gestion des dépassements avec overflow

– Décoration de texte (soulignement, etc.) • Positionnement CSS : les flottants pour placer des
images
– Changer les icônes d'une liste à puce
– Les flottants et le flux
• Bordures et arrières plans – Ferrer les images à gauche et à droite
– Nettoyer les flottants avec clear
– Bordures et styles, bords arrondis CSS3 – Notion de contexte de formatage de bloc et gestion des
conflits de flottants
– Arrière-plan et propriétés background

6
6
Programme initiation au CSS

• Propriété display • Aller plus loin


– Valeurs block, inline-block, inline – Mises en page avec Flexbox et Grid
et none Layout
– Créer une navigation à partir des
– Avant-goût du Responsive Web
propriétés de display
Design
• Positionnement CSS relative,
absolute et fixed
– Position relative pour déplacer des
éléments
– Position fixe et barre de navigation
fixée en haut
– Position absolue et déplacement
d'élément dans bloc

7
7
Les bases d’un site web

8
8
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

9
1
1
Un site Web c’est ...

• Un ensemble de pages liées entre elles


• Accessible en ligne depuis n'importe où

10
12
Mais pas que ...

• Contenus textuels dans le fichier HTML, mais aussi images, sons,


vidéos, CSS, JavaScript, polices d'écriture, etc. tous ces fichiers
sont chargés dans le navigateur pour créer une page web.

11
11
Mettre son site en ligne

12
12
Le principe de « serveur web »

Pour mettre en ligne on fait passer ses fichiers de la machine du créateur à un serveur web
13
13
Transférer un fichier sur le serveur

Souvent à l’aide d’un client FTP. Votre hébergeur vous fournira les logins et mot de passe pour
14
14 y
15
15
Le client FTP

• FTP : File Transfer Protocol, protocole de communication destiné


à l'échange de fichiers sur un réseau TCP / IP.

• Permet de « mettre en ligne » son site web


• Une sorte d'explorateur sur un serveur à distance
• Ex : Filezilla

16
19
Le HTML - généralités

17
20
HTML : définition

• Hypertext Markup Language (HTML)


• Langage de balises qui permet de structurer des pages
• Différentes versions depuis 1989
• Aujourd’hui :
– XHTML (2000 – 2006)
– HTML5

18
18
Le W3C

• W3C : World Wide Web Consortium (1994)


– TBLee, fondateur du W3C et inventeur du HTML
– Chargé de promouvoir la compatibilité des technologies dans les
navigateurs

– 378 entreprises membres qui peuvent faire des propositions


(Microsoft, Apple, Mozilla, Opera, Adobe, etc.)

19
19
Générer du HTML avec un éditeur

Blocnote ou TextEdit, si vous


n’avez rien d’autre sous la main :

• Pas de coloration syntaxique


• Nécessite de connaître tout le
langage

20
20
Visual studio code
Lien : [Link]
• polyvalent alors que Brackets était plus spécialisé web
• auto-complétion plus intelligente et contextuelle
• Extensions beaucoup plus nombreuses et variées
• Multiplateforme incluant Linux
• Plus performant et régulièrement mis à jour

21
21
[Link]

• [Link]
• Éditeur spécialisé
• Auto-complétion, retour à la ligne, coloration syntaxique, plugins etc.
• Gratuit pour Mac et Windows – open source

22
22
Atom

• [Link]
• Éditeur spécialisé
• Auto-complétion, retour à la ligne, coloration syntaxique, plugins etc.
• Gratuit pour Mac et Windows – open source

23
23
Les éditeurs de texte plus avancés et spécialisés

• [Link]
• Éditeur spécialisé
• Auto-complétion, retour à la ligne,
colorisation syntaxique
• Plugins, snippets, mode « sans
distraction »
• 30 jours essai Windows/Mac/ Linux
puis payant

24
24
D’autres éditeurs

• Coda : uniquement sur Mac (payant) [Link]


• Geany (Windows) gratuit
[Link]
• Notepad ++
• Komodo (Windows et Mac) [Link]
• Netbeans (Windows et Mac) gratuit [Link]

25
25
Générer du HTML depuis un CMS

• CMS : Content Management System ou systèmes de gestion de


contenu
• Développé dans un langage de programmation web (ex : PHP) et
fait appel à une base de données (ex : SQL)
• Éditeurs « visuels »
sans avoir besoin de
notions de code
• Ex : WordPress, Drupal,
Joomla, Prestashop, etc.

26
26
Générer du HTML depuis un langage côté serveur

• Possibilité de générer « automatiquement » du HTML depuis


un langage de programmation côté serveur

• PHP, Python, Ruby, etc.

27
27
28
28
La syntaxe HTML : balises,
éléments et attributs

29
33
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é

<

> *

o
30
34
Le principe de balise

• On peut imbriquer les balises (on y reviendra) les unes dans les
autres

<p> Hooo un bloc !! </p>


<div>
<p> Et un joli paragraphe </p>
<p> Et autre un joli paragraphe </p>
</div>

31
31
Le principe de balise

• Touche < du clavier pour ouvrir : <


• Touche maj + < pour fermer : >
• Le nom des balises est prédéfini dans les spécifications HTML, on
ne peut donc PAS en inventer !

• Quelques exemples : <html>, <body>, <img>, <p>, <div>, <a>, etc.

32
32
Le principe de balise

• 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.

• Note : je mets le / final par convention, mais pas obligatoire.

33
37
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

34
34
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

35
35
Exemples d’attributs

! src=" " : donner la source (d’une image par exemple)


–
<img src="[Link]" width="400" height="250" alt="image
de chatons" />

! href=" " : donner la destination d’un lien


–
<a href="[Link] Texte du lien
</a>

36
36
Exemples d’attributs

!
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>

37
37
Doctype, html, body : structure
d'un document valide

38
42
Structure d’un document HTML simplifié

Décomposons balise par balise !

39
39
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 = « Quirks » mode : le navigateur fait ce qu’il peut
avec ce qu’il trouve, en mode rétro-compatibilité => peut expliquer
certains bugs sur IE

<!doctype html>

40
40
Le doctype HTML5

• Plus simple, plus concis


• «Future proof» : autant commencer aujourd’hui !
• <!doctype html>
• Vous pourrez utiliser des éléments HTML5 qui sont
finalisés

Le DOCTYPE qu’il vous faut

41
41
La balise <html>

• Tout document HTML commence par la balise <html> qui se


ferme en fin de document : </html>
• La balise <html> contient nécessairement deux balises définissant
l'entête (<head>) et le corps (<body>) du document.

42
42
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">

Spécifier la langue d’un document (X)HTML

43
43
La balise <head>

• Détermine l’entête du document et contient les méta-informations

44
44
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)

– Affichée dans l’onglet du


navigateur

45
45
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>)

A quoi servent les balises


META

46
46
La balise <head> : les balises meta

– <meta name="description" content="description pour le


référencement"/> affiché dans les résultats de recherche

47
47
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>

48
48
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>
49
53
</html>
C’est valide !

!
La validation reste un outil et non une fin en soi, mais un code
non valide a des chances de poser des soucis plus tard

50
54 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Les commentaires dans le HTML

Il est possible d’écrire du texte qui ne sera visible que dans le code source et non sur le site : un
commentaire
51
51
Les éléments de structuration
du contenu

52
52
La balise « division » <div>

53
53
La balise « division » <div>

• <div> est un conteneur


• Cette balise n’a aucune valeur sémantique (aucun « sens »)
• É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

54
54
Grille en div

55
55
La balise paragraphe <p>

56
56
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

57
57
Espaces insécables

58
58
Espaces insécables

• Il existe des entités HTML pour encoder certains


caractères spéciaux comme les espaces insécables :
&nbsp;
Autres exemples :
• < devient &lt; (less than)
• > devient &gt; (greater than)
• & devient &amp;
• " devient &quot;

Caractères spéciaux et entités HTML

59
59
D'autres entités HTML

[Link]
60
60
Les titres h1 – h6

Bien construire sa hiérarchie de titres

61
61
Les titres h1 – h6

• 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.
• La 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

62
62
Blockquote, une citation

63
63
Blockquote, une citation

• La balise <blockquote> marque une citation


• Une citation est suivie d'un retour à la ligne

64
64
Exemple de blockquote stylée

[Link]

65
65
Les éléments de « mise en
forme » de texte

66
66
É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

67
67
L’ élément
<strong>

68
68
L’ élément <strong>

• <strong> élément sémantique qui marque du texte comme comme


fortement mis en valeur

• « en gras » par défaut dans les navigateurs

69
69
L’ élément
<em>

70
70
L’ élément <em>

• <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

71
71
L’ élément
<span>

72
72
L’ élément <span>

• Un élément « générique » structurant de type « inline »


• Permet de styler facilement des morceaux de texte en CSS
• Par défaut affiche son contenu sans le modifier
• Aucune valeur sémantique
• (l’équivalent d’un div, en ligne)

73
73
D’autres éléments

• L'élément <sup> permet d’afficher un texte exposant

L'élément <sub> permet d’afficher un texte en indice

• L'élément <small> représente des annotations et des petits


caractères comme les informations légales ou liées au copyright

74
74
Les liens dans les documents
HTML

75
75
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.)

76
76
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
infobulle au survol et indiquer à l’utilisateur où il va arriver

<a href="[Link]" title="titre"> Ancre du lien</a>

77
77
La balise <a> pour les liens

78
78
Lien externe vers un autre site

• La cible sera l’url (ou adresse) complète du site, http:// compris


• Il s’agit d’un lien absolu car on indique l’adresse complète

<a href="[Link] title="Moteur de


recherche google"> lien externe vers google </a>

79
79
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.

80
80
Liens internes et hiérarchisation du site

• Par convention, le fichier « racine » sera appelé [Link].


• C’est lui qui est affiché en priorité s'il existe quand
l’utilisateur demande le dossier.

81
81
Exercice !

• Créez un dossier « mon_premier_site »


• Créez y [Link]
• Placez-y un second fichier appelé [Link]

82
86
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="[Link]" title="ma 1ere page"> ma page</a>

<a href="[Link]" title="accueil du site">l'accueil</a>

83
83
Mon premier site

84
84
Exercice !

!
Ouvrez [Link], ajoutez lui un titre h1 et ajoutez un lien vers la
[Link]

85
85
Exercice !

!
Ouvrez [Link], ajoutez lui un titre h1 et ajoutez un lien de
retour à l’index

86
86
Exercice !

! Ajoutez un répertoire « page_interne »


! Ajoutez-y une page « [Link] »

87
87
Liens vers un autre répertoire

• On peut avoir des répertoires et sous-répertoires


• On ajoute le nom du répertoire pour descendre : monrepertoire/
[Link]

• On ajoute ../ pour remonter si on se trouve dans un sous répertoire :


../[Link]

88
88
Descendre dans un sous répertoire

! Depuis la racine index vers page2 :


<a href="page_interne/[Link]">page 2</a>

! Si on avait d’autres sous-répertoires :


<a href="page_interne/autre_sous_rep/[Link]">page 2</a>

89
89
Remonter d’un répertoire

! Depuis la page2 vers la racine :

<a href="../[Link]"> l'accueil</a>

!
Si on veut remonter plusieurs répertoires (autant de ../ que de
répertoires:

<a href="../../[Link]"> l'accueil</a>

90
90
Mon premier site

91
91
Exercice !

• Ouvrez [Link] et ajoutez un lien vers la page [Link] du


sous dossier page_interne

92
92
Exercice !

• Ouvrez [Link], ajoutez lui un titre h1 et ajoutez un lien de


retour vers l'accueil ([Link]) en remontant d'un dossier

93
93
Ouvrir un lien dans un nouvel onglet

!
L’attribut target="_blank" permet d’ouvrir un lien dans une
nouvelle fenêtre/onglet en fonction du navigateur

<a href="[Link]" target="_blank" >


! Laisser l'utilisateur garder le contrôle de son navigateur ?

94
94
Des liens « internes » ou ancres internes

! Comme dans Word, permet de renvoyer l’utilisateur à


l’intérieur d’une page
! La cible est définie par un id="ancre_du_lien"
! On utilise <a href="#ancre_du_lien"> pour créer le lien
!
Utilisé pour les liens « retour en haut de page », wikipedia, etc.

! L’ancre apparaît dans l’url :

[Link]
Hypertext_Markup_Language#Description_de_HTML

95
95
[Link]
96
100
Un lien vers une adresse mail

!
<a href="[Link] permet
de créer un lien qui ouvrira automatiquement le
client mail de la personne (à éviter car mail en
dur donc récupérable pour spam => formulaire
de contact )

!
<a href="[Link] : permet de définir un
numéro de téléphone à appeler

97
101
Les éléments de liste

98
102
Les listes non ordonnées <ul>

99
Les listes non ordonnées <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

100
Les listes ordonnées <ol>

101
Les listes ordonnées <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

102
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

103
Exemple d’imbrication

104
Exemple d’imbrication

105
Les listes en pratique – les onglets

[Link]
106
106
Les listes en pratique – les navigations

[Link] 107
107
/
Les listes en pratique – les • http://
navigations [Link]
/

108
112
Ajouter des images avec la
balise <img>

109
113
Le format JPEG- Joint Photographic Experts Group

• Le JPEG (.jpg, .jpeg) :


format compressé qui réduit
le poids des images pour le
web (donc temps de
chargement)

=> Pour la compression avec pertes très efficace pour des images
photographiques

110
110
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

[Link]
/ 111
111
Quelques jolis GIFs

[Link]
/

112
112
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

113
113
En résumé

• Une photo : un JPEG


• Une illustration avec peu de couleurs sans transparence
importante : PNG8

• Une illustration avec beaucoup de couleurs : PNG24


• Une image animée : GIF

114
114
Compresser une image JPEG outils

• En ligne :
– [Link] outil en ligne avec traitement par
lots

– [Link] jusqu’à 20 images en même temps

• En Local :
– [Link] sur mac PNG et JPG
– [Link] sur windows, PNG et JPG

– [Link] sur windows, PNG et JPG

• Photshop, Fireworks, etc.

115
115
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" />

116
La balise <img> et source de l'image

• Un attribut src="[Link]" pour donner le chemin vers la source


de l’image

– chemin sur le serveur


– url de stockage
– même principe que pour les liens

117
La balise <img> et attribut « alt »

• Un attribut alt="description du contenu de l'image" texte


alternatif qui décrit le contenu de l’image et la remplace si l’image
n’est pas téléchargée

118
La balise <img> et attribut « alt »

• 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

119
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="[Link]" alt="description de l’image" width="300" height="450" />

120
Exemple

121
L'attribut title

Attribut facultatif qui permet d’afficher une info-bulle au survol de l’image


122
126
Bonus : intégrer une vidéo

• La plupart des sites de vidéo


proposent une intégration via
iframe qui se présente sous
cette forme :
<iframe width= …> … </
iframe>
• Il faut donc retrouver l’endroit
où le site propose l’iframe

123
Bonus : intégrer une vidéo

124
Bonus : 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

125
Bonus : intégrer du son

126
D’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

127
Les tableaux HTML

128
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

129
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

130
Exemple de tableau simple

131
Exemple de tableau simple

! 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.

132
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

133
Ajouter une entête avec !
<th> peut remplacer <td>
<th> pour créer une cellule
d’entête au tableau

!
Par défaut affiché en gras
et centré dans les
navigateurs

134
Ajouter un titre au !
On utilise <caption> pour
tableau donner un titre au tableau

!
La balise se place au
début du tableau

135
Bonus - Fusion de !
Il est possible de fusionner
certaines cellules entre elles avec
cellules
l’attribut colspan="
nombredecellules" 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.

136 - 2016 /
Initiation HTML CSS - Stéphanie Walter
2017
Bonus - Fusion de • Il est possible de fusionner
lignes des lignes avec l’attribut
rowspan="
nombredelignes" qui se
place sur la cellule (th ou td)

137
141
Les formulaires

138
142
Les formulaires sont partout autour de nous

• 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

139
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="[Link]">


140
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é

141
145
La zone de texte monoligne <input>

! 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

142
Le label

!
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

143
Associer le label au champ

• 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

144
L'attribut « value »

! 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

145
L'attribut « value »

146
En résumé pour n'importe quel champ il faut toujours au moins

• 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

147
Attributs supplémentaires

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

148
Les placeholder (ne sont pas des labels ! )

! placeholder=" " : attribut HTML5, donne une indication de ce que devrait contenir le champ.
Attention, ne remplace PAS le label
! Pas supportés partout (IE10+) => ne PAS utiliser sans label visuel pour l'utilisateur (ou un
polyfill)

149
153
Zone de texte multiligne <textarea>

• Une balise qu’il faut ouvrir et fermer


• Pas de retour à la ligne automatique

150
Attributs utiles pour textarea

• PAS de value= " ", le texte par défaut se met entre les deux
balises ouvrante et fermante

151
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

152
Les cases à cocher <input type="checkbox">

! Les cases à cocher peuvent avoir un attribut name distincts, ou identique


!
Si la cache est cochée, il renvoie « on » lors du traitement, ou peuple le tableau PHP de sa valeur
(value)

153
Les cases à cocher <input type="checkbox">

On peut pré-cocher une checkbox avec checked="checked" ou just checked


154
Les boutons radio <input type="radio">

• Une case = une option = un input


• Un seul choix possible parmi tous les éléments
• Éléments inline

155
Les boutons radio <input type="radio">

• La value est importante : c’est elle qui est renvoyée au serveur


• value="femme" : on renvoie donc « femme » au serveur

156
Groupe de boutons radio

!
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"

157
161
Les listes déroulantes <select>

158
Les listes déroulantes <select>

!
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
159
Bouton d’envoi input type="submit"

! 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=" "

160
Petit résumé des
champs

input type = text


input type = checkbox

input type = radio

input type= submit

select + option

textarea

161
165
Bouton de reset, input type="reset"

• Pour remettre à zéro toutes les données du formulaire on utilise


input type="reset"
• Merci de ne pas en abuser.

162
Bouton <button type="button">

! 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
–

163
Bouton <button type="button">

[Link]

164
Désactiver un champ : 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

165
Désactiver un champ : disabled

! Note : on peut aussi juste mettre disabled en attribut

166
Les champs de mot de passe <input type="password">

! input type="password" : permet de masquer un mot de passe

167
Uploader un fichier : 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.

168
Cacher un champ type="hidden"

! 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.

169
Liste non exhaustive de quelques balises

body
! ! form
!
div table
!

! p iframe
!

!
h1- h6 etc.
!

!
ul

!
ol

!
li

! blockquote

Memento des balises HTML


170
CSS : Introduction et notions
de base

171
175

Vous aimerez peut-être aussi