Tutoriel HTML

ACCUEIL HTML Introduction HTML Éditeurs HTML HTML de base Éléments HTML Attributs HTML En-têtes HTML Paragraphes HTML Styles HTML Formatage HTML Citations HTML Commentaires HTML Couleurs HTML HTMLCSS Liens HTML Images HTML Icône de favori HTML Tableaux HTML Listes HTML Bloc HTML et Inline Cours HTML Identifiant HTML Iframes HTML HTMLJavaScript Chemins d'accès aux fichiers HTML Tête HTML Mise en page HTML HTML réactif Code informatique HTML Sémantique HTML Guide de style HTML Entités HTML Symboles HTML Émojis HTML Jeu de caractères HTML Encodage d'URL HTML HTML contre XHTML

Formulaires HTML

Formulaires HTML Attributs de formulaire HTML Éléments de formulaire HTML Types d'entrée HTML Attributs d'entrée HTML Attributs du formulaire de saisie HTML

Graphiques HTML

Canevas HTML HTML SVG

Médias HTML

Médias HTML Vidéo HTML Audio HTML Modules externes HTML YouTube HTML

API HTML

Géolocalisation HTML Glisser/déposer HTML Stockage Web HTML Travailleurs Web HTML HTML SSE

Exemples HTML

Exemples HTML Questionnaire HTML Exercices HTML Certificat HTML Résumé HTML Accessibilité HTML

Références HTML

Liste de balises HTML Attributs HTML Attributs globaux HTML Prise en charge du navigateur HTML Événements HTML Couleurs HTML Canevas HTML HTML Audio/Vidéo Doctypes HTML Jeux de caractères HTML Encodage d'URL HTML Codes de langue HTML Messagerie HTTP Méthodes HTTP Convertisseur PX en EM Raccourcis clavier

Éditeurs HTML


Un simple éditeur de texte est tout ce dont vous avez besoin pour apprendre le HTML.


Apprendre le HTML à l'aide du Bloc-notes ou de TextEdit

Les pages Web peuvent être créées et modifiées à l'aide d'éditeurs HTML professionnels.

Cependant, pour apprendre le HTML, nous recommandons un simple éditeur de texte comme Notepad (PC) ou TextEdit (Mac).

Nous pensons que l'utilisation d'un simple éditeur de texte est un bon moyen d'apprendre le HTML.

Suivez les étapes ci-dessous pour créer votre première page Web avec le Bloc-notes ou TextEdit.


Étape 1 : Ouvrir le Bloc-notes (PC)

Windows 8 ou version ultérieure :

Ouvrez l' écran de démarrage (le symbole de la fenêtre en bas à gauche de votre écran). Tapez Bloc -notes .

Windows 7 ou antérieur :

Ouvrez Démarrer > Programmes > Accessoires > Bloc -notes


Étape 1 : Ouvrez TextEdit (Mac)

Ouvrez Finder > Applications > TextEdit

Modifiez également certaines préférences pour que l'application enregistre correctement les fichiers. Dans Préférences> Format> choisissez "Texte brut"

Ensuite, sous "Ouvrir et enregistrer", cochez la case "Afficher les fichiers HTML sous forme de code HTML au lieu de texte formaté".

Ouvrez ensuite un nouveau document pour placer le code.


Étape 2 : Écrivez du code HTML

Écrivez ou copiez le code HTML suivant dans le Bloc-notes :

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Bloc-notes



Étape 3 : Enregistrer la page HTML

Enregistrez le fichier sur votre ordinateur. Sélectionnez Fichier > Enregistrer sous dans le menu Bloc-notes.

Nommez le fichier "index.htm" et définissez l'encodage sur UTF-8 (qui est l'encodage préféré pour les fichiers HTML).

Afficher dans le navigateur

Astuce : Vous pouvez utiliser .htm ou .html comme extension de fichier. Il n'y a pas de différence, c'est à vous de décider.


Étape 4 : Afficher la page HTML dans votre navigateur

Ouvrez le fichier HTML enregistré dans votre navigateur préféré (double-cliquez sur le fichier ou faites un clic droit - et choisissez "Ouvrir avec").

Le résultat ressemblera beaucoup à ceci :

Afficher dans le navigateur


Éditeur en ligne W3Schools - "Essayez-le vous-même"

Avec notre éditeur en ligne gratuit, vous pouvez modifier le code HTML et visualiser le résultat dans votre navigateur.

C'est l'outil parfait lorsque vous souhaitez tester rapidement du code. Il dispose également d'un code couleur et de la possibilité d'enregistrer et de partager du code avec d'autres :

Exemple

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Cliquez sur le bouton "Essayez-le vous-même" pour voir comment cela fonctionne.


Espaces W3Schools

Si vous souhaitez créer votre propre site Web et enregistrer votre code en ligne, essayez notre créateur de site Web gratuit , appelé W3schools Spaces :