Commencer avec votre site web peut être une tâche intimidante. C'est particulièrement vrai si vous avez une expérience limitée en création de sites web. Pour vous aider à démarrer, Dynadot fournit hébergement gratuit d'une page avec chaque achat de domaine. Notre hébergement d'une page comprend un "wizard" pour aider les personnes qui ne connaissent pas HTML à construire leurs sites web. Cependant, notre assistant ne vous permet pas de faire autant pour votre site que HTML, voici donc quelques bases pour vous aider à démarrer* :

gras
italique
souligné

Taille de police
Le moyen le plus simple de changer la taille de la police est d'utiliser ces balises :

<big>augmente la police d'une taille</big>
réduit la police d'une taille

Si vous avez besoin d'agrandir ou de réduire davantage votre police, vous pouvez utiliser ces balises plus spécifiques :

augmente la taille de la police du nombre entre guillemets
diminue la taille de la police du nombre entre guillemets

Vous pouvez également être encore plus précis avec la taille de votre police en spécifiant un nombre de 1 à 7 comme taille de police, 1 étant la plus petite taille et 7 la plus grande :

plus petite police 8 pt
plus grande police 36 pt

Une autre option pour la taille de police est d'utiliser les balises d'en-tête 1-6, qui ajoutent également de l'espacement autour du texte :

<h1>en-tête le plus grand</h1>

<h6>en-tête le plus petit</h6>

Couleur de police
En plus de changer la taille de votre police, vous pouvez aussi ajuster la couleur.

bleu
rouge

Si vous voulez utiliser une nuance différente de rouge ou de bleu, vous pouvez saisir un nombre hexadécimal à six chiffres au lieu des mots "red" ou "blue." Toutes les couleurs sont composées de rouge, bleu et vert, et chaque couleur a son propre "code." Les deux premiers chiffres (ou parfois lettres) du code représentent le rouge, puis les deux suivants représentent le vert, et les deux derniers représentent le bleu. Vous pouvez télécharger Color Cop pour PC ou Mètre de couleur numérique pour Mac et utilisez ces produits pour survoler n'importe quelle couleur sur votre écran et il vous donnera le code dont vous avez besoin. Par exemple, si vous deviez utiliser le code pour le bleu que vous voyez ci-dessus, cela ressemblerait à ceci :

même bleu
et voici un exemple d'une autre nuance de bleu que vous pouvez choisir en utilisant le code

Police de caractères
Enfin, vous pouvez changer la police de votre texte. Vous pouvez utiliser Microsoft Word si vous avez besoin d'idées.

police arial
police comic sans ms
lucida handwriting

Maintenant, vous devrez tout assembler. Pour tout ce qui contient le mot "font", vous pouvez simplement mettre toutes les informations dans une seule balise. Si vous souhaitez utiliser les balises d'en-tête ou ajouter du gras, de l'italique ou du soulignement, vous pouvez les ajouter dans leur propre balise.

vous pouvez tout assembler

vous pouvez tout mettre en gras

ou vous pouvez mettre en gras partie de celui-ci

Espacement
Maintenant que vous pouvez ajuster votre police, vous voudrez créer des paragraphes, des sauts de ligne et, dans certains cas, vous devrez peut-être ajouter manuellement des espaces :

utiliser les balises de paragraphe place votre texte dans son propre paragraphe...

...et sur la ligne suivante

Utiliser des sauts de ligne, c'est comme... 
...en appuyant sur entrée pour passer à la ligne suivante et contrairement à tout le reste sur cette page, il n'a pas besoin de balise fermante (ceci est une balise fermante ). Vous pouvez simplement le saisir à nouveau... 
...pour passer à la ligne suivante encore.

Vous n'aurez pas besoin d'utiliser de code pour les espaces entre le texte (comme avec la barre d'espace) sauf si vous voulez ajouter des espaces supplémentaires, car HTML ne reconnaîtra qu'un seul espace même si vous en mettez plusieurs avec votre barre d'espace. Pour créer un espace entre le texte, vous pouvez utiliser le code :  

Liens
Une chose que vous voudrez probablement ajouter à votre site web sont des liens vers d'autres pages de votre site ou même d'autres sites web. Les liens sont faciles à ajouter en utilisant ce code :

<a href="http://www.dynadot.com">ceci renvoie à la page d'accueil de Dynadot</a>

Vous remarquerez peut-être que si vous cliquez sur le lien ci-dessus, il s'ouvre dans un onglet ou une fenêtre séparée de votre navigateur, selon vos paramètres. C'est facile à ajouter et recommandé si vous créez un lien vers un autre site ou si vous ne voulez pas perdre des visiteurs sur une page spécifique (comme un blog), car cela garde cette page ouverte pour que vos clients puissent y revenir sans avoir à cliquer sur le bouton retour de leur navigateur. Il suffit d'ajouter target="_blank" après votre lien :

<a href="http://www.dynadot.com" target="_blank">ceci renvoie à la page d'accueil de Dynadot</a>

Images
Enfin, vous voudrez peut-être ajouter des images à votre site. Pour ajouter une image avec HTML, vous devrez l'héberger quelque part. Si vous n'avez pas d'endroit pour héberger l'image vous-même, vous pouvez utiliser un service comme Tiny Pic.com qui vous permet de télécharger vos images gratuitement et génère la balise HTML pour vous. Si vous ne voulez pas créer de compte, vous pouvez simplement enregistrer le HTML généré (mais ne l'enregistrez pas dans Microsoft Word, car Word ajoute parfois des éléments qui empêchent le code de fonctionner). Notez que certaines images sont très volumineuses et vous voudrez peut-être les optimiser pour qu'elles prennent moins d'espace. Il existe des optimiseurs d'images gratuits que vous pouvez utiliser pour réduire la taille de vos images, tels que Image Optimizer.net. Voici un exemple d'une balise image basique :
<img src="https://i45.tinypic.com/9bkglk.jpg"> qui ressemble à ceci : Dynadot logo

Vous pouvez également ajouter des bordures à votre image, changer sa taille et ajouter de l'espacement autour :

<img src="https://i45.tinypic.com/9bkglk.jpg" border="2" width="100" height="30" vspace="10" hspace="20" align="left">

Comme vous pouvez le voir, l'image a une bordure, est plus large et plus courte, et a été espacée autour du haut et du bas ainsi que de la droite et de la gauche. Elle est également alignée à gauche, donc le texte apparaît maintenant à côté de l'image.

Vous pouvez également ajouter un lien à votre image. Il vous suffit de mettre les balises de lien autour de la balise d'image comme ceci :

<a href="http://www.dynadot.com" target="_blank"><img src="https://i45.tinypic.com/9bkglk.jpg" border="0"></a>
Maintenant, vous pouvez cliquer sur cette image et elle vous amène à notre page d'accueil :

Cela ajoute parfois une bordure autour de l'image dans la couleur bleue que vous voyez sur les liens texte. Pour la supprimer, ajoutez simplement border="0" à votre balise image. Vous remarquerez peut-être aussi que le HTML généré par Tiny Pic.com a alt="Image and video hosting by Tiny Pic" dans la balise image. Vous pouvez l'utiliser pour ajouter du texte à votre image au cas où elle ne s'affiche pas correctement dans le navigateur de quelqu'un. Ajouter un texte alternatif peut aussi aider au référencement (SEO).

Maintenant que vous vous sentez, espérons-le, plus à l'aise avec HTML, vous pouvez mettre vos compétences à l'épreuve sur votre site web. Mais avant de sauvegarder avec du HTML potentiellement imparfait, nous vous suggérons de tester votre HTML avec un service gratuit comme onlinehtmleditor.net. Il y a même quelques boutons HTML faciles en haut pour vous aider. Maintenant, il vous suffit d'obtenir votre domaine si vous n'en avez pas encore et commencez avec votre site web aujourd'hui !

*Veuillez noter que la balise font est obsolète et peut ne pas s'afficher correctement dans tous les navigateurs. Il est préférable de définir le style de police en CSS, ce que nous aborderons dans un prochain article de blog.

Posté par Robyn Norgan

Basic HTML - Getting Started with Your Website

<h1>en-tête le plus grand</h1>

<h6>en-tête le plus petit</h6>