Comprendre le html d'un site (avec Chrome DevTools) ?

Sujet dans 'Forum Internet' lancé par Nastja, le 5 avril 2018.

  1. Nastja

    Nastja
    Expand Collapse
    What would Joan Holloway do?

    Hello,

    Par curiosité, parfois j'examine les sites web avec le Chrome DevTools mais il y a des truc qui m'échappent.
    J'ai des bases assez simples de Html/Css donc j'arrive à identifier une class et un id.

    Mais là par exemple je suis restée perplexe.
    Je ne savais pas qu'on pouvait ajouter des classes à la balise html

    Code:
    <html dir="ltr" style="" class=" js cssanimations
    csstransforms csstransforms3d csstransitions
    video object-fit no-mobile no-touchpad
    no-touchdevice no-android no-ios preserve3d"
    lang="fr">
    Et je croyais que la langue se mettait dans le head ?

    Sinon quand les noms de classe sont ultra opaques c'est à cause d'un framework c'est ça?
    C'est une mauvaise idée de faire un site à la mano en écrivant des classes plus compréhensibles? Quand je dis "mauvaise idée" je parle en termes de temps/coût. Un peu comme si je décidais de repeindre une façade entière avec un pinceau de précision.

    Merci d'avance :)
     
    ----- Publicité -----
  2. Jeannedarkh

    Jeannedarkh
    Expand Collapse
    Mindfuckée en reconversion

    @Nastja : Alors je connais un peu le html (j'ai bossé un peu en tant que dev front), mais ça fait un bout que j'ai pas mis le nez dedans, donc je veille un peu, mais je suis pas une experte. Alors déso si je te dis des bêtises ! J'invite des madzs à me corriger le cas échéant.
    Et si tu peux, je pense que c'est plus simple avec un lien vers le site dont tu as extrait la balise ouvrante <html>. Pour voir le code source et utiliser les tools qu'on aime selon nos pref' afin de l'analyser (perso j'utilise aussi Firebug si je suis sous FF par ex)

    1- tu peux appliquer des classes et id à n'importe quelles balises ^^ Et à priori, celle ci appelle un script dés le chargement d'une page du site si je comprends bien
    2- en effet, il me semblait aussi que la bonne pratique, c'est de mettre dans le <head> l'attribut lang.
    3- perso, je trouve qu'il y a rien de mieux qu'un site "à la mano" ;) l'usage de frameworks/CMS etc, ça alourdit le code je trouve, et c'est pas tip-top au niveau de la prog. Mais si tu ne sais pas programmer, c'est archi-pratique. Pis, c'est super rapide et simple à développer (si tu connais un peu le FW/CMS) , et tu peux aussi personnaliser tes classes et tout plein de trucs, même si c'est pas "à la mano" donc ;)
    4-je sais pas ce qu'est une classe ultra-opaque :red: Kézaco ??
     
    #2 Jeannedarkh, 5 avril 2018
    Dernière édition: 5 avril 2018
  3. Jeannedarkh

    Jeannedarkh
    Expand Collapse
    Mindfuckée en reconversion

    @Nastja ; alors après avoir check rapidou le corde source de la page d'accueil, à priori tout est ok pour l'attribut lang :)
    <html lang="fr" dir="ltr">
    (pour regarder le corde source, je fais control + U ou click droit afficher le code source de la page).
    EDIT : je viens de lire que je dis des bêtises, huhu, c'est toujours dans la balise html, my baaaad ;)

    C'est pas du javascript. Mais c'est le script appelé sur la page qui charge des classes dynamiques au chargement de la page, donc quand tu inspectes l'élément, tu vois tout ça je pense.
    Le .js comme le .css est appelé depuis la page .html. Là par exemple t'as un script appelé ainsi <script src="/bundles/umanlifewebsite/js/modernizr.js"></script>).
    Le code source te permet de voir réellement comment est codée la page, celle qui est présente sur le serveur. Quand tu inspectes un élément, non.

    "En fait je pensais que créer un site de A à Z à la main était pas pratique en termes de coût/temps. Je parle bien d'écrire à la main tout le html et le css sur Atom ou Notepad++ par exemple."
    Bah perso pour des sites vitrines simples, je passe toujours par un éditeur de texte (notepad++ ou sublim text), je fais mes scripts à la mano itou, mais là je connais un peu quand même (j'ai fait une formation pro et bossé un peu dans cette branche).
    Après c'est sûr que c'est plus long, mais je préfère. Puis je reprends d'anciens .html de sites déjà faits. Ou chope des squelettes ou des templates pour pas tout taper à la main non plus ;) Et je suis peut-être vieille école ^^ Un CMS et/ou un FW CSS, ça génère plein de balises "inutiles" (des paragraphes, des div etc vierges, des liens sur des images etc...) Je suis pas fan, mais j'en ai déjà utilisé.
    Car tu peux par contre super facilement faire un site responsive, avec pleins d'effets sympas, gérer des fonctionnalités complexes (nécessitant des connaissances en prog comme l'envoi de formulaires, la gestion d'un back-office, la sécurisation de données etc).

    Pour les classes, ça dépend du FW CSS en fait. Je pense que c'est un système de grid, t'as un ptit tuto là http://www.lafermeduweb.net/billet/...n-un-framework-css-1-960-grid-system-214.html

    Désolée si je suis pas très claire, je suis pas une grande pédagogue :sweatdrop: Et j'espère pas te dire de bêtises ^^
     
    #5 Jeannedarkh, 6 avril 2018
    Dernière édition: 6 avril 2018