Mise à jour connaissances HTML/CSS : quoi apprendre ?

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par Alorsladaccord, 5 Novembre 2016.

  1. Alorsladaccord
    Alorsladaccord WRInaute occasionnel
    Inscrit:
    30 Juillet 2014
    Messages:
    481
    J'aime reçus:
    0
    Bonjour,

    Je vois que le terme "HTML 5" revient souvent dans les discussions.
    Mais qu'est-ce que ça change ?
    Qu'est-ce qu'il faut indispensablement savoir de plus aujourd'hui qu'il y a 5 ans, lorsqu'on crée un nouveau site ?
    Qu'y-a-t'il de vraiment nouveau en HTML/CSS ?
    Les évolutions du HTML 5 concernent-elles exclusivement les mobiles ? Ou est-ce que même pour l'affichage sur PC, il y a de nouvelles règles indispensables à suivre ?


    Merci d'avance !
     
    #1 Alorsladaccord, 5 Novembre 2016
  2. Alorsladaccord
    Alorsladaccord WRInaute occasionnel
    Inscrit:
    30 Juillet 2014
    Messages:
    481
    J'aime reçus:
    0
    Pour l'instant, je lis ça :

    Votre avis ? Vraiment utile ? Indispensable ? Il en faut plus encore ?
     
    #2 Alorsladaccord, 5 Novembre 2016
  3. indigene
    indigene WRInaute accro
    Inscrit:
    7 Septembre 2003
    Messages:
    3 629
    J'aime reçus:
    66
    En HTML 5 on peut mettre dans le body une partie header et une partie footer
    C'est à peu près tout ce qu'il y a comme différences. S'il y en a d'autres c'est sans doute absolument inutile car je n'en ai jamais eu besoin.
     
    #3 indigene, 5 Novembre 2016
  4. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 734
    J'aime reçus:
    233
    #4 spout, 5 Novembre 2016
  5. Alorsladaccord
    Alorsladaccord WRInaute occasionnel
    Inscrit:
    30 Juillet 2014
    Messages:
    481
    J'aime reçus:
    0
    Hum... Serait-ce ces pages qui défilent à l'écran, tandis que le haut avec la bannière reste statique ?
    Un exemple en ligne, peut-être ?

    Merci pour les liens Spout, je vais consulter tout ça.
    Le mot 3D me tape dans l'oeil. Un exemple là aussi ?

    Une autre question encore : avec le HTML 5 il y a des fonctions EN PLUS. Mais si on fait pareil qu'en HTML 2,3,4 est-ce que ça va faire planter l'affichage ?
     
    #5 Alorsladaccord, 5 Novembre 2016
  6. indigene
    indigene WRInaute accro
    Inscrit:
    7 Septembre 2003
    Messages:
    3 629
    J'aime reçus:
    66
    Non, ce sont simplement des balises supplémentaires qui permettent de mieux structurer le contenu et de faire la différence entre ce qui fait partie de la navigation (le header) et ce qui correspond réellement à l'article qui s'arrête au footer (le pied de page).

    En html < 5 il n'y a que <body></body> et tout ça est inclus entre ces deux balises sans faire aucune distinction, sans aucun découpage
     
    #6 indigene, 5 Novembre 2016
  7. indigene
    indigene WRInaute accro
    Inscrit:
    7 Septembre 2003
    Messages:
    3 629
    J'aime reçus:
    66
    et pour rappel le html reste un moyen de présentation de documents (de mise en page si tu préfères). Tout ce qui concerne statique/dynamique est plutôt géré par du javascript et du css (effets visuels au passage de la souris par exemple)
     
    #7 indigene, 5 Novembre 2016
  8. FortTrafic
    FortTrafic WRInaute passionné
    Inscrit:
    11 Décembre 2012
    Messages:
    1 210
    J'aime reçus:
    18
    Le html 5 aurait du etre le html 1, il est plus facile a ecrire je trouve, en tous cas plus que le 4 qui compliquait tout pour rien.
     
    #8 FortTrafic, 5 Novembre 2016
  9. Alorsladaccord
    Alorsladaccord WRInaute occasionnel
    Inscrit:
    30 Juillet 2014
    Messages:
    481
    J'aime reçus:
    0
    Est-ce à dire que côté code, tout le HTML est dans le header puis dans une seconde partie, tout le texte est dans le footer ?
    Ce n'est plus imbriqué ? Ca m'étonne. Le cas échéant, j'aimerais bien voir à quoi ça ressemble et comment l'affichage final est généré. Mais sans doute ai-je mal compris. Peut-être même viens-je d'inventer un concept... :idea:
     
    #9 Alorsladaccord, 5 Novembre 2016
  10. FortTrafic
    FortTrafic WRInaute passionné
    Inscrit:
    11 Décembre 2012
    Messages:
    1 210
    J'aime reçus:
    18
    Non header et footer sont de nouvelles balises a mettre dans body. Mais bon utilises google et w3cschools pour lire des trucs sur le html5 cest juste plus simple quavant avec des trucs en plus supportes par les navigateurs qui facilite des trucs comme mettre des videos et des verifications dans les formulaires. Des trucs simples apres il y a surement pleins dautres choses bien aussi. Disons que si tu fais un nouveau site commence le directement en html5
     
    #10 FortTrafic, 5 Novembre 2016
  11. Alorsladaccord
    Alorsladaccord WRInaute occasionnel
    Inscrit:
    30 Juillet 2014
    Messages:
    481
    J'aime reçus:
    0
    Bon ok, ça m'a l'air intéressant, je vais creuser un peu la théorie avant de me lancer.
    C'est donc là que ça se passe, quoi ?
    http://www.w3schools.com/html/html5_syntax.asp

    Et maintenant, qu'en est-il du CSS ? Les évolutions (nouvelles balises) sont-elles inclues dans ce qu'on appelle le HTML 5 ?
    Ou est-ce que c'est encore un autre à part ? Je ne me souviens plus, mais il me semble qu'il y avait bien CSS 2.0 puis CSS 3.0 (avec les angles arrondis par exemple). On en est où de ce côté-là ? Quoi de neuf docteur ?
     
    #11 Alorsladaccord, 5 Novembre 2016
  12. FortTrafic
    FortTrafic WRInaute passionné
    Inscrit:
    11 Décembre 2012
    Messages:
    1 210
    J'aime reçus:
    18
    #12 FortTrafic, 5 Novembre 2016
  13. Alorsladaccord
    Alorsladaccord WRInaute occasionnel
    Inscrit:
    30 Juillet 2014
    Messages:
    481
    J'aime reçus:
    0
    Ok ok, merci FortTrafic.

    Bien réussi ce schéma wikipédia :
    [​IMG]
     
    #13 Alorsladaccord, 5 Novembre 2016
  14. niap
    niap WRInaute discret
    Inscrit:
    17 Octobre 2009
    Messages:
    139
    J'aime reçus:
    0
    Aujourd'hui un document HTML (re-)devient un document purement sémantique, dans lequel les données ont un sens.
    On ne construit plus un document en empilant des blocs div de haut en bas. C'est une notion importante à comprendre. On peut construire un document en designant les zones (<section>, <article>), des infos secondaire (<aside>), le menu (<nav>), l'entête (<header>), le pied de page (<footer>), etc.

    La sémantique d'un document permet un meilleur échange des données, donc une meilleur valorisation de ses données.

    Les type de balises de formulaire sont plus nombreux. Il existe des balises pour définir, une date, une heure, une adresse email, une couleur. On peut définir les champs sous la forme de slider. Plus de code javascript à ajouter :
    http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_range

    Les données structurés sont intéressantes à étudier. Aujourd'hui elles sont peu utilisés, mais dans le futur je pense qu'elle prendront une part plus importante :
    - https://developers.google.com/search/docs/guides/intro-structured-data

    L'HTML 5 a également permis de remettre à plat certains mécanismes d'interactions :
    - Les notifications : https://developer.mozilla.org/fr/docs/Web/API/notification
    - l'API File Reader : https://developer.mozilla.org/fr/docs/Web/API/FileReader
    - Le glissé déposé : http://www.w3schools.com/html/html5_draganddrop.asp

    Autre chose que je trouve très intéressant les attributs data-. Tu peux rajouter des attributs data- aux balises HTML et t'en servir avec Javascript :
    https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Using_data_attributes
    Ca fonctionne très bien et ça évite d'initialiser des listes Javascript longues comme le bras, et le code est nettement plus propre.

    Un site à consulter : https://www.html5rocks.com

    Bref, HTML 5 c'est bien et ça m'a redonné l'envie de m'intéresser au web. Vivement le 6.
     
    #14 niap, 6 Novembre 2016
  15. indigene
    indigene WRInaute accro
    Inscrit:
    7 Septembre 2003
    Messages:
    3 629
    J'aime reçus:
    66
    En résumé il existe plein de nouvelles choses pour créer des usines à gaz

    Tout ça on peut très bien s'en passer et continuer à développer comme avant.

    Perso je continue d'utiliser <br> et non <br /> et parfois j'utilise même <center></center> ou les tables classiques au lieu de les faire en css.

    Je cherche toujours à aller au plus simple, au plus clair et au plus concis. Ca sert à rien de se prendre la tête avec le html5. Ce qui compte c'est le contenu et qu'il soit présenté conforme aux spécifications du w3c et qu'il soit trouvable dans les moteurs de recherche.
    L'expérience utilisateur compte beaucoup et le html est un moyen de présenter les données aux visiteurs, rien de plus. Tant que ça permet de présenter l'information d'une façon claire et agréable à lire le reste n'est pas important. Le html n'est pas un langage de dev mais de présentation.

    Et l'utilisation des div qui s'imbriquent c'est un peu indispensable pour faire du responsive design.

    A ce sujet je t'invite à t'intéresser à bootstrap qui est une panoplie de css/js/scripts pour réaliser des sites responsive, presque un framework.
     
    #15 indigene, 6 Novembre 2016
  16. Rouskof
    Rouskof Nouveau WRInaute
    Inscrit:
    7 Août 2009
    Messages:
    47
    J'aime reçus:
    0
    Sympa, ton avatar, indigene, ça me rappelle plein de bons souvenirs.
     
    #16 Rouskof, 6 Novembre 2016
  17. gotgot
    gotgot WRInaute discret
    Inscrit:
    1 Octobre 2014
    Messages:
    188
    J'aime reçus:
    0
    lol n'importe quoi pour l'usine à gaz, au contraire on te permet de faire des choses en gardant simplement du html, et non traffiquer en passant par du javascript ou autre langage pour faire des choses simples...
    utiliser des balises html plutôt que css c'est que tu as un problème d'utilité des balises, si tu veux mettre un élément en gras en html cela montre que l'élément est important, si tu le fais en css c'est juste visuel.
    Y'a aucune prise de tête avec le html5 c'est même plus simple, suffit juste de se tenir informer des nouveautés, par contre le w3c ça sert pas à grand chose...

    Bref sinon pour revenir à la question, le html5 concerne aussi bien les pc que les mobiles, qu'est ça change? pas énormément de gros points, c'est surtout une évolution sur le global, après tout dépend quels sont tes besoins, c'est surtout des nouvelles balises, nouveaux attributs, plus de choix, de possibilités, et permettent de faire des choses en html alors qu'on était obliger de passer par d'autres solutions avant...
     
    #17 gotgot, 7 Novembre 2016
  18. indigene
    indigene WRInaute accro
    Inscrit:
    7 Septembre 2003
    Messages:
    3 629
    J'aime reçus:
    66
    C'est déjà comme ça que ça a toujours fonctionné même avant html 5.
    Je pense que du coup tu ne connais pas le html 4

    Non, c'est juste la base. Le minimum à respecter.

    Si tu dois faire un long voyage en voiture tu vérifies que le véhicule possède 4 roues, une roue de secours et que les pneus ne sont pas lisses et qu'ils sont gonflés correctement. En gros le w3c ça vérifie ce genre de choses.
    Une erreur w3c et c'est le risque que la page soit affichée de trois manière différente sur trois navigateurs différents, chacun interprétant à sa façon. Ce n'est pas trop ce qu'on veut, hein.
     
    #18 indigene, 7 Novembre 2016
  19. gotgot
    gotgot WRInaute discret
    Inscrit:
    1 Octobre 2014
    Messages:
    188
    J'aime reçus:
    0
    Si mais c'est juste que dans ton exemple avec les <center></center> plutôt qu'en css tu fais pas du tout référence à ça, alors que justement pour savoir si on utilise du html ou du css, faut se poser la question de savoir si c'est juste du visuel ou pour mettre un élément en valeur ou lui donner une signification

    Je suis d'accord sur le fait qu'il faille respecter un minimum, de là à se prendre la tête là dessus, et c'est parce que je dis ça qu'il ne faut pas que ça soit adapté à tous les navigateurs au contraire, mais encore une fois html5 simplifie et apporte plus de compatibilité entre navigateurs...
     
    #19 gotgot, 7 Novembre 2016
  20. Alorsladaccord
    Alorsladaccord WRInaute occasionnel
    Inscrit:
    30 Juillet 2014
    Messages:
    481
    J'aime reçus:
    0
    Cette page a l'air pas mal : http://41mag.fr/comment-apprendre-a-creer-un-site-internet

    Mais quelqu'un a-t'il un exemple de page complète intégralement structurée en HTML 5, pour voir à quoi ça ressemble ? Même si c'est pas un tuto, si vous avez une URL, j'irai voir le code source, merci.

    **edit**
    Et puisque nous y sommes, le HTML5 est-il supposé améliorer le référencement, par exemple en facilitant l'identification du contenu principal par une balise <article> ?
     
    #20 Alorsladaccord, 7 Novembre 2016
  21. indigene
    indigene WRInaute accro
    Inscrit:
    7 Septembre 2003
    Messages:
    3 629
    J'aime reçus:
    66
    L'améliorer : non
    L'accélérer : peut-être

    Google est suffisant "intelligent" pour voir où commence ton article et où il s'arrête et pour repérer les bandeaux latéraux, les headers et les pieds de pages. S'il n'en est pas capable sur tes pages ça voudrait dire qu'un visiteur non plus n'arriverait pas à s'y retrouver et alors je ne donne pas cher du référencement dans ce cas. Ce qui se conçoit bien s'expose bien.

    Mais ça peut permettre d'accélérer le processus de décorticage de la page par google
     
    #21 indigene, 7 Novembre 2016
  22. Alorsladaccord
    Alorsladaccord WRInaute occasionnel
    Inscrit:
    30 Juillet 2014
    Messages:
    481
    J'aime reçus:
    0
    Ok, je vois merci.

    Et sur ces nouvelles balises html5, genre <header>, <article>, etc... Qu'est-il possible de faire de nouveau, en usant des CSS ?
     
    #22 Alorsladaccord, 7 Novembre 2016
  23. gotgot
    gotgot WRInaute discret
    Inscrit:
    1 Octobre 2014
    Messages:
    188
    J'aime reçus:
    0
    oui ça à l'air pas mal
    je n'ai pas d'exemple de pages comme ça sous la main mais tout ce qui commence avec un <!DOCTYPE html> est sensé être structuré pour le html5, après ça ne veut pas dire qu'il n'y a pas d'erreur...

    et pour le edit, pour moi oui, ça va pas forcément améliorer le référencement par rapport à une page en html4, mais en tout cas de mieux faire comprendre la page aux moteurs grâce aux nouveaux éléments.
     
    #23 gotgot, 7 Novembre 2016
  24. indigene
    indigene WRInaute accro
    Inscrit:
    7 Septembre 2003
    Messages:
    3 629
    J'aime reçus:
    66
    L'évolution du css est indépendante du html tout comme le js est également indépendant et le php aussi

    Perso je me prend pas trop la tête : je travaille à partir d'une base "bootstrap" qui propose tout ce qu'il faut pour gérer le responsive et le css
    Pour faire un nouveau site je réalise une maquette des pages principales et de toutes les types de pages particuliers en utilisant un outil de conception de sites automatisé. Il propose une cinquantaine de modèles types, des templates en quelques sortes. Je choisi un template. Je l'adapte à mes pages. Je génère le rendu html et ensuite je repars de cette base html pour fignoler et ajouter quelques spécificités. Puis je code les pages php pour obtenir le rendu html souhaité en allant chercher les informations en base de donnée. Là c'est mon propre CMS que j'utilise pour le backoffice et la mise à jour des bases.

    Au final, du css, j'en ai très peu à coder car tout existe déjà dans bootstrap. Après c'est juste de l'assemblage avec des briques existantes.

    Je n'ai pas non plus à trop me soucier du responsive qui est obtenu nativement.

    L'important reste donc le contenu et c'est ça qui apporte la véritable valeur ajoutée.

    Tu peux aussi installer un wordpress et choisir un template mais c'est sans doute plus compliqué d'apprendre wordpress et pouvoir le modifier, l'améliorer selon ses besoins, que d'apprendre le minimum concernant html5 et d'utiliser bootstrap.

    Il ne faut pas non plus oublier que les sites d'aujourd'hui doivent être accessibles aux utilisateurs de mobiles. Donc prévoir de gros boutons et des liens assez espacés.
    Google me dit que mes pages ont une expérience utilisateur de 98% avec pagespeed insights
     
    #24 indigene, 7 Novembre 2016
  25. Marie-Aude
    Marie-Aude WRInaute accro
    Inscrit:
    5 Juin 2006
    Messages:
    16 372
    J'aime reçus:
    2
    http://www.alsacreations.com/article/lire/750-HTML5-nouveautes.html
    https://openclassrooms.com/courses/dynamisez-vos-sites-web-avec-javasc ... e-le-html5

    Bon certes ça date de 2009...

    contrairement à ce qui dit indigène, il y a beaucoup de nouveautés utiles en HTML 5

    Ne serait-ce que la balise datalist, qui permet de proposer une liste de choix dans un input de type text, c'est à dire de permettre à l'utilisateur de choisir un élément déjà existant ou d'en créer un nouveau, ce qui est impossible avec un input de type select...

    De même, les types d'input dans les formulaires permettent de faire des contrôles de saisie et de faciliter la tâche des internautes...

    La gestion des embed de vidéos est aussi meilleure.

    Déjà, le HTML5 ne concerne pas vraiment l'affichage, mais les fonctionnalités. Pour l'affichage, c'est CSS 3, qui va "avec" mais qui peut aussi fonctionner sur un marquage html plus ancien.

    Tu as des fonctionnalités comme la geolocalisation, aussi, qui peuvent être utiles

    Enfin, ne pas croire que le responsive ne concerne que les portables. Avec les pc ultra légers, d'un côté, retina de l'autre, on a aussi a faire de la gestion du responsive pour les pc
     
    #25 Marie-Aude, 8 Novembre 2016
  26. indigene
    indigene WRInaute accro
    Inscrit:
    7 Septembre 2003
    Messages:
    3 629
    J'aime reçus:
    66
    Je confirme. Le responsive n'est pas du tout lié aux smartphones
    Il suffit de comparer un écran de bureau format 3/2 avec un écran panoramique. Ca n'a rien à voir.
    Le responsive permet de s'adapter à la taille de tous les écrans et à toutes les résolutions.
    Un test est simple à faire : dans mozilla tu réduits la largeur de ta fenêtre du maximum à 320 pixels de large pour voir comment ça se comporte à toutes les largeurs d'écran.
     
    #26 indigene, 8 Novembre 2016
  27. aditya5670
    aditya5670 Nouveau WRInaute
    Inscrit:
    18 Avril 2019
    Messages:
    1
    J'aime reçus:
    0
    Bon, ça a l'air intriguant, je vais creuser une petite hypothèse avant de commencer.

    Avec l'objectif c'est l'endroit où aller, quoi?

    http://welookups.com/html/html5_syntax.html

    En outre, à l'heure actuelle, ne devrions-nous pas parler de CSS? Des améliorations (nouvelles étiquettes) sont-elles incorporées dans ce que l’on appelle HTML 5?

    Ou alors encore est-ce un autre séparé? Je ne me souviens pas, mais je ne peux pas m'empêcher de penser qu'il existait CSS 2.0 puis CSS 3.0 (avec des tracés ajustés par exemple). Où sommes-nous de ce côté? Quoi de neuf doc ?
     
    #27 aditya5670, 18 Avril 2019
(Vous devez vous identifier ou vous inscrire pour poster ici.)
Chargement...
Similar Threads - connaissances CSS apprendre Forum Date
Gérer un serveur dédié sans connaissances techniques Développement d'un site Web ou d'une appli mobile 21 Février 2015
Google Actu : Partage de connaissances sur le classement des articles Google : l'entreprise, les sites web, les services 10 Juin 2013
Campagne mails auprès de mes connaissances Débuter en référencement 15 Novembre 2010
création site base de connaissances Développement d'un site Web ou d'une appli mobile 25 Septembre 2009
Extension Chrome utile pour afficher le code source HTML, JS, CSS Développement d'un site Web ou d'une appli mobile 5 Juillet 2019
css pour cookieconsent et apparence graphique. Développement d'un site Web ou d'une appli mobile 28 Avril 2019
Appliquer style CSS CMS GHOST Développement d'un site Web ou d'une appli mobile 21 Mars 2019
Wordpress et site html/css Débuter en référencement 15 Décembre 2018
Temps de réponse et minimisation CSS et JS Débuter en référencement 30 Novembre 2018
Texte qui apparait au scroll ou au chargement en CSS Débuter en référencement 24 Octobre 2018
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Accepter En savoir plus.
    Rejeter la notice