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

HTML / CSS part 2

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Axel Bouaziz Axel Bouaziz
March 12, 2013
Programming
63
0

HTML / CSS part 2

Formation faite le 12 mars 2013 en collaboration avec Leeaarn.

Avatar for Axel Bouaziz

Axel Bouaziz

March 12, 2013

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
200

Other Decks in Programming

See All in Programming
DynamoDBの基礎を振り返りながらベクトル検索機能を理解する
Avatar for 村上優稀 musan
2
230
AIと壁打ちしながら進めるコスト管理
Avatar for Ryoma Fujiwara fufuhu
2
1.8k
komatsuna「分散システムにおけるバグ分析手法」
Avatar for こまつな komatsunaqa
0
280
<title><a id="</title>君はこのHTMLをパースできるか"></a></title> #雑LT_study
Avatar for pizzacat83 pizzacat83
0
180
わからない話を追いかけたら、プログラミング言語を作る側にいた
Avatar for ydah ydah
3
550
Deep dive into the select statement (GopherCon UK)
Avatar for Jesús Espino jespino
0
120
AI Engineeringは、AIプロダクトだけのものか？ 〜AIがソフトウェアを作る時代の新しい当たり前〜 / No AI in your product. AI Engineering in your development.
Avatar for r-kagaya rkaga
5
530
仕様書を書く前にハーネスを作る - Agent Native開発は「探索を速く、判定を固く」
Avatar for Gota gotalab555
5
1.8k
Flow は今どうなっているか
Avatar for mizdra mizdra
PRO
0
730
属人化した知識を、 AIが辿れる地図にする
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
1
210
AWS DevOps AgentのAzure接続機能を検証して見えた活用法／Use Cases Verified for the AWS DevOps Agent's Azure Connectivity Feature
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
1
270
AI Readyの正体はデータマネジメントだ メダリオン2.0の最前線
Avatar for freee freee
PRO
0
400

Featured

See All Featured
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
1
180
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
6.1k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.8k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto WADA twada
PRO
120
120k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
12k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
410
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
280
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
270
14k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
670
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
380

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 ?