L'atelier d'initiation au HTML5, dirigé par Kévin Dunglas, traite des fondamentaux de la création de pages web en utilisant HTML, CSS et JavaScript. Le document aborde les concepts clés d'Internet et du World Wide Web, ainsi que les rôles des différents acteurs dans le développement web. Il inclut également des exemples pratiques de code HTML et des ressources pour approfondir les connaissances sur le sujet.

1. Atelier
d'initiation au
HTML(5)
Par Kévin Dunglas (@dunglas)
La Coopérative des Tilleuls

3. La Coopérative des Tilleuls
Conception, développement et formation :
● Applications web
● Plate-formes e-commerce
● Intégration aux places de marché
● Intégration aux SI bancaires, transporteurs...
● Jeux Facebook, advergames, serious games
● Applications mobiles
● Identités graphiques
● Clients : Walibuy, Pictime, Geophyle,
Wokine, 6 PEO, Agence 1984

4. L'esprit coopératif
● Société coopérative Scop
● Entreprise détenue à 100% par celles et
ceux qui y travaillent
● Prises de décisions démocratiques
● Esprit et ambiance favorisant la coopération,
l’entraide et la solidarité
● Soutien à des projets culturels, artistiques,
associatifs, syndicaux...
● Démarche d'ouverture vers les habitants et
les travailleurs du secteur (ex. : cet atelier)

5. Internet c'est quoi ?
● Réseau : équipements (ordinateurs,
routeurs, smartphones...) reliés entre eux
pour échanger des informations
● Internet : réseau de réseaux
● Décentralisé
● Mondial
● Différentes applications : courrier
électronique, messagerie instantanée, peer-
to-peer, World Wide Web...

6. Diagramme représentant Internet

7. Le World Wide Web c'est
quoi ?
● L'une des applications d'internet
● « toile (d’araignée) mondiale »
● Consultation de pages sur des sites
○ URL d'une page : http://www.w3.org/html/
● Des hyperliens lient les pages entre elles
● Les serveurs web hébergent les pages
● Les ordinateurs clients téléchargent et
affichent les pages via un navigateur web
○ Navigateurs populaires : Firefox, Chrome, Internet
Explorer

8. Page web affichée dans le navigateur Chrome

9. Les standards du web
● Les protocoles HTTP et HTTPS (Hypertext
Transfer Protocol [Secure]) permettent au
navigateur et au serveur web de dialoguer
○ Télécharger des pages web
○ Télécharger des fichiers (PDF, images, vidéos...)
○ Envoyer des données via des formulaires
● Les pages web sont généralement écrites
avec HTML, CSS et Javascript
● Standardisation afin de permettre un
affichage et un comportement similaire sur
tous les navigateurs

10. Workflow de la création
d'un site en agence
● Le webdesigner crée les maquettes
graphique des pages du site
● L'intégrateur transforme ces maquettes
en pages web avec HTML et CSS
● Le développeur front-end programme
l'intéractivité des pages avec Javascript
● Le développeur back-end programme
l'application sous-jacente (généralement
avec PHP, Django, Ruby on Rails...)

11. HTML (Hypertext Markup
Language)
● Format de données standardisé par le W3C
permettant de représenter une page web
● Structure les données contenues dans le
document
○ Titres, paragraphes, listes, articles, menu...
● Permet d'inclure des ressources multimédia
○ Images, vidéos, sons...
● Depuis HTML4, ne doit plus contenir la
présentation (couleurs, polices, disposition
des éléments...)

12. Logo de HTML version 5, en cours de standardisation

13. CSS (Cascading Style Sheets)
● Langage standardisé par le W3C permettant
de mettre en forme les documents HTML
● Quelques utilisations :
○ Disposer les éléments d'une page les uns par
rapport aux autres
○ Définir les couleurs, les polices, les bordures... des
éléments
○ Adapter la présentation en fonction du terminal de
lecture (media queries)
● Intérêts : séparer structure et présentation,
s'adapter aux capacités du terminal

14. Javascript
● Langage de programmation standardisé par
l'ECMA
● Côté client, permet d'ajouter de l'intéractivité
aux pages web
● Exemples d'utilisations :
○ Valider des formulaires
○ Modifier en temps réel la page affichée par le
navigateur
○ Rendre plus ergonomique et fluide l'utilisation d'une
page web (ex : Gmail recourt massivement à
Javascript)

15. Autres technologies
Il existe d'autres technologies standardisées,
lisibles par les navigateurs web modernes,
intégrées et complémentaires à HTML, CSS et
Javascript parmi lesquelles :
● SVG (Scalable Vector Graphics) : dessin
vectoriel
● WebGL : affichage 3D

16. Outils pour le
développement web
● Un éditeur de texte (ex : Notepad++) permet
de créer des documents HTML (fichier.html)
● Un environnement de développement
intégré (ex : Aptana Studio) permet de
bénéficier de la coloration syntaxique, de
l'autocomplétion, de la validation temps réel
des documents...
● Un simple navigateur permet d'ouvrir et de
visualiser les pages créées
● Les inspecteurs tels Firebug aident à
corriger et améliorer vos pages

17. Ma première page HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bonjour...</title>
</head>
<body>
<h1>Hello World</h1>
<p>Ma première page web.</p>
</body>
</html>

18. Premières constations
● HTML est un langage texte à balises
● Chaque balise ouverte doit être refermée
○ Il existe des balises "orphelines" comme <meta />
● Une balise peut contenir d'autres balises
● La première ligne appelée le doctype précise
quelle version de HTML est utilisée (ici
HTML5)
● Une balise (ex. <meta />) peut avoir des
attributs clef="valeur", ici charset="utf-8"
● La balise <html> englobe tout le document

19. La balise <head>
● Meta-informations sur la page
○ Codage de caractères utilisé (ici UTF-8)
○ Titre de la page (affichée entre autres dans le titre
de la fenêtre du navigateur)
○ Éventuellement des informations utiles aux moteurs
de recherche, robots et autres agents logiciels :
description, miniature à afficher lors d'un partage
Facebook...
● Cette balise est obligatoire
● C'est généralement dans la partie "head"
que sont liés les fichiers CSS et Javascript

20. La balise <body>
● Contient les données qui seront affichées
par le navigateur web
● C'est la balise principale d'un document
HTML
● Contient des éléments de structuration, ici :
○ Un titre de niveau 1 "Hello World"
○ Un paragraphe contenant le texte "Ma première
page web."

21. Notre page dans le navigateur Firefox

22. Les mains dans le code
Il est temps de s'y mettre ! Étudions ensembles
ces quelques fichiers HTML : https://github.
com/coopTilleuls/workshopHTML

23. Pour aller plus loin
● Initializr (en) : http://www.initializr.com
● Alsacréations (fr) : http://www.alsacreations.
com
● Openweb (fr) : http://openweb.eu.org
● Pompage (fr) : http://www.pompage.net
● Mozilla Developer Network (fr) : https:
//developer.mozilla.org/fr/
● Dev.Opera (en) : http://dev.opera.com
● A List Apart (en) : http://www.alistapart.com
● Smashing Magazine (en) : http://www.
smashingmagazine.com

24. Crédits
● Wikipédia
●

25. http://la-cooperative-des-tilleuls.com