- · Niveau : DÉBUTANT
- · Compatibilité : Tous les navigateurs
Créé à l’aide d’un logiciel ou avec Notepad, un document HTML est un simple fichier texte. Ce fichier doit avoir l’extension .html ou .htm. Je vous conseille .htm pour plusieurs raisons qui serait longue à énumérer ici.
Votre page d’accueil doit être index.htm ou default.htm. Ces deux pages sont ouvertes automatiquement par le navigateur. En fait c’est le serveur qui redirige le navigateur directement sur une de ses deux pages. Parfois sur un serveur c’est index.htm qui est la première retournée, parfois c’est default, mais c’est toujours une des deux. Alors encore une fois je vous conseil index.htm.
Note : Pour faire un site standard et surtout portable sur différent serveur (Unix, Linux ou NT), je vous conseil de respecter la norme DOS, c’est à dire 8 caractères pour le nom du fichier et 3 caractères pour l’extension. Et de TOUJOURS utiliser des minuscules. Sinon vous risquez d’avoir de sérieux problèmes si vous transférez votre site sur un serveur Unix par exemple. N’utilisez jamais d’espace comme Windows le permet et le seul caractère, autre que les lettres de l’alphabet et les chiffres, que vous pouvez utiliser est le souligné : « _ ».
Exemple : mapage.htm ou ma_page.htm
Les Balises
Le HTML est un langage de balise, c’est donc dire que le code est toujours identifié par des balises. Les balises sont les mots ou mnémoniques réservés du HTML. Les balises sont toujours encadrées par les symboles « < » et « > ».
Exemple : <HTML>
Et, pour indiquer que la commande est terminée, chaque balise doit être fermée à l’aide du symbole « / ».
Exemple : </HTML>
La première balise à connaître en HTML est d’ailleurs celle qui indique au navigateur que votre document est bien un document HTML. <HTML>. Tout document HTML doit donc commencer par cette balise et ce terminer par la fermeture de la balise <HTML> soit </HTML>
Exemple :
<HTML>
Votre document HTML
</HTML>
Le Document
Un document HTML est divisé en 2 parties distinctes. Le HEAD ou la tête et le BODY ou le corps. La tête contient les informations générales du document qui ne sont pas affichées par le navigateur à l’exception du titre du document. La tête peut aussi contenir des script Javascript ou autre « Embed script ». La tête du document est indiquée par la balise <HEAD>. Le corps, c’est l’endroit visible document HTML. C’est dans cette portion du document que vous allez ajouter les informations affichées par le navigateur. Le corps du document est indiqué par la balise <BODY>.
Exemple :
<HTML>
<HEAD>
</HEAD>
<BODY>
Ma première page Web.
</BODY>
</HTML>
Voilà votre premier document HTML. Transcrivez cet exemple dans un fichier texte et sauvegardez-le sous le nom « index.htm ». Puis ouvrez cette page dans votre navigateur.
Avant d’aller plus loin, ajoutons une balise dans la tête du document. La balise <TITLE>. Elle n’apparaîtra pas dans le navigateur mais elle sera affichée dans la barre du haut de votre navigateur. Cette balise est souvent oubliée par les débutants. Elle permet de donner un titre à votre page, à la fenêtre du navigateur, mais aussi à indexer votre site dans les moteurs de recherche.
Exemple :
<HTML>
<HEAD>
<TITLE>
Titre de ma première page HTML
</TITLE>
</HEAD>
<BODY>
Ma première page Web.
</BODY>
</HTML>
Vous pouvez maintenant voir les autres tutoriels pour donner du panache à vos documents. La seule chose à retenir est que les codes HTML seront tous ajoutés entre les balises <BODY> et </BODY>.
NOTE : Pour vous aider à lire un document HTML, écrivez toutes vos balises en majuscules, notez que cela ne changera en rien l’interprétation de la page mais vous aidera à lire le code tout simplement. De plus, sachez que seulement une espace entre deux mots est interprétée par le navigateur. Donc je vous conseil d’ajouter des espaces ou des tabulations pour que votre code soit plus lisible. Mais ce procédé n’est pas conseillé pour une page professionnelle car la page sera plus lourde et donc prendra plus de temps à être affiché par le navigateur. Alors une fois le HTML maîtrisé et contrairement aux langages compilé, n’ajoutez plus d’indentations (espace) pour rien.
![[Photo]](https://www.trucsweb.com/documents/images/2024/js-bs-formulaire-fetch.png)
Formulaire Bootstrap 5 Ajax avec validation.![[Photo]](https://www.trucsweb.com/documents/images/2023/elephants-Salvador_Dali_1948.jpg)
Sécuriser l’accès « bureau à distance » sous IIS![[Photo]](https://www.trucsweb.com/documents/images/2023/trou_noir_galaxie_M87.jpg)
L’AI au temps du Far-Web![[Photo]](https://www.trucsweb.com/documents/images/2023/gilles-villeneuve-montreal1978.jpg)
Sélecteurs JavaScript querySelector() et querySelectorAll()![[Photo]](http://www.trucsweb.com/documents/images/2023/evolution_de_lhomme.jpg)
CSS - Animations![[Photo]](http://www.trucsweb.com/documents/images/2023/univers-copernic.jpg)
Mode de couleurs (Color modes) Bootstrap 5![[Photo]](http://www.trucsweb.com/documents/images/2023/les_burgers_de_papa.jpg)
25 ans des Trucsweb - Bouton hamburger animé Bootstrap 5![[Photo]](http://www.trucsweb.com/documents/images/logos/l_whatwg.svg)
Living Standard pour HTML de Apple, Google, Mozilla, Microsoft ...et la W3C![[Photo]](http://www.trucsweb.com/documents/images/2022/tim-berners-lee-web-b.jpg)
Le nouveau HTML « Living Standard » et le XML![[Photo]](http://www.trucsweb.com/documents/images/2022/v_jacques_dutronc-les_cactus.jpg)
Sécuriser un formulaire de contact au Far-Web!![[Photo]](http://www.trucsweb.com/documents/images/2017/formation_serveur_web_ftp.png)
![[Photo]](http://www.trucsweb.com/documents/images/2017/formation_classe.png)
![[Photo]](http://www.trucsweb.com/documents/images/2017/formation_style.png)
![[Photo]](http://www.trucsweb.com/documents/images/2017/formation_balise.png)
![[Photo]](http://www.trucsweb.com/documents/images/2017/formation_structure.png)
![[Photo]](http://www.trucsweb.com/documents/images/2017/formation_fichiers.png)
![[Photo]](http://www.trucsweb.com/documents/images/2017/formation_outils.png)
![[Photo]](http://www.trucsweb.com/documents/images/2017/formation_ma_premiere_page_web.png)
![[Photo]](http://www.trucsweb.com/documents/images/2017/formation_introduction.png)
AbuseIPDB
Connexion