1 of 21

Introduction au développement web

Loïc Knuchel

2 of 21

Prérequis

  • Un navigateur moderne (chrome par exemple)
  • Un éditeur de texte

3 of 21

Plan

  • Présentation du HTML / CSS
  • Présentation de Bootstrap
  • TP sur Bootstrap
  • Libre service !!!

4 of 21

Architecture site web

Architecture client / serveur stateless

5 of 21

Architecture site web

Architecture client / serveur stateless

6 of 21

HTML

Tutoriel complet :

http://fr.openclassrooms.com/informatique/cours/apprenez-a-creer-votre-site-web-avec-html5-et-css3

Documentation bien faite :

https://developer.mozilla.org/en-US/docs/Web

7 of 21

Page HTML minimale

8 of 21

from https://www.addedbytes.com/cheat-sheets/download/html-cheat-sheet-v1.png

9 of 21

Principaux éléments HTML

  • Structure (<div> <span> <h1> <p> <br>)
  • Texte (<i> <b>)
  • Listes (<ul> <li>
  • Liens (<a>)
  • Images (<img>)
  • Tableaux (<table> <tr> <td> <th> <thead>)
  • Formulaires (<form> <input> <select> <label>)

10 of 21

CSS

11 of 21

Exemple de CSS

12 of 21

from http://lesliefranke.com/files/reference/csscheatsheet.html

13 of 21

Principaux éléments CSS

  • Layout (width, height, display, float, position)
  • Block (margin, padding, border, background, overflow)
  • Text (color, font-family, font-size, line-height, text-align, vertical-align)
  • Autre (cursor)

14 of 21

Sélecteurs

  • *
  • #id
  • .class
  • tag
  • .class1.class2
  • .parent .child
  • .parent > .first-child
  • .before + .after
  • .elt[attr]
  • .elt[attr=”value”]

15 of 21

Pseudo-éléments CSS

  • :hover
  • :active
  • :focus
  • :link
  • :visited
  • :first-line
  • :first-letter

:before

:after

:first-child / :last-child

:nth-child(N)

:required

:not

16 of 21

DEMO

17 of 21

Bootstrap

http://getbootstrap.com/

18 of 21

Framework HTML / CSS / JavaScript

​

  • Beaux styles par défaut
  • Code HTML/CSS clair
  • Grid layout & responsive design
  • Widgets pratiques
  • “standard” de facto

19 of 21

DEMO

20 of 21

Liens

Thèmes prêts à l’emploi & UI kits :

Outils, librairies, frameworks :

Documentation :

Inspiration design :

  • https://dribbble.com/

​

21 of 21

Libre service !!!