Second atelier gratuit autour des technologies HTML5 / CSS3 / Javascript organisé par La Coopérative des Tilleuls.
Au menu cette fois-ci une initiation à l'intégration web grâce aux feuilles de style CSS.
Après avoir appris lors du premier atelier à créer et à structurer des pages web grâce à HTML, nous verrons comment les mettre en forme avec les feuilles de style en cascade CSS.
Nous découvrirons ensembles :
- les fondements du langage CSS (syntaxe, cascade, sélecteurs)
- quelques balises et attributs HTML utiles pour la CSS
- le formatage de texte (police, couleur, gras, italique...)
- le positionnement des éléments
- les couleurs et images de fond
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. Workshop #1
● Définition d'internet et du web
● Présentation des standards du web
● Découverte du langage de balisage HTML
● Les slides : http://slideshare.
net/coopTilleuls/atelier-initiation-au-html5
● Les exemples : https://github.
com/coopTilleuls/workshopHTML
6. CSS
● Cascading Style Sheet (feuilles de style en
cascade)
● Permet de décrire la présentation d'un
document HTML ou XML
● Standard du W3C
● CSS3 : dernière version de CSS ajoutant de
nombreuses fonctionnalités : nouveaux
sélecteurs, media queries, polices persos,
dégradés, transitions...
7. Principes
● Séparation de la présentation et de la
structure du document
● La présentation varie en fonction du
récepteur : écran, tablette, smartphone...
● Différentes règles peuvent s'appliquer à un
même élément : c'est la cascade
● Chaque élément du document est
représenté par une boîte
● Les boîtes sont positionnées
successivement (flux)
8. Les mains dans le code
Étudions ensembles ces quelques fichiers
HTML accompagnés de leur feuille de style
CSS :
https://github.com/coopTilleuls/workshopHTML
10. Lien avec le document
HTML
● Directement dans la page HTML avec la
balise <style>
● En tant qu'attribut d'une balise HTML avec
l'atrtibut style
● Recommandé : dans un fichier externe .css,
lié au document HTML avec une balise
<link>
11. Sélecteurs
Ils permettent de sélectionner un ou plusieurs
éléments du document (noeuds de l'arbre
DOM).
Exemple :
#mon-id {
color: red;
}
12.
13. Formatage de texte
● font-size : taille de la police
● font-family : famille de police
● font-style : style de police (italique...)
● font-weight : graisse de la police
● text-decoration : décoration du texte
● text-align : alignement du texte
● @font-face (CSS3) : police personnalisée
● Il existe un grand nombre de propriétés
CSS, se référer à la documentation
14. Positionnement
● display : affichage des élèments en-ligne et
en blocs
● position: relative : Position relative des
élèments les uns par rapport aux autres
● float : Flottement des boîtes
● position: absolute : Positionnement absolu
● position: fixed : Positionnement fixe
● width, height : Largeur et hauteur des boîtes
● margin, padding : Marges extérieurs et
marges intérieures
15. Couleurs
● color : Couleur du texte
● background-color : couleur de fond
● border : bordures
● background-image : image de fond
● Remplacement de texte