Comment créer une page web simple avec html

ThiTeaches vous comment écrire une page Web simple avec HTML (langage de balisage hypertexte). HTML est l`un des éléments essentiels du World Wide Web, ce qui constitue la structure des pages Web. Une fois que vous avez créé votre page Web, vous pouvez l`enregistrer en tant que document HTML et la voir dans votre navigateur Web. La création d`une page HTML est possible en utilisant les éditeurs de texte de base trouvés sur les ordinateurs Windows et Mac.

Pas

Partie 1 de 6:
Ajout d`une tête à votre HTML
  1. Image intitulée 4082 1 2
1. Ouvrir un éditeur de texte. Sur un ordinateur exécutant le système d`exploitation Windows, vous utiliserez généralement un bloc-notes, ou NotePad ++, tandis que les utilisateurs de MacOS utiliseront des utilisateurs TextEdit et Chromos utiliseront du texte:
  • les fenêtres - Ouvert Démarrer
Image intitulée windowsstart.jpg
, tapez bloc-notes, ou alors bloc-notes++ et cliquez sur Bloc-notes ou alors "Notepad ++ ou sublime" en haut de la fenêtre.
  • macos - Cliquez sur Projecteur
    Image intitulée MacSpotlight.jpg
    , tapez texte, et double-cliquez Texte En haut des résultats.
  • Chromeos - Ouvrez le lanceur, puis cliquez sur Text. (L`icône dit Code Pad).
  • Image intitulée 4082 2 2
    2. Tapez et appuyer sur ↵ Entrez. Cela indique au navigateur Web qu`il s`agit d`un document HTML.
  • Image intitulée 4082 3 2
    3. Tapez et appuyez sur ↵ Entrez. Cette étiquette d`ouverture pour votre code HTML.
  • Image intitulée 4082 4 2
    4. Tapez et appuyez sur ↵ Entrez. Ceci est la balise qui ouvre votre tête HTML. Les informations HTML Head qui ne sont généralement pas affichées sur votre page Web. Ces informations peuvent inclure, le titre, les métadonnées, les feuilles de style CSS et d`autres langages de script.
  • Image intitulée 4082 5 2
    5. Tapez . Ceci est la balise pour ajouter un titre à votre page.
  • Image intitulée 4082 6 2
    6. Tapez un titre pour votre page Web. Cela peut être n`importe quel titre que vous souhaitez nommer votre page Web.
  • Image intitulée 4082 7 2
    7. Tapez et appuyez sur ↵ Entrez. Ceci est la balise pour fermer votre étiquette de titre.
  • Image intitulée 4082 8 2
    8. Tapez et appuyez sur ↵ Entrez. C`est la balise pour fermer la tête. Votre code HTML devrait ressembler à quelque chose comme ça.
    • Partie 2 de 6:
    Ajouter un corps et un texte à votre HTML
    1. Image intitulée 4082 9 2
    1. Tapez ci-dessous le fermé "Diriger" étiqueter. Cette balise ouvre le corps de votre document HTML. Tout ce qui va dans les affichages du corps HTML sur la page Web.
  • Image intitulée 4082 10 2
    2. Tapez . Ceci est la balise pour ajouter un titre à votre document HTML. Un t-à-tête est un grand texte audacieux qui va généralement en haut de votre document HTML.
  • Image intitulée 4082 11 2
    3. Tapez un titre pour votre page. Cela peut être le titre de votre page ou d`un message d`accueil.
  • Image intitulée 4082 12 2
    4. Tapez après votre text-texte et appuyez sur ↵ Entrez. Cette balise ferme votre position.
  • Ajoutez des titres supplémentaires comme vous allez. Il y a six titres différentes que vous pouvez créer en utilisant les balises via. Ceux-ci créent des en-têtes de différentes tailles. Par exemple, pour créer trois titres de taille différente successives, vous pouvez écrire ce qui suit:
  • Les en-têtes montrent la priorité ou l`importance du texte. Mais ce n`est pas nécessaire d`utiliser un titre plus élevé si vous souhaitez utiliser une position inférieure. On peut utiliser directement H3, même s`il n`y a pas de H1 dans votre post.
  • Image intitulée 4082 13 2
    5. Taper . C`est la balise pour ouvrir un paragraphe. Le texte du paragraphe est utilisé pour afficher du texte de la taille normale.
  • Image intitulée 4082 14 2
    6. Tapez du texte. Cela peut être une description de votre page Web ou de toute autre information que vous souhaitez partager.
  • Image intitulée 4082 15 2
    7. Tapez après votre texte et appuyez sur ↵ Entrez. Cette étiquette pour fermer votre texte de paragraphe. Ce qui suit est un exemple de texte de paragraphe dans HTML:
  • Vous pouvez ajouter plusieurs lignes de paragraphe d`affilée afin de créer une série de paragraphes sous un titre.
  • Vous pouvez modifier la couleur de tout texte en encadrant le texte avec les balises et les balises. Assurez-vous de taper votre couleur préférée dans le "Couleur" section (vous garderez les citations). Vous pouvez transformer n`importe quel texte (e.g., en-têtes) dans une couleur différente avec cet ensemble de tags. Par exemple, pour transformer le texte du paragraphe bleu, vous écririez le code suivant:

    Les baleines sont des créatures majestueuses.

  • Vous pouvez ajouter des formats audacieux, italiques et autres formats de texte à l`aide de HTML.Vous trouverez ci-dessous des exemples de la manière dont vous pouvez formater le texte à l`aide des balises HTML:
  • Si vous utilisez du texte audacieux et en italique pour mettre l`accent, non seulement pour le style, utilisez les éléments et les éléments au lieu de et . Cela facilite la compréhension de votre page Web lorsque vous utilisez des technologies comme un lecteur d`écran ou le mode de lecteur fourni dans certains navigateurs.
    • Partie 3 de 6:
    Ajout d`éléments supplémentaires à votre HTML
    1. Image intitulée 4082 16 2
    1. Ajouter une photo à votre page. Vous pouvez ajouter une image à votre HTML en utilisant les étapes suivantes:
    • Taper Pour ouvrir votre étiquette d`image.
    • Copier et coller l`URL de l`image après le "Englisons" Signer des guillemets.
    • Taper > Après l`URL de l`image pour fermer votre étiquette d`image. Par exemple, si l`URL de l`image est "http: // ma photo.com / lac", Vous écririez ce qui suit:
  • Image intitulée 4082 17 2
    2. Lien vers une autre page. Vous pouvez ajouter un lien à votre HTML en utilisant les étapes suivantes:
  • Taper Pour ouvrir votre étiquette de lien.
  • Copier et coller l`URL après le "Englisons" Signer des guillemets.
  • Taper > Après l`URL pour fermer la partie de liaison du HTML.
  • Tapez un nom pour le lien après le support de fermeture.
  • Tapez après le nom de lien pour fermer le lien HTML. Ce qui suit est un exemple de lien vers Facebook.
  • Image intitulée 4082 18 2
    3. Ajouter une pause de ligne à votre HTML. Vous pouvez ajouter une pause de ligne en tapant
    à votre HTML. Cela crée une ligne horizontale pouvant être utilisée pour diviser différentes sections de votre page.
    • Partie 4 de 6:
    Personnalisation des couleurs
    1. Image intitulée 4082 19 3
    1. Consultez la liste des noms et codes de couleur HTML officiels. Le consortium Web mondial (W3C) gère une liste officielle de couleurs que vous trouverez à https: // w3.Org / wiki / CSS / Propriétés / Couleur / Mots-clés. Chaque couleur a un nom officiel, un code hexadécimal à 6 chiffres et une valeur décimale. Vous pouvez utiliser l`une de ces valeurs pour ajouter de la couleur aux éléments de votre page Web. Pour cet exemple, nous utiliserons les noms de couleur officiels.
  • Image intitulée 4082 20 3
    2. Définir la couleur d`arrière-plan dans la balise. Vous le ferez en ajoutant le style attribut à la balise. Disons que vous vouliez faire la couleur de fond de la page entière lavande:
  • Image intitulée 4082 21 3
    3. Définissez la couleur du texte pour n`importe quelle balise. Vous pouvez également utiliser le style attribut pour spécifier quelle couleur vous souhaitez que tout texte dans une balise particulière soit. Par exemple, disons que vous vouliez faire le texte dans l`une de vos tags bleu nuit:
  • Le changement de couleur n`affectera que le texte de cette balise. Si vous commencez une autre étiquette plus tard, cela devrait également être bleu nuit, Vous aurez besoin de définir l`attribut de style ainsi que.
  • Image intitulée 4082 22 3 3
    4. Définir la couleur d`arrière-plan pour un en-tête ou un paragraphe. Semblable à la manière dont vous définissez la couleur d`arrière-plan pour la balise corporelle, vous pouvez également définir des couleurs d`arrière-plan pour d`autres tags. Disons que vous vouliez faire la couleur de fond d`un gris clair, et la couleur de fond d`un en-tête de style H1 LightskyBlue, Vous utiliseriez:
    • Partie 5 de 6:
    Fermer votre document HTML
    1. Image intitulée 4082 19 2
    1. Tapez pour fermer votre corps. Une fois que vous avez fini d`ajouter tout votre texte, vos images et d`autres éléments au corps de votre document HTML, ajoutez cette balise au bas de votre document HTML pour fermer le corps de votre document HTML.
  • Image intitulée 4082 20 2
    2. Tapez pour fermer votre document HTML. Cette balise passe sous la balise pour fermer votre corps HTML à la fin de votre document HTML. Ceci indique au navigateur Web qu`il n`y a plus de code HTML après cette balise. Votre document HTML complet devrait ressembler à ceci:
    • Partie 6 de 6:
    Sauver et ouvrir votre page Web
    1. Image intitulée 4082 21 2
    1. Convertissez votre document en texte brut (utilisateurs Mac uniquement). Clique le Format élément de menu en haut de l`écran, puis cliquez sur Faire du texte simple Dans le menu déroulant résultant.
    • Cette étape n`est ni nécessaire ni possible sur Windows.
  • Image intitulée 4082 22 2
    2. Cliquez sur Déposer. C`est dans la barre de menus en haut de l`écran.
  • Image intitulée 4082 23 2 2
    3. Cliquez sur Enregistrer sous. C`est dans le menu déroulant ci-dessous "Déposer".
  • Alternativement, vous pouvez appuyer sur Ctrl+S (Windows) ou commande+S (Mac) pour le faire.
  • Image intitulée 4082 24 2
    4. Entrez un nom pour votre document HTML. Tapez tout ce que vous voulez nommer votre document dans le "Nom de fichier" (Windows) ou "Nom" (Mac) Boîte de texte.
  • Image intitulée 4082 25 2
    5. Changer le type de fichier du document. Vous devrez modifier le document d`un fichier texte vers un fichier HTML. Utilisez les étapes suivantes pour modifier le type de fichier:
  • les fenêtres - Clique le "Sauvegarder comme type" Boîte Drop-Bas, cliquez sur Tous les fichiers, puis tapez .html À la fin du nom du fichier.
  • Macos - Remplace le .SMS à la fin du nom du fichier avec .html plutôt.
  • Chromeos - Clique le "Enregistrer sous" bouton. Nommez le fichier avec .html à la fin. Le début est à vous.
  • Image intitulée 4082 26 2 2
    6. Cliquez sur Sauvegarder. C`est au bas de la fenêtre. Cela créera un fichier HTML.
  • Les fichiers HTML sont généralement ouverts avec votre navigateur Web par défaut.
  • Image intitulée 4082 27 2
    7. Fermez votre éditeur de texte. À ce stade, vous êtes prêt à ouvrir votre fichier HTML dans votre navigateur afin de pouvoir afficher votre page Web.
  • Image intitulée 4082 28 2
    8. Ouvrez le document HTML avec votre navigateur. Dans la plupart des cas, vous serez capable de double-cliquer sur le document HTML pour le faire. Si vous avez double-cliquer sur le document entraîne une erreur, procédez comme suit:
  • les fenêtres - Cliquez avec le bouton droit sur le document, sélectionnez Ouvrir avec, et cliquez sur votre navigateur préféré.
  • Mac - Cliquez sur le document une fois, cliquez sur Déposer, sélectionner Ouvrir avec, et cliquez sur votre navigateur préféré.
  • Image intitulée 4082 29 2
    9. Modifier le document HTML si nécessaire. Vous remarquerez peut-être une erreur dans votre page HTML. Pour le changer, vous pouvez modifier le texte du document HTML:
  • Sous Windows, vous pouvez cliquer avec le bouton droit sur le document et cliquer sur Éditer Dans le menu déroulant résultant (si vous avez installé Notepad ++ installé, cela dira Modifier avec le bloc-notes++ plutôt).
  • Sur Mac, vous voudrez cliquer sur le document pour le sélectionner, cliquez sur Déposer, sélectionner Ouvrir avec, et cliquez sur Texte. Vous pouvez également faire glisser le document en TextEdit.
  • Sur Chromebook, fermez l`application de texte, ouvrez des fichiers, trouvez votre fichier, puis cliquez dessus.

    • Échantillon HTML

    Feuille de triche HTML
    Exemple WebPage avec HTML

    Vidéo

    En utilisant ce service, certaines informations peuvent être partagées avec YouTube.

    Conseils

    Les balises doivent toujours être fermées dans une image miroir de leurs homologues ouverts. Par example, devrait être fermé comme .
  • Vous pouvez ajouter du texte de défilement latéral sur votre site Web à l`aide de la balise, mais gardez à l`esprit que cette balise pourrait ne pas être reconnue par certains navigateurs.
  • Beaucoup de gens Bloc-notes++ écrire et compiler leur code.
  • Si vous souhaitez centrer une image dans votre page, vous pouvez taper après le nom de l`image dans le img tag (par exemple,).

    • Mises en garde

    Il est préférable d`héberger vos propres images sur Imgur ou similaire si vous prévoyez de télécharger des images sur votre page Web. Poster des images d`autres personnes peut entraîner une violation du droit d`auteur.
    Articles connexes