Pour un premier test dans l'éditeur de votre choix, créez un nouveau fichier. Si vous utilisez l'éditeur de Windows, ouvrez-le via Démarrer>Tous les programmes>Accessoires>Éditeur.
Ensuite, sélectionnez Fichier>Enregistrer sous. Le champ important est Type de fichier.
Il est crucial de définir Tous les fichiers. Ensuite, saisissez index.htm dans le champ Nom du fichier. Vous pourrez ensuite enregistrer le fichier à l'emplacement souhaité. Ce fichier sera celui avec lequel vous travaillerez, votre premier fichier HTML, bien qu'il soit actuellement vide. Cela va bientôt changer.
Si vous utilisez Dreamweaver, il est préférable de spécifier dès le démarrage du programme que vous souhaitez créer un fichier HTML.
La structure HTML de base
Avant de commencer avec la structure HTML de base, un point important concernant la sémantique utilisée dans cette série - et également dans le monde HTML. Vous rencontrerez régulièrement les termes Balise et Élément, qui sont malheureusement souvent mal interprétés. Voici un exemple :
<a href="news.htm">Voir les actualités</a>
Cette syntaxe montre un élément a, à savoir <a href="news.htm">Voir les actualités</a>. Cet élément se compose d'une balise a ouvrante, c'est-à-dire <a> ou complètement <a href="news.htm">, le contenu de l'élément Voir les actualités et la balise a de fermeture </a>. De plus, l'élément a possède l'attribut href avec la valeur d'attribut news.htm.
L'exemple précédent montre une définition de lien hypertexte en HTML via l'élément a. Cet élément a est désigné par les balises ouvrante <a> et fermante </a>. Vous voyez donc qu'il n'est pas si difficile d'utiliser correctement les termes Élément et Balise.
Maintenant, passons aux choses sérieuses. Ouvrez le fichier HTML précédemment enregistré dans votre éditeur. Chaque document HTML possède une structure de base spécifique.
Voici d'abord ladite structure dans toute sa splendeur :
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> </head> <body> </body> </html>
Maintenant, que signifient les différentes entrées ? Commençons par la déclaration du type de document.
<!DOCTYPE html>
Avec une telle déclaration du type de document, vous indiquez au navigateur dans lequel votre site web sera affiché ultérieurement, quel standard HTML vous utilisez. Dans le cas présent, il s'agit de HTML5. Si vous utilisiez HTML 4.01, la spécification DOCTYPE ressemblerait à ceci :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
La déclaration au sujet du type de document induit souvent de la confusion chez les débutants en HTML, car il existe en effet de nombreuses variantes. Cependant, c'est en réalité assez simple : considérez une déclaration du type de document comme un plan de construction, décrivant les éléments pouvant être présents dans un document.
Je vous recommande généralement de préciser que vous utilisez HTML5.
<!DOCTYPE html>
Les navigateurs modernes la reconnaissent et affichent les pages dans lesquelles elle est utilisée en mode standard. Cependant, vous devriez également vraiment définir uniquement des éléments HTML autorisés en HTML5. Mais nous y reviendrons plus tard.
Passons maintenant à l'élément html.
<html lang="de"> … </html>
Cet élément englobe le document. Ce qui est remarquable, c'est l'attribut lang. Il indique la langue utilisée dans le document. Voici quelques abréviations lang pour l'espace germanophone.
• de - allemand (standard)
• de-ch - allemand (Suisse)
• de-at - allemand (Autriche)
• de-lu - allemand (Luxembourg)
• de-li - allemand (Liechtenstein)
• de - allemand (îles des Caraïbes)
Que vous utilisiez les abréviations à deux lettres de, ch, etc. ou que vous préfériez utiliser les abréviations composées montrées précédemment, cela vous appartient. Pour ma part, je préfère les abréviations à deux lettres.
À l'intérieur de l'élément head, les données d'en-tête du document sont attendues.
<head> … </head>
Les données d'en-tête peuvent sembler quelque peu techniques, mais elles sont rapidement expliquées. C'est ici que l'on inclut, entre autres, des éléments qui décrivent plus en détail le document. Ce sont par exemple le titre et l'ensemble de caractères utilisé. On peut également inclure des scripts et des feuilles de style, ainsi que définir des métadonnées générales. Nous approfondirons cela plus tard.
Ce qui est particulièrement important est l'élément title.
<title>Tutoriels pour retouche d'image avec Photoshop, design web et photographie - PSD-Tutorials.de </title>
Cela permet de définir le titre, qui est nécessaire à divers endroits.
• Dans la barre de titre du navigateur.
• Lorsqu'un signet est créé dans le navigateur.
• Et bien sûr, le titre joue un rôle essentiel en termes de référencement sur les moteurs de recherche.
Vous comprenez donc l'importance du titre. Choisissez un titre le plus court et concis possible.
Pour une description détaillée de la page, vous pouvez utiliser des métadonnées. Des informations détaillées à ce sujet suivront.
Ensuite, passons à l'ensemble de caractères utilisé.
<meta charset="UTF-8" />
Cette information est importante pour les navigateurs. C'est ainsi qu'ils savent comment les caractères doivent être codés pour s'afficher correctement. Ce n'est que grâce à la spécification du bon jeu de caractères que les caractères spéciaux et les caractères accentués sont affichés correctement. Normalement, on indique ici UTF-8.
Passons ensuite au contenu réel du site Web, c'est-à-dire ce que les visiteurs voient réellement. Tout cela est défini dans l'élément body.
<body> … </body>
Pour des raisons de démonstration, ajoutez simplement ce qui suit entre les balises ouvrantes et fermantes de <body>:
<h1>PSD-Tutorials.de</h1>
Le document devrait ressembler ensuite à ceci:
<!DOCTYPE html>
<html lang="de">
<head>
<title>Exemple de structure HTML5 - www.html-seminar.de</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>PSD-Tutorials.de</h1>
</body>
</html>Enregistrez les modifications et ouvrez le fichier dans un navigateur.
Comme vous pouvez le voir, PSD-Tutorials.de s'affiche maintenant réellement. Vous avez donc créé votre premier document HTML personnel.
