Voici quelques astuces HTML pour les débutants. Si vous commencez tout juste à créer vos pages Web, ces techniques vous seront très utiles!
1. Fermez toujours vos balises HTML
Lorsque vous tapez une balise HTML d’ouverture (par exemple, <b>, <p>), placez toujours la balise de fermeture correspondante à la fin. Par exemple:
- <b> Mes animaux préférés sont les chevaux et les éléphants. </b>
- <p> Mes animaux préférés sont les chevaux et les éléphants. </p>
- <h2> Mes animaux préférés sont les chevaux et les éléphants. </h2>
Cela garantira le bon fonctionnement de vos pages HTML sur tous les navigateurs et vous aidera à éviter tout problème étrange dans vos pages! Ceci est particulièrement important avec des balises telles que <div>, <span>, <table>, <tr> et <td>.
Certaines balises n’ont pas de balise de fermeture correspondante. Les exemples comprennent:
- La balise <br>, pour créer des sauts de ligne
- La balise <img> pour insérer des images
2. Utilisez des feuilles de style chaque fois que possible
Les feuilles de style faciliteront votre vie de codage HTML. Ils sont meilleurs que le code CSS soit intégré dans votre code HTML. Vous obtenez également un contrôle beaucoup plus précis sur l’apparence de vos pages et vous pouvez modifier leur apparence en modifiant simplement un fichier de feuille de style.
Si vous n’avez pas encore travaillé avec des feuilles de style, consultez nos tutoriels CSS pour commencer!
3. Utiliser un validateur HTML
C’est une excellente idée de faire passer vos pages Web à travers un validateur HTML avant de les publier sur votre site Web. Ces programmes détecteront les problèmes potentiels tels que les balises de fermeture manquantes et l’utilisation de balises qui ne fonctionneront pas correctement sur tous les navigateurs. N’oubliez pas, le fait que votre page ait une belle apparence dans le navigateur avec lequel vous la visualisez ne signifie pas qu’elle fonctionnera sur d’autres navigateurs!
Les validateurs HTML sont également un bon moyen de savoir comment utiliser correctement les balises HTML – vous pouvez apprendre de vos erreurs!
Certains validateurs gratuits sur le Web incluent le service de validation du balisage W3C et le validateur HTML WDG. De nombreux packages de création Web modernes ont également des vérificateurs HTML intégrés.
4. Utilisez judicieusement les commentaires HTML
Pour rendre votre code HTML plus clair pour vous (et pour les autres), vous pouvez ajouter des commentaires à votre code. Ce sont des fragments de code ignorés par les navigateurs Web. Ils sont donc utiles pour ajouter de brèves notes et des rappels dans le code:
<!- Zone de navigation: mettez en surbrillance un élément de menu avec la classe "hi" -> <div id = "nav"> <ul> <li> <a href="/">Accueil</a> </li> <li class = "hi"><a href="/about/">À propos</a></li> </ul> </div>
5. Incorporer des images en HTML
Le pointage correct des images à l’aide de la balise <img> est un obstacle courant pour les débutants. Souvent, votre page Web aura un bon allure sur votre ordinateur de bureau, mais lorsque vous téléchargez la page sur votre site, toutes les images sont perdus!
Le problème n’a pas été résolu par certains éditeurs de pages Web, qui placent de manière incorrecte les URL d’image «fichier: //» au lieu d’utiliser des URL relatives!
Suivez ces règles simples pour vous assurer que vos images HTML apparaissent correctement à chaque fois.
A) Si possible, utilisez des URL relatives
Les URL relatives sont généralement les meilleures à utiliser car elles fonctionnent où que se trouvent la page et les images, à condition qu’elles se trouvent toujours au même endroit les unes par rapport aux autres. Par exemple, si l’image se trouve dans le même dossier que la page Web, utilisez:
<img src="myphoto.jpg">
Si l’image se trouve dans un dossier d’images au même niveau que la page Web, utilisez:
<img src="images/myphoto.jpg">
Si l’image se trouve dans un dossier d’images à un niveau supérieur à la page Web, utilisez:
<img src="../images/myphoto.jpg">
B) Vous pouvez également utiliser des URL relatives à la racine du document.
Si vous avez toutes vos images dans un dossier images au plus haut niveau de votre site (la racine du document ou la racine Web), vous pouvez référencer des images comme ceci:
<img src="/images/myphoto.jpg">
Cela présente l’avantage que vous pouvez déplacer votre page Web n’importe où sur votre site et que les images s’afficheront quand même, à condition que vous conserviez les images dans ce dossier d’images global.
L’inconvénient de cette approche est qu’elle ne fonctionnera que si vos pages Web sont affichées via un serveur Web (à l’aide de http: //), et non directement à partir de votre disque dur (à l’aide de fichier: //).
6. Utiliser width et height avec des images HTML
Il est judicieux de spécifier la largeur et la hauteur d’une image lors de l’utilisation d’une balise <img>. Par exemple:
<img src="myphoto.jpg" width="234" height="123">
L’avantage de ce procédé est que le navigateur Web peut formater la page plus rapidement au fur et à mesure de son chargement, car il sait comment disposer les images avant leur téléchargement. Cela signifie que vos visiteurs peuvent commencer à surfer sur votre page sans avoir à attendre que toutes les images s’affichent!
7. Utiliser des tableaux pour les données tabulaires, CSS pour la mise en page
Les tableaux ont traditionnellement été utilisés pour mettre en forme le contenu de la page; Cependant, cela n’a jamais été leur utilisation prévue. Ils sont vraiment destinés à être utilisés pour l’affichage de données tabulaires (telles que les données d’un tableur, par exemple).
Avec les fonctionnalités de CSS, vous pouvez créer des pages HTML ne contenant que le contenu de la page et utiliser une feuille de style distincte pour le présenter. Le positionnement CSS vaut bien l’apprentissage, car vos sites résultants seront plus rapidement chargés, plus faciles à gérer et plus accessibles.
Le positionnement CSS peut également faire beaucoup de trucs cool qui sont très difficiles avec les tableaux, et vous pouvez aussi changer le look de votre site en changeant simplement votre feuille de style .
