Contenu

• Pas
• Partie 1: Comment j'ai découvert le HTML
• Conseil
• avertissement
• De quoi as-tu besoin

HTML (HyperText Markup Language) est un langage de base pour la création de pages Web. Il a été créé comme un langage de codage simple et flexible. Presque tous les sites Web sur Internet sont développés avec une certaine forme de ce code (ColdFusion, XML, XSLT). Le HTML est facile à comprendre, mais vous pouvez continuer à en apprendre davantage sur lui pendant longtemps si vous êtes intéressé par ses fonctionnalités complètes. Pour ajouter de la couleur et du plaisir à votre site Web, vous pouvez apprendre le CSS de base dès que vous vous habituez à une page HTML de base.

Pas

Partie 1 sur 4: Créer un document

1. 

   Ouvrez un éditeur de texte simple. NotePad est une bonne option et peut être téléchargé gratuitement. Vous pouvez écrire du HTML avec la plupart des éditeurs de texte, mais des logiciels plus complexes avec des capacités de formatage automatique peuvent rendre difficile l'organisation de votre page HTML.
   • N'utilisez pas TextEdit, car il enregistre généralement le fichier dans un format que votre navigateur peut ne pas reconnaître comme HTML.
   • Vous pouvez également utiliser un éditeur HTML en ligne. Les programmes d'édition HTML dédiés ne sont pas recommandés pour les débutants.

2. 

   
   
   Enregistrez un fichier en tant que page Web. Choisissez Fichier → Enregistrer sous dans le menu en haut. Modifiez le format de fichier en "Page Web", ".html" ou ".htm". Enregistrez le fichier où vous pouvez le trouver facilement.
   • Il n'y a aucune différence entre ces trois options.

3. 

   Ouvrez le fichier dans un navigateur. Double-cliquez sur le fichier et il s'ouvrira automatiquement en tant que page Web vierge dans votre navigateur. Vous pouvez également ouvrir un navigateur, comme Firefox ou Internet Explorer, puis utiliser Fichier → Ouvrir un fichier pour sélectionner le document.
   • Ce site Web n'est pas en ligne. Il n'est visible que sur votre ordinateur.

4. 

   
   
   Actualisez la page Web et consultez les modifications apportées. Tapez ce qui suit dans votre document vierge: Bonjour. Enregistrez le document. Actualisez la page Web vierge dans votre navigateur et vous devriez voir le mot «Bonjour» en gras apparaître en haut de la page. Chaque fois que vous souhaitez tester votre nouveau code HTML au cours de ce didacticiel, enregistrez le document .htm, puis actualisez la fenêtre de votre navigateur pour voir comment le HTML est compilé.
   • Si vous voyez les mots ""et"'' Apparaît dans votre navigateur, le fichier n'a pas été compilé correctement en HTML. Essayez un autre éditeur de texte ou un autre navigateur.

5. 

   
   
   Apprenez les balises. Les commandes HTML sont écrites dans des "balises" qui indiquent au navigateur comment compiler et afficher votre page Web. Ils sont toujours écrits entre guillemets simples , et ne sont pas affichés sur la page Web comme vous les avez utilisés dans l'exemple ci-dessus:
   • est une "carte de départ" ou une "carte d'ouverture". Tout ce qui est écrit après cette balise sera défini comme "gras" (gras sur une page Web).
   • est une "balise de fin" ou "balise de fermeture", que vous pouvez distinguer par le symbole / signe. Il indique la fin du texte en gras. La plupart des balises (pas toutes) ont besoin d'une balise de fin pour fonctionner, alors assurez-vous de l'inclure.

6. 

   Construisez votre document. Supprimez tout dans votre document HTML. Recommencez avec le texte suivant, exactement tel qu'il a été écrit (sans les puces). Ce code HTML indique au navigateur le type de HTML que vous utilisez et que tout votre code HTML sera placé à l'intérieur des balises. et .

7. 

   Ajoutez les balises head (head) et body. Les documents HTML sont divisés en deux parties. La section "top" est pour des informations spéciales, comme le titre de la page. La section "corps" contient le contenu principal de la page. Ajoutez ces deux sections à votre document et n'oubliez pas d'inclure les balises de fin. Le texte nouvellement ajouté est en gras:

8. 

   Donnez un titre à votre page. La plupart des cartes de la section principale ne sont pas importantes à apprendre avec un débutant. La balise de titre est cependant facile à utiliser et déterminera ce qui apparaîtra comme le nom de la fenêtre du navigateur ou sur l'onglet du navigateur. Placez vos balises de début et de fin de titre à l'intérieur des balises head, et écrivez les en-têtes que vous aimez entre ces balises:
   publicité

Partie 2 sur 4: Formatage du texte

1. 

   Ajoutez du texte à votre corps. Pour cette section, nous ne travaillerons qu'avec des balises de corps. L'autre texte sera toujours dans votre document, mais nous économiserons de l'espace en ne le répétant pas dans ce didacticiel. Écrivez ce que vous voulez entre les cartes et , et il apparaîtra comme le premier contenu de votre page. Par exemple:
   • J'ai suivi les instructions de wikiHow pour écrire une page HTML.

2. 

   Ajoutez des en-têtes pour le texte. Organisez votre page avec des balises d'en-tête, qui indiquent au navigateur d'afficher le texte entre elles dans une taille de police plus grande. Ces balises sont également utilisées par les moteurs de recherche et d'autres outils pour déterminer en quoi consiste votre site Web et comment il est organisé.
   est le plus grand en-tête, et vous pouvez créer des en-têtes plus petits jusqu'à
   . Essayez-les sur votre page:
   • Bienvenue sur ma page.

   • J'ai suivi les instructions de wikiHow pour écrire une page HTML.

   • Mon objectif aujourd'hui:

   • Objectifs atteints:

   • Apprenez à utiliser les titres.

   • Objectifs inachevés:

   • En savoir plus sur les balises de mise en forme du texte.

3. 

   En savoir plus sur les balises de mise en forme du texte. Vous avez déjà vu la balise "forte", mais il existe de nombreuses autres façons de mettre en forme votre texte. Essayez ces balises ou avec plusieurs balises à la fois pour la même chaîne de texte. N'oubliez pas d'ajouter des balises de fin à l'arrière!
   • Texte important, affiché en gras dans le navigateur.
   • Texte accentué, affiché en italique dans le navigateur.
   • Texte un peu plus petit que d'habitude. Ce texte sera automatiquement redimensionné s'il est utilisé dans un titre.
   • Le texte n'est plus pertinent, affiché avec un tiret corporel.
   • Le texte est inséré plus tard que les autres documents, affiché avec des soulignements.

4. 

   Organisez le texte sur votre page. Vous avez peut-être remarqué que le fait d'appuyer sur la touche "Entrée" ne suffit pas pour que le texte apparaisse sur une autre ligne. Ces balises peuvent vous aider à créer des paragraphes et des sauts de ligne, ou à organiser votre texte de différentes manières:

   • Abréviation de «paragraphe», cette balise conservera tout le texte entre ces balises dans un paragraphe et le séparera du texte au-dessus et en dessous.

   • 
     Cette balise générera des sauts de ligne. N'ajoutez pas de balise de fin, car cela n'interfère avec aucun autre contenu. Utilisez cette balise dans les poèmes ou les lignes d'adresse, pas dans les paragraphes.

   • Si vous avez besoin d'afficher le texte très précisément, cette balise définit le texte qu'il contient sur une police de largeur fixe (chaque lettre a la même largeur), et vous permet de créer des intervalles des blancs et des sauts de ligne comme vous le souhaitez pour une édition régulière au lieu d'utiliser des balises.

   • Cette balise définit le type de texte cité à partir d'une source.

     Vous pouvez décrire la source plus tard avec citer la carte.

5. 

   Ajoutez un texte de légende invisible. Les balises de commentaire ne sont pas affichées sur la page Web. Ils vous permettent de vous annoter dans le document HTML sans affecter le contenu. N'ajoutez pas de balise de fin.
   • Les cartes qui vont seules sans balises de fin sont appelées «balises vides».

6. 

   Combinez-les ensemble. La meilleure façon de se souvenir de ces balises est de les utiliser sur votre site Web. Voici un exemple utilisant les cartes dans les étapes que vous avez apprises jusqu'à présent. Essayez de prédire comment ils apparaîtront dans le navigateur, puis copiez-les dans votre document et découvrez-le.
   • Bienvenue sur mon site web.

   • J'espère que vous apprécierez cette page!

     Je l'ai fait juste pour toi.

   • Partie 1: Comment j'ai découvert le HTML

   • J'ai déjà appris le HTML en un deuxheures, alors maintenant je suis un expert.
   publicité

Partie 3 sur 4: Ajout de liens et d'images

1. 

   Renseignez-vous sur les attributs. Les balises peuvent contenir des informations supplémentaires, appelées attributs. Ces attributs sont représentés par des mots supplémentaires dans les balises elles-mêmes, sous la forme property name = "valeur spécifique". Par exemple, toute balise HTML peut avoir l'attribut title:

   • Le paragraphe d'introduction est ici.

     Titre du paragraphe «Introduction», qui apparaîtra lorsque vous survolerez le paragraphe sur la page Web.

2. 

   Liens vers d'autres sites Web. Utilisation de cartes pour créer un lien hypertexte vers toute autre page Web. Insérez l'URL de la page Web vers laquelle créer un lien à l'aide de l'attribut href. Voici un exemple qui renvoie à la page Web que vous lisez:
   • Vos visiteurs de votre site Web peuvent cliquer sur ce texte pour suivre le lien.

3. 

   Ajoutez un attribut id à la balise. Un autre attribut que toute balise HTML peut utiliser est l'élément "id". Dans n'importe quelle carte, écrivez id = "vidu" ou utilisez un nom qui ne contient aucun espace. Il ne produit aucun effet visible, mais nous l'utiliserons à l'étape suivante.
   • Par exemple, ajoutez ce qui suit à votre document:

     Ce paragraphe est utilisé comme exemple pour décrire le fonctionnement de l'attribut id.

4. 

   Lien vers un élément avec un certain identifiant. Nous pouvons maintenant utiliser la balise hyperlien, , pour créer un lien vers un autre emplacement sur la même page. Au lieu d'une URL, nous utiliserons le symbole #, suivi de la valeur de l'identifiant vers laquelle nous voulons établir un lien. Par exemple, Ce texte sera lié au texte avec l'identifiant «vidu».
   • Toutes les valeurs HTML sont sensibles à la casse. "#VIDU" et "#vidu" seront tous deux liés au même emplacement.
   • Si votre page est suffisamment courte pour afficher la page entière à la fois, vous ne remarquerez probablement rien lorsque vous cliquez sur le lien dans votre navigateur. Redimensionnez la fenêtre jusqu'à ce que la barre de défilement apparaisse, puis réessayez.

5. 

   Ajouter des photos. Carte est une balise vide, ce qui signifie qu'aucune balise de fin n'est nécessaire. Toutes les informations dont le navigateur a besoin pour afficher l'image sont ajoutées à l'aide d'attributs. Voici un exemple pour afficher le logo wikiHow, avec une description pour chaque attribut derrière:
   • 
   • Propriétés src = "" indique au navigateur où se trouve la photo. (Notez que publier une photo du site de quelqu'un d'autre est considéré comme inapproprié - et la photo disparaîtra lorsque la page ne sera plus active.)
   • Propriétés style = "" Il peut faire beaucoup de choses, mais surtout, il est utilisé pour définir la largeur et la hauteur d'une image en pixels. (Vous pouvez également utiliser les attributs séparés width = "" et height = "" à la place, mais cela peut entraîner d'étranges problèmes de redimensionnement si vous utilisez CSS.)
   • Propriétés alt = "" est une brève description de l'image que l'utilisateur verra si l'image n'a pas pu se charger. Ceci est considéré comme une exigence, car il est utilisé pour les lecteurs d'écran des visiteurs du site Web qui sont aveugles.
   publicité

Partie 4 sur 4: En savoir plus Ajout et mise en ligne de votre site Web

1. 

   Confirmez votre HTML. La validation HTML vérifie les erreurs dans votre code. Si votre site ne s'affiche pas correctement, la validation peut vous aider à trouver l'erreur à l'origine du problème. Il peut également vous en apprendre davantage sur le HTML en déterminant que le code est beau à l'affichage, mais il n'est plus recommandé en raison des nouvelles mises à jour de la norme HTML. L'utilisation de HTML non valide ne rend pas votre site inutile, mais peut causer des problèmes ou s'afficher instable sur différents navigateurs.
   • Essayez un service de validation en ligne gratuit du W3C ou recherchez un autre outil de validation HTML 5 en ligne.

2. 

   En savoir plus sur les balises et les attributs. Il existe de nombreuses autres balises et attributs HTML, ainsi que de nombreux endroits pour les apprendre:
   • Essayez w3schools et HTML Dog pour plus de didacticiels et des listes complètes de balises.
   • Trouvez une page Web qui vous plaît dans son apparence, puis utilisez la fonction "Afficher la source de la page" de votre navigateur pour obtenir vous-même le code HTML. Copiez-le dans votre document et étudiez son fonctionnement.
   • Lisez d'autres articles et découvrez comment créer des tableaux en HTML, utilisez des balises Meta pour augmenter vos chances de les trouver via les moteurs de recherche ou utilisez une division. définir une zone sur la page) et une plage (utilisée pour spécifier le style de l'élément de texte) pour aider à styliser via CSS.

3. 

   Mettez votre site Web en ligne. Choisissez un service pour héberger votre site Web, puis vous pouvez télécharger autant de pages HTML que vous le souhaitez sur votre domaine Web personnel. Pour ce faire, vous devrez utiliser un logiciel de téléchargement FTP, mais de nombreux services de location Web offrent également ce service.
   • Lorsque vous créez un lien vers des pages ou des images qui se trouvent directement sur votre site, vous devrez utiliser l'adresse complète. Par exemple, si votre nom de domaine est www.chuyengiahtmlsieudang.com, alors le texte est dans ces balises créera un lien vers "www.chuyengiahtmlsieudang.com/nhatky/thuhai.html"

4. 

   Ajoutez des styles avec CSS. Si votre page HTML semble un peu monotone, essayez d'apprendre les bases du CSS pour ajouter des couleurs, différentes polices et un meilleur contrôle sur l'emplacement des éléments. Lier une "feuille de style" CSS à une page HTML vous permettra d'apporter des changements drastiques à la volée, en ajustant automatiquement le style de tout le texte dans une balise donnée. Vous pouvez jouer un peu avec la couche de formatage de base un peu ici, ou plonger dans des didacticiels plus détaillés dans le didacticiel CSS de HTML Dog.

5. 

   Ajoutez JavaScript à votre site Web. JavaScript est un langage de programmation utilisé pour ajouter de nombreuses fonctionnalités à vos pages HTML. Les commandes JavaScript sont insérées entre les balises de début et de fin et peut être utilisé pour ajouter des boutons interactifs, calculer des problèmes mathématiques, etc. Pour en savoir plus, consultez les exemples w3c. publicité

Conseil

• La déclaration doctype (déclaration de type de document utilisée) utilisée dans ce didacticiel est "transitionnelle HTML 4.0.1 lâche" (HTML 4.0.1 pas de transition serrée), un format facile. pour les novices à utiliser. Utilisation () une alternative au fait que le navigateur le compile dans un format HTML 5 strict, qui est le style standard recommandé (bien que moins couramment utilisé).

avertissement

• Le but du HTML est de conserver le contenu dans un format global. Il n'a aucun contrôle sur la présentation de votre site Web, comme la couleur d'arrière-plan et le placement exact des éléments. Bien qu'il existe encore des balises qui vous permettent de le faire, c'est une bonne idée d'utiliser CSS pour créer un site Web plus contrôlable et cohérent.

De quoi as-tu besoin

• Un éditeur de texte simple, comme NotePad ou TextEdit
• Un navigateur Web, par exemple Internet Explorer ou Mozilla Firefox
• (Facultatif) Un éditeur HTML tel qu'Adobe Dreamweaver, Aptana Studio ou Microsoft Expression Web