Page Web Bare Bones : 10 étapes

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:09

Aujourd'hui, nous allons créer une page Web très simple et simple à partir de zéro. Nous parlerons des éléments HTML, du style de votre page web (couleurs, polices, alignement, etc.), et enfin comment insérer une image dans votre page web !

À la fin de cette instructable, vous aurez les compétences de base pour créer une page Web à partir de zéro et découvrir que le codage n'est pas aussi difficile qu'il y paraît !

Étape 1: Utilisation du Bloc-notes

Nous allons utiliser le Bloc-notes sous Windows pour créer notre première page Web. Bien que n'importe quel éditeur de texte convienne, le bloc-notes est pré-installé sur les machines Windows, c'est donc un excellent point de départ.

Pour ouvrir le bloc-notes, accédez à votre barre de recherche dans le coin inférieur gauche de votre écran et tapez « Bloc-notes ». Sélectionnez ensuite l'application "Bloc-notes" qui apparaît dans les résultats de la recherche. Une nouvelle fenêtre devrait s'ouvrir.

Étape 2: Ajout de l'arborescence du document HTML de base

Toutes les pages Web doivent suivre une structure squelettique standard pour que votre navigateur Web (Chrome, Firefox, Edge, Internet Explorer, Safari…) puisse traiter et afficher votre page Web.

C'est ce qu'on appelle l'arborescence des documents html. Dans le Bloc-notes, saisissez les "éléments" ou les "balises" html tels qu'ils sont affichés dans la capture d'écran. N'hésitez pas à copier-coller également:

Étape 3: Enregistrer en tant que page.html

Maintenant que nous avons notre structure html de base dans le Bloc-notes, enregistrons-la pour ne perdre aucun travail et pour que nous puissions voir nos modifications au fur et à mesure que nous progressons le long de l'Instructable.

1. Sélectionnez 'Fichier' > 'Enregistrer sous…' (Capture d'écran 1)
2. Changez le type de fichier en "Tous les fichiers" (capture d'écran 2)
3. Donnez à votre fichier un nom de votre choix. Assurez-vous de noter où vous enregistrez le document sur votre ordinateur afin de pouvoir l'ouvrir plus tard. REMARQUE: La partie la plus importante de l'enregistrement de ce fichier consiste à ajouter ".html" à la fin du nom du fichier. Cela permettra à votre ordinateur de le reconnaître comme une page Web. Donc, si vous voulez nommer votre fichier "my_webpage", assurez-vous d'ajouter.html à la fin, par exemple. "ma_page.html"

Étape 4: Ajout d'un titre à votre page Web

Nous avons donc la structure html de base nécessaire aux navigateurs Web pour interpréter et afficher notre page Web, mais nous n'avons aucun contenu. Changeons ça !

La première chose à faire est de donner un titre à notre page Web. La plupart des pages Web ont un titre. C'est ce qui s'affiche sur l'onglet de votre navigateur Web (voir capture d'écran). Je vais donner à ma page Web le titre « Site Web de Taylor ». Pour ce faire, nous devons ajouter un élément 'title'.

Site Web de Taylor

À ce stade, vous remarquerez que chaque balise a une balise « ouverture » et une balise « fermeture ». Tel que

et.

Il s'agit de discerner où commence le titre et où il se termine. Presque toutes les balises html suivent cela, mais il y a quelques exceptions.

Étape 5: Ajouter du contenu à votre page Web

Eh bien, nous avons un titre pour notre page Web, mais nous n'avons toujours pas de contenu réel pour cela. Ajoutons un peu de flair !

Nous avons ajouté un titre à notre page Web en utilisant un élément 'title'. Donnons à notre page Web un gros en-tête qui attire l'attention en utilisant un élément 'h1' qui est un élément d'en-tête.

Site Web de Taylor

Bienvenue sur ma page web

Étape 6: Affichage de nos modifications jusqu'à présent

Nous avons un titre, nous avons du contenu, regardons notre page Web pour savoir comment cela se passe jusqu'à présent.

1. Enregistrez votre fichier dans le bloc-notes
2. Allez à l'endroit où vous avez enregistré votre fichier et double-cliquez dessus. Il devrait s'ouvrir automatiquement dans votre navigateur Web par défaut. Vous cherchez bien !

Étape 7: Ajout d'une balise de paragraphe

Nous avons un titre, un titre, ajoutons maintenant un paragraphe avec un peu plus de texte. Le nom de l'élément d'un paragraphe est 'p'. Vous pouvez voir son utilisation ci-dessous:

Site Web de Taylor

Bienvenue sur ma page web

Aujourd'hui, nous allons apprendre à créer cette page Web très simple !

Remarque: Vous pouvez afficher vos modifications à tout moment en enregistrant le bloc-notes et en ouvrant le fichier.

Étape 8: Donnez-lui de la couleur

Nous avons notre page Web qui avance, mais c'est assez simple. Donnons de la couleur à notre balise de paragraphe !

Nous pouvons colorer différents éléments en ajoutant un attribut 'style' à la balise 'p' comme détaillé ci-dessous:

Site Web de Taylor

Bienvenue sur ma page web

Aujourd'hui, nous allons apprendre à créer cette page Web très simple !

Étape 9: Ajout d'une image

Qu'est-ce qu'un site web sans images ? Ajoutons une image à notre site Web!

La première étape consiste à trouver une image que vous aimez. J'ai utilisé google images pour rechercher un golden retriever. Tirez l'image vers le haut et assurez-vous que l'url se termine par.jpg,.png,.gif,.jpg, etc.

Une fois que vous avez choisi votre image, nous devons l'ajouter à la page html à l'aide d'une balise 'img'. Mon image est:

Ajoutez-le à votre page en utilisant une balise 'img' avec un attribut 'src':

Site Web de Taylor

Bienvenue sur ma page web

Aujourd'hui, nous allons apprendre à créer cette page Web très simple !

Étape 10: Affichage du produit final

Enregistrez le fichier du bloc-notes et ouvrez le produit final. Vous devriez voir votre page web !