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
20260127_試行錯誤の結晶を1冊に。著者が解説 先輩データサイエンティストからの指南書 / author's_commentary_ds_instructions_guide
Avatar for nash_efp nash_efp
1
960
Fragmented Architectures
Avatar for Denys Poltorak denyspoltorak
0
150
今こそ知るべき耐量子計算機暗号(PQC)入門 / PQC: What You Need to Know Now
Avatar for mackey0225 mackey0225
3
370
副作用をどこに置くか問題：オブジェクト指向で整理する設計判断ツリー
Avatar for Koya Masuda koxya
1
610
2026年 エンジニアリング自己学習法
Avatar for yumechi(Motoki Hirao) yumechi
0
130
CSC307 Lecture 04
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
660
MDN Web Docs に日本語翻訳でコントリビュート
Avatar for uutan1108 ohmori_yusuke
0
650
余白を設計しフロントエンド開発を 加速させる
Avatar for karacoro / からころ tsukuha
7
2.1k
【卒業研究】会話ログ分析によるユーザーごとの関心に応じた話題提案手法
Avatar for MomokoShirakawa momok47
0
200
Architectural Extensions
Avatar for Denys Poltorak denyspoltorak
0
280
dchart: charts from deck markup
Avatar for Anthony Starks ajstarks
3
990
AIフル活用時代だからこそ学んでおきたい働き方の心得
Avatar for shinoyu shinoyu
0
130

Featured

See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.1k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
182
10k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
2.7k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
2.1k
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
32k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.8k
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
0
770
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.6k
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
0
130
How to make the Groovebox
Avatar for あそなす asonas
2
1.9k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k

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 ?