Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML / CSS part 2

Avatar for Axel Bouaziz Axel Bouaziz
March 12, 2013
Programming
0
57

HTML / CSS part 2

Formation faite le 12 mars 2013 en collaboration avec Leeaarn.

Avatar for Axel Bouaziz

Axel Bouaziz

March 12, 2013
Tweet

More Decks by Axel Bouaziz

See All by Axel Bouaziz
HTML / CSS part 1
Avatar for Axel Bouaziz axelbouaziz
1
150
Formation HTML / CSS
Avatar for Axel Bouaziz axelbouaziz
0
180

Other Decks in Programming

See All in Programming
Patterns of Patterns
Avatar for Denys Poltorak denyspoltorak
0
1.4k
AWS re:Invent 2025参加 直前 Seattle-Tacoma Airport(SEA)におけるハードウェア紛失インシデントLT
Avatar for tetutetu214 tetutetu214
2
110
それ、本当に安全？ ファイルアップロードで見落としがちなセキュリティリスクと対策
Avatar for ikechi penpeen
7
3.9k
Oxlintはいいぞ
Avatar for Yuji Yamaguchi yug1224
5
1.3k
Data-Centric Kaggle
Avatar for ねぼすけAI isax1015
2
770
Grafana：建立系統全知視角的捷徑
Avatar for Blueswen blueswen
0
330
Oxlint JS plugins
Avatar for kazupon kazupon
1
880
CSC307 Lecture 04
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
660
AIで開発はどれくらい加速したのか？AIエージェントによるコード生成を、現場の評価と研究開発の評価の両面からdeep diveしてみる
Avatar for どすこい daisuketakeda
1
2.4k
カスタマーサクセス業務を変革したヘルススコアの実現と学び
Avatar for Tomoyuki Hamaguchi _hummer0724
0
690
CSC307 Lecture 09
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
830
Amazon Bedrockを活用したRAGの品質管理パイプライン構築
Avatar for とすり tosuri13
4
320

Featured

See All Featured
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
110
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
430
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
200
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
640
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
51
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
250
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
180
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
0
230
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
120
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
1
2.7k
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
1
1.6k

Transcript

  1. Axel Bouaziz en collaboration avec Leeaarn @axelbouaziz @leeaarn LES BASES

    DE LA PROGRAMMATION WEB HTML - PARTIE 2

  2. Différence entre contenu statique et dynamique Qu'est ce que le

    HTML ? Différenciation HTML / CSS Construction d'une page web Choisir son éditeur de code Sa première page web Balises et relations parent-enfant Insérer du texte Insérer un lien Insérer une image PROGRAMME PARTIE 1

  3. Insérer une liste Balises et relations parent-enfant Structurer / organiser

    son code Encadrer les balises Finaliser le code HTML Comment utiliser mon fichier (FTP / ...) Intêret grandissant du CSS PROGRAMME PARTIE 2

  4. INSÉRER UNE LISTE

  5. Liste non ordonnée Liste ordonnée <ul> <li>Un élément</li> <li>Un autre

    élément</li> </ul> <ol> <li>Element 1</li> <li>Element 2</li> </ol>

  6. BALISES ET RELATIONS PARENT-ENFANT

  7. Deux types de balises Parent-enfant <head> </head> <img src="images/mon_image.jpeg" />

    <html> <head> </head> <body> </body> </html>

  8. STRUCTURER / ORGANISER SON CODE

  9. Beaucoup de code très difficile de s'y retrouver Nécessité d'encadrer

    le contenu header d'un côté, footer de l'autre...etc Propreté du code soyez intraitables !

  10. Apparition des div Qu'est ce que c'est ? A quoi

    ça sert ? Comment ça marche ? Ce qui est une div et ce qui n'en est pas ?

  11. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" /> </head>

    <body> <!-- header --> <div> </div> <!-- content --> <div> </div> <!-- sidebar --> <div> </div> <!-- footer --> <div> </div> </body> </html>

  12. ENCADRER LES BALISES

  13. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" /> </head>

    <body> <!-- header --> <div> </div> <!-- content --> <div> </div> <!-- sidebar --> <div> </div> <!-- footer --> <div> </div> </body> </html>

  14. Différencier les balises on leur donne un nom spécifique avec

    une class ou un id On se sert de leur nom pour les styliser et leur donner une apparence spécifique

  15. Header <div id="header"> ou <div class="header"> Content <div id="content"> ou

    <div class="content"> Sidebar <div id="sidebar"> ou <div class="sidebar"> Footer <div id="footer"> ou <div class="footer"> A LA BASE (HTML 4)

  16. Header <header> Content <section> Sidebar <aside> Footer <footer> MAINTENANT (HTML

    5)

  17. Menu de navigation se nomme <nav> Partie du content se

    nomme <article> MAINTENANT (HTML 5)

  18. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" /> </head>

    <body> <header> <!-- j'insère ici mon menu, mon logo... --> </header> <section> <!-- j'insère ici mon contenu central : article, image... --> </section> <aside> <!-- j'insère ici ma sidebar : liens vers les réseaux sociaux, articles récents... --> </aside> <footer> <!-- j'insère ici mon pied de page --> </footer> </body> </html>

  19. FINALISER LE CODE HTML

  20. Vérifier que tous les liens fonctionnent changer les "#" en

    "/url" Fermer toutes les balises en profiter pour retravailler l'indentation si besoin Insérer un / des commentaire(s) si vous trouvez cela approprié

  21. COMMENT UTILISER MON FICHIER

  22. Pour un CMS déjà en production automatiquement mis à jour

    + vider votre cache Pour mettre mon fichier "en ligne" hébergement + FTP

  23. INTÊRET GRANDISSANT DU CSS

  24. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" /> </head>

    <body> <header> <div id="logo></div> <nav></nav> </header> <section> <article></article> </section> <aside> </aside> <footer> </footer> </body> </html>

  25. J'ai besoin de points de repère pour styliser mon code

    HTML id VS class deux indicateurs essentiels réutilisés dans le code CSS

  26. MERCI QUESTIONS ?