le HTML5 et le CSS3 pour les Clémentines partie 1

Le code de base + un zeste de bonus

a marqué ce sujet comme résolu.

Holla@ a tous,

je vous présente un Tuto sur HTML et CSS, que j'avais fait il y a plusieurs années sur ce forum.

Le forum n'est plus visiter et je voudrait donc sauvegarder ce tutoriel. Si le forum à était remit en ligne s'est uniquement par nostalgie, pour les anciens membres et l'ancien staffs, donc il peut disparaître d'un jour a l'autre.

Voici un aperçu sur ZDS.

Je vais le modifier pour qu'il soit plus clair et au goût du jour.

+1 -0

J'ai pas regardé le fond mais sur la forme tu peux colorer le code html :

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html lang="fr">
   <head>
       <meta charset="utf-8" />
       <title>Bienvenue sur le site de joshua2501<title>
   </head>
   <body>
   </body>
</html>

pour cela soit, en fonction de la notation markdown que tu as utilisé :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
```html
<!DOCTYPE html>
<html lang="fr">
   <head>
       <meta charset="utf-8" />
       <title>Bienvenue sur le site de joshua2501<title>
   </head>
   <body>
   </body>
</html>
```

soit :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
    ::html
    <!DOCTYPE html>
    <html lang="fr">
       <head>
           <meta charset="utf-8" />
           <title>Bienvenue sur le site de joshua2501<title>
       </head>
       <body>
       </body>
    </html>
+0 -0

Pour le coup, il faudra peut-être un big-tuto s'il y a plusieurs parties, non ? Parce que sinon ça va vite être le bordel…

Ce serait pas mal de mettre en forme les bouts de code qui se baladent dans les phrases (pense aux backticks : `), à l'occasion :)

Sinon, une bonne relecture s'impose, le grammar nazi qui sommeille en moi (non, je déconne, il est toujours éveillé ou presque) a failli faire une crise cardiaque. ;)

+5 -0

Attention à certaines choses tout de même (en plus de l'ortho, +1 Viki) :

  • Je cite : "Attention tout de même avec internet explorer le favicon ne marche pas, utiliser plutôt firefox" => Tu ne peux pas demander aux visiteurs d'utiliser Firefox pour que ton site s'affiche mieux ; il me semble qu'il existe des lignes de code pour afficher la favicon sur IE ;

  • Je cite : " <title>Bienvenue sur le site de joshua2501<title> " => Tu n'as pas mis la balise fermante </title> mais <title>.

  • Je cite : "SURTOUT nommez-la favicon.ico", " href="images/favicon.png " => favicon.png ou favicon.ico ?

+0 -0
  • Je cite : "SURTOUT nommez-la favicon.ico", " href="images/favicon.png " => favicon.png ou favicon.ico ?

Solid

D'autant plus que le nom n'a d'importance que si le favicon et à la racine du site, auquel cas le HTML ne sert à rien (les navigateurs lancent une requête automatiquement sur ce fichier au chargement des pages, par convention).

Et effectivement, les favicons fonctionnent sur IE (et peuvent d'ailleurs être utilisés comme raccourcis sur Windows), il suffit de s'adapter un minimum…

+0 -0

La qualité est clairement mauvaise : outre les fautes d'orthographe et la familiarité du langage employé, aucune notion n'est expliquée (pas de définition d'une balise, aucune info sur le DOCTYPE, un gros mensonge sur Internet Explorer et les favicon).

Pour moi, il n'y a rien à garder dans ce tutoriel.

+5 -1

@Myssdii : Hmm, et si on pouvait rester bon esprit ?

C'est un peu violent comme commentaire. Je ne dis pas qu'il n'est pas vrai dans le fond, mais ce serait mieux si, dans la forme, il faisait preuve d'un peu plus de diplomatie.

+5 -1

@Myssdii : visiblement le tuto date d'il y a quelques années, du coup ça explique peut-être certaines choses, notamment ce qui est lié à l'auteur.

Mais c'est vrai qu'une bonne refonte est nécessaire pour avoir un rendu de qualité.

C'est quand même dommage que MN n'ai pas voulu rendre son tuto HTML/CSS accessible. J'ai pas parcouru la version HTML5/CSS3, mais j'avais appris les bases grâce à lui (il y a maintenant pas loin de 7 ans)…

Je vais essayer de voir avec d'autres (je pense par exemple à Manumanu ou ronamazona, s'il nous rejoint) si on peut pas écrire un truc qui tienne la route à plusieurs.

+0 -0

Manu a rejoint le site, j'ai pas encore vu ronamazona dessus, mais je l'ai contacté sur OC ainsi que d'autres dev front pour les prévenir de l'arrivée du site ;)

Idem, j'avais appris les bases du XHTML/CSS (avant le HTML5, ça remonte…) avec le SDZ, après je pense qu'avec le recul j'aurais apporté quelques modifs au tuto de MN pour enlever des raccourcis trompeurs notamment et approfondir certains points trop survolés.

+0 -0

Idem, la bonne époque du xHTML… :D

C'est bien possible que son tuto ne soit pas parfait (après tout, vu la quantité qu'il a rédigé, je pense qu'il est normal qu'il ne soit pas au point sur tout). Du coup repartir de zéro peut être une bonne idée, pour avoir une base saine et vraiment centrée sur ce qui se fait dans le monde réel.

P.S. : Je viens d'envoyer un MP à ronamazona sur OCR pour lui demander s'il souhaite participer et je vais de ce pas contacter Manu :)

+0 -0

Un peu hors sujet par rapport au post initial, mais une des choses qui m'a toujours parue trop peu détaillée dans le tuto de Mathieu Nebra, c'est le "modèle de boîte", et en particulier la manière dont les bordures et les marges fonctionnent lors du rendu graphique.

Énormément de problèmes sur le forum dédié de SdZ/OC étaient liés à des mises en pages qui ne fonctionnaient pas car des blocs étaient renvoyés sous d'autres parce que la largeur totale des blocs (voulus alignés côte à côte sur la même ligne) dépassait 100% de la largeur du viewport, en raison de bordures, de padding ou de margin latéraux que le développeur néophyte ne prend pas en compte dans son "calcul".

Enfin, ça avait peut être été mieux expliqué depuis ma dernière lecture du tuto, qui date!

Je pense en tout cas que ca fait partie des choses à vraiment bien expliquer pour que l'apprenant ait une bonne compréhension de la façon dont la mise en page au rendu fonctionne.

+2 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte