Un fichier HTML est simplement un fichier texte enregistré avec une extension .html ou .htm.
Démarrer
Dans ce tutoriel, vous apprendrez comment il est facile de créer un document HTML ou une page web. Pour commencer à coder du HTML, vous n’avez besoin que de deux choses : un éditeur de texte simple et un navigateur web.
Bien, commençons par créer votre première page HTML.
Créer votre premier document HTML
Parcourons les étapes suivantes. A la fin de ce tutoriel, vous aurez réalisé un fichier HTML qui affiche le message « Hello world » dans votre navigateur web.
Etape 1 : Création du fichier HTML
Ouvrez l’éditeur de texte brut de votre ordinateur et créez un nouveau fichier.
Conseil : Nous vous suggérons d’utiliser Notepad (sous Windows), TextEdit (sous Mac) ou un autre éditeur de texte simple pour ce faire ; n’utilisez pas Word ou WordPad ! Une fois que vous aurez compris les principes de base, vous pourrez passer à des outils plus avancés comme Adobe Dreamweaver.
Étape 2 : Tapez du code HTML
Démarrez avec une fenêtre vide et tapez le code suivant :
Exemple
Essayez ce code »
<!DOCTYPE html><html lang="en"><head> <title>A simple HTML document</title></head><body> <p>Hello World!<p></body></html>Étape 3 : Enregistrement du fichier
Enregistrez maintenant le fichier sur votre bureau sous le nom de » myfirstpage.html « .
Note : Il est important que l’extension .html soit spécifiée – certains éditeurs de texte, tels que Notepad, l’enregistreront automatiquement sous .txt sinon.
Pour ouvrir le fichier dans un navigateur. Naviguez jusqu’à votre fichier puis double-cliquez dessus. Il s’ouvrira dans votre navigateur Web par défaut. Si ce n’est pas le cas, ouvrez votre navigateur et faites-y glisser le fichier.
Explication du code
Vous vous demandez peut-être à quoi servait ce code. Eh bien, découvrons-le.
- La première ligne
<!DOCTYPE html>est la déclaration de type de document. Elle indique au navigateur web que ce document est un document HTML5. Elle est insensible à la casse. - L’élément
<head>est un conteneur pour les balises qui fournissent des informations sur le document, par exemple, la balise<title>définit le titre du document. - L’élément
<body>contient le contenu réel du document (paragraphes, liens, images, tableaux, etc.) qui est rendu dans le navigateur Web et affiché à l’utilisateur.
Vous apprendrez les différents éléments HTML en détail dans les prochains chapitres. Pour l’instant, concentrez-vous sur la structure de base du document HTML.
Note : Une déclaration DOCTYPE apparaît en haut d’une page Web avant tous les autres éléments ; cependant, la déclaration doctype elle-même n’est pas une balise HTML. Chaque document HTML nécessite une déclaration de type de document pour garantir l’affichage correct de vos pages.
Conseil : Les balises <html><head> et <body> constituent le squelette de base de chaque page Web. Le contenu à l’intérieur des balises <head> et </head> est invisible pour les utilisateurs, à une exception près : le texte entre les balises <title> et </title> qui apparaît comme le titre sur un onglet du navigateur.
Balises et éléments HTML
Le HTML est écrit sous la forme d’éléments HTML constitués de balises de balisage. Ces balises de balisage constituent la caractéristique fondamentale du HTML. Chaque balise de balisage est composée d’un mot clé, entouré de crochets, comme <html><head><body><title><p>, et ainsi de suite.
Les balises HTML se présentent normalement par paires, comme <html> et </html>. La première balise d’une paire est souvent appelée balise d’ouverture (ou balise de début), et la deuxième balise est appelée balise de fermeture (ou balise de fin).
Une balise d’ouverture et une balise de fermeture sont identiques, à l’exception d’une barre oblique (/) après l’équerre d’ouverture de la balise de fermeture, pour indiquer au navigateur que la commande a été complétée.
Entre les balises de début et de fin, vous pouvez placer un contenu approprié. Par exemple, un paragraphe, qui est représenté par l’élément p, serait écrit comme:
Exemple
Essayez ce code »
<p>This is a paragraph.</p><!-- Paragraph with nested element --><p> This is <b>another</b> paragraph.</p>Vous apprendrez à connaître les différents éléments HTML dans le chapitre suivant.
.