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

HTML / CSS part 2

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Axel Bouaziz Axel Bouaziz
March 12, 2013
Programming
59
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
190

Other Decks in Programming

See All in Programming
ネイティブアプリとWebフロントエンドのAPI通信ラッパーにおける共通化の勘所
Avatar for Suguru Ohki suguruooki
0
230
Codex CLI でつくる、Issue から merge までの開発フロー
Avatar for amata1219 amata1219
0
260
Feature Toggle は捨てやすく使おう
Avatar for gennei gennei
0
390
飯MCP
Avatar for Yusuke Wada yusukebe
0
440
どんと来い、データベース信頼性エンジニアリング / Introduction to DBRE
Avatar for nnaka2992 nnaka2992
1
350
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
1.2k
Ruby and LLM Ecosystem 2nd
Avatar for Koichi ITO koic
1
1.4k
ポーリング処理廃止によるイベント駆動アーキテクチャへの移行
Avatar for Seitaro Fujigaki seitarof
3
1.3k
Tamach-sre-3_ANDPAD-shimaison93
Avatar for shimaison93 mane12yurks38
0
220
Nuxt Server Components
Avatar for wattanx wattanx
0
230
ファインチューニングせずメインコンペを解く方法
Avatar for pokutuna pokutuna
0
230
[PHPerKaigi 2026]PHPerKaigi2025の企画CodeGolfが最高すぎて社内で内製して半年運営して得た内製と運営の知見
Avatar for Z.O.E. ikezoemakoto
0
310

Featured

See All Featured
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
460
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
950
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
2k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
48k
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
4k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
1
2.5k
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
190
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
274
21k
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
15k

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 ?