Présentation diffusée lors de la première d'une série d'ateliers gratuits autour du développement front-end HTML5 / CSS3 / Javascript animés par la Coopérative des Tilleuls. Au menu de celui-ci : - Comprendre le fonctionnement d'internet, du web et du mode de communication client-serveur - Présentation générale des trois grands piliers des technologies web client : HTML (structuration), CSS (présentation) et Javascript (intéractivité) - Réaliser sa première page HTML Ces ateliers ouverts à tous dans la limite des places disponibles sont encadrés par des professionnels du développement coopérateurs de La Coopérative des Tilleuls.

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