50 lines
1.5 KiB
Markdown
50 lines
1.5 KiB
Markdown
|
# Le Web statique
|
|||
|
|
## Lancer un serveur web
|
|||
|
|
### En développement
|
|||
|
|
`python3 -m http.server`
|
|||
|
|
|
|||
|
|
Puis `http://localhost:8000`
|
|||
|
|
|
|||
|
|
### En production
|
|||
|
|
Apache, nginx...
|
|||
|
|
Voir à la fin d'un TP
|
|||
|
|
|
|||
|
|
## HTML : structurer et donner du sens au contenu
|
|||
|
|
### Bases
|
|||
|
|
[MDN - Introduction au HTML](https://developer.mozilla.org/fr/docs/conflicting/Learn_web_development/Core/Structuring_content_2f5dc6d6e575054cc70e0a8faa24bef31907d53cee6754dd2c92e644e705a7d8)
|
|||
|
|
|
|||
|
|
### Debug
|
|||
|
|
[MDN - Debug HTML](https://developer.mozilla.org/fr/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML)
|
|||
|
|
|
|||
|
|
### Multimédia
|
|||
|
|
images, audio, video
|
|||
|
|
|
|||
|
|
### Tableaux
|
|||
|
|
|
|||
|
|
### Point sur l'accessibilité (ou intégrer au fil du temps ?) et les bonnes pratiques
|
|||
|
|
|
|||
|
|
### Balises de formulaire (à voir avec le JS ?)
|
|||
|
|
|
|||
|
|
## CSS : donner du style au contenu
|
|||
|
|
### Bases
|
|||
|
|
- sélecteur > accolades > `propriétés: valeurs;`
|
|||
|
|
- Intégrer la CSS dans la page
|
|||
|
|
- Mise en forme et modification du comportement par défaut
|
|||
|
|
- Sélections : classes, état, position, combinaisons, cascades (bonus: pseudo classes et pseudo éléments)
|
|||
|
|
- Propriétés et valeurs
|
|||
|
|
- fonctions
|
|||
|
|
- @rules -> @import et @media
|
|||
|
|
- propriétés raccourcies (border, padding...)
|
|||
|
|
- boîtes et flex
|
|||
|
|
|
|||
|
|
### Debugger du CSS
|
|||
|
|
Firefox powaa
|
|||
|
|
|
|||
|
|
## Ressources supplémentaires
|
|||
|
|
MDN Web Docs, section Learn: https://developer.mozilla.org/fr/docs/Learn_web_development
|
|||
|
|
ou section référence : https://developer.mozilla.org/fr/docs/Web
|
|||
|
|
|
|||
|
|
# Orga
|
|||
|
|
## TP
|
|||
|
|
- Découverte du HTML + bases CSS
|
|||
|
|
- Styler une page web avec CSS (boîtes et flex)
|