Code HTML
La section du code HTML fera état de vos erreurs concernant les éléments fondamentaux du langage. Il sera surtout question de l'écriture et de l'utilisation des balises et des attributs. C'est en partie ici que vous avez le plus de difficulté et qu'on retrouve en grande partie la majorité des erreurs.
La création de balises
[ Appliquez une rigueur dans l'écriture du code ]
Le langage HTML est un langage particulier à comprendre. Cependant, vous devez l'utiliser avec rigueur afin de faire afficher vos éléments dans le fureteur. Bien que vous semblez avoir de la créativité et de l'originalité dans l'écriture de vos balises, malheureusement le fureteur n'est pas en mesure de vous appuyer dans vos démarches.
Nous avons ici un étudiant qui mélange deux balises : le <div> et la balise <img>. Vous devez respecter la façon d'écrire chacune des balises. En ne procédant pas de la sorte, vous vous exposez à plusieurs problèmes de mise en page.
Il n'y a pas 300 façons d'apprendre le language et cela passe par la répétition et par la pratique. Idéalement, vous devez savoir les éléments fondamentaux par coeur.
[ Écrire avec exactitude le nom des balises ]
Dès que vous voyez dans une consigne par exemple div.copyright ou div.interface vous ne devez pas interpréter le tout comme étant une façon d'écrire littéralement la balise de la sorte. Il s'agit d'un standard en web d'écrire de la sorte une balise ayant une classe. La première partie signifie le nom de la balise. Dans le cas ici, il s'agit de la balise <div>. Ensuite, la deuxième partie concerne le nom de la classe CSS qu'on souhaite lier à cet élément. Donc, on devrait plutôt interpréter le tout de la manière suivante : <div class="copyright"></div> et non se créer une nouvelle balise comme dans l'exemple ci-dessous (qui n'existe pas dans le langage HTML).
[ Ne pas mélanger le code HTML et CSS ]
L'exemple ici mélange des façons de faire en CSS avec du HTML. C'est important de séparer les deux syntaxes. Le HTML utilise les symboles suivants < > tandis que le CSS utilise ceux-ci { }. En observant plus en détail l'image du correctif, le premier regroupement est celui du <div>. À l'intérieur de celui-ci, on retrouve la balise <img>.
[ Ne pas utiliser la synthaxe du CSS pour l'affichage d'éléments dans la page ]
Nous observons ici une autre variante des exemples précédents. Une fois de plus, vous ne devez pas mélanger les deux syntaxes. Le CSS sert au positionnement des éléments en place dans le code HTML ou de modifier l'apparence de ces éléments. La solution afin de corriger cette mauvaise syntaxe passe par la création d'un <div> afin d'englober le contenu à l'intérieur.
[ La balise <style> est exclusive au code CSS ]
L'exemple suivant a été repéré directement dans le code HTML. Ce n'est pas une pratique à adopter pour le développement web. De plus, il est difficile d'écrire ET d'affecter du CSS de la sorte. Il faut séparer le CSS soit dans la balise <style> (qui sera présente à l'intérieur de la balise <head>) et il faut se créer une balise qui pourra englober le texte (dans l'exemple ci-dessous il s'agissait d'un <section>).
On retrouve le code HTML à l'intérieur de la balise <body> ou du <head>. En ce qui concerne le code CSS, nous le retrouvons principalement dans un fichier .css externe ou à l'intérieur de la balise <style> qui se retrouve à l'intérieur de la balise <head>. À quelques exceptions, vous aurez recourt au CSS sur un élément HTML en y ajoutant l'attribut style par exemple :
<img src="" alt="" style="width:100px">
La fermeture d'une balise
[ Bien fermer une balise sans contenu ]
En ce qui concerne les balises sans contenu, par exemple la balise <img>, il ne faut pas confondre le symbole suivant ( \ ) avec celui-ci ( / ). Vous devez utiliser ce symbole ( / ) afin que le fureteur puisse comprendre que votre intension est de fermer la balise.
[ Bien fermer une balise avec contenu ]
La balise <header> n'est pas fermée de façon adéquate. En utilisant un autre nom de balise, le fureteur est en mauvaise posture afin de bien interpréter vos intensions. Est-ce un header que vous vouliez ou une section? Très bonne question que vous seule pouvez y répondre. C'est important que la balise ouvrante : <header> puisse être en accord avec sa balise fermante : </header>.
L'attribut id
[ Appliquez le standard de mettre les " " aux attributs d'une balise HTML ]
Bien que le HTML 5 accepte qu'une valeur d'un attribut ne soit pas en à l'intérieur des " ", nous continuerons à appliquer ce standard malgré tout. La raison est très simple, c'est plus facile de procéder de la sorte que de gérer les exceptions.
[ La valeur d'un attribut va à l'intérieur de celui-ci ]
C'est important que la valeur du id soit emmagasinée à l'intérieur de l'attribut. De plus, il ne faut pas ajouter le symbole suivant ( # ). La bonne façon de procéder est de déclarer un attribut id et d'y ajouter la valeur entre les ".
ASTUCES
Un id ne réagit pas plus différemment qu'une classe CSS en HTML. La seule chose qui distinct ces deux éléments c'est le symbole qui permet de les identifier. En ce qui concerne le id, le symbole est le suivant ( # ). Pour une classe CSS, on utilise celui-ci ( . ). Quand vous utilisez une classe à une balise <div>, est-ce que vous ajouter le point avant? Non, c'est exactement le même principe pour un id.
Le symbole pour les différencier est utilisé en CSS afin de s'adresser soit à une classe ou au id d'un élément.
La balise <img>
[ Une balise vient souvent avec des attributs obligatoires ]
Une balise <img> possède un seul attribut obligatoire et il s'agit du alt. Cet attribut permet de définir la valeur qui sera affichée dans le fureteur en cas de problème avec l'image. À la place de rien afficher à cet endroit... alors nous aurons une rétroaction du fureteur qui nous indique que quelque chose cloche avec le média. Dans notre cas ici, si jamais il y avait un problème d'affichage parce que nous avons déplacé le fichier à l'intérieur de la structure de dossiers, le fureteur va afficher le mot suivant : Logo.
ASTUCES
Bien que cet attribut ne soit pas obligatoire, si la valeur de la taille n'est pas encapsulée à l'intérieur du SVG, il est nécessaire alors de définir la taille à l'élément en tant que tel. En procédant par le code HTML, vous avez besoin d'un attribut width=" ", si vous passez par le code CSS vous avez besoin de la propriété width: ;. Le nom est identique, mais vous devez savoir comment l'utiliser dans les deux cas.
La nomenclature des éléments
[ Évitez les erreurs d'inattention lorsque vous recopiez les mots dans le code ]
Dans le jargon, on utilise l'expression qu'il s'agit d'une erreur de "TYPO". Il s'agit d'une erreur d'inattention lors de recopiage du mot dans le code. En d'autres mots, le nom de la classe n'est pas bien écrit. Le fureteur cherche dans le CSS une classe qui s'appelle inteface. Cette classe n'existe pas, car la bonne classe s'appelle interface. C'est important de s'assurer que tous les mots que l'on recopie soient écrits sans coquille.
Si vous avez un problème de positionnement, ou que des éléments ne s'affichent pas à l'écran... avant de paniquer et de mettre du code qui n'est pas nécessaire, assurez-vous que le nom de vos éléments soit exact. Cette opération peut sembler anodine, mais va vous empêchez de tourner en rond ou de prendre les mauvaises décisions.
L'unité de mesure
[ Bien indiquer l'unité de mesure que vous souhaitez utiliser ]
En HTML, il y a plusieurs unités de mesure (px, %, rem, em, vw, vh, etc.). C'est essentiel de bien identifier avec laquelle de ces unités vous voulez affecter l'élément en question. Si vous omettez de mettre la référence, alors le fureteur va interpréter le tout en px.
L'attribut class
[ Évitez de mettre du CSS dans l'attribut class ]
Il est important de ne pas insérer du CSS à l'intérieur de l'attribut class. Si vous voulez procéder à l'aide du code CSS, vous devez vous créer un attribut style où vous utiliserez la propriété width: ; ou si vous souhaitez utiliser le code HTML, vous devez opter pour l'attribut width=" ".
ASTUCES
L'attribut style est le seul qui peut recevoir du CSS en tant que valeur.
[ Évitez de mettre le nom d'une classe dans l'attribut href ]
Ilne faut pas confondre l'attribut class et l'attribut href . L'attribut href sert à indiquer adresse adresse de destination. Afin de corriger cette erreur, il suffit d'ajouter le bon lien (selon toujours l'emplacement des éléments dans le dossier) et d'ajouter à la balise un attribut supplémentaire (class) afin d'y ajouter la classe CSS menu.
[ Évitez de mettre du contenu dans l'attribut class ]
Il est difficile pour le fureteur de faire afficher du contenu que vous avez inséré à l'intérieur de l'attribut class de votre balise. C'est important que le contenu à afficher soit entre les balises ouvrantes (dans notre cas <div>), et les balises fermantes </div>.
L'attribut class permet de faire le pont entre un élément HTML, en ce qui nous concerne ici un <div>, et le CSS.
Les balises obsolètes
[ Évitez à tout prix les balises obsolètes ]
Comme nous l'avons vu dans les notes de cours, il y a plusieurs balises et attributs qui sont maintenant identifiés comme étant obsolètes par le W3C. En d'autres mots, il ne faut plus les utiliser, car elles ne sont plus supportées par les fureteurs. C'est le cas ici avec la balise <center>. Si vous voulez aligner du texte au centre, vous devez utiliser du CSS et la propriété text-align:center.
C'est important de se référer aux bonnes pratiques afin de vous conformer aux standards. Si vous avez appris ce genre de balises à vos cours de web au secondaire, nous vous demandons de mettre de côté ces notions afin d'être aligné avec ce qui se fait dans l'industrie.
