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
Java 25, Nuevas características
Avatar for Carlos Zela Bueno czelabueno
0
120
20251212 AI 時代的 Legacy Code 營救術 2025 WebConf
Avatar for mouson(墨嗓) mouson
0
220
Jetpack XR SDKから紐解くAndroid XR開発と技術選定のヒント / about-androidxr-and-jetpack-xr-sdk
Avatar for にー兄さん drumath2237
1
190
フルサイクルエンジニアリングをAI Agentで全自動化したい 〜構想と現在地〜
Avatar for Kaito Minatoya kamina_zzz
0
310
AI前提で考えるiOSアプリのモダナイズ設計
Avatar for 野瀬田　裕樹 yuukiw00w
0
190
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
430
AIコーディングエージェント（Manus）
Avatar for kondai kondai24
0
230
新卒エンジニアのプルリクエスト with AI駆動
Avatar for Yuta Fukunaga fukunaga2025
0
240
AIエンジニアリングのご紹介 / Introduction to AI Engineering
Avatar for r-kagaya rkaga
8
3.4k
Developing static sites with Ruby
Avatar for Masafumi Okura okuramasafumi
0
330
AtCoder Conference 2025
Avatar for shindannin shindannin
0
730
まだ間に合う！Claude Code元年をふりかえる
Avatar for nogu nogu66
5
900

Featured

See All Featured
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
150
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
110
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.1k
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
0
2.2k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.1k
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
870
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.2k
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
59
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
0
770
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k

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 ?