Bases du HTML

Structure de base d'une page

Ouvrir le Bloc-note sur Windows (ou TextEdit sur Mac) pour commencer à taper le code de la page Web. Voici la structure de base d'un document html :

<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titre de la page</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>
<body>

    <h1>Hello, World!</h1>
    <p>Ceci est une page web.</p>

</body>
</html>

Structure d'une page html

Vous pouvez enregistrer ce fichier une fois recopié. Il est préférable d'utiliser comme nom de fichier "index.html". Puis il est possible de l'ouvrir avec un navigateur Web de votre choix, comme Firefox.

Pour les utilisateurs de Mac, voici comment créer un fichier .html avec TextEdit :

  1. Ouvrez TextEdit (installé avec tous ordinateurs Apple, disponible dans Applications) pour créer un nouveau fichier.
  2. Cliquez sur l'onglet "Format".
  3. Choisissez "Convertir au format texte"
  4. Entrez le code HTML dans votre fichier texte.
  5. Pour l'enregistrer, cliquez sur l'onglet "Fichier" et choisissez "Enregistrer".
  6. Dans le champ "Enregistrer sous", entrez le nom de votre fichier suivi de l'extension .html.
  7. Cliquez sur le bouton "Enregistrer".
  8. Une fenêtre apparaît alors, qui vous demande soit d'"Utiliser .txt", soit d'"Annuler", soit d'"Utiliser .html". Cliquez sur "Utiliser .html".

Voilà, votre fichier .html a été créé. Il ne vous reste plus qu'à l'uploader sur votre serveur !

Davantages de balises !

N'hésitez pas à les essayer !

<strong>Texte en gras</strong>

<em>Texte en italique</em>

<span style="text-decoration: underline;">Texte souligné</span>

<abbr title="Hypertext Markup Language">HTML</abbr>

<!-- Un commentaire dans le code du site. Non affiché à l'écran. -->

<hr />

<br />

<q>Le succès est un voyage, pas une destination.</q>

N'hésitez pas à approfondir avec des recherches sur internet ! Voici par exemple un très bon site pour approffondir, ainsi qu'une liste d'autres propriétés Html pour enrichir votre page. N'hésitez pas à faire plein de tests!