IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Publications (X)HTML et CSS Discussion :

Apprendre le HTML


Sujet :

Publications (X)HTML et CSS

  1. #1
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 907
    Détails du profil
    Informations personnelles :
    Âge : 41
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 907
    Points : 14 822
    Points
    14 822
    Par défaut Apprendre le HTML
    Hello,

    Je vous présente mon tout nouveau tutoriel qui va vous apprendre les bases du HTML pour les débutants et vous donner un "petit" aide-mémoire pour les plus expérimentés.

    N'hésitez pas à me faire part de vos remarques, questions et suggestions, ainsi que tout point qui vous paraitrait obscur dans cette discussion.

    Voir aussi les cours et tutoriels HTML et la FAQ HTML.

    Bonne lecture à tous !

  2. #2
    Modérateur

    Avatar de kOrt3x
    Homme Profil pro
    Technicien Informatique/Webmaster
    Inscrit en
    Septembre 2006
    Messages
    3 650
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Technicien Informatique/Webmaster
    Secteur : Santé

    Informations forums :
    Inscription : Septembre 2006
    Messages : 3 650
    Points : 15 771
    Points
    15 771
    Par défaut
    Du bon boulot tout ça.

    (mis dans mes marques-ta-pages)

  3. #3
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 220
    Points
    91 220
    Billets dans le blog
    20
    Par défaut

    Félicitation pour cet article !
    Du bon travail !

  4. #4
    FoxLeRenard
    Invité(e)
    Par défaut
    Citation Envoyé par Bisûnûrs Voir le message
    Hello,
    Je vous présente mon tout nouveau tutoriel Bonne lecture à tous !
    Whaou bravo ! Enfin un vrais "comment faire au début"
    ça manque tout le temps !
    voila un lien a donner en réponse a bien des questions posées.

    On oublie toujour qu' on a commencé un jour

  5. #5
    Membre éclairé Avatar de ledisciple
    Homme Profil pro
    observateur de nuage niveau 2.3
    Inscrit en
    Août 2008
    Messages
    860
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France

    Informations professionnelles :
    Activité : observateur de nuage niveau 2.3

    Informations forums :
    Inscription : Août 2008
    Messages : 860
    Points : 723
    Points
    723
    Par défaut
    bravo pour tout ce travail fournit ...


  6. #6
    Membre du Club
    Profil pro
    Inscrit en
    Novembre 2006
    Messages
    60
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2006
    Messages : 60
    Points : 59
    Points
    59
    Par défaut
    Super, très utile.

  7. #7
    Rédacteur/Modérateur
    Avatar de andry.aime
    Homme Profil pro
    Inscrit en
    Septembre 2007
    Messages
    8 391
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Ile Maurice

    Informations forums :
    Inscription : Septembre 2007
    Messages : 8 391
    Points : 15 059
    Points
    15 059
    Par défaut
    Très beau boulot

  8. #8
    Membre à l'essai
    Profil pro
    Inscrit en
    Août 2009
    Messages
    18
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2009
    Messages : 18
    Points : 16
    Points
    16
    Par défaut
    Pas mal super tutorial j'ai appris

  9. #9
    Membre habitué
    Inscrit en
    Juin 2009
    Messages
    138
    Détails du profil
    Informations personnelles :
    Âge : 36

    Informations forums :
    Inscription : Juin 2009
    Messages : 138
    Points : 159
    Points
    159
    Par défaut
    Il m'est bien utile
    Merci !!!

  10. #10
    Membre habitué
    Profil pro
    Inscrit en
    Mai 2009
    Messages
    167
    Détails du profil
    Informations personnelles :
    Âge : 37
    Localisation : France

    Informations forums :
    Inscription : Mai 2009
    Messages : 167
    Points : 186
    Points
    186
    Par défaut
    Vraiment très bien en plus facile à lire. J'ai même appris de nouvelle chose.

    Bravo.

  11. #11
    Expert éminent
    Avatar de 12monkeys
    Homme Profil pro
    Webmaster
    Inscrit en
    Novembre 2006
    Messages
    4 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Service public

    Informations forums :
    Inscription : Novembre 2006
    Messages : 4 093
    Points : 9 031
    Points
    9 031
    Par défaut
    Salut

    Pas mieux que les autres : très bon boulot...

  12. #12
    Membre émérite Avatar de Erwan31
    Profil pro
    Inscrit en
    Février 2008
    Messages
    2 177
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2008
    Messages : 2 177
    Points : 2 444
    Points
    2 444
    Par défaut
    Salut Bisunurs,
    bravo pour ce gros article, j'imagine que ça doit prendre pas mal de temps de pondre un tuto aussi long!

    Bon comme tu le supposes je vais faire mon chieur de service:

    > Concernant l'intro (je n'ai lu que cette partie pour le moment) je suis pas sûr qu'on puisse définir HTML comme un format. Ensuite HTML n'est pas (n'est plus) un langage de présentation (c'est CSS qui assure ce rôle), c'est induire en erreur que d'affirmer cela.

    S'agissant de la terminologie, je pense qu'il serait profitable d'introduire dés le départ la notion d'élément (<div>content</div>) plutôt que de balises doubles, d'élément vide auto-fermant (<img>...).

    C'est tout pour cette fois-ci, j'aurai d'autre remarques à te faire concernant le doctype.

  13. #13
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 907
    Détails du profil
    Informations personnelles :
    Âge : 41
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 907
    Points : 14 822
    Points
    14 822
    Par défaut
    Citation Envoyé par Erwan31 Voir le message
    Bon comme tu le supposes je vais faire mon chieur de service:
    Ca me va, quand on a le nez dans la rédaction d'un tuto aussi long, on oublie forcément des trucs ou on peut dire plein de conneries sans s'en rendre compte aussi.

    Citation Envoyé par Erwan31 Voir le message
    Concernant l'intro (je n'ai lu que cette partie pour le moment) je suis pas sûr qu'on puisse définir HTML comme un format. Ensuite HTML n'est pas (n'est plus) un langage de présentation (c'est CSS qui assure ce rôle). La confusion vient du fait que c'était en effet à l'origine une langage de présentation avant de devenir un langage de structuration quand les premières notion de sémantique sont apparues. Bref c'est induire en erreur que d'affirmer cela.
    franculo_caoulene m'a fait plus ou moins la même remarque, j'avais déjà commencé à corriger en ce sens sans avoir encore uploadé la nouvelle version.
    J'ai donc regroupé les deux premières phrases pour donner ça :
    Le HTML (HyperText Markup Language) est un langage de description de données, et non un langage de programmation, permettant de créer des pages web pouvant être lues dans des navigateurs.
    Je fais volontairement un abus de langage en parlant de navigateurs et non d'UA, mais penses-tu qu'il faille que je le précise ?

    Citation Envoyé par Erwan31 Voir le message
    S'agissant de la terminologie, je pense qu'il serait profitable d'introduire dés le départ la notion d'élément (<div>content</div>) plutôt que de balises doubles, d'élément vide auto-fermant (<img>...).
    Tu as raison, je vais voir pour essayer de formuler ça correctement ..

  14. #14
    Membre émérite Avatar de Erwan31
    Profil pro
    Inscrit en
    Février 2008
    Messages
    2 177
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2008
    Messages : 2 177
    Points : 2 444
    Points
    2 444
    Par défaut
    Citation Envoyé par Bisûnûrs Voir le message
    franculo_caoulene m'a fait plus ou moins la même remarque, j'avais déjà commencé à corriger en ce sens sans avoir encore uploadé la nouvelle version.

    Je fais volontairement un abus de langage en parlant de navigateurs et non d'UA, mais penses-tu qu'il faille que je le précise ?
    Oui c'est assez simple à assimiler puis ça évite une vision trop réductrice
    de son utilité et ses possibilités en plus d'introduire implicitement la notion d'interopérabilité et d'accessibilité.
    Personnellement, j'ajouterais aussi une référence à son ancêtre SGML et le mot document assez important, ce n'est pas un langage de description de donnée mais plutôt de document.
    Ensuite j'ai évoqué langage de structuration mais ça n'existe manifestement pas.
    Donc voila comme je le tournerais, après à toi d'en retirer ce que tu veux et de le tourner à ta manière

    Le HTML (HyperText Markup Language) est un langage de description de document qui s'apparente à un langage de balisage dont la syntaxe est issue du SGML (Standard Generalized Markup Language).
    Celui-ci permet de structurer des contenus (pas sûr que donnés soit le plus approprié ici) de manière sémantique et d'obtenir des documents lisibles et interprétables par des agents utilisateurs (navigateurs graphique/texte, lecteurs d'écran, etc.) divers et variés.
    Je suis pas certain qu'il faille introduire dans cette définition la notion d'interopérabilité.
    Peut-être ajouter un lien vers une définition complète des UA ou une astérisque avec un renvoi en bas de page.

  15. #15
    Membre émérite Avatar de Erwan31
    Profil pro
    Inscrit en
    Février 2008
    Messages
    2 177
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2008
    Messages : 2 177
    Points : 2 444
    Points
    2 444
    Par défaut
    Salut,
    autre remarque au sujet du DTD:

    D'autre part, il indique au navigateur de quelle manière interpréter telle balise, telle propriété CSS.
    C'est plutôt le type mime déclaré qui modifie l'interprétation du code (parser XML ou du parseur HTML).
    Que ce soit avec un doctype HTML ou XHTML servi en text/html, le code sera toujours interprété en "soupe de balises".

    L'absence de cette balise est appelée le mode Quirks, ou non conforme, alors qu'au contraire, la présence de cette balise est appelée le mode Standard, ou conforme.
    Ta formulation est un peu "confusante"

    L'absence du doctype (ou de cet élément) fait basculer (via le mécanisme du doctype switching pour des document servis avec le type mime text/html) les navigateurs relativement récents en mode de compatibilité descendante appelé aussi mode Quirks ou mode natif pour IE, un mode de rendu figé non standard et plus permissif qui tient compte des implémentations propriétaires et des pratiques d'intégration qui prévalaient à la fin des années 90.

    La phrase est peut-être un peu longue...

    Je pense pas qu'il soit impératif pour une intro d'évoquer le mode almost standard.

    Et l'URL sur la ligne du DOCTYPE, est-elle vraiment utile, elle ?
    La réponse est encore une fois : oui. Vous pouvez certes faire valider vos pages sur le site du validateur du W3C sans l'URL,
    Elle est utile à ma connaissance uniquement pour éviter le passage en mode Quirks pour les DTD HTML4 transitionnal, c'est tout.

    mais son oubli a la fâcheuse tendance à faire passer Internet Explorer en mode Quirks, ce qui anéantira tous vos efforts de compatibilité entre les différents navigateurs.
    C'est en partie faux. Des DTD XHTML1.0 et HTML4 (strict et sans définition)
    ne font pas basculer les navigateurs graphiques en mode quirks en l'absence d'URL.

  16. #16
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 907
    Détails du profil
    Informations personnelles :
    Âge : 41
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 907
    Points : 14 822
    Points
    14 822
    Par défaut
    Citation Envoyé par Erwan31 Voir le message
    ce n'est pas un langage de description de donnée mais plutôt de document.
    C'est vrai que lorsque j'ai appris le HTML on disait que c'était un langage de description de données, mais c'était il y a bien longtemps.

    Citation Envoyé par Erwan31 Voir le message
    Donc voila comme je le tournerais, après à toi d'en retirer ce que tu veux et de le tourner à ta manière
    J'aime beaucoup cette tournure, si ça ne te dérange pas, je vais le reprendre quasiment tel quel.

    Citation Envoyé par Erwan31 Voir le message
    Peut-être ajouter un lien vers une définition complète des UA ou une astérisque avec un renvoi en bas de page.
    Ca sera fait.


    Citation Envoyé par Erwan31 Voir le message
    C'est plutôt le type mime déclaré qui modifie l'interprétation du code (parser XML ou du parseur HTML).
    Que ce soit avec un doctype HTML ou XHTML servi en text/html, le code sera toujours interprété en "soupe de balises".
    Je me suis mal exprimé, ou alors ej n'arrive pas à transmettre l'idée que j'ai voulu faire passer avec cette phrase. En gros, je voulais non pas ressortir la manière dont est parsé le fichier, mais plutôt du type de modèle de contenu des balises ainsi que le type de rendu (plus homogène entre les navigateurs en mode Standard).

    Citation Envoyé par Erwan31 Voir le message
    Ta formulation est un peu "confusante"

    L'absence du doctype (ou de cet élément) fait basculer (via le mécanisme du doctype switching pour des document servis avec le type mime text/html) les navigateurs relativement récents en mode de compatibilité descendante appelé aussi mode Quirks ou mode natif pour IE, un mode de rendu figé non standard et plus permissif qui tient compte des implémentations propriétaires et des pratiques d'intégration qui prévalaient à la fin des années 90.

    La phrase est peut-être un peu longue...
    Le problème avec ce genre de tutoriel destiné en grande partie à des débutants est d'arriver à leur faire comprendre l'idée générale avec des mots simples, sans pour autant entrer dans le détail le plus poussé que seuls les puristes et/ou les intégrateurs de métier pourront comprendre. C'est pour ça aussi (et ça m'étonne que tu ne l'aies pas relevé ) que j'ai fait le raccourci entre "mode Quirks" et "absence de DOCTYPE et/ou DTD", alors que le moindre caractère même blanc mis avant lui fait entrer IE en mode de compatibilité descendante.

    Citation Envoyé par Erwan31 Voir le message
    Je pense pas qu'il soit impératif pour une intro d'évoquer le mode almost standard.
    Moi non plus.

    Citation Envoyé par Erwan31 Voir le message
    Elle est utile à ma connaissance uniquement pour éviter le passage en mode Quirks pour les DTD HTML4 transitionnal, c'est tout.

    C'est en partie faux. Des DTD XHTML1.0 et HTML4 (strict et sans définition)
    ne font pas basculer les navigateurs graphiques en mode quirks en l'absence d'URL.
    C'est exact, je corrigerai.

  17. #17
    Membre émérite Avatar de Erwan31
    Profil pro
    Inscrit en
    Février 2008
    Messages
    2 177
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2008
    Messages : 2 177
    Points : 2 444
    Points
    2 444
    Par défaut
    Citation Envoyé par Bisûnûrs Voir le message
    J'aime beaucoup cette tournure, si ça ne te dérange pas, je vais le reprendre quasiment tel quel.
    Ok pas de problème.

    Citation Envoyé par Bisûnûrs Voir le message
    Le problème avec ce genre de tutoriel destiné en grande partie à des débutants est d'arriver à leur faire comprendre l'idée générale avec des mots simples, sans pour autant entrer dans le détail le plus poussé que seuls les puristes et/ou les intégrateurs de métier pourront comprendre. C'est pour ça aussi (et ça m'étonne que tu ne l'aies pas relevé ) que j'ai fait le raccourci entre "mode Quirks" et "absence de DOCTYPE et/ou DTD", alors que le moindre caractère même blanc mis avant lui fait entrer IE en mode de compatibilité descendante.
    Je connais ça bien sûr mais comme c'est pas un article complet sur le mode quirks...
    Ceci dit c'est vrai que les détails que j'ai évoqués un peu succinctement ne vont pas forcément dans le sens d'une vulgarisation de ces concepts, mais je fais en général des liens vers une explication plus complète lorsque ça s'adresse à un débutant histoire de donner la possibilité d'approfondir et de ne pas s'arrêter à ce qui est dit.

  18. #18
    Membre confirmé Avatar de timoth
    Homme Profil pro
    Responsable Outils Digitaux
    Inscrit en
    Octobre 2005
    Messages
    479
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Responsable Outils Digitaux

    Informations forums :
    Inscription : Octobre 2005
    Messages : 479
    Points : 474
    Points
    474
    Par défaut Génial
    Super newbie en développement Web, je te tire mon chapeau pour ce tutorial.
    Faire comprendre à des débutants ce qu'on maîtrise sur le bout des doigts est un exercice difficile auquel tu es très bien arrivé.
    Bravo à toi et tous ces héros de dvp.com !
    Si seulement j'avais plus de mains pour vous applaudir....

  19. #19
    Candidat au Club
    Profil pro
    Inscrit en
    Février 2010
    Messages
    2
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2010
    Messages : 2
    Points : 2
    Points
    2
    Par défaut
    Merci pour l'article ! Dans mon article , j'explique qu’un élément possède un rendu CSS qui n’a pas forcément de rapport avec sa structure HTML. Ces deux notions ne sont d’ailleurs pas forcément dépendantes : il est possible de modifier via la propriété CSS ‘display’ l’affichage par défaut d’un élément, mais on ne modifie en rien la structure HTML de cet élément, qui elle, est immuable.

  20. #20
    Candidat au Club
    Profil pro
    Inscrit en
    Avril 2010
    Messages
    2
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2010
    Messages : 2
    Points : 3
    Points
    3
    Par défaut petite proposition pour modification
    il sera bien de montré ce que fais chaque <<chose>> écrite dans le tutoriel

Discussions similaires

  1. [HTML 4.0] Apprendre le HTML
    Par Bisûnûrs dans le forum Balisage (X)HTML et validation W3C
    Réponses: 26
    Dernier message: 31/12/2012, 09h58
  2. Apprendre HTML PHP Javascript....
    Par joker vb dans le forum Débuter
    Réponses: 2
    Dernier message: 20/04/2006, 13h10
  3. je veux apprendre la programmation quel language choisir??
    Par existance dans le forum Débuter
    Réponses: 26
    Dernier message: 06/08/2002, 06h32

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo