![]()
à qui on ajoute des attributs Toute page web écrite en HTML contient un en-tête (
Écrivez simplement quelques lignes dans un éditeur de texte (par exemple, BBedit). La ou les phrases que vous écrirez doivent contenir des accents. Enregistrez le fichier dans un nouveau dossier sur votre disque réseau en changeant son extension de .txt à .HTML. Vous irez ensuite chercher ce fichier depuis le finder. Cliquez sur le fichier pour l'ouvrir.
Que constatez-vous ?
Ouvrez maintenant une page web de votre choix (n'importe laquelle, provenant du net), faites un clique droit avec la souris (ou appuyez simultanément sur la touche ctrl et la souris), puis sélectionnez "code source de la page" dans le menu déroulant qui s'affiche. Enregistrez ce code source comme fichier .HTML dans votre dossier (à nouveau accessible par clique droit de la souris). Depuis le finder, ouvrez le fichier. Que s'est-il passé ?
En général, elle sera toute moche car vous ne téléchargez que le fichier .HTML qui ne contient que le contenu et pas sa mise en page. Celle-ci est gérée par une feuille de style enregistrés dans un fichier .css
L'apparence va dépendre du type de le page que vous avez téléchargée. S’il s’agit d’une page web statique (ex: wikipedia), le contenu sera quasi identique après l’avoir téléchargé localement. En revanche, si le site est dynamique (ex: youtube), le contenu risque d’être très différent car le serveur n’est plus là pour personaliser le contenu de la page en temps réel pour vous.
Concernant l’url (adresse de la page), vous pouvez voir qu’il ne pointe plus vers le serveur du site, mais bien vers le fichier .HTML local de votre ordinateur.
Le langage .HTML utilise ce qu’on appelle des balises. On les écrit entre chevrons < et >
Sur mac, vous utilisez :
- la touche < pour faire le chevron ouvrant (<)
- et la touche shift + < pour le chevron fermant (>) .
Les balises indiquent la nature du texte qu’elles encadrent. Elles permettent au navigateur de comprendre ce qu’il faut afficher à l’écran.
Voici quelques exemples:
Titre de la page (ce qui s’affiche dans l’onglet): < title>...< /title>
Insérer une image : < img ... >
Insérer du texte dans un paragraphe : < p > ... < /p >
Vous l’aurez remarqué, certaines balises sont doublées et prennent un / dans leur syntaxe.
On distingue 2 types de balises:
En plus de l'en-tête et du corps, tout fichier .HTML doit contenir la structure de base suivante:
Voyons à quoi servent toutes ces balises.
Sur la première ligne, !DOCTYPE html, est une balise orpheline indispensable : elle indique qu’il s’agit d’une page HTML.
Sur la deuxième ligne, la balise en paire html englobe tout le contenu de la page web. A l’intérieur, il y a les balises en paire head et body.
La balise en paire head contient deux balises orphelines qui donnent des informations au navigateur : l’encodage et le titre de la page.
La balise orpheline meta indique l’encodage utilisé dans le fichier .html : cela détermine comment les caractères spéciaux s’affichent (accents, idéogrammes chinois et japonais, etc.).
La balise en paire title indique au navigateur le titre de la page web. Toute page doit avoir un titre qui décrit ce qu’elle contient, il s’affichera dans l’onglet du navigateur, et apparaîtra dans les résultats de recherche, comme sur Google. Autant vous dire que bien choisir son titre est important !
La balise en paire body contient tout ce qui sera affiché à l’écran sur la page web (c’est ici que vous passerez 99% de votre temps).
On verra qu'il existe encore une balise orpheline link (non représentée ici) qui contient le chemin vers le fichier css vers lequel pointe ma page et la renseigne sur les styles à utiliser.
Ajoutez les en-têtes nécéssaires à votre fichier .HTML de telle sorte à ce qu'un titre s'affiche dans l'onglet du navigateur.
Pour insérer une image, on utilise une balise à qui on ajoute des attributs
Les attributs sont un peu les options des balises. Ils viennent les compléter pour donner des informations supplémentaires. On trouve une liste des attributs ici
Un attribut est situé dans la balise ouvrante d’une balise en paire, ou directement dans une balise orpheline, comme c’est le cas ci dessous avec la balise L’attribut Ajoutez deux images à votre page. L'une devra être sauvée sur votre disque et l'autre sera référencée sur le web. Tout code informatique se doit d’être suffisamment commenté pour faciliter sa compréhension par un autre humain. Un commentaire en HTML est donc un texte qui sert simplement de mémo. Il n’est pas affiché, il n’est pas lu par l’ordinateur, cela ne change rien à l’affichage de la page. Si vous mettez en ligne un site web avec des commentaires dans le code, pensez-vous que les visiteurs de votre site pourront les lire ? Oui ! Rappelez-vous, le fichier Pour faire des tests rapides, vous pouvez vous rendre sur w3schools qui permet de rapidement voir ce que donne votre code HTML. Ecrivez la page web principale du site 
src correspond à la source de l’image. Dans l’exemple ci-dessus, l’image se trouve dans le même dossier que le fichier .HTML donc il suffit de donner le nom de l’image. On peut aussi ajouter une attribut alt="Cette image décrit ceci cela" and lequel on précisera un texte qui s'affichera si l'image ne peut pas s'afficher
Il est également possible de fournir une URL en ligne. Pour cela, faites un clic droit puis cliquez sur “Copier l’adresse de l’image”. Deux options s'offrent à vous. Vous pouvez soit télécharger l'image sur votre disque et la référencer soit référencer directement l'image en ligne.
Les commentaires
Attention confidentialité
Même vous, vous pouvez oublier ce que fait votre code avec le temps… Les commentaires sont là pour vous aider !
Souvenez-vous, en python, nous ajoutons un commentaire grâce au symbole #.
En HTML, la syntaxe est la suivante:< !-- Ceci est un commentaire -->
À retenir
Réponse
.html est envoyé au visiteur et il a donc tout le loisir de le lire, y compris vos commentaires.
Faites donc attention à ne jamais mettre d’informations sensibles tel qu’un mot de passe dans les commentaires de votre page !Tester facilement son code
un_sujet_qui_vous_interesse.ch. dans un fichier nommé votre_prenom.html.
Vous êtes libre sur le contenu mais la page doit contenir les éléments suivants :
La structure de base d'une page web, ainsi que deux images, du texte et des paragraphes.
Les images doivent avoir une taille "convenable, ni trop grande ni trop petite, cherchez comment modifier leur taille!
Dans le texte, il devra une y avoir du texte en italique.
Pour trouver comment faire, allez chercher sur le web et mettez en commentaire le site où vous avez trouvé l'information.